init

components/withdraw/WithdrawTotal.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="field">
+    <div class="label">
+      {{ $t('total') }}
+    </div>
+    <div class="withdraw-data">
+      <div v-if="isTokenSelected" class="withdraw-data-item">
+        {{ $t('noteBalance') }}
+        <span>
+          {{ selectedStatistic.amount }}
+          {{ currency }}
+        </span>
+      </div>
+      <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
+        {{ $t('gasPrice') }}
+        <span>{{ gasPrices.fast }} Gwei</span>
+      </div>
+      <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
+        {{ $t('networkFee') }}
+        <span>{{ networkFeeInEth }} {{ networkCurrency }}</span>
+      </div>
+      <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
+        {{ $t('relayerFee') }}
+        <span>{{ toDecimals(relayerFee, null, 6) }} {{ currency }}</span>
+      </div>
+      <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
+        {{ $t('totalFee') }}
+        <span>{{ toDecimals(totalRelayerFee, null, 6) }} {{ currency }}</span>
+      </div>
+      <div v-if="isTokenSelected" class="withdraw-data-item">
+        {{ $t('ethPurchase', { currency: networkCurrency }) }}
+        <span>{{ toDecimals(ethToReceiveInToken, null, 6) }} {{ currency }}</span>
+      </div>
+      <hr v-if="withdrawType === 'relayer'" />
+      <div class="withdraw-data-item">
+        {{ $t('tokensToReceive') }}
+        <span>{{ total }} {{ currency }}</span>
+      </div>
+      <div v-if="isTokenSelected" class="withdraw-data-item">
+        <span class="is-alone">{{ ethToReceiveFromWei }} {{ networkCurrency }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { decimalPlaces } from '@/utils'
+const { fromWei, toBN } = require('web3-utils')
+
+export default {
+  props: {
+    currency: {
+      type: String,
+      default: 'ETH'
+    },
+    withdrawType: {
+      type: String,
+      default: 'wallet'
+    },
+    ethToReceive: {
+      type: String,
+      default: '20000000000000000'
+    },
+    serviceFee: {
+      type: Number,
+      default: null
+    }
+  },
+  computed: {
+    ...mapState('application', ['selectedStatistic']),
+    ...mapGetters('metamask', ['networkConfig', 'nativeCurrency']),
+    ...mapGetters('metamask', {
+      networkCurrency: 'currency'
+    }),
+    ...mapGetters('gasPrices', ['gasPrices']),
+    ...mapGetters('token', ['toDecimals', 'fromDecimals']),
+    ...mapGetters('application', ['networkFee']),
+    ...mapGetters('price', ['tokenRate']),
+    networkFeeInEth() {
+      return fromWei(this.networkFee)
+    },
+    relayerFee() {
+      const { amount } = this.selectedStatistic
+      const total = toBN(this.fromDecimals(amount.toString()))
+      const fee = this.serviceFee || this.$store.state.relayer.selectedRelayer.tornadoServiceFee
+      const decimalsPoint = decimalPlaces(fee)
+      const roundDecimal = 10 ** decimalsPoint
+      const aroundFee = toBN(parseInt(fee * roundDecimal, 10))
+      const tornadoServiceFee = total.mul(toBN(aroundFee)).div(toBN(roundDecimal * 100))
+      return tornadoServiceFee
+    },
+    totalRelayerFee() {
+      const tornadoServiceFee = this.relayerFee
+      const { currency } = this.selectedStatistic
+      const { decimals } = this.networkConfig.tokens[currency]
+      const ethFee = this.networkFee
+      if (currency === this.nativeCurrency) {
+        return ethFee.add(tornadoServiceFee)
+      }
+      const tokenFee = ethFee.mul(toBN(10 ** decimals)).div(toBN(this.tokenRate))
+      return tokenFee.add(tornadoServiceFee)
+    },
+    isTokenSelected() {
+      return (
+        this.withdrawType === 'relayer' &&
+        this.selectedStatistic.currency !== this.nativeCurrency &&
+        this.currency !== 'TORN'
+      )
+    },
+    ethToReceiveInToken() {
+      const { currency } = this.selectedStatistic
+      const { decimals } = this.networkConfig.tokens[currency]
+      const price = this.tokenRate
+      return toBN(this.ethToReceive)
+        .mul(toBN(10 ** decimals))
+        .div(toBN(price))
+    },
+    ethToReceiveFromWei() {
+      return fromWei(this.ethToReceive)
+    },
+    total() {
+      const { amount, currency } = this.selectedStatistic
+      let total = toBN(this.fromDecimals(amount.toString()))
+
+      if (this.withdrawType === 'relayer') {
+        const relayerFee = this.totalRelayerFee
+
+        if (currency === this.nativeCurrency) {
+          total = total.sub(relayerFee)
+        } else {
+          total = total.sub(relayerFee).sub(this.ethToReceiveInToken)
+        }
+      }
+
+      return this.toDecimals(total, null, 6)
+    }
+  }
+}
+</script>