From 78980d44ba54b492ac67888af7eca6e8d8481beb Mon Sep 17 00:00:00 2001
From: r8bywork <vanya.smolensky@gmail.com>
Date: Tue, 30 Apr 2024 23:14:26 +0300
Subject: [PATCH] Update AddressCoinBalanceChart and ChartWidget components -
 Fix issue with "No data" appearing in coin balance history (#36)

---
 .../coinBalance/AddressCoinBalanceChart.tsx     | 17 +++++++++++++----
 ui/shared/chart/ChartWidget.tsx                 |  5 +++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
index 4e551f1e8b..0433e2e7de 100644
--- 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
index b613b8f7a4..7566ad8f92 100644
--- 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>
       );
     }