Skip to content

Commit 0c3eb2c

Browse files
kdupreykduprey
committed
feat(clerk-js): enhance Solana wallet integration with localization support
Signed-off-by: Kenton Duprey <kenton@clerk.dev>
1 parent b2d0f22 commit 0c3eb2c

File tree

5 files changed

+66
-31
lines changed

5 files changed

+66
-31
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useClerk } from '@clerk/shared/react';
22

33
import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '@/ui/common/withRedirect';
4-
import { descriptors, Flex, Flow } from '@/ui/customizables';
4+
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
55
import { BackLink } from '@/ui/elements/BackLink';
66
import { Card } from '@/ui/elements/Card';
77
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
@@ -27,8 +27,8 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
2727
<Card.Root>
2828
<Card.Content>
2929
<Header.Root showLogo>
30-
<Header.Title>Continue with Solana Wallet</Header.Title>
31-
<Header.Subtitle>Select a wallet below to sign in</Header.Subtitle>
30+
<Header.Title localizationKey={localizationKeys('signIn.web3Solana.title')} />
31+
<Header.Subtitle localizationKey={localizationKeys('signIn.web3Solana.subtitle')} />
3232
</Header.Root>
3333
<Card.Alert>{card.error}</Card.Alert>
3434
<Flex
@@ -49,7 +49,6 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
4949
.catch(err => web3CallbackErrorHandler(err, card.setError));
5050
}}
5151
/>
52-
5352
<BackLink
5453
boxElementDescriptor={descriptors.backRow}
5554
linkElementDescriptor={descriptors.backLink}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useClerk } from '@clerk/shared/react';
22

33
import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
4-
import { descriptors, Flex, Flow } from '@/ui/customizables';
4+
import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
55
import { BackLink } from '@/ui/elements/BackLink';
66
import { Card } from '@/ui/elements/Card';
77
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
@@ -27,8 +27,8 @@ const SignUpStartSolanaWalletsCardInner = () => {
2727
<Card.Root>
2828
<Card.Content>
2929
<Header.Root showLogo>
30-
<Header.Title>Sign up with Solana Wallet</Header.Title>
31-
<Header.Subtitle>Select a wallet below to sign up</Header.Subtitle>
30+
<Header.Title localizationKey={localizationKeys('signUp.web3Solana.title')} />
31+
<Header.Subtitle localizationKey={localizationKeys('signUp.web3Solana.subtitle')} />
3232
</Header.Root>
3333
<Card.Alert>{card.error}</Card.Alert>
3434
<Flex

‎packages/clerk-js/src/ui/elements/Web3WalletButtons.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,22 @@ import type { Ref } from 'react';
55
import React, { forwardRef, isValidElement, useMemo } from 'react';
66

77
import { ProviderInitialIcon } from '@/ui/common';
8-
import { Button, descriptors, Flex, Grid, Icon, Image, Link, SimpleButton, Spinner, Text } from '@/ui/customizables';
8+
import {
9+
Button,
10+
descriptors,
11+
Flex,
12+
Grid,
13+
Icon,
14+
Image,
15+
localizationKeys,
16+
SimpleButton,
17+
Spinner,
18+
Text,
19+
useLocalizations,
20+
} from '@/ui/customizables';
921
import { Card } from '@/ui/elements/Card';
1022
import { useCardState } from '@/ui/elements/contexts';
23+
import { LinkRenderer } from '@/ui/elements/LinkRenderer';
1124
import { distributeStrategiesIntoRows } from '@/ui/elements/utils';
1225
import { mqu, type PropsOfComponent } from '@/ui/styledSystem';
1326
import { sleep } from '@/ui/utils/sleep';
@@ -23,6 +36,7 @@ const MAX_STRATEGIES_PER_ROW = 5;
2336
const Web3WalletButtonsInner = ({ web3AuthCallback }: Web3WalletButtonsProps) => {
2437
const card = useCardState();
2538
const { wallets } = useWallet();
39+
const { t } = useLocalizations();
2640

2741
// Filter to only show installed wallets
2842
const installedWallets = React.useMemo(
@@ -61,27 +75,19 @@ const Web3WalletButtonsInner = ({ web3AuthCallback }: Web3WalletButtonsProps) =>
6175
if (installedWallets.length === 0) {
6276
return (
6377
<Card.Alert>
64-
No Solana wallets detected. Please install a Solana supported wallet extension like{' '}
65-
<Link
66-
href='https://phantom.app/'
67-
target='_blank'
68-
rel='noopener noreferrer'
69-
colorScheme='danger'
78+
<LinkRenderer
79+
text={t(
80+
localizationKeys('web3WalletButtons.noneAvailable', {
81+
solanaWalletsLink: 'https://solana.com/solana-wallets',
82+
}),
83+
)}
7084
isExternal
71-
>
72-
Phantom
73-
</Link>{' '}
74-
or{' '}
75-
<Link
76-
href='https://www.backpack.app/'
77-
target='_blank'
78-
rel='noopener noreferrer'
79-
isExternal
80-
colorScheme='danger'
81-
>
82-
Backpack
83-
</Link>
84-
.
85+
sx={t => ({
86+
textDecoration: 'underline',
87+
textUnderlineOffset: t.space.$1,
88+
color: 'inherit',
89+
})}
90+
/>
8591
</Card.Alert>
8692
);
8793
}
@@ -120,14 +126,16 @@ const Web3WalletButtonsInner = ({ web3AuthCallback }: Web3WalletButtonsProps) =>
120126
>
121127
{row.map(w => {
122128
const shouldShowPreText = installedWallets.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD;
123-
const label = shouldShowPreText ? `Continue with ${w.name}` : w.name;
129+
const label = shouldShowPreText
130+
? localizationKeys('web3WalletButtons.continue', { walletName: w.name })
131+
: w.name;
124132

125133
const imageOrInitial = w.icon ? (
126134
<Image
127135
isDisabled={card.isLoading}
128136
isLoading={card.loadingMetadata === w.name}
129137
src={w.icon}
130-
alt={`Sign in with ${w.name}`}
138+
alt={t(localizationKeys('web3WalletButtons.connect', { walletName: w.name }))}
131139
sx={theme => ({ width: theme.sizes.$4, height: 'auto', maxWidth: '100%' })}
132140
/>
133141
) : (
@@ -145,7 +153,7 @@ const Web3WalletButtonsInner = ({ web3AuthCallback }: Web3WalletButtonsProps) =>
145153
onClick={startWeb3AuthFlow(w.name)}
146154
isLoading={card.loadingMetadata === w.name}
147155
isDisabled={card.isLoading}
148-
label={label}
156+
label={t(label)}
149157
icon={imageOrInitial}
150158
/>
151159
);

‎packages/localizations/src/en-US.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -741,6 +741,10 @@ export const enUS: LocalizationResource = {
741741
subtitle: 'To continue, please enter the verification code generated by your authenticator app',
742742
title: 'Two-step verification',
743743
},
744+
web3Solana: {
745+
title: 'Sign in with Solana',
746+
subtitle: 'Select a wallet below to sign in',
747+
},
744748
},
745749
signInEnterPasswordTitle: 'Enter your password',
746750
signUp: {
@@ -833,6 +837,16 @@ export const enUS: LocalizationResource = {
833837
title: 'Create your account',
834838
titleCombined: 'Create your account',
835839
},
840+
web3Solana: {
841+
title: 'Sign up with Solana',
842+
subtitle: 'Select a wallet below to sign up',
843+
},
844+
},
845+
web3WalletButtons: {
846+
connect: 'Connect with {{walletName}}',
847+
continue: 'Continue with {{walletName}}',
848+
noneAvailable:
849+
'No Solana Web3 wallets detected. Please install a Web3 supported {{ solanaWalletsLink || link("wallet extension") }}.',
836850
},
837851
socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
838852
socialButtonsBlockButtonManyInView: '{{provider|titleize}}',

‎packages/shared/src/types/localization.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,11 @@ export type __internal_LocalizationResource = {
369369
title: LocalizationValue;
370370
subtitle: LocalizationValue;
371371
};
372+
web3Solana: {
373+
title: LocalizationValue;
374+
subtitle: LocalizationValue;
375+
noAvailableWallets: LocalizationValue;
376+
};
372377
};
373378
signIn: {
374379
start: {
@@ -540,6 +545,10 @@ export type __internal_LocalizationResource = {
540545
title: LocalizationValue;
541546
subtitle: LocalizationValue;
542547
};
548+
web3Solana: {
549+
title: LocalizationValue;
550+
subtitle: LocalizationValue;
551+
};
543552
};
544553
reverification: {
545554
password: {
@@ -1284,6 +1293,11 @@ export type __internal_LocalizationResource = {
12841293
action__invitationAccept: LocalizationValue;
12851294
};
12861295
};
1296+
web3WalletButtons: {
1297+
connect: LocalizationValue<'walletName'>;
1298+
continue: LocalizationValue<'walletName'>;
1299+
noneAvailable: LocalizationValue<'solanaWalletsLink'>;
1300+
};
12871301
};
12881302

12891303
type WithParamName<T> = T &

0 commit comments

Comments
 (0)