- {m.title}
- {currentDevices.length > 0 ? (
- currentDevices.map(device => (
-
+
+ {m.title}
+ {onSignOutAllOtherDevices && otherDevices.length > 0 ? (
+
+
+
+ ) : null}
+
+
+
+ {currentDevices.length > 0 ? (
+ currentDevices.map(device => (
+ deviceDetails.open(device)}
+ />
+ ))
+ ) : (
+
+
+ {m.emptyCurrent}
+
+
+ )}
+ {otherDevices.map(device => (
deviceDetails.open(device)}
/>
-
- ))
- ) : (
-
-
-
- {m.emptyCurrent}
-
-
-
- )}
+ ))}
+
+
- {otherDevices.length > 0 ? (
-
-
-
-
-
-
- {fill(otherDevices.length === 1 ? m.otherDevice : m.otherDevices, {
- count: String(otherDevices.length),
- })}
-
-
- {onSignOutAllOtherDevices ? (
-
-
-
- ) : null}
-
-
- {otherDevices.map(device => (
- deviceDetails.open(device)}
- />
- ))}
-
-
-
-
- ) : null}
{onSignOutAllOtherDevices ? (
- History
-
- {/* TODO: Replace this inline implementation with the Mosaic Table component. */}
-
-
-
-
- |
- Invoice
- |
-
- Amount
- |
-
- Status
- |
- |
-
-
-
- {items.length > 0 ? (
- items.map(item => (
-
+
+
+ History
+
+
+ {/* TODO: Replace this inline implementation with the Mosaic Table component. */}
+
+
+
+
+ |
- |
- {item.dateLabel}
- {item.invoiceLabel}
- |
- {item.amountLabel} |
-
- {item.statusLabel}
- |
-
- {onView ? (
-
- ) : null}
- |
-
- ))
- ) : (
-
- |
+ |
- No invoices yet
-
- |
- )}
-
-
-
-
-
-
-
-
-
+
+
+ {items.length > 0 ? (
+ items.map(item => (
+
+ |
+ {item.dateLabel}
+ {item.invoiceLabel}
+ |
+ {item.amountLabel} |
+
+ {item.statusLabel}
+ |
+
+ {onView ? (
+
+ ) : null}
+ |
+
+ ))
+ ) : (
+
+ |
+ No invoices yet
+ |
+
+ )}
+
+
- ) : null}
-
+
+
+
+
+
+
+
- {showPassword ? (
-
- ) : null}
- {showPasskeys ? (
-
- ) : null}
- {mfaMethods !== undefined ? (
-
- ) : null}
-
+ {hasAuthentication ? (
+
+ {showPassword ? (
+
+ ) : null}
+ {showPasskeys ? (
+
+ ) : null}
+ {mfaMethods !== undefined ? (
+
+ ) : null}
+
+ ) : null}
{devices ? (
- Subscription
-
-
-
- {subscription.planName}
- {subscription.priceLabel}
-
- {onChangePlan ? (
+
+ Subscription
+
+
+
+
+
+ {subscription.planName}
+ {subscription.priceLabel}
+
+ {onChangePlan ? (
+
+
+
+ ) : null}
+
+
+
+
+
+ Total due
+ {subscription.renewsAtLabel}
+
-
+ {subscription.totalDueLabel}
- ) : null}
-
-
-
-
-
- Total due
- {subscription.renewsAtLabel}
-
-
- {subscription.totalDueLabel}
-
-
-
+
+
+
);
diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx
index f4cd5ad851b..427f30c8e65 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx
@@ -43,7 +43,7 @@ export function UserProfileWeb3WalletsSectionView({
onRemove,
}: UserProfileWeb3WalletsSectionViewProps) {
const m = useMessages('userProfileWeb3Wallets');
- const section = useRef(null);
+ const section = useRef(null);
const removalFocus = useListRemovalFocus({
ids: wallets.map(wallet => wallet.id),
onRemove,
@@ -59,30 +59,34 @@ export function UserProfileWeb3WalletsSectionView({
return (
<>
{hasRows ? (
-
- {m.title}
-
- {wallets.map(wallet => (
- removeWallet.open(wallet) : undefined}
- />
- ))}
- {onConnect
- ? availableProviders.map(provider => (
-
- ))
- : null}
+
+
+
+ {m.title}
+
+
+ {wallets.map(wallet => (
+ removeWallet.open(wallet) : undefined}
+ />
+ ))}
+ {onConnect
+ ? availableProviders.map(provider => (
+
+ ))
+ : null}
+
) : null}
diff --git a/packages/swingset/src/lib/exampleSnippet.ts b/packages/swingset/src/lib/exampleSnippet.ts
index 446e57c27af..8a9fd7f8440 100644
--- a/packages/swingset/src/lib/exampleSnippet.ts
+++ b/packages/swingset/src/lib/exampleSnippet.ts
@@ -41,9 +41,20 @@ function unwrapReturn(fnSource: string): string {
return expr;
}
- // `return ;` — a single expression statement; take up to its terminating semicolon.
- const semicolon = expr.indexOf(';');
- return semicolon === -1 ? expr : expr.slice(0, semicolon);
+ // `return ;` — the return is the function's last statement, so its terminating semicolon
+ // is the last one; an earlier one can sit inside the JSX (an inline `
+
+
+
+ Profile
+
+
+
+
+
+ Name
+ Preston Booth
+
+
+
+
+
+
+
+
+
+ Username
+ Prestonb.xyz
+
+
+
+
+
+
+
+
+ {[
+ { label: 'Email', values: ['item1@clerk.dev', 'item2@clerk.dev'] },
+ { label: 'Phone', values: ['+1 801-888-8181'] },
+ ].map(({ label, values }) => (
+
+
+ {label}
+
+
+
+
+
+
+ {values.map((value, index) => (
+
+
+
+ {value}
+ {index === 0 ? Primary : null}
+
+
+
+
+
+
+ ))}
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index b36689c2f9c..40f74188b38 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -14,14 +14,13 @@ import * as Stories from './user-profile-passkeys-section.stories';
## Props
-| Prop | Type | Default | Description |
-| -------------- | ----------------------------------------------------- | ------------ | ---------------------------------------------------------------- |
-| `passkeys` | `UserProfilePasskey[]` | — (required) | Names and formatted creation/last-used labels. |
-| `sectionTitle` | `string` | — | Optional surrounding section heading. |
-| `onAdd` | `() => void` | — | Shows Add when supplied. |
-| `addError` | `string` | — | Inline creation error. |
-| `onRename` | `(id: string, name: string) => void \| Promise` | — | Resolve to close; reject with an Error to display the failure. |
-| `onRemove` | `(id: string) => void \| Promise` | — | Shared confirmation awaits removal and displays rejected errors. |
+| Prop | Type | Default | Description |
+| ---------- | ----------------------------------------------------- | ------------ | ---------------------------------------------------------------- |
+| `passkeys` | `UserProfilePasskey[]` | — (required) | Names and formatted creation/last-used labels. |
+| `onAdd` | `() => void` | — | Shows Add when supplied. |
+| `addError` | `string` | — | Inline creation error. |
+| `onRename` | `(id: string, name: string) => void \| Promise` | — | Resolve to close; reject with an Error to display the failure. |
+| `onRemove` | `(id: string) => void \| Promise` | — | Shared confirmation awaits removal and displays rejected errors. |
## Usage
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
index f57448d1b14..9ea16aa95c0 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
@@ -18,12 +18,7 @@ export const meta: StoryMeta = {
function PasskeysExample({ empty = false, failOnce = false }: { empty?: boolean; failOnce?: boolean }): ReactElement {
const fixture = usePasskeysFixture({ empty, failOnce });
- return (
-
- );
+ return ;
}
export function Default(): ReactElement {
@@ -39,7 +34,6 @@ export function CreationUnavailable(): ReactElement {
return (
);