[SDK / Wallet UI] URI Connection

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/layout.tsx → apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/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]/(authed)/wallet/[address]/page.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]/login/layout.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]/login/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]/wc/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/components/AutoConnectWalletConnect.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/components/ConnectButton.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,
-      }}
     />
   );
 }

apps/wallet-ui/src/components/ConnectEmbed.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { generatePayload, getCurrentUser, login, logout } from "@/lib/auth";
+import { client } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import type { VerifyLoginPayloadParams } from "thirdweb/auth";
+import { ConnectEmbed as ThirdwebConnectEmbed } from "thirdweb/react";
+import { ecosystemWallet } from "thirdweb/wallets";
+
+export function ConnectEmbed() {
+  const { theme } = useTheme();
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  return (
+    <ThirdwebConnectEmbed
+      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}?${searchParams.toString()}`,
+            );
+          }
+        },
+        isLoggedIn: async () => !!(await getCurrentUser()),
+        doLogout: logout,
+      }}
+    />
+  );
+}

apps/wallet-ui/src/hooks/useWalletConnect.tsx

@@ -0,0 +1,40 @@
+import { client } from "@/lib/client";
+import { useQuery } from "@tanstack/react-query";
+import { CheckIcon } from "lucide-react";
+import { toast } from "sonner";
+import { useActiveWallet } from "thirdweb/react";
+import {
+  createWalletConnectClient,
+  createWalletConnectSession,
+} from "thirdweb/wallets";
+
+export function useWalletConnect({ uri }: { uri?: string }) {
+  const wallet = useActiveWallet();
+
+  useQuery({
+    queryKey: ["wallet-connect", uri],
+    queryFn: async () => {
+      if (!wallet || !uri) throw new Error("Unreachable");
+      const wcClient = await createWalletConnectClient({
+        wallet: wallet,
+        client: client,
+      });
+
+      createWalletConnectSession({
+        walletConnectClient: wcClient,
+        uri,
+      });
+
+      toast.success("Wallet connected.", {
+        id: "wallet-connect",
+        icon: <CheckIcon className="h-4 w-4" />,
+        duration: 5000,
+      });
+
+      return true;
+    },
+    enabled: !!uri || !!wallet,
+  });
+
+  return;
+}

packages/thirdweb/src/wallets/wallet-connect/receiver/index.ts

@@ -187,6 +187,7 @@ export async function createWalletConnectClient(
   walletConnectClient.on(
     "session_proposal",
     async (event: WalletConnectSessionProposalEvent) => {
+      console.log("session_proposal", event);
       const { onSessionProposal } = await import("./session-proposal.js");
       await onSessionProposal({
         wallet,
@@ -207,6 +208,7 @@ export async function createWalletConnectClient(
   walletConnectClient.on(
     "session_request",
     async (event: WalletConnectSessionRequestEvent) => {
+      console.log("session_request", event);
       const { fulfillRequest } = await import("./session-request.js");
       await fulfillRequest({
         wallet,
@@ -284,7 +286,7 @@ export async function createWalletConnectClient(
  *   client: client,
  * });
  *
- * const session = await createWalletConnectSession({
+ * const session = createWalletConnectSession({
  *   walletConnectClient: client,
  *   uri: "wc:...",
  * });

packages/thirdweb/src/wallets/wallet-connect/receiver/request-handlers/sign.ts

@@ -12,6 +12,7 @@ export async function handleSignRequest(options: {
 }): Promise<Hex> {
   const { account, params } = options;
 
+  console.log("handleSignRequest", account, params);
   validateAccountAddress(account, params[1]);
   return account.signMessage({ message: { raw: params[0] as Hex } });
 }

packages/thirdweb/src/wallets/wallet-connect/receiver/session-proposal.ts

@@ -107,6 +107,7 @@ export async function acceptSessionProposal({
       ...(sessionProposal.params.optionalNamespaces?.eip155?.events ?? []),
     ],
   };
+  console.log("namespaces", namespaces);
   const approval = await walletConnectClient.approve({
     id: sessionProposal.id,
     namespaces: {
@@ -118,7 +119,10 @@ export async function acceptSessionProposal({
     },
   });
 
+  console.log("approval", approval);
+
   const session = await approval.acknowledged();
+  console.log("session acknowledged", session);
   return {
     topic: session.topic,
     origin: sessionProposal.verifyContext?.verified?.origin || "Unknown origin",

packages/thirdweb/src/wallets/wallet-connect/receiver/session-request.ts

@@ -1,6 +1,12 @@
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Hex } from "../../../utils/encoding/hex.js";
 import type { Wallet } from "../../interfaces/wallet.js";
+import { handleSendRawTransactionRequest } from "./request-handlers/send-raw-transaction.js";
+import { handleSendTransactionRequest } from "./request-handlers/send-transaction.js";
+import { handleSignTransactionRequest } from "./request-handlers/sign-transaction.js";
+import { handleSignTypedDataRequest } from "./request-handlers/sign-typed-data.js";
+// Due to some edge cases, we can't import these handlers dynamically
+import { handleSignRequest } from "./request-handlers/sign.js";
 import type {
   WalletConnectAddEthereumChainRequestParams,
   WalletConnectClient,
@@ -48,15 +54,13 @@ export async function fulfillRequest(options: {
   try {
     switch (request.method) {
       case "personal_sign": {
+        console.log("personal_sign", request.params, handlers?.personal_sign);
         if (handlers?.personal_sign) {
           result = await handlers.personal_sign({
             account,
             params: request.params as WalletConnectSignRequestPrams,
           });
         } else {
-          const { handleSignRequest } = await import(
-            "./request-handlers/sign.js"
-          );
           result = await handleSignRequest({
             account,
             params: request.params as WalletConnectSignRequestPrams,
@@ -71,9 +75,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectSignRequestPrams,
           });
         } else {
-          const { handleSignRequest } = await import(
-            "./request-handlers/sign.js"
-          );
           result = await handleSignRequest({
             account,
             params: request.params as WalletConnectSignRequestPrams,
@@ -88,9 +89,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectSignTypedDataRequestParams,
           });
         } else {
-          const { handleSignTypedDataRequest } = await import(
-            "./request-handlers/sign-typed-data.js"
-          );
           result = await handleSignTypedDataRequest({
             account,
             params: request.params as WalletConnectSignTypedDataRequestParams,
@@ -105,9 +103,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectSignTypedDataRequestParams,
           });
         } else {
-          const { handleSignTypedDataRequest } = await import(
-            "./request-handlers/sign-typed-data.js"
-          );
           result = await handleSignTypedDataRequest({
             account,
             params: request.params as WalletConnectSignTypedDataRequestParams,
@@ -122,9 +117,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectTransactionRequestParams,
           });
         } else {
-          const { handleSignTransactionRequest } = await import(
-            "./request-handlers/sign-transaction.js"
-          );
           result = await handleSignTransactionRequest({
             account,
             params: request.params as WalletConnectTransactionRequestParams,
@@ -141,10 +133,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectTransactionRequestParams,
           });
         } else {
-          const { handleSendTransactionRequest } = await import(
-            "./request-handlers/send-transaction.js"
-          );
-
           result = await handleSendTransactionRequest({
             account,
             chainId,
@@ -163,10 +151,6 @@ export async function fulfillRequest(options: {
             params: request.params as WalletConnectRawTransactionRequestParams,
           });
         } else {
-          const { handleSendRawTransactionRequest } = await import(
-            "./request-handlers/send-raw-transaction.js"
-          );
-
           result = await handleSendRawTransactionRequest({
             account,
             chainId,