diff --git a/.changeset/mosaic-okx-wallet-icon-fill.md b/.changeset/mosaic-okx-wallet-icon-fill.md new file mode 100644 index 00000000000..04f6f465920 --- /dev/null +++ b/.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. diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-account-row.view.tsx index c4c6d18f6d8..9e2f5df2392 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-account-row.view.tsx +++ b/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 ( - - - {iconUrl && provider.monochromeIcon ? ( - - ) : iconUrl ? ( - - ) : ( - - {provider.provider.trim().charAt(0).toUpperCase()} - - )} - - - ); -} - export function UserProfileConnectProviderRowView({ provider, isPending, @@ -64,7 +34,11 @@ export function UserProfileConnectProviderRowView({ return ( - + - + & { 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([ diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.styles.ts index 5d9ee623fec..7ef8dcbebd4 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.styles.ts +++ b/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 }, }); diff --git a/packages/mosaic/src/features/user-profile/user-profile-provider-media.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-provider-media.styles.ts new file mode 100644 index 00000000000..f5ad38d6b2e --- /dev/null +++ b/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'], + }, +}); diff --git a/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx b/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx new file mode 100644 index 00000000000..52b3c75b331 --- /dev/null +++ b/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 ( + + + {url && monochromeIcon ? ( + + ) : url ? ( + + ) : ( + + {provider.trim().charAt(0).toUpperCase()} + + )} + + + ); +} diff --git a/packages/mosaic/src/features/user-profile/user-profile-provider.utils.ts b/packages/mosaic/src/features/user-profile/user-profile-provider.utils.ts new file mode 100644 index 00000000000..a1bd893453a --- /dev/null +++ b/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); +} diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/__tests__/user-profile-web3-wallets-section.model.test.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/__tests__/user-profile-web3-wallets-section.model.test.ts index 201fd3c48c7..7940ccf8293 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/__tests__/user-profile-web3-wallets-section.model.test.ts +++ b/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' } }], diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallet-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallet-row.view.tsx index 6961c116bef..88bf6c8832a 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallet-row.view.tsx +++ b/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 ( - {wallet.provider || iconUrl ? ( - - - {iconUrl ? ( - - ) : ( - - {wallet.provider?.trim().charAt(0).toUpperCase()} - - )} - - + {wallet.provider ? ( + ) : null} diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.model.ts index daf9a8f82f0..77d9c75776c 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.model.ts +++ b/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), })) : [], }; diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.types.ts index 5dda2f7cbb6..c3f8a3e5f0a 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.types.ts +++ b/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; diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets.styles.ts index d17a25cf20f..7ef8dcbebd4 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets.styles.ts +++ b/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 }, });