@tempoxyz/id 0.0.0-pr-187.sha-eed04d3

package/src/app/screens/ChooseAccount.tsx

@@ -0,0 +1,240 @@
+/**
+ * The account step: a user with more than one Tempo Account in an app's realms chooses the one the
+ * app uses.
+ * @module
+ */
+import type { ReactNode } from 'react'
+import ChevronRight from '~icons/lucide/chevron-right'
+import Cloud from '~icons/lucide/cloud'
+import Fingerprint from '~icons/lucide/fingerprint'
+import Spinner from '~icons/lucide/loader-circle'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * The account step. Each account is a row that chooses it, with its owner, its balance, and its
+ * named realm when the accounts span several realms.
+ */
+export function ChooseAccount(props: ChooseAccount.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  const pending = props.selecting !== undefined
+  // A row names its realm only when the accounts span several realms, and never the `default` realm.
+  const realms = new Set(props.accounts.map((account) => account.realm))
+
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        <Title {...styles.title()}>Choose a wallet</Title>
+        <p {...styles.description()}>
+          <strong>{props.app}</strong> uses the account you choose. You can
+          choose again after you sign out.
+        </p>
+      </header>
+
+      <ul {...styles.accounts()} aria-label="Accounts">
+        {props.accounts.map((account) => (
+          <li key={account.address}>
+            <button
+              {...styles.choice()}
+              aria-busy={props.selecting === account.address || undefined}
+              disabled={pending}
+              onClick={() => props.onChoose(account.address)}
+              type="button"
+            >
+              <span {...styles.tile()} aria-hidden>
+                {account.owner === 'webAuthn' ? (
+                  <Fingerprint {...styles.icon()} />
+                ) : (
+                  <Cloud {...styles.icon()} />
+                )}
+              </span>
+              <span {...styles.text()}>
+                <span {...styles.kind()}>
+                  {realms.size > 1 && account.realm
+                    ? `${account.realm} · `
+                    : null}
+                  {account.owner === 'webAuthn' ? 'Passkey' : 'Cloud'}
+                </span>
+                <span {...styles.address()}>
+                  {`${account.address.slice(0, 6)}…${account.address.slice(-4)}`}
+                </span>
+              </span>
+              <span {...styles.balance()} data-testid="balance">
+                {format(account.balance)}
+              </span>
+              {props.selecting === account.address ? (
+                <Spinner {...styles.spinner()} aria-hidden />
+              ) : (
+                <ChevronRight {...styles.chevron()} aria-hidden />
+              )}
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      <ErrorMessage align="center">{props.error}</ErrorMessage>
+      <p {...styles.status()} aria-live="polite" role="status">
+        {pending ? `Continuing to ${props.app}.` : undefined}
+      </p>
+    </div>
+  )
+}
+
+export declare namespace ChooseAccount {
+  type Props = {
+    /** The accounts to choose from, oldest first. */
+    accounts: readonly Account[]
+    /** The app's display name. */
+    app: string
+    /** Why the selection failed. */
+    error?: string | undefined
+    /** The level of the screen's title: `h1` by default, or `h4` on the flows canvas, below the canvas's own headings. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Chooses the account at `address`. */
+    onChoose: (address: `0x${string}`) => void
+    /** The address of the choice in progress, which holds every row. */
+    selecting?: `0x${string}` | undefined
+  }
+
+  /** One account, as its row shows it. */
+  type Account = {
+    /** The account's address. */
+    address: `0x${string}`
+    /** The account's balance on the chain of the request's key, or `null` when it failed to load. */
+    balance: Balance | null
+    /**
+     * Who holds the owner key: a Privy wallet (`privy`), a key that Tempo ID holds in development
+     * (`secp256k1`), or a passkey (`webAuthn`).
+     */
+    owner: 'privy' | 'secp256k1' | 'webAuthn'
+    /** The display name of the account's realm, such as `Tempo Cash`, or `null` for the `default` realm. */
+    realm: string | null
+  }
+
+  /** A balance in one currency. */
+  type Balance = {
+    /** The amount, as a decimal string, such as `12.5`. */
+    amount: string
+    /** The ISO 4217 currency code, such as `USD`. */
+    currency: string
+  }
+}
+
+/**
+ * Formats a balance in its currency, or names its failed state. The locale is fixed, so the server
+ * and the browser render the same text.
+ */
+function format(balance: ChooseAccount.Account['balance']) {
+  if (!balance) return 'Unavailable'
+  return new Intl.NumberFormat('en-US', {
+    currency: balance.currency,
+    style: 'currency',
+    // A decimal string keeps every digit, which a `Number` would round.
+  }).format(balance.amount as Intl.StringNumericLiteral)
+}
+
+namespace styles {
+  export const accounts = style({
+    display: 'grid',
+    gap: 2,
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+  })
+
+  export const address = style({
+    color: 'gray.900',
+    typography: 'copy.13.mono',
+  })
+
+  export const balance = style({
+    flexShrink: 0,
+    fontVariantNumeric: 'tabular-nums',
+    typography: 'label.14',
+  })
+
+  export const chevron = style({ color: 'gray.700', height: 5, width: 5 })
+
+  // A row that fills while hovered, with a visible focus ring.
+  export const choice = style({
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: '2xl',
+    color: 'foreground',
+    cursor: 'pointer',
+    display: 'flex',
+    gap: 3,
+    outline: 'none',
+    paddingBlock: 3,
+    paddingInline: 4,
+    textAlign: 'left',
+    transitionDuration: '150ms',
+    transitionProperty: 'background-color',
+    transitionTimingFunction: 'in-out',
+    width: 'full',
+    ':disabled': { cursor: 'not-allowed' },
+    ':hover:not(:disabled)': { backgroundColor: 'gray.100' },
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const column = style({
+    display: 'grid',
+    gap: 8,
+    maxWidth: 'sm',
+    width: 'full',
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', fontWeight: 'medium' },
+  })
+
+  export const header = style({
+    display: 'grid',
+    gap: 2,
+    textAlign: 'center',
+  })
+
+  export const icon = style({ height: 5, width: 5 })
+
+  export const kind = style({ typography: 'label.14' })
+
+  export const spinner = style({
+    color: 'gray.700',
+    height: 5,
+    width: 5,
+    '@media (prefers-reduced-motion: no-preference)': { animation: 'spin' },
+  })
+
+  export const status = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.14',
+  })
+
+  export const text = style({ display: 'grid', flex: 1, gap: 1 })
+
+  export const tile = style({
+    alignItems: 'center',
+    backgroundColor: 'gray.100',
+    borderRadius: 'full',
+    display: 'flex',
+    flexShrink: 0,
+    height: 10,
+    justifyContent: 'center',
+    width: 10,
+  })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+}