Finish trade UI

src/libs/osmos.js

@@ -28,33 +28,54 @@ export const poolIds = {
   497: true,
   498: true,
   548: true,
-  557: true,
+  // 557: true,
-  558: true,
+  // 558: true,
-  571: true,
+  // 571: true,
-  572: true,
+  // 572: true,
 }
 
-export function getPairName(pool, denomTrace, type = 'base') {
+export const CoinGeckoMap = {
+  ATOM: 'cosmos',
+  OSMO: 'osmosis',
+  IRIS: 'iris-network',
+  AKT: 'akash-network',
+  LUNA: 'terra-luna',
+  UST: 'terrausd',
+  KRT: 'terra-krw',
+  BAND: 'band-protocol',
+  CRO: 'crypto-com-chain',
+  KAVA: 'kava',
+  OKT: 'okexchain',
+  CTK: 'certik',
+  XPRT: 'persistence',
+  REGEN: 'regen',
+  SCRT: 'secret',
+  DVPN: 'sentinel',
+  ION: 'ion',
+  ROWAN: 'sifchain',
+  IOV: 'starname',
+  BTSG: 'bitsong',
+  NGM: 'e-money',
+  EEUR: 'e-money-eur',
+  LIKE: 'likecoin',
+  JUNO: 'juno-network',
+  STGZ: 'stargaze-protocol',
+  VDL: 'vidulum',
+  XKI: 'ki',
+  INJ: 'injective-protocol',
+}
+
+export function getPairName(pool, denomTrace, type = 'base', isFormat = true) {
   const index = type === 'base' ? 0 : 1
   if (pool && pool.poolAssets) {
-    if (pool.poolAssets[index].token.denom.startsWith('ibc')) {
+    const denom = pool.poolAssets[index].token.denom.startsWith('ibc')
-      return formatTokenDenom(denomTrace[pool.poolAssets[index].token.denom]?.base_denom) || '-'
+      ? denomTrace[pool.poolAssets[index].token.denom]?.base_denom : pool.poolAssets[index].token.denom
-    }
+    return isFormat ? formatTokenDenom(denom) : denom
-    return formatTokenDenom(pool.poolAssets[index].token.denom)
   }
   return '-'
 }
 
 export default class OsmosAPI {
-  constructor() {
-    this.pairs = {
-      ATOM: { coingecko: 'cosmos', minDenom: 'uatom', ibcDenomHash: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4' },
-      OSMO: { coingecko: 'osmosis', minDenom: 'uosmo', ibcDenomHash: 'uosmo' },
-      IRIS: { coingecko: 'iris-network', minDenom: 'uiris', ibcDenomHash: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0' },
-      AKT: { coingecko: 'akash-network', minDenom: 'uakt', ibcDenomHash: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0' },
-    }
-  }
-
   preHandler() {
     this.version = ''
   }
@@ -65,6 +86,27 @@ export default class OsmosAPI {
     return fetch(`${this.host}${url}`).then(res => res.json())
   }
 
+  async getMarketData(from, to, days = 14) {
+    if (from && to) {
+      this.exe_time = ''
+      return Promise.all(
+        [fetch(`https://api.coingecko.com/api/v3/coins/${from}/market_chart?vs_currency=usd&days=${days}`).then(res => res.json()),
+          fetch(`https://api.coingecko.com/api/v3/coins/${to}/market_chart?vs_currency=usd&days=${days}`).then(res => res.json())],
+      ).then(data => {
+        const output = []
+        if (data.length >= 2) {
+          data[0].prices.forEach((x, i) => {
+            if (data[1].prices[i]) {
+              output.push([x[0], (x[1] / data[1].prices[i][1]).toFixed(6)])
+            }
+          })
+        }
+        return { prices: output }
+      })
+    }
+    return { prices: [] }
+  }
+
   async getOHCL4Pairs(from, to) {
     if (from && to) {
       this.exe_time = ''
@@ -72,7 +114,6 @@ export default class OsmosAPI {
         [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=1`).then(res => res.json()),
           fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=1`).then(res => res.json())],
       ).then(ohlc => {
-        console.log(ohlc)
         const output = []
         ohlc[0].forEach((e, i) => {
           const price = [e[0]]
@@ -99,18 +140,6 @@ export default class OsmosAPI {
     return null
   }
 
-  getCoinGeckoId(symbol) {
-    return symbol ? this.pairs[symbol.toUpperCase()].coingecko : ''
-  }
-
-  getIBCDenomHash(symbol) {
-    return symbol ? this.pairs[symbol.toUpperCase()].ibcDenomHash : ''
-  }
-
-  getMinDenom(symbol) {
-    return symbol ? this.pairs[symbol.toUpperCase()].minDenom : ''
-  }
-
   // Custom Module
   async getPools() {
     const tradeable = []

src/views/OsmosisTrade.vue

@@ -6,33 +6,41 @@
         sm="12"
       >
         <b-card>
-          <div
+          <b-row class="mb-1">
-            id="kline-area"
+            <b-col
-            class="d-flex justify-content-begin align-items-center mb-1"
+              lg="4"
+              md="6"
+              sm="12"
+              class="d-flex justify-content-begin align-items-center"
             >
               <b-button
                 id="popover-trading-pairs"
-              variant="flat-primary"
+                variant="gradient-primary"
-              class="mr-3"
                 @click="show = !show"
               >
-              {{ base }} / {{ target }}
+                <feather-icon
+                  icon="ListIcon"
+                />
               </b-button>
-
+              <h4 class="text-primary font-weight-bolder text-nowrap ml-1">
+                {{ base }} / {{ target }}
+              </h4>
               <b-popover
                 :show.sync="show"
                 target="popover-trading-pairs"
-              placement="bottom"
+                placement="rightbottom"
                 triggers="hover"
                 boundary="scrollParent"
                 boundary-padding="0"
+                class="px-0"
               >
                 <b-table
                   striped
                   hover
+                  :fields="fields"
                   :small="true"
                   :items="pairs"
-                class="m-0 p-0"
+                  class="ml-0 pl-0"
                 >
 
                   <template #cell(pair)="data">
@@ -54,6 +62,8 @@
                   </template>
                 </b-table>
               </b-popover>
+            </b-col>
+            <b-col class="d-flex justify-content-begin align-items-center">
               <div class="mr-3 text-success font-weight-bolder">
                 {{ latestPrice }}
               </div>
@@ -65,13 +75,14 @@
               </div>
               <div class="mr-3">
                 <small>24h High</small>
-              <div>-</div>
+                <div>{{ high24 }}</div>
               </div>
               <div>
                 <small>24h Low</small>
-              <div>-</div>
+                <div>{{ low24 }}</div>
-            </div>
               </div>
+            </b-col>
+          </b-row>
           <summary-price-chart
             :chart-data="marketChartData"
             :min-height="150"
@@ -97,8 +108,9 @@
 import {
   BRow, BCol, BCard, BButton, BPopover, BTable,
 } from 'bootstrap-vue'
-import { getPairName } from '@/libs/osmos'
+import { CoinGeckoMap, getPairName } from '@/libs/osmos'
 import { formatTokenDenom } from '@/libs/data'
+import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
 import Place from './components/KlineTrade/Place.vue'
 // import Kline from './components/kline/index.vue'
 import SummaryPriceChart from './SummaryPriceChart.vue'
@@ -113,24 +125,24 @@ export default {
     Place,
     BCard,
     SummaryPriceChart,
+    FeatherIcon,
   },
   data() {
     return {
+      base: '',
+      target: '',
+      fields: ['pair', 'price', 'change'],
       show: false,
       pools: [],
       current: {},
       denomTrace: [],
       klineData: [],
       marketData: {},
+      high24: 0,
+      low24: 0,
     }
   },
   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 pair = x.poolAssets.map(t => {
@@ -155,11 +167,9 @@ export default {
       return this.getChanges([this.base, this.target])
     },
     marketChartData() {
-      console.log(this.marketData)
       if (this.marketData && this.marketData.prices) {
         const labels = this.marketData.prices.map(x => x[0])
         const data = this.marketData.prices.map(x => x[1])
-        console.log('chart data:', data)
         return {
           labels,
           datasets: [
@@ -179,27 +189,13 @@ export default {
     },
   },
   created() {
-    const base = this.$route.params?.base || 'ATOM'
+    const { poolid } = this.$route.params
-    const target = this.$route.params?.target || 'OSMO'
-    this.init(base, target)
-    // 所有方法添加到 $http.osmosis
-    // this.$http.osmosis.getOHCL4Pairs(
-    //   this.$http.osmosis.getCoinGeckoId(base),
-    //   this.$http.osmosis.getCoinGeckoId(target),
-    // ).then(data => {
-    //   this.klineData = data
-    // })
-    this.$http.getMarketChart(14, 'cosmos').then(res => {
-      console.log('market data', res)
-      this.marketData = res
-    })
     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.init(poolid)
-      this.current = this.pools.find(p => p.id === id) || this.pools[0]
     })
   },
   beforeRouteUpdate(to, from, next) {
@@ -220,7 +216,27 @@ export default {
       return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
     },
     init(poolid) {
+      this.high24 = 0
+      this.low24 = 0
       this.current = this.pools.find(p => p.id === poolid) || this.pools[0]
+      this.base = getPairName(this.current, this.denomTrace, 'base')
+      this.target = getPairName(this.current, this.denomTrace, 'target')
+      this.$http.osmosis.getMarketData(CoinGeckoMap[this.base], CoinGeckoMap[this.target]).then(res => {
+        this.marketData = res
+        const start = Date.now() - 8.64e+7
+        res.prices.forEach(x => {
+          if (x[0] > start) {
+            if (x[1] > this.high24) {
+              // eslint-disable-next-line prefer-destructuring
+              this.high24 = x[1]
+            }
+            if (x[1] < this.low24 || this.low24 === 0) {
+              // eslint-disable-next-line prefer-destructuring
+              this.low24 = x[1]
+            }
+          }
+        })
+      })
     },
   },
 }

src/views/components/KlineTrade/DepositeWindow.vue

@@ -14,17 +14,6 @@
       @show="loadBalance"
     >
       <template #modal-header="" />
-      <b-overlay
-        :show="channels.length === 0"
-        rounded="sm"
-      >
-        <template #overlay>
-          <div class="text-center">
-            <p>
-              IBC Module is not enabled.
-            </p>
-          </div>
-        </template>
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
@@ -284,7 +273,7 @@
         </b-form>
       </validation-observer>
       {{ error }}
-      </b-overlay></b-modal>
+    </b-modal>
   </div>
 </template>
 
@@ -292,7 +281,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BOverlay,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -324,7 +313,6 @@ export default {
     BFormRadio,
     BFormCheckbox,
     vSelect,
-    BOverlay,
 
     ValidationProvider,
     ValidationObserver,

src/views/components/KlineTrade/PlaceForm.vue

@@ -1,46 +1,43 @@
 <template>
   <div>
-    <dl class="d-none">
+    <b-card
-      <dt>Available {{ computeAccounts }}</dt>
+      bg-variant="light-secondary"
-      <dd class="d-flex justify-content-between mt-1">
+      text-variant="black"
-        <feather-icon
+    >
-          v-b-modal.trading-deposte-window
-          icon="PlusSquareIcon"
-        />
-        <span> {{ available }} {{ type === 0 ? target: base }} </span>
-      </dd>
-    </dl>
-    <dl>
-      <dt>Price</dt>
-      <dd class="d-flex justify-content-end mt-1 align-items-end font-weight-bolder">
-        1&nbsp;<small class="text-muted mx-10"> {{ base }} ≈</small>&nbsp;{{ price }}&nbsp;<small class="text-muted mx-10">{{ target }}</small>
-      </dd>
-    </dl>
-    <dl>
-      <dt>Swap Fee</dt>
-      <dd class="d-flex justify-content-end mt-1 font-weight-bolder">
-        {{ fee }}%
-      </dd>
-    </dl>
-    <b-form-group>
       <div class="d-flex justify-content-between">
-        <span>Amount</span>
+        <span class="font-weight-bolder">Balance </span>
-        <small class="text-muted">Available {{ available }} {{ type === 0 ? target: base }}
+        <span>
           <feather-icon
             v-b-modal.trading-deposte-window
             icon="PlusSquareIcon"
-          /></small>
+            class="text-primary"
+          />
+          <small> {{ available }} {{ type === 0 ? target: base }} </small>
+        </span>
+      </div>
+      <div class="d-flex justify-content-between mt-1">
+        <span class="font-weight-bolder">Price</span>
+        <span>{{ price }}&nbsp;<small class="text-muted mx-10">{{ target }} ≈</small>&nbsp;1&nbsp;<small class="text-muted mx-10"> {{ base }}</small>&nbsp;</span>
+      </div>
+      <div class="d-flex justify-content-between mt-1">
+        <span class="font-weight-bolder">Swap Fee</span>
+        <span>{{ fee }}%</span>
+      </div>
+    </b-card>
+    <b-form-group>
+      <div>
+        <span>Quantity</span>
       </div>
       <b-input-group class="input-group-merge">
         <b-form-input
           id="amount"
           v-model="amount"
           type="number"
-          placeholder="Amount"
+          placeholder="Quantity"
           @change="changeAmount()"
         />
         <b-input-group-append is-text>
-          {{ type === 0 ? target: base }}
+          {{ base }}
         </b-input-group-append>
       </b-input-group>
       <b-alert
@@ -54,19 +51,29 @@
     </b-form-group>
     <b-form-group>
       <div class="d-flex justify-content-between">
-        <span>Total</span>
+        <span>Volume</span>
-        <small class="text-muted">≈${{ localPrice }}</small>
+        <span>
+          <small
+            v-if="localPrice > 0"
+            class="text-muted mr-1"
+          >≈${{ localPrice }}</small>
+          <feather-icon
+            id="popover-trading-setting"
+            icon="SettingsIcon"
+            class="text-primary"
+          />
+        </span>
       </div>
       <b-input-group class="input-group-merge">
         <b-form-input
           id="total"
           v-model="total"
           type="number"
-          placeholder="Total"
+          placeholder="Volume"
           @change="changeTotal()"
         />
         <b-input-group-append is-text>
-          {{ type === 1 ? target: base }}
+          {{ target }}
         </b-input-group-append>
       </b-input-group>
       <b-alert
@@ -78,7 +85,15 @@
         </div>
       </b-alert>
     </b-form-group>
-    <b-form-group class="d-none">
+    <b-popover
+      target="popover-trading-setting"
+      placement="left"
+      triggers="hover"
+      boundary="scrollParent"
+      boundary-padding="0"
+      class="px-0"
+    >
+      <b-form-group>
         <label>
           Slippage Tolerance
         </label>
@@ -111,6 +126,7 @@
           </b-form-radio>
         </div>
       </b-form-group>
+    </b-popover>
     <b-form-group
       label="Signer"
       label-for="wallet"
@@ -147,6 +163,7 @@
       <b-button
         v-if="address"
         block
+        :disabled="type === 0? total > available : amount > available"
         :variant="type === 0 ? 'success': 'danger'"
         @click="sendTx()"
       >
@@ -164,7 +181,10 @@
     </b-form-group>
     <b-alert
       variant="danger"
-      show
+      :show="dismissCountDown"
+      dismissible
+      @dismissed="dismissCountDown=0"
+      @dismiss-count-down="countDownChanged"
     >
       <div class="alert-body">
         {{ error }}
@@ -189,7 +209,7 @@
 
 <script>
 import {
-  BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, BFormRadioGroup,
+  BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, BFormRadioGroup, BCard, BPopover,
 } from 'bootstrap-vue'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
 import {
@@ -203,10 +223,12 @@ export default {
   components: {
     BAlert,
     BButton,
+    BCard,
     BFormInput,
     BFormRadio,
     BFormRadioGroup,
     BFormGroup,
+    BPopover,
     BInputGroup,
     BInputGroupAppend,
     FeatherIcon,
@@ -241,6 +263,8 @@ export default {
       wallet: 'keplr',
       // base: '',
       // target: '',
+      dismissSecs: 15,
+      dismissCountDown: 0,
     }
   },
   computed: {
@@ -256,7 +280,7 @@ export default {
       return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
     },
     localPrice() {
-      const p1 = this.$store.state.chains.quotes[this.type === 1 ? this.target : this.base]
+      const p1 = this.$store.state.chains.quotes[this.target]
       return p1 && this.total > 0 ? (p1.usd * this.total).toFixed(2) : '-'
     },
     computeAccounts() {
@@ -280,10 +304,7 @@ export default {
       return 0
     },
     fee() {
-      if (this.pool) {
+      return percent(this.pool?.poolParams?.swapFee || '')
-        return percent(this.pool.poolParams.swapFee)
-      }
-      return '-'
     },
   },
   created() {
@@ -318,18 +339,10 @@ export default {
     formatAvailable() {
     },
     changeAmount() {
-      if (this.type === 0) {
+      this.total = parseFloat((this.amount * this.price).toFixed(6))
-        this.total = this.amount / this.price
-      } else {
-        this.total = this.amount * this.price
-      }
     },
     changeTotal() {
-      if (this.type === 0) {
+      this.amount = parseFloat((this.total / this.price).toFixed(6))
-        this.amount = this.total * this.price
-      } else {
-        this.amount = this.total / this.price
-      }
     },
     async sendTx() {
       const tokenOutDenom = this.pool.poolAssets[this.type === 0 ? 0 : 1].token.denom
@@ -356,10 +369,12 @@ export default {
 
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
+        this.dismissCountDown = this.dismissSecs
         return ''
       }
       if (!this.accountNumber) {
         this.error = 'Account number should not be empty!'
+        this.dismissCountDown = this.dismissSecs
         return ''
       }
 
@@ -406,11 +421,15 @@ export default {
         // })
       }).catch(e => {
         this.error = e
+        this.dismissCountDown = this.dismissSecs
       })
       // Send tokens
       // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
       return ''
     },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown
+    },
   },
 }
 </script>