feat/open-in-explorer-for-wallets-on-account-screen

src/components/ShareURIDialog.vue

@@ -1,25 +1,30 @@
 <template>
-  <v-dialog v-model="show" eager width="320" :class="className">
+  <v-dialog v-model="show" eager width="320" :class="classes.root">
     <v-card>
-      <v-card-title :class="`${className}__dialog-title`" class="a-text-header">
-        {{ $t('home.share_uri', { crypto }) }}
+      <v-card-title :class="classes.dialogTitle" class="a-text-header">
+        {{ t('home.share_uri', { crypto }) }}
       </v-card-title>
       <v-divider class="a-divider" />
       <v-card-text class="pa-0">
         <v-list>
           <v-list-item @click="copyAddress">
-            <v-list-item-title :class="`${className}__list-item-title`">
-              {{ $t('home.copy_address') }}
+            <v-list-item-title :class="classes.listItemTitle">
+              {{ t('home.copy_address') }}
             </v-list-item-title>
           </v-list-item>
           <v-list-item v-if="isADM" @click="copyURI">
-            <v-list-item-title :class="`${className}__list-item-title`">
-              {{ $t('home.copy_uri') }}
+            <v-list-item-title :class="classes.listItemTitle">
+              {{ t('home.copy_uri') }}
             </v-list-item-title>
           </v-list-item>
           <v-list-item @click="openQRCodeRenderer">
-            <v-list-item-title :class="`${className}__list-item-title`">
-              {{ $t('home.show_qr_code') }}
+            <v-list-item-title :class="classes.listItemTitle">
+              {{ t('home.show_qr_code') }}
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="openInExplorer">
+            <v-list-item-title :class="classes.listItemTitle">
+              {{ t('home.explorer') }}
             </v-list-item-title>
           </v-list-item>
         </v-list>
@@ -29,66 +34,101 @@
   </v-dialog>
 </template>
 
-<script>
+<script lang="ts">
+import { ref, computed, defineComponent, PropType } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+
+import { CryptoSymbol, Cryptos, isErc20 } from '@/lib/constants'
+
 import QrcodeRendererDialog from '@/components/QrcodeRendererDialog.vue'
 import copyToClipboard from 'copy-to-clipboard'
 import { generateURI } from '@/lib/uri'
+import { getExplorerAddressUrl } from '@/config/utils'
 
-export default {
-  components: { QrcodeRendererDialog },
+const className = 'share-uri-dialog'
+const classes = {
+  root: className,
+  dialogTitle: `${className}__dialog-title`,
+  listItemTitle: `${className}__list-item-title`
+}
+
+export default defineComponent({
+  components: {
+    QrcodeRendererDialog
+  },
   props: {
+    modelValue: {
+      type: Boolean,
+      required: true
+    },
     address: {
-      required: true,
-      type: String
+      type: String,
+      required: true
     },
     crypto: {
-      required: true,
-      type: String
+      type: String as PropType<CryptoSymbol>,
+      required: true
     },
     isADM: {
-      required: true,
-      type: Boolean
-    },
-    modelValue: {
-      required: true,
       type: Boolean
     }
   },
   emits: ['update:modelValue'],
-  data: () => ({
-    className: 'share-uri-dialog',
-    showQrcodeRendererDialog: false
-  }),
-  computed: {
-    show: {
+  setup(props, { emit }) {
+    const { t } = useI18n()
+    const store = useStore()
+    const showQrcodeRendererDialog = ref(false)
+
+    const show = computed({
       get() {
-        return this.modelValue
+        return props.modelValue
       },
       set(value) {
-        this.$emit('update:modelValue', value)
+        emit('update:modelValue', value)
       }
-    },
-    uri() {
-      return generateURI(this.crypto, this.address)
+    })
+
+    const uri = computed(() => generateURI(props.crypto, props.address, ''))
+    const isErc = computed(() => isErc20(props.crypto))
+
+    const copyAddress = () => {
+      copyToClipboard(props.address)
+      store.dispatch('snackbar/show', { message: t('home.copied') })
+      show.value = false
     }
-  },
-  methods: {
-    copyAddress() {
-      copyToClipboard(this.address)
-      this.$store.dispatch('snackbar/show', { message: this.$t('home.copied') })
-      this.show = false
-    },
-    copyURI() {
-      copyToClipboard(this.uri)
-      this.$store.dispatch('snackbar/show', { message: this.$t('home.copied') })
-      this.show = false
-    },
-    openQRCodeRenderer() {
-      this.showQrcodeRendererDialog = true
-      this.show = false
+
+    const copyURI = () => {
+      copyToClipboard(uri.value)
+      store.dispatch('snackbar/show', { message: t('home.copied') })
+      show.value = false
+    }
+
+    const openQRCodeRenderer = () => {
+      showQrcodeRendererDialog.value = true
+      show.value = false
+    }
+
+    const openInExplorer = () => {
+      const crypto = isErc.value ? Cryptos.ETH : props.crypto
+      const explorerLink = getExplorerAddressUrl(crypto, props.address)
+      window.open(explorerLink, '_blank', 'resizable,scrollbars,status,noopener')
+    }
+
+    return {
+      classes,
+      t,
+      showQrcodeRendererDialog,
+      show,
+      uri,
+      isErc,
+      copyAddress,
+      copyURI,
+      openQRCodeRenderer,
+      openInExplorer
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

src/components/WalletCard.vue

@@ -56,11 +56,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ShareURIDialog from '@/components/ShareURIDialog.vue'
 import WalletCardListActions from '@/components/WalletCardListActions.vue'
-import { Cryptos } from '@/lib/constants'
+import { Cryptos, CryptoSymbol } from '@/lib/constants'
 import { useDisplay } from 'vuetify'
 import smartNumber from '@/lib/smartNumber'
 import currencyAmount from '@/filters/currencyAmount'
@@ -86,7 +86,7 @@ export default defineComponent({
       required: true
     },
     crypto: {
-      type: String,
+      type: String as PropType<CryptoSymbol>,
       default: 'ADM'
     },
     cryptoName: {

src/config/utils/getExplorerAddressUrl.ts

@@ -6,7 +6,7 @@ import config from '../index'
  * @param {string} crypto like 'adm' or 'eth'
  * @param {string} address Crypto address
  */
-export function getExplorerAddressUrl(crypto: string, address: number): string {
+export function getExplorerAddressUrl(crypto: string, address: string): string {
   const explorerAddress = config[crypto.toLowerCase()].explorerAddress
 
   if (!explorerAddress) {

src/locales/en.json

@@ -122,7 +122,8 @@
     "show_qr_code": "Show QR code",
     "stake_and_earn_btn": "Stake and earn",
     "wallet": "wallet",
-    "wallet_crypto": "{crypto} wallet"
+    "wallet_crypto": "{crypto} wallet",
+    "explorer": "Open in Explorer"
   },
   "warning_on_addresses": {
     "warning": "Warning",

src/locales/ru.json

@@ -123,7 +123,8 @@
     "show_qr_code": "Показать QR-код",
     "stake_and_earn_btn": "Застейкать и заработать",
     "wallet": "кошелек",
-    "wallet_crypto": "Кошелек {crypto}"
+    "wallet_crypto": "Кошелек {crypto}",
+    "explorer": "Посмотреть в Explorer'е"
   },
   "warning_on_addresses": {
     "warning": "Внимание",