chore(seedPage): added copy button to seed page (#3543)

pages/setup/phrase/Phrase.html

@@ -22,11 +22,24 @@
         </div>
       </div>
     </div>
-    <UiSpacer :size="45" />
-    <InteractablesButton
-      full-width
-      :text="$t('pages.phrase.done')"
-      :action="confirm"
-    />
+    <UiSpacer :height="45" />
+    <div class="columns is-mobile">
+      <div class="column">
+        <InteractablesButton
+          full-width
+          :text="$t('pages.settings.accounts.copy_phrase')"
+          :action="copyPhrase"
+        >
+          <clipboard-icon size="1x" />
+        </InteractablesButton>
+      </div>
+      <div class="column">
+        <InteractablesButton
+          full-width
+          :text="$t('pages.phrase.done')"
+          :action="confirm"
+        />
+      </div>
+    </div>
   </div>
 </div>

pages/setup/phrase/index.vue

@@ -3,19 +3,20 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { AccountsState } from '~/store/accounts/types'
+import { ClipboardIcon } from 'satellite-lucide-icons'
+import { RootState } from '~/types/store/store'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    accounts: AccountsState
-  }
-}
 export default Vue.extend({
   name: 'PhraseScreen',
+  components: {
+    ClipboardIcon,
+  },
   computed: {
-    ...mapState(['accounts']),
+    ...mapState({
+      passPhrase: (state) => (state as RootState).accounts.phrase,
+    }),
     splitPhrase(): Array<String> {
-      return this.accounts.phrase.split(' ')
+      return this.passPhrase.split(' ')
     },
   },
   methods: {
@@ -25,6 +26,10 @@ export default Vue.extend({
     confirm() {
       this.$router.replace('/')
     },
+    copyPhrase() {
+      navigator.clipboard.writeText(this.passPhrase)
+      this.$toast.show(this.$t('ui.copied') as string)
+    },
   },
 })
 </script>