<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>