@zerodev/smart-routing-address-react-ui 0.0.1

package/src/components/PendingDeposits/index.tsx

@@ -0,0 +1,152 @@
+import { cn, Text } from '@zerodev/react-ui'
+import type { DepositedToken } from '@zerodev/smart-routing-address'
+import { CHAIN_ICONS, TOKEN_ICONS } from '../../iconAssets'
+import type {
+  DepositStage,
+  DepositWithTimestamp,
+  EstimatedFee,
+  SmartRoutingAddressConfig,
+} from '../../types'
+import { getTxUrl } from '../../utils/chains'
+import {
+  getSourceTokenSymbol,
+  resolveDestChain,
+  sourceTokensFromFees,
+} from '../../utils/config'
+import { getDepositStage } from '../../utils/deposits'
+import { findFeeDataByToken, tokenAddressMatches } from '../../utils/fees'
+import {
+  formatDisplayAmount,
+  formatRelativeTime,
+  truncateAddress,
+} from '../../utils/format'
+import { TxnItem, type TxnStatus } from '../TxnItem'
+
+export interface PendingDepositsProps {
+  deposits: DepositedToken[]
+  estimatedFees: EstimatedFee[]
+  config: SmartRoutingAddressConfig
+  /** Fired when a row is tapped — the widget uses this to open the
+   * transaction-details view for the selected deposit. When omitted, rows
+   * render as static (non-interactive). */
+  onSelectDeposit?: (deposit: DepositedToken) => void
+  className?: string
+}
+
+const STAGE_TO_STATUS: Record<DepositStage, TxnStatus> = {
+  pending: 'Detected',
+  bridging: 'Routing',
+  completed: 'Received',
+  failed: 'Failed',
+}
+
+export function PendingDeposits({
+  deposits,
+  estimatedFees,
+  config,
+  onSelectDeposit,
+  className,
+}: PendingDepositsProps) {
+  if (deposits.length === 0) return null
+
+  const destChain = resolveDestChain(config)
+  const destChainLogo = CHAIN_ICONS[destChain.id]
+
+  return (
+    <section
+      aria-label="Pending deposits"
+      className={cn(
+        'zd:relative zd:flex zd:w-full zd:flex-col zd:gap-2 zd:overflow-hidden zd:rounded-2xl zd:p-4',
+        'zd:border-offWhite zd:border-[0.3px] zd:bg-white/20',
+        'zd:shadow-[inset_0_-4px_4px_0_rgba(255,255,255,0.1),inset_0_3px_4px_0_rgba(0,0,0,0.02)]',
+        className,
+      )}
+    >
+      <Text className="zd:text-h3">Pending Deposit</Text>
+      <ul className="zd:flex zd:w-full zd:flex-col">
+        {deposits.map((raw) => {
+          const deposit = raw as DepositWithTimestamp
+          const { chainId, token, amount, transactionHash } = deposit.deposit
+          const feeData = findFeeDataByToken(estimatedFees, chainId, token)
+
+          // Source pair: reconstruct the SourceToken so we can look up its
+          // symbol + chain icon the same way the trigger pill does. Matching
+          // on the on-chain address (via `tokenAddressMatches`) — the
+          // server's `feeData.name` is a display symbol (e.g. "ETH"), not the
+          // TOKEN_TYPE ("NATIVE"), so a direct `t.tokenType === name` compare
+          // misses native tokens.
+          const source =
+            sourceTokensFromFees(estimatedFees).find(
+              (t) =>
+                t.chain.id === chainId &&
+                tokenAddressMatches(t.tokenType, chainId, token),
+            ) ?? null
+          // Prefer the reconstructed source's symbol; fall back to the
+          // server's `feeData.name` so past deposits whose route dropped
+          // out of the current fee estimates still get a symbol / icon.
+          const sourceSymbol = source
+            ? getSourceTokenSymbol(source)
+            : (feeData?.name ?? '')
+          const sourceTokenLogo = sourceSymbol
+            ? TOKEN_ICONS[sourceSymbol.toUpperCase()]
+            : undefined
+          const sourceChainLogo = CHAIN_ICONS[chainId]
+
+          // Destination token equals source token — widget's default
+          // actions forward the deposited asset unchanged.
+          const destTokenLogo = sourceTokenLogo
+
+          const status = STAGE_TO_STATUS[getDepositStage(deposit)]
+          const amountLabel = feeData
+            ? `${formatDisplayAmount(amount, feeData.decimal, 'down')} ${sourceSymbol}`
+            : String(amount)
+          const timestamp = deposit.createdAt
+            ? (formatRelativeTime(deposit.createdAt) ?? '')
+            : ''
+
+          // Explorer URL from the chain id alone — independent of whether
+          // the deposit's token was matched in the current fee estimates.
+          const href = getTxUrl(chainId, transactionHash)
+
+          const row = (
+            <TxnItem
+              amount={amountLabel}
+              address={truncateAddress(transactionHash)}
+              {...(href && { href })}
+              timestamp={timestamp}
+              status={status}
+              {...(sourceTokenLogo && {
+                sourceTokenIconUrl: sourceTokenLogo,
+              })}
+              {...(sourceChainLogo && {
+                sourceChainIconUrl: sourceChainLogo,
+              })}
+              {...(destTokenLogo && { destTokenIconUrl: destTokenLogo })}
+              {...(destChainLogo && { destChainIconUrl: destChainLogo })}
+            />
+          )
+
+          return (
+            <li key={transactionHash}>
+              {onSelectDeposit ? (
+                // -mx-1 + px-1 + a wider explicit width extend the hover
+                // surface 4px past the row content on each side, so the
+                // highlight has visible breathing room without shifting the
+                // TxnItem's visual position.
+                <button
+                  type="button"
+                  onClick={() => onSelectDeposit(deposit)}
+                  className="zd:w-full zd:cursor-pointer zd:rounded-xl zd:px-1 zd:text-left zd:hover:bg-white/30"
+                >
+                  {row}
+                </button>
+              ) : (
+                row
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}

package/src/components/QrSheet/QrCode.tsx

@@ -0,0 +1,163 @@
+import { encode } from 'uqr'
+
+interface QrCodeProps {
+  /** Data to encode. */
+  value: string
+  /** Pixel size of the rendered SVG square. */
+  size: number
+  /** Error correction level. Defaults to `'M'`. */
+  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'
+  /** Corner radius (in modules, scaled to px internally) for finder patterns. */
+  eyeRadius?: number
+}
+
+const FINDER_SIZE = 7 // every QR has three 7×7 finder patterns
+const MODULE_COLOR = '#000'
+const BG_COLOR = '#fff'
+/** Vertical shrink applied to data-module pills so rows read as distinct
+ * without introducing white slivers wide enough to look like transitions
+ * to a scanner. Kept small (5%) so total black area stays close to spec. */
+const PILL_PAD_RATIO = 0.05
+
+/**
+ * Custom QR renderer that draws runs of horizontally-adjacent data modules as
+ * a single rounded pill. Finder patterns stay as sharp concentric squares
+ * (rounding them breaks the 1:1:3:1:1 corner ratio scanners use to locate the
+ * code). Isolated data modules render as pill-ish rects — visually close to
+ * circles at very small `PILL_PAD_RATIO`, still square-adjacent for scanners.
+ *
+ * Default `errorCorrectionLevel` is `'H'` (30% recovery) so the decorative
+ * rounding + shrinkage has plenty of headroom before scans fail.
+ *
+ * Quiet zone (spec: ≥4 modules of white around the code) is expected to be
+ * provided by the caller — e.g. via a white-background padded wrapper. This
+ * component fills the given `size` with the QR data area itself so the
+ * consumer controls the visual footprint.
+ */
+export function QrCode({
+  value,
+  size,
+  errorCorrectionLevel = 'H',
+  eyeRadius = 0,
+}: QrCodeProps) {
+  // `uqr` returns a 2D boolean matrix (`data[row][col]`) and the module count
+  // per side. Same information as `qrcode`, just shaped differently — the
+  // pill/finder rendering below is unchanged.
+  const qr = encode(value, { ecc: errorCorrectionLevel, border: 0 })
+  const matrix = qr.data
+  const moduleCount = qr.size
+  const cellSize = size / moduleCount
+  const eyeRadiusPx = eyeRadius * cellSize
+
+  const finders = [
+    { row: 0, col: 0 },
+    { row: 0, col: moduleCount - FINDER_SIZE },
+    { row: moduleCount - FINDER_SIZE, col: 0 },
+  ]
+
+  const inFinder = (row: number, col: number) =>
+    finders.some(
+      (f) =>
+        row >= f.row &&
+        row < f.row + FINDER_SIZE &&
+        col >= f.col &&
+        col < f.col + FINDER_SIZE,
+    )
+
+  // Collect maximal horizontal runs of `on` modules, skipping finder regions.
+  const runs: { row: number; col: number; length: number }[] = []
+  for (let row = 0; row < moduleCount; row++) {
+    let col = 0
+    while (col < moduleCount) {
+      if (inFinder(row, col)) {
+        col++
+        continue
+      }
+      if (matrix[row]?.[col]) {
+        let length = 1
+        while (
+          col + length < moduleCount &&
+          !inFinder(row, col + length) &&
+          matrix[row]?.[col + length]
+        ) {
+          length++
+        }
+        runs.push({ row, col, length })
+        col += length
+      } else {
+        col++
+      }
+    }
+  }
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={`QR code for ${value}`}
+    >
+      <rect width={size} height={size} fill={BG_COLOR} />
+      {runs.map(({ row, col, length }) => {
+        // Shrink each pill vertically so rows read as distinct without
+        // creating scanner-confusing white gaps mid-run. Isolated modules
+        // (length === 1) also shrink horizontally so they render close to a
+        // circle instead of an oval.
+        const pad = cellSize * PILL_PAD_RATIO
+        const pillHeight = cellSize - 2 * pad
+        const isSingle = length === 1
+        return (
+          <rect
+            key={`r${row}-${col}`}
+            x={col * cellSize + (isSingle ? pad : 0)}
+            y={row * cellSize + pad}
+            width={length * cellSize - (isSingle ? 2 * pad : 0)}
+            height={pillHeight}
+            rx={pillHeight / 2}
+            ry={pillHeight / 2}
+            fill={MODULE_COLOR}
+          />
+        )
+      })}
+      {finders.map(({ row, col }) => {
+        const x = col * cellSize
+        const y = row * cellSize
+        const outerSize = FINDER_SIZE * cellSize
+        const innerSize = 3 * cellSize
+        return (
+          <g key={`f${row}-${col}`}>
+            <rect
+              x={x}
+              y={y}
+              width={outerSize}
+              height={outerSize}
+              rx={eyeRadiusPx}
+              ry={eyeRadiusPx}
+              fill={MODULE_COLOR}
+            />
+            <rect
+              x={x + cellSize}
+              y={y + cellSize}
+              width={outerSize - 2 * cellSize}
+              height={outerSize - 2 * cellSize}
+              rx={Math.max(eyeRadiusPx - cellSize, 0)}
+              ry={Math.max(eyeRadiusPx - cellSize, 0)}
+              fill={BG_COLOR}
+            />
+            <rect
+              x={x + 2 * cellSize}
+              y={y + 2 * cellSize}
+              width={innerSize}
+              height={innerSize}
+              rx={Math.max(eyeRadiusPx - 2 * cellSize, 0)}
+              ry={Math.max(eyeRadiusPx - 2 * cellSize, 0)}
+              fill={MODULE_COLOR}
+            />
+          </g>
+        )
+      })}
+    </svg>
+  )
+}

package/src/components/QrSheet/index.tsx

@@ -0,0 +1,80 @@
+import {
+  BottomSheet,
+  BottomSheetClose,
+  BottomSheetContent,
+  BottomSheetTitle,
+  Button,
+  Text,
+} from '@zerodev/react-ui'
+import { QrCode } from './QrCode'
+
+export interface QrSheetProps {
+  /** Whether the modal is open. Controlled. */
+  open: boolean
+  /** Called when the modal requests to close (backdrop click, ESC,
+   * Cancel button). */
+  onOpenChange: (open: boolean) => void
+  /** Address to encode in the QR code and display below it. */
+  address: string
+  /** Called when the user taps "Copy address". */
+  onCopy: () => void
+}
+
+/** Bottom-anchored modal showing the deposit address as a QR code. Composes
+ * `<BottomSheet>` (state) + `<BottomSheetContent>` (chrome); this file owns the
+ * QR / address / copy-cancel layout inside it. */
+export function QrSheet({ open, onOpenChange, address, onCopy }: QrSheetProps) {
+  return (
+    <BottomSheet open={open} onOpenChange={onOpenChange}>
+      <BottomSheetContent>
+        <BottomSheetTitle>Your deposit address</BottomSheetTitle>
+        {/* Bottom-half gradient — light blue at bottom-left fading into
+            peach/orange at bottom-right — mirrors the "amorphic" image used
+            in the Figma design. Colors echo `MultiRadialBackground`. */}
+        <div
+          aria-hidden
+          className="zd:absolute zd:inset-0 zd:pointer-events-none"
+          style={{
+            background:
+              'radial-gradient(ellipse 78% 65% at 5% 105%, rgba(69,171,251,0.35) 0%, rgba(69,171,251,0) 72%), radial-gradient(ellipse 82% 65% at 100% 105%, rgba(250,200,172,0.65) 0%, rgba(250,200,172,0) 72%), radial-gradient(ellipse 58% 52% at 100% 100%, rgba(242,123,62,0.35) 0%, rgba(242,123,62,0) 72%)',
+          }}
+        />
+        <div className="zd:relative zd:flex zd:flex-col zd:gap-6 zd:items-center zd:pt-6 zd:px-4 zd:pb-3">
+          <div className="zd:flex zd:flex-col zd:gap-3 zd:items-center">
+            <Text className="zd:text-h2 zd:text-center">
+              Your deposit address
+            </Text>
+            <Text className="zd:text-body2 zd:text-center zd:max-w-[300px]">
+              Send funds to this address to automatically bridge and swap
+              desired assets.
+            </Text>
+          </div>
+
+          {/* The white bg + `p-5` (20px) padding around the QR doubles as
+              the required 4-module quiet zone — QrCode itself no longer
+              reserves one internally so the code fills its declared size. */}
+          <div className="zd:relative zd:bg-white zd:w-[240px] zd:h-[240px] zd:p-5 zd:flex zd:items-center zd:justify-center">
+            <QrCode value={address} size={200} eyeRadius={2} />
+            {/* Corner brackets — viewfinder-style framing. Color/thickness
+                match the Figma's `rgba(19,14,11,0.1)` 1px outline. */}
+            <div className="zd:absolute zd:top-0 zd:left-0 zd:w-5 zd:h-5 zd:border-t zd:border-l zd:border-greyScale/10 zd:rounded-tl-lg zd:pointer-events-none" />
+            <div className="zd:absolute zd:top-0 zd:right-0 zd:w-5 zd:h-5 zd:border-t zd:border-r zd:border-greyScale/10 zd:rounded-tr-lg zd:pointer-events-none" />
+            <div className="zd:absolute zd:bottom-0 zd:left-0 zd:w-5 zd:h-5 zd:border-b zd:border-l zd:border-greyScale/10 zd:rounded-bl-lg zd:pointer-events-none" />
+            <div className="zd:absolute zd:bottom-0 zd:right-0 zd:w-5 zd:h-5 zd:border-b zd:border-r zd:border-greyScale/10 zd:rounded-br-lg zd:pointer-events-none" />
+          </div>
+
+          <Text className="zd:text-body2 zd:text-center zd:break-all zd:max-w-[230px]">
+            {address}
+          </Text>
+
+          <div className="zd:flex zd:flex-col zd:gap-1 zd:w-full">
+            <Button action="primary" text="Copy address" onClick={onCopy} />
+            <BottomSheetClose asChild>
+              <Button action="secondary" text="Cancel" />
+            </BottomSheetClose>
+          </div>
+        </div>
+      </BottomSheetContent>
+    </BottomSheet>
+  )
+}

package/src/components/TxnItem/ExplorerLink.tsx

@@ -0,0 +1,37 @@
+import { cn, Icon } from '@zerodev/react-ui'
+
+export interface ExplorerLinkProps {
+  /** Full block-explorer URL, e.g. `https://etherscan.io/tx/0x…`. */
+  href: string
+  /** Short address / hash used for the accessible label. */
+  address: string
+  className?: string
+}
+
+/**
+ * Small icon-only anchor to a block-explorer entry — the trailing action on a
+ * `TxnItem` row. Kept as its own component so both `PendingDeposits` (renders
+ * it inline via `TxnItem`'s `trailingAction` slot) and `PastDeposits`
+ * (renders it as an absolute sibling of the row-select button) use identical
+ * markup and styling.
+ */
+export function ExplorerLink({ href, address, className }: ExplorerLinkProps) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer noopener"
+      aria-label={`View ${address} on block explorer`}
+      // Stop the click from bubbling to a parent that might otherwise
+      // intercept it (e.g. a row-select `<button>` in `PastDeposits` when
+      // this anchor is layered over the row via absolute positioning).
+      onClick={(e) => e.stopPropagation()}
+      className={cn(
+        'zd:inline-flex zd:items-center zd:justify-center zd:rounded-md zd:p-1.5 zd:text-solarOrange zd:hover:bg-white/40',
+        className,
+      )}
+    >
+      <Icon name="export" className="zd:size-4" aria-hidden />
+    </a>
+  )
+}

package/src/components/TxnItem/index.tsx

@@ -0,0 +1,178 @@
+import { cn, Icon, Text } from '@zerodev/react-ui'
+
+export type TxnStatus = 'Routing' | 'Detected' | 'Received' | 'Failed'
+
+export interface TxnItemProps {
+  /** Pre-formatted amount, e.g. `"$248.00 USD"`. */
+  amount: string
+  /** Short address/hash display, e.g. `"0x4d2a…ba99"`. */
+  address: string
+  /** Optional block-explorer URL. Address row becomes a link when supplied. */
+  href?: string
+  /** Pre-formatted relative timestamp, e.g. `"2 mo ago"`. */
+  timestamp: string
+  status: TxnStatus
+  sourceTokenIconUrl?: string
+  sourceChainIconUrl?: string
+  destTokenIconUrl?: string
+  destChainIconUrl?: string
+  className?: string
+}
+
+const STATUS_COLOR: Record<TxnStatus, string> = {
+  Routing: 'zd:text-solarOrange',
+  Detected: 'zd:text-greyScale/50',
+  Received: 'zd:text-positive',
+  Failed: 'zd:text-negative',
+}
+
+export function TxnItem({
+  amount,
+  address,
+  href,
+  timestamp,
+  status,
+  sourceTokenIconUrl,
+  sourceChainIconUrl,
+  destTokenIconUrl,
+  destChainIconUrl,
+  className,
+}: TxnItemProps) {
+  return (
+    <div
+      className={cn(
+        'zd:relative zd:flex zd:w-full zd:items-center zd:gap-3 zd:py-2',
+        className,
+      )}
+    >
+      <PairMarkPair
+        {...(sourceTokenIconUrl && { sourceTokenIconUrl })}
+        {...(sourceChainIconUrl && { sourceChainIconUrl })}
+        {...(destTokenIconUrl && { destTokenIconUrl })}
+        {...(destChainIconUrl && { destChainIconUrl })}
+      />
+
+      <div className="zd:flex zd:min-w-0 zd:flex-1 zd:flex-col">
+        <Text className="zd:text-body2 zd:truncate">{amount}</Text>
+        <AddressLine address={address} {...(href && { href })} />
+      </div>
+
+      <div className="zd:flex zd:shrink-0 zd:flex-col zd:items-end zd:gap-1">
+        <Text className="zd:text-body3 zd:text-greyScale/50">{timestamp}</Text>
+        <Text className={cn('zd:text-body3', STATUS_COLOR[status])}>
+          {status}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+function PairMarkPair(props: {
+  sourceTokenIconUrl?: string
+  sourceChainIconUrl?: string
+  destTokenIconUrl?: string
+  destChainIconUrl?: string
+}) {
+  return (
+    <div className="zd:flex zd:shrink-0 zd:items-center">
+      <PairMark
+        {...(props.sourceTokenIconUrl && {
+          tokenIconUrl: props.sourceTokenIconUrl,
+        })}
+        {...(props.sourceChainIconUrl && {
+          chainIconUrl: props.sourceChainIconUrl,
+        })}
+        badgeSide="left"
+      />
+      <PairMark
+        {...(props.destTokenIconUrl && {
+          tokenIconUrl: props.destTokenIconUrl,
+        })}
+        {...(props.destChainIconUrl && {
+          chainIconUrl: props.destChainIconUrl,
+        })}
+        badgeSide="right"
+        className="zd:-ml-4"
+      />
+    </div>
+  )
+}
+
+function PairMark({
+  tokenIconUrl,
+  chainIconUrl,
+  badgeSide,
+  className,
+}: {
+  tokenIconUrl?: string
+  chainIconUrl?: string
+  badgeSide: 'left' | 'right'
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'zd:relative zd:size-11 zd:shrink-0 zd:rounded-xl zd:isolate zd:bg-white/60 zd:backdrop-blur-[30px]',
+        'zd:shadow-[inset_0_3px_4px_0_rgba(0,0,0,0.02),inset_0_-4px_4px_0_rgba(255,255,255,0.1)]',
+        className,
+      )}
+    >
+      <div className="zd:absolute zd:top-1/2 zd:left-1/2 zd:size-8.5 zd:-translate-x-1/2 zd:-translate-y-1/2 zd:overflow-hidden zd:rounded-full zd:bg-greyScale/10">
+        {tokenIconUrl && (
+          <img
+            src={tokenIconUrl}
+            alt=""
+            className="zd:size-full zd:object-contain"
+          />
+        )}
+      </div>
+      {chainIconUrl && (
+        <div
+          className={cn(
+            'zd:absolute zd:bottom-1 zd:size-3 zd:overflow-hidden zd:rounded-full zd:bg-white zd:p-px',
+            badgeSide === 'left' ? 'zd:left-1' : 'zd:right-1',
+          )}
+        >
+          <img
+            src={chainIconUrl}
+            alt=""
+            className="zd:size-full zd:object-contain"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AddressLine({ address, href }: { address: string; href?: string }) {
+  const inner = (
+    <>
+      <span className="zd:truncate">{address}</span>
+      {href && (
+        <Icon
+          name="export"
+          className="zd:size-3 zd:shrink-0 zd:text-solarOrange"
+          aria-hidden
+        />
+      )}
+    </>
+  )
+
+  const className =
+    'zd:flex zd:min-w-0 zd:items-center zd:gap-1 zd:text-body3 zd:text-greyScale/50'
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer noopener"
+        aria-label={`View ${address} on block explorer`}
+        className={cn(className, 'zd:hover:text-greyScale')}
+      >
+        {inner}
+      </a>
+    )
+  }
+  return <span className={className}>{inner}</span>
+}