From eead963d6f064b0bdf2865cda19ab1bab79ca23d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Fri, 18 Oct 2024 09:32:55 -0300 Subject: [PATCH 1/3] refactor: load token pref when initializing selector context Instead of having initial data and then updating it, load the data when initializing the context if preferences are found. --- src/context/tokenSelector.context.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/context/tokenSelector.context.tsx b/src/context/tokenSelector.context.tsx index 712d054f..7b8782f2 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 ( Date: Fri, 18 Oct 2024 09:37:20 -0300 Subject: [PATCH 2/3] refactor(request): on pay, load the pair before advancing view This will ensure we start with the intended token selector context --- src/components/Request/Pay/Pay.tsx | 6 ++++++ src/components/Request/Pay/Views/Initial.view.tsx | 13 +++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Request/Pay/Pay.tsx b/src/components/Request/Pay/Pay.tsx index f4e10175..fe26250a 100644 --- a/src/components/Request/Pay/Pay.tsx +++ b/src/components/Request/Pay/Pay.tsx @@ -23,6 +23,9 @@ export const PayRequestLink = () => { const [transactionHash, setTransactionHash] = useState('') const [unsignedTx, setUnsignedTx] = useState(undefined) const { setLoadingState } = useContext(context.loadingStateContext) + const { setSelectedChainID, setSelectedTokenAddress } = useContext( + context.tokenSelectorContext + ) const [errorMessage, setErrorMessage] = useState('') 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) diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index 5851cbde..e836df60 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/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) From a141308c83937acc21c0ae74d28bd5df68222338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Fri, 18 Oct 2024 09:40:45 -0300 Subject: [PATCH 3/3] fix(request): check correct state for loading Bring back spinning peanutman! --- src/components/Request/Pay/Pay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Request/Pay/Pay.tsx b/src/components/Request/Pay/Pay.tsx index fe26250a..92810613 100644 --- a/src/components/Request/Pay/Pay.tsx +++ b/src/components/Request/Pay/Pay.tsx @@ -174,7 +174,7 @@ export const PayRequestLink = () => { return (
- {linkState === _consts.IRequestLinkState.ERROR && ( + {linkState === _consts.IRequestLinkState.LOADING && (
logo