Modified Transactions View to filter by account

src/components/Burners/index.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { ListGroup} from "react-bootstrap";
+import axios from "axios";
+
+import { Burner } from "../../types";
+
+interface IProps {
+}
+
+interface IState {
+  burners: Burner[]
+}
+
+class Burners extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      burners: [] as Burner[]
+    };
+  }
+
+  componentDidMount() {
+      const backend = `https://validators.joystreamstats.live/burners`;
+
+      axios.get(backend).then((response) => {this.setState({burners: response.data})});
+  }
+
+  
+  render() {
+
+    const { burners } = this.state;
+
+    return (
+      <div>
+        <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>
+        } </>
+      </div>
+    );
+  }
+}
+
+export default Burners;

src/components/Dashboard/index.tsx

@@ -34,15 +34,14 @@ const Dashboard = (props: IProps) => {
     <>
       <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column pb-5">
         <div className="back bg-warning d-flex flex-column p-2">
-          <Link to="/calendar">Calendar</Link>
-          <Link to="/curation">Curation</Link>
-          <Link to="/timeline">Timeline</Link>
-          <Link to="/tokenomics">Reports</Link>
-          <Link to="/validators">Validators</Link>
-          <Link to="/validator-report">Validator Report</Link>
-          <Link to="/storage">Storage</Link>
-          <Link to="/spending">Spending</Link>
-          <Link to="/transactions">Transfers</Link>
+          <Link to={`/calendar`}>Calendar</Link>
+          <Link to={`/timeline`}>Timeline</Link>
+          <Link to={`/tokenomics`}>Reports</Link>
+          <Link to={`/validators`}>Validators</Link>
+          <Link to={`/storage`}>Storage</Link>
+          <Link to={`/spending`}>Spending</Link>
+          <Link to={`/transactions`}>Transfers</Link>
+          <Link to={`/burners`}>Top Burners</Link>
           <Link to="/mint">Toolbox</Link>
         </div>
 

src/components/Routes/index.tsx

@@ -17,9 +17,10 @@ import {
   Storage,
   Transactions,
   Bounties,
+  Burners,
 } from "..";
 import { IState } from "../../types";
-import ValidatorReport from '../ValidatorReport/ValidatorReport'
+import ValidatorReport from "../ValidatorReport/ValidatorReport";
 
 interface IProps extends IState {
   toggleStar: (a: string) => void;
@@ -102,6 +103,10 @@ const Routes = (props: IProps) => {
         path="/bounties"
         render={(routeprops) => <Bounties {...routeprops} {...props} />}
       />
+      <Route
+        path="/burners"
+        render={(routeprops) => <Burners {...routeprops} {...props} />}
+      />
       <Route path="/" render={() => <Dashboard {...props} />} />
     </Switch>
   );

src/components/Transactions/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Loading } from "..";
-import { ListGroup, Form, Button} from "react-bootstrap";
+import { ListGroup, Form} from "react-bootstrap";
 import TransactionView from "./Transaction";
 import axios from "axios";
 
@@ -48,8 +47,6 @@ class Transactions extends React.Component<IProps, IState> {
 
     const { address, transactions } = this.state;
 
-    if (!transactions) return <Loading target="transactions" />;
-
     return (
       <div>
         <h3>Transactions</h3>
@@ -61,11 +58,9 @@ class Transactions extends React.Component<IProps, IState> {
               48 character string starting with 5
             </Form.Text>
           </Form.Group>
-
-          <Button variant="primary" onClick={() => this.accountTxFilterChanged(address)}>
-            Submit
-          </Button>
         </Form>
+        <>
+        { (!transactions || transactions.length === 0) ? <div/> :
         <ListGroup>
           <ListGroup.Item key={`header`}>
             <div className="d-flex flex-row justify-content-between">
@@ -81,6 +76,7 @@ class Transactions extends React.Component<IProps, IState> {
             </ListGroup.Item>
           ))}
         </ListGroup>
+        } </>
       </div>
     );
   }

src/components/index.ts

@@ -20,6 +20,7 @@ export { default as Members } from "./Members";
 export { default as Storage } from "./Storage";
 export { default as Tokenomics } from "./Tokenomics";
 export { default as Transactions } from "./Transactions";
+export { default as Burners } from "./Burners";
 export { default as Validators } from "./Validators";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";

src/types.ts

@@ -282,6 +282,11 @@ export interface Transaction {
   amount: number;
 }
 
+export interface Burner {
+  wallet: string,
+  totalburned: number;
+}
+
 export interface CalendarItem {
   id: number;
   group: number;