@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/screens/Approval.tsx

@@ -0,0 +1,444 @@
+/** The approval screen, and the screen for an invalid request. @module */
+import {
+  Button,
+  Callout,
+  formatHex,
+  IconChip,
+  Inline,
+  Stack,
+  Tooltip,
+} from '@tempoxyz/ds'
+import {
+  AlertTriangle,
+  BadgeCheck,
+  Cloud,
+  Fingerprint,
+  Globe,
+} from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import type * as KeyAuthorization from '../../internal/KeyAuthorization.js'
+import { Grant } from '../components/Grant.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * The approval screen: the app, the account, the requested key, and any message to sign. Approve is
+ * disabled while the account loads, and if approval cannot sign the key.
+ */
+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
+  const chain = props.keyAuthorization?.chain
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.avatar()}>
+          {/* Only an app with an origin client ID has a logo, inlined. Every other app shows a globe. */}
+          {props.logo ? (
+            <img {...styles.logo()} alt="" src={props.logo} />
+          ) : (
+            <Globe />
+          )}
+        </IconChip>
+        <Title {...styles.title()}>Authorize this app</Title>
+        <p {...styles.description()}>
+          Approve to let{' '}
+          <span {...styles.app()}>
+            {/* An unverified name stays plain, so it reads as a claim and not as a fact. */}
+            {/* `bdi` isolates the name's direction, so it cannot reorder the host beside it. */}
+            {props.verified ? (
+              <strong>{props.app}</strong>
+            ) : (
+              <bdi>{props.app}</bdi>
+            )}
+            {/* A third-party app names itself, so only a registered app's name is verified. */}
+            {props.verified ? (
+              <>
+                {' '}
+                <Tooltip.Root>
+                  <Tooltip.Trigger
+                    delay={150}
+                    render={
+                      <BadgeCheck
+                        {...styles.badge()}
+                        aria-label="Verified"
+                        role="img"
+                        tabIndex={0}
+                      />
+                    }
+                  />
+                  <Tooltip.Popup>Verified app</Tooltip.Popup>
+                </Tooltip.Root>
+              </>
+            ) : null}
+          </span>
+          {/* An unverified name is the app's own claim, so the host that serves the app stays beside it. */}
+          {!props.verified && props.app !== props.destination
+            ? ` (${props.destination})`
+            : null}{' '}
+          use your Tempo Account.
+        </p>
+      </Stack>
+
+      <Stack gap="16">
+        {props.account ? (
+          // The row matches the account step's, so the user recognizes the account chosen there.
+          <Inline
+            {...styles.account()}
+            aria-label="Tempo Account"
+            gap="12"
+            role="group"
+          >
+            <IconChip {...styles.chip()} aria-hidden size="40">
+              {props.account.owner === 'webAuthn' ? <Fingerprint /> : <Cloud />}
+            </IconChip>
+            <Stack {...styles.text()} gap="4" render={<span />}>
+              <span {...styles.kind()}>
+                {props.account.owner === 'webAuthn' ? 'Passkey' : 'Cloud'}
+              </span>
+              <span {...styles.address()}>
+                {formatHex(props.account.address)}
+              </span>
+            </Stack>
+          </Inline>
+        ) : null}
+        {props.keyAuthorization ? (
+          <Grant
+            // Mainnet is where keys act by default, so only another chain shows.
+            chain={
+              chain && chain.id !== mainnetId ? chainLabel(chain) : undefined
+            }
+            heading={props.heading === 'h4' ? 'h5' : 'h2'}
+            keyAuthorization={props.keyAuthorization}
+          />
+        ) : null}
+        {props.keyAuthorization?.challenge ? (
+          // A note, not an alert, since the message is part of the request and interrupts nothing.
+          <Callout intent="warning" role="note" size="large">
+            <Callout.Icon />
+            <Callout.Content>
+              <Stack gap="8">
+                <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>
+              </Stack>
+            </Callout.Content>
+          </Callout>
+        ) : null}
+        <Button
+          disabled={props.checking || props.denying || Boolean(refusal)}
+          loading={props.approving || props.checking}
+          onClick={props.onApprove}
+        >
+          Approve
+        </Button>
+        <Button
+          disabled={props.approving}
+          loading={props.denying}
+          onClick={props.onDeny}
+          variant="text"
+        >
+          Deny
+        </Button>
+        <p {...styles.note()}>
+          Signed in as <strong>{props.email}</strong>.
+        </p>
+        <p {...styles.status()} aria-live="polite" role="status">
+          {(() => {
+            if (pending) return `Returning to ${props.destination}.`
+            if (props.checking) return 'Checking your account…'
+            return undefined
+          })()}
+        </p>
+      </Stack>
+      {/* A failed decision outranks the refusal, whose only action is the denial that failed. */}
+      {(() => {
+        const error = props.error ?? (refusal ? refusals[refusal] : undefined)
+        if (!error) return null
+        return (
+          <Callout intent="negative">
+            <Callout.Icon />
+            <Callout.Content>{error}</Callout.Content>
+          </Callout>
+        )
+      })()}
+    </Stack>
+  )
+}
+
+export declare namespace Approval {
+  type Props = {
+    /** The account that the approval applies to. Absent if the user holds one at most. */
+    account?: Account | undefined
+    /** The app's display name. */
+    app: string
+    /** Whether the approval is in progress, which holds both buttons. */
+    approving: boolean
+    /** Whether the account that approval signs for loads, which holds Approve with its spinner. */
+    checking?: boolean | undefined
+    /** Whether the denial is in progress, which holds both buttons. */
+    denying: boolean
+    /** The host of the app's redirect URI, or the scheme of a native app. */
+    destination: string
+    /** The signed-in user's address. */
+    email: string
+    /** Why the decision failed. */
+    error?: string | undefined
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Absent without a key. */
+    keyAuthorization?: Key | undefined
+    /** The app's logo as a `data:` URL. Absent, a globe shows. */
+    logo?: string | undefined
+    /** Approves the request. */
+    onApprove: () => void
+    /** Denies the request, which returns `access_denied` to the app. */
+    onDeny: () => void
+    /** Why approval cannot sign the key. Replaces the key's own `refusal`. */
+    refusal?: Refusal | undefined
+    /** Whether the app is registered, which marks its name as verified. */
+    verified: boolean
+  }
+
+  /** The Tempo Account that the approval applies to. */
+  type Account = {
+    /** The account's address. */
+    address: `0x${string}`
+    /** The owner key's holder: `privy`, `secp256k1` in development, or a passkey (`webAuthn`). */
+    owner: 'privy' | 'secp256k1' | 'webAuthn'
+  }
+
+  /** A requested key, as the approval page shows it. */
+  type Key = KeyAuthorization.Description & {
+    /** The key's chain. Absent on canvas samples without one. */
+    chain?:
+      | {
+          /** The chain's ID. */
+          id: number
+          /** The name that `GET /v1/chains` lists, if any. */
+          name?: string | undefined
+        }
+      | undefined
+    /** The message that the key's witness binds, such as a sign-in challenge. */
+    challenge?: string | undefined
+    /** Absent if approval can sign the key. */
+    refusal?: Refusal | undefined
+  }
+
+  /**
+   * Why approval cannot sign a key: a `foreign_account`, an owner `passkey` that the page cannot
+   * use, `no_account`, or `unavailable` accounts.
+   */
+  type Refusal =
+    | 'foreign_account'
+    | 'no_account'
+    | 'passkey'
+    | 'unavailable'
+    | 'upgrade'
+}
+
+/** The screen for a request that Tempo ID cannot continue. */
+export function InvalidRequest(props: InvalidRequest.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  const copy = invalid[props.reason ?? 'request']
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.warning()} aria-hidden>
+          <AlertTriangle />
+        </IconChip>
+        <Title {...styles.title()}>{copy.title}</Title>
+        <p {...styles.description()}>{copy.description}</p>
+      </Stack>
+    </Stack>
+  )
+}
+
+export declare namespace InvalidRequest {
+  type Props = {
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Defaults to `request`. */
+    reason?: Reason | undefined
+  }
+
+  /**
+   * Why Tempo ID cannot continue: an unknown or disabled app (`client`), an unregistered
+   * `redirect_uri` (`redirect`), or another fault (`request`).
+   */
+  type Reason = 'client' | 'redirect' | 'request'
+}
+
+/** The copy of the screen for one reason. */
+type Copy = {
+  /** What failed, and how to recover. */
+  description: string
+  /** The screen's title. */
+  title: string
+}
+
+/** The copy for each reason. */
+const invalid: Record<InvalidRequest.Reason, Copy> = {
+  client: {
+    description:
+      'The app that sent you here is not registered with Tempo ID, or it is turned off. Return to the app, and contact its developer if the problem continues.',
+    title: 'This app is not recognized',
+  },
+  redirect: {
+    description:
+      'The app asked to return you to an address that it has not registered, so Tempo ID stopped the sign-in. Return to the app, and contact its developer if the problem continues.',
+    title: 'This app’s return address is not registered',
+  },
+  request: {
+    description:
+      'The app sent a request Tempo ID cannot complete. Return to the app and try again.',
+    title: 'This sign-in request is invalid',
+  },
+}
+
+/** The screen's text for each refusal. */
+const refusals: Record<Approval.Refusal, string> = {
+  foreign_account:
+    "The app requests a key for a Tempo Account that you do not hold. Deny the request, and sign in to the app again as that account's owner.",
+  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.',
+  upgrade:
+    'This Tempo Account must upgrade to a configurable wallet on this chain before it approves keys. Deny the request, upgrade the wallet on your account page, and try again.',
+}
+
+/** Tempo mainnet's chain ID, where a key acts by default. */
+const mainnetId = 4217
+
+/** Names a chain: `Mainnet`, `Testnet`, a listed name, or its chain ID. */
+function chainLabel(chain: NonNullable<Approval.Key['chain']>) {
+  if (chain.name === 'mainnet') return 'Mainnet'
+  if (chain.name === 'testnet') return 'Testnet'
+  return chain.name ?? `Chain ${chain.id}`
+}
+
+namespace styles {
+  export const account = style({
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: '16',
+    paddingBlock: '12',
+    paddingInline: '16',
+  })
+
+  export const address = style({
+    color: 'gray.900',
+    typography: 'copy.13.mono',
+  })
+
+  // The app's name and badge wrap as one word, so a hyphenated name never splits.
+  export const app = style({ whiteSpace: 'nowrap' })
+
+  // IconChip has no 64 size, so the header chip sets the size of the account screen's avatar.
+  export const avatar = style({
+    borderRadius: 'full',
+    fontSize: '24',
+    height: '64',
+    marginBottom: '12',
+    width: '64',
+  })
+
+  export const badge = style({
+    display: 'inline',
+    height: '16',
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: '16',
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2',
+    },
+  })
+
+  export const challengeText = style({
+    color: 'foreground',
+    typography: 'copy.14',
+  })
+
+  export const challengeTitle = style({ typography: 'label.14.strong' })
+
+  export const chip = style({ borderRadius: 'full' })
+
+  export const column = style({
+    maxWidth: '384',
+    width: '100% !custom',
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', typography: 'copy.16.strong' },
+  })
+
+  export const header = style({ textAlign: 'center' })
+
+  export const kind = style({ typography: 'label.14' })
+
+  // The logo fills the chip, and takes its round shape.
+  export const logo = style({
+    borderRadius: 'full',
+    height: '64',
+    objectFit: 'cover',
+    width: '64',
+  })
+
+  export const message = style({
+    color: 'foreground',
+    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', typography: 'copy.14.strong' },
+  })
+
+  // Screen readers announce the progress, which the button's spinner shows visually.
+  export const status = style({
+    clipPath: 'inset(50%)',
+    height: '1',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1',
+  })
+
+  export const text = style({ flex: 1 })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+
+  // An invalid request's chip takes the warning tint.
+  export const warning = style({
+    backgroundColor: 'amber.100',
+    borderRadius: 'full',
+    color: 'amber.900',
+    fontSize: '24',
+    height: '64',
+    marginBottom: '12',
+    width: '64',
+  })
+}

package/src/app/screens/ChooseAccount.tsx

@@ -0,0 +1,206 @@
+/** The account step: a user with several Tempo Accounts in an app's realms chooses one. @module */
+import {
+  Amount,
+  Callout,
+  formatHex,
+  IconChip,
+  Rows,
+  Spinner,
+  Stack,
+} from '@tempoxyz/ds'
+import { Cloud, Fingerprint, Wallet } from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import { style } from '../zyzz.config.js'
+
+/** The account step. Each row shows an account's owner, address, balance, and realm. */
+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 (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.avatar()} aria-hidden>
+          <Wallet />
+        </IconChip>
+        <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 of Tempo ID.
+        </p>
+      </Stack>
+
+      {/* Each row is a button inside its list item, so the list keeps its items and the rows their role. */}
+      <Rows
+        {...styles.accounts()}
+        aria-label="Accounts"
+        dividers="none"
+        role="list"
+      >
+        {props.accounts.map((account) => (
+          <div key={account.address} role="listitem">
+            <Rows.Row
+              // The spinner takes the chevron's place while the row's choice runs.
+              action={
+                props.selecting === account.address ? 'none' : 'navigation'
+              }
+              aria-busy={props.selecting === account.address || undefined}
+              // The chosen row stays undimmed while its choice runs, and ignores a second press.
+              disabled={pending && props.selecting !== account.address}
+              onClick={() => {
+                if (!pending) props.onChoose(account.address)
+              }}
+            >
+              <IconChip {...styles.chip()} aria-hidden size="40">
+                {account.owner === 'webAuthn' ? <Fingerprint /> : <Cloud />}
+              </IconChip>
+              <Rows.Info>
+                <Rows.Title>
+                  {realms.size > 1 && account.realm
+                    ? `${account.realm} · `
+                    : null}
+                  {account.owner === 'webAuthn' ? 'Passkey' : 'Cloud'}
+                </Rows.Title>
+                {/* The address tells apart two accounts with the same owner kind. */}
+                <Rows.Description {...styles.address()}>
+                  {formatHex(account.address)}
+                </Rows.Description>
+              </Rows.Info>
+              {account.balance ? (
+                <Amount
+                  {...styles.balance()}
+                  currency={account.balance.currency}
+                  data-testid="balance"
+                  value={account.balance.amount}
+                />
+              ) : (
+                <span {...styles.unavailable()} data-testid="balance">
+                  Balance unavailable
+                </span>
+              )}
+              {props.selecting === account.address ? (
+                <Spinner aria-hidden size="large" />
+              ) : null}
+            </Rows.Row>
+          </div>
+        ))}
+      </Rows>
+
+      {props.error ? (
+        <Callout intent="negative">
+          <Callout.Icon />
+          <Callout.Content>{props.error}</Callout.Content>
+        </Callout>
+      ) : null}
+      <p {...styles.status()} aria-live="polite" role="status">
+        {pending ? `Continuing to ${props.app}.` : undefined}
+      </p>
+    </Stack>
+  )
+}
+
+export declare namespace ChooseAccount {
+  type Props = {
+    /** Oldest first. */
+    accounts: readonly Account[]
+    /** The app's display name. */
+    app: string
+    /** Why the selection failed. */
+    error?: string | undefined
+    /** The title's level: `h1` by default, or `h4` on the flows canvas. */
+    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's row. */
+  type Account = {
+    /** The account's address. */
+    address: `0x${string}`
+    /** The balance on the key's chain, or `null` if it failed to load. */
+    balance: Balance | null
+    /** The owner key's holder: `privy`, `secp256k1` in development, or a passkey (`webAuthn`). */
+    owner: 'privy' | 'secp256k1' | 'webAuthn'
+    /** The realm's display name, such as `Tempo Cash`, or `null` for the `default` realm. */
+    realm: string | null
+  }
+
+  /** 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
+  }
+}
+
+namespace styles {
+  // Each account is its own gray card. The chip sits as far from the card's start as from its top and
+  // bottom, and the chevron keeps the row's end padding.
+  export const accounts = style({
+    display: 'grid',
+    gap: '8',
+    '& > [role="listitem"]': {
+      backgroundColor: 'gray.100',
+      borderRadius: '16',
+      overflow: 'hidden',
+    },
+    '& > [role="listitem"] > *': {
+      paddingInlineEnd: '12',
+      paddingInlineStart: '8',
+    },
+  })
+
+  export const address = style({ typography: 'copy.13.mono' })
+
+  // IconChip has no 64 size, so the header chip sets the size of the account screen's avatar.
+  export const avatar = style({
+    borderRadius: 'full',
+    fontSize: '24',
+    height: '64',
+    marginBottom: '12',
+    width: '64',
+  })
+
+  export const balance = style({ flexShrink: 0, typography: 'label.14' })
+
+  export const chip = style({ borderRadius: 'full' })
+
+  export const column = style({ maxWidth: '384', width: '100% !custom' })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', typography: 'copy.16.strong' },
+  })
+
+  export const header = style({ textAlign: 'center' })
+
+  // Screen readers announce the progress, which the button's spinner shows visually.
+  export const status = style({
+    clipPath: 'inset(50%)',
+    height: '1',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1',
+  })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+
+  // A failed read is muted, so it reads as a missing value and not as an amount. Its label wraps on
+  // a narrow screen.
+  export const unavailable = style({
+    color: 'gray.900',
+    textAlign: 'right',
+    typography: 'label.14',
+  })
+}