Merge pull request #118 from MetaMask/AddPersistentTransactionLog

Persist transactions to config-manager

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Current Master
 
+- Pending transactions are now persisted to localStorage and resume even after browser is closed.
+- Completed transactions are now persisted and can be displayed via UI.
+
 # 1.5.1 2016-04-15
 
 - Corrected text above account list. Selected account is visible to all sites, not just the current domain.

app/scripts/background.js

@@ -191,7 +191,8 @@ idStore.on('update', updateBadge)
 
 function updateBadge(state){
   var label = ''
-  var count = Object.keys(state.unconfTxs).length
+  var unconfTxs = configManager.unconfirmedTxs()
+  var count = Object.keys(unconfTxs).length
   if (count) {
     label = String(count)
   }

app/scripts/lib/config-manager.js

@@ -134,6 +134,56 @@ ConfigManager.prototype.setData = function(data) {
   this.migrator.saveData(data)
 }
 
+ConfigManager.prototype.getTxList = function() {
+  var data = this.migrator.getData()
+  if ('transactions' in data) {
+    return data.transactions
+  } else {
+    return []
+  }
+}
+
+ConfigManager.prototype._saveTxList = function(txList) {
+  var data = this.migrator.getData()
+  data.transactions = txList
+  this.setData(data)
+}
+
+ConfigManager.prototype.addTx = function(tx) {
+  var transactions = this.getTxList()
+  transactions.push(tx)
+  this._saveTxList(transactions)
+}
+
+ConfigManager.prototype.getTx = function(txId) {
+  var transactions = this.getTxList()
+  var matching = transactions.filter(tx => tx.id === txId)
+  return matching.length > 0 ? matching[0] : null
+}
+
+ConfigManager.prototype.confirmTx = function(txId) {
+  this._setTxStatus(txId, 'confirmed')
+}
+
+ConfigManager.prototype.rejectTx = function(txId) {
+  this._setTxStatus(txId, 'rejected')
+}
+
+ConfigManager.prototype._setTxStatus = function(txId, status) {
+  var transactions = this.getTxList()
+  transactions.forEach((tx) => {
+    if (tx.id === txId) {
+      tx.status = status
+    }
+  })
+  this._saveTxList(transactions)
+}
+ConfigManager.prototype.unconfirmedTxs = function() {
+  var transactions = this.getTxList()
+  return transactions.filter(tx => tx.status === 'unconfirmed')
+  .reduce((result, tx) => { result[tx.id] = tx; return result }, {})
+}
+
 // observable
 
 ConfigManager.prototype.subscribe = function(fn){

app/scripts/lib/idStore.js

@@ -31,7 +31,6 @@ function IdentityStore(ethStore) {
   this._currentState = {
     selectedAddress: null,
     identities: {},
-    unconfTxs: {},
   }
   // not part of serilized metamask state - only kept in memory
   this._unconfTxCbs = {}
@@ -83,6 +82,8 @@ IdentityStore.prototype.getState = function(){
     isInitialized: !!configManager.getWallet() && !seedWords,
     isUnlocked: this._isUnlocked(),
     seedWords: seedWords,
+    unconfTxs: configManager.unconfirmedTxs(),
+    transactions: configManager.getTxList(),
   }))
 }
 
@@ -140,10 +141,11 @@ IdentityStore.prototype.addUnconfirmedTransaction = function(txParams, cb){
     time: time,
     status: 'unconfirmed',
   }
-  this._currentState.unconfTxs[txId] = txData
+  configManager.addTx(txData)
   console.log('addUnconfirmedTransaction:', txData)
 
   // keep the cb around for after approval (requires user interaction)
+  // This cb fires completion to the Dapp's write operation.
   this._unconfTxCbs[txId] = cb
 
   // signal update
@@ -154,7 +156,7 @@ IdentityStore.prototype.addUnconfirmedTransaction = function(txParams, cb){
 
 // comes from metamask ui
 IdentityStore.prototype.approveTransaction = function(txId, cb){
-  var txData = this._currentState.unconfTxs[txId]
+  var txData = configManager.getTx(txId)
   var txParams = txData.txParams
   var approvalCb = this._unconfTxCbs[txId] || noop
 
@@ -162,20 +164,20 @@ IdentityStore.prototype.approveTransaction = function(txId, cb){
   cb()
   approvalCb(null, true)
   // clean up
-  delete this._currentState.unconfTxs[txId]
+  configManager.confirmTx(txId)
   delete this._unconfTxCbs[txId]
   this._didUpdate()
 }
 
 // comes from metamask ui
 IdentityStore.prototype.cancelTransaction = function(txId){
-  var txData = this._currentState.unconfTxs[txId]
+  var txData = configManager.getTx(txId)
   var approvalCb = this._unconfTxCbs[txId] || noop
 
   // reject tx
   approvalCb(null, false)
   // clean up
-  delete this._currentState.unconfTxs[txId]
+  configManager.rejectTx(txId)
   delete this._unconfTxCbs[txId]
   this._didUpdate()
 }

test/unit/config-manager-test.js

@@ -68,4 +68,83 @@ describe('config-manager', function() {
       assert.equal(secondResult, secondRpc)
     })
   })
+
+  describe('transactions', function() {
+    beforeEach(function() {
+      configManager._saveTxList([])
+    })
+
+    describe('#getTxList', function() {
+      it('when new should return empty array', function() {
+        var result = configManager.getTxList()
+        assert.ok(Array.isArray(result))
+        assert.equal(result.length, 0)
+      })
+    })
+
+    describe('#_saveTxList', function() {
+      it('saves the submitted data to the tx list', function() {
+        var target = [{ foo: 'bar' }]
+        configManager._saveTxList(target)
+        var result = configManager.getTxList()
+        assert.equal(result[0].foo, 'bar')
+      })
+    })
+
+    describe('#addTx', function() {
+      it('adds a tx returned in getTxList', function() {
+        var tx = { id: 1 }
+        configManager.addTx(tx)
+        var result = configManager.getTxList()
+        assert.ok(Array.isArray(result))
+        assert.equal(result.length, 1)
+        assert.equal(result[0].id, 1)
+      })
+    })
+
+    describe('#confirmTx', function() {
+      it('sets the tx status to confirmed', function() {
+        var tx = { id: 1, status: 'unconfirmed' }
+        configManager.addTx(tx)
+        configManager.confirmTx(1)
+        var result = configManager.getTxList()
+        assert.ok(Array.isArray(result))
+        assert.equal(result.length, 1)
+        assert.equal(result[0].status, 'confirmed')
+      })
+    })
+
+    describe('#rejectTx', function() {
+      it('sets the tx status to rejected', function() {
+        var tx = { id: 1, status: 'unconfirmed' }
+        configManager.addTx(tx)
+        configManager.rejectTx(1)
+        var result = configManager.getTxList()
+        assert.ok(Array.isArray(result))
+        assert.equal(result.length, 1)
+        assert.equal(result[0].status, 'rejected')
+      })
+    })
+
+    describe('#unconfirmedTxs', function() {
+      it('returns unconfirmed txs in a hash', function() {
+        configManager.addTx({ id: '1', status: 'unconfirmed' })
+        configManager.addTx({ id: '2', status: 'confirmed' })
+        let result = configManager.unconfirmedTxs()
+        assert.equal(typeof result, 'object')
+        assert.equal(result['1'].status, 'unconfirmed')
+        assert.equal(result['0'], undefined)
+        assert.equal(result['2'], undefined)
+      })
+    })
+
+    describe('#getTx', function() {
+      it('returns a tx with the requested id', function() {
+        configManager.addTx({ id: '1', status: 'unconfirmed' })
+        configManager.addTx({ id: '2', status: 'confirmed' })
+        assert.equal(configManager.getTx('1').status, 'unconfirmed')
+        assert.equal(configManager.getTx('2').status, 'confirmed')
+      })
+    })
+  })
 })

ui/app/config.js

@@ -47,7 +47,6 @@ ConfigScreen.prototype.render = function() {
 
           currentProviderDisplay(metamaskState),
 
-
           h('div', [
             h('input', {
               placeholder: 'New RPC URL',
@@ -95,7 +94,7 @@ ConfigScreen.prototype.render = function() {
 }
 
 function currentProviderDisplay(metamaskState) {
-  var rpc = metamaskState.rpcTarget
+  var rpc = metamaskState.provider.rpcTarget
   return h('div', [
     h('h3', {style: { fontWeight: 'bold' }}, 'Currently using RPC'),
     h('p', rpc)