chore(clerk-js): Bump Coinbase sdk version (clerk#4945)

Author: panteliselef

.changeset/green-panthers-act.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Update `@coinbase/wallet-sdk` depedency to `4.2.4`.

packages/clerk-js/bundlewatch.config.json

@@ -1,11 +1,11 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "707kB" },
+    { "path": "./dist/clerk.js", "maxSize": "560kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "48kB" },
     { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "70KB" },
-    { "path": "./dist/coinbase*.js", "maxSize": "58KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "25KB" },
+    { "path": "./dist/coinbase*.js", "maxSize": "35.1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" },

packages/clerk-js/package.json

@@ -57,7 +57,7 @@
     "@clerk/localizations": "workspace:^",
     "@clerk/shared": "workspace:^",
     "@clerk/types": "workspace:^",
-    "@coinbase/wallet-sdk": "4.0.4",
+    "@coinbase/wallet-sdk": "4.2.4",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@floating-ui/react": "0.25.4",

packages/clerk-js/rspack.config.js

@@ -81,7 +81,7 @@ const common = ({ mode, disableRHC = false }) => {
             chunks: 'all',
           },
           coinbaseWalletSDKVendor: {
-            test: /[\\/]node_modules[\\/](@coinbase\/wallet-sdk|ieee754|preact|keccak|buffer|string_decoder|sha\.js|base64-js|safe-buffer|util-deprecate|inherits)[\\/]/,
+            test: /[\\/]node_modules[\\/](@coinbase\/wallet-sdk|preact|eventemitter3|@noble\/hashes)[\\/]/,
             name: 'coinbase-wallet-sdk',
             chunks: 'all',
           },

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

@@ -75,9 +75,13 @@ 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 sdk = new CoinbaseWalletSDK({});
-    return sdk.makeWeb3Provider({ options: 'all' });
+    const createCoinbaseWalletSDK = await import('@coinbase/wallet-sdk').then(mod => mod.createCoinbaseWalletSDK);
+    const sdk = createCoinbaseWalletSDK({
+      preference: {
+        options: 'all',
+      },
+    });
+    return sdk.getProvider();
   }
 
   const injectedWeb3Providers = getInjectedWeb3Providers();

playground/app-router/src/app/page.tsx

@@ -97,4 +97,4 @@ export default function Home() {
       </div>
     </main>
   );
-}
+}