From 0fc636d05f9b1c57c96b9f2cfcdf4ac1694a2455 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 09:58:36 -0300
Subject: [PATCH 1/7] refactor(request): better view state handling on pay

---
 src/components/Request/Pay/Pay.tsx            |   6 +-
 .../Request/Pay/Views/Initial.view.tsx        | 160 ++++++++++--------
 2 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/src/components/Request/Pay/Pay.tsx b/src/components/Request/Pay/Pay.tsx
index 2e04f3e80..1cd200df7 100644
--- a/src/components/Request/Pay/Pay.tsx
+++ b/src/components/Request/Pay/Pay.tsx
@@ -1,12 +1,13 @@
 'use client'
 
-import { createElement, useEffect, useState } from 'react'
+import { createElement, useEffect, useState, useContext } from 'react'
 import * as _consts from './Pay.consts'
 import * as assets from '@/assets'
 import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 
 import * as generalViews from './Views/GeneralViews'
 import * as utils from '@/utils'
+import * as context from '@/context'
 import { useCreateLink } from '@/components/Create/useCreateLink'
 import { ActionType, estimatePoints } from '@/components/utils/utils'
 import { type ITokenPriceData } from '@/interfaces'
@@ -21,6 +22,7 @@ export const PayRequestLink = () => {
     const [estimatedGasCost, setEstimatedGasCost] = useState<number | undefined>(undefined)
     const [transactionHash, setTransactionHash] = useState<string>('')
     const [unsignedTx, setUnsignedTx] = useState<peanutInterfaces.IPeanutUnsignedTransaction | undefined>(undefined)
+    const { setLoadingState } = useContext(context.loadingStateContext)
     const [errorMessage, setErrorMessage] = useState<string>('')
 
     const fetchPointsEstimation = async (
@@ -55,6 +57,7 @@ export const PayRequestLink = () => {
             screen: _consts.PAY_SCREEN_FLOW[newIdx],
             idx: newIdx,
         }))
+        setLoadingState('Idle')
     }
 
     const handleOnPrev = () => {
@@ -64,6 +67,7 @@ export const PayRequestLink = () => {
             screen: _consts.PAY_SCREEN_FLOW[newIdx],
             idx: newIdx,
         }))
+        setLoadingState('Idle')
     }
 
     const checkRequestLink = async (pageUrl: string) => {
diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index 9d3c998ab..341d8755b 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -12,14 +12,40 @@ import { useCreateLink } from '@/components/Create/useCreateLink'
 import { peanut, interfaces } from '@squirrel-labs/peanut-sdk'
 import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
 import { switchNetwork as switchNetworkUtil } from '@/utils/general.utils'
+import { type ITokenPriceData } from '@/interfaces'
 
 const ERR_NO_ROUTE = 'No route found to pay in this chain and token'
 
-enum RequestStatus {
+enum ViewState {
+    INITIAL = 'INITIAL',
     LOADING = 'LOADING',
-    CLAIM = 'CLAIM',
-    NOT_CONNECTED = 'NOT_CONNECTED',
-    NOT_FOUND = 'NOT_FOUND',
+    READY_TO_PAY = 'READY_TO_PAY',
+    ERROR = 'ERROR',
+}
+
+async function createXChainUnsignedTx({
+    tokenData,
+    requestLink,
+    senderAddress,
+}: {
+    tokenData: ITokenPriceData
+    requestLink: Awaited<ReturnType<typeof peanut.getRequestLinkDetails>>
+    senderAddress: string
+}) {
+    const xchainUnsignedTxs = await peanut.prepareXchainRequestFulfillmentTransaction({
+        fromToken: tokenData.address,
+        fromChainId: tokenData.chainId,
+        senderAddress,
+        link: requestLink.link,
+        squidRouterUrl: 'https://apiplus.squidrouter.com/v2/route',
+        apiUrl: '/api/proxy/get',
+        provider: await peanut.getDefaultProvider(tokenData.chainId),
+        tokenType: utils.isAddressZero(tokenData.address)
+            ? interfaces.EPeanutLinkType.native
+            : interfaces.EPeanutLinkType.erc20,
+        fromTokenDecimals: tokenData.decimals as number,
+    })
+    return xchainUnsignedTxs
 }
 
 export const InitialView = ({
@@ -51,32 +77,22 @@ export const InitialView = ({
     }>({ showError: false, errorMessage: '' })
     const [txFee, setTxFee] = useState<string>('0')
     const [isFeeEstimationError, setIsFeeEstimationError] = useState<boolean>(false)
-    const [linkState, setLinkState] = useState<RequestStatus>(RequestStatus.NOT_CONNECTED)
+    const [viewState, setViewState] = useState<ViewState>(ViewState.INITIAL)
     const [estimatedFromValue, setEstimatedFromValue] = useState<string>('0')
     const [tokenRequestedLogoURI, setTokenRequestedLogoURI] = useState<string | undefined>(undefined)
     const [tokenRequestedSymbol, setTokenRequestedSymbol] = useState<string>('')
-    const createXChainUnsignedTx = async () => {
-        // This function is only makes sense if selectedTokenData is defined
-        // Check that it is defined before calling this function
-        if (!selectedTokenData) {
-            throw new Error('selectedTokenData must be defined before estimating tx fee')
-        }
 
-        const xchainUnsignedTxs = await peanut.prepareXchainRequestFulfillmentTransaction({
-            fromToken: selectedTokenData!.address,
-            fromChainId: selectedTokenData!.chainId,
-            senderAddress: address ?? '',
-            link: requestLinkData.link,
-            squidRouterUrl: 'https://apiplus.squidrouter.com/v2/route',
-            apiUrl: '/api/proxy/get',
-            provider: await peanut.getDefaultProvider(selectedTokenData!.chainId),
-            tokenType: utils.isAddressZero(selectedTokenData!.address)
-                ? interfaces.EPeanutLinkType.native
-                : interfaces.EPeanutLinkType.erc20,
-            fromTokenDecimals: selectedTokenData!.decimals as number,
-        })
-        return xchainUnsignedTxs
-    }
+    const calculatedFee = useMemo(() => {
+        return isXChain ? txFee : utils.formatTokenAmount(estimatedGasCost, 3)
+    }, [isXChain, estimatedGasCost, txFee])
+
+    const isButtonDisabled = useMemo(() => {
+        return (
+            viewState === ViewState.LOADING ||
+            viewState === ViewState.ERROR ||
+            (viewState === ViewState.READY_TO_PAY && !calculatedFee)
+        )
+    }, [viewState, isLoading, calculatedFee])
 
     const fetchTokenSymbol = async (chainId: string, address: string) => {
         const provider = await peanut.getDefaultProvider(chainId)
@@ -87,50 +103,43 @@ export const InitialView = ({
         setTokenRequestedSymbol(tokenContract?.symbol ?? '')
     }
 
-    const calculatedFee = useMemo(() => {
-        return isXChain ? txFee : utils.formatTokenAmount(estimatedGasCost, 3)
-    }, [isXChain, estimatedGasCost, txFee])
     useEffect(() => {
         const estimateTxFee = async () => {
-            setLinkState(RequestStatus.LOADING)
+            setLoadingState('Preparing transaction')
             if (!isXChain) {
-                setErrorState({ showError: false, errorMessage: '' })
-                setIsFeeEstimationError(false)
-                setLinkState(RequestStatus.CLAIM)
-                setLoadingState('Idle')
+                clearError()
+                setViewState(ViewState.READY_TO_PAY)
                 return
             }
             try {
-                setErrorState({ showError: false, errorMessage: '' })
-                const txData = await createXChainUnsignedTx()
+                clearError()
+                const txData = await createXChainUnsignedTx({
+                    tokenData: selectedTokenData!,
+                    requestLink: requestLinkData,
+                    senderAddress: address!,
+                })
                 const { feeEstimation, estimatedFromAmount } = txData
                 setEstimatedFromValue(estimatedFromAmount)
                 if (Number(feeEstimation) > 0) {
-                    setErrorState({ showError: false, errorMessage: '' })
-                    setIsFeeEstimationError(false)
+                    clearError()
                     setTxFee(Number(feeEstimation).toFixed(2))
-                    setLinkState(RequestStatus.CLAIM)
+                    setViewState(ViewState.READY_TO_PAY)
                 } else {
                     setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE })
                     setIsFeeEstimationError(true)
                     setTxFee('0')
-                    setLinkState(RequestStatus.NOT_FOUND)
                 }
             } catch (error) {
                 setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE })
-                setLinkState(RequestStatus.NOT_FOUND)
                 setIsFeeEstimationError(true)
                 setTxFee('0')
-            } finally {
-                setLoadingState('Idle')
             }
         }
 
-        if (!isConnected) return
+        if (!isConnected || !address) return
 
         if (isXChain && !selectedTokenData) {
             setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE })
-            setLinkState(RequestStatus.NOT_FOUND)
             setIsFeeEstimationError(true)
             setTxFee('0')
             return
@@ -141,9 +150,7 @@ export const InitialView = ({
 
     useEffect(() => {
         setLoadingState('Loading')
-        setErrorState({ showError: false, errorMessage: '' })
-        setIsFeeEstimationError(false)
-        setLinkState(RequestStatus.LOADING)
+        clearError()
         const isXChain =
             selectedChainID !== requestLinkData.chainId ||
             !utils.areTokenAddressesEqual(selectedTokenAddress, requestLinkData.tokenAddress)
@@ -172,14 +179,37 @@ export const InitialView = ({
         }
     }, [requestLinkData, tokenPriceData])
 
+    useEffect(() => {
+        if (isLoading) {
+            setViewState(ViewState.LOADING)
+        }
+    }, [isLoading])
+
+    useEffect(() => {
+        if (viewState !== ViewState.LOADING) {
+            setLoadingState('Idle')
+        }
+    }, [viewState])
+
+    useEffect(() => {
+        if (errorState.showError) {
+            setViewState(ViewState.ERROR)
+        }
+    }, [errorState])
+
     useEffect(() => {
         // Load the token chain pair from the request link data
         resetTokenAndChain()
     }, [])
 
+    const clearError = () => {
+        setErrorState({ showError: false, errorMessage: '' })
+        setIsFeeEstimationError(false)
+    }
+
     const handleConnectWallet = async () => {
         open().finally(() => {
-            if (isConnected) setLinkState(RequestStatus.LOADING)
+            if (isConnected) setLoadingState('Loading')
         })
     }
 
@@ -202,7 +232,7 @@ export const InitialView = ({
     const handleOnNext = async () => {
         const amountUsd = (Number(requestLinkData.tokenAmount) * (tokenPriceData?.price ?? 0)).toFixed(2)
         try {
-            setErrorState({ showError: false, errorMessage: '' })
+            clearError()
             if (!unsignedTx) return
             if (!isXChain) {
                 await checkUserHasEnoughBalance({ tokenValue: requestLinkData.tokenAmount })
@@ -244,7 +274,11 @@ export const InitialView = ({
                     await switchNetwork(selectedTokenData!.chainId)
                 }
                 setLoadingState('Sign in wallet')
-                const xchainUnsignedTxs = await createXChainUnsignedTx()
+                const xchainUnsignedTxs = await createXChainUnsignedTx({
+                    tokenData: selectedTokenData!,
+                    requestLink: requestLinkData,
+                    senderAddress: address ?? '',
+                })
 
                 const { unsignedTxs } = xchainUnsignedTxs
                 const hash = await sendTransactions({
@@ -262,8 +296,6 @@ export const InitialView = ({
                 errorMessage: errorString,
             })
             console.error('Error while submitting request link fulfillment:', error)
-        } finally {
-            setLoadingState('Idle')
         }
     }
 
@@ -397,30 +429,18 @@ export const InitialView = ({
             <div className="flex w-full flex-col items-center justify-center gap-3">
                 <button
                     className="wc-disable-mf btn-purple btn-xl "
-                    disabled={
-                        linkState === RequestStatus.LOADING ||
-                        linkState === RequestStatus.NOT_FOUND ||
-                        isLoading ||
-                        (linkState === RequestStatus.CLAIM && !calculatedFee)
-                    }
+                    disabled={isButtonDisabled}
                     onClick={() => {
                         if (!isConnected) handleConnectWallet()
-                        else if (RequestStatus.CLAIM === linkState) handleOnNext()
+                        else if (ViewState.READY_TO_PAY === viewState) handleOnNext()
                     }}
                 >
-                    {linkState === RequestStatus.LOADING ? (
-                        <div className="relative flex w-full items-center justify-center">
-                            <div className="mr-2 animate-spin">
-                                <Loading />
-                            </div>
-                            Preparing transaction
-                        </div>
-                    ) : !isConnected ? (
-                        'Connect Wallet'
-                    ) : isLoading ? (
+                    {viewState === ViewState.LOADING ? (
                         <div className="flex w-full flex-row items-center justify-center gap-2">
                             <Loading /> {loadingState}
                         </div>
+                    ) : !isConnected ? (
+                        'Connect Wallet'
                     ) : (
                         'Pay'
                     )}

From 366aadb5a3366a30fbea7bc1905c94ad930a11c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 10:41:51 -0300
Subject: [PATCH 2/7] fix(request): don't show error if still fetching token
 data

---
 src/components/Request/Pay/Views/Initial.view.tsx | 11 +++++++----
 src/context/tokenSelector.context.tsx             |  7 +++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index 341d8755b..f4c7ff51e 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -70,6 +70,7 @@ export const InitialView = ({
         setSelectedTokenAddress,
         isXChain,
         setIsXChain,
+        isFetchingTokenData,
     } = useContext(context.tokenSelectorContext)
     const [errorState, setErrorState] = useState<{
         showError: boolean
@@ -139,14 +140,16 @@ export const InitialView = ({
         if (!isConnected || !address) return
 
         if (isXChain && !selectedTokenData) {
-            setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE })
-            setIsFeeEstimationError(true)
-            setTxFee('0')
+            if (!isFetchingTokenData) {
+                setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE })
+                setIsFeeEstimationError(true)
+                setTxFee('0')
+            }
             return
         }
 
         estimateTxFee()
-    }, [isConnected, address, selectedTokenData, requestLinkData, isXChain])
+    }, [isConnected, address, selectedTokenData, requestLinkData, isXChain, isFetchingTokenData])
 
     useEffect(() => {
         setLoadingState('Loading')
diff --git a/src/context/tokenSelector.context.tsx b/src/context/tokenSelector.context.tsx
index 29759a432..7dc241129 100644
--- a/src/context/tokenSelector.context.tsx
+++ b/src/context/tokenSelector.context.tsx
@@ -25,6 +25,7 @@ export const tokenSelectorContext = createContext({
     isXChain: false as boolean,
     setIsXChain: (value: boolean) => {},
     selectedTokenData: undefined as ITokenPriceData | undefined,
+    isFetchingTokenData: false as boolean,
 })
 
 /**
@@ -39,6 +40,7 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
     const [refetchXchainRoute, setRefetchXchainRoute] = useState<boolean>(false)
     const [selectedTokenDecimals, setSelectedTokenDecimals] = useState<number | undefined>(18)
     const [isXChain, setIsXChain] = useState<boolean>(false)
+    const [isFetchingTokenData, setIsFetchingTokenData] = useState<boolean>(false)
     const [selectedTokenData, setSelectedTokenData] = useState<ITokenPriceData | undefined>(undefined)
 
     const { isConnected } = useAccount()
@@ -64,6 +66,7 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
         let isCurrent = true
 
         async function fetchAndSetTokenPrice(tokenAddress: string, chainId: string) {
+            setIsFetchingTokenData(true)
             try {
                 if (!consts.supportedMobulaChains.some((chain) => chain.chainId == chainId)) {
                     setSelectedTokenData(undefined)
@@ -94,6 +97,8 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
                 }
             } catch (error) {
                 console.log('error fetching tokenPrice, falling back to tokenDenomination')
+            } finally {
+                setIsFetchingTokenData(false)
             }
         }
 
@@ -103,6 +108,7 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
             setSelectedTokenDecimals(undefined)
             setInputDenomination('TOKEN')
         } else if (selectedTokenAddress && selectedChainID) {
+            setIsFetchingTokenData(true)
             setSelectedTokenData(undefined)
             setSelectedTokenPrice(undefined)
             setSelectedTokenDecimals(undefined)
@@ -142,6 +148,7 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
                 isXChain,
                 setIsXChain,
                 selectedTokenData,
+                isFetchingTokenData,
             }}
         >
             {children}

From cad5f145abf666711e16e2539e9975d8b99f5e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 11:51:23 -0300
Subject: [PATCH 3/7] fix(request): fulfill same chain swaps correctly

---
 .../Request/Pay/Views/Success.view.tsx        | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 1acfb37ef..6488eb8ae 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -9,12 +9,15 @@ import { peanut } from '@squirrel-labs/peanut-sdk'
 import { useAccount } from 'wagmi'
 
 export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }: _consts.IPayScreenProps) => {
-    const { selectedChainID, isXChain } = useContext(context.tokenSelectorContext)
+    const { selectedChainID, selectedTokenAddress } = useContext(context.tokenSelectorContext)
     const { address } = useAccount()
     const sourceUrlWithTx = useMemo(
         () => `${utils.getExplorerUrl(selectedChainID)}/tx/${transactionHash}`,
         [transactionHash, selectedChainID]
     )
+    const isXChain = useMemo(() => {
+        return requestLinkData.chainId !== selectedChainID
+    }, [requestLinkData, selectedChainID])
     const [explorerUrlDestChainWithTxHash, setExplorerUrlDestChainWithTxHash] = useState<
         { transactionId: string; transactionUrl: string } | undefined
     >(undefined)
@@ -39,10 +42,32 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                 link: requestLinkData.link,
             })
         }
-    }, [explorerUrlDestChainWithTxHash])
+    }, [explorerUrlDestChainWithTxHash, requestLinkData, address])
 
     useEffect(() => {
-        if (isXChain && transactionHash) {
+        // is swap on same chain
+        if (!isXChain && !utils.areTokenAddressesEqual(selectedTokenAddress, requestLinkData.tokenAddress)) {
+            peanut.submitRequestLinkFulfillment({
+                chainId: requestLinkData.chainId,
+                hash: transactionHash,
+                payerAddress: address ?? '',
+                link: requestLinkData.link,
+                apiUrl: '/api/proxy/patch/',
+                amountUsd: (Number(requestLinkData.tokenAmount) * (tokenPriceData?.price ?? 0)).toFixed(2),
+            })
+            utils.saveRequestLinkFulfillmentToLocalStorage({
+                details: {
+                    ...requestLinkData,
+                    destinationChainFulfillmentHash: transactionHash,
+                    createdAt: new Date().toISOString(),
+                },
+                link: requestLinkData.link,
+            })
+        }
+    }, [isXChain, requestLinkData, transactionHash, address, selectedTokenAddress])
+
+    useEffect(() => {
+        if (isXChain) {
             fetchDestinationChain(transactionHash, setExplorerUrlDestChainWithTxHash)
         }
     }, [])

From c629e81b13dc4279b221e3854685a95469668107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 12:35:05 -0300
Subject: [PATCH 4/7] feat(request): show loading state when waiting for route
 fulfillment

---
 .../Request/Pay/Views/Success.view.tsx        | 34 +++++++++++++++----
 src/constants/loadingStates.consts.ts         |  1 +
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 6488eb8ae..4a817dde2 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -1,16 +1,23 @@
 import Link from 'next/link'
 import * as _consts from '../Pay.consts'
+import * as assets from '@/assets'
 import Icon from '@/components/Global/Icon'
 import * as utils from '@/utils'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
 import { peanut } from '@squirrel-labs/peanut-sdk'
+import Loading from '@/components/Global/Loading'
 import { useAccount } from 'wagmi'
 
 export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }: _consts.IPayScreenProps) => {
     const { selectedChainID, selectedTokenAddress } = useContext(context.tokenSelectorContext)
     const { address } = useAccount()
+    const [explorerUrlDestChainWithTxHash, setExplorerUrlDestChainWithTxHash] = useState<
+        { transactionId: string; transactionUrl: string } | undefined
+    >(undefined)
+    const { isLoading, setLoadingState, loadingState } = useContext(context.loadingStateContext)
+
     const sourceUrlWithTx = useMemo(
         () => `${utils.getExplorerUrl(selectedChainID)}/tx/${transactionHash}`,
         [transactionHash, selectedChainID]
@@ -18,9 +25,6 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
     const isXChain = useMemo(() => {
         return requestLinkData.chainId !== selectedChainID
     }, [requestLinkData, selectedChainID])
-    const [explorerUrlDestChainWithTxHash, setExplorerUrlDestChainWithTxHash] = useState<
-        { transactionId: string; transactionUrl: string } | undefined
-    >(undefined)
     const explorerUrlAxelarWithTx = 'https://axelarscan.io/gmp/' + transactionHash
 
     useEffect(() => {
@@ -41,6 +45,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                 },
                 link: requestLinkData.link,
             })
+            setLoadingState('Idle')
         }
     }, [explorerUrlDestChainWithTxHash, requestLinkData, address])
 
@@ -68,16 +73,31 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
 
     useEffect(() => {
         if (isXChain) {
+            setLoadingState('Awaiting route fulfillment')
             fetchDestinationChain(transactionHash, setExplorerUrlDestChainWithTxHash)
         }
     }, [])
 
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
-            <label className="text-h2">Yay!</label>
-            <label className="text-h8 font-bold ">
-                You have successfully paid {utils.printableAddress(requestLinkData.recipientAddress)}!
-            </label>
+            {isLoading ? (
+                <>
+                    <div className="animate-spin">
+                        <img src={assets.PEANUTMAN_LOGO.src} alt="logo" className="h-6 sm:h-10" />
+                        <span className="sr-only">{loadingState}</span>
+                    </div>
+                    <label className="text-h8 font-bold ">
+                        Funds are on their way to {utils.printableAddress(requestLinkData.recipientAddress)}!
+                    </label>
+                </>
+            ) : (
+                <>
+                    <label className="text-h2">Yay!</label>
+                    <label className="text-h8 font-bold ">
+                        You have successfully paid {utils.printableAddress(requestLinkData.recipientAddress)}!
+                    </label>
+                </>
+            )}
             <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal">
                 <label className="text-h8 font-normal text-gray-1">Transaction details</label>
                 <div className="flex w-full flex-row items-center justify-start gap-1">
diff --git a/src/constants/loadingStates.consts.ts b/src/constants/loadingStates.consts.ts
index 1bcf10642..c4ffd610b 100644
--- a/src/constants/loadingStates.consts.ts
+++ b/src/constants/loadingStates.consts.ts
@@ -8,6 +8,7 @@ export type LoadingStates =
     | 'Creating link'
     | 'Switching network'
     | 'Fetching route'
+    | 'Awaiting route fulfillment'
     | 'Asserting values'
     | 'Generating details'
     | 'Estimating points'

From 8d1fbde669bc4fb543beac262352f31025de4fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 14:54:57 -0300
Subject: [PATCH 5/7] feat: show address link when shortening

---
 .../Claim/Link/Onchain/Confirm.view.tsx       |  3 +-
 .../Dashboard/components/MobileComponent.tsx  |  5 +++-
 src/components/Dashboard/index.tsx            |  3 +-
 src/components/Global/AddressLink/index.tsx   | 28 +++++++++++++++++++
 .../Profile/Components/TableComponent.tsx     |  3 +-
 src/components/Profile/index.tsx              |  3 +-
 .../Request/Pay/Views/Success.view.tsx        |  6 ++--
 7 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Global/AddressLink/index.tsx

diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx
index acb7ec5c0..81cb2ae88 100644
--- a/src/components/Claim/Link/Onchain/Confirm.view.tsx
+++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx
@@ -1,5 +1,6 @@
 'use client'
 import Icon from '@/components/Global/Icon'
+import AddressLink from '@/components/Global/AddressLink'
 import { useAccount } from 'wagmi'
 
 import * as _consts from '../../Claim.consts'
@@ -184,7 +185,7 @@ export const ConfirmClaimLinkView = ({
                 <label className="text-h7 font-normal">Claiming to:</label>
                 <span className="flex items-center gap-1 ">
                     <label className="text-h7">
-                        {recipient.name ? recipient.name : utils.printableAddress(recipient.address ?? '')}
+                        <AddressLink address={recipient.name ?? recipient.address ?? ''} />
                     </label>
                     {recipient.name && <MoreInfo text={`You will be claiming to ${recipient.address}`} />}
                 </span>
diff --git a/src/components/Dashboard/components/MobileComponent.tsx b/src/components/Dashboard/components/MobileComponent.tsx
index f5e0c3013..86fc462b2 100644
--- a/src/components/Dashboard/components/MobileComponent.tsx
+++ b/src/components/Dashboard/components/MobileComponent.tsx
@@ -1,4 +1,5 @@
 import Modal from '@/components/Global/Modal'
+import AddressLink from '@/components/Global/AddressLink'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import * as utils from '@/utils'
@@ -44,7 +45,9 @@ export const MobileItemComponent = ({
                         {linkDetail.chain}]
                     </label>
 
-                    <label>From: {utils.printableAddress(linkDetail.address ?? address)}</label>
+                    <label>
+                        From: <AddressLink address={linkDetail.address ?? address} />
+                    </label>
                 </div>
                 <div className="flex flex-col items-end justify-end gap-2 text-end">
                     <div>
diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
index 62954459a..805351385 100644
--- a/src/components/Dashboard/index.tsx
+++ b/src/components/Dashboard/index.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import Icon from '../Global/Icon'
 import Sorting from '../Global/Sorting'
 import TablePagination from '../Global/TablePagination'
+import AddressLink from '../Global/AddressLink'
 import { useAccount } from 'wagmi'
 import Loading from '../Global/Loading'
 import { useRouter } from 'next/navigation'
@@ -184,7 +185,7 @@ export const Dashboard = () => {
                                                 <td className="td-custom font-bold">{link.chain}</td>
                                                 <td className="td-custom">{utils.formatDate(new Date(link.date))}</td>
                                                 <td className="td-custom">
-                                                    {utils.printableAddress(link.address ?? address ?? '')}
+                                                    <AddressLink address={link.address ?? address ?? ''} />
                                                 </td>
                                                 <td className="td-custom max-w-32">
                                                     <span
diff --git a/src/components/Global/AddressLink/index.tsx b/src/components/Global/AddressLink/index.tsx
new file mode 100644
index 000000000..7fb5bd52b
--- /dev/null
+++ b/src/components/Global/AddressLink/index.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+import * as utils from '@/utils'
+
+const AddressLink = ({ address }: { address: string }) => {
+    const [url, setUrl] = useState<string>('')
+    useEffect(() => {
+        if (!address) return
+        if (address.endsWith('.eth')) {
+            utils.resolveFromEnsName(address).then((resolvedAddress) => {
+                if (!resolvedAddress) return
+                setUrl(`https://debank.com/profile/${resolvedAddress}`)
+            })
+            return
+        }
+        setUrl(`https://debank.com/profile/${address}`)
+    }, [address])
+    return url ? (
+        <Link className="cursor-pointer underline" href={url} target="_blank">
+            {utils.printableAddress(address)}
+        </Link>
+    ) : (
+        <span>{utils.printableAddress(address)}</span>
+    )
+}
+
+export default AddressLink
diff --git a/src/components/Profile/Components/TableComponent.tsx b/src/components/Profile/Components/TableComponent.tsx
index d7dd17555..dce07f0c5 100644
--- a/src/components/Profile/Components/TableComponent.tsx
+++ b/src/components/Profile/Components/TableComponent.tsx
@@ -3,6 +3,7 @@ import * as utils from '@/utils'
 import * as interfaces from '@/interfaces'
 import Sorting from '@/components/Global/Sorting'
 import Loading from '@/components/Global/Loading'
+import AddressLink from '@/components/Global/AddressLink'
 import { OptionsComponent } from './OptionsComponent'
 import * as consts from '@/constants'
 import { useCallback } from 'react'
@@ -108,7 +109,7 @@ export const TableComponent = ({
                                     <td className="td-custom font-bold">{data.dashboardItem.chain}</td>
                                     <td className="td-custom">{utils.formatDate(new Date(data.dashboardItem.date))}</td>
                                     <td className="td-custom">
-                                        {utils.printableAddress(data.dashboardItem.address ?? '')}
+                                        <AddressLink address={data.dashboardItem.address ?? ''} />
                                     </td>
                                     <td className="td-custom max-w-32">
                                         <span
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index 04f0bd3e8..82a20c56d 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import Icon from '../Global/Icon'
+import AddressLink from '../Global/AddressLink'
 import * as consts from '@/constants'
 import { createAvatar } from '@dicebear/core'
 import { identicon } from '@dicebear/collection'
@@ -561,7 +562,7 @@ export const Profile = () => {
                                                         )
                                                     }}
                                                 />
-                                                {utils.printableAddress(referral.address)}
+                                                <AddressLink address={referral.address} />
                                             </label>
                                             <label className="w-[30%] text-center text-h8">
                                                 {referral?.totalReferrals ?? 0}
diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 4a817dde2..4f0da8f00 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -2,12 +2,12 @@ import Link from 'next/link'
 import * as _consts from '../Pay.consts'
 import * as assets from '@/assets'
 import Icon from '@/components/Global/Icon'
+import AddressLink from '@/components/Global/AddressLink'
 import * as utils from '@/utils'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
 import { peanut } from '@squirrel-labs/peanut-sdk'
-import Loading from '@/components/Global/Loading'
 import { useAccount } from 'wagmi'
 
 export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }: _consts.IPayScreenProps) => {
@@ -87,14 +87,14 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                         <span className="sr-only">{loadingState}</span>
                     </div>
                     <label className="text-h8 font-bold ">
-                        Funds are on their way to {utils.printableAddress(requestLinkData.recipientAddress)}!
+                        Funds are on their way to <AddressLink address={requestLinkData.recipientAddress} />!
                     </label>
                 </>
             ) : (
                 <>
                     <label className="text-h2">Yay!</label>
                     <label className="text-h8 font-bold ">
-                        You have successfully paid {utils.printableAddress(requestLinkData.recipientAddress)}!
+                        You have successfully paid <AddressLink address={requestLinkData.recipientAddress} />!
                     </label>
                 </>
             )}

From d853a0e95aac46667b26087e86155fbe1315097e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 15:10:15 -0300
Subject: [PATCH 6/7] fix(request): only set preparing transaction when
 creating tx

---
 src/components/Request/Pay/Views/Initial.view.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index f4c7ff51e..ab7662970 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -106,7 +106,6 @@ export const InitialView = ({
 
     useEffect(() => {
         const estimateTxFee = async () => {
-            setLoadingState('Preparing transaction')
             if (!isXChain) {
                 clearError()
                 setViewState(ViewState.READY_TO_PAY)
@@ -114,6 +113,7 @@ export const InitialView = ({
             }
             try {
                 clearError()
+                setLoadingState('Preparing transaction')
                 const txData = await createXChainUnsignedTx({
                     tokenData: selectedTokenData!,
                     requestLink: requestLinkData,

From 7ee2fb176021d81d656c8b7e753924c1f1a0e75d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 15 Oct 2024 16:14:50 -0300
Subject: [PATCH 7/7] fix(request): show amount with fewer significant digits

---
 .../Request/Pay/Views/Initial.view.tsx        | 31 ++++++++++---------
 src/utils/general.utils.ts                    |  6 ++++
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index ab7662970..517f3a09d 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -4,6 +4,7 @@ import { useWeb3Modal } from '@web3modal/wagmi/react'
 import { useContext, useEffect, useState, useMemo } from 'react'
 import * as context from '@/context'
 import Loading from '@/components/Global/Loading'
+import AddressLink from '@/components/Global/AddressLink'
 import * as utils from '@/utils'
 import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
@@ -95,6 +96,18 @@ export const InitialView = ({
         )
     }, [viewState, isLoading, calculatedFee])
 
+    const requestedAmount = useMemo(() => {
+        const amount = tokenPriceData
+            ? Number(requestLinkData.tokenAmount) * tokenPriceData.price
+            : Number(requestLinkData.tokenAmount)
+
+        if (tokenPriceData) {
+            return `$ ${utils.formatAmountWithSignificantDigits(amount, 3)}`
+        } else {
+            return `${utils.formatAmountWithSignificantDigits(amount, 3)} ${tokenRequestedSymbol}`
+        }
+    }, [tokenPriceData, requestLinkData.tokenAmount, tokenRequestedSymbol])
+
     const fetchTokenSymbol = async (chainId: string, address: string) => {
         const provider = await peanut.getDefaultProvider(chainId)
         const tokenContract = await peanut.getTokenContractDetails({
@@ -335,21 +348,10 @@ export const InitialView = ({
 
             <div className="flex w-full flex-col items-center justify-center gap-2">
                 <label className="text-h4">
-                    {requestLinkData.recipientAddress.endsWith('.eth')
-                        ? requestLinkData.recipientAddress
-                        : utils.shortenAddress(requestLinkData.recipientAddress)}{' '}
-                    is requesting
+                    <AddressLink address={requestLinkData.recipientAddress} /> is requesting
                 </label>
 
-                {tokenPriceData ? (
-                    <label className="text-h2">
-                        $ {utils.formatTokenAmount(Number(requestLinkData.tokenAmount) * tokenPriceData.price)}
-                    </label>
-                ) : (
-                    <label className="text-h2 ">
-                        {requestLinkData.tokenAmount} {tokenRequestedSymbol}
-                    </label>
-                )}
+                <label className="text-h2">{requestedAmount}</label>
                 <div>
                     <div className="flex flex-row items-center justify-center gap-2 pl-1 text-h7">
                         <div className="relative h-6 w-6">
@@ -364,7 +366,8 @@ export const InitialView = ({
                                 alt="logo"
                             />
                         </div>
-                        {requestLinkData.tokenAmount} {tokenRequestedSymbol} on{' '}
+                        {utils.formatAmountWithSignificantDigits(Number(requestLinkData.tokenAmount), 3)}{' '}
+                        {tokenRequestedSymbol} on{' '}
                         {consts.supportedPeanutChains.find((chain) => chain.chainId === requestLinkData.chainId)?.name}
                     </div>
                 </div>
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
index c4053f683..0ffc6c6cf 100644
--- a/src/utils/general.utils.ts
+++ b/src/utils/general.utils.ts
@@ -235,6 +235,12 @@ export function formatAmount(amount: number) {
     return amount.toFixed(2)
 }
 
+export function formatAmountWithSignificantDigits(amount: number, significantDigits: number): string {
+    let fractionDigits = Math.floor(Math.log10(1 / amount)) + significantDigits
+    fractionDigits = fractionDigits < 0 ? 0 : fractionDigits
+    return amount.toFixed(fractionDigits)
+}
+
 export function formatTokenAmount(amount?: number, maxFractionDigits?: number) {
     if (amount === undefined) return undefined
     maxFractionDigits = maxFractionDigits ?? 6