feat: hash path to navigate directly to specific mini-guides

Author: jaybuidl

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,16 @@ interface ITemplate {
   isVisible: boolean;
 }
 
+export const miniGuideHashes = [
+  "#appeal-miniguide",
+  "#binaryvoting-miniguide",
+  "#disputeresolver-miniguide",
+  "#rankedvoting-miniguide",
+  "#staking-miniguide",
+  "#onboarding-miniguide",
+] as const;
+export type MiniguideHashesType = (typeof miniGuideHashes)[number];
+
 const Template: React.FC<ITemplate> = ({
   onClose,
   LeftContent,
@@ -143,13 +154,15 @@ const Template: React.FC<ITemplate> = ({
   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, () => {

web/src/layout/Header/DesktopHeader.tsx

@@ -7,16 +7,21 @@ 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 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 +110,44 @@ const DesktopHeader: React.FC = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = 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<number>(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 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");
+    toggleIsAppealMiniGuideOpen(hasAppealMiniGuidePath);
+    toggleIsBinaryVotingMiniGuideOpen(hasBinaryVotingMiniGuidePath);
+    toggleIsDisputeResolverMiniGuideOpen(hasDisputeResolverMiniGuidePath);
+    toggleIsRankedVotingMiniGuideOpen(hasRankedVotingMiniGuidePath);
+    toggleIsStakingMiniGuideOpen(hasStakingMiniGuidePath);
+    toggleIsOnboardingMiniGuidesOpen(hasOnboardingMiniGuidePath);
+    toggleIsAppealMiniGuideOpen(hasAppealMiniGuidePath);
     toggleIsSettingsOpen(hasNotificationsPath);
     setInitialTab(hasNotificationsPath ? 1 : 0);
-  }, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]);
+  }, [
+    toggleIsAppealMiniGuideOpen,
+    toggleIsBinaryVotingMiniGuideOpen,
+    toggleIsDisputeResolverMiniGuideOpen,
+    toggleIsRankedVotingMiniGuideOpen,
+    toggleIsStakingMiniGuideOpen,
+    toggleIsOnboardingMiniGuidesOpen,
+    toggleIsSettingsOpen,
+    location.hash,
+  ]);
 
   useEffect(initializeFragmentURL, [initializeFragmentURL]);
 
@@ -161,6 +190,11 @@ const DesktopHeader: React.FC = () => {
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
+      {isAppealMiniGuideOpen && <Appeal toggleMiniGuide={toggleIsAppealMiniGuideOpen} />}
+      {isBinaryVotingMiniGuideOpen && <BinaryVoting toggleMiniGuide={toggleIsBinaryVotingMiniGuideOpen} />}
+      {isDisputeResolverMiniGuideOpen && <DisputeResolver toggleMiniGuide={toggleIsDisputeResolverMiniGuideOpen} />}
+      {isRankedVotingMiniGuideOpen && <RankedVoting toggleMiniGuide={toggleIsRankedVotingMiniGuideOpen} />}
+      {isStakingMiniGuideOpen && <Staking toggleMiniGuide={toggleIsStakingMiniGuideOpen} />}
       {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
     </>
   );