thirdweb 5.29.3-nightly-9cf3a1d6636fcd56559e889ab2bfe3249d51162a-20240616230326 → 5.29.3-nightly-df84f9c4ce4d3e402c82037230515513380e73d1-20240616231119

package/src/react/web/utils/usePreloadWalletProviders.ts

@@ -1,48 +1,49 @@
-import { useEffect } from "react";
+import { useQueries } from "@tanstack/react-query";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { COINBASE } from "../../../wallets/constants.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 
-export const usePreloadWalletProviders = ({
+export function usePreloadWalletProviders({
   client,
   wallets,
-}: { client: ThirdwebClient; wallets: Wallet[] }) => {
-  useEffect(() => {
-    let active = true;
-
-    async function run() {
-      if (!active) {
-        return;
-      }
-      // preload coinbase wallet provider
-      // this is to avoid any delay on click when opening the popup window
-      // which can cause the popup to be blocked by the browser
-      if (wallets.map((w) => w.id).includes(COINBASE)) {
-        const { getCoinbaseWebProvider } = await import(
-          "../../../wallets/coinbase/coinbaseSDKWallet.js"
-        );
-        getCoinbaseWebProvider();
-      }
-
-      // preload inApp wallet iframe connector
-      if (wallets.map((w) => w.id).includes("inApp")) {
-        const [{ InAppWebConnector }, { getOrCreateInAppWalletConnector }] =
-          await Promise.all([
-            import("../../../wallets/in-app/web/lib/web-connector.js"),
-            import("../../../wallets/in-app/core/wallet/in-app-core.js"),
-          ]);
-        getOrCreateInAppWalletConnector(client, async (client) => {
-          return new InAppWebConnector({
-            client,
-          });
-        });
-      }
-    }
-    run().catch((error) => {
-      console.error("failed to preload wallet provider", error);
-    });
-    return () => {
-      active = false;
-    };
-  }, [wallets, client]);
-};
+}: { client: ThirdwebClient; wallets: Wallet[] }) {
+  useQueries({
+    queries: wallets
+      .filter((w) => w.id === COINBASE || w.id === "inApp")
+      .map((w) => ({
+        queryKey: ["preload-wallet", w.id],
+        queryFn: async () => {
+          switch (w.id) {
+            case COINBASE: {
+              const { getCoinbaseWebProvider } = await import(
+                "../../../wallets/coinbase/coinbaseSDKWallet.js"
+              );
+              await getCoinbaseWebProvider();
+              // return _something_
+              return true;
+            }
+            case "inApp": {
+              const [
+                { InAppWebConnector },
+                { getOrCreateInAppWalletConnector },
+              ] = await Promise.all([
+                import("../../../wallets/in-app/web/lib/web-connector.js"),
+                import("../../../wallets/in-app/core/wallet/in-app-core.js"),
+              ]);
+              await getOrCreateInAppWalletConnector(client, async (client) => {
+                return new InAppWebConnector({
+                  client,
+                });
+              });
+              // return _something_
+              return true;
+            }
+            // potentially add more wallets here
+            default: {
+              return false;
+            }
+          }
+        },
+      })),
+  });
+}

package/src/transaction/actions/send-transaction.ts

@@ -33,6 +33,10 @@ export async function sendTransaction(
 ): Promise<WaitForReceiptOptions> {
   const { account, transaction, gasless } = options;
 
+  if (account.onTransactionRequested) {
+    await account.onTransactionRequested(transaction);
+  }
+
   const serializableTransaction = await toSerializableTransaction({
     transaction: transaction,
     from: account.address,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.29.3-nightly-9cf3a1d6636fcd56559e889ab2bfe3249d51162a-20240616230326";
+export const version = "5.29.3-nightly-df84f9c4ce4d3e402c82037230515513380e73d1-20240616231119";

package/src/wallets/coinbase/coinbase-wallet.ts

@@ -104,5 +104,16 @@ export function coinbaseWalletSDK(args: {
     switchChain: async (newChain) => {
       await handleSwitchChain(newChain);
     },
+    onConnectRequested: async () => {
+      // make sure to show the coinbase popup IMMEDIATELY on connection requested
+      // otherwise the popup might get blocked in safari
+      // TODO these 2 awaits are fast only thanks to preloading that happens in our components
+      // these probably need to actually imported / created synchronously to be used headless properly
+      const { getCoinbaseWebProvider, showCoinbasePopup } = await import(
+        "./coinbaseSDKWallet.js"
+      );
+      const provider = await getCoinbaseWebProvider(createOptions);
+      await showCoinbasePopup(provider);
+    },
   };
 }

package/src/wallets/coinbase/coinbaseSDKWallet.ts

@@ -334,11 +334,21 @@ function createAccount(provider: ProviderInterface, address: string) {
         params: [account.address, stringifiedData],
       });
     },
+    onTransactionRequested: async () => {
+      // make sure to show the coinbase popup BEFORE doing any transaction preprocessing
+      // otherwise the popup might get blocked in safari
+      await showCoinbasePopup(provider);
+    },
   };
 
   return account;
 }
 
+export async function showCoinbasePopup(provider: ProviderInterface) {
+  // biome-ignore lint/suspicious/noExplicitAny: based on the latest CB SDK - scary but works
+  await (provider as any).communicator?.waitForPopupLoaded();
+}
+
 function onConnect(
   address: string,
   chain: Chain,

package/src/wallets/interfaces/wallet.ts

@@ -123,6 +123,13 @@ export type Wallet<TWalletId extends WalletId = WalletId> = {
    * ```
    */
   getConfig: () => CreateWalletArgs<TWalletId>[1];
+
+  // OPTIONAL
+
+  /**
+   * Can be used to execute any pre-connection actions like showing a modal, etc.
+   */
+  onConnectRequested?: () => Promise<void>;
 };
 
 /**
@@ -223,4 +230,12 @@ export type Account = {
   sendRawTransaction?: (
     tx: SendRawTransactionOptions,
   ) => Promise<SendTransactionResult>;
+  /**
+   * Used to do any pre-transaction actions like showing a confirmation modal, etc.
+   * @returns
+   */
+  onTransactionRequested?: (
+    // biome-ignore lint/suspicious/noExplicitAny: any transaction type is allowed here
+    transaction: PreparedTransaction<any>,
+  ) => Promise<void>;
 };

package/src/wallets/smart/index.ts

@@ -162,7 +162,7 @@ async function createSmartAccount(
   options: SmartAccountOptions,
 ): Promise<Account> {
   const { accountContract } = options;
-  const account = {
+  const account: Account = {
     address: accountContract.address,
     async sendTransaction(transaction: SendTransactionOption) {
       const executeTx = prepareExecute({
@@ -353,6 +353,9 @@ async function createSmartAccount(
         "Unable to verify signature on smart account, please make sure the smart account is deployed and the signature is valid.",
       );
     },
+    async onTransactionRequested(transaction) {
+      return options.personalAccount.onTransactionRequested?.(transaction);
+    },
   };
   return account;
 }
@@ -364,7 +367,7 @@ function createZkSyncAccount(args: {
   sponsorGas: boolean;
 }): Account {
   const { creationOptions, connectionOptions, chain } = args;
-  const account = {
+  const account: Account = {
     address: connectionOptions.personalAccount.address,
     async sendTransaction(transaction: SendTransactionOption) {
       // override passed tx, we have to refetch gas and fees always
@@ -430,6 +433,11 @@ function createZkSyncAccount(args: {
       const typedData = parseTypedData(_typedData);
       return connectionOptions.personalAccount.signTypedData(typedData);
     },
+    async onTransactionRequested(transaction) {
+      return connectionOptions.personalAccount.onTransactionRequested?.(
+        transaction,
+      );
+    },
   };
   return account;
 }