WIP: Receive Button

app/src/renderer/App.vue

@@ -6,27 +6,30 @@
       router-view
       app-footer
     modal-help
+    modal-receive
   session(v-else)
   notifications(:notifications='notifications' theme='cosmos')
   modal-error(v-if='config.modals.error.active' :body='config.modals.error.message')
 </template>
 
 <script>
-import { mapGetters } from "vuex"
-import AppHeader from "common/AppHeader"
-import AppFooter from "common/AppFooter"
-import Notifications from "@nylira/vue-notifications"
-import ModalError from "common/NiModalError"
-import ModalHelp from "common/NiModalHelp"
-import Session from "common/NiSession"
-import store from "./vuex/store"
+import { mapGetters } from 'vuex'
+import AppHeader from 'common/AppHeader'
+import AppFooter from 'common/AppFooter'
+import Notifications from '@nylira/vue-notifications'
+import ModalError from 'common/NiModalError'
+import ModalHelp from 'common/NiModalHelp'
+import ModalReceive from 'common/NiModalReceive'
+import Session from 'common/NiSession'
+import store from './vuex/store'
 export default {
   name: "app",
   components: {
     AppHeader,
     AppFooter,
     ModalError,
     ModalHelp,
+    ModalReceive,
     Notifications,
     Session
   },

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

@@ -3,14 +3,26 @@
   .value {{ value }}
   menu
     btn-copy(:value='value')
+    btn.receive(
+      v-if="receive"
+      value="Receive"
+      @click.native="enableModalReceive"
+      icon="file_download"
+      address="value")
 </template>
 
 <script>
-import BtnCopy from "common/NiBtnCopy"
+import BtnCopy from 'common/NiBtnCopy'
+import Btn from '@nylira/vue-button'
 export default {
-  name: "ni-li-copy",
-  components: { BtnCopy },
-  props: ["value"]
+  name: 'ni-li-copy',
+  components: { BtnCopy, Btn },
+  props: ['value', 'receive'],
+  methods: {
+    enableModalReceive () {
+      this.$store.commit('setModalReceive', true)
+    }
+  }
 }
 </script>
 
@@ -33,6 +45,9 @@ export default {
     text-overflow ellipsis
     white-space nowrap
 
+  .receive
+    margin-left 0.5rem
+
   menu
     display flex
     align-items center

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

@@ -0,0 +1,56 @@
+<template lang="pug">
+modal.ni-modal-receive(v-if="active" :close="close")
+  div(slot='title') Receive Tokens
+  p You can receive tokens of any denomination by sharing this address.
+  li-copy.receive-modal(:value="wallet.key.address")
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Btn from '@nylira/vue-button'
+import BtnCopy from 'common/NiBtnCopy'
+import LiCopy from 'common/NiLiCopy'
+import Modal from 'common/NiModal'
+import Part from 'common/NiPart'
+export default {
+  name: 'ni-modal-receive',
+  props: ['value'],
+  components: {
+    Btn,
+    BtnCopy,
+    LiCopy,
+    Modal,
+    Part
+  },
+  computed: {
+    ...mapGetters(['config', 'wallet']),
+    active () {
+      return this.config.modals.receive.active
+    }
+  },
+  methods: {
+    close () {
+      this.$store.commit('setModalReceive', false)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+.ni-modal.ni-modal-receive
+  z-index z(modalError)
+
+  .ni-modal-main
+    padding 2rem
+
+    p
+      margin 0 0 2rem
+
+  .receive-modal
+    border 1px solid bc
+
+  .value
+    padding 0
+</style>

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

@@ -11,7 +11,7 @@ page(title='Wallet')
   modal-search(type="balances")
 
   part(title='Your Address')
-    li-copy(:value="wallet.key.address")
+    li-copy(:value="wallet.key.address" receive="true")
 
   part(title="Denomination Balances")
     data-loading(v-if="wallet.balancesLoading")

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

@@ -14,6 +14,7 @@ export default ({ commit }) => {
     modals: {
       error: { active: false },
       help: { active: false },
+      receive: { active: false },
       session: {
         active: true,
         state: "loading"
@@ -34,7 +35,10 @@ export default ({ commit }) => {
     setModalHelp(state, value) {
       state.modals.help.active = value
     },
-    setModalSession(state, value) {
+    setModalReceive (state, value) {
+      state.modals.receive.active = value
+    },
+    setModalSession (state, value) {
       // reset modal session state if we're closing the modal
       if (value) {
         noScroll.on()

test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap

@@ -30,6 +30,7 @@ exports[`NiLiCopy has the expected html structure 1`] = `
         </span>
       </span>
     </button>
+    <!---->
   </menu>
 </div>
 `;

test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap

@@ -176,6 +176,27 @@ exports[`PageWallet has the expected html structure 1`] = `
                   </span>
                 </span>
               </button>
+              <button
+                address="value"
+                class="ni-btn receive"
+              >
+                <span
+                  class="ni-btn__container"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn__icon material-icons"
+                  >
+                    file_download
+                  </i>
+                  <!---->
+                  <span
+                    class="ni-btn__value"
+                  >
+                    Receive
+                  </span>
+                </span>
+              </button>
             </menu>
           </div>
         </main>
@@ -469,6 +490,27 @@ exports[`PageWallet should filter the balances 1`] = `
                   </span>
                 </span>
               </button>
+              <button
+                address="value"
+                class="ni-btn receive"
+              >
+                <span
+                  class="ni-btn__container"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn__icon material-icons"
+                  >
+                    file_download
+                  </i>
+                  <!---->
+                  <span
+                    class="ni-btn__value"
+                  >
+                    Receive
+                  </span>
+                </span>
+              </button>
             </menu>
           </div>
         </main>