@zerodev/smart-routing-address-react-ui 0.0.4 → 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 }) }]
+    }),
   )
 }