add price, pairs select

src/libs/osmos.js

@@ -14,11 +14,12 @@ export default class OsmosAPI {
 
   async getOHCL4Pairs(from, to) {
     this.exe_time = ''
-    const ohlc = await Promise.all(
+    return Promise.all(
       [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=7`).then(res => res.json()),
         fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=7`).then(res => res.json())],
-    )
+    ).then(ohlc => {
       const output = []
+      console.log(ohlc)
       ohlc[0].forEach((e, i) => {
         console.log(e, i, ohlc[1][i])
         const price = [e[0]]
@@ -27,8 +28,28 @@ export default class OsmosAPI {
         }
         output.push(price)
       })
-
       return output
+    })
+  }
+
+  getCoinGeckoId(symbol) {
+    this.pairs = {
+      ATOM: 'cosmos',
+      OSMO: 'osmosis',
+      IRIS: 'iris-network',
+      AKT: 'akash-network',
+    }
+    return this.pairs[symbol]
+  }
+
+  getIBCDenomHash(symbol) {
+    this.IBChash = {
+      ATOM: 'cosmos',
+      OSMO: 'uosmo',
+      IRIS: 'iris-network',
+      AKT: 'akash-network',
+    }
+    return this.IBChash[symbol]
   }
 
   // Custom Module

src/views/OsmosisTrade.vue

@@ -9,7 +9,6 @@
           <div class="d-flex justify-content-begin align-items-center mb-1">
             <b-button
               id="popover-button-3"
-              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               variant="flat-primary"
               class="mr-3"
               @click="show = !show"
@@ -45,11 +44,11 @@
               </b-table>
             </b-popover>
             <div class="mr-3">
-              59300
+              {{ latestPrice }}
             </div>
             <div class="mr-3">
               <small>24h Change</small>
-              <div>460 +0.78%</div>
+              <div>{{ changesIn24H }}%</div>
             </div>
             <div class="mr-3">
               <small>24h High</small>
@@ -68,7 +67,10 @@
         sm="12"
       >
         <b-card>
-          <Place />
+          <Place
+            :base="base"
+            :target="target"
+          />
         </b-card>
       </b-col>
     </b-row>
@@ -107,11 +109,23 @@ export default {
       ],
     }
   },
+  computed: {
+    latestPrice() {
+      const p1 = this.$store.state.chains.quotes[this.base]
+      const p2 = this.$store.state.chains.quotes[this.target]
+      return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
+    },
+    changesIn24H() {
+      const p1 = this.$store.state.chains.quotes[this.base]
+      const p2 = this.$store.state.chains.quotes[this.target]
+      return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
+    },
+  },
   created() {
     const { base, target } = this.$route.params
     this.init(base, target)
     // 所有方法添加到 $http.osmosis
-    this.$http.osmosis.getOHCL4Pairs('cosmos', 'osmosis').then(data => {
+    this.$http.osmosis.getOHCL4Pairs(this.$http.osmosis.getCoinGeckoId(this.base), this.$http.osmosis.getCoinGeckoId(this.target)).then(data => {
       console.log(data)
     })
   },

src/views/components/KlineTrade/Place.vue

@@ -16,7 +16,11 @@
         no-body
       />
     </b-tabs>
-    <PlaceForm :type="tabIndex" />
+    <PlaceForm
+      :type="tabIndex"
+      :base="base"
+      :target="target"
+    />
   </div>
 </template>
 
@@ -32,6 +36,16 @@ export default {
     BTabs,
     PlaceForm,
   },
+  props: {
+    base: {
+      type: String,
+      required: true,
+    },
+    target: {
+      type: String,
+      required: true,
+    },
+  },
   data: () => ({
     tabIndex: 0,
   }),

src/views/components/KlineTrade/PlaceForm.vue

@@ -122,22 +122,35 @@ export default {
   },
   props: {
     type: {
+      type: Number,
+      required: true,
+    },
+    base: {
+      type: String,
+      required: true,
+    },
+    target: {
       type: String,
       required: true,
     },
   },
   data() {
     return {
-      base: 'ATOM',
-      target: 'OSMO',
       available: 0,
       amount: 0,
       total: 0,
-      price: 50000,
+      // price: 50000,
       slippage: 0.05,
       marks: [0, 0.01, 0.025, 0.05],
     }
   },
+  computed: {
+    price() {
+      const p1 = this.$store.state.chains.quotes[this.base]
+      const p2 = this.$store.state.chains.quotes[this.target]
+      return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
+    },
+  },
   methods: {
     changeAmount() {
       this.total = this.amount * this.price