Improve transaction pages

app/src/main/mockServer.js

@@ -10,19 +10,35 @@ let randomPubkey = () => ({
 
 let randomAddress = () => randomBytes(20).toString('hex')
 
-let randomTime = () => Date.now() - casual.integer(0, 32e9)
+let randomTime = () => Date.now() - casual.integer(0, 32e7)
 
 let randomTx = ({ from, to }) => {
-  let amount = casual.integer(1, 1e6)
+  let amountOne = casual.double(1, 1e6)
+  let amountTwo = casual.double(1, 1e4)
+  let amountThree = casual.double(1, 1e2)
+  let threeCoins = [
+    { amount: amountOne, denom: 'fermion' },
+    { amount: amountThree, denom: 'lepton' },
+    { amount: amountTwo, denom: 'quark' }
+  ]
+  let twoCoins = [
+    { amount: amountThree, denom: 'lepton' },
+    { amount: amountTwo, denom: 'quark' }
+  ]
+  let oneCoin = [
+    { amount: amountOne, denom: 'fermion' }
+  ]
+  let coins = [oneCoin, twoCoins, threeCoins]
+  let randomCoins = coins[Math.floor(Math.random() * coins.length)]
   return {
     tx: {
       inputs: [{
         sender: from || randomAddress(),
-        coins: [{ amount, denom: 'fermion' }]
+        coins: randomCoins
       }],
       outputs: [{
         receiver: to || randomAddress(),
-        coins: [{ amount, denom: 'fermion' }]
+        coins: randomCoins
       }]
     },
     time: randomTime(),

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

@@ -0,0 +1,179 @@
+<template lang='pug'>
+.ni-li-tx.ni-li-tx-sent(v-if="sent" @click="viewTransaction")
+  .tx-icon: i.material-icons remove_circle
+  .tx-container
+    .tx-element.tx-coins
+      .tx-coin(v-for='coin in coinsSent')
+        .value {{ num.pretty(coin.amount) }}
+        .key {{ coin.denom }}
+    .tx-element.tx-date {{ date }}
+    .tx-element.tx-address {{ receiver }}
+
+.ni-li-tx.ni-li-tx-received(v-else @click="viewTransaction")
+  .tx-icon: i.material-icons add_circle
+  .tx-container
+    .tx-element.tx-coins
+      .tx-coin(v-for='coin in coinsReceived')
+        .value {{ num.pretty(coin.amount) }}
+        .key {{ coin.denom }}
+    .tx-element.tx-date {{ date }}
+    .tx-element.tx-address {{ sender }}
+</template>
+
+<script>
+import num from 'scripts/num'
+import dateUnixAgo from 'scripts/dateUnixAgo'
+export default {
+  name: 'ni-li-tx',
+  computed: {
+    // TODO: sum relevant inputs/outputs
+    sent () {
+      return this.transactionValue.tx.inputs[0].sender === this.address
+    },
+    sender () {
+      return this.transactionValue.tx.inputs[0].sender
+    },
+    coinsSent () {
+      return this.transactionValue.tx.inputs[0].coins
+    },
+    receiver () {
+      return this.transactionValue.tx.outputs[0].receiver
+    },
+    coinsReceived () {
+      return this.transactionValue.tx.inputs[0].coins
+    },
+    date () {
+      return dateUnixAgo(this.transactionValue.time)
+    }
+  },
+  data: () => ({
+    num: num
+  }),
+  methods: {
+    viewTransaction () {
+      this.$store.commit('notify', {
+        title: 'TODO: View Transaction',
+        body: 'tx details page not implemented yet'
+      })
+    }
+  },
+  props: ['transaction-value', 'address']
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.ni-li-tx
+  display flex
+  font-size sm
+  border-bottom 1px solid bc-dim
+  min-height 3rem
+
+  .tx-icon
+    flex 0 0 2rem
+    background app-fg
+    display flex
+    align-items center
+    justify-content center
+
+  .tx-container
+    flex 1
+    padding 0.5rem 0
+    display flex
+    flex-flow row wrap
+    align-items flex-start
+    justify-content center
+
+    min-width 0 // fix text-overflow
+
+  .tx-element
+    padding 0 0.5rem
+    line-height 1.5rem
+
+  .tx-coins
+    flex 0 0 60%
+
+  .tx-coin
+    display flex
+    flow-flow row nowrap
+    .value
+      flex 3
+      text-align right
+      &:before
+        content ''
+        display inline
+    .key
+      flex 2
+      padding-left 0.5rem
+
+  .tx-date
+    flex 0 0 40%
+    color dim
+
+  .tx-address
+    flex 100%
+
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+
+    color dim
+
+  &.ni-li-tx-sent
+    .tx-icon
+      background alpha(mc, 5%)
+      i
+        color mc
+    .tx-coin .value
+      color mc
+      &:before
+        content '-'
+
+  &.ni-li-tx-received
+    .tx-icon
+      background alpha(link, 5%)
+      i
+        color link
+    .tx-coin .value
+      color link
+      &:before
+        content '+'
+
+  &:hover
+    cursor pointer
+    background app-fg
+    .tx-coin
+      .key
+        color bright
+    .tx-date, .tx-address
+      color txt
+
+@media screen and (min-width: 375px)
+  .ni-li-tx
+    font-size 0.875rem
+@media screen and (min-width: 414px)
+  .ni-li-tx
+    .tx-container
+      padding 0.5rem
+
+@media screen and (min-width: 768px)
+  .ni-li-tx
+    .tx-icon
+      flex 0 0 3rem
+
+    .tx-container
+      flex-flow row nowrap
+
+    .tx-element
+      line-height 2rem
+
+    .tx-coins
+      flex 3
+
+    .tx-date
+      flex 2
+
+    .tx-address
+      flex 6
+</style>

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

@@ -7,7 +7,7 @@ page(title='Transactions')
 
   modal-search(v-if="filters.transactions.search.visible" type="transactions")
 
-  card-transaction(
+  li-transaction(
     v-for="i in filteredTransactions"
     :transaction-value="i"
     :address="wallet.key.address")
@@ -18,23 +18,17 @@ page(title='Transactions')
 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 DataEmptyTx from 'common/NiDataEmptyTx'
-import ListItem from 'common/NiListItem'
-import CardTransaction from 'wallet/CardTransaction'
+import LiTransaction from 'wallet/LiTransaction'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
 import Part from 'common/NiPart'
 import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-transactions',
   components: {
-    AnchorCopy,
-    Btn,
-    CardTransaction,
+    LiTransaction,
     DataEmptyTx,
-    ListItem,
     ModalSearch,
     Page,
     Part,

test/unit/specs/CardTransaction.spec.js → test/unit/specs/LiTransaction.spec.js

@@ -1,7 +1,7 @@
 import { shallow } from 'vue-test-utils'
-import CardTransaction from 'renderer/components/wallet/CardTransaction'
+import LiTransaction from 'renderer/components/wallet/LiTransaction'
 
-describe('CardTransaction', () => {
+describe('LiTransaction', () => {
   let wrapper
   let propsData = {
     transactionValue: {
@@ -31,7 +31,7 @@ describe('CardTransaction', () => {
   }
 
   beforeEach(() => {
-    wrapper = shallow(CardTransaction, {
+    wrapper = shallow(LiTransaction, {
       propsData
     })
   })
@@ -41,7 +41,7 @@ describe('CardTransaction', () => {
   })
 
   it('should show incoming transcations', () => {
-    expect(wrapper.find('.value').hasClass('positive')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-received')).toBe(true)
   })
 
   it('should show outgoing transcations', () => {
@@ -71,7 +71,7 @@ describe('CardTransaction', () => {
       },
       address: 'myAddress'
     })
-    expect(wrapper.find('.value').hasClass('negative')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-sent')).toBe(true)
   })
 
   it('should show all coins of the transaction', () => {
@@ -111,8 +111,8 @@ describe('CardTransaction', () => {
       },
       address: 'myAddress'
     })
-    expect(wrapper.findAll('.key-value').length).toBe(3)
-    expect(wrapper.findAll('.key-value').at(2).html().toLowerCase()).toContain('mattcoins')
-    expect(wrapper.findAll('.key-value').at(2).html()).toContain('42')
+    expect(wrapper.findAll('.tx-coin').length).toBe(3)
+    expect(wrapper.findAll('.tx-coin').at(2).html().toLowerCase()).toContain('mattcoins')
+    expect(wrapper.findAll('.tx-coin').at(2).html()).toContain('42')
   })
 })