From 5dc1c85a233af2ac98ff2ea68632ddf6c70f11ca Mon Sep 17 00:00:00 2001
From: Peng Zhong <peng@nylira.com>
Date: Wed, 6 Dec 2017 11:25:21 +0900
Subject: [PATCH 1/6] init

---
 app/src/renderer/components/wallet/BtnCopy.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/src/renderer/components/wallet/BtnCopy.vue b/app/src/renderer/components/wallet/BtnCopy.vue
index 60675e4a45..f633980772 100644
--- a/app/src/renderer/components/wallet/BtnCopy.vue
+++ b/app/src/renderer/components/wallet/BtnCopy.vue
@@ -13,6 +13,16 @@ export default {
   components: {
     Btn
   },
+  computed: {
+    notifyTitle () {
+      if (this.title) return this.title
+      else return 'Copy Success!'
+    },
+    notifyBody () {
+      if (this.body) return this.body
+      else return `"${this.trunc(this.value)}" has been copied to your clipboard.`
+    }
+  },
   methods: {
     trunc (value) {
       if (value.length > 20) value = value.substring(0, 10) + '...'
@@ -20,14 +30,14 @@ export default {
     },
     click () {
       this.$store.commit('notify', {
-        title: 'Copy Success!',
-        body: `"${this.trunc(this.value)}" has been copied to your clipboard.`
+        title: this.notifyTitle,
+        body: this.notifyBody
       })
     }
   },
   mounted () {
     this.clipboard = new Clipboard('.btn-copy')
   },
-  props: ['value']
+  props: ['value', 'title', 'body']
 }
 </script>

From 41dcc536e9a6c71c5501208c2d5412ba786f4883 Mon Sep 17 00:00:00 2001
From: Peng Zhong <peng@nylira.com>
Date: Wed, 6 Dec 2017 11:55:23 +0900
Subject: [PATCH 2/6] update Balances page

---
 .../renderer/components/common/AnchorCopy.vue |  4 +-
 .../renderer/components/wallet/BtnCopy.vue    |  2 +-
 .../components/wallet/CardAddress.vue         | 91 -------------------
 .../renderer/components/wallet/LiAddress.vue  | 45 +++++++++
 .../components/wallet/PageBalances.vue        |  9 +-
 5 files changed, 51 insertions(+), 100 deletions(-)
 delete mode 100644 app/src/renderer/components/wallet/CardAddress.vue
 create mode 100644 app/src/renderer/components/wallet/LiAddress.vue

diff --git a/app/src/renderer/components/common/AnchorCopy.vue b/app/src/renderer/components/common/AnchorCopy.vue
index 8ee48b53f8..553efec6b1 100644
--- a/app/src/renderer/components/common/AnchorCopy.vue
+++ b/app/src/renderer/components/common/AnchorCopy.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 a.anchor-copy(:data-clipboard-text="value")
-  i.material-icons {{ icon }}
+  i.material-icons content_copy
   .label {{ label }}
 </template>
 
@@ -17,6 +17,6 @@ export default {
       e.clearSelection()
     })
   },
-  props: ['value', 'label', 'icon']
+  props: ['value', 'label']
 }
 </script>
diff --git a/app/src/renderer/components/wallet/BtnCopy.vue b/app/src/renderer/components/wallet/BtnCopy.vue
index f633980772..28f3ccdc86 100644
--- a/app/src/renderer/components/wallet/BtnCopy.vue
+++ b/app/src/renderer/components/wallet/BtnCopy.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 btn.btn-copy(
-  icon="copy"
+  icon="content_copy"
   @click.native="click"
   :data-clipboard-text="value"
   value="Copy")
diff --git a/app/src/renderer/components/wallet/CardAddress.vue b/app/src/renderer/components/wallet/CardAddress.vue
deleted file mode 100644
index fbeee83151..0000000000
--- a/app/src/renderer/components/wallet/CardAddress.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div :id="cssId" class="card-address">
-    <div class="card-address-container">
-      <div class="left">
-        <div class="address">
-          <span class="value">{{ address }}</span>
-        </div>
-      </div>
-      <menu>
-        <btn-copy :value="address"></btn-copy>
-      </menu>
-    </div>
-  </div>
-</template>
-
-<script>
-import BtnCopy from 'wallet/BtnCopy'
-export default {
-  name: 'card-address',
-  components: {
-    BtnCopy
-  },
-  computed: {
-    cssId () {
-      return 'address-' + this.address
-    }
-  },
-  props: ['address']
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.card-address
-  font-size sm
-  padding 0.25em
-  transition
-
-  .card-address-container
-    background app-fg
-
-    height 3rem
-    display flex
-    align-items stretch
-
-  .left
-    flex 1
-    display flex
-    overflow hidden
-
-  .title
-    display flex
-    align-items center
-    border-right px dotted bc
-    padding 0 0.75em
-
-    i.fa
-      color dim
-      margin-right 0.375em
-    span
-      mono()
-      font-size sm
-      font-weight bold
-
-  .address
-    overflow hidden
-    border-right px dotted bc
-
-    flex 1
-    display flex
-    align-items center
-    padding 0 0.75em
-
-    .value
-      mono()
-
-  menu
-    display flex
-    align-items center
-    padding 0 0.75em
-
-  .ni-btn
-    font-size sm
-
-@media screen and (min-width: 400px)
-  .card-address
-    font-size x
-    .ni-btn
-      font-size x
-</style>
diff --git a/app/src/renderer/components/wallet/LiAddress.vue b/app/src/renderer/components/wallet/LiAddress.vue
new file mode 100644
index 0000000000..33aa657faf
--- /dev/null
+++ b/app/src/renderer/components/wallet/LiAddress.vue
@@ -0,0 +1,45 @@
+<template lang="pug">
+.ni-li-address(:id='cssId')
+  .value {{ value }}
+  menu
+    btn-copy(:value='value')
+</template>
+
+<script>
+import BtnCopy from 'wallet/BtnCopy'
+export default {
+  name: 'ni-li-address',
+  components: {
+    BtnCopy
+  },
+  computed: {
+    cssId () {
+      return 'address-' + this.value
+    }
+  },
+  props: ['value']
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.ni-li-address
+  height 3rem
+  display flex
+  align-items center
+  border-bottom 1px solid bc-dim
+
+  .value
+    flex 1
+    padding 0 0.75em
+
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
+
+  menu
+    display flex
+    align-items center
+    padding 0 0.75em
+</style>
diff --git a/app/src/renderer/components/wallet/PageBalances.vue b/app/src/renderer/components/wallet/PageBalances.vue
index 754936d20b..b77fbf8e1e 100644
--- a/app/src/renderer/components/wallet/PageBalances.vue
+++ b/app/src/renderer/components/wallet/PageBalances.vue
@@ -4,7 +4,6 @@ page(title='Balance')
     a(@click='updateBalances()')
       i.material-icons refresh
       .label Refresh
-    anchor-copy(:value="wallet.key.address" icon="content_copy" label="Copy")
     a(@click='setSearch(true)')
       i.material-icons search
       .label Search
@@ -12,7 +11,7 @@ page(title='Balance')
   modal-search(v-if="filters.balances.search.visible" type="balances")
 
   part(title='Your Address')
-    list-item(dt="Address" :dd="wallet.key.address")
+    li-address(:value="wallet.key.address")
 
   part(title="Denomination Balances")
     list-item(
@@ -27,8 +26,7 @@ page(title='Balance')
 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 LiAddress from 'wallet/LiAddress'
 import ListItem from 'common/NiListItem'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
@@ -37,8 +35,7 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
-    AnchorCopy,
-    Btn,
+    LiAddress,
     ListItem,
     ModalSearch,
     Page,

From 8380878912c7e518bfa46c2883362e11981b9483 Mon Sep 17 00:00:00 2001
From: Peng Zhong <peng@nylira.com>
Date: Wed, 6 Dec 2017 12:09:24 +0900
Subject: [PATCH 3/6] update copy buttons, fix tests

---
 .../renderer/components/common/AnchorCopy.vue | 22 --------------
 .../BtnCopy.vue => common/NiBtnCopy.vue}      |  0
 .../LiAddress.vue => common/NiLiCopy.vue}     | 17 +++++------
 .../components/common/PageProfile.vue         |  2 --
 .../components/monitor/PageValidatorIndex.vue |  8 +++--
 .../components/wallet/PageBalances.vue        |  6 ++--
 test/unit/specs/BtnCopy.spec.js               |  2 +-
 test/unit/specs/CardAddress.spec.js           | 27 -----------------
 test/unit/specs/LiCopy.spec.js                | 24 +++++++++++++++
 .../specs/__snapshots__/BtnCopy.spec.js.snap  |  2 +-
 .../__snapshots__/CardAddress.spec.js.snap    | 30 -------------------
 .../specs/__snapshots__/LiCopy.spec.js.snap   | 16 ++++++++++
 .../__snapshots__/PageBalances.spec.js.snap   |  4 +--
 13 files changed, 59 insertions(+), 101 deletions(-)
 delete mode 100644 app/src/renderer/components/common/AnchorCopy.vue
 rename app/src/renderer/components/{wallet/BtnCopy.vue => common/NiBtnCopy.vue} (100%)
 rename app/src/renderer/components/{wallet/LiAddress.vue => common/NiLiCopy.vue} (68%)
 delete mode 100644 test/unit/specs/CardAddress.spec.js
 create mode 100644 test/unit/specs/LiCopy.spec.js
 delete mode 100644 test/unit/specs/__snapshots__/CardAddress.spec.js.snap
 create mode 100644 test/unit/specs/__snapshots__/LiCopy.spec.js.snap

diff --git a/app/src/renderer/components/common/AnchorCopy.vue b/app/src/renderer/components/common/AnchorCopy.vue
deleted file mode 100644
index 553efec6b1..0000000000
--- a/app/src/renderer/components/common/AnchorCopy.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template lang="pug">
-a.anchor-copy(:data-clipboard-text="value")
-  i.material-icons content_copy
-  .label {{ label }}
-</template>
-
-<script>
-import Clipboard from 'clipboard'
-export default {
-  name: 'anchor-copy',
-  mounted () {
-    let clipboard = new Clipboard(this.$el)
-    let self = this
-
-    clipboard.on('success', function (e) {
-      self.$store.commit('notify', {title: 'Copied to Clipboard', body: 'Selection has been successfully copied.'})
-      e.clearSelection()
-    })
-  },
-  props: ['value', 'label']
-}
-</script>
diff --git a/app/src/renderer/components/wallet/BtnCopy.vue b/app/src/renderer/components/common/NiBtnCopy.vue
similarity index 100%
rename from app/src/renderer/components/wallet/BtnCopy.vue
rename to app/src/renderer/components/common/NiBtnCopy.vue
diff --git a/app/src/renderer/components/wallet/LiAddress.vue b/app/src/renderer/components/common/NiLiCopy.vue
similarity index 68%
rename from app/src/renderer/components/wallet/LiAddress.vue
rename to app/src/renderer/components/common/NiLiCopy.vue
index 33aa657faf..4a68bd6896 100644
--- a/app/src/renderer/components/wallet/LiAddress.vue
+++ b/app/src/renderer/components/common/NiLiCopy.vue
@@ -1,22 +1,17 @@
 <template lang="pug">
-.ni-li-address(:id='cssId')
+.ni-li-copy
   .value {{ value }}
   menu
     btn-copy(:value='value')
 </template>
 
 <script>
-import BtnCopy from 'wallet/BtnCopy'
+import BtnCopy from 'common/NiBtnCopy'
 export default {
-  name: 'ni-li-address',
+  name: 'ni-li-copy',
   components: {
     BtnCopy
   },
-  computed: {
-    cssId () {
-      return 'address-' + this.value
-    }
-  },
   props: ['value']
 }
 </script>
@@ -24,11 +19,13 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-li-address
+.ni-li-copy
   height 3rem
   display flex
   align-items center
-  border-bottom 1px solid bc-dim
+  border-bottom px solid bc-dim
+  &:only-child
+    border-bottom none
 
   .value
     flex 1
diff --git a/app/src/renderer/components/common/PageProfile.vue b/app/src/renderer/components/common/PageProfile.vue
index 3315f354c9..7f946877d2 100644
--- a/app/src/renderer/components/common/PageProfile.vue
+++ b/app/src/renderer/components/common/PageProfile.vue
@@ -22,7 +22,6 @@ page(title="Profile: CosmosUser01")
 </template>
 
 <script>
-import AnchorCopy from 'common/AnchorCopy'
 import ListItem from 'common/NiListItem'
 import ToolBar from 'common/NiToolBar'
 import Page from 'common/NiPage'
@@ -30,7 +29,6 @@ import Part from 'common/NiPart'
 export default {
   name: 'page-validator',
   components: {
-    AnchorCopy,
     ListItem,
     Page,
     Part,
diff --git a/app/src/renderer/components/monitor/PageValidatorIndex.vue b/app/src/renderer/components/monitor/PageValidatorIndex.vue
index 99439bf442..6bbf3922b5 100644
--- a/app/src/renderer/components/monitor/PageValidatorIndex.vue
+++ b/app/src/renderer/components/monitor/PageValidatorIndex.vue
@@ -4,7 +4,6 @@ page(icon="storage" :title="validator.pub_key.data")
     router-link(to="/validators" exact)
       i.material-icons arrow_back
       .label Back
-    anchor-copy(:value="tmpValidator.pub_key" icon="content_copy" label="Copy Public Key")
 
   part(title="Validator Profile")
     list-item(dt="Total Vote Power" :dd="validator.voting_power"
@@ -19,19 +18,22 @@ page(icon="storage" :title="validator.pub_key.data")
   part(title="Staking")
     list-item(dt="Earn Rate" dd="8.1K ATOM / day")
     list-item(dt="Total Earnings" dd="301.8K ATOM")
+
+  part(title="Public Key")
+    li-copy(:value="tmpValidator.pub_key")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ToolBar from 'common/NiToolBar'
 import Page from 'common/NiPage'
 import Part from 'common/NiPart'
-import AnchorCopy from 'common/AnchorCopy'
 export default {
   name: 'page-validator-index',
   components: {
-    AnchorCopy,
+    LiCopy,
     ListItem,
     Page,
     Part,
diff --git a/app/src/renderer/components/wallet/PageBalances.vue b/app/src/renderer/components/wallet/PageBalances.vue
index b77fbf8e1e..5cf42f121e 100644
--- a/app/src/renderer/components/wallet/PageBalances.vue
+++ b/app/src/renderer/components/wallet/PageBalances.vue
@@ -11,7 +11,7 @@ page(title='Balance')
   modal-search(v-if="filters.balances.search.visible" type="balances")
 
   part(title='Your Address')
-    li-address(:value="wallet.key.address")
+    li-copy(:value="wallet.key.address")
 
   part(title="Denomination Balances")
     list-item(
@@ -26,7 +26,7 @@ page(title='Balance')
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
-import LiAddress from 'wallet/LiAddress'
+import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
@@ -35,7 +35,7 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
-    LiAddress,
+    LiCopy,
     ListItem,
     ModalSearch,
     Page,
diff --git a/test/unit/specs/BtnCopy.spec.js b/test/unit/specs/BtnCopy.spec.js
index f3cbcc013a..f00a41fa2d 100644
--- a/test/unit/specs/BtnCopy.spec.js
+++ b/test/unit/specs/BtnCopy.spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from 'vue-test-utils'
-import BtnCopy from 'renderer/components/wallet/BtnCopy'
+import BtnCopy from 'renderer/components/common/NiBtnCopy'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
diff --git a/test/unit/specs/CardAddress.spec.js b/test/unit/specs/CardAddress.spec.js
deleted file mode 100644
index 5322f8b095..0000000000
--- a/test/unit/specs/CardAddress.spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { shallow } from 'vue-test-utils'
-import CardAddress from 'renderer/components/wallet/CardAddress'
-
-describe('CardAddress', () => {
-  let wrapper
-  let propsData = {
-    address: 12345678
-  }
-
-  beforeEach(() => {
-    wrapper = shallow(CardAddress, {
-      propsData
-    })
-  })
-
-  it('has an address from props', () => {
-    expect(wrapper.vm.address).toEqual(12345678)
-  })
-
-  it('has the expected html structure', () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it('returns an id with address-prop.address', () => {
-    expect(wrapper.vm.cssId).toBe('address-12345678')
-  })
-})
diff --git a/test/unit/specs/LiCopy.spec.js b/test/unit/specs/LiCopy.spec.js
new file mode 100644
index 0000000000..e0579c1ff2
--- /dev/null
+++ b/test/unit/specs/LiCopy.spec.js
@@ -0,0 +1,24 @@
+import { shallow } from 'vue-test-utils'
+import LiCopy from 'renderer/components/common/NiLiCopy'
+
+describe('LiCopy', () => {
+  let wrapper
+  let propsData = {
+    value: 12345678
+  }
+
+  beforeEach(() => {
+    wrapper = shallow(LiCopy, {
+      propsData
+    })
+  })
+
+  it('has an address from props', () => {
+    expect(wrapper.vm.value).toEqual(12345678)
+  })
+
+  it('has the expected html structure', () => {
+    expect(wrapper.vm.$el).toMatchSnapshot()
+  })
+
+})
diff --git a/test/unit/specs/__snapshots__/BtnCopy.spec.js.snap b/test/unit/specs/__snapshots__/BtnCopy.spec.js.snap
index a23589adac..ff5c16d082 100644
--- a/test/unit/specs/__snapshots__/BtnCopy.spec.js.snap
+++ b/test/unit/specs/__snapshots__/BtnCopy.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"this is a test\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;
+exports[`BtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"this is a test\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;
diff --git a/test/unit/specs/__snapshots__/CardAddress.spec.js.snap b/test/unit/specs/__snapshots__/CardAddress.spec.js.snap
deleted file mode 100644
index 08d306aa32..0000000000
--- a/test/unit/specs/__snapshots__/CardAddress.spec.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CardAddress has the expected html structure 1`] = `
-<div
-  class="card-address"
-  id="address-12345678"
->
-  <div
-    class="card-address-container"
-  >
-    <div
-      class="left"
-    >
-      <div
-        class="address"
-      >
-        <span
-          class="value"
-        >
-          12345678
-        </span>
-      </div>
-    </div>
-     
-    <menu>
-      <!---->
-    </menu>
-  </div>
-</div>
-`;
diff --git a/test/unit/specs/__snapshots__/LiCopy.spec.js.snap b/test/unit/specs/__snapshots__/LiCopy.spec.js.snap
new file mode 100644
index 0000000000..55b30f56bf
--- /dev/null
+++ b/test/unit/specs/__snapshots__/LiCopy.spec.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LiCopy has the expected html structure 1`] = `
+<div
+  class="ni-li-copy"
+>
+  <div
+    class="value"
+  >
+    12345678
+  </div>
+  <menu>
+    <!---->
+  </menu>
+</div>
+`;
diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
index 5932583ac6..17f332b92b 100644
--- a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a data-clipboard-text=\\"\\" class=\\"anchor-copy\\"><i class=\\"material-icons\\">content_copy</i><div class=\\"label\\">Copy</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">Address</div><div class=\\"ni-li-dd\\"></div></div></div></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">MYCOIN</div><div class=\\"ni-li-dd\\">0</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">0</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\"></div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">MYCOIN</div><div class=\\"ni-li-dd\\">0</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">0</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
 
-exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a data-clipboard-text=\\"\\" class=\\"anchor-copy\\"><i class=\\"material-icons\\">content_copy</i><div class=\\"label\\">Copy</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">Address</div><div class=\\"ni-li-dd\\"></div></div></div></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\"></div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;

From 0c30e2b4c35149433e0b7936dc10892af80b10b4 Mon Sep 17 00:00:00 2001
From: Peng Zhong <peng@nylira.com>
Date: Wed, 6 Dec 2017 13:00:37 +0900
Subject: [PATCH 4/6] fix lint and test

---
 test/unit/specs/LiCopy.spec.js                          | 1 -
 test/unit/specs/__snapshots__/PageBalances.spec.js.snap | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/unit/specs/LiCopy.spec.js b/test/unit/specs/LiCopy.spec.js
index e0579c1ff2..04f3c6ce76 100644
--- a/test/unit/specs/LiCopy.spec.js
+++ b/test/unit/specs/LiCopy.spec.js
@@ -20,5 +20,4 @@ describe('LiCopy', () => {
   it('has the expected html structure', () => {
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
-
 })
diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
index 17f332b92b..0248f24954 100644
--- a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\"></div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">MYCOIN</div><div class=\\"ni-li-dd\\">0</div></div></div></div><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">0</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\"></div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
 
 exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\"></div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">456</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">123</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;

From b6bd103bf1b78d132262cb77fdc81c49c4697ba6 Mon Sep 17 00:00:00 2001
From: Fabian <frznhope@gmail.com>
Date: Wed, 6 Dec 2017 11:43:36 +0100
Subject: [PATCH 5/6] added more tests

---
 test/unit/specs/BtnCopy.spec.js | 12 ++++++++++++
 test/unit/specs/LiCopy.spec.js  |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/test/unit/specs/BtnCopy.spec.js b/test/unit/specs/BtnCopy.spec.js
index f00a41fa2d..780e6d93d3 100644
--- a/test/unit/specs/BtnCopy.spec.js
+++ b/test/unit/specs/BtnCopy.spec.js
@@ -36,4 +36,16 @@ describe('BtnCopy', () => {
     expect(store.commit.mock.calls[0][1].body).not.toContain('123456789012345678901234567890')
     expect(store.commit.mock.calls[0][1].body).toContain('1234567890')
   })
+  
+  it('should use a provided title in message', () => {
+    wrapper.setProps({title: 'Title A'})
+    wrapper.trigger('click')
+    expect(store.commit.mock.calls[0][1].title).toBe('Title A')
+  })
+  
+  it('should use a provided body in message', () => {
+    wrapper.setProps({body: 'Body A'})
+    wrapper.trigger('click')
+    expect(store.commit.mock.calls[0][1].body).toBe('Body A')
+  })
 })
diff --git a/test/unit/specs/LiCopy.spec.js b/test/unit/specs/LiCopy.spec.js
index 04f3c6ce76..8025cab5be 100644
--- a/test/unit/specs/LiCopy.spec.js
+++ b/test/unit/specs/LiCopy.spec.js
@@ -13,11 +13,11 @@ describe('LiCopy', () => {
     })
   })
 
-  it('has an address from props', () => {
-    expect(wrapper.vm.value).toEqual(12345678)
-  })
-
   it('has the expected html structure', () => {
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
+
+  it('has an address from props', () => {
+    expect(wrapper.html()).toContain(propsData.value)
+  })
 })

From 9bbf61abd9bda0c2f3b6c81bfe10011482abad7a Mon Sep 17 00:00:00 2001
From: Fabian <frznhope@gmail.com>
Date: Wed, 6 Dec 2017 11:51:20 +0100
Subject: [PATCH 6/6] linted

---
 test/unit/specs/BtnCopy.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/BtnCopy.spec.js b/test/unit/specs/BtnCopy.spec.js
index 780e6d93d3..2ee61f1a0f 100644
--- a/test/unit/specs/BtnCopy.spec.js
+++ b/test/unit/specs/BtnCopy.spec.js
@@ -36,13 +36,13 @@ describe('BtnCopy', () => {
     expect(store.commit.mock.calls[0][1].body).not.toContain('123456789012345678901234567890')
     expect(store.commit.mock.calls[0][1].body).toContain('1234567890')
   })
-  
+
   it('should use a provided title in message', () => {
     wrapper.setProps({title: 'Title A'})
     wrapper.trigger('click')
     expect(store.commit.mock.calls[0][1].title).toBe('Title A')
   })
-  
+
   it('should use a provided body in message', () => {
     wrapper.setProps({body: 'Body A'})
     wrapper.trigger('click')