Refactor Wallet

src/@core/scss/vue/libs/vue-wizard.scss

@@ -22,7 +22,7 @@
       display: none;
     }
     .wizard-nav {
-      padding: 1.42rem 1.42rem 2.14rem 1.42rem;
+      padding: 1.0rem 1.0rem 1.14rem 1.0rem;
       border-bottom: 1px solid rgba($color: $black, $alpha: 0.08);
       padding-bottom: 0;
       li {

src/layouts/components/Navbar.vue

@@ -68,7 +68,8 @@
         class="btn-icon"
         :to="{ name: 'accounts' }"
       >
-        <feather-icon icon="UserIcon" />
+        <feather-icon icon="KeyIcon" />
+        <span class="align-middle ml-25">Wallet</span>
       </b-button>
       <!-- <b-dropdown
         class="ml-1"

src/router/index.js

@@ -27,9 +27,9 @@ const router = new VueRouter({
       },
     },
     {
-      path: '/user/setting',
+      path: '/wallet/setting',
       name: 'setting',
-      component: () => import('@/views/UserSetting.vue'),
+      component: () => import('@/views/WalletSetting.vue'),
       meta: {
         pageTitle: 'Setting',
         breadcrumb: [
@@ -41,9 +41,9 @@ const router = new VueRouter({
       },
     },
     {
-      path: '/user/portfolio',
+      path: '/wallet/portfolio',
       name: 'portfolio',
-      component: () => import('@/views/UserPortfolio.vue'),
+      component: () => import('@/views/WalletPortfolio.vue'),
       meta: {
         pageTitle: 'Portfolio',
         breadcrumb: [
@@ -55,9 +55,9 @@ const router = new VueRouter({
       },
     },
     {
-      path: '/user/accounts',
+      path: '/wallet/accounts',
       name: 'accounts',
-      component: () => import('@/views/UserAccounts.vue'),
+      component: () => import('@/views/WalletAccounts.vue'),
       meta: {
         pageTitle: 'Accounts',
         breadcrumb: [
@@ -69,9 +69,23 @@ const router = new VueRouter({
       },
     },
     {
-      path: '/user/address',
+      path: '/wallet/import',
+      name: 'accounts-import',
+      component: () => import('@/views/WalletAccountImportAddress.vue'),
+      meta: {
+        pageTitle: 'Accounts',
+        breadcrumb: [
+          {
+            text: 'Import',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/wallet/address',
       name: 'addresses',
-      component: () => import('@/views/UserAddressBook.vue'),
+      component: () => import('@/views/WalletAddressBook.vue'),
       meta: {
         pageTitle: 'Address Book',
         breadcrumb: [
@@ -101,7 +115,7 @@ const router = new VueRouter({
     {
       path: '/:chain/account/:address',
       name: 'chain-account',
-      component: () => import('@/views/UserAccountDetail.vue'),
+      component: () => import('@/views/WalletAccountDetail.vue'),
       meta: {
         pageTitle: 'Accounts',
         breadcrumb: [

src/views/GovernanceProposalView.vue

@@ -189,14 +189,14 @@
             </router-link>
           </template>
         </b-table>
-        <b-card
+        <div
           v-if="next"
-          class="addzone text-center"
+          class="addzone text-center pt-50 pb-50 bg-transparent text-primary"
           @click="loadVotes()"
         >
           <feather-icon icon="PlusIcon" />
           Load More Votes
-        </b-card>
+        </div>
       </b-card-body>
     </b-card>
     <b-card no-body>

src/views/OperationDelegateComponent.vue

@@ -241,7 +241,7 @@
         </b-form>
         <b-button
           v-else
-          to="/user/accounts"
+          to="/wallet/import"
           variant="primary"
         >
           Connect Wallet

src/views/OperationTransferComponent.vue

@@ -438,7 +438,7 @@ export default {
 
       const signerData = {
         accountNumber: this.accountNumber,
-        sequence: this.sequence,
+        sequence: String(Number(this.sequence) + 1),
         chainId: this.chainId,
       }
 

src/views/OperationVoteComponent.vue

@@ -38,7 +38,7 @@
                     placeholder="Select an address"
                     @change="onChange"
                   />
-                  <small class="text-danger">{{ errors[0] }} <strong v-if="!accounts">Please import an account first!</strong> </small>
+                  <small class="text-danger">{{ errors[0] }} <strong v-if="!accounts || accounts.length === 0">Please import an account first!</strong> </small>
                 </validation-provider>
               </b-form-group>
             </b-col>
@@ -93,39 +93,58 @@
                 label="Fee"
                 label-for="Fee"
               >
-                <b-input-group>
                 <validation-provider
                   v-slot="{ errors }"
                   rules="required|integer"
                   name="fee"
                 >
+                  <b-input-group>
                     <b-form-input v-model="fee" />
-                    <small class="text-danger">{{ errors[0] }}</small>
+                    <b-input-group-append>
-                  </validation-provider>
-                  <validation-provider
-                    v-slot="{ errors }"
-                    rules="required"
-                    name="feeDenom"
-                  >
                       <b-form-select
                         v-model="feeDenom"
-                    >
+                        :options="feeDenoms"
-                      <b-form-select-option
+                        value-field="denom"
-                        v-for="item in feeDenoms"
+                        text-field="denom"
-                        :key="item.denom"
+                      />
-                        :value="item.denom"
+                    </b-input-group-append>
-                      >
+                  </b-input-group>
-                        {{ item.denom }}
-                      </b-form-select-option>
-                    </b-form-select>
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
-                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col cols="12">
+              <b-form-group>
+                <b-form-checkbox
+                  v-model="advance"
+                  name="advance"
+                  value="true"
+                >
+                  <small>Advance</small>
+                </b-form-checkbox>
               </b-form-group>
             </b-col>
           </b-row>
-          <b-row>
+          <b-row v-if="advance">
-            <b-col>
+            <b-col cols="12">
+              <b-form-group
+                label="Gas"
+                label-for="gas"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  name="gas"
+                >
+                  <b-form-input
+                    id="gas"
+                    v-model="gas"
+                    type="number"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+            <b-col cols="12">
               <b-form-group
                 label="Memo"
                 label-for="Memo"
@@ -200,8 +219,8 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
-  BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+  BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
-  BForm, BFormRadioGroup, BFormRadio,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -223,9 +242,10 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
+    BFormCheckbox,
+    BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
@@ -258,6 +278,7 @@ export default {
       sequence: 1,
       accountNumber: 0,
       gas: '200000',
+      advance: false,
 
       required,
       password,

src/views/WalletAccountImportAddress.vue

@@ -5,7 +5,7 @@
       :title="null"
       :subtitle="null"
       shape="square"
-      finish-button-text="Submit"
+      finish-button-text="Save"
       back-button-text="Previous"
       class="steps-transparent mb-3 md"
       @on-complete="formSubmitted"
@@ -130,7 +130,7 @@
                     id="account_name"
                     v-model="name"
                     :state="errors.length > 0 ? false:null"
-                    placeholder="Keplr"
+                    placeholder="Ping Nano X"
                   />
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
@@ -294,14 +294,17 @@ export default {
       required,
       selected: [],
       accounts: null,
+      exludes: ['desmos', 'crypto'], // HD Path is NOT supported,
     }
   },
   computed: {
     chains() {
       const config = JSON.parse(localStorage.getItem('chains'))
+      this.exludes.forEach(x => {
+        delete config[x]
+      })
       return config
     },
-
     addresses() {
       if (this.accounts && this.accounts.address) {
         const { data } = addressDecode(this.accounts.address)
@@ -318,7 +321,8 @@ export default {
   },
   created() {
     const { selected } = store.state.chains
-    if (selected && selected.chain_name) {
+    if (selected && selected.chain_name && !this.exludes.includes(selected.chain_name)) {
+      console.log(this.exludes, selected.chain_name, this.exludes.includes(selected.chain_name))
       this.selected.push(selected.chain_name)
     }
   },
@@ -371,7 +375,6 @@ export default {
       }
       localStorage.setItem('accounts', JSON.stringify(accounts))
 
-      this.$parent.$parent.$parent.completeAdd()
       this.$toast({
         component: ToastificationContent,
         props: {
@@ -380,6 +383,8 @@ export default {
           variant: 'success',
         },
       })
+
+      this.$router.push('./accounts')
     },
     async validationFormDevice() {
       let ok = false

src/views/WalletAccounts.vue

@@ -115,26 +115,12 @@
       </b-tab>
     </b-tabs>
 
-    <b-card
+    <router-link to="./import">
-      v-b-modal.add-account
+      <b-card class="addzone">
-      class="addzone"
-    >
         <feather-icon icon="PlusIcon" />
         Connect Wallet
       </b-card>
-    <!-- modal add accout -->
+    </router-link>
-    <b-modal
-      id="add-account"
-      centered
-      size="lg"
-      title="Connect Wallet"
-      hide-footer
-      hide-header-close
-      cancel-disabled
-      scrollable
-    >
-      <user-account-import-address />
-    </b-modal>
     <operation-transfer-component
       :address.sync="selectedAddress"
     />
@@ -152,7 +138,6 @@ import {
   formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains,
 } from '@/libs/data'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
-import UserAccountImportAddress from './UserAccountImportAddress.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
 
 export default {
@@ -168,7 +153,6 @@ export default {
     BCardTitle,
     BDropdown,
     BDropdownItem,
-    UserAccountImportAddress,
     FeatherIcon,
     OperationTransferComponent,
     // eslint-disable-next-line vue/no-unused-components