Add not found page (#382)

* add not found page

* hide errors

* redirect to not_found

* remove unnecessary data

* use slot

* ok rel=noopener

package.json

@@ -35,6 +35,7 @@
     "vue-codemirror-lite": "^1.0.4",
     "vue-gtag": "^1.16.1",
     "vue-json-pretty": "^1.7.1",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.1.6",
     "vue-virtual-scroll-list": "^1.4.6",
     "vue2-dropzone": "^3.6.0",

src/components/Cards/EmptyState.vue

@@ -2,7 +2,8 @@
   <v-card flat :class="color || 'transparent'" class="mt-10 pa-10 d-flex flex-column align-center justify-center">
     <v-icon size="85" class="text--disabled">{{ icon }}</v-icon>
     <span class="display-1 font-weight-light text--disabled">{{ title }}</span>
-    <span class="body-1 font-weight-light text--secondary mt-1">{{ text }}</span>
+    <span v-if="!hasDescriptionSlot" class="body-1 font-weight-light text--secondary mt-1">{{ text }}</span>
+    <slot v-else name="description" />
   </v-card>
 </template>
 
@@ -13,7 +14,13 @@ export default {
     icon: String,
     title: String,
     text: String,
+    htmlText: String,
     color: String
+  },
+  computed: {
+    hasDescriptionSlot() {
+      return !!this.$slots.description;
+    }
   }
 }
 </script>

src/constants/errors_messages_responses.js

@@ -0,0 +1 @@
+export const ERROR_MESSAGE_404 = 'Request failed with status code 404';

src/main.js

@@ -8,6 +8,7 @@ import store from '@/store'
 import router from '@/router'
 
 import VueGtag from "vue-gtag";
+import VueMeta from 'vue-meta'
 
 import * as Sentry from "@sentry/vue";
 import { BrowserTracing } from "@sentry/tracing";
@@ -136,23 +137,20 @@ api.getConfig().then(response => {
       beforeEnter: async function (to, from, next) {
         return await api.getContractBySlug(to.params.slug)
           .then(res => next(`/${res.network}/${res.address}`))
-          .catch(() => next(`/search?text=${to.params.slug}`))
+          .catch(() => next(`/not_found`))
       }
     },
     {
       path: '*',
       redirect: to => {
         const text = urlExtractBase58(to.path) || to.path.split('/').join(' ');
-        if (to.query.redirected) {
-          return { name: 'search', query: { text, redirected: 'true' } };
-        }
         if (isKT1Address(text) || isTzAddress(text)) {
           return `/mainnet/${text}/operations`;
         }
         if (isOperationHash(text)) {
           return `/mainnet/opg/${text}/contents`;
         }
-        return { name: 'search', query: { text, redirected: 'true' } };
+        return { name: 'not_found' };
       }
     }
   ]);
@@ -193,6 +191,8 @@ api.getConfig().then(response => {
     });
   }
 
+  Vue.use(VueMeta);
+
   new Vue({
     router,
     store,

src/router/index.js

@@ -32,6 +32,7 @@ import BigMapHistory from '@/views/big_map/HistoryTab.vue'
 import DAppList from '@/views/dapps/List.vue'
 import DApp from '@/views/dapps/DApp.vue'
 import MainDApp from '@/views/dapps/Main.vue'
+import NotFound from "../views/errors/NotFound";
 
 Vue.use(VueRouter)
 
@@ -47,6 +48,13 @@ const router = new Router({
       },
       name: 'home'
     },
+    {
+      path: '/not_found',
+      components: {
+        default: NotFound,
+      },
+      name: 'not_found',
+    },
     {
       path: '/search',
       components: {

src/views/contract/Contract.vue

@@ -124,9 +124,13 @@ export default {
       return this.address.startsWith("KT");
     },
   },
+  destroyed() {
+    this.hideError();
+  },
   methods: {
     ...mapActions({
       showError: "showError",
+      hideError: "hideError",
     }),
     pushTo(obj) {
       return Object.assign({
@@ -175,7 +179,13 @@ export default {
           this.contract = res;
         })
         .catch((err) => {
-          this.showError(err.message);
+          if (err.code === 204) {
+            return this.$router.push({
+              name: 'not_found',
+            });
+          } else {
+            this.showError(err);
+          }
         })
         .finally(() => (this.contractLoading = false));
     },

src/views/contract/OperationsTab.vue

@@ -217,8 +217,11 @@ export default {
       return this.address.startsWith("KT");
     },
   },
+  destroyed() {
+    this.hideError();
+  },
   methods: {
-    ...mapActions(["showError"]),
+    ...mapActions(["showError", "hideError"]),
     compareOperations(a, b) {
       if (a.timestamp < b.timestamp) {
         return 1;
@@ -296,7 +299,6 @@ export default {
           }
         })
         .catch((err) => {
-          console.error(err);
           this.showError(err);
           this.downloaded = true;
         })

src/views/errors/NotFound.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <EmptyState
+      icon="mdi-code-brackets"
+      title="Error 404. Page not found."
+    >
+      <template #description>
+        <span class='body-1 font-weight-light text--secondary mt-1'>
+          Please, try again or write to our team in&nbsp;
+          <a class='no-decoration' href='https://discord.gg/aG8XKuwsQd' target='_blank' rel="noopener">Discord</a>.
+        </span>
+      </template>
+    </EmptyState>
+    <div class="d-flex justify-center">
+      <v-btn
+        class="text--secondary"
+        large depressed
+        color="border"
+        to="/"
+        elevation="0"
+      >
+        GO TO HOMEPAGE
+      </v-btn>
+      <v-btn
+        class="ml-6 text--secondary"
+        large depressed
+        color="border"
+        to="/search"
+        elevation="0"
+      >
+        ADVANCED SEARCH
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import EmptyState from "../../components/Cards/EmptyState";
+export default {
+  name: "NotFound",
+  components: {EmptyState},
+  metaInfo: {
+    meta: [
+      {
+        name: 'robots',
+        content: 'noindex',
+      },
+    ],
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

yarn.lock

@@ -11815,6 +11815,13 @@
     "vue-hot-reload-api" "^2.3.0"
     "vue-style-loader" "^4.1.0"
 
+"vue-meta@^2.4.0":
+  "integrity" "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw=="
+  "resolved" "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz"
+  "version" "2.4.0"
+  dependencies:
+    "deepmerge" "^4.2.2"
+
 "vue-router@^3.1.6":
   "integrity" "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
   "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz"