WIP: improvements of the voting screen

css/index.css

@@ -17,10 +17,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  margin-bottom: 0 !important;
-}
-
 ul {
   list-style: none;
 }
@@ -55,30 +51,38 @@ ul {
   color: #808080;
 }
 
-.buttons {
-  margin-top: 8px;
-}
-
-.buttons button {
-  color: #037DD6;
-  width: 90px;
-  border: 2px solid #B0D7F2;
-  background-color: #fff;
+.main-button {
+  cursor: pointer;
+  background: radial-gradient(ellipse at 100% 100%, #265DD7 0%, #0582CA 100%);
+  color: white;
+  transition: transform .4s ease, box-shadow .4s ease;
+  box-shadow: 0 0.375rem 1.3125rem rgba(0, 0, 0, 0.15);
+  width: 100%;
+  text-transform: uppercase;
+  letter-spacing: 0.1rem;
+  padding: 10px 0 10px 0;
+  border-radius: 30px;
 }
 
-.buttons button:hover {
-  border: 2px solid #FFC04C;
+.main-button:hover {
+  background: radial-gradient(ellipse at 100% 100%, #265DD7 0%, #098ad4 100%);
 }
 
-button.btn-cancel {
-  background-color: #ccc;
-  border: 2px solid #666666;
+a.btn-link {
+  display: block;
+  text-align: center;
+  color: #a7a7a7;
+  margin: 10px 0;
 }
 
-p.error, span.error, span.invalidAddress, span.invalidAmount {
-  display: block;
-  margin-top: 10px;
-  color: #F44336;
+p.error,
+span.error {
+  color: #D94432;
+  text-align: center;
+  font-size: 14px;
+  padding: 5px 0;
+  border-radius: 5px;
+  margin-bottom: 10px;
 }
 
 span.invalidAddress, span.invalidAmount {
@@ -125,7 +129,8 @@ span.invalidAddress, span.invalidAmount {
   box-shadow: 0 17px 43px 0 rgba(0, 0, 0, 0.2);
 }
 
-button.welcome-button:focus {
+button.welcome-button:focus,
+button.main-button:focus {
   outline: 0;
 }
 
@@ -279,6 +284,7 @@ p.hint {
 .app-footer {
   height: 100px;
   margin-top: 15px;
+  padding: 0 15px;
 }
 
 .txDataType {
@@ -387,14 +393,12 @@ p.hint {
 /* -------->  Fix to the main style ? */
 .new-account .buttons, .sendTxBlock .buttons, .confirmPage .buttons {
   margin-top: 30px;
-  display: flex;
-  justify-content: space-between;
 }
-.new-account .buttons button, .sendTxBlock .buttons button,
+/* .new-account .buttons button, .sendTxBlock .buttons button,
 .confirmPage .buttons button {
   height: 50px;
   width: 160px;
-}
+} */
 
 input.customInput{
   padding: 0 20px;
@@ -461,28 +465,26 @@ button.green-button:hover {
 
 
 /* Send And Vote Page */
+.senderAccount p {
+  margin: 0;
+}
+
+.senderName {
+  font-size: 13px;
+  color: gray;
+  margin: 0;
+}
 
 .sendTxBlock .flex, .confirmPage .flex {
   margin-top: 8px;
   display: flex;
   justify-content: space-between;
 }
 
-
-.sendTxBlock .flex input.customInput, .sendTxBlock .senderAccount {
-  width: 70%;
-}
-
 .h3Headline .goToHomePage:hover {
   cursor: pointer;
 }
 
-.senderAccount {
-  padding: 0 20px;
-  font-size: 16px;
-  border: 1px solid #d2d8dd;
-}
-
 /* Home Page */
 .accountActions {
   margin-top: 10px;
@@ -684,3 +686,8 @@ a.back-link {
   color: #444;
   text-decoration: underline;
 }
+
+div.delegatesList {
+  width: 100% !important;
+  margin: 10px 0;
+}

js/client.js

@@ -7,7 +7,6 @@ $(function () {
 
 $('.goToHomePage').on('click', function (e) {
   e.preventDefault()
-  chrome.storage.local.set({ 'txData': {} })
   window.location.href = 'home.html'
 })
 
@@ -57,7 +56,12 @@ $('div.goToNewAccPage, button.goToNewAccPage').on('click', function (e) {
 
 $('a.goToSendPage, div.goToSendPage').on('click', function (e) {
   e.preventDefault()
-  window.location.href = 'send.html'
+  const txType = $('.confirmType').text()
+  if (txType && txType === 'VOTE') {
+    window.location.href = 'vote.html'
+  } else {
+    window.location.href = 'send.html'
+  }
 })
 
 $('a.goToVotePage').on('click', function (e) {
@@ -80,9 +84,8 @@ $('button.goToStex').on('click', function (e) {
   chrome.tabs.create({ url: 'https://app.stex.com/en/basic-trade/pair/BTC/SEM/1D' })
 })
 
-$('button.btn-cancel').on('click', function (e) {
+$('.btn-cancel').on('click', function (e) {
   e.preventDefault()
-  chrome.storage.local.set({ 'txData': {} })
   window.location.href = 'home.html'
 })
 

js/delegates.js

@@ -0,0 +1,35 @@
+'use strict'
+/* global $, fetch, chrome */
+
+const API_DELEGATES = 'https://api.testnet.semux.online/v2.2.0/delegates'
+
+async function getDelegates () {
+  let data = {}
+  try {
+    data = await fetch(API_DELEGATES)
+    data = await data.json()
+  } catch (e) {
+    /* TODO: Show error in UI */
+    return console.error(e)
+  }
+  chrome.storage.local.get('txData', (result) => {
+    let selectedDelegate
+    if (result.txData) {
+      selectedDelegate = result.txData.toAddress
+    }
+    if (data.success) {
+      let html = '<option value="">Select Delegate</option>'
+      const delegates = data.result
+      for (let i = 0; i < delegates.length; i++) {
+        html += `<option ${selectedDelegate === delegates[i]['address'] ? 'selected' : ''}` +
+        ` data-address="${delegates[i]['address']}" ` +
+        `data-subtext="${parseInt(parseFloat(delegates[i]['votes']) / 1e9, 10)} SEM">` +
+        `${delegates[i]['name']}</option>`
+      }
+      $('select.delegatesList').html(html)
+      $('select.delegatesList.liveSearch').selectpicker()
+    }
+  })
+}
+
+getDelegates()

js/fillHomeData.js

@@ -5,6 +5,9 @@ import { getLastActiveAccount, getAllAccounts } from './utils/accounts.js'
 
 const API = 'https://api.testnet.semux.online/v2.2.0/'
 
+/* Reset old txs */
+chrome.storage.local.set({ 'txData': {} })
+
 async function getAccountData () {
   let lastActive = await getLastActiveAccount()
   /* If for some reason last active account is not found, set the first one as active */
@@ -65,7 +68,6 @@ async function fillAccount () {
     const limitFrom = Number(data.result.transactionCount) - 5
     const limitTo = Number(data.result.transactionCount)
     const txsData = await getTxs(data.address, limitFrom, limitTo)
-    console.log(txsData)
     fillTxs(txsData, data.address)
   } else if (data.result.transactionCount > 0) {
     const txsData = await getTxs(data.address, 0, 5)

js/semuxCalls.js

@@ -131,7 +131,7 @@ function getKey (walletInfo, pass) {
   } catch (err) {
     return {
       error: true,
-      reason: 'Invalid password.'
+      reason: 'Password incorrect.'
     }
   }
 }