Better look and feel

src/components/Burners/index.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { ListGroup} from "react-bootstrap";
+import { Table} from "react-bootstrap";
 import axios from "axios";
 
+import { alternativeBackendApis } from "../../config"
+
 import { Burner } from "../../types";
 
 interface IProps {
@@ -21,37 +23,35 @@ class Burners extends React.Component<IProps, IState> {
   }
 
   componentDidMount() {
-      const backend = `https://validators.joystreamstats.live/burners`;
-
+      const backend = `${alternativeBackendApis}/burners`;
       axios.get(backend).then((response) => {this.setState({burners: response.data})});
   }
 
   
   render() {
-
     const { burners } = this.state;
 
     return (
-      <div>
+      <div className="box">
         <h3>Top Token Burners</h3>
         <>
-        { (!burners || burners.length === 0) ? <div/> :
-        <ListGroup>
-          <ListGroup.Item key={`header`}>
-            <div className="d-flex flex-row justify-content-between">
-              <div>Wallet</div>
-              <div>Amount Burned</div>
-            </div>
-          </ListGroup.Item>
-          {burners.map(brn => (
-            <ListGroup.Item key={brn.wallet}>
-                <div className="d-flex flex-row justify-content-between" key={brn.wallet}>
-                <div>{brn.wallet}</div>
-                <div>{brn.totalburned}</div>
-                </div>
-            </ListGroup.Item>
-          ))}
-        </ListGroup>
+        { (!burners || burners.length === 0) ? <h4>No records found</h4> :
+          <Table striped bordered hover size="sm">
+          <thead>
+            <tr>
+              <th>Wallet</th>
+              <th>Amount Burned</th>
+            </tr>
+          </thead>
+          <tbody>
+            {burners.map(brn => (
+              <tr key={brn.wallet}>
+                <td>{brn.wallet}</td>
+                <td>{brn.totalburned}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
         } </>
       </div>
     );

src/components/Transactions/Transaction.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-import { Transaction } from "../../types";
-
-const TransactionView = (props: { transaction: Transaction }) => {
-  const {transaction} = props
-  return (
-    <div className="d-flex flex-row justify-content-between" key={transaction.id}>
-      <div>{transaction.amount}</div>
-      <div>{transaction.from}</div>
-      <div>{transaction.to}</div>
-      <div>{transaction.block}</div>
-    </div>
-  );
-};
-
-export default TransactionView;

src/components/Transactions/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { ListGroup, Form} from "react-bootstrap";
-import TransactionView from "./Transaction";
+import { Form, Table} from "react-bootstrap";
 import axios from "axios";
 
+import { alternativeBackendApis } from "../../config"
+
 import { Transaction } from "../../types";
 
 interface IProps {
@@ -30,7 +31,7 @@ class Transactions extends React.Component<IProps, IState> {
     if(address !== prevState.address) {
 
       console.log(`Fetching transactions`);
-      const backend = `https://validators.joystreamstats.live/transactions?addr=${address}`;
+      const backend = `${alternativeBackendApis}/transactions?addr=${address}`;
 
       axios.get(backend).then((response) => {this.setState({...this.state, transactions: response.data})});
     }
@@ -38,7 +39,6 @@ class Transactions extends React.Component<IProps, IState> {
 
   accountTxFilterChanged(address: string) {
     if(this.state.address !== address) {
-      console.log(`accountTxFilterChanged ${address}`);
       this.setState({...this.state, address: address });
     }
   }
@@ -48,11 +48,10 @@ class Transactions extends React.Component<IProps, IState> {
     const { address, transactions } = this.state;
 
     return (
-      <div>
+      <div className="box">
         <h3>Transactions</h3>
         <Form>
           <Form.Group className="mb-3" controlId="formBasicEmail">
-            <Form.Label>Email 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,22 +59,27 @@ class Transactions extends React.Component<IProps, IState> {
           </Form.Group>
         </Form>
         <>
-        { (!transactions || transactions.length === 0) ? <div/> :
-        <ListGroup>
-          <ListGroup.Item key={`header`}>
-            <div className="d-flex flex-row justify-content-between">
-              <div>tJOY</div>
-              <div>from</div>
-              <div>to</div>
-              <div>block</div>
-            </div>
-          </ListGroup.Item>
-          {transactions.map(tx => (
-            <ListGroup.Item key={tx.id}>
-              <TransactionView transaction={tx} key={tx.id}/>
-            </ListGroup.Item>
-          ))}
-        </ListGroup>
+        { (!transactions || transactions.length === 0) ? <h4>No records found</h4> :
+          <Table striped bordered hover size="sm">
+            <thead>
+              <tr>
+                <th>tJOY</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Block</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map(tx => (
+                      <tr key={tx.id}>
+                        <td>{tx.amount}</td>
+                        <td>{tx.from}</td>
+                        <td>{tx.to}</td>
+                        <td>{tx.block}</td>
+                      </tr>
+                    ))}
+            </tbody>
+          </Table>
         } </>
       </div>
     );

src/config.ts

@@ -2,4 +2,6 @@ export const domain = "https://testnet.joystream.org";
 export const wsLocation = "wss://joystreamstats.live:9945";
 export const apiLocation = "https://api.joystreamstats.live/api/v1"
 export const socketLocation = "/socket.io"
-export const hydraLocation = "https://hydra.joystream.org/graphql"
+export const hydraLocation = "https://hydra.joystream.org/graphql"
+// export const alternativeBackendApis = "http://localhost:3000"
+export const alternativeBackendApis = "https://validators.joystreamstats.live"