feat: port to starknet-react v2 & add notifications

components/UI/changeWallet.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "../../styles/components/wallets.module.css";
-import { Connector, useConnectors } from "@starknet-react/core";
+import { Connector, useConnect } from "@starknet-react/core";
 import Button from "./button";
 import { FunctionComponent } from "react";
 import { Modal } from "@mui/material";
@@ -17,13 +17,13 @@ const ChangeWallet: FunctionComponent<ChangeWalletProps> = ({
   closeWallet,
   hasWallet,
 }) => {
-  const { connect, connectors } = useConnectors();
+  const { connect, connectors } = useConnect();
   const downloadLinks = useGetDiscoveryWallets(
     getDiscoveryWallets.getDiscoveryWallets()
   );
 
   function connectWallet(connector: Connector): void {
-    connect(connector);
+    connect({ connector });
     closeWallet();
   }
 
@@ -59,7 +59,9 @@ const ChangeWallet: FunctionComponent<ChangeWalletProps> = ({
                 <Button onClick={() => connectWallet(connector)}>
                   <div className="flex justify-center items-center">
                     <WalletIcons id={connector.id} />
-                    {connector.id === "braavos" || connector.id === "argentX"
+                    {connector.id === "braavos" ||
+                    connector.id === "argentX" ||
+                    connector.id === "okxwallet"
                       ? `Connect ${connector.name}`
                       : "Login with Email"}
                   </div>

components/UI/iconsComponents/icons/closeCircleIcon.tsx

@@ -0,0 +1,22 @@
+import React, { FunctionComponent } from "react";
+
+const CloseCircleIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.36 9.70035L13.06 12.0004L15.36 14.3004C15.65 14.5904 15.65 15.0704 15.36 15.3604C15.21 15.5104 15.02 15.5804 14.83 15.5804C14.64 15.5804 14.45 15.5104 14.3 15.3604L12 13.0604L9.69998 15.3604C9.54998 15.5104 9.35998 15.5804 9.16998 15.5804C8.97999 15.5804 8.78999 15.5104 8.63999 15.3604C8.34999 15.0704 8.34999 14.5904 8.63999 14.3004L10.94 12.0004L8.63999 9.70035C8.34999 9.41035 8.34999 8.93035 8.63999 8.64035C8.92999 8.35035 9.40998 8.35035 9.69998 8.64035L12 10.9404L14.3 8.64035C14.59 8.35035 15.07 8.35035 15.36 8.64035C15.65 8.93035 15.65 9.41035 15.36 9.70035Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default CloseCircleIcon;

components/UI/iconsComponents/icons/doneIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+
+const DoneIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default DoneIcon;

components/UI/iconsComponents/icons/loaderIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+
+const LoaderIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M13.25 5.33333H10.75V2H13.25V5.33333ZM13.25 18.6667H10.75V22H13.25V18.6667ZM5.33333 10.75H2V13.25H5.33333V10.75ZM22 10.75H18.6667V13.25H22V10.75ZM21.2717 15.9433L18.39 14.2692L17.1333 16.43L20.015 18.105L21.2717 15.9433ZM18.105 3.98167L15.9408 2.725L14.2667 5.6075L16.4275 6.86417L18.105 3.98167ZM21.2808 8.045L20.0225 5.885L17.1408 7.56333L18.3992 9.72333L21.2808 8.045ZM18.125 20.0108L16.4467 17.1308L14.2867 18.3892L15.965 21.2692L18.125 20.0108ZM6.88 16.4275L5.62417 14.2692L2.74167 15.9433L4 18.105L6.88 16.4275ZM9.75 5.6075L8.0725 2.725L5.91083 3.98167L7.58333 6.86417L9.75 5.6075ZM6.87333 7.56333L3.99333 5.885L2.735 8.045L5.615 9.72333L6.87333 7.56333ZM9.72667 18.39L7.5675 17.13L5.88833 20.01L8.04833 21.27L9.72667 18.39Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default LoaderIcon;

components/UI/iconsComponents/icons/notificationIcon.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+
+const NotificationIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.1912 14.0598L19.0612 12.1798C18.8112 11.7698 18.5912 10.9798 18.5912 10.4998V8.6298C18.5912 4.9998 15.6412 2.0498 12.0212 2.0498C8.39118 2.0598 5.44118 4.9998 5.44118 8.6298V10.4898C5.44118 10.9698 5.22118 11.7598 4.98118 12.1698L3.85118 14.0498C3.42118 14.7798 3.32118 15.6098 3.59118 16.3298C3.86118 17.0598 4.47118 17.6398 5.27118 17.8998C6.35118 18.2598 7.44118 18.5198 8.55118 18.7098C8.66118 18.7298 8.77118 18.7398 8.88118 18.7598C9.02118 18.7798 9.17118 18.7998 9.32118 18.8198C9.58118 18.8598 9.84118 18.8898 10.1112 18.9098C10.7412 18.9698 11.3812 18.9998 12.0212 18.9998C12.6512 18.9998 13.2812 18.9698 13.9012 18.9098C14.1312 18.8898 14.3612 18.8698 14.5812 18.8398C14.7612 18.8198 14.9412 18.7998 15.1212 18.7698C15.2312 18.7598 15.3412 18.7398 15.4512 18.7198C16.5712 18.5398 17.6812 18.2598 18.7612 17.8998C19.5312 17.6398 20.1212 17.0598 20.4012 16.3198C20.6812 15.5698 20.6012 14.7498 20.1912 14.0598ZM12.7512 9.9998C12.7512 10.4198 12.4112 10.7598 11.9912 10.7598C11.5712 10.7598 11.2312 10.4198 11.2312 9.9998V6.89981C11.2312 6.4798 11.5712 6.1398 11.9912 6.1398C12.4112 6.1398 12.7512 6.4798 12.7512 6.89981V9.9998Z"
+        fill={color}
+      />
+      <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default NotificationIcon;

components/UI/iconsComponents/icons/notificationIconUnread.tsx

@@ -0,0 +1,29 @@
+import React, { FunctionComponent } from "react";
+
+const NotificationUnreadIcon: FunctionComponent<IconProps> = ({
+  width,
+  color,
+  secondColor,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M20.1912 14.0598L19.0612 12.1798C18.8112 11.7698 18.5912 10.9798 18.5912 10.4998V8.6298C18.5912 4.9998 15.6412 2.0498 12.0212 2.0498C8.39118 2.0598 5.44118 4.9998 5.44118 8.6298V10.4898C5.44118 10.9698 5.22118 11.7598 4.98118 12.1698L3.85118 14.0498C3.42118 14.7798 3.32118 15.6098 3.59118 16.3298C3.86118 17.0598 4.47118 17.6398 5.27118 17.8998C6.35118 18.2598 7.44118 18.5198 8.55118 18.7098C8.66118 18.7298 8.77118 18.7398 8.88118 18.7598C9.02118 18.7798 9.17118 18.7998 9.32118 18.8198C9.58118 18.8598 9.84118 18.8898 10.1112 18.9098C10.7412 18.9698 11.3812 18.9998 12.0212 18.9998C12.6512 18.9998 13.2812 18.9698 13.9012 18.9098C14.1312 18.8898 14.3612 18.8698 14.5812 18.8398C14.7612 18.8198 14.9412 18.7998 15.1212 18.7698C15.2312 18.7598 15.3412 18.7398 15.4512 18.7198C16.5712 18.5398 17.6812 18.2598 18.7612 17.8998C19.5312 17.6398 20.1212 17.0598 20.4012 16.3198C20.6812 15.5698 20.6012 14.7498 20.1912 14.0598ZM12.7512 9.9998C12.7512 10.4198 12.4112 10.7598 11.9912 10.7598C11.5712 10.7598 11.2312 10.4198 11.2312 9.9998V6.89981C11.2312 6.4798 11.5712 6.1398 11.9912 6.1398C12.4112 6.1398 12.7512 6.4798 12.7512 6.89981V9.9998Z"
+        fill={color}
+      />
+      <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill={color}
+      />
+      <circle cx="18" cy="5" r="4" fill={secondColor} />
+    </svg>
+  );
+};
+
+export default NotificationUnreadIcon;

components/UI/navbar.tsx

@@ -9,10 +9,10 @@ import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import styles from "../../styles/components/navbar.module.css";
 import Button from "./button";
 import {
-  useConnectors,
+  useConnect,
   useAccount,
-  useProvider,
   Connector,
+  useDisconnect,
 } from "@starknet-react/core";
 import Wallets from "./wallets";
 import ModalMessage from "./modalMessage";
@@ -23,16 +23,19 @@ import { useRouter } from "next/router";
 import theme from "../../styles/theme";
 import { FaDiscord, FaTwitter } from "react-icons/fa";
 import WalletButton from "../navbar/walletButton";
+import NotificationIcon from "./iconsComponents/icons/notificationIcon";
+import ModalNotifications from "./notifications/modalNotifications";
+import { useNotificationManager } from "../../hooks/useNotificationManager";
+import NotificationUnreadIcon from "./iconsComponents/icons/notificationIconUnread";
 
 const Navbar: FunctionComponent = () => {
   const [nav, setNav] = useState<boolean>(false);
   const [hasWallet, setHasWallet] = useState<boolean>(false);
-  const { address } = useAccount();
+  const { address, account } = useAccount();
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
-  const { available, connect, disconnect, connectors, refresh } =
-    useConnectors();
-  const { provider } = useProvider();
+  const { connect, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
   const domainOrAddressMinified = useDisplayName(address ?? "");
   const domain = useDomainFromAddress(address ?? "").domain;
   const addressOrDomain =
@@ -42,6 +45,9 @@ const Navbar: FunctionComponent = () => {
   const [navbarBg, setNavbarBg] = useState<boolean>(false);
   const [showWallet, setShowWallet] = useState<boolean>(false);
   const router = useRouter();
+  const [showNotifications, setShowNotifications] = useState<boolean>(false);
+  const { notifications, unreadNotifications, updateReadStatus } =
+    useNotificationManager();
 
   useEffect(() => {
     // to handle autoconnect starknet-react adds connector id in local storage
@@ -74,23 +80,22 @@ const Navbar: FunctionComponent = () => {
   }, [address]);
 
   useEffect(() => {
-    if (!isConnected) return;
-
-    provider.getChainId().then((chainId) => {
+    if (!isConnected || !account) return;
+    account.getChainId().then((chainId) => {
       const isWrongNetwork =
         (chainId === constants.StarknetChainId.SN_GOERLI &&
           network === "mainnet") ||
         (chainId === constants.StarknetChainId.SN_MAIN &&
           network === "testnet");
       setIsWrongNetwork(isWrongNetwork);
     });
-  }, [provider, network, isConnected]);
+  }, [account, network, isConnected]);
 
   const tryConnect = useCallback(
     async (connector: Connector) => {
       if (address) return;
       if (await connector.ready()) {
-        connect(connector);
+        connect({ connector });
 
         return;
       }
@@ -111,15 +116,7 @@ const Navbar: FunctionComponent = () => {
 
   function onTopButtonClick(): void {
     if (!isConnected) {
-      if (available.length > 0) {
-        if (available.length === 1) {
-          connect(available[0]);
-        } else {
-          setHasWallet(true);
-        }
-      } else {
-        setHasWallet(true);
-      }
+      setHasWallet(true);
     } else {
       setShowWallet(true);
     }
@@ -131,12 +128,6 @@ const Navbar: FunctionComponent = () => {
     return textToReturn;
   }
 
-  // Refresh available connectors before showing wallet modal
-  function refreshAndShowWallet(): void {
-    refresh();
-    setHasWallet(true);
-  }
-
   const handleScroll = () => {
     if (window.scrollY > 10) {
       setNavbarBg(true);
@@ -152,6 +143,12 @@ const Navbar: FunctionComponent = () => {
     };
   }, []);
 
+  function openNotificationModal(): void {
+    if (!address) return;
+    setShowNotifications(true);
+    updateReadStatus();
+  }
+
   return (
     <>
       <div className={`fixed w-full z-20`} id="nav">
@@ -182,12 +179,26 @@ const Navbar: FunctionComponent = () => {
               <Link href={`/${address ? addressOrDomain : "not-connected"}`}>
                 <li className={styles.menuItem}>My land</li>
               </Link>
+              <li className={styles.menuItem} onClick={openNotificationModal}>
+                {unreadNotifications && address ? (
+                  <NotificationUnreadIcon
+                    width="24"
+                    color={theme.palette.secondary.dark}
+                    secondColor="#D32F2F"
+                  ></NotificationUnreadIcon>
+                ) : (
+                  <NotificationIcon
+                    width="24"
+                    color={theme.palette.secondary.dark}
+                  />
+                )}
+              </li>
               {/* Note: I'm not sure that our testnet will be public so we don't show any link  */}
               {/* <SelectNetwork network={network} /> */}
               <WalletButton
                 setShowWallet={setShowWallet}
                 showWallet={showWallet}
-                refreshAndShowWallet={refreshAndShowWallet}
+                refreshAndShowWallet={() => setHasWallet(true)}
                 disconnectByClick={disconnectByClick}
               />
             </ul>
@@ -316,6 +327,13 @@ const Navbar: FunctionComponent = () => {
         closeWallet={() => setHasWallet(false)}
         hasWallet={Boolean(hasWallet && !isWrongNetwork)}
       />
+      {showNotifications ? (
+        <ModalNotifications
+          open={showNotifications}
+          closeModal={() => setShowNotifications(false)}
+          notifications={notifications}
+        />
+      ) : null}
     </>
   );
 };

components/UI/notifications/modalNotifications.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styles from "../../../styles/components/notifications.module.css";
+import { FunctionComponent } from "react";
+import { Modal } from "@mui/material";
+import NotificationDetail from "./notificationDetail";
+import CloseIcon from "../iconsComponents/icons/closeIcon";
+
+type ModalNotificationsProps = {
+  closeModal: () => void;
+  open: boolean;
+  notifications: SQNotification<NotificationData>[];
+};
+
+const ModalNotifications: FunctionComponent<ModalNotificationsProps> = ({
+  closeModal,
+  open,
+  notifications,
+}) => {
+  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 width="24" />
+        </button>
+        <p className={styles.menu_title}>Notifications</p>
+        <div className={styles.menu_line} />
+        <div className={styles.notif_section}>
+          {notifications.length > 0 ? (
+            notifications.map((notification, index) => {
+              return (
+                <NotificationDetail
+                  key={index}
+                  notification={notification}
+                  isLastItem={index === notifications.length - 1}
+                />
+              );
+            })
+          ) : (
+            <p>You don&apos;t have any notifications yet. Start some quests!</p>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default ModalNotifications;