feat: add balances tooltips

subsquid · May 8, 2024 · 7ad75ba · 7ad75ba
1 parent 98cc768
commit 7ad75ba
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/src/components/HelpTooltip/HelpTooltip.tsx b/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,25 +1,25 @@
 import React, { PropsWithChildren } from 'react';
 
+import { HelpOutline } from '@mui/icons-material';
 import { Box, Stack, styled, Tooltip } from '@mui/material';
 
-export const Help = styled(Box)(({ theme, color }) => ({
-  width: 15,
-  height: 15,
-  color: color === 'default' ? theme.palette.secondary.contrastText : '#fff',
-  backgroundColor: color === 'default' ? theme.palette.secondary.main : '#000',
-  borderRadius: 8,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontSize: '0.725rem',
-  lineHeight: '15px',
-  fontWeight: 500,
-  cursor: 'help',
-}));
+// export const Help = styled(Box)(({ theme, color }) => ({
+//   width: 15,
+//   height: 15,
+//   color: color === 'default' ? theme.palette.text.default : '#fff',
+//   backgroundColor: color === 'default' ? theme.palette.text.disabled : '#000',
+//   borderRadius: 8,
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+//   fontSize: '0.725rem',
+//   lineHeight: '15px',
+//   fontWeight: 500,
+//   cursor: 'help',
+// }));
 
 export const HelpTooltip = ({
   help,
-  color = 'default',
   children,
 }: PropsWithChildren<{
   help: React.ReactNode;
@@ -29,7 +29,7 @@ export const HelpTooltip = ({
     <Stack direction="row" alignItems="center" spacing={1}>
       <Box>{children}</Box>
       <Tooltip title={help}>
-        <Help color={color}>?</Help>
+        <HelpOutline sx={{ width: 16, height: 16 }} />
       </Tooltip>
     </Stack>
   );

diff --git a/src/pages/DashboardPage/Assets.tsx b/src/pages/DashboardPage/Assets.tsx
@@ -1,13 +1,14 @@
 import React, { useMemo } from 'react';
 
 import { addressFormatter } from '@lib/formatters/formatters';
-import { Box, Chip, Stack } from '@mui/material';
+import { Box, Chip, Stack, Tooltip } from '@mui/material';
 import { Cell, Pie, PieChart } from 'recharts';
 
 import { formatSqd, fromSqd } from '@api/contracts/utils';
 import { useMyAssets } from '@api/subsquid-network-squid';
 import { Card } from '@components/Card';
 import { CopyToClipboard } from '@components/CopyToClipboard';
+import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
 import { NetworkPageTitle } from '@layouts/NetworkLayout';
 import { ConnectedWalletRequired } from '@network/ConnectedWalletRequired';
@@ -23,12 +24,14 @@ export function MyAssets() {
         value: fromSqd(assets.balance).toNumber(),
         background: '#E3F7E0',
         color: '#55AD44',
+        tip: 'Liquid tokens, can be freely transferred to external addresses',
       },
       {
         name: 'Locked',
         value: fromSqd(assets.locked).toNumber(),
-        background: '#E3F7E0',
-        color: '#55AD44',
+        background: '#FFE6C0',
+        color: '#FF6B35',
+        tip: 'Tokens locked in the vesting contracts owned by the wallet. Can be used for bonding (running a worker) and/or delegation',
         sub: assets.vestings.map(v => {
           return {
             name: (
@@ -46,18 +49,21 @@ export function MyAssets() {
         value: fromSqd(assets.claimable).toNumber(),
         background: '#D1E3FF',
         color: '#3880EC',
+        tip: 'Earned but not yet claimed token rewards, aggregated across all workers and delegations',
       },
       {
         name: 'Bonded',
         value: fromSqd(assets.bonded).toNumber(),
         background: '#EBEBEB',
         color: '#2B2B2B',
+        tip: 'Tokens bonded in the worker registry contract. 100000 SQD has to be bonded per a worker node',
       },
       {
         name: 'Delegated',
         value: fromSqd(assets.delegated).toNumber(),
-        background: '#E8CDEB',
-        color: '#B721FD',
+        background: '#F4DAFF',
+        color: '#9C00FF',
+        tip: 'Tokens delegated to workers',
       },
     ],
     [assets],
@@ -84,7 +90,9 @@ export function MyAssets() {
                       spacing={1}
                     >
                       <Chip sx={{ background: d.background, color: d.color }} label={d.name} />
-                      <Box sx={{ fontWeight: 500 }}>{formatSqd(d.value, 2)}</Box>
+                      <HelpTooltip help={d.tip}>
+                        <Box sx={{ fontWeight: 500 }}>{formatSqd(d.value, 2)}</Box>
+                      </HelpTooltip>
                     </Stack>
                     {d.sub?.map(s => (
                       <Stack

diff --git a/src/pages/DashboardPage/Workers.tsx b/src/pages/DashboardPage/Workers.tsx
@@ -8,6 +8,7 @@ import { Box } from '@mui/system';
 import { useNavigate } from 'react-router-dom';
 
 import { SortDir, useWorkers, WorkerSortBy } from '@api/subsquid-network-squid';
+import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
 import { Search } from '@components/Search/Search';
 import { BorderedTable, SortableHeaderCell } from '@components/Table/BorderedTable';