[ISSUE-213] refactor: load token pair onto selector context before advancing from pay

src/components/Request/Pay/Pay.tsx

@@ -23,6 +23,9 @@ export const PayRequestLink = () => {
     const [transactionHash, setTransactionHash] = useState<string>('')
     const [unsignedTx, setUnsignedTx] = useState<peanutInterfaces.IPeanutUnsignedTransaction | undefined>(undefined)
     const { setLoadingState } = useContext(context.loadingStateContext)
+    const { setSelectedChainID, setSelectedTokenAddress } = useContext(
+        context.tokenSelectorContext
+    )
     const [errorMessage, setErrorMessage] = useState<string>('')
 
     const fetchPointsEstimation = async (
@@ -93,6 +96,9 @@ export const PayRequestLink = () => {
                 setLinkState(_consts.IRequestLinkState.ALREADY_PAID)
                 return
             }
+            // Load the token chain pair from the request link data
+            setSelectedChainID(requestLinkDetails.chainId)
+            setSelectedTokenAddress(requestLinkDetails.tokenAddress)
             setLinkState(_consts.IRequestLinkState.READY_TO_PAY)
         } catch (error) {
             console.error('Failed to fetch request link details:', error)
@@ -168,7 +174,7 @@ export const PayRequestLink = () => {
 
     return (
         <div className="card">
-            {linkState === _consts.IRequestLinkState.ERROR && (
+            {linkState === _consts.IRequestLinkState.LOADING && (
                 <div className="relative flex w-full items-center justify-center">
                     <div className="animate-spin">
                         <img src={assets.PEANUTMAN_LOGO.src} alt="logo" className="h-6 sm:h-10" />

src/components/Request/Pay/Views/Initial.view.tsx

@@ -43,7 +43,7 @@ async function createXChainUnsignedTx({
             ? interfaces.EPeanutLinkType.native
             : interfaces.EPeanutLinkType.erc20,
         fromTokenDecimals: tokenData.decimals as number,
-        linkDetails: requestLink, // @jjramirezn TODO: fixxx
+        linkDetails: requestLink,
     })
     return xchainUnsignedTxs
 }
@@ -116,6 +116,7 @@ export const InitialView = ({
         setTokenRequestedSymbol(tokenContract?.symbol ?? '')
     }
 
+    // Get route
     useEffect(() => {
         const estimateTxFee = async () => {
             if (!isXChain) {
@@ -160,6 +161,7 @@ export const InitialView = ({
         estimateTxFee()
     }, [isConnected, address, selectedTokenData, requestLinkData, isXChain, isFetchingTokenData])
 
+    // Change in pair
     useEffect(() => {
         setLoadingState('Loading')
         clearError()
@@ -169,6 +171,7 @@ export const InitialView = ({
         setIsXChain(isXChain)
     }, [selectedChainID, selectedTokenAddress])
 
+    // Fetch token symbol and logo
     useEffect(() => {
         const chainDetails = consts.peanutTokenDetails.find((chain) => chain.chainId === requestLinkData.chainId)
         const logoURI =
@@ -191,29 +194,27 @@ export const InitialView = ({
         }
     }, [requestLinkData, tokenPriceData])
 
+    // Transition into loading state
     useEffect(() => {
         if (isLoading) {
             setViewState(ViewState.LOADING)
         }
     }, [isLoading])
 
+    // Transition into idle state
     useEffect(() => {
         if (viewState !== ViewState.LOADING) {
             setLoadingState('Idle')
         }
     }, [viewState])
 
+    // Transition into error state
     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)

src/context/tokenSelector.context.tsx

@@ -32,12 +32,23 @@ export const tokenSelectorContext = createContext({
  * It handles fetching token prices, updating context values, and resetting the provider based on user preferences and wallet connection status.
  */
 export const TokenContextProvider = ({ children }: { children: React.ReactNode }) => {
-    const [selectedTokenAddress, setSelectedTokenAddress] = useState('0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85')
-    const [selectedChainID, setSelectedChainID] = useState('10')
+    const initialTokenData = {
+        tokenAddress: '0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85', // USDC
+        chainId: '10', // Optimism
+        decimals: 6,
+    }
+    const prefs = utils.getPeanutPreferences()
+    if (prefs && prefs.tokenAddress && prefs.chainId && prefs.decimals) {
+        initialTokenData.tokenAddress = prefs.tokenAddress
+        initialTokenData.chainId = prefs.chainId
+        initialTokenData.decimals = prefs.decimals
+    }
+    const [selectedTokenAddress, setSelectedTokenAddress] = useState(initialTokenData.tokenAddress)
+    const [selectedChainID, setSelectedChainID] = useState(initialTokenData.chainId)
     const [selectedTokenPrice, setSelectedTokenPrice] = useState<number | undefined>(undefined)
     const [inputDenomination, setInputDenomination] = useState<inputDenominationType>('TOKEN')
     const [refetchXchainRoute, setRefetchXchainRoute] = useState<boolean>(false)
-    const [selectedTokenDecimals, setSelectedTokenDecimals] = useState<number | undefined>(18)
+    const [selectedTokenDecimals, setSelectedTokenDecimals] = useState<number | undefined>(initialTokenData.decimals)
     const [isXChain, setIsXChain] = useState<boolean>(false)
     const [isFetchingTokenData, setIsFetchingTokenData] = useState<boolean>(false)
     const [selectedTokenData, setSelectedTokenData] = useState<ITokenPriceData | undefined>(undefined)
@@ -113,15 +124,6 @@ export const TokenContextProvider = ({ children }: { children: React.ReactNode }
         }
     }, [selectedTokenAddress, selectedChainID])
 
-    useEffect(() => {
-        const prefs = utils.getPeanutPreferences()
-        if (prefs && prefs.tokenAddress && prefs.chainId && prefs.decimals) {
-            setSelectedTokenAddress(prefs.tokenAddress)
-            setSelectedChainID(prefs.chainId)
-            setSelectedTokenDecimals(prefs.decimals)
-        }
-    }, [])
-
     return (
         <tokenSelectorContext.Provider
             value={{