@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/routes/index.tsx

@@ -0,0 +1,511 @@
+/**
+ * The account page: Tempo Accounts and balances, the faucet, passkeys, and sign-out. On a chain
+ * with configurable accounts, it also adds owners and upgrades a passkey's account.
+ * @module
+ */
+import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { Toast } from '@tempoxyz/ds'
+import { DetailedError, parseResponse } from 'hono/client'
+import { Authentication, Registration } from 'webauthx/client'
+import type * as Chain from '../../internal/Chain.js'
+import * as Client from '../lib/Client.js'
+import * as Loader from '../lib/Loader.js'
+import * as Upgrade from '../lib/Upgrade.js'
+import { Account } from '../screens/Account.js'
+import { style } from '../zyzz.config.js'
+
+/** Wraps a failure of the browser's passkey ceremony. */
+class CeremonyError extends Error {
+  override name = 'Page.CeremonyError'
+}
+
+export const Route = createFileRoute('/')({
+  component: () => <Page {...Route.useLoaderData()} />,
+  /**
+   * Redirects a visitor without a session to sign-in. Otherwise returns the user and the `default`
+   * realm's accounts, after creating the first if none exists, or `accounts: null`.
+   */
+  loader: async (match): Promise<Page.Props> => {
+    const client = Client.create()
+    const requested = match.deps.chain ?? 'mainnet'
+    // One read returns the user, the accounts, and the passkeys, and refuses a visitor without a
+    // session before it spends a limit.
+    const read = (chain: Chain.Chain) =>
+      parseResponse(client.v1.account.$get({ query: { chain } })).catch(
+        (error: unknown) => ({ error }),
+      )
+    const first = await read(requested)
+    // A name that no chain has, such as a stale link's, reads Tempo mainnet, as a page without
+    // `chain` does. The read sends no other field that the API refuses with `invalid_field`.
+    const unknown =
+      requested !== 'mainnet' &&
+      'error' in first &&
+      Client.reason(first.error) === 'invalid_field'
+    const chain = unknown ? 'mainnet' : requested
+    const account = unknown ? await read(chain) : first
+    // The sign-in offers the wallet upgrade on this page's chain, then returns here.
+    const signIn = match.deps.chain ? `/login?chain=${chain}` : '/login'
+    if ('error' in account) {
+      if (Client.reason(account.error) === 'session_required')
+        Loader.redirect({ href: signIn })
+      // A refused or failed read returns no user, so the session's user fills the page. The read of
+      // the sign-in methods calls no Privy app, so a user can add a passkey during a Privy outage.
+      const [session, methods] = await Promise.all([
+        parseResponse(client.v1.auth.session.$get()),
+        parseResponse(client.v1.auth.methods.$get({ query: {} })).catch(() => ({
+          passkeys: false,
+        })),
+      ])
+      if (!session.user) Loader.redirect({ href: signIn })
+      return {
+        accountError: failure(account.error),
+        accounts: null,
+        configurable: null,
+        email: session.user.email,
+        faucet: null,
+        name: session.user.name,
+        passkeys: methods.passkeys,
+      }
+    }
+
+    const user = {
+      email: account.email,
+      name: account.name,
+      passkeys: account.passkeys,
+    }
+    // A user without a wallet, such as one whose creation at sign-in failed or a spent limit
+    // skipped, receives one here, so a signed-in user always holds one where the realm creates
+    // wallets. The creation returns the accounts with their balances, and a realm that creates no
+    // wallets returns the empty list.
+    const listed =
+      account.tempo.length > 0
+        ? account
+        : await parseResponse(
+            client.v1.account.$post({ json: { chain } }),
+          ).catch((error: unknown) => ({ error }))
+    if ('error' in listed)
+      return {
+        ...user,
+        accountError: failure(listed.error),
+        accounts: null,
+        configurable: null,
+        faucet: null,
+      }
+
+    // `GET /i/chains` states whether the chain's accounts are configurable and whether its faucet
+    // funds them. A failed read of it offers no faucet, and no owner change.
+    const listing = await (async () => {
+      const { chains } = await parseResponse(client.i.chains.$get()).catch(
+        () => ({ chains: [] }),
+      )
+      const found = chains.find((entry) => entry.name === chain)
+      return {
+        configurable: found?.configurable ?? false,
+        faucet: found?.faucet ?? false,
+      }
+    })()
+
+    // On a chain whose accounts are configurable, a wallet.tempo passkey of the user's email that has
+    // not linked is the user's wallet too, whose upgrade links it. A failed read lists none.
+    const unlinked = listing.configurable
+      ? (
+          await parseResponse(client.i.account.passkeys.$get()).catch(() => ({
+            passkeys: [],
+          }))
+        ).passkeys
+      : []
+
+    // The key that acts as the account names its kind, and the guard only narrows the read.
+    return {
+      ...user,
+      accountError: null,
+      accounts: [
+        ...listed.tempo.flatMap((entry) => {
+          const owner =
+            entry.config.owners.find(
+              (candidate) =>
+                candidate.owner.toLowerCase() === entry.address.toLowerCase(),
+            ) ?? entry.config.owners[0]
+          return owner
+            ? [
+                {
+                  address: entry.address,
+                  balance: 'balance' in entry ? (entry.balance ?? null) : null,
+                  configurable: entry.config.chainId !== undefined,
+                  owner: owner.type,
+                  owners: entry.config.owners.map(
+                    (candidate) => candidate.type,
+                  ),
+                },
+              ]
+            : []
+        }),
+        ...unlinked.map((entry) => ({
+          address: entry.address,
+          balance: null,
+          credentialId: entry.credentialId,
+          owner: 'webAuthn' as const,
+        })),
+      ],
+      configurable: listing.configurable ? chain : null,
+      faucet: listing.faucet ? chain : null,
+    }
+  },
+  // A change of chain loads the balances again.
+  loaderDeps: (match: { search: { chain?: Chain.Chain | undefined } }) => ({
+    chain: match.search.chain,
+  }),
+})
+
+/** Renders the page. */
+function Page(props: Page.Props) {
+  const client = Client.use()
+  const router = useRouter()
+  const toast = Toast.useToast()
+  const fund = useMutation({
+    mutationFn: (variables: { address: `0x${string}`; chain: Chain.Chain }) =>
+      parseResponse(client.i.account.fund.$post({ json: variables })),
+    // The mutation stays pending until the balances load again, so the button holds until then.
+    onSuccess: () => router.invalidate({ sync: true }),
+  })
+  const signOut = useMutation({
+    mutationFn: () => parseResponse(client.v1.auth.logout.$post()),
+    // The mutation stays pending until the sign-in page renders, so the button holds until then.
+    onSuccess: () => router.navigate({ to: '/login' }),
+  })
+  // One click runs both ceremonies, since the new passkey signs a proof challenge: its attestation
+  // proves no private key. Safari before iOS 17.4 can refuse the second ceremony.
+  const passkey = useMutation({
+    async mutationFn(variables: { account?: `0x${string}` | undefined }) {
+      const { options } = await parseResponse(
+        client.v1.account.passkey.options.$post({ json: {} }),
+      )
+      // The response reads an absent `excludeCredentials` as `undefined`, which the ceremony's options
+      // omit instead.
+      const { excludeCredentials, ...publicKey } = options.publicKey
+      const credential = await (async () => {
+        try {
+          return await Registration.create({
+            options: {
+              publicKey: {
+                ...publicKey,
+                ...(excludeCredentials ? { excludeCredentials } : {}),
+              },
+            },
+          })
+        } catch (error) {
+          throw new CeremonyError('Passkey ceremony failed.', { cause: error })
+        }
+      })()
+      const created = { credentialId: credential.id, rpId: publicKey.rp.id }
+      // Tempo ID stores the passkey only after its proof, so a failure before the proof drops the
+      // passkey from the device. The next click creates another.
+      const assertion = await (async () => {
+        try {
+          const { step } = await parseResponse(
+            client.v1.account.passkey.$post({ json: { credential } }),
+          )
+          return await Authentication.sign({
+            // ox types the request with optional members that the DOM types leave out when absent.
+            // The object is the one that ox built for `navigator.credentials.get`.
+            getFn: (request) =>
+              navigator.credentials.get(request as CredentialRequestOptions),
+            options: step.options,
+          }).catch((error: unknown) => {
+            throw new CeremonyError('Passkey ceremony failed.', {
+              cause: error,
+            })
+          })
+        } catch (error) {
+          forget(created)
+          throw error
+        }
+      })()
+      try {
+        const { account } = variables
+        // The request names the chain that the page shows, where an update applies and whose address
+        // of the passkey's own account the response returns.
+        return await parseResponse(
+          client.v1.account.passkey.verify.$post({
+            json: {
+              assertion,
+              ...(account ? { account } : {}),
+              ...(props.configurable ? { chain: props.configurable } : {}),
+            },
+          }),
+        )
+      } catch (error) {
+        // Any failure but a refusal can follow a stored passkey, so the device keeps it.
+        if (refused(error)) forget(created)
+        throw error
+      }
+    },
+    // The mutation stays pending until the accounts load again, so the new passkey's wallet shows
+    // with the toast.
+    async onSuccess() {
+      await router.invalidate({ sync: true })
+      toast.add({ intent: 'positive', title: 'Passkey added' })
+    },
+  })
+
+  // A wallet.tempo passkey's account upgrades with one click. The page prepares each upgrade's passkey
+  // step ahead of the click, since a browser such as Safari spends a click's user activation on a
+  // request before the ceremony. A step lasts 5 minutes, so the page prepares it again before then.
+  const upgradable = props.configurable
+    ? (props.accounts ?? []).filter(
+        (entry) => !entry.configurable && entry.owner === 'webAuthn',
+      )
+    : []
+  const queryClient = useQueryClient()
+  const steps = useQueries({
+    queries: upgradable.map((entry) => ({
+      queryFn: () =>
+        Upgrade.prepare(client, {
+          chain: props.configurable!,
+          target: target(entry),
+        }),
+      queryKey: ['upgrade', props.configurable, entry.address],
+      refetchInterval: Upgrade.stepLifetime,
+      // A hidden tab keeps its step fresh, and a tab that comes back after a stale step prepares
+      // another, since the server keeps a step for 5 minutes.
+      refetchIntervalInBackground: true,
+      refetchOnWindowFocus: true,
+      retry: false,
+      staleTime: Upgrade.stepLifetime,
+    })),
+  })
+  const upgrade = useMutation({
+    async mutationFn(variables: { address: `0x${string}` }) {
+      const index = upgradable.findIndex(
+        (entry) => entry.address === variables.address,
+      )
+      const entry = upgradable[index]!
+      // A step that failed to load, such as for a session older than 10 minutes, loads now, so its
+      // refusal shows. So does one older than 4 minutes, which the server may already have expired.
+      // The cache holds the newest step, since a background refetch renders the page no second time.
+      const step = queryClient.getQueryState<
+        Awaited<ReturnType<typeof Upgrade.prepare>>
+      >(['upgrade', props.configurable, entry.address])
+      const options =
+        step?.data && Date.now() - step.dataUpdatedAt < Upgrade.stepLifetime
+          ? step.data
+          : await Upgrade.prepare(client, {
+              chain: props.configurable!,
+              target: target(entry),
+            })
+      const assertion = await (async () => {
+        try {
+          return await Authentication.sign({
+            getFn: (request) =>
+              navigator.credentials.get(request as CredentialRequestOptions),
+            options,
+          })
+        } catch (error) {
+          throw new CeremonyError('Passkey ceremony failed.', { cause: error })
+        }
+      })()
+      try {
+        return await parseResponse(
+          client.v1.account.upgrade.$post({
+            json: {
+              ...target(entry),
+              chain: props.configurable!,
+              passkey: { assertion },
+            },
+          }),
+        )
+      } catch (error) {
+        // The server spends the step's challenge before it sends the upgrade, so a refused or failed
+        // upgrade prepares a new step for the next click.
+        await steps[index]?.refetch()
+        throw error
+      }
+    },
+    // The server spent the step's challenge, so the accounts load again, without the upgrade, and a
+    // toast confirms it.
+    async onSuccess() {
+      await router.invalidate({ sync: true })
+      toast.add({ intent: 'positive', title: 'Wallet upgraded' })
+    },
+  })
+
+  return (
+    <main {...styles.page()} aria-label="Your account">
+      <Account
+        accountError={props.accountError ?? undefined}
+        accounts={props.accounts}
+        addingPasskey={passkey.isPending}
+        email={props.email}
+        error={(() => {
+          if (signOut.error) return Client.message(signOut.error)
+          if (fund.error) return Client.message(fund.error)
+          if (upgrade.error) return message(upgrade.error)
+          if (passkey.error) return message(passkey.error)
+          return undefined
+        })()}
+        funding={fund.isPending ? fund.variables.address : undefined}
+        name={props.name ?? undefined}
+        onAddPasskey={
+          // A user with a passkey wallet needs no second one, so the page offers none. Accounts that
+          // failed to load list no passkey wallet, so the page still offers one.
+          props.passkeys &&
+          !props.accounts?.some((entry) => entry.owner === 'webAuthn')
+            ? () => {
+                signOut.reset()
+                fund.reset()
+                passkey.mutate({})
+              }
+            : undefined
+        }
+        onAddOwner={
+          props.configurable
+            ? (address) => {
+                signOut.reset()
+                fund.reset()
+                upgrade.reset()
+                passkey.mutate({ account: address })
+              }
+            : undefined
+        }
+        onFund={(() => {
+          const chain = props.faucet
+          if (chain === null) return undefined
+          return (address: `0x${string}`) => {
+            // A pending request holds every faucet button, so a second click sends nothing.
+            if (fund.isPending) return
+            signOut.reset()
+            // A registration in progress keeps its state, so only a finished one clears.
+            if (!passkey.isPending) passkey.reset()
+            fund.mutate({ address, chain })
+          }
+        })()}
+        onUpgrade={
+          props.configurable
+            ? (address) => {
+                signOut.reset()
+                fund.reset()
+                passkey.reset()
+                upgrade.mutate({ address })
+              }
+            : undefined
+        }
+        onSignOut={() => {
+          passkey.reset()
+          fund.reset()
+          signOut.mutate()
+        }}
+        ownerAdded={(() => {
+          if (passkey.isSuccess && passkey.variables.account) return 'passkey'
+          return undefined
+        })()}
+        passkeyAdded={passkey.isSuccess && !passkey.variables.account}
+        passkeys={props.passkeys}
+        preparing={upgradable.flatMap((entry, index) =>
+          steps[index]?.isPending ? [entry.address] : [],
+        )}
+        signingOut={signOut.isPending}
+        upgrading={upgrade.isPending ? upgrade.variables.address : undefined}
+      />
+    </main>
+  )
+}
+
+declare namespace Page {
+  type Props = {
+    /** `null` when the accounts loaded. */
+    accountError: string | null
+    /** Oldest first, or `null` on a failed read. */
+    accounts: Account.Props['accounts']
+    /**
+     * The selected chain when its accounts are configurable, so each account offers the owner that it
+     * lacks, or `null` on any other chain.
+     */
+    configurable: Chain.Chain | null
+    /** The signed-in user's email address. */
+    email: string
+    /** The chain whose faucet funds the accounts, or `null`. */
+    faucet: Chain.Chain | null
+    /** `null` if the user has none. */
+    name: string | null
+    /** Whether the `default` realm holds passkeys at Tempo ID's origin. */
+    passkeys: boolean
+  }
+}
+
+/** Returns the message for a failed passkey registration. */
+function message(error: unknown) {
+  if (!(error instanceof CeremonyError)) return Client.message(error)
+  if (names(error).includes('InvalidStateError'))
+    return 'This device already holds one of your passkeys. Add a passkey on another device.'
+  if (names(error).includes('NotAllowedError'))
+    return 'Adding a passkey was canceled. Try again.'
+  return 'Your passkey could not be created. Try again.'
+}
+
+/** Returns the message for a failed read or creation of the accounts. */
+function failure(error: unknown) {
+  return Client.reason(error) === 'rate_limited'
+    ? Client.message(error)
+    : 'Your wallets failed to load. Reload the page to try again.'
+}
+
+/**
+ * Whether Tempo ID refused a request with a 4xx and a `reason`, so it stored nothing. An owner change
+ * can return `config_conflict` or `rate_limited` after it stores the passkey.
+ */
+function refused(error: unknown) {
+  const reason = Client.reason(error)
+  return (
+    reason !== undefined &&
+    reason !== 'config_conflict' &&
+    reason !== 'rate_limited' &&
+    error instanceof DetailedError &&
+    typeof error.statusCode === 'number' &&
+    error.statusCode < 500
+  )
+}
+
+/** Signals the browser to drop the unstored passkey `credentialId`, if it supports the signal. */
+function forget(options: { credentialId: string; rpId: string }) {
+  const signal = (
+    PublicKeyCredential as {
+      signalUnknownCredential?: (options: {
+        credentialId: string
+        rpId: string
+      }) => Promise<void>
+    }
+  ).signalUnknownCredential
+  // The signal is best effort: a failure leaves the passkey, which sign-in refuses.
+  void signal
+    ?.call(PublicKeyCredential, {
+      credentialId: options.credentialId,
+      rpId: options.rpId,
+    })
+    .catch(() => {})
+}
+
+/** Returns the names of `error` and its causes. */
+function names(error: unknown): readonly string[] {
+  if (!(error instanceof Error)) return []
+  return [error.name, ...names(error.cause)]
+}
+
+namespace styles {
+  // Content starts at the same height as on `/deposit`, so moving between them keeps the title in place.
+  export const page = style({
+    alignItems: 'flex-start',
+    display: 'flex',
+    justifyContent: 'center',
+    minHeight: '100dvh !custom',
+    paddingBlock: '64',
+    paddingInline: '16',
+  })
+}
+
+/** Returns what an upgrade names: the user's account, or a wallet.tempo passkey that has not linked. */
+function target(entry: Account.Entry): Upgrade.Target {
+  return entry.credentialId
+    ? { credentialId: entry.credentialId }
+    : { account: entry.address }
+}