fix(mosaic): fill the OKX Wallet logo with the text color in the Web3 wallets section

.changeset/mosaic-okx-wallet-icon-fill.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Fix the OKX Wallet logo in the user profile Web3 wallets section so it follows the text color and stays visible in dark mode.

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-account-row.view.tsx

@@ -5,48 +5,18 @@ import type { ActionMenuAction } from '../../../components/action-menu';
 import { ActionMenu } from '../../../components/action-menu';
 import { Badge } from '../../../components/badge';
 import { SubmitButton } from '../../../components/button';
-import { Icon, IconFrame } from '../../../components/icon';
+import { Icon } from '../../../components/icon';
 import { Section } from '../../../components/section';
 import { ArrowUpRight } from '../../../icons/glyphs/arrow-up-right';
 import { fill, useMessages } from '../../../localization';
 import { truncationStyles } from '../../../styles/typography.styles';
+import { UserProfileProviderMedia } from '../user-profile-provider-media';
 import { styles } from './user-profile-connected-accounts-section.styles';
 import type {
-  ConnectedAccountProviderDisplay,
   UserProfileConnectedAccount,
   UserProfileConnectionProvider,
 } from './user-profile-connected-accounts-section.types';
 
-function ProviderMedia({ provider }: { provider: ConnectedAccountProviderDisplay }) {
-  const iconUrl = provider.iconUrl?.trim();
-  return (
-    <Section.Media size='lg'>
-      <IconFrame>
-        {iconUrl && provider.monochromeIcon ? (
-          <span
-            aria-hidden
-            {...stylex.props(styles.maskedIcon, styles.maskImage(iconUrl))}
-          />
-        ) : iconUrl ? (
-          <img
-            src={iconUrl}
-            alt=''
-            aria-hidden
-            {...stylex.props(styles.icon)}
-          />
-        ) : (
-          <span
-            aria-hidden
-            {...stylex.props(styles.fallback)}
-          >
-            {provider.provider.trim().charAt(0).toUpperCase()}
-          </span>
-        )}
-      </IconFrame>
-    </Section.Media>
-  );
-}
-
 export function UserProfileConnectProviderRowView({
   provider,
   isPending,
@@ -64,7 +34,11 @@ export function UserProfileConnectProviderRowView({
   return (
     <Section.Row xstyle={styles.connectRow}>
       <Section.Item>
-        <ProviderMedia provider={provider} />
+        <UserProfileProviderMedia
+          provider={provider.provider}
+          iconUrl={provider.iconUrl}
+          monochromeIcon={provider.monochromeIcon}
+        />
         <Section.Content>
           <Section.Label>
             <span
@@ -128,7 +102,11 @@ export function UserProfileConnectedAccountRowView({
   return (
     <Section.Row>
       <Section.Item>
-        <ProviderMedia provider={account} />
+        <UserProfileProviderMedia
+          provider={account.provider}
+          iconUrl={account.iconUrl}
+          monochromeIcon={account.monochromeIcon}
+        />
         <Section.Content>
           <Section.Label>
             <span

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts

@@ -21,6 +21,7 @@ import { allowsIdentificationCreation } from '../../../utils/allows-identificati
 import type { ReverificationController } from '../../reverification';
 import { useReverificationFlow } from '../../reverification';
 import { useUserProfileOptions } from '../user-profile.provider';
+import { isMonochromeProvider } from '../user-profile-provider.utils';
 import type {
   ConnectedAccountActionResult,
   ConnectedAccountProviderDisplay,
@@ -71,8 +72,6 @@ const RECONNECT_ERROR_CODES = [
   'external_account_email_address_verification_required',
 ];
 
-const MONOCHROME_PROVIDERS = ['agentid', 'apple', 'github', 'okx_wallet', 'vercel', 'x'];
-
 type SocialSettings = Partial<
   Record<string, Pick<OAuthProviders[OAuthStrategy], 'name' | 'logo_url'> & { strategy: string }>
 >;
@@ -90,7 +89,7 @@ export function createProviderCatalog(
     display: {
       provider: name,
       iconUrl: iconImageUrl(provider),
-      monochromeIcon: MONOCHROME_PROVIDERS.includes(provider),
+      monochromeIcon: isMonochromeProvider(provider),
     },
   }));
   const candidates = new Set([

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.styles.ts

@@ -1,30 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, space } from '../../../tokens.stylex';
-
 export const styles = stylex.create({
   connectRow: { justifyContent: 'center' },
-  icon: { display: 'block', objectFit: 'contain', height: space['6'], width: space['6'] },
-  maskedIcon: {
-    backgroundColor: 'currentColor',
-    display: 'block',
-    maskPosition: 'center',
-    maskRepeat: 'no-repeat',
-    maskSize: 'contain',
-    height: space['6'],
-    width: space['6'],
-  },
-  maskImage: (url: string) => ({ maskImage: `url(${JSON.stringify(url)})` }),
-  fallback: {
-    borderRadius: radiusVars['--cl-radius-sm'],
-    alignItems: 'center',
-    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
-    color: colorVars['--cl-color-neutral'],
-    display: 'inline-flex',
-    fontSize: '0.625rem',
-    justifyContent: 'center',
-    height: space['6'],
-    width: space['6'],
-  },
   text: { minWidth: 0 },
 });

packages/mosaic/src/features/user-profile/user-profile-provider-media.styles.ts

@@ -0,0 +1,28 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, radiusVars, space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  icon: { display: 'block', objectFit: 'contain', height: space['6'], width: space['6'] },
+  maskedIcon: {
+    backgroundColor: 'currentColor',
+    display: 'block',
+    maskPosition: 'center',
+    maskRepeat: 'no-repeat',
+    maskSize: 'contain',
+    height: space['6'],
+    width: space['6'],
+  },
+  maskImage: (url: string) => ({ maskImage: `url(${JSON.stringify(url)})` }),
+  fallback: {
+    borderRadius: radiusVars['--cl-radius-sm'],
+    alignItems: 'center',
+    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
+    color: colorVars['--cl-color-neutral'],
+    display: 'inline-flex',
+    fontSize: '0.625rem',
+    justifyContent: 'center',
+    height: space['6'],
+    width: space['6'],
+  },
+});

packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx

@@ -0,0 +1,43 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { IconFrame } from '../../components/icon';
+import { Section } from '../../components/section';
+import { styles } from './user-profile-provider-media.styles';
+
+export function UserProfileProviderMedia({
+  provider,
+  iconUrl,
+  monochromeIcon,
+}: {
+  provider: string;
+  iconUrl?: string;
+  monochromeIcon?: boolean;
+}) {
+  const url = iconUrl?.trim();
+  return (
+    <Section.Media size='lg'>
+      <IconFrame>
+        {url && monochromeIcon ? (
+          <span
+            aria-hidden
+            {...stylex.props(styles.maskedIcon, styles.maskImage(url))}
+          />
+        ) : url ? (
+          <img
+            src={url}
+            alt=''
+            aria-hidden
+            {...stylex.props(styles.icon)}
+          />
+        ) : (
+          <span
+            aria-hidden
+            {...stylex.props(styles.fallback)}
+          >
+            {provider.trim().charAt(0).toUpperCase()}
+          </span>
+        )}
+      </IconFrame>
+    </Section.Media>
+  );
+}

packages/mosaic/src/features/user-profile/user-profile-provider.utils.ts

@@ -0,0 +1,5 @@
+const MONOCHROME_PROVIDERS = ['agentid', 'apple', 'github', 'okx_wallet', 'vercel', 'x'];
+
+export function isMonochromeProvider(provider: string): boolean {
+  return MONOCHROME_PROVIDERS.includes(provider);
+}

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/__tests__/user-profile-web3-wallets-section.model.test.ts

@@ -29,6 +29,27 @@ describe('Web3 wallet projection', () => {
     });
   });
 
+  it('marks monochrome provider logos', () => {
+    const okx = {
+      ...metamask,
+      id: 'wallet_okx',
+      verification: { ...metamask.verification, strategy: 'web3_okx_wallet_signature' },
+    } as const;
+    const result = projectWeb3Wallets({
+      wallets: [metamask, okx],
+      primaryId: null,
+      enabledStrategies: ['web3_metamask_signature', 'web3_okx_wallet_signature', 'web3_coinbase_wallet_signature'],
+      allowCreation: true,
+    });
+    expect(result).toMatchObject({
+      wallets: [
+        { id: 'wallet_metamask', monochromeIcon: false },
+        { id: 'wallet_okx', monochromeIcon: true },
+      ],
+      availableProviders: [{ id: 'web3_coinbase_wallet_signature', monochromeIcon: false }],
+    });
+  });
+
   it('WEB3-02 keeps unverified wallets and their provider available', () => {
     const result = projectWeb3Wallets({
       wallets: [{ ...metamask, verification: { ...metamask.verification, status: 'unverified' } }],

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallet-row.view.tsx

@@ -5,11 +5,12 @@ import type { ActionMenuAction } from '../../../components/action-menu';
 import { ActionMenu } from '../../../components/action-menu';
 import { Badge } from '../../../components/badge';
 import { SubmitButton } from '../../../components/button';
-import { Icon, IconFrame } from '../../../components/icon';
+import { Icon } from '../../../components/icon';
 import { Section } from '../../../components/section';
 import { ArrowUpRight } from '../../../icons/glyphs/arrow-up-right';
 import { fill, useMessages } from '../../../localization';
 import { truncationStyles } from '../../../styles/typography.styles';
+import { UserProfileProviderMedia } from '../user-profile-provider-media';
 import { styles } from './user-profile-web3-wallets.styles';
 import type { UserProfileWeb3Provider, UserProfileWeb3Wallet } from './user-profile-web3-wallets-section.types';
 
@@ -31,7 +32,6 @@ export function UserProfileWeb3WalletRowView({
   onRemove?: (wallet: UserProfileWeb3Wallet) => void;
 }) {
   const m = useMessages('userProfileWeb3Wallets');
-  const iconUrl = wallet.iconUrl?.trim();
   const linkedWallet = 'address' in wallet ? wallet : undefined;
   const address = linkedWallet?.address;
   const shortAddress = address && (address.length <= 10 ? address : `${address.slice(0, 6)}...${address.slice(-4)}`);
@@ -47,26 +47,12 @@ export function UserProfileWeb3WalletRowView({
   return (
     <Section.Row xstyle={onConnect && styles.connectRow}>
       <Section.Item>
-        {wallet.provider || iconUrl ? (
-          <Section.Media size='lg'>
-            <IconFrame>
-              {iconUrl ? (
-                <img
-                  src={iconUrl}
-                  alt=''
-                  aria-hidden
-                  {...stylex.props(styles.icon)}
-                />
-              ) : (
-                <span
-                  aria-hidden
-                  {...stylex.props(styles.fallback)}
-                >
-                  {wallet.provider?.trim().charAt(0).toUpperCase()}
-                </span>
-              )}
-            </IconFrame>
-          </Section.Media>
+        {wallet.provider ? (
+          <UserProfileProviderMedia
+            provider={wallet.provider}
+            iconUrl={wallet.iconUrl}
+            monochromeIcon={wallet.monochromeIcon}
+          />
         ) : null}
         <Section.Content>
           <Section.Label>

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.model.ts

@@ -8,6 +8,7 @@ import { WEB3_PROVIDERS } from '@clerk/shared/web3';
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import { allowsIdentificationCreation } from '../../../utils/allows-identification-creation';
 import { useReverificationFlow } from '../../reverification';
+import { isMonochromeProvider } from '../user-profile-provider.utils';
 import type {
   UserProfileWeb3Provider,
   UserProfileWeb3Wallet,
@@ -78,6 +79,7 @@ export function projectWeb3Wallets({
         address: wallet.web3Wallet,
         provider: provider?.name,
         iconUrl: provider ? iconImageUrl(provider.provider) : undefined,
+        monochromeIcon: provider ? isMonochromeProvider(provider.provider) : false,
         isPrimary: wallet.id === primaryId,
         isVerified: wallet.verification.status === 'verified',
       };
@@ -90,6 +92,7 @@ export function projectWeb3Wallets({
             walletPicker: provider.provider === 'solana' ? 'solana' : undefined,
             provider: provider.name,
             iconUrl: iconImageUrl(provider.provider),
+            monochromeIcon: isMonochromeProvider(provider.provider),
           }))
       : [],
   };

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.types.ts

@@ -10,6 +10,7 @@ export interface UserProfileWeb3Provider {
   walletPicker?: 'solana';
   provider: string;
   iconUrl?: string;
+  monochromeIcon?: boolean;
   connectError?: string;
 }
 
@@ -18,6 +19,7 @@ export interface UserProfileWeb3Wallet {
   address: string;
   provider?: string;
   iconUrl?: string;
+  monochromeIcon?: boolean;
   isPrimary?: boolean;
   isVerified: boolean;
   canRemove?: boolean;

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets.styles.ts

@@ -1,20 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, space } from '../../../tokens.stylex';
-
 export const styles = stylex.create({
   connectRow: { justifyContent: 'center' },
-  icon: { display: 'block', objectFit: 'contain', height: space['6'], width: space['6'] },
-  fallback: {
-    borderRadius: radiusVars['--cl-radius-sm'],
-    alignItems: 'center',
-    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
-    color: colorVars['--cl-color-neutral'],
-    display: 'inline-flex',
-    fontSize: '0.625rem',
-    justifyContent: 'center',
-    height: space['6'],
-    width: space['6'],
-  },
   text: { minWidth: 0 },
 });