feat: update Silo/Overview

BeanstalkFarms · Sep 14, 2024 · 71020be · 71020be
1 parent 003488c
commit 71020be
Show file tree

Hide file tree

Showing 10 changed files with 268 additions and 117 deletions.
diff --git a/projects/ui/src/components/App/index.tsx b/projects/ui/src/components/App/index.tsx
@@ -266,7 +266,7 @@ function Arbitrum() {
 }
 
 export default function App() {
-  const { isArbitrum, isDev: isTestnet } = useChainState();
+  const { isArbitrum, isTestnet } = useChainState();
 
   if (!isArbitrum || (isArbitrum && !isTestnet)) {
     return <Mainnet />;

diff --git a/projects/ui/src/components/Balances/SiloBalancesHistory.tsx b/projects/ui/src/components/Balances/SiloBalancesHistory.tsx
@@ -11,7 +11,7 @@ import {
   SeasonRange,
 } from '~/hooks/beanstalk/useSeasonsQuery';
 import useFarmerSiloHistory from '~/hooks/farmer/useFarmerSiloHistory';
-import { L1_SILO_WHITELIST } from '~/constants/tokens';
+import { useWhitelistedTokens } from '~/hooks/beanstalk/useTokens';
 import MockPlot from '../Silo/MockPlot';
 import BlurComponent from '../Common/ZeroState/BlurComponent';
 import WalletButton from '../Common/Connection/WalletButton';
@@ -21,6 +21,7 @@ const SiloBalancesHistory: React.FC<{}> = () => {
   const account = useAccount();
   const timeTabParams = useTimeTabState();
   const { data, loading } = useFarmerSiloHistory(account, true, false);
+  const { whitelist } = useWhitelistedTokens();
 
   const formatValue = (value: number) =>
     `$${value?.toLocaleString('en-US', { maximumFractionDigits: 2 })}`;
@@ -48,7 +49,7 @@ const SiloBalancesHistory: React.FC<{}> = () => {
   const queryData: QueryData = {
     data: filteredSeries as BaseDataPoint[][],
     loading: loading,
-    keys: L1_SILO_WHITELIST.map((t) => t.address),
+    keys: whitelist.map((t) => t.address),
     error: undefined,
   };
 

diff --git a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx
@@ -32,13 +32,15 @@ export type BaseDataPoint = {
   [key: string]: number;
 };
 
+type BaseChartMultiStyle = {
+  stroke: string; // stroke color
+  fillPrimary: string; // gradient 'to' color
+  fillSecondary?: string; // gradient 'from' color
+  strokeWidth?: number;
+};
+
 export type ChartMultiStyles = {
-  [key: string]: {
-    stroke: string; // stroke color
-    fillPrimary: string; // gradient 'to' color
-    fillSecondary?: string; // gradient 'from' color
-    strokeWidth?: number;
-  };
+  [key: string]: BaseChartMultiStyle;
 };
 
 type ChartStyleConfig = {
@@ -75,8 +77,8 @@ type Scales = {
 };
 
 export type Scale = {
-  xScale: ReturnType<typeof SCALES[keyof typeof SCALES]>;
-  yScale: ReturnType<typeof SCALES[keyof typeof SCALES]>;
+  xScale: ReturnType<(typeof SCALES)[keyof typeof SCALES]>;
+  yScale: ReturnType<(typeof SCALES)[keyof typeof SCALES]>;
 };
 
 type ChartAccessorProps = {
@@ -120,6 +122,7 @@ type UtilProps = {
 };
 
 export type DataRegion = { yTop: number; yBottom: number };
+// eslint-disable-next-line react/no-unused-prop-types
 export type BaseGraphProps = { width: number; height: number };
 
 export type ProviderChartProps = {
@@ -142,7 +145,7 @@ export type BaseChartProps = {
   isTWAP?: boolean;
   useCustomTokenList?: ERC20Token[];
   useCustomTooltipNames?: { [key: string]: string };
-  tokenPerSeasonFilter?: { [key: string]: { from: number, to: number } };
+  tokenPerSeasonFilter?: { [key: string]: { from: number; to: number } };
   horizontalLineNumber?: number;
   stylesConfig?: ChartMultiStyles;
   stackedArea?: boolean;
@@ -184,33 +187,47 @@ const chartPadding = {
 };
 
 const chartColors = BeanstalkPalette.theme.spring.chart;
-const defaultChartStyles: ChartMultiStyles = {
-  0: {
-    stroke: BeanstalkPalette.theme.spring.beanstalkGreen,
-    fillPrimary: chartColors.primaryLight,
-    strokeWidth: 2,
-  },
-  1: {
-    stroke: chartColors.purple,
-    fillPrimary: chartColors.purpleLight,
-    strokeWidth: 2,
-  },
-  2: {
-    stroke: chartColors.green,
-    fillPrimary: chartColors.greenLight,
-    strokeWidth: 2,
-  },
-  3: {
-    stroke: chartColors.yellow,
-    fillPrimary: chartColors.yellowLight,
-    strokeWidth: 2,
-  },
-  4: {
-    stroke: chartColors.blue,
-    fillPrimary: chartColors.blueLight,
-    strokeWidth: 2,
-  },
+
+const chartStylePrimary: BaseChartMultiStyle = {
+  stroke: BeanstalkPalette.theme.spring.beanstalkGreen,
+  fillPrimary: chartColors.primaryLight,
+  strokeWidth: 2,
+};
+const chartStylePurple: BaseChartMultiStyle = {
+  stroke: chartColors.purple,
+  fillPrimary: chartColors.purpleLight,
+  strokeWidth: 2,
+};
+const chartStyleGreen: BaseChartMultiStyle = {
+  stroke: chartColors.green,
+  fillPrimary: chartColors.greenLight,
+  strokeWidth: 2,
 };
+const chartStyleYellow: BaseChartMultiStyle = {
+  stroke: chartColors.yellow,
+  fillPrimary: chartColors.yellowLight,
+  strokeWidth: 2,
+};
+const chartStyleBlue: BaseChartMultiStyle = {
+  stroke: chartColors.blue,
+  fillPrimary: chartColors.blueLight,
+  strokeWidth: 2,
+};
+
+const chartStyleArr = [
+  chartStylePrimary,
+  chartStylePurple,
+  chartStyleGreen,
+  chartStyleYellow,
+  chartStyleBlue,
+];
+
+const defaultChartStyles: ChartMultiStyles = Object.fromEntries(
+  [...chartStyleArr, ...chartStyleArr].map((chartStyle, i) => [
+    i.toString(),
+    chartStyle,
+  ])
+);
 
 /**
  * get chart styles for given key

diff --git a/projects/ui/src/hooks/beanstalk/useTokens.ts b/projects/ui/src/hooks/beanstalk/useTokens.ts
@@ -6,12 +6,14 @@ import LegacyToken, {
   NativeToken as LegacyNativeToken,
 } from '~/classes/Token';
 import { ChainConstant, SupportedChainId, TokenMap } from '~/constants';
+import * as ADDRESSES from '~/constants/addresses';
 import useSdk from '~/hooks/sdk';
 import { useAppSelector } from '~/state';
 import { BeanPools } from '~/state/bean/pools';
 import * as LegacyTokens from '~/constants/tokens';
 import { getTokenIndex, isSdkToken } from '~/util';
-import useChainState from '../chain/useChainState';
+import useChainState from '~/hooks/chain/useChainState';
+import { useResolvedChainId } from '../chain/useChainId';
 
 // -------------------------
 // Token Instances
@@ -89,7 +91,8 @@ export const useTokens = (): {
     const erc20TokenMap = Object.values(balanceTokens).reduce<
       TokenMap<ERC20Token>
     >((acc, token) => {
-      if (token.equals(tokens.ETH)) return acc;
+      const tokenIndex = getTokenIndex(token);
+      if (tokenIndex === 'eth') return acc;
       acc[getTokenIndex(token)] = token as ERC20Token;
       return acc;
     }, {});
@@ -144,6 +147,31 @@ export const useUnripeTokens = () => {
   }, [sdk]);
 };
 
+export const useGetUnripeTokenWithAddress = () => {
+  const urTokens = useUnripeTokens();
+
+  const getUnripeSdkToken = useCallback(
+    (_address: string) => {
+      const address = _address.toLowerCase();
+
+      if (Object.values(ADDRESSES.UNRIPE_BEAN_ADDRESSES).includes(address)) {
+        return urTokens.UNRIPE_BEAN;
+      }
+
+      if (
+        Object.values(ADDRESSES.UNRIPE_BEAN_WSTETH_ADDRESSES).includes(address)
+      ) {
+        return urTokens.UNRIPE_BEAN_WSTETH;
+      }
+    },
+    [urTokens]
+  );
+
+  return {
+    getUnripeSdkToken,
+  };
+};
+
 /**
  * @param sortByLiquidity - If true, sort Well LP tokens by liquidity (highest to lowest)
  */
@@ -245,37 +273,40 @@ function getWhitelistSorted(
   });
 }
 
-const i = SupportedChainId.ARBITRUM_MAINNET;
+const cARB = SupportedChainId.ARBITRUM_MAINNET;
+const cETH = SupportedChainId.ETH_MAINNET;
 
 const oldTokenMap: Record<string, ChainConstant<LegacyToken> | LegacyToken> = {
-  [LegacyTokens.ETH[i].symbol]: LegacyTokens.ETH,
-  [LegacyTokens.BEAN[i].symbol]: LegacyTokens.BEAN,
-  [LegacyTokens.UNRIPE_BEAN[i].symbol]: LegacyTokens.UNRIPE_BEAN,
-  [LegacyTokens.UNRIPE_BEAN_WSTETH[i].symbol]: LegacyTokens.UNRIPE_BEAN_WSTETH,
-  [LegacyTokens.WETH[i].symbol]: LegacyTokens.WETH,
-  [LegacyTokens.DAI[i].symbol]: LegacyTokens.DAI,
-  [LegacyTokens.USDC[i].symbol]: LegacyTokens.USDC,
-  [LegacyTokens.USDT[i].symbol]: LegacyTokens.USDT,
-  [LegacyTokens.WSTETH[i].symbol]: LegacyTokens.WSTETH,
-  [LegacyTokens.WEETH[i].symbol]: LegacyTokens.WEETH,
-  [LegacyTokens.WBTC[i].symbol]: LegacyTokens.WBTC,
-  [LegacyTokens.BEAN_ETH_WELL_LP[i].symbol]: LegacyTokens.BEAN_ETH_WELL_LP,
-  [LegacyTokens.BEAN_WSTETH_WELL_LP[i].symbol]:
+  [LegacyTokens.ETH[cARB].symbol]: LegacyTokens.ETH,
+  [LegacyTokens.BEAN[cARB].symbol]: LegacyTokens.BEAN,
+  [LegacyTokens.UNRIPE_BEAN[cARB].symbol]: LegacyTokens.UNRIPE_BEAN,
+  [LegacyTokens.UNRIPE_BEAN_WSTETH[cARB].symbol]:
+    LegacyTokens.UNRIPE_BEAN_WSTETH,
+  [LegacyTokens.WETH[cARB].symbol]: LegacyTokens.WETH,
+  [LegacyTokens.DAI[cARB].symbol]: LegacyTokens.DAI,
+  [LegacyTokens.USDC[cARB].symbol]: LegacyTokens.USDC,
+  [LegacyTokens.USDT[cARB].symbol]: LegacyTokens.USDT,
+  [LegacyTokens.WSTETH[cARB].symbol]: LegacyTokens.WSTETH,
+  [LegacyTokens.WEETH[cARB].symbol]: LegacyTokens.WEETH,
+  [LegacyTokens.WBTC[cARB].symbol]: LegacyTokens.WBTC,
+  [LegacyTokens.BEAN_ETH_WELL_LP[cARB].symbol]: LegacyTokens.BEAN_ETH_WELL_LP,
+  [LegacyTokens.BEAN_WSTETH_WELL_LP[cARB].symbol]:
     LegacyTokens.BEAN_WSTETH_WELL_LP,
-  [LegacyTokens.BEAN_WEETH_WELL_LP[i].symbol]: LegacyTokens.BEAN_WEETH_WELL_LP,
-  [LegacyTokens.BEAN_WBTC_WELL_LP[i].symbol]: LegacyTokens.BEAN_WBTC_WELL_LP,
-  [LegacyTokens.BEAN_USDC_WELL_LP[i].symbol]: LegacyTokens.BEAN_USDC_WELL_LP,
-  [LegacyTokens.BEAN_USDT_WELL_LP[i].symbol]: LegacyTokens.BEAN_USDT_WELL_LP,
+  [LegacyTokens.BEAN_WEETH_WELL_LP[cARB].symbol]:
+    LegacyTokens.BEAN_WEETH_WELL_LP,
+  [LegacyTokens.BEAN_WBTC_WELL_LP[cARB].symbol]: LegacyTokens.BEAN_WBTC_WELL_LP,
+  [LegacyTokens.BEAN_USDC_WELL_LP[cARB].symbol]: LegacyTokens.BEAN_USDC_WELL_LP,
+  [LegacyTokens.BEAN_USDT_WELL_LP[cARB].symbol]: LegacyTokens.BEAN_USDT_WELL_LP,
   [LegacyTokens.STALK.symbol]: LegacyTokens.STALK,
   [LegacyTokens.SEEDS.symbol]: LegacyTokens.SEEDS,
   [LegacyTokens.PODS.symbol]: LegacyTokens.PODS,
   [LegacyTokens.SPROUTS.symbol]: LegacyTokens.SPROUTS,
   [LegacyTokens.RINSABLE_SPROUTS.symbol]: LegacyTokens.RINSABLE_SPROUTS,
-  [LegacyTokens.BEAN_CRV3_LP[1].symbol]: LegacyTokens.BEAN_CRV3_LP,
-  [LegacyTokens.CRV3[1].symbol]: LegacyTokens.CRV3,
-  [LegacyTokens.BEAN_ETH_UNIV2_LP[1].symbol]: LegacyTokens.BEAN_ETH_UNIV2_LP,
-  [LegacyTokens.BEAN_LUSD_LP[1].symbol]: LegacyTokens.BEAN_LUSD_LP,
-  [LegacyTokens.LUSD[1].symbol]: LegacyTokens.LUSD,
+  [LegacyTokens.BEAN_CRV3_LP[cETH].symbol]: LegacyTokens.BEAN_CRV3_LP,
+  [LegacyTokens.CRV3[cETH].symbol]: LegacyTokens.CRV3,
+  [LegacyTokens.BEAN_ETH_UNIV2_LP[cETH].symbol]: LegacyTokens.BEAN_ETH_UNIV2_LP,
+  [LegacyTokens.BEAN_LUSD_LP[cETH].symbol]: LegacyTokens.BEAN_LUSD_LP,
+  [LegacyTokens.LUSD[cETH].symbol]: LegacyTokens.LUSD,
 } as const;
 
 export const useGetLegacyToken = () => {
@@ -294,3 +325,76 @@ export const useGetLegacyToken = () => {
 
   return getLegacyToken;
 };
+
+const makeEntry = (
+  a: ChainConstant<string>,
+  t: ChainConstant<LegacyToken>
+) => ({
+  ...(a[cARB] && t[cARB] ? { [a[cARB]]: t } : {}),
+  ...(a[cETH] && t[cETH] ? { [a[cETH]]: t } : {}),
+});
+
+const A = ADDRESSES;
+const L = LegacyTokens;
+
+const ADDRESS_TO_CHAIN_CONSTANT: Record<string, ChainConstant<LegacyToken>> = {
+  // BEAN
+  ...makeEntry(A.BEAN_ADDRESSES, L.BEAN),
+
+  // UNRIPE
+
+  ...makeEntry(A.UNRIPE_BEAN_ADDRESSES, L.UNRIPE_BEAN),
+  ...makeEntry(A.UNRIPE_BEAN_WSTETH_ADDRESSES, L.UNRIPE_BEAN_WSTETH),
+
+  // ERC20
+  ...makeEntry(A.WETH_ADDRESSES, L.WETH),
+  ...makeEntry(A.WSTETH_ADDRESSES, L.WSTETH),
+  ...makeEntry(A.WEETH_ADDRESSES, L.WEETH),
+  ...makeEntry(A.WBTC_ADDRESSES, L.WBTC),
+  ...makeEntry(A.DAI_ADDRESSES, L.DAI),
+  ...makeEntry(A.USDC_ADDRESSES, L.USDC),
+  ...makeEntry(A.USDT_ADDRESSES, L.USDT),
+  ...makeEntry(A.ARB_ADDRESSES, L.ARB),
+
+  // LP
+  ...makeEntry(A.BEAN_ETH_WELL_ADDRESSES, L.BEAN_ETH_WELL_LP),
+  ...makeEntry(A.BEAN_WSTETH_ADDRESSS, L.BEAN_WSTETH_WELL_LP),
+  ...makeEntry(A.BEANWEETH_WELL_ADDRESSES, L.BEAN_WEETH_WELL_LP),
+  ...makeEntry(A.BEANWBTC_WELL_ADDRESSES, L.BEAN_WBTC_WELL_LP),
+  ...makeEntry(A.BEANUSDC_WELL_ADDRESSES, L.BEAN_USDC_WELL_LP),
+  ...makeEntry(A.BEANUSDT_WELL_ADDRESSES, L.BEAN_USDT_WELL_LP),
+
+  // Deprecated
+  // ...makeEntry(A.CRV3_ADDRESSES, L.CRV3),
+  // ...makeEntry(A.BEAN_CRV3_ADDRESSES, L.BEAN_CRV3_LP),
+  // ...makeEntry(A.BEAN_LUSD_ADDRESSES, L.BEAN_LUSD_LP),
+  // ...makeEntry(A.LUSD_ADDRESSES, L.LUSD),
+  // ...makeEntry(A.BEAN_ETH_UNIV2_LP_ADDRESSES, L.BEAN_ETH_UNIV2_LP),
+} as const;
+
+/**
+ *
+ * @returns a function that takes an address (chain agnostic) and returns the sdk token instance
+ * for the chain the user is currently on
+ *
+ */
+export const useGetNormaliseChainToken = () => {
+  const { erc20TokenMap } = useTokens();
+  const chainId = useResolvedChainId();
+
+  /**
+   * returns the sdk token instance for the chain the user is currently on if available
+   */
+  const getToken = useCallback(
+    (_address: string) => {
+      const token = ADDRESS_TO_CHAIN_CONSTANT[_address.toLowerCase()];
+
+      return token?.[chainId]
+        ? erc20TokenMap[getTokenIndex(token[chainId])]
+        : undefined;
+    },
+    [erc20TokenMap, chainId]
+  );
+
+  return getToken;
+};
diff --git a/projects/ui/src/hooks/chain/useChainId.ts b/projects/ui/src/hooks/chain/useChainId.ts
@@ -1,3 +1,4 @@
+import { ChainResolver } from '@beanstalk/sdk-core';
 import { useMemo } from 'react';
 import { useAccount } from 'wagmi';
 import { SupportedChainId } from '~/constants';
@@ -17,3 +18,9 @@ export default function useChainId() {
   const { chain } = useAccount();
   return useMemo(() => chain?.id || defaultChainId, [chain?.id]);
 }
+
+export function useResolvedChainId() {
+  const chainId = useChainId();
+
+  return ChainResolver.resolveToMainnetChainId(chainId);
+}
diff --git a/projects/ui/src/hooks/farmer/useFarmerBalancesBreakdown.ts b/projects/ui/src/hooks/farmer/useFarmerBalancesBreakdown.ts
@@ -184,7 +184,10 @@ export function useFarmerBalancesL1Breakdown() {
     addresses.forEach((address) => {
       const token = whitelist[address];
       const siloBalance = siloBalances[address];
-      const tokenBalance = tokenBalances[address] || ZERO_BN;
+      const tokenBalance = tokenBalances[address] || {
+        internal: ZERO_BN,
+        external: ZERO_BN,
+      };
 
       // Ensure we've loaded a Silo Balance for this token.
       if (siloBalance) {
@@ -222,6 +225,8 @@ export function useFarmerBalancesL1Breakdown() {
       }
     });
 
+    console.log('useFarmersBalancesL1Breakdown', prev);
+
     return prev;
   }, [whitelist, addresses, siloBalances, tokenBalances, getUSD]);
 }