diff --git a/stubs/stats.ts b/stubs/stats.ts
index c437e4bc45..7bc61314ff 100644
--- a/stubs/stats.ts
+++ b/stubs/stats.ts
@@ -58,5 +58,6 @@ export const STATS_COUNTER: Counter = {
id: 'stub',
value: '9074405',
title: 'Placeholder Counter',
+ description: 'Placeholder description',
units: '',
};
diff --git a/types/api/stats.ts b/types/api/stats.ts
index 2a542e0034..967e8b2eea 100644
--- a/types/api/stats.ts
+++ b/types/api/stats.ts
@@ -27,6 +27,7 @@ export type Counter = {
id: string;
value: string;
title: string;
+ description?: string;
units: string;
}
diff --git a/ui/stats/NumberWidget.tsx b/ui/stats/NumberWidget.tsx
index 05eaf90497..c64745e636 100644
--- a/ui/stats/NumberWidget.tsx
+++ b/ui/stats/NumberWidget.tsx
@@ -1,41 +1,59 @@
-import { Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
+import Hint from 'ui/shared/Hint';
+
type Props = {
label: string;
+ description?: string;
value: string;
isLoading?: boolean;
}
-const NumberWidget = ({ label, value, isLoading }: Props) => {
+const NumberWidget = ({ label, value, isLoading, description }: Props) => {
const bgColor = useColorModeValue('blue.50', 'blue.800');
const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+ const hintColor = useColorModeValue('gray.600', 'gray.400');
return (
-
-
- { label }
-
+
+ { label }
+
-
- { value }
+
+ { value }
+
+
+
+
+
-
+
);
};
diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx
index f567058430..53a8b212b7 100644
--- a/ui/stats/NumberWidgetsList.tsx
+++ b/ui/stats/NumberWidgetsList.tsx
@@ -24,7 +24,7 @@ const NumberWidgetsList = () => {
gridGap={ 4 }
>
{
- data?.counters?.map(({ id, title, value, units }, index) => {
+ data?.counters?.map(({ id, title, value, units, description }, index) => {
return (
{
label={ title }
value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
isLoading={ isPlaceholderData }
+ description={ description }
/>
);
})