From 436f4d336cef65aedfd0a826ec5eea713ad8f9e6 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Thu, 27 Feb 2025 08:40:47 -0500 Subject: [PATCH] feat: make links common between sidenav and mobilenav --- package.json | 2 +- pnpm-lock.yaml | 12 +- src/app/[locale]/_components/MobileNav.tsx | 129 +++--------------- src/app/[locale]/_components/SideNav.tsx | 69 ++-------- src/app/[locale]/_components/links.tsx | 88 ++++++++++++ .../verify/_components/Verifications.tsx | 2 +- src/contexts/CaptchaProvider.tsx | 1 - 7 files changed, 127 insertions(+), 176 deletions(-) create mode 100644 src/app/[locale]/_components/links.tsx diff --git a/package.json b/package.json index a78ec61..7f82a94 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "dependencies": { "@hookform/resolvers": "3.9.1", - "@inkonchain/ink-kit": "0.9.1-beta.9", + "@inkonchain/ink-kit": "0.9.1-beta.11", "@next/third-parties": "15.1.6", "@octokit/auth-app": "7.1.3", "@octokit/rest": "21.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fa0e3b5..a4e2ae5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: 3.9.1 version: 3.9.1(react-hook-form@7.54.1(react@19.0.0)) '@inkonchain/ink-kit': - specifier: 0.9.1-beta.9 - version: 0.9.1-beta.9(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) + specifier: 0.9.1-beta.11 + version: 0.9.1-beta.11(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) '@next/third-parties': specifier: 15.1.6 version: 15.1.6(next@15.1.6(@babel/core@7.26.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.77.6))(react@19.0.0) @@ -865,13 +865,13 @@ packages: cpu: [x64] os: [win32] - '@inkonchain/ink-kit@0.9.1-beta.9': - resolution: {integrity: sha512-Ni7NLiT1/Z4o0MKJgu4XtAo6L6kx60gur3phWJYuLOE9svrCGtiHnHBr54tIWwhBAXKgJSN9oROEKjMUXpnXaw==} + '@inkonchain/ink-kit@0.9.1-beta.11': + resolution: {integrity: sha512-4ltxrrWE7P0nLZsLE6Js6VJmOB1IPAsOs9T13h1tHwLEBbDPkckcvDKs5GsDz1hET+6n7iFLLMCvMaQrBmTKhQ==} peerDependencies: '@tanstack/react-query': ^5 react: 19.0.0 react-dom: 19.0.0 - tailwindcss: ^3 + tailwindcss: ^3 || ^4 viem: ^2 wagmi: ^2 @@ -7247,7 +7247,7 @@ snapshots: '@img/sharp-win32-x64@0.33.5': optional: true - '@inkonchain/ink-kit@0.9.1-beta.9(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': + '@inkonchain/ink-kit@0.9.1-beta.11(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@4.0.8)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': dependencies: '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@tanstack/react-query': 5.60.6(react@19.0.0) 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/app/[locale]/verify/_components/Verifications.tsx b/src/app/[locale]/verify/_components/Verifications.tsx index 7a46187..2e4e2db 100644 --- a/src/app/[locale]/verify/_components/Verifications.tsx +++ b/src/app/[locale]/verify/_components/Verifications.tsx @@ -166,7 +166,7 @@ const MobileVerificationsTable = () => { return (
- Verification +
Verification
{VERIFICATIONS.map((verification) => ( 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,