feat: make links common between sidenav and mobilenav

inkonchain · Feb 27, 2025 · eb4e935 · eb4e935
1 parent 817b1b5
commit eb4e935
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 168 deletions.
diff --git 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,119 +15,30 @@ export function MobileNav() {
     setIsMobileNavOpen(false);
   }
 
-  const hasVerifyPage = useFeatureFlag("verifyPage");
   const query = useRouterQuery();
+  const links = useLinks();
+
   return (
     <InkLayoutMobileNav
       bottom={
         <div className="flex justify-center">
           <ThemeToggle />
         </div>
       }
-      links={[
-        {
-          href: "/",
-          asChild: true,
-          icon: <InkIcon.Home />,
-          children: (
-            <Link
-              href={{ pathname: "/", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              Home
-            </Link>
-          ),
-        },
-        {
-          href: "/apps",
-          asChild: true,
-          icon: <InkIcon.Apps />,
-          children: (
-            <Link
-              href={{ pathname: "/apps", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              Apps
-            </Link>
-          ),
-        },
-        {
-          href: "/bridge",
-          asChild: true,
-          icon: <InkIcon.Bridge />,
-          children: (
-            <Link
-              href={{ pathname: "/bridge", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              Bridge
-            </Link>
-          ),
-        },
-        ...(hasVerifyPage
-          ? [
-              {
-                href: "/verify",
-                asChild: true,
-                icon: <InkIcon.CheckFill />,
-                children: (
-                  <Link
-                    href={{ pathname: "/verify", query }}
-                    onClick={closeMobileNavigation}
-                    prefetch
-                  >
-                    Verify
-                  </Link>
-                ),
-              },
-            ]
-          : []),
-        {
-          href: "/build",
-          asChild: true,
-          icon: <InkIcon.Code />,
-          children: (
-            <Link
-              href={{ pathname: "/builders", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              Build
-            </Link>
-          ),
-        },
-        {
-          href: "/community",
-          asChild: true,
-          icon: <InkIcon.Users />,
-          children: (
-            <Link
-              href={{ pathname: "/community", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              Community
-            </Link>
-          ),
-        },
-        {
-          href: "/about",
-          asChild: true,
-          icon: <InkIcon.Info />,
-          children: (
-            <Link
-              href={{ pathname: "/about", query }}
-              onClick={closeMobileNavigation}
-              prefetch
-            >
-              About
-            </Link>
-          ),
-        },
-      ]}
+      links={links.map(({ href, icon, label }) => ({
+        href,
+        asChild: true,
+        icon,
+        children: (
+          <Link
+            href={{ pathname: href, query }}
+            onClick={closeMobileNavigation}
+            prefetch
+          >
+            {label}
+          </Link>
+        ),
+      }))}
     />
   );
 }
diff --git 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 (
     <InkLayoutSideNav
@@ -25,59 +25,16 @@ export const SideNav = () => {
           <ThemeToggle />
         </div>
       }
-      links={[
-        {
-          asChild: true,
-          children: (
-            <SideNavLink href="/" exactHref>
-              Home
-            </SideNavLink>
-          ),
-          href: "/",
-          icon: <InkIcon.Home size="icon-lg" enforce="inherit" />,
-        },
-        {
-          asChild: true,
-          children: <SideNavLink href="/apps">Apps</SideNavLink>,
-          href: "/apps",
-          icon: <InkIcon.Apps size="icon-lg" enforce="inherit" />,
-        },
-        {
-          asChild: true,
-          children: <SideNavLink href="/bridge">Bridge</SideNavLink>,
-          href: "/bridge",
-          icon: <InkIcon.Bridge size="icon-lg" enforce="inherit" />,
-        },
-
-        ...(hasVerifyPage
-          ? [
-              {
-                asChild: true,
-                children: <SideNavLink href="/verify">Verify</SideNavLink>,
-                href: "/verify",
-                icon: <InkIcon.CheckFill size="icon-lg" enforce="inherit" />,
-              },
-            ]
-          : []),
-        {
-          asChild: true,
-          children: <SideNavLink href="/builders">Build</SideNavLink>,
-          href: "/builders",
-          icon: <InkIcon.Code size="icon-lg" enforce="inherit" />,
-        },
-        {
-          asChild: true,
-          children: <SideNavLink href="/community">Community</SideNavLink>,
-          href: "/community",
-          icon: <InkIcon.Users size="icon-lg" enforce="inherit" />,
-        },
-        {
-          asChild: true,
-          children: <SideNavLink href="/about">About</SideNavLink>,
-          href: "/about",
-          icon: <InkIcon.Info size="icon-lg" enforce="inherit" />,
-        },
-      ]}
+      links={links.map(({ href, icon, label, exactHref }) => ({
+        href,
+        asChild: true,
+        icon,
+        children: (
+          <SideNavLink href={href} exactHref={exactHref}>
+            {label}
+          </SideNavLink>
+        ),
+      }))}
     />
   );
 };

diff --git a/src/app/[locale]/_components/links.tsx 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: <InkIcon.Home />,
+    label: "Home",
+    exactHref: true,
+  },
+  {
+    href: "/apps",
+    icon: <InkIcon.Apps />,
+    label: "Apps",
+  },
+  {
+    href: "/bridge",
+    icon: <InkIcon.Bridge />,
+    label: "Bridge",
+  },
+  {
+    href: "/verify",
+    icon: <InkIcon.CheckFill />,
+    label: "Verify",
+    flagKey: "verifyPage",
+  },
+  {
+    href: "/builders",
+    icon: <InkIcon.Code />,
+    label: "Build",
+  },
+  {
+    href: "/community",
+    icon: <InkIcon.Users />,
+    label: "Community",
+  },
+  {
+    href: "/about",
+    icon: <InkIcon.Info />,
+    label: "About",
+  },
+  {
+    href: "/faucet",
+    icon: <InkIcon.Deposit />,
+    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
@@ -3,7 +3,6 @@
 import React, {
   createContext,
   PropsWithChildren,
-  ReactNode,
   useCallback,
   useContext,
   useState,