diff --git a/packages/component-library/src/Paginator/index.tsx b/packages/component-library/src/Paginator/index.tsx
index 8a5ad7fcb9..3665e8952e 100644
--- a/packages/component-library/src/Paginator/index.tsx
+++ b/packages/component-library/src/Paginator/index.tsx
@@ -65,10 +65,10 @@ const PageSizeSelect = ({
className={styles.pageSizeSelect ?? ""}
label="Page size"
hideLabel
- options={pageSizeOptions}
+ options={pageSizeOptions.map((option) => ({ id: option }))}
selectedKey={pageSize}
onSelectionChange={onPageSizeChange}
- show={(value) => `${value.toString()} per page`}
+ show={(value) => `${value.id.toString()} per page`}
variant="ghost"
size="sm"
/>
diff --git a/packages/component-library/src/Select/index.module.scss b/packages/component-library/src/Select/index.module.scss
index 9efba9f487..4627b12c50 100644
--- a/packages/component-library/src/Select/index.module.scss
+++ b/packages/component-library/src/Select/index.module.scss
@@ -29,7 +29,8 @@
0 4px 6px -4px rgb(from black r g b / 10%),
0 10px 15px -3px rgb(from black r g b / 10%);
- .title {
+ .title,
+ .groupLabel {
padding: theme.spacing(3);
padding-bottom: theme.spacing(1);
color: theme.color("muted");
@@ -38,10 +39,21 @@
font-weight: theme.font-weight("medium");
}
+ .groupLabel {
+ padding: theme.spacing(2);
+ padding-top: theme.spacing(3);
+ position: sticky;
+ top: 0;
+ background-color: theme.color("background", "modal");
+ border-top-left-radius: theme.border-radius("lg");
+ z-index: 1;
+ }
+
.listbox {
outline: none;
overflow: auto;
padding: theme.spacing(1);
+ max-height: theme.spacing(120);
.section {
padding: theme.spacing(0.5) 0;
@@ -77,6 +89,7 @@
outline: theme.spacing(0.5) solid transparent;
outline-offset: 0;
line-height: theme.spacing(4);
+ isolation: isolate;
.check {
width: theme.spacing(3);
@@ -108,8 +121,21 @@
}
}
- &[data-group-label-hidden] .groupLabel {
- @include theme.sr-only;
+ &[data-grouped] {
+ &:not([data-group-label-hidden]) {
+ .listbox {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .title {
+ @include theme.sr-only;
+ }
+ }
+
+ &[data-group-label-hidden] .groupLabel {
+ @include theme.sr-only;
+ }
}
&[data-placement="top"] {
diff --git a/packages/component-library/src/Select/index.stories.tsx b/packages/component-library/src/Select/index.stories.tsx
index ed85cf58fe..f0f691af4b 100644
--- a/packages/component-library/src/Select/index.stories.tsx
+++ b/packages/component-library/src/Select/index.stories.tsx
@@ -90,14 +90,14 @@ export default meta;
export const Flat = {
args: {
defaultSelectedKey: "foo",
- options: ["foo", "bar", "baz"],
+ options: ["foo", "bar", "baz"].map((id) => ({ id })),
variant: "primary",
size: "md",
isDisabled: false,
isPending: false,
rounded: false,
hideText: false,
- show: (value) => `The option ${value.toString()}`,
+ show: (value) => `The option ${value.id.toString()}`,
label: "A SELECT!",
hideLabel: true,
buttonLabel: "",
@@ -114,11 +114,14 @@ export const Grouped = {
},
},
args: {
- defaultSelectedKey: "foo",
+ defaultSelectedKey: "foo1",
optionGroups: [
- { name: "All", options: ["foo1", "foo2", "Some"] },
- { name: "bars", options: ["bar1", "bar2", "bar3"] },
- { name: "bazzes", options: ["baz1", "baz2", "baz3"] },
+ { name: "All", options: ["foo1", "foo2", "Some"].map((id) => ({ id })) },
+ { name: "bars", options: ["bar1", "bar2", "bar3"].map((id) => ({ id })) },
+ {
+ name: "bazzes",
+ options: ["baz1", "baz2", "baz3"].map((id) => ({ id })),
+ },
],
variant: "primary",
size: "md",
@@ -126,7 +129,7 @@ export const Grouped = {
isPending: false,
rounded: false,
hideText: false,
- show: (value) => `The option ${value.toString()}`,
+ show: (value) => `The option ${value.id.toString()}`,
label: "FOOS AND BARS",
hideLabel: true,
hideGroupLabel: true,
diff --git a/packages/component-library/src/Select/index.tsx b/packages/component-library/src/Select/index.tsx
index c25ca6325f..fbd8b2ef88 100644
--- a/packages/component-library/src/Select/index.tsx
+++ b/packages/component-library/src/Select/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { Check } from "@phosphor-icons/react/dist/ssr/Check";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";
@@ -21,7 +23,7 @@ import {
ListBoxSection,
} from "../unstyled/ListBox/index.js";
-type Props
= Omit<
+export type Props = Omit<
ComponentProps,
"defaultSelectedKey" | "selectedKey" | "onSelectionChange"
> &
@@ -30,18 +32,20 @@ type Props = Omit<
"variant" | "size" | "rounded" | "hideText" | "isPending"
> &
Pick & {
- show?: (value: T) => string;
+ show?: ((value: T) => ReactNode) | undefined;
+ textValue?: ((value: T) => string) | undefined;
icon?: ComponentProps["beforeIcon"];
label: ReactNode;
hideLabel?: boolean | undefined;
buttonLabel?: ReactNode;
+ defaultButtonLabel?: ReactNode;
} & (
| {
- defaultSelectedKey?: T | undefined;
+ defaultSelectedKey?: T["id"] | undefined;
}
| {
- selectedKey: T;
- onSelectionChange: (newValue: T) => void;
+ selectedKey: T["id"];
+ onSelectionChange: (newValue: T["id"]) => void;
}
) &
(
@@ -54,9 +58,10 @@ type Props = Omit<
}
);
-export const Select = ({
+export const Select = ({
className,
show,
+ textValue,
variant,
size,
rounded,
@@ -67,6 +72,7 @@ export const Select = ({
placement,
isPending,
buttonLabel,
+ defaultButtonLabel,
...props
}: Props) => (
// @ts-expect-error react-aria coerces everything to Key for some reason...
@@ -88,40 +94,40 @@ export const Select = ({
beforeIcon={icon}
isPending={isPending === true}
>
- {buttonLabel !== undefined && buttonLabel !== "" ? (
- buttonLabel
- ) : (
- >
- {({ selectedItem, selectedText }) =>
- selectedItem
- ? (show?.(selectedItem.id) ?? selectedItem.id)
- : selectedText
- }
-
- )}
+
{label}
{"options" in props ? (
- ({ id }))}
- >
- {({ id }) => - {id}
}
+
+ {(item) => (
+ -
+ {item}
+
+ )}
) : (
{({ name, options }) => (
- ({ id }))}>
- {({ id }) => - {id}
}
+
+ {(item) => (
+ -
+ {item}
+
+ )}
)}
@@ -133,16 +139,84 @@ export const Select = ({
type ItemProps = {
children: T;
- show: ((value: T) => string) | undefined;
+ show: ((value: T) => ReactNode) | undefined;
+ textValue: ((value: T) => string) | undefined;
};
-const Item = ({ children, show }: ItemProps) => (
+const Item = ({
+ children,
+ show,
+ textValue,
+}: ItemProps) => (
- {show?.(children) ?? children}
+ {show?.(children) ?? children.id}
);
+
+const getTextValue = ({
+ children,
+ show,
+ textValue,
+}: ItemProps) => {
+ if (textValue !== undefined) {
+ return textValue(children);
+ } else if (show === undefined) {
+ return children.id.toString();
+ } else {
+ const result = show(children);
+ return typeof result === "string" ? result : children.id.toString();
+ }
+};
+
+type ButtonLabelProps = Pick<
+ Props,
+ "buttonLabel" | "defaultButtonLabel" | "show"
+>;
+
+const ButtonLabel = ({
+ buttonLabel,
+ defaultButtonLabel,
+ show,
+}: ButtonLabelProps) => {
+ if (buttonLabel !== undefined && buttonLabel !== "") {
+ return buttonLabel;
+ } else if (defaultButtonLabel !== undefined && defaultButtonLabel !== "") {
+ return (
+ >
+ {(props) =>
+ props.selectedText === null ? (
+ defaultButtonLabel
+ ) : (
+
+ )
+ }
+
+ );
+ } else {
+ return (
+ >
+ {(props) => }
+
+ );
+ }
+};
+
+type SelectedValueLabelProps = Pick<
+ Props,
+ "show"
+> & {
+ selectedItem: T | null;
+ selectedText: string | null;
+};
+
+const SelectedValueLabel = ({
+ show,
+ selectedItem,
+ selectedText,
+}: SelectedValueLabelProps) =>
+ selectedItem ? (show?.(selectedItem) ?? selectedItem.id) : selectedText;
diff --git a/packages/component-library/src/Status/index.module.scss b/packages/component-library/src/Status/index.module.scss
index 62a8a4c4f1..a1ce1d07ba 100644
--- a/packages/component-library/src/Status/index.module.scss
+++ b/packages/component-library/src/Status/index.module.scss
@@ -1,7 +1,10 @@
@use "../theme";
.status {
- display: inline flow-root;
+ display: inline-flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: center;
border-radius: theme.border-radius("3xl");
transition-property: color, background-color, border-color;
transition-duration: 100ms;
@@ -11,45 +14,35 @@
border-style: solid;
.dot {
- display: inline-block;
border-radius: theme.border-radius("full");
- position: relative;
transition: background-color 100ms linear;
}
&[data-size="xs"] {
height: theme.spacing(4);
- padding: 0 theme.spacing(1);
+ padding: theme.spacing(1);
+ padding-right: theme.spacing(2);
font-size: theme.font-size("xxs");
font-weight: theme.font-weight("medium");
-
- .text {
- line-height: theme.spacing(4);
- padding: 0 theme.spacing(1);
- }
+ gap: theme.spacing(1);
.dot {
width: theme.spacing(2);
height: theme.spacing(2);
- top: theme.spacing(0.25);
}
}
&[data-size="md"] {
height: theme.spacing(6);
- padding: 0 theme.spacing(1.5);
+ padding: theme.spacing(1.5);
+ padding-right: theme.spacing(3);
font-size: theme.font-size("xs");
font-weight: theme.font-weight("medium");
-
- .text {
- line-height: theme.spacing(6);
- padding: 0 theme.spacing(1.5);
- }
+ gap: theme.spacing(1.5);
.dot {
width: theme.spacing(3);
height: theme.spacing(3);
- top: theme.spacing(0.5);
}
}
diff --git a/apps/insights/src/hooks/use-data.ts b/packages/component-library/src/useData/index.ts
similarity index 83%
rename from apps/insights/src/hooks/use-data.ts
rename to packages/component-library/src/useData/index.ts
index d72adbb3e0..3e8074a96c 100644
--- a/apps/insights/src/hooks/use-data.ts
+++ b/packages/component-library/src/useData/index.ts
@@ -1,14 +1,15 @@
-import { useLogger } from "@pythnetwork/component-library/useLogger";
import { useCallback } from "react";
import type { KeyedMutator } from "swr";
import useSWR from "swr";
+import { useLogger } from "../useLogger";
+
export const useData = (
key: Parameters>[0],
fetcher?: Parameters>[1],
config?: Parameters>[2],
) => {
- const { data, isLoading, mutate, ...rest } = useSWR(
+ const { data, isLoading, isValidating, mutate, ...rest } = useSWR(
key,
// eslint-disable-next-line unicorn/no-null
fetcher ?? null,
@@ -30,7 +31,7 @@ export const useData = (
} else if (isLoading) {
return State.Loading();
} else if (data) {
- return State.Loaded(data, mutate);
+ return State.Loaded(data, isValidating, mutate);
} else {
return State.NotLoaded();
}
@@ -46,8 +47,9 @@ export enum StateType {
const State = {
NotLoaded: () => ({ type: StateType.NotLoaded as const }),
Loading: () => ({ type: StateType.Loading as const }),
- Loaded: (data: T, mutate: KeyedMutator) => ({
+ Loaded: (data: T, isValidating: boolean, mutate: KeyedMutator) => ({
type: StateType.Loaded as const,
+ isValidating,
mutate,
data,
}),
diff --git a/packages/component-library/src/useDrawer/index.module.scss b/packages/component-library/src/useDrawer/index.module.scss
index 8e80002e06..0e580b5d05 100644
--- a/packages/component-library/src/useDrawer/index.module.scss
+++ b/packages/component-library/src/useDrawer/index.module.scss
@@ -117,7 +117,7 @@
display: none;
@include theme.breakpoint("sm") {
- display: unset;
+ display: inline-flex;
}
}
}
diff --git a/packages/component-library/src/useDrawer/index.tsx b/packages/component-library/src/useDrawer/index.tsx
index f84ac72fb1..2d20f7d758 100644
--- a/packages/component-library/src/useDrawer/index.tsx
+++ b/packages/component-library/src/useDrawer/index.tsx
@@ -61,9 +61,23 @@ const Drawer = ({
variant,
setMainContentOffset,
);
+ const isLarge = useIsLarge();
+
+ const wasPreviouslyLarge = useRef(undefined);
+ useEffect(() => {
+ if (isLarge !== undefined) {
+ if (wasPreviouslyLarge.current === undefined) {
+ wasPreviouslyLarge.current = isLarge;
+ } else if (isLarge !== wasPreviouslyLarge.current) {
+ wasPreviouslyLarge.current = isLarge;
+ setMainContentOffset(isLarge ? 0 : 100);
+ }
+ }
+ }, [isLarge, setMainContentOffset]);
return (
- {(...args) => (
- <>
- {
- setMainContentOffset(0);
- args[0].state.close();
- }}
- />
- {
- setIsHandlePressed(true);
- }}
- onPointerUp={() => {
- setIsHandlePressed(false);
- }}
- data-is-pressed={isHandlePressed || isDragging ? "" : undefined}
- />
-
-
-
- {title}
-
-
- {headingExtra}
-
-
-
- {headingAfter}
+
{
+ setIsHandlePressed(true);
+ }}
+ onPointerUp={() => {
+ setIsHandlePressed(false);
+ }}
+ data-is-pressed={isHandlePressed || isDragging ? "" : undefined}
+ />
+
+
+
+ {title}
+
+
+ {headingExtra}
+
-
{contents}
- {footer && (
-
{footer}
- )}
-
+
+ {headingAfter}
+
+
{contents}
+ {footer && (
+
{footer}
)}
);
@@ -148,9 +151,7 @@ const useAnimationProps = (
setMainContentOffset(100 - (100 * y) / modalRef.current.offsetHeight);
}
});
- const isLarge = useMediaQuery(
- `(min-width: ${styles["breakpoint-sm"] ?? ""})`,
- );
+ const isLarge = useIsLarge();
const commonProps = {
ref: modalRef,
@@ -244,6 +245,9 @@ const useAnimationProps = (
};
};
+const useIsLarge = () =>
+ useMediaQuery(`(min-width: ${styles["breakpoint-sm"] ?? ""})`);
+
const { Provider, useValue } = createModalDialogContext<
Props,
Pick
@@ -255,25 +259,3 @@ export type OpenDrawerArgs = OpenArgs<
Props,
Pick
>;
-
-type OnResizeProps = {
- threshold: string | undefined;
- onResize: () => void;
-};
-
-const OnResize = ({ threshold, onResize }: OnResizeProps) => {
- const isAboveThreshold = useMediaQuery(`(min-width: ${threshold ?? ""})`, {
- initializeWithValue: false,
- });
- const previousValue = useRef(undefined);
- useEffect(() => {
- if (previousValue.current === undefined) {
- previousValue.current = isAboveThreshold;
- } else if (isAboveThreshold !== previousValue.current) {
- previousValue.current = isAboveThreshold;
- onResize();
- }
- }, [isAboveThreshold, onResize]);
- // eslint-disable-next-line unicorn/no-null
- return null;
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f936df177..0d6d756a8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -535,6 +535,103 @@ importers:
specifier: 'catalog:'
version: 41.4.1(encoding@0.1.13)
+ apps/entropy-explorer:
+ dependencies:
+ '@phosphor-icons/react':
+ specifier: 'catalog:'
+ version: 2.1.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+ '@pythnetwork/component-library':
+ specifier: workspace:*
+ version: link:../../packages/component-library
+ clsx:
+ specifier: 'catalog:'
+ version: 2.1.1
+ connectkit:
+ specifier: 'catalog:'
+ version: 1.9.0(@babel/core@7.26.10)(@tanstack/react-query@5.71.5(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-is@18.3.1)(react@19.1.0)(viem@2.24.3(bufferutil@4.0.9)(typescript@5.8.2)(utf-8-validate@5.0.10)(zod@3.24.2))(wagmi@2.14.16(@react-native-async-storage/async-storage@1.24.0(react-native@0.78.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@19.1.0)(bufferutil@4.0.9)(react@19.1.0)(utf-8-validate@5.0.10)))(@tanstack/query-core@5.71.5)(@tanstack/react-query@5.71.5(react@19.1.0))(@types/react@19.1.0)(bufferutil@4.0.9)(encoding@0.1.13)(immer@9.0.21)(react@19.1.0)(typescript@5.8.2)(utf-8-validate@5.0.10)(viem@2.24.3(bufferutil@4.0.9)(typescript@5.8.2)(utf-8-validate@5.0.10)(zod@3.24.2))(zod@3.24.2))
+ next:
+ specifier: 'catalog:'
+ version: 15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.86.1)
+ nuqs:
+ specifier: 'catalog:'
+ version: 2.4.1(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.86.1))(react@19.1.0)
+ react:
+ specifier: 'catalog:'
+ version: 19.1.0
+ react-aria:
+ specifier: 'catalog:'
+ version: 3.38.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+ react-dom:
+ specifier: 'catalog:'
+ version: 19.1.0(react@19.1.0)
+ viem:
+ specifier: 'catalog:'
+ version: 2.24.3(bufferutil@4.0.9)(typescript@5.8.2)(utf-8-validate@5.0.10)(zod@3.24.2)
+ wagmi:
+ specifier: 'catalog:'
+ version: 2.14.16(@react-native-async-storage/async-storage@1.24.0(react-native@0.78.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@19.1.0)(bufferutil@4.0.9)(react@19.1.0)(utf-8-validate@5.0.10)))(@tanstack/query-core@5.71.5)(@tanstack/react-query@5.71.5(react@19.1.0))(@types/react@19.1.0)(bufferutil@4.0.9)(encoding@0.1.13)(immer@9.0.21)(react@19.1.0)(typescript@5.8.2)(utf-8-validate@5.0.10)(viem@2.24.3(bufferutil@4.0.9)(typescript@5.8.2)(utf-8-validate@5.0.10)(zod@3.24.2))(zod@3.24.2)
+ zod:
+ specifier: 'catalog:'
+ version: 3.24.2
+ devDependencies:
+ '@cprussin/eslint-config':
+ specifier: 'catalog:'
+ version: 4.0.2(@testing-library/dom@10.4.0)(@typescript-eslint/eslint-plugin@8.29.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2))(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2))(@typescript-eslint/parser@8.29.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2))(eslint@9.23.0(jiti@1.21.7))(jest@29.7.0(@types/node@22.14.0)(ts-node@10.9.2(@types/node@22.14.0)(typescript@5.8.2)))(ts-node@10.9.2(@types/node@22.14.0)(typescript@5.8.2))(turbo@2.4.4)(typescript@5.8.2)
+ '@cprussin/jest-config':
+ specifier: 'catalog:'
+ version: 2.0.2(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(bufferutil@4.0.9)(eslint@9.23.0(jiti@1.21.7))(jest@29.7.0(@types/node@22.14.0)(ts-node@10.9.2(@types/node@22.14.0)(typescript@5.8.2)))(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.86.1))(prettier@3.5.3)(typescript@5.8.2)(utf-8-validate@5.0.10)
+ '@cprussin/prettier-config':
+ specifier: 'catalog:'
+ version: 2.2.2(prettier@3.5.3)
+ '@cprussin/tsconfig':
+ specifier: 'catalog:'
+ version: 3.1.2(typescript@5.8.2)
+ '@svgr/webpack':
+ specifier: 'catalog:'
+ version: 8.1.0(typescript@5.8.2)
+ '@types/jest':
+ specifier: 'catalog:'
+ version: 29.5.14
+ '@types/node':
+ specifier: 'catalog:'
+ version: 22.14.0
+ '@types/react':
+ specifier: 'catalog:'
+ version: 19.1.0
+ '@types/react-dom':
+ specifier: 'catalog:'
+ version: 19.1.1(@types/react@19.1.0)
+ autoprefixer:
+ specifier: 'catalog:'
+ version: 10.4.21(postcss@8.5.3)
+ eslint:
+ specifier: 'catalog:'
+ version: 9.23.0(jiti@1.21.7)
+ jest:
+ specifier: 'catalog:'
+ version: 29.7.0(@types/node@22.14.0)(ts-node@10.9.2(@types/node@22.14.0)(typescript@5.8.2))
+ postcss:
+ specifier: 'catalog:'
+ version: 8.5.3
+ prettier:
+ specifier: 'catalog:'
+ version: 3.5.3
+ sass:
+ specifier: 'catalog:'
+ version: 1.86.1
+ stylelint:
+ specifier: 'catalog:'
+ version: 16.17.0(typescript@5.8.2)
+ stylelint-config-standard-scss:
+ specifier: 'catalog:'
+ version: 14.0.0(postcss@8.5.3)(stylelint@16.17.0(typescript@5.8.2))
+ typescript:
+ specifier: 'catalog:'
+ version: 5.8.2
+ vercel:
+ specifier: 'catalog:'
+ version: 41.4.1(encoding@0.1.13)
+
apps/hermes/client/js:
dependencies:
'@zodios/core':
@@ -1711,6 +1808,9 @@ importers:
react-dom:
specifier: 'catalog:'
version: 19.1.0(react@19.1.0)
+ swr:
+ specifier: 'catalog:'
+ version: 2.3.3(react@19.1.0)
devDependencies:
'@cprussin/eslint-config':
specifier: 'catalog:'