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 => (