classic-ui/pages/index.vue

<template>
  <div>
    <b-notification
      v-if="netId === 56"
      :active="isActiveNotification.binanceInternal"
      class="main-notification"
      type="is-warning"
      icon-pack="icon"
      has-icon
      :aria-close-label="$t('closeNotification')"
      @close="disableNotification({ key: 'binanceInternal' })"
    >
      <i18n path="binanceInternalTxsNotification" />
    </b-notification>

    <b-notification
      :active="isActiveNotification.third"
      class="main-notification"
      type="is-warning"
      icon-pack="icon"
      has-icon
      :aria-close-label="$t('closeNotification')"
      @close="disableNotification({ key: 'third' })"
    >
      <i18n path="trustBanner.trustLess">
        <template v-slot:link>
          <a href="https://tornado.cash/">{{ $t('trustBanner.link') }}</a>
        </template>
      </i18n>
    </b-notification>

    <b-notification
      :active="isActiveNotification.first"
      class="main-notification"
      type="is-info"
      icon-pack="icon"
      has-icon
      :aria-close-label="$t('closeNotification')"
      @close="disableNotification({ key: 'first' })"
    >
      <i18n path="indexNotification">
        <template v-slot:link>
          <a href="https://tornadocash.community" target="_blank" rel="noopener noreferrer">
            {{ $t('indexNotificationLinkText') }}
          </a>
        </template>
      </i18n>
    </b-notification>

    <b-notification
      :active="isActiveNotification.second"
      class="main-notification"
      type="is-warning"
      icon-pack="icon"
      has-icon
      :aria-close-label="$t('closeNotification')"
      @close="disableNotification({ key: 'second' })"
    >
      <i18n path="rpcDisclaimer">
        <template v-slot:linkOne>
          <a
            href="https://home.treasury.gov/news/press-releases/jy0916"
            target="_blank"
            rel="noopener noreferrer"
          >
            {{ $t('rpcDisclaimerLinkOneText') }}
          </a>
        </template>
        <template v-slot:linkTwo>
          <a href="https://chainlist.org" target="_blank" rel="noopener noreferrer">
            {{ $t('rpcDisclaimerLinkTwoText') }}
          </a>
        </template>
        <template v-slot:linkThree>
          <a
            href="https://hackmd.io/@gozzy/tornado-cash-post-censorship#RPC"
            target="_blank"
            rel="noopener noreferrer"
          >
            {{ $t('rpcDisclaimerLinkThreeText') }}
          </a>
        </template>
      </i18n>
    </b-notification>

    <div class="columns">
      <div class="column is-half">
        <b-tabs v-model="activeTab" class="is-tornado" :animated="false" @input="tabChanged">
          <Deposit />
          <Withdraw :active-tab="activeTab" @get-key="onGetKey" />
        </b-tabs>
      </div>
      <Statistics />
    </div>
    <Txs />
  </div>
</template>
<script>
/* eslint-disable no-console */
import { mapState, mapGetters, mapActions } from 'vuex'

import Txs from '@/components/Txs'
import Deposit from '@/components/Deposit'
import Statistics from '@/components/Statistics'
import Withdraw from '@/components/withdraw/Withdraw'

export default {
  name: 'HomePage',
  components: {
    Txs,
    Deposit,
    Withdraw,
    Statistics
  },
  data() {
    return {
      activeTab: 0,
      isActive: false
    }
  },
  computed: {
    ...mapState('application', ['selectedInstance']),
    ...mapState('settings', ['isActiveNotification']),
    ...mapGetters('metamask', ['netId'])
  },
  watch: {
    netId() {
      if (this.activeTab === 1) {
        this.$store.dispatch('relayer/pickRandomRelayer', { type: 'tornado' })
      }
    }
  },
  created() {
    this.$store.dispatch('application/setNativeCurrency', { netId: this.netId })
    this.checkIsTrustedUrl()
  },
  methods: {
    ...mapActions('settings', ['disableNotification']),
    checkIsTrustedUrl() {
      const isIpfs = this.$isLoadedFromIPFS()
      if (!isIpfs) {
        this.disableNotification({ key: 'third' })
      }
    },
    onGetKey(fn) {
      this.getKeys = fn
    },
    async tabChanged(tabIndex) {
      if (tabIndex === 1) {
        this.$store.dispatch('relayer/pickRandomRelayer', { type: 'tornado' })

        if (typeof this.getKeys === 'function' && !this.isActive) {
          this.isActive = true
          const result = await this.getKeys()

          if (!result) {
            this.isActive = false
          }
        }
      } else {
        const userSelection = this.selectedInstance
        const stateSelection = this.selectedStatistic

        if (
          !stateSelection ||
          userSelection.amount !== stateSelection.amount ||
          userSelection.currency !== stateSelection.currency
        ) {
          this.$store.dispatch('application/setAndUpdateStatistic', {
            currency: userSelection.currency,
            amount: userSelection.amount
          })
        }
      }
    }
  }
}
</script>