Top Burners Component

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

@@ -41,6 +41,8 @@ const Dashboard = (props: IProps) => {
           <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

@@ -15,6 +15,7 @@ import {
   Spending,
   Storage,
   Transactions,
+  Burners,
 } from "..";
 import { IState } from "../../types";
 
@@ -87,6 +88,10 @@ const Routes = (props: IProps) => {
         path="/transactions"
         render={(routeprops) => <Transactions {...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";
 

src/components/index.ts

@@ -18,6 +18,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;