diff --git a/src/layout/MainLayout/MainLayout.tsx b/src/layout/MainLayout/MainLayout.tsx index 597a6bb..4ed7b59 100644 --- a/src/layout/MainLayout/MainLayout.tsx +++ b/src/layout/MainLayout/MainLayout.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { isMobile } from 'react-device-detect'; import { Outlet, ScrollRestoration, useLocation } from 'react-router-dom'; import { useDispatch, useSelector, useStore } from 'react-redux'; @@ -32,6 +32,12 @@ const MainLayout = () => { const store = useStore(); const visibilityState = useVisibilityState(); + const autoConnect = useMemo(() => { + const state = location.state as { autoConnect?: boolean }; + + return state.autoConnect; + }, [location]); + useEffect(() => { const autoConnect = async (provider: WalletProvider) => { await dispatch.wallet.connectWallet({ provider, silent: enableAutoConnect }).finally(() => null); @@ -68,7 +74,7 @@ const MainLayout = () => { setEnableAutoConnect(false); } - if (location.state?.autoConnect) { + if (autoConnect) { setEnableAutoConnect(true); } }, [location]); diff --git a/src/pages/Deposit/Deposit.tsx b/src/pages/Deposit/Deposit.tsx index f4b8ab9..39849fc 100644 --- a/src/pages/Deposit/Deposit.tsx +++ b/src/pages/Deposit/Deposit.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { useParams, unstable_useBlocker as useBlocker, useBeforeUnload, useLocation } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; @@ -70,6 +70,12 @@ const Deposit = () => { const prevStep = usePrevious(currentStep); const { isDark } = useColorScheme(); + const amountToDeposit = useMemo(() => { + const state = location.state as { amountToDeposit?: string }; + + return state.amountToDeposit; + }, [location]); + const wcConfig: WalletClientContext = { userAddress: lumWallet?.address, connectWallet: () => { @@ -150,7 +156,7 @@ const Deposit = () => { const transferForm = useFormik({ initialValues: { - amount: location.state?.amountToDeposit || '', + amount: amountToDeposit || '', }, validationSchema: yup.object().shape({ amount: yup @@ -973,7 +979,7 @@ const Deposit = () => { price={prices?.[denom || ''] || 0} lumWallet={lumWallet} otherWallets={otherWallets} - amountFromLocationState={location.state?.amountToDeposit} + amountFromLocationState={Number(amountToDeposit)} /> {isShareStep && ( { const location = useLocation(); const dispatch = useDispatch(); + const leaderboardPoolId = useMemo(() => { + const state = location.state as { leaderboardPoolId?: string }; + + return state.leaderboardPoolId; + }, [location]); + const [assetToTransferOut, setAssetToTransferOut] = useState(null); const [depositToLeave, setDepositToLeave] = useState(null); - const [leaderboardSelectedPoolId, setLeaderboardSelectedPoolId] = useState(pools && pools.length > 0 ? location.state?.leaderboardPoolId || pools[0].poolId.toString() : null); + const [leaderboardSelectedPoolId, setLeaderboardSelectedPoolId] = useState(pools && pools.length > 0 ? leaderboardPoolId || pools[0].poolId.toString() : null); const [leaderboardPage, setLeaderboardPage] = useState(0); const [userRankItems, setUserRankItems] = useState(); const [prizesHistoryPage, setPrizesHistoryPage] = useState(1); @@ -82,14 +88,16 @@ const MySavings = () => { getLeaderboardUserRank().finally(() => null); } - if (location.state?.leaderboardPoolId && leaderboardSectionRef.current) { + if (leaderboardPoolId && leaderboardSectionRef.current) { leaderboardSectionRef.current.scrollIntoView(); } }, [isReloadingInfos, leaderboardPool, lumWallet]); useEffect(() => { if (pools && pools.length > 0) { - setLeaderboardSelectedPoolId(location.state?.leaderboardPoolId || pools[0].poolId.toString()); + const poolId = leaderboardPoolId || pools[0].poolId.toString(); + + setLeaderboardSelectedPoolId(poolId); ScrollTrigger.refresh(); } }, [pools]);