load price for key pairs

src/views/OsmosisTrade.vue

@@ -8,7 +8,7 @@
         <b-card>
           <div class="d-flex justify-content-begin align-items-center mb-1">
             <b-button
-              id="popover-button-3"
+              id="popover-trading-pairs"
               variant="flat-primary"
               class="mr-3"
               @click="show = !show"
@@ -18,20 +18,18 @@
 
             <b-popover
               :show.sync="show"
-              target="popover-button-3"
+              target="popover-trading-pairs"
               placement="bottom"
-              triggers="click"
+              triggers="hover"
-              style="width:300px;"
+              boundary="scrollParent"
+              boundary-padding="0"
             >
-              <template #title>
-                Pairs
-              </template>
               <b-table
                 striped
                 hover
                 :small="true"
                 :items="pairs"
-                class="m-0"
+                class="m-0 p-0"
               >
 
                 <template #cell(pair)="data">
@@ -41,6 +39,16 @@
                     {{ data.item.pair[0] }}/{{ data.item.pair[1] }}
                   </router-link>
                 </template>
+                <template #cell(price)="data">
+                  <div class="text-right">
+                    <small class="">{{ data.item.price }}</small>
+                  </div>
+                </template>
+                <template #cell(change)="data">
+                  <div class="text-right">
+                    <small :class="data.item.change > 0 ? 'text-success': 'text-danger'">{{ data.item.change }}%</small>
+                  </div>
+                </template>
               </b-table>
             </b-popover>
             <div class="mr-3 text-success font-weight-bolder">
@@ -84,6 +92,7 @@ import {
   BRow, BCol, BCard, BButton, BPopover, BTable,
 } from 'bootstrap-vue'
 import { getPairName } from '@/libs/osmos'
+import { formatTokenDenom } from '@/libs/data'
 import Place from './components/KlineTrade/Place.vue'
 import Kline from './components/kline/index.vue'
 
@@ -101,13 +110,6 @@ export default {
   data() {
     return {
       show: false,
-      // pairs: [
-      //   { pair: 'ATOM/OSMO' },
-      //   { pair: 'IRIS/OSMO' },
-      //   { pair: 'AKT/OSMO' },
-      //   { pair: 'ATOM/OSMO' },
-      //   { pair: 'ATOM/OSMO' },
-      // ],
       pools: [],
       current: {},
       denomTrace: [],
@@ -123,28 +125,26 @@ export default {
     },
     pairs() {
       const pairs = this.pools.map(x => {
-        const x2 = {
+        const pair = x.poolAssets.map(t => {
-          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 formatTokenDenom(this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ')
           }
-            return t.token.denom
+          return formatTokenDenom(t.token.denom)
-          }),
+        })
+        return {
+          id: x.id,
+          pair,
+          price: this.getPrice(pair),
+          change: this.getChanges(pair),
         }
-        return x2
       })
       return pairs
     },
     latestPrice() {
-      const p1 = this.$store.state.chains.quotes[this.base]
+      return this.getPrice([this.base, this.target])
-      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]
+      return this.getChanges([this.base, this.target])
-      const p2 = this.$store.state.chains.quotes[this.target]
-      return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
     },
   },
   created() {
@@ -173,6 +173,16 @@ export default {
     // }
   },
   methods: {
+    getPrice(symbol) {
+      const p1 = this.$store.state.chains.quotes[symbol[0]]
+      const p2 = this.$store.state.chains.quotes[symbol[1]]
+      return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
+    },
+    getChanges(symbol) {
+      const p1 = this.$store.state.chains.quotes[symbol[0]]
+      const p2 = this.$store.state.chains.quotes[symbol[1]]
+      return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
+    },
     init(poolid) {
       this.current = this.pools.find(p => p.id === poolid) || this.pools[0]
     },

src/views/components/KlineTrade/DepositeWindow.vue

@@ -12,7 +12,9 @@
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
-    ><b-overlay
+    >
+      <template #modal-header="" />
+      <b-overlay
         :show="channels.length === 0"
         rounded="sm"
       >