@zerodev/smart-routing-address-react-ui 0.0.3 → 0.0.6

package/src/pages/Deposit.tsx

@@ -21,6 +21,7 @@ import { AddressDisplay } from '../components/AddressDisplay'
 import { ErrorRetryCard } from '../components/ErrorRetryCard'
 import {
   FeeBreakdownRows,
+  FeeDisclosureButton,
   FeeSummary,
   LiveValue,
 } from '../components/FeeBreakdown'
@@ -36,7 +37,6 @@ import { CHAIN_ICONS, PROVIDER_ICONS, TOKEN_ICONS } from '../iconAssets'
 import type { SourceToken } from '../types'
 import {
   getSourceTokenSymbol,
-  resolveBaseUrl,
   resolveDestChain,
   sourceTokensFromFees,
 } from '../utils/config'
@@ -82,7 +82,7 @@ export function Deposit({
   const address = success?.address
   const estimatedFees = success?.estimatedFees ?? []
 
-  // allowPartialRoutes lets the server drop source tokens it can't route, so
+  // The server only returns estimates for source tokens it can route, so
   // the routable set is exactly the tokens the fee estimates came back with.
   const srcTokens = useMemo(
     () => sourceTokensFromFees(estimatedFees),
@@ -136,7 +136,7 @@ export function Deposit({
     refetch: refetchDeposits,
   } = useDepositStatus({
     address,
-    baseUrl: resolveBaseUrl(config),
+    baseUrl: config.baseUrl,
   })
   const newDeposits = useNewDeposits(deposits, hasLoaded)
   const pastDepositsCount = deposits.length - newDeposits.length
@@ -417,12 +417,19 @@ export function Deposit({
                   label="Estimated fee"
                   value={
                     breakdown ? (
-                      <LiveValue
-                        loading={providerFees.loading}
-                        flashKey={feeFlashKey}
+                      // The whole value (summary + chevron) toggles the
+                      // breakdown, not just the arrow.
+                      <FeeDisclosureButton
+                        open={feeOpen}
+                        onToggle={() => setFeeOpen((prev) => !prev)}
                       >
-                        <FeeSummary breakdown={breakdown} />
-                      </LiveValue>
+                        <LiveValue
+                          loading={providerFees.loading}
+                          flashKey={feeFlashKey}
+                        >
+                          <FeeSummary breakdown={breakdown} />
+                        </LiveValue>
+                      </FeeDisclosureButton>
                     ) : (
                       // Match Min deposit's skeleton so both loading
                       // affordances share one visual language.
@@ -431,24 +438,6 @@ export function Deposit({
                   }
                   info
                   infoTooltip={FEE_INFO.estimatedFee}
-                  trailing={
-                    breakdown ? (
-                      <button
-                        type="button"
-                        onClick={() => setFeeOpen((prev) => !prev)}
-                        aria-expanded={feeOpen}
-                        aria-label={
-                          feeOpen ? 'Hide fee details' : 'Show fee details'
-                        }
-                        className="zd:inline-flex zd:items-center zd:justify-center zd:cursor-pointer"
-                      >
-                        <Icon
-                          name={feeOpen ? 'chevronUp' : 'chevronDown'}
-                          className="zd:w-3.5 zd:h-3.5 zd:text-greyScale"
-                        />
-                      </button>
-                    ) : null
-                  }
                 />
                 {feeOpen && breakdown && (
                   <FeeBreakdownRows breakdown={breakdown} />
@@ -476,6 +465,7 @@ export function Deposit({
                     label={destChain.name}
                     {...(destChainLogo && { logoUri: destChainLogo })}
                     disabled
+                    loading={!tokenSymbol}
                   />
                 }
               />

package/src/pages/PastDeposits.tsx

@@ -9,7 +9,6 @@ import type { DepositStage, DepositWithTimestamp } from '../types'
 import { getTxUrl } from '../utils/chains'
 import {
   getSourceTokenSymbol,
-  resolveBaseUrl,
   resolveDestChain,
   sourceTokensFromFees,
 } from '../utils/config'
@@ -24,8 +23,6 @@ import {
 const STAGE_TO_STATUS: Record<DepositStage, TxnStatus> = {
   pending: 'Detected',
   bridging: 'Routing',
-  // Past deposits use the terminal label — "Received" (plain ink) is the
-  // active list's arrival state; "Delivered" renders green.
   completed: 'Delivered',
   failed: 'Failed',
 }
@@ -93,7 +90,7 @@ export function PastDeposits({ onSelectDeposit }: PastDepositsProps) {
 
   const { deposits, hasLoaded } = useDepositStatus({
     address,
-    baseUrl: resolveBaseUrl(config),
+    baseUrl: config.baseUrl,
   })
 
   const destChain = resolveDestChain(config)

package/src/pages/TransactionDetails.tsx

@@ -1,15 +1,19 @@
 import {
-  ArrowCardPair,
   cn,
   DataRow,
   Icon,
-  InfoCard,
   ProgressStep,
   Section,
   Text,
+  TokenSummary,
+  Wrapper,
 } from '@zerodev/react-ui'
 import { useState } from 'react'
-import { FeeBreakdownRows, FeeSummary } from '../components/FeeBreakdown'
+import {
+  FeeBreakdownRows,
+  FeeDisclosureButton,
+  FeeSummary,
+} from '../components/FeeBreakdown'
 import { FEE_INFO } from '../components/FeeBreakdown/feeInfo'
 import { useSmartRoutingAddressContext } from '../context/SmartRoutingAddressContext'
 import { useDepositStatus } from '../hooks/useDepositStatus'
@@ -19,7 +23,6 @@ import type { DepositWithTimestamp } from '../types'
 import { getTxUrl } from '../utils/chains'
 import {
   getSourceTokenSymbol,
-  resolveBaseUrl,
   resolveDestChain,
   sourceTokensFromFees,
 } from '../utils/config'
@@ -45,7 +48,7 @@ function useLiveDeposit(initial: DepositWithTimestamp): DepositWithTimestamp {
     addressState.status === 'success' ? addressState.address : undefined
   const { deposits } = useDepositStatus({
     address,
-    baseUrl: resolveBaseUrl(config),
+    baseUrl: config.baseUrl,
   })
   const targetHash = initial.deposit.transactionHash
   const live = deposits.find((d) => d.deposit.transactionHash === targetHash) as
@@ -72,9 +75,10 @@ function formatDate(iso?: string): string | null {
 }
 
 /**
- * Transaction details view (Figma `17634:105049`) — token hero pair via
- * `ArrowCardPair` + `InfoCard`, a "Transaction details" `Section` with the
- * route metadata, and a "Transaction Progress" `Section` with the step trail.
+ * Transaction details view (Figma `20002:37994`) — delivered-amount hero via
+ * `TokenSummary`, a "From" row with the deposited amount, a "Transaction
+ * details" `Section` with the route metadata, and a "Transaction Progress"
+ * `Section` with the step trail.
  */
 export function TransactionDetails({
   deposit: initialDeposit,
@@ -117,11 +121,11 @@ export function TransactionDetails({
   const outAmountRaw = execution?.outputAmount
   const failed = stage === 'failed'
 
-  // Headline reads as "how much you sent" — round down so we never overstate
-  // the deposit. `formatDisplayAmount` (magnitude-aware) also prevents the
+  // "From" row amount — round down so we never overstate what was sent.
+  // `formatDisplayAmount` (magnitude-aware) also prevents the
   // 18-decimal fractional tail that `formatTokenAmount` produces for ETH.
-  const sourceHeadline = feeData
-    ? `${formatDisplayAmount(amount, feeData.decimal, 'down')} ${sourceSymbol}`
+  const sourceAmount = feeData
+    ? formatDisplayAmount(amount, feeData.decimal, 'down')
     : String(amount)
 
   // NOTE: `feeData.decimal` is the source token's decimals — the SRA fee
@@ -164,23 +168,36 @@ export function TransactionDetails({
     // Screen's scroll container can activate scrolling when the fee
     // breakdown is expanded and content exceeds the viewport.
     <div className="zd:flex zd:w-full zd:flex-col zd:gap-3 zd:pt-4 zd:pb-6">
-      <ArrowCardPair
-        topCard={
-          <InfoCard
-            title={sourceHeadline}
-            {...(sourceTokenLogo && { imageSource: sourceTokenLogo })}
-            {...(sourceChainLogo && { chainIconUrl: sourceChainLogo })}
-          />
-        }
-        bottomCard={
-          <InfoCard
-            title={destHeadline}
-            {...(destTokenLogo && { imageSource: destTokenLogo })}
-            {...(destChainLogo && { chainIconUrl: destChainLogo })}
-          />
-        }
+      {/* Delivered hero (Figma 20002:38000): the received amount headlines
+          the card, destination-token tile with chain badge overhanging the
+          top. The design's fiat secondary line is omitted — the SRA fee
+          estimates carry no USD pricing, and a fabricated conversion would
+          be worse than none. */}
+      <TokenSummary
+        primaryValue={destHeadline}
+        {...(destTokenLogo && { tokenLogoUrl: destTokenLogo })}
+        {...(destChainLogo && { badgeLogoUrl: destChainLogo })}
       />
 
+      {/* Deposited-side row (Figma 20002:38012). */}
+      {/* py-1.5, not the node's declared p-16: Figma pins this row to
+          ~33px total height, which crushes the vertical padding to ~6px —
+          honouring p-16 literally renders a ~53px row. */}
+      <Wrapper className="zd:flex zd:w-full zd:items-center zd:justify-between zd:rounded-xl zd:px-4 zd:py-1.5">
+        <Text className="zd:text-body1">From</Text>
+        <span className="zd:flex zd:items-center zd:gap-1">
+          <Text className="zd:text-body2">{sourceAmount}</Text>
+          {sourceTokenLogo && (
+            <img
+              src={sourceTokenLogo}
+              alt=""
+              className="zd:size-4 zd:rounded-full zd:border zd:border-offWhite zd:object-cover"
+            />
+          )}
+          <Text className="zd:text-body2">{sourceSymbol}</Text>
+        </span>
+      </Wrapper>
+
       <Section title="Transaction details">
         <DataRow
           label="From network"
@@ -204,24 +221,19 @@ export function TransactionDetails({
         {breakdown && (
           <DataRow
             label="Total fee"
-            value={<FeeSummary breakdown={breakdown} />}
-            info
-            infoTooltip={FEE_INFO.estimatedFee}
-            trailing={
-              <button
-                type="button"
-                onClick={() => setFeeOpen((prev) => !prev)}
-                aria-expanded={feeOpen}
-                aria-controls={FEE_PANEL_ID}
-                aria-label={feeOpen ? 'Hide fee details' : 'Show fee details'}
-                className="zd:inline-flex zd:items-center zd:justify-center zd:cursor-pointer"
+            value={
+              // The whole value (summary + chevron) toggles the breakdown,
+              // not just the arrow.
+              <FeeDisclosureButton
+                open={feeOpen}
+                onToggle={() => setFeeOpen((prev) => !prev)}
+                panelId={FEE_PANEL_ID}
               >
-                <Icon
-                  name={feeOpen ? 'chevronUp' : 'chevronDown'}
-                  className="zd:w-3.5 zd:h-3.5 zd:text-greyScale"
-                />
-              </button>
+                <FeeSummary breakdown={breakdown} />
+              </FeeDisclosureButton>
             }
+            info
+            infoTooltip={FEE_INFO.estimatedFee}
           />
         )}
         {feeOpen && breakdown && (
@@ -301,7 +313,7 @@ function NetworkValue({ name, logoUrl }: { name: string; logoUrl?: string }) {
     <span className="zd:inline-flex zd:items-center zd:gap-1.5">
       <Text className="zd:whitespace-nowrap zd:font-medium">{name}</Text>
       {logoUrl && (
-        <img src={logoUrl} alt="" className="zd:size-4 zd:rounded-full" />
+        <img src={logoUrl} alt="" className="zd:size-4.5 zd:rounded-full" />
       )}
     </span>
   )
@@ -323,11 +335,8 @@ function TxLink({ label, href }: { label: string; href?: string | undefined }) {
       className="zd:inline-flex zd:items-center zd:gap-1 zd:text-body3 zd:text-greyScale zd:hover:text-solarOrange"
     >
       {label}
-      <Icon
-        name="export"
-        className="zd:size-3 zd:text-solarOrange"
-        aria-hidden
-      />
+      {/* Inherits the link's ink color (Figma 20002:38055) — no orange. */}
+      <Icon name="export" className="zd:size-3" aria-hidden />
     </a>
   )
 }

package/src/types.ts

@@ -27,13 +27,13 @@ export type SourceToken = {
 
 export type SmartRoutingAddressConfig = {
   /**
-   * ZeroDev project id; when non-empty it is appended to the server URL
-   * for every request
+   * ZeroDev project id, sent with every address-creation request (the SDK
+   * appends it to the server URL)
    */
   projectId?: string
   /** Chain id where funds settle */
   targetChainId: number
-  /** Smart routing address version, defaults to the latest stable */
+  /** Smart routing address version, defaults to the latest supported */
   version?: SmartRoutingAddressVersion
   /**
    * Destination actions per token type. When omitted, funds are simply
@@ -44,10 +44,7 @@ export type SmartRoutingAddressConfig = {
    * Max slippage in basis points (50 = 0.5%).
    */
   slippage: number
-  /**
-   * Override the smart routing address server root URL; the projectId is
-   * appended to it
-   */
+  /** Override the smart routing address server root URL */
   baseUrl?: string
 }
 

package/src/utils/config.ts

@@ -1,13 +1,12 @@
 import type {
-  CreateSmartRoutingAddressParams,
+  CALL,
   SmartRoutingAddressVersion,
   TOKEN_TYPE,
 } from '@zerodev/smart-routing-address'
 import {
   createCall,
   FLEX,
-  SMART_ROUTING_ADDRESS_SERVER_URL,
-  SMART_ROUTING_ADDRESS_V0_2_1,
+  SMART_ROUTING_ADDRESS_V1_0_0,
   SUPPORTED_TOKENS,
 } from '@zerodev/smart-routing-address'
 import { type Address, type Chain, erc20Abi } from 'viem'
@@ -23,21 +22,7 @@ import { tokenAddressMatches } from './fees'
 export function resolveVersion(
   config: SmartRoutingAddressConfig,
 ): SmartRoutingAddressVersion {
-  return config.version ?? SMART_ROUTING_ADDRESS_V0_2_1
-}
-
-/**
- * Server URL for all smart routing address requests: the server root
- * (default or `config.baseUrl`) with the ZeroDev project id appended.
- * Without a project id the URL is only overridden when `config.baseUrl`
- * is set; undefined leaves the SDK default in place.
- */
-export function resolveBaseUrl(
-  config: SmartRoutingAddressConfig,
-): string | undefined {
-  if (!config.projectId) return config.baseUrl
-  const root = config.baseUrl ?? SMART_ROUTING_ADDRESS_SERVER_URL
-  return `${root.replace(/\/+$/, '')}/${config.projectId}`
+  return config.version ?? SMART_ROUTING_ADDRESS_V1_0_0
 }
 
 export function resolveDashboardUrl(address?: string): string {
@@ -102,11 +87,16 @@ function uniqueTokenTypes(sources: SourceToken[]): TOKEN_TYPE[] {
  * Destination actions for every resolved source token type: ERC-20 deposits
  * are transferred to the recipient and native deposits are forwarded as
  * value. FLEX placeholders are resolved by the server per deposit.
+ *
+ * v0.x managers additionally run `fallBack` when `action` reverts, so legacy
+ * versions get the same calls as the fallback; v1 managers have no fallback
+ * and reject the field.
  */
 export function resolveActions(
   config: SmartRoutingAddressConfig,
   recipient: Address,
-): CreateSmartRoutingAddressParams['actions'] {
+  version: SmartRoutingAddressVersion,
+): { [key in TOKEN_TYPE]?: { action: CALL[]; fallBack?: CALL[] } } {
   const erc20Call = createCall({
     target: FLEX.TOKEN_ADDRESS,
     value: 0n,
@@ -118,15 +108,13 @@ export function resolveActions(
     target: recipient,
     value: FLEX.NATIVE_AMOUNT,
   })
+  const legacy = version !== SMART_ROUTING_ADDRESS_V1_0_0
 
   return Object.fromEntries(
-    uniqueTokenTypes(resolveSourceTokens(config)).map((tokenType) => [
-      tokenType,
-      {
-        action: tokenType === 'NATIVE' ? [nativeCall] : [erc20Call],
-        fallBack: tokenType === 'NATIVE' ? [nativeCall] : [erc20Call],
-      },
-    ]),
+    uniqueTokenTypes(resolveSourceTokens(config)).map((tokenType) => {
+      const action = tokenType === 'NATIVE' ? [nativeCall] : [erc20Call]
+      return [tokenType, { action, ...(legacy && { fallBack: action }) }]
+    }),
   )
 }
 

package/dist/_types/components/QrSheet/QrCode.d.ts

@@ -1,28 +0,0 @@
-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;
-}
-/**
- * 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 declare function QrCode({ value, size, errorCorrectionLevel, eyeRadius, }: QrCodeProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=QrCode.d.ts.map

package/dist/_types/components/QrSheet/QrCode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../../src/components/QrSheet/QrCode.tsx"],"names":[],"mappings":"AAEA,UAAU,WAAW;IACnB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC5C,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAUD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,oBAA0B,EAC1B,SAAa,GACd,EAAE,WAAW,+BAyHb"}

package/src/components/QrSheet/QrCode.tsx

@@ -1,163 +0,0 @@
-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>
-  )
-}