TornadoCash/classic-ui-dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: governance 404 page

Browse Source
This commit is contained in:
Danil Kovtonyuk 2022-05-27 19:28:20 +10:00
parent acf0f2e818
commit d7eed4262e
8 changed files with 114 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/governance/Metrics.vue
View File

@ -60,7 +60,7 @@ export default {
balance: (state) => fromWei(state.balance)
}),
...mapState('governance/gov', ['lockedBalance', 'delegatedBalance']),
...mapGetters('governance/gov', ['isFetchingBalances']),
...mapGetters('governance/gov', ['isFetchingBalances', 'isEnabledGovernance']),
...mapGetters('governance/staking', ['reward', 'isCheckingReward']),
...mapGetters('token', ['toDecimals']),
...mapState('metamask', ['isInitialized']),
@ -74,7 +74,7 @@ export default {
watch: {
isInitialized: {
handler(isInitialized) {
if (isInitialized) {
if (isInitialized && this.isEnabledGovernance) {
this.checkReward()
this.fetchTokenBalance()
this.fetchTokenAllowance()

10
components/governance/Proposal.vue
View File

@ -188,7 +188,13 @@ export default {
...mapState('metamask', ['ethAccount', 'isInitialized']),
...mapGetters('txHashKeeper', ['addressExplorerUrl']),
...mapGetters('metamask', ['networkConfig']),
...mapGetters('governance/gov', ['votingPower', 'constants', 'votingPeriod', 'isFetchingBalances']),
...mapGetters('governance/gov', [
'votingPower',
'constants',
'votingPeriod',
'isFetchingBalances',
'isEnabledGovernance'
]),
readyForAction() {
return (
this.data.status !== 'active' ||
@ -219,7 +225,7 @@ export default {
watch: {
isInitialized: {
handler(isInitialized) {
if (isInitialized) {
if (isInitialized && this.isEnabledGovernance) {
this.fetchReceipt({ id: this.data.id })
}
},

61
components/icons/Error404Icon.vue → components/icons/ErrorIcon.vue
View File

@ -1,28 +1,30 @@
<template>
<svg class="errorIcon" viewBox="0 0 402 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19 89L0.5 114V136H47.5L43.5 110.5L33.5 110L40.5 100.5C40.1667 99 38.3 95.2 33.5 92C28.7 88.8 21.8333 88.6667 19 89Z"
fill="#182922"
/>
<path d="M66 36.5L59.5 34.5L73 17H99.5V75L82 59.5L66 36.5Z" fill="#182922" />
<path
d="M76.5 168.5L69.5 173.5V181H99.5V136H126.5V110.5H99.5V97L91.5 103L84.5 117L83.5 141.5L81.5 157L76.5 168.5Z"
fill="#182922"
/>
<path d="M320 78.5L309 70L275.5 115V136H320L330 111L308.5 110L326 87L320 78.5Z" fill="#182922" />
<path
d="M327.5 55.5L320.5 54L348.5 17H374.5V42.5H362L354.5 45L345 51.5L336.5 55.5H327.5Z"
fill="#182922"
/>
<path d="M362.5 150L344 158.5L345 181.5H374.5V148L362.5 150Z" fill="#182922" />
<path
d="M125.827 135.769H126.327V135.269V111.269V110.769H125.827H98.7913V17.5771V17.0771H98.2913H73.739H73.4888L73.3388 17.2775L0.59975 114.431L0.5 114.565V114.731V135.269V135.769H1H70.0266V180.269V180.769H70.5266H98.2913H98.7913V180.269V135.769H125.827ZM401 135.769H401.5V135.269V111.269V110.769H401H373.965V17.5771V17.0771H373.465H348.912H348.662L348.512 17.2775L275.773 114.431L275.673 114.565V114.731V135.269V135.769H276.173H345.2V180.269V180.769H345.7H373.465H373.965V180.269V135.769H401ZM70.0266 110.769H31.624L70.0266 61.4936V110.769ZM345.2 110.769H306.797L345.2 61.4936V110.769Z"
stroke="#44F1A6"
/>
<path
d="M60.481 34C64.0903 35.3589 67.2333 37.4449 69.5 40.5C78.612 52.7815 85.2128 68.202 99.5 74.8228M99.5 96.1312C92.2684 100.818 84.2893 109.613 84 123.5C83.5651 144.376 83.8868 167.521 69.5 173.194M48 136.282C44.2352 128.755 44.4352 119.12 43.4817 110.5M40.9125 99.5C39.2955 95.8589 36.73 92.88 32.5 91.0001C28.0552 89.0246 23.4277 88.6047 19 89.0797M309 69.8078C315.516 74.2604 322.053 79.9477 326.309 86.5M330.15 110C327.96 118.791 322.802 127.295 319.5 136.409M320.5 53.5727C325.17 55.5529 331.611 56.7962 338.5 54.5C349.932 50.6892 353.835 39.7068 374.5 42.2019M374.5 148.114C361.589 148.856 351.877 153.158 344.862 158.5"
stroke="#44F1A6"
/>
<template v-if="is404">
<path
d="M19 89L0.5 114V136H47.5L43.5 110.5L33.5 110L40.5 100.5C40.1667 99 38.3 95.2 33.5 92C28.7 88.8 21.8333 88.6667 19 89Z"
fill="#182922"
/>
<path d="M66 36.5L59.5 34.5L73 17H99.5V75L82 59.5L66 36.5Z" fill="#182922" />
<path
d="M76.5 168.5L69.5 173.5V181H99.5V136H126.5V110.5H99.5V97L91.5 103L84.5 117L83.5 141.5L81.5 157L76.5 168.5Z"
fill="#182922"
/>
<path d="M320 78.5L309 70L275.5 115V136H320L330 111L308.5 110L326 87L320 78.5Z" fill="#182922" />
<path
d="M327.5 55.5L320.5 54L348.5 17H374.5V42.5H362L354.5 45L345 51.5L336.5 55.5H327.5Z"
fill="#182922"
/>
<path d="M362.5 150L344 158.5L345 181.5H374.5V148L362.5 150Z" fill="#182922" />
<path
d="M125.827 135.769H126.327V135.269V111.269V110.769H125.827H98.7913V17.5771V17.0771H98.2913H73.739H73.4888L73.3388 17.2775L0.59975 114.431L0.5 114.565V114.731V135.269V135.769H1H70.0266V180.269V180.769H70.5266H98.2913H98.7913V180.269V135.769H125.827ZM401 135.769H401.5V135.269V111.269V110.769H401H373.965V17.5771V17.0771H373.465H348.912H348.662L348.512 17.2775L275.773 114.431L275.673 114.565V114.731V135.269V135.769H276.173H345.2V180.269V180.769H345.7H373.465H373.965V180.269V135.769H401ZM70.0266 110.769H31.624L70.0266 61.4936V110.769ZM345.2 110.769H306.797L345.2 61.4936V110.769Z"
stroke="#44F1A6"
/>
<path
d="M60.481 34C64.0903 35.3589 67.2333 37.4449 69.5 40.5C78.612 52.7815 85.2128 68.202 99.5 74.8228M99.5 96.1312C92.2684 100.818 84.2893 109.613 84 123.5C83.5651 144.376 83.8868 167.521 69.5 173.194M48 136.282C44.2352 128.755 44.4352 119.12 43.4817 110.5M40.9125 99.5C39.2955 95.8589 36.73 92.88 32.5 91.0001C28.0552 89.0246 23.4277 88.6047 19 89.0797M309 69.8078C315.516 74.2604 322.053 79.9477 326.309 86.5M330.15 110C327.96 118.791 322.802 127.295 319.5 136.409M320.5 53.5727C325.17 55.5529 331.611 56.7962 338.5 54.5C349.932 50.6892 353.835 39.7068 374.5 42.2019M374.5 148.114C361.589 148.856 351.877 153.158 344.862 158.5"
stroke="#44F1A6"
/>
</template>
<path
d="M214.602 71.6778L199.102 192.322L230.693 110.442L251.904 54.124L227.767 67.2893L214.602 71.6778Z"
fill="#1D3F30"
@ -85,7 +87,18 @@
</svg>
</template>
<style>
<script>
export default {
props: {
is404: {
type: Boolean,
default: true
}
}
}
</script>
<style scoped>
.errorIcon {
max-width: 402px;
width: 100%;

2
components/icons/index.js
View File

@ -2,4 +2,4 @@ export { default as LinkIcon } from './LinkIcon'
export { default as SettingsIcon } from './SettingsIcon'
export { default as EthPurchaseArrow } from './EthPurchaseArrow'
export { default as FlagIcon } from './FlagIcon'
export { default as Error404Icon } from './Error404Icon'
export { default as ErrorIcon } from './ErrorIcon'

9
langs/en.json
View File

@ -288,7 +288,14 @@
"errorPage": {
"title": "Oooops!",
"description": "Page not found.",
"button": "Launch App"
"button": "Launch App",
"switchNetwork": {
"pageName": {
"governance": "Tornado Cash Governance"
},
"description": "There is not {pageName} on the selected network. Please switch to Ethereum Mainnet.",
"button": "Switch network"
}
},
"rejectedRequest": "You rejected {description} request",
"updateCacheEvents": "Syncing deposit events. Please wait",

61
layouts/error.vue
View File

@ -1,29 +1,61 @@
<template>
<div class="has-text-centered">
<Error404Icon />
<ErrorIcon :is404="statusCode === 404" />
<h1 class="title is-1">{{ $t('errorPage.title') }}</h1>
<p class="p mb-6">{{ $t('errorPage.description') }}</p>
<b-button type="is-primary" icon-left="logo" outlined @click="handleRedirect">{{
$t('errorPage.button')
}}</b-button>
<template v-if="statusCode === 204">
<p class="p mb-6">
{{
$t('errorPage.switchNetwork.description', {
pageName: $t(`errorPage.switchNetwork.pageName.${error.pageName}`)
})
}}
</p>
<b-button type="is-primary" icon-left="logo" outlined @click="handleSwitchNetwork">{{
$t('errorPage.switchNetwork.button')
}}</b-button>
</template>
<template v-else>
<p class="p mb-6">{{ $t('errorPage.description') }}</p>
<b-button type="is-primary" icon-left="logo" outlined @click="handleRedirect">{{
$t('errorPage.button')
}}</b-button>
</template>
</div>
</template>
<script>
import { Error404Icon } from '@/components/icons'
import { mapActions } from 'vuex'
import { ErrorIcon } from '@/components/icons'
export default {
name: 'ErrorPage',
components: {
Error404Icon
ErrorIcon
},
data() {
return {}
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode() {
return this.error?.statusCode || 404
}
},
computed: {},
mounted() {},
methods: {
...mapActions('metamask', ['networkChangeHandler']),
handleRedirect() {
this.$router.push('/')
},
async handleSwitchNetwork() {
const providerName = window.localStorage.getItem('provider')
await this.networkChangeHandler({ netId: 1 })
if (!providerName) {
this.$router.go()
}
}
},
head() {
@ -35,3 +67,10 @@ export default {
}
}
</script>
<style scoped>
.p {
max-width: 560px;
margin: 0 auto;
}
</style>

10
pages/governance.vue
View File

@ -12,7 +12,7 @@ import Metrics from '@/components/governance/Metrics'
export default {
middleware({ store, error }) {
if (!store.getters['governance/gov/isEnabledGovernance']) {
return error({ statusCode: 404 })
return error({ statusCode: 204, pageName: 'governance' })
}
},
components: {
@ -25,14 +25,16 @@ export default {
watch: {
isInitialized: {
handler() {
this.fetchProposals({})
this.fetchConstants()
if (this.isEnabledGovernance) {
this.fetchProposals({})
this.fetchConstants()
}
},
immediate: true
},
isEnabledGovernance(isEnabled) {
if (!isEnabled) {
this.$router.push('/')
this.$nuxt.error({ statusCode: 204, pageName: 'governance' })
}
}
},

4
pages/governance/_id.vue
View File

@ -21,7 +21,7 @@ export default {
},
computed: {
...mapState('governance/gov', ['proposals']),
...mapGetters('governance/gov', ['isFetchingProposals']),
...mapGetters('governance/gov', ['isFetchingProposals', 'isEnabledGovernance']),
...mapState('metamask', ['isInitialized']),
proposal() {
return this.proposals[this.$route.params.id - 1]
@ -30,7 +30,7 @@ export default {
watch: {
isInitialized: {
handler(isInitialized) {
if (isInitialized) {
if (isInitialized && this.isEnabledGovernance) {
this.fetchBalances()
this.fetchedLockedTimestamp()
this.fetchDelegatee()