classic-ui/pages/index.vue
2023-07-14 11:33:54 -07:00

179 lines
4.8 KiB
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.ws/">{{ $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.social" 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://docs.tornado.ws/general/guides/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>