added blockies to navbar and wallet value display

fluffycatware · Feb 16, 2018 · 2d3f46f · 2d3f46f
1 parent c9e801a
commit 2d3f46f
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 24 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -98,6 +98,11 @@ hr {
     color: white;
 }
 
+.navbar-right {
+    position: absolute;
+    right: 0px;
+}
+
 /* Image borders */
 
 .shadow-1 {
@@ -281,4 +286,14 @@ i {
 .ribbon.round h4::after {
     background: #33aaf8;
     background: linear-gradient(right, #33aaf8 0%, #3498db 100%);
+}
+
+/* Account Personalization */
+#account-icon {
+    width: 40px;
+    height: 40px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 10%;
+    box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
 }
diff --git a/docs/index.html b/docs/index.html
@@ -31,15 +31,31 @@
 <body>
 
     <!-- Fixed navbar -->
-    <div class="navbar navbar-default navbar-fixed-top">
-        <div class="container">
-            <div class="navbar-header">
-                <a class="navbar-brand" href="">
-                    <b>KittyCoin Club</b>
-                </a>
-            </div>
-        </div>
-    </div>
+    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
+        <a class="navbar-brand" href="">KittyCoin Club</a>
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#kitty-donate">Donate <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#kitty-create">Create <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#trust-create">Trust <span class="sr-only">(current)</span></a>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <div id="account-icon"></div>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link">ETH:</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" id="accountWalletAmount"></a>
+            </li>
+        </ul>
+    </nav>
 
     <div id="headerwrap">
         <div class="container">
@@ -61,7 +77,7 @@ <h1>Hi There 😻
     </div>
     <!-- /headerwrap -->
 
-    <div class="container">
+    <div class="container" id="kitty-donate">
         <div class="row mt centered">
             <div class="col-sm-12">
                 <h1>Fluffy Friends</h1>
@@ -141,7 +157,7 @@ <h4 class="card-title">Name</h4>
     </div>
     <!-- /container -->
 
-    <div class="container">
+    <div class="container" id="trust-create">
         <div class="row mt centered">
             <div class="col-lg-12">
                 <h1>Create a Trust</h1>
@@ -188,7 +204,7 @@ <h3>Assign a new address trust status</h3>
     </div>
     <!-- /container -->
 
-    <div class="container">
+    <div class="container" id="kitty-create">
         <div class="row mt centered">
             <div class="col-lg-12">
                 <h1>Are you a Trust?</h1>
@@ -334,10 +350,21 @@ <h2 class="color-dark-grey">Featured On </h2>
 
     <!-- ========= Local JavaScript ========= -->
     <script src="js/lib/bignumber.js"></script>
+    <script src="js/lib/blockies.min.js"></script>
     <script src="js/lib/kittycoinparser.js"></script>
     <script src="js/lib/web3.min.js"></script>
     <script src="js/lib/truffle-contract.min.js"></script>
     <script src="js/app.js"></script>
+
+    <!-- ========= Global site tag (gtag.js) - Google Analytics ========= -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-71336829-6"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'UA-71336829-6');
+    </script>
+
 </body>
 
 </html>
diff --git a/docs/js/app.js b/docs/js/app.js
@@ -5,6 +5,12 @@ function populateUserData () {
   if (typeof web3 !== 'undefined') {
     var account = web3.eth.defaultAccount;
     if (account) {
+      var icon = document.getElementById('account-icon');
+      icon.style.backgroundImage = 'url(' + blockies.create({ 
+        seed:account,
+        size: 15,
+        scale: 3
+      }).toDataURL()+')'
       $('#inputTrustAddress').val(account);
     } else {
       window.location.assign("sign-in.html");
@@ -97,13 +103,29 @@ var App = {
 
       // Set the provider for our contract
       App.contracts.KittyCoinClub.setProvider(web3.currentProvider);
+      // Load Account information
+      App.getAccountDetails();
 
       // User our contract to retrieve the kitties that can be donated to
       return App.loadKitties();
     });
     return App.bindEvents();
   },
 
+  getAccountDetails() {
+    let kittyCoinClubInstance;
+    var account = web3.eth.defaultAccount;
+
+    App.contracts.KittyCoinClub.deployed().then((instance) => {
+      kittyCoinClubInstance = instance;
+      return kittyCoinClubInstance.pendingWithdrawals(account);
+    }).then((amount) => {
+      $('#accountWalletAmount').text(web3.fromWei(amount).toNumber());
+    }).catch((err) => {
+      console.log(err.message);
+    });
+  },
+
   loadKitties() {
     let kittyCoinClubInstance;
 

diff --git a/docs/js/lib/blockies.min.js b/docs/js/lib/blockies.min.js
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -98,6 +98,11 @@ hr {
     color: white;
 }
 
+.navbar-right {
+    position: absolute;
+    right: 0px;
+}
+
 /* Image borders */
 
 .shadow-1 {
@@ -281,4 +286,14 @@ i {
 .ribbon.round h4::after {
     background: #33aaf8;
     background: linear-gradient(right, #33aaf8 0%, #3498db 100%);
+}
+
+/* Account Personalization */
+#account-icon {
+    width: 40px;
+    height: 40px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 10%;
+    box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
 }
diff --git a/src/index.html b/src/index.html
@@ -31,15 +31,31 @@
 <body>
 
     <!-- Fixed navbar -->
-    <div class="navbar navbar-default navbar-fixed-top">
-        <div class="container">
-            <div class="navbar-header">
-                <a class="navbar-brand" href="">
-                    <b>KittyCoin Club</b>
-                </a>
-            </div>
-        </div>
-    </div>
+    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
+        <a class="navbar-brand" href="">KittyCoin Club</a>
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#kitty-donate">Donate <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#kitty-create">Create <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#trust-create">Trust <span class="sr-only">(current)</span></a>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <div id="account-icon"></div>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link">ETH:</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" id="accountWalletAmount"></a>
+            </li>
+        </ul>
+    </nav>
 
     <div id="headerwrap">
         <div class="container">
@@ -61,7 +77,7 @@ <h1>Hi There 😻
     </div>
     <!-- /headerwrap -->
 
-    <div class="container">
+    <div class="container" id="kitty-donate">
         <div class="row mt centered">
             <div class="col-sm-12">
                 <h1>Fluffy Friends</h1>
@@ -141,7 +157,7 @@ <h4 class="card-title">Name</h4>
     </div>
     <!-- /container -->
 
-    <div class="container">
+    <div class="container" id="trust-create">
         <div class="row mt centered">
             <div class="col-lg-12">
                 <h1>Create a Trust</h1>
@@ -188,7 +204,7 @@ <h3>Assign a new address trust status</h3>
     </div>
     <!-- /container -->
 
-    <div class="container">
+    <div class="container" id="kitty-create">
         <div class="row mt centered">
             <div class="col-lg-12">
                 <h1>Are you a Trust?</h1>
@@ -334,6 +350,7 @@ <h2 class="color-dark-grey">Featured On </h2>
 
     <!-- ========= Local JavaScript ========= -->
     <script src="js/lib/bignumber.js"></script>
+    <script src="js/lib/blockies.min.js"></script>
     <script src="js/lib/kittycoinparser.js"></script>
     <script src="js/lib/web3.min.js"></script>
     <script src="js/lib/truffle-contract.min.js"></script>

diff --git a/src/js/app.js b/src/js/app.js
@@ -5,6 +5,12 @@ function populateUserData () {
   if (typeof web3 !== 'undefined') {
     var account = web3.eth.defaultAccount;
     if (account) {
+      var icon = document.getElementById('account-icon');
+      icon.style.backgroundImage = 'url(' + blockies.create({ 
+        seed:account,
+        size: 15,
+        scale: 3
+      }).toDataURL()+')'
       $('#inputTrustAddress').val(account);
     } else {
       window.location.assign("sign-in.html");
@@ -97,13 +103,29 @@ var App = {
 
       // Set the provider for our contract
       App.contracts.KittyCoinClub.setProvider(web3.currentProvider);
+      // Load Account information
+      App.getAccountDetails();
 
       // User our contract to retrieve the kitties that can be donated to
       return App.loadKitties();
     });
     return App.bindEvents();
   },
 
+  getAccountDetails() {
+    let kittyCoinClubInstance;
+    var account = web3.eth.defaultAccount;
+
+    App.contracts.KittyCoinClub.deployed().then((instance) => {
+      kittyCoinClubInstance = instance;
+      return kittyCoinClubInstance.pendingWithdrawals(account);
+    }).then((amount) => {
+      $('#accountWalletAmount').text(web3.fromWei(amount).toNumber());
+    }).catch((err) => {
+      console.log(err.message);
+    });
+  },
+
   loadKitties() {
     let kittyCoinClubInstance;
 

diff --git a/src/js/lib/blockies.min.js b/src/js/lib/blockies.min.js