Feat/React query 5-2, gho hooks (#1860)

Co-authored-by: Nikita Boakrev <[email protected]>

cypress/e2e/4-gho-ethereum/gho-modal.gho-v3.cy.ts

@@ -18,7 +18,7 @@ const testData = {
 
 let minApy: number;
 let maxApy: number;
-//skip while borrow limit
+
 describe.skip(`GHO MODAL APY TESTING`, () => {
   configEnvWithTenderlyAEthereumV3Fork({
     v3: true,

package.json

@@ -75,6 +75,7 @@
     "graphql-request": "^6.1.0",
     "gray-matter": "^4.0.3",
     "immer": "^9.0.15",
+    "micro-memoize": "^4.1.2",
     "mixpanel-browser": "^2.45.0",
     "next": "12.1.1",
     "react": "latest",

pages/_app.page.tsx

@@ -145,10 +145,10 @@ export default function MyApp(props: MyAppProps) {
                 <AddressBlocked>
                   <PermissionProvider>
                     <ModalContextProvider>
-                      <BackgroundDataProvider>
-                        <AppDataProvider>
-                          <GasStationProvider>
-                            <SharedDependenciesProvider>
+                      <SharedDependenciesProvider>
+                        <BackgroundDataProvider>
+                          <AppDataProvider>
+                            <GasStationProvider>
                               {getLayout(<Component {...pageProps} />)}
                               <SupplyModal />
                               <WithdrawModal />
@@ -165,10 +165,10 @@ export default function MyApp(props: MyAppProps) {
                               <TransactionEventHandler />
                               <SwitchModal />
                               <StakingMigrateModal />
-                            </SharedDependenciesProvider>
-                          </GasStationProvider>
-                        </AppDataProvider>
-                      </BackgroundDataProvider>
+                            </GasStationProvider>
+                          </AppDataProvider>
+                        </BackgroundDataProvider>
+                      </SharedDependenciesProvider>
                     </ModalContextProvider>
                   </PermissionProvider>
                 </AddressBlocked>

src/components/transactions/Borrow/BorrowActions.tsx

@@ -68,7 +68,7 @@ export const BorrowActions = React.memo(
       setLoadingTxns,
       setApprovalTxState,
     } = useModalContext();
-    const { refetchPoolData, refetchIncentiveData, refetchGhoData } = useBackgroundDataProvider();
+    const { refetchPoolData, refetchIncentiveData } = useBackgroundDataProvider();
     const { sendTx } = useWeb3Context();
     const [requiresApproval, setRequiresApproval] = useState<boolean>(false);
     const [approvedAmount, setApprovedAmount] = useState<ApproveDelegationType | undefined>();
@@ -135,9 +135,9 @@ export const BorrowActions = React.memo(
         });
 
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
+        queryClient.invalidateQueries({ queryKey: queryKeysFactory.gho });
         refetchPoolData && refetchPoolData();
         refetchIncentiveData && refetchIncentiveData();
-        refetchGhoData && refetchGhoData();
       } catch (error) {
         const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
         setTxError(parsedError);

src/components/transactions/Borrow/BorrowModal.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useRootStore } from 'src/store/root';
+import { displayGho } from 'src/utils/ghoUtilities';
 import { GENERAL } from 'src/utils/mixPanelEvents';
 
 import { BasicModal } from '../../primitives/BasicModal';
@@ -18,7 +19,7 @@ export const BorrowModal = () => {
   const { currentMarket } = useProtocolDataContext();
 
   const [borrowUnWrapped, setBorrowUnWrapped] = useState(true);
-  const [trackEvent, displayGho] = useRootStore((store) => [store.trackEvent, store.displayGho]);
+  const [trackEvent] = useRootStore((store) => [store.trackEvent]);
 
   const handleBorrowUnwrapped = (borrowUnWrapped: boolean) => {
     trackEvent(GENERAL.OPEN_MODAL, {

src/components/transactions/Borrow/GhoBorrowModalContent.tsx

@@ -21,13 +21,14 @@ import { Row } from 'src/components/primitives/Row';
 import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
 import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
+import { useGhoPoolReserve } from 'src/hooks/pool/useGhoPoolReserve';
+import { useUserGhoPoolReserve } from 'src/hooks/pool/useUserGhoPoolReserve';
 import { useAssetCaps } from 'src/hooks/useAssetCaps';
 import { useModalContext } from 'src/hooks/useModal';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useRootStore } from 'src/store/root';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
 import { getMaxGhoMintAmount } from 'src/utils/getMaxAmountAvailableToBorrow';
-import { weightedAverageAPY } from 'src/utils/ghoUtilities';
+import { ghoUserQualifiesForDiscount, weightedAverageAPY } from 'src/utils/ghoUtilities';
 import { roundToTokenDecimals } from 'src/utils/utils';
 
 import { CapType } from '../../caps/helper';
@@ -113,13 +114,14 @@ export const GhoBorrowModalContent = ({
   symbol,
 }: ModalWrapperProps) => {
   const { mainTxState: borrowTxState, gasLimit, txError, close: closeModal } = useModalContext();
+  const currentMarketData = useRootStore((state) => state.currentMarketData);
+  const currentMarket = useRootStore((state) => state.currentMarket);
   const { user, marketReferencePriceInUsd, ghoReserveData, ghoUserData, ghoLoadingData } =
     useAppDataContext();
-  const ghoUserQualifiesForDiscount = useRootStore((state) => state.ghoUserQualifiesForDiscount);
+  const { data: _ghoUserData } = useUserGhoPoolReserve(currentMarketData);
+  const { data: _ghoReserveData } = useGhoPoolReserve(currentMarketData);
   const { borrowCap } = useAssetCaps();
 
-  const { currentMarket: customMarket } = useProtocolDataContext();
-
   const [interestRateMode, setInterestRateMode] = useState<InterestRate>(InterestRate.Variable);
   const [amount, setAmount] = useState('');
   const [riskCheckboxAccepted, setRiskCheckboxAccepted] = useState(false);
@@ -128,7 +130,10 @@ export const GhoBorrowModalContent = ({
   // Check if user can borrow at a discount
   const hasGhoBorrowPositions = ghoUserData.userGhoBorrowBalance > 0;
   const userStakedAaveBalance: number = ghoUserData.userDiscountTokenBalance;
-  const discountAvailable = ghoUserQualifiesForDiscount(amount);
+  const discountAvailable =
+    _ghoUserData && _ghoReserveData
+      ? ghoUserQualifiesForDiscount(_ghoReserveData, _ghoUserData, amount)
+      : false;
 
   // amount calculations
   let maxAmountToBorrow = getMaxGhoMintAmount(user, poolReserve);
@@ -298,7 +303,7 @@ export const GhoBorrowModalContent = ({
                 discountAvailable={discountAvailable}
                 userDiscountTokenBalance={ghoUserData.userDiscountTokenBalance}
                 underlyingAsset={underlyingAsset}
-                customMarket={customMarket}
+                customMarket={currentMarket}
                 currentBorrowAPY={currentBorrowAPY}
                 futureBorrowAPY={futureBorrowAPY}
                 onDetailsClick={() => closeModal()}

src/components/transactions/DebtSwitch/DebtSwitchActions.tsx

@@ -92,7 +92,7 @@ export const DebtSwitchActions = ({
     setApprovalTxState,
   } = useModalContext();
   const { sendTx, signTxData } = useWeb3Context();
-  const { refetchPoolData, refetchIncentiveData, refetchGhoData } = useBackgroundDataProvider();
+  const { refetchPoolData, refetchIncentiveData } = useBackgroundDataProvider();
   const [requiresApproval, setRequiresApproval] = useState<boolean>(false);
   const [approvedAmount, setApprovedAmount] = useState<ApproveDelegationType | undefined>();
   const [useSignature, setUseSignature] = useState(false);
@@ -202,7 +202,7 @@ export const DebtSwitchActions = ({
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
-      refetchGhoData && refetchGhoData();
+      queryClient.invalidateQueries({ queryKey: queryKeysFactory.gho });
       refetchPoolData && refetchPoolData();
       refetchIncentiveData && refetchIncentiveData();
     } catch (error) {

src/components/transactions/DebtSwitch/DebtSwitchModalContent.tsx

@@ -16,14 +16,19 @@ import { Warning } from 'src/components/primitives/Warning';
 import { Asset, AssetInput } from 'src/components/transactions/AssetInput';
 import { TxModalDetails } from 'src/components/transactions/FlowCommons/TxModalDetails';
 import { useDebtSwitch } from 'src/hooks/paraswap/useDebtSwitch';
+import { useGhoPoolReserve } from 'src/hooks/pool/useGhoPoolReserve';
+import { useUserGhoPoolReserve } from 'src/hooks/pool/useUserGhoPoolReserve';
 import { useModalContext } from 'src/hooks/useModal';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ListSlippageButton } from 'src/modules/dashboard/lists/SlippageList';
 import { useRootStore } from 'src/store/root';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
 import { assetCanBeBorrowedByUser } from 'src/utils/getMaxAmountAvailableToBorrow';
-import { weightedAverageAPY } from 'src/utils/ghoUtilities';
+import {
+  displayGho,
+  ghoUserQualifiesForDiscount,
+  weightedAverageAPY,
+} from 'src/utils/ghoUtilities';
 
 import {
   ComputedUserReserveData,
@@ -67,18 +72,16 @@ export const DebtSwitchModalContent = ({
   isWrongNetwork,
   currentRateMode,
 }: ModalWrapperProps & { currentRateMode: InterestRate }) => {
-  const { reserves, user, ghoReserveData, ghoUserData } = useAppDataContext();
-  const { currentChainId, currentNetworkConfig } = useProtocolDataContext();
+  const { reserves, user, ghoReserveData, ghoUserData, ghoUserLoadingData } = useAppDataContext();
+  const currentChainId = useRootStore((store) => store.currentChainId);
+  const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
   const { currentAccount } = useWeb3Context();
   const { gasLimit, mainTxState, txError, setTxError } = useModalContext();
-  const [displayGho, currentMarket, ghoUserDataFetched, ghoUserQualifiesForDiscount] = useRootStore(
-    (state) => [
-      state.displayGho,
-      state.currentMarket,
-      state.ghoUserDataFetched,
-      state.ghoUserQualifiesForDiscount,
-    ]
-  );
+
+  const currentMarket = useRootStore((store) => store.currentMarket);
+  const currentMarketData = useRootStore((store) => store.currentMarketData);
+  const { data: _ghoUserData } = useUserGhoPoolReserve(currentMarketData);
+  const { data: _ghoReserveData } = useGhoPoolReserve(currentMarketData);
 
   let switchTargets = reserves
     .filter(
@@ -232,10 +235,13 @@ export const DebtSwitchModalContent = ({
       ghoUserData.userGhoAvailableToBorrowAtDiscount,
       ghoReserveData.ghoBorrowAPYWithMaxDiscount
     );
-    const ghoApyRange: [number, number] | undefined = ghoUserDataFetched
+    const ghoApyRange: [number, number] | undefined = !ghoUserLoadingData
       ? [userCurrentBorrowApy, userBorrowApyAfterMaxSwitchTo]
       : undefined;
-    qualifiesForDiscount = ghoUserQualifiesForDiscount(maxAmountToSwitch);
+    qualifiesForDiscount =
+      _ghoUserData && _ghoReserveData
+        ? ghoUserQualifiesForDiscount(_ghoReserveData, _ghoUserData, maxAmountToSwitch)
+        : false;
     ghoTargetData = {
       qualifiesForDiscount,
       ghoApyRange,

src/components/transactions/Repay/RepayActions.tsx

@@ -69,7 +69,7 @@ export const RepayActions = ({
     store.currentMarketData,
   ]);
   const { sendTx } = useWeb3Context();
-  const { refetchGhoData, refetchIncentiveData, refetchPoolData } = useBackgroundDataProvider();
+  const { refetchIncentiveData, refetchPoolData } = useBackgroundDataProvider();
   const [signatureParams, setSignatureParams] = useState<SignedParams | undefined>();
   const {
     approvalTxState,
@@ -202,9 +202,9 @@ export const RepayActions = ({
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
+      queryClient.invalidateQueries({ queryKey: queryKeysFactory.gho });
       refetchPoolData && refetchPoolData();
       refetchIncentiveData && refetchIncentiveData();
-      refetchGhoData && refetchGhoData();
     } catch (error) {
       const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
       setTxError(parsedError);

src/components/transactions/Repay/RepayModalContent.tsx

@@ -17,6 +17,7 @@ import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvide
 import { useModalContext } from 'src/hooks/useModal';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useRootStore } from 'src/store/root';
+import { displayGho } from 'src/utils/ghoUtilities';
 import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 
 import { Asset, AssetInput } from '../AssetInput';
@@ -47,9 +48,8 @@ export const RepayModalContent = ({
   const { marketReferencePriceInUsd, user } = useAppDataContext();
   const { currentChainId, currentMarketData, currentMarket } = useProtocolDataContext();
 
-  const [minRemainingBaseTokenBalance, displayGho] = useRootStore((store) => [
+  const [minRemainingBaseTokenBalance] = useRootStore((store) => [
     store.poolComputed.minRemainingBaseTokenBalance,
-    store.displayGho,
   ]);
 
   // states

src/components/transactions/Supply/SupplyActions.tsx

@@ -68,7 +68,7 @@ export const SupplyActions = React.memo(
       setGasLimit,
       setTxError,
     } = useModalContext();
-    const { refetchPoolData, refetchIncentiveData, refetchGhoData } = useBackgroundDataProvider();
+    const { refetchPoolData, refetchIncentiveData } = useBackgroundDataProvider();
     const permitAvailable = tryPermit({
       reserveAddress: poolAddress,
       isWrappedBaseAsset: isWrappedBaseAsset,
@@ -187,7 +187,6 @@ export const SupplyActions = React.memo(
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
         refetchPoolData && refetchPoolData();
         refetchIncentiveData && refetchIncentiveData();
-        refetchGhoData && refetchGhoData();
       } catch (error) {
         const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
         setTxError(parsedError);

src/components/transactions/Swap/SwapModalContent.tsx

@@ -15,8 +15,8 @@ import { useModalContext } from 'src/hooks/useModal';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ListSlippageButton } from 'src/modules/dashboard/lists/SlippageList';
-import { useRootStore } from 'src/store/root';
 import { remainingCap } from 'src/utils/getMaxAmountAvailableToSupply';
+import { displayGho } from 'src/utils/ghoUtilities';
 import { calculateHFAfterSwap } from 'src/utils/hfUtils';
 import { amountToUsd } from 'src/utils/utils';
 
@@ -44,10 +44,9 @@ export const SwapModalContent = ({
   const { currentChainId, currentMarket, currentNetworkConfig } = useProtocolDataContext();
   const { currentAccount } = useWeb3Context();
   const { gasLimit, mainTxState: supplyTxState, txError } = useModalContext();
-  const isGho = useRootStore((store) => store.displayGho);
 
   const swapTargets = reserves
-    .filter((r) => !isGho({ symbol: r.symbol, currentMarket }))
+    .filter((r) => !displayGho({ symbol: r.symbol, currentMarket }))
     .filter((r) => r.underlyingAsset !== poolReserve.underlyingAsset && !r.isFrozen)
     .map((reserve) => ({
       address: reserve.underlyingAsset,

src/components/transactions/Withdraw/WithdrawAndSwitchActions.tsx

@@ -97,7 +97,7 @@ export const WithdrawAndSwitchActions = ({
 
   const [approvedAmount, setApprovedAmount] = useState<number | undefined>(undefined);
   const [signatureParams, setSignatureParams] = useState<SignedParams | undefined>();
-  const { refetchPoolData, refetchIncentiveData, refetchGhoData } = useBackgroundDataProvider();
+  const { refetchPoolData, refetchIncentiveData } = useBackgroundDataProvider();
 
   const requiresApproval = useMemo(() => {
     if (
@@ -130,7 +130,7 @@ export const WithdrawAndSwitchActions = ({
       const response = await sendTx(txDataWithGasEstimation);
       await response.wait(1);
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
-      refetchGhoData && refetchGhoData();
+      queryClient.invalidateQueries({ queryKey: queryKeysFactory.gho });
       refetchPoolData && refetchPoolData();
       refetchIncentiveData && refetchIncentiveData();
       setMainTxState({

src/helpers/useTransactionHandler.tsx

@@ -59,7 +59,7 @@ export const useTransactionHandler = ({
     setTxError,
   } = useModalContext();
   const { signTxData, sendTx, getTxError } = useWeb3Context();
-  const { refetchPoolData, refetchIncentiveData, refetchGhoData } = useBackgroundDataProvider();
+  const { refetchPoolData, refetchIncentiveData } = useBackgroundDataProvider();
   const [signatures, setSignatures] = useState<SignatureLike[]>([]);
   const [signatureDeadline, setSignatureDeadline] = useState<string>();
 
@@ -125,9 +125,9 @@ export const useTransactionHandler = ({
         });
 
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
+        queryClient.invalidateQueries({ queryKey: queryKeysFactory.gho });
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.staking });
         refetchPoolData && refetchPoolData();
-        refetchGhoData && refetchGhoData();
         refetchIncentiveData && refetchIncentiveData();
       } catch (e) {
         // TODO: what to do with this error?

src/hooks/app-data-provider/BackgroundDataProvider.tsx

@@ -1,12 +1,7 @@
 import React, { useContext } from 'react';
-import {
-  useGhoDataSubscription,
-  useIncentiveDataSubscription,
-  usePoolDataSubscription,
-} from 'src/store/root';
+import { useIncentiveDataSubscription, usePoolDataSubscription } from 'src/store/root';
 
 interface BackgroundDataProviderContextType {
-  refetchGhoData: () => Promise<void>;
   refetchIncentiveData?: () => Promise<void>;
   refetchPoolData?: () => Promise<void> | Promise<void[]>;
 }
@@ -23,11 +18,8 @@ const BackgroundDataProviderContext = React.createContext<BackgroundDataProvider
 export const BackgroundDataProvider: React.FC = ({ children }) => {
   const refetchPoolData = usePoolDataSubscription();
   const refetchIncentiveData = useIncentiveDataSubscription();
-  const refetchGhoData = useGhoDataSubscription();
   return (
-    <BackgroundDataProviderContext.Provider
-      value={{ refetchIncentiveData, refetchPoolData, refetchGhoData }}
-    >
+    <BackgroundDataProviderContext.Provider value={{ refetchIncentiveData, refetchPoolData }}>
       {children}
     </BackgroundDataProviderContext.Provider>
   );