thirdweb 5.65.2 → 5.66.0

package/src/react/web/ui/SiteEmbed.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { getLastAuthProvider } from "../../../react/core/utils/storage.js";
+import { webLocalStorage } from "../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { ClientScopedStorage } from "../../../wallets/in-app/core/authentication/client-scoped-storage.js";
+import type { Ecosystem } from "../../../wallets/in-app/core/wallet/types.js";
+import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
+
+/**
+ * Embeds another thirdweb-supported site for seamless in-app and ecosystem wallet connection.
+ *
+ * @note Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
+ *
+ * @note The embedded site must support the connected wallet (ecosystem or in-app).
+ *
+ * @param {Object} props - The props to pass to the iframe
+ * @param {String} props.src - The URL of the site to embed
+ * @param {ThirdwebClient} props.client - The client to use for the embedded site
+ * @param {Ecosystem} [props.ecosystem] - The ecosystem to use for the embedded site
+ *
+ * @example
+ * ```tsx
+ * import { SiteEmbed } from "thirdweb/react";
+ *
+ * <SiteEmbed src="https://thirdweb.com" clientId="thirdweb-client-id" />
+ * ```
+ */
+export function SiteEmbed({
+  src,
+  client,
+  ecosystem,
+  ...props
+}: {
+  src: string;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+} & React.DetailedHTMLProps<
+  React.IframeHTMLAttributes<HTMLIFrameElement>,
+  HTMLIFrameElement
+>) {
+  if (!client.clientId) {
+    throw new Error("The SiteEmbed client must have a clientId");
+  }
+
+  const activeWallet = useActiveWallet();
+  const walletId = activeWallet?.id;
+
+  const {
+    data: { authProvider, authCookie } = {},
+  } = useQuery({
+    queryKey: ["site-embed", walletId, src, client.clientId, ecosystem],
+    enabled:
+      activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
+    queryFn: async () => {
+      const storage = new ClientScopedStorage({
+        storage: webLocalStorage,
+        clientId: client.clientId,
+        ecosystem,
+      });
+
+      const authProvider = await getLastAuthProvider(webLocalStorage);
+      const authCookie = await storage.getAuthCookie();
+
+      return { authProvider, authCookie };
+    },
+  });
+
+  const url = new URL(src);
+  if (walletId) {
+    url.searchParams.set("walletId", walletId);
+  }
+  if (authProvider) {
+    url.searchParams.set("authProvider", authProvider);
+  }
+  if (authCookie) {
+    url.searchParams.set("authCookie", authCookie);
+  }
+
+  return (
+    <iframe
+      src={encodeURI(url.toString())}
+      width="100%"
+      height="100%"
+      allowFullScreen
+      {...props}
+    />
+  );
+}

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -39,7 +39,7 @@ export function WalletAuth(props: {
 }) {
   const { wallet, done } = props;
   const addConnectedWallet = useAddConnectedWallet();
-  const walletToConnect = useRef<Wallet>();
+  const walletToConnect = useRef<Wallet>(undefined);
   const [status, setStatus] = useState<"loading" | "error" | "selecting">(
     "selecting",
   );

package/src/react/web/wallets/shared/PassKeyLogin.tsx

@@ -160,7 +160,8 @@ function LoginScreen(props: {
         await setLastAuthProvider("passkey", webLocalStorage);
       }
       done();
-    } catch {
+    } catch (e) {
+      console.error("Failed to login with passkey", e);
       setStatus("error");
     }
   }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.65.2";
+export const version = "5.66.0";

package/src/wallets/in-app/core/actions/generate-wallet.enclave.ts

@@ -9,13 +9,13 @@ import type { Ecosystem } from "../wallet/types.js";
  * @internal
  */
 export async function generateWallet({
-  authToken,
   client,
   ecosystem,
+  authToken,
 }: {
   client: ThirdwebClient;
-  ecosystem: Ecosystem;
   authToken: string;
+  ecosystem?: Ecosystem;
 }) {
   const clientFetch = getClientFetch(client, ecosystem);
   const response = await clientFetch(

package/src/wallets/in-app/core/wallet/enclave-wallet.ts

@@ -139,8 +139,8 @@ export class EnclaveWallet implements IWebWallet {
         chain: getCachedChain(tx.chainId),
       });
       const transaction: Record<string, Hex | number | undefined> = {
-        to: (tx.to as Hex) ?? undefined,
-        data: tx.data ? toHex(tx.data) : undefined,
+        to: tx.to ? getAddress(tx.to) : undefined,
+        data: tx.data,
         value: tx.value ? toHex(tx.value) : undefined,
         gas: tx.gas ? toHex(tx.gas + tx.gas / BigInt(10)) : undefined, // Add a 10% buffer to gas
         nonce: tx.nonce

package/src/wallets/in-app/native/native-connector.ts

@@ -80,27 +80,26 @@ export class InAppNativeConnector implements InAppConnector {
     }
     let wallet = user.wallets[0];
 
-    // TODO (enclaves): Migration to enclave wallet for in-app wallets as well
-    if (
-      authResult &&
-      this.storage.ecosystem &&
-      wallet &&
-      wallet.type === "sharded"
-    ) {
-      const { migrateToEnclaveWallet } = await import(
-        "./helpers/wallet/migration.js"
-      );
-      wallet = await migrateToEnclaveWallet({
-        client: this.client,
-        storage: this.storage,
-        storedToken: authResult.storedToken,
-        encryptionKey,
-      });
+    if (authResult && wallet && wallet.type === "sharded") {
+      try {
+        const { migrateToEnclaveWallet } = await import(
+          "./helpers/wallet/migration.js"
+        );
+        wallet = await migrateToEnclaveWallet({
+          client: this.client,
+          storage: this.storage,
+          storedToken: authResult.storedToken,
+          encryptionKey,
+        });
+      } catch {
+        console.warn(
+          "Failed to migrate from sharded to enclave wallet, continuing with sharded wallet",
+        );
+      }
     }
 
-    if (authResult && this.ecosystem && !wallet) {
-      // new ecosystem user, generate enclave wallet
-      // TODO (enclaves): same flow for in-app wallets
+    if (authResult && !wallet) {
+      // new user, generate enclave wallet
       const { generateWallet } = await import(
         "../core/actions/generate-wallet.enclave.js"
       );

package/src/wallets/in-app/web/lib/auth/iframe-auth.ts

@@ -128,7 +128,7 @@ export class Auth {
       });
     }
 
-    if (user.wallets.length === 0 && this.ecosystem) {
+    if (user.wallets.length === 0) {
       // If this is a new ecosystem wallet without an enclave yet, we'll generate an enclave
       const result = await generateWallet({
         authToken: authToken.storedToken.cookieString,

package/src/wallets/in-app/web/lib/get-url-token.ts

@@ -9,6 +9,7 @@ export function getUrlToken(): {
   walletId?: WalletId;
   authResult?: AuthStoredTokenWithCookieReturnType;
   authProvider?: AuthOption;
+  authCookie?: string;
 } {
   if (!window?.location) {
     // Not in web
@@ -20,18 +21,24 @@ export function getUrlToken(): {
   const authResultString = params.get("authResult");
   const walletId = params.get("walletId") as WalletId | undefined;
   const authProvider = params.get("authProvider") as AuthOption | undefined;
+  const authCookie = params.get("authCookie") as string | undefined;
 
-  if (authResultString && walletId) {
-    const authResult = JSON.parse(authResultString);
-    params.delete("authResult");
+  if ((authCookie || authResultString) && walletId) {
+    const authResult = (() => {
+      if (authResultString) {
+        params.delete("authResult");
+        return JSON.parse(decodeURIComponent(authResultString));
+      }
+    })();
     params.delete("walletId");
     params.delete("authProvider");
+    params.delete("authCookie");
     window.history.pushState(
       {},
       "",
       `${window.location.pathname}?${params.toString()}`,
     );
-    return { walletId, authResult, authProvider };
+    return { walletId, authResult, authProvider, authCookie };
   }
   return {};
 }

package/src/wallets/in-app/web/lib/web-connector.ts

@@ -101,10 +101,7 @@ export class InAppWebConnector implements InAppConnector {
       onAuthSuccess: async (authResult) => {
         onAuthSuccess?.(authResult);
 
-        if (
-          this.ecosystem &&
-          authResult.storedToken.authDetails.walletType === "sharded"
-        ) {
+        if (authResult.storedToken.authDetails.walletType === "sharded") {
           // If this is an existing sharded ecosystem wallet, we'll need to migrate
           const result = await this.querier.call<boolean>({
             procedureName: "migrateFromShardToEnclave",
@@ -113,11 +110,15 @@ export class InAppWebConnector implements InAppConnector {
             },
           });
           if (!result) {
-            throw new Error("Failed to migrate from sharded to enclave wallet");
+            console.warn(
+              "Failed to migrate from sharded to enclave wallet, continuing with sharded wallet",
+            );
           }
         }
 
-        await this.initializeWallet(authResult.storedToken.cookieString);
+        this.wallet = await this.initializeWallet(
+          authResult.storedToken.cookieString,
+        );
 
         if (!this.wallet) {
           throw new Error("Failed to initialize wallet");
@@ -133,7 +134,7 @@ export class InAppWebConnector implements InAppConnector {
           deviceShareStored,
         });
 
-        if (authResult.storedToken.authDetails.walletType !== "enclave") {
+        if (this.wallet instanceof IFrameWallet) {
           await this.querier.call({
             procedureName: "initIframe",
             params: {
@@ -163,7 +164,7 @@ export class InAppWebConnector implements InAppConnector {
     });
   }
 
-  async initializeWallet(authToken?: string) {
+  async initializeWallet(authToken?: string): Promise<IWebWallet> {
     const storedAuthToken = await this.storage.getAuthCookie();
     if (!authToken && storedAuthToken === null) {
       throw new Error(
@@ -176,6 +177,7 @@ export class InAppWebConnector implements InAppConnector {
       client: this.client,
       ecosystem: this.ecosystem,
     });
+
     if (!user) {
       throw new Error("Cannot initialize wallet, no user logged in");
     }
@@ -186,16 +188,15 @@ export class InAppWebConnector implements InAppConnector {
     }
 
     if (user.wallets[0]?.type === "enclave") {
-      this.wallet = new EnclaveWallet({
+      return new EnclaveWallet({
         client: this.client,
         ecosystem: this.ecosystem,
         address: user.wallets[0].address,
         storage: this.storage,
       });
-      return;
     }
 
-    this.wallet = new IFrameWallet({
+    return new IFrameWallet({
       client: this.client,
       ecosystem: this.ecosystem,
       querier: this.querier,
@@ -233,7 +234,7 @@ export class InAppWebConnector implements InAppConnector {
       if (!localAuthToken) {
         return { status: "Logged Out" };
       }
-      await this.initializeWallet(localAuthToken);
+      this.wallet = await this.initializeWallet(localAuthToken);
     }
     if (!this.wallet) {
       throw new Error("Wallet not initialized");