fix(clerk-js): Update error handling and adjust Web3WalletMenu logic with verification status (#7489)

Signed-off-by: Kenton Duprey <[email protected]>

Author: kduprey

.changeset/busy-frogs-type.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix Web3 connection error handling in `<UserProfile />`

packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx

@@ -6,10 +6,10 @@ 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 { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
 import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3';
-import { descriptors, Image, localizationKeys, Text } from '../../customizables';
+import { descriptors, Image, localizationKeys } from '../../customizables';
 import { useEnabledThirdPartyProviders } from '../../hooks';
 
 export const AddWeb3WalletActionMenu = () => {
@@ -60,12 +60,7 @@ export const AddWeb3WalletActionMenu = () => {
       card.setIdle();
     } catch (err) {
       card.setIdle();
-      const fieldError = getFieldError(err);
-      if (fieldError) {
-        card.setError(fieldError.longMessage);
-      } else {
-        handleError(err, [], card.setError);
-      }
+      web3CallbackErrorHandler(err, card.setError);
     }
   };
 
@@ -110,18 +105,6 @@ export const AddWeb3WalletActionMenu = () => {
           <Web3SelectSolanaWalletScreen onConnect={connect} />
         </Action.Card>
       </Action.Open>
-
-      {card.error && (
-        <Text
-          colorScheme='danger'
-          sx={t => ({
-            padding: t.sizes.$1x5,
-            paddingLeft: t.sizes.$8x5,
-          })}
-        >
-          {card.error}
-        </Text>
-      )}
     </>
   );
 };

packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

@@ -95,7 +95,10 @@ export const Web3Section = withCardStateProvider(
                           </Flex>
                         </Box>
                       </Flex>
-                      <Web3WalletMenu walletId={walletId} />
+                      <Web3WalletMenu
+                        walletId={walletId}
+                        isVerified={wallet.verification.status === 'verified'}
+                      />
                     </ProfileSection.Item>
 
                     <Action.Open value={`remove-${walletId}`}>
@@ -115,7 +118,7 @@ export const Web3Section = withCardStateProvider(
   },
 );
 
-const Web3WalletMenu = ({ walletId }: { walletId: string }) => {
+const Web3WalletMenu = ({ walletId, isVerified }: { walletId: string; isVerified: boolean }) => {
   const card = useCardState();
   const { open } = useActionContext();
   const { user } = useUser();
@@ -126,7 +129,8 @@ const Web3WalletMenu = ({ walletId }: { walletId: string }) => {
 
   const actions = (
     [
-      !isPrimary
+      // Only allow setting as primary if the wallet is verified and not already primary
+      !isPrimary && isVerified
         ? {
             label: localizationKeys('userProfile.start.web3WalletsSection.detailsAction__nonPrimary'),
             onClick: () => {

packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx

@@ -139,6 +139,7 @@ describe('PasswordSection', () => {
                   updated_at: 123,
                   logo_public_url: null,
                   protocol: 'saml',
+                  enterprise_connection_id: 'ent_123',
                 },
                 verification: {
                   status: 'verified',
@@ -155,6 +156,8 @@ describe('PasswordSection', () => {
                   object: 'verification',
                 },
                 id: 'eac_123',
+                last_authenticated_at: 123,
+                enterprise_connection_id: 'ent_123',
               },
             ],
           });
@@ -212,6 +215,7 @@ describe('PasswordSection', () => {
                   updated_at: 123,
                   logo_public_url: null,
                   protocol: 'saml',
+                  enterprise_connection_id: null,
                 },
                 verification: {
                   status: 'verified',
@@ -228,6 +232,8 @@ describe('PasswordSection', () => {
                   object: 'verification',
                 },
                 id: 'eac_123',
+                last_authenticated_at: null,
+                enterprise_connection_id: null,
               },
             ],
           });
@@ -378,6 +384,7 @@ describe('PasswordSection', () => {
                   updated_at: 123,
                   logo_public_url: null,
                   protocol: 'saml',
+                  enterprise_connection_id: null,
                 },
                 verification: {
                   status: 'verified',
@@ -394,6 +401,8 @@ describe('PasswordSection', () => {
                   object: 'verification',
                 },
                 id: 'eac_123',
+                last_authenticated_at: null,
+                enterprise_connection_id: null,
               },
             ],
           });
@@ -452,6 +461,7 @@ describe('PasswordSection', () => {
                   updated_at: 123,
                   logo_public_url: null,
                   protocol: 'saml',
+                  enterprise_connection_id: null,
                 },
                 verification: {
                   status: 'verified',
@@ -468,6 +478,8 @@ describe('PasswordSection', () => {
                   object: 'verification',
                 },
                 id: 'eac_123',
+                last_authenticated_at: null,
+                enterprise_connection_id: null,
               },
             ],
           });