push

BroProgramerWeb3 · Dec 31, 2023 · 746ee74 · 746ee74
1 parent 5739d3d
commit 746ee74
Show file tree

Hide file tree

Showing 11 changed files with 8,056 additions and 6,920 deletions.
diff --git a/client/dist/index.764980e3.js b/client/dist/index.764980e3.js
diff --git a/client/dist/index.764980e3.js.map b/client/dist/index.764980e3.js.map
diff --git a/client/dist/index.7f1e2dce.css b/client/dist/index.7f1e2dce.css
diff --git a/client/dist/index.7f1e2dce.css.map b/client/dist/index.7f1e2dce.css.map
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<head><link rel="stylesheet" href="/index.7f1e2dce.css">
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/index.7f1e2dce.css">
 </head>
 <body>
     <div id="root"></div>

diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import logo from '../asset/logo.png'
+import { Link } from "react-router-dom";
 
 class App extends Component {
     state = { walletInfo: {}};
@@ -22,6 +23,9 @@ class App extends Component {
                     Welcome to the blockchain...
                 </div>
                 <br />
+                <div><Link to='/blocks'>Blocks</Link></div>
+                <div><Link to='/conduct-transaction'>Conduct a Transaction</Link></div>
+                <br />
                 <div className='WalletInfo'>
                     <div>Address: {address}</div>
                     <div>Balance: {balance}</div>

diff --git a/client/src/components/Blocks.js b/client/src/components/Blocks.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Block from './Block';
+import { Link } from 'react-router-dom';
 
 // this blocks component will make a request to the  
 // blocks endpoint of the backend, which will return data of te blocks
@@ -18,6 +19,7 @@ class Blocks extends Component {
 
         return (
             <div>
+                <div><Link to='/'>Home</Link></div>
                 <h3>Blocks</h3>
                 { 
                     this.state.blocks.map(block => {

diff --git a/client/src/components/conductTransaction.js b/client/src/components/conductTransaction.js
@@ -0,0 +1,48 @@
+import React,  {Component} from 'react';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+
+class ConductTransaction extends Component {
+    state = { recipient: '', amount: 0 };
+
+    // this contains information about what the user typed into the input
+    updateRecipient = event => {
+        this.setState({ recipient: event.target.value });
+    }
+
+    // this contains information about what the user typed into the input
+    updateAmount = event => {
+        this.setState({ amount: Number(event.target.value) });
+    }
+
+    render(){
+        console.log('this.state', this.state);
+
+        return (
+            <div className='ConductTransaction'>
+                <Link to='/'>Home</Link>
+                <h3>Conduct a Transaction</h3>
+                <FormGroup>
+                    <FormControl
+                        input='text'
+                        placeholder='recipient'
+                        value={this.state.recipient}
+                        onChange={this.updateRecipient}
+                    />
+                </FormGroup>
+
+                <FormGroup>
+                    <FormControl
+                        input='number'
+                        placeholder='amount'
+                        value={this.state.amount}
+                        onChange={this.updateAmount}
+                    />
+                </FormGroup>
+            </div>
+        )
+    } 
+};
+
+export default ConductTransaction;
diff --git a/client/src/components/index.css b/client/src/components/index.css
@@ -1,38 +1,40 @@
 body {
-    background-color: rgb(121, 74, 74);
-    color: #bbadad;
+    background-color: #444;
+    color: #fff;
     text-align: center;
     font-size: 20px;
     font-family: 'Quicksand';
     padding-top: 5%;
-    word-wrap: break-word;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
+    word-wrap: break-word;
   }
 
   .logo {
     width: 250px;
-    height: auto;
+    height: 250px;
   }
 
   .App {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #00a399;
-    color: #ffffff;
   }
 
   .WalletInfo {
     width: 500px;
   }
 
   .Block {
-    border: 1px solid #ffffff;
+    border: 1px solid #fff;
     padding: 5%;
     margin: 2%;
-    width: 1000px;
-    height: auto;
   }
-
-  .Transaction {
+  
+  .ConductTransaction {
     padding: 5%;
+    margin: 10%;
+  }
+
+  a, a:hover {
+    color: #e66;
+    text-decoration: underline;
   }
diff --git a/client/src/index.html b/client/src/index.html
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="components/index.css">
 </head>
 <body>
     <div id="root"></div>

diff --git a/client/src/index.js b/client/src/index.js
@@ -6,6 +6,7 @@ import history from './history';
 import App from './components/App';
 import Blocks from './components/Blocks';
 import './components/index.css';
+import ConductTransaction from './components/conductTransaction';
 
 // Using createRoot to create a root for rendering, passing the target root element
 const root = createRoot(document.getElementById('root'));
@@ -16,10 +17,12 @@ root.render(
   // components based on the current URL path.
   <Router history = {history}>
     <Routes>
-      <Route path='/' element = {<App />} />
+      <Route exact={true} path='/' element = {<App />} />
       <Route path='/blocks' element = {<Blocks />} />
+      <Route path='/conduct-transaction' element = {<ConductTransaction />} />
     </Routes>
   </Router>
+
 );