chore(web): update-contact-support-link

Author: tractorss

web/src/layout/Header/DesktopHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { useToggle } from "react-use";
@@ -89,8 +89,18 @@ const DesktopHeader = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [initialTab, setInitialTab] = useState<number>(0);
   const { isConnected, chain } = useAccount();
   const isDefaultChain = chain?.id === DEFAULT_CHAIN;
+
+  const initializeFragmentURL = useCallback(() => {
+    const hasNotificationsPath = location.hash.includes("#notifications");
+    toggleIsSettingsOpen(hasNotificationsPath);
+    setInitialTab(hasNotificationsPath ? 1 : 0);
+  }, [toggleIsSettingsOpen, location.hash]);
+
+  useEffect(initializeFragmentURL, [initializeFragmentURL]);
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -129,7 +139,7 @@ const DesktopHeader = () => {
         <PopupContainer>
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
     </>

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

@@ -66,8 +66,8 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [currentTab, setCurrentTab] = useState<number>(0);
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
+  const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
   const location = useLocation();
   const navigate = useNavigate();

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

@@ -8,7 +8,6 @@ import DappList from "./DappList";
 import Explore from "./Explore";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
-import { Overlay } from "components/Overlay";
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import Menu from "./Menu";
 import Help from "./Menu/Help";
@@ -54,6 +53,7 @@ const DisconnectWalletButtonContainer = styled.div`
 
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
+  initialTab?: number;
 }
 
 export interface IHelp {

web/src/pages/Settings/EmailConfirmation/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
 
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { isAddress } from "viem";
 
 import { Button } from "@kleros/ui-components-library";
@@ -96,15 +96,15 @@ const messageConfigs = {
     headerMsg: "Invalid Link!",
     subtitleMsg: "Oops, seems like you followed an invalid link.",
     buttonMsg: "Contact Support",
-    buttonTo: "/",
+    buttonTo: "https://t.me/kleros",
     Icon: InvalidIcon,
     color: "primaryText",
   },
   error: {
     headerMsg: "Something went wrong",
     subtitleMsg: "Oops, seems like something went wrong in our systems",
     buttonMsg: "Contact Support",
-    buttonTo: "/",
+    buttonTo: "https://t.me/kleros",
     Icon: WarningIcon,
     color: "error",
   },
@@ -139,8 +139,6 @@ const EmailConfirmation: React.FC = () => {
   const address = searchParams.get("address");
   const token = searchParams.get("token");
 
-  const navigate = useNavigate();
-
   useEffect(() => {
     if (address && isAddress(address) && token) {
       setIsConfirming(true);
@@ -174,7 +172,9 @@ const EmailConfirmation: React.FC = () => {
             </HeaderIconContainer>
             <Header fontColor={color}>{headerMsg}</Header>
             <Subtitle>{subtitleMsg}</Subtitle>
-            <Button text={buttonMsg} onClick={() => navigate(buttonTo)} />
+            <Link to={buttonTo}>
+              <Button text={buttonMsg} />
+            </Link>
           </InfoWrapper>
           <IconContainer>
             <Icon />