fix: governance 404 page

components/governance/Metrics.vue

@@ -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()

components/governance/Proposal.vue

@@ -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 })
         }
       },

components/icons/ErrorIcon.vue

@@ -1,5 +1,6 @@
 <template>
   <svg class="errorIcon" viewBox="0 0 402 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <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"
@@ -23,6 +24,7 @@
         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%;

components/icons/index.js

@@ -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'

langs/en.json

@@ -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",

layouts/error.vue

@@ -1,29 +1,61 @@
 <template>
   <div class="has-text-centered">
-    <Error404Icon />
+    <ErrorIcon :is404="statusCode === 404" />
     <h1 class="title is-1">{{ $t('errorPage.title') }}</h1>
+    <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() {
+  props: {
-    return {}
+    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>

pages/governance.vue

@@ -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() {
+        if (this.isEnabledGovernance) {
           this.fetchProposals({})
           this.fetchConstants()
+        }
       },
       immediate: true
     },
     isEnabledGovernance(isEnabled) {
       if (!isEnabled) {
-        this.$router.push('/')
+        this.$nuxt.error({ statusCode: 204, pageName: 'governance' })
       }
     }
   },

pages/governance/_id.vue

@@ -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()