Refactor Wallet

2021-09-16 09:53:52 +08:00 · 2021-09-16 09:53:52 +08:00 · 5f7c5e309a
commit 5f7c5e309a
parent d137f6dec9
13 changed files with 101 additions and 76 deletions
--- a/src/@core/scss/vue/libs/vue-wizard.scss
+++ b/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 {
--- a/src/layouts/components/Navbar.vue
+++ b/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"
--- a/src/router/index.js
+++ b/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: [
--- a/src/views/GovernanceProposalView.vue
+++ b/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>
--- a/src/views/OperationDelegateComponent.vue
+++ b/src/views/OperationDelegateComponent.vue
@ -241,7 +241,7 @@
        </b-form>
        <b-button
          v-else
-          to="/user/accounts"
+          to="/wallet/import"
          variant="primary"
        >
          Connect Wallet
--- a/src/views/OperationTransferComponent.vue
+++ b/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,
      }

--- a/src/views/OperationVoteComponent.vue
+++ b/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"
-                  >
+                <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>
-                  </validation-provider>
-                  <validation-provider
-                    v-slot="{ errors }"
-                    rules="required"
-                    name="feeDenom"
-                  >
-                    <b-form-select
-                      v-model="feeDenom"
-                    >
-                      <b-form-select-option
-                        v-for="item in feeDenoms"
-                        :key="item.denom"
-                        :value="item.denom"
-                      >
-                        {{ item.denom }}
-                      </b-form-select-option>
-                    </b-form-select>
-                    <small class="text-danger">{{ errors[0] }}</small>
-                  </validation-provider>
-                </b-input-group>
+                    <b-input-group-append>
+                      <b-form-select
+                        v-model="feeDenom"
+                        :options="feeDenoms"
+                        value-field="denom"
+                        text-field="denom"
+                      />
+                    </b-input-group-append>
+                  </b-input-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </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-col>
+          <b-row v-if="advance">
+            <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,
-  BForm, BFormRadioGroup, BFormRadio,
+  BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
+  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,
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
--- a/src/views/WalletAccountImportAddress.vue
+++ b/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
--- a/src/views/WalletAccounts.vue
+++ b/src/views/WalletAccounts.vue
@ -115,26 +115,12 @@
      </b-tab>
    </b-tabs>

-    <b-card
-      v-b-modal.add-account
-      class="addzone"
-    >
-      <feather-icon icon="PlusIcon" />
-      Connect Wallet
-    </b-card>
-    <!-- modal add accout -->
-    <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>
+    <router-link to="./import">
+      <b-card class="addzone">
+        <feather-icon icon="PlusIcon" />
+        Connect Wallet
+      </b-card>
+    </router-link>
    <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
--- a/src/views/WalletAddressBook.vue
+++ b/src/views/WalletAddressBook.vue
--- a/src/views/WalletPortfolio.vue
+++ b/src/views/WalletPortfolio.vue
--- a/src/views/WalletSetting.vue
+++ b/src/views/WalletSetting.vue