units for coin balance chart

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -26,6 +26,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       items={ items }
       isLoading={ isLoading }
       h="300px"
+      units={ appConfig.network.currency.symbol }
     />
   );
 };

ui/shared/DataFetchAlert.tsx

-import { Alert, AlertDescription } from '@chakra-ui/react';
+import { Alert, AlertDescription, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-const DataFetchAlert = () => {
+const DataFetchAlert = ({ className }: { className?: string }) => {
   return (
-    <Alert status="warning" width="fit-content">
+    <Alert status="warning" width="fit-content" className={ className }>
       <AlertDescription>
         Something went wrong. Try refreshing the page or come back later.
       </AlertDescription>
@@ -11,4 +11,4 @@ const DataFetchAlert = () => {
   );
 };
 
-export default DataFetchAlert;
+export default chakra(DataFetchAlert);

ui/shared/DataListDisplay.tsx

@@ -34,13 +34,13 @@ type Props = {
 
 const DataListDisplay = (props: Props) => {
   if (props.isError) {
-    return <DataFetchAlert/>;
+    return <DataFetchAlert className={ props.className }/>;
   }
 
   if (props.isLoading) {
 
     return (
-      <>
+      <Box className={ props.className }>
         { props.actionBar }
         { 'customSkeleton' in props.skeletonProps && props.skeletonProps.customSkeleton }
         { 'skeletonDesktopColumns' in props.skeletonProps && (
@@ -54,21 +54,21 @@ const DataListDisplay = (props: Props) => {
             />
           </>
         ) }
-      </>
+      </Box>
     );
   }
 
   if (props.filterProps?.hasActiveFilters && !props.items?.length) {
     return (
-      <>
+      <Box className={ props.className }>
         { props.actionBar }
         <EmptySearchResult text={ props.filterProps.emptyFilteredText }/>
-      </>
+      </Box>
     );
   }
 
   if (!props.items?.length) {
-    return props.emptyText ? <Text as="span">{ props.emptyText }</Text> : null;
+    return props.emptyText ? <Text className={ props.className }>{ props.emptyText }</Text> : null;
   }
 
   return (