From b8678a9baad4c43eab26cc33ff4e9fea703b16ba Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Sun, 20 Mar 2022 22:57:04 +0800
Subject: [PATCH 01/14] test

---
 src/views/WalletAccountDetail.vue             |  18 +
 .../OperationModal/components/Delegate.vue    | 277 ++++++++++++
 src/views/components/OperationModal/index.vue | 393 ++++++++++++++++++
 3 files changed, 688 insertions(+)
 create mode 100644 src/views/components/OperationModal/components/Delegate.vue
 create mode 100644 src/views/components/OperationModal/index.vue

diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index 72954eef..5e67d6bd 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -123,6 +123,17 @@
       <b-card-header class="pt-0 pl-0 pr-0">
         <b-card-title>Delegation</b-card-title>
         <div>
+          <b-button
+            v-b-modal.operation-modal
+            variant="primary"
+            size="sm"
+            class="mr-25"
+          >
+            <feather-icon
+              icon="LogInIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block">Delegate-new</small>
+          </b-button>
           <b-button
             v-b-modal.delegate-window
             variant="primary"
@@ -353,6 +364,11 @@
       :address="address"
       :validator-address.sync="selectedValidator"
     />
+    <operation-modal
+      type="Delegate"
+      :address="address"
+      :validator-address.sync="selectedValidator"
+    />
   </div>
 </template>
 
@@ -373,6 +389,7 @@ import {
 } from '@/libs/utils'
 import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
 import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
@@ -412,6 +429,7 @@ export default {
     OperationUnbondComponent,
     OperationTransfer2Component,
     ChartComponentDoughnut,
+    OperationModal,
   },
   directives: {
     'b-modal': VBModal,
diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
new file mode 100644
index 00000000..1e82b0bf
--- /dev/null
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -0,0 +1,277 @@
+<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
+          label="Delegator"
+          label-for="Delegator"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Delegator"
+          >
+            <b-form-select
+              v-if="account.length > 0"
+              v-model="selectedAddress"
+              :options="account"
+              text-field="label"
+              @change="onChange"
+            />
+            <b-form-input
+              v-else
+              v-model="selectedAddress"
+              readonly
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Available Token"
+          label-for="Token"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Token"
+          >
+            <b-form-select
+              v-model="token"
+              text-field="label"
+            >
+              <b-form-select-option
+                v-for="x in balance"
+                :key="x.denom"
+                :value="x.denom"
+              >
+                {{ format(x) }}
+              </b-form-select-option>
+            </b-form-select>
+            <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"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <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>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+  BInputGroupAppend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+
+export default {
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    vSelect,
+    BInputGroupAppend,
+
+    ValidationProvider,
+  },
+  props: {
+    validatorAddress: {
+      type: String,
+      default: null,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedAddress: this.address,
+      availableAddress: [],
+      validators: [],
+      unbundValidators: [],
+      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,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+      account: [],
+    }
+  },
+  computed: {
+    valOptions() {
+      const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      return vals.concat(unbunded)
+    },
+    feeDenoms() {
+      if (!this.balance) return []
+      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    },
+    msg() {
+      return [{
+        typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
+        value: {
+          delegatorAddress: this.selectedAddress,
+          validatorAddress: this.selectedValidator,
+          amount: {
+            amount: getUnitAmount(this.amount, this.token),
+            denom: this.token,
+          },
+        },
+      }]
+    },
+  },
+  mounted() {
+    console.log('mounted----------->')
+    this.loadBalance()
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    },
+    onChange() {
+      if (this.selectedAddress) {
+        this.$http.getBankBalances(this.selectedAddress).then(res => {
+          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
+                })
+              }
+            })
+          }
+        })
+        console.log(this.$parent)
+        // this.$parent.getAuthAccount(this.selectedAddress)
+      }
+    },
+    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
+    },
+    loadBalance() {
+      this.account = this.computeAccount()
+      // if (this.account && this.account.length > 0) this.selectedAddress
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = v
+      })
+      this.onChange()
+    },
+    format(v) {
+      return formatToken(v, this.IBCDenom)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
new file mode 100644
index 00000000..0120d52e
--- /dev/null
+++ b/src/views/components/OperationModal/index.vue
@@ -0,0 +1,393 @@
+<template>
+  <b-modal
+    id="operation-modal"
+    centered
+    size="md"
+    title="Delegate Token"
+    ok-title="Send"
+    hide-header-close
+    scrollable
+    :ok-disabled="!selectedAddress"
+    @hidden="resetModal"
+    @ok="handleOk"
+    @show="loadBalance"
+  >
+    <b-overlay
+      :show="!selectedAddress"
+      rounded="sm"
+    >
+      <template #overlay>
+        <div class="text-center">
+          <b-avatar
+            icon="stopwatch"
+            font-scale="3"
+            animation="cylon"
+          />
+          <p id="cancel-label">
+            No available account found.
+          </p>
+          <b-button
+            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+            variant="outline-primary"
+            to="/wallet/import"
+          >
+            Connect Wallet
+          </b-button>
+        </div>
+      </template>
+      <validation-observer ref="simpleRules">
+        <b-form>
+          <component
+            :is="type"
+            ref="component"
+            :address="address"
+            :validator-address.sync="selectedValidator"
+          />
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Fee"
+                label-for="Fee"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required|integer"
+                  name="fee"
+                >
+                  <b-input-group>
+                    <b-form-input v-model="fee" />
+                    <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>Advanced</small>
+                </b-form-checkbox>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <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"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  name="memo"
+                >
+                  <b-form-input
+                    id="Memo"
+                    v-model="memo"
+                    max="2"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+
+          <b-row>
+            <b-col>
+              <wallet-input-vue v-model="wallet" />
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+      {{ error }}
+    </b-overlay>
+  </b-modal>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import {
+  BAvatar, BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+  BForm, BButton, BInputGroupAppend, BFormCheckbox, BOverlay,
+} from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  abbrAddress, extractAccountNumberAndSequence, getLocalAccounts, setLocalTxHistory, sign, timeIn,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+
+import WalletInputVue from '../WalletInput.vue'
+import Delegate from './components/Delegate.vue'
+
+export default {
+  name: 'DelegateDialogue',
+  components: {
+    BAvatar,
+    BModal,
+    BRow,
+    BCol,
+    BForm,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    BFormCheckbox,
+    vSelect,
+    BButton,
+    BInputGroupAppend,
+    BOverlay,
+    WalletInputVue,
+
+    ValidationProvider,
+    ValidationObserver,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
+    Delegate,
+  },
+  directives: {
+    Ripple,
+  },
+  props: {
+    type: {
+      type: String,
+      default: '',
+    },
+    validatorAddress: {
+      type: String,
+      default: null,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedAddress: this.address,
+      availableAddress: [],
+      validators: [],
+      unbundValidators: [],
+      selectedValidator: null,
+      token: '',
+      amount: null,
+      chainId: '',
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      IBCDenom: {},
+      memo: '',
+      fee: '900',
+      feeDenom: '',
+      wallet: 'ledgerUSB',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+      advance: false,
+      gas: '200000',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    feeDenoms() {
+      if (!this.balance) return []
+      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    },
+  },
+  created() {
+    // console.log('address: ', this.address)
+  },
+  methods: {
+    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
+    },
+    loadBalance() {
+      this.account = this.computeAccount()
+      // if (this.account && this.account.length > 0) this.selectedAddress
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = v
+      })
+      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.error = null
+        }
+      })
+      this.getAuthAccount()
+      this.$http.getBankBalances(this.selectedAddress).then(res => {
+        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.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
+      this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
+    },
+    getAuthAccount(address = this.selectedAddress) {
+      this.$http.getAuthAccount(address).then(ret => {
+        const account = extractAccountNumberAndSequence(ret)
+        console.log(account)
+        this.accountNumber = account.accountNumber
+        this.sequence = account.sequence
+      })
+    },
+    handleOk(bvModalEvt) {
+      // console.log('send')
+      // Prevent modal from closing
+      bvModalEvt.preventDefault()
+      // Trigger submit handler
+      // this.handleSubmit()
+      this.$refs.simpleRules.validate().then(ok => {
+        if (ok) {
+          this.sendTx().then(ret => {
+            console.log(ret)
+            this.error = ret
+          })
+        }
+      })
+    },
+    resetModal() {
+      this.feeDenom = ''
+      this.error = null
+    },
+    async sendTx() {
+      const txMsgs = this.$refs.component.msg
+
+      if (txMsgs.length === 0) {
+        this.error = 'No delegation found'
+        return ''
+      }
+      if (!this.accountNumber) {
+        this.error = 'Account number should not be empty!'
+        return ''
+      }
+
+      const txFee = {
+        amount: [
+          {
+            amount: this.fee,
+            denom: this.feeDenom,
+          },
+        ],
+        gas: this.gas,
+      }
+
+      const signerData = {
+        accountNumber: this.accountNumber,
+        sequence: this.sequence,
+        chainId: this.chainId,
+      }
+
+      sign(
+        this.wallet,
+        this.chainId,
+        this.selectedAddress,
+        txMsgs,
+        txFee,
+        this.memo,
+        signerData,
+      ).then(bodyBytes => {
+        this.$http.broadcastTx(bodyBytes).then(res => {
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'delegate',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
+          this.$bvModal.hide('delegate-window')
+          this.$toast({
+            component: ToastificationContent,
+            props: {
+              title: 'Transaction sent!',
+              icon: 'EditIcon',
+              variant: 'success',
+            },
+          })
+        }).catch(e => {
+          console.log(e)
+          this.error = e
+        })
+      }).catch(e => {
+        console.log(e)
+
+        this.error = e
+      })
+      return ''
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>

From 15e6b92ece09e8b912382aa5fca288333dd11fb9 Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Mon, 21 Mar 2022 23:10:30 +0800
Subject: [PATCH 02/14] redelegate

---
 src/views/WalletAccountDetail.vue             |  21 +-
 .../OperationModal/components/Delegate.vue    |  29 ++-
 .../OperationModal/components/Redelegate.vue  | 240 ++++++++++++++++++
 src/views/components/OperationModal/index.vue |  53 +---
 4 files changed, 282 insertions(+), 61 deletions(-)
 create mode 100644 src/views/components/OperationModal/components/Redelegate.vue

diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index 5e67d6bd..cfc775e6 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -128,6 +128,7 @@
             variant="primary"
             size="sm"
             class="mr-25"
+            @click="setOperationModalType('Delegate')"
           >
             <feather-icon
               icon="LogInIcon"
@@ -186,6 +187,15 @@
               >
                 <feather-icon icon="ShuffleIcon" />
               </b-button>
+              <b-button
+                v-b-modal.operation-modal
+                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                v-b-tooltip.hover.top="'Redelegate'"
+                variant="outline-primary"
+                @click="selectValue(data.value,'Redelegate')"
+              >
+                <feather-icon icon="ShuffleIcon" />
+              </b-button>
               <b-button
                 v-b-modal.unbond-window
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
@@ -365,9 +375,9 @@
       :validator-address.sync="selectedValidator"
     />
     <operation-modal
-      type="Delegate"
+      :type="operationModalType"
       :address="address"
-      :validator-address.sync="selectedValidator"
+      :validator-address="selectedValidator"
     />
   </div>
 </template>
@@ -452,6 +462,7 @@ export default {
       unbonding: [],
       quotes: {},
       transactions: [],
+      operationModalType: '',
     }
   },
   computed: {
@@ -638,8 +649,12 @@ export default {
         this.transactions = res
       })
     },
-    selectValue(v) {
+    selectValue(v, type) {
       this.selectedValidator = v
+      this.setOperationModalType(type)
+    },
+    setOperationModalType(type) {
+      this.operationModalType = type
     },
     formatHash: abbrAddress,
     formatDenom(v) {
diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index 1e82b0bf..5a07009c 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -210,13 +210,20 @@ export default {
     },
   },
   mounted() {
-    console.log('mounted----------->')
     this.loadBalance()
   },
   methods: {
-    printDenom() {
-      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    loadBalance() {
+      this.account = this.computeAccount()
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = v
+      })
+      this.onChange()
     },
+
     onChange() {
       if (this.selectedAddress) {
         this.$http.getBankBalances(this.selectedAddress).then(res => {
@@ -234,7 +241,8 @@ export default {
             })
           }
         })
-        console.log(this.$parent)
+        console.log('onChange----------->')
+        // TODO: this.$emit()
         // this.$parent.getAuthAccount(this.selectedAddress)
       }
     },
@@ -254,17 +262,10 @@ export default {
       this.selectedValidator = this.validatorAddress
       return array
     },
-    loadBalance() {
-      this.account = this.computeAccount()
-      // if (this.account && this.account.length > 0) this.selectedAddress
-      this.$http.getValidatorList().then(v => {
-        this.validators = v
-      })
-      this.$http.getValidatorUnbondedList().then(v => {
-        this.unbundValidators = v
-      })
-      this.onChange()
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
     },
+
     format(v) {
       return formatToken(v, this.IBCDenom)
     },
diff --git a/src/views/components/OperationModal/components/Redelegate.vue b/src/views/components/OperationModal/components/Redelegate.vue
new file mode 100644
index 00000000..b051962d
--- /dev/null
+++ b/src/views/components/OperationModal/components/Redelegate.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Delegator"
+          label-for="Account"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Delegator"
+          >
+            <b-form-input
+              v-model="address"
+              readonly
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="From Validator"
+          label-for="validator"
+        >
+          <v-select
+            :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
+          label="To Validator"
+          label-for="validator"
+        >
+          <v-select
+            v-model="toValidator"
+            :options="valOptions"
+            :reduce="val => val.value"
+            placeholder="Select a validator"
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Amount"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <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>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup,
+  BInputGroupAppend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+
+export default {
+  name: 'UnbondDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    vSelect,
+    BInputGroupAppend,
+    ValidationProvider,
+  },
+  props: {
+    validatorAddress: {
+      type: String,
+      default: null,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedAddress: this.address,
+      availableAddress: [],
+      unbundValidators: [],
+      validators: [],
+      toValidator: null,
+      token: '',
+      amount: null,
+      chainId: '',
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      memo: '',
+      feeDenom: '',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+      account: [],
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    valOptions() {
+      const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      return vals.concat(unbunded)
+    },
+    tokenOptions() {
+      if (!this.delegations) return []
+      return this.delegations.filter(x => x.delegation.validator_address === this.validatorAddress).map(x => ({ value: x.balance.denom, label: formatToken(x.balance) }))
+    },
+    msg() {
+      return [{
+        typeUrl: '/cosmos.staking.v1beta1.MsgBeginRedelegate',
+        value: {
+          delegatorAddress: this.address,
+          validatorSrcAddress: this.validatorAddress,
+          validatorDstAddress: this.toValidator,
+          amount: {
+            amount: getUnitAmount(this.amount, this.token),
+            denom: this.token,
+          },
+        },
+      }]
+    },
+  },
+  mounted() {
+    this.loadBalance()
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    loadBalance() {
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = v
+      })
+      this.$http.getBankBalances(this.address).then(res => {
+        if (res && res.length > 0) {
+          this.balance = res.reverse()
+        }
+      })
+      this.$http.getStakingDelegations(this.address).then(res => {
+        this.delegations = res.delegation_responses
+        console.log(res)
+        this.delegations.forEach(x => {
+          if (x.delegation.validator_address === this.validatorAddress) {
+            this.token = x.balance.denom
+            this.feeDenom = x.balance.denom
+          }
+        })
+      })
+    },
+
+    format(v) {
+      return formatToken(v)
+    },
+
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index 0120d52e..ba92867b 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -41,7 +41,7 @@
             :is="type"
             ref="component"
             :address="address"
-            :validator-address.sync="selectedValidator"
+            :validator-address="selectedValidator"
           />
           <b-row>
             <b-col>
@@ -143,13 +143,14 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress, extractAccountNumberAndSequence, getLocalAccounts, setLocalTxHistory, sign, timeIn,
+  extractAccountNumberAndSequence, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
 import WalletInputVue from '../WalletInput.vue'
 import Delegate from './components/Delegate.vue'
+import Redelegate from './components/Redelegate.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -176,6 +177,7 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
     Delegate,
+    Redelegate,
   },
   directives: {
     Ripple,
@@ -197,26 +199,20 @@ export default {
   data() {
     return {
       selectedAddress: this.address,
-      availableAddress: [],
-      validators: [],
-      unbundValidators: [],
       selectedValidator: null,
       token: '',
-      amount: null,
       chainId: '',
-      selectedChain: '',
       balance: [],
-      delegations: [],
       IBCDenom: {},
-      memo: '',
-      fee: '900',
-      feeDenom: '',
-      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
       advance: false,
+      fee: '900',
+      feeDenom: '',
+      wallet: 'ledgerUSB',
       gas: '200000',
+      memo: '',
 
       required,
       password,
@@ -237,35 +233,8 @@ export default {
       return this.balance.filter(item => !item.denom.startsWith('ibc'))
     },
   },
-  created() {
-    // console.log('address: ', this.address)
-  },
   methods: {
-    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
-    },
     loadBalance() {
-      this.account = this.computeAccount()
-      // if (this.account && this.account.length > 0) this.selectedAddress
-      this.$http.getValidatorList().then(v => {
-        this.validators = v
-      })
-      this.$http.getValidatorUnbondedList().then(v => {
-        this.unbundValidators = v
-      })
       this.$http.getLatestBlock().then(ret => {
         this.chainId = ret.block.header.chain_id
         const notSynced = timeIn(ret.block.header.time, 10, 'm')
@@ -303,11 +272,7 @@ export default {
       })
     },
     handleOk(bvModalEvt) {
-      // console.log('send')
-      // Prevent modal from closing
       bvModalEvt.preventDefault()
-      // Trigger submit handler
-      // this.handleSubmit()
       this.$refs.simpleRules.validate().then(ok => {
         if (ok) {
           this.sendTx().then(ret => {
@@ -365,7 +330,7 @@ export default {
             hash: res.tx_response.txhash,
             time: new Date(),
           })
-          this.$bvModal.hide('delegate-window')
+          this.$bvModal.hide('operation-modal')
           this.$toast({
             component: ToastificationContent,
             props: {

From 9628a37aa7d4510845f396b3863bebea9622b9c0 Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Tue, 22 Mar 2022 22:56:32 +0800
Subject: [PATCH 03/14] fix

---
 src/views/WalletAccountDetail.vue             |  25 ++-
 .../OperationModal/components/Delegate.vue    |  16 +-
 .../OperationModal/components/Redelegate.vue  |  14 +-
 .../OperationModal/components/Unbond.vue      | 206 ++++++++++++++++++
 .../OperationModal/components/Withdraw.vue    | 140 ++++++++++++
 src/views/components/OperationModal/index.vue |  34 ++-
 6 files changed, 411 insertions(+), 24 deletions(-)
 create mode 100644 src/views/components/OperationModal/components/Unbond.vue
 create mode 100644 src/views/components/OperationModal/components/Withdraw.vue

diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index cfc775e6..9469c13e 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -133,7 +133,7 @@
             <feather-icon
               icon="LogInIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block">Delegate-new</small>
+            /><small class="d-none d-md-block">Delegate1</small>
           </b-button>
           <b-button
             v-b-modal.delegate-window
@@ -157,6 +157,18 @@
               class="d-md-none"
             /><small class="d-none d-md-block"> Withdraw Rewards</small>
           </b-button>
+          <b-button
+            v-if="delegations"
+            v-b-modal.operation-modal
+            variant="primary"
+            size="sm"
+            @click="setOperationModalType('Withdraw')"
+          >
+            <feather-icon
+              icon="ShareIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block"> Withdraw Rewards1</small>
+          </b-button>
         </div>
       </b-card-header>
       <b-card-body class="pl-0 pr-0">
@@ -190,7 +202,7 @@
               <b-button
                 v-b-modal.operation-modal
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate'"
+                v-b-tooltip.hover.top="'Redelegate1'"
                 variant="outline-primary"
                 @click="selectValue(data.value,'Redelegate')"
               >
@@ -205,6 +217,15 @@
               >
                 <feather-icon icon="LogOutIcon" />
               </b-button>
+              <b-button
+                v-b-modal.operation-modal
+                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                v-b-tooltip.hover.top="'Unbond1'"
+                variant="outline-primary"
+                @click="selectValue(data.value,'Unbond')"
+              >
+                <feather-icon icon="LogOutIcon" />
+              </b-button>
             </b-button-group>
           </template>
         </b-table>
diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index 5a07009c..a302373a 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -120,7 +120,7 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount,
+  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, extractAccountNumberAndSequence,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 
@@ -210,6 +210,10 @@ export default {
     },
   },
   mounted() {
+    this.$emit('update', {
+      modalTitle: 'Delegate Token',
+      historyName: 'delegate',
+    })
     this.loadBalance()
   },
   methods: {
@@ -241,9 +245,13 @@ export default {
             })
           }
         })
-        console.log('onChange----------->')
-        // TODO: this.$emit()
-        // this.$parent.getAuthAccount(this.selectedAddress)
+        this.$http.getAuthAccount(this.selectedAddress).then(ret => {
+          const account = extractAccountNumberAndSequence(ret)
+          this.$emit('update', {
+            accountNumber: account.accountNumber,
+            sequence: account.sequence,
+          })
+        })
       }
     },
     computeAccount() {
diff --git a/src/views/components/OperationModal/components/Redelegate.vue b/src/views/components/OperationModal/components/Redelegate.vue
index b051962d..fd70b536 100644
--- a/src/views/components/OperationModal/components/Redelegate.vue
+++ b/src/views/components/OperationModal/components/Redelegate.vue
@@ -118,7 +118,7 @@ import {
 import vSelect from 'vue-select'
 
 export default {
-  name: 'UnbondDialogue',
+  name: 'Redelegate',
   components: {
     BRow,
     BCol,
@@ -142,17 +142,13 @@ export default {
   data() {
     return {
       selectedAddress: this.address,
-      availableAddress: [],
       unbundValidators: [],
       validators: [],
       toValidator: null,
       token: '',
       amount: null,
-      chainId: '',
-      selectedChain: '',
       balance: [],
       delegations: [],
-      memo: '',
       feeDenom: '',
       error: null,
       sequence: 1,
@@ -198,6 +194,10 @@ export default {
     },
   },
   mounted() {
+    this.$emit('update', {
+      modalTitle: 'Redelegate Token',
+      historyName: 'redelegate',
+    })
     this.loadBalance()
   },
   methods: {
@@ -222,7 +222,9 @@ export default {
         this.delegations.forEach(x => {
           if (x.delegation.validator_address === this.validatorAddress) {
             this.token = x.balance.denom
-            this.feeDenom = x.balance.denom
+            this.$emit('update', {
+              feeDenom: x.balance.denom,
+            })
           }
         })
       })
diff --git a/src/views/components/OperationModal/components/Unbond.vue b/src/views/components/OperationModal/components/Unbond.vue
new file mode 100644
index 00000000..76c6b299
--- /dev/null
+++ b/src/views/components/OperationModal/components/Unbond.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Delegator"
+          label-for="Account"
+        >
+          <b-form-input
+            v-model="address"
+            readonly
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Validator"
+          label-for="validator"
+        >
+          <v-select
+            :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
+          label="Amount"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <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>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup, BInputGroupAppend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+
+export default {
+  name: 'UnbondDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    vSelect,
+    BInputGroupAppend,
+    ValidationProvider,
+
+  },
+  props: {
+    validatorAddress: {
+      type: String,
+      default: null,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      validators: [],
+      selectedValidator: this.validatorAddress,
+      token: '',
+      amount: null,
+      balance: [],
+      delegations: [],
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    valOptions() {
+      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.validatorAddress).map(x => ({ value: x.balance.denom, label: formatToken(x.balance) }))
+    },
+    msg() {
+      return [{
+        typeUrl: '/cosmos.staking.v1beta1.MsgUndelegate',
+        value: {
+          delegatorAddress: this.address,
+          validatorAddress: this.validatorAddress,
+          amount: {
+            amount: getUnitAmount(this.amount, this.token),
+            denom: this.token,
+          },
+        },
+      }]
+    },
+  },
+
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Unbond Token',
+      historyName: 'unbond',
+    })
+    this.loadBalance()
+  },
+
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    loadBalance() {
+      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.reverse()
+        }
+      })
+      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.$emit('update', {
+              feeDenom: x.balance.denom,
+            })
+          }
+        })
+      })
+    },
+
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/components/OperationModal/components/Withdraw.vue b/src/views/components/OperationModal/components/Withdraw.vue
new file mode 100644
index 00000000..f4a2e81d
--- /dev/null
+++ b/src/views/components/OperationModal/components/Withdraw.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <b-row>
+      <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?account.logo:''"
+                size="18"
+                variant="light-primary"
+                rounded
+              />
+            </b-input-group-prepend>
+            <b-form-input
+              :value="account?account.addr:address"
+              readonly
+            />
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import {
+  BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup,
+  BInputGroupPrepend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  getLocalAccounts, getLocalChains,
+} from '@/libs/utils'
+
+export default {
+  name: 'WithdrawDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BInputGroupPrepend,
+    BFormInput,
+    BAvatar,
+    BFormGroup,
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      account: [],
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      feeDenom: '',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      const txMsgs = []
+      this.delegations.forEach(i => {
+        txMsgs.push({
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+          value: {
+            delegatorAddress: this.address,
+            validatorAddress: i.delegation.validator_address,
+          },
+        })
+      })
+      return txMsgs
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Withdraw Rewards',
+      historyName: 'withdraw',
+    })
+    this.loadBalance()
+  },
+
+  methods: {
+    loadBalance() {
+      this.account = this.computeAccount()
+      if (this.account && this.account.length > 0) this.address = this.account[0].addr
+      if (this.address) {
+        this.$http.getBankBalances(this.address).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res.reverse()
+            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+            if (token) this.feeDenom = token.denom
+          }
+        })
+      }
+      this.$http.getStakingDelegations(this.address).then(res => {
+        this.delegations = res.delegation_responses
+      })
+    },
+    computeAccount() {
+      const accounts = getLocalAccounts()
+      const chains = getLocalChains()
+      if (accounts) {
+        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]
+            this.$emit('update', {
+              selectedChain: chains[addr.chain],
+            })
+            return addr
+          }
+        }
+      }
+      return null
+    },
+
+  },
+}
+</script>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index ba92867b..f4a3bf74 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -3,7 +3,7 @@
     id="operation-modal"
     centered
     size="md"
-    title="Delegate Token"
+    :title="modalTitle"
     ok-title="Send"
     hide-header-close
     scrollable
@@ -41,7 +41,8 @@
             :is="type"
             ref="component"
             :address="address"
-            :validator-address="selectedValidator"
+            :validator-address="validatorAddress"
+            @update="componentUpdate"
           />
           <b-row>
             <b-col>
@@ -151,6 +152,8 @@ import ToastificationContent from '@core/components/toastification/Toastificatio
 import WalletInputVue from '../WalletInput.vue'
 import Delegate from './components/Delegate.vue'
 import Redelegate from './components/Redelegate.vue'
+import Withdraw from './components/Withdraw.vue'
+import Unbond from './components/Unbond.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -178,6 +181,8 @@ export default {
     ToastificationContent,
     Delegate,
     Redelegate,
+    Withdraw,
+    Unbond,
   },
   directives: {
     Ripple,
@@ -198,8 +203,11 @@ export default {
   },
   data() {
     return {
+      modalTitle: '',
+      historyName: '',
       selectedAddress: this.address,
       selectedValidator: null,
+      selectedChain: null,
       token: '',
       chainId: '',
       balance: [],
@@ -244,7 +252,11 @@ export default {
           this.error = null
         }
       })
-      this.getAuthAccount()
+      this.$http.getAuthAccount(this.selectedAddress).then(ret => {
+        const account = extractAccountNumberAndSequence(ret)
+        this.accountNumber = account.accountNumber
+        this.sequence = account.sequence
+      })
       this.$http.getBankBalances(this.selectedAddress).then(res => {
         if (res && res.length > 0) {
           this.balance = res.reverse()
@@ -263,12 +275,10 @@ export default {
       this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
       this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
     },
-    getAuthAccount(address = this.selectedAddress) {
-      this.$http.getAuthAccount(address).then(ret => {
-        const account = extractAccountNumberAndSequence(ret)
-        console.log(account)
-        this.accountNumber = account.accountNumber
-        this.sequence = account.sequence
+    componentUpdate(obj) {
+      console.log(obj)
+      Object.keys(obj).forEach(key => {
+        this[key] = obj[key]
       })
     },
     handleOk(bvModalEvt) {
@@ -288,7 +298,7 @@ export default {
     },
     async sendTx() {
       const txMsgs = this.$refs.component.msg
-
+      console.log(txMsgs)
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
         return ''
@@ -323,10 +333,10 @@ export default {
         this.memo,
         signerData,
       ).then(bodyBytes => {
-        this.$http.broadcastTx(bodyBytes).then(res => {
+        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
           setLocalTxHistory({
             chain: this.$store.state.chains.selected,
-            op: 'delegate',
+            op: this.historyName,
             hash: res.tx_response.txhash,
             time: new Date(),
           })

From 3e6dccff7789edb890ea8fcb00f652a43d6b2b7b Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 28 Mar 2022 14:29:32 +0800
Subject: [PATCH 04/14] Done delegate

---
 .../OperationModal/components/Delegate.vue    | 139 +++++++-----------
 src/views/components/OperationModal/index.vue |  32 ++--
 2 files changed, 70 insertions(+), 101 deletions(-)

diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index a302373a..2c4d718a 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/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() {
-      if (!this.balance) return []
-      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    balanceOptions() {
+      return this.setupBalance()
     },
     msg() {
       return [{
@@ -214,68 +216,29 @@ export default {
       modalTitle: 'Delegate Token',
       historyName: 'delegate',
     })
-    this.loadBalance()
+    this.loadData()
   },
   methods: {
-    loadBalance() {
-      this.account = this.computeAccount()
+    loadData() {
       this.$http.getValidatorList().then(v => {
         this.validators = v
       })
       this.$http.getValidatorUnbondedList().then(v => {
         this.unbundValidators = v
       })
-      this.onChange()
     },
-
-    onChange() {
-      if (this.selectedAddress) {
-        this.$http.getBankBalances(this.selectedAddress).then(res => {
-          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,
-          })
-        })
+    setupBalance() {
+      if (this.balance && this.balance.length > 0) {
+        this.token = this.balance[0].denom
+        return this.balance
       }
-    },
-    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
+      return []
     },
     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)
     },
   },
 }
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index f4a3bf74..ccb50702 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/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)

From a592e0ed1611a928f72ce925f2ad94a3b05b4b91 Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Tue, 29 Mar 2022 23:25:32 +0800
Subject: [PATCH 05/14] fix

---
 .../OperationModal/components/Delegate.vue    |  9 ----
 .../OperationModal/components/Withdraw.vue    | 53 ++-----------------
 2 files changed, 5 insertions(+), 57 deletions(-)

diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index 2c4d718a..bc4138c2 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -11,15 +11,7 @@
             rules="required"
             name="Delegator"
           >
-            <b-form-select
-              v-if="account.length > 0"
-              v-model="selectedAddress"
-              :options="account"
-              text-field="label"
-              @change="onChange"
-            />
             <b-form-input
-              v-else
               v-model="selectedAddress"
               readonly
             />
@@ -176,7 +168,6 @@ export default {
       digits,
       length,
       alphaDash,
-      account: [],
     }
   },
   computed: {
diff --git a/src/views/components/OperationModal/components/Withdraw.vue b/src/views/components/OperationModal/components/Withdraw.vue
index f4a2e81d..666d3bea 100644
--- a/src/views/components/OperationModal/components/Withdraw.vue
+++ b/src/views/components/OperationModal/components/Withdraw.vue
@@ -7,16 +7,8 @@
           label-for="Account"
         >
           <b-input-group class="mb-25">
-            <b-input-group-prepend is-text>
-              <b-avatar
-                :src="account?account.logo:''"
-                size="18"
-                variant="light-primary"
-                rounded
-              />
-            </b-input-group-prepend>
             <b-form-input
-              :value="account?account.addr:address"
+              :value="address"
               readonly
             />
           </b-input-group>
@@ -28,15 +20,11 @@
 
 <script>
 import {
-  BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup,
-  BInputGroupPrepend,
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
-import {
-  getLocalAccounts, getLocalChains,
-} from '@/libs/utils'
 
 export default {
   name: 'WithdrawDialogue',
@@ -44,9 +32,7 @@ export default {
     BRow,
     BCol,
     BInputGroup,
-    BInputGroupPrepend,
     BFormInput,
-    BAvatar,
     BFormGroup,
   },
   props: {
@@ -96,45 +82,16 @@ export default {
       modalTitle: 'Withdraw Rewards',
       historyName: 'withdraw',
     })
-    this.loadBalance()
+    this.loadData()
   },
 
   methods: {
-    loadBalance() {
-      this.account = this.computeAccount()
-      if (this.account && this.account.length > 0) this.address = this.account[0].addr
-      if (this.address) {
-        this.$http.getBankBalances(this.address).then(res => {
-          if (res && res.length > 0) {
-            this.balance = res.reverse()
-            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-            if (token) this.feeDenom = token.denom
-          }
-        })
-      }
+    loadData() {
       this.$http.getStakingDelegations(this.address).then(res => {
+        console.log(res)
         this.delegations = res.delegation_responses
       })
     },
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const chains = getLocalChains()
-      if (accounts) {
-        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]
-            this.$emit('update', {
-              selectedChain: chains[addr.chain],
-            })
-            return addr
-          }
-        }
-      }
-      return null
-    },
-
   },
 }
 </script>

From f99f0093b9b35aa817ae3d9ae33a176112525df3 Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Wed, 30 Mar 2022 21:50:49 +0800
Subject: [PATCH 06/14] fix redelegate

---
 .../OperationModal/components/Redelegate.vue  | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/views/components/OperationModal/components/Redelegate.vue b/src/views/components/OperationModal/components/Redelegate.vue
index fd70b536..0795f5cb 100644
--- a/src/views/components/OperationModal/components/Redelegate.vue
+++ b/src/views/components/OperationModal/components/Redelegate.vue
@@ -147,13 +147,7 @@ export default {
       toValidator: null,
       token: '',
       amount: null,
-      balance: [],
       delegations: [],
-      feeDenom: '',
-      error: null,
-      sequence: 1,
-      accountNumber: 0,
-      account: [],
 
       required,
       password,
@@ -170,9 +164,18 @@ 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
     },
     tokenOptions() {
       if (!this.delegations) return []
@@ -198,24 +201,16 @@ export default {
       modalTitle: 'Redelegate Token',
       historyName: 'redelegate',
     })
-    this.loadBalance()
+    this.loadData()
   },
   methods: {
-    printDenom() {
-      return formatTokenDenom(this.token)
-    },
-    loadBalance() {
+    loadData() {
       this.$http.getValidatorList().then(v => {
         this.validators = v
       })
       this.$http.getValidatorUnbondedList().then(v => {
         this.unbundValidators = v
       })
-      this.$http.getBankBalances(this.address).then(res => {
-        if (res && res.length > 0) {
-          this.balance = res.reverse()
-        }
-      })
       this.$http.getStakingDelegations(this.address).then(res => {
         this.delegations = res.delegation_responses
         console.log(res)
@@ -233,7 +228,9 @@ export default {
     format(v) {
       return formatToken(v)
     },
-
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
   },
 }
 </script>

From 3d44d1d9f93f3d13a0cd14be518cd5194c61928f Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Wed, 30 Mar 2022 23:11:24 +0800
Subject: [PATCH 07/14] fix

---
 src/views/WalletAccountDetail.vue             |  12 ++
 .../OperationModal/components/Redelegate.vue  |   2 +-
 .../OperationModal/components/Transfer.vue    | 204 ++++++++++++++++++
 .../OperationModal/components/Unbond.vue      |  18 +-
 src/views/components/OperationModal/index.vue |   2 +
 5 files changed, 224 insertions(+), 14 deletions(-)
 create mode 100644 src/views/components/OperationModal/components/Transfer.vue

diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index 9469c13e..b0ad742f 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -49,6 +49,18 @@
            />
             <span class="d-none d-md-block">Transfer</span>
           </b-button>
+          <b-button
+            v-b-modal.operation-modal
+            variant="primary"
+            size="sm"
+            class="mr-25"
+            @click="setOperationModalType('Transfer')"
+          >
+            <feather-icon
+              icon="SendIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block">Transfer1</small>
+          </b-button>
           <b-button
             v-b-modal.ibc-transfer-window
             variant="danger"
diff --git a/src/views/components/OperationModal/components/Redelegate.vue b/src/views/components/OperationModal/components/Redelegate.vue
index 0795f5cb..921636e5 100644
--- a/src/views/components/OperationModal/components/Redelegate.vue
+++ b/src/views/components/OperationModal/components/Redelegate.vue
@@ -68,6 +68,7 @@
             :options="valOptions"
             :reduce="val => val.value"
             placeholder="Select a validator"
+            :selectable="(v) => v.value"
           />
         </b-form-group>
       </b-col>
@@ -213,7 +214,6 @@ export default {
       })
       this.$http.getStakingDelegations(this.address).then(res => {
         this.delegations = res.delegation_responses
-        console.log(res)
         this.delegations.forEach(x => {
           if (x.delegation.validator_address === this.validatorAddress) {
             this.token = x.balance.denom
diff --git a/src/views/components/OperationModal/components/Transfer.vue b/src/views/components/OperationModal/components/Transfer.vue
new file mode 100644
index 00000000..53bc5d4c
--- /dev/null
+++ b/src/views/components/OperationModal/components/Transfer.vue
@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Sender"
+          label-for="sender"
+        >
+          <b-input-group class="mb-25">
+
+            <b-form-input
+              name="sender"
+              :value="address"
+              readonly
+            />
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Recipient"
+          label-for="Recipient"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="recipient"
+          >
+            <b-input-group class="mb-25">
+              <b-form-input
+                id="Recipient"
+                v-model="recipient"
+                :state="errors.length > 0 ? false:null"
+              />
+            </b-input-group>
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Available Token"
+          label-for="Token"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Token"
+          >
+            <b-form-select
+              v-model="token"
+            >
+              <b-form-select-option
+                v-for="item in balanceOptions"
+                :key="item.denom"
+                :value="item.denom"
+              >
+                {{ format(item) }}
+              </b-form-select-option>
+            </b-form-select>
+            <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"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <b-input-group class="mb-25">
+              <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>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+
+export default {
+  name: 'TransforDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BInputGroupAppend,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    ValidationProvider,
+
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+    balance: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      token: '',
+      amount: null,
+      recipient: '',
+      IBCDenom: {},
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      return [
+        {
+          typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+          value: {
+            fromAddress: this.address,
+            toAddress: this.recipient,
+            amount: [
+              {
+                amount: getUnitAmount(this.amount, this.token),
+                denom: this.token,
+              },
+            ],
+          },
+        },
+      ]
+    },
+    balanceOptions() {
+      return this.setupBalance()
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Transfer Tokens',
+      historyName: 'send',
+    })
+  },
+
+  methods: {
+    setupBalance() {
+      if (this.balance && this.balance.length > 0) {
+        this.token = this.balance[0].denom
+        return this.balance
+      }
+      return []
+    },
+    format(v) {
+      return formatToken(v, this.IBCDenom)
+    },
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    },
+
+  },
+
+}
+</script>
diff --git a/src/views/components/OperationModal/components/Unbond.vue b/src/views/components/OperationModal/components/Unbond.vue
index 76c6b299..bf00902d 100644
--- a/src/views/components/OperationModal/components/Unbond.vue
+++ b/src/views/components/OperationModal/components/Unbond.vue
@@ -105,7 +105,6 @@ export default {
     vSelect,
     BInputGroupAppend,
     ValidationProvider,
-
   },
   props: {
     validatorAddress: {
@@ -123,7 +122,6 @@ export default {
       selectedValidator: this.validatorAddress,
       token: '',
       amount: null,
-      balance: [],
       delegations: [],
 
       required,
@@ -167,24 +165,16 @@ export default {
       modalTitle: 'Unbond Token',
       historyName: 'unbond',
     })
-    this.loadBalance()
+    this.loadData()
   },
 
   methods: {
-    printDenom() {
-      return formatTokenDenom(this.token)
-    },
-    loadBalance() {
+    loadData() {
       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.reverse()
-        }
-      })
       this.$http.getStakingDelegations(this.address).then(res => {
         this.delegations = res.delegation_responses
         this.delegations.forEach(x => {
@@ -197,7 +187,9 @@ export default {
         })
       })
     },
-
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
   },
 }
 </script>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index ccb50702..22d5ef1c 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -155,6 +155,7 @@ import Delegate from './components/Delegate.vue'
 import Redelegate from './components/Redelegate.vue'
 import Withdraw from './components/Withdraw.vue'
 import Unbond from './components/Unbond.vue'
+import Transfer from './components/Transfer.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -184,6 +185,7 @@ export default {
     Redelegate,
     Withdraw,
     Unbond,
+    Transfer,
   },
   directives: {
     Ripple,

From d5c0f266661936bcd70652cf56b99ba01c43dded Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Thu, 31 Mar 2022 23:01:58 +0800
Subject: [PATCH 08/14] fix

---
 src/views/Governance.vue                      |  24 +-
 src/views/WalletAccountDetail.vue             |  15 +-
 .../OperationModal/components/IBCTransfer.vue | 308 ++++++++++++++++++
 .../OperationModal/components/Vote.vue        | 194 +++++++++++
 .../OperationModal/components/Withdraw.vue    |   1 -
 src/views/components/OperationModal/index.vue |  25 +-
 6 files changed, 559 insertions(+), 8 deletions(-)
 create mode 100644 src/views/components/OperationModal/components/IBCTransfer.vue
 create mode 100644 src/views/components/OperationModal/components/Vote.vue

diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 288a0d2d..7e7d3c25 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -160,7 +160,7 @@
               v-b-modal.deposit-window
               variant="primary"
               class="btn float-right mg-2"
-              @click="selectProposal(p.id, p.title)"
+              @click="selectProposal('GovDeposit',p.id, p.title)"
             >
               {{ $t('btn_deposit') }}
             </b-button>
@@ -169,10 +169,19 @@
               v-b-modal.vote-window
               variant="primary"
               class="btn float-right mg-2"
-              @click="selectProposal(p.id, p.title)"
+              @click="selectProposal('Vote',p.id, p.title)"
             >
               {{ $t('btn_vote') }}
             </b-button>
+            <b-button
+              v-if="p.status===2"
+              v-b-modal.operation-modal
+              variant="primary"
+              class="btn float-right mg-2"
+              @click="selectProposal('Vote',p.id, p.title)"
+            >
+              {{ $t('btn_vote') }}1
+            </b-button>
           </b-card-footer>
         </b-card>
       </b-col>
@@ -185,6 +194,11 @@
       :proposal-id="selectedProposalId"
       :title="selectedTitle"
     />
+    <operation-modal
+      :type="operationModalType"
+      :proposal-id="selectedProposalId"
+      :proposal-title="selectedTitle"
+    />
   </div>
 </template>
 
@@ -196,6 +210,7 @@ import Ripple from 'vue-ripple-directive'
 import { Proposal } from '@/libs/data'
 import { percent, tokenFormatter } from '@/libs/utils'
 import dayjs from 'dayjs'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import OperationVoteComponent from './OperationVoteComponent.vue'
 import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
 
@@ -214,6 +229,7 @@ export default {
     BCol,
     OperationVoteComponent,
     OperationGovDepositComponent,
+    OperationModal,
   },
   directives: {
     'b-modal': VBModal,
@@ -225,6 +241,7 @@ export default {
       selectedTitle: '',
       proposals: [new Proposal()],
       max: 1,
+      operationModalType: '',
     }
   },
   mounted() {
@@ -234,7 +251,8 @@ export default {
     percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD'),
     formatToken: v => tokenFormatter(v, {}),
-    selectProposal(pid, title) {
+    selectProposal(modal, pid, title) {
+      this.operationModalType = modal
       this.selectedProposalId = Number(pid)
       this.selectedTitle = title
     },
diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index b0ad742f..321f4e24 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -69,8 +69,19 @@
              icon="SendIcon"
              class="d-md-none"
            />
-            <span class="d-none d-md-block">IBC Transfer
-            </span></b-button>
+            <span class="d-none d-md-block">IBC Transfer</span>
+          </b-button>
+          <b-button
+            v-b-modal.operation-modal
+            variant="danger"
+            size="sm"
+            @click="setOperationModalType('IBCTransfer')"
+          ><feather-icon
+             icon="SendIcon"
+             class="d-md-none"
+           />
+            <span class="d-none d-md-block">IBC Transfer1</span>
+          </b-button>
         </div>
       </b-card-header>
       <b-card-body class="pl-0 pr-0">
diff --git a/src/views/components/OperationModal/components/IBCTransfer.vue b/src/views/components/OperationModal/components/IBCTransfer.vue
new file mode 100644
index 00000000..2bdbe433
--- /dev/null
+++ b/src/views/components/OperationModal/components/IBCTransfer.vue
@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Sender"
+          label-for="Account"
+        >
+          <b-input-group class="mb-25">
+            <b-form-input
+              :value="address"
+              readonly
+            />
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Available Token"
+          label-for="Token"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Token"
+          >
+            <b-form-select
+              v-model="token"
+              @change="tokenChange"
+            >
+              <template #first>
+                <b-form-select-option
+                  value=""
+                >
+                  -- Please select a token --
+                </b-form-select-option>
+              </template>
+              <b-form-select-option
+                v-for="item in balance"
+                :key="item.denom"
+                :value="item.denom"
+              >
+                {{ format(item) }}
+              </b-form-select-option>
+            </b-form-select>
+            <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"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <b-input-group class="mb-25">
+              <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>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          :label="`Destination: ${targetChainId}`"
+          label-for="destination"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="destination"
+          >
+            <v-select
+              v-model="destination"
+              name="destination"
+              :options="destinationOptions"
+              placeholder="Select a channel"
+              @input="onChannelChange()"
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Recipient"
+          label-for="Recipient"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="recipient"
+          >
+            <b-input-group class="mb-25">
+              <b-form-input
+                id="Recipient"
+                v-model="recipient"
+                :state="errors.length > 0 ? false:null"
+                placeholder="Input a destination address"
+              />
+            </b-input-group>
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+import { coin } from '@cosmjs/amino'
+import dayjs from 'dayjs'
+import { toHex } from '@cosmjs/encoding'
+import { sha256 } from '@cosmjs/crypto'
+
+export default {
+  name: 'TransforDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BInputGroupAppend,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    vSelect,
+
+    ValidationProvider,
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+    balance: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      targetChainId: '',
+      token: '',
+      amount: null,
+      recipient: null,
+      error: null,
+      IBCDenom: {},
+      paths: {},
+      destination: {},
+      channels: [],
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    destinationOptions() {
+      if (!this.token && this.token === '') return []
+      const options = this.channels.map(x => ({ port_id: x.port_id, channel_id: x.channel_id, label: `${x.chain_id ? x.chain_id : ''} ${x.port_id}/${x.channel_id}` }))
+      if (this.token.startsWith('ibc/')) {
+        const query = this.paths[this.token]
+        return query ? options.filter(x => x.channel_id === query.channel_id) : options
+      }
+      return options
+    },
+
+    msg() {
+      const timeout = dayjs().add(4, 'hour')
+      return [
+        {
+          typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
+          value: {
+            sourcePort: this.destination.port_id,
+            sourceChannel: this.destination.channel_id,
+            token: coin(Number(getUnitAmount(this.amount, this.token)), this.token),
+            sender: this.address,
+            receiver: this.recipient,
+            timeoutTimestamp: String(timeout.utc().valueOf() * 1000000),
+          },
+        },
+      ]
+    },
+    balanceOptions() {
+      return this.setupBalance()
+    },
+    selectedChain() {
+      return this.$store.state.chains.selected
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'IBC Transfer Tokens',
+      historyName: 'transfer',
+    })
+    this.setActionName()
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      this.destination = null
+      this.channels = []
+      this.token = ''
+      this.targetChainId = ''
+      if (this.address) {
+        this.$http.getAllIBCDenoms(this.selectedChain).then(x => {
+          x.denom_traces.forEach(trace => {
+            const hash = toHex(sha256(new TextEncoder().encode(`${trace.path}/${trace.base_denom}`)))
+            const ibcDenom = `ibc/${hash.toUpperCase()}`
+            // add base_denom to cache
+            this.$set(this.IBCDenom, ibcDenom, trace.base_denom)
+            // store channel/part for ibc denoms
+            const path = trace.path.split('/')
+            if (path.length >= 2) {
+              this.paths[ibcDenom] = {
+                channel_id: path[path.length - 1],
+                port_id: path[path.length - 2],
+              }
+            }
+          })
+        })
+
+        this.$http.getIBCChannels(this.selectedChain, null).then(ret => {
+          const chans = ret.channels.filter(x => x.state === 'STATE_OPEN').map(x => ({ channel_id: x.channel_id, port_id: x.port_id }))
+          this.$set(this, 'channels', chans)
+        })
+      }
+    },
+    setupBalance() {
+      if (this.balance && this.balance.length > 0) {
+        this.token = this.balance[0].denom
+        return this.balance
+      }
+      return []
+    },
+    tokenChange() {
+      // eslint-disable-next-line prefer-destructuring
+      this.destination = this.destinationOptions[0]
+      this.recipient = null
+      this.setActionName()
+      this.onChannelChange()
+    },
+
+    setActionName() {
+      this.$emit('update', {
+        actionName: this.token.startsWith('ibc') ? 'Withdraw' : 'Deposit',
+      })
+    },
+
+    format(v) {
+      return formatToken(v, this.IBCDenom)
+    },
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    },
+    onChannelChange() {
+      this.$http.getIBCChannelClientState(this.destination.channel_id, this.destination.port_id, this.selectedChain).then(cs => {
+        this.targetChainId = cs.identified_client_state.client_state.chain_id
+      })
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/components/OperationModal/components/Vote.vue b/src/views/components/OperationModal/components/Vote.vue
new file mode 100644
index 00000000..2f45c0af
--- /dev/null
+++ b/src/views/components/OperationModal/components/Vote.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <h4>{{ proposalId }}. {{ proposalTitle }}</h4>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Voter"
+          label-for="Account"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Voter"
+          >
+            <b-form-select
+              v-model="voter"
+              :options="accounts"
+              text-field="label"
+              placeholder="Select an address"
+              @change="onChange"
+            />
+            <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>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Option"
+          label-for="option"
+        >
+          <div class="demo-inline-spacing">
+
+            <b-form-radio
+              v-model="option"
+              name="option"
+              value="1"
+              class="custom-control-success"
+            >
+              Yes
+            </b-form-radio>
+            <b-form-radio
+              v-model="option"
+              name="option"
+              value="3"
+              class="custom-control-warning"
+            >
+              No
+            </b-form-radio>
+            <b-form-radio
+              v-model="option"
+              name="option"
+              value="4"
+              class="custom-control-danger"
+            >
+              No With Veto
+            </b-form-radio>
+            <b-form-radio
+              v-model="option"
+              name="option"
+              value="2"
+              class="custom-control-secondary"
+            >
+              Abstain
+            </b-form-radio>
+          </div>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BFormGroup, BFormSelect,
+  BFormRadio,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  abbrAddress,
+  formatToken, getLocalAccounts,
+} from '@/libs/utils'
+
+export default {
+  name: 'VoteDialogue',
+  components: {
+    BRow,
+    BCol,
+    BFormGroup,
+    BFormSelect,
+    BFormRadio,
+    ValidationProvider,
+  },
+  props: {
+    proposalId: {
+      type: Number,
+      required: true,
+    },
+    proposalTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      accounts: [],
+      voter: null,
+      option: null,
+      balance: [],
+      feeDenom: '',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      return [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgVote',
+        value: {
+          voter: this.voter,
+          proposalId: this.proposalId,
+          option: Number(this.option),
+        },
+      }]
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Vote',
+      historyName: 'vote',
+    })
+    this.loadData()
+  },
+  methods: {
+    computeAccount() {
+      let array = []
+      const accounts = getLocalAccounts()
+      if (accounts) {
+        const values = Object.values(accounts)
+        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)) })))
+          }
+        }
+      }
+      return array
+    },
+    onChange() {
+      if (this.voter) {
+        this.$http.getBankBalances(this.voter).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res.reverse()
+            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+            if (token) this.feeDenom = token.denom
+          }
+        })
+      }
+    },
+    loadData() {
+      this.accounts = this.computeAccount()
+      // eslint-disable-next-line prefer-destructuring
+      if (this.accounts && this.accounts.length > 0) this.voter = this.accounts[0].value
+      this.onChange()
+    },
+    format(v) {
+      return formatToken(v)
+    },
+
+  },
+}
+</script>
+
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/components/OperationModal/components/Withdraw.vue b/src/views/components/OperationModal/components/Withdraw.vue
index 666d3bea..5fd99991 100644
--- a/src/views/components/OperationModal/components/Withdraw.vue
+++ b/src/views/components/OperationModal/components/Withdraw.vue
@@ -44,7 +44,6 @@ export default {
   data() {
     return {
       account: [],
-      selectedChain: '',
       balance: [],
       delegations: [],
       feeDenom: '',
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index 22d5ef1c..ef276136 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -4,7 +4,7 @@
     centered
     size="md"
     :title="modalTitle"
-    ok-title="Send"
+    :ok-title="actionName"
     hide-header-close
     scrollable
     :ok-disabled="isOwner"
@@ -43,6 +43,8 @@
             :address="address"
             :validator-address="validatorAddress"
             :balance="balance"
+            :proposal-id="proposalId"
+            :proposal-title="proposalTitle"
             @update="componentUpdate"
           />
           <b-row>
@@ -156,6 +158,8 @@ import Redelegate from './components/Redelegate.vue'
 import Withdraw from './components/Withdraw.vue'
 import Unbond from './components/Unbond.vue'
 import Transfer from './components/Transfer.vue'
+import IBCTransfer from './components/IBCTransfer.vue'
+import Vote from './components/Vote.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -186,6 +190,8 @@ export default {
     Withdraw,
     Unbond,
     Transfer,
+    IBCTransfer,
+    Vote,
   },
   directives: {
     Ripple,
@@ -203,6 +209,14 @@ export default {
       type: String,
       default: null,
     },
+    proposalId: {
+      type: Number,
+      default: null,
+    },
+    proposalTitle: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -225,6 +239,7 @@ export default {
       gas: '200000',
       memo: '',
       blockingMsg: 'No available account found.',
+      actionName: 'Send',
 
       required,
       password,
@@ -247,8 +262,14 @@ export default {
     isOwner() {
       const accounts = getLocalAccounts()
       const selectedWallet = this.$store.state.chains.defaultWallet
+      if (!this.address) {
+        const chain = this.$store.state.chains.selected.chain_name
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.selectedAddress = accounts[selectedWallet].address.find(x => x.chain === chain)
+      }
+
       if (accounts && accounts[selectedWallet]) {
-        if (accounts[selectedWallet].address.findIndex(x => x.addr === this.address) > -1) {
+        if (accounts[selectedWallet].address.findIndex(x => x.addr === this.selectedAddress) > -1) {
           return false
         }
       }

From ae9bf25abf2a9abd73a77b67d0c9672eb82c66ec Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 31 Mar 2022 23:39:47 +0800
Subject: [PATCH 09/14] select the default address

---
 src/views/components/OperationModal/index.vue | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index ef276136..af0b1af0 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -222,7 +222,6 @@ export default {
     return {
       modalTitle: '',
       historyName: '',
-      selectedAddress: this.address,
       selectedValidator: null,
       selectedChain: null,
       token: '',
@@ -238,7 +237,7 @@ export default {
       wallet: 'ledgerUSB',
       gas: '200000',
       memo: '',
-      blockingMsg: 'No available account found.',
+      blockingMsg: this.address ? 'You are not the owner' : 'No available account found.',
       actionName: 'Send',
 
       required,
@@ -259,22 +258,27 @@ export default {
       if (!this.balance) return []
       return this.balance.filter(item => !item.denom.startsWith('ibc'))
     },
-    isOwner() {
+    accounts() {
       const accounts = getLocalAccounts()
       const selectedWallet = this.$store.state.chains.defaultWallet
-      if (!this.address) {
-        const chain = this.$store.state.chains.selected.chain_name
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.selectedAddress = accounts[selectedWallet].address.find(x => x.chain === chain)
-      }
-
-      if (accounts && accounts[selectedWallet]) {
-        if (accounts[selectedWallet].address.findIndex(x => x.addr === this.selectedAddress) > -1) {
+      return accounts[selectedWallet]
+    },
+    isOwner() {
+      if (this.accounts) {
+        if (this.accounts.address.findIndex(x => x.addr === this.selectedAddress) > -1) {
           return false
         }
       }
       return true
     },
+    selectedAddress() {
+      if (this.address) {
+        return this.address
+      }
+      const chain = this.$store.state.chains.selected.chain_name
+      const selectedAddress = this.accounts.address.find(x => x.chain === chain)
+      return selectedAddress?.addr
+    },
   },
   methods: {
     initialize() {

From 7c93f6f7c794f55304efd3b93a1aae8c4f5724b6 Mon Sep 17 00:00:00 2001
From: donne1226 <503124742@qq.com>
Date: Fri, 1 Apr 2022 23:28:42 +0800
Subject: [PATCH 10/14] fix all

---
 src/views/Governance.vue                      |   9 +
 src/views/StakingRewardComponent.vue          |  17 +-
 .../OperationModal/components/GovDeposit.vue  | 194 ++++++++++++++++++
 .../OperationModal/components/IBCTransfer.vue |   1 -
 .../OperationModal/components/Unbond.vue      |   1 -
 .../OperationModal/components/Vote.vue        | 136 +++++-------
 .../OperationModal/components/Withdraw.vue    |  16 --
 .../components/WithdrawCommission.vue         |  84 ++++++++
 src/views/components/OperationModal/index.vue |   6 +-
 9 files changed, 362 insertions(+), 102 deletions(-)
 create mode 100644 src/views/components/OperationModal/components/GovDeposit.vue
 create mode 100644 src/views/components/OperationModal/components/WithdrawCommission.vue

diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 7e7d3c25..b51d339f 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -164,6 +164,15 @@
             >
               {{ $t('btn_deposit') }}
             </b-button>
+            <b-button
+              v-if="p.status===1"
+              v-b-modal.operation-modal
+              variant="primary"
+              class="btn float-right mg-2"
+              @click="selectProposal('GovDeposit',p.id, p.title)"
+            >
+              {{ $t('btn_deposit') }}1
+            </b-button>
             <b-button
               v-if="p.status===2"
               v-b-modal.vote-window
diff --git a/src/views/StakingRewardComponent.vue b/src/views/StakingRewardComponent.vue
index 6ac11107..2dbdea30 100644
--- a/src/views/StakingRewardComponent.vue
+++ b/src/views/StakingRewardComponent.vue
@@ -6,7 +6,7 @@
     <b-card-header>
       <b-card-title>Outstanding Rewards</b-card-title>
       <feather-icon
-        v-b-modal.withdraw-commission-window
+        v-b-modal.operation-modal
         icon="MoreVerticalIcon"
         size="18"
         class="cursor-pointer"
@@ -83,11 +83,24 @@
       >
         Withdraw Commission
       </b-button>
+      <b-button
+        v-b-modal.operation-modal
+        block
+        size="sm"
+        variant="primary"
+      >
+        Withdraw Commission1
+      </b-button>
     </b-card-body>
     <operation-withdraw-commission-component
       :validator-address="validator"
       :address="address"
     />
+    <operation-modal
+      type="WithdrawCommission"
+      :address="address"
+      :validator-address="validator"
+    />
   </b-card>
 </template>
 
@@ -98,6 +111,7 @@ import {
 import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import { formatToken, numberWithCommas } from '@/libs/utils'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
@@ -112,6 +126,7 @@ export default {
     BMediaAside,
     BAvatar,
     OperationWithdrawCommissionComponent,
+    OperationModal,
   },
   props: {
     data: {
diff --git a/src/views/components/OperationModal/components/GovDeposit.vue b/src/views/components/OperationModal/components/GovDeposit.vue
new file mode 100644
index 00000000..8bdf23eb
--- /dev/null
+++ b/src/views/components/OperationModal/components/GovDeposit.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <h4>{{ proposalId }}. {{ proposalTitle }}</h4>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Depositor"
+          label-for="Voter"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Voter"
+          >
+            <b-form-input
+              v-model="address"
+              readonly
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Available Token"
+          label-for="Token"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Token"
+          >
+            <b-form-select
+              v-model="token"
+            >
+              <b-form-select-option
+                v-for="item in balanceOptions"
+                :key="item.denom"
+                :value="item.denom"
+              >
+                {{ format(item) }}
+              </b-form-select-option>
+            </b-form-select>
+            <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"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <b-input-group class="mb-25">
+              <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>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect,
+  BInputGroupAppend, BFormSelectOption,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+
+export default {
+  name: 'DepositDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BInputGroupAppend,
+    BFormSelectOption,
+    ValidationProvider,
+  },
+  props: {
+    proposalId: {
+      type: Number,
+      required: true,
+    },
+    proposalTitle: {
+      type: String,
+      required: true,
+    },
+    balance: {
+      type: Array,
+      default: () => [],
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      token: null,
+      amount: '',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      return [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgDeposit',
+        value: {
+          depositor: this.address,
+          proposalId: String(this.proposalId),
+          amount: [
+            {
+              amount: getUnitAmount(this.amount, this.token),
+              denom: this.token,
+            },
+          ],
+        },
+      }]
+    },
+    balanceOptions() {
+      return this.setupBalance()
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Deposit',
+      historyName: 'deposit',
+    })
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    format(v) {
+      return formatToken(v)
+    },
+    setupBalance() {
+      if (this.balance && this.balance.length > 0) {
+        this.token = this.balance[0].denom
+        return this.balance
+      }
+      return []
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/components/OperationModal/components/IBCTransfer.vue b/src/views/components/OperationModal/components/IBCTransfer.vue
index 2bdbe433..99b5d4ea 100644
--- a/src/views/components/OperationModal/components/IBCTransfer.vue
+++ b/src/views/components/OperationModal/components/IBCTransfer.vue
@@ -177,7 +177,6 @@ export default {
       token: '',
       amount: null,
       recipient: null,
-      error: null,
       IBCDenom: {},
       paths: {},
       destination: {},
diff --git a/src/views/components/OperationModal/components/Unbond.vue b/src/views/components/OperationModal/components/Unbond.vue
index bf00902d..2882a100 100644
--- a/src/views/components/OperationModal/components/Unbond.vue
+++ b/src/views/components/OperationModal/components/Unbond.vue
@@ -119,7 +119,6 @@ export default {
   data() {
     return {
       validators: [],
-      selectedValidator: this.validatorAddress,
       token: '',
       amount: null,
       delegations: [],
diff --git a/src/views/components/OperationModal/components/Vote.vue b/src/views/components/OperationModal/components/Vote.vue
index 2f45c0af..f25e0029 100644
--- a/src/views/components/OperationModal/components/Vote.vue
+++ b/src/views/components/OperationModal/components/Vote.vue
@@ -16,14 +16,11 @@
             rules="required"
             name="Voter"
           >
-            <b-form-select
-              v-model="voter"
-              :options="accounts"
-              text-field="label"
-              placeholder="Select an address"
-              @change="onChange"
+            <b-form-input
+              v-model="address"
+              readonly
             />
-            <small class="text-danger">{{ errors[0] }} <strong v-if="!accounts || accounts.length === 0">Please import an account first!</strong> </small>
+            <small class="text-danger">{{ errors[0] }}</small>
           </validation-provider>
         </b-form-group>
       </b-col>
@@ -34,41 +31,48 @@
           label="Option"
           label-for="option"
         >
-          <div class="demo-inline-spacing">
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="option"
+          >
+            <div class="demo-inline-spacing">
 
-            <b-form-radio
-              v-model="option"
-              name="option"
-              value="1"
-              class="custom-control-success"
-            >
-              Yes
-            </b-form-radio>
-            <b-form-radio
-              v-model="option"
-              name="option"
-              value="3"
-              class="custom-control-warning"
-            >
-              No
-            </b-form-radio>
-            <b-form-radio
-              v-model="option"
-              name="option"
-              value="4"
-              class="custom-control-danger"
-            >
-              No With Veto
-            </b-form-radio>
-            <b-form-radio
-              v-model="option"
-              name="option"
-              value="2"
-              class="custom-control-secondary"
-            >
-              Abstain
-            </b-form-radio>
-          </div>
+              <b-form-radio
+                v-model="option"
+                name="option"
+                value="1"
+                class="custom-control-success"
+              >
+                Yes
+              </b-form-radio>
+              <b-form-radio
+                v-model="option"
+                name="option"
+                value="3"
+                class="custom-control-warning"
+              >
+                No
+              </b-form-radio>
+              <b-form-radio
+                v-model="option"
+                name="option"
+                value="4"
+                class="custom-control-danger"
+              >
+                No With Veto
+              </b-form-radio>
+              <b-form-radio
+                v-model="option"
+                name="option"
+                value="2"
+                class="custom-control-secondary"
+              >
+                Abstain
+              </b-form-radio>
+            </div>
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
         </b-form-group>
       </b-col>
     </b-row>
@@ -78,15 +82,14 @@
 <script>
 import { ValidationProvider } from 'vee-validate'
 import {
-  BRow, BCol, BFormGroup, BFormSelect,
+  BRow, BCol, BFormGroup, BFormInput,
   BFormRadio,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress,
-  formatToken, getLocalAccounts,
+  formatToken,
 } from '@/libs/utils'
 
 export default {
@@ -95,9 +98,9 @@ export default {
     BRow,
     BCol,
     BFormGroup,
-    BFormSelect,
     BFormRadio,
     ValidationProvider,
+    BFormInput,
   },
   props: {
     proposalId: {
@@ -108,14 +111,14 @@ export default {
       type: String,
       required: true,
     },
+    address: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
-      accounts: [],
-      voter: null,
       option: null,
-      balance: [],
-      feeDenom: '',
 
       required,
       password,
@@ -135,7 +138,7 @@ export default {
       return [{
         typeUrl: '/cosmos.gov.v1beta1.MsgVote',
         value: {
-          voter: this.voter,
+          voter: this.address,
           proposalId: this.proposalId,
           option: Number(this.option),
         },
@@ -147,40 +150,9 @@ export default {
       modalTitle: 'Vote',
       historyName: 'vote',
     })
-    this.loadData()
   },
   methods: {
-    computeAccount() {
-      let array = []
-      const accounts = getLocalAccounts()
-      if (accounts) {
-        const values = Object.values(accounts)
-        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)) })))
-          }
-        }
-      }
-      return array
-    },
-    onChange() {
-      if (this.voter) {
-        this.$http.getBankBalances(this.voter).then(res => {
-          if (res && res.length > 0) {
-            this.balance = res.reverse()
-            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
-            if (token) this.feeDenom = token.denom
-          }
-        })
-      }
-    },
-    loadData() {
-      this.accounts = this.computeAccount()
-      // eslint-disable-next-line prefer-destructuring
-      if (this.accounts && this.accounts.length > 0) this.voter = this.accounts[0].value
-      this.onChange()
-    },
+
     format(v) {
       return formatToken(v)
     },
diff --git a/src/views/components/OperationModal/components/Withdraw.vue b/src/views/components/OperationModal/components/Withdraw.vue
index 5fd99991..331748c5 100644
--- a/src/views/components/OperationModal/components/Withdraw.vue
+++ b/src/views/components/OperationModal/components/Withdraw.vue
@@ -22,9 +22,6 @@
 import {
   BRow, BCol, BInputGroup, BFormInput, BFormGroup,
 } from 'bootstrap-vue'
-import {
-  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
-} from '@validations'
 
 export default {
   name: 'WithdrawDialogue',
@@ -47,18 +44,6 @@ export default {
       balance: [],
       delegations: [],
       feeDenom: '',
-
-      required,
-      password,
-      email,
-      min,
-      integer,
-      url,
-      alpha,
-      between,
-      digits,
-      length,
-      alphaDash,
     }
   },
   computed: {
@@ -87,7 +72,6 @@ export default {
   methods: {
     loadData() {
       this.$http.getStakingDelegations(this.address).then(res => {
-        console.log(res)
         this.delegations = res.delegation_responses
       })
     },
diff --git a/src/views/components/OperationModal/components/WithdrawCommission.vue b/src/views/components/OperationModal/components/WithdrawCommission.vue
new file mode 100644
index 00000000..487a8a65
--- /dev/null
+++ b/src/views/components/OperationModal/components/WithdrawCommission.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Sender"
+          label-for="Account"
+        >
+          <b-input-group class="mb-25">
+            <b-form-input
+              :value="address"
+              readonly
+            />
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import {
+  BRow,
+  BCol,
+  BInputGroup,
+  BFormInput,
+  BFormGroup,
+} from 'bootstrap-vue'
+
+export default {
+  name: 'WithdrawCommissionDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+    validatorAddress: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    msg() {
+      return [
+        {
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+          value: {
+            delegatorAddress: this.address,
+            validatorAddress: this.validatorAddress,
+          },
+        },
+        {
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission',
+          value: {
+            validatorAddress: this.validatorAddress,
+          },
+        },
+      ]
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Withdraw Validator Commission',
+      historyName: 'withdraw',
+    })
+  },
+  methods: {
+
+  },
+}
+</script>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index af0b1af0..d1a28649 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -40,7 +40,7 @@
           <component
             :is="type"
             ref="component"
-            :address="address"
+            :address="selectedAddress"
             :validator-address="validatorAddress"
             :balance="balance"
             :proposal-id="proposalId"
@@ -160,6 +160,8 @@ import Unbond from './components/Unbond.vue'
 import Transfer from './components/Transfer.vue'
 import IBCTransfer from './components/IBCTransfer.vue'
 import Vote from './components/Vote.vue'
+import WithdrawCommission from './components/WithdrawCommission.vue'
+import GovDeposit from './components/GovDeposit.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -192,6 +194,8 @@ export default {
     Transfer,
     IBCTransfer,
     Vote,
+    WithdrawCommission,
+    GovDeposit,
   },
   directives: {
     Ripple,

From 20f787e1b8dcf41e6dc3ee9f46781bb7d6ef0a39 Mon Sep 17 00:00:00 2001
From: donne <503124742@qq.com>
Date: Sun, 3 Apr 2022 23:54:53 +0800
Subject: [PATCH 11/14] add transaction result

---
 .../OperationModal/TransactionResult.vue      | 153 ++++++++++++++++++
 src/views/components/OperationModal/index.vue |  29 +++-
 2 files changed, 179 insertions(+), 3 deletions(-)
 create mode 100644 src/views/components/OperationModal/TransactionResult.vue

diff --git a/src/views/components/OperationModal/TransactionResult.vue b/src/views/components/OperationModal/TransactionResult.vue
new file mode 100644
index 00000000..46a88a86
--- /dev/null
+++ b/src/views/components/OperationModal/TransactionResult.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div class="board">
+      <div
+        v-if="1"
+        class="data"
+      >
+        <div class="board-row">
+          <div class="key">
+            AMOUNT
+          </div>
+          <div class="value">
+            1,233,000 USDT
+          </div>
+        </div>
+        <div class="board-row">
+          <div class="key">
+            BRIDGE FEE
+          </div>
+          <div class="value">
+            3,000 USDT
+          </div>
+        </div>
+      </div>
+      <div class="sum">
+        <div class="key">
+          TRANSFER AMOUNT
+        </div>
+        <div class="value">
+          1,213,000 USDT
+        </div>
+      </div>
+    </div>
+
+    <p
+      v-if="1"
+      class="result-text"
+    >
+      Congratulations! Transfer completed successfully.
+    </p>
+
+    <div class="status">
+      <!-- <b-progress
+        :value="100"
+        :variant="progressColor"
+        :animated="isLoading"
+      /> -->
+      <b-progress :animated="isLoading">
+        <b-progress-bar
+          variant="success"
+          :value="progresBar[0]"
+        />
+        <b-progress-bar
+          variant="danger"
+          :value="progresBar[1]"
+        />
+        <b-progress-bar
+          variant="info"
+          :value="progresBar[2]"
+        />
+      </b-progress>
+      <div class="status-text">
+        <span>SUBMITED</span>
+        <span>COMPLETED</span>
+      </div>
+    </div>
+    <div class="link">
+      <router-link
+        to="/"
+      >
+        View on explorer
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BProgress, BProgressBar } from 'bootstrap-vue'
+
+export default {
+  components: {
+    BProgress,
+    BProgressBar,
+  },
+  data() {
+    return {
+      isLoading: true,
+    }
+  },
+  computed: {
+    progresBar() {
+      // success: [100, 0, 0]
+      // fail: [50, 50, 0]
+      // pending: [0, 0, 100]
+      return [0, 0, 100]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.board {
+  background: #f8f8f8;
+  border-radius: 8px;
+  padding: 0 12px;
+  margin: 35px 0;
+  .data {
+    padding: 10px 0;
+    border-bottom: 1px solid #607d8b;
+  }
+  .board-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+    line-height: 34px;
+    .key {
+      color: #666;
+    }
+    .value {
+      font-weight: bold;
+    }
+  }
+  .sum {
+    display: flex;
+    justify-content: space-between;
+    font-size: 18px;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+}
+.result-text {
+  text-align: center;
+  font-size: 16px;
+}
+.status {
+  margin-top: 30px;
+  .status-text {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    font-weight: 500;
+  }
+}
+.link {
+  margin-top: 20px;
+  text-align: center;
+  a {
+    text-decoration: underline;
+    color: var(--purple)
+  }
+
+}
+</style>
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index d1a28649..c195f7ce 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -5,8 +5,10 @@
     size="md"
     :title="modalTitle"
     :ok-title="actionName"
-    hide-header-close
     scrollable
+    :hide-header-close="!showResult"
+    :hide-footer="showResult"
+    modal-class="custom-transaction-modal"
     :ok-disabled="isOwner"
     @hidden="resetModal"
     @ok="handleOk"
@@ -35,7 +37,10 @@
           </b-button>
         </div>
       </template>
-      <validation-observer ref="simpleRules">
+      <validation-observer
+        v-if="!showResult"
+        ref="simpleRules"
+      >
         <b-form>
           <component
             :is="type"
@@ -130,8 +135,13 @@
             </b-col>
           </b-row>
         </b-form>
+        {{ error }}
       </validation-observer>
-      {{ error }}
+
+      <TransactionResult v-else />
+      <b-button @click="showResult = !showResult">
+        toggle
+      </b-button>
     </b-overlay>
   </b-modal>
 </template>
@@ -162,6 +172,7 @@ import IBCTransfer from './components/IBCTransfer.vue'
 import Vote from './components/Vote.vue'
 import WithdrawCommission from './components/WithdrawCommission.vue'
 import GovDeposit from './components/GovDeposit.vue'
+import TransactionResult from './TransactionResult.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -196,6 +207,7 @@ export default {
     Vote,
     WithdrawCommission,
     GovDeposit,
+    TransactionResult,
   },
   directives: {
     Ripple,
@@ -243,6 +255,7 @@ export default {
       memo: '',
       blockingMsg: this.address ? 'You are not the owner' : 'No available account found.',
       actionName: 'Send',
+      showResult: false,
 
       required,
       password,
@@ -402,4 +415,14 @@ export default {
 </script>
 <style lang="scss">
 @import '@core/scss/vue/libs/vue-select.scss';
+.custom-transaction-modal {
+  .modal-header {
+    .modal-title {
+      font-size: 24px;
+    }
+    .close {
+      margin: 0;
+    }
+  }
+}
 </style>

From 0993394e1ca0090311fd06a7246e7766f078ece9 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 4 Apr 2022 16:59:02 +0800
Subject: [PATCH 12/14] add timestamp

---
 src/libs/fetch.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index bc17ec8f..83457768 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -60,7 +60,7 @@ export default class ChainFetch {
     if (conf.chain_name === 'injective') {
       return ChainFetch.fetch('https://tm.injective.network', '/block').then(data => Block.create(commonProcess(data)))
     }
-    return this.get('/blocks/latest', config).then(data => Block.create(data))
+    return this.get(`/blocks/latest?${new Date().getTime()}`, config).then(data => Block.create(data))
   }
 
   async getBlockByHeight(height, config = null) {
@@ -386,6 +386,19 @@ export default class ChainFetch {
     return ChainFetch.fetchCoinMarketCap(`/quote/${symbol}`)
   }
 
+  // Simulate Execution of tx
+  async simulate(tx, config = null) {
+    return this.post('/cosmos/tx/v1beta1/simulate', tx, config).then(res => {
+      if (res.code && res.code !== 0) {
+        throw new Error(res.message)
+      }
+      if (res.tx_response && res.tx_response.code !== 0) {
+        throw new Error(res.tx_response.raw_log)
+      }
+      return res
+    })
+  }
+
   // Tx Submit
   async broadcastTx(bodyBytes, config = null) {
     const txString = toBase64(TxRaw.encode(bodyBytes).finish())

From 4864ccf37f1bdf3a3fa2485fd6a7efb64aa3c015 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 4 Apr 2022 16:59:23 +0800
Subject: [PATCH 13/14] update tx boxes

---
 src/views/Governance.vue                      | 22 +-----
 src/views/Staking.vue                         | 19 +----
 src/views/StakingRewardComponent.vue          | 10 +--
 src/views/WalletAccountDetail.vue             | 75 ++----------------
 .../OperationModal/TransactionResult.vue      | 76 ++++++++++++++++---
 src/views/components/OperationModal/index.vue | 65 ++++++++--------
 6 files changed, 108 insertions(+), 159 deletions(-)

diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index b51d339f..cc58556a 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -157,40 +157,22 @@
             </router-link>
             <b-button
               v-if="p.status===1"
-              v-b-modal.deposit-window
+              v-b-modal.operation-modal
               variant="primary"
               class="btn float-right mg-2"
               @click="selectProposal('GovDeposit',p.id, p.title)"
             >
               {{ $t('btn_deposit') }}
             </b-button>
-            <b-button
-              v-if="p.status===1"
-              v-b-modal.operation-modal
-              variant="primary"
-              class="btn float-right mg-2"
-              @click="selectProposal('GovDeposit',p.id, p.title)"
-            >
-              {{ $t('btn_deposit') }}1
-            </b-button>
             <b-button
               v-if="p.status===2"
-              v-b-modal.vote-window
+              v-b-modal.operation-modal
               variant="primary"
               class="btn float-right mg-2"
               @click="selectProposal('Vote',p.id, p.title)"
             >
               {{ $t('btn_vote') }}
             </b-button>
-            <b-button
-              v-if="p.status===2"
-              v-b-modal.operation-modal
-              variant="primary"
-              class="btn float-right mg-2"
-              @click="selectProposal('Vote',p.id, p.title)"
-            >
-              {{ $t('btn_vote') }}1
-            </b-button>
           </b-card-footer>
         </b-card>
       </b-col>
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index a644a2b6..257b899f 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -246,23 +246,6 @@ export default {
   },
   data() {
     return {
-      keys: [
-        'bitsongvaloper1jxv0u20scum4trha72c7ltfgfqef6nscl86wxa',
-        'akashvaloper1vgstlgtsx4w80gphwgre0fcvc04lcnaelukvll',
-        'certikvaloper1jxv0u20scum4trha72c7ltfgfqef6nsczkvcu7',
-        'cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu',
-        'iva16plp8cmfkjssp222taq6pv6mkm8c5pa9lcktta',
-        'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
-        'kavavaloper1xftqdxvq0xkv2mu8c5y0jrsc578tak4m9u0s44',
-        'kivaloper1jxv0u20scum4trha72c7ltfgfqef6nschqtan9',
-        'osmovaloper1jxv0u20scum4trha72c7ltfgfqef6nscqx0u46',
-        'persistencevaloper1jxv0u20scum4trha72c7ltfgfqef6nsc4zjpnj',
-        'starsvaloper1jxv0u20scum4trha72c7ltfgfqef6nscdghxyx',
-        'digvaloper1jxv0u20scum4trha72c7ltfgfqef6nsc4s577p',
-        'bcnavaloper1jxv0u20scum4trha72c7ltfgfqef6nsc384wxf',
-        'pbvaloper1jxv0u20scum4trha72c7ltfgfqef6nsc5nn6cf',
-        'rizonvaloper1jxv0u20scum4trha72c7ltfgfqef6nsczn2l68',
-      ],
       islive: true,
       validator_address: null,
       mintInflation: 0,
@@ -313,7 +296,7 @@ export default {
   },
   computed: {
     pingVals() {
-      return this.list.filter(x => this.keys.includes(x.operator_address))
+      return this.list.filter(x => x.description.identity === '6783E9F948541962')
     },
     list() {
       return this.validators.map(x => {
diff --git a/src/views/StakingRewardComponent.vue b/src/views/StakingRewardComponent.vue
index 2dbdea30..0d79d94f 100644
--- a/src/views/StakingRewardComponent.vue
+++ b/src/views/StakingRewardComponent.vue
@@ -75,21 +75,13 @@
       </div>
     </b-card-body>
     <b-card-body class="pt-0">
-      <b-button
-        v-b-modal.withdraw-commission-window
-        block
-        size="sm"
-        variant="primary"
-      >
-        Withdraw Commission
-      </b-button>
       <b-button
         v-b-modal.operation-modal
         block
         size="sm"
         variant="primary"
       >
-        Withdraw Commission1
+        Withdraw Commission
       </b-button>
     </b-card-body>
     <operation-withdraw-commission-component
diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index 321f4e24..dfef61fc 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -38,17 +38,6 @@
       <b-card-header class="pt-0 pl-0 pr-0">
         <b-card-title>Assets</b-card-title>
         <div>
-          <b-button
-            v-b-modal.transfer-window
-            variant="primary"
-            size="sm"
-            class="mr-25"
-          ><feather-icon
-             icon="SendIcon"
-             class="d-md-none"
-           />
-            <span class="d-none d-md-block">Transfer</span>
-          </b-button>
           <b-button
             v-b-modal.operation-modal
             variant="primary"
@@ -59,17 +48,7 @@
             <feather-icon
               icon="SendIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block">Transfer1</small>
-          </b-button>
-          <b-button
-            v-b-modal.ibc-transfer-window
-            variant="danger"
-            size="sm"
-          ><feather-icon
-             icon="SendIcon"
-             class="d-md-none"
-           />
-            <span class="d-none d-md-block">IBC Transfer</span>
+            /><small class="d-none d-md-block">Transfer</small>
           </b-button>
           <b-button
             v-b-modal.operation-modal
@@ -80,7 +59,7 @@
              icon="SendIcon"
              class="d-md-none"
            />
-            <span class="d-none d-md-block">IBC Transfer1</span>
+            <span class="d-none d-md-block">IBC Transfer</span>
           </b-button>
         </div>
       </b-card-header>
@@ -152,34 +131,12 @@
             size="sm"
             class="mr-25"
             @click="setOperationModalType('Delegate')"
-          >
-            <feather-icon
-              icon="LogInIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block">Delegate1</small>
-          </b-button>
-          <b-button
-            v-b-modal.delegate-window
-            variant="primary"
-            size="sm"
-            class="mr-25"
           >
             <feather-icon
               icon="LogInIcon"
               class="d-md-none"
             /><small class="d-none d-md-block">Delegate</small>
           </b-button>
-          <b-button
-            v-if="delegations"
-            v-b-modal.withdraw-window
-            variant="primary"
-            size="sm"
-          >
-            <feather-icon
-              icon="ShareIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block"> Withdraw Rewards</small>
-          </b-button>
           <b-button
             v-if="delegations"
             v-b-modal.operation-modal
@@ -190,7 +147,7 @@
             <feather-icon
               icon="ShareIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block"> Withdraw Rewards1</small>
+            /><small class="d-none d-md-block"> Withdraw Rewards</small>
           </b-button>
         </div>
       </b-card-header>
@@ -205,45 +162,27 @@
               size="sm"
             >
               <b-button
-                v-b-modal.delegate-window
+                v-b-modal.operation-modal
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
                 v-b-tooltip.hover.top="'Delegate'"
                 variant="outline-primary"
-                @click="selectValue(data.value)"
+                @click="selectValue(data.value,'Delegate')"
               >
                 <feather-icon icon="LogInIcon" />
               </b-button>
-              <b-button
-                v-b-modal.redelegate-window
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate'"
-                variant="outline-primary"
-                @click="selectValue(data.value)"
-              >
-                <feather-icon icon="ShuffleIcon" />
-              </b-button>
               <b-button
                 v-b-modal.operation-modal
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate1'"
+                v-b-tooltip.hover.top="'Redelegate'"
                 variant="outline-primary"
                 @click="selectValue(data.value,'Redelegate')"
               >
                 <feather-icon icon="ShuffleIcon" />
               </b-button>
-              <b-button
-                v-b-modal.unbond-window
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Unbond'"
-                variant="outline-primary"
-                @click="selectValue(data.value)"
-              >
-                <feather-icon icon="LogOutIcon" />
-              </b-button>
               <b-button
                 v-b-modal.operation-modal
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Unbond1'"
+                v-b-tooltip.hover.top="'Unbond'"
                 variant="outline-primary"
                 @click="selectValue(data.value,'Unbond')"
               >
diff --git a/src/views/components/OperationModal/TransactionResult.vue b/src/views/components/OperationModal/TransactionResult.vue
index 46a88a86..b3499815 100644
--- a/src/views/components/OperationModal/TransactionResult.vue
+++ b/src/views/components/OperationModal/TransactionResult.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="board">
-      <div
-        v-if="1"
-        class="data"
-      >
+    <div
+      v-if="false"
+      class="board "
+    >
+      <div class="data">
         <div class="board-row">
           <div class="key">
             AMOUNT
@@ -33,11 +33,23 @@
     </div>
 
     <p
-      v-if="1"
-      class="result-text"
+      v-if="succeed"
+      class="result-text mt-1 text-success"
     >
       Congratulations! Transfer completed successfully.
     </p>
+    <p
+      v-else-if="error"
+      class="result-text mt-1 text-danger"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-else
+      class="result-text mt-1 text-primary"
+    >
+      Processing...
+    </p>
 
     <div class="status">
       <!-- <b-progress
@@ -60,15 +72,16 @@
         />
       </b-progress>
       <div class="status-text">
-        <span>SUBMITED</span>
-        <span>COMPLETED</span>
+        <span v-if="hash">SUBMITED</span>
+        <span v-if="succeed">COMPLETED</span>
+        <span v-if="error">FAILED</span>
       </div>
     </div>
     <div class="link">
       <router-link
         to="/"
       >
-        View on explorer
+        View details
       </router-link>
     </div>
   </div>
@@ -82,9 +95,17 @@ export default {
     BProgress,
     BProgressBar,
   },
+  props: {
+    hash: {
+      type: String,
+      default: null,
+    },
+  },
   data() {
     return {
       isLoading: true,
+      succeed: false,
+      error: '',
     }
   },
   computed: {
@@ -92,7 +113,40 @@ export default {
       // success: [100, 0, 0]
       // fail: [50, 50, 0]
       // pending: [0, 0, 100]
-      return [0, 0, 100]
+      if (!this.hash) {
+        return [0, 0, 100]
+      }
+      if (this.succeed) {
+        return [100, 0, 0]
+      }
+      return [50, 0, 50]
+    },
+  },
+  mounted() {
+    this.timer = setInterval(this.trace, 6000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    trace() {
+      if (this.hash) {
+        this.error = null
+        this.$http.getTxs(this.hash).then(res => {
+          console.log('tx', res)
+          if (res.code === 0) {
+            this.succeed = true
+            clearInterval(this.timer)
+          } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded).
+            this.error = res.raw_log
+            console.log('error:', this.error)
+            clearInterval(this.timer)
+          }
+        }).catch(e => {
+          this.error = e
+          clearInterval(this.timer)
+        })
+      }
     },
   },
 }
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index c195f7ce..28805e26 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -53,7 +53,20 @@
             @update="componentUpdate"
           />
           <b-row>
-            <b-col>
+            <b-col cols="12">
+              <b-form-group>
+                <b-form-checkbox
+                  v-model="advance"
+                  name="advance"
+                  value="true"
+                >
+                  <small>Advanced</small>
+                </b-form-checkbox>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row v-if="advance">
+            <b-col cols="12">
               <b-form-group
                 label="Fee"
                 label-for="Fee"
@@ -78,19 +91,6 @@
                 </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>Advanced</small>
-                </b-form-checkbox>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row v-if="advance">
             <b-col cols="12">
               <b-form-group
                 label="Gas"
@@ -128,8 +128,7 @@
               </b-form-group>
             </b-col>
           </b-row>
-
-          <b-row>
+          <b-row v-if="advance">
             <b-col>
               <wallet-input-vue v-model="wallet" />
             </b-col>
@@ -138,10 +137,10 @@
         {{ error }}
       </validation-observer>
 
-      <TransactionResult v-else />
-      <b-button @click="showResult = !showResult">
-        toggle
-      </b-button>
+      <TransactionResult
+        v-else
+        :hash="txHash"
+      />
     </b-overlay>
   </b-modal>
 </template>
@@ -251,11 +250,12 @@ export default {
       fee: '900',
       feeDenom: '',
       wallet: 'ledgerUSB',
-      gas: '200000',
+      gas: '250000',
       memo: '',
       blockingMsg: this.address ? 'You are not the owner' : 'No available account found.',
       actionName: 'Send',
       showResult: false,
+      txHash: '',
 
       required,
       password,
@@ -282,6 +282,7 @@ export default {
     },
     isOwner() {
       if (this.accounts) {
+        this.updateWallet(this.accounts.device)
         if (this.accounts.address.findIndex(x => x.addr === this.selectedAddress) > -1) {
           return false
         }
@@ -323,10 +324,8 @@ export default {
       })
       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)
       Object.keys(obj).forEach(key => {
         this[key] = obj[key]
       })
@@ -345,10 +344,10 @@ export default {
     resetModal() {
       this.feeDenom = ''
       this.error = null
+      this.showResult = false
     },
     async sendTx() {
       const txMsgs = this.$refs.component.msg
-      console.log(txMsgs)
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
         return ''
@@ -383,22 +382,15 @@ export default {
         this.memo,
         signerData,
       ).then(bodyBytes => {
+        this.showResult = true
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+          this.txHash = res.tx_response.txhash
           setLocalTxHistory({
             chain: this.$store.state.chains.selected,
             op: this.historyName,
             hash: res.tx_response.txhash,
             time: new Date(),
           })
-          this.$bvModal.hide('operation-modal')
-          this.$toast({
-            component: ToastificationContent,
-            props: {
-              title: 'Transaction sent!',
-              icon: 'EditIcon',
-              variant: 'success',
-            },
-          })
         }).catch(e => {
           console.log(e)
           this.error = e
@@ -410,6 +402,13 @@ export default {
       })
       return ''
     },
+    updateWallet(v) {
+      console.log('device', v)
+      if (v && v !== 'address') {
+        this.wallet = v
+      }
+      this.wallet = 'keplr'
+    },
   },
 }
 </script>

From 0e062df351d9b6401930ff0261ff32efe29f4156 Mon Sep 17 00:00:00 2001
From: donne <503124742@qq.com>
Date: Mon, 4 Apr 2022 20:22:59 +0800
Subject: [PATCH 14/14] replace all operation modal

---
 src/@core/layouts/components/Coffee.vue       |  5 ---
 src/views/Governance.vue                      | 12 ------
 src/views/GovernanceProposalView.vue          | 29 +++++++------
 src/views/Staking.vue                         | 13 +++---
 src/views/StakingRewardComponent.vue          | 11 ++---
 src/views/StakingValidator.vue                | 11 +++--
 src/views/WalletAccountDetail.vue             | 27 ------------
 src/views/WalletAccounts.vue                  | 24 +++++------
 src/views/WalletDelegations.vue               | 42 +++++++------------
 .../OperationModal/TransactionResult.vue      |  1 +
 .../OperationModal/components/Delegate.vue    |  2 +-
 src/views/components/OperationModal/index.vue |  6 ++-
 12 files changed, 67 insertions(+), 116 deletions(-)

diff --git a/src/@core/layouts/components/Coffee.vue b/src/@core/layouts/components/Coffee.vue
index c03800f5..09835bb9 100644
--- a/src/@core/layouts/components/Coffee.vue
+++ b/src/@core/layouts/components/Coffee.vue
@@ -21,9 +21,6 @@
         </b-input-group>
       </b-col>
     </b-row>
-    <operation-transfer-component
-      :recipient-address.sync="selectedAddress"
-    />
   </div>
 </template>
 
@@ -36,7 +33,6 @@ import Ripple from 'vue-ripple-directive'
 import {
   addressEnCode, addressDecode,
 } from '@/libs/utils'
-import OperationTransferComponent from '@/views/OperationTransferComponent.vue'
 
 export default {
   name: 'AppFooter',
@@ -47,7 +43,6 @@ export default {
     BFormInput,
     BInputGroupPrepend,
     BInputGroup,
-    OperationTransferComponent,
   },
   directives: {
     Ripple,
diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index cc58556a..945b0c59 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -177,14 +177,6 @@
         </b-card>
       </b-col>
     </b-row>
-    <operation-vote-component
-      :proposal-id="selectedProposalId"
-      :title="selectedTitle"
-    />
-    <operation-gov-deposit-component
-      :proposal-id="selectedProposalId"
-      :title="selectedTitle"
-    />
     <operation-modal
       :type="operationModalType"
       :proposal-id="selectedProposalId"
@@ -202,8 +194,6 @@ import { Proposal } from '@/libs/data'
 import { percent, tokenFormatter } from '@/libs/utils'
 import dayjs from 'dayjs'
 import OperationModal from '@/views/components/OperationModal/index.vue'
-import OperationVoteComponent from './OperationVoteComponent.vue'
-import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
 
 export default {
   components: {
@@ -218,8 +208,6 @@ export default {
     BCardBody,
     BRow,
     BCol,
-    OperationVoteComponent,
-    OperationGovDepositComponent,
     OperationModal,
   },
   directives: {
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 47083020..bc66b81e 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -109,10 +109,11 @@
           </b-button>
         </router-link>
         <b-button
-          v-b-modal.vote-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=2"
           variant="primary"
           class="btn float-right mg-2"
+          @click="openModal('Vote')"
         >
           {{ $t('btn_vote') }}
         </b-button>
@@ -232,30 +233,29 @@
           </b-button>
         </router-link>
         <b-button
-          v-b-modal.deposit-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=1"
           variant="primary"
           class="btn float-right mg-2"
+          @click="openModal('GovDeposit')"
         >
           {{ $t('btn_deposit') }}
         </b-button>
         <b-button
-          v-b-modal.vote-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=2"
           variant="primary"
           class="btn float-right mg-2 mr-1"
+          @click="openModal('Vote')"
         >
           {{ $t('btn_vote') }}
         </b-button>
       </b-card-footer>
     </b-card>
-    <operation-vote-component
+    <operation-modal
+      :type="operationModalType"
       :proposal-id="Number(proposal.id)"
-      :title="proposal.title"
-    />
-    <operation-gov-deposit-component
-      :proposal-id="Number(proposal.id)"
-      :title="proposal.title"
+      :proposal-title="proposal.title"
     />
   </section>
 </template>
@@ -273,9 +273,9 @@ import {
 } from '@/libs/utils'
 import { Proposal, Proposer } from '@/libs/data'
 import dayjs from 'dayjs'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
-import OperationVoteComponent from './OperationVoteComponent.vue'
-import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
+
 // import { formatToken } from '@/libs/data/data'
 
 export default {
@@ -295,9 +295,8 @@ export default {
     BTooltip,
     BBadge,
     ObjectFieldComponent,
-    OperationVoteComponent,
-    OperationGovDepositComponent,
     FlipCountdown,
+    OperationModal,
   },
   data() {
     return {
@@ -307,6 +306,7 @@ export default {
       proposer: new Proposer(),
       deposits: [],
       votes: [],
+      operationModalType: '',
       votes_fields: [
         {
           key: 'voter',
@@ -411,6 +411,9 @@ export default {
     formatAddress(v) {
       return getStakingValidatorByAccount(this.$http.config.chain_name, v)
     },
+    openModal(type) {
+      this.operationModalType = type
+    },
   },
 }
 </script>
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index 257b899f..48da7904 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -78,7 +78,7 @@
         </template>
         <template #cell(operation)="data">
           <b-button
-            v-b-modal.delegate-window
+            v-b-modal.operation-modal
             :name="data.item.operator_address"
             variant="primary"
             size="sm"
@@ -186,7 +186,7 @@
           </template>
           <template #cell(operation)="data">
             <b-button
-              v-b-modal.delegate-window
+              v-b-modal.operation-modal
               :name="data.item.operator_address"
               variant="primary"
               size="sm"
@@ -210,7 +210,10 @@
         </small>
       </template>
     </b-card>
-    <operation-delegate-component :validator-address="validator_address" />
+    <operation-modal
+      type="Delegate"
+      :validator-address="validator_address"
+    />
   </div>
 </template>
 
@@ -222,9 +225,9 @@ import {
   percent, StakingParameters, formatToken,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 // import { toHex } from '@cosmjs/encoding'
 // import fetch from 'node-fetch'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
 
 export default {
   components: {
@@ -237,9 +240,9 @@ export default {
     BCardTitle,
     BCardBody,
     BButton,
-    OperationDelegateComponent,
     BFormRadioGroup,
     BFormGroup,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
diff --git a/src/views/StakingRewardComponent.vue b/src/views/StakingRewardComponent.vue
index 0d79d94f..e90bba72 100644
--- a/src/views/StakingRewardComponent.vue
+++ b/src/views/StakingRewardComponent.vue
@@ -6,7 +6,7 @@
     <b-card-header>
       <b-card-title>Outstanding Rewards</b-card-title>
       <feather-icon
-        v-b-modal.operation-modal
+        v-b-modal.WithdrawCommission
         icon="MoreVerticalIcon"
         size="18"
         class="cursor-pointer"
@@ -76,7 +76,7 @@
     </b-card-body>
     <b-card-body class="pt-0">
       <b-button
-        v-b-modal.operation-modal
+        v-b-modal.WithdrawCommission
         block
         size="sm"
         variant="primary"
@@ -84,12 +84,9 @@
         Withdraw Commission
       </b-button>
     </b-card-body>
-    <operation-withdraw-commission-component
-      :validator-address="validator"
-      :address="address"
-    />
     <operation-modal
       type="WithdrawCommission"
+      modal-id="WithdrawCommission"
       :address="address"
       :validator-address="validator"
     />
@@ -104,7 +101,6 @@ import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import { formatToken, numberWithCommas } from '@/libs/utils'
 import OperationModal from '@/views/components/OperationModal/index.vue'
-import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
   components: {
@@ -117,7 +113,6 @@ export default {
     BMedia,
     BMediaAside,
     BAvatar,
-    OperationWithdrawCommissionComponent,
     OperationModal,
   },
   props: {
diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue
index db29c7f7..fe08d8c6 100644
--- a/src/views/StakingValidator.vue
+++ b/src/views/StakingValidator.vue
@@ -25,7 +25,7 @@
               </div>
               <div class="d-flex flex-wrap">
                 <b-button
-                  v-b-modal.delegate-window
+                  v-b-modal.operation-modal
                   variant="primary"
                   class="mr-25 mb-25"
                 >
@@ -268,7 +268,10 @@
         </b-col>
       </b-row>
     </template>
-    <operation-delegate-component :validator-address="validator.operator_address" />
+    <operation-modal
+      type="Delegate"
+      :validator-address="validator.operator_address"
+    />
   </div>
 </template>
 
@@ -281,10 +284,10 @@ import {
   percent, formatToken, StakingParameters, Validator, operatorAddressToAccount, consensusPubkeyToHexAddress, toDay, abbrMessage, abbrAddress,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import StakingAddressComponent from './StakingAddressComponent.vue'
 import StakingCommissionComponent from './StakingCommissionComponent.vue'
 import StakingRewardComponent from './StakingRewardComponent.vue'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
 
 export default {
   components: {
@@ -300,7 +303,7 @@ export default {
     StakingAddressComponent,
     StakingCommissionComponent,
     StakingRewardComponent,
-    OperationDelegateComponent,
+    OperationModal,
   },
   directives: {
     'b-modal': VBModal,
diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index dfef61fc..dd39c2af 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -342,21 +342,6 @@
       <vue-qr :text="address" />
     </b-popover>
 
-    <operation-transfer-component :address="address" />
-    <operation-transfer-2-component :address="address" />
-    <operation-withdraw-component :address="address" />
-    <operation-unbond-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-delegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-redelegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
-    />
     <operation-modal
       :type="operationModalType"
       :address="address"
@@ -384,12 +369,6 @@ import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import OperationModal from '@/views/components/OperationModal/index.vue'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
-import OperationTransferComponent from './OperationTransferComponent.vue'
-import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
-import OperationUnbondComponent from './OperationUnbondComponent.vue'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
-import OperationRedelegateComponent from './OperationRedelegateComponent.vue'
-import OperationTransfer2Component from './OperationTransfer2Component.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
 
 export default {
@@ -415,12 +394,6 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
     ObjectFieldComponent,
-    OperationTransferComponent,
-    OperationWithdrawComponent,
-    OperationDelegateComponent,
-    OperationRedelegateComponent,
-    OperationUnbondComponent,
-    OperationTransfer2Component,
     ChartComponentDoughnut,
     OperationModal,
   },
diff --git a/src/views/WalletAccounts.vue b/src/views/WalletAccounts.vue
index c3977ada..8bd37b63 100644
--- a/src/views/WalletAccounts.vue
+++ b/src/views/WalletAccounts.vue
@@ -153,15 +153,15 @@
                   />
                   <b-dropdown-item
                     v-if="balances[acc.addr]"
-                    v-b-modal.transfer-window
-                    @click="transfer(acc.addr)"
+                    v-b-modal.operation-modal
+                    @click="transfer('Transfer',acc.addr)"
                   >
                     <feather-icon icon="SendIcon" /> Transfer
                   </b-dropdown-item>
                   <b-dropdown-item
                     v-if="balances[acc.addr]"
-                    v-b-modal.ibc-transfer-window
-                    @click="transfer(acc.addr)"
+                    v-b-modal.operation-modal
+                    @click="transfer('IBCTransfer',acc.addr)"
                   >
                     <feather-icon icon="SendIcon" /> IBC Transfer
                   </b-dropdown-item>
@@ -265,10 +265,10 @@
         Connect Wallet
       </b-card>
     </router-link>
-    <operation-transfer-component
-      :address.sync="selectedAddress"
+    <operation-modal
+      :type="operationModalType"
+      :address="selectedAddress"
     />
-    <operation-transfer-2-component :address="selectedAddress" />
   </div>
 </template>
 
@@ -287,8 +287,7 @@ import {
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import AppCollapse from '@core/components/app-collapse/AppCollapse.vue'
 import AppCollapseItem from '@core/components/app-collapse/AppCollapseItem.vue'
-import OperationTransferComponent from './OperationTransferComponent.vue'
-import OperationTransfer2Component from './OperationTransfer2Component.vue'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
 import EchartScatter from './components/charts/EchartScatter.vue'
 
@@ -309,14 +308,13 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     VBTooltip,
     FeatherIcon,
-    OperationTransferComponent,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
-    OperationTransfer2Component,
     ChartComponentDoughnut,
     AppCollapse,
     AppCollapseItem,
     EchartScatter,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -335,6 +333,7 @@ export default {
       delegations: {},
       ibcDenom: {},
       quotes: {},
+      operationModalType: '',
       options: {
         maintainAspectRatio: false,
         legend: {
@@ -533,7 +532,8 @@ export default {
       this.currency2 = c
       this.currency = getUserCurrencySign()
     },
-    transfer(addr) {
+    transfer(type, addr) {
+      this.operationModalType = type
       this.selectedAddress = addr
     },
     completeAdd() {
diff --git a/src/views/WalletDelegations.vue b/src/views/WalletDelegations.vue
index b2911619..f446ad33 100644
--- a/src/views/WalletDelegations.vue
+++ b/src/views/WalletDelegations.vue
@@ -42,29 +42,29 @@
             size="sm"
           >
             <b-button
-              v-b-modal.delegate-window
+              v-b-modal.operation-modal
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Delegate'"
               variant="outline-primary"
-              @click="selectValue(data.item)"
+              @click="selectValue('Delegate',data.item)"
             >
               <feather-icon icon="LogInIcon" />
             </b-button>
             <b-button
-              v-b-modal.redelegate-window
+              v-b-modal.operation-modal
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Redelegate'"
               variant="outline-primary"
-              @click="selectValue(data.item)"
+              @click="selectValue('Redelegate',data.item)"
             >
               <feather-icon icon="ShuffleIcon" />
             </b-button>
             <b-button
-              v-b-modal.unbond-window
+              v-b-modal.operation-modal
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Unbond'"
               variant="outline-primary"
-              @click="selectValue(data.item)"
+              @click="selectValue('Unbond',data.item)"
             >
               <feather-icon icon="LogOutIcon" />
             </b-button>
@@ -74,18 +74,10 @@
     </b-card>
 
     <!--- not completed--->
-    <operation-withdraw-component :address="address" />
-    <operation-unbond-component
+    <operation-modal
+      :type="operationModalType"
       :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-delegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-redelegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
+      :validator-address="selectedValidator"
     />
   </div>
 </template>
@@ -99,11 +91,7 @@ import {
   formatToken, getCachedValidators, getLocalAccounts, getLocalChains, tokenFormatter,
 } from '@/libs/utils'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
-
-import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
-import OperationUnbondComponent from './OperationUnbondComponent.vue'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
-import OperationRedelegateComponent from './OperationRedelegateComponent.vue'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 
 export default {
   components: {
@@ -113,11 +101,7 @@ export default {
     BTable,
     BCard,
     FeatherIcon,
-
-    OperationWithdrawComponent,
-    OperationDelegateComponent,
-    OperationRedelegateComponent,
-    OperationUnbondComponent,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -153,6 +137,7 @@ export default {
       accounts: [],
       delegations: [],
       rewards: {},
+      operationModalType: '',
     }
   },
   computed: {
@@ -200,7 +185,8 @@ export default {
     this.init()
   },
   methods: {
-    selectValue(v) {
+    selectValue(type, v) {
+      this.operationModalType = type
       this.address = v.delegator_address
       this.selectedValidator = v.validator.validator
       return v
diff --git a/src/views/components/OperationModal/TransactionResult.vue b/src/views/components/OperationModal/TransactionResult.vue
index b3499815..31fb8266 100644
--- a/src/views/components/OperationModal/TransactionResult.vue
+++ b/src/views/components/OperationModal/TransactionResult.vue
@@ -137,6 +137,7 @@ export default {
           if (res.code === 0) {
             this.succeed = true
             clearInterval(this.timer)
+            window.location.reload()
           } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded).
             this.error = res.raw_log
             console.log('error:', this.error)
diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index bc4138c2..f806d552 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -151,7 +151,7 @@ export default {
       availableAddress: [],
       validators: [],
       unbundValidators: [],
-      selectedValidator: null,
+      selectedValidator: this.validatorAddress,
       token: '',
       amount: null,
       selectedChain: '',
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index 28805e26..279d860a 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal
-    id="operation-modal"
+    :id="modalId"
     centered
     size="md"
     :title="modalTitle"
@@ -216,6 +216,10 @@ export default {
       type: String,
       default: '',
     },
+    modalId: {
+      type: String,
+      default: 'operation-modal',
+    },
     validatorAddress: {
       type: String,
       default: null,