Add error handle modal

components/error-modal/index.tsx

@@ -0,0 +1,151 @@
+import color from "../../styles/color";
+import { FunctionComponent } from "react";
+import ReactModal from "react-modal";
+import { ErrorMessage } from "../../types";
+import styled from "styled-components";
+
+import Image from "next/image";
+interface Props {
+  isModalOpen: boolean;
+  onCloseModal: () => void;
+  errorMessage?: ErrorMessage;
+}
+
+import ErrorIcon from "../../public/images/svg/error-icon.svg";
+import ArrowLeftIcon from "../../public/images/svg/arrow-left.svg";
+import { useRouter } from "next/router";
+
+export const ErrorModal: FunctionComponent<Props> = (props) => {
+  const router = useRouter();
+  const { isModalOpen, onCloseModal, errorMessage } = props;
+
+  const onClose = async () => {
+    if (errorMessage?.path) {
+      await router.push(errorMessage.path);
+    }
+
+    onCloseModal();
+  };
+
+  return (
+    <ReactModal
+      isOpen={isModalOpen}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { background: "#121212cc" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          padding: 0,
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          background: color.grey["800"],
+          border: 0,
+        },
+      }}
+    >
+      <ModalContainer>
+        <ErrorTitleContainer>
+          <ErrorImageContainer>
+            <Image
+              src={ErrorIcon}
+              fill={true}
+              sizes="2.5rem"
+              alt="error icon"
+            />
+          </ErrorImageContainer>
+          Error
+        </ErrorTitleContainer>
+
+        <ErrorDescription>{errorMessage?.message}</ErrorDescription>
+
+        {errorMessage?.path ? (
+          <ErrorBackButton onClick={onClose}>
+            <ErrorBackIconContainer>
+              <Image
+                src={ArrowLeftIcon}
+                fill={true}
+                sizes="1.5rem"
+                alt="back button icon"
+              />
+            </ErrorBackIconContainer>
+            GO BACK TO HOME
+          </ErrorBackButton>
+        ) : null}
+      </ModalContainer>
+    </ReactModal>
+  );
+};
+
+const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 32rem;
+
+  padding: 2.5rem 2.25rem;
+`;
+
+const ErrorTitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+
+  align-items: center;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 2.5rem;
+
+  color: ${color.white};
+`;
+
+const ErrorImageContainer = styled.div`
+  width: 2.5rem;
+  height: 2.5rem;
+
+  position: relative;
+`;
+
+const ErrorDescription = styled.div`
+  margin-top: 1rem;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.25rem;
+
+  color: ${color.grey["300"]};
+`;
+
+const ErrorBackButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.3rem;
+
+  margin-top: 2.5rem;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.125rem;
+
+  color: ${color.grey["100"]};
+
+  cursor: pointer;
+`;
+
+const ErrorBackIconContainer = styled.div`
+  width: 1.5rem;
+  height: 1.5rem;
+
+  position: relative;
+`;

pages/verification/index.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import {
   ChainItemType,
   DisabledChainItemType,
+  ErrorMessage,
   QueryError,
   RegisteredAddresses,
   TwitterProfileType,
@@ -58,6 +59,7 @@ import { makeClaimMessage, makeSetRecordMessage } from "../../messages";
 import Axios from "axios";
 import { BackButton } from "../../components/back-button";
 import { FinalCheckModal } from "../../components/final-check-modal";
+import { ErrorModal } from "../../components/error-modal";
 
 export default function VerificationPage() {
   const router = useRouter();
@@ -93,6 +95,8 @@ export default function VerificationPage() {
   const [isOwner, setIsOwner] = useState(false);
 
   const [isModalOpen, setModalOpen] = useState(false);
+  const [isErrorModalOpen, setErrorModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage>();
 
   useEffect(() => {
     init();
@@ -203,8 +207,11 @@ export default function VerificationPage() {
           setRegisteredChainList(addressesQueryResponse.data.addresses);
         }
       } catch (error) {
-        if (error instanceof Error && error.message === TWITTER_LOGIN_ERROR) {
-          await router.push("/");
+        if (error instanceof Error) {
+          if (error.message === TWITTER_LOGIN_ERROR) {
+            setErrorMessage({ message: TWITTER_LOGIN_ERROR, path: "/" });
+            setErrorModalOpen(true);
+          }
         }
 
         console.error(error);
@@ -227,7 +234,8 @@ export default function VerificationPage() {
 
       return keplrWallet;
     } else {
-      ErrorHandler(KEPLR_NOT_FOUND_ERROR);
+      setErrorMessage({ message: KEPLR_NOT_FOUND_ERROR, path: "/" });
+      setErrorModalOpen(true);
     }
   };
 
@@ -399,7 +407,17 @@ export default function VerificationPage() {
       }
     } catch (error) {
       if (Axios.isAxiosError(error)) {
-        console.error((error?.response?.data as QueryError).message);
+        setErrorMessage({
+          message: (error?.response?.data as QueryError).message,
+        });
+        setErrorModalOpen(true);
+        return;
+      }
+
+      if (error instanceof Error) {
+        console.log(error.message);
+        setErrorMessage({ message: error.message });
+        setErrorModalOpen(true);
       }
     } finally {
       setIsLoadingRegistration(false);
@@ -490,6 +508,12 @@ export default function VerificationPage() {
         onClickRegisterButton={handleRegistration}
         isLoadingRegistration={isLoadingRegistration}
       />
+
+      <ErrorModal
+        isModalOpen={isErrorModalOpen}
+        onCloseModal={() => setErrorModalOpen(false)}
+        errorMessage={errorMessage}
+      />
     </Container>
   );
 }

public/images/svg/error-icon.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 20C35 11.7188 28.2812 5 20 5C11.7188 5 5 11.7188 5 20C5 28.2813 11.7188 35 20 35C28.2812 35 35 28.2813 35 20Z" stroke="#FBCF32" stroke-width="1.95" stroke-miterlimit="10"/>
+<path d="M18.3344 13.3945L19.7441 22.5057C19.7895 22.7994 20.2125 22.7994 20.258 22.5057L21.6649 13.409C21.6751 13.1826 21.6391 12.9565 21.5591 12.7446C21.479 12.5326 21.3566 12.3391 21.1992 12.1761C21.0419 12.013 20.8529 11.8838 20.6439 11.7962C20.4349 11.7086 20.2102 11.6646 19.9837 11.6668C19.761 11.669 19.5411 11.7158 19.3368 11.8043C19.1326 11.8929 18.9481 12.0215 18.7944 12.1826C18.6406 12.3436 18.5207 12.5338 18.4417 12.742C18.3627 12.9501 18.3262 13.172 18.3344 13.3945Z" fill="#FBCF32" stroke="#FBCF32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9999 28.3333C19.6703 28.3333 19.3481 28.2356 19.074 28.0524C18.7999 27.8693 18.5863 27.609 18.4601 27.3045C18.334 26.9999 18.301 26.6648 18.3653 26.3415C18.4296 26.0182 18.5883 25.7212 18.8214 25.4882C19.0545 25.2551 19.3515 25.0963 19.6748 25.032C19.9981 24.9677 20.3332 25.0007 20.6377 25.1269C20.9423 25.253 21.2026 25.4666 21.3857 25.7407C21.5688 26.0148 21.6666 26.337 21.6666 26.6667C21.6666 27.1087 21.491 27.5326 21.1784 27.8452C20.8659 28.1577 20.442 28.3333 19.9999 28.3333Z" fill="#FBCF32"/>
+</svg>

types/error-message.ts

@@ -0,0 +1,4 @@
+export interface ErrorMessage {
+  message: string;
+  path?: string;
+}

types/index.ts

@@ -4,3 +4,4 @@ export * from "./chain-item-type";
 export * from "./msg";
 export * from "./twitter";
 export * from "./icns";
+export * from "./error-message";