Updating UI

package.json

@@ -10,8 +10,9 @@
     "react-particles-js": "^2.4.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "2.1.5",
+    "react-typist": "^2.0.5",
     "styled-components": "^4.3.2",
-    "truffle-hdwallet-provider": "^1.0.14",
+    "truffle-hdwallet-provider": "^1.0.15",
     "web3": "^1.0.0-beta.46"
   },
   "scripts": {

src/App.css

@@ -10,27 +10,27 @@
     color: white;
 }
 
-.bg {
-  color: powderblue;
-}
-
 div {
     top: '-15px';
 }
 
+span {
+  font-size: 24px;
+}
+
 body {
   margin: 0;
   background: url('./bg.jpg');
-  background-size: 1440px 800px;
+  background-size: auto;
   background-repeat:no-repeat;
- display: compact;
-  font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  padding-bottom: 50px;
+  display: compact;
+  font: 13px/18px "Consolas", monaco, monospace;;
+  padding-top: 200px;
 }
 
 #main {
   border: 1px solid #000000;
   display: flex;
   flex-wrap: wrap;
   align-content:center;
-}
+}

src/App.js

@@ -4,19 +4,13 @@ import auction from "./auction";
 import { Layout } from "./Layout";
 import "./App.css";
 import { Button } from "react-bootstrap";
+import Typist from 'react-typist';
 
 class App extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      i: 0,
-      maintxt: "Decentralized Auction on the Ethereum Blockchain",
-      speed: 100,
-      displaytxt: "",
-      tmpTitle: "Calculating number of active users...",
-      fullTitle: "There are currently {`this.state.bids.length`} ",
-      j: 0,
       bids: [],
       bidders: [],
       seller: "",
@@ -28,27 +22,16 @@ class App extends Component {
   }
 
   async componentDidMount() {
-    this.timeout = setInterval(() => {
-      if (this.state.i < this.state.maintxt.length) {
-        let newI = this.state.i + 1;
-        this.setState({ i: newI });
-      }
-    }, 80);
-    this.timeout = setInterval(() => {
-      if (this.state.j < this.state.tmpTitle.length) {
-        let newJ = this.state.j + 1;
-        this.setState({ j: newJ });
-      }
-    }, 200);
-
+    const bids = await auction.methods.getBids().call();
     const seller = await auction.methods.seller().call();
     const highestBidder = await auction.methods.getHighestBidder().call();
     const bidders = await auction.methods.getBidders().call();
     const auctionValue = await web3.eth.getBalance(
-      "0x4098878608e26825d248f7996267B49f2d1Bd49e"
+      "0x8B167cf1754005F502774Ffe63857C8C66B5B9f1"
     );
 
     this.setState({
+      bids,
       seller,
       highestBidder,
       bidders,
@@ -91,30 +74,28 @@ class App extends Component {
   };
 
   render() {
-    let displaytext = this.state.maintxt.substring(0, this.state.i);
-    let displayTitle = "";
-    if (this.state.j >= this.state.tmpTitle.length) {
-      displayTitle = this.state.fullTitle;
-    } else {
-      displayTitle = this.state.tmpTitle.substring(0, this.state.j);
-    }
     return (
       <React.Fragment>
         <Layout>
-          <div class="text-center">
-              <h2 class="text-white justify-center text-center" >{displaytext}</h2>
-                <h5 class="w-full block text-white text-5xl font-fancy font-bold text-center justify-center mb-8">
-                  There are currently {this.state.bids.length} people entered,
-                  competing to buy{" "}
-                  {web3.utils.fromWei(this.state.auctionValue, "ether")} ether{" "}
-                </h5>
+          <div className="text-center">
+              <Typist> <span className="text-white justify-center text-center" > Decentralized Auction on Ethereum.</span></Typist>
+              <br />
+                <Typist> 
+                  <span className="w-full block text-white text-5xl font-fancy font-bold text-center justify-center mb-8">
+                  There are currently {this.state.bidders.length} people entered,
+                  competing to bid {" "}
+                  {web3.utils.fromWei(this.state.auctionValue, "ether")} ether.{" "}
+                  </span>
+                </Typist>
 
                 <hr/>
 
                 <form onSubmit={this.onEnter} >
-                  <h4 class="text-white justify-center" >Join the Auction</h4>
+                  <h4 className="text-white justify-center" >Join the Auction: </h4>
+                  <br />
                   <div>
-                    <label class="text-white justify-center font-bold text-center">Bid amount: </label>
+                    <label className="text-white justify-center font-bold text-center">Bid amount: </label>
+
                     <input
                       value={this.state.value}
                       onChange={event =>
@@ -123,12 +104,14 @@ class App extends Component {
                     />
 
                   </div>
-                  <Button class= "text-center">Make a bid</Button>
+                  <br />
+                  <button className= "text-center">Make a bid </button>
                   <hr/>
                 </form>
-                <h4 class="text-white justify-center" >Reaveal the Highest Bidder</h4>
-                <Button onClick={this.onClick} class = "text-center">Highest Bidder</Button>
-                <h4>{this.state.message}</h4>
+                <h4 className="text-white justify-center" >Reaveal the Highest Bidder: </h4>
+                <br />
+                <button onClick={this.onClick} className = "text-center">Highest Bidder</button>
+                <h4 className="text-white justify-center">{this.state.message}</h4>
           </div>
         </Layout>
       </React.Fragment>

src/auction.js

@@ -1,6 +1,6 @@
 import web3 from "./web3";
 
-let auctionABI = [
+let abi = [
   {
     "constant": true,
     "inputs": [],
@@ -107,8 +107,22 @@ let auctionABI = [
     "payable": false,
     "stateMutability": "view",
     "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "getBids",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256[]"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
   }
 ];
-let auctionAddress = "0x4098878608e26825d248f7996267B49f2d1Bd49e";
+let address = "0x8B167cf1754005F502774Ffe63857C8C66B5B9f1";
 
-export default new web3.eth.Contract(auctionABI, auctionAddress);
+export default new web3.eth.Contract(abi, address);

src/web3.js

@@ -1,3 +1,5 @@
 import Web3 from 'web3';
-const web3 = new Web3(window.web3.currentProvider); 
+
+const web3 = new Web3(window.web3.currentProvider);
+
 export default web3;

truffle/build/contracts/Migrations.json

@@ -193,7 +193,7 @@
                         "name": "msg",
                         "nodeType": "Identifier",
                         "overloadedDeclarations": [],
-                        "referencedDeclaration": 189,
+                        "referencedDeclaration": 198,
                         "src": "159:3:0",
                         "typeDescriptions": {
                           "typeIdentifier": "t_magic_message",
@@ -278,7 +278,7 @@
                         "name": "msg",
                         "nodeType": "Identifier",
                         "overloadedDeclarations": [],
-                        "referencedDeclaration": 189,
+                        "referencedDeclaration": 198,
                         "src": "210:3:0",
                         "typeDescriptions": {
                           "typeIdentifier": "t_magic_message",
@@ -839,7 +839,7 @@
                         "name": "msg",
                         "nodeType": "Identifier",
                         "overloadedDeclarations": [],
-                        "referencedDeclaration": 189,
+                        "referencedDeclaration": 198,
                         "src": "159:3:0",
                         "typeDescriptions": {
                           "typeIdentifier": "t_magic_message",
@@ -924,7 +924,7 @@
                         "name": "msg",
                         "nodeType": "Identifier",
                         "overloadedDeclarations": [],
-                        "referencedDeclaration": 189,
+                        "referencedDeclaration": 198,
                         "src": "210:3:0",
                         "typeDescriptions": {
                           "typeIdentifier": "t_magic_message",
@@ -1366,9 +1366,16 @@
     "name": "solc",
     "version": "0.4.19+commit.c4cbbb05.Emscripten.clang"
   },
-  "networks": {},
-  "schemaVersion": "3.0.2",
-  "updatedAt": "2019-07-18T20:24:05.597Z",
+  "networks": {
+    "3": {
+      "events": {},
+      "links": {},
+      "address": "0x3f9F508b665147Cc43beCfcBF11d6cF9B4AAB365",
+      "transactionHash": "0xed9d61ce1ee8228ac22d9894cba08982937ebee49e1e9eaa9c77c29bcb4c97f5"
+    }
+  },
+  "schemaVersion": "3.0.11",
+  "updatedAt": "2019-08-02T20:49:53.307Z",
   "devdoc": {
     "methods": {}
   },

truffle/contracts/auction.sol

@@ -17,8 +17,8 @@ contract Auction {
       seller = msg.sender;
   }
 
-  function submitBid() public payable {
-        require(msg.value > 0.01 ether);
+  function submitBid() public payable {        
+        // initializing bidders & bids.
         bidders.push(msg.sender);
         bids.push(msg.value);
   }
@@ -33,6 +33,7 @@ contract Auction {
             highestBid = bids[i];
     }
   }
+
    highestBidder = bidders[i];
    highestBidder.transfer(highestBid);
 
@@ -44,7 +45,11 @@ contract Auction {
     return highestBidder;
   }
 
-  function getBidders() view public returns (address[] memory){
+  function getBidders() view public returns (address[]){
       return bidders;
   }
+
+  function getBids() view public returns (uint256[]) {
+      return bids;
+  }
 }

truffle/migrations/2_deploy_contract.js

@@ -1,5 +1,5 @@
 var auction = artifacts.require("./auction.sol");
 
 module.exports = function(deployer) {
-  deployer.deploy(auction, 1, {gas: 6700000});
+  deployer.deploy(auction);
 };