Modified Transactions View to filter by account

src/App.tsx

@@ -89,22 +89,6 @@ 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`);
@@ -813,7 +797,6 @@ class App extends React.Component<IProps, IState> {
     this.connectEndpoint();
     this.fetchStorageProviders();
     this.fetchAssets();
-    this.fetchTransactions();
     setTimeout(() => this.fetchTokenomics(), 30000);
     //this.initializeSocket();
   }

src/components/Transactions/Transaction.tsx

@@ -3,12 +3,13 @@ import React from "react";
 import { Transaction } from "../../types";
 
 const TransactionView = (props: { transaction: Transaction }) => {
-  const { param0, param1, param2 } = props.transaction.data;
+  const {transaction} = props
   return (
-    <div className="d-flex flex-row justify-content-between">
-      <div>{param2.value}</div>
-      <div>{param0.value}</div>
-      <div>{param1.value}</div>
+    <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>
   );
 };

src/components/Transactions/index.tsx

@@ -1,35 +1,89 @@
 import React from "react";
 import { Loading } from "..";
-import { ListGroup } from "react-bootstrap";
+import { ListGroup, Form, Button} from "react-bootstrap";
 import TransactionView from "./Transaction";
+import axios from "axios";
 
 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} />
+interface IProps {
+}
+
+interface IState {
+  address: string
+  transactions: Transaction[];
+}
+
+class Transactions extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      address: '',
+      transactions: [] as Transaction[]
+    };
+    this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
+  }
+
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
+    let { address } = this.state;
+
+    if(address !== prevState.address) {
+
+      console.log(`Fetching transactions`);
+      const backend = `https://validators.joystreamstats.live/transactions?addr=${address}`;
+
+      axios.get(backend).then((response) => {this.setState({...this.state, transactions: response.data})});
+    }
+  }
+
+  accountTxFilterChanged(address: string) {
+    if(this.state.address !== address) {
+      console.log(`accountTxFilterChanged ${address}`);
+      this.setState({...this.state, address: address });
+    }
+  }
+  
+  render() {
+
+    const { address, transactions } = this.state;
+
+    if (!transactions) return <Loading target="transactions" />;
+
+    return (
+      <div>
+        <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
+            </Form.Text>
+          </Form.Group>
+
+          <Button variant="primary" onClick={() => this.accountTxFilterChanged(address)}>
+            Submit
+          </Button>
+        </Form>
+        <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>
-        ))}
-      </ListGroup>
-    </div>
-  );
-};
+          {transactions.map(tx => (
+            <ListGroup.Item key={tx.id}>
+              <TransactionView transaction={tx} key={tx.id}/>
+            </ListGroup.Item>
+          ))}
+        </ListGroup>
+      </div>
+    );
+  }
+}
 
 export default Transactions;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/types.ts

@@ -275,14 +275,11 @@ 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 };
-  };
+  id: number;
+  block: number;
+  from: string;
+  to: string;
+  amount: number;
 }
 
 export interface CalendarItem {