Skip to content

Commit 4cbe811

Browse files
kdupreydstaley
kduprey
and
dstaley
authored
fix(clerk-js): Dynamically load Web3WalletButtons (#7364)
Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>
1 parent 7a9a22a commit 4cbe811

File tree

5 files changed

+86
-45
lines changed

5 files changed

+86
-45
lines changed

‎packages/clerk-js/bundle-check.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import path from 'node:path';
55
import { pipeline } from 'node:stream';
66
import zlib from 'node:zlib';
77

8-
import { chromium } from 'playwright';
8+
import { chromium } from '@playwright/test';
99

1010
/**
1111
* This script generates a CLI report detailing the gzipped size of JavaScript resources loaded by `clerk-js` for a
@@ -212,7 +212,7 @@ function report(url, responses) {
212212

213213
/**
214214
* Loads the given `url` in `browser`, capturing all HTTP requests that occur.
215-
* @param {import('playwright').Browser} browser
215+
* @param {import('@playwright/test').Browser} browser
216216
* @param {string} url
217217
*/
218218
async function getResponseSizes(browser, url) {

‎packages/clerk-js/bundlewatch.config.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"files": [
3-
{ "path": "./dist/clerk.js", "maxSize": "840KB" },
4-
{ "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
5-
{ "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
6-
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
3+
{ "path": "./dist/clerk.js", "maxSize": "918KB" },
4+
{ "path": "./dist/clerk.browser.js", "maxSize": "84KB" },
5+
{ "path": "./dist/clerk.channel.browser.js", "maxSize": "85KB" },
6+
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "125KB" },
77
{ "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
8-
{ "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
8+
{ "path": "./dist/ui-common*.js", "maxSize": "119KB" },
99
{ "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
10-
{ "path": "./dist/vendors*.js", "maxSize": "47KB" },
10+
{ "path": "./dist/vendors*.js", "maxSize": "50KB" },
1111
{ "path": "./dist/coinbase*.js", "maxSize": "38KB" },
1212
{ "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
1313
{ "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -16,11 +16,11 @@
1616
{ "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
1717
{ "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
1818
{ "path": "./dist/signin*.js", "maxSize": "18KB" },
19-
{ "path": "./dist/signup*.js", "maxSize": "9.5KB" },
19+
{ "path": "./dist/signup*.js", "maxSize": "11KB" },
2020
{ "path": "./dist/userbutton*.js", "maxSize": "5KB" },
2121
{ "path": "./dist/userprofile*.js", "maxSize": "16KB" },
2222
{ "path": "./dist/userverification*.js", "maxSize": "5KB" },
23-
{ "path": "./dist/onetap*.js", "maxSize": "1KB" },
23+
{ "path": "./dist/onetap*.js", "maxSize": "3KB" },
2424
{ "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
2525
{ "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
2626
{ "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },

‎packages/clerk-js/rspack.config.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,17 +129,41 @@ const common = ({ mode, variant, disableRHC = false }) => {
129129
signUp: {
130130
minChunks: 1,
131131
name: 'signup',
132-
test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
132+
test: module =>
133+
!!(
134+
module instanceof rspack.NormalModule &&
135+
module.resource &&
136+
module.resource.includes('/ui/components/SignUp')
137+
),
133138
},
134139
common: {
135140
minChunks: 1,
136141
name: 'ui-common',
137142
priority: -20,
138-
test: module => !!(module.resource && !module.resource.includes('/ui/components')),
143+
test: module =>
144+
!!(
145+
module instanceof rspack.NormalModule &&
146+
module.resource &&
147+
!module.resource.includes('/ui/components') &&
148+
!module.resource.includes('node_modules')
149+
),
139150
},
140151
defaultVendors: {
141152
minChunks: 1,
142-
test: /[\\/]node_modules[\\/]/,
153+
test: module => {
154+
if (!(module instanceof rspack.NormalModule) || !module.resource) {
155+
return false;
156+
}
157+
// Exclude Solana packages and their known transitive dependencies
158+
if (
159+
/[\\/]node_modules[\\/](@solana|@solana-mobile|@wallet-standard|bn\.js|borsh|buffer|superstruct|bs58|jayson|rpc-websockets|qrcode)[\\/]/.test(
160+
module.resource,
161+
)
162+
) {
163+
return false;
164+
}
165+
return /[\\/]node_modules[\\/]/.test(module.resource);
166+
},
143167
name: 'vendors',
144168
priority: -10,
145169
},

‎packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { useClerk } from '@clerk/shared/react';
2+
import { lazy, Suspense } from 'react';
23

34
import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '@/ui/common/withRedirect';
45
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
56
import { BackLink } from '@/ui/elements/BackLink';
67
import { Card } from '@/ui/elements/Card';
78
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
89
import { Header } from '@/ui/elements/Header';
9-
import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
1010
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
1111

12+
const Web3WalletButtons = lazy(() =>
13+
import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3WalletButtons').then(m => ({
14+
default: m.Web3WalletButtons,
15+
})),
16+
);
17+
1218
import { useSignInContext } from '../../contexts';
1319
import { useRouter } from '../../router';
1420

@@ -35,20 +41,23 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
3541
direction='col'
3642
gap={4}
3743
>
38-
<Web3WalletButtons
39-
web3AuthCallback={({ walletName }) => {
40-
return clerk
41-
.authenticateWithWeb3({
42-
customNavigate: router.navigate,
43-
redirectUrl: ctx.afterSignInUrl || '/',
44-
secondFactorUrl: 'factor-two',
45-
signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
46-
strategy: 'web3_solana_signature',
47-
walletName,
48-
})
49-
.catch(err => web3CallbackErrorHandler(err, card.setError));
50-
}}
51-
/>
44+
<Suspense fallback={null}>
45+
<Web3WalletButtons
46+
web3AuthCallback={({ walletName }) => {
47+
return clerk
48+
.authenticateWithWeb3({
49+
customNavigate: router.navigate,
50+
redirectUrl: ctx.afterSignInUrl || '/',
51+
secondFactorUrl: 'factor-two',
52+
signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
53+
strategy: 'web3_solana_signature',
54+
walletName,
55+
})
56+
.catch(err => web3CallbackErrorHandler(err, card.setError));
57+
}}
58+
/>
59+
</Suspense>
60+
5261
<BackLink
5362
boxElementDescriptor={descriptors.backRow}
5463
linkElementDescriptor={descriptors.backLink}

‎packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { useClerk } from '@clerk/shared/react';
2+
import { lazy, Suspense } from 'react';
23

34
import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
45
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
56
import { BackLink } from '@/ui/elements/BackLink';
67
import { Card } from '@/ui/elements/Card';
78
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
89
import { Header } from '@/ui/elements/Header';
9-
import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
1010
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
1111

12+
const Web3WalletButtons = lazy(() =>
13+
import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3WalletButtons').then(m => ({
14+
default: m.Web3WalletButtons,
15+
})),
16+
);
17+
1218
import { useSignUpContext } from '../../contexts';
1319
import { useRouter } from '../../router';
1420

@@ -35,22 +41,24 @@ const SignUpStartSolanaWalletsCardInner = () => {
3541
direction='col'
3642
gap={4}
3743
>
38-
<Web3WalletButtons
39-
web3AuthCallback={({ walletName }) => {
40-
return clerk
41-
.authenticateWithWeb3({
42-
customNavigate: router.navigate,
43-
redirectUrl: ctx.afterSignUpUrl || '/',
44-
signUpContinueUrl: '../continue',
45-
strategy: 'web3_solana_signature',
46-
unsafeMetadata: ctx.unsafeMetadata,
47-
// TODO: Add support to pass legalAccepted status
48-
// legalAccepted: ,
49-
walletName,
50-
})
51-
.catch(err => web3CallbackErrorHandler(err, card.setError));
52-
}}
53-
/>
44+
<Suspense fallback={null}>
45+
<Web3WalletButtons
46+
web3AuthCallback={({ walletName }) => {
47+
return clerk
48+
.authenticateWithWeb3({
49+
customNavigate: router.navigate,
50+
redirectUrl: ctx.afterSignUpUrl || '/',
51+
signUpContinueUrl: '../continue',
52+
strategy: 'web3_solana_signature',
53+
unsafeMetadata: ctx.unsafeMetadata,
54+
// TODO: Add support to pass legalAccepted status
55+
// legalAccepted: ,
56+
walletName,
57+
})
58+
.catch(err => web3CallbackErrorHandler(err, card.setError));
59+
}}
60+
/>
61+
</Suspense>
5462
<BackLink
5563
boxElementDescriptor={descriptors.backRow}
5664
linkElementDescriptor={descriptors.backLink}

0 commit comments

Comments
 (0)