diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index 7ec1335d5..8c71282ca 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -43,6 +43,7 @@ async function createXChainUnsignedTx({
? interfaces.EPeanutLinkType.native
: interfaces.EPeanutLinkType.erc20,
fromTokenDecimals: tokenData.decimals as number,
+ // @ts-ignore // TODO: fix this
linkDetails: requestLink,
})
return xchainUnsignedTxs
@@ -116,6 +117,7 @@ export const InitialView = ({
setTokenRequestedSymbol(tokenContract?.symbol ?? '')
}
+ // Get route
useEffect(() => {
const estimateTxFee = async () => {
if (!isXChain) {
@@ -160,6 +162,7 @@ export const InitialView = ({
estimateTxFee()
}, [isConnected, address, selectedTokenData, requestLinkData, isXChain, isFetchingTokenData])
+ // Change in pair
useEffect(() => {
setLoadingState('Loading')
clearError()
@@ -169,6 +172,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 +195,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)
diff --git a/src/context/tokenSelector.context.tsx b/src/context/tokenSelector.context.tsx
index 712d054ff..7b8782f2d 100644
--- a/src/context/tokenSelector.context.tsx
+++ b/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
(undefined)
const [inputDenomination, setInputDenomination] = useState('TOKEN')
const [refetchXchainRoute, setRefetchXchainRoute] = useState(false)
- const [selectedTokenDecimals, setSelectedTokenDecimals] = useState(18)
+ const [selectedTokenDecimals, setSelectedTokenDecimals] = useState(initialTokenData.decimals)
const [isXChain, setIsXChain] = useState(false)
const [isFetchingTokenData, setIsFetchingTokenData] = useState(false)
const [selectedTokenData, setSelectedTokenData] = useState(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 (
+
-
+
+ {tokenPrice && (
+
+ )}
+ )}
- )}
+ {tokenImage && (
+