fix(clerk-js,clerk-react,types): Optimize Coinbase SDK loading

Instead of lazy loading the Coinbase SDK in getEthereumProvider(), move loading when the SignIn/SignUp components mount. This fix avoid the Safari to block the Coinbase popup

packages/clerk-js/src/core/clerk.ts

@@ -183,7 +183,6 @@ export class Clerk implements ClerkInterface {
   protected internal_last_error: ClerkAPIError | null = null;
   // converted to protected environment to support `updateEnvironment` type assertion
   protected environment?: EnvironmentResource | null;
-  private __promise = createDeferredPromise();
 
   #publishableKey = '';
   #domain: DomainOrProxyUrl['domain'];
@@ -201,6 +200,7 @@ export class Clerk implements ClerkInterface {
   #options: ClerkOptions = {};
   #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
   #touchThrottledUntil = 0;
+  #coinbaseSDKResolvers = createDeferredPromise();
 
   public __internal_getCachedResources:
     | (() => Promise<{ client: ClientJSONSnapshot | null; environment: EnvironmentJSONSnapshot | null }>)
@@ -1672,12 +1672,12 @@ export class Clerk implements ClerkInterface {
     this.environment = environment;
   }
 
-  public prefetchDependencies = async (): Promise<void> => {
+  private prefetchDependencies = async (): Promise<void> => {
     if (this.isCoinbaseWalletEnabled) {
-      window.__clerk_coinbase_sdk = this.__promise.promise as Promise<typeof CoinbaseWalletSDK>;
+      window.__clerk_coinbase_sdk = this.#coinbaseSDKResolvers.promise as Promise<typeof CoinbaseWalletSDK>;
 
       await import('@coinbase/wallet-sdk').then(mod => {
-        this.__promise.resolve(mod.CoinbaseWalletSDK);
+        this.#coinbaseSDKResolvers.resolve(mod.CoinbaseWalletSDK);
       });
     }
   };

packages/clerk-js/src/utils/web3.ts

@@ -71,7 +71,11 @@ export async function generateSignatureWithOKXWallet(params: GenerateSignaturePa
 
 async function getEthereumProvider(provider: Web3Provider) {
   if (provider === 'coinbase_wallet') {
-    const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk;
+    const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk.catch(() => null);
+    if (!CoinbaseWalletSDK) {
+      throw new Error('Coinbase Wallet SDK is not loaded');
+    }
+
     const sdk = new CoinbaseWalletSDK({});
     return sdk.makeWeb3Provider({ options: 'all' });
   }

packages/react/src/isomorphicClerk.ts

@@ -123,7 +123,6 @@ type IsomorphicLoadedClerk = Without<
   | 'client'
   | '__internal_getCachedResources'
   | '__internal_reloadInitialResources'
-  | 'prefetchDependencies'
 > & {
   // TODO: Align return type and parms
   handleRedirectCallback: (params: HandleOAuthCallbackParams) => void;
@@ -174,7 +173,6 @@ type IsomorphicLoadedClerk = Without<
   mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
   mountUserProfile: (node: HTMLDivElement, props: UserProfileProps) => void;
   mountWaitlist: (node: HTMLDivElement, props: WaitlistProps) => void;
-  prefetchDependencies: () => void;
   client: ClientResource | undefined;
 };
 
@@ -1216,13 +1214,4 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       this.premountMethodCalls.set('signOut', callback);
     }
   };
-
-  prefetchDependencies = async (): Promise<void> => {
-    const callback = () => this.clerkjs?.prefetchDependencies();
-    if (this.clerkjs && this.#loaded) {
-      return callback() as Promise<void>;
-    } else {
-      this.premountMethodCalls.set('prefetchDependencies', callback);
-    }
-  };
 }

packages/types/src/clerk.ts

@@ -609,8 +609,6 @@ export interface Clerk {
    * This funtion is used to reload the initial resources (Environment/Client) from the Frontend API.
    **/
   __internal_reloadInitialResources: () => Promise<void>;
-
-  prefetchDependencies: () => Promise<void>;
 }
 
 export type HandleOAuthCallbackParams = TransferableOption &