finish price chart & trading panel

src/libs/data/data.js

@@ -142,6 +142,7 @@ function getHdPath(address) {
 }
 
 export async function sign(device, chainId, signerAddress, messages, fee, memo, signerData) {
+  console.log(device, signerData)
   let transport
   let signer
   switch (device) {
@@ -159,13 +160,13 @@ export async function sign(device, chainId, signerAddress, messages, fee, memo,
         throw new Error('Please install keplr extension')
       }
       await window.keplr.enable(chainId)
-      // signer = window.getOfflineSigner(chainId)
-      signer = window.getOfflineSignerOnlyAmino(chainId)
+      signer = window.getOfflineSigner(chainId)
+      // signer = window.getOfflineSignerOnlyAmino(chainId)
   }
 
   // Ensure the address has some tokens to spend
   const client = await SigningStargateClient.offline(signer)
-  return client.signAmino(device === 'keplr' ? signerAddress : toSignAddress(signerAddress), messages, fee, memo, signerData)
+  return client.sign(device === 'keplr' ? signerAddress : toSignAddress(signerAddress), messages, fee, memo, signerData)
   // return signDirect(signer, signerAddress, messages, fee, memo, signerData)
 }
 

src/views/OsmosisTrade.vue

@@ -72,11 +72,10 @@
               <div>-</div>
             </div>
           </div>
-          <div
-            id="kline-wrap"
-          >
-            <Kline :list="klineData || []" />
-          </div>
+          <summary-price-chart
+            :chart-data="marketChartData"
+            :min-height="150"
+          />
         </b-card>
       </b-col>
       <b-col
@@ -102,7 +101,7 @@ 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/tvjs/index.vue'
+import SummaryPriceChart from './SummaryPriceChart.vue'
 
 export default {
   components: {
@@ -111,9 +110,9 @@ export default {
     BButton,
     BPopover,
     BTable,
-    Kline,
     Place,
     BCard,
+    SummaryPriceChart,
   },
   data() {
     return {
@@ -122,6 +121,7 @@ export default {
       current: {},
       denomTrace: [],
       klineData: [],
+      marketData: {},
     }
   },
   computed: {
@@ -154,17 +154,44 @@ export default {
     changesIn24H() {
       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: [
+            {
+              label: 'Price',
+              data,
+              backgroundColor: 'rgba(54, 162, 235, 0.2)',
+              borderColor: 'rgba(54, 162, 235, 1)',
+              borderWidth: 1,
+              pointStyle: 'dash',
+              barThickness: 15,
+            },
+          ],
+        }
+      }
+      return { labels: [], datasets: [] }
+    },
   },
   created() {
     const base = this.$route.params?.base || 'ATOM'
     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.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

src/views/components/KlineTrade/PlaceForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <dl>
+    <dl class="d-none">
       <dt>Available {{ computeAccounts }}</dt>
       <dd class="d-flex justify-content-between mt-1">
         <feather-icon
@@ -12,20 +12,25 @@
     </dl>
     <dl>
       <dt>Price</dt>
-      <dd class="d-flex justify-content-end mt-1">
-        {{ price }} {{ target }}
+      <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>Fee</dt>
-      <dd class="d-flex justify-content-end mt-1">
+      <dt>Swap Fee</dt>
+      <dd class="d-flex justify-content-end mt-1 font-weight-bolder">
         {{ fee }}%
       </dd>
     </dl>
     <b-form-group>
-      <label for="amount">
-        Amount
-      </label>
+      <div class="d-flex justify-content-between">
+        <span>Amount</span>
+        <small class="text-muted">Available {{ available }} {{ type === 0 ? target: base }}
+          <feather-icon
+            v-b-modal.trading-deposte-window
+            icon="PlusSquareIcon"
+          /></small>
+      </div>
       <b-input-group class="input-group-merge">
         <b-form-input
           id="amount"
@@ -48,9 +53,10 @@
       </b-alert>
     </b-form-group>
     <b-form-group>
-      <label for="total">
-        Total
-      </label>
+      <div class="d-flex justify-content-between">
+        <span>Total</span>
+        <small class="text-muted">≈${{ localPrice }}</small>
+      </div>
       <b-input-group class="input-group-merge">
         <b-form-input
           id="total"
@@ -72,7 +78,7 @@
         </div>
       </b-alert>
     </b-form-group>
-    <b-form-group>
+    <b-form-group class="d-none">
       <label>
         Slippage Tolerance
       </label>
@@ -105,11 +111,44 @@
         </b-form-radio>
       </div>
     </b-form-group>
+    <b-form-group
+      label="Signer"
+      label-for="wallet"
+    >
+      <b-form-radio-group
+        v-model="wallet"
+        inline
+      >
+        <b-form-radio
+          v-model="wallet"
+          name="wallet"
+          value="keplr"
+        >
+          <small>Keplr</small>
+        </b-form-radio>
+        <b-form-radio
+          v-model="wallet"
+          name="wallet"
+          value="ledgerUSB"
+        >
+          <small>Ledger(USB)</small>
+        </b-form-radio>
+        <b-form-radio
+          v-model="wallet"
+          name="wallet"
+          value="ledgerBle"
+          class="mr-0"
+        >
+          <small>Ledger(BLE)</small>
+        </b-form-radio>
+      </b-form-radio-group>
+    </b-form-group>
     <b-form-group>
       <b-button
         v-if="address"
         block
         :variant="type === 0 ? 'success': 'danger'"
+        @click="sendTx()"
       >
         {{ type === 0 ? `Buy ${ base }` : `Sell ${ base }` }}
       </b-button>
@@ -123,10 +162,17 @@
       </b-button>
 
     </b-form-group>
+    <b-alert
+      variant="danger"
+      show
+    >
+      <div class="alert-body">
+        {{ error }}
+      </div>
+    </b-alert>
     <b-alert
       class="mt-2"
       variant="secondary"
-      show
     >
       <div class="alert-heading">
         Note
@@ -143,11 +189,14 @@
 
 <script>
 import {
-  BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio,
+  BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, BFormRadioGroup,
 } from 'bootstrap-vue'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
-import { /* abbrAddress, */ formatTokenAmount, getLocalAccounts, percent } from '@/libs/data'
+import {
+  formatTokenAmount, getLocalAccounts, percent, sign,
+} from '@/libs/data'
 import { getPairName } from '@/libs/osmos'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import DepositeWindow from './DepositeWindow.vue'
 
 export default {
@@ -156,11 +205,14 @@ export default {
     BButton,
     BFormInput,
     BFormRadio,
+    BFormRadioGroup,
     BFormGroup,
     BInputGroup,
     BInputGroupAppend,
     FeatherIcon,
     DepositeWindow,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
   },
   props: {
     type: {
@@ -179,11 +231,14 @@ export default {
   data() {
     return {
       address: '',
-      amount: 0,
-      total: 0,
+      amount: '',
+      total: '',
       slippage: 0.05,
       marks: [0, 0.01, 0.025, 0.05],
       balance: {},
+      error: null,
+      chainId: 'osmosis-1',
+      wallet: 'keplr',
       // base: '',
       // target: '',
     }
@@ -200,6 +255,10 @@ export default {
       const p2 = this.$store.state.chains.quotes[this.target]
       return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
     },
+    localPrice() {
+      const p1 = this.$store.state.chains.quotes[this.type === 1 ? this.target : this.base]
+      return p1 && this.total > 0 ? (p1.usd * this.total).toFixed(2) : '-'
+    },
     computeAccounts() {
       return ''
     },
@@ -259,13 +318,98 @@ export default {
     formatAvailable() {
     },
     changeAmount() {
-      this.total = this.amount * this.price
+      if (this.type === 0) {
+        this.total = this.amount / this.price
+      } else {
+        this.total = this.amount * this.price
+      }
     },
     changeTotal() {
-      this.amount = this.total / this.price
+      if (this.type === 0) {
+        this.amount = this.total * this.price
+      } else {
+        this.amount = this.total / this.price
+      }
     },
-    submitTrade() {
+    async sendTx() {
+      const tokenOutDenom = this.pool.poolAssets[this.type === 0 ? 0 : 1].token.denom
+      const { denom } = this.pool.poolAssets[this.type === 0 ? 1 : 0].token
+      const txMsgs = [
+        {
+          type: 'osmosis/gamm/swap-exact-amount-in',
+          value: {
+            sender: this.address,
+            routes: [
+              {
+                poolId: this.pool.id,
+                tokenOutDenom,
+              },
+            ],
+            tokenIn: {
+              denom,
+              amount: String(this.amount),
+            },
+            tokenOutMinAmount: String(this.total),
+          },
+        },
+      ]
 
+      if (txMsgs.length === 0) {
+        this.error = 'No delegation found'
+        return ''
+      }
+      if (!this.accountNumber) {
+        this.error = 'Account number should not be empty!'
+        return ''
+      }
+
+      const txFee = {
+        amount: [
+          {
+            amount: '800', // this.fee,
+            denom: 'uomos', // this.feeDenom,
+          },
+        ],
+        gas: '200000', // this.gas,
+      }
+
+      const signerData = {
+        accountNumber: this.accountNumber,
+        sequence: this.sequence,
+        chainId: this.chainId,
+      }
+
+      console.log('trade: ', this.wallet, this.chainId, this.address, txMsgs, txFee, signerData)
+
+      sign(
+        this.wallet,
+        this.chainId,
+        this.address,
+        txMsgs,
+        txFee,
+        'Sent Via https://ping.pub',
+        signerData,
+      ).then(bodyBytes => {
+        console.log('signed:', bodyBytes)
+        // this.$http.broadcastTx(bodyBytes).then(res => {
+        //   setLocalTxHistory({ op: 'swap', hash: res.tx_response.txhash, time: new Date() })
+        //   this.$toast({
+        //     component: ToastificationContent,
+        //     props: {
+        //       title: 'Transaction sent!',
+        //       icon: 'EditIcon',
+        //       variant: 'success',
+        //     },
+        //   })
+        // }).catch(e => {
+        //   this.error = e
+        // })
+      }).catch(e => {
+        this.error = e
+      })
+      // Send tokens
+      // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
+      return ''
     },
   },
 }

src/views/components/tvjs/index.vue

@@ -1,6 +1,6 @@
 <template>
   <trading-vue
-    :data="tvData"
+    :data="data"
     :width="width"
     :height="height"
     :toolbar="false"
@@ -17,10 +17,14 @@ export default {
   name: 'App',
   components: { TradingVue },
   props: {
-    list: [],
+    list: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
+      data: {},
       width: 700,
       height: 600,
       colors: {
@@ -30,7 +34,6 @@ export default {
       },
     }
   },
-
   computed: {
     tvData() {
       return {
@@ -38,6 +41,24 @@ export default {
       }
     },
   },
+  created() {
+    this.$http.getMarketChart(14, 'cosmos').then(res => {
+      console.log('market chart', res)
+      const ohlcv = res.prices.map((v, i) => {
+        // const v2 = v
+        console.log('item:', i, v, res.total_volumes[i][1])
+        v.push(v[1])
+        v.push(v[1])
+        v.push(v[1])
+        v.push(res.total_volumes[i][1])
+        return v
+      })
+      console.log(ohlcv)
+      this.data = {
+        ohlcv,
+      }
+    })
+  },
 }
 
 </script>