fix(sdk): use SiteLink and SiteEmbed with smart wallets

Author: gregfromstl

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 },