From 56fed4238a1650f29b71b2d4da9fb64e5538e19d Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 23 Oct 2026 14:08:27 -0400 Subject: [PATCH 1/8] fix(mosaic): render security row icons with a bordered IconFrame --- .changeset/bordered-security-icons.md | 2 ++ .../user-profile-passkey-row.view.tsx | 5 +---- .../user-profile-security-icon.tsx | 19 +++++++++---------- .../user-profile-security-panel.styles.ts | 9 +-------- 4 files changed, 13 insertions(+), 22 deletions(-) create mode 100644 .changeset/bordered-security-icons.md diff --git a/.changeset/bordered-security-icons.md b/.changeset/bordered-security-icons.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/bordered-security-icons.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx index ace98b6abdc..6429f0be8a0 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx @@ -52,10 +52,7 @@ export function UserProfilePasskeyRowView({ <> - + - + + + + ); } diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts index 4038ea7bb12..db674839f5a 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts @@ -1,6 +1,6 @@ import * as stylex from '@stylexjs/stylex'; -import { colorVars, radiusVars, space } from '../../tokens.stylex'; +import { colorVars, space } from '../../tokens.stylex'; export const styles = stylex.create({ icon: { @@ -9,13 +9,6 @@ export const styles = stylex.create({ height: space['4.5'], width: space['4.5'], }, - media: { - borderColor: colorVars['--cl-color-border-subtle'], - borderRadius: radiusVars['--cl-radius-md'], - borderStyle: 'solid', - borderWidth: '1px', - backgroundColor: colorVars['--cl-color-background-subtle'], - }, sectionCards: { gap: space['3'], display: 'flex', From 01421cef5396b5361a108d29c242949d0c4b6468 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 23 Oct 2026 14:10:59 -0400 Subject: [PATCH 2/8] fix(mosaic): fill provider and enterprise account icon frames --- .../src/features/user-profile/user-profile-provider-icon.tsx | 2 +- .../src/features/user-profile/user-profile-provider-media.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx b/packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx index 01eb9cd0498..a7cb7b6e532 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx @@ -10,7 +10,7 @@ type UserProfileProviderIconProps = { iconUrl: string; glyph?: never } | { iconU export function UserProfileProviderIcon(props: UserProfileProviderIconProps) { return ( - + {'iconUrl' in props ? ( - + {url && monochromeIcon ? ( Date: Fri, 23 Oct 2026 14:12:00 -0400 Subject: [PATCH 3/8] fix(mosaic): size provider logos at 20px to match other provider icons --- .../user-profile/user-profile-provider-media.styles.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 index f5ad38d6b2e..6c07812cb2e 100644 --- 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 @@ -3,15 +3,15 @@ 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'] }, + icon: { display: 'block', objectFit: 'contain', height: space['5'], width: space['5'] }, maskedIcon: { backgroundColor: 'currentColor', display: 'block', maskPosition: 'center', maskRepeat: 'no-repeat', maskSize: 'contain', - height: space['6'], - width: space['6'], + height: space['5'], + width: space['5'], }, maskImage: (url: string) => ({ maskImage: `url(${JSON.stringify(url)})` }), fallback: { @@ -22,7 +22,7 @@ export const styles = stylex.create({ display: 'inline-flex', fontSize: '0.625rem', justifyContent: 'center', - height: space['6'], - width: space['6'], + height: space['5'], + width: space['5'], }, }); From 70c2dcdb8c838d3ddc15bd91d13ac87095220a30 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 23 Oct 2026 14:16:22 -0400 Subject: [PATCH 4/8] fix(mosaic): drop borders from user profile icon frames --- .../user-profile-mfa-section/user-profile-add-mfa.view.tsx | 5 ++++- .../user-profile-passkey-row.view.tsx | 5 ++++- .../src/features/user-profile/user-profile-provider-icon.tsx | 5 ++++- .../features/user-profile/user-profile-provider-media.tsx | 5 ++++- .../src/features/user-profile/user-profile-security-icon.tsx | 5 ++++- 5 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx index 28f0c576cbc..51415a3af39 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx @@ -44,7 +44,10 @@ export function UserProfileAddMfaView({ methods, onSelect }: UserProfileAddMfaVi } > - + diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx index 6429f0be8a0..ace98b6abdc 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkey-row.view.tsx @@ -52,7 +52,10 @@ export function UserProfilePasskeyRowView({ <> - + - + {'iconUrl' in props ? ( - + {url && monochromeIcon ? ( - + Date: Fri, 23 Oct 2026 14:27:17 -0400 Subject: [PATCH 5/8] feat(mosaic): mark provider icons with data-provider and nudge the Apple logo --- .../user-profile-provider-media.view.test.tsx | 22 +++++++++++++++++++ ...ser-profile-connected-account-row.view.tsx | 2 ++ ...rofile-connected-accounts-section.model.ts | 3 ++- ...rofile-connected-accounts-section.types.ts | 1 + .../user-profile-provider-media.styles.ts | 3 +++ .../user-profile-provider-media.tsx | 11 +++++++--- .../user-profile-web3-wallet-row.view.tsx | 1 + ...user-profile-web3-wallets-section.model.ts | 2 ++ ...user-profile-web3-wallets-section.types.ts | 2 ++ 9 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 packages/mosaic/src/features/user-profile/__tests__/user-profile-provider-media.view.test.tsx diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-provider-media.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-provider-media.view.test.tsx new file mode 100644 index 00000000000..a9a14b66ef0 --- /dev/null +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-provider-media.view.test.tsx @@ -0,0 +1,22 @@ +import { render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { UserProfileProviderMedia } from '../user-profile-provider-media'; + +describe('UserProfileProviderMedia', () => { + it.each([ + ['an image logo', { iconUrl: 'https://img.clerk.com/static/okx_wallet.svg' }], + ['a masked logo', { iconUrl: 'https://img.clerk.com/static/okx_wallet.svg', monochromeIcon: true }], + ['the initial fallback', {}], + ])('marks %s with the kebab-cased provider id', (_, props) => { + const { container } = render( + , + ); + + expect(container.querySelector('.cl-provider-icon')).toHaveAttribute('data-provider', 'okx-wallet'); + }); +}); 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 9e2f5df2392..cd82e7776e2 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 @@ -36,6 +36,7 @@ export function UserProfileConnectProviderRowView({ @@ -104,6 +105,7 @@ export function UserProfileConnectedAccountRowView({ diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts index 00d2f9b60d9..e0cc0b7249d 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts @@ -88,6 +88,7 @@ export function createProviderCatalog( enabled: enabled.has(strategy), display: { provider: name, + iconId: provider, iconUrl: iconImageUrl(provider), monochromeIcon: isMonochromeProvider(provider), }, @@ -109,7 +110,7 @@ export function createProviderCatalog( strategy, provider, enabled: enabled.has(strategy), - display: { provider: settings?.name || provider, iconUrl: settings?.logo_url || undefined }, + display: { provider: settings?.name || provider, iconId: provider, iconUrl: settings?.logo_url || undefined }, }); } return [ diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.types.ts index 77168d0dfd5..bfd25079a0b 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.types.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.types.ts @@ -8,6 +8,7 @@ export type ConnectedAccountActionResult = 'redirecting' | void; export interface ConnectedAccountProviderDisplay { provider: string; + iconId?: string; iconUrl?: string; monochromeIcon?: boolean; } 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 index 6c07812cb2e..8fecd6551c3 100644 --- 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 @@ -13,6 +13,9 @@ export const styles = stylex.create({ height: space['5'], width: space['5'], }, + appleOffset: { + translate: '0 -1px', + }, maskImage: (url: string) => ({ maskImage: `url(${JSON.stringify(url)})` }), fallback: { borderRadius: radiusVars['--cl-radius-sm'], 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 index c16c7c24f12..2387f944add 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx @@ -2,18 +2,23 @@ import * as stylex from '@stylexjs/stylex'; import { IconFrame } from '../../components/icon'; import { Section } from '../../components/section'; +import { mergeStyleProps, themeProps } from '../../props'; import { styles } from './user-profile-provider-media.styles'; export function UserProfileProviderMedia({ provider, + iconId, iconUrl, monochromeIcon, }: { provider: string; + iconId?: string; iconUrl?: string; monochromeIcon?: boolean; }) { const url = iconUrl?.trim(); + const slot = themeProps('provider-icon', { provider: iconId?.replaceAll('_', '-') }); + const offset = iconId === 'apple' && styles.appleOffset; return ( ) : url ? ( ) : ( {provider.trim().charAt(0).toUpperCase()} 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 1f94832d3ac..e788761c532 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 @@ -55,6 +55,7 @@ export function UserProfileWeb3WalletRowView({ {wallet.provider ? ( 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 21faca20f15..9da99dda1c5 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 @@ -80,6 +80,7 @@ export function projectWeb3Wallets({ allowCreation && wallet.verification.strategy !== null && enabledStrategies.includes(wallet.verification.strategy), + iconId: provider?.provider, iconUrl: provider ? iconImageUrl(provider.provider) : undefined, monochromeIcon: provider ? isMonochromeProvider(provider.provider) : false, isPrimary: wallet.id === primaryId, @@ -93,6 +94,7 @@ export function projectWeb3Wallets({ id: provider.strategy, walletPicker: provider.provider === 'solana' ? 'solana' : undefined, provider: provider.name, + iconId: provider.provider, 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 0b0d9666a4c..a0ce8fec689 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 @@ -9,6 +9,7 @@ export interface UserProfileWeb3Provider { id: Web3Strategy; walletPicker?: 'solana'; provider: string; + iconId?: string; iconUrl?: string; monochromeIcon?: boolean; connectError?: string; @@ -21,6 +22,7 @@ export interface UserProfileWeb3Wallet { walletPicker?: 'solana'; canVerify?: boolean; provider?: string; + iconId?: string; iconUrl?: string; monochromeIcon?: boolean; isPrimary?: boolean; From fd2de194efd6a423fbf5faaa645c4dbce9f13bb4 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 23 Oct 2026 15:13:37 -0400 Subject: [PATCH 6/8] refactor(mosaic): share a kebabCase util for data attributes --- packages/mosaic/AGENTS.md | 1 + .../user-profile-provider-media.tsx | 3 ++- packages/mosaic/src/props.ts | 5 ++--- .../src/utils/__tests__/kebab-case.test.ts | 17 +++++++++++++++++ packages/mosaic/src/utils/kebab-case.ts | 12 ++++++++++++ 5 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 packages/mosaic/src/utils/__tests__/kebab-case.test.ts create mode 100644 packages/mosaic/src/utils/kebab-case.ts diff --git a/packages/mosaic/AGENTS.md b/packages/mosaic/AGENTS.md index 3bb8ede5535..769cd753d26 100644 --- a/packages/mosaic/AGENTS.md +++ b/packages/mosaic/AGENTS.md @@ -46,6 +46,7 @@ Most problems a feature hits already have a shared answer. Find the row for your | A spinner that should not flash or flicker | `useSpinDelay` (`src/hooks/`) | | A placeholder for content that is still loading | `Skeleton` (`src/components/skeleton/`), see [Skeletons](docs/skeletons.md) | | A date shown to the user | `formatDate` (`src/utils/format-date.ts`) | +| A value turned into kebab case, e.g. for a `data-*` attribute | `kebabCase` (`src/utils/kebab-case.ts`) | | Current time for display labels | `useNow` + `MosaicProvider` ([#10098](https://github.com/clerk/javascript/pull/10098), once available) | | Whether enterprise SSO permits adding another identification | `allowsIdentificationCreation` (`src/utils/allows-identification-creation.ts`) | | An inline message row that animates open and closed | `useHeldMessage`, `useMessageHeight`, `FeedbackBody` (`src/utils/feedback.tsx`) + `styles/feedback.styles.ts` | 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 index 2387f944add..429b3191644 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx @@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex'; import { IconFrame } from '../../components/icon'; import { Section } from '../../components/section'; import { mergeStyleProps, themeProps } from '../../props'; +import { kebabCase } from '../../utils/kebab-case'; import { styles } from './user-profile-provider-media.styles'; export function UserProfileProviderMedia({ @@ -17,7 +18,7 @@ export function UserProfileProviderMedia({ monochromeIcon?: boolean; }) { const url = iconUrl?.trim(); - const slot = themeProps('provider-icon', { provider: iconId?.replaceAll('_', '-') }); + const slot = themeProps('provider-icon', { provider: iconId && kebabCase(iconId) }); const offset = iconId === 'apple' && styles.appleOffset; return ( diff --git a/packages/mosaic/src/props.ts b/packages/mosaic/src/props.ts index 97abd70c7de..d12f2aabeaf 100644 --- a/packages/mosaic/src/props.ts +++ b/packages/mosaic/src/props.ts @@ -2,6 +2,7 @@ import type * as stylex from '@stylexjs/stylex'; import type React from 'react'; import type { ComponentProps } from './primitives/utils'; +import { kebabCase } from './utils/kebab-case'; /** * What `xstyle` accepts: exactly what `stylex.props(...)` does, since that is where a part @@ -63,8 +64,6 @@ export type MosaicComponentProps type VariantValue = string | number | boolean | null | undefined; -const kebab = (name: string) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); - /** * The stable class + variant reflection for a slot. * @@ -84,7 +83,7 @@ export function themeProps( if (value == null || value === false) { continue; } - attrs[`data-${kebab(axis)}`] = value === true ? '' : String(value); + attrs[`data-${kebabCase(axis)}`] = value === true ? '' : String(value); } return { className: `cl-${slot}`, ...attrs }; } diff --git a/packages/mosaic/src/utils/__tests__/kebab-case.test.ts b/packages/mosaic/src/utils/__tests__/kebab-case.test.ts new file mode 100644 index 00000000000..d9fb6194d2f --- /dev/null +++ b/packages/mosaic/src/utils/__tests__/kebab-case.test.ts @@ -0,0 +1,17 @@ +import { describe, expect, it } from 'vitest'; + +import { kebabCase } from '../kebab-case'; + +describe('kebabCase', () => { + it.each([ + ['okx_wallet', 'okx-wallet'], + ['colorScheme', 'color-scheme'], + ['HTTPRequest', 'http-request'], + ['some whitespace', 'some-whitespace'], + ['already-kebab', 'already-kebab'], + ['apple', 'apple'], + ['', ''], + ])('converts %j to %j', (input, expected) => { + expect(kebabCase(input)).toBe(expected); + }); +}); diff --git a/packages/mosaic/src/utils/kebab-case.ts b/packages/mosaic/src/utils/kebab-case.ts new file mode 100644 index 00000000000..bc72432a214 --- /dev/null +++ b/packages/mosaic/src/utils/kebab-case.ts @@ -0,0 +1,12 @@ +export function kebabCase(value: string): string { + return words(value) + .map(word => word.toLowerCase()) + .join('-'); +} + +const CASE_SPLIT_PATTERN = + /\p{Lu}?\p{Ll}+|[0-9]+|\p{Lu}+(?!\p{Ll})|\p{Emoji_Presentation}|\p{Extended_Pictographic}|\p{L}+/gu; + +function words(value: string): string[] { + return Array.from(value.match(CASE_SPLIT_PATTERN) ?? []); +} From 586d8037c3e0e510543273197ee169de2204169d Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 23 Oct 2026 16:06:26 -0400 Subject: [PATCH 7/8] chore(swingset): pass iconId in provider fixtures --- .../fixtures/user-profile-connected-accounts.ts | 12 ++++++++++-- .../stories/fixtures/user-profile-web3-wallets.ts | 11 ++++++++++- ...er-profile-connected-accounts-section.stories.tsx | 1 + .../user-profile-web3-wallets-section.stories.tsx | 5 ++++- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts index b0070f08823..28951126ece 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts @@ -13,13 +13,20 @@ import { idleReverification } from './reverification'; export const connectedAccount: UserProfileConnectedAccount = { id: 'google', provider: 'Google', + iconId: 'google', identifier: 'test@example.com', iconUrl: 'https://img.clerk.com/static/google.svg', status: 'connected', }; const connectionProviders: UserProfileConnectionProvider[] = [ - { id: 'google', provider: 'Google', iconUrl: 'https://img.clerk.com/static/google.svg' }, - { id: 'apple', provider: 'Apple', iconUrl: 'https://img.clerk.com/static/apple.svg', monochromeIcon: true }, + { id: 'google', provider: 'Google', iconId: 'google', iconUrl: 'https://img.clerk.com/static/google.svg' }, + { + id: 'apple', + provider: 'Apple', + iconId: 'apple', + iconUrl: 'https://img.clerk.com/static/apple.svg', + monochromeIcon: true, + }, ]; export function useConnectedAccountsFixture({ @@ -60,6 +67,7 @@ export function useConnectedAccountsFixture({ { id: provider.id, provider: provider.provider, + iconId: provider.iconId, iconUrl: provider.iconUrl, monochromeIcon: provider.monochromeIcon, identifier: 'test@example.com', diff --git a/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts b/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts index 4bd6ba7260f..8fd97ba984c 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts @@ -12,10 +12,16 @@ import { chaosText } from '@/lib/chaos'; import { idleReverification } from './reverification'; const providers: UserProfileWeb3Provider[] = [ - { id: 'web3_metamask_signature', provider: 'MetaMask', iconUrl: 'https://img.clerk.com/static/metamask.svg' }, + { + id: 'web3_metamask_signature', + provider: 'MetaMask', + iconId: 'metamask', + iconUrl: 'https://img.clerk.com/static/metamask.svg', + }, { id: 'web3_coinbase_wallet_signature', provider: 'Coinbase Wallet', + iconId: 'coinbase_wallet', iconUrl: 'https://img.clerk.com/static/coinbase_wallet.svg', }, ]; @@ -24,6 +30,7 @@ export const primaryWallet: UserProfileWeb3Wallet = { id: 'wallet_1', providerId: 'web3_metamask_signature', provider: 'MetaMask', + iconId: 'metamask', iconUrl: 'https://img.clerk.com/static/metamask.svg', address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F', isPrimary: true, @@ -34,6 +41,7 @@ export const secondaryWallet: UserProfileWeb3Wallet = { id: 'wallet_2', providerId: 'web3_coinbase_wallet_signature', provider: 'Coinbase Wallet', + iconId: 'coinbase_wallet', iconUrl: 'https://img.clerk.com/static/coinbase_wallet.svg', address: '0x1234567890abcdef1234567890abcdef12345678', isVerified: true, @@ -87,6 +95,7 @@ export function useWeb3WalletsFixture({ ...current, { provider: provider.provider, + iconId: provider.iconId, iconUrl: provider.iconUrl, id: `wallet_${id}`, providerId: id, diff --git a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx index a51b328ee87..344d0e27ad4 100644 --- a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx @@ -46,6 +46,7 @@ export function ConnectionError() { { id: 'apple', provider: 'Apple', + iconId: 'apple', iconUrl: 'https://img.clerk.com/static/apple.svg', monochromeIcon: true, connectError: 'Unable to connect. Please try again.', diff --git a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx index 8420f89a827..6e1fad77714 100644 --- a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx @@ -35,7 +35,9 @@ export function ConnectOnly() { export function UnverifiedWallet() { const fixture = useWeb3WalletsFixture({ initialWallets: [{ ...primaryWallet, isPrimary: false, isVerified: false }], - availableProviders: [{ id: 'web3_metamask_signature', provider: 'MetaMask', iconUrl: primaryWallet.iconUrl }], + availableProviders: [ + { id: 'web3_metamask_signature', provider: 'MetaMask', iconId: 'metamask', iconUrl: primaryWallet.iconUrl }, + ], }); return ( Date: Fri, 23 Oct 2026 16:14:29 -0400 Subject: [PATCH 8/8] fix(mosaic): nudge the Apple logo with transform --- .../features/user-profile/user-profile-provider-media.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 8fecd6551c3..f3739c8f284 100644 --- 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 @@ -14,7 +14,7 @@ export const styles = stylex.create({ width: space['5'], }, appleOffset: { - translate: '0 -1px', + transform: 'translateY(-1px)', }, maskImage: (url: string) => ({ maskImage: `url(${JSON.stringify(url)})` }), fallback: {