@tempoxyz/id 0.0.0-stage → 0.0.0

package/src/app/screens/Deposit.tsx

@@ -0,0 +1,762 @@
+/**
+ * Renders the deposit screen: the list of crypto networks a Tempo Account receives deposits on,
+ * and the receive screen with the account's address and QR code for one network.
+ * @module
+ */
+import { Select } from '@base-ui/react/select'
+import { Link } from '@tanstack/react-router'
+import { Cuer } from 'cuer'
+import { type ReactNode, useState } from 'react'
+import ArrowLeft from '~icons/lucide/arrow-left'
+import Check from '~icons/lucide/check'
+import ChevronDown from '~icons/lucide/chevron-down'
+import ChevronRight from '~icons/lucide/chevron-right'
+import Copy from '~icons/lucide/copy'
+import Apple from '~icons/simple-icons/apple'
+import { Button } from '../components/Button.js'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import pathUsd from '../components/icons/pathUSD.svg?url'
+import usdc from '../components/icons/USDC.e.svg?url'
+import usdt from '../components/icons/USDT0.svg?url'
+import { Tooltip } from '../components/Tooltip.js'
+import { style, variants } from '../zyzz.config.js'
+import base from './chains/base.svg?url'
+import ethereum from './chains/ethereum.svg?url'
+import solana from './chains/solana.svg?url'
+import tempo from './chains/tempo.svg?url'
+
+/** A network that deposits arrive on. Only Tempo receives them so far. */
+type Network = {
+  /** The tags the list shows, which name the network's main assets. */
+  assets: readonly string[]
+  /** Whether the screen accepts deposits on the network. */
+  available: boolean
+  /** The URL of the network's logo. */
+  icon: string
+  /** The network's ID. */
+  id: 'base' | 'ethereum' | 'solana' | 'tempo'
+  /** The network's display name. */
+  name: string
+}
+
+// Base and Ethereum share the account's address format, but a transfer there does not reach Tempo,
+// so their receive screens stay unavailable until deposits bridge.
+const networks: readonly Network[] = [
+  {
+    // The verified symbols, so a sender picks the exact token Tempo accepts.
+    assets: ['USDC.e', 'USDT0', 'pathUSD'],
+    available: true,
+    icon: tempo,
+    id: 'tempo',
+    name: 'Tempo',
+  },
+  {
+    assets: ['USDC', 'ETH', 'WETH', '+3'],
+    available: false,
+    icon: base,
+    id: 'base',
+    name: 'Base',
+  },
+  {
+    assets: ['USDC', 'ETH', 'USDT', '+2'],
+    available: false,
+    icon: ethereum,
+    id: 'ethereum',
+    name: 'Ethereum',
+  },
+  {
+    assets: ['USDC', 'SOL'],
+    available: false,
+    icon: solana,
+    id: 'solana',
+    name: 'Solana',
+  },
+]
+
+/** The stablecoins a deposit on Tempo accepts. */
+const stablecoins = [
+  { icon: usdc, symbol: 'USDC.e' },
+  { icon: usdt, symbol: 'USDT0' },
+  { icon: pathUsd, symbol: 'pathUSD' },
+] as const
+
+/**
+ * The deposit screen. Without `method` it lists the networks. With `method: 'tempo'` it shows the
+ * account's address as a QR code and as text, with a copy control.
+ */
+export function Deposit(props: Deposit.Props): ReactNode {
+  const Subtitle = props.heading === 'h4' ? 'h5' : 'h2'
+
+  if (props.method === 'tempo')
+    return (
+      <div {...styles.column()}>
+        <div {...styles.intro()}>
+          <Header
+            back={
+              <Link
+                {...styles.back()}
+                aria-label="Back"
+                {...(props.address
+                  ? { search: { address: props.address }, to: '/deposit' }
+                  : { to: '/' })}
+              >
+                <ArrowLeft {...styles.backIcon()} aria-hidden />
+              </Link>
+            }
+            heading={props.heading}
+            title="Receive funds"
+          />
+          <p {...styles.description()}>
+            Send <strong>supported stablecoins</strong> to this address.
+          </p>
+        </div>
+        {props.address ? (
+          <Receive address={props.address} />
+        ) : (
+          <ErrorMessage>{props.error}</ErrorMessage>
+        )}
+      </div>
+    )
+
+  return (
+    <div {...styles.column()}>
+      <div {...styles.intro()}>
+        <Header
+          back={
+            <Link {...styles.back()} aria-label="Back" to="/">
+              <ArrowLeft {...styles.backIcon()} aria-hidden />
+            </Link>
+          }
+          heading={props.heading}
+          title="Deposit"
+        />
+        <p {...styles.description()}>
+          Choose an option below to send stablecoins to your wallet.
+        </p>
+      </div>
+      {props.address ? (
+        <>
+          <section {...styles.section()}>
+            <Subtitle {...styles.sectionTitle()}>Crypto</Subtitle>
+            <ul {...styles.list()} role="list">
+              {networks.map((network) => (
+                <li key={network.id}>
+                  <MethodRow
+                    address={network.available ? props.address : undefined}
+                    assets={network.assets}
+                    icon={<img {...styles.logo()} alt="" src={network.icon} />}
+                    name={network.name}
+                  />
+                </li>
+              ))}
+            </ul>
+          </section>
+          <section {...styles.section()}>
+            <Subtitle {...styles.sectionTitle()}>Cash</Subtitle>
+            <ul {...styles.list()} role="list">
+              <li>
+                {/* The mark follows the text color, so it is black in light mode and white in dark mode. */}
+                <MethodRow
+                  assets={['Coinbase']}
+                  icon={<Apple {...styles.apple()} aria-hidden />}
+                  name="Apple Pay"
+                />
+              </li>
+            </ul>
+          </section>
+        </>
+      ) : (
+        <ErrorMessage>{props.error}</ErrorMessage>
+      )}
+    </div>
+  )
+}
+
+export declare namespace Deposit {
+  type Props = {
+    /** The account that receives the deposit, or none when the address is not one of the user's. */
+    address?: `0x${string}` | undefined
+    /** Why the screen shows no address, such as an address that is not one of the user's. */
+    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 method the screen shows, or none for the list of networks. */
+    method?: 'tempo' | undefined
+  }
+}
+
+/** The screen's title, with a link back. */
+function Header(props: Header.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  return (
+    <header {...styles.header()}>
+      {props.back}
+      <Title {...styles.title()}>{props.title}</Title>
+    </header>
+  )
+}
+
+declare namespace Header {
+  type Props = {
+    /** The link back, which sits at the start of the title row. */
+    back: ReactNode
+    /** The level of the title: `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** The screen's heading. */
+    title: string
+  }
+}
+
+/** One deposit method: a link when it is available, or a dimmed row marked as coming soon. */
+function MethodRow(props: MethodRow.Props): ReactNode {
+  const { address } = props
+  const content = (
+    <>
+      <span {...styles.methodIcon()}>{props.icon}</span>
+      <span {...styles.networkBody()}>
+        <span {...styles.networkName()}>{props.name}</span>
+        <span {...styles.tags()}>
+          {props.assets.map((asset) => (
+            <span {...styles.tag()} key={asset}>
+              {asset}
+            </span>
+          ))}
+        </span>
+      </span>
+      {address ? (
+        <ChevronRight {...styles.chevron()} aria-hidden />
+      ) : (
+        <span {...styles.soon()}>Coming soon</span>
+      )}
+    </>
+  )
+
+  // Only Tempo is available, so an available row opens its receive screen.
+  if (address)
+    return (
+      <Link
+        {...styles.network({ available: true })}
+        search={{ address, method: 'tempo' }}
+        to="/deposit"
+      >
+        {content}
+      </Link>
+    )
+
+  return (
+    <div {...styles.network({ available: false })} aria-disabled>
+      {content}
+    </div>
+  )
+}
+
+declare namespace MethodRow {
+  type Props = {
+    /** The account the receive screen opens for, or none when the method is unavailable. */
+    address?: `0x${string}` | undefined
+    /** The tags that name the method's assets or provider. */
+    assets: readonly string[]
+    /** The method's logo. */
+    icon: ReactNode
+    /** The method's name. */
+    name: string
+  }
+}
+
+/**
+ * The account's address as a QR code and as text, a network picker, the accepted stablecoins, and
+ * the controls that copy the address.
+ */
+function Receive(props: Receive.Props): ReactNode {
+  // The control that copied shows the confirmation, so the other keeps its label.
+  const [status, setStatus] = useState<
+    'button' | 'failed' | 'icon' | undefined
+  >()
+
+  function copy(source: 'button' | 'icon') {
+    // Both outcomes set the status, so the promise cannot reject. The `then` also catches a browser
+    // without the Clipboard API, which throws on the property read.
+    void Promise.resolve()
+      .then(() => navigator.clipboard.writeText(props.address))
+      .then(
+        () => {
+          setStatus(source)
+          setTimeout(() => setStatus(undefined), 2000)
+        },
+        () => setStatus('failed'),
+      )
+  }
+
+  return (
+    <>
+      <div {...styles.card()}>
+        <span {...styles.cardHeader()}>
+          <span {...styles.label()}>Deposit address</span>
+          <button
+            {...styles.copy()}
+            aria-label={status === 'icon' ? 'Address copied' : 'Copy address'}
+            onClick={() => copy('icon')}
+            type="button"
+          >
+            {status === 'icon' ? (
+              <Check {...styles.icon()} aria-hidden />
+            ) : (
+              <Copy {...styles.icon()} aria-hidden />
+            )}
+          </button>
+        </span>
+        <div {...styles.qr()}>
+          <Cuer arena={tempo} value={props.address} />
+        </div>
+        <code
+          {...styles.address()}
+          data-testid="deposit-address"
+          title={props.address}
+        >
+          {props.address}
+        </code>
+      </div>
+
+      <div {...styles.fields()}>
+        {/* Only Tempo is selectable, so the picker previews the networks that come later. */}
+        <Select.Root value="tempo">
+          <div {...styles.field()}>
+            <Select.Label {...styles.label()}>Network</Select.Label>
+            <Select.Trigger {...styles.trigger()}>
+              <Select.Value>
+                {() => (
+                  <span {...styles.fieldValue()}>
+                    <img {...styles.fieldLogo()} alt="" src={tempo} />
+                    Tempo
+                  </span>
+                )}
+              </Select.Value>
+              <Select.Icon {...styles.triggerIcon()}>
+                <ChevronDown {...styles.icon()} aria-hidden />
+              </Select.Icon>
+            </Select.Trigger>
+          </div>
+          <Select.Portal>
+            <Select.Positioner
+              align="end"
+              alignItemWithTrigger={false}
+              sideOffset={8}
+            >
+              <Select.Popup {...styles.popup()}>
+                <Select.List>
+                  {networks.map((network) => (
+                    <Select.Item
+                      {...styles.option()}
+                      disabled={!network.available}
+                      key={network.id}
+                      value={network.id}
+                    >
+                      <img {...styles.fieldLogo()} alt="" src={network.icon} />
+                      <Select.ItemText>{network.name}</Select.ItemText>
+                      {network.available ? (
+                        <Select.ItemIndicator {...styles.indicator()}>
+                          <Check {...styles.icon()} aria-hidden />
+                        </Select.ItemIndicator>
+                      ) : (
+                        <span {...styles.soon()}>Coming soon</span>
+                      )}
+                    </Select.Item>
+                  ))}
+                </Select.List>
+              </Select.Popup>
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>
+
+        <div {...styles.field()}>
+          <span {...styles.label()}>Supported stablecoins</span>
+          <span {...styles.coins()}>
+            {stablecoins.map((coin) => (
+              <Tooltip key={coin.symbol} label={coin.symbol}>
+                <span {...styles.coin()} tabIndex={0}>
+                  <img
+                    {...styles.coinLogo()}
+                    alt={coin.symbol}
+                    height={20}
+                    src={coin.icon}
+                    width={20}
+                  />
+                </span>
+              </Tooltip>
+            ))}
+          </span>
+        </div>
+      </div>
+
+      <p {...styles.warning()} role="note">
+        Only send <strong>supported stablecoins</strong> on{' '}
+        <strong>Tempo</strong>. Sending other tokens or using a different
+        network may result in permanent loss.
+      </p>
+
+      <div {...styles.actions()}>
+        <Button onClick={() => copy('button')}>
+          {status === 'button' ? 'Copied' : 'Copy address'}
+        </Button>
+        <Button to="/" variant="secondary">
+          Done
+        </Button>
+      </div>
+      <p {...styles.status()} aria-live="polite" role="status">
+        {(() => {
+          if (status === 'failed')
+            return 'The address could not be copied. Select it and copy it manually.'
+          if (status) return 'Address copied.'
+          return undefined
+        })()}
+      </p>
+    </>
+  )
+}
+
+declare namespace Receive {
+  type Props = {
+    /** The address that receives the deposit. */
+    address: `0x${string}`
+  }
+}
+
+namespace styles {
+  // The two buttons share the row equally.
+  export const actions = style({
+    display: 'flex',
+    gap: 3,
+    '& > *': { flex: 1, minWidth: 0 },
+  })
+
+  // One line down to phone width. A narrower screen elides the end, and the QR code and copy control keep it whole.
+  export const address = style({
+    color: 'gray.900',
+    overflow: 'hidden',
+    textAlign: 'center',
+    textOverflow: 'ellipsis',
+    typography: 'label.12.mono',
+    whiteSpace: 'nowrap',
+  })
+
+  export const apple = style({ color: 'foreground', height: 7, width: 7 })
+
+  // Sits at the start of the title row, and its arrow hangs past the column edge. A phone's gutter
+  // fits only a short hang.
+  export const back = style({
+    alignItems: 'center',
+    borderRadius: 'full',
+    bottom: 0,
+    color: 'foreground',
+    display: 'flex',
+    height: 10,
+    justifyContent: 'center',
+    left: 'outdent',
+    marginBlock: 'auto',
+    outline: 'none',
+    position: 'absolute',
+    top: 0,
+    width: 10,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+    ':hover': { backgroundColor: 'grayAlpha.200' },
+    // From this width, the gutter beside the column fits the wide hang.
+    '@media (min-width: 32rem)': { left: 'outdentWide' },
+  })
+
+  export const backIcon = style({ height: 6, width: 6 })
+
+  export const card = style({
+    backgroundColor: 'background.surface',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: 'lg',
+    display: 'grid',
+    gap: 4,
+    padding: 3,
+  })
+
+  export const cardHeader = style({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+  export const chevron = style({
+    color: 'gray.900',
+    flexShrink: 0,
+    height: 4,
+    marginLeft: 'auto',
+    width: 4,
+  })
+
+  export const coin = style({
+    borderRadius: 'full',
+    outline: '2px solid',
+    outlineColor: 'background.surface',
+    ':focus-visible': { outlineColor: 'blue.700' },
+    '@media (prefers-reduced-motion: no-preference)': {
+      transitionDuration: '150ms',
+      transitionProperty: 'margin',
+      transitionTimingFunction: 'in-out',
+    },
+  })
+
+  export const coinLogo = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: 5,
+    width: 5,
+  })
+
+  // The coins overlap, and spread apart while hovered so each one can show its tooltip.
+  export const coins = style({
+    display: 'flex',
+    flexShrink: 0,
+    '& > span + span': { marginInlineStart: 'overlap' },
+    '&:hover > span + span': { marginInlineStart: 1 },
+  })
+
+  export const column = style({
+    display: 'grid',
+    gap: 6,
+    maxWidth: 'sm',
+    width: 'full',
+  })
+
+  // The pseudo-element bleeds past the icon, so the touch target is larger than what shows.
+  export const copy = style({
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'gray.900',
+    cursor: 'pointer',
+    display: 'flex',
+    flexShrink: 0,
+    outline: 'none',
+    padding: 0,
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      inset: 'bleed',
+      position: 'absolute',
+    },
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+    ':hover': { color: 'foreground' },
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    textWrap: 'balance',
+    typography: 'copy.14',
+    '& strong': { color: 'foreground', fontWeight: 'medium' },
+  })
+
+  export const field = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+    justifyContent: 'space-between',
+    minHeight: 12,
+    paddingInline: 4,
+  })
+
+  export const fieldLogo = style({ borderRadius: 'full', height: 5, width: 5 })
+
+  // Select renders a hidden input between the rows, so the divider selects any later row.
+  export const fields = style({
+    backgroundColor: 'background.surface',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: 'lg',
+    display: 'grid',
+    '& > div ~ div': { borderTop: '1px solid', borderTopColor: 'gray.400' },
+  })
+
+  export const fieldValue = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 2,
+    typography: 'label.14',
+  })
+
+  export const header = style({
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'relative',
+  })
+
+  export const icon = style({ height: 4, width: 4 })
+
+  export const indicator = style({ display: 'flex', marginLeft: 'auto' })
+
+  export const intro = style({ display: 'grid', gap: 2 })
+
+  export const label = style({ color: 'gray.900', typography: 'label.14' })
+
+  export const list = style({
+    display: 'grid',
+    gap: 1,
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+  })
+
+  export const logo = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: 9,
+    width: 9,
+  })
+
+  export const methodIcon = style({
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    height: 9,
+    justifyContent: 'center',
+    width: 9,
+  })
+
+  export const network = variants({
+    base: {
+      alignItems: 'center',
+      borderRadius: 'lg',
+      color: 'foreground',
+      display: 'flex',
+      gap: 3,
+      outline: 'none',
+      padding: 2,
+      textDecoration: 'none',
+    },
+    variants: {
+      available: {
+        false: { opacity: 0.5 },
+        true: {
+          ':focus-visible': {
+            outline: '2px solid',
+            outlineColor: 'blue.700',
+          },
+          ':hover': { backgroundColor: 'grayAlpha.200' },
+        },
+      },
+    },
+  })
+
+  export const networkBody = style({ display: 'grid', gap: 1, minWidth: 0 })
+
+  export const networkName = style({
+    fontWeight: 'medium',
+    typography: 'label.16',
+  })
+
+  export const option = style({
+    alignItems: 'center',
+    borderRadius: 'md',
+    cursor: 'default',
+    display: 'flex',
+    gap: 2,
+    outline: 'none',
+    paddingBlock: 2,
+    paddingInline: 2,
+    typography: 'label.14',
+    userSelect: 'none',
+    '&[data-disabled]': { opacity: 0.5 },
+    '&[data-highlighted]': { backgroundColor: 'grayAlpha.200' },
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.surface',
+    border: '1px solid',
+    borderColor: 'gray.400',
+    borderRadius: 'lg',
+    boxShadow: 'lg',
+    minWidth: 56,
+    outline: 'none',
+    padding: 1,
+  })
+
+  // Scanners read dark modules on a light ground with a quiet zone, so the code keeps them in dark mode.
+  export const qr = style({
+    backgroundColor: 'white',
+    borderRadius: 'md',
+    color: 'black',
+    justifySelf: 'center',
+    padding: 2,
+    width: 44,
+  })
+
+  export const section = style({ display: 'grid', gap: 2 })
+
+  export const sectionTitle = style({ typography: 'heading.20' })
+
+  export const soon = style({
+    color: 'gray.900',
+    flexShrink: 0,
+    marginLeft: 'auto',
+    typography: 'label.12',
+  })
+
+  export const status = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    typography: 'copy.13',
+  })
+
+  export const tag = style({
+    backgroundColor: 'gray.200',
+    borderRadius: 'sm',
+    color: 'gray.900',
+    paddingInline: 1,
+    typography: 'label.12',
+  })
+
+  export const tags = style({ display: 'flex', flexWrap: 'wrap', gap: 1 })
+
+  export const title = style({
+    letterSpacing: 'title',
+    textAlign: 'center',
+    typography: 'heading.24',
+  })
+
+  // The negative margin keeps the label in line with the row while the hover fill bleeds outward.
+  export const trigger = style({
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 'md',
+    color: 'foreground',
+    cursor: 'pointer',
+    display: 'flex',
+    gap: 2,
+    marginRight: 'bleed',
+    outline: 'none',
+    paddingBlock: 2,
+    paddingInline: 3,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+    },
+    ':hover': { backgroundColor: 'grayAlpha.200' },
+  })
+
+  export const triggerIcon = style({ color: 'gray.900', display: 'flex' })
+
+  export const warning = style({
+    backgroundColor: 'amber.100',
+    border: '1px solid',
+    borderColor: 'amber.400',
+    borderRadius: 'lg',
+    color: 'amber.900',
+    padding: 4,
+    typography: 'copy.13',
+    '& strong': { fontWeight: 'medium' },
+  })
+}