add re-import address, default wallet

src/layouts/components/Navbar.vue

@@ -69,7 +69,7 @@
         :to="{ name: 'accounts' }"
       >
         <feather-icon icon="KeyIcon" />
-        <span class="align-middle ml-25">Wallet</span>
+        <span class="align-middle ml-25">{{ walletName }}</span>
       </b-button>
       <!-- <b-dropdown
         class="ml-1"
@@ -135,7 +135,7 @@ import Locale from '@core/layouts/components/app-navbar/components/Locale.vue'
 import SearchBar from '@core/layouts/components/app-navbar/components/SearchBar.vue'
 // import CartDropdown from '@core/layouts/components/app-navbar/components/CartDropdown.vue'
 import store from '@/store'
-import { timeIn, toDay } from '@/libs/data'
+import { getLocalAccounts, timeIn, toDay } from '@/libs/data'
 // import UserDropdown from '@core/layouts/components/app-navbar/components/UserDropdown.vue'
 
 export default {
@@ -172,6 +172,10 @@ export default {
     }
   },
   computed: {
+    walletName() {
+      const key = this.$store.state.chains.defaultWallet
+      return key || 'Wallet'
+    },
     selected_chain() {
       this.block()
       return store.state.chains.selected
@@ -180,6 +184,12 @@ export default {
       return this.variant
     },
   },
+  mounted() {
+    const accounts = Object.keys(getLocalAccounts())
+    if (!this.$store.state.chains.defaultWallet && accounts.length > 0) {
+      this.$store.commit('setDefaultWallet', accounts[0])
+    }
+  },
   methods: {
     block() {
       store.commit('setHeight', 0)

src/store/chains/index.js

@@ -26,6 +26,7 @@ export default {
     height: 0,
     ibcChannels: {},
     quotes: {},
+    defaultWallet: localStorage.getItem('default-wallet'),
   },
   getters: {
     getchains: state => state.chains,
@@ -50,6 +51,12 @@ export default {
     setQuotes(state, quotes) {
       state.quotes = quotes
     },
+    setDefaultWallet(state, defaultWallet) {
+      if (defaultWallet && defaultWallet.length > 0) {
+        localStorage.setItem('default-wallet', defaultWallet)
+        state.chains.defaultWallet = defaultWallet
+      }
+    },
   },
   actions: {
     async getQuotes(context) {

src/views/WalletAccountImportAddress.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <form-wizard
+      ref="wizard"
       color="#7367F0"
       :title="null"
       :subtitle="null"
@@ -131,6 +132,7 @@
                     v-model="name"
                     :state="errors.length > 0 ? false:null"
                     placeholder="Ping Nano X"
+                    :readonly="edit"
                   />
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
@@ -261,7 +263,9 @@ import {
 } from 'bootstrap-vue'
 import { required } from '@validations'
 import store from '@/store'
-import { addressDecode, addressEnCode, getLedgerAddress } from '@/libs/data'
+import {
+  addressDecode, addressEnCode, getLedgerAddress, getLocalAccounts,
+} from '@/libs/data'
 import { toHex } from '@cosmjs/encoding'
 
 export default {
@@ -295,6 +299,7 @@ export default {
       selected: [],
       accounts: null,
       exludes: [], // HD Path is NOT supported,
+      edit: false,
     }
   },
   computed: {
@@ -309,21 +314,43 @@ export default {
       if (this.accounts && this.accounts.address) {
         const { data } = addressDecode(this.accounts.address)
         return this.selected.map(x => {
-          const { logo, addr_prefix } = this.chains[x]
+          if (this.chains[x]) {
-          const addr = addressEnCode(addr_prefix, data)
+            const { logo, addr_prefix } = this.chains[x]
-          return {
+            const addr = addressEnCode(addr_prefix, data)
-            chain: x, addr, logo, hdpath: this.hdpath,
+            return {
+              chain: x, addr, logo, hdpath: this.hdpath,
+            }
           }
-        })
+          return null
+        }).filter(x => x != null)
       }
       return []
     },
   },
-  created() {
+  mounted() {
     const { selected } = store.state.chains
     if (selected && selected.chain_name && !this.exludes.includes(selected.chain_name)) {
       this.selected.push(selected.chain_name)
     }
+    const name = new URLSearchParams(window.location.search).get('name')
+    const wallets = getLocalAccounts()
+    if (name && wallets && wallets[name]) {
+      const wallet = wallets[name]
+      this.device = wallet.device
+      this.name = wallet.name
+      this.edit = true
+      if (wallet.address) {
+        wallet.address.forEach(a => {
+          if (!this.selected.includes(a.chain)) {
+            this.selected.push(a.chain)
+          }
+        })
+        this.address = wallet.address[0].addr
+        if (this.localAddress()) {
+          this.$refs.wizard.nextTab()
+        }
+      }
+    }
   },
   methods: {
     formatPubkey(v) {
@@ -373,6 +400,9 @@ export default {
         address: this.addresses,
       }
       localStorage.setItem('accounts', JSON.stringify(accounts))
+      if (!this.$store.state.chains.defaultWallet) {
+        this.$store.commit('setDefaultWallet', this.name)
+      }
 
       this.$toast({
         component: ToastificationContent,
@@ -386,31 +416,34 @@ export default {
       this.$router.push('./accounts')
     },
     async validationFormDevice() {
-      let ok = false
+      let ok = String(this.name).length > 0
-      switch (this.device) {
+
-        case 'keplr':
+      if (!ok) { // new import, otherwise it's edit mode.
-          await this.cennectKeplr().then(accounts => {
+        switch (this.device) {
-            if (accounts) {
+          case 'keplr':
+            await this.cennectKeplr().then(accounts => {
+              if (accounts) {
               // eslint-disable-next-line prefer-destructuring
-              this.accounts = accounts[0]
+                this.accounts = accounts[0]
-              ok = true
+                ok = true
-            }
+              }
-          })
+            })
-          break
+            break
-        case 'ledger':
+          case 'ledger':
-        case 'ledger2':
+          case 'ledger2':
-          await this.connect().then(accounts => {
+            await this.connect().then(accounts => {
-            if (accounts) {
+              if (accounts) {
               // eslint-disable-next-line prefer-destructuring
-              this.accounts = accounts[0]
+                this.accounts = accounts[0]
-              ok = true
+                ok = true
-            }
+              }
-          }).catch(e => {
+            }).catch(e => {
-            this.debug = e
+              this.debug = e
-          })
+            })
-          break
+            break
-        default:
+          default:
-          ok = this.localAddress()
+            ok = this.localAddress()
+        }
       }
 
       return new Promise((resolve, reject) => {
@@ -438,5 +471,6 @@ export default {
 </script>
 
 <style lang="scss">
+  // @import '@core/assets/fonts/feather/iconfont.css';
   @import '@core/scss/vue/libs/vue-wizard.scss';
 </style>

src/views/WalletAccounts.vue

@@ -71,16 +71,40 @@
       </b-row>
     </b-card>
 
-    <b-tabs
+    <div
       v-for="item,index in accounts"
       :key="index"
-      active-nav-item-class="font-weight-bolder"
     >
-      <b-tab>
+      <div>
-        <template #title>
+        <div class="d-flex justify-content-between align-items-end mb-1">
-          <feather-icon icon="UserIcon" />
+          <b-button
-          <span>{{ item.name }}</span>
+            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-        </template>
+            variant="warning"
+            :to="`/wallet/import?name=${item.name}`"
+          >
+            <feather-icon
+              icon="EditIcon"
+              class="mr-50"
+            />
+            <span class="align-middle">{{ item.name }}</span>
+          </b-button>
+          <b-form-checkbox
+            v-model="defaultWallet"
+            v-b-tooltip.hover.v-primary
+            :value="item.name"
+            title="Set as default wallet"
+            variant="outline-warning"
+            :readonly="item.name===defaultWallet"
+          >
+            <span
+              :class="item.name===defaultWallet ? 'text-primary' : ''"
+              class="font-weight-bolder pb-0"
+              style="font-size:16px"
+            >
+              Set as default
+            </span>
+          </b-form-checkbox>
+        </div>
 
         <b-row>
           <b-col
@@ -212,8 +236,8 @@
             </b-card>
           </b-col>
         </b-row>
-      </b-tab>
+      </div>
-    </b-tabs>
+    </div>
 
     <router-link to="./import">
       <b-card class="addzone">
@@ -230,7 +254,8 @@
 
 <script>
 import {
-  BCard, BCardHeader, BCardTitle, BCardBody, VBModal, BRow, BCol, BTabs, BTab, BAvatar, BDropdown, BDropdownItem, BDropdownDivider,
+  BCard, BCardHeader, BCardTitle, BCardBody, VBModal, BRow, BCol, BAvatar, BButton,
+  BDropdown, BDropdownItem, BDropdownDivider, BFormCheckbox, VBTooltip,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
@@ -252,15 +277,17 @@ export default {
     BAvatar,
     BCard,
     BRow,
+    BButton,
     BCol,
-    BTabs,
-    BTab,
     BCardHeader,
     BCardBody,
     BCardTitle,
     BDropdown,
     BDropdownItem,
     BDropdownDivider,
+    BFormCheckbox,
+    // eslint-disable-next-line vue/no-unused-components
+    VBTooltip,
     FeatherIcon,
     OperationTransferComponent,
     // eslint-disable-next-line vue/no-unused-components
@@ -272,6 +299,7 @@ export default {
     AppCollapseItem,
   },
   directives: {
+    'b-tooltip': VBTooltip,
     'b-modal': VBModal,
     Ripple,
   },
@@ -337,6 +365,14 @@ export default {
     }
   },
   computed: {
+    defaultWallet: {
+      get() {
+        return this.$store.state.chains.defaultWallet
+      },
+      set(value) {
+        this.$store.commit('setDefaultWallet', value)
+      },
+    },
     calculateTotal() {
       const v = Object.values(this.balances)
       let total = 0