Merge pull request #37 from ibiding/trade

Trade

package-lock.json

@@ -23,7 +23,7 @@
         "@ledgerhq/hw-app-cosmos": "^6.3.0",
         "@ledgerhq/hw-transport-web-ble": "^6.3.0",
         "@ledgerhq/hw-transport-webusb": "^6.3.0",
-        "@vue/composition-api": "1.0.0-beta.22",
+        "@vue/composition-api": "^1.0.0-beta.22",
         "@vueuse/core": "4.0.0",
         "animate.css": "4.1.1",
         "apexcharts": "3.24.0",

package.json

@@ -25,7 +25,7 @@
     "@ledgerhq/hw-app-cosmos": "^6.3.0",
     "@ledgerhq/hw-transport-web-ble": "^6.3.0",
     "@ledgerhq/hw-transport-webusb": "^6.3.0",
-    "@vue/composition-api": "1.0.0-beta.22",
+    "@vue/composition-api": "^1.4.0",
     "@vueuse/core": "4.0.0",
     "animate.css": "4.1.1",
     "apexcharts": "3.24.0",
@@ -47,6 +47,7 @@
     "postcss-rtl": "1.7.3",
     "prismjs": "1.24.0",
     "swiper": "6.5.1",
+    "trading-vue-js": "^1.0.2",
     "uuid": "8.3.2",
     "vee-validate": "3.4.5",
     "vue": "2.x",

src/layouts/components/Navbar.vue

@@ -173,7 +173,7 @@ export default {
   },
   computed: {
     walletName() {
-      const key = this.$store.state.chains.defaultWallet
+      const key = this.$store?.state?.chains?.defaultWallet
       return key || 'Wallet'
     },
     selected_chain() {
@@ -185,7 +185,7 @@ export default {
     },
   },
   mounted() {
-    const accounts = Object.keys(getLocalAccounts())
+    const accounts = Object.keys(getLocalAccounts() || {})
     if (!this.$store.state.chains.defaultWallet && accounts.length > 0) {
       this.$store.commit('setDefaultWallet', accounts[0])
     }

src/libs/osmos.js

@@ -3,7 +3,7 @@
  * @Autor: dingyiming
  * @Date: 2021-11-22 21:20:10
  * @LastEditors: dingyiming
- * @LastEditTime: 2021-11-23 11:19:51
+ * @LastEditTime: 2021-11-25 00:45:16
  */
 import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
@@ -84,14 +84,14 @@ export default class OsmosAPI {
         const result = []
         for (let i = 0; i < output.length; i += 1) {
           const itemArr = output[i]
-          result.push({
-            time: itemArr[0],
-            volume: 0,
-            open: itemArr[1],
-            high: itemArr[2],
-            low: itemArr[3],
-            close: itemArr[4],
-          })
+          result.push([
+            itemArr[0],
+            itemArr[1], // open
+            itemArr[2], // high
+            itemArr[3], // low
+            itemArr[4], // close
+            0, // volume
+          ])
         }
         return result
       })

src/views/OsmosisTrade.vue

@@ -6,7 +6,10 @@
         sm="12"
       >
         <b-card>
-          <div class="d-flex justify-content-begin align-items-center mb-1">
+          <div
+            id="kline-area"
+            class="d-flex justify-content-begin align-items-center mb-1"
+          >
             <b-button
               id="popover-trading-pairs"
               variant="flat-primary"
@@ -69,7 +72,11 @@
               <div>-</div>
             </div>
           </div>
-          <Kline :list="klineData" />
+          <div
+            id="kline-wrap"
+          >
+            <Kline :list="klineData || []" />
+          </div>
         </b-card>
       </b-col>
       <b-col
@@ -94,7 +101,8 @@ import {
 import { getPairName } from '@/libs/osmos'
 import { formatTokenDenom } from '@/libs/data'
 import Place from './components/KlineTrade/Place.vue'
-import Kline from './components/kline/index.vue'
+// import Kline from './components/kline/index.vue'
+import Kline from './components/tvjs/index.vue'
 
 export default {
   components: {
@@ -148,7 +156,8 @@ export default {
     },
   },
   created() {
-    const { base, target } = this.$route.params
+    const base = this.$route.params?.base || 'ATOM'
+    const target = this.$route.params?.target || 'OSMO'
     this.init(base, target)
     // 所有方法添加到 $http.osmosis
     this.$http.osmosis.getOHCL4Pairs(

src/views/components/tvjs/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <trading-vue
+    :data="tvData"
+    :width="width"
+    :height="height"
+    :toolbar="false"
+    :color-back="colors.colorBack"
+    :color-grid="colors.colorGrid"
+    :color-text="colors.colorText"
+  />
+</template>
+<script>
+
+import TradingVue from 'trading-vue-js'
+
+export default {
+  name: 'App',
+  components: { TradingVue },
+  props: {
+    list: [],
+  },
+  data() {
+    return {
+      width: 700,
+      height: 600,
+      colors: {
+        colorBack: '#283046', // '#fff',
+        colorGrid: '#333', // '#eee',
+        colorText: '#fff',
+      },
+    }
+  },
+
+  computed: {
+    tvData() {
+      return {
+        ohlcv: this.list,
+      }
+    },
+  },
+}
+
+</script>