+ market data

* upgraded geth to latest version

assets/styles/style.css

@@ -395,4 +395,12 @@ div.noAddressWrapper {
 #sendFromAddressName,
 #sendToAddressName {
   font-size: 95%;
-}
+}
+
+.etho-red {
+  background-color: #7A1336 !important;
+}
+
+#chartMarketPrice {
+  height: calc(100vh - 260px);
+}

assets/templates/markets.html

@@ -0,0 +1,52 @@
+<div id="marketStats">
+    <div class="row">
+        <div class="col s12 m3">
+            <div class="card etho-red">
+                <div class="card-content white-text">
+                    <span class="card-title">ETHO to USD</span>
+                    <p id="ETHOToUSD">N/A</p>
+                </div>
+                <div class="card-action">
+                    <p id="changeUSD">This is a link</p>
+                </div>
+            </div>
+        </div><!-- col-3 -->
+        <div class="col s12 m3">
+            <div class="card etho-red">
+                <div class="card-content white-text">
+                    <span class="card-title">ETHO to BTC</span>
+                    <p id="ETHOToBTC">N/A</p>
+                </div>
+                <div class="card-action">
+                    <p id="changeBTC">This is a link</p>
+                </div>
+            </div>
+        </div><!-- col-3 -->
+        <div class="col s12 m3">
+            <div class="card etho-red">
+                <div class="card-content white-text">
+                    <span class="card-title">Marketcap</span>
+                    <p id="marketcap">N/A</p>
+                </div>
+                <div class="card-action">
+                    <p id="changeMarketcap">This is a link</p>
+                </div>
+            </div>
+        </div><!-- col-3 -->
+        <div class="col s12 m3">
+            <div class="card etho-red">
+                <div class="card-content white-text">
+                    <span class="card-title">Daily Volume</span>
+                    <p id="dailyVolume">N/A</p>
+                </div>
+                <div class="card-action">
+                    <p id="changeVolume">This is a link</p>
+                </div>
+            </div>
+        </div><!-- col-3 -->
+    </div>
+</div>
+<div id="chartMarketPrice">
+    <canvas id="chartMarketPriceCanvas"></canvas>
+    <a class="chart-style"></a>                                	
+</div>

index.html

@@ -36,6 +36,7 @@
     <script src="./assets/scripts/datatables-absolute.js"></script>       
     <script src="./assets/scripts/jquery.floatThead.min.js"></script>           
     <script src="./assets/scripts/all.min.js"></script>    
+    <script src="./assets/scripts/Chart.js"></script>    
 
     <!-- Insert this line after script imports -->
     <script>if (window.module) module = window.module;</script>
@@ -71,6 +72,9 @@
         <div class="sidebarIconWrapper" id="mainNavBtnTransactionsWrapper" data-tippy="Transactions" data-tippy-delay="500">
           <a class="sidebarIcon" id="mainNavBtnTransactions" href="#"><i class="fas fa-exchange-alt fa-2x"></i></a>
         </div>
+        <div class="sidebarIconWrapper" id="mainNavBtnMarketsWrapper" data-tippy="Markets" data-tippy-delay="500">
+          <a class="sidebarIcon" id="mainNavBtnMarkets" href="#"><i class="fas fa-poll fa-2x"></i></a>
+        </div>
         <div class="sidebarIconWrapper" id="mainNavBtnSettingsWrapper" data-tippy="Settings" data-tippy-delay="500">
           <a class="sidebarIcon" id="mainNavBtnSettings" href="#"><i class="fas fa-cog fa-2x"></i></a>
         </div>
@@ -86,6 +90,7 @@
         require('./renderer/utils.js');
         require('./renderer/maingui.js');
         require('./renderer/syncing.js');
+        require('./renderer/markets.js');
         require('./renderer/settings.js');
         require('./renderer/wallets.js');
         require('./renderer/database.js');

renderer/maingui.js

@@ -23,6 +23,9 @@ class MainGUI {
             case "transactions":
               $("#mainNavBtnTransactionsWrapper").addClass("iconSelected"); 
               break;
+              case "markets":
+              $("#mainNavBtnMarketsWrapper").addClass("iconSelected"); 
+              break;
             case "settings":
               $("#mainNavBtnSettingsWrapper").addClass("iconSelected"); 
               break;
@@ -126,6 +129,11 @@ $("#mainNavBtnWallets").click(function() {
     EthoWallets.renderWalletsState();
 });                
 
+$("#mainNavBtnMarkets").click(function() {
+    EthoMainGUI.changeAppState("markets");
+    EthoMarkets.renderMarkets();
+});                
+
 $("#mainNavBtnSettings").click(function() {
     EthoMainGUI.changeAppState("settings");
     EthoSettings.renderSettingsState();

renderer/markets.js

@@ -0,0 +1,69 @@
+const {ipcRenderer} = require('electron');
+
+class Markets {
+    constructor() {}
+
+    renderMarkets() {
+        EthoMainGUI.renderTemplate("markets.html", {});          
+        $(document).trigger("render_markets");                
+
+        $.getJSON("https://api.coingecko.com/api/v3/coins/ether-1?sparkline=true", function( data ) {
+            $("#ETHOToUSD").html(data.market_data.current_price.usd.toFixed(5) + " $");
+            $("#ETHOToBTC").html(data.market_data.current_price.btc.toFixed(8)) + " sats";
+            $("#marketcap").html(data.market_data.market_cap.usd.toFixed(0) + " $ (" + data.market_cap_rank + ")");
+            $("#dailyVolume").html(data.market_data.total_volume.usd.toFixed(0) + " $");
+
+            $("#changeUSD").html("7 days change: " + data.market_data.price_change_percentage_7d_in_currency.usd.toFixed(2) + "%");
+            $("#changeBTC").html("7 days change: " + data.market_data.price_change_percentage_7d_in_currency.btc.toFixed(2) + "%");
+            $("#changeMarketcap").html("high 24h: " +  data.market_data.high_24h.usd.toFixed(5) + " $");
+            $("#changeVolume").html("all time high: " + data.market_data.ath.usd.toFixed(5) + " $");
+
+            new Chart(document.getElementById('chartMarketPriceCanvas'), {
+                type: 'line',
+                data: {
+                    labels: data.market_data.sparkline_7d.price,
+                    datasets: [{
+                        data: data.market_data.sparkline_7d.price,
+                        backgroundColor: 'rgb(122,19,54,0.1)', 
+                        fill: true,
+                        borderWidth: 3,
+                        pointRadius: 0,
+                        borderColor: '#7A1336'
+                    }]
+                },
+                options: {
+                    animation: false,
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    legend: {
+                        display: false,
+                        labels: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                maxTicksLimit: 5,
+                                beginAtZero:true,
+                                fontSize: 10,
+                                callback: function(value, index, values) {
+                                    return value.toFixed(2) + ' $';
+                                }                    
+                            },
+                            gridLines: {
+                                color: 'rgba(255,255,255,.08)'
+                            }
+                        }],
+                        xAxes: [{
+                            display: false
+                        }]
+                    }
+                }
+            });
+        });
+    }
+}
+
+// create new markets variable
+EthoMarkets = new Markets();  

renderer/settings.js

@@ -103,5 +103,5 @@ $(document).on("render_settings", function() {
     });
 });
   
-// create new account variable
+// create new settings variable
 EthoSettings = new Settings();