ref: add errorPage component (#118)

components/UI/screens/errorScreen.tsx

@@ -5,19 +5,22 @@ type ErrorScreenProps = {
   buttonText?: string;
   onClick?: () => void;
   errorMessage?: string;
-  imgSrc: string;
 };
 
 const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({
   buttonText,
   onClick,
   errorMessage,
-  imgSrc,
 }) => {
   return (
-    <div className="sm:w-2/3 w-4/5 flex flex-col justify-center items-center">
-      <img src={imgSrc} height={300} width={300} alt="error image" />
-      <h1 className="sm:text-4xl text-3xl mt-10">
+    <div className="flex flex-col justify-center items-center h-screen">
+      <img
+        src="/visuals/animals/tiger.webp"
+        height={300}
+        width={300}
+        alt="error image"
+      />
+      <h1 className="sm:text-4xl text-3xl mt-5">
         {errorMessage ? errorMessage : "Shit ... an error occurred !"}
       </h1>
       {buttonText && onClick && (

components/pages/home/howToParticipate.tsx

@@ -22,23 +22,23 @@ const HowToParticipate = () => {
               description:
                 "Participation in Starknet quests requires a Stark Domain. This domain will serve as your on-chain representation and is compatible with all major Starknet apps such as ArgentX, Braavos, and Starkscan.",
               icon: "/icons/starknet.svg",
-              banner: "/visuals/getYourStarkDomain.webp",
+              banner: "/visuals/partners/getYourStarkDomain.webp",
             },
             {
               title: "Collect NFTs in Starknet Quest",
               subtitle: "02",
               description:
                 "Complete Starknet quests to earn exclusive NFTs for each protocol, or simply purchase them to enhance your collection!",
               icon: "/icons/crown.svg",
-              banner: "/visuals/collectNFTsInStarknetQuest.webp",
+              banner: "/visuals/partners/collectNFTsInStarknetQuest.webp",
             },
             {
               title: "Build your Starknet Land",
               subtitle: "03",
               description:
                 "Experience your Starknet on-chain reputation like never before with your Starknet land, directly influenced by your Starknet Quest NFT collection and overall Starknet activities. The more you engage and develop your land, the greater are your chances of receiving rewards for your on-chain activities. ",
               icon: "/icons/verified.svg",
-              banner: "/visuals/buildYourStarknetLand.webp",
+              banner: "/visuals/partners/buildYourStarknetLand.webp",
             },
           ]}
         />

pages/[addressOrDomain].tsx

@@ -16,6 +16,7 @@ import { minifyAddress } from "../utils/stringService";
 import Button from "../components/UI/button";
 import PieChart from "../components/UI/pieChart";
 import { utils } from "starknetid.js";
+import ErrorScreen from "../components/UI/screens/errorScreen";
 
 const AddressOrDomain: NextPage = () => {
   const router = useRouter();
@@ -293,11 +294,11 @@ const AddressOrDomain: NextPage = () => {
 
   if (notFound) {
     return (
-      <div
-        className={`h-screen flex justify-center items-center ${styles.name}`}
-      >
-        <h2 className={styles.notFound}>Profile not found</h2>
-      </div>
+      <ErrorScreen
+        errorMessage="Profile or Page not found"
+        buttonText="Go back to quests"
+        onClick={() => router.push("/")}
+      />
     );
   }
 

pages/not-connected.tsx

@@ -1,10 +1,9 @@
 import { NextPage } from "next";
-import styles from "../styles/profile.module.css";
 import { useAccount, useConnectors } from "@starknet-react/core";
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import Button from "../components/UI/button";
 import Wallets from "../components/UI/wallets";
+import ErrorScreen from "../components/UI/screens/errorScreen";
 
 const NotConnected: NextPage = () => {
   const { address } = useAccount();
@@ -18,22 +17,15 @@ const NotConnected: NextPage = () => {
 
   return (
     <>
-      <div className={`h-screen flex justify-center items-center flex-col`}>
-        <h2 className={`${styles.notFound} ${styles.name} mb-5`}>
-          You&apos;re not connected
-        </h2>
-        <div className="text-background ml-5 mr-5">
-          <Button
-            onClick={
-              available.length === 1
-                ? () => connect(available[0])
-                : () => setHasWallet(true)
-            }
-          >
-            Connect
-          </Button>
-        </div>
-      </div>
+      <ErrorScreen
+        errorMessage="You're not connected !"
+        buttonText="Connect wallet"
+        onClick={
+          available.length === 1
+            ? () => connect(available[0])
+            : () => setHasWallet(true)
+        }
+      />
       <Wallets closeWallet={() => setHasWallet(false)} hasWallet={hasWallet} />
     </>
   );

pages/partnership.tsx

@@ -37,7 +37,7 @@ const Partnership: NextPage = () => {
               />
             </div>
             <img
-              src="/visuals/partnershipHeader.webp"
+              src="/visuals/partners/partnershipHeader.webp"
               className={styles.headerImg}
             />
           </div>
@@ -72,39 +72,39 @@ const Partnership: NextPage = () => {
                     description:
                       "Accelerate user onboarding and reward authenticity with on-chain quests that showcase the unique capabilities and benefits of your Starknet app.",
                     icon: "/icons/starknet.svg",
-                    banner: "/visuals/getYourStarkDomain.webp",
+                    banner: "/visuals/partners/getYourStarkDomain.webp",
                   },
                   {
                     title: "Completely Customizable",
                     subtitle: "Mix on and off chain tasks",
                     description:
                       "Unlock the potential of a quest designed to align with your project's style and need. Quest's tasks and rewards are completely programmable with on and off-chain services to perfectly fit your need. ",
                     icon: "/icons/clipboard.svg",
-                    banner: "/visuals/buildYourStarknetLand.webp",
+                    banner: "/visuals/partners/buildYourStarknetLand.webp",
                   },
                   {
                     title: "Airdrops are so 2021",
                     subtitle: "Authentic engagement",
                     description:
                       "Move beyond ineffective reward distribution. Experience a better way to reward authenticity without spending your precious tokens.",
                     icon: "/icons/user.svg",
-                    banner: "/visuals/airdropsAreSo2021.webp",
+                    banner: "/visuals/partners/airdropsAreSo2021.webp",
                   },
                   {
                     title: "Meaningful Rewards",
                     subtitle: "Empower, captivate, foster loyalty",
                     description:
                       "Cultivate loyalty and unlock new dimensions of engagement through Starknet Quests, offering a unique gamification experience.",
                     icon: "/icons/crown.svg",
-                    banner: "/visuals/meaningfulRewards.webp",
+                    banner: "/visuals/partners/meaningfulRewards.webp",
                   },
                   {
                     title: "Sybil-resistant marketing",
                     subtitle: "Genuine interactions, fraud protection",
                     description:
                       "By using the Starknet ID infrastructure we eliminate bots and robots from your campaigns and stimulate your growth with real Starknet users.",
                     icon: "/icons/shield.svg",
-                    banner: "/visuals/sybilResistantMarketing.webp",
+                    banner: "/visuals/partners/sybilResistantMarketing.webp",
                   },
                 ]}
               />

pages/quest/[questPage].tsx

@@ -20,6 +20,7 @@ import { Skeleton } from "@mui/material";
 import TasksSkeleton from "../../components/skeletons/tasksSkeleton";
 import RewardSkeleton from "../../components/skeletons/rewardSkeleton";
 import { generateCodeChallenge } from "../../utils/codeChallenge";
+import ErrorScreen from "../../components/UI/screens/errorScreen";
 
 const splitByNftContract = (
   rewards: EligibleReward[]
@@ -47,7 +48,6 @@ const QuestPage: NextPage = () => {
   } = router.query;
   const { address } = useAccount();
   const { provider } = useProvider();
-
   const [quest, setQuest] = useState<QuestDocument>({
     id: 0,
     name: "loading",
@@ -74,6 +74,7 @@ const QuestPage: NextPage = () => {
   );
   const [mintCalldata, setMintCalldata] = useState<Call[]>();
   const [taskError, setTaskError] = useState<TaskError>();
+  const [errorPageDisplay, setErrorPageDisplay] = useState(false);
 
   // this fetches quest data
   useEffect(() => {
@@ -83,6 +84,12 @@ const QuestPage: NextPage = () => {
         if ((data as QuestDocument).name) {
           setQuest(data as QuestDocument);
         }
+      })
+      .catch((err) => {
+        if (questId) {
+          console.log(err);
+          setErrorPageDisplay(true);
+        }
       });
   }, [questId]);
 
@@ -255,7 +262,13 @@ const QuestPage: NextPage = () => {
     }
   };
 
-  return (
+  return errorPageDisplay ? (
+    <ErrorScreen
+      errorMessage="This quest doesn't exist !"
+      buttonText="Go back to quests"
+      onClick={() => router.push("/")}
+    />
+  ) : (
     <div className={homeStyles.screen}>
       <div className={styles.imageContainer}>
         {quest.issuer === "loading" ? (

styles/partnership.module.css

@@ -43,7 +43,7 @@
   right: 0;
   bottom: 0;
   z-index: -6;
-  width: max(900px, 65%);
+  width: max(400px, 60%);
   aspect-ratio: 1;
   transform: rotate3d(10, -2, -1.4, calc(var(--scroll) * 0.04deg))
     scale(min(calc(1 + var(--scroll) / 10000), 1.4)) translate(20%, 20%);