From 9225ac769a7e4cc52ba46f6770a1f311a9d8326a Mon Sep 17 00:00:00 2001 From: Hayden Shively <17186559+haydenshively@users.noreply.github.com> Date: Mon, 15 Apr 2024 22:43:16 -0500 Subject: [PATCH 1/3] Automatically reload supply table after deposit/withdraw --- earn/src/App.tsx | 16 +++++++++++----- earn/src/data/hooks/UseLendingPairs.ts | 13 ++++++++----- earn/src/pages/MarketsPage.tsx | 7 +++++-- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/earn/src/App.tsx b/earn/src/App.tsx index 858d0f6c..a13eaa77 100644 --- a/earn/src/App.tsx +++ b/earn/src/App.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, useEffect } from 'react'; +import React, { Suspense, useEffect, useState } from 'react'; import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/react-hooks'; import * as Sentry from '@sentry/react'; @@ -144,13 +144,14 @@ function AppBodyWrapper() { } function App() { - const [activeChain, setActiveChain] = React.useState(DEFAULT_CHAIN); + const [activeChain, setActiveChain] = useState(DEFAULT_CHAIN); const [accountRisk, setAccountRisk] = useSafeState({ isBlocked: false, isLoading: true }); const [geoFencingInfo, setGeoFencingInfo] = useSafeState({ isAllowed: false, isLoading: true, }); const [lendingPairs, setLendingPairs] = useChainDependentState(null, activeChain.id); + const [shouldFetchLendingPairs, setShouldFetchLendingPairs] = useChainDependentState(true, activeChain.id); const { address: userAddress } = useAccount(); const provider = useProvider({ chainId: activeChain.id }); @@ -187,15 +188,20 @@ function App() { let mounted = true; (async () => { + if (!shouldFetchLendingPairs) return; + const chainId = (await provider.getNetwork()).chainId; const res = await getAvailableLendingPairs(chainId, provider); - if (mounted) setLendingPairs(res); + if (mounted) { + setShouldFetchLendingPairs(false); + setLendingPairs(res); + } })(); return () => { mounted = false; }; - }, [provider, setLendingPairs]); + }, [provider, setLendingPairs, shouldFetchLendingPairs, setShouldFetchLendingPairs]); return ( <> @@ -204,7 +210,7 @@ function App() { - + setShouldFetchLendingPairs(true) }}> diff --git a/earn/src/data/hooks/UseLendingPairs.ts b/earn/src/data/hooks/UseLendingPairs.ts index e333589f..eea56171 100644 --- a/earn/src/data/hooks/UseLendingPairs.ts +++ b/earn/src/data/hooks/UseLendingPairs.ts @@ -4,15 +4,18 @@ import { Address } from 'wagmi'; import { LendingPair } from '../LendingPair'; -export const LendingPairsContext = createContext(null); +export const LendingPairsContext = createContext<{ lendingPairs: LendingPair[] | null; refetch?: () => void }>({ + lendingPairs: null, +}); export function useLendingPairs() { const ctxt = useContext(LendingPairsContext); return useMemo( () => ({ - isLoading: ctxt === null, - lendingPairs: ctxt ?? [], + isLoading: ctxt.lendingPairs === null, + lendingPairs: ctxt.lendingPairs ?? [], + refetch: ctxt.refetch, }), [ctxt] ); @@ -23,8 +26,8 @@ export function useLendingPair(token0?: Address, token1?: Address) { const { lendingPairs } = useMemo( () => ({ - isLoading: ctxt === null, - lendingPairs: ctxt ?? [], + isLoading: ctxt.lendingPairs === null, + lendingPairs: ctxt.lendingPairs ?? [], }), [ctxt] ); diff --git a/earn/src/pages/MarketsPage.tsx b/earn/src/pages/MarketsPage.tsx index 6e26d695..ca2a180a 100644 --- a/earn/src/pages/MarketsPage.tsx +++ b/earn/src/pages/MarketsPage.tsx @@ -101,7 +101,7 @@ export default function MarketsPage() { }, [searchParams]); // MARK: custom hooks - const { lendingPairs } = useLendingPairs(); + const { lendingPairs, refetch: refetchLendingPairs } = useLendingPairs(); // NOTE: Instead of `useAvailablePools()`, we're able to compute `availablePools` from `lendingPairs`. // This saves a lot of data. @@ -446,7 +446,10 @@ export default function MarketsPage() { }} onConfirm={() => { setIsPendingTxnModalOpen(false); - setTimeout(() => refetch(), 100); + setTimeout(() => { + refetchLendingPairs?.(); + refetch(); + }, 100); }} status={pendingTxnModalStatus} /> From 5c9f1aca0b62039d2f279c106ba7567094c7185e Mon Sep 17 00:00:00 2001 From: Hayden Shively <17186559+haydenshively@users.noreply.github.com> Date: Tue, 16 Apr 2024 00:43:53 -0500 Subject: [PATCH 2/3] Less state --- earn/src/App.tsx | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/earn/src/App.tsx b/earn/src/App.tsx index a13eaa77..5b9fd5e4 100644 --- a/earn/src/App.tsx +++ b/earn/src/App.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, useEffect, useState } from 'react'; +import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/react-hooks'; import * as Sentry from '@sentry/react'; @@ -144,6 +144,8 @@ function AppBodyWrapper() { } function App() { + const mounted = useRef(false); + const [activeChain, setActiveChain] = useState(DEFAULT_CHAIN); const [accountRisk, setAccountRisk] = useSafeState({ isBlocked: false, isLoading: true }); const [geoFencingInfo, setGeoFencingInfo] = useSafeState({ @@ -151,12 +153,18 @@ function App() { isLoading: true, }); const [lendingPairs, setLendingPairs] = useChainDependentState(null, activeChain.id); - const [shouldFetchLendingPairs, setShouldFetchLendingPairs] = useChainDependentState(true, activeChain.id); const { address: userAddress } = useAccount(); const provider = useProvider({ chainId: activeChain.id }); - const value = { activeChain, setActiveChain }; + const refetch = useCallback(async () => { + const chainId = (await provider.getNetwork()).chainId; + const res = await getAvailableLendingPairs(chainId, provider); + if (mounted.current) setLendingPairs(res); + }, [provider, setLendingPairs]); + + const lendingPairsContextValue = useMemo(() => ({ lendingPairs, refetch }), [lendingPairs, refetch]); + const chainContextValue = { activeChain, setActiveChain }; useEffect(() => { Sentry.setTag('chain_name', activeChain.name); @@ -185,23 +193,12 @@ function App() { }, [userAddress, setAccountRisk]); useEffect(() => { - let mounted = true; - - (async () => { - if (!shouldFetchLendingPairs) return; - - const chainId = (await provider.getNetwork()).chainId; - const res = await getAvailableLendingPairs(chainId, provider); - if (mounted) { - setShouldFetchLendingPairs(false); - setLendingPairs(res); - } - })(); - + mounted.current = true; + refetch(); return () => { - mounted = false; + mounted.current = false; }; - }, [provider, setLendingPairs, shouldFetchLendingPairs, setShouldFetchLendingPairs]); + }, [refetch]); return ( <> @@ -209,8 +206,8 @@ function App() { - - setShouldFetchLendingPairs(true) }}> + + From e558ee1d31e2ba5ebeeed43a0a4b3f2f504f2128 Mon Sep 17 00:00:00 2001 From: Hayden Shively <17186559+haydenshively@users.noreply.github.com> Date: Sun, 21 Apr 2024 17:32:34 -0500 Subject: [PATCH 3/3] Default to true --- earn/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/earn/src/App.tsx b/earn/src/App.tsx index 5b9fd5e4..a7f95df2 100644 --- a/earn/src/App.tsx +++ b/earn/src/App.tsx @@ -144,7 +144,7 @@ function AppBodyWrapper() { } function App() { - const mounted = useRef(false); + const mounted = useRef(true); const [activeChain, setActiveChain] = useState(DEFAULT_CHAIN); const [accountRisk, setAccountRisk] = useSafeState({ isBlocked: false, isLoading: true });