0xtrails 0.12.2 → 0.13.0

package/src/widget/components/Pay.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Search } from "lucide-react"
+import { ArrowLeftRight, ChevronRight, Search } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { getChainInfo } from "../../chains.js"
@@ -9,11 +9,10 @@ import { formatUsdAmountLocaleDisplay } from "../../utils/format.js"
 import type { Token } from "../../tokens.js"
 import { isPassthroughEligible } from "../../utils/passthrough.js"
 import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { usePayMessage } from "../hooks/usePayMessage.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
@@ -76,7 +75,7 @@ export const Pay: React.FC<PayProps> = ({
   toCalldata,
   onAmountUpdate,
 }) => {
-  const { mode } = useMode()
+  const { mode, navigate } = useViewManager()
   const { selectedToken: globalOriginToken, setSelectedToken: setOriginToken } =
     useOriginSelectedToken()
   const {
@@ -86,7 +85,6 @@ export const Pay: React.FC<PayProps> = ({
   } = useDestinationSelectedToken()
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const { setAmount: setGlobalAmount, clearAmount } = useSwapAmount()
-  const { setCurrentScreen } = useCurrentScreen()
   const { targetAmountUsd } = useTargetAmount()
   const { enterFormMode } = useSwapState()
 
@@ -552,7 +550,7 @@ export const Pay: React.FC<PayProps> = ({
             setShowOriginChainList(true)
           }}
           onNavigateToFundMethods={() => {
-            setCurrentScreen("payment-methods")
+            navigate("payment-methods")
           }}
         />
       </div>
@@ -611,6 +609,17 @@ export const Pay: React.FC<PayProps> = ({
           headerContent="Pay"
           headerContentAlign="left"
           showAccountActions={true}
+          customActions={
+            <button
+              type="button"
+              onClick={() => navigate("swap", { backTarget: "send-form" })}
+              className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+              title="Swap"
+            >
+              <ArrowLeftRight className="h-4 w-4" />
+              <span className="text-sm font-medium">Swap</span>
+            </button>
+          }
         />
         <RequiredPropsError
           missingProps={missingRequiredProps}
@@ -627,6 +636,17 @@ export const Pay: React.FC<PayProps> = ({
         headerContent="Pay"
         headerContentAlign="left"
         showAccountActions={true}
+        customActions={
+          <button
+            type="button"
+            onClick={() => navigate("swap", { backTarget: "send-form" })}
+            className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+            title="Swap"
+          >
+            <ArrowLeftRight className="h-4 w-4" />
+            <span className="text-sm font-medium">Swap</span>
+          </button>
+        }
       />
 
       {isPaymentRequest ? (
@@ -851,7 +871,7 @@ export const Pay: React.FC<PayProps> = ({
                 /* Interactive button - user can select recipient */
                 <button
                   type="button"
-                  onClick={() => setCurrentScreen("recipients")}
+                  onClick={() => navigate("recipients")}
                   className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
                 >
                   <div className="text-left">

package/src/widget/components/PaymentMethods.tsx

@@ -3,7 +3,6 @@ import { QrCode, ArrowLeftRight, ChevronRight } from "lucide-react"
 import { useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { ConnectedWallets } from "./ConnectedWallets.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import { useConnections } from "wagmi"
 import { logger } from "../../logger.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
@@ -11,7 +10,8 @@ import {
   type PaymentMethod,
   useOnRampPaymentMethods,
 } from "../hooks/useOnRampPaymentMethods.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
 
 export interface PaymentMethodsProps {
   onBack?: () => void
@@ -26,10 +26,10 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
 }) => {
   const { switchAccount } = useSwitchAccount()
   const connections = useConnections()
-  const { setCurrentScreen } = useCurrentScreen()
-  const { setSelectedFundMethod, setIsMeldOnRamp, setPaymentMethod } =
-    useSelectedFundMethod()
-  const { mode } = useMode()
+  const { mode, goHome } = useViewManager()
+  const { setSelectedFundMethod, setPaymentMethod } = useSelectedFundMethod()
+  const { fundOptions } = useWidgetProps()
+  const hideWallets = fundOptions?.hideWallets ?? []
 
   // Only call useOnRampPaymentMethods if onramp is enabled
   const { paymentMethods, isLoading, error } = useOnRampPaymentMethods({
@@ -59,7 +59,7 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
         setSelectedFundMethod("wallet")
 
         // Navigate to home screen which will redirect to the appropriate mode screen
-        setCurrentScreen("home")
+        goHome()
       }
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to switch wallet:", error)
@@ -82,6 +82,7 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
             showConnectNewWallet={true}
             onWalletSelect={handleWalletSelect}
             backScreen="payment-methods"
+            hiddenWallets={hideWallets as string[]}
           />
 
           {/* Divider */}
@@ -120,12 +121,11 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
                           type="button"
                           onClick={() => {
                             setSelectedFundMethod("onramp-meld")
-                            setIsMeldOnRamp(true)
                             setPaymentMethod({
                               id: method.paymentMethod,
                               name: method.name,
                             })
-                            setCurrentScreen("home")
+                            goHome()
                           }}
                           className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
                         >
@@ -157,7 +157,7 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
                     setSelectedFundMethod("onramp-mesh")
                     // Navigate to home screen so user can fill out the form
                     // When they click "Continue to Exchange", it will navigate to onramp screen
-                    setCurrentScreen("home")
+                    goHome()
                   }}
                   className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
                 >

package/src/widget/components/PoolDeposit.tsx

@@ -22,7 +22,7 @@ import { useAmountUsd } from "../hooks/useAmountUsd.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import { useEarnPool } from "../hooks/useEarnPool.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
@@ -88,7 +88,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   onTrackToken,
   onPoolSelectorStateChange,
 }) => {
-  const { mode } = useMode()
+  const { mode } = useViewManager()
   const { isBalanceVisible } = useBalanceVisible()
   const { selectedToken: originToken, setSelectedToken: setOriginToken } =
     useOriginSelectedToken()

package/src/widget/components/QrCode.tsx

@@ -54,12 +54,14 @@ export const QrCode: React.FC<QrCodeProps> = ({
     const matrixSize = matrix.length
     if (!matrixSize) return
 
-    const padding = 4
+    const quietZoneModules = 4
     const fillColor = "#000000"
     const backgroundColor = "#ffffff"
-    const cellSize = (size - padding * 2) / matrixSize
+    const cellSize = size / (matrixSize + quietZoneModules * 2)
+    const qrOrigin = quietZoneModules * cellSize
+    const qrCodeSize = matrixSize * cellSize
     const shouldReserveLogoSpace = Boolean(imageUrl)
-    const logoSize = shouldReserveLogoSpace ? size * 0.2 : 0
+    const logoSize = shouldReserveLogoSpace ? qrCodeSize * 0.2 : 0
     const logoMatrixSize = shouldReserveLogoSpace
       ? Math.max(2, Math.floor(logoSize / cellSize))
       : 0
@@ -111,9 +113,9 @@ export const QrCode: React.FC<QrCodeProps> = ({
             )
             rect.setAttribute(
               "x",
-              (padding + currentRunStart * cellSize).toFixed(3),
+              (qrOrigin + currentRunStart * cellSize).toFixed(3),
             )
-            rect.setAttribute("y", (padding + rowIndex * cellSize).toFixed(3))
+            rect.setAttribute("y", (qrOrigin + rowIndex * cellSize).toFixed(3))
             rect.setAttribute("width", (runLength * cellSize).toFixed(3))
             rect.setAttribute("height", cellSize.toFixed(3))
             rect.setAttribute("fill", fillColor)
@@ -138,9 +140,9 @@ export const QrCode: React.FC<QrCodeProps> = ({
             )
             rect.setAttribute(
               "x",
-              (padding + currentRunStart * cellSize).toFixed(3),
+              (qrOrigin + currentRunStart * cellSize).toFixed(3),
             )
-            rect.setAttribute("y", (padding + rowIndex * cellSize).toFixed(3))
+            rect.setAttribute("y", (qrOrigin + rowIndex * cellSize).toFixed(3))
             rect.setAttribute("width", (runLength * cellSize).toFixed(3))
             rect.setAttribute("height", cellSize.toFixed(3))
             rect.setAttribute("fill", fillColor)
@@ -159,9 +161,9 @@ export const QrCode: React.FC<QrCodeProps> = ({
         )
         rect.setAttribute(
           "x",
-          (padding + currentRunStart * cellSize).toFixed(3),
+          (qrOrigin + currentRunStart * cellSize).toFixed(3),
         )
-        rect.setAttribute("y", (padding + rowIndex * cellSize).toFixed(3))
+        rect.setAttribute("y", (qrOrigin + rowIndex * cellSize).toFixed(3))
         rect.setAttribute("width", (runLength * cellSize).toFixed(3))
         rect.setAttribute("height", cellSize.toFixed(3))
         rect.setAttribute("fill", fillColor)
@@ -170,8 +172,8 @@ export const QrCode: React.FC<QrCodeProps> = ({
     })
 
     if (imageUrl) {
-      const logoX = (size - logoSize) / 2
-      const logoY = (size - logoSize) / 2
+      const logoX = qrOrigin + (qrCodeSize - logoSize) / 2
+      const logoY = qrOrigin + (qrCodeSize - logoSize) / 2
 
       const logoBackground = document.createElementNS(
         "http://www.w3.org/2000/svg",

package/src/widget/components/QuoteDetails.tsx

@@ -15,7 +15,10 @@ import {
   formatUsdAmountDisplay,
   formatUsdAmountLocaleDisplay,
 } from "../../utils/format.js"
-import type { TransactionState } from "../../transactions.js"
+import {
+  type TransactionState,
+  isDisplayableTransactionHash,
+} from "../../transactions.js"
 import { isNativeToken, truncateAddress } from "../../utils/address.js"
 import { isSameChainSameToken } from "../../utils/passthrough.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
@@ -77,9 +80,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     ? onRampQuote?.totalFee / (fiatToUsdExchangeRate ?? 1)
     : 0
 
-  logger.console.log("[trails-sdk] OnRamp Quote", {
-    onRampQuote,
-  })
+  if (onRampQuote) {
+    logger.console.log("[trails-sdk] OnRamp Quote", {
+      onRampQuote,
+    })
+  }
 
   // Sync with initialExpanded prop changes
   useEffect(() => {
@@ -1078,10 +1083,15 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       {displayStates.map((txState, index) => {
                         const liveTxState = txState as TransactionState
                         const hasTxHash =
-                          hasLiveStates && liveTxState.transactionHash
+                          hasLiveStates &&
+                          isDisplayableTransactionHash(
+                            liveTxState.transactionHash,
+                          )
                         const txExplorerUrl =
                           liveTxState.explorerUrl ||
-                          (liveTxState.transactionHash && liveTxState.chainId
+                          (isDisplayableTransactionHash(
+                            liveTxState.transactionHash,
+                          ) && liveTxState.chainId
                             ? getExplorerUrl({
                                 txHash: liveTxState.transactionHash,
                                 chainId: liveTxState.chainId,

package/src/widget/components/Receipt.tsx

@@ -2,20 +2,26 @@ import { useQuery } from "@tanstack/react-query"
 import type React from "react"
 import type { ReactNode } from "react"
 import { useEffect, useMemo, useState } from "react"
+import { useAccount } from "wagmi"
 import { getChainInfo } from "../../chains.js"
 import { getExplorerUrl } from "../../explorer.js"
 import { logger } from "../../logger.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { TransactionState } from "../../transactions.js"
+import {
+  type TransactionState,
+  isDisplayableTransactionHash,
+} from "../../transactions.js"
 import { getTxTimeDiff } from "../../transactions.js"
-import { formatDuration } from "../../utils/time.js"
+import { SECOND_MS, formatDuration } from "../../utils/time.js"
 import { hasMetaTxError } from "../../utils/passthrough.js"
+import { useIntentReceiptBalances } from "../hooks/useIntentReceiptBalances.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 import { hasAnyFailedOrAbortedTransactions } from "../utils/transactionFailure.js"
 import { ChainImage } from "./ChainImage.js"
 import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
 import { QuoteDetails } from "./QuoteDetails.js"
+import ReceiptRecoverableFunds from "./ReceiptRecoverableFunds.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
 
@@ -73,12 +79,15 @@ function useReceipt(transactionStates?: TransactionState[]) {
   const latestTxWithHash = (transactionStates || [])
     .slice()
     .reverse()
-    .find((tx) => tx.transactionHash && tx.chainId)
+    .find(
+      (tx) => isDisplayableTransactionHash(tx.transactionHash) && tx.chainId,
+    )
 
   // Generate explorer URL if we have a hash but no URL
   const finalExplorerUrl =
     latestTxWithHash?.explorerUrl ||
-    (latestTxWithHash?.transactionHash && latestTxWithHash?.chainId
+    (isDisplayableTransactionHash(latestTxWithHash?.transactionHash) &&
+    latestTxWithHash?.chainId
       ? getExplorerUrl({
           txHash: latestTxWithHash.transactionHash,
           chainId: latestTxWithHash.chainId,
@@ -110,6 +119,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   actionButtonText,
   onRampQuote,
 }) => {
+  const { address } = useAccount()
   const { trailsAppUrl } = useTrails()
   const [showContent, setShowContent] = useState(false)
   const [showRefundInfo, setShowRefundInfo] = useState(false)
@@ -208,6 +218,38 @@ export const Receipt: React.FC<ReceiptProps> = ({
     if (!trailsAppUrl || !quote?.intentId) return null
     return `${trailsAppUrl}/intent/${quote.intentId}`
   }
+  const trailsIntentUrl = intentReceiptUrl()
+  const [isRecoverableFundsDelayElapsed, setIsRecoverableFundsDelayElapsed] =
+    useState(false)
+
+  useEffect(() => {
+    if (!quote?.intentId) {
+      setIsRecoverableFundsDelayElapsed(false)
+      return
+    }
+
+    setIsRecoverableFundsDelayElapsed(false)
+
+    const timeoutId = setTimeout(() => {
+      setIsRecoverableFundsDelayElapsed(true)
+    }, 2 * SECOND_MS)
+
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [quote?.intentId])
+
+  const {
+    chainGroups: recoverableChainGroups,
+    hasRecoverableFunds,
+    isLoading: isRecoverableFundsLoading,
+    error: recoverableFundsError,
+    refetch: refetchRecoverableFunds,
+  } = useIntentReceiptBalances({
+    intentId: quote?.intentId ?? undefined,
+    ownerAddress: address,
+    enabled: isRecoverableFundsDelayElapsed && !!quote?.intentId,
+  })
 
   // Use provided totalCompletionSeconds if available, otherwise use calculated time
   const completionTimeSeconds =
@@ -256,8 +298,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
   )
 
   // Only show error state if we truly have no transaction hash at all OR if any transaction is aborted
-  const hasAnyTransactionHash = transactionStates.some(
-    (tx) => tx.transactionHash,
+  const hasAnyTransactionHash = transactionStates.some((tx) =>
+    isDisplayableTransactionHash(tx.transactionHash),
   )
 
   // Log intent ID if available when aborted (for debugging)
@@ -358,6 +400,15 @@ export const Receipt: React.FC<ReceiptProps> = ({
           </div>
         )}
 
+        <ReceiptRecoverableFunds
+          hasRecoverableFunds={hasRecoverableFunds}
+          chainGroups={recoverableChainGroups}
+          isLoading={isRecoverableFundsLoading}
+          error={recoverableFundsError?.message || null}
+          trailsIntentUrl={trailsIntentUrl}
+          onRefresh={refetchRecoverableFunds}
+        />
+
         {/* Quote Details - Show even in failed state */}
         {quoteDetailsSection}
 
@@ -604,6 +655,15 @@ export const Receipt: React.FC<ReceiptProps> = ({
           </div>
         )}
 
+        <ReceiptRecoverableFunds
+          hasRecoverableFunds={hasRecoverableFunds}
+          chainGroups={recoverableChainGroups}
+          isLoading={isRecoverableFundsLoading}
+          error={recoverableFundsError?.message || null}
+          trailsIntentUrl={trailsIntentUrl}
+          onRefresh={refetchRecoverableFunds}
+        />
+
         {/* Quote Details */}
         {quoteDetailsSection}
 

package/src/widget/components/ReceiptRecoverableFunds.tsx

@@ -0,0 +1,135 @@
+import type React from "react"
+import { getChainInfo } from "../../chains.js"
+import { ChainImage } from "./ChainImage.js"
+
+export type RecoverableToken = {
+  chainId: number
+  contractAddress: string
+  symbol: string
+  decimals: number
+  rawBalance: string
+  formattedBalance: string
+}
+
+export type RecoverableChainGroup = {
+  intentAddress: string
+  chainId: number
+  tokens: RecoverableToken[]
+}
+
+interface ReceiptRecoverableFundsProps {
+  hasRecoverableFunds: boolean
+  chainGroups: RecoverableChainGroup[]
+  isLoading?: boolean
+  error?: string | null
+  trailsIntentUrl?: string | null
+  onRefresh?: () => void
+}
+
+export const ReceiptRecoverableFunds: React.FC<
+  ReceiptRecoverableFundsProps
+> = ({
+  hasRecoverableFunds,
+  chainGroups,
+  isLoading = false,
+  error = null,
+  trailsIntentUrl,
+  onRefresh,
+}) => {
+  if (isLoading) return null
+
+  if (error) {
+    return (
+      <div className="rounded-xl bg-gray-100 dark:bg-gray-800 p-3">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Could not verify remaining funds right now.
+        </p>
+        {onRefresh && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="mt-2 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 cursor-pointer"
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  if (!hasRecoverableFunds || chainGroups.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="rounded-xl bg-warning p-[1px]">
+      <div className="rounded-xl bg-background-overlay p-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+            Funds available to recover
+          </h3>
+          {trailsIntentUrl && (
+            <a
+              href={trailsIntentUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              Recover
+              <svg
+                className="w-3 h-3 text-blue-600 dark:text-blue-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <title>External Link</title>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          )}
+        </div>
+
+        <div className="mt-3 space-y-3">
+          {chainGroups.map((group) => {
+            const chainName = getChainInfo(group.chainId)?.name || "Unknown"
+
+            return (
+              <div key={`${group.intentAddress}-${group.chainId}`}>
+                <div className="mb-2 flex items-center gap-2">
+                  <ChainImage chainId={group.chainId} size={14} />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
+                    {chainName}
+                  </span>
+                </div>
+
+                <div className="space-y-1">
+                  {group.tokens.map((token) => (
+                    <div
+                      key={`${token.chainId}-${token.contractAddress}`}
+                      className="flex items-center justify-between rounded-lg bg-gray-100 dark:bg-gray-800 px-2 py-1.5"
+                    >
+                      <span className="text-xs text-gray-600 dark:text-gray-400 truncate">
+                        {token.symbol}
+                      </span>
+                      <span className="text-xs font-medium text-gray-900 dark:text-white">
+                        {token.formattedBalance}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ReceiptRecoverableFunds

package/src/widget/components/RecipientSelectorButton.tsx

@@ -1,27 +1,16 @@
 import { ChevronRight } from "lucide-react"
 import type React from "react"
-import { useBack } from "../hooks/useBack.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useMode } from "../hooks/useMode.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { AddressOrEnsName } from "./AddressOrEnsName.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 
-export const RecipientSelectorButton: React.FC = () => {
-  const { setCurrentScreenWithBack } = useBack()
-  const { mode } = useMode()
-  const { currentScreen } = useCurrentScreen()
-  const { selectedRecipient } = useSelectedRecipient()
+export const RecipientSelectorButton: React.FC<{
+  selectedRecipient: string | null
+}> = ({ selectedRecipient }) => {
+  const { navigate, screen } = useViewManager()
 
   const handleClick = () => {
-    // Determine back screen based on current screen or mode
-    let backScreen: "fund-form" | "withdraw" | "home" = "home"
-    if (currentScreen === "withdraw") {
-      backScreen = "withdraw"
-    } else if (mode === "fund" || currentScreen === "fund-form") {
-      backScreen = "fund-form"
-    }
-    setCurrentScreenWithBack("recipients", backScreen)
+    navigate("recipients", { backTarget: screen })
   }
 
   return (