feat: update chart data to take latest 7 days

CoreumFoundation · May 30, 2024 · b19435a · b19435a
1 parent 9dd6676
commit b19435a
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 68 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-114",
+  "version": "2.19.3-115",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/apps/web-coreum/src/chain.json b/apps/web-coreum/src/chain.json
@@ -270,7 +270,7 @@
       "endpoints": {
         "graphql": "https://hasura.testnet-1.coreum.dev/v1/graphql",
         "graphqlWebsocket": "wss://hasura.testnet-1.coreum.dev/v1/graphql",
-        "publicRpcWebsocket": "wss://full-node-pluto.testnet-1.coreum.dev:26657/websocket"
+        "publicRpcWebsocket": "wss://full-node-eris.testnet-1.coreum.dev:26657/websocket"
       },
       "marketing": {
         "matomoURL": "https://analytics.bigdipper.live",

diff --git a/apps/web-coreum/src/graphql/types/general_types.ts b/apps/web-coreum/src/graphql/types/general_types.ts
@@ -11806,6 +11806,7 @@ export type TokenPriceListenerSubscription = { tokenPrice: Array<{ __typename?:
 export type TokenPriceHistoryQueryVariables = Exact<{
   denom?: InputMaybe<Scalars['String']>;
   limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
 }>;
 
 
@@ -13073,17 +13074,18 @@ export function useTokenPriceListenerSubscription(baseOptions?: Apollo.Subscript
 export type TokenPriceListenerSubscriptionHookResult = ReturnType<typeof useTokenPriceListenerSubscription>;
 export type TokenPriceListenerSubscriptionResult = Apollo.SubscriptionResult<TokenPriceListenerSubscription>;
 export const TokenPriceHistoryDocument = gql`
-    query TokenPriceHistory($denom: String, $limit: Int = 100) {
-  tokenPrice: token_price_history(
-    where: {unit_name: {_eq: $denom}}
-    limit: $limit
-    order_by: {timestamp: desc}
-  ) {
-    price
-    timestamp
+  query TokenPriceHistory($denom: String, $limit: Int = 100, $offset: Int = 0) {
+    tokenPrice: token_price_history(
+      where: {unit_name: {_eq: $denom}}
+      limit: $limit
+      order_by: {timestamp: desc}
+      offset: $offset
+    ) {
+      price
+      timestamp
+    }
   }
-}
-    `;
+`;
 
 /**
  * __useTokenPriceHistoryQuery__

diff --git a/packages/ui/src/graphql/types/general_types.ts b/packages/ui/src/graphql/types/general_types.ts
@@ -11808,6 +11808,7 @@ export type TokenPriceListenerSubscription = { tokenPrice: Array<{ __typename?:
 export type TokenPriceHistoryQueryVariables = Exact<{
   denom?: InputMaybe<Scalars['String']>;
   limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
 }>;
 
 
@@ -13065,17 +13066,18 @@ export function useTokenPriceListenerSubscription(baseOptions?: Apollo.Subscript
 export type TokenPriceListenerSubscriptionHookResult = ReturnType<typeof useTokenPriceListenerSubscription>;
 export type TokenPriceListenerSubscriptionResult = Apollo.SubscriptionResult<TokenPriceListenerSubscription>;
 export const TokenPriceHistoryDocument = gql`
-    query TokenPriceHistory($denom: String, $limit: Int = 100) {
-  tokenPrice: token_price_history(
-    where: {unit_name: {_eq: $denom}}
-    limit: $limit
-    order_by: {timestamp: desc}
-  ) {
-    price
-    timestamp
+  query TokenPriceHistory($denom: String, $limit: Int = 100, $offset: Int = 0) {
+    tokenPrice: token_price_history(
+      where: {unit_name: {_eq: $denom}}
+      limit: $limit
+      order_by: {timestamp: desc}
+      offset: $offset
+    ) {
+      price
+      timestamp
+    }
   }
-}
-    `;
+`;
 
 /**
  * __useTokenPriceHistoryQuery__

diff --git a/packages/ui/src/screens/home/components/hero/hooks.ts b/packages/ui/src/screens/home/components/hero/hooks.ts
@@ -1,16 +1,20 @@
 import * as R from 'ramda';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import chainConfig from '@/chainConfig';
 import { useTokenPriceHistoryQuery } from '@/graphql/types/general_types';
 import type { HeroState } from '@/screens/home/components/hero/types';
 
 const { primaryTokenUnit, tokenUnits } = chainConfig();
 
 export const useHero = () => {
+  const itemsToLoad = 96 * 7; // Count of ticks for the last 7 days. This value is approximate
+
   const [state, setState] = useState<HeroState>({
     loading: true,
     exists: true,
     tokenPriceHistory: [],
+    isAllDataLoaded: false,
+    dataLoading: true,
   });
 
   const handleSetState = useCallback((stateChange: (prevState: HeroState) => HeroState) => {
@@ -20,33 +24,79 @@ export const useHero = () => {
     });
   }, []);
 
-  useTokenPriceHistoryQuery({
+  const tokenPriceHistoryQuery = useTokenPriceHistoryQuery({
     variables: {
       limit: 100,
       denom: tokenUnits?.[primaryTokenUnit]?.display,
     },
     onCompleted: (data) => {
-      handleSetState((prevState) => {
-        const newState = {
-          ...prevState,
-          loading: false,
-          tokenPriceHistory:
-            data.tokenPrice.length === 100
-              ? [...data.tokenPrice].reverse().map((x) => ({
-                  time: x.timestamp,
-                  value: x.price,
-                }))
-              : prevState.tokenPriceHistory,
-        };
-        return R.equals(prevState, newState) ? prevState : newState;
-      });
+      handleSetState((prevState) => ({
+        ...prevState,
+        dataLoading: itemsToLoad <= data.tokenPrice.length,
+        tokenPriceHistory: data.tokenPrice.map((x) => ({ price: x.price, timestamp: x.timestamp })),
+      }));
     },
     onError: () => {
-      handleSetState((prevState) => ({ ...prevState, loading: false }));
+      handleSetState((prevState) => ({ ...prevState, dataLoading: false }));
     },
   });
 
+  const loadMoreData = useCallback(async () => {
+    const limit =
+      itemsToLoad - state.tokenPriceHistory.length > 100
+        ? 100
+        : itemsToLoad - state.tokenPriceHistory.length;
+
+    await tokenPriceHistoryQuery
+      .fetchMore({
+        variables: {
+          offset: state.tokenPriceHistory.length,
+          limit,
+        },
+      })
+      .then(({ data }) => {
+        handleSetState((prevState) => ({
+          ...prevState,
+          dataLoading: false,
+          tokenPriceHistory: prevState.tokenPriceHistory.concat(
+            data.tokenPrice.map((x) => ({ price: x.price, timestamp: x.timestamp }))
+          ),
+        }));
+      });
+
+    if (limit !== 100) {
+      handleSetState((prevState) => ({
+        ...prevState,
+        loading: false,
+        isAllDataLoaded: true,
+      }));
+    }
+  }, [handleSetState, itemsToLoad, state.tokenPriceHistory.length, tokenPriceHistoryQuery]);
+
+  useEffect(() => {
+    if (!state.isAllDataLoaded && !state.dataLoading) {
+      handleSetState((prevState) => ({ ...prevState, dataLoading: true }));
+      loadMoreData();
+    }
+  }, [handleSetState, loadMoreData, state.dataLoading, state.isAllDataLoaded, state.loading]);
+
+  const formattedData = useMemo(
+    () =>
+      state.tokenPriceHistory
+        .sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))
+        .map((x) => {
+          const time = new Date(x.timestamp);
+
+          return {
+            value: x.price as number,
+            time: Math.floor(time.getTime() / 1000),
+          };
+        }),
+    [state.tokenPriceHistory]
+  );
+
   return {
     state,
+    tokenPriceHistory: formattedData,
   };
 };
diff --git a/packages/ui/src/screens/home/components/hero/types.ts b/packages/ui/src/screens/home/components/hero/types.ts
@@ -6,5 +6,7 @@ export interface TokenPriceType {
 export interface HeroState {
   loading: boolean;
   exists: boolean;
-  tokenPriceHistory: TokenPriceType[];
+  tokenPriceHistory: any[];
+  isAllDataLoaded: boolean;
+  dataLoading: boolean;
 }
diff --git a/packages/ui/src/screens/home/components/main_info/index.tsx b/packages/ui/src/screens/home/components/main_info/index.tsx
@@ -10,7 +10,6 @@ import Big from 'big.js';
 import { formatNumber } from '@/utils/format_token';
 import useStyles from './styles';
 import { useHero } from '../hero/hooks';
-import { TokenPriceType } from '../hero/types';
 
 const PriceChart = dynamic(() => import('./price_chart'), { ssr: false });
 
@@ -20,7 +19,7 @@ const MainInfo: React.FC<{
   const { classes, cx } = useStyles();
   const { isMobile } = useScreenSize();
   const marketState = useRecoilValue(readMarket);
-  const { state } = useHero();
+  const { tokenPriceHistory } = useHero();
 
   const priceChange = useMemo(() => {
     const currentDate = new Date();
@@ -29,14 +28,12 @@ const MainInfo: React.FC<{
 
     const yesterdayTimestamp = yesterday.getTime();
 
-    const priceChangeHistory: TokenPriceType[] = state.tokenPriceHistory.filter(
-      (priceValue: TokenPriceType) => {
-        const time = new Date(priceValue.time);
-        const priceChangeTimestamp = time.getTime();
+    const priceChangeHistory: any[] = tokenPriceHistory.filter((priceValue: any) => {
+      const time = new Date(priceValue.time);
+      const priceChangeTimestamp = time.getTime();
 
-        return yesterdayTimestamp > priceChangeTimestamp;
-      }
-    );
+      return yesterdayTimestamp > priceChangeTimestamp;
+    });
 
     if (priceChangeHistory.length && marketState.price) {
       const prevValue = priceChangeHistory[priceChangeHistory.length - 1].value;
@@ -49,7 +46,7 @@ const MainInfo: React.FC<{
     }
 
     return 0;
-  }, [state.tokenPriceHistory, marketState.price]);
+  }, [tokenPriceHistory, marketState.price]);
 
   const renderPriceChange = React.useMemo(() => {
     const priceChange24h = `${formatNumber(Big(priceChange)?.toPrecision(), 2)}%`;

diff --git a/packages/ui/src/screens/home/components/main_info/price_chart.tsx b/packages/ui/src/screens/home/components/main_info/price_chart.tsx
@@ -11,7 +11,7 @@ const PriceChart: React.FC = () => {
   const { classes } = useStyles();
   const chartRef = useRef<IChartApi>();
   const theme = useRecoilValue(readTheme);
-  const { state } = useHero();
+  const { state, tokenPriceHistory } = useHero();
   const marketState = useRecoilValue(readMarket);
 
   const currentTime = useMemo(() => {
@@ -20,21 +20,8 @@ const PriceChart: React.FC = () => {
     return Math.floor(time.getTime() / 1000);
   }, []);
 
-  const formattedData = useMemo(
-    () =>
-      state.tokenPriceHistory.map((item: any) => {
-        const time = new Date(item.time);
-
-        return {
-          value: item.value as number,
-          time: Math.floor(time.getTime() / 1000),
-        };
-      }),
-    [state.tokenPriceHistory]
-  );
-
   const finalChartData = useMemo(() => {
-    const newArray = formattedData;
+    const newArray = tokenPriceHistory;
 
     if (marketState.price) {
       newArray.push({
@@ -46,10 +33,10 @@ const PriceChart: React.FC = () => {
     }
 
     return newArray;
-  }, [formattedData, currentTime, marketState]);
+  }, [tokenPriceHistory, currentTime, marketState]);
 
   useEffect(() => {
-    if (typeof window !== 'undefined' && !chartRef.current && finalChartData.length > 1) {
+    if (typeof window !== 'undefined' && !chartRef.current && !state.loading) {
       const chartOptions = {
         layout: {
           textColor: theme === 'dark' ? 'white' : 'black',

diff --git a/packages/ui/src/screens/transactions/hooks.ts b/packages/ui/src/screens/transactions/hooks.ts
@@ -47,7 +47,7 @@ const RPC_URL =
   chainType.toLowerCase() === 'mainnet'
     ? 'https://full-node-uranium.mainnet-1.coreum.dev:26657'
     : chainType.toLowerCase() === 'testnet'
-      ? 'https://full-node-pluto.testnet-1.coreum.dev:26657'
+      ? 'https://full-node-eris.testnet-1.coreum.dev:26657'
       : 'https://full-node-uranium.devnet-1.coreum.dev:26657';
 
 const CONTRACT_ADDRESS =