more UI improvements

src/components/Burners/index.tsx

@@ -3,6 +3,7 @@ import { Table} from "react-bootstrap";
 import axios from "axios";
 
 import { alternativeBackendApis } from "../../config"
+import { numberWithCommas } from "../../lib/util"
 
 import { Burner } from "../../types";
 
@@ -36,7 +37,7 @@ class Burners extends React.Component<IProps, IState> {
         <h3>Top Token Burners</h3>
         <>
         { (!burners || burners.length === 0) ? <h4>No records found</h4> :
-          <Table striped bordered hover size="sm">
+          <Table striped bordered hover size="sm" variant="dark">
           <thead>
             <tr>
               <th>Wallet</th>
@@ -45,9 +46,9 @@ class Burners extends React.Component<IProps, IState> {
           </thead>
           <tbody>
             {burners.map(brn => (
-              <tr key={brn.wallet}>
+              <tr key={brn.wallet} style={{textAlign: "left"}}>
                 <td>{brn.wallet}</td>
-                <td>{brn.totalburned}</td>
+                <td>{numberWithCommas(brn.totalburned)}</td>
               </tr>
             ))}
           </tbody>

src/components/Transactions/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Form, Table} from "react-bootstrap";
 import axios from "axios";
-
+import { numberWithCommas } from "../../lib/util"
 import { alternativeBackendApis } from "../../config"
 
 import { Transaction } from "../../types";
@@ -48,10 +48,11 @@ class Transactions extends React.Component<IProps, IState> {
     const { address, transactions } = this.state;
 
     return (
-      <div className="box">
+      <div className="box" style={{textAlign: "left"}}>
         <h3>Transactions</h3>
         <Form>
           <Form.Group className="mb-3" controlId="formBasicEmail">
+            <Form.Label>Wallet address</Form.Label>
             <Form.Control type="address" placeholder="Wallet account" onChange={(e) => this.accountTxFilterChanged(e.target.value)} value={address}/>
             <Form.Text className="text-muted">
               48 character string starting with 5
@@ -60,7 +61,7 @@ class Transactions extends React.Component<IProps, IState> {
         </Form>
         <>
         { (!transactions || transactions.length === 0) ? <h4>No records found</h4> :
-          <Table striped bordered hover size="sm">
+          <Table striped bordered hover size="sm" variant="dark">
             <thead>
               <tr>
                 <th>tJOY</th>
@@ -71,8 +72,8 @@ class Transactions extends React.Component<IProps, IState> {
             </thead>
             <tbody>
               {transactions.map(tx => (
-                      <tr key={tx.id}>
-                        <td>{tx.amount}</td>
+                      <tr key={tx.id} style={{textAlign: "left"}}>
+                        <td>{numberWithCommas(tx.amount)}</td>
                         <td>{tx.from}</td>
                         <td>{tx.to}</td>
                         <td>{tx.block}</td>

src/lib/util.ts

@@ -55,3 +55,6 @@ export const exit = (log: (s: string) => void) => {
   log("\nNo connection, exiting.\n");
   process.exit();
 };
+
+export const numberWithCommas = (x: number): string => 
+  x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")