重新梳理流程，更好集成交易所接口

src/libs/osmos.js

@@ -5,8 +5,45 @@
  * @LastEditors: dingyiming
  * @LastEditTime: 2021-11-23 11:19:51
  */
+import { sha256 } from '@cosmjs/crypto'
+import { toHex } from '@cosmjs/encoding'
 import fetch from 'node-fetch'
-import { getLocalChains } from './data/data'
+import { formatTokenDenom, getLocalChains } from './data/data'
+
+export const poolIds = {
+  1: true,
+  2: true,
+  3: true,
+  4: true,
+  5: true,
+  6: true,
+  7: true,
+  8: true,
+  9: true,
+  10: true,
+  13: true,
+  15: true,
+  461: true,
+  482: true,
+  497: true,
+  498: true,
+  548: true,
+  557: true,
+  558: true,
+  571: true,
+  572: true,
+}
+
+export function getPairName(pool, denomTrace, type = 'base') {
+  const index = type === 'base' ? 0 : 1
+  if (pool && pool.poolAssets) {
+    if (pool.poolAssets[index].token.denom.startsWith('ibc')) {
+      return formatTokenDenom(denomTrace[pool.poolAssets[index].token.denom].base_denom)
+    }
+    return formatTokenDenom(pool.poolAssets[index].token.denom)
+  }
+  return '-'
+}
 
 export default class OsmosAPI {
   constructor() {
@@ -76,7 +113,27 @@ export default class OsmosAPI {
 
   // Custom Module
   async getPools() {
-    return this.get('/osmosis/gamm/v1beta1/pools?pagination.limit=700')
+    const tradeable = []
+    Object.keys(poolIds).forEach(k => {
+      if (poolIds[k]) {
+        tradeable.push(k)
+      }
+    })
+    return this.get('/osmosis/gamm/v1beta1/pools?pagination.limit=700').then(res => {
+      const output = res.pools.filter(x => tradeable.includes(x.id))
+      return output
+    })
+  }
+
+  async getDenomTraces() {
+    return this.get('/ibc/applications/transfer/v1beta1/denom_traces?pagination.limit=300').then(x => {
+      const combined = {}
+      x.denom_traces.forEach(item => {
+        const k = 'ibc/'.concat(toHex(sha256(new TextEncoder('utf-8').encode(`${item.path}/${item.base_denom}`))).toUpperCase())
+        combined[k] = item
+      })
+      return combined
+    })
   }
 
   async getIncentivesPools() {

src/router/index.js

@@ -295,14 +295,18 @@ const router = new VueRouter({
     },
     // 2. OSMOSIS
     {
-      path: '/:chain/osmosis/trade/:base?/:target?',
+      path: '/:chain/osmosis/trade/:poolid?',
       name: 'osmosis-trade',
       component: () => import('@/views/OsmosisTrade.vue'),
       meta: {
-        pageTitle: 'Trade',
+        pageTitle: 'Classic Trade',
         breadcrumb: [
           {
-            text: 'Trade',
+            text: 'DEX',
+            active: true,
+          },
+          {
+            text: 'Classic Trade',
             active: true,
           },
         ],

src/views/OsmosisTrade.vue

@@ -36,9 +36,9 @@
 
                 <template #cell(pair)="data">
                   <router-link
-                    :to="`/osmosis/osmosis/trade/${data.item.pair}`"
+                    :to="`/osmosis/osmosis/trade/${data.item.id}`"
                   >
-                    {{ data.item.pair }}
+                    {{ data.item.pair[0] }} / {{ data.item.pair[1] }}
                   </router-link>
                 </template>
               </b-table>
@@ -70,8 +70,8 @@
       >
         <b-card>
           <Place
-            :base="base"
-            :target="target"
+            :pool.sync="current"
+            :denom-trace="denomTrace"
           />
         </b-card>
       </b-col>
@@ -83,6 +83,7 @@
 import {
   BRow, BCol, BCard, BButton, BPopover, BTable,
 } from 'bootstrap-vue'
+import { getPairName } from '@/libs/osmos'
 import Place from './components/KlineTrade/Place.vue'
 import Kline from './components/kline/index.vue'
 
@@ -100,19 +101,41 @@ export default {
   data() {
     return {
       show: false,
-      base: 'ATOM',
-      target: 'OSMO',
-      pairs: [
-        { pair: 'ATOM/OSMO' },
-        { pair: 'IRIS/OSMO' },
-        { pair: 'AKT/OSMO' },
-        { pair: 'ATOM/OSMO' },
-        { pair: 'ATOM/OSMO' },
-      ],
+      // pairs: [
+      //   { pair: 'ATOM/OSMO' },
+      //   { pair: 'IRIS/OSMO' },
+      //   { pair: 'AKT/OSMO' },
+      //   { pair: 'ATOM/OSMO' },
+      //   { pair: 'ATOM/OSMO' },
+      // ],
+      pools: [],
+      current: {},
+      denomTrace: [],
       klineData: [],
     }
   },
   computed: {
+    base() {
+      return getPairName(this.current, this.denomTrace, 'base')
+    },
+    target() {
+      return getPairName(this.current, this.denomTrace, 'target')
+    },
+    pairs() {
+      const pairs = this.pools.map(x => {
+        const x2 = {
+          id: x.id,
+          pair: x.poolAssets.map(t => {
+            if (t.token.denom.startsWith('ibc/')) {
+              return (this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ')
+            }
+            return t.token.denom
+          }),
+        }
+        return x2
+      })
+      return pairs
+    },
     latestPrice() {
       const p1 = this.$store.state.chains.quotes[this.base]
       const p2 = this.$store.state.chains.quotes[this.target]
@@ -131,22 +154,27 @@ export default {
     this.$http.osmosis.getOHCL4Pairs(
       this.$http.osmosis.getCoinGeckoId(base),
       this.$http.osmosis.getCoinGeckoId(target),
-    )
-      .then(data => {
-        this.klineData = data
-      })
+    ).then(data => {
+      this.klineData = data
+    })
+    this.$http.osmosis.getDenomTraces().then(x => {
+      this.denomTrace = x
+    })
+    this.$http.osmosis.getPools().then(x => {
+      this.pools = x
+      const id = this.$route.params.poolid || '1'
+      this.current = this.pools.find(p => p.id === id) || this.pools[0]
+    })
   },
   beforeRouteUpdate(to, from, next) {
-    const { base, target } = to.params
-    this.init(base, target)
-    console.log(base, target)
+    const { poolid } = to.params
+    this.init(poolid)
     next()
     // }
   },
   methods: {
-    init(base, target) {
-      this.base = base || 'ATOM'
-      this.target = target || 'OSMO'
+    init(poolid) {
+      this.current = this.pools.find(p => p.id === poolid) || this.pools[0]
     },
   },
 }

src/views/components/KlineTrade/Place.vue

@@ -18,8 +18,8 @@
     </b-tabs>
     <PlaceForm
       :type="tabIndex"
-      :base="base"
-      :target="target"
+      :pool.sync="pool"
+      :denom-trace="denomTrace"
     />
   </div>
 </template>
@@ -37,13 +37,13 @@ export default {
     PlaceForm,
   },
   props: {
-    base: {
-      type: String,
-      required: true,
+    pool: {
+      type: Object,
+      default: () => {},
     },
-    target: {
-      type: String,
-      required: true,
+    denomTrace: {
+      type: [Array, Object],
+      default: () => [],
     },
   },
   data: () => ({

src/views/components/KlineTrade/PlaceForm.vue

@@ -141,6 +141,7 @@ import {
 } from 'bootstrap-vue'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
 import { /* abbrAddress, */ formatTokenAmount, getLocalAccounts } from '@/libs/data'
+import { getPairName } from '@/libs/osmos'
 import DepositeWindow from './DepositeWindow.vue'
 
 export default {
@@ -160,13 +161,13 @@ export default {
       type: Number,
       required: true,
     },
-    base: {
-      type: String,
-      required: true,
+    pool: {
+      type: Object,
+      default: () => {},
     },
-    target: {
-      type: String,
-      required: true,
+    denomTrace: {
+      type: [Array, Object],
+      default: () => [],
     },
   },
   data() {
@@ -176,11 +177,18 @@ export default {
       total: 0,
       slippage: 0.05,
       marks: [0, 0.01, 0.025, 0.05],
-      baseAmount: 0,
-      targetAmount: 0,
+      balance: {},
+      // base: '',
+      // target: '',
     }
   },
   computed: {
+    base() {
+      return getPairName(this.pool, this.denomTrace, 'base')
+    },
+    target() {
+      return getPairName(this.pool, this.denomTrace, 'target')
+    },
     price() {
       const p1 = this.$store.state.chains.quotes[this.base]
       const p2 = this.$store.state.chains.quotes[this.target]
@@ -190,28 +198,25 @@ export default {
       return ''
     },
     available() {
-      const denom = this.$http.osmosis.getMinDenom(this.type === 0 ? this.base : this.target)
-      return formatTokenAmount(this.type === 0 ? this.targetAmount : this.baseAmount, 2, denom)
+      if (this.pool && this.pool.poolAssets) {
+        const mode = this.type === 1 ? 0 : 1
+        const { denom } = this.pool.poolAssets[mode].token
+        let amount = 0
+        this.balance.forEach(x => {
+          if (x.denom === denom) {
+            amount = x.amount
+          }
+        })
+        return formatTokenAmount(amount, 6, denom)
+      }
+      return 0
     },
   },
   created() {
     this.initialAddress()
-    console.log('address', this.address)
     this.$http.getBankBalances(this.address).then(res => {
-      console.log(res, this.base, this.target)
       if (res && res.length > 0) {
-        const baseHash = this.$http.osmosis.getIBCDenomHash(this.base)
-        const targetHash = this.$http.osmosis.getIBCDenomHash(this.target)
-        res.forEach(token => {
-          console.log('token:', token)
-          if (token.denom === baseHash) {
-            this.baseAmount = token.amount
-          }
-          if (token.denom === targetHash) {
-            this.targetAmount = token.amount
-          }
-        })
-        console.log(this.baseAmount, this.targetAmount)
+        this.balance = res
       }
     })
   },