added icons for cryptos

js/tokens.js

@@ -105,7 +105,7 @@ function RenderTransactions(txs, start, end) {
                 var btn = "<button onclick=\"OpenURL('" + txUrl + "')\" type=\"button\" class=\"btn view_tx_btn float-left\">View</button>";
             }
             var element = "tx_" + out.id;
-            var html = "<div class=\"row " + thisClass + " fadeInEach\" id=\"" + element + "\">\n" + "            <div class=\"col-12 mt-1 mb-1 small_txt text-center\"><b>" + out.id.substring(0, 32) + "...</b></div>\n" + "<div class=\"col-12\">" + btn + " <b class=\"float-right\">" + toNumber(out.value) + " " + out.symbol + "</b></div>" + "        </div>";
+            var html = "<div class=\"row " + thisClass + " fadeInEach\" id=\"" + element + "\">\n" + "            <div class=\"col-12 mt-1 mb-1 small_txt text-center\"><b>" + out.id.substring(0, 32) + "...</b></div>\n" + "<div class=\"col-12\">" + btn + " <b class=\"float-right\">" + toNumber(out.value) + " " + out.symbol + "<img src=\""+CoinIcon(out.symbol)+"\"></b></div>" + "        </div>";
             $("#transactions_tab").append(html);
         });
         lastTrxScroll = end;

js/view.js

@@ -94,10 +94,46 @@ function SaveNewToken() {
     $("#new_token_address").removeClass("is-invalid");
 }
 
+
+
+function CoinIcon(coin) {
+    switch (coin.toUpperCase()) {
+        case "ETH": return "../images/icons/eth.png"
+        case "BTC": return "../images/icons/btc.png"
+        case "BTCTEST": return "../images/icons/btc.png"
+        case "LTC": return "../images/icons/ltc.png"
+        case "LTCTEST": return "../images/icons/ltc.png"
+        case "OMG": return "../images/icons/omg.png"
+        case "ZRX": return "../images/icons/zrx.png"
+        case "SNT": return "../images/icons/snt.png"
+        case "ENG": return "../images/icons/eng.png"
+        case "WAX": return "../images/icons/wax.png"
+        case "GMT": return "../images/icons/gmt.png"
+        case "STORJ": return "../images/icons/storj.png"
+        case "TRX": return "../images/icons/trx.png"
+        case "CAT": return "../images/icons/cat.png"
+        case "DNT": return "../images/icons/dnt.png"
+        case "REP": return "../images/icons/rep.png"
+        case "LISK": return "../images/icons/lisk.png"
+        case "BNT": return "../images/icons/bnt.png"
+        case "STEEM": return "../images/icons/steem.png"
+        case "DTC": return "../images/icons/dtc.png"
+        case "CVC": return "../images/icons/cvc.png"
+        case "KIN": return "../images/icons/kin.png"
+        case "VIU": return "../images/icons/viu.png"
+        case "VEN": return "../images/icons/ven.png"
+        case "BNB": return "../images/icons/bnb.png"
+        case "SALT": return "../images/icons/salt.png"
+        default: return "../images/icons/eth.png"
+    }
+}
+
+
+
 function LoadSavedTokens() {
     console.log(configs.savedTokens);
     $.each(configs.savedTokens, function(k, tk) {
-        var tokenObj = "<div id=\"token_" + tk.symbol + "\" onclick=\"FocusOnToken('" + tk.address + "', " + tk.decimals + ", '" + tk.name + "', '" + tk.symbol + "')\" class=\"row token_obj\">" + "    <div class=\"col-12\">" + "        <h5>" + tk.name + "<span class=\"badge badge-secondary\">" + toNumber(tk.balance) + "</span></h5>" + "    </div>" + "</div>";
+        var tokenObj = "<div id=\"token_" + tk.symbol + "\" onclick=\"FocusOnToken('" + tk.address + "', " + tk.decimals + ", '" + tk.name + "', '" + tk.symbol + "')\" class=\"row token_obj\">" + "    <div class=\"col-12\"><img src=\""+CoinIcon(tk.symbol)+"\">" + "        <h5>" + tk.name + "<span>" + toNumber(tk.balance) + "</span></h5>" + "    </div>" + "</div>";
         $(tokenObj).insertAfter("#new_token_dialog_btn");
     })
 }
@@ -592,7 +628,10 @@ tokenWorker.onmessage = function(e) {
     var percent = (tkCount / tokenList.length) * 100;
     $("#progress_token_load").css("width", percent + "%");
     if(e.data.balance != 0) {
-        var tokenObj = "<div id=\"token_" + e.data.symbol + "\" onclick=\"FocusOnToken('" + e.data.address + "', " + e.data.decimals + ", '" + e.data.name + "', '" + e.data.symbol + "')\" class=\"row token_obj\">\n" + "    <div class=\"col-12\">\n" + "        <h5>" + e.data.name + "<span class=\"badge badge-secondary\">" + parseFloat(e.data.balance).toFixed(6) + "</span></h5>\n" + "    </div>\n" + "</div>";
+        var tokenObj = "<div id=\"token_" + e.data.symbol + "\" onclick=\"FocusOnToken('" + e.data.address + "', " + e.data.decimals + ", '" + e.data.name + "', '" + e.data.symbol + "')\" class=\"row token_obj\">\n" + "    <div class=\"col-12\">\n" +
+            "<img src=\""+CoinIcon(e.data.symbol)+"\"><h5>" + e.data.name + "<span>" +
+            toNumber(e.data.balance) + "</span></h5>" +
+            "</div>" + "</div>";
         $("#tokens_available").append(tokenObj);
         var data = {
             address: e.data.contract,

main.js

@@ -96,7 +96,16 @@ let mainWindow;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({backgroundColor: '#f7f7f7', frame: false, titleBarStyle: 'hidden', width: 840, height: 560});
+  mainWindow = new BrowserWindow({
+      backgroundColor: '#f7f7f7',
+      frame: false,
+      titleBarStyle: 'hidden',
+      width: 840,
+      height: 560,
+      webPreferences: {
+          preload: __dirname+'/js/constants.js'
+      }
+  });
 
     if (process.env.NODE_ENV=="test") {
         mainWindow.setResizable(true);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "coinapp",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "description": "A Simple Cryptocurrency Wallet for Ethereum, ERC20 Tokens, Bitcoin and Litecoin",
     "author": "Hunter Long <info@socialeck.com>",
     "main": "main.js",

style/main.css

@@ -15,6 +15,13 @@ BODY {
     text-align: center;
 }
 
+#transactions_tab IMG {
+    float: right;
+    width: 17px;
+    height: 17px;
+    margin-left: 5px;
+}
+
 .windows_close {
     width: 35px;
     height: 21px;
@@ -77,19 +84,44 @@ BODY {
 }
 
 .token_obj {
-    background-color: #ffffff;
-    padding: 20px 0;
+    background-color: #f1f1f1;
+    padding: 10px 5px;
     margin-bottom: 1px;
     cursor: pointer;
+    height: 50px;
 }
 
-.token_obj:HOVER {
-    background-color: #f9f9f9;
+
+.token_obj IMG {
+    width: 20px;
+    height: 20px;
+    float: left;
     cursor: pointer;
+    margin-top: 5px;
 }
 
-.token_obj .badge {
+.token_obj H5 {
     float: right;
+    font-size: 10pt;
+    display: block;
+    width: 165px;
+    text-align: right;
+    cursor: pointer;
+}
+
+.token_obj SPAN {
+    width: 165px;
+    height: 20px;
+    font-size: 11pt;
+    float: left;
+    margin-top: 0px;
+    cursor: pointer;
+}
+
+
+.token_obj:HOVER {
+    background-color: #f9f9f9;
+    cursor: pointer;
 }
 
 .main-container {
@@ -98,7 +130,7 @@ BODY {
     border-left: 1px solid #bdbdbd;
     left: 0px;
     top: 22px;
-    height: 535px;
+    height: 538px;
     width: 100%;
     float: right;
     background-color: #f7f7f7;