feat(wallet-bonding): node menu ui

nym-wallet/src/pages/bonding/components/NodeMenu.tsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
-import { IconButton, Menu, MenuItem, Stack } from '@mui/material';
+import { Box, IconButton, Menu, MenuItem, Stack, Typography } from '@mui/material';
 import { MoreVert } from '@mui/icons-material';
 import { useEffect } from 'react';
 import { MixnodeFlow } from '../mixnode/types';
 import { GatewayFlow } from '../gateway/types';
 
+interface Item {
+  label: string;
+  flow: MixnodeFlow | GatewayFlow;
+  icon: React.ReactNode;
+  description?: string;
+}
+
 interface Props {
   onFlowChange: (flow: MixnodeFlow | GatewayFlow) => void;
-  items: { label: string; flow: MixnodeFlow | GatewayFlow; icon: React.ReactNode }[];
+  items: Item[];
   onOpen: (open: boolean) => void;
 }
 
@@ -54,11 +61,18 @@ const NodeMenu = ({ onFlowChange, items, onOpen }: Props) => {
           },
         }}
       >
-        {items.map(({ label, flow, icon }) => (
-          <MenuItem onClick={() => onClick(flow)} key={flow} disableRipple>
-            <Stack direction="row" spacing={2} gap={1}>
-              {icon}
-              {label}
+        {items.map(({ label, flow, icon, description }) => (
+          <MenuItem onClick={() => onClick(flow)} key={flow} sx={{ px: 1.6 }} disableRipple>
+            <Stack direction="row" spacing={1}>
+              <Stack display="flex" alignItems="flex-end" width={16} alignSelf="start">
+                {icon}
+              </Stack>
+              <Stack alignItems="flex-start" justifyContent="flex-start">
+                <Typography>{label}</Typography>
+                <Typography variant="subtitle2" color="nym.text.muted">
+                  {description}
+                </Typography>
+              </Stack>
             </Stack>
           </MenuItem>
         ))}

nym-wallet/src/pages/bonding/mixnode/MixnodeCard.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
 import { Button, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { Link } from '@nymproject/react/link/Link';
-import EditIcon from '@mui/icons-material/Edit';
 import { BondedMixnode } from '../../../context';
 import { Node as NodeIcon } from '../../../svg-icons/node';
 import { NodeTable, BondedNodeCard, Cell, Header, NodeMenu } from '../components';
@@ -12,6 +11,7 @@ import { MixnodeFlow } from './types';
 import RedeemRewards from './redeem';
 import Unbond from '../unbond';
 import CompoundRewards from './compound';
+import { Bond as BondIcon, Unbond as UnbondIcon } from '../../../svg-icons';
 
 const headers: Header[] = [
   {
@@ -100,10 +100,20 @@ const MixnodeCard = ({ mixnode }: { mixnode: BondedMixnode }) => {
             onFlowChange={(newFlow) => setFlow(newFlow as MixnodeFlow)}
             onOpen={(open) => setNodeMenuOpen(open)}
             items={[
-              { label: 'Bond more', flow: 'bondMore', icon: <EditIcon fontSize="inherit" /> },
-              { label: 'Unbond', flow: 'unbond', icon: <EditIcon fontSize="inherit" /> },
-              { label: 'Compound rewards', flow: 'compound', icon: <EditIcon fontSize="inherit" /> },
-              { label: 'Redeem rewards', flow: 'redeem', icon: <EditIcon fontSize="inherit" /> },
+              { label: 'Bond more', flow: 'bondMore', icon: <BondIcon fontSize="inherit" /> },
+              { label: 'Unbond', flow: 'unbond', icon: <UnbondIcon fontSize="inherit" /> },
+              {
+                label: 'Compound rewards',
+                flow: 'compound',
+                icon: <Typography fontWeight={700}>C</Typography>,
+                description: 'Add operator rewards to bond',
+              },
+              {
+                label: 'Redeem rewards',
+                flow: 'redeem',
+                icon: <Typography fontWeight={700}>R</Typography>,
+                description: 'Add your rewards to bonding pool',
+              },
             ]}
           />
         ),