diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 44766e167..dfe24c7b4 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -3,10 +3,11 @@ import styled, { css } from "styled-components"; import { useLocation, useNavigate } from "react-router-dom"; import { useClickAway } from "react-use"; -import BookOpenIcon from "svgs/icons/book-open.svg"; import { CompactPagination } from "@kleros/ui-components-library"; +import BookOpenIcon from "svgs/icons/book-open.svg"; + import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; @@ -129,6 +130,17 @@ interface ITemplate { isVisible: boolean; } +export const miniGuideHashes = [ + "#jurorlevels-miniguide", + "#appeal-miniguide", + "#binaryvoting-miniguide", + "#disputeresolver-miniguide", + "#rankedvoting-miniguide", + "#staking-miniguide", + "#onboarding-miniguide", +] as const; +export type MiniguideHashesType = (typeof miniGuideHashes)[number]; + const Template: React.FC = ({ onClose, LeftContent, @@ -143,13 +155,15 @@ const Template: React.FC = ({ const containerRef = useRef(null); const location = useLocation(); const navigate = useNavigate(); - const removeOnboardingHashPath = useCallback(() => { - if (isOnboarding && location.hash.includes("#onboarding")) navigate("#", { replace: true }); - }, [location.hash, navigate, isOnboarding]); + const removeMiniGuideHashPath = useCallback(() => { + if (miniGuideHashes.some((hash) => location.hash.includes(hash))) { + navigate("#", { replace: true }); + } + }, [location.hash, navigate]); const onCloseAndRemoveOnboardingHashPath = () => { onClose(); - removeOnboardingHashPath(); + removeMiniGuideHashPath(); }; useClickAway(containerRef, () => { diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index afbf5369d..fc889ccda 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -7,16 +7,22 @@ import { useAccount } from "wagmi"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; -import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; - import { DEFAULT_CHAIN } from "consts/chains"; +import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; +import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; +import Appeal from "components/Popup/MiniGuides/Appeal"; +import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting"; +import DisputeResolver from "components/Popup/MiniGuides/DisputeResolver"; +import { MiniguideHashesType } from "components/Popup/MiniGuides/MainStructureTemplate"; import Onboarding from "components/Popup/MiniGuides/Onboarding"; +import RankedVoting from "components/Popup/MiniGuides/RankedVoting"; +import Staking from "components/Popup/MiniGuides/Staking"; import Logo from "./Logo"; import DappList from "./navbar/DappList"; @@ -105,20 +111,48 @@ const DesktopHeader: React.FC = () => { const [isDappListOpen, toggleIsDappListOpen] = useToggle(false); const [isHelpOpen, toggleIsHelpOpen] = useToggle(false); const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false); + const [isJurorLevelsMiniGuideOpen, toggleIsJurorLevelsMiniGuideOpen] = useToggle(false); + const [isAppealMiniGuideOpen, toggleIsAppealMiniGuideOpen] = useToggle(false); + const [isBinaryVotingMiniGuideOpen, toggleIsBinaryVotingMiniGuideOpen] = useToggle(false); + const [isDisputeResolverMiniGuideOpen, toggleIsDisputeResolverMiniGuideOpen] = useToggle(false); + const [isRankedVotingMiniGuideOpen, toggleIsRankedVotingMiniGuideOpen] = useToggle(false); + const [isStakingMiniGuideOpen, toggleIsStakingMiniGuideOpen] = useToggle(false); const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); const [initialTab, setInitialTab] = useState(0); const location = useLocation(); const { isConnected, chainId } = useAccount(); const isDefaultChain = chainId === DEFAULT_CHAIN; - const initializeFragmentURL = useCallback(() => { - const hash = location.hash; - const hasOnboardingPath = hash.includes("#onboarding"); - const hasNotificationsPath = hash.includes("#notifications"); - toggleIsOnboardingMiniGuidesOpen(hasOnboardingPath); + const hashIncludes = (hash: MiniguideHashesType | "#notifications") => location.hash.includes(hash); + const hasJurorLevelsMiniGuidePath = hashIncludes("#jurorlevels-miniguide"); + const hasAppealMiniGuidePath = hashIncludes("#appeal-miniguide"); + const hasBinaryVotingMiniGuidePath = hashIncludes("#binaryvoting-miniguide"); + const hasDisputeResolverMiniGuidePath = hashIncludes("#disputeresolver-miniguide"); + const hasRankedVotingMiniGuidePath = hashIncludes("#rankedvoting-miniguide"); + const hasStakingMiniGuidePath = hashIncludes("#staking-miniguide"); + const hasOnboardingMiniGuidePath = hashIncludes("#onboarding-miniguide"); + const hasNotificationsPath = hashIncludes("#notifications"); + toggleIsJurorLevelsMiniGuideOpen(hasJurorLevelsMiniGuidePath); + toggleIsAppealMiniGuideOpen(hasAppealMiniGuidePath); + toggleIsBinaryVotingMiniGuideOpen(hasBinaryVotingMiniGuidePath); + toggleIsDisputeResolverMiniGuideOpen(hasDisputeResolverMiniGuidePath); + toggleIsRankedVotingMiniGuideOpen(hasRankedVotingMiniGuidePath); + toggleIsStakingMiniGuideOpen(hasStakingMiniGuidePath); + toggleIsOnboardingMiniGuidesOpen(hasOnboardingMiniGuidePath); + toggleIsAppealMiniGuideOpen(hasAppealMiniGuidePath); toggleIsSettingsOpen(hasNotificationsPath); setInitialTab(hasNotificationsPath ? 1 : 0); - }, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]); + }, [ + toggleIsJurorLevelsMiniGuideOpen, + toggleIsAppealMiniGuideOpen, + toggleIsBinaryVotingMiniGuideOpen, + toggleIsDisputeResolverMiniGuideOpen, + toggleIsRankedVotingMiniGuideOpen, + toggleIsStakingMiniGuideOpen, + toggleIsOnboardingMiniGuidesOpen, + toggleIsSettingsOpen, + location.hash, + ]); useEffect(initializeFragmentURL, [initializeFragmentURL]); @@ -161,6 +195,12 @@ const DesktopHeader: React.FC = () => { {isSettingsOpen && } )} + {isJurorLevelsMiniGuideOpen && } + {isAppealMiniGuideOpen && } + {isBinaryVotingMiniGuideOpen && } + {isDisputeResolverMiniGuideOpen && } + {isRankedVotingMiniGuideOpen && } + {isStakingMiniGuideOpen && } {isOnboardingMiniGuidesOpen && } );