From acca0f1a0f9729cac2c18bffc9c3aad7835c9b08 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Wed, 15 Sep 2021 19:49:57 +0800
Subject: [PATCH] Improve wallet operations

---
 src/views/Governance.vue                      |   2 +
 src/views/GovernanceProposalView.vue          |   4 +
 src/views/OperationDelegateComponent.vue      |  98 +++---
 src/views/OperationRedelegateComponent.vue    | 289 +++++++++---------
 src/views/OperationTransferComponent.vue      |  95 +++---
 src/views/OperationUnbondComponent.vue        | 250 +++++++--------
 src/views/OperationVoteComponent.vue          |  14 +-
 .../OperationWithdrawCommissionComponent.vue  | 197 ++++++------
 src/views/OperationWithdrawComponent.vue      | 100 +++---
 src/views/StakingValidator.vue                |  23 --
 10 files changed, 538 insertions(+), 534 deletions(-)

diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 8934d81a..2a7fea56 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -110,12 +110,14 @@
               :id="'vote-veto'+p.id"
               variant="danger"
               :value="p.tally.veto"
+              :label="`${p.tally.veto.toFixed()}%`"
               show-progress
             />
             <b-progress-bar
               :id="'vote-abstain'+p.id"
               variant="info"
               :value="p.tally.abstain"
+              :label="`${p.tally.abstain.toFixed()}%`"
               show-progress
             />
           </b-progress>
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index f8405cfe..a69defc6 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -131,24 +131,28 @@
             :id="'vote-yes'+proposal.id"
             variant="success"
             :value="proposal.tally.yes"
+            :label="`${proposal.tally.yes.toFixed()}%`"
             show-progress
           />
           <b-progress-bar
             :id="'vote-no'+proposal.id"
             variant="warning"
             :value="proposal.tally.no"
+            :label="`${proposal.tally.no.toFixed()}%`"
             show-progress
           />
           <b-progress-bar
             :id="'vote-veto'+proposal.id"
             variant="danger"
             :value="proposal.tally.veto"
+            :label="`${proposal.tally.veto.toFixed()}%`"
             show-progress
           />
           <b-progress-bar
             :id="'vote-abstain'+proposal.id"
             variant="info"
             :value="proposal.tally.abstain"
+            :label="`${proposal.tally.abstain.toFixed()}%`"
             show-progress
           />
         </b-progress>
diff --git a/src/views/OperationDelegateComponent.vue b/src/views/OperationDelegateComponent.vue
index a2aae832..7f19f71b 100644
--- a/src/views/OperationDelegateComponent.vue
+++ b/src/views/OperationDelegateComponent.vue
@@ -87,7 +87,8 @@
                 </validation-provider>
               </b-form-group>
             </b-col>
-          </b-row><b-row>
+          </b-row>
+          <b-row>
             <b-col>
               <b-form-group
                 label="Amount"
@@ -121,39 +122,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"
@@ -193,7 +213,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -201,17 +221,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -237,7 +256,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend,
+  BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -262,6 +281,7 @@ export default {
     BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
+    BFormCheckbox,
     vSelect,
     BButton,
     BInputGroupAppend,
@@ -297,10 +317,12 @@ export default {
       memo: '',
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
+      advance: false,
+      gas: '200000',
 
       required,
       password,
@@ -447,7 +469,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/OperationRedelegateComponent.vue b/src/views/OperationRedelegateComponent.vue
index e84fdcc6..619e969c 100644
--- a/src/views/OperationRedelegateComponent.vue
+++ b/src/views/OperationRedelegateComponent.vue
@@ -7,6 +7,7 @@
       title="Redelegate Token"
       hide-header-close
       scrollable
+      ok-title="Send"
       :ok-disabled="!selectedAddress"
       @hidden="resetModal"
       @ok="handleOk"
@@ -25,13 +26,9 @@
                   rules="required"
                   name="Delegator"
                 >
-                  <v-select
-                    v-model="selectedAddress"
-                    :options="account"
-                    :reduce="val => val.addr"
-                    label="addr"
-                    placeholder="Select an address"
-                    @change="loadBalance()"
+                  <b-form-input
+                    v-model="address"
+                    readonly
                   />
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
@@ -45,14 +42,36 @@
                 label-for="validator"
               >
                 <v-select
-                  v-model="selectedValidator"
+                  :value="validatorAddress"
                   :options="valOptions"
                   :reduce="val => val.value"
                   placeholder="Select a validator"
+                  :disabled="true"
                 />
               </b-form-group>
             </b-col>
           </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Current Delegation"
+                label-for="Token"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  rules="required"
+                  name="Token"
+                >
+                  <v-select
+                    v-model="token"
+                    :options="tokenOptions"
+                    :reduce="token => token.value"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
           <b-row>
             <b-col>
               <b-form-group
@@ -69,26 +88,6 @@
             </b-col>
           </b-row>
           <b-row>
-            <b-col>
-              <b-form-group
-                label="Staking Token"
-                label-for="Token"
-              >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="Token"
-                >
-                  <v-select
-                    v-model="token"
-                    :options="tokenOptions"
-                    :reduce="token => token.value"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row><b-row>
             <b-col>
               <b-form-group
                 label="Amount"
@@ -99,13 +98,18 @@
                   rules="required|regex:^([0-9\.]+)$"
                   name="amount"
                 >
-                  <b-form-input
-                    id="Amount"
-                    v-model="amount"
-                    :state="errors.length > 0 ? false:null"
-                    placeholder="Input a number"
-                    type="number"
-                  />
+                  <b-input-group>
+                    <b-form-input
+                      id="Amount"
+                      v-model="amount"
+                      :state="errors.length > 0 ? false:null"
+                      placeholder="Input a number"
+                      type="number"
+                    />
+                    <b-input-group-append is-text>
+                      {{ printDenom() }}
+                    </b-input-group-append>
+                  </b-input-group>
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
               </b-form-group>
@@ -117,39 +121,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"
@@ -168,7 +191,6 @@
               </b-form-group>
             </b-col>
           </b-row>
-
           <b-row>
             <b-col>
               <b-form-group
@@ -189,7 +211,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -197,17 +219,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -225,16 +246,15 @@
 <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,
+  BForm, BFormRadioGroup, BFormRadio, BFormCheckbox, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  formatToken, getCachedValidators, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
+  formatToken, formatTokenDenom, setLocalTxHistory, sign, timeIn,
 } from '@/libs/data'
-import chainAPI from '@/libs/fetch'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
@@ -249,10 +269,11 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
     vSelect,
+    BFormCheckbox,
+    BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
@@ -274,7 +295,6 @@ export default {
       selectedAddress: this.address,
       availableAddress: [],
       validators: [],
-      selectedValidator: this.validatorAddress,
       toValidator: null,
       token: '',
       amount: null,
@@ -285,11 +305,13 @@ export default {
       memo: '',
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
       account: [],
+      advance: false,
+      gas: '200000',
 
       required,
       password,
@@ -306,11 +328,11 @@ export default {
   },
   computed: {
     valOptions() {
-      return this.validators.map(x => ({ value: x.operator_address, label: x.description.moniker }))
+      return this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
     },
     tokenOptions() {
       if (!this.delegations) return []
-      return this.delegations.filter(x => x.delegation.validator_address === this.selectedValidator).map(x => ({ value: x.balance.denom, label: formatToken(x.balance) }))
+      return this.delegations.filter(x => x.delegation.validator_address === this.validatorAddress).map(x => ({ value: x.balance.denom, label: formatToken(x.balance) }))
     },
     feeDenoms() {
       if (!this.balance) return []
@@ -321,77 +343,46 @@ export default {
     // console.log('address: ', this.address)
   },
   methods: {
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const chains = getLocalChains()
-      const values = 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)
-          if (!this.selectedAddress) {
-            this.selectedAddress = addrs[0].addr
-          }
-        }
-        const addr = values[i].address.find(x => x.addr === this.selectedAddress)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-        }
-      }
-      if (!this.selectedChain) {
-        this.selectedChain = chains[this.$route.params.chain]
-      }
-      this.selectedValidator = this.validatorAddress
-      const reducer = (t, c) => {
-        if (!(t.find(x => x.addr === c.addr))) t.push(c)
-        return t
-      }
-      return array.reduce(reducer, [])
+    printDenom() {
+      return formatTokenDenom(this.token)
     },
     loadBalance() {
-      this.account = this.computeAccount()
-      if (this.account && this.account.length > 0) this.selectedAddress = this.account[0].addr
-      if (this.selectedAddress) {
-        if (!getCachedValidators(this.selectedChain.chain)) {
-          this.$http.getValidatorList().then(v => {
-            this.validators = v
-          })
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getBankBalances(this.address).then(res => {
+        if (res && res.length > 0) {
+          this.balance = res
+        }
+      })
+      this.$http.getLatestBlock().then(ret => {
+        this.chainId = ret.block.header.chain_id
+        const notSynced = timeIn(ret.block.header.time, 10, 'm')
+        if (notSynced) {
+          this.error = 'Client is not synced or blockchain is halted'
         } else {
-          this.validators = JSON.parse(getCachedValidators(this.selectedChain.chain))
+          this.error = null
         }
-        if (this.selectedChain) {
-          chainAPI.getBankBalance(this.selectedChain.api, this.selectedAddress).then(res => {
-            if (res && res.length > 0) {
-              this.balance = res
-              const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-              this.token = token.denom
-              if (token) this.feeDenom = token.denom
-            }
-          })
+      })
+      this.$http.getAuthAccount(this.address).then(ret => {
+        if (ret.value.base_vesting_account) {
+          this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+          this.sequence = ret.value.base_vesting_account.base_account.sequence
+          if (!this.sequence) this.sequence = 0
+        } else {
+          this.accountNumber = ret.value.account_number
+          this.sequence = ret.value.sequence ? ret.value.sequence : 0
         }
-        this.$http.getLatestBlock(this.selectedChain).then(ret => {
-          this.chainId = ret.block.header.chain_id
-          const notSynced = timeIn(ret.block.header.time, 10, 'm')
-          if (notSynced) {
-            this.error = 'Client is not synced or blockchain is halted'
-          } else {
-            this.error = null
-          }
-        })
-        this.$http.getAuthAccount(this.selectedAddress, this.selectedChain).then(ret => {
-          if (ret.value.base_vesting_account) {
-            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
-            this.sequence = ret.value.base_vesting_account.base_account.sequence
-            if (!this.sequence) this.sequence = 0
-          } else {
-            this.accountNumber = ret.value.account_number
-            this.sequence = ret.value.sequence ? ret.value.sequence : 0
-          }
-        })
-      }
-      this.$http.getStakingDelegations(this.selectedAddress).then(res => {
+      })
+      console.log(this.validatorAddress)
+      this.$http.getStakingDelegations(this.address).then(res => {
         this.delegations = res.delegation_responses
+        this.delegations.forEach(x => {
+          if (x.delegation.validator_address === this.validatorAddress) {
+            this.token = x.balance.denom
+            this.feeDenom = x.balance.denom
+          }
+        })
       })
     },
     handleOk(bvModalEvt) {
@@ -418,8 +409,8 @@ export default {
       const txMsgs = [{
         typeUrl: '/cosmos.staking.v1beta1.MsgBeginRedelegate',
         value: {
-          delegatorAddress: this.selectedAddress,
-          validatorSrcAddress: this.selectedValidator,
+          delegatorAddress: this.address,
+          validatorSrcAddress: this.validatorAddress,
           validatorDstAddress: this.toValidator,
           amount: {
             amount: String((Number(this.amount) * 1000000).toFixed()),
@@ -444,7 +435,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '250000',
+        gas: this.gas,
       }
 
       const signerData = {
@@ -453,6 +444,8 @@ export default {
         chainId: this.chainId,
       }
 
+      console.log(txMsgs)
+
       sign(
         this.wallet,
         this.chainId,
@@ -462,7 +455,7 @@ export default {
         this.memo,
         signerData,
       ).then(bodyBytes => {
-        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+        this.$http.broadcastTx(bodyBytes).then(res => {
           setLocalTxHistory({ op: 'redelegate', hash: res.tx_response.txhash, time: new Date() })
           this.$bvModal.hide('redelegate-window')
           this.$toast({
diff --git a/src/views/OperationTransferComponent.vue b/src/views/OperationTransferComponent.vue
index 34694e4a..86ab3e66 100644
--- a/src/views/OperationTransferComponent.vue
+++ b/src/views/OperationTransferComponent.vue
@@ -122,39 +122,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"
@@ -194,7 +213,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -202,17 +221,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -231,7 +249,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -259,6 +277,7 @@ export default {
     BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
+    BFormCheckbox,
 
     ValidationProvider,
     ValidationObserver,
@@ -282,12 +301,14 @@ export default {
       recipient: null,
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
       account: [],
       IBCDenom: {},
+      gas: '200000',
+      advance: false,
 
       required,
       password,
@@ -412,7 +433,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/OperationUnbondComponent.vue b/src/views/OperationUnbondComponent.vue
index d911de1f..84eb55e9 100644
--- a/src/views/OperationUnbondComponent.vue
+++ b/src/views/OperationUnbondComponent.vue
@@ -7,6 +7,7 @@
       title="Unbond Token"
       hide-header-close
       scrollable
+      ok-title="Send"
       :ok-disabled="!selectedAddress"
       @hidden="resetModal"
       @ok="handleOk"
@@ -20,21 +21,10 @@
                 label="Delegator"
                 label-for="Account"
               >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="Delegator"
-                >
-                  <v-select
-                    v-model="selectedAddress"
-                    :options="account"
-                    :reduce="val => val.addr"
-                    label="addr"
-                    placeholder="Select an address"
-                    @change="loadBalance()"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
+                <b-form-input
+                  v-model="address"
+                  readonly
+                />
               </b-form-group>
             </b-col>
           </b-row>
@@ -49,6 +39,7 @@
                   :options="valOptions"
                   :reduce="val => val.value"
                   placeholder="Select a validator"
+                  :disabled="true"
                 />
               </b-form-group>
             </b-col>
@@ -56,7 +47,7 @@
           <b-row>
             <b-col>
               <b-form-group
-                label="Staking Token"
+                label="Current Delegation"
                 label-for="Token"
               >
                 <validation-provider
@@ -73,7 +64,8 @@
                 </validation-provider>
               </b-form-group>
             </b-col>
-          </b-row><b-row>
+          </b-row>
+          <b-row>
             <b-col>
               <b-form-group
                 label="Amount"
@@ -84,13 +76,18 @@
                   rules="required|regex:^([0-9\.]+)$"
                   name="amount"
                 >
-                  <b-form-input
-                    id="Amount"
-                    v-model="amount"
-                    :state="errors.length > 0 ? false:null"
-                    placeholder="Input a number"
-                    type="number"
-                  />
+                  <b-input-group>
+                    <b-form-input
+                      id="Amount"
+                      v-model="amount"
+                      :state="errors.length > 0 ? false:null"
+                      placeholder="Input a number"
+                      type="number"
+                    />
+                    <b-input-group-append is-text>
+                      {{ printDenom() }}
+                    </b-input-group-append>
+                  </b-input-group>
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
               </b-form-group>
@@ -102,39 +99,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"
@@ -153,7 +169,6 @@
               </b-form-group>
             </b-col>
           </b-row>
-
           <b-row>
             <b-col>
               <b-form-group
@@ -174,7 +189,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -182,17 +197,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -210,16 +224,15 @@
 <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, BInputGroupAppend,
+  BForm, BFormRadioGroup, BFormRadio, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  formatToken, getCachedValidators, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
+  formatToken, formatTokenDenom, setLocalTxHistory, sign, timeIn,
 } from '@/libs/data'
-import chainAPI from '@/libs/fetch'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
@@ -234,10 +247,11 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
     vSelect,
+    BInputGroupAppend,
+    BFormCheckbox,
 
     ValidationProvider,
     ValidationObserver,
@@ -269,11 +283,13 @@ export default {
       memo: '',
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
       account: [],
+      gas: '200000',
+      advance: false,
 
       required,
       password,
@@ -290,7 +306,7 @@ export default {
   },
   computed: {
     valOptions() {
-      return this.validators.map(x => ({ value: x.operator_address, label: x.description.moniker }))
+      return this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
     },
     tokenOptions() {
       if (!this.delegations) return []
@@ -305,77 +321,47 @@ export default {
     // console.log('address: ', this.address)
   },
   methods: {
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const chains = getLocalChains()
-      const values = 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)
-          if (!this.selectedAddress) {
-            this.selectedAddress = addrs[0].addr
-          }
-        }
-        const addr = values[i].address.find(x => x.addr === this.selectedAddress)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-        }
-      }
-      if (!this.selectedChain) {
-        this.selectedChain = chains[this.$route.params.chain]
-      }
-      this.selectedValidator = this.validatorAddress
-      const reducer = (t, c) => {
-        if (!(t.find(x => x.addr === c.addr))) t.push(c)
-        return t
-      }
-      return array.reduce(reducer, [])
+    printDenom() {
+      return formatTokenDenom(this.token)
     },
     loadBalance() {
-      this.account = this.computeAccount()
-      if (this.account && this.account.length > 0) this.selectedAddress = this.account[0].addr
-      if (this.selectedAddress) {
-        if (!getCachedValidators(this.selectedChain.chain)) {
-          this.$http.getValidatorList().then(v => {
-            this.validators = v
-          })
-        } else {
-          this.validators = JSON.parse(getCachedValidators(this.selectedChain.chain))
-        }
-        if (this.selectedChain) {
-          chainAPI.getBankBalance(this.selectedChain.api, this.selectedAddress).then(res => {
-            if (res && res.length > 0) {
-              this.balance = res
-              const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-              this.token = token.denom
-              if (token) this.feeDenom = token.denom
-            }
-          })
-        }
-        this.$http.getLatestBlock(this.selectedChain).then(ret => {
-          this.chainId = ret.block.header.chain_id
-          const notSynced = timeIn(ret.block.header.time, 10, 'm')
-          if (notSynced) {
-            this.error = 'Client is not synced or blockchain is halted'
-          } else {
-            this.error = null
-          }
-        })
-        this.$http.getAuthAccount(this.selectedAddress, this.selectedChain).then(ret => {
-          if (ret.value.base_vesting_account) {
-            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
-            this.sequence = ret.value.base_vesting_account.base_account.sequence
-            if (!this.sequence) this.sequence = 0
-          } else {
-            this.accountNumber = ret.value.account_number
-            this.sequence = ret.value.sequence ? ret.value.sequence : 0
-          }
+      if (this.address) {
+        this.$http.getValidatorList().then(v => {
+          this.validators = v
         })
       }
+      this.$http.getBankBalances(this.address).then(res => {
+        if (res && res.length > 0) {
+          this.balance = res
+        }
+      })
+      this.$http.getLatestBlock(this.selectedChain).then(ret => {
+        this.chainId = ret.block.header.chain_id
+        const notSynced = timeIn(ret.block.header.time, 10, 'm')
+        if (notSynced) {
+          this.error = 'Client is not synced or blockchain is halted'
+        } else {
+          this.error = null
+        }
+      })
+      this.$http.getAuthAccount(this.selectedAddress, this.selectedChain).then(ret => {
+        if (ret.value.base_vesting_account) {
+          this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+          this.sequence = ret.value.base_vesting_account.base_account.sequence
+          if (!this.sequence) this.sequence = 0
+        } else {
+          this.accountNumber = ret.value.account_number
+          this.sequence = ret.value.sequence ? ret.value.sequence : 0
+        }
+      })
       this.$http.getStakingDelegations(this.selectedAddress).then(res => {
         this.delegations = res.delegation_responses
+        this.delegations.forEach(x => {
+          if (x.delegation.validator_address === this.validatorAddress) {
+            this.token = x.balance.denom
+            this.feeDenom = x.balance.denom
+          }
+        })
       })
     },
     handleOk(bvModalEvt) {
@@ -427,7 +413,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/OperationVoteComponent.vue b/src/views/OperationVoteComponent.vue
index 17952edf..cdaaf97b 100644
--- a/src/views/OperationVoteComponent.vue
+++ b/src/views/OperationVoteComponent.vue
@@ -165,7 +165,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -173,17 +173,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -254,10 +253,11 @@ export default {
       memo: '',
       fee: '',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
+      gas: '200000',
 
       required,
       password,
@@ -372,7 +372,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/OperationWithdrawCommissionComponent.vue b/src/views/OperationWithdrawCommissionComponent.vue
index 2d2011d0..de4ee13b 100644
--- a/src/views/OperationWithdrawCommissionComponent.vue
+++ b/src/views/OperationWithdrawCommissionComponent.vue
@@ -4,7 +4,7 @@
       id="withdraw-commission-window"
       centered
       size="md"
-      title="Withdraw Commission"
+      title="Withdraw Validator Commission"
       hide-header-close
       scrollable
 
@@ -16,22 +16,14 @@
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
-            <b-col v-if="account">
+            <b-col>
               <b-form-group
                 label="Sender"
                 label-for="Account"
               >
                 <b-input-group class="mb-25">
-                  <b-input-group-prepend is-text>
-                    <b-avatar
-                      :src="account.logo"
-                      size="18"
-                      variant="light-primary"
-                      rounded
-                    />
-                  </b-input-group-prepend>
                   <b-form-input
-                    :value="account.addr"
+                    :value="address"
                     readonly
                   />
                 </b-input-group>
@@ -44,39 +36,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 name="xx">
+                      <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"
@@ -95,7 +106,6 @@
               </b-form-group>
             </b-col>
           </b-row>
-
           <b-row>
             <b-col>
               <b-form-group
@@ -116,7 +126,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -124,17 +134,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -152,16 +161,15 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
-  BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
+  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,
 } from '@validations'
 import {
-  formatToken, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
+  formatToken, setLocalTxHistory, sign, timeIn,
 } from '@/libs/data'
-import chainAPI from '@/libs/fetch'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
 export default {
@@ -172,14 +180,13 @@ export default {
     BCol,
     BForm,
     BInputGroup,
-    BInputGroupPrepend,
     BFormInput,
-    BAvatar,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
+    BFormCheckbox,
+    BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
@@ -206,10 +213,12 @@ export default {
       memo: '',
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
+      gas: '200000',
+      advance: false,
 
       required,
       password,
@@ -233,51 +242,31 @@ export default {
     // console.log('address: ', this.address)
   },
   methods: {
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const chains = getLocalChains()
-      const values = Object.values(accounts)
-      for (let i = 0; i < values.length; i += 1) {
-        const addr = values[i].address.find(x => x.addr === this.address)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-          return addr
-        }
-      }
-      this.error = 'You are not the owner of this validator'
-      return null
-    },
+
     loadBalance() {
-      this.account = this.computeAccount()
-      if (this.account && this.account.length > 0) this.address = this.account[0].addr
-      if (this.address) {
-        chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
-          if (res && res.length > 0) {
-            this.balance = res
-            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-            if (token) this.feeDenom = token.denom
-          }
-        })
-        this.$http.getLatestBlock(this.selectedChain).then(ret => {
-          this.chainId = ret.block.header.chain_id
-          const notSynced = timeIn(ret.block.header.time, 10, 'm')
-          if (notSynced) {
-            this.error = 'Client is not synced or blockchain is halted'
-          }
-        })
-        this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
-          if (ret.value.base_vesting_account) {
-            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
-            this.sequence = ret.value.base_vesting_account.base_account.sequence
-            if (!this.sequence) this.sequence = 0
-          } else {
-            this.accountNumber = ret.value.account_number
-            this.sequence = ret.value.sequence ? ret.value.sequence : 0
-          }
-        })
-      }
-      this.$http.getStakingDelegations(this.address).then(res => {
-        this.delegations = res.delegation_responses
+      this.$http.getBankBalances(this.address).then(res => {
+        if (res && res.length > 0) {
+          this.balance = res
+          const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+          if (token) this.feeDenom = token.denom
+        }
+      })
+      this.$http.getLatestBlock().then(ret => {
+        this.chainId = ret.block.header.chain_id
+        const notSynced = timeIn(ret.block.header.time, 10, 'm')
+        if (notSynced) {
+          this.error = 'Client is not synced or blockchain is halted'
+        }
+      })
+      this.$http.getAuthAccount(this.address).then(ret => {
+        if (ret.value.base_vesting_account) {
+          this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+          this.sequence = ret.value.base_vesting_account.base_account.sequence
+          if (!this.sequence) this.sequence = 0
+        } else {
+          this.accountNumber = ret.value.account_number
+          this.sequence = ret.value.sequence ? ret.value.sequence : 0
+        }
       })
     },
     handleOk(bvModalEvt) {
@@ -313,16 +302,6 @@ export default {
           },
         },
       ]
-      // this.delegations.forEach(i => {
-      //   if ()
-      //   txMsgs.push({
-      //     typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
-      //     value: {
-      //       delegatorAddress: this.address,
-      //       validatorAddress: i.delegation.validator_address,
-      //     },
-      //   })
-      // })
 
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
@@ -340,7 +319,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/OperationWithdrawComponent.vue b/src/views/OperationWithdrawComponent.vue
index 92172145..a7d3e3e0 100644
--- a/src/views/OperationWithdrawComponent.vue
+++ b/src/views/OperationWithdrawComponent.vue
@@ -44,39 +44,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"
@@ -95,7 +114,6 @@
               </b-form-group>
             </b-col>
           </b-row>
-
           <b-row>
             <b-col>
               <b-form-group
@@ -116,7 +134,7 @@
                       v-model="wallet"
                       name="wallet"
                       value="keplr"
-                      class="mb-1 mt-1"
+                      class="d-none d-md-block"
                     >
                       Keplr
                     </b-form-radio>
@@ -124,17 +142,16 @@
                       v-model="wallet"
                       name="wallet"
                       value="ledgerUSB"
-                      class="mb-1 mt-1"
                     >
-                      Ledger (USB)
+                      <small>Ledger(USB)</small>
                     </b-form-radio>
                     <b-form-radio
                       v-model="wallet"
                       name="wallet"
                       value="ledgerBle"
-                      class="mb-1 mt-1"
+                      class="mr-0"
                     >
-                      Ledger (Bluetooth)
+                      <small>Ledger(Bluetooth)</small>
                     </b-form-radio>
                   </b-form-radio-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -152,8 +169,8 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
-  BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
+  BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -177,9 +194,10 @@ export default {
     BAvatar,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
+    BFormCheckbox,
+    BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
@@ -202,10 +220,12 @@ export default {
       memo: '',
       fee: '800',
       feeDenom: '',
-      wallet: 'keplr',
+      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
+      gas: '200000',
+      advance: false,
 
       required,
       password,
@@ -323,7 +343,7 @@ export default {
             denom: this.feeDenom,
           },
         ],
-        gas: '200000',
+        gas: this.gas,
       }
 
       const signerData = {
diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue
index ddeff7cf..4b83f212 100644
--- a/src/views/StakingValidator.vue
+++ b/src/views/StakingValidator.vue
@@ -26,28 +26,11 @@
               <div class="d-flex flex-wrap">
                 <b-button
                   v-b-modal.delegate-window
-                  size="sm"
                   variant="primary"
                   class="mr-25 mb-25"
                 >
                   Delegate
                 </b-button>
-                <b-button
-                  v-b-modal.redelegate-window
-                  size="sm"
-                  variant="outline-danger"
-                  class="mr-25 mb-25"
-                >
-                  Redelegate
-                </b-button>
-                <b-button
-                  v-b-modal.unbond-window
-                  size="sm"
-                  variant="outline-danger"
-                  class="mr-25 mb-25"
-                >
-                  Unbond
-                </b-button>
               </div>
             </div>
           </div>
@@ -280,8 +263,6 @@
       </b-row>
     </template>
     <operation-delegate-component :validator-address="validator.operator_address" />
-    <operation-redelegate-component :validator-address="validator.operator_address" />
-    <operation-unbond-component :validator-address="validator.operator_address" />
   </div>
 </template>
 
@@ -298,8 +279,6 @@ import StakingAddressComponent from './StakingAddressComponent.vue'
 import StakingCommissionComponent from './StakingCommissionComponent.vue'
 import StakingRewardComponent from './StakingRewardComponent.vue'
 import OperationDelegateComponent from './OperationDelegateComponent.vue'
-import OperationRedelegateComponent from './OperationRedelegateComponent.vue'
-import OperationUnbondComponent from './OperationUnbondComponent.vue'
 
 export default {
   components: {
@@ -315,8 +294,6 @@ export default {
     StakingCommissionComponent,
     StakingRewardComponent,
     OperationDelegateComponent,
-    OperationRedelegateComponent,
-    OperationUnbondComponent,
   },
   directives: {
     'b-modal': VBModal,