diff --git a/src/layouts/components/Navbar.vue b/src/layouts/components/Navbar.vue index 18ea463e..e5f4bba1 100644 --- a/src/layouts/components/Navbar.vue +++ b/src/layouts/components/Navbar.vue @@ -106,16 +106,26 @@ - +
+ {{ item.wallet }} + + + + + {{ item.address ? formatAddr(item.address.addr) : `Not available for ${selected_chain.chain_name}` }} +
+ + import { BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip, BButton, - BDropdown, BDropdownItem, + BDropdown, BDropdownItem, BDropdownDivider, } from 'bootstrap-vue' import Ripple from 'vue-ripple-directive' import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue' @@ -176,6 +186,7 @@ export default { BButton, BDropdown, BDropdownItem, + BDropdownDivider, // Navbar Components DarkToggler, @@ -224,14 +235,26 @@ export default { } return [conf.api] }, + accounts() { + let accounts = getLocalAccounts() || {} + accounts = Object.entries(accounts).map(v => ({ wallet: v[0], address: v[1].address.find(x => x.chain === this.selected_chain.chain_name) })) + + if (!this.$store.state.chains.defaultWallet && this.accounts.length > 0) { + this.updateDefaultWallet(this.accounts[0].wallet) + } + return accounts + }, }, mounted() { - const accounts = Object.keys(getLocalAccounts() || {}) - if (!this.$store.state.chains.defaultWallet && accounts.length > 0) { - this.$store.commit('setDefaultWallet', accounts[0]) - } + }, methods: { + formatAddr(v) { + return v.substring(0, 10).concat('...', v.substring(v.length - 10)) + }, + updateDefaultWallet(v) { + this.$store.commit('setDefaultWallet', v) + }, change(v) { this.index = v const conf = this.$store.state.chains.selected