From 1882a1c08c58028f29d897dbad4c1a3c8528e9a1 Mon Sep 17 00:00:00 2001
From: Emmanouela <emmanouelapothitou@gmail.com>
Date: Wed, 23 Oct 2024 15:32:14 +0300
Subject: [PATCH 1/3] fix(ui): If Web3 wallet already claimed preview error on
 <UserProfile />

---
 .../ui/components/UserProfile/Web3Form.tsx    | 76 +++++++++++--------
 1 file changed, 45 insertions(+), 31 deletions(-)

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 (
-    <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,
-          })}
+    <>
+      <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>
+      {card.error && (
+        <Text
+          colorScheme='danger'
           sx={t => ({
-            justifyContent: 'start',
-            gap: t.space.$2,
+            padding: t.sizes.$1x5,
+            paddingLeft: t.sizes.$8x5,
           })}
-          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>
+        >
+          {card.error}
+        </Text>
+      )}
+    </>
   );
 });

From ceca9c8d7b1590675e79843e3f5e2bed63c6124d Mon Sep 17 00:00:00 2001
From: Emmanouela Pothitou
 <68468183+EmmanouelaPothitou@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:43:03 +0300
Subject: [PATCH 2/3] Create two-wasps-dance.md

---
 .changeset/two-wasps-dance.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-wasps-dance.md

diff --git a/.changeset/two-wasps-dance.md b/.changeset/two-wasps-dance.md
new file mode 100644
index 0000000000..d6fb6fa210
--- /dev/null
+++ b/.changeset/two-wasps-dance.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+If Web3 wallet already claimed, preview error on `<UserProfile />`.

From cd6e4942f35c0483633b6ca58406ef257c3e6c51 Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Thu, 24 Oct 2024 11:20:57 +0300
Subject: [PATCH 3/3] Update .changeset/two-wasps-dance.md

---
 .changeset/two-wasps-dance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/two-wasps-dance.md b/.changeset/two-wasps-dance.md
index d6fb6fa210..512c2c1c1d 100644
--- a/.changeset/two-wasps-dance.md
+++ b/.changeset/two-wasps-dance.md
@@ -2,4 +2,4 @@
 "@clerk/clerk-js": patch
 ---
 
-If Web3 wallet already claimed, preview error on `<UserProfile />`.
+Show an error on `<UserProfile />` if the Web3 wallet is already claimed.