Merge branch 're-implement-operation-modal' of https://github.com/donne1226/explorer into re-implement-operation-modal

src/views/Governance.vue

@@ -160,19 +160,37 @@
               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>
+            <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
               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 +203,11 @@
       :proposal-id="selectedProposalId"
       :title="selectedTitle"
     />
+    <operation-modal
+      :type="operationModalType"
+      :proposal-id="selectedProposalId"
+      :proposal-title="selectedTitle"
+    />
   </div>
 </template>
 
@@ -196,6 +219,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 +238,7 @@ export default {
     BCol,
     OperationVoteComponent,
     OperationGovDepositComponent,
+    OperationModal,
   },
   directives: {
     'b-modal': VBModal,
@@ -225,6 +250,7 @@ export default {
       selectedTitle: '',
       proposals: [new Proposal()],
       max: 1,
+      operationModalType: '',
     }
   },
   mounted() {
@@ -234,7 +260,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
     },

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: {

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"
@@ -57,8 +69,19 @@
              icon="SendIcon"
              class="d-md-none"
            />
-            <span class="d-none d-md-block">IBC Transfer
+            <span class="d-none d-md-block">IBC Transfer</span>
-            </span></b-button>
+          </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">

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: {

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>

src/views/components/OperationModal/components/IBCTransfer.vue

@@ -0,0 +1,307 @@
+<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,
+      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>

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>
@@ -147,13 +148,7 @@ export default {
       toValidator: null,
       token: '',
       amount: null,
-      balance: [],
       delegations: [],
-      feeDenom: '',
-      error: null,
-      sequence: 1,
-      accountNumber: 0,
-      account: [],
 
       required,
       password,
@@ -170,9 +165,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,27 +202,18 @@ export default {
       modalTitle: 'Redelegate Token',
       historyName: 'redelegate',
     })
-    this.loadBalance()
+    this.loadData()
   },
   methods: {
-    printDenom() {
+    loadData() {
-      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
@@ -233,7 +228,9 @@ export default {
     format(v) {
       return formatToken(v)
     },
-
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
   },
 }
 </script>

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>

src/views/components/OperationModal/components/Unbond.vue

@@ -105,7 +105,6 @@ export default {
     vSelect,
     BInputGroupAppend,
     ValidationProvider,
-
   },
   props: {
     validatorAddress: {
@@ -120,10 +119,8 @@ export default {
   data() {
     return {
       validators: [],
-      selectedValidator: this.validatorAddress,
       token: '',
       amount: null,
-      balance: [],
       delegations: [],
 
       required,
@@ -167,24 +164,16 @@ export default {
       modalTitle: 'Unbond Token',
       historyName: 'unbond',
     })
-    this.loadBalance()
+    this.loadData()
   },
 
   methods: {
-    printDenom() {
+    loadData() {
-      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 => {
@@ -197,7 +186,9 @@ export default {
         })
       })
     },
-
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
   },
 }
 </script>

src/views/components/OperationModal/components/Vote.vue

@@ -0,0 +1,166 @@
+<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-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="Option"
+          label-for="option"
+        >
+          <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>
+            <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, BFormGroup, BFormInput,
+  BFormRadio,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken,
+} from '@/libs/utils'
+
+export default {
+  name: 'VoteDialogue',
+  components: {
+    BRow,
+    BCol,
+    BFormGroup,
+    BFormRadio,
+    ValidationProvider,
+    BFormInput,
+  },
+  props: {
+    proposalId: {
+      type: Number,
+      required: true,
+    },
+    proposalTitle: {
+      type: String,
+      required: true,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      option: null,
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      return [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgVote',
+        value: {
+          voter: this.address,
+          proposalId: this.proposalId,
+          option: Number(this.option),
+        },
+      }]
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Vote',
+      historyName: 'vote',
+    })
+  },
+  methods: {
+
+    format(v) {
+      return formatToken(v)
+    },
+
+  },
+}
+</script>
+
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>

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,8 @@
 
 <script>
 import {
-  BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup,
+  BRow, BCol, BInputGroup, BFormInput, 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',
@@ -44,9 +29,7 @@ export default {
     BRow,
     BCol,
     BInputGroup,
-    BInputGroupPrepend,
     BFormInput,
-    BAvatar,
     BFormGroup,
   },
   props: {
@@ -58,22 +41,9 @@ export default {
   data() {
     return {
       account: [],
-      selectedChain: '',
       balance: [],
       delegations: [],
       feeDenom: '',
-
-      required,
-      password,
-      email,
-      min,
-      integer,
-      url,
-      alpha,
-      between,
-      digits,
-      length,
-      alphaDash,
     }
   },
   computed: {
@@ -96,45 +66,15 @@ export default {
       modalTitle: 'Withdraw Rewards',
       historyName: 'withdraw',
     })
-    this.loadBalance()
+    this.loadData()
   },
 
   methods: {
-    loadBalance() {
+    loadData() {
-      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>

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>

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"
@@ -40,9 +40,11 @@
           <component
             :is="type"
             ref="component"
-            :address="address"
+            :address="selectedAddress"
             :validator-address="validatorAddress"
             :balance="balance"
+            :proposal-id="proposalId"
+            :proposal-title="proposalTitle"
             @update="componentUpdate"
           />
           <b-row>
@@ -155,6 +157,11 @@ 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'
+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',
@@ -184,6 +191,11 @@ export default {
     Redelegate,
     Withdraw,
     Unbond,
+    Transfer,
+    IBCTransfer,
+    Vote,
+    WithdrawCommission,
+    GovDeposit,
   },
   directives: {
     Ripple,
@@ -201,12 +213,19 @@ export default {
       type: String,
       default: null,
     },
+    proposalId: {
+      type: Number,
+      default: null,
+    },
+    proposalTitle: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
       modalTitle: '',
       historyName: '',
-      selectedAddress: this.address,
       selectedValidator: null,
       selectedChain: null,
       token: '',
@@ -222,7 +241,8 @@ 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,
       password,
@@ -242,16 +262,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 (accounts && accounts[selectedWallet]) {
+      return accounts[selectedWallet]
-        if (accounts[selectedWallet].address.findIndex(x => x.addr === this.address) > -1) {
+    },
+    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() {