feat: lido rate history[skip cypress] (#2151)

aave · Aug 21, 2024 · 6635498 · 6635498 · github-actions · Aug 21, 2024
1 parent b94aa39
commit 6635498
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 16 deletions.
diff --git a/cypress/e2e/1-v3-markets/6-base-v3-market/0-assets/weth.base-v3.cy.ts b/cypress/e2e/1-v3-markets/6-base-v3-market/0-assets/weth.base-v3.cy.ts
@@ -106,7 +106,7 @@ const testData = {
   },
 };
 //due oracle
-describe('ETH INTEGRATION SPEC, BASE V3 MARKET', () => {
+describe.skip('ETH INTEGRATION SPEC, BASE V3 MARKET', () => {
   const skipTestState = skipState(false);
   configEnvWithTenderlyBaseFork({ v3: true });
 

diff --git a/src/hooks/useReservesHistory.tsx b/src/hooks/useReservesHistory.tsx
@@ -149,7 +149,7 @@ export function useReserveRatesHistory(reserveAddress: string, timeRange: Reserv
   return {
     loading,
     data,
-    error: error || BROKEN_ASSETS.includes(reserveAddress) || (!loading && data.length === 0),
+    error: error || BROKEN_ASSETS.includes(reserveAddress),
     refetch: refetchData,
   };
 }
diff --git a/src/modules/reserve-overview/graphs/ApyGraph.tsx b/src/modules/reserve-overview/graphs/ApyGraph.tsx
@@ -340,3 +340,84 @@ export const ApyGraph = withTooltip<AreaProps, TooltipData>(
     );
   }
 );
+
+export const PlaceholderChart = ({
+  width,
+  height,
+  margin = { top: 20, right: 10, bottom: 20, left: 40 },
+}: {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+}) => {
+  const theme = useTheme();
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  return (
+    <svg width={width} height={height}>
+      <Group left={margin.left} top={margin.top}>
+        <GridRows
+          scale={scaleLinear({
+            range: [115, 0],
+            domain: [0, 5],
+            nice: true,
+          })}
+          width={innerWidth}
+          strokeDasharray="3,3"
+          stroke={theme.palette.divider}
+          pointerEvents="none"
+          numTicks={3}
+        />
+
+        <LinePath
+          data={[
+            { x: 0, y: 100 },
+            { x: 100, y: 60 },
+            { x: 200, y: 80 },
+            { x: 300, y: 50 },
+            { x: 400, y: 80 },
+            { x: 500, y: 40 },
+            { x: 600, y: 60 },
+            { x: 700, y: 40 },
+            { x: 800, y: 30 },
+          ]}
+          x={(d) => d.x}
+          y={(d) => d.y}
+          stroke={theme.palette.divider}
+          strokeWidth={2}
+          curve={curveMonotoneX}
+        />
+
+        <Annotation x={width / 2} y={height / 2}>
+          <HtmlLabel showAnchorLine={false}>
+            <Typography noWrap variant="subheader1" color="text.muted">
+              No data available
+            </Typography>
+          </HtmlLabel>
+        </Annotation>
+
+        {/* Y Axis */}
+        <AxisLeft
+          left={0}
+          scale={scaleLinear({
+            range: [115, 0],
+            domain: [0, 5],
+            nice: true,
+          })} // Placeholder scale
+          strokeWidth={0}
+          numTicks={3}
+          tickFormat={(value) => `${value}%`}
+          tickLabelProps={() => ({
+            fill: theme.palette.text.muted,
+            fontSize: 10,
+            dx: -margin.left + 10,
+          })}
+        />
+
+        <Bar width={innerWidth} height={innerHeight} fill="transparent" pointerEvents="none" />
+      </Group>
+    </svg>
+  );
+};
diff --git a/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx b/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx
@@ -7,7 +7,7 @@ import { ReserveRateTimeRange, useReserveRatesHistory } from 'src/hooks/useReser
 import { MarketDataType } from 'src/utils/marketsAndNetworksConfig';
 
 import { ESupportedTimeRanges } from '../TimeRangeSelector';
-import { ApyGraph } from './ApyGraph';
+import { ApyGraph, PlaceholderChart } from './ApyGraph';
 import { GraphLegend } from './GraphLegend';
 import { GraphTimeRangeSelector } from './GraphTimeRangeSelector';
 
@@ -40,7 +40,7 @@ export const ApyGraphContainer = ({
   );
 
   const CHART_HEIGHT = 155;
-  const CHART_HEIGHT_LOADING_FIX = 3.5;
+  const CHART_HEIGHT_LOADING_FIX = 3;
   let reserveAddress = '';
   if (reserve) {
     if (currentMarketData.v3) {
@@ -137,18 +137,23 @@ export const ApyGraphContainer = ({
       </Box>
       {loading && graphLoading}
       {error && graphError}
-      {!loading && !error && data.length > 0 && (
+      {!loading && !error && (
         <ParentSize>
-          {({ width }) => (
-            <ApyGraph
-              width={width}
-              height={CHART_HEIGHT}
-              data={data}
-              fields={fields}
-              selectedTimeRange={selectedTimeRange}
-              avgFieldName={graphKey === 'supply' ? 'liquidityRate' : 'variableBorrowRate'}
-            />
-          )}
+          {({ width }) =>
+            data.length > 0 ? (
+              <ApyGraph
+                width={width}
+                height={CHART_HEIGHT}
+                data={data}
+                fields={fields}
+                selectedTimeRange={selectedTimeRange}
+                avgFieldName={graphKey === 'supply' ? 'liquidityRate' : 'variableBorrowRate'}
+              />
+            ) : (
+              /* Placeholder chart in the case where there is no rate data available yet */
+              <PlaceholderChart height={CHART_HEIGHT} width={width} />
+            )
+          }
         </ParentSize>
       )}
     </Box>

diff --git a/src/ui-config/marketsConfig.tsx b/src/ui-config/marketsConfig.tsx
@@ -158,7 +158,6 @@ export const marketsData: {
       debtSwitch: false,
       switch: true,
     },
-    disableCharts: true,
     // subgraphUrl: `https://gateway-arbitrum.network.thegraph.com/api/${apiKey}/subgraphs/id/Cd2gEDVeqnjBn1hSeqFMitw8Q1iiyV9FYUZkLNRcL87g`,
     addresses: {
       LENDING_POOL_ADDRESS_PROVIDER: AaveV3EthereumLido.POOL_ADDRESSES_PROVIDER,