[Updated] Explicitly type location.state

lum-network · Jan 24, 2024 · f1a3b54 · f1a3b54
1 parent ad47f74
commit f1a3b54
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git 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
@@ -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 && (
                                 <Lottie

diff --git a/src/pages/MySavings/MySavings.tsx b/src/pages/MySavings/MySavings.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Navigate, useLocation } from 'react-router-dom';
 import numeral from 'numeral';
@@ -48,9 +48,15 @@ const MySavings = () => {
     const location = useLocation();
     const dispatch = useDispatch<Dispatch>();
 
+    const leaderboardPoolId = useMemo(() => {
+        const state = location.state as { leaderboardPoolId?: string };
+
+        return state.leaderboardPoolId;
+    }, [location]);
+
     const [assetToTransferOut, setAssetToTransferOut] = useState<string | null>(null);
     const [depositToLeave, setDepositToLeave] = useState<DepositModel | null>(null);
-    const [leaderboardSelectedPoolId, setLeaderboardSelectedPoolId] = useState<string | null>(pools && pools.length > 0 ? location.state?.leaderboardPoolId || pools[0].poolId.toString() : null);
+    const [leaderboardSelectedPoolId, setLeaderboardSelectedPoolId] = useState<string | null>(pools && pools.length > 0 ? leaderboardPoolId || pools[0].poolId.toString() : null);
     const [leaderboardPage, setLeaderboardPage] = useState(0);
     const [userRankItems, setUserRankItems] = useState<LeaderboardItemModel[]>();
     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]);