feat: add wallet modal

components/UI/iconsComponents/clickableAction.tsx

@@ -1,19 +1,13 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import styles from "../../../styles/components/identityMenu.module.css";
-import ChangeIcon from "./icons/changeIcon";
-import MintsquareIcon from "./icons/mintsquareIcon";
-import TransferIcon from "./icons/transferIcon";
-import PlusIcon from "./icons/plusIcon";
-import AddressIcon from "./icons/addressIcon";
-import AspectIcon from "./icons/aspectIcon";
-import MainIcon from "./icons/mainIcon";
 
 type ClickableActionProps = {
-  icon: string;
+  icon: ReactNode;
   onClick?: () => void;
   title?: string;
   description?: string;
   style?: "primary" | "secondary";
+  width?: "fixed" | "auto";
 };
 
 const ClickableAction: FunctionComponent<ClickableActionProps> = ({
@@ -22,15 +16,16 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
   title,
   description,
   style = "secondary",
+  width = "fixed",
 }) => {
-  const color = style === "secondary" ? "#402D28" : "#19aa6e";
   return (
     <div
-      className={
+      className={`${
         style === "secondary"
           ? styles.clickableActionSecondary
           : styles.clickableActionPrimary
       }
+        ${width === "auto" ? styles.clickableActionAutoWidth : ""}`}
       onClick={onClick}
     >
       <div
@@ -40,15 +35,7 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
             : styles.clickableIconPrimary
         }
       >
-        {icon === "change" && <ChangeIcon width="25" color={color} />}
-        {icon === "mintsquare" && <MintsquareIcon width="25" color={color} />}
-        {icon === "main" && (
-          <MainIcon width="25" firstColor={color} secondColor={color} />
-        )}
-        {icon === "aspect" && <AspectIcon width="25" color={color} />}
-        {icon === "transfer" && <TransferIcon width="25" color={color} />}
-        {icon === "plus" && <PlusIcon width="25" color={color} />}
-        {icon === "address" && <AddressIcon width="25" color={color} />}
+        {icon}
       </div>
 
       <div className="ml-2">

components/UI/iconsComponents/icons/argentIcon.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react";
+
+const ArgentIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      fill={color}
+      width={width}
+      viewBox="0 0 40 36"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M24.7582 -3.97364e-07H14.6238C14.2851 -3.97364e-07 14.0138 0.281178 14.0064 0.630683C13.8017 10.4549 8.82234 19.7792 0.251893 26.3837C-0.0202046 26.5933 -0.0821946 26.9872 0.116734 27.2709L6.04623 35.734C6.24796 36.022 6.64099 36.087 6.91766 35.8754C12.2765 31.7728 16.5869 26.8236 19.691 21.338C22.7951 26.8236 27.1057 31.7728 32.4646 35.8754C32.741 36.087 33.1341 36.022 33.3361 35.734L39.2656 27.2709C39.4642 26.9872 39.4022 26.5933 39.1304 26.3837C30.5597 19.7792 25.5804 10.4549 25.3759 0.630683C25.3685 0.281178 25.0969 -3.97364e-07 24.7582 -3.97364e-07Z" />
+    </svg>
+  );
+};
+
+export default ArgentIcon;

components/UI/iconsComponents/icons/closeIcon.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react";
+
+const CloseIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M6 18L18 6M6 6l12 12"
+      ></path>
+    </svg>
+  );
+};
+
+export default CloseIcon;

components/UI/modalWallet.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from "react";
+import styles from "../../styles/components/walletMessage.module.css";
+import { FunctionComponent } from "react";
+import { Modal } from "@mui/material";
+import {
+  UseTransactionResult,
+  useAccount,
+  useTransactions,
+} from "@starknet-react/core";
+import { ContentCopy } from "@mui/icons-material";
+import CopiedIcon from "./iconsComponents/icons/copiedIcon";
+import ClickableAction from "./iconsComponents/clickableAction";
+import { CommonTransactionReceiptResponse } from "starknet";
+import CloseIcon from "./iconsComponents/icons/closeIcon";
+import ArgentIcon from "./iconsComponents/icons/argentIcon";
+import theme from "../../styles/theme";
+import LogoutIcon from "@mui/icons-material/Logout";
+
+type ModalWalletProps = {
+  closeModal: () => void;
+  open: boolean;
+  domain: string;
+  disconnectByClick: () => void;
+  hashes: string[];
+  setTxLoading: (txLoading: number) => void;
+};
+
+const ModalWallet: FunctionComponent<ModalWalletProps> = ({
+  closeModal,
+  open,
+  domain,
+  disconnectByClick,
+  hashes,
+  setTxLoading,
+}) => {
+  const { address, connector } = useAccount();
+  const [copied, setCopied] = useState(false);
+  const network =
+    process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "testnet" : "mainnet";
+  const transactions = useTransactions({ hashes, watch: true });
+
+  // TODO: Check for starknet react fix and delete that code
+  useEffect(() => {
+    const interval = setInterval(() => {
+      for (const tx of transactions) {
+        tx.refetch();
+      }
+    }, 3_000);
+    return () => clearInterval(interval);
+  }, [transactions?.length]);
+
+  useEffect(() => {
+    if (transactions) {
+      // Give the number of tx that are loading (I use any because there is a problem on Starknet React types)
+      setTxLoading(
+        transactions.filter((tx) => (tx?.data as any)?.status === "RECEIVED")
+          .length
+      );
+    }
+  }, [transactions]);
+
+  const copyToClipboard = () => {
+    if (!address) return;
+    setCopied(true);
+    navigator.clipboard.writeText(address);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={closeModal}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <div className={styles.menu}>
+        <button className={styles.menu_close} onClick={closeModal}>
+          <CloseIcon />
+        </button>
+        <div className={styles.menu_title}>
+          <div className={styles.menu_title}>
+            {connector && connector.id === "braavos" ? (
+              <img
+                width={"25px"}
+                src="/braavos/braavosLogo.svg"
+                alt="braavos logo"
+              />
+            ) : (
+              <ArgentIcon color={"#f36a3d"} width={"25px"} />
+            )}
+
+            <p className="ml-2">Connected with &nbsp;{domain}&nbsp;</p>
+          </div>
+        </div>
+        <div className="flex flex-row justify-around flex-wrap mb-3">
+          <ClickableAction
+            onClick={disconnectByClick}
+            icon={<LogoutIcon width="25" />}
+            title="Disconnect"
+            width="auto"
+          />
+          <ClickableAction
+            onClick={copyToClipboard}
+            icon={
+              copied ? (
+                <CopiedIcon width="25" color={theme.palette.primary.main} />
+              ) : (
+                <ContentCopy width="25" />
+              )
+            }
+            title="Copy Address"
+            width="auto"
+          />
+        </div>
+        <div className={styles.menu_txs}>
+          <div className={styles.tx_title}>My transactions</div>
+          <div>
+            {transactions && transactions.length > 0 ? (
+              transactions.map((tx) => {
+                return (
+                  <div
+                    className={styles.menu_tx}
+                    key={tx.data?.transaction_hash}
+                  >
+                    <a
+                      href={`https://${
+                        network === "testnet" ? "testnet." : ""
+                      }starkscan.co/tx/${tx.data?.transaction_hash}`}
+                      className={styles.tx_hash}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {tx.data?.transaction_hash?.slice(0, 6) +
+                        "..." +
+                        tx.data?.transaction_hash?.slice(
+                          tx.data?.transaction_hash.length - 6,
+                          tx.data?.transaction_hash.length
+                        )}
+                    </a>
+                    <div>
+                      {tx.status === "success" &&
+                        tx.data &&
+                        (tx.data as CommonTransactionReceiptResponse).status}
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <p className={styles.tx_empty}>No ongoing transactions</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default ModalWallet;

components/UI/navbar.tsx

@@ -3,21 +3,28 @@ import React, { useState, useEffect, FunctionComponent } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import styles from "../../styles/components/navbar.module.css";
 import Button from "./button";
-import { useConnectors, useAccount, useProvider } from "@starknet-react/core";
+import {
+  useConnectors,
+  useAccount,
+  useProvider,
+  useTransactionManager,
+} from "@starknet-react/core";
 import Wallets from "./wallets";
-import LogoutIcon from "@mui/icons-material/Logout";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "../../hooks/displayName.tsx";
 import { useDomainFromAddress } from "../../hooks/naming";
 import { constants } from "starknet";
+import ModalWallet from "./modalWallet";
+import { CircularProgress } from "@mui/material";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 
 const Navbar: FunctionComponent = () => {
   const [nav, setNav] = useState<boolean>(false);
   const [hasWallet, setHasWallet] = useState<boolean>(true);
   const { address } = useAccount();
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
-
+  const [txLoading, setTxLoading] = useState<number>(0);
   const { available, connect, disconnect } = useConnectors();
   const { provider } = useProvider();
   const domainOrAddressMinified = useDisplayName(address ?? "");
@@ -28,12 +35,14 @@ const Navbar: FunctionComponent = () => {
   const network =
     process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "testnet" : "mainnet";
   const [navbarBg, setNavbarBg] = useState<boolean>(false);
+  const { hashes } = useTransactionManager();
+  const [showWallet, setShowWallet] = useState<boolean>(false);
 
-  function disconnectByClick(): void {
-    disconnect();
-    setIsConnected(false);
-    setIsWrongNetwork(false);
-  }
+  useEffect(() => {
+    // to handle autoconnect starknet-react adds connector id in local storage
+    // if there is no value stored, we show the wallet modal
+    if (!localStorage.getItem("lastUsedConnector")) setHasWallet(true);
+  }, []);
 
   useEffect(() => {
     address ? setIsConnected(true) : setIsConnected(false);
@@ -52,6 +61,13 @@ const Navbar: FunctionComponent = () => {
     });
   }, [provider, network, isConnected]);
 
+  function disconnectByClick(): void {
+    disconnect();
+    setIsConnected(false);
+    setIsWrongNetwork(false);
+    setShowWallet(false);
+  }
+
   function handleNav(): void {
     setNav(!nav);
   }
@@ -125,17 +141,31 @@ const Navbar: FunctionComponent = () => {
                 <Button
                   onClick={
                     isConnected
-                      ? () => disconnectByClick()
+                      ? () => setShowWallet(true)
                       : available.length === 1
                       ? () => connect(available[0])
                       : () => setHasWallet(true)
                   }
                 >
                   {isConnected ? (
-                    <div className="flex justify-center items-center">
-                      <div>{domainOrAddressMinified}</div>
-                      <LogoutIcon className="ml-3" />
-                    </div>
+                    <>
+                      {txLoading > 0 ? (
+                        <div className="flex justify-center items-center">
+                          <p className="mr-3">{txLoading} on hold</p>
+                          <CircularProgress
+                            sx={{
+                              color: "white",
+                            }}
+                            size={25}
+                          />
+                        </div>
+                      ) : (
+                        <div className="flex justify-center items-center">
+                          <p className="mr-3">{domainOrAddressMinified}</p>
+                          <AccountCircleIcon />
+                        </div>
+                      )}
+                    </>
                   ) : (
                     "connect"
                   )}
@@ -250,6 +280,14 @@ const Navbar: FunctionComponent = () => {
           </div>
         }
       />
+      <ModalWallet
+        domain={domainOrAddressMinified}
+        open={showWallet}
+        closeModal={() => setShowWallet(false)}
+        disconnectByClick={disconnectByClick}
+        hashes={hashes}
+        setTxLoading={setTxLoading}
+      />
       <Wallets
         closeWallet={() => setHasWallet(false)}
         hasWallet={Boolean(hasWallet && !isWrongNetwork)}

components/quests/reward.tsx

@@ -56,7 +56,7 @@ const Reward: FunctionComponent<RewardProps> = ({
 
       <ModalMessage
         open={modalTxOpen}
-        title={"Your NFT is on it's way !"}
+        title="Your NFT is on it's way !"
         closeModal={() => setModalTxOpen(false)}
         message={
           <div className="mt-7 flex flex-col items-center justify-center text-center">

pages/404.tsx

@@ -4,7 +4,7 @@ import styles from "../styles/Home.module.css";
 
 const NotFound: NextPage = () => {
   return (
-    <div className={styles.screen}>
+    <div className={styles.screen404}>
       <div className="flex items-center justify-center h-full">
         <div className="text-center">
           <h1 className="title">404 - Page Not Found</h1>