improve UX of account management

src/views/WalletAccounts.vue

@@ -92,22 +92,18 @@
             />
             <span class="align-middle">{{ item.name }}</span>
           </b-button>
-          <b-form-checkbox
+          <div class="mr-50">
-            v-model="defaultWallet"
+            <router-link
-            v-b-tooltip.hover.v-primary
+              :to="`/wallet/import?name=${item.name}`"
-            :value="item.name"
+              class="mr-50"
-            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
+              <feather-icon
-            </span>
+                icon="EditIcon"
-          </b-form-checkbox>
+                class="mr-10"
+              />
+              <span class="align-middle">Edit</span>
+            </router-link>
+          </div>
         </div>
 
         <b-row>
@@ -128,48 +124,14 @@
                 <div>
                   <b-card-title> <span class="text-uppercase">{{ acc.chain }}</span></b-card-title>
                 </div>
-                <b-dropdown
+                <feather-icon
-                  class="ml-1"
+                  v-b-tooltip.hover.v-danger
-                  variant="link"
+                  :title="`Remove ${acc.chain.toUpperCase()}`"
-                  no-caret
+                  icon="XSquareIcon"
-                  toggle-class="p-0"
+                  size="18"
-                  right
+                  class="cursor-pointer text-danger"
-                >
+                  @click="removeAddress(acc.addr)"
-                  <template #button-content>
+                />
-                    <feather-icon
-                      icon="AlignJustifyIcon"
-                      size="18"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                  <b-dropdown-item
-                    v-if="balances[acc.addr]"
-                    :to="`/${acc.chain}/account/${acc.addr}`"
-                  >
-                    <feather-icon icon="TrelloIcon" /> Detail
-                  </b-dropdown-item>
-                  <b-dropdown-divider
-                    v-if="balances[acc.addr]"
-                  />
-                  <b-dropdown-item
-                    v-if="balances[acc.addr]"
-                    v-b-modal.operation-modal
-                    @click="transfer('Transfer',acc.addr)"
-                  >
-                    <feather-icon icon="SendIcon" /> Transfer
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    v-if="balances[acc.addr]"
-                    v-b-modal.operation-modal
-                    @click="transfer('IBCTransfer',acc.addr)"
-                  >
-                    <feather-icon icon="SendIcon" /> IBC Transfer
-                  </b-dropdown-item>
-                  <b-dropdown-item @click="removeAddress(acc.addr)">
-                    <feather-icon icon="Trash2Icon" /> Remove
-                  </b-dropdown-item>
-                </b-dropdown>
-
               </b-card-header>
               <b-card-body class="text-truncate">
                 <b-row>
@@ -245,6 +207,7 @@
                           variant="outline-primary"
                           :to="`/${acc.chain}/account/${acc.addr}`"
                           class="mt-1 mb-0"
+                          @click="updateDefaultWallet(item.name)"
                         >
                           <feather-icon icon="TrelloIcon" /> Detail
                         </b-button>
@@ -275,7 +238,7 @@
 <script>
 import {
   BCard, BCardHeader, BCardTitle, BCardBody, VBModal, BRow, BCol, BAvatar, BButton,
-  BDropdown, BDropdownItem, BDropdownDivider, BFormCheckbox, VBTooltip,
+  BDropdown, BDropdownItem, VBTooltip,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
@@ -303,8 +266,6 @@ export default {
     BCardTitle,
     BDropdown,
     BDropdownItem,
-    BDropdownDivider,
-    BFormCheckbox,
     // eslint-disable-next-line vue/no-unused-components
     VBTooltip,
     FeatherIcon,
@@ -384,14 +345,6 @@ export default {
     }
   },
   computed: {
-    defaultWallet: {
-      get() {
-        return this.$store.state.chains.defaultWallet
-      },
-      set(value) {
-        this.$store.commit('setDefaultWallet', value)
-      },
-    },
     calculateTotal() {
       let total = 0
       if (this.calculateByDenom.value) {
@@ -643,6 +596,9 @@ export default {
       })
       localStorage.setItem('accounts', JSON.stringify(this.accounts))
     },
+    updateDefaultWallet(v) {
+      this.$store.commit('setDefaultWallet', v)
+    },
     copy(v) {
       this.$copyText(v).then(() => {
         this.$toast({

src/views/components/OperationModal/index.vue

@@ -403,10 +403,11 @@ export default {
       return ''
     },
     updateWallet(v) {
-      if (v && v !== 'address') {
+      if (v && v === 'address') {
+        this.wallet = 'keplr'
+      } else {
         this.wallet = v
       }
-      this.wallet = 'keplr'
     },
   },
 }

src/views/components/WalletInput.vue

@@ -51,6 +51,7 @@ import { ValidationProvider } from 'vee-validate'
 import {
   BFormRadioGroup, BFormRadio, BFormGroup,
 } from 'bootstrap-vue'
+import { getLocalAccounts } from '@/libs/utils'
 
 export default {
   name: 'WalletInput',
@@ -74,6 +75,12 @@ export default {
   methods: {
     handleInput() {
       this.$emit('input', this.content)
+      const accounts = getLocalAccounts()
+      const wallet = accounts[this.$store.state.chains.defaultWallet]
+      if (wallet) {
+        wallet.device = this.content
+        localStorage.setItem('accounts', JSON.stringify(accounts)) // update signer device
+      }
     },
   },
 }