fix: interface changes after merge

Author: jaybuidl

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -8,6 +8,7 @@ import Bug from "svgs/icons/bug.svg";
 import ETH from "svgs/icons/eth.svg";
 import Faq from "svgs/menu-icons/help.svg";
 import Telegram from "svgs/socialmedia/telegram.svg";
+import { IHelp } from "..";
 
 const Container = styled.div`
   display: flex;
@@ -96,10 +97,6 @@ const ITEMS = [
   },
 ];
 
-interface IHelp {
-  toggleIsHelpOpen: () => void;
-}
-
 const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
   const containerRef = useRef(null);
   useFocusOutside(containerRef, () => {

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -6,7 +6,7 @@ import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
 import FormContact from "./FormContact";
 import messages from "../../../../../../../consts/eip712-messages";
 import { EMAIL_REGEX, TELEGRAM_REGEX } from "../../../../../../../consts/index";
-import { ISettings } from "../../types";
+import { ISettings } from "../../../index";
 
 const FormContainer = styled.form`
   position: relative;
@@ -27,7 +27,7 @@ const FormContactContainer = styled.div`
   margin-bottom: 24px;
 `;
 
-const FormContactDetails: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
+const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const [telegramInput, setTelegramInput] = useState<string>("");
   const [emailInput, setEmailInput] = useState<string>("");
   const [telegramIsValid, setTelegramIsValid] = useState<boolean>(false);
@@ -58,7 +58,7 @@ const FormContactDetails: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
     };
     const response = await uploadSettingsToSupabase(data);
     if (response.ok) {
-      setIsSettingsOpen(false);
+      toggleIsSettingsOpen();
     }
   };
   return (

web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ISettings } from "../types";
+import { ISettings } from "../../../index";
 
 import FormContactDetails from "./FormContactDetails";
 import { EnsureChain } from "components/EnsureChain";
@@ -33,13 +33,13 @@ const EnsureChainContainer = styled.div`
   padding-bottom: 16px;
 `;
 
-const NotificationSettings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
+const NotificationSettings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   return (
     <EnsureChainContainer>
       <EnsureChain>
         <Container>
           <HeaderNotifs />
-          <FormContactDetails setIsSettingsOpen={setIsSettingsOpen} />
+          <FormContactDetails toggleIsSettingsOpen={toggleIsSettingsOpen} />
         </Container>
       </EnsureChain>
     </EnsureChainContainer>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -6,7 +6,7 @@ import General from "./General";
 import NotificationSettings from "./Notifications";
 import { useFocusOutside } from "hooks/useFocusOutside";
 import { Overlay } from "components/Overlay";
-import { ISettings } from "./types";
+import { ISettings } from "../../index";
 
 const Container = styled.div`
   display: flex;
@@ -60,10 +60,10 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const [currentTab, setCurrentTab] = useState<number>(0);
   const containerRef = useRef(null);
-  useFocusOutside(containerRef, () => setIsSettingsOpen(false));
+  useFocusOutside(containerRef, () => toggleIsSettingsOpen());
 
   return (
     <>
@@ -77,7 +77,7 @@ const Settings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
             setCurrentTab(n);
           }}
         />
-        {currentTab === 0 ? <General /> : <NotificationSettings setIsSettingsOpen={setIsSettingsOpen} />}
+        {currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
       </Container>
     </>
   );

web/src/layout/Header/navbar/Menu/Settings/types.ts

@@ -8,6 +8,7 @@ import LightModeIcon from "svgs/menu-icons/light-mode.svg";
 import NotificationsIcon from "svgs/menu-icons/notifications.svg";
 import SettingsIcon from "svgs/menu-icons/settings.svg";
 import { useToggleTheme } from "hooks/useToggleThemeContext";
+import { IHelp, ISettings } from "..";
 
 const Container = styled.div`
   display: flex;
@@ -52,12 +53,7 @@ const ButtonContainer = styled.div`
   )}
 `;
 
-interface IMenu {
-  toggleIsSettingsOpen: () => void;
-  toggleIsHelpOpen: () => void;
-}
-
-const Menu: React.FC<IMenu> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => {
+const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => {
   const [theme, toggleTheme] = useToggleTheme();
   const isLightTheme = theme === "light";
 

web/src/layout/Header/navbar/Menu/index.tsx

@@ -53,6 +53,18 @@ const DisconnectWalletButtonContainer = styled.div`
   align-items: center;
 `;
 
+export interface ISettings {
+  toggleIsSettingsOpen: () => void;
+}
+
+export interface IHelp {
+  toggleIsHelpOpen: () => void;
+}
+
+export interface IDappList {
+  toggleIsDappListOpen: () => void;
+}
+
 const NavBar: React.FC = () => {
   const { isConnected } = useAccount();
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);