diff --git a/public/locales/en/application.json b/public/locales/en/application.json
index c2f35b9a..9152664b 100644
--- a/public/locales/en/application.json
+++ b/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": {
diff --git a/public/locales/en/bundles.json b/public/locales/en/bundles.json
index e7158223..a9d0728b 100644
--- a/public/locales/en/bundles.json
+++ b/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\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"
}
-}
\ No newline at end of file
+}
diff --git a/src/components/application/available_bundle_list.tsx b/src/components/application/available_bundle_list.tsx
index 0b1882d0..a8bc735e 100644
--- a/src/components/application/available_bundle_list.tsx
+++ b/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 (
+
+
+ {label}
+
+
+ );
+ }
+
return (<>
{t('bundles.title')}
{progress}
@@ -73,10 +83,18 @@ export function AvailableBundleList(props: AvailableBundleListProps) {
{t('bundles.id')}
{t('bundles.name')}
- {t('bundles.apr')}
- {t('bundles.suminsured', { currency: props.currency })}
- {t('bundles.duration')}
- {t('bundles.capacity', { currency: props.currency })}
+
+ {headerWithTooltip(t('bundles.apr'), t('bundles.help.apr'))}
+
+
+ {headerWithTooltip(t('bundles.suminsured', { currency: props.currency }), t('bundles.help.suminsured', { currency: props.currency }))}
+
+
+ {headerWithTooltip(t('bundles.duration'), t('bundles.help.duration'))}
+
+
+ {headerWithTooltip(t('bundles.capacity', { currency: props.currency }), t('bundles.help.capacity', { currency: props.currency }))}
+
@@ -169,4 +187,4 @@ export function AvailableBundleRow(compProps: AvailableBundleRowProps) {
{bundle.minDuration / 86400 } / {bundle.maxDuration / 86400 } {t('days')}
{remainingCapacity(bundle)}
);
-}
\ No newline at end of file
+}
diff --git a/src/components/bundles/bundles_list_desktop.tsx b/src/components/bundles/bundles_list_desktop.tsx
index ca3ee8f0..115df0f3 100644
--- a/src/components/bundles/bundles_list_desktop.tsx
+++ b/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 (
+
+
+ {label}
+
+
+ );
+ }
+
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) {
/>
);
-}
\ No newline at end of file
+}