add ibc transfer

src/libs/fetch.js

@@ -222,6 +222,11 @@ const chainAPI = class ChainFetch {
     return ret
   }
 
+  async getUrl(url) {
+    this.getSelectedConfig()
+    return fetch(url).then(res => res.json())
+  }
+
   static fetch(host, url) {
     const ret = fetch(host + url).then(response => response.json())
     return ret
@@ -267,13 +272,18 @@ const chainAPI = class ChainFetch {
     return this.get('/ibc/applications/transfer/v1beta1/denom_traces/'.concat(h), config).then(data => commonProcess(data))
   }
 
-  async getIBCChannels(key = null, config = null) {
+  async getIBCChannels(config = null, key = null) {
     if (key) {
       return this.get('/ibc/core/channel/v1beta1/channels?pagination.key='.concat(key), config).then(data => commonProcess(data))
     }
     return this.get('/ibc/core/channel/v1beta1/channels', config).then(data => commonProcess(data))
   }
-  // /cosmos/staking/v1beta1/delegations/{delegator_addr}
+
+  // eslint-disable-next-line camelcase
+  async getIBCChannelClientState(channel_id, port_id, config = null) {
+    // eslint-disable-next-line camelcase
+    return this.get(`/ibc/core/channel/v1beta1/channels/${channel_id}/ports/${port_id}/client_state`, config).then(data => commonProcess(data))
+  }
 
   static async getBankBalance(baseurl, address) {
     return ChainFetch.fetch(baseurl, '/bank/balances/'.concat(address)).then(data => commonProcess(data))

src/store/chains/index.js

@@ -47,6 +47,7 @@ export default {
     selected,
     avatars: {},
     height: 0,
+    ibcChannels: {},
   },
   getters: {
     getchains: state => state.chains,
@@ -65,6 +66,9 @@ export default {
     setHeight(state, height) {
       state.chains.height = height
     },
+    setChannels(state, { chain, channels }) {
+      state.chains.ibcChannels[chain] = channels
+    },
   },
   actions: {},
 }

src/views/GovernanceProposalView.vue

@@ -208,7 +208,7 @@
       <b-card-body>
         <b-table
           stacked="sm"
-          :items="deposits"
+          :items="deposits.deposits?deposits.deposits:deposits"
           :fields="deposit_fields"
           striped
         >

src/views/OperationTransfer2Component.vue

@@ -0,0 +1,530 @@
+<template>
+  <div>
+    <b-modal
+      id="ibc-transfer-window"
+      centered
+      size="md"
+      title="IBC Transfer Tokens"
+      ok-title="Send"
+      hide-header-close
+      scrollable
+      :ok-disabled="!address"
+      @hidden="resetModal"
+      @ok="handleOk"
+      @show="loadBalance"
+    >
+      <validation-observer ref="simpleRules">
+        <b-form>
+          <b-row>
+            <b-col v-if="account">
+              <b-form-group
+                label="Sender"
+                label-for="Account"
+              >
+                <b-input-group class="mb-25">
+                  <b-input-group-prepend is-text>
+                    <b-avatar
+                      :src="account.logo"
+                      size="18"
+                      variant="light-primary"
+                      rounded
+                    />
+                  </b-input-group-prepend>
+                  <b-form-input
+                    :value="account.addr"
+                    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"
+                  >
+                    <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"
+                label-for="destination"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  rules="required"
+                  name="destination"
+                >
+                  <b-input-group class="mb-25">
+                    <v-select
+                      v-model="destination"
+                      placeholder="Select a channel"
+                    />
+                  </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="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="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>Advance</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>
+              <b-form-group
+                label="Wallet"
+                label-for="wallet"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required"
+                  name="wallet"
+                >
+                  <b-form-radio-group
+                    v-model="wallet"
+                    stacked
+                    class="demo-inline-spacing"
+                  >
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="keplr"
+                      class="d-none d-md-block"
+                    >
+                      Keplr
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerUSB"
+                    >
+                      <small>Ledger(USB)</small>
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerBle"
+                      class="mr-0"
+                    >
+                      <small>Ledger(Bluetooth)</small>
+                    </b-form-radio>
+                  </b-form-radio-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+      {{ error }}
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import {
+  BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
+} from '@/libs/data'
+import { Cosmos } from '@cosmostation/cosmosjs'
+import vSelect from 'vue-select'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+
+export default {
+  name: 'TransforDialogue',
+  components: {
+    BModal,
+    BRow,
+    BCol,
+    BForm,
+    BInputGroup,
+    BInputGroupAppend,
+    BInputGroupPrepend,
+    BFormInput,
+    BAvatar,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    BFormRadioGroup,
+    BFormRadio,
+    BFormCheckbox,
+    vSelect,
+
+    ValidationProvider,
+    ValidationObserver,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      chainId: '',
+      selectedChain: '',
+      balance: [],
+      token: '',
+      amount: null,
+      memo: '',
+      recipient: null,
+      fee: '800',
+      feeDenom: '',
+      wallet: 'ledgerUSB',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+      account: [],
+      IBCDenom: {},
+      gas: '200000',
+      advance: false,
+      paths: {},
+      destination: {},
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    feeDenoms() {
+      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    },
+  },
+  created() {
+    // console.log('address: ', this.address)
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    },
+    computeAccount() {
+      const accounts = getLocalAccounts()
+      const chains = getLocalChains()
+      const values = Object.values(accounts)
+      for (let i = 0; i < values.length; i += 1) {
+        const addr = values[i].address.find(x => x.addr === this.address)
+        if (addr) {
+          this.selectedChain = chains[addr.chain]
+          return addr
+        }
+      }
+      return null
+    },
+    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, this.selectedChain).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res
+            this.token = this.balance[0].denom
+            this.feeDenom = this.balance.find(x => !x.denom.startsWith('ibc')).denom
+            this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
+              if (!this.IBCDenom[x.denom]) {
+                this.$http.getIBCDenomTrace(x.denom, this.selectedChain).then(denom => {
+                  this.IBCDenom[x.denom] = denom.denom_trace.base_denom
+                  // console.log(denom.denom_trace)
+                  const path = denom.denom_trace.path.split('/')
+                  this.paths[x.denom] = {
+                    channel: path[1],
+                    port: path[0],
+                  }
+                })
+              }
+            })
+          }
+        })
+        this.$http.getLatestBlock(this.selectedChain).then(ret => {
+          this.chainId = ret.block.header.chain_id
+          const notSynced = timeIn(ret.block.header.time, 10, 'm')
+          if (notSynced) {
+            this.error = 'Client is not synced or blockchain is halted'
+          } else {
+            this.error = null
+          }
+        })
+        this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
+          if (ret.value.base_vesting_account) {
+            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+            this.sequence = ret.value.base_vesting_account.base_account.sequence
+            if (!this.sequence) this.sequence = 0
+          } else {
+            this.accountNumber = ret.value.account_number
+            this.sequence = ret.value.sequence ? ret.value.sequence : 0
+          }
+        })
+
+        const channels = this.$store.state.chains.ibcChannels[this.selectedChain.chain_name]
+        if (!channels) {
+          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 }))
+            chans.forEach((x, i) => {
+              this.$http.getIBCChannelClientState(x.channel_id, x.port_id, this.selectedChain).then(cs => {
+                chans[i].chain_id = cs.identified_client_state.client_state.chain_id
+                // console.log(i, chans[i])
+              })
+            })
+          })
+        }
+      }
+    },
+    handleOk(bvModalEvt) {
+      // console.log('send')
+      // Prevent modal from closing
+      bvModalEvt.preventDefault()
+      // Trigger submit handler
+      // this.handleSubmit()
+      this.send().then(ret => {
+        // console.log(ret)
+        this.error = ret
+      })
+    },
+    resetModal() {
+      this.feeDenom = ''
+      this.error = null
+    },
+    format(v) {
+      return formatToken(v, this.IBCDenom)
+    },
+    async sendCosmos() {
+      const cosmos = new Cosmos(this.selectedChain.api, this.chainId)
+      cosmos.getAccounts()
+    },
+    async send() {
+      const txMsgs = [
+        {
+          typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
+          value: {
+            source_port: this.paths[this.token].port,
+            source_channel: this.paths[this.token].channel,
+            token: {
+              amount: String((Number(this.amount) * 1000000).toFixed()),
+              denom: this.token,
+            },
+            sender: this.address,
+            receiver: this.recipient,
+            // timeout_height: this.timeoutHeight ? { revision_height: '', revision_number: '' } : {},
+            // timeout_timestamp: null,
+          },
+        },
+      ]
+
+      // console.log(txMsgs)
+      if (this.token) 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.address,
+        txMsgs,
+        txFee,
+        this.memo,
+        signerData,
+      ).then(bodyBytes => {
+        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+          setLocalTxHistory({ op: 'send', hash: res.txhash, time: new Date() })
+          this.$bvModal.hide('ibc-transfer-window')
+          this.$toast({
+            component: ToastificationContent,
+            props: {
+              title: 'Transaction sent!',
+              icon: 'EditIcon',
+              variant: 'success',
+            },
+          })
+        }).catch(e => {
+          this.error = e
+        })
+      }).catch(e => {
+        this.error = e
+      })
+      // Send tokens
+      // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
+      // return
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>

src/views/OperationTransferComponent.vue

@@ -359,7 +359,7 @@ export default {
             this.feeDenom = this.balance.find(x => !x.denom.startsWith('ibc')).denom
             this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
               if (!this.IBCDenom[x.denom]) {
-                this.$http.getIBCDenomTrace(x.denom).then(denom => {
+                this.$http.getIBCDenomTrace(x.denom, this.selectedChain).then(denom => {
                   this.IBCDenom[x.denom] = denom.denom_trace.base_denom
                 })
               }

src/views/OperationWithdrawComponent.vue

@@ -178,7 +178,6 @@ import {
 import {
   formatToken, getLocalAccounts, getLocalChains, sign, timeIn, setLocalTxHistory,
 } from '@/libs/data'
-import chainAPI from '@/libs/fetch'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
 export default {
@@ -266,14 +265,14 @@ export default {
       this.account = this.computeAccount()
       if (this.account && this.account.length > 0) this.address = this.account[0].addr
       if (this.address) {
-        chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
+        this.$http.getBankBalances(this.address).then(res => {
           if (res && res.length > 0) {
             this.balance = res
             const token = this.balance.find(i => !i.denom.startsWith('ibc'))
             if (token) this.feeDenom = token.denom
           }
         })
-        this.$http.getLatestBlock(this.selectedChain).then(ret => {
+        this.$http.getLatestBlock().then(ret => {
           this.chainId = ret.block.header.chain_id
           const notSynced = timeIn(ret.block.header.time, 10, 'm')
           if (notSynced) {
@@ -282,7 +281,7 @@ export default {
             this.error = null
           }
         })
-        this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
+        this.$http.getAuthAccount(this.address).then(ret => {
           if (ret.value.base_vesting_account) {
             this.accountNumber = ret.value.base_vesting_account.base_account.account_number
             this.sequence = ret.value.base_vesting_account.base_account.sequence

src/views/WalletAccountDetail.vue

@@ -256,6 +256,10 @@
             <b-td> End Time </b-td><b-td> {{ formatTime(account.value.base_vesting_account.end_time) }}</b-td>
           </b-tr>
         </b-tbody>
+        <object-field-component
+          v-else
+          :tablefield="account.value?account.value:account"
+        />
       </b-table-simple>
     </b-card>
 
@@ -392,10 +396,10 @@ export default {
   },
   computed: {
     accountTitle() {
-      if (this.account) {
+      if (this.account && this.account.type) {
         return this.account.type.substring(this.account.type.indexOf('/') + 1)
       }
-      return ''
+      return 'Profile'
     },
     assetTable() {
       let total = []

src/views/WalletAccounts.vue

@@ -52,6 +52,13 @@
                   >
                     <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)"
+                  >
+                    <feather-icon icon="SendIcon" /> IBC Transfer
+                  </b-dropdown-item>
                   <b-dropdown-item
                     v-if="balances[acc.addr]"
                     :to="`/${acc.chain}/account/${acc.addr}`"
@@ -124,6 +131,7 @@
     <operation-transfer-component
       :address.sync="selectedAddress"
     />
+    <operation-transfer-2-component :address="selectedAddress" />
   </div>
 </template>
 
@@ -139,6 +147,7 @@ import {
 } from '@/libs/data'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
+import OperationTransfer2Component from './OperationTransfer2Component.vue'
 
 export default {
   components: {
@@ -157,6 +166,7 @@ export default {
     OperationTransferComponent,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
+    OperationTransfer2Component,
   },
   directives: {
     'b-modal': VBModal,