update 404 page #5551

packages/kintsugi-next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@interlay/monetary-js": "^0.5.3",
     "@next/env": "^13.3.0",
-    "@osn/icons": "^1.173.0",
+    "@osn/icons": "^1.174.0",
     "@polkadot/util-crypto": "13.2.2",
     "@svgr/webpack": "^7.0.0",
     "bignumber.js": "^9.0.2",

packages/kintsugi-next/pages/404.js

@@ -1,3 +1,3 @@
-import Page404 from "next-common/components/pages/404";
+import Page404 from "@subsquare/next/pages/404";
 
 export default Page404;

packages/next-common/components/layout/errorLayout.jsx

@@ -0,0 +1,57 @@
+import { LinkElement, LinkEmail, LinkTelegram } from "@osn/icons/subsquare";
+import ThemeModeProvider from "next-common/context/theme";
+import SecondaryButton from "next-common/lib/button/secondary";
+import Link from "next/link";
+import ExternalLink from "../externalLink";
+
+const contactLinks = [
+  {
+    name: "Telegram",
+    link: "https://t.me/opensquare",
+    icon: LinkTelegram,
+  },
+  {
+    name: "Element",
+    link: "https://app.element.io/#/room/#opensquare:matrix.org",
+    icon: LinkElement,
+  },
+  {
+    name: "Email",
+    link: "mailto:yongfeng@opensquare.network",
+    icon: LinkEmail,
+  },
+];
+
+export default function ErrorLayout({ icon, title, description }) {
+  return (
+    <ThemeModeProvider defaultThemeMode="system">
+      <div className="h-screen flex flex-col items-center justify-center gap-y-6 text-textPrimary text14Medium">
+        {icon}
+
+        <div className="flex flex-col items-center">
+          <div className="text20Bold">{title}</div>
+          <div className="mt-2 text-textTertiary">{description}</div>
+        </div>
+
+        <Link href="/">
+          <SecondaryButton>Go Back Home</SecondaryButton>
+        </Link>
+
+        <div className="flex flex-col items-center gap-y-2">
+          <div className="text-textSecondary">Contact Support</div>
+          <div className="flex items-center gap-x-2">
+            {contactLinks.map((contact) => (
+              <ExternalLink
+                externalIcon={false}
+                href={contact.link}
+                key={contact.name}
+              >
+                <contact.icon className="w-5 h-5 text-textTertiary" />
+              </ExternalLink>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ThemeModeProvider>
+  );
+}

packages/next-common/package.json

@@ -16,7 +16,7 @@
     "@interlay/monetary-js": "0.5.4",
     "@mimirdev/apps-inject": "^0.3.0",
     "@mimirdev/apps-sdk": "^0.2.0",
-    "@osn/icons": "^1.173.0",
+    "@osn/icons": "^1.174.0",
     "@osn/polkadot-react-identicon": "^1.0.10",
     "@osn/previewer": "^2.0.0",
     "@osn/provider-options": "1.1.0",

packages/next/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@next/env": "^13.3.0",
-    "@osn/icons": "^1.173.0",
+    "@osn/icons": "^1.174.0",
     "@svgr/webpack": "^7.0.0",
     "bignumber.js": "^9.0.2",
     "chartjs-plugin-gradient": "^0.6.1",

packages/next/pages/404.js

@@ -1,3 +1,17 @@
-import Page404 from "next-common/components/pages/404";
+import { Img404Dark, Img404Light } from "@osn/icons/subsquare";
+import ErrorLayout from "next-common/components/layout/errorLayout";
 
-export default Page404;
+export default function Page404() {
+  return (
+    <ErrorLayout
+      icon={
+        <>
+          <Img404Light className="dark:hidden" />
+          <Img404Dark className="hidden dark:block" />
+        </>
+      }
+      title="404 Page Not Found"
+      description="You may mistyped the url or the page has been moved"
+    />
+  );
+}

packages/next/pages/_error.jsx

@@ -1,36 +1,9 @@
-import {
-  ImgErrorDark,
-  ImgErrorLight,
-  LinkElement,
-  LinkEmail,
-  LinkTelegram,
-} from "@osn/icons/subsquare";
-import ExternalLink from "next-common/components/externalLink";
-import ThemeModeProvider from "next-common/context/theme";
-import SecondaryButton from "next-common/lib/button/secondary";
+import { ImgErrorDark, ImgErrorLight } from "@osn/icons/subsquare";
+import ErrorLayout from "next-common/components/layout/errorLayout";
 import { reportClientError } from "next-common/services/reportClientError";
 import { CHAIN } from "next-common/utils/constants";
-import Link from "next/link";
 import { useEffect } from "react";
 
-const contactLinks = [
-  {
-    name: "Telegram",
-    link: "https://t.me/opensquare",
-    icon: LinkTelegram,
-  },
-  {
-    name: "Element",
-    link: "https://app.element.io/#/room/#opensquare:matrix.org",
-    icon: LinkElement,
-  },
-  {
-    name: "Email",
-    link: "mailto:yongfeng@opensquare.network",
-    icon: LinkEmail,
-  },
-];
-
 function getErrorReason(statusCode) {
   const reasons = {
     500: {
@@ -67,40 +40,16 @@ function ErrorPage({ statusCode, err, isServerError, reqUrl }) {
   const { title, description } = getErrorReason(statusCode);
 
   return (
-    <ThemeModeProvider defaultThemeMode="system">
-      <div className="h-screen flex flex-col items-center justify-center gap-y-6 text-textPrimary text14Medium">
-        <ImgErrorLight className="dark:hidden" />
-        <ImgErrorDark className="hidden dark:block" />
-
-        <div className="flex flex-col items-center">
-          <div className="text20Bold">
-            {statusCode} {title}
-          </div>
-          <div className="mt-2 text-textTertiary">{description}</div>
-        </div>
-
-        <Link href="/">
-          <SecondaryButton>Go Back Home</SecondaryButton>
-        </Link>
-
-        <div className="flex flex-col items-center gap-y-2">
-          <div className="text-textSecondary">Contact Support</div>
-          <div className="flex items-center gap-x-2">
-            {contactLinks.map((contact) => {
-              return (
-                <ExternalLink
-                  externalIcon={false}
-                  href={contact.link}
-                  key={contact.name}
-                >
-                  <contact.icon className="w-5 h-5 text-textTertiary" />
-                </ExternalLink>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </ThemeModeProvider>
+    <ErrorLayout
+      icon={
+        <>
+          <ImgErrorLight className="dark:hidden" />
+          <ImgErrorDark className="hidden dark:block" />
+        </>
+      }
+      title={`${statusCode} ${title}`}
+      description={description}
+    />
   );
 }
 

yarn.lock

@@ -2847,10 +2847,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@osn/icons@npm:^1.173.0":
-  version: 1.173.0
-  resolution: "@osn/icons@npm:1.173.0"
-  checksum: 7a39a2ac8ec13125c8f588aa53e5d95e74a741e1ec2d99e46905cc0a52edef58ffdb30de415970f6eed5d7f570c1302ff7828ef10dba3437f9a5b35a69bda28d
+"@osn/icons@npm:^1.174.0":
+  version: 1.174.0
+  resolution: "@osn/icons@npm:1.174.0"
+  checksum: 90a2811be6611bd42c04a6baab908113093263ee7e86c8ca09cc08c8fd0bcb38c1b0d5e61da64cf6f1bda6ef31442138f172e17fa0d8a8914953a61ef9e23f47
   languageName: node
   linkType: hard
 
@@ -5687,7 +5687,7 @@ __metadata:
     "@interlay/monetary-js": ^0.5.3
     "@next/env": ^13.3.0
     "@osn/eslint-config": ^1.0.2
-    "@osn/icons": ^1.173.0
+    "@osn/icons": ^1.174.0
     "@polkadot/util-crypto": 13.2.2
     "@svgr/webpack": ^7.0.0
     "@types/lodash-es": ^4.17.12
@@ -5723,7 +5723,7 @@ __metadata:
     "@next/bundle-analyzer": ^14.2.4
     "@next/env": ^13.3.0
     "@osn/eslint-config": ^1.0.2
-    "@osn/icons": ^1.173.0
+    "@osn/icons": ^1.174.0
     "@svgr/webpack": ^7.0.0
     "@types/lodash-es": ^4.17.12
     bignumber.js: ^9.0.2
@@ -12896,7 +12896,7 @@ __metadata:
     "@mimirdev/apps-inject": ^0.3.0
     "@mimirdev/apps-sdk": ^0.2.0
     "@osn/eslint-config": ^1.0.2
-    "@osn/icons": ^1.173.0
+    "@osn/icons": ^1.174.0
     "@osn/polkadot-react-identicon": ^1.0.10
     "@osn/previewer": ^2.0.0
     "@osn/provider-options": 1.1.0