feat: Refetch token price if online status is true (#2337)

packages/app/src/library/NetworkBar/TokenPrice.tsx

@@ -3,28 +3,36 @@
 
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { useNetwork } from 'contexts/Network';
+import { isCustomEvent } from 'controllers/utils';
 import {
   ApolloProvider,
   client,
   useTokenPrice,
-  formatResult,
+  formatTokenPrice,
 } from 'plugin-staking-api';
+import { useRef } from 'react';
+import { useEventListener } from 'usehooks-ts';
 
 export const TokenPriceInner = () => {
   const {
     networkData: {
       api: { unit },
     },
   } = useNetwork();
+
   const { loading, error, data, refetch } = useTokenPrice({
     ticker: `${unit}USDT`,
   });
-  const { price, change } = formatResult(loading, error, data);
+  const { price, change } = formatTokenPrice(loading, error, data);
 
-  const usdFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  });
+  //  Refetch token price if online status changes to online.
+  const handleOnlineStatus = (e: Event): void => {
+    if (isCustomEvent(e)) {
+      if (e.detail.online) {
+        refetch();
+      }
+    }
+  };
 
   // Initiate interval to refetch token price every 30 seconds.
   useEffectIgnoreInitial(() => {
@@ -34,6 +42,12 @@ export const TokenPriceInner = () => {
     return () => clearInterval(interval);
   }, [refetch]);
 
+  useEventListener(
+    'online-status',
+    handleOnlineStatus,
+    useRef<Document>(document)
+  );
+
   return (
     <>
       <div className="stat">
@@ -45,7 +59,11 @@ export const TokenPriceInner = () => {
         </span>
       </div>
       <div className="stat">
-        1 {unit} / {usdFormatter.format(price)}
+        1 {unit} /{' '}
+        {new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+        }).format(price)}
       </div>
     </>
   );

packages/app/src/library/Offline/index.tsx

@@ -27,8 +27,11 @@ export const Offline = () => {
     OnlineStatusController.initOnlineEvents();
   }, []);
 
-  const documentRef = useRef<Document>(document);
-  useEventListener('online-status', handleOnlineStatus, documentRef);
+  useEventListener(
+    'online-status',
+    handleOnlineStatus,
+    useRef<Document>(document)
+  );
 
   if (!offline) {
     return null;

packages/app/src/pages/Overview/AccountBalance/FiatValue.tsx

@@ -7,7 +7,7 @@ import { useNetwork } from 'contexts/Network';
 import {
   ApolloProvider,
   client,
-  formatResult,
+  formatTokenPrice,
   useTokenPrice,
 } from 'plugin-staking-api';
 
@@ -24,7 +24,7 @@ export const FiatValueInner = ({ totalBalance }: FiatValueProps) => {
   const { loading, error, data, refetch } = useTokenPrice({
     ticker: `${unit}USDT`,
   });
-  const { price } = formatResult(loading, error, data);
+  const { price } = formatTokenPrice(loading, error, data);
 
   // Convert balance to fiat value.
   const freeFiat = totalBalance.multipliedBy(

packages/plugin-staking-api/src/index.tsx

@@ -5,6 +5,5 @@ import { ApolloProvider } from '@apollo/client';
 
 export * from './Client';
 export * from './useTokenPrice';
-export * from './util';
 
 export { ApolloProvider };

packages/plugin-staking-api/src/types.ts

@@ -7,11 +7,13 @@ import type {
   OperationVariables,
 } from '@apollo/client';
 
+export interface TokenPrice {
+  price: number;
+  change: number;
+}
+
 export type TokenPriceResult = {
-  tokenPrice: {
-    price: number;
-    change: number;
-  };
+  tokenPrice: TokenPrice;
 } | null;
 
 export interface UseTokenPriceResult {

packages/plugin-staking-api/src/useTokenPrice.tsx

@@ -1,8 +1,9 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import type { ApolloError } from '@apollo/client';
 import { gql, useQuery } from '@apollo/client';
-import type { UseTokenPriceResult } from './types';
+import type { TokenPriceResult, UseTokenPriceResult } from './types';
 
 const TOKEN_PRICE_QUERY = gql`
   query TokenPrice($ticker: String!) {
@@ -23,3 +24,16 @@ export const useTokenPrice = ({
   });
   return { loading, error, data, refetch };
 };
+
+export const formatTokenPrice = (
+  loading: boolean,
+  error: ApolloError | undefined,
+  data: TokenPriceResult
+) => {
+  const price =
+    loading || error ? 0 : Number(data?.tokenPrice?.price.toFixed(2)) || 0;
+  const change =
+    loading || error ? 0 : Number(data?.tokenPrice?.change.toFixed(2)) || 0;
+
+  return { price, change };
+};