refactor: separate onConnectRequested impl between web and native (#3344)

Author: joaquim-verges

packages/thirdweb/src/exports/wallets.native.ts

@@ -82,7 +82,7 @@ export type {
   InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
 } from "../wallets/in-app/core/wallet/types.js";
 
-export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseSDKWallet.js";
+export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
 
 export type {
   WalletEmitter,

packages/thirdweb/src/exports/wallets.ts

@@ -88,7 +88,7 @@ export type {
   InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
 } from "../wallets/in-app/core/wallet/types.js";
 
-export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseSDKWallet.js";
+export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
 
 export type {
   WalletEmitter,

packages/thirdweb/src/react/web/utils/usePreloadWalletProviders.ts

@@ -16,7 +16,7 @@ export function usePreloadWalletProviders({
           switch (w.id) {
             case COINBASE: {
               const { getCoinbaseWebProvider } = await import(
-                "../../../wallets/coinbase/coinbaseSDKWallet.js"
+                "../../../wallets/coinbase/coinbaseWebSDK.js"
               );
               await getCoinbaseWebProvider();
               // return _something_

packages/thirdweb/src/wallets/coinbase/coinbase-wallet.ts

@@ -16,6 +16,7 @@ import type { CreateWalletArgs } from "../wallet-types.js";
 export function coinbaseWalletSDK(args: {
   createOptions?: CreateWalletArgs<typeof COINBASE>[1];
   providerFactory: () => Promise<ProviderInterface>;
+  onConnectRequested?: (provider: ProviderInterface) => Promise<void>;
 }): Wallet<typeof COINBASE> {
   const { createOptions } = args;
   const emitter = createWalletEmitter<typeof COINBASE>();
@@ -58,7 +59,7 @@ export function coinbaseWalletSDK(args: {
     getAccount: () => account,
     autoConnect: async (options) => {
       const { autoConnectCoinbaseWalletSDK } = await import(
-        "./coinbaseSDKWallet.js"
+        "./coinbaseWebSDK.js"
       );
       const provider = await args.providerFactory();
       const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
@@ -77,9 +78,7 @@ export function coinbaseWalletSDK(args: {
       return account;
     },
     connect: async (options) => {
-      const { connectCoinbaseWalletSDK } = await import(
-        "./coinbaseSDKWallet.js"
-      );
+      const { connectCoinbaseWalletSDK } = await import("./coinbaseWebSDK.js");
       const provider = await args.providerFactory();
       const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
         await connectCoinbaseWalletSDK(options, emitter, provider);
@@ -105,15 +104,10 @@ export function coinbaseWalletSDK(args: {
       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);
+      if (args.onConnectRequested) {
+        const provider = await args.providerFactory();
+        return args.onConnectRequested?.(provider);
+      }
     },
   };
 }

packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts renamed to packages/thirdweb/src/wallets/coinbase/coinbaseWebSDK.ts

@@ -38,6 +38,7 @@ import type {
   CreateWalletArgs,
   WalletConnectionOption,
 } from "../wallet-types.js";
+import { showCoinbasePopup } from "./utils.js";
 
 export type CoinbaseWalletCreationOptions =
   | {
@@ -344,11 +345,6 @@ function createAccount(provider: ProviderInterface, address: string) {
   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,

packages/thirdweb/src/wallets/coinbase/utils.ts

@@ -0,0 +1,6 @@
+import type { ProviderInterface } from "@coinbase/wallet-sdk";
+
+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();
+}

packages/thirdweb/src/wallets/create-wallet.ts

@@ -16,7 +16,7 @@ import { webLocalStorage } from "../utils/storage/webStorage.js";
 import { isMobile } from "../utils/web/isMobile.js";
 import { openWindow } from "../utils/web/openWindow.js";
 import { coinbaseWalletSDK } from "./coinbase/coinbase-wallet.js";
-import { getCoinbaseWebProvider } from "./coinbase/coinbaseSDKWallet.js";
+import { getCoinbaseWebProvider } from "./coinbase/coinbaseWebSDK.js";
 import { COINBASE } from "./constants.js";
 import { inAppWallet } from "./in-app/web/in-app.js";
 import { smartWallet } from "./smart/smart-wallet.js";
@@ -74,6 +74,14 @@ export function createWallet<const ID extends WalletId>(
       return coinbaseWalletSDK({
         createOptions: options,
         providerFactory: () => getCoinbaseWebProvider(options),
+        onConnectRequested: async (provider) => {
+          // on the web, make sure to show the coinbase popup IMMEDIATELY on connection requested
+          // otherwise the popup might get blocked in safari
+          // TODO awaiting the provider is fast only thanks to preloading that happens in our components
+          // these probably need to actually imported / created synchronously to be used headless properly
+          const { showCoinbasePopup } = await import("./coinbase/utils.js");
+          return showCoinbasePopup(provider);
+        },
       }) as Wallet<ID>;
     }
 

packages/thirdweb/src/wallets/eip5792/get-calls-status.ts

@@ -1,5 +1,5 @@
 import type { ThirdwebClient } from "../../client/client.js";
-import { isCoinbaseSDKWallet } from "../coinbase/coinbaseSDKWallet.js";
+import { isCoinbaseSDKWallet } from "../coinbase/coinbaseWebSDK.js";
 import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
@@ -64,7 +64,7 @@ export async function getCallsStatus({
 
   if (isCoinbaseSDKWallet(wallet)) {
     const { coinbaseSDKWalletGetCallsStatus } = await import(
-      "../coinbase/coinbaseSDKWallet.js"
+      "../coinbase/coinbaseWebSDK.js"
     );
     return coinbaseSDKWalletGetCallsStatus({ wallet, bundleId });
   }

packages/thirdweb/src/wallets/eip5792/get-capabilities.ts

@@ -1,5 +1,5 @@
 import type { Prettify } from "../../utils/type-utils.js";
-import { isCoinbaseSDKWallet } from "../coinbase/coinbaseSDKWallet.js";
+import { isCoinbaseSDKWallet } from "../coinbase/coinbaseWebSDK.js";
 import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
@@ -62,7 +62,7 @@ export async function getCapabilities<const ID extends WalletId = WalletId>({
 
   if (isCoinbaseSDKWallet(wallet)) {
     const { coinbaseSDKWalletGetCapabilities } = await import(
-      "../coinbase/coinbaseSDKWallet.js"
+      "../coinbase/coinbaseWebSDK.js"
     );
     return coinbaseSDKWalletGetCapabilities({ wallet });
   }

packages/thirdweb/src/wallets/eip5792/send-calls.ts

@@ -11,7 +11,7 @@ import {
   resolvePromisedValue,
 } from "../../utils/promise/resolve-promised-value.js";
 import type { OneOf } from "../../utils/type-utils.js";
-import { isCoinbaseSDKWallet } from "../coinbase/coinbaseSDKWallet.js";
+import { isCoinbaseSDKWallet } from "../coinbase/coinbaseWebSDK.js";
 import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
@@ -181,7 +181,7 @@ export async function sendCalls<const ID extends WalletId>(
 
   if (isCoinbaseSDKWallet(wallet)) {
     const { coinbaseSDKWalletSendCalls } = await import(
-      "../coinbase/coinbaseSDKWallet.js"
+      "../coinbase/coinbaseWebSDK.js"
     );
     return coinbaseSDKWalletSendCalls({
       wallet,