Show pending tx and sort all txs

css/index.css

@@ -321,6 +321,21 @@ p.hint {
   border-bottom: 1px solid #ccc;
 }
 
+.transactionList .txElement .transactionType span.transactionStatus {
+  text-transform: uppercase;
+  padding: 2px;
+  margin-left: 8px;
+  font-size: 9px;
+}
+.transactionList .txElement .transactionType span.transactionStatus.confirmed {
+  background-color: #eafad7;
+  color: #609a1c;
+}
+.transactionList .txElement .transactionType span.transactionStatus.pending {
+  background-color: #FFF2DB;
+  color: #CA810A;
+}
+
 .transactionExpand .transactionExpandHeader {
   display: flex;
   justify-content: space-between;

js/fillHomeData.js

@@ -3,7 +3,7 @@
 import { getExchangeRate } from './utils/exchanges.js'
 import { getLastActiveAccount, getAllAccounts } from './utils/accounts.js'
 
-const API = 'https://api.testnet.semux.online/v2.2.0/'
+const API = 'https://api.testnet.semux.online/v2.3.0/'
 
 async function getAccountData () {
   let lastActive = await getLastActiveAccount()
@@ -60,44 +60,85 @@ async function fillAccount () {
     $('p.usdValue').hide()
   }
   $('.semLocked').prepend('<span>' + lockedBal.toFixed(3) + ' SEM</span>')
-  // getTxs
+}
+
+async function updateTxsList () {
+  const data = await getAccountData()
   if (data.result.transactionCount > 5) {
-    const limitFrom = Number(data.result.transactionCount) - 5
+    // show latest 10 txs
+    const limitFrom = Number(data.result.transactionCount) - 10
     const limitTo = Number(data.result.transactionCount)
     const txsData = await getTxs(data.address, limitFrom, limitTo)
-    console.log(txsData)
-    fillTxs(txsData, data.address)
+    // if we get pending tx - that to setInterval(updateTxsList, 1000*60) else noting
+
+    fillTxs(txsData.txs, data.address)
+    if (txsData.pending) {
+      console.log('Update TxsList')
+      setInterval(updateTxsList, 1000 * 10)
+    }
   } else if (data.result.transactionCount > 0) {
     const txsData = await getTxs(data.address, 0, 5)
-    fillTxs(txsData, data.address)
+    fillTxs(txsData.txs, data.address)
+    if (txsData.pending) {
+      console.log('Update TxsList')
+      setInterval(updateTxsList, 1000 * 10)
+    }
   } else {
     $('.transactionList').append("<p class = 'noTxs gray'>No Transactions</p>")
   }
 }
-
 fillAccount()
-
+updateTxsList()
+// update tranasction list every minute
 // get Latest 5 txs
 async function getTxs (address, limitFrom, limitTo) {
-  const response = await fetch(API + 'account/transactions?address=' + address + '&from=' + limitFrom + '&to=' + limitTo)
-  const data = await response.json()
-  return data
+  let isPending = false
+  let txArray = []
+  try {
+    var completedTxsCall = await fetch(API + 'account/transactions?address=' + address + '&from=' + limitFrom + '&to=' + limitTo)
+  } catch (e) {
+    console.log('Cannot get confirmed txs')
+    console.error(e)
+  }
+  try {
+    var pendingTxsCall = await fetch(API + 'account/pending-transactions?address=' + address + '&from=0&to=5')
+  } catch (e) {
+    console.log('Cannot get pending txs')
+    console.error(e)
+  }
+  const completedTxs = await completedTxsCall.json()
+  const pendingTxs = await pendingTxsCall.json()
+  txArray = completedTxs.result
+
+  if (pendingTxs.result.length > 0) {
+    for (let pendingTx of pendingTxs.result) {
+      pendingTx.pending = true
+      txArray.push(pendingTx)
+    }
+    isPending = true
+  }
+  txArray.sort(compare)
+  return { txs: txArray, pending: isPending }
 }
 
 async function fillTxs (data, address) {
+  $('.transactionList').html('')
   if (!data) return { error: true, reason: 'Node API Drop' }
   let html = ''
-  for (let tx of data.result) {
+  for (let tx of data) {
+    let status = ''
     let value = formatAmount(tx.value)
     const timestamp = tx.timestamp
     let type = tx.to === address ? 'in' : 'out'
     if (tx.from === tx.to) {
       type = 'internal'
     }
     value = type === 'out' ? '-' + value : '+' + value
+    status = tx.pending ? 'pending' : 'confirmed'
     html +=
       `<div class='txElement'><div class='transactionItem'><div class='txDataType'>` +
-      `<p class='tranasctionType'>${tx.type}</p>` +
+      `<p class='transactionType'>${tx.type}` +
+      `<span class = 'transactionStatus ${status}'>${status}</span></p>` +
       `<p class='transactionDate'>${formatDate(timestamp)}</p>` +
       `</div>` +
       `<div class='transactionAmount tx-${type}'>${value} SEM</div><div class='clearfix'></div></div>` +
@@ -122,7 +163,7 @@ function formatDate (string) {
   newDate.setTime(string)
   const month = newDate.getMonth() + 1
   const year = newDate.getFullYear()
-  const day = newDate.getDay() + 1
+  const day = newDate.getDate()
   const minutes = newDate.getMinutes()
   const hours = newDate.getHours()
   const mmddyy = month + '/' + day + '/' + year + ' at ' + hours + ':' + minutes
@@ -142,3 +183,13 @@ function formatAmount (string) {
   const digit = Number(string) / Math.pow(10, 9)
   return digit
 }
+
+function compare (a, b) {
+  if (a.timestamp > b.timestamp) {
+    return -1
+  }
+  if (a.timestamp < b.timestamp) {
+    return
+  }
+  return 0
+}

js/semuxCalls.js

@@ -168,14 +168,12 @@ $('button#passwordConfirm').on('click', function (e) {
           return $('span.error').text(keys.reason)
         }
         txObj.privateKey = keys
-
         const hash = await sendTx(txObj)
 
         if (hash) {
           chrome.storage.local.set({ 'txData': {} })
           window.location.href = 'home.html'
         }
-        // update tx list with pending tx
       }
     }
   })
@@ -187,6 +185,8 @@ async function sendTx (txObj) {
   } catch (e) {
     return { error: true, reason: 'Cannot get nonce' }
   }
+  console.log('----------')
+  console.log(isFrom)
   const nonce = parseInt(isFrom.nonce, 10) + parseInt(isFrom.pendingTransactionCount, 10)
 
   try {
@@ -204,6 +204,7 @@ async function sendTx (txObj) {
   } catch (e) {
     console.log(e)
   }
+  console.log(tx)
 
   const hash = await sendTxToApi(tx)
   return hash