feat: implement address navigation directly in the wallet

src/renderer/components/Transaction/TransactionShow.vue

@@ -57,7 +57,12 @@
       </ListDividedItem>
 
       <ListDividedItem :label="$t('TRANSACTION.SENDER')">
-        {{ wallet_formatAddress(transaction.sender, 10) }}
+        <a
+          href="#"
+          @click.stop="openAddressInWallet(transaction.sender)"
+        >
+          {{ wallet_formatAddress(transaction.sender, 10) }}
+        </a>
         <ButtonClipboard
           :value="transaction.sender"
           class="text-theme-page-text-light mx-1"
@@ -81,7 +86,12 @@
         v-if="transaction.recipient"
         :label="$t('TRANSACTION.RECIPIENT')"
       >
-        {{ wallet_formatAddress(transaction.recipient, 10) }}
+        <a
+          href="#"
+          @click.stop="openAddressInWallet(transaction.recipient)"
+        >
+          {{ wallet_formatAddress(transaction.recipient, 10) }}
+        </a>
         <ButtonClipboard
           :value="transaction.recipient"
           class="text-theme-page-text-light mx-1"
@@ -228,6 +238,11 @@ export default {
       this.$store.dispatch('transaction/delete', this.transaction)
       this.$emit('close')
       this.$eventBus.emit('wallet:reload')
+    },
+
+    openAddressInWallet (address) {
+      this.$router.push({ name: 'wallet-show', params: { address } })
+      this.emitClose()
     }
   }
 }

src/renderer/components/Wallet/WalletAddress.vue

@@ -2,9 +2,13 @@
 <template>
   <span>
     <span v-if="!type">
-      <span v-tooltip="address">
+      <a
+        v-tooltip="address"
+        href="#"
+        @click.stop="openAddress"
+      >
         {{ wallet_formatAddress(address, 10) }}
-      </span>
+      </a>
     </span>
     <span v-else-if="type === 1">
       {{ $t("TRANSACTION.TYPE.SECOND_SIGNATURE") }}
@@ -98,6 +102,10 @@ export default {
   methods: {
     determineVote () {
       this.votedDelegate = store.getters['delegate/byPublicKey'](this.votePublicKey)
+    },
+
+    openAddress () {
+      this.$router.push({ name: 'wallet-show', params: { address: this.address } })
     }
   }
 }

src/renderer/components/Wallet/WalletDetails/WalletDetails.vue

@@ -3,6 +3,7 @@
     <WalletHeading class="sticky pin-t z-10" />
 
     <MenuTab
+      ref="menutab"
       v-model="currentTab"
       :class="{ 'rounded-bl-lg' : !isDelegatesTab || !votedDelegate }"
       class="flex-1 overflow-y-auto"
@@ -192,6 +193,11 @@ export default {
           // TODO
           break
       }
+    },
+    tabs () {
+      this.$nextTick(() => {
+        this.$refs.menutab.collectItems()
+      })
     }
   },
 

src/renderer/components/Wallet/WalletHeading/WalletHeading.vue

@@ -3,7 +3,10 @@
     :class="justifyClass"
     class="WalletHeading flex px-10 py-8 w-full bg-theme-heading-background rounded-tl-lg h-40"
   >
-    <WalletHeadingInfo v-if="!secondaryButtonsVisible" />
+    <WalletHeadingInfo
+      v-if="!secondaryButtonsVisible"
+      ref="heading"
+    />
     <WalletHeadingActions />
   </div>
 </template>
@@ -53,6 +56,9 @@ export default {
     resetHeading () {
       this.activeWalletId = this.currentWallet.id
       this.$store.dispatch('wallet/setSecondaryButtonsVisible', false)
+      this.$nextTick(() => {
+        this.$refs.heading.refreshWallet()
+      })
     }
   }
 }

src/renderer/components/Wallet/WalletHeading/WalletHeadingActions.vue

@@ -9,6 +9,7 @@
       class="-mr-2"
     />
     <button
+      v-if="!currentWallet.isWatchOnly"
       class="option-button flex items-center self-stretch ml-2 p-2"
       @click="$store.dispatch('wallet/setSecondaryButtonsVisible', !secondaryButtonsVisible)"
     >
@@ -43,7 +44,11 @@ export default {
   },
 
   computed: {
-    ...mapGetters('wallet', ['secondaryButtonsVisible'])
+    ...mapGetters('wallet', ['secondaryButtonsVisible']),
+
+    currentWallet () {
+      return this.wallet_fromRoute
+    }
   }
 }
 </script>

src/renderer/components/Wallet/WalletHeading/WalletHeadingInfo.vue

@@ -53,7 +53,7 @@
         </span>
 
         <SvgIcon
-          v-if="currentWallet.secondPublicKey"
+          v-if="secondPublicKey"
           v-tooltip="$t('WALLET_HEADING.SECOND_PASSPHRASE_ENABLED')"
           name="2nd-passphrase"
           view-box="0 0 18 18"
@@ -67,7 +67,7 @@
         />
 
         <button
-          v-if="currentWallet.publicKey"
+          v-if="publicKey"
           v-tooltip="{
             content: labelTooltip,
             trigger:'hover'
@@ -110,26 +110,39 @@ export default {
   },
 
   data: () => ({
-    showPublicKey: false
+    showPublicKey: false,
+    lazyWallet: {}
   }),
 
   computed: {
     address () {
       return this.currentWallet ? this.currentWallet.address : ''
     },
     publicKey () {
-      return this.currentWallet ? this.currentWallet.publicKey : ''
+      const publicKey = this.currentWallet ? this.currentWallet.publicKey : ''
+      const lazyPublicKey = this.lazyWallet.publicKey
+
+      return publicKey || lazyPublicKey
+    },
+    secondPublicKey () {
+      const secondPublicKey = this.currentWallet ? this.currentWallet.secondPublicKey : ''
+      const lazySecondPublicKey = this.lazyWallet.secondPublicKey
+
+      return secondPublicKey || lazySecondPublicKey
     },
     alternativeBalance () {
-      const balance = this.currentWallet ? this.currency_subToUnit(this.currentWallet.balance) : 0
-      return this.currency_format(balance * this.price, { currency: this.alternativeCurrency })
+      const balance = this.currentWallet ? this.currentWallet.balance : null
+      const lazyBalance = this.lazyWallet.balance
+      const unitBalance = this.currency_subToUnit(balance || lazyBalance || 0)
+      return this.currency_format(unitBalance * this.price, { currency: this.alternativeCurrency })
     },
     alternativeCurrency () {
       return this.$store.getters['session/currency']
     },
     balance () {
-      const balance = this.currentWallet ? this.currentWallet.balance : 0
-      return this.formatter_networkCurrency(balance)
+      const balance = this.currentWallet ? this.currentWallet.balance : null
+      const lazyBalance = this.lazyWallet.balance
+      return this.formatter_networkCurrency(balance || lazyBalance || 0)
     },
     name () {
       return this.wallet_name(this.currentWallet.address)
@@ -160,6 +173,16 @@ export default {
   methods: {
     togglePublicKey () {
       this.showPublicKey = !this.showPublicKey
+    },
+
+    // Called by the parent when the address changed
+    // Fetch watch-only address, since the wallet is not stored on vuex
+    async refreshWallet () {
+      if (!this.currentWallet) {
+        return
+      }
+
+      this.lazyWallet = await this.$client.fetchWallet(this.currentWallet.address)
     }
   }
 }

src/renderer/mixins/wallet.js

@@ -1,5 +1,6 @@
 import truncateMiddle from '@/filters/truncate-middle'
 import WalletService from '@/services/wallet'
+import WalletModel from '@/models/wallet'
 
 export default {
   computed: {
@@ -17,7 +18,17 @@ export default {
         }
       }
 
-      return this.$store.getters['wallet/byAddress'](address)
+      const freshWallet = () => {
+        return WalletModel.deserialize({
+          address,
+          name: '',
+          profileId: '',
+          isContact: true,
+          isWatchOnly: true
+        })
+      }
+
+      return this.$store.getters['wallet/byAddress'](address) || freshWallet()
     }
   },
 

src/renderer/models/base.js

@@ -25,6 +25,8 @@ export default class BaseModel {
 
       if (item.format && isFunction(item.format)) {
         value = item.format(input)
+      } else if (input[key] === undefined) {
+        value = item.default
       } else {
         value = input[key]
       }

src/renderer/models/wallet.js

@@ -49,6 +49,10 @@ export default new BaseModel({
     isDelegate: {
       type: 'boolean',
       default: false
+    },
+    isWatchOnly: {
+      type: 'boolean',
+      default: false
     }
   },
   required: ['address', 'name', 'profileId']