[SDK] Fix: Allow smart wallets for site linking (#6015)

Author: gregfromstl

.changeset/khaki-singers-leave.md

@@ -0,0 +1,6 @@
+---
+"@thirdweb-dev/wagmi-adapter": patch
+"thirdweb": patch
+---
+
+Fixes issue with smart wallets used on SiteLink and SiteEmbed

packages/thirdweb/src/react/web/ui/SiteEmbed.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { render } from "../../../../test/src/react-render.js";
+import { render, waitFor } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
 import { SiteEmbed } from "./SiteEmbed.js";
 
@@ -21,4 +21,19 @@ describe("SiteEmbed", () => {
       render(<SiteEmbed src={testUrl} client={{} as any} />),
     ).toThrow("The SiteEmbed client must have a clientId");
   });
+
+  it("uses inApp wallet when wallet is a smart wallet", async () => {
+    const testUrl = "https://thirdweb.com/";
+    const { container } = render(
+      <SiteEmbed src={testUrl} client={TEST_CLIENT} />,
+      {
+        setConnectedWallet: true,
+        walletId: "smart",
+      },
+    );
+
+    const iframe = container.querySelector("iframe");
+    expect(iframe).toBeTruthy();
+    await waitFor(() => expect(iframe?.src).toContain("walletId=inApp"));
+  });
 });

packages/thirdweb/src/react/web/ui/SiteEmbed.tsx

@@ -53,7 +53,10 @@ export function SiteEmbed({
   } = useQuery({
     queryKey: ["site-embed", walletId, src, client.clientId, ecosystem],
     enabled:
-      activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
+      activeWallet &&
+      (isEcosystemWallet(activeWallet) ||
+        walletId === "inApp" ||
+        walletId === "smart"),
     queryFn: async () => {
       const storage = new ClientScopedStorage({
         storage: webLocalStorage,
@@ -70,7 +73,7 @@ export function SiteEmbed({
 
   const url = new URL(src);
   if (walletId) {
-    url.searchParams.set("walletId", walletId);
+    url.searchParams.set("walletId", walletId === "smart" ? "inApp" : walletId);
   }
   if (authProvider) {
     url.searchParams.set("authProvider", authProvider);

packages/thirdweb/src/react/web/ui/SiteLink.test.tsx

@@ -45,4 +45,21 @@ describe("SiteLink", () => {
     expect(anchor).toBeTruthy();
     await waitFor(() => expect(anchor?.href).toContain("walletId="));
   });
+
+  it("uses inApp wallet when wallet is a smart wallet", async () => {
+    const testUrl = "https://example.com/";
+    const { container } = render(
+      <SiteLink href={testUrl} client={TEST_CLIENT}>
+        Test Link
+      </SiteLink>,
+      {
+        setConnectedWallet: true,
+        walletId: "smart",
+      },
+    );
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeTruthy();
+    await waitFor(() => expect(anchor?.href).toContain("walletId=inApp"));
+  });
 });

packages/thirdweb/src/react/web/ui/SiteLink.tsx

@@ -53,7 +53,10 @@ export function SiteLink({
   } = useQuery({
     queryKey: ["site-link", walletId, href, client.clientId, ecosystem],
     enabled:
-      activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
+      activeWallet &&
+      (isEcosystemWallet(activeWallet) ||
+        walletId === "inApp" ||
+        walletId === "smart"),
     queryFn: async () => {
       const storage = new ClientScopedStorage({
         storage: webLocalStorage,
@@ -70,7 +73,7 @@ export function SiteLink({
 
   const url = new URL(href);
   if (walletId) {
-    url.searchParams.set("walletId", walletId);
+    url.searchParams.set("walletId", walletId === "smart" ? "inApp" : walletId);
   }
   if (authProvider) {
     url.searchParams.set("authProvider", authProvider);

packages/thirdweb/test/src/SetConnectedWallet.tsx

@@ -2,10 +2,13 @@ import { useEffect, useRef } from "react";
 import { createWalletAdapter } from "../../src/adapters/wallet-adapter.js";
 import { ethereum } from "../../src/chains/chain-definitions/ethereum.js";
 import { useConnect } from "../../src/react/core/hooks/wallets/useConnect.js";
+import type { WalletId } from "../../src/wallets/wallet-types.js";
+import type { Wallet } from "../../src/wallets/interfaces/wallet.js";
 import { TEST_CLIENT } from "./test-clients.js";
 import { TEST_ACCOUNT_A } from "./test-wallets.js";
 
-export const SetConnectedWallet = () => {
+export const SetConnectedWallet = (props: { id?: WalletId }) => {
+  const { id } = props;
   const connectStarted = useRef(false);
   const { connect } = useConnect();
 
@@ -21,9 +24,13 @@ export const SetConnectedWallet = () => {
       adaptedAccount: TEST_ACCOUNT_A,
       client: TEST_CLIENT,
       chain: ethereum,
-      onDisconnect: () => {},
-      switchChain: () => {},
-    });
+      onDisconnect: () => { },
+      switchChain: () => { },
+    }) as Wallet;
+
+    if (id) {
+      wallet.id = id;
+    }
 
     connect(wallet);
   }, []);

packages/thirdweb/test/src/react-render.tsx

@@ -4,6 +4,7 @@ import type { RenderOptions } from "@testing-library/react";
 import type { ReactElement } from "react";
 import { ThirdwebProvider } from "../../src/react/web/providers/thirdweb-provider.js";
 import { SetConnectedWallet } from "./SetConnectedWallet.js";
+import type { WalletId } from "src/wallets/wallet-types.js";
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
   return <ThirdwebProvider>{children}</ThirdwebProvider>;
@@ -13,11 +14,14 @@ const customRender = (
   ui: ReactElement,
   options?: Omit<RenderOptions, "wrapper"> & {
     setConnectedWallet?: boolean;
+    walletId?: WalletId;
   },
 ) => {
   return render(
     <div>
-      {options?.setConnectedWallet ? <SetConnectedWallet /> : null}
+      {options?.setConnectedWallet ? (
+        <SetConnectedWallet id={options.walletId} />
+      ) : null}
       {ui}
     </div>,
     { wrapper: Providers, ...options },

packages/wagmi-adapter/src/connector.ts

@@ -1,7 +1,6 @@
 import { type CreateConnectorFn, createConnector } from "@wagmi/core";
 import type { Prettify } from "@wagmi/core/chains";
 import { type ThirdwebClient, defineChain, getAddress } from "thirdweb";
-import { autoConnect } from "thirdweb/wallets";
 import {
   EIP1193,
   type InAppWalletConnectionOptions,
@@ -55,7 +54,7 @@ type StorageItem = { "tw.lastChainId": number };
  *    inAppWalletConnector({
  *      client,
  *      // optional: turn on smart accounts
- *      smartAccounts: {
+ *      smartAccount: {
  *         sponsorGas: true,
  *         chain: thirdwebChain(sepolia)
  *      }
@@ -95,10 +94,18 @@ export function inAppWalletConnector(
     connect: async (params) => {
       const lastChainId = await config.storage?.getItem("tw.lastChainId");
       if (params?.isReconnecting) {
-        const account = await wallet.autoConnect({
+        const { autoConnect } = await import("thirdweb/wallets");
+        await autoConnect({
           client,
           chain: defineChain(lastChainId || 1),
+          wallets: [wallet],
         });
+
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Wallet failed to reconnect");
+        }
+
         return {
           accounts: [getAddress(account.address)],
           chainId: lastChainId || 1,
@@ -137,6 +144,7 @@ export function inAppWalletConnector(
       const lastChainId = await config.storage?.getItem("tw.lastChainId");
       const chain = defineChain(params?.chainId || lastChainId || 1);
       if (!wallet.getAccount()) {
+        const { autoConnect } = await import("thirdweb/wallets");
         await autoConnect({
           client,
           chain,