fix(clerk-js,types,localizations): Allow user set primary web3 wallet in <UserProfile /> (#5353)

Author: nikospapcom

.changeset/strong-chefs-travel.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Allow user set primary web3 wallet in `<UserProfile />` when more than one web3 wallets presented

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

@@ -1,4 +1,4 @@
-import { useUser } from '@clerk/shared/react';
+import { useReverification, useUser } from '@clerk/shared/react';
 import { Fragment, useState } from 'react';
 
 import { Badge, Box, Flex, Image, localizationKeys, Text } from '../../customizables';
@@ -7,7 +7,9 @@ import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
 import { useEnabledThirdPartyProviders } from '../../hooks';
 import type { PropsOfComponent } from '../../styledSystem';
+import { handleError } from '../../utils';
 import { RemoveWeb3WalletForm } from './RemoveResourceForm';
+import { sortIdentificationBasedOnVerification } from './utils';
 import { AddWeb3WalletActionMenu } from './Web3Form';
 
 type RemoveWeb3WalletScreenProps = { walletId: string };
@@ -44,6 +46,7 @@ export const Web3Section = withCardStateProvider(
     return (
       <ProfileSection.Root
         title={localizationKeys('userProfile.start.web3WalletsSection.title')}
+        centered={false}
         id='web3Wallets'
       >
         <Card.Alert>{card.error}</Card.Alert>
@@ -52,7 +55,7 @@ export const Web3Section = withCardStateProvider(
           onChange={setActionValue}
         >
           <ProfileSection.ItemList id='web3Wallets'>
-            {user?.web3Wallets.map(wallet => {
+            {sortIdentificationBasedOnVerification(user?.web3Wallets, user?.primaryWeb3WalletId).map(wallet => {
               const strategy = wallet.verification.strategy as keyof typeof strategyToDisplayData;
               const walletId = wallet.id;
               return (
@@ -109,12 +112,27 @@ export const Web3Section = withCardStateProvider(
 );
 
 const Web3WalletMenu = ({ walletId }: { walletId: string }) => {
+  const card = useCardState();
   const { open } = useActionContext();
+  const { user } = useUser();
+  const isPrimary = user?.primaryWeb3WalletId === walletId;
+  const [setPrimary] = useReverification(() => {
+    return user?.update({ primaryWeb3WalletId: walletId });
+  });
 
   const actions = (
     [
+      !isPrimary
+        ? {
+            label: localizationKeys('userProfile.start.web3WalletsSection.detailsAction__nonPrimary'),
+            onClick: () => {
+              setPrimary().catch(e => handleError(e, [], card.setError));
+            },
+          }
+        : null,
       {
         label: localizationKeys('userProfile.start.web3WalletsSection.destructiveAction'),
+        isDestructive: true,
         onClick: () => open(`remove-${walletId}`),
       },
     ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]

packages/clerk-js/src/ui/components/UserProfile/utils.ts

@@ -1,4 +1,10 @@
-import type { Attributes, EmailAddressResource, PhoneNumberResource, UserResource } from '@clerk/types';
+import type {
+  Attributes,
+  EmailAddressResource,
+  PhoneNumberResource,
+  UserResource,
+  Web3WalletResource,
+} from '@clerk/types';
 
 type IDable = { id: string };
 
@@ -38,10 +44,9 @@ export function getSecondFactorsAvailableToAdd(attributes: Attributes, user: Use
   return sfs;
 }
 
-export function sortIdentificationBasedOnVerification<T extends Array<EmailAddressResource | PhoneNumberResource>>(
-  array: T | null | undefined,
-  primaryId: string | null | undefined,
-): T {
+export function sortIdentificationBasedOnVerification<
+  T extends Array<EmailAddressResource | PhoneNumberResource | Web3WalletResource>,
+>(array: T | null | undefined, primaryId: string | null | undefined): T {
   if (!array) {
     return [] as unknown as T;
   }

packages/localizations/src/ar-SA.ts

@@ -285,6 +285,7 @@ export const arSA: LocalizationResource = {
       actionText: undefined,
       blockButton__backupCode: undefined,
       blockButton__emailCode: undefined,
+      blockButton__passkey: undefined,
       blockButton__password: undefined,
       blockButton__phoneCode: undefined,
       blockButton__totp: undefined,
@@ -311,6 +312,11 @@ export const arSA: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: undefined,
       subtitle: undefined,
@@ -908,6 +914,7 @@ export const arSA: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'حذف المحفظة',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'محافظ Web3',
         title: 'محافظ Web3',
       },

packages/localizations/src/be-BY.ts

@@ -291,6 +291,7 @@ export const beBY: LocalizationResource = {
       actionText: 'Паспрабуйце іншы метад для верыфікацыі.',
       blockButton__backupCode: 'Увядзіце код з рэзервовага кода',
       blockButton__emailCode: 'Увядзіце код, адправлены на электронную пошту',
+      blockButton__passkey: undefined,
       blockButton__password: 'Увядзіце пароль',
       blockButton__phoneCode: 'Увядзіце код, адправлены на тэлефон',
       blockButton__totp: 'Выкарыстайце TOTP',
@@ -317,6 +318,11 @@ export const beBY: LocalizationResource = {
       subtitle: 'Калі ласка, выберыце іншы метад або звярніцеся ў службу падтрымкі.',
       title: 'Няма даступных метадаў верыфікацыі',
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: 'Вярнуцца да ўводу пароля',
       subtitle: 'Калі вы памятаеце свой пароль, вы можаце ўвесці яго для завершэння верыфікацыі.',
@@ -923,6 +929,7 @@ export const beBY: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Выдаліць кашалёк',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Web3 кашалькі',
         title: 'Web3 кашалькі',
       },

packages/localizations/src/bg-BG.ts

@@ -287,6 +287,7 @@ export const bgBG: LocalizationResource = {
       actionText: "Don't have one of these?",
       blockButton__backupCode: 'Use backup code',
       blockButton__emailCode: 'Send code to email',
+      blockButton__passkey: undefined,
       blockButton__password: 'Login with password',
       blockButton__phoneCode: 'Send code to phone',
       blockButton__totp: 'Use authenticator app',
@@ -313,6 +314,11 @@ export const bgBG: LocalizationResource = {
       subtitle: 'Something went wrong.',
       title: 'Authentication failed',
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: 'Use another method',
       subtitle: 'Enter your password to continue using "{{applicationName}}"',
@@ -913,6 +919,7 @@ export const bgBG: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Премахни портфейл',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Web3 портфейли',
         title: 'Web3 портфейли',
       },

packages/localizations/src/ca-ES.ts

@@ -287,6 +287,7 @@ export const caES: LocalizationResource = {
       actionText: undefined,
       blockButton__backupCode: undefined,
       blockButton__emailCode: undefined,
+      blockButton__passkey: undefined,
       blockButton__password: undefined,
       blockButton__phoneCode: undefined,
       blockButton__totp: undefined,
@@ -313,6 +314,11 @@ export const caES: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: undefined,
       subtitle: undefined,
@@ -920,6 +926,7 @@ export const caES: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Elimina cartera',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Carteres Web3',
         title: 'Carteres Web3',
       },

packages/localizations/src/cs-CZ.ts

@@ -286,6 +286,7 @@ export const csCZ: LocalizationResource = {
       actionText: undefined,
       blockButton__backupCode: undefined,
       blockButton__emailCode: undefined,
+      blockButton__passkey: undefined,
       blockButton__password: undefined,
       blockButton__phoneCode: undefined,
       blockButton__totp: undefined,
@@ -312,6 +313,11 @@ export const csCZ: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: undefined,
       subtitle: undefined,
@@ -911,6 +917,7 @@ export const csCZ: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Odstranit peněženku',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Web3 peněženky',
         title: 'Web3 peněženky',
       },

packages/localizations/src/da-DK.ts

@@ -287,6 +287,7 @@ export const daDK: LocalizationResource = {
       actionText: undefined,
       blockButton__backupCode: undefined,
       blockButton__emailCode: undefined,
+      blockButton__passkey: undefined,
       blockButton__password: undefined,
       blockButton__phoneCode: undefined,
       blockButton__totp: undefined,
@@ -313,6 +314,11 @@ export const daDK: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: undefined,
       subtitle: undefined,
@@ -913,6 +919,7 @@ export const daDK: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Fjern tegnebog',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Tilføj Web3 tegnebøger',
         title: 'Web3 tegnebøger',
       },

packages/localizations/src/de-DE.ts

@@ -290,6 +290,7 @@ export const deDE: LocalizationResource = {
       actionText: 'Verwenden Sie eine alternative Verifizierungsmethode',
       blockButton__backupCode: 'Mit Backup-Code verifizieren',
       blockButton__emailCode: 'Mit E-Mail-Code verifizieren',
+      blockButton__passkey: undefined,
       blockButton__password: 'Mit Passwort verifizieren',
       blockButton__phoneCode: 'Mit SMS-Code verifizieren',
       blockButton__totp: 'Mit TOTP verifizieren',
@@ -316,6 +317,11 @@ export const deDE: LocalizationResource = {
       subtitle: 'Bitte kontaktieren Sie den Support, um Hilfe zu erhalten.',
       title: 'Keine verfügbaren Methoden',
     },
+    passkey: {
+      blockButton__passkey: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     password: {
       actionLink: 'Passwort zurücksetzen',
       subtitle: 'Geben Sie Ihr Passwort ein, um fortzufahren.',
@@ -928,6 +934,7 @@ export const deDE: LocalizationResource = {
       },
       web3WalletsSection: {
         destructiveAction: 'Wallet entfernen',
+        detailsAction__nonPrimary: undefined,
         primaryButton: 'Web3-Wallets',
         title: 'Web3-Wallets',
       },