feat: improve earn report (#409)

src/components/EarnReport.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import * as Api from '../libs/JmWalletApi'
 // @ts-ignore
 import { useSettings } from '../context/SettingsContext'
+import Balance from './Balance'
 import styles from './EarnReport.module.css'
 
 interface YielgenReportTableProps {
@@ -15,6 +16,37 @@ const YieldgenReportTable = ({ lines, maxAmountOfRows = 15 }: YielgenReportTable
   const { t } = useTranslation()
   const settings = useSettings()
 
+  const reportHeadingMap: { [name: string]: { heading: string; format?: string } } = {
+    timestamp: {
+      heading: t('earn.report.heading_timestamp'),
+    },
+    'cj amount/satoshi': {
+      heading: t('earn.report.heading_cj_amount'),
+      format: 'balance',
+    },
+    'my input count': {
+      heading: t('earn.report.heading_input_count'),
+    },
+    'my input value/satoshi': {
+      heading: t('earn.report.heading_input_value'),
+      format: 'balance',
+    },
+    'cjfee/satoshi': {
+      heading: t('earn.report.heading_cj_fee'),
+      format: 'balance',
+    },
+    'earned/satoshi': {
+      heading: t('earn.report.heading_earned'),
+      format: 'balance',
+    },
+    'confirm time/min': {
+      heading: t('earn.report.heading_confirm_time'),
+    },
+    'notes\n': {
+      heading: t('earn.report.heading_notes'),
+    },
+  }
+
   const empty = !lines || lines.length < 2
   const headers = empty ? [] : lines[0].split(',')
 
@@ -37,7 +69,7 @@ const YieldgenReportTable = ({ lines, maxAmountOfRows = 15 }: YielgenReportTable
             <thead>
               <tr>
                 {headers.map((name, index) => (
-                  <th key={`header_${index}`}>{name}</th>
+                  <th key={`header_${index}`}>{reportHeadingMap[name]?.heading || name}</th>
                 ))}
               </tr>
             </thead>
@@ -45,18 +77,17 @@ const YieldgenReportTable = ({ lines, maxAmountOfRows = 15 }: YielgenReportTable
               {visibleLines.map((line, trIndex) => (
                 <tr key={`tr_${trIndex}`}>
                   {line.map((val, tdIndex) => (
-                    <td key={`td_${tdIndex}`}>{val}</td>
+                    <td key={`td_${tdIndex}`}>
+                      {headers[tdIndex] && reportHeadingMap[headers[tdIndex]]?.format === 'balance' ? (
+                        <Balance valueString={val} convertToUnit={settings.unit} showBalance={settings.showBalance} />
+                      ) : (
+                        val
+                      )}
+                    </td>
                   ))}
                 </tr>
               ))}
             </tbody>
-            <tfoot>
-              <tr>
-                {headers.map((name, index) => (
-                  <th key={`footer_${index}`}>{name}</th>
-                ))}
-              </tr>
-            </tfoot>
           </rb.Table>
           <div className="my-1 d-flex justify-content-end">
             <small>

src/i18n/locales/en/translation.json

@@ -252,7 +252,15 @@
     "text_stopping": "Stopping",
     "button_show_report": "Show earnings report",
     "report": {
-      "title": "Earnings Report"
+      "title": "Earnings Report",
+      "heading_timestamp": "Timestamp",
+      "heading_cj_amount": "Transaction Amount",
+      "heading_input_count": "No. of UTXOs input by me",
+      "heading_input_value": "Amount input by me",
+      "heading_cj_fee": "CoinJoin Fee",
+      "heading_earned": "Earned",
+      "heading_confirm_time": "Confirmation Time (mins)",
+      "heading_notes": "Notes"
     },
     "title_fidelity_bonds": "Create a Fidelity Bond",
     "title_fidelity_bond_exists": "Your Fidelity Bonds",