push

client/src/components/App.js

@@ -1,7 +1,15 @@
 import React, { Component } from "react";
+import Blocks from 'Blocks'
 
 class App extends Component {
-state = { walletInfo: { address: 'fooxv6', balance: 9999 }};
+    state = { walletInfo: {}};
+
+    componentDidMount() {
+        fetch('http://localhost:2000/api/wallet-info')
+            .then(response => response.json())
+            .then(json => this.setState({ walletInfo: json}));
+
+    }
 
     render() {
         const { address, balance } = this.state.walletInfo;
@@ -12,6 +20,8 @@ state = { walletInfo: { address: 'fooxv6', balance: 9999 }};
                 </div>
                 <div>Address: {address}</div>
                 <div>Balance: {balance}</div>
+                <br />
+                <Blocks />
             </div>
         );
     }

client/src/components/Blocks.js

@@ -0,0 +1,30 @@
+import React,  { Component } from 'react';
+
+// this blocks component will make a request to the  
+// blocks endpoint of the backend, which will return data of te blocks
+class Blocks extends Component {
+    state = { blocks: []};
+
+    componentDidMount() {
+        fetch('http://localhost:2000/api/blocks')
+            .then(response  => response.json())
+            .then(json => this.setState({ blocks: json }));
+    }
+
+    render() {
+        console.log('this.state', this.state);
+
+        return (
+            <div>
+                <h3>Blocks</h3>
+                {this.state.blocks.map((block, index) => (
+                    <div key={index}>
+                        <p>Block data: {JSON.stringify(block)}</p>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+}
+
+export default Blocks;