From d7eed4262e0a024b7915d1c559bbcf012bfd3e5e Mon Sep 17 00:00:00 2001
From: Danil Kovtonyuk <danx.kov@gmail.com>
Date: Fri, 27 May 2022 19:28:20 +1000
Subject: [PATCH] fix: governance 404 page

---
 components/governance/Metrics.vue             |  4 +-
 components/governance/Proposal.vue            | 10 ++-
 .../icons/{Error404Icon.vue => ErrorIcon.vue} | 61 +++++++++++--------
 components/icons/index.js                     |  2 +-
 langs/en.json                                 |  9 ++-
 layouts/error.vue                             | 61 +++++++++++++++----
 pages/governance.vue                          | 10 +--
 pages/governance/_id.vue                      |  4 +-
 8 files changed, 114 insertions(+), 47 deletions(-)
 rename components/icons/{Error404Icon.vue => ErrorIcon.vue} (78%)

diff --git a/components/governance/Metrics.vue b/components/governance/Metrics.vue
index 9dc8e52..1761fd6 100644
--- a/components/governance/Metrics.vue
+++ b/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()
diff --git a/components/governance/Proposal.vue b/components/governance/Proposal.vue
index f843e04..eb75c09 100644
--- a/components/governance/Proposal.vue
+++ b/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 })
         }
       },
diff --git a/components/icons/Error404Icon.vue b/components/icons/ErrorIcon.vue
similarity index 78%
rename from components/icons/Error404Icon.vue
rename to components/icons/ErrorIcon.vue
index 74c8e03..45c48ca 100644
--- a/components/icons/Error404Icon.vue
+++ b/components/icons/ErrorIcon.vue
@@ -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%;
diff --git a/components/icons/index.js b/components/icons/index.js
index 5c48f3e..88a0bbd 100644
--- a/components/icons/index.js
+++ b/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'
diff --git a/langs/en.json b/langs/en.json
index e5ea717..1fe494d 100644
--- a/langs/en.json
+++ b/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",
diff --git a/layouts/error.vue b/layouts/error.vue
index ad9bf33..dec959d 100644
--- a/layouts/error.vue
+++ b/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>
-    <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>
diff --git a/pages/governance.vue b/pages/governance.vue
index 31e4df2..7f87400 100644
--- a/pages/governance.vue
+++ b/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() {
-        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' })
       }
     }
   },
diff --git a/pages/governance/_id.vue b/pages/governance/_id.vue
index 44d5cc3..ae5c40c 100644
--- a/pages/governance/_id.vue
+++ b/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()