Skip to content

Commit e8dbc8d

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

File tree

5 files changed

+85
-43
lines changed

5 files changed

+85
-43
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: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"files": [
3-
{ "path": "./dist/clerk.js", "maxSize": "840KB" },
4-
{ "path": "./dist/clerk.browser.js", "maxSize": "83KB" },
5-
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "127KB" },
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": "129KB" },
67
{ "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
78
{ "path": "./dist/ui-common*.js", "maxSize": "119KB" },
89
{ "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
9-
{ "path": "./dist/vendors*.js", "maxSize": "47KB" },
10+
{ "path": "./dist/vendors*.js", "maxSize": "50KB" },
1011
{ "path": "./dist/coinbase*.js", "maxSize": "38KB" },
1112
{ "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
1213
{ "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -15,11 +16,11 @@
1516
{ "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
1617
{ "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
1718
{ "path": "./dist/signin*.js", "maxSize": "18KB" },
18-
{ "path": "./dist/signup*.js", "maxSize": "9.5KB" },
19+
{ "path": "./dist/signup*.js", "maxSize": "11KB" },
1920
{ "path": "./dist/userbutton*.js", "maxSize": "5KB" },
2021
{ "path": "./dist/userprofile*.js", "maxSize": "16KB" },
2122
{ "path": "./dist/userverification*.js", "maxSize": "5KB" },
22-
{ "path": "./dist/onetap*.js", "maxSize": "1KB" },
23+
{ "path": "./dist/onetap*.js", "maxSize": "3KB" },
2324
{ "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
2425
{ "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
2526
{ "path": "./dist/enableOrganizationsPrompt*.js", "maxSize": "6.5KB" },

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,17 +126,41 @@ const common = ({ mode, variant, disableRHC = false }) => {
126126
signUp: {
127127
minChunks: 1,
128128
name: 'signup',
129-
test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
129+
test: module =>
130+
!!(
131+
module instanceof rspack.NormalModule &&
132+
module.resource &&
133+
module.resource.includes('/ui/components/SignUp')
134+
),
130135
},
131136
common: {
132137
minChunks: 1,
133138
name: 'ui-common',
134139
priority: -20,
135-
test: module => !!(module.resource && !module.resource.includes('/ui/components')),
140+
test: module =>
141+
!!(
142+
module instanceof rspack.NormalModule &&
143+
module.resource &&
144+
!module.resource.includes('/ui/components') &&
145+
!module.resource.includes('node_modules')
146+
),
136147
},
137148
defaultVendors: {
138149
minChunks: 1,
139-
test: /[\\/]node_modules[\\/]/,
150+
test: module => {
151+
if (!(module instanceof rspack.NormalModule) || !module.resource) {
152+
return false;
153+
}
154+
// Exclude Solana packages and their known transitive dependencies
155+
if (
156+
/[\\/]node_modules[\\/](@solana|@solana-mobile|@wallet-standard|bn\.js|borsh|buffer|superstruct|bs58|jayson|rpc-websockets|qrcode)[\\/]/.test(
157+
module.resource,
158+
)
159+
) {
160+
return false;
161+
}
162+
return /[\\/]node_modules[\\/]/.test(module.resource);
163+
},
140164
name: 'vendors',
141165
priority: -10,
142166
},

‎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)