GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format delegations summary

Browse Source
This commit is contained in:
fmtabbara
2023-10-25 10:02:08 +01:00
parent ba4ade1750
commit caff2aa9d2
1 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/components/Rewards/RewardsSummary.tsx
+53 -24
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { CircularProgress, Stack, Typography } from '@mui/material';
import { CircularProgress, Stack, StackProps, Typography, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useDelegationContext } from 'src/context/delegations';
import { InfoTooltip } from '../InfoToolTip';
@@ -9,34 +9,63 @@ export const RewardsSummary: FCWithChildren<{
totalDelegation?: string;
totalRewards?: string;
}> = ({ isLoading, totalDelegation, totalRewards }) => {
const theme = useTheme();
const { totalDelegationsAndRewards } = useDelegationContext();
return (
<Stack direction="row" justifyContent="space-between" marginTop={3}>
<Stack direction="row" spacing={5}>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
<Typography>Total delegations:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegationsAndRewards || '-'}
</Typography>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="The initial amount you delegated to the node(s)" />
<Typography>Original delegations:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegation || '-'}
</Typography>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
<Typography>Total rewards:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}
</Typography>
</Stack>
<RewardSummaryField
title="Total delegations"
value={totalDelegationsAndRewards || '-'}
isLoading={isLoading}
Tooltip={
<InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
}
/>
<RewardSummaryField
title="Original delegations"
value={totalDelegation || '-'}
isLoading={isLoading}
Tooltip={<InfoTooltip title="The initial amount you delegated to the node(s)" />}
/>
<RewardSummaryField
title="Total rewards"
value={totalRewards || '-'}
isLoading={isLoading}
Tooltip={
<InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
}
/>
</Stack>
</Stack>
);
};
const RewardSummaryField = ({
title,
value,
Tooltip,
isLoading,
}: {
title: string;
value: string;
Tooltip?: React.ReactNode;
isLoading?: boolean;
}) => {
const breakpoint = useMediaQuery(useTheme().breakpoints.down('xl'));
const alignProps: { gap: number; direction: StackProps['direction'] } = {
gap: breakpoint ? 0 : 1,
direction: breakpoint ? 'column' : 'row',
};
return (
<Stack {...alignProps} alignItems="start">
<Stack direction="row" alignItems="center" gap={1}>
{Tooltip}
<Typography>{title}:</Typography>
</Stack>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={16} /> : value}
</Typography>
</Stack>
);
};