refactor(react-ui): ArrowCardPair

.changeset/curly-lions-drum.md

@@ -0,0 +1,5 @@
+---
+"@zerodev/react-ui": patch
+---
+
+feat: promote `ArrowCardPair` (and `ArrowView`) to `@zerodev/react-ui`. Previously local to wallet-react-ui's signing pages; now a shared primitive available to other consumers (e.g. smart-routing-address-react-ui's Deposit flow).

packages/react-ui/src/components/ArrowCardPair/ArrowCardPair.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Text } from '../Text'
+import { Wrapper } from '../Wrapper'
+import { ArrowCardPair } from '.'
+
+const meta: Meta<typeof ArrowCardPair> = {
+  title: 'Layout/ArrowCardPair',
+  component: ArrowCardPair,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Two cards with a chevron-down arrow floating between them, and rounded
+ * notches clipped out of each card where the arrow sits. Used to visually
+ * connect a "from" and "to" side of a swap, transfer, or deposit flow.
+ */
+export const Default: Story = {
+  args: {
+    topCard: (
+      <Wrapper variant="ghost" className="zd:rounded-2xl zd:p-4">
+        <Text className="zd:text-h3">Top card</Text>
+      </Wrapper>
+    ),
+    bottomCard: (
+      <Wrapper variant="ghost" className="zd:rounded-2xl zd:p-4">
+        <Text className="zd:text-h3">Bottom card</Text>
+      </Wrapper>
+    ),
+  },
+}

packages/wallet-react-ui/src/signing/components/ArrowCardPair/ArrowCardPair.test.tsx → packages/react-ui/src/components/ArrowCardPair/ArrowCardPair.test.tsx

@@ -1,8 +1,11 @@
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-vi.mock('@zerodev/react-ui', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@zerodev/react-ui')>()
+// The real Icon component uses `import.meta.glob` to eagerly load SVGs from
+// disk, which vitest can't resolve. Stub it with a minimal mock that emits
+// `data-testid="icon-<name>"` for query-by-testid.
+vi.mock('../Icon', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../Icon')>()
   const React = await import('react')
 
   const MockIcon = ({

packages/wallet-react-ui/src/signing/components/ArrowCardPair/index.tsx → packages/react-ui/src/components/ArrowCardPair/index.tsx

@@ -1,5 +1,7 @@
-import { cn, Icon, Wrapper } from '@zerodev/react-ui'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { cn } from '../../utils/common'
+import { Icon } from '../Icon'
+import { Wrapper } from '../Wrapper'
 
 const ARROW_INNER = 44
 const PADDING = 4

packages/react-ui/src/index.ts

@@ -3,6 +3,11 @@
  * React UI primitives for ZeroDev
  */
 
+export {
+  ArrowCardPair,
+  type ArrowCardPairProps,
+  ArrowView,
+} from './components/ArrowCardPair'
 export { Badge, type BadgeProps } from './components/Badge'
 export { Button, type ButtonProps } from './components/Button'
 export { Callout, type CalloutProps } from './components/Callout'

packages/wallet-react-ui/src/signing/pages/CollectionApproval.tsx

@@ -1,8 +1,13 @@
-import { DataRow, DataRowSkeleton, Icon, Text } from '@zerodev/react-ui'
+import {
+  ArrowCardPair,
+  DataRow,
+  DataRowSkeleton,
+  Icon,
+  Text,
+} from '@zerodev/react-ui'
 import type { Address, Hex } from 'viem'
 import { useReadContract } from 'wagmi'
 import { shortenHex } from '../../shared/utils/common'
-import { ArrowCardPair } from '../components/ArrowCardPair'
 import { InfoCard } from '../components/InfoCard'
 import { Section } from '../components/Section'
 import { SigningLayout } from '../components/SigningLayout'

packages/wallet-react-ui/src/signing/pages/Erc20Approval.tsx

@@ -1,8 +1,13 @@
-import { DataRow, DataRowSkeleton, Icon, Text } from '@zerodev/react-ui'
+import {
+  ArrowCardPair,
+  DataRow,
+  DataRowSkeleton,
+  Icon,
+  Text,
+} from '@zerodev/react-ui'
 import { type Address, erc20Abi, formatUnits, type Hex, maxUint256 } from 'viem'
 import { useReadContract } from 'wagmi'
 import { shortenHex } from '../../shared/utils/common'
-import { ArrowCardPair } from '../components/ArrowCardPair'
 import { InfoCard } from '../components/InfoCard'
 import { Section } from '../components/Section'
 import { SigningLayout } from '../components/SigningLayout'

packages/wallet-react-ui/src/signing/pages/Erc20Transfer.tsx

@@ -1,8 +1,13 @@
-import { DataRow, DataRowSkeleton, Icon, Text } from '@zerodev/react-ui'
+import {
+  ArrowCardPair,
+  DataRow,
+  DataRowSkeleton,
+  Icon,
+  Text,
+} from '@zerodev/react-ui'
 import { type Address, erc20Abi, formatUnits, type Hex } from 'viem'
 import { useReadContract } from 'wagmi'
 import { shortenHex } from '../../shared/utils/common'
-import { ArrowCardPair } from '../components/ArrowCardPair'
 import { InfoCard } from '../components/InfoCard'
 import { Section } from '../components/Section'
 import { SigningLayout } from '../components/SigningLayout'

packages/wallet-react-ui/src/signing/pages/EthTransfer.tsx

@@ -1,7 +1,12 @@
-import { DataRow, DataRowSkeleton, Icon, Text } from '@zerodev/react-ui'
+import {
+  ArrowCardPair,
+  DataRow,
+  DataRowSkeleton,
+  Icon,
+  Text,
+} from '@zerodev/react-ui'
 import { type Address, formatEther, type Hex } from 'viem'
 import { shortenHex } from '../../shared/utils/common'
-import { ArrowCardPair } from '../components/ArrowCardPair'
 import { InfoCard } from '../components/InfoCard'
 import { Section } from '../components/Section'
 import { SigningLayout } from '../components/SigningLayout'