Skip to content

feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kduprey merged 11 commits into from
Dec 12, 2025
Merged

feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c6deea6
feat(clerk-js): add Web3 wallet selection and connection functionalit…
Dec 2, 2025
52e69f3
fix(clerk-js): add loading state with spinner in SignUp component for…
Dec 10, 2025
fbfa14c
fix(clerk-js): clean up Solana wallet connection flow in UserProfile …
Dec 10, 2025
12cf037
feat(localizations): add web3SolanaWalletsSection to localization fil…
Dec 10, 2025
a4b1602
refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…
Dec 10, 2025
e0d35a3
refactor(clerk-js): update wallet component references to Solana
Dec 11, 2025
b3cca52
chore(changeset): Add changeset summary
Dec 11, 2025
d500546
Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…
Dec 11, 2025
e03676c
chore: update bundlewatch config for clerk.js
Dec 11, 2025
618d6e5
feat(localizations): update Solana wallet localisation keys across mu…
Dec 11, 2025
9023b3a
Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…
Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/afraid-apes-cough.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`
2 changes: 1 addition & 1 deletion packages/clerk-js/bundlewatch.config.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
"files": [
{ "path": "./dist/clerk.js", "maxSize": "922.1KB" },
{ "path": "./dist/clerk.js", "maxSize": "922.6KB" },
{ "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
{ "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/common/WalletInitialIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
return (
<Box
as='span'
elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
sx={t => ({
...common.centeredFlex('inline-flex'),
width: t.space.$4,
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
default: m.Web3SolanaWalletButtons,
})),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
</Flex>
}
>
<Web3WalletButtons
<Web3SolanaWalletButtons
web3AuthCallback={({ walletName }) => {
return clerk
.authenticateWithWeb3({
Expand Down
26 changes: 22 additions & 4 deletions packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
default: m.Web3SolanaWalletButtons,
})),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
direction='col'
gap={4}
>
<Suspense fallback={null}>
<Web3WalletButtons
<Suspense
fallback={
<Flex
direction={'row'}
align={'center'}
justify={'center'}
sx={t => ({
height: '100%',
minHeight: t.sizes.$32,
})}
>
<Spinner
size={'lg'}
colorScheme={'primary'}
elementDescriptor={descriptors.spinner}
/>
</Flex>
}
>
<Web3SolanaWalletButtons
web3AuthCallback={({ walletName }) => {
return clerk
.authenticateWithWeb3({
Expand Down
112 changes: 66 additions & 46 deletions packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
const card = useCardState();
const { open } = useActionContext();
const { user } = useUser();
const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
const unconnectedStrategies = enabledStrategies.filter(strategy => {
return !connectedStrategies.includes(strategy);
return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
});

if (unconnectedStrategies.length === 0) {
return null;
}

const createWeb3Wallet = useReverification((identifier: string) =>
user?.createWeb3Wallet({ web3Wallet: identifier }),
);

const connect = async (strategy: Web3Strategy) => {
// If the user selects `web3_solana_signature` as their strategy,
// we need to obtain the wallet name to use when connecting and signing the message during the auth flow
//
// Otherwise, our current Web3 providers are all based on the wallet provider name,
// which is sufficient for our current use case when connecting to a wallet.
const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
if (strategy === 'web3_solana_signature' && !walletName) {
open('web3Wallets');
return;
}
const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
card.setError(undefined);

try {
card.setLoading(strategy);
const identifier = await getWeb3Identifier({ provider });
const identifier = await getWeb3Identifier({ provider, walletName });

if (!user) {
throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
let web3Wallet = await createWeb3Wallet(identifier);
web3Wallet = await web3Wallet?.prepareVerification({ strategy });
const message = web3Wallet?.verification.message as string;
const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
await web3Wallet?.attemptVerification({ signature });
card.setIdle();
} catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
}
};

if (unconnectedStrategies.length === 0) {
return null;
}

return (
<>
<ProfileSection.ActionMenu
id='web3Wallets'
triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
onClick={onClick}
>
{unconnectedStrategies.map(strategy => (
<ProfileSection.ActionMenuItem
key={strategy}
id={strategyToDisplayData[strategy].id}
onClick={() => connect(strategy)}
isLoading={card.loadingMetadata === strategy}
isDisabled={card.isLoading}
localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
provider: strategyToDisplayData[strategy].name,
})}
sx={t => ({
justifyContent: 'start',
gap: t.space.$2,
})}
leftIcon={
<Image
elementDescriptor={descriptors.providerIcon}
elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
isLoading={card.loadingMetadata === strategy}
isDisabled={card.isLoading}
src={strategyToDisplayData[strategy].iconUrl}
alt={`Connect ${strategyToDisplayData[strategy].name}`}
sx={theme => ({ width: theme.sizes.$5 })}
/>
}
/>
))}
</ProfileSection.ActionMenu>
<Action.Closed value='web3Wallets'>
<ProfileSection.ActionMenu
id='web3Wallets'
triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
>
{unconnectedStrategies.map(strategy => (
<ProfileSection.ActionMenuItem
key={strategy}
id={strategyToDisplayData[strategy].id}
onClick={() => connect({ strategy })}
isLoading={card.loadingMetadata === strategy}
isDisabled={card.isLoading}
localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
provider: strategyToDisplayData[strategy].name,
})}
sx={t => ({
justifyContent: 'start',
gap: t.space.$2,
})}
leftIcon={
<Image
elementDescriptor={descriptors.providerIcon}
elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
isLoading={card.loadingMetadata === strategy}
isDisabled={card.isLoading}
src={strategyToDisplayData[strategy].iconUrl}
alt={`Connect ${strategyToDisplayData[strategy].name}`}
sx={theme => ({ width: theme.sizes.$5 })}
/>
}
/>
))}
</ProfileSection.ActionMenu>
</Action.Closed>
<Action.Open value='web3Wallets'>
<Action.Card>
<Web3SelectSolanaWalletScreen onConnect={connect} />
</Action.Card>
</Action.Open>

{card.error && (
<Text
colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
)}
</>
);
});
};
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
);
})}
</ProfileSection.ItemList>
{shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
{shouldAllowCreation && <AddWeb3WalletActionMenu />}
</Action.Root>
</ProfileSection.Root>
);
Expand Down
79 changes: 79 additions & 0 deletions packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
default: m.Web3SolanaWalletButtons,
})),
);

export type Web3SelectWalletProps = {
onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
const card = useCardState();
const { close } = useActionContext();

const onClick = async ({ walletName }: { walletName: string }) => {
card.setLoading(walletName);
try {
await onConnect({ strategy: 'web3_solana_signature', walletName });
card.setIdle();
} catch (err) {
card.setIdle();
console.error(err);
} finally {
close();
}
};

return (
<FormContainer
headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
>
<Form.Root>
<Suspense
fallback={
<Flex
direction={'row'}
align={'center'}
justify={'center'}
sx={t => ({
height: '100%',
minHeight: t.sizes.$32,
})}
>
<Spinner
size={'lg'}
colorScheme={'primary'}
elementDescriptor={descriptors.spinner}
/>
</Flex>
}
>
<Web3SolanaWalletButtons web3AuthCallback={onClick} />
</Suspense>
<FormButtonContainer>
<Button
variant='ghost'
onClick={() => {
close();
}}
localizationKey={localizationKeys('userProfile.formButtonReset')}
elementDescriptor={descriptors.formButtonReset}
/>
</FormButtonContainer>
</Form.Root>
</FormContainer>
);
};
14 changes: 7 additions & 7 deletions packages/clerk-js/src/ui/customizables/elementDescriptors.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
'enterpriseConnectionButton',
'enterpriseConnectionButtonText',

'web3WalletButtonsRoot',
'web3WalletButtons',
'web3WalletButtonsIconButton',
'web3WalletButtonsBlockButton',
'web3WalletButtonsBlockButtonText',
'web3WalletButtonsWalletIcon',
'web3WalletButtonsWalletInitialIcon',
'web3SolanaWalletButtonsRoot',
'web3SolanaWalletButtons',
'web3SolanaWalletButtonsIconButton',
'web3SolanaWalletButtonsBlockButton',
'web3SolanaWalletButtonsBlockButtonText',
'web3SolanaWalletButtonsWalletIcon',
'web3SolanaWalletButtonsWalletInitialIcon',

'walletIcon',
'walletInitialIcon',
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via `<UserProfile />` by kduprey · Pull Request #7435 · clerk/javascript · GitHub
Skip to content
feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

kduprey
merged 11 commits into

from

Dec 12, 2025
 Merged


feat(clerk-js,localizations,types): Add ability for users to connect a Solana enabled wallet via <UserProfile />#7435
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
c6deea6

feat(clerk-js): add Web3 wallet selection and connection functionalit…

Dec 2, 2025
52e69f3

fix(clerk-js): add loading state with spinner in SignUp component for…

Dec 10, 2025
fbfa14c

fix(clerk-js): clean up Solana wallet connection flow in UserProfile …

Dec 10, 2025
12cf037

feat(localizations): add web3SolanaWalletsSection to localization fil…

Dec 10, 2025
a4b1602

refactor(clerk-js): Rename `Web3SelectWalletScreen.tsx` to `Web3Selec…

Dec 10, 2025
e0d35a3

refactor(clerk-js): update wallet component references to Solana

Dec 11, 2025
b3cca52

chore(changeset): Add changeset summary

Dec 11, 2025
d500546

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025
e03676c

chore: update bundlewatch config for clerk.js

Dec 11, 2025
618d6e5

feat(localizations): update Solana wallet localisation keys across mu…

Dec 11, 2025
9023b3a

Merge branch 'release/core-2' into kenton/user-3772-add-ability-for-u…

Dec 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
.changeset/afraid-apes-cough.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
---

Add Web3 Solana support to `<UserProfile />`

2 changes: 1 addition & 1 deletion
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
{
 "files": [
 { "path": "./dist/clerk.js", "maxSize": "922.1KB" },
 { "path": "./dist/clerk.js", "maxSize": "922.6KB" },
 { "path": "./dist/clerk.browser.js", "maxSize": "87KB" },
 { "path": "./dist/clerk.legacy.browser.js", "maxSize": "129KB" },
 { "path": "./dist/clerk.headless*.js", "maxSize": "66KB" },
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/WalletInitialIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ export const WalletInitialIcon = (props: WalletInitialIconProps) => {
 return (
 <Box
 as='span'
 elementDescriptor={[descriptors.walletIcon, descriptors.web3WalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3WalletButtonsWalletInitialIcon.setId(id)}
 elementDescriptor={[descriptors.walletIcon, descriptors.web3SolanaWalletButtonsWalletInitialIcon]}
 elementId={descriptors.web3SolanaWalletButtonsWalletInitialIcon.setId(id)}
 sx={t => ({
 ...common.centeredFlex('inline-flex'),
 width: t.space.$4,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -60,7 +60,7 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
 </Flex>
 }
 >
 <Web3WalletButtons
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

26 changes: 22 additions & 4 deletions
packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,14 +2,14 @@ import { useClerk } from '@clerk/shared/react';
import { lazy, Suspense } from 'react';

import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
import { BackLink } from '@/ui/elements/BackLink';
import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';
import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';

const Web3WalletButtons = lazy(() =>
const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
Expand DownExpand Up@@ -41,8 +41,26 @@ const SignUpStartSolanaWalletsCardInner = () => {
 direction='col'
 gap={4}
 >
 <Suspense fallback={null}>
 <Web3WalletButtons
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons
 web3AuthCallback={({ walletName }) => {
 return clerk
 .authenticateWithWeb3({
Expand Down

112 changes: 66 additions & 46 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
import { useReverification, useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/shared/types';

import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';
import { Action } from '@/ui/elements/Action';
import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { ProfileSection } from '@/ui/elements/Section';
import { getFieldError, handleError } from '@/ui/utils/errorHandler';

import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { useEnabledThirdPartyProviders } from '../../hooks';

export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {
export const AddWeb3WalletActionMenu = () => {
 const card = useCardState();
 const { open } = useActionContext();
 const { user } = useUser();
 const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();

 const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];
 const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);
 const unconnectedStrategies = enabledStrategies.filter(strategy => {
 return !connectedStrategies.includes(strategy);
 return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 });

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 const createWeb3Wallet = useReverification((identifier: string) =>
 user?.createWeb3Wallet({ web3Wallet: identifier }),
 );

 const connect = async (strategy: Web3Strategy) => {
 // If the user selects `web3_solana_signature` as their strategy,
 // we need to obtain the wallet name to use when connecting and signing the message during the auth flow
 //
 // Otherwise, our current Web3 providers are all based on the wallet provider name,
 // which is sufficient for our current use case when connecting to a wallet.
 const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {
 if (strategy === 'web3_solana_signature' && !walletName) {
 open('web3Wallets');
 return;
 }
 const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 card.setError(undefined);

 try {
 card.setLoading(strategy);
 const identifier = await getWeb3Identifier({ provider });
 const identifier = await getWeb3Identifier({ provider, walletName });

 if (!user) {
 throw new Error('user is not defined');
Expand All@@ -38,7 +55,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 let web3Wallet = await createWeb3Wallet(identifier);
 web3Wallet = await web3Wallet?.prepareVerification({ strategy });
 const message = web3Wallet?.verification.message as string;
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider });
 const signature = await generateWeb3Signature({ identifier, nonce: message, provider, walletName });
 await web3Wallet?.attemptVerification({ signature });
 card.setIdle();
 } catch (err) {
Expand All@@ -52,45 +69,48 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 }
 };

 if (unconnectedStrategies.length === 0) {
 return null;
 }

 return (
 <>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 onClick={onClick}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect(strategy)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 <Action.Closed value='web3Wallets'>
 <ProfileSection.ActionMenu
 id='web3Wallets'
 triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
 >
 {unconnectedStrategies.map(strategy => (
 <ProfileSection.ActionMenuItem
 key={strategy}
 id={strategyToDisplayData[strategy].id}
 onClick={() => connect({ strategy })}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
 provider: strategyToDisplayData[strategy].name,
 })}
 sx={t => ({
 justifyContent: 'start',
 gap: t.space.$2,
 })}
 leftIcon={
 <Image
 elementDescriptor={descriptors.providerIcon}
 elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}
 isLoading={card.loadingMetadata === strategy}
 isDisabled={card.isLoading}
 src={strategyToDisplayData[strategy].iconUrl}
 alt={`Connect ${strategyToDisplayData[strategy].name}`}
 sx={theme => ({ width: theme.sizes.$5 })}
 />
 }
 />
 ))}
 </ProfileSection.ActionMenu>
 </Action.Closed>
 <Action.Open value='web3Wallets'>
 <Action.Card>
 <Web3SelectSolanaWalletScreen onConnect={connect} />
 </Action.Card>
 </Action.Open>

 {card.error && (
 <Text
 colorScheme='danger'
Expand All@@ -104,4 +124,4 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC
 )}
 </>
 );
});
};

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ export const Web3Section = withCardStateProvider(
 );
 })}
 </ProfileSection.ItemList>
 {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}
 {shouldAllowCreation && <AddWeb3WalletActionMenu />}
 </Action.Root>
 </ProfileSection.Root>
 );
Expand Down

79 changes: 79 additions & 0 deletions
packages/clerk-js/src/ui/components/UserProfile/Web3SelectSolanaWalletScreen.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
import type { Web3Strategy } from '@clerk/shared/types';
import { lazy, Suspense } from 'react';

import { useActionContext } from '@/ui/elements/Action/ActionRoot';
import { useCardState } from '@/ui/elements/contexts';
import { Form } from '@/ui/elements/Form';
import { FormButtonContainer } from '@/ui/elements/FormButtons';
import { FormContainer } from '@/ui/elements/FormContainer';

import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';

const Web3SolanaWalletButtons = lazy(() =>
 import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({
 default: m.Web3SolanaWalletButtons,
 })),
);

export type Web3SelectWalletProps = {
 onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;
};

export const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {
 const card = useCardState();
 const { close } = useActionContext();

 const onClick = async ({ walletName }: { walletName: string }) => {
 card.setLoading(walletName);
 try {
 await onConnect({ strategy: 'web3_solana_signature', walletName });
 card.setIdle();
 } catch (err) {
 card.setIdle();
 console.error(err);
 } finally {
 close();
 }
 };

 return (
 <FormContainer
 headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}
 headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}
 >
 <Form.Root>
 <Suspense
 fallback={
 <Flex
 direction={'row'}
 align={'center'}
 justify={'center'}
 sx={t => ({
 height: '100%',
 minHeight: t.sizes.$32,
 })}
 >
 <Spinner
 size={'lg'}
 colorScheme={'primary'}
 elementDescriptor={descriptors.spinner}
 />
 </Flex>
 }
 >
 <Web3SolanaWalletButtons web3AuthCallback={onClick} />
 </Suspense>
 <FormButtonContainer>
 <Button
 variant='ghost'
 onClick={() => {
 close();
 }}
 localizationKey={localizationKeys('userProfile.formButtonReset')}
 elementDescriptor={descriptors.formButtonReset}
 />
 </FormButtonContainer>
 </Form.Root>
 </FormContainer>
 );
};

14 changes: 7 additions & 7 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -516,13 +516,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'enterpriseConnectionButton',
 'enterpriseConnectionButtonText',

 'web3WalletButtonsRoot',
 'web3WalletButtons',
 'web3WalletButtonsIconButton',
 'web3WalletButtonsBlockButton',
 'web3WalletButtonsBlockButtonText',
 'web3WalletButtonsWalletIcon',
 'web3WalletButtonsWalletInitialIcon',
 'web3SolanaWalletButtonsRoot',
 'web3SolanaWalletButtons',
 'web3SolanaWalletButtonsIconButton',
 'web3SolanaWalletButtonsBlockButton',
 'web3SolanaWalletButtonsBlockButtonText',
 'web3SolanaWalletButtonsWalletIcon',
 'web3SolanaWalletButtonsWalletInitialIcon',

 'walletIcon',
 'walletInitialIcon',
Expand Down
Loading