fix(ui): Remove Personal Account web3 id (#7531)

Author: jacekradko

.changeset/witty-walls-wave.md

@@ -0,0 +1,6 @@
+---
+'@clerk/ui': patch
+---
+
+Fix personal account display in `OrganizationSwitcher` and `OrganizationList` to exclude `primaryWeb3Wallet` from user identifiers
+

packages/ui/src/components/OrganizationList/UserMembershipList.tsx

@@ -82,7 +82,7 @@ export const PersonalAccountPreview = withCardStateProvider(() => {
     return null;
   }
 
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+  const { primaryEmailAddress, primaryPhoneNumber, primaryWeb3Wallet, username, ...userWithoutIdentifiers } = user;
 
   const handlePersonalClicked = () => {
     if (!isLoaded) {

packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

@@ -48,7 +48,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       return null;
     }
 
-    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+    const { primaryEmailAddress, primaryPhoneNumber, primaryWeb3Wallet, username, ...userWithoutIdentifiers } = user;
 
     if (!isLoaded) {
       return null;

packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -29,7 +29,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       return null;
     }
 
-    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+    const { primaryEmailAddress, primaryPhoneNumber, primaryWeb3Wallet, username, ...userWithoutIdentifiers } = user;
 
     return (
       <Button

packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx

@@ -57,7 +57,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
     return null;
   }
 
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+  const { primaryEmailAddress, primaryPhoneNumber, primaryWeb3Wallet, username, ...userWithoutIdentifiers } = user;
 
   const { isLoading, hasNextPage } = userMemberships;
 

packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -97,6 +97,46 @@ describe('OrganizationSwitcher', () => {
       expect(getByText('Personal account')).toBeInTheDocument();
     });
 
+    it('does not show user identifiers in the personal workspace trigger', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          username: 'testuser',
+        });
+      });
+
+      props.setProps({ hidePersonal: false });
+      const { getByText, queryByText } = render(<OrganizationSwitcher />, { wrapper });
+      expect(getByText('Personal account')).toBeInTheDocument();
+      expect(queryByText('[email protected]')).not.toBeInTheDocument();
+      expect(queryByText('testuser')).not.toBeInTheDocument();
+    });
+
+    it('does not show web3 wallet address in the personal workspace trigger', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          primary_web3_wallet_id: 'web3_wallet_123',
+          web3_wallets: [
+            {
+              id: 'web3_wallet_123',
+              object: 'web3_wallet',
+              web3_wallet: '0x1234567890abcdef1234567890abcdef12345678',
+              verification: { status: 'verified', strategy: 'web3_metamask_signature', attempts: 1, expire_at: null },
+            },
+          ],
+        });
+      });
+
+      props.setProps({ hidePersonal: false });
+      const { getByText, queryByText } = render(<OrganizationSwitcher />, { wrapper });
+      expect(getByText('Personal account')).toBeInTheDocument();
+      expect(queryByText('0x1234567890abcdef1234567890abcdef12345678')).not.toBeInTheDocument();
+      expect(queryByText('0x1234')).not.toBeInTheDocument();
+    });
+
     it('shows "No organization selected" when user has no active organization and hidePersonal is true', async () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withOrganizations();