Format token representation

Author: morrigan

src/app/utils.ts

@@ -9,3 +9,19 @@ export const formatBytes = (bytes: number, decimals = 2): string => {
 
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 };
+
+export const formatTokens = (amount: string, decimalPoints = 4): string => {
+    const decimals = 18;
+    const tenPower = BigInt("1000000000000000000");
+    const value = BigInt(amount);
+    let fraction = (value % tenPower).toString();
+    while (fraction.length < decimals) { fraction = '0' + fraction; }
+
+    // Strip trailing 0
+    // @ts-ignore
+    fraction = fraction.match(/^([0-9]*[1-9]|0)(0*)/)[1];
+
+    let whole = (value / tenPower).toString();
+
+    return whole + '.' + fraction.substring(0, decimalPoints);
+};

src/containers/MiningRewards/MiningRewardsContainer.tsx

@@ -4,6 +4,7 @@ import {MiningRewardsChart} from "./MiningRewardsChart";
 import {ChartHeader} from "../../components/ChartHeader/ChartHeader";
 import {RootState} from "../../app/rootReducer";
 import {useSelector} from "react-redux";
+import {formatTokens} from "../../app/utils";
 
 export const MiningRewardsContainer = (): ReactElement => {
     const miningRewards = useSelector((state: RootState) => state.node.miningRewards);
@@ -27,7 +28,7 @@ export const MiningRewardsContainer = (): ReactElement => {
 
             <ChartHeader
                 date={toolTip.updatedAt}
-                values={[{value: toolTip.rewardAmount, icon: <i className="material-icons">account_balance_wallet</i>}]}
+                values={[{value: `${formatTokens(toolTip.rewardAmount)} FIL`, icon: <i className="material-icons">account_balance_wallet</i>}]}
             />
 
             <MiningRewardsChart data={miningRewards.data} onMouseMove={updateTooltip} />

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",