diff --git a/src/app/[locale]/_components/MobileNav.tsx b/src/app/[locale]/_components/MobileNav.tsx index 52a8778..9aad73a 100644 --- a/src/app/[locale]/_components/MobileNav.tsx +++ b/src/app/[locale]/_components/MobileNav.tsx @@ -1,15 +1,11 @@ "use client"; -import { - InkIcon, - InkLayoutMobileNav, - useInkLayoutContext, -} from "@inkonchain/ink-kit"; +import { InkLayoutMobileNav, useInkLayoutContext } from "@inkonchain/ink-kit"; -import { useFeatureFlag } from "@/hooks/useFeatureFlag"; import { useRouterQuery } from "@/hooks/useRouterQuery"; import { Link } from "@/routing"; +import { useLinks } from "./links"; import { ThemeToggle } from "./ThemeToggle"; export function MobileNav() { @@ -19,8 +15,9 @@ export function MobileNav() { setIsMobileNavOpen(false); } - const hasVerifyPage = useFeatureFlag("verifyPage"); const query = useRouterQuery(); + const links = useLinks(); + return ( } - links={[ - { - href: "/", - asChild: true, - icon: , - children: ( - - Home - - ), - }, - { - href: "/apps", - asChild: true, - icon: , - children: ( - - Apps - - ), - }, - { - href: "/bridge", - asChild: true, - icon: , - children: ( - - Bridge - - ), - }, - ...(hasVerifyPage - ? [ - { - href: "/verify", - asChild: true, - icon: , - children: ( - - Verify - - ), - }, - ] - : []), - { - href: "/build", - asChild: true, - icon: , - children: ( - - Build - - ), - }, - { - href: "/community", - asChild: true, - icon: , - children: ( - - Community - - ), - }, - { - href: "/about", - asChild: true, - icon: , - children: ( - - About - - ), - }, - ]} + links={links.map(({ href, icon, label }) => ({ + href, + asChild: true, + icon, + children: ( + + {label} + + ), + }))} /> ); } diff --git a/src/app/[locale]/_components/SideNav.tsx b/src/app/[locale]/_components/SideNav.tsx index 52e7f2e..9e3a554 100644 --- a/src/app/[locale]/_components/SideNav.tsx +++ b/src/app/[locale]/_components/SideNav.tsx @@ -1,9 +1,8 @@ "use client"; import { useEffect, useState } from "react"; -import { InkIcon, InkLayoutSideNav, InkNavLink } from "@inkonchain/ink-kit"; +import { InkLayoutSideNav, InkNavLink } from "@inkonchain/ink-kit"; -import { useFeatureFlag } from "@/hooks/useFeatureFlag"; import { useRouterQuery } from "@/hooks/useRouterQuery"; import { hrefObjectFromHrefPropWithQuery, @@ -13,10 +12,11 @@ import { usePathname, } from "@/routing"; +import { useLinks } from "./links"; import { ThemeToggle } from "./ThemeToggle"; export const SideNav = () => { - const hasVerifyPage = useFeatureFlag("verifyPage"); + const links = useLinks(); return ( { } - links={[ - { - asChild: true, - children: ( - - Home - - ), - href: "/", - icon: , - }, - { - asChild: true, - children: Apps, - href: "/apps", - icon: , - }, - { - asChild: true, - children: Bridge, - href: "/bridge", - icon: , - }, - - ...(hasVerifyPage - ? [ - { - asChild: true, - children: Verify, - href: "/verify", - icon: , - }, - ] - : []), - { - asChild: true, - children: Build, - href: "/builders", - icon: , - }, - { - asChild: true, - children: Community, - href: "/community", - icon: , - }, - { - asChild: true, - children: About, - href: "/about", - icon: , - }, - ]} + links={links.map(({ href, icon, label, exactHref }) => ({ + href, + asChild: true, + icon, + children: ( + + {label} + + ), + }))} /> ); }; diff --git a/src/app/[locale]/_components/links.tsx b/src/app/[locale]/_components/links.tsx new file mode 100644 index 0000000..6c88f89 --- /dev/null +++ b/src/app/[locale]/_components/links.tsx @@ -0,0 +1,88 @@ +import { useMemo } from "react"; +import { InkIcon } from "@inkonchain/ink-kit"; + +import { useFeatureFlag } from "@/hooks/useFeatureFlag"; +import { Link, Pathnames, usePathname } from "@/routing"; +import { FeatureFlagKey } from "@/util/feature-flags"; + +interface Link { + href: Pathnames; + icon: React.ReactNode; + label: string; + exactHref?: boolean; + flagKey?: FeatureFlagKey; + onlyIfOnPath?: boolean; +} + +const links = [ + { + href: "/", + icon: , + label: "Home", + exactHref: true, + }, + { + href: "/apps", + icon: , + label: "Apps", + }, + { + href: "/bridge", + icon: , + label: "Bridge", + }, + { + href: "/verify", + icon: , + label: "Verify", + flagKey: "verifyPage", + }, + { + href: "/builders", + icon: , + label: "Build", + }, + { + href: "/community", + icon: , + label: "Community", + }, + { + href: "/about", + icon: , + label: "About", + }, + { + href: "/faucet", + icon: , + label: "Faucet", + onlyIfOnPath: true, + }, +] satisfies Link[]; + +export function useLinks() { + const pathname = usePathname(); + const verifyPage = useFeatureFlag("verifyPage"); + const flags = useMemo( + () => ({ + verifyPage, + }), + [verifyPage] + ); + + const filteredLinks = useMemo( + () => + links.filter((link) => { + if (link.flagKey) { + return flags[link.flagKey]; + } + if (link.onlyIfOnPath) { + return pathname.includes(link.href); + } + return true; + }), + [flags, pathname] + ); + + return filteredLinks; +} diff --git a/src/contexts/CaptchaProvider.tsx b/src/contexts/CaptchaProvider.tsx index b2b24ce..c84b547 100644 --- a/src/contexts/CaptchaProvider.tsx +++ b/src/contexts/CaptchaProvider.tsx @@ -3,7 +3,6 @@ import React, { createContext, PropsWithChildren, - ReactNode, useCallback, useContext, useState,