Filter tokens shown on tooltip

BeanstalkFarms · Dec 14, 2023 · 92dcaa3 · 92dcaa3
1 parent 46eb5d1
commit 92dcaa3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 34 deletions.
diff --git a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx
@@ -140,6 +140,7 @@ export type BaseChartProps = {
   pegLine?: boolean;
   isTWAP?: boolean;
   useOldLpTokens?: boolean;
+  tokenPerSeasonFilter?: { [key: string]: { from: number, to: number } };
   horizontalLineNumber?: number;
   stylesConfig?: ChartMultiStyles;
   stackedArea?: boolean;

diff --git a/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx b/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx
@@ -32,7 +32,9 @@ type Props = {
   ProviderChartProps;
 
 const Graph = (props: Props) => {
-  const siloTokens = useTokenMap(props.useOldLpTokens ? ALL_LP_POOLS : SILO_WHITELIST);
+  const siloTokens = useTokenMap(
+    props.useOldLpTokens ? ALL_LP_POOLS : SILO_WHITELIST
+  );
   const {
     // Chart sizing
     width,
@@ -74,7 +76,9 @@ const Graph = (props: Props) => {
 
   // generate ticks
   const [tickSeasons, tickDates] = useMemo(() => {
-    const interval = Math.ceil(series[0].length / (width > 700 ? 12 : width < 450 ? 6 : 9));
+    const interval = Math.ceil(
+      series[0].length / (width > 700 ? 12 : width < 450 ? 6 : 9)
+    );
     const shift = Math.ceil(interval / 3); // slight shift on tick labels
     return data.reduce<[number[], string[]]>(
       (prev, curr, i) => {
@@ -90,7 +94,7 @@ const Graph = (props: Props) => {
       },
       [[], []]
     );
-  }, [data, scales]);
+  }, [data, series, width]);
 
   // tooltip
   const { containerRef, containerBounds } = useTooltipInPortal({
@@ -359,36 +363,48 @@ const Graph = (props: Props) => {
                   >
                     {typeof tooltip === 'boolean' ? (
                       <Stack gap={0.5}>
-                        {reversedKeys.map((key, index) => (
-                          <Row
-                            key={index}
-                            justifyContent="space-between"
-                            gap={3}
-                          >
-                            <Row gap={1}>
-                              <Box
-                                sx={{
-                                  width: '12px',
-                                  height: '12px',
-                                  borderRadius: '50%',
-                                  background: getStyle(
-                                    key,
-                                    reversedKeys.length - index - 1
-                                  ).to,
-                                  border: 1,
-                                  borderColor: getStyle(
-                                    key,
-                                    reversedKeys.length - index - 1
-                                  ).stroke,
-                                }}
-                              />
-                              <Typography>{siloTokens[key]?.symbol}</Typography>
-                            </Row>
-                            <Typography textAlign="right">
-                              {formatValue(tooltipData[key])}
-                            </Typography>
-                          </Row>
-                        ))}
+                        {reversedKeys.map((key, index) => {
+                          const seasonFilter = props.tokenPerSeasonFilter;
+                          if (
+                            !seasonFilter ||
+                            (tooltipData.season >= seasonFilter[key].from &&
+                              tooltipData.season <= seasonFilter[key].to)
+                          ) {
+                            return (
+                              <Row
+                                key={index}
+                                justifyContent="space-between"
+                                gap={3}
+                              >
+                                <Row gap={1}>
+                                  <Box
+                                    sx={{
+                                      width: '12px',
+                                      height: '12px',
+                                      borderRadius: '50%',
+                                      background: getStyle(
+                                        key,
+                                        reversedKeys.length - index - 1
+                                      ).to,
+                                      border: 1,
+                                      borderColor: getStyle(
+                                        key,
+                                        reversedKeys.length - index - 1
+                                      ).stroke,
+                                    }}
+                                  />
+                                  <Typography>
+                                    {siloTokens[key]?.symbol}
+                                  </Typography>
+                                </Row>
+                                <Typography textAlign="right">
+                                  {formatValue(tooltipData[key])}
+                                </Typography>
+                              </Row>
+                            );
+                          }
+                          return null;
+                        })}
                       </Stack>
                     ) : (
                       tooltip({ d: [tooltipData] })

diff --git a/projects/ui/src/components/Forecast/LiquidityOverTime.tsx b/projects/ui/src/components/Forecast/LiquidityOverTime.tsx
@@ -49,6 +49,15 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => {
     BEAN_CRV3_V1,
   ];
 
+  // Filters non-relevant tokens from the tooltip on a per-season basis
+  const seasonFilter = {
+    [sdk.tokens.BEAN_ETH_UNIV2_LP.address]: { from: 0, to: 6074 },
+    [BEAN_LUSD_LP_V1.address]: { from: 0, to: 6074 },
+    [BEAN_CRV3_V1.address]: { from: 0, to: 6074 },
+    [sdk.pools.BEAN_CRV3.address]: { from: 6074, to: Infinity },
+    [sdk.pools.BEAN_ETH_WELL.address]: { from: 15241, to: Infinity },
+  };
+
   const queryConfigBeanCrv3 = useMemo(() => ({ 
     variables: { pool: sdk.pools.BEAN_CRV3.address }, 
     context: { subgraph: 'bean' } 
@@ -144,7 +153,8 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => {
           ChartProps={{
             getDisplayValue: getStatValue,
             tooltip: true,
-            useOldLpTokens: true
+            useOldLpTokens: true,
+            tokenPerSeasonFilter: seasonFilter
           }}
         />
       </Box>