init

components/settings/EthPurchase.vue

@@ -0,0 +1,148 @@
+<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>