fix: request pay issues

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>

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>

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

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

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

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}

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) => {