Update AddressCoinBalanceChart and ChartWidget components (#44)

Atleta-network · May 1, 2024 · 715c5dc · 715c5dc
2 parents fb20395 + 78980d4
commit 715c5dc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
@@ -15,10 +15,18 @@ 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;
+    // @ts-expect-error unknow type
+    return dataItems.map(({ date, value }) => ({
+      date: new Date(date),
+      value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
+    }));
+  }, [ data ]);
 
   return (
     <ChartWidget
@@ -28,6 +36,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` }
     />
   );
 };

diff --git a/ui/shared/chart/ChartWidget.tsx b/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>
       );
     }