From 6de6f8fe35f3efc82c6362f0ce3da9f64c5d9ba6 Mon Sep 17 00:00:00 2001 From: Aditya Arora Date: Thu, 28 Aug 2025 16:13:16 -0400 Subject: [PATCH 01/11] chore(dev-hub)-header Improvements --- .../src/components/Root/index.tsx | 20 ++++++++++-- .../src/components/search-button.tsx | 32 +++++++++++++++++++ .../src/config/layout.config.tsx | 21 +++--------- 3 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 apps/developer-hub/src/components/search-button.tsx diff --git a/apps/developer-hub/src/components/Root/index.tsx b/apps/developer-hub/src/components/Root/index.tsx index 3ac4818b0f..c87240ae18 100644 --- a/apps/developer-hub/src/components/Root/index.tsx +++ b/apps/developer-hub/src/components/Root/index.tsx @@ -2,13 +2,15 @@ import { AppShell } from "@pythnetwork/component-library/AppShell"; import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider"; import { NuqsAdapter } from "nuqs/adapters/next/app"; import type { ReactNode } from "react"; -import "./global.css"; import { AMPLITUDE_API_KEY, ENABLE_ACCESSIBILITY_REPORTING, GOOGLE_ANALYTICS_ID, } from "../../config/server"; +import { SearchButton } from "../search-button"; + +import "./global.css"; export const TABS = [ { segment: "", children: "Home" }, @@ -28,9 +30,23 @@ export const Root = ({ children }: Props) => ( amplitudeApiKey={AMPLITUDE_API_KEY} googleAnalyticsId={GOOGLE_ANALYTICS_ID} enableAccessibilityReporting={ENABLE_ACCESSIBILITY_REPORTING} + extraCta={} + mainCta={{ + label: "Insights", + href: "https://insights.pyth.network/", + }} providers={[NuqsAdapter]} tabs={TABS} > - {children} + + {children} + ); diff --git a/apps/developer-hub/src/components/search-button.tsx b/apps/developer-hub/src/components/search-button.tsx new file mode 100644 index 0000000000..fc715374d5 --- /dev/null +++ b/apps/developer-hub/src/components/search-button.tsx @@ -0,0 +1,32 @@ +"use client"; + +import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default"; +import { useState } from "react"; + +export const SearchButton = () => { + const [open, setOpen] = useState(false); + + return ( + <> + + + + ); +}; diff --git a/apps/developer-hub/src/config/layout.config.tsx b/apps/developer-hub/src/config/layout.config.tsx index f0a50f1058..6ef26fd737 100644 --- a/apps/developer-hub/src/config/layout.config.tsx +++ b/apps/developer-hub/src/config/layout.config.tsx @@ -5,9 +5,12 @@ import { source } from "../source"; export const baseOptions: BaseLayoutProps = { nav: { - enabled: false, + enabled: true, }, themeSwitch: { + enabled: true, + }, + searchToggle: { enabled: false, }, }; @@ -16,20 +19,6 @@ export const docsOptions: DocsLayoutProps = { ...baseOptions, tree: source.pageTree, sidebar: { - tabs: { - transform(option, node) { - const meta = source.getNodeMeta(node); - if (!meta || !node.icon) return option; - - return { - ...option, - icon: ( -
- {node.icon} -
- ), - }; - }, - }, + tabs: false, }, }; From 6a5a7fdc1447e4d313d4ef3f9a0ab9659bd766a7 Mon Sep 17 00:00:00 2001 From: Aditya Arora Date: Thu, 28 Aug 2025 17:26:33 -0400 Subject: [PATCH 02/11] requested changes --- .../src/components/search-button.tsx | 17 ++++++++--------- apps/developer-hub/src/config/layout.config.tsx | 2 +- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/developer-hub/src/components/search-button.tsx b/apps/developer-hub/src/components/search-button.tsx index fc715374d5..ca152fca54 100644 --- a/apps/developer-hub/src/components/search-button.tsx +++ b/apps/developer-hub/src/components/search-button.tsx @@ -1,5 +1,7 @@ "use client"; +import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass"; +import { Button } from "@pythnetwork/component-library/Button"; import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default"; import { useState } from "react"; @@ -8,20 +10,17 @@ export const SearchButton = () => { return ( <> - + Date: Fri, 29 Aug 2025 11:30:30 +0200 Subject: [PATCH 03/11] fix: wrong provider order --- .../src/components/Root/index.tsx | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/apps/developer-hub/src/components/Root/index.tsx b/apps/developer-hub/src/components/Root/index.tsx index c87240ae18..13241c3c27 100644 --- a/apps/developer-hub/src/components/Root/index.tsx +++ b/apps/developer-hub/src/components/Root/index.tsx @@ -25,28 +25,28 @@ type Props = { }; export const Root = ({ children }: Props) => ( - } - mainCta={{ - label: "Insights", - href: "https://insights.pyth.network/", + - } + mainCta={{ + label: "Insights", + href: "https://insights.pyth.network/", }} + providers={[NuqsAdapter]} + tabs={TABS} > {children} - - + + ); From 8069a245e13f90dbaecc8e58484836af6c4bf81c Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Fri, 29 Aug 2025 16:05:44 +0200 Subject: [PATCH 04/11] feat: search button component --- .../src/components/search-button.tsx | 21 +++----- apps/insights/src/cache.ts | 14 ++--- .../components/Root/search-button.module.scss | 16 ------ .../src/components/Root/search-button.tsx | 33 +++--------- .../src/SearchButton/index.module.scss | 17 ++++++ .../src/SearchButton/index.stories.tsx | 49 +++++++++++++++++ .../src/SearchButton/index.tsx | 53 +++++++++++++++++++ 7 files changed, 139 insertions(+), 64 deletions(-) create mode 100644 packages/component-library/src/SearchButton/index.module.scss create mode 100644 packages/component-library/src/SearchButton/index.stories.tsx create mode 100644 packages/component-library/src/SearchButton/index.tsx diff --git a/apps/developer-hub/src/components/search-button.tsx b/apps/developer-hub/src/components/search-button.tsx index ca152fca54..3548f1eca7 100644 --- a/apps/developer-hub/src/components/search-button.tsx +++ b/apps/developer-hub/src/components/search-button.tsx @@ -1,26 +1,19 @@ "use client"; -import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass"; -import { Button } from "@pythnetwork/component-library/Button"; +import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton"; import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default"; -import { useState } from "react"; +import { useCallback, useState } from "react"; export const SearchButton = () => { const [open, setOpen] = useState(false); + const handleSearch = useCallback(() => { + setOpen(true); + }, []); + return ( <> - + { const SearchButtonImpl = ( props: Omit, "children">, ) => ( -
- - -
+ } + largeScreenText={} + /> ); const useSearchDrawer = ({ feeds, publishers }: ResolvedSearchButtonProps) => { diff --git a/packages/component-library/src/SearchButton/index.module.scss b/packages/component-library/src/SearchButton/index.module.scss new file mode 100644 index 0000000000..298d3ad0a7 --- /dev/null +++ b/packages/component-library/src/SearchButton/index.module.scss @@ -0,0 +1,17 @@ +@use "@pythnetwork/component-library/theme"; + +.searchButton { + .largeScreenSearchButton { + display: none; + + @include theme.breakpoint("md") { + display: inline-flex; + } + } + + .smallScreenSearchButton { + @include theme.breakpoint("md") { + display: none; + } + } +} \ No newline at end of file diff --git a/packages/component-library/src/SearchButton/index.stories.tsx b/packages/component-library/src/SearchButton/index.stories.tsx new file mode 100644 index 0000000000..62568f2282 --- /dev/null +++ b/packages/component-library/src/SearchButton/index.stories.tsx @@ -0,0 +1,49 @@ +import * as icons from "@phosphor-icons/react/dist/ssr"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; +import { SearchButton as SearchButtonComponent } from "./index.jsx"; +import { SIZES } from "../Button/index.jsx"; + + +const iconControl = { + control: "select", + options: Object.keys(icons), + mapping: Object.fromEntries( + Object.entries(icons).map(([iconName, Icon]) => [ + iconName, + , + ]), + ), +} as const; + +const meta = { + component: SearchButtonComponent, + argTypes: { + size: { + control: "inline-radio", + options: SIZES, + table: { + category: "Variant", + }, + }, + beforeIcon: { + ...iconControl, + defaultValue: , + table: { + category: "Contents", + }, + }, + + }, +} satisfies Meta; +export default meta; + +export const SearchButton = { + args: { + largeScreenText: "Search", + smallScreenText: "Search", + size: "sm", + beforeIcon: , + }, +} satisfies StoryObj; diff --git a/packages/component-library/src/SearchButton/index.tsx b/packages/component-library/src/SearchButton/index.tsx new file mode 100644 index 0000000000..5f4b867f15 --- /dev/null +++ b/packages/component-library/src/SearchButton/index.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'; +import type { ComponentProps, ReactNode } from "react"; + +import { Button } from "../Button"; +import styles from "./index.module.scss"; + + +type OwnProps = { + largeScreenText?: ReactNode | undefined; + smallScreenText?: ReactNode | undefined; +}; + +type Props = Pick< + ComponentProps, + 'beforeIcon' | 'size' | 'onClick' +> & + OwnProps; + +export const SearchButton = ({ + beforeIcon, + largeScreenText, + smallScreenText, + ...props +}: Props) => { + return ( +
+ + +
+ ); +}; From f401db6b0cc8f3ad0677b3121f857db5f8a41597 Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Fri, 29 Aug 2025 16:07:59 +0200 Subject: [PATCH 05/11] fix: nit --- packages/component-library/src/SearchButton/index.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/component-library/src/SearchButton/index.stories.tsx b/packages/component-library/src/SearchButton/index.stories.tsx index 62568f2282..728bbefc37 100644 --- a/packages/component-library/src/SearchButton/index.stories.tsx +++ b/packages/component-library/src/SearchButton/index.stories.tsx @@ -1,7 +1,6 @@ import * as icons from "@phosphor-icons/react/dist/ssr"; import type { Meta, StoryObj } from "@storybook/react"; -import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; import { SearchButton as SearchButtonComponent } from "./index.jsx"; import { SIZES } from "../Button/index.jsx"; @@ -29,7 +28,6 @@ const meta = { }, beforeIcon: { ...iconControl, - defaultValue: , table: { category: "Contents", }, @@ -44,6 +42,5 @@ export const SearchButton = { largeScreenText: "Search", smallScreenText: "Search", size: "sm", - beforeIcon: , }, } satisfies StoryObj; From 0e958fb7908b5ac170e931e48f271f54a70f107a Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Fri, 29 Aug 2025 16:09:29 +0200 Subject: [PATCH 06/11] fix: theme import --- packages/component-library/src/SearchButton/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/component-library/src/SearchButton/index.module.scss b/packages/component-library/src/SearchButton/index.module.scss index 298d3ad0a7..94611728d5 100644 --- a/packages/component-library/src/SearchButton/index.module.scss +++ b/packages/component-library/src/SearchButton/index.module.scss @@ -1,4 +1,4 @@ -@use "@pythnetwork/component-library/theme"; +@use "../theme"; .searchButton { .largeScreenSearchButton { From 07f3a81b86839825b229d6d46bd5234155081e55 Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Fri, 29 Aug 2025 16:14:03 +0200 Subject: [PATCH 07/11] fix: formatting --- apps/developer-hub/src/components/search-button.tsx | 7 ++++++- apps/insights/src/components/Root/search-button.tsx | 4 ++-- .../src/SearchButton/index.stories.tsx | 4 ++-- .../component-library/src/SearchButton/index.tsx | 12 ++++++------ 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/apps/developer-hub/src/components/search-button.tsx b/apps/developer-hub/src/components/search-button.tsx index 3548f1eca7..f02e978860 100644 --- a/apps/developer-hub/src/components/search-button.tsx +++ b/apps/developer-hub/src/components/search-button.tsx @@ -13,7 +13,12 @@ export const SearchButton = () => { return ( <> - + } - largeScreenText={} + smallScreenContent={} + largeScreenContent={} /> ); diff --git a/packages/component-library/src/SearchButton/index.stories.tsx b/packages/component-library/src/SearchButton/index.stories.tsx index 728bbefc37..8ba1f5b433 100644 --- a/packages/component-library/src/SearchButton/index.stories.tsx +++ b/packages/component-library/src/SearchButton/index.stories.tsx @@ -39,8 +39,8 @@ export default meta; export const SearchButton = { args: { - largeScreenText: "Search", - smallScreenText: "Search", + largeScreenContent: "Search", + smallScreenContent: "Search", size: "sm", }, } satisfies StoryObj; diff --git a/packages/component-library/src/SearchButton/index.tsx b/packages/component-library/src/SearchButton/index.tsx index 5f4b867f15..349e60ec15 100644 --- a/packages/component-library/src/SearchButton/index.tsx +++ b/packages/component-library/src/SearchButton/index.tsx @@ -8,8 +8,8 @@ import styles from "./index.module.scss"; type OwnProps = { - largeScreenText?: ReactNode | undefined; - smallScreenText?: ReactNode | undefined; + largeScreenContent?: ReactNode; + smallScreenContent?: ReactNode; }; type Props = Pick< @@ -20,8 +20,8 @@ type Props = Pick< export const SearchButton = ({ beforeIcon, - largeScreenText, - smallScreenText, + largeScreenContent, + smallScreenContent, ...props }: Props) => { return ( @@ -35,7 +35,7 @@ export const SearchButton = ({ {...props} > - {largeScreenText} + {largeScreenContent} ); From 81d7bb44e58709475c321754563b7770688c4960 Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Fri, 29 Aug 2025 16:30:59 +0200 Subject: [PATCH 08/11] fix: props --- .../src/SearchButton/index.module.scss | 2 +- .../src/SearchButton/index.stories.tsx | 4 +- .../src/SearchButton/index.tsx | 61 ++++++++++--------- 3 files changed, 33 insertions(+), 34 deletions(-) diff --git a/packages/component-library/src/SearchButton/index.module.scss b/packages/component-library/src/SearchButton/index.module.scss index 94611728d5..05a3643b3d 100644 --- a/packages/component-library/src/SearchButton/index.module.scss +++ b/packages/component-library/src/SearchButton/index.module.scss @@ -14,4 +14,4 @@ display: none; } } -} \ No newline at end of file +} diff --git a/packages/component-library/src/SearchButton/index.stories.tsx b/packages/component-library/src/SearchButton/index.stories.tsx index 8ba1f5b433..5df1ea8b96 100644 --- a/packages/component-library/src/SearchButton/index.stories.tsx +++ b/packages/component-library/src/SearchButton/index.stories.tsx @@ -4,7 +4,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { SearchButton as SearchButtonComponent } from "./index.jsx"; import { SIZES } from "../Button/index.jsx"; - const iconControl = { control: "select", options: Object.keys(icons), @@ -19,7 +18,7 @@ const iconControl = { const meta = { component: SearchButtonComponent, argTypes: { - size: { + size: { control: "inline-radio", options: SIZES, table: { @@ -32,7 +31,6 @@ const meta = { category: "Contents", }, }, - }, } satisfies Meta; export default meta; diff --git a/packages/component-library/src/SearchButton/index.tsx b/packages/component-library/src/SearchButton/index.tsx index 349e60ec15..4388ad2235 100644 --- a/packages/component-library/src/SearchButton/index.tsx +++ b/packages/component-library/src/SearchButton/index.tsx @@ -1,23 +1,25 @@ "use client"; -import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'; -import type { ComponentProps, ReactNode } from "react"; +import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass"; +import clsx from "clsx"; +import type { ReactNode } from "react"; +import { Button as BaseButton } from "react-aria-components"; +import type { Props as ButtonProps } from "../Button"; import { Button } from "../Button"; import styles from "./index.module.scss"; - type OwnProps = { largeScreenContent?: ReactNode; smallScreenContent?: ReactNode; }; -type Props = Pick< - ComponentProps, - 'beforeIcon' | 'size' | 'onClick' +type Props = Pick< + ButtonProps, + "beforeIcon" | "size" | "onClick" | "className" | "isPending" > & OwnProps; - + export const SearchButton = ({ beforeIcon, largeScreenContent, @@ -26,28 +28,27 @@ export const SearchButton = ({ }: Props) => { return (
- - -
+ + + ); }; From 44750fce7f8665f212d02e2fca6117951438357b Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Sun, 31 Aug 2025 23:27:42 +0200 Subject: [PATCH 09/11] feat: default content for search component --- .../src/components/Root/search-button.tsx | 22 ++----------------- .../src/SearchButton/index.tsx | 17 ++++++++++++-- 2 files changed, 17 insertions(+), 22 deletions(-) diff --git a/apps/insights/src/components/Root/search-button.tsx b/apps/insights/src/components/Root/search-button.tsx index da32b94636..09641e4a1f 100644 --- a/apps/insights/src/components/Root/search-button.tsx +++ b/apps/insights/src/components/Root/search-button.tsx @@ -8,7 +8,6 @@ import { NoResults } from "@pythnetwork/component-library/NoResults"; import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton"; import { SearchInput } from "@pythnetwork/component-library/SearchInput"; import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup"; -import { Skeleton } from "@pythnetwork/component-library/Skeleton"; import { ListLayout, Virtualizer, @@ -23,7 +22,7 @@ import { useLogger } from "@pythnetwork/component-library/useLogger"; import { matchSorter } from "match-sorter"; import type { ReactNode } from "react"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { useCollator, useFilter, useIsSSR } from "react-aria"; +import { useCollator, useFilter } from "react-aria"; import { Cluster, ClusterToName } from "../../services/pyth"; import { AssetClassBadge } from "../AssetClassBadge"; @@ -74,14 +73,7 @@ const ResolvedSearchButton = (props: ResolvedSearchButtonProps) => { const SearchButtonImpl = ( props: Omit, "children">, -) => ( - } - largeScreenContent={} - /> -); +) => ; const useSearchDrawer = ({ feeds, publishers }: ResolvedSearchButtonProps) => { const drawer = useDrawer(); @@ -135,16 +127,6 @@ const useSearchHotkey = (openSearchDrawer: () => void) => { }, [handleKeyDown]); }; -const SearchShortcutText = () => { - const isSSR = useIsSSR(); - return isSSR ? : ; -}; - -const SearchTextImpl = () => { - const isMac = useMemo(() => navigator.userAgent.includes("Mac"), []); - return isMac ? "⌘ K" : "Ctrl K"; -}; - type SearchDialogContentsProps = ResolvedSearchButtonProps; const SearchDialogContents = ({ diff --git a/packages/component-library/src/SearchButton/index.tsx b/packages/component-library/src/SearchButton/index.tsx index 4388ad2235..ed93dbbf64 100644 --- a/packages/component-library/src/SearchButton/index.tsx +++ b/packages/component-library/src/SearchButton/index.tsx @@ -3,10 +3,13 @@ import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass"; import clsx from "clsx"; import type { ReactNode } from "react"; +import { useMemo } from "react"; +import { useIsSSR } from "react-aria"; import { Button as BaseButton } from "react-aria-components"; import type { Props as ButtonProps } from "../Button"; import { Button } from "../Button"; +import { Skeleton } from "../Skeleton"; import styles from "./index.module.scss"; type OwnProps = { @@ -20,6 +23,16 @@ type Props = Pick< > & OwnProps; +const SearchShortcutText = () => { + const isSSR = useIsSSR(); + return isSSR ? : ; +}; + +const SearchTextImpl = () => { + const isMac = useMemo(() => navigator.userAgent.includes("Mac"), []); + return isMac ? "⌘ K" : "Ctrl K"; +}; + export const SearchButton = ({ beforeIcon, largeScreenContent, @@ -36,7 +49,7 @@ export const SearchButton = ({ rounded {...props} > - {largeScreenContent} + {largeScreenContent ?? } ); From 1b801e32b6ca9f0d50a006054d00dcfd84cdba38 Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Wed, 3 Sep 2025 11:25:10 +0100 Subject: [PATCH 10/11] fix: cache params --- apps/insights/src/cache.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/insights/src/cache.ts b/apps/insights/src/cache.ts index bcf4057fa8..6b1c830c61 100644 --- a/apps/insights/src/cache.ts +++ b/apps/insights/src/cache.ts @@ -9,11 +9,15 @@ const transformer = { deserialize: parse, }; -// export const DEFAULT_CACHE_TTL = 3600; // 1 hour -// export const DEFAULT_CACHE_STALE = 86_400; // 24 hours - -export const DEFAULT_CACHE_TTL = 60; // 1 minute -export const DEFAULT_CACHE_STALE = 60; // 1 minute +/** + * - API routes will be cached for 1 hour + * - Cached function will be cached for 10 minutes, + * If the function is called within 1 hour, it will + * still be served from the cache, but also fetch the latest data + */ +export const DEFAULT_NEXT_FETCH_TTL = 3600; // 1 hour +export const DEFAULT_REDIS_CACHE_TTL = 60 * 10; // 10 minutes +export const DEFAULT_REDIS_CACHE_STALE = 3600; // 1 hour export const redisCache: ACDCache = createCache({ transformer, From ebb15f966dd199d770a48b1e7002336d7bd091f8 Mon Sep 17 00:00:00 2001 From: Alexandru Cambose Date: Wed, 3 Sep 2025 11:28:10 +0100 Subject: [PATCH 11/11] fix: remove unused imports --- apps/insights/src/components/Root/search-button.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/insights/src/components/Root/search-button.tsx b/apps/insights/src/components/Root/search-button.tsx index 09641e4a1f..9d98fd5674 100644 --- a/apps/insights/src/components/Root/search-button.tsx +++ b/apps/insights/src/components/Root/search-button.tsx @@ -22,7 +22,6 @@ import { useLogger } from "@pythnetwork/component-library/useLogger"; import { matchSorter } from "match-sorter"; import type { ReactNode } from "react"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { useCollator, useFilter } from "react-aria"; import { Cluster, ClusterToName } from "../../services/pyth"; import { AssetClassBadge } from "../AssetClassBadge";