From 9d0cf72f6c0f4187ee7b72c5950cea2fe445c472 Mon Sep 17 00:00:00 2001 From: jaybuidl Date: Thu, 1 Aug 2024 17:46:41 +0100 Subject: [PATCH 1/2] feat: hash path to navigate directly to specific mini-guides --- .../MiniGuides/MainStructureTemplate.tsx | 23 +++++++-- web/src/layout/Header/DesktopHeader.tsx | 50 ++++++++++++++++--- 2 files changed, 60 insertions(+), 13 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 44766e167..dd56f74f0 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,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 = ({ onClose, LeftContent, @@ -143,13 +154,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..e6b31d71c 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/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(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 && } )} + {isAppealMiniGuideOpen && } + {isBinaryVotingMiniGuideOpen && } + {isDisputeResolverMiniGuideOpen && } + {isRankedVotingMiniGuideOpen && } + {isStakingMiniGuideOpen && } {isOnboardingMiniGuidesOpen && } ); From 50883f18fc7f1be56ae7fa25262bd72f9d30095c Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 1 Aug 2024 19:40:17 +0200 Subject: [PATCH 2/2] feat: include juror levesl miniguides too --- .../components/Popup/MiniGuides/MainStructureTemplate.tsx | 1 + web/src/layout/Header/DesktopHeader.tsx | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index dd56f74f0..dfe24c7b4 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -131,6 +131,7 @@ interface ITemplate { } export const miniGuideHashes = [ + "#jurorlevels-miniguide", "#appeal-miniguide", "#binaryvoting-miniguide", "#disputeresolver-miniguide", diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index e6b31d71c..fc889ccda 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -15,6 +15,7 @@ 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"; @@ -110,6 +111,7 @@ 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); @@ -122,6 +124,7 @@ const DesktopHeader: React.FC = () => { const isDefaultChain = chainId === DEFAULT_CHAIN; const initializeFragmentURL = useCallback(() => { 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"); @@ -129,6 +132,7 @@ const DesktopHeader: React.FC = () => { const hasStakingMiniGuidePath = hashIncludes("#staking-miniguide"); const hasOnboardingMiniGuidePath = hashIncludes("#onboarding-miniguide"); const hasNotificationsPath = hashIncludes("#notifications"); + toggleIsJurorLevelsMiniGuideOpen(hasJurorLevelsMiniGuidePath); toggleIsAppealMiniGuideOpen(hasAppealMiniGuidePath); toggleIsBinaryVotingMiniGuideOpen(hasBinaryVotingMiniGuidePath); toggleIsDisputeResolverMiniGuideOpen(hasDisputeResolverMiniGuidePath); @@ -139,6 +143,7 @@ const DesktopHeader: React.FC = () => { toggleIsSettingsOpen(hasNotificationsPath); setInitialTab(hasNotificationsPath ? 1 : 0); }, [ + toggleIsJurorLevelsMiniGuideOpen, toggleIsAppealMiniGuideOpen, toggleIsBinaryVotingMiniGuideOpen, toggleIsDisputeResolverMiniGuideOpen, @@ -190,6 +195,7 @@ const DesktopHeader: React.FC = () => { {isSettingsOpen && } )} + {isJurorLevelsMiniGuideOpen && } {isAppealMiniGuideOpen && } {isBinaryVotingMiniGuideOpen && } {isDisputeResolverMiniGuideOpen && }