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

package/src/app/screens/Account.tsx

@@ -0,0 +1,347 @@
+/**
+ * The account screen: the signed-in user, their Tempo Accounts with each balance and a deposit link,
+ * and sign-out.
+ * @module
+ */
+import { Link } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import ArrowDownToLine from '~icons/lucide/arrow-down-to-line'
+import Cloud from '~icons/lucide/cloud'
+import Fingerprint from '~icons/lucide/fingerprint'
+import LogOut from '~icons/lucide/log-out'
+import { Button } from '../components/Button.js'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import { Tooltip } from '../components/Tooltip.js'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * The account screen. It names the user, lists their Tempo Accounts with each balance, oldest
+ * first, and offers sign-out. A lone account shows its balance large, without a list.
+ */
+export function Account(props: Account.Props): ReactNode {
+  const { accounts } = props
+  const Title = props.heading ?? 'h1'
+  const Subtitle = props.heading === 'h4' ? 'h5' : 'h2'
+
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        <span {...styles.avatar()} aria-hidden>
+          {(props.name || props.email).charAt(0).toUpperCase()}
+        </span>
+        <div {...styles.identity()}>
+          {/* 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}
+        </div>
+      </header>
+
+      {(() => {
+        if (!accounts)
+          return (
+            <ErrorMessage align="center">{props.accountError}</ErrorMessage>
+          )
+        if (!accounts.length)
+          return (
+            <p {...styles.hint()}>
+              You have no wallets yet. Sign in to an app to create one.
+            </p>
+          )
+        const only = accounts.length === 1 ? accounts[0] : undefined
+        // One wallet needs no list, so its balance leads the screen.
+        if (only)
+          return (
+            <section {...styles.single()} aria-label="Wallet">
+              <span {...styles.balance()} data-testid="balance">
+                {format(only.balance)}
+              </span>
+              <DepositLink entry={only} large />
+            </section>
+          )
+        return (
+          <section {...styles.accounts()}>
+            <Subtitle {...styles.label()}>Wallets</Subtitle>
+            <ul {...styles.list()} aria-label="Wallets">
+              {accounts.map((entry) => (
+                <li {...styles.row()} key={entry.address}>
+                  {entry.owner === 'webAuthn' ? (
+                    <Fingerprint {...styles.owner()} aria-hidden />
+                  ) : (
+                    <Cloud {...styles.owner()} aria-hidden />
+                  )}
+                  <span {...styles.kind()}>{kind(entry)}</span>
+                  <span {...styles.amount()} data-testid="balance">
+                    {format(entry.balance)}
+                  </span>
+                  <DepositLink entry={entry} />
+                </li>
+              ))}
+            </ul>
+          </section>
+        )
+      })()}
+
+      <Button
+        loading={props.signingOut}
+        onClick={props.onSignOut}
+        prefix={<LogOut {...styles.icon()} aria-hidden />}
+        variant="secondary"
+      >
+        Sign out
+      </Button>
+      <ErrorMessage align="center">{props.error}</ErrorMessage>
+      <p {...styles.status()} aria-live="polite" role="status">
+        {props.signingOut ? 'Signing out.' : undefined}
+      </p>
+    </div>
+  )
+}
+
+export declare namespace Account {
+  type Props = {
+    /** Why the accounts failed to load. It shows when `accounts` is `null`. */
+    accountError?: string | undefined
+    /** The user's Tempo Accounts in the `default` realm, oldest first, or `null` when they failed to load. */
+    accounts: readonly Entry[] | null
+    /** The signed-in user's email address. */
+    email: string
+    /** Why the sign-out 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
+    /** The user's name, which heads the screen when the user has one. */
+    name?: string | undefined
+    /** Signs the user out. */
+    onSignOut: () => void
+    /** Whether the sign-out is in progress, which holds the button. */
+    signingOut: boolean
+  }
+
+  /** One account, with its balance. */
+  type Entry = {
+    /** The account's address. */
+    address: `0x${string}`
+    /** The account's balance, 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'
+  }
+
+  /** 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
+  }
+}
+
+/** Links to the deposit page for one wallet, as an icon with a tooltip. */
+function DepositLink(props: DepositLink.Props): ReactNode {
+  const { address } = props.entry
+  return (
+    <Tooltip label="Deposit">
+      <Link
+        {...styles.deposit({ size: props.large ? 'large' : 'small' })}
+        // 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 ${address.slice(0, 6)}…${address.slice(-4)}`}
+        search={{ address }}
+        to="/deposit"
+      >
+        <ArrowDownToLine
+          {...(props.large ? styles.depositIcon() : styles.icon())}
+          aria-hidden
+        />
+      </Link>
+    </Tooltip>
+  )
+}
+
+declare namespace DepositLink {
+  type Props = {
+    /** The wallet the deposit goes to. */
+    entry: Account.Entry
+    /** Whether the icon matches the size of a lone wallet's balance. */
+    large?: boolean | undefined
+  }
+}
+
+/**
+ * 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: Account.Entry['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)
+}
+
+/** Names an account by its owner. A Privy wallet is `Cloud`, since it is held for the user rather than on a device. */
+function kind(entry: Account.Entry) {
+  return entry.owner === 'webAuthn' ? 'Passkey' : 'Cloud'
+}
+
+namespace styles {
+  export const accounts = style({ display: 'grid', gap: 2 })
+
+  export const amount = style({
+    fontVariantNumeric: 'tabular-nums',
+    marginLeft: 'auto',
+    typography: 'label.14',
+  })
+
+  export const avatar = style({
+    alignItems: 'center',
+    backgroundColor: 'foreground',
+    backgroundImage: 'sheen',
+    borderRadius: 'full',
+    color: 'background.surface',
+    display: 'flex',
+    flexShrink: 0,
+    height: 16,
+    justifyContent: 'center',
+    typography: 'heading.24',
+    width: 16,
+  })
+
+  export const balance = style({
+    fontVariantNumeric: 'tabular-nums',
+    letterSpacing: 'balance',
+    typography: 'heading.32',
+  })
+
+  export const column = style({
+    display: 'grid',
+    gap: 8,
+    maxWidth: 'sm',
+    width: 'full',
+  })
+
+  // Pseudo-elements make the touch target and the hover fill larger than the icon. The icon sits
+  // above the fill. In a row the fill stays smaller than the hit area, so a gap stays before the
+  // balance.
+  export const deposit = variants({
+    base: {
+      borderRadius: 'full',
+      color: 'gray.900',
+      display: 'flex',
+      flexShrink: 0,
+      outline: 'none',
+      position: 'relative',
+      '& > svg': { position: 'relative', zIndex: 1 },
+      '&::before': {
+        content: '""',
+        inset: 'bleed',
+        position: 'absolute',
+      },
+      '&::after': {
+        borderRadius: 'full',
+        content: '""',
+        position: 'absolute',
+      },
+      ':focus-visible': {
+        outline: '2px solid',
+        outlineColor: 'blue.700',
+        outlineOffset: '2px',
+      },
+      ':hover': { color: 'foreground' },
+      ':hover::after': { backgroundColor: 'grayAlpha.200' },
+    },
+    variants: {
+      size: {
+        large: { '&::after': { inset: 'bleed' } },
+        small: { '&::after': { inset: 'bleedSmall' } },
+      },
+    },
+  })
+
+  export const depositIcon = style({ height: 6, width: 6 })
+
+  export const email = style({ color: 'gray.900', typography: 'copy.16' })
+
+  export const header = style({
+    display: 'grid',
+    gap: 3,
+    justifyItems: 'center',
+    textAlign: 'center',
+  })
+
+  export const hint = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    textWrap: 'balance',
+    typography: 'copy.14',
+  })
+
+  export const icon = style({ height: 4, width: 4 })
+
+  export const identity = style({ display: 'grid', gap: 1, minWidth: 0 })
+
+  export const kind = style({
+    fontWeight: 'medium',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    typography: 'label.14',
+    whiteSpace: 'nowrap',
+  })
+
+  export const label = style({
+    color: 'gray.900',
+    paddingInline: 4,
+    typography: 'label.14',
+  })
+
+  // A gray group, as in Link's settings, whose rows need no dividers.
+  export const list = style({
+    backgroundColor: 'gray.100',
+    borderRadius: '2xl',
+    display: 'grid',
+    listStyle: 'none',
+    margin: 0,
+    overflow: 'hidden',
+    padding: 0,
+  })
+
+  export const name = style({
+    overflowWrap: 'anywhere',
+    typography: 'heading.24',
+  })
+
+  export const owner = style({
+    color: 'gray.900',
+    flexShrink: 0,
+    height: 4,
+    width: 4,
+  })
+
+  export const row = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 3,
+    justifyContent: 'space-between',
+    paddingBlock: 3,
+    paddingInline: 4,
+  })
+
+  // The balance on the left and its deposit link on the right, inset like the list's rows.
+  export const single = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 3,
+    justifyContent: 'space-between',
+    paddingInline: 4,
+  })
+
+  export const status = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.14',
+  })
+}

package/src/app/screens/Approval.tsx

@@ -0,0 +1,276 @@
+/**
+ * The approval screen for an app's authorization request, with the key that it requests, and the
+ * screen for a request that the approval page cannot show. The layout follows the
+ * approval screen of the WorkOS implementation.
+ * @module
+ */
+import type { ReactNode } from 'react'
+import BadgeCheck from '~icons/lucide/badge-check'
+import Globe from '~icons/lucide/globe'
+import type * as KeyAuthorization from '../../internal/KeyAuthorization.js'
+import { Button } from '../components/Button.js'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import { Grant } from '../components/Grant.js'
+import { Tooltip } from '../components/Tooltip.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * The approval screen. It names the app, shows the key that the app requests and any message that
+ * the key signs, and approves or denies the request. A key that
+ * approval cannot sign holds the approval, and the screen states why.
+ */
+export function Approval(props: Approval.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  const pending = props.approving || props.denying
+  const refusal = props.refusal ?? props.keyAuthorization?.refusal
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        {/* Apps have no logos, so every app shows a globe in their place. */}
+        <span {...styles.avatar()}>
+          <Globe {...styles.avatarIcon()} aria-hidden />
+        </span>
+        <Title {...styles.title()}>Authorize this app</Title>
+        <p {...styles.description()}>
+          Approve to let{' '}
+          <span {...styles.app()}>
+            <strong>{props.app}</strong>{' '}
+            <Tooltip label="Verified app">
+              <BadgeCheck
+                {...styles.badge()}
+                aria-label="Verified"
+                role="img"
+                tabIndex={0}
+              />
+            </Tooltip>
+          </span>{' '}
+          use your Tempo Account.
+        </p>
+      </header>
+
+      <div {...styles.stack()}>
+        {props.keyAuthorization ? (
+          <Grant
+            heading={props.heading === 'h4' ? 'h5' : 'h2'}
+            keyAuthorization={props.keyAuthorization}
+          />
+        ) : null}
+        {props.keyAuthorization?.challenge ? (
+          <div {...styles.challenge()} role="note">
+            <p {...styles.challengeTitle()}>
+              This sign-in also signs a message
+            </p>
+            <p {...styles.challengeText()}>
+              Approve only if you started this sign-in and expect this message.
+            </p>
+            <pre {...styles.message()}>{props.keyAuthorization.challenge}</pre>
+          </div>
+        ) : null}
+        <Button
+          disabled={props.denying || Boolean(refusal)}
+          loading={props.approving}
+          onClick={props.onApprove}
+        >
+          Approve
+        </Button>
+        <Button
+          disabled={props.approving}
+          loading={props.denying}
+          onClick={props.onDeny}
+          variant="tertiary"
+        >
+          Deny
+        </Button>
+        <p {...styles.note()}>
+          Signed in as <strong>{props.email}</strong>. Either choice returns you
+          to <strong>{props.destination}</strong>.
+        </p>
+        <p {...styles.status()} aria-live="polite" role="status">
+          {pending ? `Returning to ${props.destination}.` : undefined}
+        </p>
+      </div>
+      {/* A failed decision outranks the refusal, whose only action is the denial that failed. */}
+      <ErrorMessage>
+        {props.error ?? (refusal ? refusals[refusal] : undefined)}
+      </ErrorMessage>
+    </div>
+  )
+}
+
+export declare namespace Approval {
+  type Props = {
+    /** The app's display name. */
+    app: string
+    /** Whether the approval is in progress, which holds both buttons. */
+    approving: boolean
+    /** Whether the denial is in progress, which holds both buttons. */
+    denying: boolean
+    /** The host of the app's redirect URI, or its scheme for a native app. */
+    destination: string
+    /** The signed-in user's address. */
+    email: string
+    /** Why the decision 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
+    /** The key that the app requests, if any. */
+    keyAuthorization?: Key | undefined
+    /** Approves the request. */
+    onApprove: () => void
+    /** Denies the request, which returns the browser to the app with `access_denied`. */
+    onDeny: () => void
+    /**
+     * Why approval cannot sign the key, which holds the approval. Takes the place of the key's own
+     * `refusal`, such as after an approval that the API refused.
+     */
+    refusal?: Refusal | undefined
+  }
+
+  /** A key that the app requests, as the approval page shows it. */
+  type Key = KeyAuthorization.Description & {
+    /** The message that the key's witness binds, such as a sign-in challenge from the app. */
+    challenge?: string | undefined
+    /** Why approval cannot sign the key. Absent when it can. */
+    refusal?: Refusal | undefined
+  }
+
+  /**
+   * Why approval cannot sign a key: a passkey that the page cannot use owns the account, the user
+   * holds no account, or the user's accounts could not be read.
+   */
+  type Refusal = 'no_account' | 'passkey' | 'unavailable'
+}
+
+/** The screen for an authorization request that the approval page cannot show, with the reason. */
+export function InvalidRequest(props: InvalidRequest.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        <Title {...styles.title()}>This sign-in request is invalid</Title>
+        <p {...styles.description()}>
+          The app sent a request Tempo ID cannot complete. Return to the app and
+          try again.
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export declare namespace InvalidRequest {
+  type Props = {
+    /** 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
+  }
+}
+
+/** Why approval cannot sign a key, as the screen states it. */
+const refusals: Record<Approval.Refusal, string> = {
+  no_account:
+    'You have no Tempo Account for this app yet, so no account can approve the key. Deny the request, create an account in the app, and try again.',
+  passkey:
+    'This Tempo Account signs with a passkey that this page cannot use. Deny the request, and return to the app.',
+  unavailable:
+    'Tempo ID cannot read your Tempo Account right now. Reload the page in a minute, or deny the request.',
+}
+
+namespace styles {
+  // The app's name and badge wrap as one word, so a hyphenated name never splits.
+  export const app = style({ whiteSpace: 'nowrap' })
+
+  export const avatar = style({
+    alignItems: 'center',
+    backgroundColor: 'background.surface',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: 'full',
+    boxShadow: 'sm',
+    color: 'gray.900',
+    display: 'flex',
+    height: 14,
+    justifyContent: 'center',
+    marginBottom: 3,
+    width: 14,
+  })
+
+  export const avatarIcon = style({ height: 6, width: 6 })
+
+  export const badge = style({
+    display: 'inline',
+    height: 4,
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: 4,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const challenge = style({
+    backgroundColor: 'amber.100',
+    borderRadius: '2xl',
+    display: 'grid',
+    gap: 2,
+    padding: 4,
+  })
+
+  export const challengeText = style({
+    color: 'foreground',
+    typography: 'copy.14',
+  })
+
+  export const challengeTitle = style({
+    color: 'amber.900',
+    typography: 'label.14',
+  })
+
+  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,
+    justifyItems: 'center',
+    textAlign: 'center',
+  })
+
+  export const message = style({
+    margin: 0,
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+    whiteSpace: 'pre-wrap',
+  })
+
+  export const note = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.14',
+    '& strong': { color: 'foreground', fontWeight: 'medium' },
+  })
+
+  export const stack = style({ display: 'grid', gap: 4 })
+
+  export const status = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.14',
+  })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+}