Basin UI - Chart updates (#622)

BeanstalkFarms · Aug 31, 2023 · 2d835bd · 2d835bd
2 parents 7e90103 + cee95da
commit 2d835bd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/projects/dex-ui/src/components/Well/Activity/eventRender.tsx b/projects/dex-ui/src/components/Well/Activity/eventRender.tsx
@@ -36,7 +36,7 @@ export const renderEvent = (event: WellEvent, well: Well, prices: (TokenValue |
       event = event as ShiftEvent;
       action = "Shift";
       valueUSD = `$${event.toAmount.mul(tokenPrices[event.toToken.symbol] || 0).toHuman("short")}`;
-      description = `Swaped to ${event.toAmount.toHuman("short")} ${event.toToken.symbol}`;
+      description = `Swapped to ${event.toAmount.toHuman("short")} ${event.toToken.symbol}`;
 
       break;
     case EVENT_TYPE.ADD_LIQUIDITY:

diff --git a/projects/dex-ui/src/components/Well/Chart/ChartSection.tsx b/projects/dex-ui/src/components/Well/Chart/ChartSection.tsx
@@ -19,8 +19,8 @@ function timeToLocal(originalTime: number) {
 export const ChartSection: FC<{ well: Well }> = ({ well }) => {
   const [tab, setTab] = useState(0);
   const [showDropdown, setShowDropdown] = useState(false);
-  const [timePeriod, setTimePeriod] = useState("all");
-  const [dropdownButtonText, setDropdownButtonText] = useState("ALL");
+  const [timePeriod, setTimePeriod] = useState("week");
+  const [dropdownButtonText, setDropdownButtonText] = useState("1 WEEK");
 
   const { data: chartData, refetch, error, isLoading } = useWellChartData(well, timePeriod);
 

diff --git a/projects/dex-ui/src/queries/GetWellChartData.graphql b/projects/dex-ui/src/queries/GetWellChartData.graphql
@@ -1,6 +1,6 @@
-query GetWellChartData($id: ID!, $lastUpdateTimestamp_gte: BigInt!) {
+query GetWellChartData($id: ID!, $lastUpdateTimestamp_gte: BigInt!, $resultsToSkip: Int!) {
   well(id: $id) {
-    hourlySnapshots(orderBy: lastUpdateTimestamp, orderDirection: asc, where: { lastUpdateTimestamp_gte: $lastUpdateTimestamp_gte }) {
+    hourlySnapshots(first: 1000, skip: $resultsToSkip, orderBy: lastUpdateTimestamp, orderDirection: asc, where: { lastUpdateTimestamp_gte: $lastUpdateTimestamp_gte }) {
       lastUpdateTimestamp
       totalLiquidityUSD
       deltaVolumeUSD

diff --git a/projects/dex-ui/src/wells/chartDataLoader.ts b/projects/dex-ui/src/wells/chartDataLoader.ts
@@ -13,15 +13,37 @@ const loadFromGraph = async (sdk: BeanstalkSDK, well: Well, timePeriod: string)
   const HISTORY_DAYS_AGO_BLOCK_TIMESTAMP =
     HISTORY_DAYS === 0 ? 0 : Math.floor(new Date(Date.now() - HISTORY_DAYS * 24 * 60 * 60 * 1000).getTime() / 1000);
 
-  const data = await fetchFromSubgraphRequest(GetWellChartDataDocument, {
-    id: well.address,
-    lastUpdateTimestamp_gte: HISTORY_DAYS_AGO_BLOCK_TIMESTAMP
-  });
+  let results: any[] = [];
+  let goToNextPage: boolean = false;
+  let nextPage: number = 0;
+  let skipAmount: number = 0;
 
-  const results = await data();
+  do {
+    const data = fetchFromSubgraphRequest(GetWellChartDataDocument, {
+      id: well.address,
+      lastUpdateTimestamp_gte: HISTORY_DAYS_AGO_BLOCK_TIMESTAMP,
+      resultsToSkip: skipAmount
+    });
 
-  if (!results.well) return [];
-  return results.well.hourlySnapshots;
+    const fetchedData = await data();
+
+    if (fetchedData.well) {
+      results = results.concat(fetchedData.well.hourlySnapshots)
+      if (fetchedData.well.hourlySnapshots.length === 1000) {
+        goToNextPage = true;
+        nextPage++;
+        skipAmount = nextPage * 1000;
+      } else {
+        goToNextPage = false;
+      }
+    } else {
+      goToNextPage = false;
+    }
+  }
+
+  while (goToNextPage === true);
+
+  return results;
 };
 
 export const loadChartData = async (sdk: BeanstalkSDK, well: Well, timePeriod: string): Promise<any> => {