coin price change

lib/api/useApiFetch.tsx

 import { useQueryClient } from '@tanstack/react-query';
+import _omit from 'lodash/omit';
 import _pickBy from 'lodash/pickBy';
 import React from 'react';
 
@@ -19,7 +20,7 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
 export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
   queryParams?: Record<string, string | Array<string> | number | undefined>;
-  fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal'>;
+  fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
 }
 
 export default function useApiFetch() {
@@ -40,6 +41,7 @@ export default function useApiFetch() {
       'x-endpoint': resource.endpoint && isNeedProxy() ? resource.endpoint : undefined,
       Authorization: resource.endpoint && resource.needAuth ? apiToken : undefined,
       'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
+      ...fetchParams?.headers,
     }, Boolean) as HeadersInit;
 
     return fetch<SuccessType, ErrorType>(
@@ -51,7 +53,7 @@ export default function useApiFetch() {
         // change condition here if something is changed
         credentials: config.features.account.isEnabled ? 'include' : 'same-origin',
         headers,
-        ...fetchParams,
+        ..._omit(fetchParams, 'headers'),
       },
       {
         resource: resource.path,

mocks/stats/index.ts

@@ -3,6 +3,7 @@ import type { HomeStats } from 'types/api/stats';
 export const base: HomeStats = {
   average_block_time: 6212.0,
   coin_price: '0.00199678',
+  coin_price_change_percentage: -7.42,
   gas_prices: {
     average: 48.0,
     fast: 67.5,

nextjs/utils/fetch.ts

 import type { IncomingMessage } from 'http';
+import _pick from 'lodash/pick';
 import type { NextApiRequest } from 'next';
 import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
 import type { RequestInit, Response } from 'node-fetch';
@@ -14,16 +15,18 @@ export default function fetchFactory(
   // first arg can be only a string
   // FIXME migrate to RequestInfo later if needed
   return function fetch(url: string, init?: RequestInit): Promise<Response> {
-    const csrfToken = _req.headers['x-csrf-token'];
-    const authToken = _req.headers['Authorization'];
     const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
 
     const headers = {
       accept: _req.headers['accept'] || 'application/json',
       'content-type': _req.headers['content-type'] || 'application/json',
       cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
-      ...(csrfToken ? { 'x-csrf-token': String(csrfToken) } : {}),
-      ...(authToken ? { Authorization: String(authToken) } : {}),
+      ..._pick(_req.headers, [
+        'x-csrf-token',
+        'Authorization',
+        // feature flags
+        'updated-gas-oracle',
+      ]) as Record<string, string | undefined>,
     };
 
     httpLogger.logger.info({

stubs/stats.ts

@@ -3,6 +3,7 @@ import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
 export const HOMEPAGE_STATS: HomeStats = {
   average_block_time: 14346,
   coin_price: '1807.68',
+  coin_price_change_percentage: 42,
   gas_prices: {
     average: 0.1,
     fast: 0.11,

types/api/stats.ts

@@ -4,6 +4,7 @@ export type HomeStats = {
   total_transactions: string;
   average_block_time: number;
   coin_price: string | null;
+  coin_price_change_percentage: number | null; // e.g -6.22
   total_gas_used: string;
   transactions_today: string;
   gas_used_today: string;

ui/home/LatestBlocks.tsx

@@ -37,7 +37,13 @@ const LatestBlocks = () => {
 
   const queryClient = useQueryClient();
   const statsQueryResult = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
     queryOptions: {
+      refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
     },
   });

ui/home/Stats.tsx

@@ -17,7 +17,13 @@ const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime;
 
 const Stats = () => {
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
     queryOptions: {
+      refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
     },
   });

ui/home/indicators/ChainIndicators.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/stats';
 import Hint from 'ui/shared/Hint';
 
 import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
@@ -29,7 +30,17 @@ const ChainIndicators = () => {
   const indicator = indicators.find(({ id }) => id === selectedIndicator);
 
   const queryResult = useFetchChartData(indicator);
-  const statsQueryResult = useApiQuery('homepage_stats');
+  const statsQueryResult = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
 
   const bgColorDesktop = useColorModeValue('white', 'gray.900');
   const bgColorMobile = useColorModeValue('white', 'black');

ui/snippets/topBar/TopBarStats.tsx

@@ -17,6 +17,11 @@ const TopBarStats = () => {
   }, [ onToggle ]);
 
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
+    fetchParams: {
+      headers: {
+        'updated-gas-oracle': 'true',
+      },
+    },
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
       refetchOnMount: false,
@@ -34,10 +39,19 @@ const TopBarStats = () => {
       fontWeight={ 500 }
     >
       { data?.coin_price && (
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
-          <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
-        </Skeleton>
+        <Flex columnGap={ 1 }>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
+            <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
+          </Skeleton>
+          { data.coin_price_change_percentage && (
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              <chakra.span color={ Number(data.coin_price_change_percentage) >= 0 ? 'green.500' : 'red.500' }>
+                { Number(data.coin_price_change_percentage).toFixed(2) }%
+              </chakra.span>
+            </Skeleton>
+          ) }
+        </Flex>
       ) }
       { data?.coin_price && config.UI.homepage.showGasTracker && <TextSeparator color="divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && (