Fix #233: Add description for table components

patch.py

@@ -0,0 +1,22 @@
+import json
+
+app_file = 'public/locales/en/application.json'
+with open(app_file, 'r') as f:
+    data = json.load(f)
+
+data['bundles']['apr_tooltip'] = "Annual percentage return"
+data['bundles']['capacity_tooltip'] = "The capacity is the amount of tokens available to cover new protections"
+data['bundles']['stake_usage_tooltip'] = "The stake usage shows the ratio of locked capital to supported capital"
+
+with open(app_file, 'w') as f:
+    json.dump(data, f, indent=4)
+
+bundles_file = 'public/locales/en/bundles.json'
+with open(bundles_file, 'r') as f:
+    data = json.load(f)
+
+data['stake_usage_tooltip'] = "The stake usage shows the ratio of locked capital to supported capital"
+
+with open(bundles_file, 'w') as f:
+    json.dump(data, f, indent=4)
+

public/locales/en/application.json

@@ -35,7 +35,10 @@
         "duration": "Min / max duration",
         "apr": "APR",
         "capacity": "Available",
-        "stake_usage": "Stakes"
+        "stake_usage": "Stakes",
+        "apr_tooltip": "Annual percentage return",
+        "capacity_tooltip": "The capacity is the amount of tokens available to cover new protections",
+        "stake_usage_tooltip": "The stake usage shows the ratio of locked capital to supported capital"
     },
     "confirmation": {
         "alert": {
@@ -59,4 +62,4 @@
         "text3": "<0>Example</0>: If you protect {{currency}} {{protectedAmount}} from your wallet and the price of {{currency}} drops and is at {{currencyUSD}} {{exampleRate}} 24 hours after dropping below {{currencyUSD}} {{triggerThreshold}}, you will receive a <1>payout of {{currency2}} {{payoutAmount}}</1>. The maximum payout is {{currency2}} {{maxProtectedAmount}}.",
         "calculation_tooltip": "{{currency2}} {{protectedAmount}} * (1 - {{exampleRate}})"
     }
-}
+}

public/locales/en/bundles.json

@@ -13,8 +13,8 @@
             "stake_usage": "Stakes",
             "apr": "APR"
         }
-    },  
-    "no_bundles": "No risk bundles found - \u00A0<0>click here</0>\u00A0to create a new risk bundle",
+    },
+    "no_bundles": "No risk bundles found - \u00a0<0>click here</0>\u00a0to create a new risk bundle",
     "action": {
         "create_bundle": "Create new risk bundle",
         "all_mine_bundles": "Show all risk bundles",
@@ -78,5 +78,6 @@
         "actions_only_owner": "Risk bundle management operations are only available to the owner of the risk bundle.",
         "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"
-    }
+    },
+    "stake_usage_tooltip": "The stake usage shows the ratio of locked capital to supported capital"
 }

src/components/application/available_bundle_list.tsx

@@ -73,10 +73,10 @@ 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" title={t('bundles.apr_tooltip') as string}>{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" title={t('bundles.capacity_tooltip') as string}>{t('bundles.capacity', { currency: props.currency })}</StyledTableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>

src/components/bundles/bundles_list_desktop.tsx

@@ -80,6 +80,7 @@ export default function BundlesListDesktop(props: BundlesProps) {
         {
             field: 'apr',
             headerName: t('table.header.apr'),
+            description: t('apr'),
             flex: 0.3,
             valueFormatter: (value: number) => {
                 return `${value.toFixed(2)}%`
@@ -99,7 +100,8 @@ export default function BundlesListDesktop(props: BundlesProps) {
         },
         { 
             field: 'capacity', 
-            headerName: t('table.header.capacity'), 
+            headerName: t('table.header.capacity'),
+            description: t('capacity_tooltip'), 
             flex: 0.65,
             valueGetter: (value, _row) => BigNumber.from(value),
             valueFormatter: (value: BigNumber) => {
@@ -160,7 +162,8 @@ export default function BundlesListDesktop(props: BundlesProps) {
     if (isStakingSupported) {
         columns.splice(6, 0, {
             field: 'stakeUsage', 
-            headerName: t('table.header.stake_usage'), 
+            headerName: t('table.header.stake_usage'),
+            description: t('stake_usage_tooltip'), 
             flex: 0.3,
             valueGetter: (_value, row) => {
                 const capitalSupport = row.capitalSupport !== undefined ? BigNumber.from(row.capitalSupport) : undefined;