Add warning message modal when account not exsist

components/connect-wallet-modal/modal.tsx

@@ -1,9 +1,11 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useState } from "react";
 import ReactModal from "react-modal";
 import styled from "styled-components";
 import color from "../../styles/color";
 import { WalletList } from "../../constants/wallet";
 import { WalletItem } from "./wallet-item";
+import { ErrorMessage } from "../../types";
+import { ErrorModal } from "../error-modal";
 
 interface Props {
   isModalOpen: boolean;
@@ -12,6 +14,8 @@ interface Props {
 
 export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
   const { isModalOpen, onCloseModal } = props;
+  const [isErrorModalOpen, setErrorModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage>();
 
   return (
     <ReactModal
@@ -41,9 +45,23 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
         </ModalDescription>
 
         {WalletList.map((walletItem) => {
-          return <WalletItem wallet={walletItem} key={walletItem.name} />;
+          return (
+            <WalletItem
+              wallet={walletItem}
+              key={walletItem.name}
+              setErrorModalOpen={setErrorModalOpen}
+              setErrorMessage={setErrorMessage}
+            />
+          );
         })}
       </ModalContainer>
+
+      <ErrorModal
+        isModalOpen={isErrorModalOpen}
+        onCloseModal={() => setErrorModalOpen(false)}
+        errorMessage={errorMessage}
+        isWarning={true}
+      />
     </ReactModal>
   );
 };

components/connect-wallet-modal/wallet-item.tsx

@@ -1,4 +1,10 @@
-import { FunctionComponent, useEffect, useState } from "react";
+import {
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import ArrowRightIcon from "../../public/images/svg/arrow-right.svg";
 import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
@@ -12,17 +18,22 @@ import {
 import { getKeplrFromWindow, KeplrWallet } from "../../wallets";
 import { loginWithTwitter } from "../../queries";
 import {
+  KEPLR_NO_ACCOUNT_ERROR,
+  KEPLR_NO_ACCOUNT_MESSAGE,
   KEPLR_NOT_FOUND_ERROR,
   KEPLR_VERSION_ERROR,
 } from "../../constants/error-message";
 import semver from "semver/preload";
+import { ErrorMessage } from "../../types";
 
 interface Props {
   wallet: WalletType;
+  setErrorMessage: Dispatch<SetStateAction<ErrorMessage | undefined>>;
+  setErrorModalOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 export const WalletItem: FunctionComponent<Props> = (props: Props) => {
-  const { wallet } = props;
+  const { wallet, setErrorModalOpen, setErrorMessage } = props;
   const [isInstalled, setIsInstalled] = useState<boolean>();
 
   useEffect(() => {
@@ -37,8 +48,19 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
       }
 
       await loginWithTwitter();
-    } catch (e) {
-      console.log(e);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log(error.message);
+
+        if (error.message === KEPLR_NO_ACCOUNT_ERROR) {
+          setErrorMessage({ message: KEPLR_NO_ACCOUNT_MESSAGE });
+          setErrorModalOpen(true);
+          return;
+        }
+
+        setErrorMessage({ message: error.message });
+        setErrorModalOpen(true);
+      }
     }
   };
 

components/error-modal/index.tsx

@@ -4,20 +4,21 @@ 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;
+  isWarning?: boolean;
 }
 
 import ErrorIcon from "../../public/images/svg/error-icon.svg";
+import WarningIcon from "../../public/images/svg/warning-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 { isModalOpen, onCloseModal, errorMessage, isWarning } = props;
 
   const onClose = async () => {
     if (errorMessage?.path) {
@@ -50,7 +51,7 @@ export const ErrorModal: FunctionComponent<Props> = (props) => {
       <ModalContainer>
         <ErrorTitleContainer>
           <ErrorImageContainer>
-            <ErrorIcon />
+            {isWarning ? <WarningIcon /> : <ErrorIcon />}
           </ErrorImageContainer>
           Error
         </ErrorTitleContainer>

constants/error-message.ts

@@ -3,3 +3,7 @@ export const TWITTER_PROFILE_ERROR = "Twitter auth code is not valid";
 
 export const KEPLR_NOT_FOUND_ERROR = "Can't fount window.keplr";
 export const KEPLR_VERSION_ERROR = "You should update keplr";
+
+export const KEPLR_NO_ACCOUNT_ERROR = "key doesn't exist";
+export const KEPLR_NO_ACCOUNT_MESSAGE =
+  "Create an account first and connect it with your wallet";

public/images/svg/warning-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="#6F6F6F" 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="#6F6F6F" stroke="#6F6F6F" 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="#6F6F6F"/>
+</svg>