diff --git a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
index 55c340738..20ba9974c 100644
--- a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
@@ -7,20 +7,13 @@ import ErrorAlert from '@/components/Global/ErrorAlert'
 import NavHeader from '@/components/Global/NavHeader'
 import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard'
 import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
-import {
-    PEANUT_WALLET_CHAIN,
-    PEANUT_WALLET_TOKEN,
-    PEANUT_WALLET_TOKEN_DECIMALS,
-    PEANUT_WALLET_TOKEN_SYMBOL,
-} from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { AccountType, Account } from '@/interfaces'
 import { shortenAddressLong } from '@/utils/general.utils'
-import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import { encodeFunctionData, erc20Abi, parseUnits } from 'viem'
 import DirectSuccessView from '@/components/Payment/Views/Status.payment.view'
 import { ErrorHandler, getBridgeChainName } from '@/utils'
 import { getOfframpCurrencyConfig } from '@/utils/bridge.utils'
@@ -33,7 +26,7 @@ type View = 'INITIAL' | 'SUCCESS'
 export default function WithdrawBankPage() {
     const { amountToWithdraw, selectedBankAccount: bankAccount, error, setError } = useWithdrawFlow()
     const { user, fetchUser } = useAuth()
-    const { address, sendTransactions } = useWallet()
+    const { address, sendMoney } = useWallet()
     const router = useRouter()
     const [isLoading, setIsLoading] = useState(false)
     const [view, setView] = useState<View>('INITIAL')
@@ -136,20 +129,7 @@ export default function WithdrawBankPage() {
             }
 
             // Step 2: prepare and send the transaction from peanut wallet to the deposit address
-            const amountToSend = parseUnits(createPayload.amount, PEANUT_WALLET_TOKEN_DECIMALS)
-
-            const txData = encodeFunctionData({
-                abi: erc20Abi,
-                functionName: 'transfer',
-                args: [data.depositInstructions.toAddress as `0x${string}`, amountToSend],
-            })
-
-            const transaction: peanutInterfaces.IPeanutUnsignedTransaction = {
-                to: PEANUT_WALLET_TOKEN,
-                data: txData,
-            }
-
-            const receipt = await sendTransactions([transaction], PEANUT_WALLET_CHAIN.id.toString())
+            const receipt = await sendMoney(data.depositInstructions.toAddress as `0x${string}`, createPayload.amount)
 
             if (receipt.status === 'reverted') {
                 throw new Error('Transaction reverted by the network.')
diff --git a/src/app/(mobile-ui)/withdraw/crypto/page.tsx b/src/app/(mobile-ui)/withdraw/crypto/page.tsx
index 84f7136a2..2b18066d6 100644
--- a/src/app/(mobile-ui)/withdraw/crypto/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/crypto/page.tsx
@@ -8,6 +8,7 @@ import ConfirmWithdrawView from '@/components/Withdraw/views/Confirm.withdraw.vi
 import InitialWithdrawView from '@/components/Withdraw/views/Initial.withdraw.view'
 import { useWithdrawFlow, WithdrawData } from '@/context/WithdrawFlowContext'
 import { InitiatePaymentPayload, usePaymentInitiator } from '@/hooks/usePaymentInitiator'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
 import { paymentActions } from '@/redux/slices/payment-slice'
 import { chargesApi } from '@/services/charges'
@@ -21,13 +22,15 @@ import {
 } from '@/services/services.types'
 import { NATIVE_TOKEN_ADDRESS } from '@/utils/token.utils'
 import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import { useRouter } from 'next/navigation'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
 export default function WithdrawCryptoPage() {
     const router = useRouter()
     const dispatch = useAppDispatch()
     const { chargeDetails: activeChargeDetailsFromStore } = usePaymentStore()
+    const { isConnected: isPeanutWallet } = useWallet()
     const {
         amountToWithdraw,
         setAmountToWithdraw,
@@ -47,10 +50,25 @@ export default function WithdrawCryptoPage() {
         initiatePayment,
         isProcessing,
         error: paymentErrorFromHook,
-        feeCalculations,
         prepareTransactionDetails,
+        xChainRoute,
+        isCalculatingFees,
+        isPreparingTx,
     } = usePaymentInitiator()
 
+    // Helper to manage errors consistently
+    const setError = useCallback(
+        (error: string | null) => {
+            setPaymentError(error)
+            dispatch(paymentActions.setError(error))
+        },
+        [setPaymentError, dispatch]
+    )
+
+    const clearErrors = useCallback(() => {
+        setError(null)
+    }, [setError])
+
     useEffect(() => {
         if (!amountToWithdraw) {
             console.error('Amount not available in WithdrawFlowContext for withdrawal, redirecting.')
@@ -58,7 +76,7 @@ export default function WithdrawCryptoPage() {
             return
         }
         dispatch(paymentActions.setChargeDetails(null))
-        setPaymentError(null)
+        clearErrors()
         setCurrentView('INITIAL')
     }, [amountToWithdraw, router, dispatch, setAmountToWithdraw, setCurrentView])
 
@@ -68,26 +86,31 @@ export default function WithdrawCryptoPage() {
 
     useEffect(() => {
         if (currentView === 'CONFIRM' && activeChargeDetailsFromStore && withdrawData) {
-            prepareTransactionDetails(activeChargeDetailsFromStore, false)
+            console.log('Preparing withdraw transaction details...')
+            console.dir(activeChargeDetailsFromStore)
+            prepareTransactionDetails(
+                activeChargeDetailsFromStore,
+                PEANUT_WALLET_TOKEN,
+                PEANUT_WALLET_CHAIN.id.toString(),
+                amountToWithdraw
+            )
         }
-    }, [currentView, activeChargeDetailsFromStore, withdrawData, prepareTransactionDetails])
+    }, [currentView, activeChargeDetailsFromStore, withdrawData, prepareTransactionDetails, amountToWithdraw])
 
     const handleSetupReview = useCallback(
         async (data: Omit<WithdrawData, 'amount'>) => {
             if (!amountToWithdraw) {
                 console.error('Amount to withdraw is not set or not available from context')
-                setPaymentError('Withdrawal amount is missing.')
+                setError('Withdrawal amount is missing.')
                 return
             }
-            const completeWithdrawData = { ...data, amount: amountToWithdraw }
-            setWithdrawData(completeWithdrawData)
 
-            setIsPreparingReview(true)
-            setPaymentError(null)
-            dispatch(paymentActions.setError(null))
+            clearErrors()
             dispatch(paymentActions.setChargeDetails(null))
 
             try {
+                const completeWithdrawData = { ...data, amount: amountToWithdraw }
+                setWithdrawData(completeWithdrawData)
                 const apiRequestPayload: CreateRequestPayloadServices = {
                     recipientAddress: completeWithdrawData.address,
                     chainId: completeWithdrawData.chain.chainId.toString(),
@@ -97,9 +120,9 @@ export default function WithdrawCryptoPage() {
                             ? peanutInterfaces.EPeanutLinkType.native
                             : peanutInterfaces.EPeanutLinkType.erc20
                     ),
+                    tokenAmount: amountToWithdraw,
+                    tokenDecimals: completeWithdrawData.token.decimals.toString(),
                     tokenSymbol: completeWithdrawData.token.symbol,
-                    tokenDecimals: String(completeWithdrawData.token.decimals),
-                    tokenAmount: completeWithdrawData.amount,
                 }
                 const newRequest: TRequestResponse = await requestsApi.create(apiRequestPayload)
 
@@ -109,7 +132,7 @@ export default function WithdrawCryptoPage() {
 
                 const chargePayload: CreateChargeRequest = {
                     pricing_type: 'fixed_price',
-                    local_price: { amount: completeWithdrawData.amount, currency: 'USD' },
+                    local_price: { amount: completeWithdrawData.amount || amountToWithdraw, currency: 'USD' },
                     baseUrl: window.location.origin,
                     requestId: newRequest.uuid,
                     requestProps: {
@@ -139,8 +162,7 @@ export default function WithdrawCryptoPage() {
             } catch (err: any) {
                 console.error('Error during setup review (request/charge creation):', err)
                 const errorMessage = err.message || 'Could not prepare withdrawal. Please try again.'
-                setPaymentError(errorMessage)
-                dispatch(paymentActions.setError(errorMessage))
+                setError(errorMessage)
             } finally {
                 setIsPreparingReview(false)
             }
@@ -154,18 +176,18 @@ export default function WithdrawCryptoPage() {
             setCurrentView('CONFIRM')
         } else {
             console.error('Proceeding to confirm, but charge details or withdraw data are missing.')
-            setPaymentError('Failed to load withdrawal details for confirmation. Please go back and try again.')
+            setError('Failed to load withdrawal details for confirmation. Please go back and try again.')
         }
     }, [activeChargeDetailsFromStore, withdrawData, setCurrentView])
 
     const handleConfirmWithdrawal = useCallback(async () => {
         if (!activeChargeDetailsFromStore || !withdrawData || !amountToWithdraw) {
             console.error('Withdraw data, active charge details, or amount missing for final confirmation')
-            setPaymentError('Essential withdrawal information is missing.')
+            setError('Essential withdrawal information is missing.')
             return
         }
 
-        setPaymentError(null)
+        clearErrors()
         dispatch(paymentActions.setError(null))
 
         const paymentPayload: InitiatePaymentPayload = {
@@ -191,8 +213,7 @@ export default function WithdrawCryptoPage() {
                 setCurrentView('INITIAL')
 
                 // clear any errors
-                setPaymentError(null)
-                dispatch(paymentActions.setError(null))
+                clearErrors()
 
                 // clear charge details
                 dispatch(paymentActions.setChargeDetails(null))
@@ -200,8 +221,7 @@ export default function WithdrawCryptoPage() {
         } else {
             console.error('Withdrawal execution failed:', result.error)
             const errMsg = result.error || 'Withdrawal processing failed.'
-            setPaymentError(errMsg)
-            dispatch(paymentActions.setError(errMsg))
+            setError(errMsg)
         }
     }, [
         activeChargeDetailsFromStore,
@@ -215,15 +235,66 @@ export default function WithdrawCryptoPage() {
         setPaymentError,
     ])
 
+    const handleRouteRefresh = useCallback(async () => {
+        if (!activeChargeDetailsFromStore) return
+        console.log('Refreshing withdraw route due to expiry...')
+        console.log('About to call prepareTransactionDetails with:', activeChargeDetailsFromStore)
+        await prepareTransactionDetails(
+            activeChargeDetailsFromStore,
+            PEANUT_WALLET_TOKEN,
+            PEANUT_WALLET_CHAIN.id.toString(),
+            amountToWithdraw
+        )
+    }, [activeChargeDetailsFromStore, prepareTransactionDetails, amountToWithdraw])
+
     const handleBackFromConfirm = useCallback(() => {
         setCurrentView('INITIAL')
-        setPaymentError(null)
+        clearErrors()
         dispatch(paymentActions.setError(null))
         dispatch(paymentActions.setChargeDetails(null))
     }, [dispatch, setCurrentView])
 
-    const displayError = paymentError
-    const confirmButtonDisabled = !activeChargeDetailsFromStore || isProcessing
+    // Check if this is a cross-chain withdrawal (align with usePaymentInitiator logic)
+    const isCrossChainWithdrawal = useMemo<boolean>(() => {
+        if (!withdrawData || !activeChargeDetailsFromStore) return false
+
+        // In withdraw flow, we're moving from Peanut Wallet to the selected chain
+        // This matches the logic in usePaymentInitiator for withdraw flows
+        const fromChainId = isPeanutWallet ? PEANUT_WALLET_CHAIN.id.toString() : withdrawData.chain.chainId
+        const toChainId = activeChargeDetailsFromStore.chainId
+
+        console.log('Cross-chain check:', {
+            fromChainId,
+            toChainId,
+            isPeanutWallet,
+            isCrossChain: fromChainId !== toChainId,
+        })
+
+        return fromChainId !== toChainId
+    }, [withdrawData, activeChargeDetailsFromStore, isPeanutWallet])
+
+    // Check for route type errors (similar to payment flow)
+    const routeTypeError = useMemo<string | null>(() => {
+        if (!isCrossChainWithdrawal || !xChainRoute || !isPeanutWallet) return null
+
+        // For peanut wallet flows, only RFQ routes are allowed
+        if (xChainRoute.type === 'swap') {
+            return 'This token pair is not available for withdraw.'
+        }
+
+        return null
+    }, [isCrossChainWithdrawal, xChainRoute, isPeanutWallet])
+
+    // Display payment errors first (user actions), then route errors (system limitations)
+    const displayError = paymentError ?? routeTypeError
+
+    // Get network fee from route or fallback
+    const networkFee = useCallback(() => {
+        if (xChainRoute?.feeCostsUsd) {
+            return xChainRoute.feeCostsUsd < 0.01 ? '$ <0.01' : `$ ${xChainRoute.feeCostsUsd.toFixed(2)}`
+        }
+        return '$ 0.00'
+    }, [xChainRoute])
 
     if (!amountToWithdraw) {
         return <PeanutLoading />
@@ -248,9 +319,15 @@ export default function WithdrawCryptoPage() {
                     toAddress={withdrawData.address}
                     onConfirm={handleConfirmWithdrawal}
                     onBack={handleBackFromConfirm}
-                    isProcessing={confirmButtonDisabled}
+                    isProcessing={isProcessing}
                     error={displayError}
-                    networkFee={feeCalculations?.estimatedFee}
+                    networkFee={networkFee()}
+                    // Timer props for cross-chain withdrawals
+                    isCrossChain={isCrossChainWithdrawal}
+                    routeExpiry={xChainRoute?.expiry}
+                    isRouteLoading={isCalculatingFees || isPreparingTx}
+                    onRouteRefresh={handleRouteRefresh}
+                    xChainRoute={xChainRoute ?? undefined}
                 />
             )}
 
diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx
index dbba91a71..361a456b1 100644
--- a/src/app/[...recipient]/client.tsx
+++ b/src/app/[...recipient]/client.tsx
@@ -391,7 +391,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                 <InitialPaymentView
                     {...(parsedPaymentData as ParsedURL)}
                     isAddMoneyFlow={isAddMoneyFlow}
-                    isDirectPay={isDirectPay}
+                    isDirectUsdPayment={isDirectPay}
                     currency={
                         currencyCode
                             ? {
@@ -410,6 +410,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                     isPintaReq={parsedPaymentData?.token?.symbol === 'PNT'}
                     currencyAmount={currencyCode && currencyAmount ? `${currencySymbol} ${currencyAmount}` : undefined}
                     isAddMoneyFlow={isAddMoneyFlow}
+                    isDirectUsdPayment={isDirectPay}
                 />
             )}
             {currentView === 'STATUS' && (
diff --git a/src/app/actions/clients.ts b/src/app/actions/clients.ts
index fe4c0c069..dc7229880 100644
--- a/src/app/actions/clients.ts
+++ b/src/app/actions/clients.ts
@@ -17,22 +17,16 @@ export type FeeOptions = {
     error?: string | null
 }
 
-export const getPublicClient = unstable_cache(
-    async (chainId: ChainId): Promise<PublicClient> => {
-        let client: PublicClient | undefined = PUBLIC_CLIENTS_BY_CHAIN[chainId]?.client
-        if (client) return client
-        const chain: Chain = extractChain({ chains: allChains, id: chainId })
-        if (!chain) throw new Error(`No chain found for chainId ${chainId}`)
-        return createPublicClient({
-            transport: http(infuraRpcUrls[chainId]),
-            chain,
-        })
-    },
-    ['getPublicClient'],
-    {
-        tags: ['getPublicClient'],
-    }
-)
+export const getPublicClient = async (chainId: ChainId): Promise<PublicClient> => {
+    let client: PublicClient | undefined = PUBLIC_CLIENTS_BY_CHAIN[chainId]?.client
+    if (client) return client
+    const chain: Chain = extractChain({ chains: allChains, id: chainId })
+    if (!chain) throw new Error(`No chain found for chainId ${chainId}`)
+    return createPublicClient({
+        transport: http(infuraRpcUrls[chainId]),
+        chain,
+    })
+}
 
 export type PreparedTx = {
     account: Hash
diff --git a/src/app/actions/tokens.ts b/src/app/actions/tokens.ts
index 0d760e855..f0d6ad166 100644
--- a/src/app/actions/tokens.ts
+++ b/src/app/actions/tokens.ts
@@ -2,10 +2,11 @@
 import { unstable_cache } from 'next/cache'
 import { fetchWithSentry, isAddressZero, estimateIfIsStableCoinFromPrice } from '@/utils'
 import { type ITokenPriceData } from '@/interfaces'
-import type { Address } from 'viem'
 import { parseAbi } from 'viem'
 import { type ChainId, getPublicClient } from '@/app/actions/clients'
-import { getTokenDetails } from '@/utils'
+import { getTokenDetails, NATIVE_TOKEN_ADDRESS, isStableCoin } from '@/utils'
+import { formatUnits } from 'viem'
+import type { Address, Hex } from 'viem'
 
 type IMobulaMarketData = {
     id: number
@@ -76,10 +77,7 @@ export const fetchTokenPrice = unstable_cache(
             const json: { data: IMobulaMarketData } = await mobulaResponse.json()
 
             if (mobulaResponse.ok) {
-                let decimals = json.data.decimals
-                if (decimals === undefined) {
-                    decimals = json.data.contracts.find((contract) => contract.blockchainId === chainId)!.decimals
-                }
+                const decimals = json.data.contracts.find((contract) => contract.blockchainId === chainId)!.decimals
                 let data = {
                     price: json.data.price,
                     chainId: chainId,
@@ -89,7 +87,7 @@ export const fetchTokenPrice = unstable_cache(
                     decimals,
                     logoURI: json.data.logo,
                 }
-                if (estimateIfIsStableCoinFromPrice(json.data.price)) {
+                if (isStableCoin(data.symbol) || estimateIfIsStableCoinFromPrice(json.data.price)) {
                     data.price = 1
                 }
                 return data
@@ -146,3 +144,73 @@ export const fetchTokenDetails = unstable_cache(
         tags: ['fetchTokenDetails'],
     }
 )
+
+/**
+ * Get cached gas price for a chain
+ */
+const getCachedGasPrice = unstable_cache(
+    async (chainId: string) => {
+        const client = await getPublicClient(Number(chainId) as ChainId)
+        const gasPrice = await client.getGasPrice()
+        return gasPrice.toString()
+    },
+    ['getGasPrice'],
+    {
+        revalidate: 2 * 60, // 2 minutes
+    }
+)
+
+/**
+ * Get cached gas estimate for a transaction
+ */
+const getCachedGasEstimate = unstable_cache(
+    async (fromAddress: Address, contractAddress: Address, data: Hex, chainId: string) => {
+        const client = await getPublicClient(Number(chainId) as ChainId)
+        const gasEstimate = await client.estimateGas({
+            account: fromAddress,
+            to: contractAddress,
+            data,
+        })
+        return gasEstimate.toString()
+    },
+    ['getGasEstimate'],
+    {
+        revalidate: 5 * 60, // 5 minutes - gas estimates are more stable
+    }
+)
+
+/**
+ * Estimate gas cost for transaction in USD
+ */
+export async function estimateTransactionCostUsd(
+    fromAddress: Address,
+    contractAddress: Address,
+    data: Hex,
+    chainId: string
+): Promise<number> {
+    try {
+        // Run all API calls in parallel since they're independent
+        const [gasEstimateStr, gasPriceStr, nativeTokenPrice] = await Promise.all([
+            getCachedGasEstimate(fromAddress, contractAddress, data, chainId),
+            getCachedGasPrice(chainId),
+            fetchTokenPrice(NATIVE_TOKEN_ADDRESS, chainId),
+        ])
+
+        // Convert strings back to BigInt for calculation
+        const gasEstimate = BigInt(gasEstimateStr)
+        const gasPrice = BigInt(gasPriceStr)
+
+        // Calculate gas cost in native token
+        const gasCostWei = gasEstimate * gasPrice
+
+        const estimatedCostUsd = nativeTokenPrice
+            ? Number(formatUnits(gasCostWei, nativeTokenPrice.decimals)) * nativeTokenPrice.price
+            : 0.01
+
+        return estimatedCostUsd
+    } catch (error) {
+        console.error('Error estimating transaction cost:', error)
+        // Return a conservative estimate if we can't calculate exact cost
+        return 0.01
+    }
+}
diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx
index a3bfcbf2f..ffbd49dba 100644
--- a/src/components/Global/DirectSendQR/index.tsx
+++ b/src/components/Global/DirectSendQR/index.tsx
@@ -96,15 +96,15 @@ function DirectSendContent({ redirectTo, setIsModalOpen }: ModalContentProps) {
     const router = useRouter()
     return (
         <div className="flex flex-col justify-center p-6">
-            <span className="text-sm">Peanut only supports USDC on Arbitrum.</span>
-            <span className="text-sm">Please confirm with the recipient that they accept USDC on Arbitrum</span>
+            <span className="text-sm">Peanut supports cross-chain payments.</span>
+            <span className="text-sm">Please confirm the payment details before sending</span>
             <Checkbox
                 value={userAcknowledged}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     setUserAcknowledged(e.target.checked)
                 }}
                 className="mt-4"
-                label="Got it, USDC on Arbitrum only."
+                label="I understand and will confirm payment details."
             />
             <Button
                 onClick={() => {
@@ -224,15 +224,23 @@ export default function DirectSendQr({
                 break
             case EQrType.EVM_ADDRESS:
                 {
-                    toConfirmUrl = `/${data}@arbitrum/usdc`
+                    toConfirmUrl = `/${data}`
                 }
                 break
             case EQrType.EIP_681:
                 {
                     try {
-                        const { address } = parseEip681(data)
-                        if (address) {
-                            toConfirmUrl = `/${address}@arbitrum/usdc`
+                        const { address, chainId, amount, tokenSymbol } = parseEip681(data)
+                        toConfirmUrl = `/${address}`
+                        if (chainId) {
+                            toConfirmUrl += `@${chainId}`
+                            if (tokenSymbol) {
+                                toConfirmUrl += `/`
+                                if (amount) {
+                                    toConfirmUrl += `${amount}`
+                                }
+                                toConfirmUrl += `${tokenSymbol}`
+                            }
                         }
                     } catch (error) {
                         toast.error('Error parsing EIP-681 URL')
@@ -244,7 +252,7 @@ export default function DirectSendQr({
                 {
                     const resolvedAddress = await resolveEns(data)
                     if (!!resolvedAddress) {
-                        toConfirmUrl = `/${data}@arbitrum/usdc`
+                        toConfirmUrl = `/${data}`
                     }
                 }
                 break
@@ -332,7 +340,7 @@ export default function DirectSendQr({
                     break
                 case EModalType.DIRECT_SEND:
                     {
-                        title = 'ℹ️ Only USDC on Arbitrum'
+                        title = 'ℹ️ Payment Confirmation'
                     }
                     break
                 case EModalType.EXTERNAL_URL:
diff --git a/src/components/Global/PeanutActionDetailsCard/index.tsx b/src/components/Global/PeanutActionDetailsCard/index.tsx
index ab2cf3003..eb57d741f 100644
--- a/src/components/Global/PeanutActionDetailsCard/index.tsx
+++ b/src/components/Global/PeanutActionDetailsCard/index.tsx
@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge'
 import Attachment from '../Attachment'
 import Card from '../Card'
 import { Icon, IconName } from '../Icons/Icon'
+import RouteExpiryTimer from '../RouteExpiryTimer'
 import Image from 'next/image'
 
 interface PeanutActionDetailsCardProps {
@@ -30,6 +31,14 @@ interface PeanutActionDetailsCardProps {
     avatarSize?: AvatarSize
     countryCodeForFlag?: string
     currencySymbol?: string
+    // Cross-chain timer props
+    showTimer?: boolean
+    timerExpiry?: string
+    isTimerLoading?: boolean
+    onTimerNearExpiry?: () => void
+    onTimerExpired?: () => void
+    disableTimerRefetch?: boolean
+    timerError?: string | null
 }
 
 export default function PeanutActionDetailsCard({
@@ -43,6 +52,13 @@ export default function PeanutActionDetailsCard({
     className,
     fileUrl,
     avatarSize = 'medium',
+    showTimer = false,
+    timerExpiry,
+    isTimerLoading = false,
+    onTimerNearExpiry,
+    onTimerExpired,
+    disableTimerRefetch = false,
+    timerError = null,
     countryCodeForFlag,
     currencySymbol,
 }: PeanutActionDetailsCardProps) {
@@ -139,39 +155,51 @@ export default function PeanutActionDetailsCard({
     }
 
     return (
-        <Card className={twMerge('flex items-center gap-3 p-4', className)}>
+        <Card className={twMerge('p-4', className)}>
             <div className="flex items-center gap-3">
-                {isWithdrawBankAccount || isAddBankAccount ? (
-                    withdrawBankIcon()
-                ) : (
-                    <AvatarWithBadge
-                        icon={getAvatarIcon()}
-                        size={avatarSize}
-                        name={viewType === 'NORMAL' ? recipientName : undefined}
-                        inlineStyle={{
-                            backgroundColor: getAvatarBackgroundColor(),
-                            color: getAvatarTextColor(),
-                        }}
-                    />
-                )}
-            </div>
+                <div className="flex items-center gap-3">
+                    {isWithdrawBankAccount || isAddBankAccount ? (
+                        withdrawBankIcon()
+                    ) : (
+                        <AvatarWithBadge
+                            icon={getAvatarIcon()}
+                            size={avatarSize}
+                            name={viewType === 'NORMAL' ? recipientName : undefined}
+                            inlineStyle={{
+                                backgroundColor: getAvatarBackgroundColor(),
+                                color: getAvatarTextColor(),
+                            }}
+                        />
+                    )}
+                </div>
 
-            <div className="min-w-0 space-y-1">
-                {getTitle()}
-                <h2 className="text-2xl font-extrabold">
-                    {transactionType === 'ADD_MONEY' && currencySymbol
-                        ? `${currencySymbol} `
-                        : tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase()
-                          ? '$ '
-                          : ''}
-                    {amount}
+                <div className="w-full space-y-1">
+                    {getTitle()}
+                    <h2 className="text-2xl font-extrabold">
+                        {transactionType === 'ADD_MONEY' && currencySymbol
+                            ? `${currencySymbol} `
+                            : tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase()
+                              ? '$ '
+                              : ''}
+                        {amount}
 
-                    {tokenSymbol.toLowerCase() !== PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() &&
-                        transactionType !== 'ADD_MONEY' &&
-                        ` ${tokenSymbol.toLowerCase() === 'pnt' ? (Number(amount) === 1 ? 'Beer' : 'Beers') : tokenSymbol}`}
-                </h2>
+                        {tokenSymbol.toLowerCase() !== PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() &&
+                            transactionType !== 'ADD_MONEY' &&
+                            ` ${tokenSymbol.toLowerCase() === 'pnt' ? (Number(amount) === 1 ? 'Beer' : 'Beers') : tokenSymbol}`}
+                    </h2>
 
-                <Attachment message={message ?? ''} fileUrl={fileUrl ?? ''} />
+                    <Attachment message={message ?? ''} fileUrl={fileUrl ?? ''} />
+                    {showTimer && (
+                        <RouteExpiryTimer
+                            expiry={timerExpiry}
+                            isLoading={isTimerLoading}
+                            onNearExpiry={onTimerNearExpiry}
+                            onExpired={onTimerExpired}
+                            disableRefetch={disableTimerRefetch}
+                            error={timerError}
+                        />
+                    )}
+                </div>
             </div>
         </Card>
     )
diff --git a/src/components/Global/RouteExpiryTimer/index.tsx b/src/components/Global/RouteExpiryTimer/index.tsx
new file mode 100644
index 000000000..b0ea4f5b0
--- /dev/null
+++ b/src/components/Global/RouteExpiryTimer/index.tsx
@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+interface RouteExpiryTimerProps {
+    expiry?: string // ISO string from route
+    isLoading?: boolean
+    onNearExpiry?: () => void // Called when timer gets close to expiry (e.g., 30 seconds)
+    onExpired?: () => void // Called when timer expires
+    className?: string
+    nearExpiryThresholdMs?: number // Default 30 seconds
+    disableRefetch?: boolean // Disable refetching when user is signing transaction
+    error?: string | null // Error message to display instead of timer
+}
+
+interface TimeRemaining {
+    minutes: number
+    seconds: number
+    totalMs: number
+}
+
+const RouteExpiryTimer: React.FC<RouteExpiryTimerProps> = ({
+    expiry,
+    isLoading = false,
+    onNearExpiry,
+    onExpired,
+    className,
+    nearExpiryThresholdMs = 5000, // 5 seconds
+    disableRefetch = false,
+    error = null,
+}) => {
+    const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null)
+    const [hasTriggeredNearExpiry, setHasTriggeredNearExpiry] = useState(false)
+    const [hasExpired, setHasExpired] = useState(false)
+
+    const calculateTimeRemaining = useCallback((): TimeRemaining | null => {
+        if (!expiry) return null
+
+        const now = new Date().getTime()
+        // Expiry is Unix timestamp in seconds, convert to milliseconds
+        const expiryTime = parseInt(expiry) * 1000
+
+        // Check if expiry time is valid
+        if (isNaN(expiryTime)) {
+            console.warn('Invalid expiry time:', expiry)
+            return null
+        }
+
+        const diff = expiryTime - now
+
+        if (diff <= 0) {
+            return { minutes: 0, seconds: 0, totalMs: 0 }
+        }
+
+        const minutes = Math.floor(diff / 60000)
+        const seconds = Math.floor((diff % 60000) / 1000)
+
+        return { minutes, seconds, totalMs: diff }
+    }, [expiry])
+
+    useEffect(() => {
+        if (!expiry || isLoading) {
+            setTimeRemaining(null)
+            setHasTriggeredNearExpiry(false)
+            setHasExpired(false)
+            return
+        }
+
+        const updateTimer = () => {
+            const remaining = calculateTimeRemaining()
+            setTimeRemaining(remaining)
+
+            if (!remaining || remaining.totalMs <= 0) {
+                if (!hasExpired) {
+                    setHasExpired(true)
+                    onExpired?.()
+                }
+                return
+            }
+
+            // Trigger near expiry callback only if refetch is not disabled
+            if (
+                !disableRefetch &&
+                !hasTriggeredNearExpiry &&
+                remaining.totalMs <= nearExpiryThresholdMs &&
+                remaining.totalMs > 0
+            ) {
+                setHasTriggeredNearExpiry(true)
+                onNearExpiry?.()
+            }
+        }
+
+        // Initial calculation
+        updateTimer()
+
+        // Set up interval to update every second
+        const interval = setInterval(updateTimer, 1000)
+
+        return () => clearInterval(interval)
+    }, [
+        expiry,
+        isLoading,
+        calculateTimeRemaining,
+        onNearExpiry,
+        onExpired,
+        nearExpiryThresholdMs,
+        hasTriggeredNearExpiry,
+        hasExpired,
+        disableRefetch,
+    ])
+
+    const formatTime = (time: TimeRemaining): string => {
+        const paddedMinutes = time.minutes.toString().padStart(2, '0')
+        const paddedSeconds = time.seconds.toString().padStart(2, '0')
+        return `${paddedMinutes}:${paddedSeconds}`
+    }
+
+    const getProgressPercentage = (): number => {
+        if (!timeRemaining || !expiry) return 0
+
+        // Assuming routes typically have 1-minute expiry (300 seconds)
+        // This could be made configurable if needed
+        const totalDurationMs = 1 * 60 * 1000 // 1 minutes
+        const elapsedMs = totalDurationMs - timeRemaining.totalMs
+        return Math.max(0, Math.min(100, (elapsedMs / totalDurationMs) * 100))
+    }
+
+    const getProgressColor = (): string => {
+        if (!timeRemaining) return 'bg-grey-3'
+
+        const percentage = getProgressPercentage()
+
+        // Green for first 70%
+        if (percentage < 70) return 'bg-green-500'
+        // Yellow for 70-85%
+        if (percentage < 85) return 'bg-yellow-500'
+        // Red for final 15%
+        return 'bg-red'
+    }
+
+    const shouldPulse = (): boolean => {
+        if (isLoading) return true
+        if (!timeRemaining) return false
+        // Pulse when in red zone (85%+ progress) OR near expiry threshold
+        const progressPercentage = getProgressPercentage()
+        return (progressPercentage >= 85 || timeRemaining.totalMs <= nearExpiryThresholdMs) && timeRemaining.totalMs > 0
+    }
+
+    const getText = (): string => {
+        if (error) return error
+        if (isLoading) return 'Finding best rate...'
+        if (!expiry) return 'No quote available'
+        if (!timeRemaining) return 'Quote expired'
+        if (timeRemaining.totalMs <= 0) return 'Quote expired'
+        return `Price locked for ${formatTime(timeRemaining)}`
+    }
+
+    return (
+        <div className={twMerge('flex flex-col gap-2', className)}>
+            {/* Status text */}
+            <div className="flex items-center gap-2">
+                <span
+                    className={twMerge(
+                        'text-sm font-medium',
+                        error
+                            ? 'text-error'
+                            : isLoading || (timeRemaining && timeRemaining.totalMs > 0)
+                              ? 'text-grey-1'
+                              : 'text-error'
+                    )}
+                >
+                    {getText()}
+                </span>
+            </div>
+
+            {/* Progress bar */}
+            <div className="relative h-2 w-full overflow-hidden rounded-full bg-grey-4">
+                <div
+                    className={twMerge(
+                        'h-full rounded-full transition-all duration-300',
+                        error ? 'w-full bg-red' : isLoading ? 'w-full bg-grey-3' : getProgressColor(),
+                        shouldPulse() ? 'animate-pulse-strong' : ''
+                    )}
+                    style={{
+                        width: error ? '100%' : isLoading ? '100%' : `${getProgressPercentage()}%`,
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default RouteExpiryTimer
diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx
index 9b72ade19..4ea25192e 100644
--- a/src/components/Payment/PaymentForm/index.tsx
+++ b/src/components/Payment/PaymentForm/index.tsx
@@ -41,7 +41,8 @@ import { useAccount } from 'wagmi'
 export type PaymentFlowProps = {
     isPintaReq?: boolean
     isAddMoneyFlow?: boolean
-    isDirectPay?: boolean
+    /** Whether this is a direct USD payment flow (bypasses token conversion) */
+    isDirectUsdPayment?: boolean
     currency?: {
         code: string
         symbol: string
@@ -63,7 +64,7 @@ export const PaymentForm = ({
     currencyAmount,
     setCurrencyAmount,
     isAddMoneyFlow,
-    isDirectPay,
+    isDirectUsdPayment,
 }: PaymentFormProps) => {
     const dispatch = useAppDispatch()
     const router = useRouter()
@@ -373,6 +374,7 @@ export const PaymentForm = ({
 
         const requestedToken = chargeDetails?.tokenAddress ?? requestDetails?.tokenAddress
         const requestedChain = chargeDetails?.chainId ?? requestDetails?.chainId
+
         let tokenAmount = inputTokenAmount
         if (
             requestedToken &&
@@ -391,7 +393,7 @@ export const PaymentForm = ({
             currency,
             currencyAmount,
             isAddMoneyFlow: !!isAddMoneyFlow,
-            transactionType: isAddMoneyFlow ? 'DEPOSIT' : isDirectPay ? 'DIRECT_SEND' : 'REQUEST',
+            transactionType: isAddMoneyFlow ? 'DEPOSIT' : isDirectUsdPayment ? 'DIRECT_SEND' : 'REQUEST',
             attachmentOptions: attachmentOptions,
         }
 
@@ -498,15 +500,6 @@ export const PaymentForm = ({
         }
     }, [isPintaReq, inputTokenAmount])
 
-    const isXChainPeanutWalletReq = useMemo(() => {
-        if (!isActivePeanutWallet || !selectedTokenData) return false
-
-        const isSupportedChain = selectedChainID === PEANUT_WALLET_CHAIN.id.toString()
-        const isSupportedToken = selectedTokenAddress.toLowerCase() === PEANUT_WALLET_TOKEN.toLowerCase()
-
-        return !(isSupportedChain && isSupportedToken)
-    }, [isActivePeanutWallet, selectedChainID, selectedTokenAddress, selectedTokenData])
-
     const isButtonDisabled = useMemo(() => {
         if (isProcessing) return true
         if (!!error) return true
@@ -532,7 +525,7 @@ export const PaymentForm = ({
         // logic for non-AddMoneyFlow / non-Pinta (Pinta has its own button logic)
         if (!isPintaReq) {
             if (!isConnected) return true // if not connected at all, disable (covers guest non-Peanut scenarios)
-            if (isActivePeanutWallet && isXChainPeanutWalletReq) return true // peanut wallet x-chain restriction
+
             if (!selectedTokenAddress || !selectedChainID) return true // must have token/chain
         }
         // fallback for Pinta or other cases if not explicitly handled above
@@ -547,7 +540,6 @@ export const PaymentForm = ({
         selectedChainID,
         isConnected,
         isActivePeanutWallet,
-        isXChainPeanutWalletReq,
         isPintaReq,
     ])
 
@@ -598,7 +590,7 @@ export const PaymentForm = ({
         <div className="flex h-full min-h-[inherit] flex-col justify-between gap-8">
             <NavHeader onPrev={router.back} title={isAddMoneyFlow ? 'Add Money' : 'Send'} />
             <div className="my-auto flex h-full flex-col justify-center space-y-4">
-                {isWagmiConnected && (!isDirectPay || isAddMoneyFlow) && (
+                {isWagmiConnected && (!isDirectUsdPayment || isAddMoneyFlow) && (
                     <Button
                         icon="switch"
                         iconPosition="right"
@@ -643,7 +635,7 @@ export const PaymentForm = ({
                     currency={currency}
                 />
 
-                {!isActivePeanutWallet && isConnected && !isAddMoneyFlow && (
+                {!chain && isConnected && !isAddMoneyFlow && (
                     <div className="space-y-2">
                         {!isPeanutWalletUSDC && !selectedTokenAddress && !selectedChainID && (
                             <div className="text-sm font-bold">Select token and chain to pay with</div>
@@ -661,7 +653,7 @@ export const PaymentForm = ({
                     <TokenSelector viewType="add" disabled={!isWagmiConnected && isAddMoneyFlow} />
                 )}
 
-                {isDirectPay && (
+                {isDirectUsdPayment && (
                     <FileUploadInput
                         placeholder="Comment"
                         attachmentOptions={attachmentOptions}
@@ -702,13 +694,7 @@ export const PaymentForm = ({
                             Retry
                         </Button>
                     )}
-                    {isXChainPeanutWalletReq && !isAddMoneyFlow && (
-                        <ErrorAlert
-                            description={
-                                'Peanut Wallet currently only supports sending USDC on Arbitrum. Please select USDC and Arbitrum, or use an external wallet.'
-                            }
-                        />
-                    )}
+
                     {error && <ErrorAlert description={error} />}
                 </div>
             </div>
diff --git a/src/components/Payment/Views/Confirm.payment.view.tsx b/src/components/Payment/Views/Confirm.payment.view.tsx
index 0523a1ac9..9689415f5 100644
--- a/src/components/Payment/Views/Confirm.payment.view.tsx
+++ b/src/components/Payment/Views/Confirm.payment.view.tsx
@@ -21,12 +21,14 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { useAppDispatch, usePaymentStore, useWalletStore } from '@/redux/hooks'
 import { paymentActions } from '@/redux/slices/payment-slice'
 import { chargesApi } from '@/services/charges'
-import { ErrorHandler, formatAmount, printableAddress } from '@/utils'
+import { ErrorHandler, formatAmount, printableAddress, areEvmAddressesEqual } from '@/utils'
 import { useQueryClient } from '@tanstack/react-query'
 import { useSearchParams } from 'next/navigation'
 import { useCallback, useContext, useEffect, useMemo } from 'react'
 import { useAccount } from 'wagmi'
 import { PaymentInfoRow } from '../PaymentInfoRow'
+import { formatUnits } from 'viem'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 
 type ConfirmPaymentViewProps = {
     isPintaReq?: boolean
@@ -37,13 +39,28 @@ type ConfirmPaymentViewProps = {
     }
     currencyAmount?: string
     isAddMoneyFlow?: boolean
+    /** Whether this is a direct payment, for xchain we dont care if a little
+     * less arrives*/
+    isDirectUsdPayment?: boolean
 }
 
+/**
+ * Confirmation view for payment transactions. Displays payment details, fees, and handles
+ * transaction execution for various payment flows including cross-chain payments, direct USD
+ * payments, and add money flows.
+ *
+ * @param isPintaReq - Whether this is a Pinta request payment (beer payment flow)
+ * @param currency - Currency details for display (code, symbol, price)
+ * @param currencyAmount - Amount in the specified currency
+ * @param isAddMoneyFlow - Whether this is an add money flow (deposit to wallet)
+ * @param isDirectUsdPayment - Whether this is a direct payment, for xchain we dont care if a little less arrives
+ */
 export default function ConfirmPaymentView({
     isPintaReq = false,
     currency,
     currencyAmount,
     isAddMoneyFlow,
+    isDirectUsdPayment = false,
 }: ConfirmPaymentViewProps) {
     const dispatch = useAppDispatch()
     const searchParams = useSearchParams()
@@ -56,19 +73,28 @@ export default function ConfirmPaymentView({
         isPreparingTx,
         loadingStep,
         error: paymentError,
-        feeCalculations,
+        estimatedGasCost,
         isCalculatingFees,
         isEstimatingGas,
         isFeeEstimationError,
         cancelOperation: cancelPaymentOperation,
+        xChainRoute,
     } = usePaymentInitiator()
     const { selectedTokenData, selectedChainID } = useContext(tokenSelectorContext)
-    const { isConnected: isPeanutWallet, address: peanutWalletAddress, fetchBalance } = useWallet()
+    const { isConnected: isPeanutWallet, fetchBalance } = useWallet()
     const { isConnected: isWagmiConnected, address: wagmiAddress } = useAccount()
     const { rewardWalletBalance } = useWalletStore()
     const queryClient = useQueryClient()
 
-    const walletAddress = useMemo(() => peanutWalletAddress ?? wagmiAddress, [peanutWalletAddress, wagmiAddress])
+    const networkFee = useMemo(() => {
+        if (!estimatedGasCost || isPeanutWallet) return '$ 0.00'
+        if (isFeeEstimationError) return '-'
+        if (estimatedGasCost < 0.01) {
+            return '$ <0.01'
+        } else {
+            return `$ ${estimatedGasCost.toFixed(2)}`
+        }
+    }, [estimatedGasCost, isPeanutWallet, isFeeEstimationError])
 
     const {
         tokenIconUrl: sendingTokenIconUrl,
@@ -95,11 +121,13 @@ export default function ConfirmPaymentView({
     const showExternalWalletConfirmationModal = useMemo((): boolean => {
         if (isCalculatingFees || isEstimatingGas) return false
 
-        return isProcessing && (!isPeanutWallet || isAddMoneyFlow)
-            ? ['Switching Network', 'Sending Transaction', 'Confirming Transaction', 'Preparing Transaction'].includes(
-                  loadingStep
-              )
-            : false
+        return (
+            isProcessing &&
+            (!isPeanutWallet || !!isAddMoneyFlow) &&
+            ['Switching Network', 'Sending Transaction', 'Confirming Transaction', 'Preparing Transaction'].includes(
+                loadingStep
+            )
+        )
     }, [isProcessing, isPeanutWallet, loadingStep, isAddMoneyFlow, isCalculatingFees, isEstimatingGas])
 
     useEffect(() => {
@@ -119,11 +147,29 @@ export default function ConfirmPaymentView({
         }
     }, [chargeIdFromUrl, chargeDetails, dispatch])
 
-    useEffect(() => {
+    const handleRouteRefresh = useCallback(async () => {
         if (chargeDetails && selectedTokenData && selectedChainID) {
-            prepareTransactionDetails(chargeDetails, isAddMoneyFlow)
+            const fromTokenAddress = isPeanutWallet ? PEANUT_WALLET_TOKEN : selectedTokenData.address
+            const fromChainId = isPeanutWallet ? PEANUT_WALLET_CHAIN.id.toString() : selectedChainID
+            const usdAmount =
+                isDirectUsdPayment && chargeDetails.currencyCode.toLowerCase() === 'usd'
+                    ? chargeDetails.currencyAmount
+                    : undefined
+            await prepareTransactionDetails(chargeDetails, fromTokenAddress, fromChainId, usdAmount)
         }
-    }, [chargeDetails, walletAddress, selectedTokenData, selectedChainID, prepareTransactionDetails, isAddMoneyFlow])
+    }, [
+        chargeDetails,
+        selectedTokenData,
+        selectedChainID,
+        prepareTransactionDetails,
+        isDirectUsdPayment,
+        isPeanutWallet,
+    ])
+
+    useEffect(() => {
+        // get route on mount
+        handleRouteRefresh()
+    }, [handleRouteRefresh])
 
     const isConnected = useMemo(() => isPeanutWallet || isWagmiConnected, [isPeanutWallet, isWagmiConnected])
     const isInsufficientRewardsBalance = useMemo(() => {
@@ -278,11 +324,37 @@ export default function ConfirmPaymentView({
     }
 
     const isCrossChainPayment = useMemo((): boolean => {
-        if (!chargeDetails || !selectedTokenData || !selectedChainID) return false
-
-        return chargeDetails.chainId !== selectedChainID
+        if (!chargeDetails) return false
+        if (isPeanutWallet) {
+            return (
+                !areEvmAddressesEqual(chargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) ||
+                chargeDetails.chainId !== PEANUT_WALLET_CHAIN.id.toString()
+            )
+        } else if (selectedTokenData && selectedChainID) {
+            return (
+                areEvmAddressesEqual(chargeDetails.tokenAddress, selectedTokenData.address) &&
+                chargeDetails.chainId !== selectedChainID
+            )
+        }
+        return false
     }, [chargeDetails, selectedTokenData, selectedChainID])
 
+    const routeTypeError = useMemo((): string | null => {
+        if (!isCrossChainPayment || !xChainRoute || !isPeanutWallet) return null
+
+        // For peanut wallet flows, only RFQ routes are allowed
+        if (xChainRoute.type === 'swap') {
+            return 'This route requires external wallet payment. Peanut Wallet only supports RFQ (Request for Quote) routes.'
+        }
+
+        return null
+    }, [isCrossChainPayment, xChainRoute, isPeanutWallet])
+
+    const minReceived = useMemo<string | null>(() => {
+        if (!xChainRoute || !chargeDetails?.tokenDecimals) return null
+        return formatUnits(BigInt(xChainRoute.rawResponse.route.estimate.toAmountMin), chargeDetails.tokenDecimals)
+    }, [xChainRoute, chargeDetails?.tokenDecimals])
+
     return (
         <div className="flex min-h-[inherit] flex-col justify-between gap-8">
             <NavHeader
@@ -308,10 +380,26 @@ export default function ConfirmPaymentView({
                         tokenSymbol={symbolForDisplay}
                         message={chargeDetails?.requestLink?.reference ?? ''}
                         fileUrl={chargeDetails?.requestLink?.attachmentUrl ?? ''}
+                        showTimer={isCrossChainPayment}
+                        timerExpiry={xChainRoute?.expiry}
+                        isTimerLoading={isCalculatingFees || isPreparingTx}
+                        onTimerNearExpiry={handleRouteRefresh}
+                        onTimerExpired={() => {
+                            console.log('Route expired')
+                        }}
+                        disableTimerRefetch={isProcessing}
+                        timerError={routeTypeError}
                     />
                 )}
 
                 <Card className="rounded-sm">
+                    {minReceived && (
+                        <PaymentInfoRow
+                            label="Min Received"
+                            value={minReceived}
+                            moreInfoText="This transaction may face slippage due to token conversion or cross-chain bridging."
+                        />
+                    )}
                     {isCrossChainPayment && (
                         <PaymentInfoRow
                             label="Requested"
@@ -327,28 +415,28 @@ export default function ConfirmPaymentView({
                             }
                         />
                     )}
-                    <PaymentInfoRow
-                        label={isCrossChainPayment ? `Sending` : 'Token and network'}
-                        value={
-                            <TokenChainInfoDisplay
-                                tokenIconUrl={sendingTokenIconUrl}
-                                chainIconUrl={sendingChainIconUrl}
-                                resolvedTokenSymbol={sendingResolvedTokenSymbol}
-                                fallbackTokenSymbol={selectedTokenData?.symbol || ''}
-                                resolvedChainName={sendingResolvedChainName}
-                                fallbackChainName={selectedChainID || ''}
-                            />
-                        }
-                    />
+                    {isCrossChainPayment !== isPeanutWallet && (
+                        <PaymentInfoRow
+                            label={isCrossChainPayment ? `Sending` : 'Token and network'}
+                            value={
+                                <TokenChainInfoDisplay
+                                    tokenIconUrl={sendingTokenIconUrl}
+                                    chainIconUrl={sendingChainIconUrl}
+                                    resolvedTokenSymbol={sendingResolvedTokenSymbol}
+                                    fallbackTokenSymbol={selectedTokenData?.symbol || ''}
+                                    resolvedChainName={sendingResolvedChainName}
+                                    fallbackChainName={selectedChainID || ''}
+                                />
+                            }
+                        />
+                    )}
 
                     {isAddMoneyFlow && <PaymentInfoRow label="From" value={printableAddress(wagmiAddress ?? '')} />}
 
                     <PaymentInfoRow
                         loading={isCalculatingFees || isEstimatingGas || isPreparingTx}
                         label={isCrossChainPayment ? 'Max network fee' : 'Network fee'}
-                        value={
-                            isFeeEstimationError ? '-' : isPeanutWallet ? '$ 0.00' : `$ ${feeCalculations.estimatedFee}`
-                        }
+                        value={networkFee}
                         moreInfoText={
                             isPeanutWallet
                                 ? 'This transaction is sponsored by Peanut.'
@@ -374,7 +462,7 @@ export default function ConfirmPaymentView({
                         </Button>
                     ) : (
                         <Button
-                            disabled={!isConnected || isLoading || isFeeEstimationError}
+                            disabled={!isConnected || isLoading || isFeeEstimationError || !!routeTypeError}
                             onClick={handlePayment}
                             loading={isLoading}
                             shadowSize="4"
@@ -385,9 +473,9 @@ export default function ConfirmPaymentView({
                             {getButtonText()}
                         </Button>
                     )}
-                    {paymentError && (
+                    {(paymentError || routeTypeError) && (
                         <div className="space-y-2">
-                            <ErrorAlert description={paymentError} />
+                            <ErrorAlert description={paymentError || routeTypeError || ''} />
                         </div>
                     )}
                 </div>
@@ -415,6 +503,17 @@ interface TokenChainInfoDisplayProps {
     fallbackChainName: string
 }
 
+/**
+ * Displays token and chain information with icons and names.
+ * Shows token icon with chain icon as a badge overlay, along with formatted text.
+ *
+ * @param tokenIconUrl - URL for the token icon
+ * @param chainIconUrl - URL for the chain icon (displayed as overlay)
+ * @param resolvedTokenSymbol - Resolved token symbol from API
+ * @param fallbackTokenSymbol - Fallback token symbol if resolution fails
+ * @param resolvedChainName - Resolved chain name from API
+ * @param fallbackChainName - Fallback chain name if resolution fails
+ */
 function TokenChainInfoDisplay({
     tokenIconUrl,
     chainIconUrl,
diff --git a/src/components/Payment/Views/Initial.payment.view.tsx b/src/components/Payment/Views/Initial.payment.view.tsx
index a13eb9508..4196365ca 100644
--- a/src/components/Payment/Views/Initial.payment.view.tsx
+++ b/src/components/Payment/Views/Initial.payment.view.tsx
@@ -8,7 +8,7 @@ export default function InitialPaymentView(props: PaymentFormProps) {
             {...props}
             isPintaReq={isPintaReq}
             isAddMoneyFlow={props.isAddMoneyFlow}
-            isDirectPay={props.isDirectPay}
+            isDirectUsdPayment={props.isDirectUsdPayment}
         />
     )
 }
diff --git a/src/components/Withdraw/views/Confirm.withdraw.view.tsx b/src/components/Withdraw/views/Confirm.withdraw.view.tsx
index bc0df26af..73d8978c4 100644
--- a/src/components/Withdraw/views/Confirm.withdraw.view.tsx
+++ b/src/components/Withdraw/views/Confirm.withdraw.view.tsx
@@ -12,6 +12,9 @@ import { useTokenChainIcons } from '@/hooks/useTokenChainIcons'
 import { ITokenPriceData } from '@/interfaces'
 import { formatAmount } from '@/utils'
 import { interfaces } from '@squirrel-labs/peanut-sdk'
+import { type PeanutCrossChainRoute } from '@/services/swap'
+import { useMemo } from 'react'
+import { formatUnits } from 'viem'
 
 interface WithdrawConfirmViewProps {
     amount: string
@@ -24,6 +27,12 @@ interface WithdrawConfirmViewProps {
     onBack: () => void
     isProcessing?: boolean
     error?: string | null
+    // Timer props for cross-chain withdrawals
+    isCrossChain?: boolean
+    routeExpiry?: string
+    isRouteLoading?: boolean
+    onRouteRefresh?: () => void
+    xChainRoute?: PeanutCrossChainRoute
 }
 
 export default function ConfirmWithdrawView({
@@ -37,6 +46,11 @@ export default function ConfirmWithdrawView({
     onBack,
     isProcessing,
     error,
+    isCrossChain = false,
+    routeExpiry,
+    isRouteLoading = false,
+    onRouteRefresh,
+    xChainRoute,
 }: WithdrawConfirmViewProps) {
     const { tokenIconUrl, chainIconUrl, resolvedChainName, resolvedTokenSymbol } = useTokenChainIcons({
         chainId: chain.chainId,
@@ -44,6 +58,11 @@ export default function ConfirmWithdrawView({
         tokenSymbol: token.symbol,
     })
 
+    const minReceived = useMemo<string | null>(() => {
+        if (!xChainRoute) return null
+        return formatUnits(BigInt(xChainRoute.rawResponse.route.estimate.toAmountMin), token.decimals)
+    }, [xChainRoute])
+
     return (
         <div className="space-y-8">
             <NavHeader title="Withdraw" onPrev={onBack} />
@@ -55,10 +74,26 @@ export default function ConfirmWithdrawView({
                     recipientType="USERNAME"
                     recipientName={''}
                     amount={formatAmount(amount)}
-                    tokenSymbol={token.symbol}
+                    tokenSymbol="USDC"
+                    showTimer={isCrossChain}
+                    timerExpiry={routeExpiry}
+                    isTimerLoading={isRouteLoading}
+                    onTimerNearExpiry={onRouteRefresh}
+                    onTimerExpired={() => {
+                        console.log('Withdraw route expired')
+                    }}
+                    disableTimerRefetch={isProcessing}
+                    timerError={error?.includes('not available for withdraw') ? error : null}
                 />
 
                 <Card className="rounded-sm">
+                    {minReceived && (
+                        <PaymentInfoRow
+                            label="Min Received"
+                            value={minReceived}
+                            moreInfoText="This transaction may face slippage due to token conversion or cross-chain bridging."
+                        />
+                    )}
                     <PaymentInfoRow
                         label="Token and network"
                         value={
@@ -97,7 +132,7 @@ export default function ConfirmWithdrawView({
                     />
                     <PaymentInfoRow
                         label="Max network fee"
-                        value={`$ ${networkFee}`}
+                        value={networkFee}
                         moreInfoText="This transaction may face slippage due to token conversion or cross-chain bridging."
                     />
                     <PaymentInfoRow hideBottomBorder label="Peanut fee" value={`$ ${peanutFee}`} />
@@ -107,9 +142,16 @@ export default function ConfirmWithdrawView({
                     <Button
                         variant="purple"
                         shadowSize="4"
-                        onClick={onConfirm}
-                        disabled={isProcessing}
-                        loading={isProcessing}
+                        onClick={() => {
+                            // If it's a route type error, refresh the route, otherwise retry confirm
+                            if (error.includes('not available for withdraw') && onRouteRefresh) {
+                                onRouteRefresh()
+                            } else {
+                                onConfirm()
+                            }
+                        }}
+                        disabled={false}
+                        loading={false}
                         className="w-full"
                         icon="retry"
                     >
@@ -120,7 +162,7 @@ export default function ConfirmWithdrawView({
                         variant="purple"
                         shadowSize="4"
                         onClick={onConfirm}
-                        disabled={isProcessing}
+                        disabled={isProcessing || isRouteLoading}
                         loading={isProcessing}
                         className="w-full"
                     >
diff --git a/src/components/Withdraw/views/Initial.withdraw.view.tsx b/src/components/Withdraw/views/Initial.withdraw.view.tsx
index fbe493268..e5655dbe7 100644
--- a/src/components/Withdraw/views/Initial.withdraw.view.tsx
+++ b/src/components/Withdraw/views/Initial.withdraw.view.tsx
@@ -13,6 +13,7 @@ import { formatAmount } from '@/utils/general.utils'
 import { interfaces } from '@squirrel-labs/peanut-sdk'
 import { useRouter } from 'next/navigation'
 import { useContext, useEffect } from 'react'
+import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
 
 interface InitialWithdrawViewProps {
     amount: string
@@ -67,8 +68,6 @@ export default function InitialWithdrawView({ amount, onReview, onBack, isProces
         router.push('/withdraw')
     }
 
-    // TODO: remove this once x-chain support is added
-    // set the default token and chain for withdrawals (USDC on arb)
     useEffect(() => {
         setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString())
         setSelectedTokenAddress(PEANUT_WALLET_TOKEN)
@@ -85,11 +84,10 @@ export default function InitialWithdrawView({ amount, onReview, onBack, isProces
                     recipientType="USERNAME"
                     recipientName={''}
                     amount={formatAmount(amount)}
-                    tokenSymbol={selectedTokenData?.symbol ?? ''}
+                    tokenSymbol="USDC"
                 />
 
-                {/* token selector is not needed for withdrawals right now, the only token peanut wallet supports is USDC on arb, this will be re-added once x-chain support is added */}
-                {/* <TokenSelector viewType="withdraw" /> */}
+                <TokenSelector viewType="withdraw" />
 
                 <GeneralRecipientInput
                     placeholder="Enter an address or ENS"
diff --git a/src/constants/general.consts.ts b/src/constants/general.consts.ts
index 096d88711..caec461cb 100644
--- a/src/constants/general.consts.ts
+++ b/src/constants/general.consts.ts
@@ -7,7 +7,7 @@ export const peanutWalletIsInPreview = true
 export const INFURA_API_KEY = process.env.NEXT_PUBLIC_INFURA_API_KEY
 
 export const SQUID_INTEGRATOR_ID = '11CBA45B-5EE9-4331-B146-48CCD7ED4C7C'
-export const SQUID_API_URL = 'https://apiplus.squidrouter.com/v2'
+export const SQUID_API_URL = process.env.SQUID_API_URL
 
 export const infuraRpcUrls: Record<number, string> = {
     [mainnet.id]: `https://mainnet.infura.io/v3/${INFURA_API_KEY}`,
diff --git a/src/hooks/usePaymentInitiator.ts b/src/hooks/usePaymentInitiator.ts
index a30a37868..8b2d390fd 100644
--- a/src/hooks/usePaymentInitiator.ts
+++ b/src/hooks/usePaymentInitiator.ts
@@ -1,14 +1,11 @@
 import type { FeeOptions } from '@/app/actions/clients'
-import { useCreateLink } from '@/components/Create/useCreateLink'
 import {
     PEANUT_WALLET_CHAIN,
     PEANUT_WALLET_TOKEN,
-    PEANUT_WALLET_TOKEN_DECIMALS,
     PINTA_WALLET_CHAIN,
     PINTA_WALLET_TOKEN,
     PINTA_WALLET_TOKEN_DECIMALS,
     PINTA_WALLET_TOKEN_SYMBOL,
-    SQUID_API_URL,
 } from '@/constants'
 import { tokenSelectorContext } from '@/context'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -25,14 +22,16 @@ import {
     TChargeTransactionType,
     TRequestChargeResponse,
 } from '@/services/services.types'
-import { areEvmAddressesEqual, ErrorHandler, isAddressZero, isNativeCurrency } from '@/utils'
+import { areEvmAddressesEqual, ErrorHandler, isNativeCurrency } from '@/utils'
 import { useAppKitAccount } from '@reown/appkit/react'
-import { captureException } from '@sentry/nextjs'
 import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import type { Hex, TransactionReceipt } from 'viem'
+import { parseUnits } from 'viem'
+import type { TransactionReceipt, Address, Hex } from 'viem'
 import { useConfig, useSendTransaction, useSwitchChain, useAccount as useWagmiAccount } from 'wagmi'
 import { waitForTransactionReceipt } from 'wagmi/actions'
+import { getRoute, type PeanutCrossChainRoute } from '@/services/swap'
+import { estimateTransactionCostUsd } from '@/app/actions/tokens'
 
 export interface InitiatePaymentPayload {
     recipient: ParsedURL['recipient']
@@ -66,7 +65,7 @@ export const usePaymentInitiator = () => {
     const dispatch = useAppDispatch()
     const { requestDetails, chargeDetails: chargeDetailsFromStore } = usePaymentStore()
     const { selectedTokenData, selectedChainID, selectedTokenAddress, setIsXChain } = useContext(tokenSelectorContext)
-    const { isConnected: isPeanutWallet, address: peanutWalletAddress, sendTransactions } = useWallet()
+    const { isConnected: isPeanutWallet, address: peanutWalletAddress, sendTransactions, sendMoney } = useWallet()
     const { switchChainAsync } = useSwitchChain()
     const { address: wagmiAddress } = useAppKitAccount()
     const { sendTransactionAsync } = useSendTransaction()
@@ -74,12 +73,10 @@ export const usePaymentInitiator = () => {
     const { chain: connectedWalletChain } = useWagmiAccount()
 
     const [slippagePercentage, setSlippagePercentage] = useState<number | undefined>(undefined)
-    const [txFee, setTxFee] = useState<string>('0')
     const [unsignedTx, setUnsignedTx] = useState<peanutInterfaces.IPeanutUnsignedTransaction | null>(null)
     const [xChainUnsignedTxs, setXChainUnsignedTxs] = useState<peanutInterfaces.IPeanutUnsignedTransaction[] | null>(
         null
     )
-    const { estimateGasFee } = useCreateLink()
     const [feeOptions, setFeeOptions] = useState<Partial<FeeOptions>[]>([])
     const [isFeeEstimationError, setIsFeeEstimationError] = useState<boolean>(false)
 
@@ -94,15 +91,7 @@ export const usePaymentInitiator = () => {
     const [transactionHash, setTransactionHash] = useState<string | null>(null)
     const [paymentDetails, setPaymentDetails] = useState<PaymentCreationResponse | null>(null)
     const [isEstimatingGas, setIsEstimatingGas] = useState(false)
-    const [currentOperationIsAddMoney, setCurrentOperationIsAddMoney] = useState(false)
-
-    // calculate fee details
-    const [feeCalculations, setFeeCalculations] = useState({
-        networkFee: { expected: '0.00', max: '0.00' },
-        slippage: undefined as { expected: string; max: string } | undefined,
-        estimatedFee: '0.00',
-        totalMax: '0.00',
-    })
+    const [xChainRoute, setXChainRoute] = useState<PeanutCrossChainRoute | undefined>(undefined)
 
     // use chargeDetails from the store primarily, fallback to createdChargeDetails
     const activeChargeDetails = useMemo(
@@ -120,19 +109,11 @@ export const usePaymentInitiator = () => {
         return !areEvmAddressesEqual(selectedTokenData.address, activeChargeDetails.tokenAddress)
     }, [selectedTokenData, activeChargeDetails])
 
-    const isProcessing = useMemo(
+    const isProcessing = useMemo<boolean>(
         () => loadingStep !== 'Idle' && loadingStep !== 'Success' && loadingStep !== 'Error',
         [loadingStep]
     )
 
-    const calculatedSlippage = useMemo(() => {
-        if (!selectedTokenData?.price || !slippagePercentage || !estimatedFromValue) return null
-
-        const slippageAmount = (slippagePercentage / 100) * selectedTokenData.price * Number(estimatedFromValue)
-
-        return isNaN(slippageAmount) ? null : slippageAmount.toFixed(2)
-    }, [slippagePercentage, selectedTokenData?.price, estimatedFromValue])
-
     // reset state
     useEffect(() => {
         setError(null)
@@ -144,159 +125,15 @@ export const usePaymentInitiator = () => {
 
         setUnsignedTx(null)
         setXChainUnsignedTxs(null)
+        setXChainRoute(undefined)
         setEstimatedFromValue('0')
-        setTxFee('0')
         setSlippagePercentage(undefined)
         setEstimatedGasCost(undefined)
         setFeeOptions([])
-        setFeeCalculations({
-            networkFee: { expected: '0.00', max: '0.00' },
-            slippage: undefined,
-            estimatedFee: '0.00',
-            totalMax: '0.00',
-        })
-
         setTransactionHash(null)
         setPaymentDetails(null)
     }, [selectedChainID, selectedTokenAddress, requestDetails])
 
-    // estimate gas fee when transaction is prepared
-    useEffect(() => {
-        if (!activeChargeDetails || (!unsignedTx && !xChainUnsignedTxs)) return
-
-        let determinedEstimatorAccount: Hex | undefined
-
-        if (xChainUnsignedTxs && xChainUnsignedTxs.length > 0) {
-            // xChain transactions are always for the external (Wagmi) wallet
-            determinedEstimatorAccount = wagmiAddress as Hex | undefined
-        } else if (unsignedTx) {
-            // for unsignedTx, check if it's an Add Money operation or dependent on PeanutWallet state
-            if (currentOperationIsAddMoney) {
-                determinedEstimatorAccount = wagmiAddress as Hex | undefined
-            } else {
-                determinedEstimatorAccount = (isPeanutWallet ? peanutWalletAddress : wagmiAddress) as Hex | undefined
-            }
-        }
-
-        if (!determinedEstimatorAccount) {
-            console.warn(
-                'Gas estimation skipped: No valid estimator account found (wagmiAddress or peanutWalletAddress). Ensure one is connected and active for the flow.'
-            )
-            setError('Cannot estimate fees: Wallet address not found.')
-            setIsFeeEstimationError(true)
-            return
-        }
-
-        setIsEstimatingGas(true)
-        setIsFeeEstimationError(false)
-        estimateGasFee({
-            from: determinedEstimatorAccount as Hex,
-            chainId: isXChain ? selectedChainID : activeChargeDetails.chainId,
-            preparedTxs: isXChain || diffTokens ? xChainUnsignedTxs! : [unsignedTx!],
-        })
-            .then(({ transactionCostUSD, feeOptions: calculatedFeeOptions }) => {
-                if (transactionCostUSD) setEstimatedGasCost(transactionCostUSD)
-                if (calculatedFeeOptions) setFeeOptions(calculatedFeeOptions)
-            })
-            .catch((error) => {
-                console.error('Error calculating transaction cost:', error)
-                captureException(error)
-                setIsFeeEstimationError(true)
-                setError(`Failed to estimate gas fee: ${ErrorHandler(error)}`)
-            })
-            .finally(() => {
-                setIsEstimatingGas(false)
-            })
-    }, [unsignedTx, xChainUnsignedTxs, activeChargeDetails, isXChain, diffTokens, selectedChainID, estimateGasFee])
-
-    // calculate display fees
-    useEffect(() => {
-        if (!activeChargeDetails || !selectedTokenData || isEstimatingGas || isPreparingTx) {
-            return
-        }
-
-        const EXPECTED_NETWORK_FEE_MULTIPLIER = 0.7
-        const EXPECTED_SLIPPAGE_MULTIPLIER = 0.1
-        setIsCalculatingFees(true)
-        let timerId: NodeJS.Timeout | undefined
-
-        try {
-            // determine the base fee depending on the transaction type
-            const baseNetworkFee = isPeanutWallet ? 0 : Number(estimatedGasCost || 0)
-
-            const networkFee = {
-                // expected fee is always a fraction of the base fee
-                expected: baseNetworkFee * EXPECTED_NETWORK_FEE_MULTIPLIER,
-                // max fee is the full base fee determined above
-                max: baseNetworkFee,
-            }
-
-            const slippage =
-                (isXChain || diffTokens) && calculatedSlippage
-                    ? {
-                          expected: Number(calculatedSlippage) * EXPECTED_SLIPPAGE_MULTIPLIER,
-                          max: Number(calculatedSlippage),
-                      }
-                    : undefined
-
-            const totalMax =
-                Number(estimatedFromValue) * selectedTokenData!.price + networkFee.max + (slippage?.max || 0)
-
-            const formatNumberSafely = (num: number) => {
-                if (isNaN(num) || !isFinite(num)) return '0.00'
-                return num < 0.01 && num > 0 ? ' <0.01' : num.toFixed(2)
-            }
-
-            setFeeCalculations({
-                networkFee: {
-                    expected: formatNumberSafely(networkFee.expected),
-                    max: formatNumberSafely(networkFee.max),
-                },
-                slippage: slippage
-                    ? {
-                          expected: formatNumberSafely(slippage.expected),
-                          max: formatNumberSafely(slippage.max),
-                      }
-                    : undefined,
-                estimatedFee: formatNumberSafely(networkFee.expected + (slippage?.expected || 0)),
-                totalMax: formatNumberSafely(totalMax),
-            })
-        } catch (error) {
-            console.error('Error calculating fees:', error)
-            setIsFeeEstimationError(true)
-            setError('Failed to calculate fees')
-            setFeeCalculations({
-                networkFee: { expected: '0.00', max: '0.00' },
-                slippage: undefined,
-                estimatedFee: '0.00',
-                totalMax: '0.00',
-            })
-        } finally {
-            // schedule setting isCalculatingFees to false
-            timerId = setTimeout(() => {
-                setIsCalculatingFees(false)
-            }, 100)
-        }
-
-        return () => {
-            if (timerId) {
-                clearTimeout(timerId)
-            }
-        }
-    }, [
-        isXChain,
-        diffTokens,
-        txFee,
-        calculatedSlippage,
-        activeChargeDetails,
-        selectedTokenData,
-        isPeanutWallet,
-        estimatedGasCost,
-        estimatedFromValue,
-        isEstimatingGas,
-        isPreparingTx,
-    ])
-
     const handleError = useCallback(
         (err: unknown, step: string): InitiationResult => {
             console.error(`Error during ${step}:`, err)
@@ -323,10 +160,22 @@ export const usePaymentInitiator = () => {
 
     // prepare transaction details (called from Confirm view)
     const prepareTransactionDetails = useCallback(
-        async (chargeDetails: TRequestChargeResponse, isAddMoneyFlowContext?: boolean) => {
-            setCurrentOperationIsAddMoney(!!isAddMoneyFlowContext)
+        async (
+            chargeDetails: TRequestChargeResponse,
+            fromTokenAddress?: string,
+            fromChainId?: string,
+            usdAmount?: string
+        ) => {
+            // Default to selected token/chain if not provided
+            const actualFromTokenAddress = fromTokenAddress ?? selectedTokenData?.address
+            const actualFromChainId = fromChainId ?? selectedChainID
 
-            if (!selectedTokenData || (!peanutWalletAddress && !wagmiAddress)) {
+            if (
+                !selectedTokenData ||
+                (!peanutWalletAddress && !wagmiAddress) ||
+                !actualFromTokenAddress ||
+                !actualFromChainId
+            ) {
                 console.warn('Missing data for transaction preparation')
                 return
             }
@@ -335,59 +184,56 @@ export const usePaymentInitiator = () => {
             setIsFeeEstimationError(false)
             setUnsignedTx(null)
             setXChainUnsignedTxs(null)
+            setXChainRoute(undefined)
 
             setEstimatedGasCost(undefined)
             setFeeOptions([])
-            setFeeCalculations({
-                networkFee: { expected: '0.00', max: '0.00' },
-                slippage: undefined,
-                estimatedFee: '0.00',
-                totalMax: '0.00',
-            })
-
-            // If PeanutWallet is connected AND it's NOT an Add Money flow (which mandates external wallet),
-            // then we can assume preparation is for Peanut Wallet.
-            // Otherwise, proceed to prepare for external wallet.
-            if (isPeanutWallet && !isAddMoneyFlowContext) {
-                setEstimatedFromValue(chargeDetails.tokenAmount)
-                setIsPreparingTx(false)
-                return
-            }
 
             setIsPreparingTx(true)
 
             try {
-                const _isXChain = selectedChainID !== chargeDetails.chainId
-                const _diffTokens = !areEvmAddressesEqual(selectedTokenData.address, chargeDetails.tokenAddress)
+                const _isXChain = actualFromChainId !== chargeDetails.chainId
+                const _diffTokens = !areEvmAddressesEqual(actualFromTokenAddress, chargeDetails.tokenAddress)
                 setIsXChain(_isXChain)
 
                 if (_isXChain || _diffTokens) {
                     setLoadingStep('Preparing Transaction')
-                    const txData = await prepareXChainTransaction(
-                        {
-                            address: selectedTokenData.address,
-                            chainId: selectedTokenData.chainId,
-                            decimals: selectedTokenData.decimals || 18,
+                    const senderAddress = isPeanutWallet ? peanutWalletAddress : wagmiAddress
+                    setIsCalculatingFees(true)
+                    const amount = usdAmount
+                        ? {
+                              fromUsd: usdAmount,
+                          }
+                        : {
+                              toAmount: parseUnits(chargeDetails.tokenAmount, chargeDetails.tokenDecimals),
+                          }
+                    const xChainRoute = await getRoute({
+                        from: {
+                            address: senderAddress as Address,
+                            tokenAddress: actualFromTokenAddress as Address,
+                            chainId: actualFromChainId,
                         },
-                        {
-                            recipientAddress: chargeDetails.requestLink.recipientAddress,
+                        to: {
+                            address: chargeDetails.requestLink.recipientAddress as Address,
+                            tokenAddress: chargeDetails.tokenAddress as Address,
                             chainId: chargeDetails.chainId,
-                            tokenAmount: chargeDetails.tokenAmount,
-                            tokenAddress: chargeDetails.tokenAddress,
-                            tokenDecimals: chargeDetails.tokenDecimals,
-                            tokenType: Number(chargeDetails.tokenType),
                         },
-                        peanutWalletAddress ?? wagmiAddress!
-                    )
-
-                    if (!txData?.unsignedTxs) {
-                        throw new Error('Failed to prepare cross-chain transaction')
-                    }
+                        ...amount,
+                    })
 
-                    setXChainUnsignedTxs(txData.unsignedTxs)
-                    setEstimatedFromValue(txData.estimatedFromAmount)
-                    setTxFee(txData.feeEstimation)
-                    setSlippagePercentage(txData.slippagePercentage)
+                    const slippagePercentage = Number(xChainRoute.fromAmount) / Number(chargeDetails.tokenAmount) - 1
+                    setXChainRoute(xChainRoute)
+                    setXChainUnsignedTxs(
+                        xChainRoute.transactions.map((tx) => ({
+                            to: tx.to,
+                            data: tx.data,
+                            value: BigInt(tx.value),
+                        }))
+                    )
+                    setIsCalculatingFees(false)
+                    setEstimatedGasCost(xChainRoute.feeCostsUsd)
+                    setEstimatedFromValue(xChainRoute.fromAmount)
+                    setSlippagePercentage(slippagePercentage)
                 } else {
                     setLoadingStep('Preparing Transaction')
                     const tx = peanut.prepareRequestLinkFulfillmentTransaction({
@@ -402,9 +248,18 @@ export const usePaymentInitiator = () => {
                         throw new Error('Failed to prepare transaction')
                     }
 
+                    setIsCalculatingFees(true)
+                    setEstimatedGasCost(
+                        await estimateTransactionCostUsd(
+                            tx.unsignedTx.from! as Address,
+                            tx.unsignedTx.to! as Address,
+                            tx.unsignedTx.data! as Hex,
+                            selectedChainID
+                        )
+                    )
+                    setIsCalculatingFees(false)
                     setUnsignedTx(tx.unsignedTx)
                     setEstimatedFromValue(chargeDetails.tokenAmount)
-                    setTxFee('0')
                     setSlippagePercentage(undefined)
                 }
                 setLoadingStep('Idle')
@@ -586,28 +441,9 @@ export const usePaymentInitiator = () => {
 
     // helper function: Handle Peanut Wallet payment
     const handlePeanutWalletPayment = useCallback(
-        async (chargeDetails: TRequestChargeResponse, payload: InitiatePaymentPayload): Promise<InitiationResult> => {
+        async (chargeDetails: TRequestChargeResponse): Promise<InitiationResult> => {
             setLoadingStep('Preparing Transaction')
 
-            // determine expected chain, token, and decimals based on whether it's a pinta request.
-            const isPintaSpecific = payload.isPintaReq
-            const expectedChainId = isPintaSpecific
-                ? PINTA_WALLET_CHAIN.id.toString()
-                : PEANUT_WALLET_CHAIN.id.toString()
-            const expectedTokenAddress = isPintaSpecific ? PINTA_WALLET_TOKEN : PEANUT_WALLET_TOKEN
-            const expectedTokenDecimals = isPintaSpecific ? PINTA_WALLET_TOKEN_DECIMALS : PEANUT_WALLET_TOKEN_DECIMALS
-
-            // validate that the charge details match the expected parameters for payment.
-            if (
-                chargeDetails.chainId !== expectedChainId ||
-                chargeDetails.tokenAddress.toLowerCase() !== expectedTokenAddress.toLowerCase() ||
-                chargeDetails.tokenDecimals !== expectedTokenDecimals
-            ) {
-                const errorMsg = `Charge details mismatch expected values for ${isPintaSpecific ? 'Pinta' : 'Peanut'} payment. Expected Chain: ${expectedChainId}, Token: ${expectedTokenAddress}, Decimals: ${expectedTokenDecimals}. Got Chain: ${chargeDetails.chainId}, Token: ${chargeDetails.tokenAddress}, Decimals: ${chargeDetails.tokenDecimals}`
-                console.error(errorMsg)
-                throw new Error(errorMsg)
-            }
-
             // validate required properties for preparing the transaction.
             if (
                 !chargeDetails.requestLink?.recipientAddress ||
@@ -620,25 +456,23 @@ export const usePaymentInitiator = () => {
                 throw new Error('Charge data is missing required properties for transaction preparation.')
             }
 
-            // prepare the transaction using peanut sdk.
-            const tx = peanut.prepareRequestLinkFulfillmentTransaction({
-                recipientAddress: chargeDetails.requestLink.recipientAddress,
-                tokenAddress: chargeDetails.tokenAddress,
-                tokenAmount: chargeDetails.tokenAmount,
-                tokenDecimals: chargeDetails.tokenDecimals,
-                tokenType: Number(chargeDetails.tokenType) as peanutInterfaces.EPeanutLinkType,
-            })
-
-            if (!tx?.unsignedTx) {
-                console.error('Failed to prepare Peanut Wallet transaction (SDK returned null/undefined unsignedTx).')
-                throw new Error('Failed to prepare Peanut Wallet transaction')
+            let receipt: TransactionReceipt
+            const transactionsToSend = xChainUnsignedTxs ?? (unsignedTx ? [unsignedTx] : null)
+            if (transactionsToSend && transactionsToSend.length > 0) {
+                setLoadingStep('Sending Transaction')
+                receipt = await sendTransactions(transactionsToSend, PEANUT_WALLET_CHAIN.id.toString())
+            } else if (
+                areEvmAddressesEqual(chargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) &&
+                chargeDetails.chainId === PEANUT_WALLET_CHAIN.id.toString()
+            ) {
+                receipt = await sendMoney(
+                    chargeDetails.requestLink.recipientAddress as `0x${string}`,
+                    chargeDetails.tokenAmount
+                )
+            } else {
+                console.error('No transaction prepared to send for peanut wallet.')
+                throw new Error('No transaction prepared to send.')
             }
-            const peanutUnsignedTx = tx.unsignedTx
-
-            // send the prepared transaction via the usewallet hook.
-            setLoadingStep('Sending Transaction')
-
-            const receipt: TransactionReceipt = await sendTransactions([peanutUnsignedTx], chargeDetails.chainId)
 
             // validation of the received receipt.
             if (!receipt || !receipt.transactionHash) {
@@ -654,9 +488,9 @@ export const usePaymentInitiator = () => {
             setLoadingStep('Updating Payment Status')
             const payment: PaymentCreationResponse = await chargesApi.createPayment({
                 chargeId: chargeDetails.uuid,
-                chainId: chargeDetails.chainId,
+                chainId: PEANUT_WALLET_CHAIN.id.toString(),
                 hash: receipt.transactionHash,
-                tokenAddress: chargeDetails.tokenAddress,
+                tokenAddress: PEANUT_WALLET_TOKEN,
             })
             console.log('Backend payment creation response:', payment)
 
@@ -668,7 +502,7 @@ export const usePaymentInitiator = () => {
             console.log('Peanut Wallet payment successful.')
             return { status: 'Success', charge: chargeDetails, payment, txHash: receipt.transactionHash, success: true }
         },
-        [dispatch, sendTransactions]
+        [sendTransactions, xChainUnsignedTxs, unsignedTx]
     )
 
     // helper function: Handle External Wallet payment
@@ -814,7 +648,15 @@ export const usePaymentInitiator = () => {
                 console.log('Proceeding with charge details:', determinedChargeDetails.uuid)
 
                 // 2. handle charge state
-                if (chargeCreated && (payload.isPintaReq || payload.isAddMoneyFlow || !isPeanutWallet)) {
+                if (
+                    chargeCreated &&
+                    (payload.isPintaReq ||
+                        payload.isAddMoneyFlow ||
+                        !isPeanutWallet ||
+                        (isPeanutWallet &&
+                            (!areEvmAddressesEqual(determinedChargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) ||
+                                determinedChargeDetails.chainId !== PEANUT_WALLET_CHAIN.id.toString())))
+                ) {
                     console.log(
                         `Charge created. Transitioning to Confirm view for: ${
                             payload.isPintaReq
@@ -843,7 +685,7 @@ export const usePaymentInitiator = () => {
                     console.log(
                         `Executing Peanut Wallet transaction (chargeCreated: ${chargeCreated}, isPintaReq: ${payload.isPintaReq})`
                     )
-                    return await handlePeanutWalletPayment(determinedChargeDetails, payload)
+                    return await handlePeanutWalletPayment(determinedChargeDetails)
                 } else if (!isPeanutWallet) {
                     console.log('Handling payment for External Wallet (non-AddMoney, called from Confirm view).')
                     if (!determinedChargeDetails) throw new Error('Charge details missing for External Wallet payment.')
@@ -884,85 +726,6 @@ export const usePaymentInitiator = () => {
         ]
     )
 
-    // helper function to prepare cross-chain transactions
-    const prepareXChainTransaction = useCallback(
-        async (
-            tokenData: {
-                address: string
-                chainId: string | number
-                decimals: number
-            },
-            requestLink: {
-                recipientAddress: string
-                chainId: string | number
-                tokenAmount: string
-                tokenAddress: string
-                tokenDecimals: number
-                tokenType: number
-            },
-            senderAddress: string
-        ) => {
-            if (!tokenData?.address || !tokenData?.chainId || tokenData?.decimals === undefined) {
-                throw new Error('Invalid token data for cross-chain transaction')
-            }
-
-            try {
-                const formattedTokenAmount = Number(requestLink.tokenAmount).toFixed(requestLink.tokenDecimals)
-
-                const linkDetails = {
-                    recipientAddress: requestLink.recipientAddress,
-                    chainId: requestLink.chainId.toString(),
-                    tokenAmount: formattedTokenAmount,
-                    tokenAddress: requestLink.tokenAddress,
-                    tokenDecimals: requestLink.tokenDecimals,
-                    tokenType: Number(requestLink.tokenType),
-                }
-
-                const xchainUnsignedTxs = await peanut.prepareXchainRequestFulfillmentTransaction({
-                    fromToken: tokenData.address,
-                    fromChainId: tokenData.chainId.toString(),
-                    senderAddress,
-                    squidRouterUrl: `${SQUID_API_URL}/route`,
-                    provider: await peanut.getDefaultProvider(tokenData.chainId.toString()),
-                    tokenType: isAddressZero(tokenData.address)
-                        ? peanutInterfaces.EPeanutLinkType.native
-                        : peanutInterfaces.EPeanutLinkType.erc20,
-                    fromTokenDecimals: tokenData.decimals,
-                    linkDetails,
-                })
-
-                if (!xchainUnsignedTxs) {
-                    throw new Error('Failed to prepare cross-chain transaction (SDK returned null/undefined)')
-                }
-
-                return xchainUnsignedTxs
-            } catch (error) {
-                console.error('Cross-chain preparation error:', error)
-                let errorBody = undefined
-                try {
-                    if (error instanceof Error && error.message.startsWith('{')) {
-                        errorBody = JSON.parse(error.message)
-                    } else if (typeof (error as any)?.body === 'string' && (error as any).body.startsWith('{')) {
-                        errorBody = JSON.parse((error as any).body)
-                        if (errorBody?.error?.message) errorBody.message = errorBody.error.message
-                    }
-                } catch (e) {
-                    console.log('Failed to parse error as JSON, using original error message')
-                }
-
-                if (errorBody && errorBody.message) {
-                    const code = errorBody.code || errorBody.errorCode || (error as any).code
-                    throw new Error(`Cross-chain prep failed: ${errorBody.message}${code ? ` (Code: ${code})` : ''}`)
-                } else {
-                    throw new Error(
-                        error instanceof Error ? error.message : 'Failed to estimate cross-chain transaction details'
-                    )
-                }
-            }
-        },
-        []
-    )
-
     const cancelOperation = useCallback(() => {
         setError('Please confirm the request in your wallet.')
         setLoadingStep('Error')
@@ -978,17 +741,17 @@ export const usePaymentInitiator = () => {
         activeChargeDetails,
         transactionHash,
         paymentDetails,
-        txFee,
         slippagePercentage,
         estimatedFromValue,
         xChainUnsignedTxs,
+        estimatedGasCost,
         unsignedTx,
-        feeCalculations,
         isCalculatingFees,
         isFeeEstimationError,
         isEstimatingGas,
         isXChain,
         diffTokens,
         cancelOperation,
+        xChainRoute,
     }
 }
diff --git a/src/hooks/wallet/useWallet.ts b/src/hooks/wallet/useWallet.ts
index b208223e6..44fdafdb3 100644
--- a/src/hooks/wallet/useWallet.ts
+++ b/src/hooks/wallet/useWallet.ts
@@ -3,6 +3,7 @@
 import {
     PEANUT_WALLET_CHAIN,
     PEANUT_WALLET_TOKEN,
+    PEANUT_WALLET_TOKEN_DECIMALS,
     peanutPublicClient,
     PINTA_WALLET_TOKEN,
     PINTA_WALLET_TOKEN_DECIMALS,
@@ -13,8 +14,8 @@ import { walletActions } from '@/redux/slices/wallet-slice'
 import { formatAmount } from '@/utils'
 import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { useCallback, useEffect, useState } from 'react'
-import type { Hex } from 'viem'
-import { erc20Abi, formatUnits, getAddress } from 'viem'
+import type { Hex, Address } from 'viem'
+import { erc20Abi, formatUnits, parseUnits, encodeFunctionData, getAddress } from 'viem'
 import { useZeroDev } from '../useZeroDev'
 
 export const useWallet = () => {
@@ -24,6 +25,26 @@ export const useWallet = () => {
     const [isFetchingRewardBalance, setIsFetchingRewardBalance] = useState(true)
     const { balance } = useWalletStore()
 
+    const sendMoney = useCallback(
+        async (toAddress: Address, amountInUsd: string) => {
+            const amountToSend = parseUnits(amountInUsd, PEANUT_WALLET_TOKEN_DECIMALS)
+
+            const txData = encodeFunctionData({
+                abi: erc20Abi,
+                functionName: 'transfer',
+                args: [toAddress, amountToSend],
+            })
+
+            const transaction: peanutInterfaces.IPeanutUnsignedTransaction = {
+                to: PEANUT_WALLET_TOKEN,
+                data: txData,
+            }
+
+            return await sendTransactions([transaction], PEANUT_WALLET_CHAIN.id.toString())
+        },
+        [handleSendUserOpEncoded]
+    )
+
     const sendTransactions = useCallback(
         async (unsignedTxs: peanutInterfaces.IPeanutUnsignedTransaction[], chainId?: string) => {
             const params = unsignedTxs.map((tx: peanutInterfaces.IPeanutUnsignedTransaction) => ({
@@ -94,6 +115,7 @@ export const useWallet = () => {
         balance: BigInt(balance),
         isConnected: isKernelClientReady,
         sendTransactions,
+        sendMoney,
         getRewardWalletBalance,
         fetchBalance,
         isFetchingBalance,
diff --git a/src/services/services.types.ts b/src/services/services.types.ts
index 444289c7a..eefa460b5 100644
--- a/src/services/services.types.ts
+++ b/src/services/services.types.ts
@@ -181,6 +181,8 @@ export interface TRequestChargeResponse {
     updatedAt: string
     payments: Payment[]
     fulfillmentPayment: Payment | null
+    currencyCode: string
+    currencyAmount: string
     timeline: TimelineEntry[]
     requestee?: {
         userId: string
@@ -200,8 +202,6 @@ export interface TRequestChargeResponse {
             }
         }
     }
-    currencyAmount?: string
-    currencyCode?: string
 }
 
 // create payment response
diff --git a/src/services/swap.ts b/src/services/swap.ts
new file mode 100644
index 000000000..f355751fc
--- /dev/null
+++ b/src/services/swap.ts
@@ -0,0 +1,552 @@
+'use server'
+import type { Address, Hash, Hex } from 'viem'
+import { parseUnits, formatUnits, encodeFunctionData, erc20Abi } from 'viem'
+
+import { fetchTokenPrice, estimateTransactionCostUsd } from '@/app/actions/tokens'
+import { getPublicClient, type ChainId } from '@/app/actions/clients'
+import { fetchWithSentry, isNativeCurrency } from '@/utils'
+import { SQUID_API_URL } from '@/constants'
+
+type TokenInfo = {
+    address: Address
+    tokenAddress: Address
+    chainId: string
+}
+
+type RouteParams = {
+    from: TokenInfo
+    to: TokenInfo
+} & (
+    | {
+          fromAmount: bigint
+          toAmount?: undefined
+          fromUsd?: undefined
+          toUsd?: undefined
+      }
+    | {
+          fromAmount?: undefined
+          toAmount: bigint
+          fromUsd?: undefined
+          toUsd?: undefined
+      }
+    | {
+          fromAmount?: undefined
+          toAmount?: undefined
+          fromUsd: string
+          toUsd?: undefined
+      }
+    | {
+          fromAmount?: undefined
+          toAmount?: undefined
+          fromUsd?: undefined
+          toUsd: string
+      }
+)
+
+type SquidGetRouteParams = {
+    fromChain: string
+    fromToken: string
+    fromAmount: string
+    fromAddress: string
+    toAddress: string
+    toChain: string
+    toToken: string
+}
+
+type SquidCall = {
+    chainType: string
+    callType: number
+    target: Address
+    callData: Hex
+    value: string
+    payload: {
+        tokenAddress: Address
+        inputPos: number
+    }
+    estimatedGas: string
+}
+
+type SquidAction = {
+    type: 'swap' | 'rfq'
+    chainType: string
+    data: {
+        liquidityProvider: string
+        provider: string
+        type: string
+        fillerAddress: Address
+        expiry: string
+        logoURI: string
+        calls: SquidCall[]
+    }
+    fromChain: string
+    toChain: string
+    fromToken: SquidToken
+    toToken: SquidToken
+    fromAmount: string
+    toAmount: string
+    toAmountMin: string
+    exchangeRate: string
+    priceImpact: string
+    stage: number
+    provider: string
+    logoURI: string
+    description: string
+    orderHash: Hash
+}
+
+type SquidToken = {
+    id: string
+    symbol: string
+    address: Address
+    chainId: string
+    name: string
+    decimals: number
+    coingeckoId: string
+    type: string
+    logoURI: string
+    axelarNetworkSymbol: string
+    subGraphOnly: boolean
+    subGraphIds: string[]
+    enabled: boolean
+    active: boolean
+    visible: boolean
+    usdPrice: number
+}
+
+type SquidFeeCost = {
+    amount: string
+    amountUsd: string
+    description: string
+    gasLimit: string
+    gasMultiplier: number
+    name: string
+    token: SquidToken
+    logoURI: string
+}
+
+type SquidGasCost = {
+    type: string
+    token: SquidToken
+    amount: string
+    gasLimit: string
+    amountUsd: string
+}
+
+type SquidRouteResponse = {
+    route: {
+        estimate: {
+            actions: SquidAction[]
+            fromAmount: string
+            toAmount: string
+            toAmountMin: string
+            exchangeRate: string
+            aggregatePriceImpact: string
+            fromAmountUSD: string
+            toAmountUSD: string
+            toAmountMinUSD: string
+            aggregateSlippage: number
+            fromToken: SquidToken
+            toToken: SquidToken
+            isBoostSupported: boolean
+            feeCosts: SquidFeeCost[]
+            gasCosts: SquidGasCost[]
+            estimatedRouteDuration: number
+        }
+        transactionRequest: {
+            type: string
+            target: Address
+            data: Hex
+            value: string
+            gasLimit: string
+            lastBaseFeePerGas: string
+            maxFeePerGas: string
+            maxPriorityFeePerGas: string
+            gasPrice: string
+            requestId: string
+            expiry: string
+            expiryOffset: string
+        }
+        params: SquidGetRouteParams
+        quoteId: string
+    }
+}
+
+/**
+ * Check current allowance for a token
+ */
+async function checkTokenAllowance(
+    tokenAddress: Address,
+    ownerAddress: Address,
+    spenderAddress: Address,
+    chainId: string
+): Promise<bigint> {
+    const client = await getPublicClient(Number(chainId) as ChainId)
+
+    const allowance = await client.readContract({
+        address: tokenAddress,
+        abi: erc20Abi,
+        functionName: 'allowance',
+        args: [ownerAddress, spenderAddress],
+    })
+
+    return allowance
+}
+
+/**
+ * Create an approve transaction
+ */
+function createApproveTransaction(
+    tokenAddress: Address,
+    spenderAddress: Address,
+    amount: bigint
+): { to: Address; data: Hex; value: string } {
+    const data = encodeFunctionData({
+        abi: erc20Abi,
+        functionName: 'approve',
+        args: [spenderAddress, amount],
+    })
+
+    return {
+        to: tokenAddress,
+        data,
+        value: '0',
+    }
+}
+
+/**
+ * Estimate gas cost for approve transaction in USD
+ */
+async function estimateApprovalCostUsd(
+    tokenAddress: Address,
+    spenderAddress: Address,
+    amount: bigint,
+    fromAddress: Address,
+    chainId: string
+): Promise<number> {
+    const estimateCost = await estimateTransactionCostUsd(
+        fromAddress,
+        tokenAddress,
+        encodeFunctionData({
+            abi: erc20Abi,
+            functionName: 'approve',
+            args: [spenderAddress, amount],
+        }),
+        chainId
+    )
+    return estimateCost
+}
+
+/**
+ * Fetch the route from the squid API.
+ * We use this when we fetch the route several times while finding the optimal fromAmount.
+ */
+async function getSquidRouteRaw(params: SquidGetRouteParams): Promise<SquidRouteResponse> {
+    const response = await fetchWithSentry(`${SQUID_API_URL}/v2/route`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'x-integrator-id': process.env.SQUID_INTEGRATOR_ID!,
+        },
+        body: JSON.stringify(params),
+    })
+
+    if (!response.ok) {
+        throw new Error(`Failed to get route: ${response.status}`)
+    }
+
+    const data = await response.json()
+    return data as SquidRouteResponse
+}
+
+/**
+ * Find the optimal fromAmount for a given target amount of tokens.
+ *
+ * Uses binary search to find the optimal fromAmount for a given target amount of tokens.
+ * This is done by calling the squid API with different fromAmount values until the
+ * overage is below a certain threshold.
+ */
+async function findOptimalFromAmount(
+    params: Omit<SquidGetRouteParams, 'fromAmount'>,
+    targetToAmount: bigint,
+    _toTokenPrice?: { price: number; decimals: number }
+): Promise<SquidRouteResponse> {
+    // Only fetch if not provided
+    const [toTokenPrice, fromTokenPrice] = await Promise.all([
+        _toTokenPrice ? Promise.resolve(_toTokenPrice) : fetchTokenPrice(params.toToken, params.toChain),
+        fetchTokenPrice(params.fromToken, params.fromChain),
+    ])
+    if (!toTokenPrice) throw new Error('Could not fetch to token price')
+    if (!fromTokenPrice) throw new Error('Could not fetch from token price')
+
+    const targetUsd = Number(formatUnits(targetToAmount, toTokenPrice.decimals)) * toTokenPrice.price
+    const initialFromAmount = parseUnits((targetUsd / fromTokenPrice.price).toString(), fromTokenPrice.decimals)
+    console.info('findOptimalFromAmount', { params, targetToAmount, toTokenPrice, targetUsd })
+
+    // Dynamic tolerances based on USD amount
+    // This is needed because for different quantities the slippage is different
+    // for example 0.4% of 10 USD is different than 0.4% of 1000 USD
+    let maxOverage: number
+    let rangeMultiplier: { low: number; high: number }
+    if (targetUsd < 0.3) {
+        // Really small amounts, mainly used for testing
+        maxOverage = 0.05 // 5%
+        rangeMultiplier = { low: 0.945, high: 1.15 }
+    } else if (targetUsd < 1) {
+        maxOverage = 0.01 // 1%
+        rangeMultiplier = { low: 0.985, high: 1.03 }
+    } else if (targetUsd < 10) {
+        maxOverage = 0.005 // 0.5%
+        rangeMultiplier = { low: 0.9925, high: 1.015 }
+    } else if (targetUsd < 1000) {
+        maxOverage = 0.003 // 0.3%
+        rangeMultiplier = { low: 0.995, high: 1.009 }
+    } else {
+        maxOverage = 0.001 // 0.1%
+        rangeMultiplier = { low: 0.995, high: 1.01 }
+    }
+
+    let lowBound = (initialFromAmount * BigInt(Math.floor(rangeMultiplier.low * 10000))) / 10000n
+    let highBound = (initialFromAmount * BigInt(Math.floor(rangeMultiplier.high * 10000))) / 10000n
+
+    let bestResult: { response: SquidRouteResponse; overage: number } | null = null
+    let iterations = 0
+    const maxIterations = 3 // Avoid too many calls to squid API!
+
+    // Binary search to find the optimal fromAmount
+    while (iterations < maxIterations && highBound > lowBound) {
+        const midPoint = (lowBound + highBound) / 2n
+        const testParams = { ...params, fromAmount: midPoint.toString() }
+
+        try {
+            const response = await getSquidRouteRaw(testParams)
+            const receivedAmount = BigInt(response.route.estimate.toAmountMin)
+            console.log('fromAmount', midPoint)
+            console.log('receivedAmount', receivedAmount)
+            console.log('targetToAmount', targetToAmount)
+            if (receivedAmount >= targetToAmount) {
+                iterations++
+                const diff = receivedAmount - targetToAmount
+                const target = targetToAmount
+
+                let overage: number
+                if (diff <= Number.MAX_SAFE_INTEGER && target <= Number.MAX_SAFE_INTEGER) {
+                    overage = Number(diff) / Number(target)
+                } else {
+                    // Handle very large numbers with careful scaling
+                    overage = Number(diff / (target / 1_000_000_000_000_000_000n)) / 1e18
+                }
+
+                if (overage <= maxOverage) {
+                    return response
+                }
+
+                bestResult = { response, overage }
+                highBound = midPoint - 1n
+            } else {
+                lowBound = midPoint + 1n
+            }
+        } catch (error) {
+            console.warn('Error fetching route:', error)
+            lowBound = midPoint + 1n
+            iterations++
+        }
+    }
+
+    // Return best result found, or make one final call with high bound
+    if (bestResult) {
+        return bestResult.response
+    }
+
+    // Fallback call
+    return await getSquidRouteRaw({ ...params, fromAmount: highBound.toString() })
+}
+
+export type PeanutCrossChainRoute = {
+    expiry: string
+    type: 'swap' | 'rfq'
+    fromAmount: string
+    transactions: {
+        to: Address
+        data: Hex
+        value: string
+        feeOptions: {
+            gasLimit: string
+            maxFeePerGas: string
+            maxPriorityFeePerGas: string
+            gasPrice: string
+        }
+    }[]
+    feeCostsUsd: number
+    rawResponse: SquidRouteResponse
+}
+
+/**
+ * Get the route for a given amount of tokens from one chain to another.
+ *
+ * Accepts any specified amount either in tokens or USD, specifying send or receive amount.
+ *
+ * Returns the route with the less slippage..
+ */
+export async function getRoute({ from, to, ...amount }: RouteParams): Promise<PeanutCrossChainRoute> {
+    let fromAmount: string
+    let response: SquidRouteResponse
+
+    console.info('getRoute', { from, to }, amount)
+
+    if (amount.fromAmount) {
+        fromAmount = amount.fromAmount.toString()
+        response = await getSquidRouteRaw({
+            fromChain: from.chainId,
+            fromToken: from.tokenAddress,
+            fromAmount: fromAmount,
+            fromAddress: from.address,
+            toAddress: to.address,
+            toChain: to.chainId,
+            toToken: to.tokenAddress,
+        })
+    } else if (amount.fromUsd) {
+        // Convert USD to token amount
+        const fromTokenPrice = await fetchTokenPrice(from.tokenAddress, from.chainId)
+        if (!fromTokenPrice) throw new Error('Could not fetch from token price')
+
+        const tokenAmount = Number(amount.fromUsd) / fromTokenPrice.price
+        fromAmount = parseUnits(tokenAmount.toFixed(fromTokenPrice.decimals), fromTokenPrice.decimals).toString()
+
+        response = await getSquidRouteRaw({
+            fromChain: from.chainId,
+            fromToken: from.tokenAddress,
+            fromAmount,
+            fromAddress: from.address,
+            toAddress: to.address,
+            toChain: to.chainId,
+            toToken: to.tokenAddress,
+        })
+    } else if (amount.toAmount) {
+        // Use binary search to find optimal fromAmount
+        response = await findOptimalFromAmount(
+            {
+                fromChain: from.chainId,
+                fromToken: from.tokenAddress,
+                fromAddress: from.address,
+                toAddress: to.address,
+                toChain: to.chainId,
+                toToken: to.tokenAddress,
+            },
+            amount.toAmount
+        )
+    } else if (amount.toUsd) {
+        // Convert target USD to token amount, then use binary search
+        const toTokenPrice = await fetchTokenPrice(to.tokenAddress, to.chainId)
+        if (!toTokenPrice) throw new Error('Could not fetch to token price')
+
+        const targetToAmount = parseUnits(
+            (parseFloat(amount.toUsd) / toTokenPrice.price).toFixed(toTokenPrice.decimals),
+            toTokenPrice.decimals
+        )
+
+        response = await findOptimalFromAmount(
+            {
+                fromChain: from.chainId,
+                fromToken: from.tokenAddress,
+                fromAddress: from.address,
+                toAddress: to.address,
+                toChain: to.chainId,
+                toToken: to.tokenAddress,
+            },
+            targetToAmount,
+            toTokenPrice // Pass the already-fetched price
+        )
+    } else {
+        throw new Error('No amount specified')
+    }
+
+    const route = response.route
+
+    let feeCostsUsd = [...route.estimate.feeCosts, ...route.estimate.gasCosts].reduce(
+        (sum, cost) => sum + Number(cost.amountUsd),
+        0
+    )
+
+    const transactions: {
+        to: Address
+        data: Hex
+        value: string
+        feeOptions: {
+            gasLimit: string
+            maxFeePerGas: string
+            maxPriorityFeePerGas: string
+            gasPrice: string
+        }
+    }[] = []
+
+    // Check if approval is needed for non-native tokens
+    if (!isNativeCurrency(from.tokenAddress)) {
+        const fromAmount = BigInt(route.estimate.fromAmount)
+        const spenderAddress = route.transactionRequest.target
+
+        try {
+            const currentAllowance = await checkTokenAllowance(
+                from.tokenAddress,
+                from.address,
+                spenderAddress,
+                from.chainId
+            )
+
+            // If current allowance is insufficient, create approve transaction
+            if (currentAllowance < fromAmount) {
+                const approveTransaction = createApproveTransaction(from.tokenAddress, spenderAddress, fromAmount)
+
+                // Add approval transaction to the beginning of transactions array
+                transactions.push({
+                    ...approveTransaction,
+                    feeOptions: {
+                        gasLimit: route.transactionRequest.gasLimit,
+                        maxFeePerGas: route.transactionRequest.maxFeePerGas,
+                        maxPriorityFeePerGas: route.transactionRequest.maxPriorityFeePerGas,
+                        gasPrice: route.transactionRequest.gasPrice,
+                    },
+                })
+
+                // Add approval cost to fee costs
+                const approvalCostUsd = await estimateApprovalCostUsd(
+                    from.tokenAddress,
+                    spenderAddress,
+                    fromAmount,
+                    from.address,
+                    from.chainId
+                )
+                feeCostsUsd += approvalCostUsd
+            }
+        } catch (error) {
+            console.error('Error checking allowance:', error)
+            // Continue without approval transaction if there's an error
+        }
+    }
+
+    // Add the main swap transaction
+    transactions.push({
+        to: route.transactionRequest.target,
+        data: route.transactionRequest.data,
+        value: route.transactionRequest.value,
+        feeOptions: {
+            gasLimit: route.transactionRequest.gasLimit,
+            maxFeePerGas: route.transactionRequest.maxFeePerGas,
+            maxPriorityFeePerGas: route.transactionRequest.maxPriorityFeePerGas,
+            gasPrice: route.transactionRequest.gasPrice,
+        },
+    })
+
+    const xChainRoute = {
+        expiry: route.transactionRequest.expiry,
+        type: route.estimate.actions[0].type,
+        fromAmount: route.estimate.fromAmount,
+        transactions,
+        feeCostsUsd,
+        rawResponse: response,
+    }
+
+    console.info('xChainRoute', xChainRoute)
+    console.info('xChainRoute created with expiry:', route.transactionRequest.expiry)
+
+    return xChainRoute
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 990765362..6a5ca5b0c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,6 +3,7 @@ export * from './sdkErrorHandler.utils'
 export * from './bridge-accounts.utils'
 export * from './balance.utils'
 export * from './sentry.utils'
+export * from './token.utils'
 export * from './onramp.utils'
 
 // Bridge utils - explicit exports to avoid naming conflicts
diff --git a/tailwind.config.js b/tailwind.config.js
index 95d5b0125..703f8cc2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -173,11 +173,17 @@ module.exports = {
                     '50%': { transform: 'scale(1.05)', opacity: '1' },
                     '100%': { transform: 'scale(0.95)', opacity: '0.8' },
                 },
+                'pulse-strong': {
+                    '0%': { opacity: '1' },
+                    '50%': { opacity: '0.3' },
+                    '100%': { opacity: '1' },
+                },
             },
             animation: {
                 colorPulse: 'colorPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                 fadeIn: 'fadeIn 0.3s ease-in-out',
                 pulsate: 'pulsate 1.5s ease-in-out infinite',
+                'pulse-strong': 'pulse-strong 1s ease-in-out infinite',
             },
             opacity: {
                 85: '.85',