@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/screens/SignIn.tsx

@@ -0,0 +1,372 @@
+/** The sign-in screen: an email and its code, or a passkey. @module */
+import {
+  Button,
+  Callout,
+  IconChip,
+  Input,
+  Separator,
+  Stack,
+  Tooltip,
+} from '@tempoxyz/ds'
+import { BadgeCheck, Fingerprint, Mail } from '@tempoxyz/ds/icons'
+import { type FormEvent, type ReactNode, useId } from 'react'
+import { CodeInput } from '../components/CodeInput.js'
+import { Grant } from '../components/Grant.js'
+import type { Approval } from './Approval.js'
+import { style } from '../zyzz.config.js'
+
+/** The sign-in screen. Without `email` it offers each method. With `email` it asks for the code. */
+export function SignIn(props: SignIn.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  const { email } = props
+  // Several screens can share a document, such as on the flows canvas, so each derives its own IDs.
+  const id = useId()
+
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.avatar()} aria-hidden>
+          {email ? <Mail /> : <TempoMark />}
+        </IconChip>
+        <Title {...styles.title()}>
+          {(() => {
+            if (email) return 'Check your email'
+            if (props.linking) return 'Verify your email'
+            return 'Welcome to Tempo'
+          })()}
+        </Title>
+        {(() => {
+          if (email)
+            return (
+              <p {...styles.description()}>
+                Enter the 6-digit code sent to <strong>{email}</strong>.
+                {props.linking
+                  ? ' Your passkey then confirms the sign-in.'
+                  : null}
+              </p>
+            )
+          if (props.linking)
+            return (
+              <p {...styles.description()}>
+                Enter your email to finish signing in with your passkey.
+              </p>
+            )
+          if (!props.request) {
+            if (props.device)
+              return (
+                <p {...styles.description()}>Sign in to approve a device.</p>
+              )
+            return (
+              <p {...styles.description()}>Log in or sign up to get started.</p>
+            )
+          }
+          // A third-party app names itself, so only a registered app's name is verified.
+          const { host } = props.request
+          const app = (
+            <>
+              <span {...styles.app()}>
+                {/* An unverified name stays plain, so it reads as a claim and not as a fact. */}
+                {props.request.verified ? (
+                  <strong>{props.request.app}</strong>
+                ) : (
+                  // `bdi` isolates the name's direction, so it cannot reorder the host beside it.
+                  <bdi>{props.request.app}</bdi>
+                )}
+                {props.request.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. */}
+              {host && host !== props.request.app ? ` (${host})` : null}
+            </>
+          )
+          // A request without a key names the app only, since the sign-in grants it nothing yet.
+          if (!props.request.key)
+            return (
+              <p {...styles.description()}>Sign in to continue to {app}.</p>
+            )
+          return (
+            <p {...styles.description()}>
+              Continue to let {app} use your Tempo Account.
+            </p>
+          )
+        })()}
+      </Stack>
+      {/* The code step only proves the email, so the key shows once, before it. Signing in grants it. */}
+      {props.request?.key && !email && !props.linking ? (
+        <Grant
+          heading={props.heading === 'h4' ? 'h5' : 'h2'}
+          keyAuthorization={props.request.key}
+        />
+      ) : null}
+
+      {email ? (
+        // A form submitted before the page hydrates posts, so the address and code stay out of the URL.
+        <Stack
+          gap="24"
+          render={<form method="post" onSubmit={props.onSubmitCode} />}
+        >
+          <CodeInput
+            aria-describedby={`${id}-error`}
+            aria-label="Code"
+            // The step replaces the email form, so focus moves to the field it asks for.
+            autoFocus={props.autoFocus}
+            // A complete code submits itself.
+            autoSubmit
+            characters="digits"
+            invalid={props.invalid}
+            length={6}
+            name="code"
+            readOnly={props.verifying || props.verified}
+            required
+            size="large"
+            success={props.verified}
+          />
+          {props.error ? (
+            <Callout id={`${id}-error`} intent="negative">
+              <Callout.Icon />
+              <Callout.Content>{props.error}</Callout.Content>
+            </Callout>
+          ) : null}
+          <Stack align="center" gap="4">
+            <Button
+              disabled={
+                props.resend !== 'idle' || props.verifying || props.verified
+              }
+              onClick={props.onResend}
+              variant="text"
+            >
+              {(() => {
+                if (props.resend === 'pending') return 'Sending…'
+                if (props.resend === 'sent') return 'Code sent'
+                return 'Resend code'
+              })()}
+            </Button>
+            <Button
+              // The address stays until the code's result returns, so the result applies to it.
+              disabled={props.verifying || props.verified}
+              onClick={props.onChangeEmail}
+              variant="text"
+            >
+              Use a different email
+            </Button>
+            <p {...styles.status()} aria-live="polite" role="status">
+              {(() => {
+                if (props.resend === 'pending') return 'Sending a new code.'
+                if (props.resend === 'sent')
+                  return `A new code was sent to ${email}.`
+                return undefined
+              })()}
+            </p>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack gap="12">
+          <Stack
+            gap="12"
+            render={<form method="post" onSubmit={props.onSubmitEmail} />}
+          >
+            <Input.Group invalid={props.invalid} size="medium">
+              <Input.Control
+                aria-describedby={`${id}-error`}
+                aria-label="Email"
+                autoComplete="email"
+                // 1Password's inline menu takes focus from the field when it is clicked.
+                data-1p-ignore
+                id={`${id}-email`}
+                name="email"
+                placeholder="Email address"
+                required
+                type="email"
+              />
+            </Input.Group>
+            {props.error ? (
+              <Callout id={`${id}-error`} intent="negative">
+                <Callout.Icon />
+                <Callout.Content>{props.error}</Callout.Content>
+              </Callout>
+            ) : null}
+            <Button
+              size="medium"
+              // One sign-in runs at a time, since each one sets the session.
+              disabled={props.passkeyPending}
+              loading={props.sending}
+              type="submit"
+            >
+              Continue with email
+            </Button>
+          </Stack>
+          {/* A passkey that waits for its email links only through the code, so the other methods hide. */}
+          {props.onPasskey && !props.linking ? (
+            <Separator {...styles.rule()} />
+          ) : null}
+          {props.onPasskey && !props.linking ? (
+            <Button
+              size="medium"
+              disabled={props.sending}
+              loading={props.passkeyPending}
+              onClick={props.onPasskey}
+              variant="secondary"
+            >
+              <Fingerprint />
+              Continue with passkey
+            </Button>
+          ) : null}
+          {props.linking && props.onStartOver ? (
+            <Button
+              {...styles.startOver()}
+              onClick={props.onStartOver}
+              variant="text"
+            >
+              Start over
+            </Button>
+          ) : null}
+        </Stack>
+      )}
+    </Stack>
+  )
+}
+
+export declare namespace SignIn {
+  type Props = {
+    /** Whether the code field takes focus on mount. */
+    autoFocus?: boolean | undefined
+    /** Whether the sign-in returns to the device page. */
+    device?: boolean | undefined
+    /** The address that the code went to. Present at the code step. */
+    email?: string | undefined
+    /** Why the current step failed. */
+    error?: string | undefined
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Whether the current step's request failed, which marks its field invalid. */
+    invalid: boolean
+    /** Whether a passkey waits for the code that links it. */
+    linking?: boolean | undefined
+    /** Returns to the email step. */
+    onChangeEmail: () => void
+    /** Signs in with a passkey. Absent, passkey sign-in is off. */
+    onPasskey?: (() => void) | undefined
+    /** Sends a new code to `email`. */
+    onResend: () => void
+    /** Drops the waiting passkey and returns to the first step. */
+    onStartOver?: (() => void) | undefined
+    /** Submits the code form. */
+    onSubmitCode: (event: FormEvent<HTMLFormElement>) => void
+    /** Submits the email form, which sends a code. */
+    onSubmitEmail: (event: FormEvent<HTMLFormElement>) => void
+    /** Whether a passkey sign-in runs, which holds its button and the email form. */
+    passkeyPending?: boolean | undefined
+    /** The app's request that the sign-in continues. Absent without one. */
+    request?:
+      | {
+          /** The app's display name. */
+          app: string
+          /** The host of a third-party app's client ID, or `null` for a registered app. */
+          host?: string | null | undefined
+          /** The requested key, or `null` if none or if the approval page shows it. */
+          key: Approval.Key | null
+          /** Whether the app is registered, which marks its name as verified. */
+          verified: boolean
+        }
+      | undefined
+    /** The resend's progress. The resend button is disabled unless `idle`. */
+    resend: 'idle' | 'pending' | 'sent'
+    /** Whether the first code is being sent. */
+    sending: boolean
+    /** Whether the code was accepted, which tints the field green. */
+    verified?: boolean | undefined
+    /** Whether the code is being verified, which holds the field. */
+    verifying: boolean
+  }
+}
+
+/** Tempo's mark in `currentColor`. */
+function TempoMark(): ReactNode {
+  return (
+    // The slant moves the glyph's weight up and left of its box, so the view box centers its area.
+    <svg fill="none" height="1em" viewBox="15.4 14.5 33 33" width="1em">
+      <path
+        d="M29.689 47H22.3877L29.1548 26.12H20.5L22.3877 20H46.5L44.6123 26.12H36.4205L29.689 47Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+namespace styles {
+  // 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 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' })
+
+  // The rule between the emailed code and the other sign-in methods.
+  export const rule = style({ marginBlock: '4' })
+
+  export const startOver = style({ alignSelf: 'center' })
+
+  // Screen readers announce the resend's progress, which the button label 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',
+  })
+}

package/src/app/screens/WalletUpgrade.tsx

@@ -0,0 +1,121 @@
+/**
+ * The upgrade screen: after a sign-in, or before an approval, the user's passkey upgrades their
+ * wallet to a configurable wallet, which keeps its address. @module
+ */
+import { Button, Callout, IconChip, Stack } from '@tempoxyz/ds'
+import { ArrowUp } from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import { style } from '../zyzz.config.js'
+
+/** The upgrade screen. Continue signs the upgrade with the passkey, and Not now skips it. */
+export function WalletUpgrade(props: WalletUpgrade.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  return (
+    <Stack {...styles.column()} gap="32">
+      <Stack {...styles.header()} align="center" gap="8" render={<header />}>
+        <IconChip {...styles.avatar()} aria-hidden>
+          <ArrowUp />
+        </IconChip>
+        <Title {...styles.title()}>Upgrade your wallet</Title>
+        <p {...styles.description()}>
+          Your wallet needs to be upgraded to continue.
+          {props.onSignIn
+            ? ' The upgrade needs a sign-in within the last 10 minutes, so sign in again first.'
+            : null}
+        </p>
+      </Stack>
+      <Stack gap="12">
+        <Button
+          disabled={props.skipping}
+          loading={props.upgrading || (props.preparing && !props.onSignIn)}
+          onClick={props.onSignIn ?? props.onContinue}
+        >
+          {props.onSignIn ? 'Sign in again' : 'Continue'}
+        </Button>
+        <Button
+          disabled={props.upgrading}
+          loading={props.skipping}
+          onClick={props.onSkip}
+          variant="text"
+        >
+          Not now
+        </Button>
+        <p {...styles.status()} aria-live="polite" role="status">
+          {props.upgrading ? 'Upgrading your wallet.' : undefined}
+        </p>
+      </Stack>
+      {props.error ? (
+        <Callout intent="negative">
+          <Callout.Icon />
+          <Callout.Content>{props.error}</Callout.Content>
+        </Callout>
+      ) : null}
+    </Stack>
+  )
+}
+
+export declare namespace WalletUpgrade {
+  type Props = {
+    /** Why the upgrade failed. */
+    error?: string | undefined
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Signs the upgrade with the passkey. */
+    onContinue: () => void
+    /**
+     * Signs the user out, so the page sends them to sign-in, whose fresh session can upgrade. Present
+     * for a session that signed in more than 10 minutes before, in place of Continue.
+     */
+    onSignIn?: (() => void) | undefined
+    /** Continues without the upgrade. */
+    onSkip: () => void
+    /**
+     * Whether the page prepares the passkey step, which holds Continue, since a click before then
+     * spends the browser's user activation on a request.
+     */
+    preparing?: boolean | undefined
+    /** Whether the page continues without the upgrade, which holds both buttons. */
+    skipping?: boolean | undefined
+    /** Whether the upgrade or the sign-out runs, which holds both buttons. */
+    upgrading: boolean
+  }
+}
+
+namespace styles {
+  // 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 column = style({
+    maxWidth: '384',
+    width: '100% !custom',
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+  })
+
+  export const header = style({ textAlign: 'center' })
+
+  // Screen readers announce the upgrade's progress, which the button 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',
+  })
+}

package/src/app/screens/chains/base.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 12.5493C8 10.9893 8 10.2107 8.29333 9.61333C8.576 9.04 9.04 8.57333 9.616 8.29333C10.2133 8 10.992 8 12.5493 8H51.4507C53.0107 8 53.7867 8 54.3867 8.29333C54.96 8.57333 55.424 9.04 55.704 9.61333C56 10.2133 56 10.992 56 12.5493V51.4507C56 53.0107 56 53.7867 55.7067 54.3867C55.424 54.96 54.96 55.424 54.3867 55.704C53.7867 56 53.008 56 51.4507 56H12.5493C10.9893 56 10.2133 56 9.61333 55.7067C9.03998 55.4249 8.57656 54.9606 8.296 54.3867C8 53.7867 8 53.008 8 51.4507V12.5493Z" fill="#0000FF" />
+</svg>

package/src/app/screens/chains/ethereum.svg

@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="#627EEA" />
+  <g transform="translate(18 8)">
+    <path d="M14.996 0V17.74L29.99 24.44L14.996 0Z" fill="white" fill-opacity="0.602" />
+    <path d="M14.996 0L0 24.44L14.996 17.74V0Z" fill="white" />
+    <path d="M14.996 35.936V47.99L30 27.232L14.996 35.936Z" fill="white" fill-opacity="0.602" />
+    <path d="M14.996 47.99V35.934L0 27.232L14.996 47.99Z" fill="white" />
+    <path d="M14.996 33.146L29.99 24.44L14.996 17.744V33.146Z" fill="white" fill-opacity="0.2" />
+    <path d="M0 24.44L14.996 33.146V17.744L0 24.44Z" fill="white" fill-opacity="0.602" />
+  </g>
+</svg>

package/src/app/screens/chains/solana.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="black" />
+  <path d="M46.964 22.4753C46.7023 22.7154 46.3609 22.8511 46.005 22.8563H12.3524C11.1577 22.8563 10.5556 21.497 11.3817 20.7L16.9072 15.3927C17.1641 15.1449 17.5064 15.0044 17.8639 15H51.6496C52.8559 15 53.4463 16.371 52.6063 17.1703L46.964 22.4753ZM46.964 48.6328C46.7026 48.8718 46.3599 49.003 46.005 48.9999H12.3524C11.1577 48.9999 10.5556 47.6522 11.3817 46.8552L16.9072 41.5363C17.1662 41.2936 17.5083 41.1582 17.8639 41.1576H51.6496C52.8559 41.1576 53.4463 42.5169 52.6063 43.3139L46.964 48.6328ZM46.964 28.4517C46.7023 28.2136 46.3595 28.0832 46.005 28.0869H12.3524C11.1577 28.0869 10.5556 29.4346 11.3817 30.2293L16.9072 35.5505C17.1687 35.7893 17.5092 35.9241 17.8639 35.9293H51.6496C52.8559 35.9293 53.4463 34.57 52.6063 33.7729L46.964 28.4517Z" fill="white" />
+</svg>

package/src/app/screens/chains/tempo.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="black" />
+  <path d="M29.689 47H22.3877L29.1548 26.12H20.5L22.3877 20H46.5L44.6123 26.12H36.4205L29.689 47Z" fill="white" />
+</svg>