coin balance history chart new type and custom empty text

lib/api/resources.ts

@@ -29,6 +29,7 @@ import type {
   AddressNFTsResponse,
   AddressCollectionsResponse,
   AddressNFTTokensFilter,
+  AddressCoinBalanceHistoryChartOld,
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
 import type { TxBlobs, Blob } from 'types/api/blobs';
@@ -859,7 +860,7 @@ Q extends 'address_internal_txs' ? AddressInternalTxsResponse :
 Q extends 'address_token_transfers' ? AddressTokenTransferResponse :
 Q extends 'address_blocks_validated' ? AddressBlocksValidatedResponse :
 Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
-Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
+Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChartOld | AddressCoinBalanceHistoryChart :
 Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'address_tokens' ? AddressTokensResponse :
 Q extends 'address_nfts' ? AddressNFTsResponse :

mocks/address/coinBalanceHistory.ts

@@ -35,33 +35,36 @@ export const baseResponse: AddressCoinBalanceHistoryResponse = {
   next_page_params: null,
 };
 
-export const chartResponse: AddressCoinBalanceHistoryChart = [
-  {
-    date: '2022-11-02',
-    value: '128238612887883515',
-  },
-  {
-    date: '2022-11-03',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-04',
-    value: '114487912907005778',
-  },
-  {
-    date: '2022-11-05',
-    value: '219533112907005778',
-  },
-  {
-    date: '2022-11-06',
-    value: '116487912907005778',
-  },
-  {
-    date: '2022-11-07',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-08',
-    value: '216488112907005778',
-  },
-];
+export const chartResponse: AddressCoinBalanceHistoryChart = {
+  items: [
+    {
+      date: '2022-11-02',
+      value: '128238612887883515',
+    },
+    {
+      date: '2022-11-03',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-04',
+      value: '114487912907005778',
+    },
+    {
+      date: '2022-11-05',
+      value: '219533112907005778',
+    },
+    {
+      date: '2022-11-06',
+      value: '116487912907005778',
+    },
+    {
+      date: '2022-11-07',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-08',
+      value: '216488112907005778',
+    },
+  ],
+  days: 10,
+};

types/api/address.ts

@@ -148,11 +148,20 @@ export interface AddressCoinBalanceHistoryResponse {
   } | null;
 }
 
-export type AddressCoinBalanceHistoryChart = Array<{
+// remove after api release
+export type AddressCoinBalanceHistoryChartOld = Array<{
   date: string;
   value: string;
 }>
 
+export type AddressCoinBalanceHistoryChart = {
+  items: Array<{
+    date: string;
+    value: string;
+  }>;
+  days: number;
+};
+
 export interface AddressBlocksValidatedResponse {
   items: Array<Block>;
   next_page_params: {

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -15,10 +15,17 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
     pathParams: { hash: addressHash },
   });
 
-  const items = React.useMemo(() => data?.map(({ date, value }) => ({
-    date: new Date(date),
-    value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
-  })), [ data ]);
+  const items = React.useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+
+    const dataItems = 'items' in data ? data.items : data;
+    return dataItems.map(({ date, value }) => ({
+      date: new Date(date),
+      value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
+    }));
+  }, [ data ]);
 
   return (
     <ChartWidget
@@ -28,6 +35,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       isLoading={ isPending }
       h="300px"
       units={ currencyUnits.ether }
+      emptyText={ data && 'days' in data && `Insufficient data for the past ${ data.days } days` }
     />
   );
 };

ui/shared/chart/ChartWidget.tsx

@@ -35,11 +35,12 @@ export type Props = {
   isLoading: boolean;
   className?: string;
   isError: boolean;
+  emptyText?: string;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading, className, isError, units }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, className, isError, units, emptyText }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -134,7 +135,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
     if (!hasItems) {
       return (
         <Center flexGrow={ 1 }>
-          <Text variant="secondary" fontSize="sm">No data</Text>
+          <Text variant="secondary" fontSize="sm">{ emptyText || 'No data' }</Text>
         </Center>
       );
     }