@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/screens/Deposit.tsx

@@ -0,0 +1,523 @@
+/** The deposit screen: the deposit networks, and the receive screen. @module */
+import { Link } from '@tanstack/react-router'
+import {
+  Button,
+  Callout,
+  Hex,
+  Inline,
+  Qr,
+  Rows,
+  Select,
+  Stack,
+  Surface,
+  Tag,
+  Tooltip,
+} from '@tempoxyz/ds'
+import { ArrowLeft } from '@tempoxyz/ds/icons'
+import type { ReactNode } from 'react'
+import Apple from '~icons/simple-icons/apple'
+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 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'
+import { style } from '../zyzz.config.js'
+
+/** A deposit network. Only Tempo receives deposits. */
+type Network = {
+  /** Tags of 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 that 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, and with `tempo` it shows the
+ * address.
+ */
+export function Deposit(props: Deposit.Props): ReactNode {
+  const Subtitle = props.heading === 'h4' ? 'h5' : 'h2'
+
+  if (props.method === 'tempo')
+    return (
+      <Stack {...styles.column()} gap="24">
+        <Stack gap="8">
+          <Header
+            back={
+              <Link
+                {...(props.address
+                  ? { search: { address: props.address }, to: '/deposit' }
+                  : { to: '/' })}
+              />
+            }
+            heading={props.heading}
+            title="Receive funds"
+          />
+          <p {...styles.description()}>
+            Send <strong>supported stablecoins</strong> to this address.
+          </p>
+        </Stack>
+        {props.address ? (
+          <Receive address={props.address} />
+        ) : props.error ? (
+          <Callout intent="negative">
+            <Callout.Icon />
+            <Callout.Content>{props.error}</Callout.Content>
+          </Callout>
+        ) : null}
+      </Stack>
+    )
+
+  return (
+    <Stack {...styles.column()} gap="24">
+      <Stack gap="8">
+        <Header
+          back={<Link to="/" />}
+          heading={props.heading}
+          title="Deposit"
+        />
+        <p {...styles.description()}>
+          Choose an option below to send stablecoins to your wallet.
+        </p>
+      </Stack>
+      {props.address ? (
+        <>
+          <Stack gap="8" render={<section />}>
+            <Subtitle {...styles.sectionTitle()}>Crypto</Subtitle>
+            <Rows {...styles.methods()} dividers="none" size="large">
+              {networks.map((network) => (
+                <MethodRow
+                  address={network.available ? props.address : undefined}
+                  assets={network.assets}
+                  icon={<img {...styles.logo()} alt="" src={network.icon} />}
+                  key={network.id}
+                  name={network.name}
+                />
+              ))}
+            </Rows>
+          </Stack>
+          <Stack gap="8" render={<section />}>
+            <Subtitle {...styles.sectionTitle()}>Cash</Subtitle>
+            <Rows {...styles.methods()} dividers="none" size="large">
+              {/* 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"
+              />
+            </Rows>
+          </Stack>
+        </>
+      ) : props.error ? (
+        <Callout intent="negative">
+          <Callout.Icon />
+          <Callout.Content>{props.error}</Callout.Content>
+        </Callout>
+      ) : null}
+    </Stack>
+  )
+}
+
+export declare namespace Deposit {
+  type Props = {
+    /** Absent if the address is not one of the user's. */
+    address?: `0x${string}` | undefined
+    /** Why the screen shows no address. */
+    error?: string | undefined
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Absent, the screen lists the networks. */
+    method?: 'tempo' | undefined
+  }
+}
+
+/** The screen's title, with a back link. */
+function Header(props: Header.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  return (
+    <header {...styles.header()}>
+      <span {...styles.back()}>
+        <Button.Link
+          aria-label="Back"
+          render={props.back}
+          shape="icon"
+          variant="text"
+        >
+          <ArrowLeft {...styles.backIcon()} />
+        </Button.Link>
+      </span>
+      <Title {...styles.title()}>{props.title}</Title>
+    </header>
+  )
+}
+
+declare namespace Header {
+  type Props = {
+    /** The router link of the back button. */
+    back: Button.Link.Props['render']
+    /** `h1` by default, or `h4` on the flows canvas. */
+    heading?: 'h1' | 'h4' | undefined
+    /** The screen's heading. */
+    title: string
+  }
+}
+
+/** A deposit method: a link if 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>
+      <Rows.Info>
+        <Rows.Title {...styles.networkName()}>{props.name}</Rows.Title>
+        <Inline gap="4" wrap>
+          {props.assets.map((asset) => (
+            <Tag key={asset} shape="rounded" size="small">
+              {asset}
+            </Tag>
+          ))}
+        </Inline>
+      </Rows.Info>
+    </>
+  )
+
+  // Only Tempo is available, so an available row opens its receive screen.
+  if (address)
+    return (
+      <Rows.Row
+        action="navigation"
+        render={<Link search={{ address, method: 'tempo' }} to="/deposit" />}
+      >
+        {content}
+      </Rows.Row>
+    )
+
+  return (
+    <Rows.Row disabled>
+      {content}
+      <Tag size="small" variant="plain">
+        Coming soon
+      </Tag>
+    </Rows.Row>
+  )
+}
+
+declare namespace MethodRow {
+  type Props = {
+    /** The receive screen's account. Absent if the method is unavailable. */
+    address?: `0x${string}` | undefined
+    /** Tags of the method's assets or provider. */
+    assets: readonly string[]
+    /** The method's logo. */
+    icon: ReactNode
+    /** The method's name. */
+    name: string
+  }
+}
+
+/** The address as a QR code and as text, the network picker, and the accepted stablecoins. */
+function Receive(props: Receive.Props): ReactNode {
+  return (
+    <>
+      <Surface {...styles.addressCard()} size="small">
+        <Stack align="center" gap="16">
+          <span {...styles.qr()}>
+            <Qr
+              aria-label="Deposit address QR code"
+              arena={tempo}
+              size="small"
+              value={props.address}
+            />
+          </span>
+          <Hex.Root
+            {...styles.address()}
+            data-testid="deposit-address"
+            value={props.address}
+          >
+            <Hex.Text />
+            <Hex.Copy aria-label="Copy address" />
+          </Hex.Root>
+        </Stack>
+      </Surface>
+
+      <Surface {...styles.card()} size="small">
+        <Rows dividers="full">
+          {/* Only Tempo is selectable, so the picker previews the networks that come later. */}
+          <Rows.Row>
+            <Rows.Label id="deposit-network">Network</Rows.Label>
+            <Select.Root value="tempo">
+              <Select.Trigger
+                {...styles.trigger()}
+                aria-labelledby="deposit-network"
+                size="small"
+                variant="text"
+              >
+                <Select.Value>
+                  {() => (
+                    <Inline gap="8">
+                      <img {...styles.fieldLogo()} alt="" src={tempo} />
+                      Tempo
+                    </Inline>
+                  )}
+                </Select.Value>
+                <Select.Icon />
+              </Select.Trigger>
+              <Select.Popup align="end">
+                {networks.map((network) => (
+                  <Select.Item
+                    {...styles.network()}
+                    disabled={!network.available}
+                    key={network.id}
+                    value={network.id}
+                  >
+                    <Select.ItemPrefix>
+                      <img {...styles.fieldLogo()} alt="" src={network.icon} />
+                    </Select.ItemPrefix>
+                    <Select.ItemText>{network.name}</Select.ItemText>
+                    {network.available ? null : (
+                      <Select.ItemSuffix>Coming soon</Select.ItemSuffix>
+                    )}
+                  </Select.Item>
+                ))}
+              </Select.Popup>
+            </Select.Root>
+          </Rows.Row>
+          <Rows.Row>
+            <Rows.Label>Supported stablecoins</Rows.Label>
+            <span {...styles.coins()}>
+              {stablecoins.map((coin) => (
+                <Tooltip.Root key={coin.symbol}>
+                  <Tooltip.Trigger
+                    delay={150}
+                    render={
+                      <span {...styles.coin()} tabIndex={0}>
+                        <img
+                          {...styles.coinLogo()}
+                          alt={coin.symbol}
+                          height={20}
+                          src={coin.icon}
+                          width={20}
+                        />
+                      </span>
+                    }
+                  />
+                  <Tooltip.Popup>{coin.symbol}</Tooltip.Popup>
+                </Tooltip.Root>
+              ))}
+            </span>
+          </Rows.Row>
+        </Rows>
+      </Surface>
+
+      <Callout intent="warning" role="note">
+        <Callout.Icon />
+        <Callout.Content {...styles.warning()}>
+          Only send <strong>supported stablecoins</strong> on{' '}
+          <strong>Tempo</strong>. Sending other tokens or using a different
+          network may result in permanent loss.
+        </Callout.Content>
+      </Callout>
+
+      <Button.Link render={<Link to="/" />} variant="secondary">
+        Done
+      </Button.Link>
+    </>
+  )
+}
+
+declare namespace Receive {
+  type Props = {
+    /** The address that receives the deposit. */
+    address: `0x${string}`
+  }
+}
+
+namespace styles {
+  // A screen too narrow for the whole address truncates its middle, and the QR code and copy control keep it whole.
+
+  export const address = style({
+    color: 'gray.900',
+    maxWidth: '100% !custom',
+    typography: 'label.12.mono',
+  })
+
+  // The QR code sits 16px from the top, as far as the address's text sits from the bottom.
+  export const addressCard = style({
+    backgroundColor: 'gray.100',
+    paddingTop: '16',
+  })
+
+  export const apple = style({ color: 'foreground', height: '28', width: '28' })
+
+  // 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',
+    bottom: '0',
+    display: 'flex',
+    left: '-1rem !custom',
+    position: 'absolute',
+    top: '0',
+    // From this width, the gutter beside the column fits the wide hang.
+    '@media (min-width: 32rem)': { left: '-3.5rem !custom' },
+  })
+
+  export const backIcon = style({ height: '24', width: '24' })
+
+  // A gray fill, as in the account's wallets list, sets the cards apart from the screen.
+  export const card = style({ backgroundColor: 'gray.100' })
+
+  export const coin = style({
+    borderRadius: 'full',
+    outline: '2px solid',
+    outlineColor: 'gray.100',
+    ':focus-visible': { outlineColor: 'blue.700' },
+    '@media (prefers-reduced-motion: no-preference)': {
+      transitionDuration: '150',
+      transitionProperty: 'margin',
+      transitionTimingFunction: 'in-out',
+    },
+  })
+
+  export const coinLogo = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: '20',
+    width: '20',
+  })
+
+  // 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: '-0.375rem !custom' },
+    '&:hover > span + span': { marginInlineStart: '4' },
+  })
+
+  export const column = style({ maxWidth: '384', width: '100% !custom' })
+
+  export const description = style({
+    color: 'gray.900',
+    textAlign: 'center',
+    textWrap: 'balance',
+    typography: 'copy.14',
+    '& strong': { color: 'foreground', typography: 'copy.14.strong' },
+  })
+
+  export const fieldLogo = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: '20',
+    width: '20',
+  })
+
+  export const header = style({
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'relative',
+  })
+
+  export const logo = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: '36',
+    width: '36',
+  })
+
+  // The rows bleed by their own padding, so their logos line up with the section titles while the
+  // rounded hover fill reaches past them.
+  export const methods = style({
+    marginInline: '-20px !custom',
+    '& > *': { borderRadius: '16' },
+  })
+
+  export const methodIcon = style({
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    height: '36',
+    justifyContent: 'center',
+    width: '36',
+  })
+
+  // A network that cannot be selected never shows the check, so its suffix takes the check's place.
+  export const network = style({
+    '&[data-disabled] > :last-child': { display: 'none' },
+  })
+
+  export const networkName = style({ typography: 'label.16.strong' })
+
+  // Scanners read dark modules on a light ground with a quiet zone, so the code keeps the light
+  // scheme, whose foreground draws the modules, in dark mode too.
+  export const qr = style({
+    backgroundColor: 'white',
+    colorScheme: 'light',
+    borderRadius: '6',
+    display: 'block',
+    padding: '8',
+  })
+
+  export const sectionTitle = style({ typography: 'heading.20' })
+
+  export const title = style({
+    letterSpacing: '-0.02em !custom',
+    textAlign: 'center',
+    typography: 'heading.24',
+  })
+
+  // The trigger bleeds by its end padding, so its chevron lines up with the coin logos below.
+  export const trigger = style({ marginInlineEnd: '-12' })
+
+  export const warning = style({
+    '& strong': { typography: 'label.13.strong' },
+  })
+}