Added SRC folder

monkrus · Apr 23, 2019 · 56f7d66 · 56f7d66
1 parent fea29ec
commit 56f7d66
Show file tree

Hide file tree

Showing 9 changed files with 232 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -36,7 +36,13 @@ This is good for ganache because truffle is able to show the **exact cause** of
 
 1. Run `npm init` to creaate a `package.json` file
 
+2. Run `npm install`, add lite-server dependencies
 
+4. Run `npm run dev` (lite-server)
+
+3. Create `bs-config.json` file for lite-server
+
+4.
 
 
 

diff --git a/bs-config.json b/bs-config.json
@@ -0,0 +1,5 @@
+{
+  "server": {
+    "baseDir": ["./src", "./build/contracts"]
+  }
+}
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "test": "test"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "lite-server"
   },
   "repository": {
     "type": "git",

diff --git a/src/css/bootstrap.min.css b/src/css/bootstrap.min.css
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>DApp Token ICO Sale</title>
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container" style="width: 650px;">
+      <div class="row">
+        <div class="col-lg-12">
+            <h1 class="text-center">DAPP TOKEN ICO SALE</h1>
+            <hr/>
+            <br/>
+        </div>
+        <div id="loader">
+          <p class="text-center">Loading...</p>
+        </div>
+        <div id="content" class="text-center" style="display: none;">
+          <p>
+            Introducing "DApp Token" (DAPP)!
+            Token price is <span class="token-price"></span> Ether. You currently have <span class="dapp-balance"></span>&nbsp;DAPP.
+          </p>
+          <br/>
+          <form onSubmit="App.buyTokens(); return false;" role="form">
+            <div class="form-group">
+              <div class="input-group">
+                <input id="numberOfTokens" class="form-control input-lg" type="number" name="number" value="1" min="1" pattern="[0-9]">
+                </input>
+                <span class="input-group-btn">
+                  <button type="submit" class="btn btn-primary btn-lg">Buy Tokens</button>
+                </span>
+              </div>
+            </div>
+          </form>
+          <br>
+           <div class="progress">
+              <div id="progress" class="progress-bar progress-bar-striped active" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          <p><span class="tokens-sold"></span> / <span class="tokens-available"></span> tokens sold</p>
+          <hr>
+          <p id="accountAddress"></p>
+        </div>
+      </div>
+    </div>
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/web3.min.js"></script>
+    <script src="js/truffle-contract.min.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>
diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,133 @@
+App = {
+  web3Provider: null,
+  contracts: {},
+  account: '0x0',
+  loading: false,
+  tokenPrice: 1000000000000000,
+  tokensSold: 0,
+  tokensAvailable: 750000,
+
+  init: function() {
+    console.log("App initialized...")
+    return App.initWeb3();
+  },
+
+  initWeb3: function() {
+    if (typeof web3 !== 'undefined') {
+      // If a web3 instance is already provided by Meta Mask.
+      App.web3Provider = web3.currentProvider;
+      web3 = new Web3(web3.currentProvider);
+    } else {
+      // Specify default instance if no web3 instance provided
+      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
+      web3 = new Web3(App.web3Provider);
+    }
+    return App.initContracts();
+  },
+
+  initContracts: function() {
+    $.getJSON("DappTokenSale.json", function(dappTokenSale) {
+      App.contracts.DappTokenSale = TruffleContract(dappTokenSale);
+      App.contracts.DappTokenSale.setProvider(App.web3Provider);
+      App.contracts.DappTokenSale.deployed().then(function(dappTokenSale) {
+        console.log("Dapp Token Sale Address:", dappTokenSale.address);
+      });
+    }).done(function() {
+      $.getJSON("DappToken.json", function(dappToken) {
+        App.contracts.DappToken = TruffleContract(dappToken);
+        App.contracts.DappToken.setProvider(App.web3Provider);
+        App.contracts.DappToken.deployed().then(function(dappToken) {
+          console.log("Dapp Token Address:", dappToken.address);
+        });
+
+        App.listenForEvents();
+        return App.render();
+      });
+    })
+  },
+
+  // Listen for events emitted from the contract
+  listenForEvents: function() {
+    App.contracts.DappTokenSale.deployed().then(function(instance) {
+      instance.Sell({}, {
+        fromBlock: 0,
+        toBlock: 'latest',
+      }).watch(function(error, event) {
+        console.log("event triggered", event);
+        App.render();
+      })
+    })
+  },
+
+  render: function() {
+    if (App.loading) {
+      return;
+    }
+    App.loading = true;
+
+    var loader  = $('#loader');
+    var content = $('#content');
+
+    loader.show();
+    content.hide();
+
+    // Load account data
+    web3.eth.getCoinbase(function(err, account) {
+      if(err === null) {
+        App.account = account;
+        $('#accountAddress').html("Your Account: " + account);
+      }
+    })
+
+    // Load token sale contract
+    App.contracts.DappTokenSale.deployed().then(function(instance) {
+      dappTokenSaleInstance = instance;
+      return dappTokenSaleInstance.tokenPrice();
+    }).then(function(tokenPrice) {
+      App.tokenPrice = tokenPrice;
+      $('.token-price').html(web3.fromWei(App.tokenPrice, "ether").toNumber());
+      return dappTokenSaleInstance.tokensSold();
+    }).then(function(tokensSold) {
+      App.tokensSold = tokensSold.toNumber();
+      $('.tokens-sold').html(App.tokensSold);
+      $('.tokens-available').html(App.tokensAvailable);
+
+      var progressPercent = (Math.ceil(App.tokensSold) / App.tokensAvailable) * 100;
+      $('#progress').css('width', progressPercent + '%');
+
+      // Load token contract
+      App.contracts.DappToken.deployed().then(function(instance) {
+        dappTokenInstance = instance;
+        return dappTokenInstance.balanceOf(App.account);
+      }).then(function(balance) {
+        $('.dapp-balance').html(balance.toNumber());
+        App.loading = false;
+        loader.hide();
+        content.show();
+      })
+    });
+  },
+
+  buyTokens: function() {
+    $('#content').hide();
+    $('#loader').show();
+    var numberOfTokens = $('#numberOfTokens').val();
+    App.contracts.DappTokenSale.deployed().then(function(instance) {
+      return instance.buyTokens(numberOfTokens, {
+        from: App.account,
+        value: numberOfTokens * App.tokenPrice,
+        gas: 500000 // Gas limit
+      });
+    }).then(function(result) {
+      console.log("Tokens bought...")
+      $('form').trigger('reset') // reset number of tokens in form
+      // Wait for Sell event
+    });
+  }
+}
+
+$(function() {
+  $(window).load(function() {
+    App.init();
+  })
+});
diff --git a/src/js/bootstrap.min.js b/src/js/bootstrap.min.js
diff --git a/src/js/truffle-contract.min.js b/src/js/truffle-contract.min.js
diff --git a/src/js/web3.min.js b/src/js/web3.min.js