feat(ui): add web3 wallets to user profile

Author: austincalvelage

.changeset/mosaic-user-profile-profile-panel.md

@@ -2,4 +2,4 @@
 '@clerk/ui': patch
 ---
 
-Add an outlined Card elevation for bordered, non-elevated surfaces and make Item groups layout-only.
+Add an outlined Card elevation for bordered, non-elevated surfaces, make Item groups layout-only, and expose Web3 wallets in the Mosaic user profile panel.

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -3,7 +3,7 @@ import * as UserProfileProfilePanelStories from './user-profile-profile-panel.st
 # UserProfileProfilePanel
 
 The Profile panel from UserProfile, composed without the surrounding navigation shell. The
-presentational view renders account details, connected accounts, and the danger zone from props
+presentational view renders account details, connected accounts, Web3 wallets, and the danger zone from props
 while its callbacks provide the seam for connected Clerk resources.
 
 ## Example
@@ -40,6 +40,12 @@ import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-
     identifier: account.emailAddress,
     connected: true,
   }))}
+  web3Wallets={user.web3Wallets.map(wallet => ({
+    id: wallet.id,
+    address: wallet.web3Wallet,
+    isPrimary: wallet.id === user.primaryWeb3WalletId,
+    isVerified: wallet.verification.status === 'verified',
+  }))}
   onNameChange={setName}
   onUsernameChange={setUsername}
   onVerifyEmail={verifyEmail}
@@ -49,5 +55,8 @@ import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-
   onSetPrimaryPhone={setPrimaryPhone}
   onRemovePhone={removePhone}
   onRemoveConnectedAccount={removeConnectedAccount}
+  onAddWeb3Wallet={addWeb3Wallet}
+  onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+  onRemoveWeb3Wallet={removeWeb3Wallet}
 />
 ```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -35,6 +35,16 @@ export function Default(_args: Record<string, unknown>) {
         },
         { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
       ]}
+      web3Wallets={[
+        {
+          id: 'metamask',
+          address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+          provider: 'MetaMask',
+          iconUrl: providerIconUrl('metamask'),
+          isPrimary: true,
+          isVerified: true,
+        },
+      ]}
       imageUrl={profileImageUrl}
       name={name}
       phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
@@ -47,6 +57,9 @@ export function Default(_args: Record<string, unknown>) {
       onRemoveConnectedAccount={() => undefined}
       onRemoveEmail={() => undefined}
       onRemovePhone={() => undefined}
+      onAddWeb3Wallet={() => undefined}
+      onRemoveWeb3Wallet={() => undefined}
+      onSetPrimaryWeb3Wallet={() => undefined}
       onSetPrimaryEmail={() => undefined}
       onSetPrimaryPhone={() => undefined}
       onVerifyEmail={() => undefined}

packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx

@@ -102,6 +102,65 @@ describe('UserProfileProfilePanelView', () => {
     expect(onDeleteAccount).toHaveBeenCalledOnce();
   });
 
+  it('renders Web3 wallets and forwards wallet actions', async () => {
+    const onAddWeb3Wallet = vi.fn();
+    const onSetPrimaryWeb3Wallet = vi.fn();
+    const onRemoveWeb3Wallet = vi.fn();
+    const user = userEvent.setup();
+    renderView({
+      web3Wallets: [
+        {
+          id: 'primary',
+          address: '0x1234567890abcdef1234567890abcdef12345678',
+          provider: 'MetaMask',
+          isPrimary: true,
+          isVerified: true,
+        },
+        {
+          id: 'secondary',
+          address: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+          provider: 'Coinbase Wallet',
+          isVerified: true,
+        },
+      ],
+      onAddWeb3Wallet,
+      onSetPrimaryWeb3Wallet,
+      onRemoveWeb3Wallet,
+    });
+
+    expect(screen.getByRole('heading', { level: 4, name: 'Web3 wallets' })).toBeInTheDocument();
+    expect(screen.getByText('MetaMask')).toBeInTheDocument();
+    expect(screen.getByText('0x1234...5678')).toBeInTheDocument();
+    expect(screen.getByText('Primary')).toBeInTheDocument();
+
+    await user.click(within(screen.getByRole('region', { name: 'Web3 wallets' })).getByRole('button', { name: 'Add' }));
+    await user.click(screen.getByRole('button', { name: 'Manage Coinbase Wallet' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Set as primary' }));
+    await user.click(screen.getByRole('button', { name: 'Manage Coinbase Wallet' }));
+    const removeWallet = screen.getByRole('menuitem', { name: 'Remove wallet' });
+    expect(removeWallet).toHaveAttribute('data-color', 'negative');
+    await user.click(removeWallet);
+
+    expect(onAddWeb3Wallet).toHaveBeenCalledOnce();
+    expect(onSetPrimaryWeb3Wallet).toHaveBeenCalledWith('secondary');
+    expect(onRemoveWeb3Wallet).toHaveBeenCalledWith('secondary');
+  });
+
+  it('shows unverified Web3 wallets without a set-primary action', async () => {
+    const user = userEvent.setup();
+    renderView({
+      web3Wallets: [{ id: 'unverified', address: 'short', isVerified: false }],
+      onSetPrimaryWeb3Wallet: vi.fn(),
+      onRemoveWeb3Wallet: vi.fn(),
+    });
+
+    expect(screen.getByText('short')).toBeInTheDocument();
+    expect(screen.getByText('Unverified')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Manage short' }));
+    expect(screen.queryByRole('menuitem', { name: 'Set as primary' })).not.toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Remove wallet' })).toBeInTheDocument();
+  });
+
   it('renders safely before profile data is available', () => {
     render(
       <MosaicProvider>

packages/ui/src/mosaic/user-profile/user-profile-profile-panel.styles.ts

@@ -48,7 +48,7 @@ export const styles = stylex.create({
     display: 'flex',
     minWidth: 0,
   },
-  connectedAccountsList: {
+  resourceList: {
     padding: 0,
   },
   dangerContent: {
@@ -87,4 +87,10 @@ export const styles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
   },
+  sectionHeader: {
+    gap: space['3'],
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
 });

packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx

@@ -42,13 +42,24 @@ export interface UserProfileConnectedAccount {
   canRemove?: boolean;
 }
 
+export interface UserProfileWeb3Wallet {
+  id: string;
+  address: string;
+  provider?: string;
+  iconUrl?: string;
+  isPrimary?: boolean;
+  isVerified?: boolean;
+  canRemove?: boolean;
+}
+
 export interface UserProfileProfilePanelViewProps {
   imageUrl?: string;
   name: string;
   username: string;
   emails: UserProfileEmail[];
   phones: UserProfilePhone[];
   connectedAccounts?: UserProfileConnectedAccount[];
+  web3Wallets?: UserProfileWeb3Wallet[];
   onEditProfilePicture?: () => void;
   onNameChange?: (value: string) => void;
   onUsernameChange?: (value: string) => void;
@@ -65,6 +76,10 @@ export interface UserProfileProfilePanelViewProps {
   onConnectAccount?: (id: string) => void;
   onManageConnectedAccount?: (id: string) => void;
   onRemoveConnectedAccount?: (id: string) => void;
+  onAddWeb3Wallet?: () => void;
+  onManageWeb3Wallet?: (id: string) => void;
+  onSetPrimaryWeb3Wallet?: (id: string) => void;
+  onRemoveWeb3Wallet?: (id: string) => void;
   onDeleteAccount?: () => void;
 }
 
@@ -290,7 +305,7 @@ function ConnectedAccountsSection({
       </Heading>
       <Card.Root elevation='outlined'>
         <Card.Content style={{ paddingBlock: space['4'], paddingInline: space['4'] }}>
-          <Item.Group {...stylex.props(styles.connectedAccountsList)}>
+          <Item.Group {...stylex.props(styles.resourceList)}>
             {accounts.map((account, index) => {
               const connected = account.connected ?? Boolean(account.identifier);
               const actions: ProfileMenuAction[] = [];
@@ -375,6 +390,140 @@ function ConnectedAccountsSection({
   );
 }
 
+const shortenWeb3Address = (address: string) => {
+  if (address.length <= 10) {
+    return address;
+  }
+
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+function Web3WalletsSection({
+  wallets,
+  onAdd,
+  onManage,
+  onSetPrimary,
+  onRemove,
+}: {
+  wallets: UserProfileWeb3Wallet[];
+  onAdd?: () => void;
+  onManage?: (id: string) => void;
+  onSetPrimary?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}) {
+  return (
+    <section
+      aria-labelledby='user-profile-profile-panel-web3-wallets'
+      {...stylex.props(styles.section)}
+    >
+      <div {...stylex.props(styles.sectionHeader)}>
+        <Heading
+          id='user-profile-profile-panel-web3-wallets'
+          render={props => <h4 {...props} />}
+          size='xs'
+        >
+          Web3 wallets
+        </Heading>
+        {onAdd ? (
+          <Button
+            color='neutral'
+            size='sm'
+            variant='outline'
+            onClick={onAdd}
+          >
+            Add
+          </Button>
+        ) : null}
+      </div>
+      <Card.Root elevation='outlined'>
+        <Card.Content style={{ paddingBlock: space['4'], paddingInline: space['4'] }}>
+          <Item.Group {...stylex.props(styles.resourceList)}>
+            {wallets.map((wallet, index) => {
+              const actions: ProfileMenuAction[] = [];
+              const hasExplicitActions = Boolean(onSetPrimary || onRemove);
+
+              if (!wallet.isPrimary && wallet.isVerified !== false && onSetPrimary) {
+                actions.push({ label: 'Set as primary', onClick: () => onSetPrimary(wallet.id) });
+              }
+
+              if (onRemove && wallet.canRemove !== false) {
+                actions.push({ label: 'Remove wallet', color: 'negative', onClick: () => onRemove(wallet.id) });
+              }
+
+              if (!hasExplicitActions && onManage) {
+                actions.push({ label: 'Manage', onClick: () => onManage(wallet.id) });
+              }
+
+              const address = shortenWeb3Address(wallet.address);
+
+              return (
+                <Fragment key={wallet.id}>
+                  {index > 0 ? (
+                    <Item.Separator
+                      style={{
+                        backgroundColor: colorVars['--cl-color-border'],
+                        marginBlock: space['4'],
+                        marginInline: space['4'],
+                        width: 'auto',
+                      }}
+                    />
+                  ) : null}
+                  <Item.Root
+                    size='md'
+                    style={{ height: 'auto', paddingBlock: 0, paddingInline: 0 }}
+                  >
+                    {wallet.iconUrl ? (
+                      <Item.Media style={{ width: space['6'] }}>
+                        <img
+                          alt=''
+                          src={wallet.iconUrl}
+                          {...stylex.props(styles.providerIcon)}
+                        />
+                      </Item.Media>
+                    ) : null}
+                    <Item.Content style={{ gap: space['0.5'] }}>
+                      <div {...stylex.props(styles.contactValue)}>
+                        <Item.Title>{wallet.provider ?? address}</Item.Title>
+                        {wallet.isPrimary ? (
+                          <Badge
+                            color='neutral'
+                            style={{ backgroundColor: 'rgba(23, 23, 23, 0.06)', color: 'inherit' }}
+                          >
+                            Primary
+                          </Badge>
+                        ) : null}
+                        {wallet.isVerified === false ? <Badge color='warning'>Unverified</Badge> : null}
+                      </div>
+                      {wallet.provider ? (
+                        <Item.Description
+                          style={{
+                            fontSize: typeScaleVars['--cl-text-sm-size'],
+                            lineHeight: typeScaleVars['--cl-text-sm-leading'],
+                          }}
+                        >
+                          {address}
+                        </Item.Description>
+                      ) : null}
+                    </Item.Content>
+                    {actions.length > 0 ? (
+                      <Item.Actions>
+                        <ProfileActionMenu
+                          actions={actions}
+                          label={`Manage ${wallet.provider ?? address}`}
+                        />
+                      </Item.Actions>
+                    ) : null}
+                  </Item.Root>
+                </Fragment>
+              );
+            })}
+          </Item.Group>
+        </Card.Content>
+      </Card.Root>
+    </section>
+  );
+}
+
 function DangerZoneSection({ onDelete }: { onDelete: () => void }) {
   return (
     <section
@@ -536,6 +685,7 @@ export function UserProfileProfilePanelView({
   emails = [],
   phones = [],
   connectedAccounts = [],
+  web3Wallets = [],
   onEditProfilePicture,
   onNameChange,
   onUsernameChange,
@@ -552,6 +702,10 @@ export function UserProfileProfilePanelView({
   onConnectAccount,
   onManageConnectedAccount,
   onRemoveConnectedAccount,
+  onAddWeb3Wallet,
+  onManageWeb3Wallet,
+  onSetPrimaryWeb3Wallet,
+  onRemoveWeb3Wallet,
   onDeleteAccount,
 }: UserProfileProfilePanelViewProps): ReactElement {
   return (
@@ -590,6 +744,15 @@ export function UserProfileProfilePanelView({
           onRemove={onRemoveConnectedAccount}
         />
       ) : null}
+      {web3Wallets.length > 0 || onAddWeb3Wallet ? (
+        <Web3WalletsSection
+          wallets={web3Wallets}
+          onAdd={onAddWeb3Wallet}
+          onManage={onManageWeb3Wallet}
+          onRemove={onRemoveWeb3Wallet}
+          onSetPrimary={onSetPrimaryWeb3Wallet}
+        />
+      ) : null}
       {onDeleteAccount ? <DangerZoneSection onDelete={onDeleteAccount} /> : null}
     </div>
   );