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

nikospapcom · 2024-12-16T15:11:33Z

Introduce new method prefetchDependencies to load Coinbase SDK instead of loading the SDK when click the Coinbase button in <SignIn/> / <SignUp />. This change avoid the Safari to block the Coinbase popup

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

vercel · 2024-12-16T15:11:38Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 2:21pm

changeset-bot · 2024-12-16T15:11:39Z

🦋 Changeset detected

Latest commit: a83056f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 23 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/clerk-react	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nuxt	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/ui	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nikospapcom · 2024-12-17T09:45:24Z

!snapshot

clerk-cookie · 2024-12-17T09:47:38Z

Hey @nikospapcom - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.3-snapshot.v20241217094601
@clerk/backend	1.21.3-snapshot.v20241217094601
@clerk/chrome-extension	2.1.4-snapshot.v20241217094601
@clerk/clerk-js	5.43.1-snapshot.v20241217094601
@clerk/elements	0.22.3-snapshot.v20241217094601
@clerk/clerk-expo	2.6.3-snapshot.v20241217094601
@clerk/expo-passkeys	0.1.3-snapshot.v20241217094601
@clerk/express	1.3.30-snapshot.v20241217094601
@clerk/fastify	2.1.3-snapshot.v20241217094601
@clerk/localizations	3.9.4-snapshot.v20241217094601
@clerk/nextjs	6.9.4-snapshot.v20241217094601
@clerk/nuxt	0.1.4-snapshot.v20241217094601
@clerk/clerk-react	5.20.3-snapshot.v20241217094601
@clerk/react-router	0.1.3-snapshot.v20241217094601
@clerk/remix	4.4.4-snapshot.v20241217094601
@clerk/clerk-sdk-node	5.1.3-snapshot.v20241217094601
@clerk/shared	2.20.3-snapshot.v20241217094601
@clerk/tanstack-start	0.8.3-snapshot.v20241217094601
@clerk/testing	1.4.3-snapshot.v20241217094601
@clerk/themes	2.2.3-snapshot.v20241217094601
@clerk/types	4.39.5-snapshot.v20241217094601
@clerk/ui	0.3.4-snapshot.v20241217094601
@clerk/vue	0.1.4-snapshot.v20241217094601

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

panteliselef · 2024-12-17T11:29:49Z

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

+  get isCoinbaseWalletEnabled(): boolean {
+    const attributes = this.environment?.userSettings.attributes;
+    if (!attributes) {
+      return false;
+    }
+
+    const findWeb3Attributes = Object.entries(attributes)
+      .filter(([name, attr]) => attr.used_for_first_factor && name.startsWith('web3'))
+      .map(([, desc]) => desc.first_factors)
+      .flat() as any as Web3Strategy[];
+
+    return findWeb3Attributes.includes('web3_coinbase_wallet_signature');
+  }


❓Should we make this private ? Since we don't want any api changes atm

panteliselef · 2024-12-17T11:31:05Z

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

@@ -1654,6 +1672,16 @@ export class Clerk implements ClerkInterface {
    this.environment = environment;
  }

+  public prefetchDependencies = async (): Promise<void> => {


I believe this can be private, and don't need to call it from IsomorphicClerk.

panteliselef · 2024-12-17T11:50:29Z

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

@@ -180,6 +183,7 @@ 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();


Suggested change

private __promise = createDeferredPromise();

#coinbaseSDKResolvers = createDeferredPromise();

panteliselef · 2024-12-17T11:52:07Z

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

@@ -1654,6 +1672,16 @@ export class Clerk implements ClerkInterface {
    this.environment = environment;
  }

+  public prefetchDependencies = async (): Promise<void> => {
+    if (this.isCoinbaseWalletEnabled) {
+      window.__clerk_coinbase_sdk = this.__promise.promise as Promise<typeof CoinbaseWalletSDK>;


maybe this need to move inside the constructor.

Also

Suggested change

window.__clerk_coinbase_sdk = this.__promise.promise as Promise<typeof CoinbaseWalletSDK>;

window.__clerk_coinbase_sdk = this.#coinbaseSDKResolvers.promise as Promise<typeof CoinbaseWalletSDK>;

panteliselef · 2024-12-17T11:53:21Z

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

+      await import('@coinbase/wallet-sdk').then(mod => {
+        this.__promise.resolve(mod.CoinbaseWalletSDK);
+      });


Suggested change

await import('@coinbase/wallet-sdk').then(mod => {

this.__promise.resolve(mod.CoinbaseWalletSDK);

});

await import('@coinbase/wallet-sdk').then(mod => {

this.#coinbaseSDKResolvers.resolve(mod.CoinbaseWalletSDK);

});

panteliselef · 2024-12-17T11:55:24Z

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

@@ -71,7 +71,7 @@ export async function generateSignatureWithOKXWallet(params: GenerateSignaturePa

 async function getEthereumProvider(provider: Web3Provider) {
  if (provider === 'coinbase_wallet') {
-    const CoinbaseWalletSDK = await import('@coinbase/wallet-sdk').then(mod => mod.CoinbaseWalletSDK);
+    const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk;


Suggested change

const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk;

const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk.catch(()=>null)

// example error

if(!CoinbaseWalletSDK) { throw "Coinbase SDK failed to load" }

panteliselef · 2024-12-17T11:55:54Z

packages/react/src/isomorphicClerk.ts

+
+  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);
+    }
+  };


🧹🧹 we don't really need these with this approach

panteliselef · 2024-12-17T11:57:58Z

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

@@ -1654,6 +1672,16 @@ export class Clerk implements ClerkInterface {
    this.environment = environment;
  }

+  public prefetchDependencies = async (): Promise<void> => {
+    if (this.isCoinbaseWalletEnabled) {


As an optimization we should add the follwing

if(signedIn && singleMode) then don't load the sdk

@panteliselef we need to load when user in signedIn because users can connect the wallet through <UserProfile />

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

nikospapcom self-assigned this Dec 16, 2024

clerk-cookie added types clerk-js react elements labels Dec 16, 2024

vercel bot deployed to Preview December 16, 2024 15:13 View deployment

nikospapcom force-pushed the nikospap/user-1159-safari-blocks-coinbase-wallet-popup branch from 7217c73 to db3ef38 Compare December 16, 2024 15:13

vercel bot deployed to Preview December 16, 2024 15:15 View deployment

nikospapcom force-pushed the nikospap/user-1159-safari-blocks-coinbase-wallet-popup branch from db3ef38 to c0492ab Compare December 17, 2024 08:44

vercel bot deployed to Preview December 17, 2024 08:46 View deployment

nikospapcom force-pushed the nikospap/user-1159-safari-blocks-coinbase-wallet-popup branch from c0492ab to 57f613d Compare December 17, 2024 09:34

clerk-cookie removed the elements label Dec 17, 2024

nikospapcom requested a review from panteliselef December 17, 2024 09:36

vercel bot deployed to Preview December 17, 2024 09:37 View deployment

nikospapcom requested a review from BRKalow December 17, 2024 09:44

clerk deleted a comment from clerk-cookie Dec 17, 2024

vercel bot deployed to Preview December 17, 2024 09:45 View deployment

nikospapcom changed the title ~~fix(clerk-js,clerk-react,types,elements): Optimize Coinbase SDK loading~~ fix(clerk-js,clerk-react,types): Optimize Coinbase SDK loading Dec 17, 2024

nikospapcom force-pushed the nikospap/user-1159-safari-blocks-coinbase-wallet-popup branch from a276304 to 315564b Compare December 17, 2024 11:43

nikospapcom marked this pull request as ready for review December 17, 2024 11:43

vercel bot deployed to Preview December 17, 2024 11:45 View deployment

panteliselef reviewed Dec 17, 2024

View reviewed changes

nikospapcom marked this pull request as draft December 17, 2024 13:26

clerk-cookie removed the react label Dec 17, 2024

vercel bot deployed to Preview December 17, 2024 14:07 View deployment

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

a83056f

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

nikospapcom force-pushed the nikospap/user-1159-safari-blocks-coinbase-wallet-popup branch from c5315fd to a83056f Compare December 17, 2024 14:19

clerk-cookie removed the types label Dec 17, 2024

vercel bot deployed to Preview December 17, 2024 14:21 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nikospapcom commented Dec 16, 2024 •

edited

Loading

vercel bot commented Dec 16, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

nikospapcom commented Dec 17, 2024

clerk-cookie commented Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

panteliselef Dec 17, 2024

nikospapcom Dec 17, 2024

	private __promise = createDeferredPromise();
	#coinbaseSDKResolvers = createDeferredPromise();

	window.__clerk_coinbase_sdk = this.__promise.promise as Promise<typeof CoinbaseWalletSDK>;
	window.__clerk_coinbase_sdk = this.#coinbaseSDKResolvers.promise as Promise<typeof CoinbaseWalletSDK>;

-    const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk;
+    const CoinbaseWalletSDK = await window.__clerk_coinbase_sdk.catch(()=>null)
+    // example error
+    if(!CoinbaseWalletSDK) { throw "Coinbase SDK failed to load" }

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

Are you sure you want to change the base?

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

Conversation

nikospapcom commented Dec 16, 2024 • edited Loading

Description

Checklist

Type of change

vercel bot commented Dec 16, 2024 • edited Loading

changeset-bot bot commented Dec 16, 2024 • edited Loading

🦋 Changeset detected

nikospapcom commented Dec 17, 2024

clerk-cookie commented Dec 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikospapcom commented Dec 16, 2024 •

edited

Loading

vercel bot commented Dec 16, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading