fix

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
     },

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">

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>

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>

src/views/components/OperationModal/components/Withdraw.vue

@@ -44,7 +44,6 @@ export default {
   data() {
     return {
       account: [],
-      selectedChain: '',
       balance: [],
       delegations: [],
       feeDenom: '',

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
         }
       }