diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index f0f6f35..12a9e7c 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/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(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 = () => { {isDappListOpen && } {isHelpOpen && } - {isSettingsOpen && } + {isSettingsOpen && } )} diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index c9f70d2..e898aee 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx @@ -66,8 +66,8 @@ const TABS = [ }, ]; -const Settings: React.FC = ({ toggleIsSettingsOpen }) => { - const [currentTab, setCurrentTab] = useState(0); +const Settings: React.FC = ({ toggleIsSettingsOpen, initialTab }) => { + const [currentTab, setCurrentTab] = useState(initialTab || 0); const containerRef = useRef(null); const location = useLocation(); const navigate = useNavigate(); diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 4d976f4..8ab2136 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/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 { diff --git a/web/src/pages/Settings/EmailConfirmation/index.tsx b/web/src/pages/Settings/EmailConfirmation/index.tsx index ff10110..d2ad4d5 100644 --- a/web/src/pages/Settings/EmailConfirmation/index.tsx +++ b/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,7 +96,7 @@ 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", }, @@ -104,7 +104,7 @@ const messageConfigs = { 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 = () => {
{headerMsg}
{subtitleMsg} -