From 89558d53c841ba5dc84cfa529794cf7e6c648fa6 Mon Sep 17 00:00:00 2001
From: Spacebean <wndgud00@gmail.com>
Date: Sat, 14 Sep 2024 04:16:51 -0600
Subject: [PATCH] feat: update UI

---
 projects/ui/src/components/App/index.tsx      |   4 +-
 projects/ui/src/components/Nav/routes.ts      |  14 +-
 .../Silo/SeedGauge/SeedGaugeTable.tsx         |   2 +
 .../src/hooks/beanstalk/useAvgSeedsPerBDV.ts  |   1 +
 .../ui/src/hooks/beanstalk/useSeedGauge.ts    | 166 +++++++++++++-----
 5 files changed, 138 insertions(+), 49 deletions(-)

diff --git a/projects/ui/src/components/App/index.tsx b/projects/ui/src/components/App/index.tsx
index 4955c7befb..a5dd6965b0 100644
--- a/projects/ui/src/components/App/index.tsx
+++ b/projects/ui/src/components/App/index.tsx
@@ -32,7 +32,7 @@ import GovernancePage from '~/pages/governance';
 import ProposalPage from '~/pages/governance/proposal';
 import FarmerDelegatePage from '~/pages/governance/delegate';
 import TransactionHistoryPage from '~/pages/history';
-import NFTPage from '~/pages/nft';
+// import NFTPage from '~/pages/nft';
 import SiloPage from '~/pages/silo';
 import SiloTokenPage from '~/pages/silo/token';
 import SwapPage from '~/pages/swap';
@@ -246,7 +246,7 @@ function Arbitrum() {
                 element={<Navigate to="/market/sell/:orderID" />}
               />
             </Route>
-            <Route path="/nft" element={<NFTPage />} />
+            {/* <Route path="/nft" element={<NFTPage />} /> */}
             <Route path="/governance/:id" element={<ProposalPage />} />
             <Route
               path="/governance/delegate/:type"
diff --git a/projects/ui/src/components/Nav/routes.ts b/projects/ui/src/components/Nav/routes.ts
index 9a763bd232..a9f9d277d2 100644
--- a/projects/ui/src/components/Nav/routes.ts
+++ b/projects/ui/src/components/Nav/routes.ts
@@ -1,5 +1,5 @@
 import aboutIcon from '~/img/beanstalk/interface/nav/about.svg';
-import beanNFTIcon from '~/img/beanstalk/interface/nav/bean-nft.svg';
+// import beanNFTIcon from '~/img/beanstalk/interface/nav/bean-nft.svg';
 import discordIcon from '~/img/beanstalk/interface/nav/discord.svg';
 import githubIcon from '~/img/beanstalk/interface/nav/github.svg';
 import governanceIcon from '~/img/beanstalk/interface/nav/governance.svg';
@@ -59,12 +59,12 @@ const ROUTES: { [key in RouteKeys]: RouteData[] } = {
   ],
   // More Menu
   more: [
-    {
-      path: 'nft',
-      title: 'BeaNFTs',
-      icon: beanNFTIcon,
-      small: true,
-    },
+    // {
+    //   path: 'nft',
+    //   title: 'BeaNFTs',
+    //   icon: beanNFTIcon,
+    //   small: true,
+    // },
     {
       path: 'swap',
       title: 'Swap',
diff --git a/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx b/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx
index 5ca15130ee..5c1deaab41 100644
--- a/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx
+++ b/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx
@@ -377,6 +377,8 @@ const SeedGaugeTable = ({
   data: ReturnType<typeof useSeedGauge>['data'];
   onToggleAdvancedMode: (v: boolean) => void;
 }) => {
+
+  console.log('data', data);
   const [isAdvanced, setIsAdvanced] = useState(false);
   const rows = useTableConfig(isAdvanced, data);
   const cols = isAdvanced ? advancedViewColumns : basicViewColumns;
diff --git a/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts b/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts
index b11219e62a..347a0fd455 100644
--- a/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts
+++ b/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts
@@ -55,6 +55,7 @@ const apolloFetch = async (
     notifyOnNetworkStatusChange: true,
   });
 
+// BS3TODO: Fix me to include L1 silo whitelist
 // Main hook with improved error handling and performance
 const useAvgSeedsPerBDV = (
   range: Range<Time> | undefined,
diff --git a/projects/ui/src/hooks/beanstalk/useSeedGauge.ts b/projects/ui/src/hooks/beanstalk/useSeedGauge.ts
index a97ea0d056..d46f413da6 100644
--- a/projects/ui/src/hooks/beanstalk/useSeedGauge.ts
+++ b/projects/ui/src/hooks/beanstalk/useSeedGauge.ts
@@ -1,18 +1,21 @@
+import { useMemo } from 'react';
 import { multicall } from '@wagmi/core';
 import { useQuery } from '@tanstack/react-query';
-import { AddressMap, ZERO_BN, ABISnippets } from '~/constants';
 import { Token } from '@beanstalk/sdk';
-import { config } from '~/util/wagmi/config';
 import { BigNumber as BigNumberJS } from 'bignumber.js';
 import { BigNumber as BigNumberEthers } from 'ethers';
+
+import { AddressMap, ZERO_BN, ABISnippets, NEW_BN } from '~/constants';
+import { config } from '~/util/wagmi/config';
 import { useAppSelector } from '~/state';
-import { useMemo } from 'react';
 import { LibCases } from '~/lib/Beanstalk/LibCases';
 import { toBNWithDecimals } from '~/util/BigNumber';
-import useSdk from '../sdk';
-import useSeason from './useSeason';
 
-type BaseTokenSeedGaugeQueryInfo = {
+import useSdk from '~/hooks/sdk';
+import useSeason from '~/hooks/beanstalk/useSeason';
+import { ContractFunctionParameters } from 'viem';
+
+interface BaseTokenSeedGaugeQueryInfo {
   /**
    * Optimal % of deposited BDV desired by the Gauge System
    */
@@ -29,9 +32,9 @@ type BaseTokenSeedGaugeQueryInfo = {
    * Whether the whitelisted token is allocated gauge points by the gauge system
    */
   isAllocatedGP: boolean;
-};
+}
 
-export type TokenSeedGaugeInfo = {
+export interface TokenSeedGaugeInfo extends BaseTokenSeedGaugeQueryInfo {
   /**
    * the current percentage of all BDV deposited in the silo
    */
@@ -40,37 +43,59 @@ export type TokenSeedGaugeInfo = {
    * the total BDV deposited in the silo
    */
   totalBdv: BigNumberJS;
-} & BaseTokenSeedGaugeQueryInfo;
+}
 
 // custom toBignumber js function since we have to handle both ethers and bigint
 const toBN = (
   n: BigInt | BigNumberEthers | number,
   decimalsOrToken: number | Token
 ) => {
+  let nStr: string;
+
+  if (typeof n === 'bigint' || typeof n === 'number') {
+    nStr = n.toString();
+  } else if (BigNumberEthers.isBigNumber(n)) {
+    nStr = n.toString();
+  } else {
+    throw new Error('Invalid input type for "n" toBN');
+  }
+
   const decimals =
     decimalsOrToken instanceof Token
       ? decimalsOrToken.decimals
       : decimalsOrToken;
-
-  return toBNWithDecimals(n.toString(), decimals);
+  return toBNWithDecimals(nStr, decimals);
 };
 
-const getTokenSettingsCalls = (address: string, tokens: Token[]) =>
-  tokens.map((token) => ({
-    address: address as `0x{string}`,
-    abi: ABISnippets.tokenSettings,
-    functionName: 'tokenSettings',
-    args: [token.address],
-  }));
+const getTokenSettingsCalls = (address: string, tokens: Token[]) => {
+  const calls: ContractFunctionParameters<typeof ABISnippets.tokenSettings>[] =
+    tokens.map((token) => ({
+      address: address as `0x{string}`,
+      abi: ABISnippets.tokenSettings,
+      functionName: 'tokenSettings',
+      args: [token.address as `0x{string}`],
+    }));
+
+  return calls;
+};
 
-const getGPPerBdvPerTokenCalls = (address: string, tokens: Token[]) =>
+const getGPPerBdvPerTokenCalls = (
+  address: string,
+  tokens: Token[]
+): ContractFunctionParameters<
+  typeof ABISnippets.getGaugePointsPerBdvForToken
+>[] =>
   tokens.map((token) => ({
     address: address as `0x{string}`,
     abi: ABISnippets.getGaugePointsPerBdvForToken,
     functionName: 'getGaugePointsPerBdvForToken',
-    args: [token.address],
+    args: [token.address as `0x{string}`],
   }));
 
+const MAX_BEAN_MAX_LP = toBN(LibCases.MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18);
+
+const MIN_BEAN_MAX_LP = toBN(LibCases.MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18);
+
 const useSeedGauge = () => {
   const sdk = useSdk();
   const season = useSeason();
@@ -79,7 +104,13 @@ const useSeedGauge = () => {
   const whitelist = [...sdk.tokens.siloWhitelist];
 
   const query = useQuery({
-    queryKey: ['beanstalk', 'silo', 'tokenSettings', season.toString()],
+    queryKey: [
+      [sdk.toJSON()],
+      'beanstalk',
+      'silo',
+      'tokenSettings',
+      season.toString(),
+    ],
     queryFn: async () => {
       const b = sdk.contracts.beanstalk;
 
@@ -88,34 +119,81 @@ const useSeedGauge = () => {
 
       const [_bean2MaxLPRatio, settings, gaugePointsPerBdvForToken] =
         await Promise.all([
-          b.getBeanToMaxLpGpPerBdvRatioScaled(),
-          multicall(config, { contracts: calls }),
-          multicall(config, { contracts: gaugeCalls }),
+          b.getBeanToMaxLpGpPerBdvRatioScaled().catch(() => {
+            console.debug(
+              '[useSeedGauge/query]: Error fetching bean2MaxLPRatio for Seed Gauge'
+            );
+            return null;
+          }),
+          // BS3TODO: Fix me. This is for some reason returning 325n for optimalPercentDepositedBdv for every token
+          multicall(config, { contracts: calls, allowFailure: true }),
+          multicall(config, { contracts: gaugeCalls, allowFailure: true }),
         ]);
 
       const map: AddressMap<BaseTokenSeedGaugeQueryInfo> = {};
 
       whitelist.forEach((token, i) => {
         const { error: err, result } = settings[i];
+        console.log({
+          settings: settings[i],
+          token: token.symbol,
+        });
         const { error: gpErr, result: gpResult } = gaugePointsPerBdvForToken[i];
 
+        const baseObj = {
+          optimalPctDepositedBdv: NEW_BN,
+          gaugePoints: ZERO_BN,
+          gaugePointsPerBdv: ZERO_BN,
+          isAllocatedGP: false,
+        };
+
         if (!err && !!result) {
           const optimalPct = toBN(result.optimalPercentDepositedBdv, 6);
 
           map[token.address] = {
+            ...baseObj,
             optimalPctDepositedBdv: optimalPct,
             gaugePoints: toBN(result.gaugePoints, 18),
-            gaugePointsPerBdv: ZERO_BN,
             isAllocatedGP: optimalPct.gt(0),
           };
+        } else {
+          map[token.address] = {
+            ...baseObj,
+          };
+
+          console.debug(
+            `[useSeedGauge/query]: Error fetching token settings for ${token.symbol}`
+          );
         }
 
         if (!gpErr && !!gpResult) {
           map[token.address].gaugePointsPerBdv = toBN(gpResult, 18);
+        } else {
+          console.debug(
+            `[useSeedGauge/query]: Error getGaugePointsPerBdvForToken per BDV for ${token.symbol}`
+          );
         }
       });
 
-      const bean2MaxLPRatio = toBN(_bean2MaxLPRatio, 18);
+      const bean2MaxLPRatio = _bean2MaxLPRatio
+        ? toBN(_bean2MaxLPRatio, 18)
+        : NEW_BN;
+
+      console.log(
+        'tokenSettings: ',
+        Object.entries(map).reduce<Record<string, any>>((prev, curr) => {
+          const [key, value] = curr;
+
+          prev[key] = {
+            gaugePoints: value.gaugePoints.toNumber(),
+            gaugePointsPerBdv: value.gaugePointsPerBdv.toNumber(),
+            isAllocatedGP: value.isAllocatedGP,
+            optimalPctDepositedBdv: value.optimalPctDepositedBdv.toNumber(),
+          };
+
+          return prev;
+        }, {})
+      );
 
       return {
         tokenSettings: map,
@@ -127,9 +205,7 @@ const useSeedGauge = () => {
 
   const gaugeData = useMemo(() => {
     if (!Object.keys(siloBals).length || !query.data?.tokenSettings) return {};
-
     const tokenSettingMap = query.data.tokenSettings;
-
     const map: AddressMap<TokenSeedGaugeInfo> = {};
 
     let totalRelevantBdv = ZERO_BN;
@@ -159,19 +235,29 @@ const useSeedGauge = () => {
     return map;
   }, [query.data?.tokenSettings, siloBals]);
 
-  return {
-    data: {
-      bean2MaxLPRatio: {
-        max: toBN(LibCases.MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18),
-        value: query.data?.bean2MaxLPRatio,
-        min: toBN(LibCases.MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18),
+  return useMemo(
+    () => ({
+      data: {
+        bean2MaxLPRatio: {
+          max: MAX_BEAN_MAX_LP,
+          value: query.data?.bean2MaxLPRatio,
+          min: MIN_BEAN_MAX_LP,
+        },
+        gaugeData: gaugeData,
       },
-      gaugeData: gaugeData,
-    },
-    isLoading: siloLoading || query.isLoading,
-    error: query.error,
-    refetch: query.refetch,
-  };
+      isLoading: siloLoading || query.isLoading,
+      error: query.error,
+      refetch: query.refetch,
+    }),
+    [
+      gaugeData,
+      query.data?.bean2MaxLPRatio,
+      query.error,
+      query.isLoading,
+      query.refetch,
+      siloLoading,
+    ]
+  );
 };
 
 export default useSeedGauge;