@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/screens/Account.tsx

@@ -0,0 +1,559 @@
+/**
+ * The account screen: the user's Tempo Accounts and balances, passkeys, and sign-out. On a chain
+ * with configurable accounts, it also offers each upgrade and second owner.
+ * @module
+ */
+import { Link } from '@tanstack/react-router'
+import {
+  Amount,
+  Avatar,
+  Button,
+  Callout,
+  formatHex,
+  IconChip,
+  Rows,
+  Stack,
+  Tooltip,
+} from '@tempoxyz/ds'
+import {
+  ArrowUp,
+  Cloud,
+  Download,
+  Fingerprint,
+  LogOut,
+} from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import { style } from '../zyzz.config.js'
+
+/** The account screen, with the accounts oldest first. A lone account shows its balance large. */
+export function Account(props: Account.Props): ReactNode {
+  const { accounts } = props
+  const only = accounts?.length === 1 ? accounts[0] : undefined
+  const Title = props.heading ?? 'h1'
+  const Subtitle = props.heading === 'h4' ? 'h5' : 'h2'
+
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack align="center" gap="12" render={<header />}>
+        <Avatar aria-hidden size="64">
+          <Avatar.Fallback>
+            {(props.name || props.email).charAt(0)}
+          </Avatar.Fallback>
+        </Avatar>
+        <Stack {...styles.identity()} gap="4">
+          {/* The email heads the screen when the user has no name. */}
+          <Title {...styles.name()}>{props.name || props.email}</Title>
+          {props.name ? <p {...styles.email()}>{props.email}</p> : null}
+        </Stack>
+      </Stack>
+
+      {(() => {
+        if (!accounts)
+          return props.accountError ? (
+            <Callout intent="negative">
+              <Callout.Icon />
+              <Callout.Content>{props.accountError}</Callout.Content>
+            </Callout>
+          ) : null
+        // The page creates a wallet for a user with none wherever the realm creates them, so an
+        // empty list means the realm creates none on the server. A passkey still creates one.
+        if (!accounts.length)
+          return (
+            <p {...styles.hint()}>
+              {props.onAddPasskey
+                ? 'You have no wallets yet. Create one with a passkey.'
+                : 'You have no wallets yet, and this account cannot create one. Contact Tempo support.'}
+            </p>
+          )
+        // One wallet needs no list, so its balance leads the screen.
+        if (only)
+          return (
+            <section {...styles.single()} aria-label="Wallet">
+              {only.balance ? (
+                <Amount
+                  currency={only.balance.currency}
+                  data-testid="balance"
+                  size="lg"
+                  value={only.balance.amount}
+                />
+              ) : (
+                <span {...styles.unavailable()} data-testid="balance">
+                  Balance unavailable
+                </span>
+              )}
+              <DepositLink
+                entry={only}
+                funding={props.funding}
+                large
+                onFund={props.onFund}
+              />
+            </section>
+          )
+        return (
+          <Stack gap="8" render={<section />}>
+            <Subtitle {...styles.label()}>Wallets</Subtitle>
+            <Rows
+              {...styles.list()}
+              aria-label="Wallets"
+              dividers="none"
+              role="list"
+            >
+              {accounts.map((entry) => (
+                <Rows.Row key={entry.address} render={<li />}>
+                  <IconChip {...styles.chip()} aria-hidden size="40">
+                    {entry.owner === 'webAuthn' ? <Fingerprint /> : <Cloud />}
+                  </IconChip>
+                  <Rows.Info>
+                    <Rows.Title>{kind(entry)}</Rows.Title>
+                  </Rows.Info>
+                  {entry.balance ? (
+                    <Amount
+                      {...styles.amount()}
+                      currency={entry.balance.currency}
+                      data-testid="balance"
+                      value={entry.balance.amount}
+                    />
+                  ) : (
+                    // A dash keeps the row narrow, and the label names it for screen readers.
+                    <span
+                      {...styles.missing()}
+                      aria-label="Balance unavailable"
+                      data-testid="balance"
+                      role="img"
+                      title="Balance unavailable"
+                    >
+                      –
+                    </span>
+                  )}
+                  <ChangeButton account={props} entry={entry} />
+                  <DepositLink
+                    entry={entry}
+                    funding={props.funding}
+                    onFund={props.onFund}
+                  />
+                </Rows.Row>
+              ))}
+            </Rows>
+          </Stack>
+        )
+      })()}
+
+      <Stack gap="12">
+        {(() => {
+          // Several wallets offer each change in the wallet's own row.
+          if (!only) return null
+          const held = holds(props, only)
+          const action = change(props, only)
+          // A wallet.tempo passkey's account that is not configurable yet upgrades in place, with the
+          // passkey as its only owner. The page prepared the upgrade, so one click signs it.
+          if (action === 'upgrade')
+            return (
+              <Button
+                disabled={held}
+                loading={
+                  props.upgrading === only.address ||
+                  props.preparing?.includes(only.address)
+                }
+                onClick={() => props.onUpgrade?.(only.address)}
+                variant="primary"
+              >
+                <ArrowUp {...styles.icon()} />
+                Upgrade wallet
+              </Button>
+            )
+          // A passkey joins a cloud wallet's configurable account as a second owner.
+          if (action === 'owner')
+            return (
+              <Button
+                disabled={held}
+                loading={props.addingPasskey}
+                onClick={() => props.onAddOwner?.(only.address)}
+                variant="secondary"
+              >
+                <Fingerprint {...styles.icon()} />
+                Add passkey
+              </Button>
+            )
+          return null
+        })()}
+        {(() => {
+          // Without a wallet, the passkey is the way to create one, so it leads the screen. On the
+          // configurable chain, a passkey joins a wallet instead, through the owner buttons.
+          const empty = accounts?.length === 0
+          if (props.onAddPasskey && !(props.onAddOwner && accounts?.length))
+            return (
+              <Button
+                disabled={props.signingOut}
+                loading={props.addingPasskey}
+                onClick={props.onAddPasskey}
+                variant={empty ? 'primary' : 'secondary'}
+              >
+                <Fingerprint {...styles.icon()} />
+                {/* On the configurable chain, the passkey creates a configurable wallet, so it reads as an owner. */}
+                {empty && !props.onAddOwner
+                  ? 'Create wallet with passkey'
+                  : 'Add passkey'}
+              </Button>
+            )
+          return null
+        })()}
+        <Button
+          disabled={props.addingPasskey || props.upgrading !== undefined}
+          loading={props.signingOut}
+          onClick={props.onSignOut}
+          variant="secondary"
+        >
+          <LogOut {...styles.icon()} />
+          Sign out
+        </Button>
+      </Stack>
+      {props.error ? (
+        <Callout intent="negative">
+          <Callout.Icon />
+          <Callout.Content>{props.error}</Callout.Content>
+        </Callout>
+      ) : null}
+      {/* Announced only: a button's spinner shows progress, and the route's toast shows a result. */}
+      <p {...styles.announcement()} aria-live="polite" role="status">
+        {(() => {
+          if (props.signingOut) return 'Signing out.'
+          if (props.funding) return 'Funding the wallet from the faucet.'
+          if (props.addingPasskey) return 'Adding a passkey.'
+          if (props.upgrading) return 'Upgrading the wallet.'
+          if (props.ownerAdded === 'passkey')
+            return 'Passkey added. It signs you in, and signs for the wallet beside its cloud wallet.'
+          if (props.passkeyAdded)
+            return 'Passkey added. It signs you in, and holds the new passkey wallet.'
+          return undefined
+        })()}
+      </p>
+    </Stack>
+  )
+}
+
+export declare namespace Account {
+  type Props = {
+    /** Why the accounts failed to load. Shows when `accounts` is `null`. */
+    accountError?: string | undefined
+    /** Oldest first, or `null` if they failed to load. */
+    accounts: readonly Entry[] | null
+    /** The signed-in user's email address. */
+    email: string
+    /** Whether a passkey registration is in progress. */
+    addingPasskey?: boolean | undefined
+    /** Why the last sign-out, faucet request, or passkey registration failed. */
+    error?: string | undefined
+    /** The account that the faucet funds now. */
+    funding?: `0x${string}` | undefined
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Heads the screen if present. */
+    name?: string | undefined
+    /** Adds a passkey to the cloud wallet's account at `address`. Only on a configurable chain. */
+    onAddOwner?: ((address: `0x${string}`) => void) | undefined
+    /** Registers a passkey, which owns a wallet. Absent, the screen offers no passkey. */
+    onAddPasskey?: (() => void) | undefined
+    /** Funds an account from the faucet. Present on a test chain, instead of deposit links. */
+    onFund?: ((address: `0x${string}`) => void) | undefined
+    /** Signs the user out. */
+    onSignOut: () => void
+    /** Upgrades the wallet.tempo passkey's account at `address`. Only on a configurable chain. */
+    onUpgrade?: ((address: `0x${string}`) => void) | undefined
+    /** The last owner change that succeeded. */
+    ownerAdded?: 'passkey' | undefined
+    /** Whether the last passkey registration succeeded. */
+    passkeyAdded?: boolean | undefined
+    /** Whether the realm holds passkeys at Tempo ID's origin. Defaults to `false`. */
+    passkeys?: boolean | undefined
+    /** The accounts whose upgrade is still in preparation, whose button holds. Defaults to none. */
+    preparing?: readonly `0x${string}`[] | undefined
+    /** Whether the sign-out is in progress. */
+    signingOut: boolean
+    /** The account whose upgrade is in progress, which holds the other buttons. */
+    upgrading?: `0x${string}` | undefined
+  }
+
+  /** One account, with its balance. */
+  type Entry = {
+    /** The account's address. */
+    address: `0x${string}`
+    /** `null` if it failed to load. */
+    balance: Balance | null
+    /** Whether the account is configurable on the selected chain. Defaults to `false`. */
+    configurable?: boolean | undefined
+    /** The credential ID of the user's unlinked wallet.tempo passkey, which its upgrade links. */
+    credentialId?: string | undefined
+    /** The holder of the key that acts as the account: `privy`, `secp256k1`, or `webAuthn`. */
+    owner: Owner
+    /** The holder of each owner key. Defaults to `owner` alone. */
+    owners?: readonly Owner[] | undefined
+  }
+
+  /** Who holds an owner key. */
+  type Owner = 'privy' | 'secp256k1' | 'webAuthn'
+
+  /** A balance in one currency. */
+  type Balance = {
+    /** A decimal string, such as `12.5`. */
+    amount: string
+    /** The ISO 4217 currency code, such as `USD`. */
+    currency: string
+  }
+}
+
+/** Links to the deposit page for a wallet, or funds the wallet with `onFund`. */
+function DepositLink(props: DepositLink.Props): ReactNode {
+  const { address } = props.entry
+  const { onFund } = props
+  const icon = (
+    <Download {...(props.large ? styles.depositIcon() : styles.icon())} />
+  )
+
+  if (onFund)
+    return (
+      <Tooltip.Root>
+        <Tooltip.Trigger
+          delay={150}
+          render={
+            <Button
+              {...styles.deposit()}
+              aria-label={`Fund ${kind(props.entry)} wallet ${formatHex(address)} from the faucet`}
+              // One faucet request runs at a time, so another wallet's button waits for it.
+              disabled={
+                props.funding !== undefined && props.funding !== address
+              }
+              loading={props.funding === address}
+              onClick={() => onFund(address)}
+              shape="icon"
+              size={props.large ? 'large' : 'small'}
+              variant="text"
+            >
+              {icon}
+            </Button>
+          }
+        />
+        <Tooltip.Popup>Fund from faucet</Tooltip.Popup>
+      </Tooltip.Root>
+    )
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        delay={150}
+        render={
+          <Button.Link
+            {...styles.deposit()}
+            // The short address tells apart wallets of the same kind, which the row shows only by name.
+            aria-label={`Deposit to ${kind(props.entry)} wallet ${formatHex(address)}`}
+            render={<Link search={{ address }} to="/deposit" />}
+            shape="icon"
+            size={props.large ? 'large' : 'small'}
+            variant="text"
+          >
+            {icon}
+          </Button.Link>
+        }
+      />
+      <Tooltip.Popup>Deposit</Tooltip.Popup>
+    </Tooltip.Root>
+  )
+}
+
+declare namespace DepositLink {
+  type Props = {
+    /** The wallet that the deposit goes to. */
+    entry: Account.Entry
+    /** The wallet that the faucet funds now, which holds every faucet button. */
+    funding?: `0x${string}` | undefined
+    /** Whether the icon matches a lone wallet's large balance. */
+    large?: boolean | undefined
+    /** Funds the wallet. Absent, the icon links to the deposit page. */
+    onFund?: ((address: `0x${string}`) => void) | undefined
+  }
+}
+
+/** The upgrade or the second owner that a wallet's row offers, as an icon with a tooltip. */
+function ChangeButton(props: ChangeButton.Props): ReactNode {
+  const { account, entry } = props
+  const action = change(account, entry)
+  if (!action) return null
+
+  // The short address tells apart wallets of the same kind, which the row shows only by name.
+  const name = `${kind(entry)} wallet ${formatHex(entry.address)}`
+  const upgrade = action === 'upgrade'
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        delay={150}
+        render={
+          <Button
+            {...styles.deposit()}
+            aria-label={upgrade ? `Upgrade ${name}` : `Add passkey to ${name}`}
+            disabled={holds(account, entry)}
+            loading={
+              upgrade
+                ? account.upgrading === entry.address ||
+                  account.preparing?.includes(entry.address)
+                : account.addingPasskey
+            }
+            onClick={() =>
+              upgrade
+                ? account.onUpgrade?.(entry.address)
+                : account.onAddOwner?.(entry.address)
+            }
+            shape="icon"
+            size="small"
+            variant="text"
+          >
+            {upgrade ? (
+              <ArrowUp {...styles.icon()} />
+            ) : (
+              <Fingerprint {...styles.icon()} />
+            )}
+          </Button>
+        }
+      />
+      <Tooltip.Popup>
+        {upgrade ? 'Upgrade wallet' : 'Add passkey'}
+      </Tooltip.Popup>
+    </Tooltip.Root>
+  )
+}
+
+declare namespace ChangeButton {
+  type Props = {
+    /** The screen's props, which hold the handlers and the progress of every change. */
+    account: Account.Props
+    /** The wallet that the change acts on. */
+    entry: Account.Entry
+  }
+}
+
+/**
+ * Returns the change that `entry` offers: `upgrade` for a wallet.tempo passkey's account that is not
+ * configurable yet, `owner` for a cloud wallet's configurable account without a passkey, or
+ * `undefined`.
+ */
+function change(props: Account.Props, entry: Account.Entry) {
+  if (!entry.configurable && entry.owner === 'webAuthn')
+    return props.onUpgrade ? 'upgrade' : undefined
+  if (
+    entry.configurable &&
+    props.onAddOwner &&
+    props.passkeys &&
+    !owners(entry).includes('webAuthn')
+  )
+    return 'owner'
+  return undefined
+}
+
+/** Whether another change in progress holds `entry`'s change. */
+function holds(props: Account.Props, entry: Account.Entry) {
+  return (
+    props.signingOut ||
+    props.addingPasskey ||
+    (props.upgrading !== undefined && props.upgrading !== entry.address)
+  )
+}
+
+/** Names an account by its owners: `Passkey`, `Cloud` for a key held for the user, or both. */
+function kind(entry: Account.Entry) {
+  const kinds = owners(entry)
+  const passkey = kinds.includes('webAuthn')
+  const cloud = kinds.some((owner) => owner !== 'webAuthn')
+  if (passkey && cloud) return 'Passkey and cloud'
+  return passkey ? 'Passkey' : 'Cloud'
+}
+
+/** Returns who holds each of `entry`'s owner keys: the key that acts as the account alone, by default. */
+function owners(entry: Account.Entry) {
+  return entry.owners ?? [entry.owner]
+}
+
+namespace styles {
+  export const amount = style({ flexShrink: 0, typography: 'label.14' })
+
+  // Visually hidden, for progress that screen readers announce.
+  export const announcement = style({
+    clipPath: 'inset(50%)',
+    height: '1',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1',
+  })
+
+  // Smaller than the design system's 40px chip.
+  export const chip = style({
+    borderRadius: '8',
+    fontSize: '16',
+    height: '32',
+    width: '32',
+  })
+
+  export const column = style({ maxWidth: '384', width: '100% !custom' })
+
+  export const deposit = style({ borderRadius: 'full' })
+
+  export const depositIcon = style({ height: '24', width: '24' })
+
+  export const email = style({ color: 'gray.900', typography: 'copy.16' })
+
+  export const hint = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    textWrap: 'balance',
+    typography: 'copy.14',
+  })
+
+  export const icon = style({ height: '16', width: '16' })
+
+  export const identity = style({ minWidth: '0', textAlign: 'center' })
+
+  export const label = style({
+    color: 'gray.900',
+    paddingInline: '16',
+    typography: 'label.14',
+  })
+
+  // A gray group, as in Link's settings, whose rows need no dividers. Each row insets its chip and
+  // deposit button by 8px on every side, so the chip's 8px radius is concentric with the group's 16px one.
+  export const list = style({
+    backgroundColor: 'gray.100',
+    borderRadius: '16',
+    listStyle: 'none',
+    margin: '0',
+    overflow: 'hidden',
+    padding: '0',
+    '& > li': { padding: '8' },
+  })
+
+  // A failed read is muted, so it reads as a missing value and not as an amount.
+  export const missing = style({
+    color: 'gray.900',
+    flexShrink: 0,
+    typography: 'label.14',
+  })
+
+  export const name = style({
+    overflowWrap: 'anywhere',
+    typography: 'heading.24',
+  })
+
+  // The balance on the left and its deposit link on the right, flush with the buttons below.
+  // The link, or the faucet's button, bleeds by its inset, so its 24px icon lines up with the
+  // buttons' edge.
+  export const single = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: '12',
+    justifyContent: 'space-between',
+    '& > :is(a, button)': { marginInlineEnd: '-16' },
+  })
+
+  // A lone wallet's failed read, in place of its large balance.
+  export const unavailable = style({
+    color: 'gray.900',
+    typography: 'heading.24',
+  })
+}