Merge pull request #86 from cosmos/peng/74-transactions-page

Create mockup for transactions page

app/src/renderer/components/common/AppMenu.vue

@@ -3,6 +3,7 @@
     part(title='Wallet')
       list-item(to="/" exact @click.native="close" title="Balances")
       list-item(to="/wallet/send" exact @click.native="close" title="Send")
+      list-item(to="/wallet/transactions" exact @click.native="close" title="Transactions")
     part(title='Govern')
       list-item(to="/proposals" exact @click.native="close" title="Proposals")
     part(title='Stake')

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

@@ -1,36 +1,28 @@
-<template>
-  <ul class="card-transaction">
-    <li class="date">{{ date }}</li>
-    <template v-for="coin in tran.inputs[0].coins">
-      <li class="balance">
-        <span :class="valueCss(coin.amount)">{{ coin.amount }}</span>
-      </li>
-      <li class="denom">
-        <span class="value">{{ coin.denom.toUpperCase() }}</span>
-      </li>
-    </template>
-  </ul>
+<template lang='pug'>
+.card-transaction
+  .key-value(v-for='coin in tx.inputs[0].coins')
+    .value(:class='sign(coin.amount)') {{ coin.amount }}
+    .key {{ coin.denom.toUpperCase() }}
+  .date {{ date }}
 </template>
 
 <script>
+import dateUnixAgo from '../../scripts/dateUnixAgo'
 export default {
   computed: {
-    tran () {
-      return this.transactionValue.tx
+    tx () {
+      // return this.transactionValue.tx
+      return this.transactionValue
     },
-    date () {
-      return new Date(this.transactionValue.time).toLocaleString()
-    }
+    date () { return dateUnixAgo(this.transactionValue.time) }
   },
   methods: {
-    valueCss (num) {
-      let v = 'value'
+    sign (num) {
       if (num > 0) {
-        v += ' positive'
+        return 'positive'
       } else if (num < 0) {
-        v += ' negative'
+        return 'negative'
       }
-      return v
     }
   },
   props: ['transaction-value']
@@ -40,60 +32,38 @@ export default {
 <style lang="stylus">
 @require '../../styles/variables.styl'
 
-ul.card-transaction
-  padding 0.25em 0.5em
-  background app-fg
-
+.card-transaction
   display flex
   align-items center
 
-  border-left 1px solid bc
-  border-right 1px solid bc
-
-  &:nth-of-type(2n)
-    background lighten(app-bg, 50%)
+  border-bottom 1px solid bc-dim
+  height 3rem
 
-  mono()
-  height 2rem
-  font-size 0.875rem
-  li
-    display flex
-    align-items center
-    &.balance
-      flex 1
-      .value
-        text-align right
-
-    &.denom
-      width 10rem
-      padding 0 1rem
+  .date
+    color dim
+    padding 0 1rem
 
-    .key
-      color light
-      padding-right 0.5rem
-      text-transform uppercase
-      font-weight bold
-      font-size 0.666rem
-      letter-spacing 0.05em
+  .date, .key-value
+    flex 1
 
-    .value
-      flex 1
-      display inline-block
+  .key-value
+    display flex
+    flex-flow row nowrap
+    padding 0 0.5rem
 
-      &.positive
-        color hsl(120,100%,35%)
-        &:before
-          content '+'
-          display inline-block
+  .key, .value
+    padding 0 0.5rem
 
-      &.negative
-        color hsl(0,100%,35%)
-        &:before
-          content '-'
-          display inline-block
+  .value
+    &.positive
+      color accent1
+      &:before
+        content '+'
+        display inline-block
 
-ul.card-transaction:first-of-type
-  border-top 1px solid bc
-ul.card-transaction:last-of-type
-  border-bottom 1px solid bc
+    &.negative
+      color accent2
+      &:before
+        content '-'
+        display inline-block
 </style>

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

@@ -0,0 +1,58 @@
+<template lang="pug">
+page(title='Transactions')
+  modal-search(v-if="filters.transactions.search.visible" type="transactions")
+  tool-bar
+    a(@click='setSearch(true)'): i.material-icons search
+
+  part(title="All Transactions")
+    card-transaction(
+      v-for="i in filteredTransactions"
+      :transaction-value="i")
+    list-item(v-if='filteredTransactions.length === 0' dt="N/A" dd="None Available")
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { includes, orderBy } from 'lodash'
+import Mousetrap from 'mousetrap'
+import AnchorCopy from '../common/AnchorCopy'
+import Btn from '@nylira/vue-button'
+import ListItem from '../common/NiListItem'
+import CardTransaction from './CardTransaction'
+import ModalSearch from '../common/ModalSearch'
+import Page from '../common/NiPage'
+import Part from '../common/NiPart'
+import ToolBar from '../common/NiToolBar'
+export default {
+  name: 'page-transactions',
+  components: {
+    AnchorCopy,
+    Btn,
+    CardTransaction,
+    ListItem,
+    ModalSearch,
+    Page,
+    Part,
+    ToolBar
+  },
+  computed: {
+    ...mapGetters(['filters', 'transactions']),
+    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
+      }
+    }
+  },
+  methods: {
+    setSearch (bool) { this.$store.commit('setSearchVisible', ['transactions', bool]) }
+  },
+  mounted () {
+    Mousetrap.bind(['command+f', 'ctrl+f'], () => this.setSearch(true))
+    Mousetrap.bind('esc', () => this.setSearch(false))
+  }
+}
+</script>

app/src/renderer/routes.js

@@ -70,9 +70,9 @@ export default [
 
   // WALLET
   { path: '/', name: 'balances', component: wallet('Balances') },
-  // { path: '/wallet', name: 'balances', component: wallet('Balances') },
   { path: '/wallet/send', name: 'send', component: wallet('Send') },
   { path: '/wallet/receive', name: 'receive', component: wallet('Receive') },
+  { path: '/wallet/transactions', name: 'transactions', component: wallet('Transactions') },
 
   // 404
   { path: '/404', component: common('404') },

app/src/renderer/vuex/getters.js

@@ -1,5 +1,4 @@
 export const mainCounter = state => state.counters.main
-export const allTransactions = state => state.transactions
 export const notifications = state => state.notifications
 export const logOutput = state => state.log.output
 
@@ -21,6 +20,7 @@ export const proposals = state => state.proposals
 
 // wallet
 export const wallet = state => state.wallet
+export const transactions = state => state.transactions
 
 // ui
 export const filters = state => state.filters

app/src/renderer/vuex/json/transactions.json

@@ -1,5 +1,7 @@
-{
-  "dri3bdow": {
+[
+  {
+    "id": "di30snrh",
+    "time": 1508630400000,
     "gas": 114,
     "fee": { "denom": "test", "amount": 125 },
     "inputs": [
@@ -24,7 +26,9 @@
       }
     ]
   },
-  "r03jf04n": {
+  {
+    "id": "r03jf04n",
+    "time": 1509062400000,
     "gas": 343,
     "fee": { "denom": "test", "amount": 231 },
     "inputs": [
@@ -49,7 +53,9 @@
       }
     ]
   },
-  "boe9rbdi": {
+  {
+    "id": "boe9rbdi",
+    "time": 1509321600000,
     "gas": 249,
     "fee": { "denom": "test", "amount": 294 },
     "inputs": [
@@ -74,4 +80,4 @@
       }
     ]
   }
-}
+]

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

@@ -18,6 +18,12 @@ export default ({ commit, basecoin }) => {
         query: ''
       }
     },
+    transactions: {
+      search: {
+        visible: false,
+        query: ''
+      }
+    },
     validators: {
       search: {
         visible: false,

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

@@ -0,0 +1,7 @@
+import data from '../json/transactions.json'
+
+export default ({ commit, basecoin }) => {
+  const state = data
+  const mutations = {}
+  return { state, mutations }
+}