finish price chart & trading panel
This commit is contained in:
liangping
parent
823a4e75c5
commit
a4ce55f36d
@ -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)
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 <small class="text-muted mx-10"> {{ base }} ≈</small> {{ price }} <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 ''
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user