diff --git a/src/components/HelpTooltip/HelpTooltip.tsx b/src/components/HelpTooltip/HelpTooltip.tsx index 48372ba..cbf5dca 100644 --- 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 = ({ {children} - ? + ); diff --git a/src/pages/DashboardPage/Assets.tsx b/src/pages/DashboardPage/Assets.tsx index 0152b69..0e35128 100644 --- 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} > - {formatSqd(d.value, 2)} + + {formatSqd(d.value, 2)} + {d.sub?.map(s => (