[SDK / Wallet UI] URI Connection (#4997)

Co-authored-by: Joaquim Verges <joaquim.verges@gmail.com>

Author: gregfromstl

apps/wallet-ui/src/app/[ecosystem]/(ui)/layout.tsx renamed to apps/wallet-ui/src/app/[ecosystem]/(authed)/layout.tsx

@@ -1,11 +1,9 @@
 import { ChainCombobox } from "@/components/ChainCombobox";
-import { getCurrentUser } from "@/lib/auth";
 import { getChains } from "@/lib/chains";
 import { client } from "@/lib/client";
 import { getEcosystemInfo } from "@/lib/ecosystems";
 import { SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS } from "@/util/simplehash";
 import type { Metadata, ResolvingMetadata } from "next";
-import { redirect } from "next/navigation";
 import { resolveName } from "thirdweb/extensions/ens";
 import { shortenAddress } from "thirdweb/utils";
 
@@ -34,23 +32,17 @@ export default async function Layout({
   children: React.ReactNode;
   params: { ecosystem: string; address: string };
 }) {
-  const userAddressPromise = getCurrentUser();
   const ensPromise = resolveName({
     client,
     address: params.address,
   });
   const thirdwebChainsPromise = getChains();
 
-  const [userAddress, ens, thirdwebChains] = await Promise.all([
-    userAddressPromise,
+  const [ens, thirdwebChains] = await Promise.all([
     ensPromise,
     thirdwebChainsPromise,
   ]);
 
-  if (userAddress !== params.address) {
-    redirect(`/wallet/${userAddress}`);
-  }
-
   const simpleHashChains = thirdwebChains.filter((chain) =>
     SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS.includes(chain.chainId),
   );

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/layout.tsx renamed to apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx

@@ -0,0 +1,18 @@
+import { AutoConnectWalletConnect } from "@/components/AutoConnectWalletConnect";
+import NftGallery from "@/components/NftGallery";
+import { getAddress } from "thirdweb";
+
+export default function Page({
+  params: { address },
+  searchParams: { chainId, uri },
+}: {
+  params: { address: string };
+  searchParams: { chainId?: string; uri?: string };
+}) {
+  return (
+    <>
+      <AutoConnectWalletConnect uri={uri} />
+      <NftGallery owner={getAddress(address)} chainId={Number(chainId)} />
+    </>
+  );
+}

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/loading.tsx renamed to apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/loading.tsx

@@ -5,9 +5,7 @@ export default async function Layout({
   children,
 }: { children: React.ReactNode }) {
   const userAddress = await getCurrentUser();
-  console.log("userAddress", userAddress);
   if (userAddress) {
-    console.log("redirecting to wallet", userAddress);
     redirect(`/wallet/${userAddress}`);
   }
 

apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx

@@ -1,33 +1,5 @@
-"use client";
-import { generatePayload, getCurrentUser, login, logout } from "@/lib/auth";
-import { client } from "@/lib/client";
-import { useTheme } from "next-themes";
-import { useRouter } from "next/navigation";
-import type { VerifyLoginPayloadParams } from "thirdweb/auth";
-import { ConnectEmbed } from "thirdweb/react";
-import { ecosystemWallet } from "thirdweb/wallets";
+import { ConnectEmbed } from "@/components/ConnectEmbed";
 
-export default function Page({ params }: { params: { ecosystem: string } }) {
-  const { theme } = useTheme();
-  const router = useRouter();
-
-  return (
-    <ConnectEmbed
-      theme={theme === "light" ? "light" : "dark"}
-      autoConnect={true}
-      wallets={[ecosystemWallet(`ecosystem.${params.ecosystem}`)]}
-      client={client}
-      auth={{
-        getLoginPayload: generatePayload,
-        doLogin: async (loginParams: VerifyLoginPayloadParams) => {
-          const success = await login(loginParams);
-          if (success) {
-            router.push(`/wallet/${loginParams.payload.address}`);
-          }
-        },
-        isLoggedIn: async () => !!(await getCurrentUser()),
-        doLogout: logout,
-      }}
-    />
-  );
+export default function Page() {
+  return <ConnectEmbed />;
 }

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/page.tsx

@@ -0,0 +1,17 @@
+// This page is to accept a Wallet Connect request
+import { getCurrentUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
+
+export default async function Page({
+  searchParams: { uri },
+}: {
+  searchParams: { uri: string };
+}) {
+  const currentUser = await getCurrentUser();
+
+  if (!currentUser) {
+    redirect(`/login?uri=${encodeURIComponent(uri)}`);
+  }
+
+  redirect(`/wallet/${currentUser}?uri=${encodeURIComponent(uri)}`);
+}

apps/wallet-ui/src/app/[ecosystem]/login/layout.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useWalletConnect } from "@/hooks/useWalletConnect";
+
+export function AutoConnectWalletConnect({ uri }: { uri?: string }) {
+  useWalletConnect({ uri });
+  return <></>;
+}

apps/wallet-ui/src/app/[ecosystem]/login/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { generatePayload, isLoggedIn, login, logout } from "@/lib/auth";
 import { client } from "@/lib/client";
 import { useTheme } from "next-themes";
 import {
@@ -24,14 +23,6 @@ export default function ConnectButton({
       wallets={[ecosystemWallet(ecosystem)]}
       client={client}
       theme={theme === "light" ? "light" : "dark"}
-      auth={{
-        getLoginPayload: generatePayload,
-        doLogin: async (p) => {
-          login(p);
-        },
-        isLoggedIn,
-        doLogout: logout,
-      }}
     />
   );
 }