diff --git a/projects/ui/src/components/Analytics/Bean/Liquidity.tsx b/projects/ui/src/components/Analytics/Bean/Liquidity.tsx index 63c1d8f0e6..427a70fc3a 100644 --- a/projects/ui/src/components/Analytics/Bean/Liquidity.tsx +++ b/projects/ui/src/components/Analytics/Bean/Liquidity.tsx @@ -6,12 +6,11 @@ import useSeason from '~/hooks/beanstalk/useSeason'; import { FC } from '~/types'; import useSeasonsQuery, { SeasonRange } from '~/hooks/beanstalk/useSeasonsQuery'; import { BaseDataPoint, ChartMultiStyles } from '../../Common/Charts/ChartPropProvider'; -import useSdk from '~/hooks/sdk'; import useTimeTabState from '~/hooks/app/useTimeTabState'; import BaseSeasonPlot, { QueryData } from '../../Common/Charts/BaseSeasonPlot'; -import { BEAN_CRV3_V1_LP, BEAN_LUSD_LP } from '~/constants/tokens'; -import { BeanstalkPalette } from '../../App/muiTheme'; import { SeasonPlotBaseProps } from '~/components/Common/Charts/SeasonPlot'; +import { BEAN_CRV3_LP, BEAN_CRV3_V1_LP, BEAN_ETH_UNIV2_LP, BEAN_ETH_WELL_LP, BEAN_LUSD_LP } from '~/constants/tokens'; +import { BeanstalkPalette } from '../../App/muiTheme'; /// Setup SeasonPlot const formatValue = (value: number) => ( @@ -28,8 +27,7 @@ const StatProps = { const Liquidity: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ height, }) => { - // - const sdk = useSdk(); + const timeTabParams = useTimeTabState(); const season = useSeason(); @@ -39,27 +37,31 @@ const Liquidity: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ return dataPoint?.value || 0; }; + const BEAN_CRV3 = BEAN_CRV3_LP[1]; + const BEAN_ETH_WELL = BEAN_ETH_WELL_LP[1]; + const BEAN_ETH_UNIV2 = BEAN_ETH_UNIV2_LP[1]; const BEAN_LUSD_LP_V1 = BEAN_LUSD_LP[1]; const BEAN_CRV3_V1 = BEAN_CRV3_V1_LP[1]; const poolList = [ - sdk.pools.BEAN_CRV3, - sdk.pools.BEAN_ETH_WELL, - sdk.tokens.BEAN_ETH_UNIV2_LP, + BEAN_CRV3, + BEAN_ETH_WELL, + BEAN_ETH_UNIV2, BEAN_LUSD_LP_V1, BEAN_CRV3_V1, ]; + // Order must be the same as poolList! const chartStyle: ChartMultiStyles = { - [sdk.pools.BEAN_CRV3.address]: { + [BEAN_CRV3.address]: { stroke: BeanstalkPalette.theme.spring.blue, fillPrimary: BeanstalkPalette.theme.spring.lightBlue }, - [sdk.pools.BEAN_ETH_WELL.address]: { + [BEAN_ETH_WELL.address]: { stroke: BeanstalkPalette.theme.spring.beanstalkGreen, fillPrimary: BeanstalkPalette.theme.spring.washedGreen }, - [sdk.tokens.BEAN_ETH_UNIV2_LP.address]: { + [BEAN_ETH_UNIV2.address]: { stroke: BeanstalkPalette.theme.spring.chart.purple, fillPrimary: BeanstalkPalette.theme.spring.chart.purpleLight }, @@ -75,27 +77,27 @@ const Liquidity: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ // 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_ETH_UNIV2.address]: { from: 0, to: 6074 }, [BEAN_LUSD_LP_V1.address]: { from: 5502, to: 6074 }, [BEAN_CRV3_V1.address]: { from: 3658, to: 6074 }, - [sdk.pools.BEAN_CRV3.address]: { from: 6074, to: Infinity }, - [sdk.pools.BEAN_ETH_WELL.address]: { from: 15241, to: Infinity }, + [BEAN_CRV3.address]: { from: 6074, to: Infinity }, + [BEAN_ETH_WELL.address]: { from: 15241, to: Infinity }, }; const queryConfigBeanCrv3 = useMemo(() => ({ - variables: { pool: sdk.pools.BEAN_CRV3.address }, + variables: { pool: BEAN_CRV3.address }, context: { subgraph: 'bean' } - }), [sdk.pools.BEAN_CRV3.address]); + }), [BEAN_CRV3.address]); const queryConfigBeanEthWell = useMemo(() => ({ - variables: { pool: sdk.pools.BEAN_ETH_WELL.address }, + variables: { pool: BEAN_ETH_WELL.address }, context: { subgraph: 'bean' } - }), [sdk.pools.BEAN_ETH_WELL.address]); + }), [BEAN_ETH_WELL.address]); const queryConfigBeanEthOld = useMemo(() => ({ - variables: { pool: sdk.tokens.BEAN_ETH_UNIV2_LP.address }, + variables: { pool: BEAN_ETH_UNIV2.address }, context: { subgraph: 'bean' } - }), [sdk.tokens.BEAN_ETH_UNIV2_LP.address]); + }), [BEAN_ETH_UNIV2.address]); const queryConfigBeanLusdOld = useMemo(() => ({ variables: { pool: BEAN_LUSD_LP_V1.address }, @@ -136,9 +138,9 @@ const Liquidity: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ season: 0, date: 0, value: 0, - [sdk.pools.BEAN_CRV3.address]: 0, - [sdk.pools.BEAN_ETH_WELL.address]: 0, - [sdk.tokens.BEAN_ETH_UNIV2_LP.address]: 0, + [BEAN_CRV3.address]: 0, + [BEAN_ETH_WELL.address]: 0, + [BEAN_ETH_UNIV2.address]: 0, [BEAN_LUSD_LP_V1.address]: 0, [BEAN_CRV3_V1.address]: 0, }; @@ -175,7 +177,7 @@ const Liquidity: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ ChartProps={{ getDisplayValue: getStatValue, tooltip: true, - useOldLpTokens: true, + useCustomTokenList: poolList, tokenPerSeasonFilter: seasonFilter, stylesConfig: chartStyle }} diff --git a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx index 02b724111a..2100b881e9 100644 --- a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx +++ b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx @@ -18,6 +18,7 @@ import { SeriesPoint } from '@visx/shape/lib/types'; import { TickFormatter } from '@visx/axis'; import { localPoint } from '@visx/event'; import { BeanstalkPalette } from '~/components/App/muiTheme'; +import { ERC20Token } from '~/classes/Token'; // ------------------------------------------------------------------------- // --------------------------------- TYPES --------------------------------- @@ -139,7 +140,7 @@ export type BaseChartProps = { scale?: keyof typeof SCALES; pegLine?: boolean; isTWAP?: boolean; - useOldLpTokens?: boolean; + useCustomTokenList?: ERC20Token[]; tokenPerSeasonFilter?: { [key: string]: { from: number, to: number } }; horizontalLineNumber?: number; stylesConfig?: ChartMultiStyles; diff --git a/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx b/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx index 069e26f899..190704c504 100644 --- a/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx +++ b/projects/ui/src/components/Common/Charts/StackedAreaChart.tsx @@ -23,7 +23,7 @@ import ChartPropProvider, { import Row from '../Row'; import { defaultValueFormatter } from './SeasonPlot'; import useTokenMap from '~/hooks/chain/useTokenMap'; -import { SILO_WHITELIST, ALL_LP_POOLS } from '~/constants/tokens'; +import { SILO_WHITELIST } from '~/constants/tokens'; type Props = { width: number; @@ -33,7 +33,7 @@ type Props = { const Graph = (props: Props) => { const siloTokens = useTokenMap( - props.useOldLpTokens ? ALL_LP_POOLS : SILO_WHITELIST + props.useCustomTokenList || SILO_WHITELIST ); const { // Chart sizing diff --git a/projects/ui/src/components/Forecast/LiquidityOverTime.tsx b/projects/ui/src/components/Forecast/LiquidityOverTime.tsx index 812ca9c0aa..37a8989fd7 100644 --- a/projects/ui/src/components/Forecast/LiquidityOverTime.tsx +++ b/projects/ui/src/components/Forecast/LiquidityOverTime.tsx @@ -7,10 +7,9 @@ import useSeason from '~/hooks/beanstalk/useSeason'; import { FC } from '~/types'; import useSeasonsQuery, { SeasonRange } from '~/hooks/beanstalk/useSeasonsQuery'; import { BaseDataPoint, ChartMultiStyles } from '../Common/Charts/ChartPropProvider'; -import useSdk from '~/hooks/sdk'; import useTimeTabState from '~/hooks/app/useTimeTabState'; import BaseSeasonPlot, { QueryData } from '../Common/Charts/BaseSeasonPlot'; -import { BEAN_CRV3_V1_LP, BEAN_LUSD_LP } from '~/constants/tokens'; +import { BEAN_CRV3_LP, BEAN_CRV3_V1_LP, BEAN_ETH_UNIV2_LP, BEAN_ETH_WELL_LP, BEAN_LUSD_LP } from '~/constants/tokens'; import { BeanstalkPalette } from '../App/muiTheme'; /// Setup SeasonPlot @@ -27,8 +26,6 @@ const StatProps = { const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => { - // - const sdk = useSdk(); const timeTabParams = useTimeTabState(); const season = useSeason(); @@ -38,27 +35,31 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => { return dataPoint?.value || 0; }; + const BEAN_CRV3 = BEAN_CRV3_LP[1]; + const BEAN_ETH_WELL = BEAN_ETH_WELL_LP[1]; + const BEAN_ETH_UNIV2 = BEAN_ETH_UNIV2_LP[1]; const BEAN_LUSD_LP_V1 = BEAN_LUSD_LP[1]; const BEAN_CRV3_V1 = BEAN_CRV3_V1_LP[1]; const poolList = [ - sdk.pools.BEAN_CRV3, - sdk.pools.BEAN_ETH_WELL, - sdk.tokens.BEAN_ETH_UNIV2_LP, + BEAN_CRV3, + BEAN_ETH_WELL, + BEAN_ETH_UNIV2, BEAN_LUSD_LP_V1, BEAN_CRV3_V1, ]; + // Order must be the same as poolList! const chartStyle: ChartMultiStyles = { - [sdk.pools.BEAN_CRV3.address]: { + [BEAN_CRV3.address]: { stroke: BeanstalkPalette.theme.spring.blue, fillPrimary: BeanstalkPalette.theme.spring.lightBlue }, - [sdk.pools.BEAN_ETH_WELL.address]: { + [BEAN_ETH_WELL.address]: { stroke: BeanstalkPalette.theme.spring.beanstalkGreen, fillPrimary: BeanstalkPalette.theme.spring.washedGreen }, - [sdk.tokens.BEAN_ETH_UNIV2_LP.address]: { + [BEAN_ETH_UNIV2.address]: { stroke: BeanstalkPalette.theme.spring.chart.purple, fillPrimary: BeanstalkPalette.theme.spring.chart.purpleLight }, @@ -74,27 +75,27 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => { // 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_ETH_UNIV2.address]: { from: 0, to: 6074 }, [BEAN_LUSD_LP_V1.address]: { from: 5502, to: 6074 }, [BEAN_CRV3_V1.address]: { from: 3658, to: 6074 }, - [sdk.pools.BEAN_CRV3.address]: { from: 6074, to: Infinity }, - [sdk.pools.BEAN_ETH_WELL.address]: { from: 15241, to: Infinity }, + [BEAN_CRV3.address]: { from: 6074, to: Infinity }, + [BEAN_ETH_WELL.address]: { from: 15241, to: Infinity }, }; const queryConfigBeanCrv3 = useMemo(() => ({ - variables: { pool: sdk.pools.BEAN_CRV3.address }, + variables: { pool: BEAN_CRV3.address }, context: { subgraph: 'bean' } - }), [sdk.pools.BEAN_CRV3.address]); + }), [BEAN_CRV3.address]); const queryConfigBeanEthWell = useMemo(() => ({ - variables: { pool: sdk.pools.BEAN_ETH_WELL.address }, + variables: { pool: BEAN_ETH_WELL.address }, context: { subgraph: 'bean' } - }), [sdk.pools.BEAN_ETH_WELL.address]); + }), [BEAN_ETH_WELL.address]); const queryConfigBeanEthOld = useMemo(() => ({ - variables: { pool: sdk.tokens.BEAN_ETH_UNIV2_LP.address }, + variables: { pool: BEAN_ETH_UNIV2.address }, context: { subgraph: 'bean' } - }), [sdk.tokens.BEAN_ETH_UNIV2_LP.address]); + }), [BEAN_ETH_UNIV2.address]); const queryConfigBeanLusdOld = useMemo(() => ({ variables: { pool: BEAN_LUSD_LP_V1.address }, @@ -135,9 +136,9 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => { season: 0, date: 0, value: 0, - [sdk.pools.BEAN_CRV3.address]: 0, - [sdk.pools.BEAN_ETH_WELL.address]: 0, - [sdk.tokens.BEAN_ETH_UNIV2_LP.address]: 0, + [BEAN_CRV3.address]: 0, + [BEAN_ETH_WELL.address]: 0, + [BEAN_ETH_UNIV2.address]: 0, [BEAN_LUSD_LP_V1.address]: 0, [BEAN_CRV3_V1.address]: 0, }; @@ -176,7 +177,7 @@ const LiquidityOverTime: FC<{} & CardProps> = ({ sx }) => { ChartProps={{ getDisplayValue: getStatValue, tooltip: true, - useOldLpTokens: true, + useCustomTokenList: poolList, tokenPerSeasonFilter: seasonFilter, stylesConfig: chartStyle }} diff --git a/projects/ui/src/constants/tokens.ts b/projects/ui/src/constants/tokens.ts index dd7da1cc22..9a16516245 100644 --- a/projects/ui/src/constants/tokens.ts +++ b/projects/ui/src/constants/tokens.ts @@ -391,14 +391,6 @@ export const SILO_WHITELIST: ChainConstant[] = [ UNRIPE_BEAN_WETH, ]; -export const ALL_LP_POOLS: ChainConstant[] = [ - BEAN_CRV3_LP, - BEAN_ETH_WELL_LP, - BEAN_LUSD_LP, - BEAN_ETH_UNIV2_LP, - BEAN_CRV3_V1_LP -] - // All supported ERC20 tokens. export const ERC20_TOKENS: ChainConstant[] = [ // Whitelisted Silo tokens