feat: clean up

projects/ui/src/components/Analytics/AdvancedChart.tsx

@@ -10,7 +10,7 @@ import { useQueries } from '@tanstack/react-query';
 import { fetchAllSeasonData } from '~/util/Graph';
 import { exists, mayFunctionToValue } from '~/util';
 import { RESEED_SEASON } from '~/constants';
-import useIsMounted from '~/hooks/display/useIsMounted';
+import useOnAnimationFrame from '~/hooks/display/useOnAnimationFrame';
 import ChartV2 from './ChartV2';
 import DropdownIcon from '../Common/DropdownIcon';
 import SelectDialog from './SelectDialog';
@@ -32,7 +32,7 @@ const AdvancedChart: FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
   const chartSetupData = useChartSetupData();
 
   // wait to mount before fetching data
-  const mounted = useIsMounted();
+  const ready = useOnAnimationFrame();
 
   const storedSetting1 = localStorage.getItem('advancedChartTimePeriod');
   const storedTimePeriod = storedSetting1 ? JSON.parse(storedSetting1) : undefined;
@@ -89,7 +89,7 @@ const AdvancedChart: FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
           return data as QueryData[];
         },
         retry: false,
-        enabled: mounted && season.gt(0),
+        enabled: ready && season.gt(0),
         staleTime: Infinity,
       };
     }),

projects/ui/src/hooks/beanstalk/useDataFeedTokenPrices.ts

@@ -1,13 +1,11 @@
 import { useCallback, useMemo } from 'react';
-import { AdvancedPipeStruct, BeanstalkSDK, Clipboard, ERC20Token, Token } from '@beanstalk/sdk';
+import { AdvancedPipeStruct, BeanstalkSDK, Clipboard, ERC20Token } from '@beanstalk/sdk';
 import { BigNumber } from 'bignumber.js';
 import { useDispatch } from 'react-redux';
-import { ContractFunctionParameters } from 'viem';
 
 import { useAggregatorV3Contract } from '~/hooks/ledger/useContract';
 import { updateTokenPrices } from '~/state/beanstalk/tokenPrices/actions';
 import { chunkArray, bigNumberResult, getTokenIndex, tokenIshEqual } from '~/util';
-import BEANSTALK_ABI_SNIPPETS from '~/constants/abi/Beanstalk/abiSnippets';
 import { TokenMap } from '~/constants/index';
 import { DAI_CHAINLINK_ADDRESSES } from '~/constants/addresses';
 import { useAppSelector } from '~/state/index';
@@ -143,38 +141,3 @@ async function fetchOraclePrices(sdk: BeanstalkSDK, tokens: ERC20Token[]) {
     return prev;
   }, {});
 }
-
-type OraclePriceCall = ContractFunctionParameters<
-  typeof BEANSTALK_ABI_SNIPPETS.oraclePrices
->;
-function makeMultiCall(beanstalkAddress: string, tokens: Token[]) {
-  const calls: OraclePriceCall[] = [];
-
-  const contract = {
-    address: beanstalkAddress as `0x${string}`,
-    abi: BEANSTALK_ABI_SNIPPETS.oraclePrices,
-  };
-
-  let address: `0x${string}` = '0x';
-
-  for (const token of tokens) {
-    address = token.address as `0x${string}`;
-    const instantPriceCall: OraclePriceCall = {
-      ...contract,
-      functionName: 'getTokenUsdPrice',
-      args: [address as `0x${string}`],
-    };
-    const twapPriceCall: OraclePriceCall = {
-      ...contract,
-      functionName: 'getTokenUsdTwap',
-      args: [address as `0x${string}`, 3600n],
-    };
-
-    calls.push(instantPriceCall, twapPriceCall);
-  }
-
-  return {
-    contracts: chunkArray(calls, 20),
-    chunkSize: 2,
-  };
-}

projects/ui/src/hooks/display/useOnAnimationFrame.ts

@@ -0,0 +1,13 @@
+import { useState, useEffect } from "react";
+
+export default function useOnAnimationFrame() {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsReady(true);
+    });
+  }, []);
+
+  return isReady;
+}