transactions explorer

src/App.tsx

@@ -89,6 +89,23 @@ class App extends React.Component<IProps, IState> {
     this.save("status", status);
   }
 
+  async fetchTransactions() {
+    console.debug(`Fetching transactions`);
+    const hydra = `https://joystream-sumer.indexer.gc.subsquid.io/graphql`;
+    console.debug(`Fetching transactions`);
+    const request = {
+      query: `query{\n  substrateEvents(where: {section_eq: "balances", method_eq: "Transfer"}) {
+   blockNumber
+   section
+   method
+   data\n  }\n}`,
+    };
+
+    let transactions = await axios.post(hydra, request);
+
+    this.save(`transactions`, transactions.data.data.substrateEvents);
+  }
+
   async fetchMints(api: Api, ids: number[]) {
     console.debug(`Fetching mints`);
     let mints = {};
@@ -709,7 +726,7 @@ class App extends React.Component<IProps, IState> {
       else this.setState({ status });
     console.debug(`Loading data`);
     this.loadMembers();
-    "councils categories channels proposals posts threads handles mints tokenomics reports validators nominators stakes stars"
+    "councils categories channels proposals posts threads handles mints tokenomics transactions reports validators nominators stakes stars"
       .split(" ")
       .map((key) => this.load(key));
   }
@@ -793,6 +810,7 @@ class App extends React.Component<IProps, IState> {
     this.connectEndpoint();
     this.fetchStorageProviders();
     this.fetchAssets();
+    this.fetchTransactions();
     setTimeout(() => this.fetchTokenomics(), 30000);
     //this.initializeSocket();
   }

src/components/Routes/index.tsx

@@ -13,7 +13,8 @@ import {
   Tokenomics,
   Validators,
   Spending,
-  Storage
+  Storage,
+  Transactions,
 } from "..";
 import { IState } from "../../types";
 
@@ -82,6 +83,11 @@ const Routes = (props: IProps) => {
         path="/storage"
         render={(routeprops) => <Storage {...routeprops} {...props} />}
       />
+      <Route
+        path="/transactions"
+        render={(routeprops) => <Transactions {...routeprops} {...props} />}
+      />
+
       <Route path="/" render={() => <Dashboard {...props} />} />
     </Switch>
   );

src/components/Transactions/Transaction.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Transaction } from "../../types";
+
+const TransactionView = (props: { transaction: Transaction }) => {
+  const { param0, param1, param2 } = props.transaction.data;
+  return (
+    <div className="d-flex flex-row justify-content-between">
+      <div>{param2.value}</div>
+      <div>{param0.value}</div>
+      <div>{param1.value}</div>
+    </div>
+  );
+};
+
+export default TransactionView;

src/components/Transactions/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Loading } from "..";
+import { ListGroup } from "react-bootstrap";
+import TransactionView from "./Transaction";
+
+import { Transaction } from "../../types";
+
+const Transactions = (props: { transactions: Transaction[] }) => {
+  const { transactions } = props;
+
+  if (!transactions) return <Loading target="transactions" />;
+
+  return (
+    <div>
+      <h3>Transactions</h3>
+      <ListGroup>
+        <ListGroup.Item key={`header`}>
+          <div className="d-flex flex-row justify-content-between">
+            <div>tJOY</div>
+            <div>from</div>
+            <div>to</div>
+          </div>
+        </ListGroup.Item>
+
+        {transactions.map((t, i) => (
+          <ListGroup.Item key={i}>
+            <TransactionView transaction={t} />
+          </ListGroup.Item>
+        ))}
+      </ListGroup>
+    </div>
+  );
+};
+
+export default Transactions;

src/components/index.ts

@@ -17,6 +17,7 @@ export { default as Member } from "./Members/Member";
 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 Validators } from "./Validators";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";

src/types.ts

@@ -274,6 +274,17 @@ export interface Event {
   };
 }
 
+export interface Transaction {
+  blockNumber: number;
+  section: string;
+  method: string;
+  data: {
+    param0: { type: string; value: string };
+    param1: { type: string; value: string };
+    param2: { type: string; value: number };
+  };
+}
+
 export interface CalendarItem {
   id: number;
   group: number;