Mocked Transaction History

app/src/main/mockServer.js

@@ -8,6 +8,57 @@ let randomPubkey = () => ({
   data: randomBytes(32).toString('hex')
 })
 
+let randomAddress = () => randomBytes(20).toString('hex')
+
+let randomTime = () => Date.now() - casual.integer(0, 32e9)
+
+let randomTx = ({ from, to }) => {
+  let amount = casual.integer(1, 1e6)
+  return {
+    tx: {
+      inputs: [{
+        sender: from || randomAddress(),
+        coins: [{ amount, denom: 'fermion' }]
+      }],
+      outputs: [{
+        receiver: to || randomAddress(),
+        coins: [{ amount, denom: 'fermion' }]
+      }]
+    },
+    time: randomTime(),
+    height: 1000
+  }
+}
+
+let randomBondTx = (address, delegator) => ({
+  tx: {
+    type: Math.random() > 0.5 ? 'bond' : 'unbond',
+    validator: delegator ? randomAddress() : address,
+    address: delegator ? address : randomAddress(),
+    shares: casual.integer(1, 1e6)
+  },
+  time: randomTime(),
+  height: 1000
+})
+
+let randomCandidate = () => ({
+  address: randomAddress(),
+  owner: randomAddress(), // address
+  shares: casual.integer(1000, 1e7),
+  votingPower: casual.integer(10, 1e5),
+  since: casual.date('YYYY-MM-DD'),
+  description: {
+    name: casual.username,
+    website: casual.url,
+    details: casual.sentences(3)
+  },
+  commissionRate: casual.double(0.005, 0.05),
+  commissionMax: casual.double(0.05, 0.25),
+  status: [ 'active', 'bonding', 'unbonding' ][Math.floor(Math.random() * 3)],
+  slashRatio: Math.random() < 0.9 ? casual.double(0.01, 0.5) : 0,
+  reDelegatingShares: casual.integer(1000, 1e7)
+})
+
 module.exports = function (port = 8999) {
   let app = express()
 
@@ -19,13 +70,13 @@ module.exports = function (port = 8999) {
 
   // delegation mock API
   let candidates = new Array(50).fill(0).map(randomPubkey)
-  app.get('/query/stake/candidate', (req, res) => {
+  app.get('/query/stake/candidates', (req, res) => {
     res.json({
       height: 10000,
       data: candidates
     })
   })
-  app.get('/query/stake/candidate/:pubkey', (req, res) => {
+  app.get('/query/stake/candidates/:pubkey', (req, res) => {
     res.json({
       height: 10000,
       data: {
@@ -116,6 +167,35 @@ module.exports = function (port = 8999) {
       }
     })
   })
+  app.get('/candidates', (req, res) => {
+    res.json(new Array(200).fill(0).map(randomCandidate))
+  })
+
+  // tx history
+  app.get('/tx/coins/:address', (req, res) => {
+    let { address } = req.params
+    let txs = []
+    for (let i = 0; i < 100; i++) {
+      let toMe = Math.random() > 0.5
+      txs.push(randomTx(toMe ? { to: address } : { from: address }))
+    }
+    txs.sort((a, b) => b.time - a.time)
+    res.json(txs)
+  })
+  app.get('/tx/bondings/delegator/:address', (req, res) => {
+    let { address } = req.params
+    let txs = new Array(100).fill(0)
+      .map(() => randomBondTx(address, true))
+    txs.sort((a, b) => b.time - a.time)
+    res.json(txs)
+  })
+  app.get('/tx/bondings/validator/:address', (req, res) => {
+    let { address } = req.params
+    let txs = new Array(100).fill(0)
+      .map(() => randomBondTx(address, false))
+    txs.sort((a, b) => b.time - a.time)
+    res.json(txs)
+  })
 
   // proxy everything else to light client
   app.use(proxy('http://localhost:8998'))

app/src/renderer/components/wallet/CardTransaction.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
 .card-transaction
   .key-value(v-for='coin in coins')
-    .value(:class='sign(coin.amount)') {{ coin.amount }}
+    .value(:class='sent ? "negative" : "positive"') {{ coin.amount }}
     .key {{ coin.denom.toUpperCase() }}
   .date {{ date }}
 </template>
@@ -10,23 +10,18 @@
 import dateUnixAgo from 'scripts/dateUnixAgo'
 export default {
   computed: {
+    // TODO: sum relevant inputs/outputs
+    sent () {
+      return this.transactionValue.tx.inputs[0].sender === this.address
+    },
     coins () {
-      return this.transactionValue.tx.inputs[0]
+      return this.transactionValue.tx.inputs[0].coins
     },
     date () {
       return dateUnixAgo(this.transactionValue.time)
     }
   },
-  methods: {
-    sign (num) {
-      if (num > 0) {
-        return 'positive'
-      } else if (num < 0) {
-        return 'negative'
-      }
-    }
-  },
-  props: ['transaction-value']
+  props: ['transaction-value', 'address']
 }
 </script>
 

app/src/renderer/components/wallet/PageTransactions.vue

@@ -9,13 +9,14 @@ page(title='Transactions')
 
   card-transaction(
     v-for="i in filteredTransactions"
-    :transaction-value="i")
+    :transaction-value="i"
+    :address="wallet.key.address")
   data-empty-tx(v-if='filteredTransactions.length === 0')
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { includes, orderBy } from 'lodash'
+// import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import AnchorCopy from 'common/AnchorCopy'
 import Btn from '@nylira/vue-button'
@@ -40,16 +41,10 @@ export default {
     ToolBar
   },
   computed: {
-    ...mapGetters(['filters', 'transactions']),
+    ...mapGetters(['filters', 'transactions', 'wallet']),
     filteredTransactions () {
-      let query = this.filters.transactions.search.query
-      let list = orderBy(this.transactions, ['id', 'desc'])
-
-      if (this.filters.transactions.search.visible) {
-        return list.filter(i => includes(i.id.toLowerCase(), query))
-      } else {
-        return list
-      }
+      return this.transactions
+      // TODO: restore searchability? (what part of the tx are we searching?)
     }
   },
   methods: {

app/src/renderer/vuex/getters.js

@@ -20,7 +20,7 @@ export const proposals = state => state.proposals
 
 // wallet
 export const wallet = state => state.wallet
-export const transactions = state => state.transactions
+export const transactions = state => state.wallet.history
 
 // ui
 export const filters = state => state.filters

app/src/renderer/vuex/modules/wallet.js

@@ -10,7 +10,8 @@ export default ({ commit, node }) => {
       { denom: 'mycoin', amount: 0 }
     ],
     sequence: 0,
-    key: { address: '' }
+    key: { address: '' },
+    history: []
   }
 
   let mutations = {
@@ -25,6 +26,10 @@ export default ({ commit, node }) => {
       if (state.sequence === sequence) return
       state.sequence = sequence
       console.log('setWalletSequence', sequence)
+    },
+    setWalletHistory (state, history) {
+      state.history = history
+      console.log('setWalletHistory', history)
     }
   }
 
@@ -47,6 +52,7 @@ export default ({ commit, node }) => {
     queryWalletState ({ state, dispatch }) {
       dispatch('queryWalletBalances')
       dispatch('queryWalletSequence')
+      dispatch('queryWalletHistory')
     },
     async queryWalletBalances ({ state, commit }) {
       let res = await node.queryAccount(state.key.address)
@@ -58,6 +64,11 @@ export default ({ commit, node }) => {
       if (!res) return
       commit('setWalletSequence', res.data)
     },
+    async queryWalletHistory ({ state, commit }) {
+      let res = await node.coinTxs(state.key.address)
+      if (!res) return
+      commit('setWalletHistory', res)
+    },
     async walletSend ({ state, dispatch }, args) {
       let cb = args.cb
       delete args.cb

app/yarn.lock

@@ -386,8 +386,8 @@ cosmos-fundraiser@^7.14.2:
     web3 "0.18.1"
 
 cosmos-sdk@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cosmos-sdk/-/cosmos-sdk-1.4.0.tgz#72a818473fd4034de400ed97561edaf9e3b53727"
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/cosmos-sdk/-/cosmos-sdk-1.4.4.tgz#4c4efa1071c27ea6b3fe365e7b3b32e16453e218"
   dependencies:
     axios "^0.16.2"
     old "^0.2.0"

test/unit/specs/CardTransaction.spec.js

@@ -2,21 +2,32 @@ import { shallow } from 'vue-test-utils'
 import CardTransaction from 'renderer/components/wallet/CardTransaction'
 
 describe('CardTransaction', () => {
-  let wrapper, num, result
+  let wrapper
   let propsData = {
     transactionValue: {
       tx: {
         inputs: [
           {
-            coins: {
+            coins: [{
               denom: 'jbcoins',
               amount: 1234
-            }
+            }],
+            sender: 'otherAddress'
+          }
+        ],
+        outputs: [
+          {
+            coins: [{
+              denom: 'jbcoins',
+              amount: 1234
+            }],
+            recipient: 'myAddress'
           }
         ]
       },
-      time: new Date()
-    }
+      time: Date.now()
+    },
+    address: 'myAddress'
   }
 
   beforeEach(() => {
@@ -28,18 +39,4 @@ describe('CardTransaction', () => {
   it('has the expected html structure', () => {
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
-
-  it('returns negative as a string for numbers below zero', () => {
-    num = -1
-    result = wrapper.vm.sign(num)
-
-    expect(result).toEqual('negative')
-  })
-
-  it('returns positive as a string for numbers above zero', () => {
-    num = 1
-    result = wrapper.vm.sign(num)
-
-    expect(result).toEqual('positive')
-  })
 })