Use Jquery globally, Bootstrap JS Globally, Prevent buttons from Breaking on macOS.

2019-10-14 17:48:01 +02:00
parent 9a6a831c83
commit f4772342f4
11 changed files with 1130 additions and 1122 deletions
--- a/assets/dashboard/js/app.js
+++ b/assets/dashboard/js/app.js
@@ -74,12 +74,16 @@ var GlobalHostingContractDetailArray = new Array();
 var GlobalExtensionDuration;
 /*END OF MISC GLOBAL VARIABLES*/

+var elem = document.querySelector('.modal');
+var instance = M.Modal.init(elem);
+instance.open();
+
 function isWindows() {
  return navigator.platform.indexOf('Win') > -1
 }

 var pathSymbol = "/";
-if(isWindows()) {
+if (isWindows()) {
  pathSymbol = "\\";
 }

@@ -93,20 +97,22 @@ fetch('https://api.coinmarketcap.com/v2/ticker/3452/').then(response => {
 if (typeof web3 == 'undefined') {
  var web3 = new Web3()
  web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"));
-    $('#ethofsLoginModal').modal('show');
+  $('#ethofsLoginModal').modal({dismissible: true});
+  $('#ethofsLoginModal').modal('open');
 } else {
  ethofsLogin("");
 }

 function ethofsLogin(privateKey) {
-    $('#ethofsLoginModal').modal('hide');
-    $('#ethofsRegistrationModal').modal('hide');
+  $('#ethofsLoginModal').modal('close');
+  $('#ethofsRegistrationModal').modal({dismissible: true});
+  $('#ethofsRegistrationModal').modal('close');
  //CREATE ETHER-1 CHAIN CONNECTION AND LOOK FOR EXISTING USER ACCOUNT
  if (privateKey != "") {
    GlobalPrivateKey = privateKey;
    privateKeyLogin = true;
    web3.eth.net.isListening()
-            .then(function () {
+      .then(function() {
        console.log('ethoFS is connected')
        let account = web3.eth.accounts.privateKeyToAccount('0x' + privateKey);
        console.log(account);
@@ -117,12 +123,12 @@ function ethofsLogin(privateKey) {
  } else {
    privateKeyLogin = false;
    web3 = new Web3(web3.currentProvider);
-        web3.eth.getAccounts(function (err, accounts) {
+    web3.eth.getAccounts(function(err, accounts) {
      if (err != null) {
        console.error("An error occurred: " + err);
        outputNoAddressContractTable();
      } else if (accounts.length == 0) {
-                $('#ethofsLoginModal').modal('show');
+        $('#ethofsLoginModal').modal('open');
        console.log("User is not logged in");
        document.getElementById("welcome-name").textContent = "Access to Ether-1 Blockchain Not Found - Make Sure You Are Using Metamask or The Ether-1 Browser Extension";
        document.getElementById("accountaddress").textContent = "Address Not Found";
@@ -136,15 +142,16 @@ function ethofsLogin(privateKey) {
  }
 }

+
 function startEthofs() {
  console.log("Starting ethoFS");
  GlobalUserAddress = web3.eth.defaultAccount;
  var ethoFSAccounts = new web3.eth.Contract(GlobalControllerABI, GlobalControllerContractAddress);
-    ethoFSAccounts.methods.CheckAccountExistence(GlobalUserAddress).call(function (error, result) {
+  ethoFSAccounts.methods.CheckAccountExistence(GlobalUserAddress).call(function(error, result) {
    if (!error) {
      if (result) {
        document.getElementById("accountaddress").textContent = web3.eth.defaultAccount;
-                ethoFSAccounts.methods.GetUserAccountName(GlobalUserAddress).call(function (error, result) {
+        ethoFSAccounts.methods.GetUserAccountName(GlobalUserAddress).call(function(error, result) {
          if (!error) {
            if (result) {
              getBlockHeight(web3);
@@ -161,7 +168,7 @@ function startEthofs() {
        document.getElementById("welcome-name").textContent = "User Not Found";
        document.getElementById("accountaddress").textContent = "Address Not Found";
        console.log("User Not Found");
-                $('#ethofsRegistrationModal').modal('show');
+        $('#ethofsRegistrationModal').modal('open');
      }
    } else {
      document.getElementById("welcome-name").textContent = "Access to Ether-1 Blockchain Not Found - Make Sure You Are Using Metamask or The Ether-1 Browser Extension";
@@ -185,14 +192,15 @@ function AddNewUser(userName) {
    };
    var privateKey = '0x' + GlobalPrivateKey;
    web3.eth.accounts.signTransaction(tx, privateKey)
-            .then(function (signedTransactionData) {
-                web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function (error, result) {
+      .then(function(signedTransactionData) {
+        web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function(error, result) {
          if (!error) {
            if (result) {
-                            $('#minedBlockTrackerModal').modal('show');
-                            waitForReceipt(result, function (receipt) {
+              $('#minedBlockTrackerModal').modal({dismissible: true});
+              $('#minedBlockTrackerModal').modal('open');
+              waitForReceipt(result, function(receipt) {
                console.log("Transaction Has Been Mined: " + receipt);
-                                $('#minedBlockTrackerModal').modal('hide');
+                $('#minedBlockTrackerModal').modal('close');
                ethofsLogin(GlobalPrivateKey);
              });
            } else {
@@ -204,23 +212,23 @@ function AddNewUser(userName) {
        });
      });
  } else {
-        controller.methods.AddNewUserPublic(userName).send(function (error, result) {
+    controller.methods.AddNewUserPublic(userName).send(function(error, result) {
      if (!error) {
        if (result) {
          document.getElementById("wait").innerHTML = 'Waiting For Add User Confirmation.';
-                    $('#minedBlockTrackerModal').modal('show');
-                    waitForReceipt(result, function (receipt) {
+          $('#minedBlockTrackerModal').modal('open');
+          waitForReceipt(result, function(receipt) {
            console.log("Transaction Has Been Mined: " + receipt);
-                        $('#minedBlockTrackerModal').modal('hide');
+            $('#minedBlockTrackerModal').modal('close');
            ethofsLogin("");
          });
        } else {
          console.log("There was a problem adding new user");
-                    $('#ethofsLoginModal').modal('show');
+          $('#ethofsLoginModal').modal('open');
        }
      } else {
        console.error(error);
-                $('#ethofsLoginModal').modal('show');
+        $('#ethofsLoginModal').modal('open');
      }
    });
  }
@@ -228,7 +236,7 @@ function AddNewUser(userName) {
 /*************************************************************************************************************/
 function getBlockHeight(web3) {
  console.log("Starting Block Height Detection..");
-    web3.eth.getBlockNumber(function (err, data) {
+  web3.eth.getBlockNumber(function(err, data) {
    document.getElementById("blocknumber").textContent = data;
    console.log("ETHO Block Number: " + data);
  });
@@ -236,7 +244,7 @@ function getBlockHeight(web3) {
 /*************************************************************************************************************/
 function getBalance(web3) {
  console.log("Starting Balance Detection..");
-    web3.eth.getBalance(web3.eth.defaultAccount, function (err, data) {
+  web3.eth.getBalance(web3.eth.defaultAccount, function(err, data) {
    var balance = "ETHO Balance: " + Number(web3.utils.fromWei(data, "ether")).toFixed(2);
    document.getElementById("ethobalance").textContent = balance;
    console.log("ETHO Balance: " + data);
@@ -254,10 +262,10 @@ function calculateCost(contractSize, contractDuration, hostingCost) {
 /*************************************************************************************************************/
 //CHECK FOR TX - BLOCK TO BE MINED
 function waitForReceipt(hash, cb) {
-    web3.eth.getTransactionReceipt(hash, function (err, receipt) {
+  web3.eth.getTransactionReceipt(hash, function(err, receipt) {
    document.getElementById("mining-status-message").textContent = "In Progress";
    $miningMessage.innerText = "Waiting For Transaction Confirmation";
-        web3.eth.getBlock('latest', function (e, res) {
+    web3.eth.getBlock('latest', function(e, res) {
      if (!e) {
        document.getElementById("block-height").textContent = res.number;
      }
@@ -273,7 +281,7 @@ function waitForReceipt(hash, cb) {
        cb(receipt);
      }
    } else {
-            setTimeout(function () {
+      setTimeout(function() {
        waitForReceipt(hash, cb);
      }, 10000);
    }
@@ -293,15 +301,16 @@ function RemoveContract(hostingAddress, contentHash) {
    var privateKey = '0x' + GlobalPrivateKey;
    console.log("Private Key: " + privateKey);
    web3.eth.accounts.signTransaction(tx, privateKey)
-            .then(function (signedTransactionData) {
+      .then(function(signedTransactionData) {
        console.log("Signed TX Data: " + signedTransactionData.rawTransaction);
-                web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function (error, result) {
+        web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function(error, result) {
          if (!error) {
            if (result) {
-                            $('#minedBlockTrackerModal').modal('show');
-                            waitForReceipt(result, function (receipt) {
+              $('#minedBlockTrackerModal').modal({dismissible: true});
+              $('#minedBlockTrackerModal').modal('open');
+              waitForReceipt(result, function(receipt) {
                console.log("Transaction Has Been Mined: " + receipt);
-                                $('#minedBlockTrackerModal').modal('hide');
+                $('#minedBlockTrackerModal').modal('close');
                updateContractTable();
              });
            } else {
@@ -317,13 +326,14 @@ function RemoveContract(hostingAddress, contentHash) {
      to: GlobalControllerContractAddress,
      from: GlobalUserAddress,
    };
-        pinRemoving.methods.RemoveHostingContract(hostingAddress, contentHash).send(tx, function (error, result) {
+    pinRemoving.methods.RemoveHostingContract(hostingAddress, contentHash).send(tx, function(error, result) {
      if (!error) {
        if (result) {
-                    $('#minedBlockTrackerModal').modal('show');
-                    waitForReceipt(result, function (receipt) {
+          $('#minedBlockTrackerModal').modal({dismissible: true});
+          $('#minedBlockTrackerModal').modal('open');
+          waitForReceipt(result, function(receipt) {
            console.log("Transaction Has Been Mined: " + receipt);
-                        $('#minedBlockTrackerModal').modal('hide');
+            $('#minedBlockTrackerModal').modal('close');
            updateContractTable();
          });
        } else {
@@ -343,14 +353,14 @@ function updateContractTable() {
  var hostingContracts = "";
  var TotalContractCount = 0;
  var blockHeight = 0;
-    web3.eth.getBlockNumber(function (error, result) {
+  web3.eth.getBlockNumber(function(error, result) {
    if (!error) {
      blockHeight = result;
    } else
      console.error(error);
  });
  var ethoFSAccounts = new web3.eth.Contract(GlobalControllerABI, GlobalControllerContractAddress);
-    ethoFSAccounts.methods.GetUserAccountTotalContractCount(web3.eth.defaultAccount).call(function (error, result) {
+  ethoFSAccounts.methods.GetUserAccountTotalContractCount(web3.eth.defaultAccount).call(function(error, result) {
    TotalContractCount = result;
    GlobalTotalContractCount = result;
    const getContractData = async (ethoFSAccounts, account, TotalContractCount) => {
@@ -467,7 +477,8 @@ function round(value, decimals) {
 }
 /*************************************************************************************************************/
 function finishUploadModal() {
-    $('#uploadTrackerModal').modal('hide');
+  $('#uploadTrackerModal').modal({dismissible: true});
+  $('#uploadTrackerModal').modal('close');
  stopApplication();
  resetUploadSystem();
  return;
@@ -486,7 +497,8 @@ function resetUploadModal() {
 //CHECK FOR PROPAGATED & AVAILABLE DATA ON NETWORK - FINAL VERIFICATION FOR UPLOADED CONTENT
 function checkForUploadedContentAvailability(HostingContractName) {
  document.getElementById("upload-check-button").style.visibility = "hidden";
-    $('#uploadTrackerModal').modal('show');
+  $('#uploadTrackerModal').modal({dismissible: true});
+  $('#uploadTrackerModal').modal('open');
  document.getElementById("upload-hash").innerHTML = HostingContractName;
  return false;
 }
@@ -596,7 +608,8 @@ function showHostingContractDetails(counter) {
  resetContractExtensionChange();

  GlobalHostingContractDetailArray = GlobalHostingContractArray[counter];
-    $('#contractDetailModal').modal('show');
+  $('#contractDetailModal').modal({dismissible: true});
+  $('#contractDetailModal').modal('open');
  document.getElementById("contract-detail-name").innerHTML = GlobalHostingContractDetailArray['name'];
  var hashOutputString = "";
  var hostingContractEntry = "";
@@ -675,16 +688,18 @@ function contractExtensionConfirmation() {
      var privateKey = '0x' + GlobalPrivateKey;
      console.log("Private Key: " + privateKey);
      web3.eth.accounts.signTransaction(tx, privateKey)
-                .then(function (signedTransactionData) {
+        .then(function(signedTransactionData) {
          console.log("Signed TX Data: " + signedTransactionData.rawTransaction);
-                    web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function (error, result) {
+          web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function(error, result) {
            if (!error) {
              if (result) {
-                                $('#contractDetailModal').modal('hide');
-                                $('#minedBlockTrackerModal').modal('show');
-                                waitForReceipt(result, function (receipt) {
+                $('#contractDetailModal').modal({dismissible: true});
+                $('#contractDetailModal').modal('close');
+                $('#minedBlockTrackerModal').modal({dismissible: true});
+                $('#minedBlockTrackerModal').modal('open');
+                waitForReceipt(result, function(receipt) {
                  console.log("Transaction Has Been Mined: " + receipt);
-                                    $('#minedBlockTrackerModal').modal('hide');
+                  $('#minedBlockTrackerModal').modal('close');
                  updateContractTable();
                });
              } else {
@@ -697,14 +712,14 @@ function contractExtensionConfirmation() {
        });
    } else {

-            ethoFSController.methods.ExtendContract(GlobalHostingContractDetailArray['address'], extensionDuration).send(transactionObject, function (error, result) {
+      ethoFSController.methods.ExtendContract(GlobalHostingContractDetailArray['address'], extensionDuration).send(transactionObject, function(error, result) {
        if (!error) {
          if (result) {
-                        $('#contractDetailModal').modal('hide');
-                        $('#minedBlockTrackerModal').modal('show');
-                        waitForReceipt(result, function (receipt) {
+            $('#contractDetailModal').modal('close');
+            $('#minedBlockTrackerModal').modal('open');
+            waitForReceipt(result, function(receipt) {
              console.log("Transaction Has Been Mined: " + receipt);
-                            $('#minedBlockTrackerModal').modal('hide');
+              $('#minedBlockTrackerModal').modal('close');
              updateContractTable();
            });
          }
@@ -737,7 +752,7 @@ function UpdateHealthCheckInfo(healthMessage) {
  var availableStorageTotal = 0;
  var activeHistory = 0;
  var nodeCounter = 0;
-    splitMessage.forEach(function (nodeMessage, index) {
+  splitMessage.forEach(function(nodeMessage, index) {
    var nodeSplitMessage = nodeMessage.split(":");
    activeHistory = Number(nodeSplitMessage[5]);
    if (activeHistory >= 5) {
@@ -772,7 +787,7 @@ function UpdateHealthCheckInfo(healthMessage) {
  function calculateStorageAverages(usedStorageArray, availableStorageArray, nodeCountArray) {

    var sumAvailableStorage = 0;
-        availableStorageArray.forEach(function (value, index) {
+    availableStorageArray.forEach(function(value, index) {
      sumAvailableStorage += value;
      if (index == (availableStorageArray.length - 1)) {
        averageAvailableStorageTotal = (sumAvailableStorage / availableStorageArray.length);
@@ -780,7 +795,7 @@ function UpdateHealthCheckInfo(healthMessage) {
      }
    });
    var sumNodeCount = 0;
-        nodeCountArray.forEach(function (value, index) {
+    nodeCountArray.forEach(function(value, index) {
      sumNodeCount += value;
      if (index == (nodeCountArray.length - 1)) {
        var averageNodeCount = (sumNodeCount / nodeCountArray.length) + 19;
@@ -871,12 +886,13 @@ const onDragLeave = () => $dragContainer.classList.remove('dragging')

 function startUploadProcess() {
  console.log("Starting Upload Process..");
-    $('#preparingUploadModal').modal('show');
+  $('#preparingUploadModal').modal({dismissible: true});
+  $('#preparingUploadModal').modal('open');
  var streamFinishCount = 0;
  for (var i = 0; i < MainFileArray.length; i++) {
    const streamFiles = (files) => {
      const stream = node.addReadableStream()
-            stream.on('data', function (data) {
+      stream.on('data', function(data) {
        //console.log("Data...");
        //console.log(data);
        GlobalHashArray.push(`${data.hash}`);
@@ -919,8 +935,8 @@ function startUploadProcess() {
      console.log("Sending Immediate Pin Request: " + MainHashArray[i]);
      publishImmediatePin(MainHashArray[i]);
    }
-        setTimeout(function () {
-            hashVerificationArray.forEach(function (hash) {
+    setTimeout(function() {
+      hashVerificationArray.forEach(function(hash) {
        verifyDataUpload(hash);
      });
    }, 5000);
@@ -940,7 +956,7 @@ function startUploadProcess() {
          if (confirmationPercentage >= 99) {
            $uploadMessage.innerText = "Upload Complete";
            document.getElementById("upload-status-message").textContent = "Complete";
-                        if(!uploadCompleteFlag) {
+            if (!uploadCompleteFlag) {
              uploadCompleteFlag = true;
              updateContractTable();
              finishUploadModal();
@@ -950,7 +966,7 @@ function startUploadProcess() {
        } else {
          var confirmationPercentage = Math.ceil((hashConfirmationCount / hashVerificationArray.length) * 100);
          if (confirmationPercentage < 99) {
-                        setTimeout(function () {
+            setTimeout(function() {
              verifyDataUpload(hash)
            }, 2000);
          } else {
@@ -962,7 +978,7 @@ function startUploadProcess() {
        console.log("Data Confirmation Error: " + error.status);
        var confirmationPercentage = Math.ceil((hashConfirmationCount / hashVerificationArray.length) * 100);
        if (confirmationPercentage < 99) {
-                    setTimeout(function () {
+          setTimeout(function() {
            verifyDataUpload(hash)
          }, 2000);
        } else {
@@ -1018,18 +1034,22 @@ function startUploadProcess() {
      var privateKey = '0x' + GlobalPrivateKey;
      console.log("Private Key: " + privateKey);
      web3.eth.accounts.signTransaction(tx, privateKey)
-                .then(function (signedTransactionData) {
+        .then(function(signedTransactionData) {
          console.log("Signed TX Data: " + signedTransactionData.rawTransaction);
-                    web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function (error, result) {
+          web3.eth.sendSignedTransaction(signedTransactionData.rawTransaction, function(error, result) {
            if (!error) {
              if (result) {
                console.log("Result: " + result);
-                                $('#minedBlockTrackerModal').modal('show');
-                                $('#preparingUploadModal').modal('hide');
-                                waitForReceipt(result, function (receipt) {
+                $('#minedBlockTrackerModal').modal({dismissible: true});
+                $('#minedBlockTrackerModal').modal('open');
+                $('#preparingUploadModal').modal({dismissible: true});
+                $('#preparingUploadModal').modal('close');
+                waitForReceipt(result, function(receipt) {
                  console.log("Transaction Has Been Mined: " + receipt);
-                                    $('#minedBlockTrackerModal').modal('hide');
-                                    $('#nodeModal').modal('hide');
+                  $('#minedBlockTrackerModal').modal({dismissible: true});
+                  $('#minedBlockTrackerModal').modal('close');
+                  $('#nodeModal').modal({dismissible: true});
+                  $('#nodeModal').modal('close');
                  var filesForStream = MainFileArray;
                  streamFilesExternally(filesForStream, MainHashArray);
                  checkForUploadedContentAvailability(HostingContractName);
@@ -1043,15 +1063,15 @@ function startUploadProcess() {
          });
        });
    } else {
-            pinAdding.methods.AddNewContract(GlobalMainContentHash, HostingContractName, HostingContractDuration, pinSize, pinSize, contentHashString, contentPathString).send(transactionObject, function (error, result) {
+      pinAdding.methods.AddNewContract(GlobalMainContentHash, HostingContractName, HostingContractDuration, pinSize, pinSize, contentHashString, contentPathString).send(transactionObject, function(error, result) {
        if (!error) {
          if (result) {
-                        $('#minedBlockTrackerModal').modal('show');
-                        $('#preparingUploadModal').modal('hide');
-                        waitForReceipt(result, function (receipt) {
+            $('#minedBlockTrackerModal').modal('open');
+            $('#preparingUploadModal').modal('close');
+            waitForReceipt(result, function(receipt) {
              console.log("Transaction Has Been Mined: " + receipt);
-                            $('#minedBlockTrackerModal').modal('hide');
-                            $('#nodeModal').modal('hide');
+              $('#minedBlockTrackerModal').modal('close');
+              $('#nodeModal').modal('close');
              var filesForStream = MainFileArray;
              streamFilesExternally(filesForStream, MainHashArray);
              checkForUploadedContentAvailability(HostingContractName);
@@ -1115,7 +1135,7 @@ function onFileUpload(event) {

  function readDirectoryContents(directory) {
    console.log("Directory Path: " + directory);
-        fs.readdir(directory, function (err, filesUploaded) {
+    fs.readdir(directory, function(err, filesUploaded) {
      if (!err) {
        for (let i = 0; filesUploaded.length > i; i++) {
          handleItem(filesUploaded[i], directory);
@@ -1128,7 +1148,7 @@ function onFileUpload(event) {

  function handleItem(filename, relativePath) {
    var filepath = relativePath.concat(pathSymbol, filename);
-        fs.stat(filepath, function (err, stats) {
+    fs.stat(filepath, function(err, stats) {
      if (!err) {
        if (stats.isDirectory()) {
          readDirectoryContents(filepath)
@@ -1136,7 +1156,7 @@ function onFileUpload(event) {
          streamCompareCount++;
          totalUploadItems++;
          console.log("File Path: " + filepath);
-                    fs.readFile(filepath, function (err, file) {
+          fs.readFile(filepath, function(err, file) {
            var updatedPath = filepath.replace(dirPath, dirName);
            var filetowrite = {
              path: updatedPath,
@@ -1205,7 +1225,7 @@ function onDrop(event) {
        getFile(entry);

        function getFile(entry) {
-                    entry.file(function (file) {
+          entry.file(function(file) {
            readFileContents(file)
              .then((buffer) => {
                var filePath = entry.fullPath;
@@ -1232,10 +1252,10 @@ function onDrop(event) {

      } else if (entry.isDirectory) {
        let directoryReader = entry.createReader();
-                directoryReader.readEntries(function (entries) {
+        directoryReader.readEntries(function(entries) {
          streamCompareCount += entries.length - 1;
          totalItemCount += entries.length - 1;
-                    entries.forEach(function (newEntry) {
+          entries.forEach(function(newEntry) {
            handleEntry(newEntry);
          });
        });
--- a/assets/templates/addressBook.html
+++ b/assets/templates/addressBook.html
@@ -75,3 +75,5 @@
    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnDeleteAddressConfirm">Yes</button>
  </div>
 </div>
+
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/addresslist.html
+++ b/assets/templates/addresslist.html
@@ -26,3 +26,4 @@
        <div id="noWalletsPresent">You don't have any wallets, please import them, or create a new one</div>
    {{/if}}
 </div>
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/markets.html
+++ b/assets/templates/markets.html
@@ -50,3 +50,4 @@
    <canvas id="chartMarketPriceCanvas"></canvas>
    <a class="chart-style"></a>
 </div>
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/send.html
+++ b/assets/templates/send.html
@@ -118,3 +118,4 @@
    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnAddAddressToBookConfirm">Confirm</button>
  </div>
 </div>
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/settings.html
+++ b/assets/templates/settings.html
@@ -14,3 +14,4 @@
        </div>
    </div>
 </div>
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/transactions.html
+++ b/assets/templates/transactions.html
@@ -75,3 +75,5 @@
      <div class='bounce bounce3'></div>
    </div>
    <div></div>
+
+    <span id="nodestorage" style="display:none;">Loading</span>
--- a/assets/templates/uploads.html
+++ b/assets/templates/uploads.html
@@ -1,7 +1,6 @@
 <head>
  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet"
-    type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
  <!-- Bootstrap Core Css -->
  <link href="assets/dashboard/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
@@ -13,11 +12,9 @@
 <link href="assets/dashboard/plugins/morrisjs/morris.css" rel="stylesheet" />-->
  <!-- Custom Css -->
  <link href="assets/dashboard/css/style.css" rel="stylesheet">
-  <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
  <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
  <link href="assets/dashboard/css/themes/all-themes.css" rel="stylesheet" />
-  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css" rel="stylesheet">
  <script src="https://medium-widget.pixelpoint.io/widget.js"></script>

 </head>
@@ -95,7 +92,7 @@
      <div class="row clearfix">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
          <div class="card">
-            <div class="header bg-indigo">
+            <div class="header bg-blue">
              <h2>
                What is ethoFS?
              </h2>
@@ -141,6 +138,7 @@
        </div>
      </div>
      <!-- #END# CPU Usage -->
+
      <!-- Table of hashes -->
      <div class="row clearfix">
        <div class="col-xs-24 col-sm-24 col-md-16 col-lg-16">
@@ -169,6 +167,7 @@
        </div>
      </div>
      <!-- #END# Hash Tables -->
+
      <!-- Login Modal -->
      <div class="modal fade" id="ethofsLoginModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
@@ -187,19 +186,18 @@
                </tr>
                <tr style="border-color:#000;">
                  <td data-th="Private Key">
-                    <input type="text" id="privatekey" name="privatekey" placeholder="Enter Private Key"
-                      style="color:White;">
+                    <input type="text" id="privatekey" name="privatekey" placeholder="Enter Private Key" style="color:White;">
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="modal-footer" style="background-color: #840032;">
-            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal" id="ethofs-login-button"
-              onclick="ethofsLogin(document.getElementById('privatekey').value);">LOGIN</button>
+            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal" id="ethofs-login-button" onclick="ethofsLogin(document.getElementById('privatekey').value);">LOGIN</button>
          </div>
        </div>
      </div>
+
      <!-- Registration Modal -->
      <div class="modal fade" id="ethofsRegistrationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
@@ -224,11 +222,11 @@
            </div>
          </div>
          <div class="modal-footer" style="background-color: #840032;">
-            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal" id="ethofs-registration-button"
-              onclick="AddNewUser(document.getElementById('username').value);">REGISTER</button>
+            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal" id="ethofs-registration-button" onclick="AddNewUser(document.getElementById('username').value);">REGISTER</button>
          </div>
        </div>
      </div>
+
      <!-- Default Size Modal -->
      <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
@@ -270,8 +268,7 @@
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
-              <button type="button" class="btn btn-link waves-effect" data-toggle="modal" data-dismiss="modal"
-                data-target="#defaultModal2">NEXT</button>
+              <button type="button" class="btn btn-link waves-effect" data-toggle="modal" data-dismiss="modal" data-target="#defaultModal2">NEXT</button>
            </div>
          </div>
        </div>
@@ -296,8 +293,7 @@
                      box to upload.
                    </p>
                  </center>
-                  <input type="file" id="fileUploadButton" webkitdirectory="true" mozdirectory="true" msdirectory="true"
-                    odirectory="true" directory="true" multiple="true">
+                  <input type="file" id="fileUploadButton" webkitdirectory="true" mozdirectory="true" msdirectory="true" odirectory="true" directory="true" multiple="true">
                </div>
                <div id="progress-container">
                  <div id="progress-bar"></div>
@@ -316,8 +312,7 @@
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
-              <button type="button" class="btn btn-link waves-effect" data-toggle="modal" data-dismiss="modal"
-                data-target="#defaultModal3" onclick="resetUploadModal();">NEXT</button>
+              <button type="button" class="btn btn-link waves-effect" data-toggle="modal" data-dismiss="modal" data-target="#defaultModal3" onclick="resetUploadModal();">NEXT</button>
            </div>
          </div>
        </div>
@@ -339,8 +334,7 @@
                  </tr>
                  <tr style="border-color:#000;">
                    <td data-th="Contract Name">
-                      <input type="text" id="newcontractname" name="newcontractname" placeholder="Enter Contract Name"
-                        style="color:white;">
+                      <input type="text" id="newcontractname" name="newcontractname" placeholder="Enter Contract Name" style="color:white;">
                    </td>
                  </tr>
                  <tr>
@@ -384,8 +378,7 @@

                <div class="modal-footer">
                  <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
-                  <button type="button" class="btn btn-link waves-effect" data-dismiss="modal"
-                    id="upload-confirm-button" onclick="startUploadProcess();">CONFIRM</button>
+                  <button type="button" class="btn btn-link waves-effect" data-dismiss="modal" id="upload-confirm-button" onclick="startUploadProcess();">CONFIRM</button>
                </div>
              </main>
            </div>
@@ -397,8 +390,7 @@
          <div class="modal-content" style="background-color: #840032;">
            <div class="modal-header">
              <h4 class="modal-title" id="defaultModalLabel" style="color:white;">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#ffffff;"
-                  onclick="updateContractTable();">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#ffffff;" onclick="updateContractTable();">
                  <span aria-hidden="true">&times;</span>
                </button>
                <br>
@@ -417,29 +409,24 @@
                    <h3 style="padding-left:10px;">Message Log:</h3>
                    <span class="upload-message" style="color: #3CB371; font-size: 24px; padding: 10px"></span>
                  </div>
-                  <div class="summary"
-                    style="text-align: center !important; padding: 10px; width:100%; background: #000000;">
+                  <div class="summary" style="text-align: center !important; padding: 10px; width:100%; background: #000000;">
                    <div id="myBar">0%</div>
                  </div>
                </div>
              </main>
            </div>
-            <div class="modal-footer"
-              style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
-              <button type="button" class="btn btn-primary" id="upload-check-button"
-                onclick="finishUploadModal(); event.stopPropagation();">Close</button>
+            <div class="modal-footer" style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
+              <button type="button" class="btn btn-primary" id="upload-check-button" onclick="finishUploadModal(); event.stopPropagation();">Close</button>
            </div>
          </div>
        </div>
      </div>
-      <div class="modal fade" id="analyzeDataModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel"
-        aria-hidden="true" data-backdrop="static">
+      <div class="modal fade" id="analyzeDataModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-color: #840032;">
            <div class="modal-header">
              <h4 class="modal-title" id="defaultModalLabel" style="color:white;">
-                <button type="button" class="close" data-dismiss="modal" id="analyze-close-button" aria-label="Close"
-                  style="color:#ffffff;">
+                <button type="button" class="close" data-dismiss="modal" id="analyze-close-button" aria-label="Close" style="color:#ffffff;">
                  <span aria-hidden="true">&times;</span>
                </button>
                <br>
@@ -459,17 +446,14 @@
                      <h4 style="padding-left:10px;">Message Log:</h4>
                      <pre class="analyze-message" style="color: #3CB371; font-size: 24px;"></pre>
                    </div>
-                    <div class="summary"
-                      style="text-align: center !important; padding: 10px; width:100%; background: #000000;">
+                    <div class="summary" style="text-align: center !important; padding: 10px; width:100%; background: #000000;">
                      <div id="myAnalyzeBar">0%</div>
                    </div>
                  </div>


-                  <div class="modal-footer"
-                    style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
-                    <button type="button" class="btn btn-primary" id="upload-check-button"
-                      onclick="finishUploadModal(); event.stopPropagation();">Close</button>
+                  <div class="modal-footer" style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
+                    <button type="button" class="btn btn-primary" id="upload-check-button" onclick="finishUploadModal(); event.stopPropagation();">Close</button>
                  </div>
                </main>
            </div>
@@ -478,8 +462,7 @@
      </div>
      <!-- end analyze data modal -->
      <!-- begin mined block checking modal -->
-      <div class="modal fade" id="minedBlockTrackerModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel"
-        aria-hidden="true" data-backdrop="static">
+      <div class="modal fade" id="minedBlockTrackerModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-color: #840032;">
            <div class="modal-header">
@@ -497,8 +480,7 @@
              <main>
                <div class="box node" style="width:100%; background: #000000; background-color: #000;">
                  <h3 style="padding: 20px;">Ether-1 Transaction Status:
-                    <span id="mining-status-message"
-                      style="color: #3CB371; font-size: 24px; text-align: center !important;">In
+                    <span id="mining-status-message" style="color: #3CB371; font-size: 24px; text-align: center !important;">In
                      Progress</span>
                  </h3>
                  <div>
@@ -507,8 +489,7 @@
                      <span class="mining-message" id="mining-message" style="color: #3CB371; font-size: 24px;"></span>
                    </center>
                  </div>
-                  <div class="summary"
-                    style="text-align: center !important; padding: 20px; width:100%; background: #000000;">
+                  <div class="summary" style="text-align: center !important; padding: 20px; width:100%; background: #000000;">
                    <h3 style="font-size: 24px;">Current Ether-1 Block Height:
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                      <span id="block-height" style="color: #3CB371; font-size: 24px;">0</span>
@@ -522,8 +503,7 @@
      </div>
      <!-- end mined block checking modal -->
      <!-- begin preparing upload modal -->
-      <div class="modal fade" id="preparingUploadModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel"
-        aria-hidden="true" data-backdrop="static">
+      <div class="modal fade" id="preparingUploadModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-color: #840032;">
            <div class="modal-header">
@@ -556,8 +536,7 @@
      </div>
      <!-- end preparing upload modal -->
      <!-- begin contract detail modal -->
-      <div class="modal fade" id="contractDetailModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel"
-        aria-hidden="true" data-backdrop="static">
+      <div class="modal fade" id="contractDetailModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-color: #840032;">
            <div class="modal-header">
@@ -567,8 +546,7 @@
              <center>
                <img src="assets/dashboard/images/ethofslogo.png" width="200" alt="Ether-1 ethoFS Logo">
              </center>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;"
-                onclick="resetContractDetailTableRows();">
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;" onclick="resetContractDetailTableRows();">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
@@ -635,8 +613,7 @@
                    </tr>
                    <tr>
                      <td data-th="Contract Duration (Blocks)">
-                        <select class="js-select22" name="extend-contract" id="extend-contract"
-                          onchange="contractExtensionChange(this);">
+                        <select class="js-select22" name="extend-contract" id="extend-contract" onchange="contractExtensionChange(this);">
                          <option value="100000" selected="selected">100000
                            - 15 Days
                          </option>
@@ -675,8 +652,7 @@
                    </tr>
                  </table>
                  <div class="table-data__tool-right" style="margin-left: 15px;">
-                    <button class="btn btn-primary" id="contract-extension-button" type="button"
-                      onclick="contractExtensionConfirmation();">Extend Hosting Contract</button>
+                    <button class="btn btn-primary" id="contract-extension-button" type="button" onclick="contractExtensionConfirmation();">Extend Hosting Contract</button>
                    <br>
                    <br>
                  </div>
@@ -684,10 +660,8 @@
                </div>
              </main>
            </div>
-            <div class="modal-footer"
-              style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
-              <button type="button" class="btn btn-primary" data-dismiss="modal"
-                onclick="resetContractDetailTableRows();">Close</button>
+            <div class="modal-footer" style="background-color: #840032; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color:#000">
+              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="resetContractDetailTableRows();">Close</button>
            </div>
          </div>
        </div>
@@ -702,12 +676,9 @@
      module = undefined;
    }
  </script>
-  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js"
-    integrity="sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js" integrity="sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=" crossorigin="anonymous"></script>
  <!-- Jquery Core Js -->
-  <script src="assets/dashboard/plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap Core Js -->
-  <script src="assets/dashboard/plugins/bootstrap/js/bootstrap.js"></script>
  <!-- Select Plugin Js -->
  <script src="assets/dashboard/plugins/bootstrap-select/js/bootstrap-select.js"></script>
  <!-- Slimscroll Plugin Js -->
--- a/assets/templates/wallets.html
+++ b/assets/templates/wallets.html
@@ -103,3 +103,5 @@
  <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnImportFromPrivateKeyConfirm">Import</button>
 </div>
 </div>
+
+<span id="nodestorage" style="display:none;">Loading</span>
--- a/index.html
+++ b/index.html
@@ -25,10 +25,12 @@
      module = undefined;
    }
  </script>
+  <span id="nodestorage" style="display:none;">Loading</span>

  <!-- normal script imports etc -->
  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js" integrity="sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=" crossorigin="anonymous"></script>
  <script src="./assets/scripts/jquery.min.js"></script>
+  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src="./assets/scripts/handlebars.js"></script>
  <script src="./assets/scripts/materialize.min.js"></script>
  <script src="./assets/scripts/datatables.min.js"></script>
--- a/main.js
+++ b/main.js
@@ -1,12 +1,17 @@
 // Modules to control application life and create native browser window
-const {app, Menu, ipcMain, BrowserWindow} = require("electron");
+const {
+  app,
+  Menu,
+  ipcMain,
+  BrowserWindow
+} = require("electron");
 const singleInstance = require("single-instance");
 const path = require("path");
 const fs = require("fs");

 var locker = new singleInstance("Ether1DesktopWallet");

-locker.lock().then(function () {
+locker.lock().then(function() {
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  mainWindow = null;
@@ -30,7 +35,7 @@ locker.lock().then(function () {
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
-    mainWindow.on("closed", function () {
+    mainWindow.on("closed", function() {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
@@ -46,7 +51,7 @@ locker.lock().then(function () {
  app.on("ready", createWindow);

  // Quit when all windows are closed.
-  app.on("window-all-closed", function () {
+  app.on("window-all-closed", function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
@@ -55,7 +60,7 @@ locker.lock().then(function () {
    }
  });

-  app.on("activate", function () {
+  app.on("activate", function() {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
@@ -76,7 +81,7 @@ locker.lock().then(function () {
  ipcMain.on("appQuit", (event, arg) => {
    app.quit();
  });
-}).catch(function (err) {
+}).catch(function(err) {
  app.quit();
 });