BalanceModalBox.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div class="modal-card box box-modal">
  3. <header class="box-modal-header is-spaced">
  4. <div class="box-modal-title">{{ $t('insufficientBalance') }}</div>
  5. <button type="button" class="delete" @click="$emit('close')" />
  6. </header>
  7. <i18n path="youDontHaveEnoughTokens" tag="div" class="note">
  8. <template v-slot:currency>{{ selectedCurrency }}</template>
  9. <template v-slot:balance><number-format :value="currentBalance"/></template>
  10. </i18n>
  11. <b-button type="is-primary is-fullwidth" @click="close">{{ $t('close') }}</b-button>
  12. </div>
  13. </template>
  14. <script>
  15. /* eslint-disable no-console */
  16. import { mapState, mapGetters } from 'vuex'
  17. import NumberFormat from '@/components/NumberFormat'
  18. export default {
  19. components: {
  20. NumberFormat
  21. },
  22. computed: {
  23. ...mapState('application', ['selectedInstance']),
  24. ...mapState('token', ['balance']),
  25. ...mapGetters('token', ['toDecimals']),
  26. ...mapState('metamask', ['ethBalance']),
  27. ...mapGetters('metamask', ['nativeCurrency']),
  28. ...mapGetters('application', ['selectedCurrency']),
  29. currentBalance() {
  30. const balance = this.selectedInstance.currency === this.nativeCurrency ? this.ethBalance : this.balance
  31. return this.toDecimals(balance, null, 6)
  32. }
  33. },
  34. methods: {
  35. close() {
  36. this.$parent.close()
  37. }
  38. }
  39. }
  40. </script>