diff --git a/.changeset/two-wasps-dance.md b/.changeset/two-wasps-dance.md
new file mode 100644
index 0000000000..512c2c1c1d
--- /dev/null
+++ b/.changeset/two-wasps-dance.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Show an error on `` if the Web3 wallet is already claimed.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx
index 0f607a6791..7992b5e89d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx
@@ -2,7 +2,7 @@ import { useUser } from '@clerk/shared/react';
import type { Web3Provider, Web3Strategy } from '@clerk/types';
import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
-import { descriptors, Image, localizationKeys } from '../../customizables';
+import { descriptors, Image, localizationKeys, Text } from '../../customizables';
import { ProfileSection, useCardState, withCardStateProvider } from '../../elements';
import { useEnabledThirdPartyProviders } from '../../hooks';
import { getFieldError, handleError } from '../../utils';
@@ -20,6 +20,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(() => {
const connect = async (strategy: Web3Strategy) => {
const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
+ card.setError(undefined);
try {
card.setLoading(strategy);
@@ -51,37 +52,50 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(() => {
}
return (
-
- {unconnectedStrategies.map(strategy => (
- connect(strategy)}
- isLoading={card.loadingMetadata === strategy}
- isDisabled={card.isLoading}
- localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {
- provider: strategyToDisplayData[strategy].name,
- })}
+ <>
+
+ {unconnectedStrategies.map(strategy => (
+ 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={
+ ({ width: theme.sizes.$5 })}
+ />
+ }
+ />
+ ))}
+
+ {card.error && (
+ ({
- justifyContent: 'start',
- gap: t.space.$2,
+ padding: t.sizes.$1x5,
+ paddingLeft: t.sizes.$8x5,
})}
- leftIcon={
- ({ width: theme.sizes.$5 })}
- />
- }
- />
- ))}
-
+ >
+ {card.error}
+
+ )}
+ >
);
});