add deposit

src/libs/data/data.js

@@ -327,9 +327,12 @@ export function isTestnet() {
    || window.location.search.indexOf('testnet') > -1)
 }
 
-export function formatToken(token, IBCDenom = {}, decimals = 2) {
+export function formatToken(token, IBCDenom = {}, decimals = 2, withDenom = true) {
   if (token) {
-    return `${formatTokenAmount(token.amount, decimals, token.denom)} ${formatTokenDenom(IBCDenom[token.denom] || token.denom)}`
+    if (withDenom) {
+      return `${formatTokenAmount(token.amount, decimals, token.denom)} ${formatTokenDenom(IBCDenom[token.denom] || token.denom)}`
+    }
+    return formatTokenAmount(token.amount, decimals, token.denom)
   }
   return token
 }

src/libs/osmos.js

@@ -35,34 +35,46 @@ export const poolIds = {
 }
 
 export const CoinGeckoMap = {
-  ATOM: 'cosmos',
+  ATOM: ['cosmos'],
-  OSMO: 'osmosis',
+  OSMO: ['osmosis'],
-  IRIS: 'iris-network',
+  IRIS: ['iris-network'],
-  AKT: 'akash-network',
+  AKT: ['akash-network'],
-  LUNA: 'terra-luna',
+  LUNA: ['terra-luna'],
-  UST: 'terrausd',
+  UST: ['terrausd'],
-  KRT: 'terra-krw',
+  KRT: ['terra-krw'],
-  BAND: 'band-protocol',
+  BAND: ['band-protocol'],
-  CRO: 'crypto-com-chain',
+  CRO: ['crypto-com-chain'],
-  KAVA: 'kava',
+  KAVA: ['kava'],
-  OKT: 'okexchain',
+  OKT: ['okexchain'],
-  CTK: 'certik',
+  CTK: ['certik'],
-  XPRT: 'persistence',
+  XPRT: ['persistence'],
-  REGEN: 'regen',
+  REGEN: ['regen'],
-  SCRT: 'secret',
+  SCRT: ['secret'],
-  DVPN: 'sentinel',
+  DVPN: ['sentinel'],
-  ION: 'ion',
+  ION: ['ion'],
-  ROWAN: 'sifchain',
+  ROWAN: ['sifchain'],
-  IOV: 'starname',
+  IOV: ['starname'],
-  BTSG: 'bitsong',
+  BTSG: ['bitsong'],
-  NGM: 'e-money',
+  NGM: ['e-money'],
-  EEUR: 'e-money-eur',
+  EEUR: ['e-money-eur'],
-  LIKE: 'likecoin',
+  LIKE: ['likecoin'],
-  JUNO: 'juno-network',
+  JUNO: ['juno-network'],
-  STGZ: 'stargaze-protocol',
+  STGZ: ['stargaze-protocol'],
-  VDL: 'vidulum',
+  VDL: ['vidulum'],
-  XKI: 'ki',
+  XKI: ['ki'],
-  INJ: 'injective-protocol',
+  INJ: ['injective-protocol'],
+}
+
+export function getChainConfigForSymbol(symbol) {
+  const key = CoinGeckoMap[symbol]
+  if (key) {
+    const confs = getLocalChains()
+    return Object.values(confs).find(x => {
+      console.log(x.coingecko, key)
+      return x.coingecko === key[0]
+    })
+  }
+  return null
 }
 
 export function getPairName(pool, denomTrace, type = 'base', isFormat = true) {

src/views/components/KlineTrade/DepositeWindow.vue

@@ -4,14 +4,14 @@
       id="trading-deposte-window"
       centered
       size="md"
-      title="Deposit / Withdraw"
+      title="Cross Chain Deposit Tokens"
       ok-title="Send"
       hide-header-close
       scrollable
       :ok-disabled="!address"
       @hidden="resetModal"
       @ok="handleOk"
-      @show="loadBalance"
+      @show="init"
     >
       <template #modal-header="" />
       <validation-observer ref="simpleRules">
@@ -19,56 +19,54 @@
           <b-row>
             <b-col>
               <b-form-group
-                label="Sender"
+                label="Sender Address"
-                label-for="Account"
+                label-for="from"
               >
-                <b-input-group class="mb-25">
+                <validation-provider
-                  <b-input-group-prepend is-text>
+                  v-slot="{ errors }"
-                    <b-avatar
+                  rules="required"
-                      :src="account?account.logo:''"
+                  name="from"
-                      size="18"
+                >
-                      variant="light-primary"
+                  <b-input-group>
-                      rounded
+                    <b-input-group-prepend is-text>
+                      <b-avatar
+                        :src="selectedChain.logo"
+                        size="18"
+                        variant="light-primary"
+                        rounded
+                      />
+                    </b-input-group-prepend>
+                    <b-form-select
+                      id="from"
+                      v-model="address"
+                      :options="addressOptions"
+                      :state="errors.length > 0 ? false:null"
+                      @change="loadBalance()"
                     />
-                  </b-input-group-prepend>
+                  </b-input-group>
-                  <b-form-input
+                  <small class="text-danger">{{ errors[0] }}</small>
-                    :value="account?account.addr:address"
+                </validation-provider>
-                    readonly
-                  />
-                </b-input-group>
               </b-form-group>
             </b-col>
           </b-row>
-          <b-row>
+          <b-row class="d-none">
             <b-col>
               <b-form-group
-                label="Available Token"
+                label="Recipient Address"
-                label-for="Token"
+                label-for="Recipient"
               >
                 <validation-provider
                   #default="{ errors }"
                   rules="required"
-                  name="Token"
+                  name="recipient"
                 >
-                  <b-form-select
+                  <b-input-group class="mb-25">
-                    v-model="token"
+                    <b-form-input
-                    @change="tokenChange"
+                      id="Recipient"
-                  >
+                      v-model="recipient"
-                    <template #first>
+                      :state="errors.length > 0 ? false:null"
-                      <b-form-select-option
+                    />
-                        value=""
+                  </b-input-group>
-                      >
-                        -- 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>
@@ -76,10 +74,16 @@
           </b-row>
           <b-row>
             <b-col>
-              <b-form-group
+              <div class="d-flex justify-content-between">
-                label="Amount"
+                <span>Amount</span>
-                label-for="Amount"
+                <span>
-              >
+                  <small
+                    v-if="balance.amount > 0"
+                    class="mr-1"
+                  >Available: <b class="font-weight-bolder text-success">{{ format(balance) }}</b> {{ symbol }}</small>
+                </span>
+              </div>
+              <b-form-group>
                 <validation-provider
                   v-slot="{ errors }"
                   rules="required|regex:^([0-9\.]+)$"
@@ -94,7 +98,7 @@
                       type="number"
                     />
                     <b-input-group-append is-text>
-                      {{ printDenom() }}
+                      {{ symbol }}
                     </b-input-group-append>
                   </b-input-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -102,52 +106,6 @@
               </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"
-                >
-                  <v-select
-                    v-model="destination"
-                    name="destination"
-                    :options="destinationOptions"
-                    placeholder="Select a channel"
-                  />
-                  <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="placeholder"
-                    />
-                  </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
@@ -161,13 +119,8 @@
                 >
                   <b-input-group>
                     <b-form-input v-model="fee" />
-                    <b-input-group-append>
+                    <b-input-group-append is-text>
-                      <b-form-select
+                      {{ feeDenom }}
-                        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>
@@ -228,7 +181,7 @@
           <b-row>
             <b-col>
               <b-form-group
-                label="Wallet"
+                label="Siger"
                 label-for="wallet"
               >
                 <validation-provider
@@ -280,39 +233,35 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
-  BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
+  BAvatar, BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BInputGroupPrepend, BFormInput, BFormGroup, BFormSelect, BForm, BFormRadioGroup, BFormRadio, BFormCheckbox,
-  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, getUnitAmount, setLocalTxHistory, sign, timeIn,
+  formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, setLocalTxHistory, sign, timeIn,
 } from '@/libs/data'
-import { Cosmos } from '@cosmostation/cosmosjs'
-import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import { coin } from '@cosmjs/amino'
+import { getChainConfigForSymbol } from '@/libs/osmos'
 
 export default {
   name: 'TransforDialogue',
   components: {
+    BAvatar,
     BModal,
     BRow,
     BCol,
     BForm,
     BInputGroup,
     BInputGroupAppend,
-    BInputGroupPrepend,
     BFormInput,
-    BAvatar,
     BFormGroup,
     BFormSelect,
-    BFormSelectOption,
     BFormRadioGroup,
     BFormRadio,
     BFormCheckbox,
-    vSelect,
+    BInputGroupPrepend,
 
     ValidationProvider,
     ValidationObserver,
@@ -320,16 +269,22 @@ export default {
     ToastificationContent,
   },
   props: {
-    address: {
+    symbol: {
       type: String,
-      default: '',
+      default: () => '',
+    },
+    denomTrace: {
+      type: Object,
+      default: () => {},
     },
   },
   data() {
     return {
+      address: '', // from address for deposit / to address for withdraw
+      addressOptions: [],
       chainId: '',
       selectedChain: '',
-      balance: [],
+      balance: {},
       token: '',
       amount: null,
       memo: '',
@@ -361,72 +316,55 @@ export default {
       alphaDash,
     }
   },
-  computed: {
-    feeDenoms() {
-      return this.balance.filter(item => !item.denom.startsWith('ibc'))
-    },
-    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}` }))
-      const query = this.paths[this.token]
-      return query && String(this.token).startsWith('ibc/') ? options.filter(x => x.channel_id === query.channel_id) : options
-    },
-    placeholder() {
-      return 'Input a destination address'
-    },
-  },
-  created() {
-    // console.log('address: ', this.address)
-  },
   methods: {
-    tokenChange() {
+    recipientAddress() {
-      this.destination = null
+      const { chain } = this.$route.params
-      this.recipient = null
+      const accounts = getLocalAccounts()
-    },
+      const current = this.$store.state.chains.defaultWallet
-    printDenom() {
+      if (accounts && accounts[current]) {
-      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+        const acc = accounts[current].address.find(x => x.chain === chain)
+        if (acc) {
+          this.recipient = acc.addr
+        }
+      }
+      this.selectedChain = getChainConfigForSymbol(this.symbol)
+      console.log('selected chain: ', this.selectedChain)
     },
     computeAccount() {
+      this.recipientAddress()
       const accounts = getLocalAccounts()
-      const chains = getLocalChains()
+      this.addressOptions = []
       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)
+          const addr = values[i].address.find(x => x.chain === this.selectedChain.chain_name)
           if (addr) {
-            this.selectedChain = chains[addr.chain]
+            if (this.addressOptions.length === 0) this.address = addr.addr
-            return addr
+            this.addressOptions.push({ value: addr.addr, text: addr.addr })
           }
         }
       }
-      return null
+      return []
     },
-    loadBalance() {
+    init() {
       this.destination = null
       this.token = ''
-      this.account = this.computeAccount()
+      this.computeAccount()
-      if (this.account && this.account.length > 0) this.address = this.account[0].addr
+      this.loadBalance()
+      console.log('denom trace:', this.denomTrace)
+      if (this.denomTrace) {
+        const part = this.denomTrace.path.split('/')
+        this.destination = { sourcePort: part[0], sourceChannel: part[1] }
+        console.log(this.destination)
+      }
+    },
+    loadBalance() {
       if (this.address) {
         this.$http.getBankBalances(this.address, this.selectedChain).then(res => {
           if (res && res.length > 0) {
-            this.balance = res.reverse()
+            this.balance = res.find(x => formatTokenDenom(x.denom) === this.symbol)
-            // this.token = this.balance[0].denom
+            this.denom = this.balance.denom
-            this.feeDenom = this.balance.find(x => !x.denom.startsWith('ibc')).denom
+            this.feeDenom = this.balance.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('/')
-                  if (path.length >= 2) {
-                    this.paths[x.denom] = {
-                      channel_id: path[path.length - 1],
-                      port_id: path[path.length - 2],
-                    }
-                  }
-                })
-              }
-            })
           }
         })
         this.$http.getLatestBlock(this.selectedChain).then(ret => {
@@ -448,22 +386,6 @@ export default {
             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
-                this.$store.commit('setChannels', { chain: this.selectedChain.chain_name, channels: chans })
-                this.$set(this, 'channels', chans)
-              })
-            })
-          })
-        } else {
-          this.channels = channels
-        }
       }
     },
     handleOk(bvModalEvt) {
@@ -482,11 +404,7 @@ export default {
       this.error = null
     },
     format(v) {
-      return formatToken(v, this.IBCDenom)
+      return formatToken(v, {}, 6, false)
-    },
-    async sendCosmos() {
-      const cosmos = new Cosmos(this.selectedChain.api, this.chainId)
-      cosmos.getAccounts()
     },
     async send() {
       if (!this.destination) {
@@ -497,13 +415,13 @@ export default {
         {
           typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
           value: {
-            sourcePort: this.destination.port_id,
+            sourcePort: this.destination.sourcePort,
-            sourceChannel: this.destination.channel_id,
+            sourceChannel: 'channel-141', // this.destination.sourceChannel,
-            token: coin(Number(getUnitAmount(this.amount, this.token)), this.token),
+            token: coin(Number(getUnitAmount(this.amount, this.denomTrace.base_denom)), this.denomTrace.base_denom),
             sender: this.address,
             receiver: this.recipient,
             // timeoutHeight: undefined, // { revisionHeight: '0', revisionNumber: '0' },
-            timeoutTimestamp: String((Math.floor(Date.now() / 1000) + 60) * 1_000_000_000),
+            timeoutTimestamp: String((Math.floor(Date.now() / 1000) + 10) * 1_000_000_000),
           },
         },
       ]
@@ -524,6 +442,8 @@ export default {
         chainId: this.chainId,
       }
 
+      console.log(txMsgs, signerData, txFee)
+
       sign(
         this.wallet,
         this.chainId,

src/views/components/KlineTrade/PlaceForm.vue

@@ -202,7 +202,10 @@
       </div>
     </b-alert>
 
-    <deposite-window />
+    <deposite-window
+      :symbol="type === 0 ? target: base"
+      :denom-trace="denomTrace[currentDenom]"
+    />
 
   </div>
 </template>
@@ -283,23 +286,25 @@ export default {
       const p1 = this.$store.state.chains.quotes[this.target]
       return p1 && this.total > 0 ? (p1.usd * this.total).toFixed(2) : '-'
     },
-    computeAccounts() {
+    currentDenom() {
+      if (this.pool && this.pool.poolAssets) {
+        const mode = this.type === 1 ? 0 : 1
+        const { denom } = this.pool.poolAssets[mode].token
+        return denom
+      }
       return ''
     },
     available() {
       if (this.pool && this.pool.poolAssets) {
-        const mode = this.type === 1 ? 0 : 1
-        const { denom } = this.pool.poolAssets[mode].token
         let amount = 0
         if (Array.isArray(this.balance)) {
-          console.log('balance', this.balance)
           this.balance.forEach(x => {
-            if (x.denom === denom) {
+            if (x.denom === this.currentDenom) {
               amount = x.amount
             }
           })
         }
-        return formatTokenAmount(amount, 6, denom)
+        return formatTokenAmount(amount, 6, this.currentDenom)
       }
       return 0
     },
@@ -327,10 +332,11 @@ export default {
   },
   methods: {
     initialAddress() {
+      const { chain } = this.$route.params
       const accounts = getLocalAccounts()
       const current = this.$store.state.chains.defaultWallet
       if (accounts && accounts[current]) {
-        const acc = accounts[current].address.find(x => x.chain === 'osmosis')
+        const acc = accounts[current].address.find(x => x.chain === chain)
         if (acc) {
           this.address = acc.addr
         }