149 lines
4.1 KiB
Vue
149 lines
4.1 KiB
Vue
<template>
|
|
<b-field :type="type" :message="error">
|
|
<template slot="label">
|
|
{{ $t('ethPurchase', { currency }) }}
|
|
<b-tooltip
|
|
:label="$t('ethPurchaseTooltip', { currency: selectedStatisticCurrency, networkCurrency: currency })"
|
|
size="is-small"
|
|
position="is-right"
|
|
multilined
|
|
>
|
|
<button class="button is-primary has-icon">
|
|
<span class="icon icon-info"></span>
|
|
</button>
|
|
</b-tooltip>
|
|
</template>
|
|
<div
|
|
class="field has-eth-purchase"
|
|
:class="[type, { 'is-disabled': disabled }]"
|
|
@click="onEthPurchaseClick"
|
|
>
|
|
<div class="columns is-mobile">
|
|
<div class="column currency-container is-light">
|
|
<div class="currency">{{ currency }}</div>
|
|
<b-input
|
|
ref="input"
|
|
v-model.number="newValue"
|
|
type="number"
|
|
step="0.01"
|
|
:max="max"
|
|
:min="min"
|
|
:disabled="disabled"
|
|
:use-html5-validation="false"
|
|
expanded
|
|
custom-class="hide-spinner"
|
|
@input="onInput"
|
|
@focus="$emit('focus', $event)"
|
|
@blur="$emit('blur', $event)"
|
|
/>
|
|
<div class="withdraw-data">
|
|
<div class="withdraw-data-item">
|
|
{{ $t('rate') }}
|
|
<span> {{ toDecimals(tokenRate, 18, 6) }} {{ currency }}/{{ selectedStatisticCurrency }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column arrow-container">
|
|
<EthPurchaseArrow />
|
|
</div>
|
|
<div class="column currency-container is-inverted">
|
|
<div class="currency">{{ selectedStatisticCurrency }}</div>
|
|
<div class="input">{{ ethToReceiveInToken }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-field>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex'
|
|
import { EthPurchaseArrow } from '@/components/icons'
|
|
import { debounce } from '@/utils'
|
|
const { toBN, toWei } = require('web3-utils')
|
|
|
|
export default {
|
|
components: {
|
|
EthPurchaseArrow
|
|
},
|
|
props: {
|
|
disabled: Boolean,
|
|
value: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
defaultEthToReceive: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
type: '',
|
|
min: 0,
|
|
error: '',
|
|
newValue: this.value
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('application', ['selectedStatistic']),
|
|
...mapGetters('application', ['maxEthToReceive', 'selectedStatisticCurrency']),
|
|
...mapGetters('token', ['toDecimals']),
|
|
...mapGetters('metamask', ['networkConfig', 'currency']),
|
|
...mapGetters('price', ['tokenRate']),
|
|
max() {
|
|
return Math.max(0, Number(this.toDecimals(this.maxEthToReceive, 18, 5)))
|
|
},
|
|
ethToReceiveInToken() {
|
|
const { currency } = this.selectedStatistic
|
|
const { decimals } = this.networkConfig.tokens[currency]
|
|
const price = this.tokenRate
|
|
|
|
const ethToReceive = toBN(toWei(Math.min(Math.max(this.min, this.newValue), this.max).toString()))
|
|
return this.toDecimals(ethToReceive.mul(toBN(10 ** decimals)).div(toBN(price)), null, 6)
|
|
}
|
|
},
|
|
watch: {
|
|
value(value) {
|
|
this.newValue = value
|
|
},
|
|
newValue(value) {
|
|
debounce(this.validateEthToReceive, value)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.validateEthToReceive(this.newValue)
|
|
},
|
|
methods: {
|
|
onEthPurchaseClick() {
|
|
this.$refs.input.focus()
|
|
},
|
|
onInput(value) {
|
|
const parsedValue = parseFloat(value)
|
|
if (!Number.isNaN(parsedValue)) {
|
|
this.$emit('input', parsedValue)
|
|
}
|
|
},
|
|
validateEthToReceive(value) {
|
|
let type = ''
|
|
let error = ''
|
|
|
|
if (value === '') {
|
|
type = 'is-warning'
|
|
error = this.$t('incorrectAmount')
|
|
} else if (value < 0) {
|
|
type = 'is-warning'
|
|
error = this.$t('amountIsLow', { value: this.min })
|
|
} else if (value > this.max) {
|
|
type = 'is-warning'
|
|
error = this.$t('amountIsHigh', { value: this.max })
|
|
} else if (value === this.defaultEthToReceive) {
|
|
type = 'is-primary'
|
|
}
|
|
|
|
this.error = error
|
|
this.type = type
|
|
this.$emit('isValidEthToReceive', type !== 'is-warning')
|
|
}
|
|
}
|
|
}
|
|
</script>
|