feat: handle chart volume data (#309)

* feat: handle chart volume data

* fix: ts error

src/modules/explorer/index.ts

@@ -16,6 +16,7 @@ export {
   exponentialToNumber,
   fetchFloatBalances,
   fetchVolumeInfo,
+  parseVolumeInfo,
   fetch1wksRewards,
   getBorderColor,
   getDiffDays,

src/modules/explorer/utils/index.ts

@@ -22,6 +22,7 @@ export {
 export {
   fetchFloatBalances,
   fetchVolumeInfo,
+  parseVolumeInfo,
   fetch1wksRewards,
   getUsdPrice,
   fetchVwap,

src/modules/explorer/utils/network/index.tsx

@@ -1,4 +1,5 @@
 import { buildContext, SkybridgeBridge } from '@swingby-protocol/sdk';
+import { DateTime } from 'luxon';
 
 import { CoinSymbol } from '../../../coins';
 import { getShortDate, sumArray } from '../../../common';
@@ -11,6 +12,7 @@ import {
 import { fetch, fetcher } from '../../../fetch';
 import { IReward } from '../../../metanodes';
 import { IChartDate, IFloat, IFloatAmount, IFloatBalances } from '../../index';
+import { TransactionsConnectionEdges } from '../../../../generated/graphql';
 
 export const getFixedBaseEndpoint = (bridge: SkybridgeBridge) => {
   switch (bridge) {
@@ -351,3 +353,71 @@ export const fetch1wksRewards = async (bridge: SkybridgeBridge): Promise<number>
     return 0;
   }
 };
+
+export const parseVolumeInfo = async (
+  txEdges: Array<TransactionsConnectionEdges>,
+  bridge: SkybridgeBridge,
+  usdBtc: number,
+): Promise<{
+  volume1wksWBTC_Skypool: number;
+  volume1wksBTC: number;
+  volumes: IChartDate[] | null;
+  volumes1mWBTC_Skypool: number;
+  volumes1mBTC: number;
+  volumes1m: IChartDate[] | null;
+}> => {
+  const skypoolNetwork24hrSwaps = Array(30).fill(0);
+  const skypoolNetwork24hrSwapsVolume = Array(30).fill(0);
+
+  const now = DateTime.local().startOf('day');
+  const oneMonthAgo = now.minus({ days: 29 }); // only 30 items in array
+
+  txEdges.forEach((edge) => {
+    const at = DateTime.fromISO(edge.node.at);
+
+    if (at >= oneMonthAgo) {
+      const diffDay = Math.floor(now.diff(at.startOf('day'), 'days').days);
+      skypoolNetwork24hrSwaps[diffDay]++;
+      skypoolNetwork24hrSwapsVolume[diffDay] += parseFloat(edge.node.depositAmount);
+    }
+  });
+
+  const volume1wksWBTC_Skypool: number = sumArray(skypoolNetwork24hrSwapsVolume.slice(0, 7));
+  const volume1wksBTC: number = getVolumesBTC({
+    bridge,
+    volumesWBTC_Skypool: volume1wksWBTC_Skypool,
+  });
+  const volumes: IChartDate[] = getVolumes({
+    bridge,
+    usdBtc,
+    swapsCount: skypoolNetwork24hrSwaps,
+    swapsVolume: skypoolNetwork24hrSwapsVolume,
+    volumeStep: 'day',
+  })
+    .slice(0, 7)
+    .reverse();
+
+  const volumes1mWBTC_Skypool: number = sumArray(skypoolNetwork24hrSwapsVolume.slice(0, 30));
+  const volumes1mBTC: number = getVolumesBTC({
+    bridge,
+    volumesWBTC_Skypool: volumes1mWBTC_Skypool,
+  });
+  const volumes1m: IChartDate[] = getVolumes({
+    bridge,
+    usdBtc,
+    swapsCount: skypoolNetwork24hrSwaps,
+    swapsVolume: skypoolNetwork24hrSwapsVolume,
+    volumeStep: 'day',
+  })
+    .slice(0, 30)
+    .reverse();
+
+  return {
+    volume1wksWBTC_Skypool,
+    volume1wksBTC,
+    volumes,
+    volumes1mWBTC_Skypool,
+    volumes1mBTC,
+    volumes1m,
+  };
+};

src/modules/hooks/useGetNetworkData/index.tsx

@@ -1,11 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { DateTime } from 'luxon';
 
-import { useToggleBridge } from '..';
+import { useToggleBridge, useLoadHistories } from '..';
 import { mode, NETWORK_INFO_FETCH_RATE, PATH } from '../../env';
-import { fetch1wksRewards, fetchFloatBalances, fetchVolumeInfo } from '../../explorer';
+import {
+  fetch1wksRewards,
+  fetchFloatBalances,
+  fetchVolumeInfo,
+  parseVolumeInfo,
+} from '../../explorer';
 import { getNodeQty } from '../../network-stats';
 import { toggleIsLoading, updateNetworkInfos, usdPricesSelector } from '../../store';
+import { TransactionsConnectionEdges } from '../../../generated/graphql';
 
 export const useGetNetworkData = () => {
   const dispatch = useDispatch();
@@ -16,29 +23,37 @@ export const useGetNetworkData = () => {
   // after the previous async handler completes
   const [refetchingState, setRefetchingState] = useState(0);
 
+  const { data: txData, loading: txLoading, fetchMoreQuery } = useLoadHistories();
+  const [fetchedEnoughTx, setFetchedEnoughTx] = useState(false);
+
   const fetcher = useCallback(async () => {
     dispatch(toggleIsLoading(true));
     try {
       const results = await Promise.all([
         fetchFloatBalances(usd.BTC, bridge),
-        fetchVolumeInfo(bridge, usd.BTC),
+        fetchVolumeInfo(bridge, usd.BTC), // use for year chart
+        parseVolumeInfo(
+          txData.transactions.edges as Array<TransactionsConnectionEdges>,
+          bridge,
+          usd.BTC,
+        ), // use for week / month chart
         fetch1wksRewards(bridge),
         getNodeQty({ bridge, mode }),
       ]);
 
       const data = results[0];
       const stats = {
-        volume1wksWBTC_Skypool: results[1].volume1wksWBTC_Skypool,
-        volume1wksBTC: results[1].volume1wksBTC,
-        volumes: results[1].volumes,
-        volumes1mWBTC_Skypool: results[1].volumes1mWBTC_Skypool,
-        volumes1mBTC: results[1].volumes1mBTC,
-        volumes1m: results[1].volumes1m,
+        volume1wksWBTC_Skypool: results[2].volume1wksWBTC_Skypool,
+        volume1wksBTC: results[2].volume1wksBTC,
+        volumes: results[2].volumes,
+        volumes1mWBTC_Skypool: results[2].volumes1mWBTC_Skypool,
+        volumes1mBTC: results[2].volumes1mBTC,
+        volumes1m: results[2].volumes1m,
         volumes1yWBTC_Skypool: results[1].volumes1yWBTC_Skypool,
         volumes1yBTC: results[1].volumes1yBTC,
         volumes1y: results[1].volumes1y,
-        rewards1wksUSD: results[2],
-        metanodes: results[3],
+        rewards1wksUSD: results[3],
+        metanodes: results[4],
       };
 
       const updateStates = () => {
@@ -53,12 +68,29 @@ export const useGetNetworkData = () => {
     } finally {
       dispatch(toggleIsLoading(false));
     }
-  }, [usd, dispatch, bridge]);
+  }, [usd, dispatch, bridge, txData, txLoading, fetchMoreQuery]);
+
+  useEffect(() => {
+    const now = DateTime.local().startOf('day');
+    const oneMonthAgo = now.minus({ days: 29 }); // only 30 items in array
+
+    const isFetchedEnoughTx = txData?.transactions.edges.some((edge) => {
+      const at = DateTime.fromISO(edge.node.at);
+      return at < oneMonthAgo;
+    });
+    if (isFetchedEnoughTx) {
+      setFetchedEnoughTx(true);
+    } else {
+      fetchMoreQuery();
+    }
+  }, [txData]);
 
   useEffect(() => {
+    if (!fetchedEnoughTx) return;
+
     (async () => {
       usd.BTC > 0 && (await fetcher());
       setTimeout(() => setRefetchingState(refetchingState + 1), NETWORK_INFO_FETCH_RATE);
     })();
-  }, [usd, fetcher, refetchingState]);
+  }, [usd, fetcher, refetchingState, fetchedEnoughTx]);
 };