feat: add descriptions to risk bundle table headers

public/locales/en/application.json

@@ -35,7 +35,13 @@
         "duration": "Min / max duration",
         "apr": "APR",
         "capacity": "Available",
-        "stake_usage": "Stakes"
+        "stake_usage": "Stakes",
+        "help": {
+            "apr": "Annual percentage return used to price protection in this risk bundle.",
+            "suminsured": "Minimum and maximum {{currency}} amount that can be protected by this risk bundle.",
+            "duration": "Minimum and maximum coverage duration supported by this risk bundle.",
+            "capacity": "Remaining {{currency}} capacity available for new protections in this risk bundle."
+        }
     },
     "confirmation": {
         "alert": {

public/locales/en/bundles.json

@@ -12,6 +12,12 @@
             "created": "Created",
             "stake_usage": "Stakes",
             "apr": "APR"
+        },
+        "help": {
+            "apr": "Annual percentage return earned by the risk bundle owner.",
+            "balance": "Total capital currently held by the risk bundle.",
+            "capacity": "Capital still available for new protections.",
+            "stake_usage": "How much of the DIP-supported capacity is currently used by locked capital."
         }
     },  
     "no_bundles": "No risk bundles found - \u00A0<0>click here</0>\u00A0to create a new risk bundle",
@@ -79,4 +85,4 @@
         "bundle_at_capacity": "The risk bundle is at capacity and cannot accept any more funds.",
         "no_wallet_connected": "Please connect your wallet to view bundles"
     }
-}
+}

src/components/application/available_bundle_list.tsx

@@ -1,4 +1,4 @@
-import { Table, TableHead, TableRow, TableCell, TableBody, Typography, LinearProgress, styled, tableCellClasses, Alert } from "@mui/material";
+import { Table, TableHead, TableRow, TableCell, TableBody, Typography, LinearProgress, styled, tableCellClasses, Alert, Tooltip } from "@mui/material";
 import { blue, blueGrey } from "@mui/material/colors";
 import Paper from "@mui/material/Paper";
 import TableContainer from "@mui/material/TableContainer";
@@ -64,6 +64,16 @@ export function AvailableBundleList(props: AvailableBundleListProps) {
         );
     }
 
+    function headerWithTooltip(label: string, tooltip: string) {
+        return (
+            <Tooltip title={tooltip} arrow>
+                <Typography component="span" sx={{ cursor: 'help', textDecoration: 'underline dotted' }}>
+                    {label}
+                </Typography>
+            </Tooltip>
+        );
+    }
+
     return (<>
             <Typography variant="subtitle2" sx={{ mb: 1 }}>{t('bundles.title')}</Typography>
             {progress}
@@ -73,10 +83,18 @@ export function AvailableBundleList(props: AvailableBundleListProps) {
                         <TableRow>
                             <StyledTableCell>{t('bundles.id')}</StyledTableCell>
                             <StyledTableCell>{t('bundles.name')}</StyledTableCell>
-                            <StyledTableCell align="right">{t('bundles.apr')}</StyledTableCell>
-                            <StyledTableCell align="right">{t('bundles.suminsured', { currency: props.currency })}</StyledTableCell>
-                            <StyledTableCell align="right">{t('bundles.duration')}</StyledTableCell>
-                            <StyledTableCell align="right">{t('bundles.capacity', { currency: props.currency })}</StyledTableCell>
+                            <StyledTableCell align="right">
+                                {headerWithTooltip(t('bundles.apr'), t('bundles.help.apr'))}
+                            </StyledTableCell>
+                            <StyledTableCell align="right">
+                                {headerWithTooltip(t('bundles.suminsured', { currency: props.currency }), t('bundles.help.suminsured', { currency: props.currency }))}
+                            </StyledTableCell>
+                            <StyledTableCell align="right">
+                                {headerWithTooltip(t('bundles.duration'), t('bundles.help.duration'))}
+                            </StyledTableCell>
+                            <StyledTableCell align="right">
+                                {headerWithTooltip(t('bundles.capacity', { currency: props.currency }), t('bundles.help.capacity', { currency: props.currency }))}
+                            </StyledTableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
@@ -169,4 +187,4 @@ export function AvailableBundleRow(compProps: AvailableBundleRowProps) {
             <TableCell align="right" data-testid="bundle-duration">{bundle.minDuration / 86400 } / {bundle.maxDuration / 86400 } {t('days')}</TableCell>
             <TableCell align="right" data-testid="bundle-remainingCapacity">{remainingCapacity(bundle)}</TableCell>
         </StyledTableRow>);
-}
+}

src/components/bundles/bundles_list_desktop.tsx

@@ -1,6 +1,6 @@
 import { faEye, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Alert, Container, FormControlLabel, Switch, useTheme } from "@mui/material";
+import { Alert, Container, FormControlLabel, Switch, Tooltip, useTheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import LinearProgress from "@mui/material/LinearProgress";
@@ -50,6 +50,16 @@ export default function BundlesListDesktop(props: BundlesProps) {
         setShowAllBundles(!showAllBundles);
     }
 
+    function renderHeaderWithTooltip(label: string, tooltip: string) {
+        return (
+            <Tooltip title={tooltip} arrow>
+                <Typography component="span" sx={{ cursor: 'help', textDecoration: 'underline dotted', fontWeight: 500 }}>
+                    {label}
+                </Typography>
+            </Tooltip>
+        );
+    }
+
     const columns: GridColDef[] = [
         { 
             field: 'id', 
@@ -80,6 +90,7 @@ export default function BundlesListDesktop(props: BundlesProps) {
         {
             field: 'apr',
             headerName: t('table.header.apr'),
+            renderHeader: () => renderHeaderWithTooltip(t('table.header.apr'), t('table.help.apr')),
             flex: 0.3,
             valueFormatter: (value: number) => {
                 return `${value.toFixed(2)}%`
@@ -89,6 +100,7 @@ export default function BundlesListDesktop(props: BundlesProps) {
         { 
             field: 'balance', 
             headerName: t('table.header.balance'), 
+            renderHeader: () => renderHeaderWithTooltip(t('table.header.balance'), t('table.help.balance')),
             flex: 0.65,
             valueGetter: (value, _row) => BigNumber.from(value),
             valueFormatter: (value: BigNumber) => {
@@ -100,6 +112,7 @@ export default function BundlesListDesktop(props: BundlesProps) {
         { 
             field: 'capacity', 
             headerName: t('table.header.capacity'), 
+            renderHeader: () => renderHeaderWithTooltip(t('table.header.capacity'), t('table.help.capacity')),
             flex: 0.65,
             valueGetter: (value, _row) => BigNumber.from(value),
             valueFormatter: (value: BigNumber) => {
@@ -161,6 +174,7 @@ export default function BundlesListDesktop(props: BundlesProps) {
         columns.splice(6, 0, {
             field: 'stakeUsage', 
             headerName: t('table.header.stake_usage'), 
+            renderHeader: () => renderHeaderWithTooltip(t('table.header.stake_usage'), t('table.help.stake_usage')),
             flex: 0.3,
             valueGetter: (_value, row) => {
                 const capitalSupport = row.capitalSupport !== undefined ? BigNumber.from(row.capitalSupport) : undefined;
@@ -255,4 +269,4 @@ export default function BundlesListDesktop(props: BundlesProps) {
                 />
         </>
     );
-}
+}