Feature/wallet content updates (#1825)

* fix up balance screen

* fix up app bar and nym logo alignment

* fix up delegation action icon font weight

* fix up bond page

nym-wallet/src/components/AppBar.tsx

@@ -15,7 +15,7 @@ export const AppBar = () => {
   const navigate = useNavigate();
 
   return (
-    <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent', backgroundImage: 'none' }}>
+    <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent', backgroundImage: 'none', pt: 3 }}>
       <Toolbar disableGutters>
         <Grid container justifyContent="space-between" alignItems="center" flexWrap="nowrap">
           <Grid item container alignItems="center" spacing={1}>

nym-wallet/src/components/Bonding/BondedMixnode.tsx

@@ -135,7 +135,7 @@ export const BondedMixnode = ({
             </Box>
             {name && (
               <Tooltip title={host} arrow>
-                <Typography fontWeight="regular" variant="h6">
+                <Typography fontWeight="regular" variant="h6" width="fit-content">
                   {name}
                 </Typography>
               </Tooltip>

nym-wallet/src/components/Bonding/BondedMixnodeActions.tsx

@@ -35,7 +35,7 @@ export const BondedMixnodeActions = ({
       )}
       <ActionsMenuItem
         title="Redeem rewards"
-        Icon={<Typography sx={{ pl: 1, fontWeight: 700 }}>R</Typography>}
+        Icon={<Typography sx={{ pl: 0.5, fontWeight: 700 }}>R</Typography>}
         onClick={() => handleActionClick('redeem')}
         disabled={disabledRedeemAndCompound}
       />

nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Box, Checkbox, FormControlLabel, FormHelperText, Stack, TextField } from '@mui/material';
+import { Box, Checkbox, FormControlLabel, FormHelperText, Stack, TextField, Typography } from '@mui/material';
 import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
 import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
 import { CurrencyDenom, TNodeType } from '@nymproject/types';
 import { checkHasEnoughFunds, checkHasEnoughLockedTokens } from 'src/utils';
 import { NodeTypeSelector, TokenPoolSelector } from 'src/components';
 import { MixnodeAmount, MixnodeData } from 'src/pages/bonding/types';
+import { ModalListItem } from 'src/components/Modals/ModalListItem';
 import { amountSchema, mixnodeValidationSchema } from './mixnodeValidationSchema';
+import { AppContext } from 'src/context';
 
 const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNext: (data: any) => void }) => {
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
@@ -138,6 +140,8 @@ const AmountFormData = ({
     setError,
   } = useForm({ resolver: yupResolver(amountSchema), defaultValues: amountData });
 
+  const { userBalance } = useContext(AppContext);
+
   const handleRequestValidation = async (event: { detail: { step: number } }) => {
     let hasSufficientTokens = true;
     const values = getValues();
@@ -210,6 +214,17 @@ const AmountFormData = ({
           and delegators.
         </FormHelperText>
       </Box>
+      <Box sx={{ mb: 1 }}>
+        {!hasVestingTokens && (
+          <ModalListItem
+            divider
+            label="Account balance"
+            value={userBalance.balance?.printable_balance.toUpperCase()}
+            fontWeight={600}
+          />
+        )}
+        <Typography variant="body2">Est. fee for this transaction will be calculated in the next page</Typography>
+      </Box>
     </Stack>
   );
 };

nym-wallet/src/components/Delegation/DelegationActions.tsx

@@ -92,7 +92,7 @@ export const DelegationsActionsMenu: React.FC<{
       <ActionsMenuItem
         title="Redeem"
         description="Transfer your rewards to your balance"
-        Icon={<Typography sx={{ pl: 1 }}>R</Typography>}
+        Icon={<Typography sx={{ pl: 1, fontWeight: 700 }}>R</Typography>}
         onClick={() => handleActionSelect('redeem')}
         disabled={disableRedeemingRewards}
       />

nym-wallet/src/components/NymCard.tsx

@@ -12,7 +12,7 @@ const CardContentNoPadding = styled(CardContent)(() => ({
 
 export const NymCard: React.FC<{
   title: string | React.ReactElement;
-  subheader?: string;
+  subheader?: string | React.ReactChild;
   Action?: React.ReactNode;
   Icon?: React.ReactNode;
   noPadding?: boolean;

nym-wallet/src/components/Rewards/RewardsSummary.tsx

@@ -13,14 +13,14 @@ export const RewardsSummary: React.FC<{
     <Stack direction="row" justifyContent="space-between">
       <Stack direction="row" spacing={4}>
         <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="This is the total amount you have delgated across multiple nodes" />
+          <InfoTooltip title="This is the total amount you have delegated to node(s) in the network" />
           <Typography>Total 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="Awaiting rewards accrue per epoch (hourly). You can redeem or compound them" />
+          <InfoTooltip title="This is the rewards you have accrued since the last time you redeemed your rewards. Rewards are automatically compounded. You can redeem your rewards at any time" />
           <Typography>New rewards:</Typography>
           <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
             {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}

nym-wallet/src/components/TokenPoolSelector.tsx

@@ -53,7 +53,6 @@ export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: T
               secondary={`${
                 +tokenAllocation.locked + +tokenAllocation.spendable
               } ${clientDetails?.display_mix_denom.toUpperCase()}`}
-              sx={{ textTransform: 'uppercase' }}
             />
           )}
         </MenuItem>

nym-wallet/src/layouts/AppLayout.tsx

@@ -26,14 +26,14 @@ export const ApplicationLayout: React.FC = ({ children }) => {
           sx={{
             background: (t) => t.palette.nym.nymWallet.nav.background,
             overflow: 'auto',
-            py: 5,
+            py: 4,
           }}
           display="flex"
           flexDirection="column"
           justifyContent="space-between"
         >
           <Box>
-            <Box sx={{ ml: 5, mb: 3 }}>
+            <Box sx={{ ml: 5, mb: 7 }}>
               <NymWordmark height={14} />
             </Box>
             <Nav />

nym-wallet/src/pages/balance/balance.tsx

@@ -31,7 +31,7 @@ export const BalanceCard = () => {
               sx={{
                 color: 'text.primary',
                 textTransform: 'uppercase',
-                fontWeight: (theme) => (theme.palette.mode === 'light' ? '600' : '400'),
+                fontWeight: '600',
                 fontSize: 28,
               }}
               variant="h5"

nym-wallet/src/pages/balance/components/vesting-timeline.tsx

@@ -23,7 +23,6 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
   } = useContext(AppContext);
 
   const theme = useTheme();
-  const { mode } = theme.palette;
 
   const nextPeriod =
     typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods
@@ -33,22 +32,14 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
   return (
     <Box display="flex" flexDirection="column" gap={1} position="relative" width="100%">
       <svg width="100%" height="12">
-        <rect y="2" width="100%" height="6" rx="0" fill="text.dark" />
-        <rect
-          y="2"
-          width={`${percentageComplete}%`}
-          height="6"
-          rx="0"
-          fill={mode === 'light' ? 'text.dark' : theme.palette.success.main}
-        />
+        <rect y="2" width="100%" height="6" rx="0" fill="#E6E6E6" />
+        <rect y="2" width={`${percentageComplete}%`} height="6" rx="0" fill={theme.palette.success.main} />
         {vestingAccountInfo?.periods.map((period, i, arr) => (
           <Marker
             position={`${calculateMarkerPosition(arr.length, i)}%`}
             color={
-              +percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i)
-                ? mode === 'light'
-                  ? 'text.dark'
-                  : theme.palette.success.main
+              Math.ceil(+percentageComplete) >= calculateMarkerPosition(arr.length, i)
+                ? theme.palette.success.main
                 : '#B9B9B9'
             }
             tooltipText={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')}
@@ -57,15 +48,12 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
         ))}
         <Marker
           position="calc(100% - 4px)"
-          color={percentageComplete === 100 ? (mode === 'light' ? 'text.dark' : theme.palette.success.main) : '#B9B9B9'}
+          color={percentageComplete === 100 ? theme.palette.success.main : '#B9B9B9'}
           tooltipText="End of vesting schedule"
         />
       </svg>
       {!!nextPeriod && (
-        <Typography
-          variant="caption"
-          sx={{ color: (theme) => theme.palette.text.disabled, position: 'absolute', top: 15, left: 0 }}
-        >
+        <Typography variant="caption" sx={{ color: 'nym.text.muted', position: 'absolute', top: 15, left: 0 }}>
           Next vesting period: {format(new Date(nextPeriod * 1000), 'HH:mm do MMM yyyy')}
         </Typography>
       )}

nym-wallet/src/pages/balance/index.tsx

@@ -19,7 +19,7 @@ export const Balance = () => {
 
   return (
     <PageLayout>
-      <Box display="flex" flexDirection="column" gap={2}>
+      <Box display="flex" flexDirection="column" gap={4}>
         <BalanceCard />
         <VestingCard onTransfer={handleShowTransferModal} />
         {showTransferModal && <TransferModal onClose={() => setShowTransferModal(false)} />}

nym-wallet/src/pages/balance/vesting.tsx

@@ -1,20 +1,21 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React from 'react';
+import { Refresh } from '@mui/icons-material';
 import {
   Box,
   Button,
-  Grid,
   IconButton,
   Table,
+  TableBody,
   TableCell,
   TableCellProps,
   TableContainer,
   TableHead,
   TableRow,
   Typography,
 } from '@mui/material';
-import { InfoOutlined, Refresh } from '@mui/icons-material';
 import { useSnackbar } from 'notistack';
-import { InfoTooltip, NymCard, Title } from 'src/components';
+import { useContext, useEffect, useState } from 'react';
+import { NymCard } from 'src/components';
 import { AppContext } from 'src/context/main';
 import { Period } from 'src/types';
 import { VestingTimeline } from './components/vesting-timeline';
@@ -54,7 +55,7 @@ const VestingSchedule = () => {
   }, [userBalance.tokenAllocation, calculatePercentage]);
 
   return (
-    <TableContainer>
+    <TableContainer sx={{ py: 1 }}>
       <Table>
         <TableHead>
           <TableRow>
@@ -64,10 +65,12 @@ const VestingSchedule = () => {
               </TableCell>
             ))}
           </TableRow>
+        </TableHead>
+        <TableBody>
           <TableRow>
             <TableCell
               sx={{
-                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                color: 'text.primary',
                 borderBottom: 'none',
                 textTransform: 'uppercase',
               }}
@@ -78,15 +81,15 @@ const VestingSchedule = () => {
             <TableCell
               align="left"
               sx={{
-                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                color: 'text.primary',
                 borderBottom: 'none',
               }}
             >
               {vestingPeriod(userBalance.currentVestingPeriod, userBalance.originalVesting?.number_of_periods)}
             </TableCell>
             <TableCell
               sx={{
-                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                color: 'text.primary',
                 borderBottom: 'none',
               }}
             >
@@ -97,7 +100,7 @@ const VestingSchedule = () => {
             </TableCell>
             <TableCell
               sx={{
-                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                color: 'text.primary',
                 borderBottom: 'none',
                 textTransform: 'uppercase',
               }}
@@ -107,37 +110,30 @@ const VestingSchedule = () => {
               {clientDetails?.display_mix_denom.toUpperCase()}
             </TableCell>
           </TableRow>
-        </TableHead>
+        </TableBody>
       </Table>
     </TableContainer>
   );
 };
 
 const TokenTransfer = () => {
   const { userBalance, clientDetails } = useContext(AppContext);
-  const icon = useCallback(
-    () => (
-      <Box sx={{ display: 'flex', mr: 1 }}>
-        <InfoTooltip title="Unlocked tokens that are available to transfer to your balance" size="medium" />
-      </Box>
-    ),
-    [],
-  );
+
   return (
-    <Grid container sx={{ my: 2 }} direction="column" spacing={2}>
-      <Grid item>
-        <Title title="Transfer unlocked tokens" Icon={icon} />
-      </Grid>
-      <Grid item>
-        <Typography variant="subtitle2" sx={{ color: (t) => t.palette.nym.text.muted, mt: 2 }}>
-          Unlocked transferable tokens
-        </Typography>
+    <Box sx={{ my: 3 }}>
+      <Typography variant="subtitle2" sx={{ mb: 3, fontWeight: '600' }}>
+        Unlocked transferable tokens
+      </Typography>
 
-        <Typography data-testid="refresh-success" sx={{ color: 'text.primary' }} variant="h5" textTransform="uppercase">
-          {userBalance.tokenAllocation?.spendable || 'n/a'} {clientDetails?.display_mix_denom.toUpperCase()}
-        </Typography>
-      </Grid>
-    </Grid>
+      <Typography
+        data-testid="refresh-success"
+        sx={{ color: 'text.primary', fontWeight: '600', fontSize: 28 }}
+        variant="h5"
+        textTransform="uppercase"
+      >
+        {userBalance.tokenAllocation?.spendable || 'n/a'} {clientDetails?.display_mix_denom.toUpperCase()}
+      </Typography>
+    </Box>
   );
 };
 
@@ -160,6 +156,12 @@ export const VestingCard = ({ onTransfer }: { onTransfer: () => Promise<void> })
   return (
     <NymCard
       title="Vesting Schedule"
+      subheader={
+        <Typography variant="caption" sx={{ color: 'nym.text.muted' }}>
+          You can use up to 10% of your locked tokens for bonding and delegating
+        </Typography>
+      }
+      borderless
       data-testid="check-unvested-tokens"
       Action={
         <IconButton

nym-wallet/src/pages/delegation/index.tsx

@@ -232,6 +232,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
       setConfirmationModalProps({
         status: 'success',
         action: 'undelegate',
+        message: 'This operation can take up to one hour to process',
         ...balances,
         transactions: [
           {