Spacebean/bs3/UI passthrough (#1139)

BeanstalkFarms · Oct 9, 2024 · e81f559 · e81f559
2 parents 2cd5d32 + f3e7e85
commit e81f559
Show file tree

Hide file tree

Showing 11 changed files with 506 additions and 323 deletions.
diff --git a/projects/dex-ui/src/components/App/ForceSupportedChainId.tsx b/projects/dex-ui/src/components/App/ForceSupportedChainId.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { ConnectKitButton } from "connectkit";
+import { ConnectKitButton, useModal } from "connectkit";
 import { useLocation, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
@@ -75,6 +75,8 @@ export const ForceSupportedChainId = () => {
   const chainId = useSdkChainId();
   const chainIdErr = useChainErr();
 
+  const { openSwitchNetworks, setOpen } = useModal();
+
   const handleStayOnCurrentNetwork = () => {
     navigate(getNavigateUrl(chainId, location, false));
   };
@@ -89,6 +91,7 @@ export const ForceSupportedChainId = () => {
     if (chainId !== urlChainId) return;
     if (navLink) {
       const url = navLink;
+      setOpen(false);
       setNavLink(null);
       navigate(url);
     }
@@ -121,7 +124,7 @@ export const ForceSupportedChainId = () => {
         <Modal.Content noTitle>
           <ModalContentWrapper $fullWidth $alignItems="center">
             <Flex $gap={2}>
-              <Flex $direction="row" $gap={1} $alignItems="center">
+              <Flex $direction="row" $gap={0.5} $alignItems="center">
                 <Logo width={24} height={24} />
                 <Brand>BASIN</Brand>
               </Flex>
@@ -147,13 +150,13 @@ export const ForceSupportedChainId = () => {
               </Flex>
               <Flex $gap={1}>
                 <ConnectKitButton.Custom>
-                  {({ show }) => {
+                  {() => {
                     return (
                       <ButtonPrimary
                         onClick={(e) => {
                           e.preventDefault();
+                          openSwitchNetworks();
                           handleSetSwitchNetworkUrl();
-                          show?.();
                         }}
                       >
                         Switch Network
@@ -176,8 +179,8 @@ export const ForceSupportedChainId = () => {
 };
 
 const ModalContentWrapper = styled(Flex)`
-  max-width: 310px;
-  min-width: 310px;
+  max-width: 290px;
+  min-width: 290px;
   width: 100%;
 
   ${theme.media.query.sm.only} {
@@ -190,5 +193,5 @@ const ModalContentWrapper = styled(Flex)`
 const Brand = styled.div`
   text-transform: uppercase;
   ${LinksNav};
-  margin-bottom: -4px;
+  margin-bottom: -6px;
 `;
diff --git a/projects/dex-ui/src/state/atoms/chain.atoms.ts b/projects/dex-ui/src/state/atoms/chain.atoms.ts
@@ -2,8 +2,7 @@ import { atom, useAtomValue, useSetAtom } from "jotai";
 
 export enum ChainIdError {
   INCORRECT = "INCORRECT",
-  INVALID = "UNKNOWN",
-  WELL_WRONG_NETWORK = "WELL_WRONG_NETWORK"
+  INVALID = "UNKNOWN"
 }
 
 const chainErrAtomn = atom<ChainIdError | null>(null);

diff --git a/projects/dex-ui/src/wells/useBasinStats.ts b/projects/dex-ui/src/wells/useBasinStats.ts
@@ -1,15 +1,19 @@
+import { ChainId } from "@beanstalk/sdk-core";
+
 import { BasinAPIResponse } from "src/types";
 import { Log } from "src/utils/logger";
 import { useChainScopedQuery } from "src/utils/query/useChainScopedQuery";
 
 const useBasinStats = () => {
   return useChainScopedQuery({
     queryKey: ["wells", "basinStats"],
-
-    queryFn: async () => {
+    queryFn: async ({ queryKey }) => {
+      const scopedChainId = queryKey[0];
+      const id = Array.isArray(scopedChainId) ? scopedChainId[0] : scopedChainId;
+      const param = id === ChainId.ETH_MAINNET ? "eth" : `arb`;
       let output: BasinAPIResponse[] = [];
       try {
-        const apiQuery = await fetch("https://api.bean.money/basin/tickers", {
+        const apiQuery = await fetch(`https://api.bean.money/basin/tickers?chain=${param}`, {
           headers: { accept: "application/json" }
         });
 

diff --git a/projects/ui/src/components/Analytics/useChartSetupData.tsx b/projects/ui/src/components/Analytics/useChartSetupData.tsx
@@ -24,7 +24,17 @@ import {
 } from '~/generated/graphql';
 import useSdk from '~/hooks/sdk';
 import { formatUnits } from 'viem';
-import { BEAN_CRV3_V1_LP, BEAN_LUSD_LP } from '~/constants/tokens';
+import {
+  BEAN,
+  BEAN_CRV3_LP,
+  BEAN_CRV3_V1_LP,
+  BEAN_ETH_UNIV2_LP,
+  BEAN_ETH_WELL_LP,
+  BEAN_LUSD_LP,
+  BEAN_WSTETH_WELL_LP,
+  UNRIPE_BEAN,
+  UNRIPE_BEAN_WSTETH,
+} from '~/constants/tokens';
 import { DocumentNode } from 'graphql';
 import { OperationVariables, QueryOptions } from '@apollo/client';
 import { Typography } from '@mui/material';
@@ -125,19 +135,19 @@ export function useChartSetupData() {
     const stalk = sdk.tokens.STALK;
 
     const depositedTokensToChart = [
-      sdk.tokens.BEAN,
-      sdk.tokens.BEAN_CRV3_LP,
-      sdk.tokens.BEAN_ETH_WELL_LP,
-      sdk.tokens.BEAN_WSTETH_WELL_LP,
-      sdk.tokens.UNRIPE_BEAN,
-      sdk.tokens.UNRIPE_BEAN_WSTETH,
+      BEAN[1],
+      BEAN_CRV3_LP[1],
+      BEAN_ETH_WELL_LP[1],
+      BEAN_WSTETH_WELL_LP[1],
+      UNRIPE_BEAN[1],
+      UNRIPE_BEAN_WSTETH[1],
     ];
 
     const lpTokensToChart = [
-      sdk.tokens.BEAN_CRV3_LP,
-      sdk.tokens.BEAN_ETH_WELL_LP,
-      sdk.tokens.BEAN_WSTETH_WELL_LP,
-      sdk.tokens.BEAN_ETH_UNIV2_LP,
+      BEAN_CRV3_LP[1],
+      BEAN_ETH_WELL_LP[1],
+      BEAN_WSTETH_WELL_LP[1],
+      BEAN_ETH_UNIV2_LP[1],
       BEAN_LUSD_LP[1],
       BEAN_CRV3_V1_LP[1],
     ];
@@ -176,6 +186,7 @@ export function useChartSetupData() {
             season_gt: 6073,
             siloAsset: `${beanstalkAddress.toLowerCase()}-${token.address}`,
           },
+          context: { subgraph: 'beanstalk_eth' },
         },
         valueFormatter: (value: any) =>
           Number(formatUnits(value, token.decimals)),
@@ -223,7 +234,7 @@ export function useChartSetupData() {
         valueAxisType: 'usdLiquidity',
         queryConfig: {
           variables: { pool: token.address },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatUSD,
@@ -249,7 +260,7 @@ export function useChartSetupData() {
         valueAxisType: 'BEAN_price',
         queryConfig: {
           variables: { season_gte: 1 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatBeanPrice,
@@ -267,7 +278,7 @@ export function useChartSetupData() {
         documentEntity: 'seasons',
         valueAxisType: 'volume',
         queryConfig: {
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatUSD,
@@ -287,7 +298,7 @@ export function useChartSetupData() {
         valueAxisType: 'usdLiquidity',
         queryConfig: {
           variables: { season_gt: 1 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatUSD,
@@ -305,7 +316,7 @@ export function useChartSetupData() {
         valueAxisType: 'marketCap',
         document: SeasonalMarketCapDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatUSD,
         shortTickFormatter: tickFormatUSD,
@@ -321,7 +332,7 @@ export function useChartSetupData() {
         valueAxisType: 'BEAN_amount',
         document: SeasonalSupplyDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
         shortTickFormatter: tickFormatTruncated,
@@ -338,7 +349,7 @@ export function useChartSetupData() {
         document: SeasonalCrossesDocument,
         documentEntity: 'seasons',
         queryConfig: {
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatBeanAmount,
@@ -358,7 +369,7 @@ export function useChartSetupData() {
         documentEntity: 'seasons',
         queryConfig: {
           variables: { season_gte: 1 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
@@ -378,7 +389,7 @@ export function useChartSetupData() {
         documentEntity: 'seasons',
         queryConfig: {
           variables: { season_gte: 1 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
@@ -398,7 +409,7 @@ export function useChartSetupData() {
         documentEntity: 'seasons',
         queryConfig: {
           variables: { season_gte: 1 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatBeanPrice,
@@ -439,7 +450,7 @@ export function useChartSetupData() {
         documentEntity: 'seasons',
         queryConfig: {
           variables: { season_gt: 0 },
-          context: { subgraph: 'bean' },
+          context: { subgraph: 'bean_eth' },
         },
         valueFormatter: (v: string) => Number(v) * 100,
         tickFormatter: tickFormatPercentage,
@@ -463,6 +474,7 @@ export function useChartSetupData() {
           variables: {
             season_gt: 6073,
           },
+          context: { subgraph: 'beanstalk_eth' },
         },
         valueFormatter: (value: any) =>
           Number(formatUnits(value, stalk.decimals)),
@@ -485,7 +497,7 @@ export function useChartSetupData() {
         valueAxisType: 'RRoR',
         document: SeasonalRRoRDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: (v: string) => Number(v) * 100,
         tickFormatter: tickFormatPercentage,
         shortTickFormatter: tickFormatPercentage,
@@ -502,7 +514,7 @@ export function useChartSetupData() {
         valueAxisType: 'maxTemp',
         document: SeasonalTemperatureDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: tickFormatPercentage,
         shortTickFormatter: tickFormatPercentage,
@@ -518,7 +530,7 @@ export function useChartSetupData() {
         valueAxisType: 'PODS_amount',
         document: SeasonalPodsDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
         shortTickFormatter: tickFormatTruncated,
@@ -535,7 +547,7 @@ export function useChartSetupData() {
         valueAxisType: 'podRate',
         document: SeasonalPodRateDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: (v: string) => Number(v) * 100,
         tickFormatter: tickFormatPercentage,
         shortTickFormatter: tickFormatPercentage,
@@ -551,7 +563,7 @@ export function useChartSetupData() {
         valueAxisType: 'BEAN_amount',
         document: SeasonalSownDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
         shortTickFormatter: tickFormatTruncated,
@@ -567,7 +579,7 @@ export function useChartSetupData() {
         valueAxisType: 'PODS_amount',
         document: SeasonalHarvestedPodsDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: valueFormatBeanAmount,
         tickFormatter: tickFormatBeanAmount,
         shortTickFormatter: tickFormatTruncated,
@@ -583,7 +595,7 @@ export function useChartSetupData() {
         valueAxisType: 'totalSowers',
         document: SeasonalTotalSowersDocument,
         documentEntity: 'seasons',
-        queryConfig: undefined,
+        queryConfig: { context: { subgraph: 'beanstalk_eth' } },
         valueFormatter: (v: string) => Number(v),
         tickFormatter: (v: number) => v.toFixed(0).toString(),
         shortTickFormatter: (v: number) => v.toFixed(0).toString(),

diff --git a/projects/ui/src/components/Common/Charts/SeasonPlot.tsx b/projects/ui/src/components/Common/Charts/SeasonPlot.tsx
@@ -64,6 +64,7 @@ type SeasonPlotFinalProps<T extends MinimumViableSnapshotQuery> =
     StatProps: Omit<StatProps, 'amount' | 'subtitle'>;
     LineChartProps?: Pick<BaseChartProps, 'curve' | 'isTWAP' | 'pegLine'>;
     statsRowFullWidth?: boolean;
+    fetchType?: 'l1-only' | 'l2-only' | 'both';
   };
 
 /**
@@ -83,6 +84,7 @@ function SeasonPlot<T extends MinimumViableSnapshotQuery>({
   queryConfig,
   stackedArea,
   statsRowFullWidth,
+  fetchType = 'both',
 }: SeasonPlotFinalProps<T>) {
   const timeTabParams = useTimeTabState();
   const getDisplayValue = useCallback((v?: BaseDataPoint[]) => {
@@ -94,7 +96,8 @@ function SeasonPlot<T extends MinimumViableSnapshotQuery>({
   const seasonsQuery = useSeasonsQuery<T>(
     document,
     timeTabParams[0][1],
-    queryConfig
+    queryConfig,
+    fetchType
   );
 
   const queryParams = useMemo(