Skip to content

Links to specific mini-guides #1666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 2, 2024
Merged

Links to specific mini-guides #1666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d0cf72
feat: hash path to navigate directly to specific mini-guides
jaybuidl Aug 1, 2024
50883f1
feat: include juror levesl miniguides too
kemuru Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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<ITemplate> = ({
onClose,
LeftContent,
Expand All @@ -143,13 +155,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, () => {
Expand Down
56 changes: 48 additions & 8 deletions web/src/layout/Header/DesktopHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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<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 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]);

Expand Down Expand Up @@ -161,6 +195,12 @@ const DesktopHeader: React.FC = () => {
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
</PopupContainer>
)}
{isJurorLevelsMiniGuideOpen && <JurorLevels toggleMiniGuide={toggleIsJurorLevelsMiniGuideOpen} />}
{isAppealMiniGuideOpen && <Appeal toggleMiniGuide={toggleIsAppealMiniGuideOpen} />}
{isBinaryVotingMiniGuideOpen && <BinaryVoting toggleMiniGuide={toggleIsBinaryVotingMiniGuideOpen} />}
{isDisputeResolverMiniGuideOpen && <DisputeResolver toggleMiniGuide={toggleIsDisputeResolverMiniGuideOpen} />}
{isRankedVotingMiniGuideOpen && <RankedVoting toggleMiniGuide={toggleIsRankedVotingMiniGuideOpen} />}
{isStakingMiniGuideOpen && <Staking toggleMiniGuide={toggleIsStakingMiniGuideOpen} />}
{isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
</>
);
Expand Down
Loading