feat: error page (#388)

* add ui error page

* bump btc-staking-ts

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.3",
-    "@babylonlabs-io/bbn-core-ui": "^0.1.0",
+    "@babylonlabs-io/bbn-core-ui": "^0.2.0",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",

src/app/components/Error/GenericError.tsx

@@ -1,6 +1,10 @@
+"use client";
+
+import { Button, Heading, Text } from "@babylonlabs-io/bbn-core-ui";
+import Link from "next/dist/client/link";
 import Image from "next/image";
 
-import GenericErrorCharacter from "@/app/assets/generic-error-character.svg";
+import BitcoinBlock from "@/app/assets/bitcoin-block.svg";
 
 import { Footer } from "../Footer/Footer";
 import { SimplifiedHeader } from "../Header/SimplifiedHeader";
@@ -12,30 +16,35 @@ interface Props {
 }
 
 export default function GenericError({
-  title = "Something goes wrong",
-  message = "There was an unexpected error that caused the website to crash.  You can report the issue in our forum, or reach out via email for assistance. Together, we can enhance our platform’s reliability!",
-  image = GenericErrorCharacter,
+  title = "Oops! Something Went Wrong",
+  message = `It looks like we’re experiencing a temporary issue on our end.
+  Our team is already on it, and we’ll have things back to normal as soon as possible. 
+  Please check back shortly, and thank you for your patience!`,
+  image = BitcoinBlock,
 }: Props) {
   return (
     <div className="h-full min-h-svh w-full flex flex-col justify-between">
-      <SimplifiedHeader />
-      <div className="container mx-auto flex justify-center p-6">
-        <div className="flex flex-row items-center justify-evenly">
-          <div className="grow-[5] flex flex-col items-center gap-6">
-            <div className="text-3xl font-semibold md:text-7xl">{title}</div>
-            <div className="md:hidden">
-              <Image src={GenericErrorCharacter} alt="Generic Error" />
-            </div>
-            <div className="divider my-1" />
-            <div className="text-sm">{message}</div>
-            <div className="flex flex-col gap-3 self-stretch md:flex-row md:w-[400px]">
-              <button className="btn btn-primary flex-1">Email Us</button>
-              <button className="btn btn-outline flex-1">Report the Bug</button>
-            </div>
-          </div>
-          <div className="hidden grow-[3] md:flex">
-            <Image src={image} alt="Generic Error" />
+      <SimplifiedHeader isMinimal />
+      <div className="container mx-auto py-12 px-6">
+        <div className="flex flex-col items-center justify-center gap-8">
+          <Image
+            src={image}
+            alt="Generic Error"
+            className="w-full h-auto max-w-[120px]"
+          />
+          <Heading variant="h5" className="text-primary-dark">
+            {title}
+          </Heading>
+          <div className="w-full max-w-[650px]">
+            <Text variant="body1" className="text-center text-primary-dark">
+              {message}
+            </Text>
           </div>
+          <Link href="/" passHref>
+            <Button variant="outlined" color="primary" className="w-full">
+              Back to homepage
+            </Button>
+          </Link>
         </div>
       </div>
       <Footer />

src/app/components/Footer/Footer.tsx

@@ -68,7 +68,7 @@ const iconLinks = [
 
 export const Footer: React.FC = () => {
   return (
-    <div className="hidden relative md:flex h-[238px] text-white bg-primary-main before:absolute before:h-3 before:w-2/3 before:bg-primary-main before:left-1/4 before:-top-2 text-primary-contrast">
+    <div className="relative md:flex h-[238px] text-white bg-primary-main before:absolute before:h-3 before:w-2/3 before:bg-primary-main before:left-1/4 before:-top-2 text-primary-contrast">
       <div className="container mx-auto flex flex-row items-center justify-around">
         <div className="flex flex-col">
           <div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2">

src/app/components/Header/SimplifiedHeader.tsx

@@ -1,12 +1,23 @@
+import { twJoin } from "tailwind-merge";
+
 import { shouldDisplayTestingMsg } from "@/config";
 
 import { Logo } from "../Logo/Logo";
 import { TestingInfo } from "../TestingInfo/TestingInfo";
 
-export const SimplifiedHeader = () => {
+export const SimplifiedHeader = ({
+  isMinimal = false,
+}: {
+  isMinimal?: boolean;
+}) => {
   return (
-    <nav>
-      <section className="bg-primary-main h-[300px] mb-[-188px]">
+    <nav className="w-full">
+      <section
+        className={twJoin(
+          "bg-primary-main w-full",
+          isMinimal ? "h-[84px]" : "h-[300px]",
+        )}
+      >
         <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
           <div className="flex flex-1">