Done delegate

src/views/components/OperationModal/components/Delegate.vue

@@ -1,28 +1,5 @@
 <template>
   <div>
-    <b-row>
-      <b-col>
-        <validation-provider
-          #default="{ errors }"
-          rules="required"
-          name="Validator"
-        >
-          <b-form-group
-            label="Validator"
-            label-for="validator"
-          >
-            <v-select
-              v-model="selectedValidator"
-              :options="valOptions"
-              :reduce="val => val.value"
-              placeholder="Select a validator"
-              :readonly="validatorAddress"
-            />
-          </b-form-group>
-          <small class="text-danger">{{ errors[0] }}</small>
-        </validation-provider>
-      </b-col>
-    </b-row>
     <b-row>
       <b-col>
         <b-form-group
@@ -51,6 +28,30 @@
         </b-form-group>
       </b-col>
     </b-row>
+    <b-row>
+      <b-col>
+        <validation-provider
+          #default="{ errors }"
+          rules="required"
+          name="Validator"
+        >
+          <b-form-group
+            label="Validator"
+            label-for="validator"
+          >
+            <v-select
+              v-model="selectedValidator"
+              :options="valOptions"
+              :reduce="val => val.value"
+              placeholder="Select a validator"
+              :readonly="validatorAddress"
+              :selectable="(v) => v.value"
+            />
+          </b-form-group>
+          <small class="text-danger">{{ errors[0] }}</small>
+        </validation-provider>
+      </b-col>
+    </b-row>
     <b-row>
       <b-col>
         <b-form-group
@@ -67,7 +68,7 @@
               text-field="label"
             >
               <b-form-select-option
-                v-for="x in balance"
+                v-for="x in balanceOptions"
                 :key="x.denom"
                 :value="x.denom"
               >
@@ -120,7 +121,7 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, extractAccountNumberAndSequence,
+  formatToken, formatTokenDenom, getUnitAmount,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 
@@ -147,6 +148,10 @@ export default {
       type: String,
       default: null,
     },
+    balance: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -157,19 +162,8 @@ export default {
       selectedValidator: null,
       token: '',
       amount: null,
-      chainId: '',
       selectedChain: '',
-      balance: [],
-      delegations: [],
       IBCDenom: {},
-      memo: '',
-      feeDenom: '',
-      wallet: 'ledgerUSB',
-      error: null,
-      sequence: 1,
-      accountNumber: 0,
-      advance: false,
-      gas: '200000',
 
       required,
       password,
@@ -187,13 +181,21 @@ export default {
   },
   computed: {
     valOptions() {
+      let options = []
       const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      if (vals.length > 0) {
+        options.push({ value: null, label: '=== ACTIVE VALIDATORS ===' })
+        options = options.concat(vals)
+      }
       const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
-      return vals.concat(unbunded)
+      if (unbunded.length > 0) {
+        options.push({ value: null, label: '=== INACTIVE VALIDATORS ===', disabled: true })
+        options = options.concat(unbunded)
+      }
+      return options
     },
-    feeDenoms() {
+    balanceOptions() {
-      if (!this.balance) return []
+      return this.setupBalance()
-      return this.balance.filter(item => !item.denom.startsWith('ibc'))
     },
     msg() {
       return [{
@@ -214,68 +216,29 @@ export default {
       modalTitle: 'Delegate Token',
       historyName: 'delegate',
     })
-    this.loadBalance()
+    this.loadData()
   },
   methods: {
-    loadBalance() {
+    loadData() {
-      this.account = this.computeAccount()
       this.$http.getValidatorList().then(v => {
         this.validators = v
       })
       this.$http.getValidatorUnbondedList().then(v => {
         this.unbundValidators = v
       })
-      this.onChange()
     },
-
+    setupBalance() {
-    onChange() {
+      if (this.balance && this.balance.length > 0) {
-      if (this.selectedAddress) {
+        this.token = this.balance[0].denom
-        this.$http.getBankBalances(this.selectedAddress).then(res => {
+        return this.balance
-          if (res && res.length > 0) {
-            this.balance = res.reverse()
-            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-            this.token = token.denom
-            if (token) this.feeDenom = token.denom
-            this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
-              if (!this.IBCDenom[x.denom]) {
-                this.$http.getIBCDenomTrace(x.denom).then(denom => {
-                  this.IBCDenom[x.denom] = denom.denom_trace.base_denom
-                })
-              }
-            })
-          }
-        })
-        this.$http.getAuthAccount(this.selectedAddress).then(ret => {
-          const account = extractAccountNumberAndSequence(ret)
-          this.$emit('update', {
-            accountNumber: account.accountNumber,
-            sequence: account.sequence,
-          })
-        })
       }
-    },
+      return []
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const values = accounts ? Object.values(accounts) : []
-      let array = []
-      for (let i = 0; i < values.length; i += 1) {
-        const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
-        if (addrs && addrs.length > 0) {
-          array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
-          if (!this.selectedAddress) {
-            this.selectedAddress = addrs[0].addr
-          }
-        }
-      }
-      this.selectedValidator = this.validatorAddress
-      return array
     },
     printDenom() {
-      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+      return formatTokenDenom(this.token)
     },
-
     format(v) {
-      return formatToken(v, this.IBCDenom)
+      return formatToken(v, this.IBCDenom, 6)
     },
   },
 }

src/views/components/OperationModal/index.vue

@@ -7,13 +7,13 @@
     ok-title="Send"
     hide-header-close
     scrollable
-    :ok-disabled="!selectedAddress"
+    :ok-disabled="isOwner"
     @hidden="resetModal"
     @ok="handleOk"
-    @show="loadBalance"
+    @show="initialize"
   >
     <b-overlay
-      :show="!selectedAddress"
+      :show="isOwner"
       rounded="sm"
     >
       <template #overlay>
@@ -24,7 +24,7 @@
             animation="cylon"
           />
           <p id="cancel-label">
-            No available account found.
+            {{ blockingMsg }}
           </p>
           <b-button
             v-ripple.400="'rgba(255, 255, 255, 0.15)'"
@@ -42,6 +42,7 @@
             ref="component"
             :address="address"
             :validator-address="validatorAddress"
+            :balance="balance"
             @update="componentUpdate"
           />
           <b-row>
@@ -144,7 +145,7 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  extractAccountNumberAndSequence, setLocalTxHistory, sign, timeIn,
+  extractAccountNumberAndSequence, getLocalAccounts, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
@@ -221,6 +222,7 @@ export default {
       wallet: 'ledgerUSB',
       gas: '200000',
       memo: '',
+      blockingMsg: 'No available account found.',
 
       required,
       password,
@@ -240,9 +242,19 @@ export default {
       if (!this.balance) return []
       return this.balance.filter(item => !item.denom.startsWith('ibc'))
     },
+    isOwner() {
+      const accounts = getLocalAccounts()
+      const selectedWallet = this.$store.state.chains.defaultWallet
+      if (accounts && accounts[selectedWallet]) {
+        if (accounts[selectedWallet].address.findIndex(x => x.addr === this.address) > -1) {
+          return false
+        }
+      }
+      return true
+    },
   },
   methods: {
-    loadBalance() {
+    initialize() {
       this.$http.getLatestBlock().then(ret => {
         this.chainId = ret.block.header.chain_id
         const notSynced = timeIn(ret.block.header.time, 10, 'm')
@@ -263,17 +275,11 @@ export default {
           const token = this.balance.find(i => !i.denom.startsWith('ibc'))
           this.token = token.denom
           if (token) this.feeDenom = token.denom
-          this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
-            if (!this.IBCDenom[x.denom]) {
-              this.$http.getIBCDenomTrace(x.denom).then(denom => {
-                this.IBCDenom[x.denom] = denom.denom_trace.base_denom
-              })
-            }
-          })
         }
       })
       this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
       this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
+      // this.$refs.component.loadData()
     },
     componentUpdate(obj) {
       console.log(obj)