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,