From 16ce2319c2b66c83db1506fbe87681d173133f10 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 30 Apr 2026 14:36:02 -0700 Subject: [PATCH 001/133] DES-21: Pagination Base UI idiom upgrades + optional totalItems (#26918) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Brings Origin's `Pagination` compound component up to parity with the Base UI idioms used by the rest of Origin (matching the style of DES-18 #26842 and DES-19 #26829), and softens the API so callers without a known total are no longer blocked. [DES-21](https://lightspark.atlassian.net/browse/DES-21) (parent epic: [DES-20](https://lightspark.atlassian.net/browse/DES-20)). ## Changes - **`render` prop on every part.** Each part now goes through `useRender`, gaining a `render` prop so consumers can swap the rendered element. The motivating case is rendering `Pagination.Previous` / `Pagination.Next` as `` for shareable per-page URLs and middle-click-to-new-tab. - **`data-*` state attributes.** Component state surfaces via `useRender`'s `state` + `stateAttributesMapping`: - Root: `data-page`, `data-first-page`, `data-last-page` - Prev/Next: `data-disabled` mirrors the resolved disabled state (so anchor renders pick up the disabled visual treatment uniformly with ` - ); + return useRender({ + defaultTagName: "button", + render, + ref: forwardedRef, + state: { disabled: isDisabled }, + props: [ + { + type: "button", + "aria-label": "Previous page", + "aria-disabled": isDisabled || undefined, + disabled: isDisabled, + onClick: handleClick, + }, + elementProps, + { + className: clsx(styles.button, className), + children: children ?? ( + + ), + }, + ] as unknown as Record, + }); }); -// Next button export interface PaginationNextProps - extends Omit, "children"> {} + extends Omit, "children"> { + render?: useRender.RenderProp; + children?: React.ReactNode; +} const PaginationNext = React.forwardRef( function PaginationNext(props, forwardedRef) { - const { className, onClick, disabled, ...elementProps } = props; + const { className, onClick, disabled, render, children, ...elementProps } = + props; const { page, totalPages, onPageChange } = usePaginationContext(); - const isDisabled = disabled ?? page >= totalPages; + const isDisabled = + disabled ?? (totalPages !== undefined && page >= totalPages); - const handleClick = (event: React.MouseEvent) => { - onClick?.(event); + const handleClick = (event: React.MouseEvent) => { + if (isDisabled) { + event.preventDefault(); + return; + } + onClick?.(event as React.MouseEvent); if (!event.defaultPrevented && onPageChange) { onPageChange(page + 1); } }; - return ( - - ); + return useRender({ + defaultTagName: "button", + render, + ref: forwardedRef, + state: { disabled: isDisabled }, + props: [ + { + type: "button", + "aria-label": "Next page", + "aria-disabled": isDisabled || undefined, + disabled: isDisabled, + onClick: handleClick, + }, + elementProps, + { + className: clsx(styles.button, className), + children: children ?? ( + + ), + }, + ] as unknown as Record, + }); }, ); -// Export compound component export const Pagination = { Root: PaginationRoot, Label: PaginationLabel, @@ -278,6 +395,7 @@ export const Pagination = { Navigation: PaginationNavigation, Previous: PaginationPrevious, Next: PaginationNext, + usePaginationContext, }; export default Pagination; diff --git a/packages/origin/src/components/Pagination/Pagination.unit.test.tsx b/packages/origin/src/components/Pagination/Pagination.unit.test.tsx new file mode 100644 index 000000000..cdb8c9470 --- /dev/null +++ b/packages/origin/src/components/Pagination/Pagination.unit.test.tsx @@ -0,0 +1,241 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/react"; +import * as React from "react"; +import { Pagination, usePaginationContext } from "./Pagination"; + +describe("Pagination.Root", () => { + it("exposes data-page and data-first-page on first page", () => { + render( + + + , + ); + + const nav = screen.getByRole("navigation", { name: /pagination/i }); + expect(nav).toHaveAttribute("data-page", "1"); + expect(nav).toHaveAttribute("data-first-page", ""); + expect(nav).not.toHaveAttribute("data-last-page"); + }); + + it("exposes data-last-page on the last page", () => { + render( + + + , + ); + + const nav = screen.getByRole("navigation", { name: /pagination/i }); + expect(nav).toHaveAttribute("data-page", "20"); + expect(nav).toHaveAttribute("data-last-page", ""); + expect(nav).not.toHaveAttribute("data-first-page"); + }); + + it("omits data-last-page when totalItems is not provided", () => { + render( + + + + + + , + ); + + const nav = screen.getByRole("navigation", { name: /pagination/i }); + expect(nav).not.toHaveAttribute("data-last-page"); + expect(nav).not.toHaveAttribute("data-first-page"); + }); + + it("renders as a custom element via render prop", () => { + render( + } + > + + , + ); + + const root = screen.getByTestId("root"); + expect(root.tagName).toBe("SECTION"); + expect(root).toHaveAttribute("data-page", "1"); + }); +}); + +describe("Pagination.Range", () => { + let warnSpy: ReturnType; + + beforeEach(() => { + warnSpy = vi.spyOn(console, "warn").mockImplementation(() => undefined); + }); + + afterEach(() => { + warnSpy.mockRestore(); + }); + + it("renders the default range string when totalItems is provided", () => { + render( + + + , + ); + + expect(screen.getByTestId("range")).toHaveTextContent("1–100 of 2.5K"); + }); + + it("warns and renders nothing when totalItems is missing without children", () => { + render( + + + , + ); + + expect(screen.queryByTestId("range")).toBeNull(); + expect(warnSpy).toHaveBeenCalledWith( + expect.stringContaining("Pagination.Range"), + ); + }); + + it("passes undefined fields to the children render fn when totalItems is missing", () => { + const childrenFn = vi.fn(() => "custom"); + + render( + + {childrenFn} + , + ); + + expect(childrenFn).toHaveBeenCalledWith({ + startItem: undefined, + endItem: undefined, + totalItems: undefined, + }); + }); +}); + +describe("Pagination navigation buttons", () => { + it("Previous auto-disables on first page regardless of totals", () => { + render( + + + + + + , + ); + + expect(screen.getByRole("button", { name: /previous/i })).toBeDisabled(); + }); + + it("Next does not auto-disable when totalItems is omitted", () => { + render( + + + + + + , + ); + + expect(screen.getByRole("button", { name: /next/i })).toBeEnabled(); + }); + + it("Next auto-disables at the last page when totalItems is known", () => { + render( + + + + + + , + ); + + expect(screen.getByRole("button", { name: /next/i })).toBeDisabled(); + }); + + it("dispatches onPageChange with the next page on Next click", () => { + const onPageChange = vi.fn(); + render( + + + + + + , + ); + + fireEvent.click(screen.getByRole("button", { name: /next/i })); + expect(onPageChange).toHaveBeenCalledWith(3); + }); + + it("renders Previous as an anchor when render is supplied", () => { + render( + + + } + /> + } /> + + , + ); + + const prev = screen.getByTestId("prev"); + const next = screen.getByTestId("next"); + expect(prev.tagName).toBe("A"); + expect(prev).toHaveAttribute("href", "?page=2"); + expect(next.tagName).toBe("A"); + expect(next).toHaveAttribute("href", "?page=4"); + }); + + it("flags disabled anchor renders with aria-disabled and data-disabled", () => { + render( + + + } + /> + + , + ); + + const prev = screen.getByTestId("prev"); + expect(prev).toHaveAttribute("aria-disabled", "true"); + expect(prev).toHaveAttribute("data-disabled", ""); + }); +}); + +describe("usePaginationContext", () => { + function Probe() { + const ctx = usePaginationContext(); + return {ctx.page}; + } + + it("exposes context values to consumer parts", () => { + render( + + + , + ); + + expect(screen.getByTestId("probe")).toHaveTextContent("4"); + }); + + it("throws when called outside Pagination.Root", () => { + const errorSpy = vi + .spyOn(console, "error") + .mockImplementation(() => undefined); + + expect(() => render()).toThrow( + /Pagination parts must be placed within/, + ); + + errorSpy.mockRestore(); + }); +}); diff --git a/packages/origin/src/components/Pagination/index.ts b/packages/origin/src/components/Pagination/index.ts index f8c83788b..8d29660fc 100644 --- a/packages/origin/src/components/Pagination/index.ts +++ b/packages/origin/src/components/Pagination/index.ts @@ -1,5 +1,6 @@ -export { Pagination } from "./Pagination"; +export { Pagination, usePaginationContext } from "./Pagination"; export type { + PaginationContextValue, PaginationRootProps, PaginationLabelProps, PaginationRangeProps, diff --git a/packages/origin/src/index.ts b/packages/origin/src/index.ts index c9db340c5..fe91d4bf4 100644 --- a/packages/origin/src/index.ts +++ b/packages/origin/src/index.ts @@ -77,7 +77,16 @@ export { Menu } from "./components/Menu"; export { Menubar } from "./components/Menubar"; export { Meter } from "./components/Meter"; export { NavigationMenu } from "./components/NavigationMenu"; -export { Pagination } from "./components/Pagination"; +export { Pagination, usePaginationContext } from "./components/Pagination"; +export type { + PaginationContextValue, + PaginationRootProps, + PaginationLabelProps, + PaginationRangeProps, + PaginationNavigationProps, + PaginationPreviousProps, + PaginationNextProps, +} from "./components/Pagination"; export { PhoneInput } from "./components/PhoneInput"; export { Progress } from "./components/Progress"; export { Radio } from "./components/Radio"; diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index a83f3b9f6..51b1cfe8d 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,15 +1,5 @@ # @lightsparkdev/ui -## 1.1.20 - -### Patch Changes - -- d1d0682: - Add Base, Ethereum, Polygon, and Solana chain icon components, plus a `ChainIcon` helper. - - Improve package build output for CSS and SVG assets. -- Updated dependencies [d1d0682] -- Updated dependencies [d1d0682] - - @lightsparkdev/core@1.5.2 - ## 1.1.19 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index f4d14b46e..1110698e3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/ui", - "version": "1.1.20", + "version": "1.1.19", "repository": { "type": "git", "url": "git+https://github.com/lightsparkdev/js-sdk.git" @@ -90,7 +90,7 @@ "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.5.2", + "@lightsparkdev/core": "1.5.1", "@rollup/plugin-url": "^8.0.2", "@simbathesailor/use-what-changed": "^2.0.0", "@svgr/core": "^8.1.0", diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts index 9f70ec718..22f6851f6 100644 --- a/packages/ui/tsdown.config.ts +++ b/packages/ui/tsdown.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from "tsdown"; -import { svgr } from "./tsdown-svg-plugin.ts"; +import { svgr } from "./tsdown-svg-plugin"; export default defineConfig({ entry: [ From aefb119e51dd896d9405047f45aeeb1d1ccd07ea Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 30 Apr 2026 14:37:32 -0700 Subject: [PATCH 002/133] [grid] add typed wrapper for Origin Button (#26770) ## Summary - expose Origin Button's existing Base UI `render` / `nativeButton` support in its TypeScript props so product wrappers can render it as a typed router link without reimplementing visuals - add a focused Grid `NageButton` wrapper that only owns typed routing props (`to`, `toParams`, `hash`) around Origin Button - keep the branch intentionally narrow: no legacy shared UI Button import, no Emotion compatibility layer, no legacy prop mapping, and no consumer migration yet - add a Vitest contract test for routing and transparent Origin prop pass-through ## Validation - `yarn vitest run src/uma-nage/components/NageButton.test.tsx --environment jsdom` - `yarn tsc --noEmit --pretty false` in `js/apps/private/site` - `yarn types` in `js/packages/origin` - `yarn vite build` in `js/apps/private/site` GitOrigin-RevId: 633ace9159779598d69b44177bbfd3ba9ffe233a --- packages/origin/src/components/Button/Button.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/origin/src/components/Button/Button.tsx b/packages/origin/src/components/Button/Button.tsx index fc8070f3b..ce9f3ac73 100644 --- a/packages/origin/src/components/Button/Button.tsx +++ b/packages/origin/src/components/Button/Button.tsx @@ -7,8 +7,7 @@ import { Loader } from "../Loader"; import { useTrackedCallback } from "../Analytics/useTrackedCallback"; import styles from "./Button.module.scss"; -export interface ButtonProps - extends React.ButtonHTMLAttributes { +export interface ButtonProps extends BaseButton.Props { variant?: "filled" | "secondary" | "outline" | "ghost" | "critical" | "link"; size?: "default" | "compact" | "dense"; loading?: boolean; From 1e24a82bb0b83e1adc5277df35c89fe83bfc6320 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 30 Apr 2026 14:38:23 -0700 Subject: [PATCH 003/133] DES-23: Add LoadMore infinite-scroll primitive + useLoadMore hook (#26920) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Ships a new Origin compound primitive `LoadMore` and a transport-agnostic companion hook `useLoadMore` for forward-only infinite scroll. Third of three sibling pagination primitives under epic [DES-20](https://lightspark.atlassian.net/browse/DES-20) (after [DES-21](https://lightspark.atlassian.net/browse/DES-21) `Pagination` and [DES-22](https://lightspark.atlassian.net/browse/DES-22) `Pager`). Resolves [DES-23](https://lightspark.atlassian.net/browse/DES-23). ## Component API `LoadMore` follows the new Origin idiom standard — `forwardRef` everywhere, exported context hook (`useLoadMoreContext`), `data-*` state attributes, Base UI `useRender` `render` escape hatch on every overridable part. - **`Root`** — headless context provider over `{ hasMore, loading, onLoadMore, analyticsName }`. Renders only its children. - **`Trigger`** — composes Origin's `Button` by default; swap with `render={} /> + + ), +}; + +export const WithFilterReset: Story = { + render: () => { + const [filter, setFilter] = React.useState("all"); + const { items, hasMore, loading, loadingMore, loadMore } = + useLoadMore({ + fetchPage: async (cursor) => { + const offset = cursor ? Number(cursor) : 0; + await new Promise((r) => setTimeout(r, 300)); + const data = generatePage(offset, 5).map((item) => ({ + ...item, + label: `${filter}: ${item.label}`, + })); + const next = offset + 5; + return { + data, + nextCursor: next < 20 ? String(next) : undefined, + hasMore: next < 20, + }; + }, + resetOn: [filter], + }); + + return ( +
+
+ {["all", "starred", "archived"].map((value) => ( + + ))} +
+ + + + +
+ ); + }, +}; diff --git a/packages/origin/src/components/LoadMore/LoadMore.test-stories.tsx b/packages/origin/src/components/LoadMore/LoadMore.test-stories.tsx new file mode 100644 index 000000000..b37e21ab9 --- /dev/null +++ b/packages/origin/src/components/LoadMore/LoadMore.test-stories.tsx @@ -0,0 +1,233 @@ +"use client"; + +import * as React from "react"; +import { LoadMore } from "./LoadMore"; +import { Button } from "../Button"; +import { useLoadMore } from "./useLoadMore"; +import { AnalyticsProvider } from "../Analytics"; +import type { AnalyticsHandler, InteractionInfo } from "../Analytics"; + +interface CounterRefs { + loadCount: number; +} + +function ManualHarness({ + hasMore = true, + loading = false, +}: { + hasMore?: boolean; + loading?: boolean; +}) { + const [count, setCount] = React.useState(0); + return ( + setCount((c) => c + 1)} + > + +

Loads: {count}

+ + ); +} + +export function TriggerEnabled() { + return ; +} + +export function TriggerNoMore() { + return ; +} + +export function TriggerLoading() { + return ; +} + +export function TriggerCustomRender() { + const [count, setCount] = React.useState(0); + return ( + setCount((c) => c + 1)} + > + Show more} /> +

Loads: {count}

+ + ); +} + +function SentinelHarness({ + initialHasMore = true, + hold = false, +}: { + initialHasMore?: boolean; + hold?: boolean; +}) { + const [count, setCount] = React.useState(0); + const [hasMore, setHasMore] = React.useState(initialHasMore); + const [loading, setLoading] = React.useState(false); + + const onLoadMore = React.useCallback(() => { + setCount((c) => c + 1); + if (hold) { + setLoading(true); + return; + } + setLoading(true); + setTimeout(() => { + setLoading(false); + setHasMore(false); + }, 50); + }, [hold]); + + return ( +
+
+ + +

Loads: {count}

+ +
+ ); +} + +export function SentinelTriggersOnScroll() { + return ; +} + +export function SentinelDoesNotRefireWhileLoading() { + return ; +} + +export function SentinelDisabled() { + return ( + undefined}> + + + ); +} + +export function StatusAnnouncements({ + hasMore = true, + loading = false, +}: { + hasMore?: boolean; + loading?: boolean; +}) { + return ( + undefined} + > + + {({ loading, hasMore }) => + loading + ? "Loading more results" + : !hasMore + ? "End of results" + : "More available" + } + + + ); +} + +export function StatusLoading() { + return ; +} + +export function StatusEnd() { + return ; +} + +export function ContextOutsideRoot() { + return ( + + + + ); +} + +class ErrorBoundary extends React.Component< + { children: React.ReactNode }, + { error: Error | null } +> { + state = { error: null as Error | null }; + static getDerivedStateFromError(error: Error) { + return { error }; + } + render() { + if (this.state.error) { + return
{this.state.error.message}
; + } + return this.props.children; + } +} + +export function AnalyticsTrigger() { + const [events, setEvents] = React.useState([]); + const handler = React.useMemo( + () => ({ + onInteraction: (info) => setEvents((prev) => [...prev, info]), + }), + [], + ); + + return ( + + undefined} + analyticsName="results" + > + + + 
{JSON.stringify(events)}
+ + ); +} + +export function HookIntegration() { + const fetchPage = React.useCallback(async (cursor: string | undefined) => { + const offset = cursor ? Number(cursor) : 0; + const data = Array.from({ length: 5 }, (_, i) => ({ + id: `${offset + i}`, + })); + const next = offset + 5; + return { + data, + nextCursor: next < 15 ? String(next) : undefined, + hasMore: next < 15, + }; + }, []); + + const { items, hasMore, loading, loadingMore, loadMore } = useLoadMore<{ + id: string; + }>({ + fetchPage, + }); + + return ( +
+
    + {items.map((item) => ( +
  • {item.id}
    • + ))} +
+ + + +
+ ); +} diff --git a/packages/origin/src/components/LoadMore/LoadMore.test.tsx b/packages/origin/src/components/LoadMore/LoadMore.test.tsx new file mode 100644 index 000000000..3cb9e9dee --- /dev/null +++ b/packages/origin/src/components/LoadMore/LoadMore.test.tsx @@ -0,0 +1,167 @@ +import { test, expect } from "@playwright/experimental-ct-react"; +import { + TriggerEnabled, + TriggerNoMore, + TriggerLoading, + TriggerCustomRender, + SentinelTriggersOnScroll, + SentinelDoesNotRefireWhileLoading, + SentinelDisabled, + StatusAnnouncements, + StatusLoading, + StatusEnd, + ContextOutsideRoot, + AnalyticsTrigger, + HookIntegration, +} from "./LoadMore.test-stories"; + +test.describe("LoadMore.Trigger", () => { + test("calls onLoadMore on click and increments the counter", async ({ + mount, + page, + }) => { + await mount(); + const trigger = page.getByRole("button", { name: /load more/i }); + await expect(trigger).toBeEnabled(); + await expect(trigger).toHaveAttribute("data-has-more", "true"); + await trigger.click(); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + }); + + test("is disabled when hasMore is false", async ({ mount, page }) => { + await mount(); + const trigger = page.getByRole("button", { name: /load more/i }); + await expect(trigger).toBeDisabled(); + await expect(trigger).toHaveAttribute("data-disabled", "true"); + await expect(trigger).not.toHaveAttribute("data-has-more", "true"); + }); + + test("is disabled and aria-busy while loading", async ({ mount, page }) => { + await mount(); + const trigger = page.getByRole("button"); + await expect(trigger).toBeDisabled(); + await expect(trigger).toHaveAttribute("aria-busy", "true"); + await expect(trigger).toHaveAttribute("data-loading", "true"); + }); + + test("render prop swaps the underlying element and still tracks clicks", async ({ + mount, + page, + }) => { + await mount(); + const trigger = page.getByRole("button", { name: /show more/i }); + await expect(trigger).toBeVisible(); + await trigger.click(); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + }); +}); + +test.describe("LoadMore.Sentinel", () => { + test("calls onLoadMore when scrolled into view", async ({ mount, page }) => { + await mount(); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 0"); + await page.evaluate(() => + window.scrollTo({ top: document.body.scrollHeight, behavior: "instant" }), + ); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + // Stays at 1 — hasMore is now false after the timeout completes. + await page.waitForTimeout(150); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + }); + + test("does not refire while loading is held true", async ({ + mount, + page, + }) => { + await mount(); + await page.evaluate(() => + window.scrollTo({ top: document.body.scrollHeight, behavior: "instant" }), + ); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + await page.waitForTimeout(200); + await expect(page.getByTestId("load-count")).toHaveText("Loads: 1"); + }); + + test("renders no DOM when disabled", async ({ mount, page }) => { + await mount(); + await expect(page.getByTestId("sentinel")).toHaveCount(0); + }); +}); + +test.describe("LoadMore.Status", () => { + test("renders 'More available' by default with aria-live polite", async ({ + mount, + page, + }) => { + await mount(); + const status = page.getByTestId("status"); + await expect(status).toHaveAttribute("aria-live", "polite"); + await expect(status).toHaveAttribute("aria-atomic", "true"); + await expect(status).toHaveText("More available"); + }); + + test("announces loading text", async ({ mount, page }) => { + await mount(); + await expect(page.getByTestId("status")).toHaveText("Loading more results"); + await expect(page.getByTestId("status")).toHaveAttribute( + "data-loading", + "true", + ); + }); + + test("announces end-of-results text", async ({ mount, page }) => { + await mount(); + await expect(page.getByTestId("status")).toHaveText("End of results"); + await expect(page.getByTestId("status")).toHaveAttribute( + "data-end", + "true", + ); + }); +}); + +test.describe("Context safety", () => { + test("Trigger throws when used outside Root", async ({ mount, page }) => { + await mount(); + await expect(page.getByTestId("error")).toHaveText( + /must be placed within /, + ); + }); +}); + +test.describe("Analytics", () => { + test("emits LoadMore.click with part metadata when analyticsName is set", async ({ + mount, + page, + }) => { + await mount(); + await page.getByRole("button", { name: /load more/i }).click(); + const log = await page.getByTestId("analytics-log").textContent(); + expect(log).toBeTruthy(); + const events = JSON.parse(log ?? "[]"); + expect(events).toHaveLength(1); + expect(events[0]).toMatchObject({ + name: "results", + component: "LoadMore", + interaction: "click", + metadata: { part: "trigger" }, + }); + }); +}); + +test.describe("Hook integration", () => { + test("paginates via useLoadMore until hasMore is false", async ({ + mount, + page, + }) => { + await mount(); + await expect(page.getByTestId("items").locator("li")).toHaveCount(5); + + const trigger = page.getByRole("button", { name: /load more/i }); + await trigger.click(); + await expect(page.getByTestId("items").locator("li")).toHaveCount(10); + + await trigger.click(); + await expect(page.getByTestId("items").locator("li")).toHaveCount(15); + await expect(trigger).toBeDisabled(); + }); +}); diff --git a/packages/origin/src/components/LoadMore/LoadMore.tsx b/packages/origin/src/components/LoadMore/LoadMore.tsx new file mode 100644 index 000000000..17b07f19b --- /dev/null +++ b/packages/origin/src/components/LoadMore/LoadMore.tsx @@ -0,0 +1,432 @@ +"use client"; + +import * as React from "react"; +import { Button, type ButtonProps } from "../Button"; +import { useTrackedCallback } from "../Analytics/useTrackedCallback"; +import { useRender, mergeProps } from "../../lib/base-ui-utils"; +import styles from "./LoadMore.module.scss"; + +export interface LoadMoreContextValue { + hasMore: boolean; + loading: boolean; + onLoadMore: () => void; + analyticsName: string | undefined; +} + +const LoadMoreContext = React.createContext(null); + +/** Access the surrounding `LoadMore.Root` state. Throws if used outside one. */ +export function useLoadMoreContext(): LoadMoreContextValue { + const context = React.useContext(LoadMoreContext); + if (context === null) { + throw new Error("LoadMore parts must be placed within ."); + } + return context; +} + +export interface LoadMoreRootProps { + /** Whether more items are available. */ + hasMore: boolean; + /** + * Whether a load is currently in flight. Trigger and Sentinel use this to + * disable themselves and prevent re-firing. + */ + loading: boolean; + /** Called when the user (or sentinel intersection) requests another page. */ + onLoadMore: () => void; + /** + * Optional analytics identifier. Trigger emits `${name}.click` (interaction + * `click`) and Sentinel emits `${name}.intersect` (interaction `intersect`) + * with metadata `{ part: "trigger" | "sentinel" }`. + */ + analyticsName?: string; + children?: React.ReactNode; +} + +/** Headless context provider — renders only its children. */ +export function LoadMoreRoot(props: LoadMoreRootProps) { + const { hasMore, loading, onLoadMore, analyticsName, children } = props; + + const value = React.useMemo( + () => ({ hasMore, loading, onLoadMore, analyticsName }), + [hasMore, loading, onLoadMore, analyticsName], + ); + + return ( + + {children} + + ); +} + +type TriggerRenderState = { + hasMore: boolean; + loading: boolean; + disabled: boolean; +}; + +type TriggerRenderProp = useRender.RenderProp; + +export interface LoadMoreTriggerProps + extends Omit { + /** + * Override the auto-derived disabled state (`!hasMore || loading`). Pass + * `false` to force-enable; pass `true` to force-disable. + */ + disabled?: boolean; + /** + * Replace the default `Button` element. Receives the merged click/disabled + * props the trigger would otherwise pass to `Button`. + */ + render?: TriggerRenderProp; + /** Visible label. Defaults to `"Load more"`. */ + children?: React.ReactNode; +} + +interface RenderTriggerProps { + render: TriggerRenderProp; + state: TriggerRenderState; + forwardedProps: Record; + onClick: (event: React.MouseEvent) => void; + isDisabled: boolean; + loading: boolean; + forwardedRef: React.ForwardedRef; +} + +function RenderTrigger({ + render, + state, + forwardedProps, + onClick, + isDisabled, + loading, + forwardedRef, +}: RenderTriggerProps) { + const internalProps = { + onClick, + disabled: isDisabled, + "aria-busy": loading || undefined, + "data-loading": loading || undefined, + "data-has-more": state.hasMore || undefined, + "data-disabled": isDisabled || undefined, + } as React.ComponentPropsWithRef<"button">; + return useRender({ + render, + ref: forwardedRef as React.Ref, + state, + props: mergeProps<"button">( + internalProps, + forwardedProps as React.ComponentPropsWithRef<"button">, + ), + }); +} + +/** Manual button trigger. Defaults to Origin's `Button`. */ +export const LoadMoreTrigger = React.forwardRef< + HTMLButtonElement, + LoadMoreTriggerProps +>(function LoadMoreTrigger(props, forwardedRef) { + const { disabled, render, children = "Load more", ...rest } = props; + const { hasMore, loading, onLoadMore, analyticsName } = useLoadMoreContext(); + const isDisabled = disabled ?? (!hasMore || loading); + + const handleClick = useTrackedCallback( + analyticsName, + "LoadMore", + "click", + () => { + if (isDisabled) return; + onLoadMore(); + }, + () => ({ part: "trigger" }), + ); + + if (render) { + return ( + } + onClick={handleClick} + isDisabled={isDisabled} + loading={loading} + forwardedRef={forwardedRef} + /> + ); + } + + return ( + + ); +}); + +export interface LoadMoreSentinelProps + extends React.HTMLAttributes { + /** + * IntersectionObserver root. Defaults to the viewport. Pass a scroll + * container to scope observations to a scrolling region. + */ + root?: Element | Document | null; + /** Defaults to `"0px 0px 200px 0px"` — preload 200px before reaching the sentinel. */ + rootMargin?: string; + /** Defaults to `0`. */ + threshold?: number | number[]; + /** + * Disable the observer entirely. When `true` no DOM is rendered, so callers + * can fall back to a manual `Trigger`. + */ + disabled?: boolean; + /** Override the rendered element. */ + render?: useRender.RenderProp<{ hasMore: boolean; loading: boolean }>; +} + +/** Invisible viewport-intersection trigger for infinite scroll. */ +export const LoadMoreSentinel = React.forwardRef< + HTMLDivElement, + LoadMoreSentinelProps +>(function LoadMoreSentinel(props, forwardedRef) { + const { + root = null, + rootMargin = "0px 0px 200px 0px", + threshold = 0, + disabled, + render, + className, + ...rest + } = props; + const { hasMore, loading, onLoadMore, analyticsName } = useLoadMoreContext(); + + const onLoadMoreRef = React.useRef(onLoadMore); + onLoadMoreRef.current = onLoadMore; + const loadingRef = React.useRef(loading); + loadingRef.current = loading; + const hasMoreRef = React.useRef(hasMore); + hasMoreRef.current = hasMore; + + const trackedIntersect = useTrackedCallback( + analyticsName, + "LoadMore", + "intersect", + () => onLoadMoreRef.current(), + () => ({ part: "sentinel" }), + ); + + const isMountedRef = React.useRef(false); + + const localRef = React.useRef(null); + const setRef = React.useCallback( + (node: HTMLDivElement | null) => { + localRef.current = node; + if (typeof forwardedRef === "function") { + forwardedRef(node); + } else if (forwardedRef) { + forwardedRef.current = node; + } + }, + [forwardedRef], + ); + + React.useEffect(() => { + if (disabled) return; + const node = localRef.current; + if (!node || typeof IntersectionObserver === "undefined") return; + + const observer = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (!entry.isIntersecting) continue; + if (loadingRef.current) continue; + if (!hasMoreRef.current) continue; + trackedIntersect(); + break; + } + }, + { root: root ?? null, rootMargin, threshold }, + ); + + observer.observe(node); + return () => observer.disconnect(); + }, [disabled, root, rootMargin, threshold, trackedIntersect]); + + // After loading flips false, re-evaluate intersection in case the new page + // didn't grow tall enough to scroll the sentinel out of view. Skipped on + // initial mount so we don't double-fire alongside the IntersectionObserver + // setup effect when the sentinel is already in view. + React.useEffect(() => { + if (!isMountedRef.current) { + isMountedRef.current = true; + return; + } + if (loading || !hasMore || disabled) return; + const node = localRef.current; + if (!node || typeof window === "undefined") return; + const rect = node.getBoundingClientRect(); + const inView = rect.top < window.innerHeight && rect.bottom > 0; + if (inView) trackedIntersect(); + }, [loading, hasMore, disabled, trackedIntersect]); + + if (disabled) return null; + + const baseProps = { + "aria-hidden": true as const, + role: "presentation" as const, + "data-loading": loading || undefined, + "data-active": (hasMore && !loading) || undefined, + className: [styles.sentinel, className].filter(Boolean).join(" "), + }; + + if (render) { + return ( + } + setRef={setRef} + /> + ); + } + + return
; +}); + +interface RenderSentinelProps { + render: useRender.RenderProp<{ hasMore: boolean; loading: boolean }>; + state: { hasMore: boolean; loading: boolean }; + baseProps: Record; + forwardedProps: Record; + setRef: React.RefCallback; +} + +function RenderSentinel({ + render, + state, + baseProps, + forwardedProps, + setRef, +}: RenderSentinelProps) { + return useRender({ + render, + ref: setRef, + state, + props: mergeProps<"div">( + baseProps as React.ComponentPropsWithRef<"div">, + forwardedProps as React.ComponentPropsWithRef<"div">, + ), + }); +} + +type StatusRenderState = { loading: boolean; hasMore: boolean }; + +export interface LoadMoreStatusProps + extends Omit, "children"> { + /** + * Either static content, or a render function that receives the current + * load state and returns the announcement text. + */ + children?: React.ReactNode | ((state: StatusRenderState) => React.ReactNode); + /** Defaults to `"polite"`. */ + "aria-live"?: "polite" | "assertive" | "off"; + render?: useRender.RenderProp<{ hasMore: boolean; loading: boolean }>; +} + +/** SR-only `aria-live` announcement slot. */ +export const LoadMoreStatus = React.forwardRef< + HTMLDivElement, + LoadMoreStatusProps +>(function LoadMoreStatus(props, forwardedRef) { + const { + children, + "aria-live": ariaLive = "polite", + render, + className, + ...rest + } = props; + const { hasMore, loading } = useLoadMoreContext(); + + const content = + typeof children === "function" + ? (children as (state: StatusRenderState) => React.ReactNode)({ + loading, + hasMore, + }) + : children; + + const baseProps = { + "aria-live": ariaLive, + "aria-atomic": true as const, + "data-loading": loading || undefined, + "data-end": !hasMore || undefined, + className: [styles.status, className].filter(Boolean).join(" "), + }; + + if (render) { + return ( + + ); + } + + return ( +
+ {content} +
+ ); +}); + +interface RenderStatusProps { + render: useRender.RenderProp<{ hasMore: boolean; loading: boolean }>; + state: { hasMore: boolean; loading: boolean }; + baseProps: Record; + forwardedProps: Record; + forwardedRef: React.ForwardedRef; +} + +function RenderStatus({ + render, + state, + baseProps, + forwardedProps, + forwardedRef, +}: RenderStatusProps) { + return useRender({ + render, + ref: forwardedRef as React.Ref, + state, + props: mergeProps<"div">( + baseProps as React.ComponentPropsWithRef<"div">, + forwardedProps as React.ComponentPropsWithRef<"div">, + ), + }); +} + +if (process.env.NODE_ENV !== "production") { + LoadMoreTrigger.displayName = "LoadMoreTrigger"; + LoadMoreSentinel.displayName = "LoadMoreSentinel"; + LoadMoreStatus.displayName = "LoadMoreStatus"; +} + +export const LoadMore = { + Root: LoadMoreRoot, + Trigger: LoadMoreTrigger, + Sentinel: LoadMoreSentinel, + Status: LoadMoreStatus, +}; + +export default LoadMore; diff --git a/packages/origin/src/components/LoadMore/LoadMore.unit.test.tsx b/packages/origin/src/components/LoadMore/LoadMore.unit.test.tsx new file mode 100644 index 000000000..6f84630c5 --- /dev/null +++ b/packages/origin/src/components/LoadMore/LoadMore.unit.test.tsx @@ -0,0 +1,81 @@ +/** + * LoadMore Unit Tests (Vitest + @testing-library/react) + * + * For real browser testing (IntersectionObserver, scroll, accessibility), + * see LoadMore.test.tsx (Playwright CT). + */ + +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render } from "@testing-library/react"; +import * as React from "react"; +import { LoadMore } from "./LoadMore"; + +type ObserverCallback = ( + entries: IntersectionObserverEntry[], + observer: IntersectionObserver, +) => void; + +interface MockObserver { + observe: ReturnType; + unobserve: ReturnType; + disconnect: ReturnType; + takeRecords: ReturnType; + callback: ObserverCallback; +} + +const observers: MockObserver[] = []; + +beforeEach(() => { + observers.length = 0; + class MockIntersectionObserver implements MockObserver { + callback: ObserverCallback; + observe = vi.fn(); + unobserve = vi.fn(); + disconnect = vi.fn(); + takeRecords = vi.fn(() => []); + + constructor(callback: ObserverCallback) { + this.callback = callback; + observers.push(this); + } + } + vi.stubGlobal("IntersectionObserver", MockIntersectionObserver); +}); + +afterEach(() => { + vi.unstubAllGlobals(); +}); + +function fireIntersect(observer: MockObserver) { + const target = observer.observe.mock.calls[0]?.[0] as Element; + observer.callback( + [ + { + isIntersecting: true, + target, + intersectionRatio: 1, + boundingClientRect: target.getBoundingClientRect(), + intersectionRect: target.getBoundingClientRect(), + rootBounds: null, + time: 0, + } as IntersectionObserverEntry, + ], + observer as unknown as IntersectionObserver, + ); +} + +describe("LoadMore.Sentinel initial mount", () => { + it("fires onLoadMore exactly once when the sentinel mounts already in view", () => { + const onLoadMore = vi.fn(); + render( + + + , + ); + + expect(observers).toHaveLength(1); + fireIntersect(observers[0]); + + expect(onLoadMore).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/origin/src/components/LoadMore/index.ts b/packages/origin/src/components/LoadMore/index.ts new file mode 100644 index 000000000..26baa0074 --- /dev/null +++ b/packages/origin/src/components/LoadMore/index.ts @@ -0,0 +1,14 @@ +export { LoadMore, useLoadMoreContext } from "./LoadMore"; +export type { + LoadMoreRootProps, + LoadMoreTriggerProps, + LoadMoreSentinelProps, + LoadMoreStatusProps, + LoadMoreContextValue, +} from "./LoadMore"; +export { useLoadMore } from "./useLoadMore"; +export type { + UseLoadMoreOptions, + UseLoadMoreResult, + UseLoadMoreFetchResult, +} from "./useLoadMore"; diff --git a/packages/origin/src/components/LoadMore/useLoadMore.ts b/packages/origin/src/components/LoadMore/useLoadMore.ts new file mode 100644 index 000000000..a325d2a93 --- /dev/null +++ b/packages/origin/src/components/LoadMore/useLoadMore.ts @@ -0,0 +1,150 @@ +"use client"; + +import * as React from "react"; + +export interface UseLoadMoreFetchResult { + data: T[]; + /** Cursor for the next page. Omit when there is no next page. */ + nextCursor?: TCursor; + /** Whether `loadMore` should be enabled after this page. */ + hasMore: boolean; +} + +export interface UseLoadMoreOptions { + /** + * Fetches a page. Receives the cursor from the previous page, or `undefined` + * for the initial fetch (and after `refetch`/`resetOn` change). Reject the + * promise to surface an error in `result.error`. + */ + fetchPage: ( + cursor: TCursor | undefined, + ) => Promise>; + /** + * When any value changes (by `JSON.stringify` value), pagination resets and + * an initial fetch is kicked off. Values must be JSON-serializable; for + * object dependencies, pass a stable id. Defaults to `[]` (fetch once). + */ + resetOn?: React.DependencyList; + /** Skip the initial fetch when `false`. Defaults to `true`. */ + enabled?: boolean; + /** Starting cursor for the first page. */ + initialCursor?: TCursor; +} + +export interface UseLoadMoreResult { + items: T[]; + /** True only during the initial fetch (and after refetch/reset). */ + loading: boolean; + /** True only during subsequent (`loadMore`) fetches. */ + loadingMore: boolean; + hasMore: boolean; + error: Error | undefined; + nextCursor: TCursor | undefined; + /** No-op when `!hasMore`, `loading`, or `loadingMore`. */ + loadMore: () => void; + /** Resets accumulated items and re-fetches the first page. */ + refetch: () => void; +} + +/** + * Transport-agnostic infinite-scroll pagination state. Pair with + * `LoadMore.Sentinel` / `LoadMore.Trigger` to drive a forward-only paginated + * list. Stale responses are dropped via an internal request id so concurrent + * `refetch`/`resetOn` changes never clobber newer state. + */ +export function useLoadMore( + options: UseLoadMoreOptions, +): UseLoadMoreResult { + const { fetchPage, resetOn, enabled = true, initialCursor } = options; + + const [items, setItems] = React.useState([]); + const [loading, setLoading] = React.useState(enabled); + const [loadingMore, setLoadingMore] = React.useState(false); + const [error, setError] = React.useState(undefined); + const [nextCursor, setNextCursor] = React.useState( + initialCursor, + ); + const [hasMore, setHasMore] = React.useState(true); + + const fetchPageRef = React.useRef(fetchPage); + fetchPageRef.current = fetchPage; + + const requestIdRef = React.useRef(0); + + const runFetch = React.useCallback( + async (cursor: TCursor | undefined, isInitial: boolean) => { + const reqId = ++requestIdRef.current; + if (isInitial) { + setLoading(true); + } else { + setLoadingMore(true); + } + setError(undefined); + try { + const result = await fetchPageRef.current(cursor); + if (reqId !== requestIdRef.current) return; + setItems((prev) => + isInitial ? result.data : [...prev, ...result.data], + ); + setHasMore(result.hasMore); + setNextCursor(result.nextCursor); + } catch (e) { + if (reqId !== requestIdRef.current) return; + setError(e instanceof Error ? e : new Error(String(e))); + } finally { + if (reqId === requestIdRef.current) { + setLoading(false); + setLoadingMore(false); + } + } + }, + [], + ); + + const refetch = React.useCallback(() => { + setItems([]); + setNextCursor(initialCursor); + setHasMore(true); + void runFetch(initialCursor, true); + }, [runFetch, initialCursor]); + + // JSON.stringify gives us value-equality semantics for the dep array, + // matching the pattern in useGridApiPaginatedQuery. + const resetKey = React.useMemo( + () => JSON.stringify(resetOn ?? []), + [resetOn], + ); + + React.useEffect(() => { + if (!enabled) { + requestIdRef.current++; + setLoading(false); + setLoadingMore(false); + return; + } + setItems([]); + setNextCursor(initialCursor); + setHasMore(true); + void runFetch(initialCursor, true); + // initialCursor intentionally excluded: it's used only as a starting value + // and changing it shouldn't on its own re-fetch (callers can pass it in + // resetOn if they want that behavior). + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [enabled, resetKey, runFetch]); + + const loadMore = React.useCallback(() => { + if (!hasMore || loading || loadingMore) return; + void runFetch(nextCursor, false); + }, [hasMore, loading, loadingMore, nextCursor, runFetch]); + + return { + items, + loading, + loadingMore, + hasMore, + error, + nextCursor, + loadMore, + refetch, + }; +} diff --git a/packages/origin/src/components/LoadMore/useLoadMore.unit.test.ts b/packages/origin/src/components/LoadMore/useLoadMore.unit.test.ts new file mode 100644 index 000000000..224d6f98d --- /dev/null +++ b/packages/origin/src/components/LoadMore/useLoadMore.unit.test.ts @@ -0,0 +1,283 @@ +import { describe, it, expect, vi } from "vitest"; +import { act, renderHook, waitFor } from "@testing-library/react"; +import { useLoadMore, type UseLoadMoreFetchResult } from "./useLoadMore"; + +type Item = { id: string }; + +function deferred() { + let resolve!: (value: T) => void; + let reject!: (reason: unknown) => void; + const promise = new Promise((res, rej) => { + resolve = res; + reject = rej; + }); + return { promise, resolve, reject }; +} + +describe("useLoadMore", () => { + it("fetches the first page on mount and exposes its items", async () => { + const fetchPage = vi.fn( + async ( + cursor: string | undefined, + ): Promise> => ({ + data: [{ id: cursor ?? "a" }], + nextCursor: "b", + hasMore: true, + }), + ); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + + expect(result.current.loading).toBe(true); + + await waitFor(() => expect(result.current.loading).toBe(false)); + + expect(fetchPage).toHaveBeenCalledTimes(1); + expect(fetchPage).toHaveBeenLastCalledWith(undefined); + expect(result.current.items).toEqual([{ id: "a" }]); + expect(result.current.hasMore).toBe(true); + expect(result.current.nextCursor).toBe("b"); + expect(result.current.error).toBeUndefined(); + }); + + it("does not fetch when enabled is false; toggling true triggers a fetch", async () => { + const fetchPage = vi.fn( + async (): Promise> => ({ + data: [{ id: "x" }], + hasMore: false, + }), + ); + + const { result, rerender } = renderHook( + ({ enabled }: { enabled: boolean }) => + useLoadMore({ fetchPage, enabled }), + { initialProps: { enabled: false } }, + ); + + expect(result.current.loading).toBe(false); + expect(fetchPage).not.toHaveBeenCalled(); + + rerender({ enabled: true }); + + await waitFor(() => expect(result.current.loading).toBe(false)); + + expect(fetchPage).toHaveBeenCalledTimes(1); + expect(result.current.items).toEqual([{ id: "x" }]); + }); + + it("accumulates items across loadMore calls and forwards the cursor", async () => { + const pages: Record> = { + first: { data: [{ id: "1" }], nextCursor: "p2", hasMore: true }, + p2: { data: [{ id: "2" }], nextCursor: "p3", hasMore: true }, + p3: { data: [{ id: "3" }], hasMore: false }, + }; + const fetchPage = vi.fn(async (cursor: string | undefined) => { + return pages[cursor ?? "first"]; + }); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "1" }]); + + act(() => { + result.current.loadMore(); + }); + await waitFor(() => expect(result.current.loadingMore).toBe(false)); + expect(result.current.items).toEqual([{ id: "1" }, { id: "2" }]); + expect(fetchPage).toHaveBeenLastCalledWith("p2"); + + act(() => { + result.current.loadMore(); + }); + await waitFor(() => expect(result.current.loadingMore).toBe(false)); + expect(result.current.items).toEqual([ + { id: "1" }, + { id: "2" }, + { id: "3" }, + ]); + expect(result.current.hasMore).toBe(false); + }); + + it("treats loadMore as a no-op when hasMore is false", async () => { + const fetchPage = vi.fn( + async (): Promise> => ({ + data: [{ id: "only" }], + hasMore: false, + }), + ); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + await waitFor(() => expect(result.current.loading).toBe(false)); + + act(() => { + result.current.loadMore(); + }); + + expect(fetchPage).toHaveBeenCalledTimes(1); + }); + + it("treats a second loadMore as a no-op while one is in flight", async () => { + const initial = deferred>(); + const next = deferred>(); + let call = 0; + const fetchPage = vi.fn(async () => { + call += 1; + return call === 1 ? initial.promise : next.promise; + }); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + initial.resolve({ data: [{ id: "1" }], nextCursor: "n", hasMore: true }); + await waitFor(() => expect(result.current.loading).toBe(false)); + + act(() => { + result.current.loadMore(); + }); + expect(result.current.loadingMore).toBe(true); + + act(() => { + result.current.loadMore(); + }); + expect(fetchPage).toHaveBeenCalledTimes(2); + + await act(async () => { + next.resolve({ data: [{ id: "2" }], hasMore: false }); + await next.promise; + }); + await waitFor(() => expect(result.current.loadingMore).toBe(false)); + expect(result.current.items).toEqual([{ id: "1" }, { id: "2" }]); + }); + + it("drops stale responses when refetch races a slow first page", async () => { + const slow = deferred>(); + const fresh = deferred>(); + let call = 0; + const fetchPage = vi.fn(async () => { + call += 1; + return call === 1 ? slow.promise : fresh.promise; + }); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + + act(() => { + result.current.refetch(); + }); + + await act(async () => { + fresh.resolve({ data: [{ id: "fresh" }], hasMore: false }); + await fresh.promise; + }); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "fresh" }]); + + await act(async () => { + slow.resolve({ data: [{ id: "stale" }], hasMore: true }); + await slow.promise; + }); + + expect(result.current.items).toEqual([{ id: "fresh" }]); + expect(result.current.hasMore).toBe(false); + }); + + it("resets accumulated state when resetOn changes", async () => { + const fetchPage = vi.fn( + async ( + cursor: string | undefined, + ): Promise> => ({ + data: [{ id: cursor ?? "first" }], + hasMore: false, + }), + ); + + const { result, rerender } = renderHook( + ({ filter }: { filter: string }) => + useLoadMore({ fetchPage, resetOn: [filter] }), + { initialProps: { filter: "a" } }, + ); + + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "first" }]); + expect(fetchPage).toHaveBeenCalledTimes(1); + + rerender({ filter: "b" }); + + await waitFor(() => expect(fetchPage).toHaveBeenCalledTimes(2)); + expect(fetchPage).toHaveBeenLastCalledWith(undefined); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "first" }]); + }); + + it("refetch clears items and re-fetches the first page", async () => { + let call = 0; + const fetchPage = vi.fn( + async ( + cursor: string | undefined, + ): Promise> => { + call += 1; + if (cursor === undefined) { + return { data: [{ id: `init-${call}` }], hasMore: false }; + } + return { data: [], hasMore: false }; + }, + ); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "init-1" }]); + + act(() => { + result.current.refetch(); + }); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "init-2" }]); + expect(fetchPage).toHaveBeenCalledTimes(2); + }); + + it("surfaces fetch errors and preserves prior items", async () => { + let call = 0; + const fetchPage = vi.fn( + async ( + cursor: string | undefined, + ): Promise> => { + call += 1; + if (call === 1) { + return { data: [{ id: "1" }], nextCursor: "n", hasMore: true }; + } + throw new Error("boom"); + }, + ); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.items).toEqual([{ id: "1" }]); + + act(() => { + result.current.loadMore(); + }); + await waitFor(() => expect(result.current.loadingMore).toBe(false)); + + expect(result.current.error).toBeInstanceOf(Error); + expect(result.current.error?.message).toBe("boom"); + expect(result.current.items).toEqual([{ id: "1" }]); + }); + + it("clears the error on the next fetch", async () => { + let call = 0; + const fetchPage = vi.fn(async (): Promise> => { + call += 1; + if (call === 1) throw new Error("first"); + return { data: [{ id: "after-retry" }], hasMore: false }; + }); + + const { result } = renderHook(() => useLoadMore({ fetchPage })); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.error?.message).toBe("first"); + + act(() => { + result.current.refetch(); + }); + await waitFor(() => expect(result.current.loading).toBe(false)); + expect(result.current.error).toBeUndefined(); + expect(result.current.items).toEqual([{ id: "after-retry" }]); + }); +}); diff --git a/packages/origin/src/index.ts b/packages/origin/src/index.ts index fe91d4bf4..3a79cea5f 100644 --- a/packages/origin/src/index.ts +++ b/packages/origin/src/index.ts @@ -215,6 +215,22 @@ export type { LogoProps } from "./components/Logo"; export { Loader } from "./components/Loader"; export type { LoaderProps } from "./components/Loader"; +export { + LoadMore, + useLoadMore, + useLoadMoreContext, +} from "./components/LoadMore"; +export type { + LoadMoreRootProps, + LoadMoreTriggerProps, + LoadMoreSentinelProps, + LoadMoreStatusProps, + LoadMoreContextValue, + UseLoadMoreOptions, + UseLoadMoreResult, + UseLoadMoreFetchResult, +} from "./components/LoadMore"; + export { Separator } from "./components/Separator"; export type { SeparatorProps } from "./components/Separator"; From 497e6f92c13c9b2ee79671f28993d41fdabf0bc4 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 30 Apr 2026 15:47:48 -0700 Subject: [PATCH 004/133] =?UTF-8?q?fix(origin):=20unblock=20site=20builds?= =?UTF-8?q?=20=E2=80=94=20LoadMoreTriggerProps=20render=20override=20confl?= =?UTF-8?q?ict=20(TS2430)=20(#26931)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What's broken `LoadMoreTriggerProps` in `js/packages/origin/src/components/LoadMore/LoadMore.tsx` extends `Omit` and then redeclares `render` with a wider state type (`TriggerRenderState` adds `hasMore` and `loading` on top of `ButtonState`). Because `Omit` doesn't drop `render`, TypeScript flags the override as incompatible: ``` TS2430: Interface 'LoadMoreTriggerProps' incorrectly extends interface 'Omit'. Types of property 'render' are incompatible. Type 'ButtonState' is missing the following properties from type 'TriggerRenderState': hasMore, loading ``` This is currently failing the site app's `tsc` (run during `yarn build`) on every open PR. ## The fix Add `"render"` to the `Omit` clause so the trigger's wider render-state declaration is the only one on `LoadMoreTriggerProps`: ```ts export interface LoadMoreTriggerProps extends Omit { ``` One-token change. ## Why it slipped past origin's tests DES-23 (#26920) introduced the regression. Origin's `test:unit` runs vitest but does not type-check the site app, so the conflict only surfaces when `apps/private/site` runs `tsc` as part of `yarn build`. ## Verification - `yarn workspace @lightsparkdev/origin test:unit` → 447 tests pass - `yarn workspace @lightsparkdev/origin lint && … format` → clean (only pre-existing warnings) - `cd apps/private/site && find . -maxdepth 3 -name 'tsconfig.tsbuildinfo' -delete && yarn tsc` → passes cleanly, no `LoadMore` errors ## Urgency Blocking the site build on all open PRs — please land ASAP. Made with [Cursor](https://cursor.com) GitOrigin-RevId: c77577a1f91e3e9c6f2e86b31124021c29175e29 --- packages/origin/src/components/LoadMore/LoadMore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/origin/src/components/LoadMore/LoadMore.tsx b/packages/origin/src/components/LoadMore/LoadMore.tsx index 17b07f19b..2afabc3b3 100644 --- a/packages/origin/src/components/LoadMore/LoadMore.tsx +++ b/packages/origin/src/components/LoadMore/LoadMore.tsx @@ -68,7 +68,7 @@ type TriggerRenderState = { type TriggerRenderProp = useRender.RenderProp; export interface LoadMoreTriggerProps - extends Omit { + extends Omit { /** * Override the auto-derived disabled state (`!hasMore || loading`). Pass * `false` to force-enable; pass `true` to force-disable. From 62d30b87fc12a009fb9627a0fdf7d0546d48ad23 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Fri, 1 May 2026 18:19:33 +0000 Subject: [PATCH 005/133] CI update lock file for PR --- yarn.lock | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/yarn.lock b/yarn.lock index e44be6198..a9ab35766 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3875,7 +3875,7 @@ __metadata: languageName: node linkType: hard -"@lightsparkdev/core@npm:1.5.2, @lightsparkdev/core@workspace:packages/core": +"@lightsparkdev/core@npm:1.5.1, @lightsparkdev/core@workspace:packages/core": version: 0.0.0-use.local resolution: "@lightsparkdev/core@workspace:packages/core" dependencies: @@ -3908,11 +3908,11 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/crypto-wasm@npm:0.1.26, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": +"@lightsparkdev/crypto-wasm@npm:0.1.25, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": version: 0.0.0-use.local resolution: "@lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm" dependencies: - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" jest: "npm:^29.6.2" ts-jest: "npm:^29.1.1" typescript: "npm:^5.6.2" @@ -3948,10 +3948,10 @@ __metadata: resolution: "@lightsparkdev/lightspark-cli@workspace:packages/lightspark-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.5.2" - "@lightsparkdev/crypto-wasm": "npm:0.1.26" + "@lightsparkdev/core": "npm:1.5.1" + "@lightsparkdev/crypto-wasm": "npm:0.1.25" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/tsconfig": "npm:0.0.1" "@noble/curves": "npm:^1.9.7" "@types/jsonwebtoken": "npm:^9.0.2" @@ -3977,13 +3977,13 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/lightspark-sdk@npm:1.9.19, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": +"@lightsparkdev/lightspark-sdk@npm:1.9.18, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": version: 0.0.0-use.local resolution: "@lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk" dependencies: "@arethetypeswrong/cli": "npm:^0.17.4" - "@lightsparkdev/core": "npm:1.5.2" - "@lightsparkdev/crypto-wasm": "npm:0.1.26" + "@lightsparkdev/core": "npm:1.5.1" + "@lightsparkdev/crypto-wasm": "npm:0.1.25" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/crypto-js": "npm:^4.1.1" @@ -4016,9 +4016,9 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/nodejs-scripts@workspace:apps/examples/nodejs-scripts" dependencies: - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" @@ -4045,10 +4045,10 @@ __metadata: "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/oauth": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" - "@lightsparkdev/ui": "npm:1.1.20" + "@lightsparkdev/ui": "npm:1.1.19" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" "@types/react": "npm:^18.2.12" @@ -4073,7 +4073,7 @@ __metadata: resolution: "@lightsparkdev/oauth@workspace:packages/oauth" dependencies: "@arethetypeswrong/cli": "npm:^0.17.4" - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@openid/appauth": "npm:^1.3.1" @@ -4148,8 +4148,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/remote-signing-server@workspace:apps/examples/remote-signing-server" dependencies: - "@lightsparkdev/core": "npm:1.5.2" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/core": "npm:1.5.1" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" @@ -4195,10 +4195,10 @@ __metadata: "@emotion/jest": "npm:^11.13.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" - "@lightsparkdev/ui": "npm:1.1.20" + "@lightsparkdev/ui": "npm:1.1.19" "@lightsparkdev/vite": "npm:*" "@testing-library/jest-dom": "npm:^6.1.2" "@types/jest": "npm:^29.5.3" @@ -4223,7 +4223,7 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/ui@npm:1.1.20, @lightsparkdev/ui@workspace:packages/ui": +"@lightsparkdev/ui@npm:1.1.19, @lightsparkdev/ui@workspace:packages/ui": version: 0.0.0-use.local resolution: "@lightsparkdev/ui@workspace:packages/ui" dependencies: @@ -4232,7 +4232,7 @@ __metadata: "@emotion/css": "npm:^11.11.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@microsoft/api-extractor": "npm:^7.47.9" @@ -4294,9 +4294,9 @@ __metadata: resolution: "@lightsparkdev/uma-vasp-cli@workspace:apps/examples/uma-vasp-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.5.2" + "@lightsparkdev/core": "npm:1.5.1" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/chalk": "npm:^2.2.0" "@types/node": "npm:^20.2.5" @@ -4320,8 +4320,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/uma-vasp@workspace:apps/examples/uma-vasp" dependencies: - "@lightsparkdev/core": "npm:1.5.2" - "@lightsparkdev/lightspark-sdk": "npm:1.9.19" + "@lightsparkdev/core": "npm:1.5.1" + "@lightsparkdev/lightspark-sdk": "npm:1.9.18" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/body-parser": "npm:^1.19.5" "@types/express": "npm:^4.17.21" From 6f9cae0128ea4dd7ac2347de9902cb6620c03af6 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 1 May 2026 12:54:35 -0700 Subject: [PATCH 006/133] [grid] Example app to test wallet module (#26717) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Reason A standalone browser-based example app is needed to demonstrate and manually exercise the full Grid Global Accounts API lifecycle, including credential creation, verification, session management, and wallet operations across all three supported authentication types (EMAIL_OTP, OAUTH, and PASSKEY). ## Overview Adds a new Vite + TypeScript single-page example app at `js/apps/examples/grid-global-accounts-example-app` that covers: - **Platform auth**: API client ID/secret input with sandbox and production mode selection. Sandbox uses magic string constants (`sandbox-valid-signature`, `000000`, `sandbox-valid-oidc-token`, `sandbox-valid-passkey-signature`). Production mode generates a client-side P-256 keypair, HPKE-decrypts the `encryptedSessionSigningKey` returned by Verify using `@turnkey/crypto`, and stamps `payloadToSign` values via `@turnkey/api-key-stamper`. - **Customer setup**: Create customer and fetch internal account balance, with auto-propagation of account/credential/session IDs into a shared wallet context used across all tabs. - **Per-type lifecycle tabs** for EMAIL_OTP, OAUTH, and PASSKEY, each covering: wallet creation, credential verification → session, rechallenge, and two-step signed-retry flows for adding a second credential, deleting a credential, deleting a session, and exporting the wallet. - **External account creation** for both `SPARK_WALLET` and `USD_ACCOUNT` types, quote creation with `payloadToSign` extraction, payload signing (sandbox magic or real Turnkey stamp), and quote execution. - A Vite dev server proxy that rewrites `/api` requests to `https://api.lightspark.com/grid/2025-10-13`. The app is registered on port `3106` in `settings.json`. ## Test Plan Run `yarn dev` from the app directory and manually exercise each tab's lifecycle against the sandbox environment using the pre-filled magic values. Verify that signed-retry flows correctly populate `requestId` from step 1 and forward it with `Grid-Wallet-Signature` in step 2. For production mode, generate a P-256 key, run a Verify step, then use "Sign payload" before executing a quote to confirm HPKE decryption and Turnkey stamping work end-to-end. GitOrigin-RevId: fe887c117e70114303ebf6de67b9449fc8059c7b --- .../index.html | 876 ++++++++++++++ .../package.json | 19 + .../src/main.ts | 1024 +++++++++++++++++ .../tsconfig.json | 15 + .../vite.config.ts | 21 + apps/examples/settings.json | 3 + 6 files changed, 1958 insertions(+) create mode 100644 apps/examples/grid-global-accounts-example-app/index.html create mode 100644 apps/examples/grid-global-accounts-example-app/package.json create mode 100644 apps/examples/grid-global-accounts-example-app/src/main.ts create mode 100644 apps/examples/grid-global-accounts-example-app/tsconfig.json create mode 100644 apps/examples/grid-global-accounts-example-app/vite.config.ts diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html new file mode 100644 index 000000000..e5b037329 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -0,0 +1,876 @@ + + + + + + Grid Global Accounts - Example App + + + +

Grid Global Accounts - Example App

+

+ Signed-retry flows show the requestId / + payloadToSign from step 1 so you can inspect them before + step 2 forwards with + Grid-Wallet-Signature: sandbox-valid-signature. +

+ + + +
+

Platform Auth

+
+
+ + +
+
+ + +
+
+ + +

+ Sandbox uses server-side magic strings + (sandbox-valid-signature, + 000000, sandbox-valid-oidc-token, + sandbox-valid-passkey-signature). Production persists the + client P-256 keypair + the encrypted session signing key from Verify, + then HPKE-decrypts via @turnkey/crypto and stamps real + payloadToSign values via + @turnkey/api-key-stamper. +

+
+ +
+

Customer Setup

+
+
+ + +
+
+ + +
+
+ + + +
+ +
+ + + +
+
+
+ + + +
+

Wallet Context

+

+ Internal account id flows into every tab. Credential + session ids are + auto-filled as you run steps. +

+ + +
+
+ + +
+
+ + +
+
+
+ + + +
+ + + +
+ + + +
+
+

EMAIL_OTP lifecycle

+ +
+

Create wallet

+

+ First-time create; email resolved from customer record. +

+ +
+
+ +
+

Verify → session

+ + + + + + +
+
+ +
+

+ Rechallenge (re-issue OTP) +

+

Uses Credential ID from Wallet Context.

+ +
+
+ +
+

+ Add second EMAIL_OTP via signed retry +

+

+ Rejects because one EMAIL_OTP already attached — step 1 exercises + the reject path. Remove the first EMAIL_OTP to test the full add + flow. +

+ +
+ + + +
+
+ +
+

+ Delete credential via signed retry +

+

+ No sandbox gate yet; step 1 succeeds, step 2 may fail against real + Turnkey. +

+ +
+ + + +
+
+ +
+

+ Delete session via signed retry +

+ +
+ + + +
+
+ +
+

+ Wallet export via signed retry +

+ +
+ + + +
+
+
+
+ + + +
+
+

OAUTH lifecycle

+ +
+

Create wallet

+ + + +
+
+ +
+

Verify → session

+ + + + + + +
+
+ +
+

Rechallenge

+

+ OAUTH rechallenge is a no-op — just returns AuthMethod. +

+ +
+
+ +
+

+ Add additional OAUTH via signed retry +

+ + + +
+ + + +
+
+ +
+

+ Delete credential via signed retry +

+ +
+ + + +
+
+ +
+

+ Delete session via signed retry +

+ +
+ + + +
+
+ +
+

+ Wallet export via signed retry +

+ +
+ + + +
+
+
+
+ + + +
+
+

PASSKEY lifecycle

+ +
+

Create wallet

+ + + + + + + + + + + +
+
+ +
+

Session challenge

+

+ PR 4 flow: /challenge returns + challenge = sha256(CREATE_READ_WRITE_SESSION body) + + requestId. Client signs the challenge via WebAuthn. +

+ + + + +
+
+ +
+

Verify → session

+ + + + + + + + + +
+
+ +
+

+ Add additional PASSKEY via signed retry +

+ + + +
+ + + +
+
+ +
+

+ Delete credential via signed retry +

+ +
+ + + +
+
+ +
+

+ Delete session via signed retry +

+ +
+ + + +
+
+ +
+

+ Wallet export via signed retry +

+ +
+ + + +
+
+
+
+ + + +
+

List credentials / sessions

+ + +
+
+ + + +
+

External Account

+ + +
+ + +
+ + +
+
+ +
+

Quote + Execute

+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + + + + + + + +
+
+
+ + + +
+

Response Log

+
+
+ + + + diff --git a/apps/examples/grid-global-accounts-example-app/package.json b/apps/examples/grid-global-accounts-example-app/package.json new file mode 100644 index 000000000..3ffe1a730 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/package.json @@ -0,0 +1,19 @@ +{ + "name": "@lightsparkdev/grid-global-accounts-example-app", + "private": true, + "version": "0.0.1", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "start": "vite", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "^5.6.2", + "vite": "^8.0.3" + }, + "dependencies": { + "@turnkey/api-key-stamper": "^0.6.5", + "@turnkey/crypto": "^2.8.14" + } +} diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts new file mode 100644 index 000000000..3143a736d --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -0,0 +1,1024 @@ +// Grid Global Accounts — Example App +// +// Tabbed lifecycle per credential type (EMAIL_OTP / OAUTH / PASSKEY) + +// shared customer / external account / quote / execute sections. +// Signed-retry flows are two-step: issue (returns 202 challenge) then retry +// (forwards with `Grid-Wallet-Signature: sandbox-valid-signature`). + +import { decryptCredentialBundle, generateP256KeyPair, getPublicKey } from "@turnkey/crypto"; +import { signWithApiKey } from "@turnkey/api-key-stamper"; + +type Mode = "sandbox" | "production"; +type CredType = "email_otp" | "oauth" | "passkey"; + +const SANDBOX_SIG = "sandbox-valid-signature"; +// All requests proxy through Vite at `/api` and forward to prod. +// Credentials are entered manually in the UI — never embedded. +const API_BASE = "/api"; + +// Turnkey API stamp scheme — must match what `@turnkey/api-key-stamper` emits. +const TURNKEY_STAMP_SCHEME = "SIGNATURE_SCHEME_TK_API_P256"; + +// ----- Production-mode key state ----- +// +// Generated client-side at the first call to `generateClientKeyPair`. The +// uncompressed public key (130 hex chars, 0x04-prefixed) goes to Grid as +// `clientPublicKey` on Verify; the private key is held here and used to +// HPKE-decrypt the `encryptedSessionSigningKey` Grid hands back, yielding +// the Turnkey API session keypair we then stamp `payloadToSign` with. +// +// In sandbox mode the bundle is shape-valid but undecryptable — sandbox +// flows skip this entire path and use the magic signature constants. + +interface ClientKeyPair { + privateKey: string; // hex + publicKey: string; // hex, compressed + publicKeyUncompressed: string; // hex, 130 chars (0x04 prefix) +} + +interface SessionKeys { + apiPublicKey: string; // hex, compressed P-256 + apiPrivateKey: string; // hex +} + +let clientKeyPair: ClientKeyPair | null = null; +let lastEncryptedSessionSigningKey: string | null = null; +let cachedSessionKeys: SessionKeys | null = null; + +function generateClientKeyPair(): ClientKeyPair { + const kp = generateP256KeyPair(); + clientKeyPair = { + privateKey: kp.privateKey, + publicKey: kp.publicKey, + publicKeyUncompressed: kp.publicKeyUncompressed, + }; + // Re-using the keypair across credential types means a Verify by any + // type cycles fresh session bundles bound to the same client key — + // simpler than tracking one keypair per type for the test app. + cachedSessionKeys = null; + lastEncryptedSessionSigningKey = null; + return clientKeyPair; +} + +function rememberEncryptedSessionSigningKey(value: unknown): void { + if (typeof value === "string" && value) { + lastEncryptedSessionSigningKey = value; + cachedSessionKeys = null; + } +} + +function decryptSessionKeysOrThrow(): SessionKeys { + if (cachedSessionKeys) return cachedSessionKeys; + if (!clientKeyPair) + throw new Error("No client keypair — run a Verify in production mode first."); + if (!lastEncryptedSessionSigningKey) + throw new Error( + "No encryptedSessionSigningKey — run a Verify in production mode first.", + ); + const apiPrivateKey = decryptCredentialBundle( + lastEncryptedSessionSigningKey, + clientKeyPair.privateKey, + ); + const apiPublicKeyBytes = getPublicKey(apiPrivateKey, /*isCompressed*/ true); + const apiPublicKey = Array.from(apiPublicKeyBytes) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); + cachedSessionKeys = { apiPublicKey, apiPrivateKey }; + return cachedSessionKeys; +} + +async function turnkeyStamp(payload: string): Promise { + const { apiPublicKey, apiPrivateKey } = decryptSessionKeysOrThrow(); + // `signWithApiKey` returns the hex DER signature; the X-Stamp header + // value is base64url(JSON({publicKey, scheme, signature})) with that + // hex signature embedded as-is. Mirrors what `@turnkey/api-key-stamper` + // produces internally; replicated here so we can fill the field on the + // test UI rather than going through the stamper's `stamp(payload)` shape + // (which returns `{stampHeaderName, stampHeaderValue}`). + const signature = await signWithApiKey({ + content: payload, + publicKey: apiPublicKey, + privateKey: apiPrivateKey, + }); + const stamp = { + publicKey: apiPublicKey, + scheme: TURNKEY_STAMP_SCHEME, + signature, + }; + const json = JSON.stringify(stamp); + // base64url(json) — no padding. + return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); +} + +// ----- DOM helpers ----- + +function el(id: string): T { + const found = document.getElementById(id); + if (!found) throw new Error(`Missing element #${id}`); + return found as T; +} + +function maybeEl(id: string): T | null { + return document.getElementById(id) as T | null; +} + +// ----- Auth / HTTP / Mode ----- + +const authClientId = el("auth-client-id"); +const authClientSecret = el("auth-client-secret"); +const modeSelect = el("mode-select"); + +function getMode(): Mode { + return modeSelect.value === "production" ? "production" : "sandbox"; +} + +function getAuthHeader(): string { + return "Basic " + btoa(`${authClientId.value.trim()}:${authClientSecret.value.trim()}`); +} + +async function apiPost( + path: string, + body: Record | undefined, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: getAuthHeader(), + ...extraHeaders, + }, + body: body === undefined ? undefined : JSON.stringify(body), + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + +async function apiDelete( + path: string, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "DELETE", + headers: { + Authorization: getAuthHeader(), + ...extraHeaders, + }, + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + +async function apiGet(path: string): Promise { + const res = await fetch(API_BASE + path, { + headers: { Authorization: getAuthHeader() }, + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return data; +} + +// ----- Logging ----- + +const logContainer = el("log"); + +function timestamp(): string { + return new Date().toISOString().replace("T", " ").slice(0, 19); +} + +function addLog(label: string, data: unknown): void { + const entry = document.createElement("div"); + entry.className = "log-entry"; + const ts = document.createElement("span"); + ts.className = "log-ts"; + ts.textContent = timestamp(); + const lbl = document.createElement("span"); + lbl.className = "log-label"; + lbl.textContent = `[${label}]`; + const body = document.createTextNode(`\n${JSON.stringify(data, null, 2)}`); + entry.append(ts, " ", lbl, body); + logContainer.prepend(entry); +} + +function showStatus(el: HTMLDivElement, ok: boolean, text: string): void { + el.className = `status ${ok ? "ok" : "err"}`; + el.textContent = text; +} + +// ----- Context (cross-tab) ----- + +const ctxAccountId = el("ctx-account-id"); +const ctxCredentialId = el("ctx-credential-id"); +const ctxSessionId = el("ctx-session-id"); + +function setCtxAccount(id: string): void { + if (!ctxAccountId.value) ctxAccountId.value = id; +} +function setCtxCredential(id: string): void { + ctxCredentialId.value = id; +} +function setCtxSession(id: string): void { + ctxSessionId.value = id; +} + +// ----- Generic click wrapper ----- + +function bindClick( + btnId: string, + statusId: string, + label: string, + runningText: string, + handler: () => Promise, +): void { + const btn = maybeEl(btnId); + const statusEl = maybeEl(statusId); + if (!btn || !statusEl) { + console.warn(`bindClick: missing btn=${btnId} or status=${statusId}`); + return; + } + btn.addEventListener("click", async () => { + btn.disabled = true; + showStatus(statusEl, true, runningText); + try { + const responseText = await handler(); + showStatus(statusEl, true, responseText); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + addLog(`${label} Error`, { error: msg }); + showStatus(statusEl, false, msg); + } finally { + btn.disabled = false; + } + }); +} + +// ----- Key generation helper ----- +// +// All "Generate P-256 Key" buttons share the same module-level +// `clientKeyPair` so a session decrypted under one keypair stays valid +// across tabs. The button writes the uncompressed public key into the +// target field — that's what Grid's `clientPublicKey` API expects. + +function wireGenKeyButton(btnId: string, targetInputId: string): void { + const btn = maybeEl(btnId); + const target = maybeEl(targetInputId); + if (!btn || !target) return; + btn.addEventListener("click", () => { + btn.disabled = true; + try { + const kp = generateClientKeyPair(); + target.value = kp.publicKeyUncompressed; + addLog("Key Generated", { + publicKeyUncompressed: kp.publicKeyUncompressed, + }); + } catch (err) { + addLog("Key Generation Error", { error: String(err) }); + } finally { + btn.disabled = false; + } + }); +} + +// ----- Tab switching ----- + +for (const tabBtn of document.querySelectorAll(".tab")) { + tabBtn.addEventListener("click", () => { + const name = tabBtn.dataset.tab!; + document + .querySelectorAll(".tab") + .forEach((b) => b.classList.toggle("active", b.dataset.tab === name)); + document + .querySelectorAll(".tab-panel") + .forEach((p) => p.classList.toggle("active", p.dataset.panel === name)); + }); +} + +// ========================================================== +// Shared setup: Create customer + Fetch balance +// ========================================================== + +const createPlatformCustomerId = el("create-platform-customer-id"); +const createCustomerName = el("create-customer-name"); +const createCustomerEmail = el("create-customer-email"); +const balanceCustomerId = el("balance-customer-id"); + +bindClick( + "btn-create-customer", + "create-customer-status", + "Create Customer", + "Creating customer...", + async () => { + const platformCustomerId = + createPlatformCustomerId.value.trim() || `test-${Date.now()}`; + const fullName = createCustomerName.value.trim() || "Test User"; + const email = createCustomerEmail.value.trim(); + const body: Record = { + customerType: "BUSINESS", + platformCustomerId, + region: "US", + currencies: ["USDB"], + businessInfo: { legalName: fullName }, + }; + if (email) body.email = email; + const { data: customer } = await apiPost("/customers", body); + addLog("Create Customer", customer); + const customerId = (customer as Record).id as string; + if (!balanceCustomerId.value) balanceCustomerId.value = customerId; + const accounts = (await apiGet( + `/customers/internal-accounts?customerId=${customerId}¤cy=USDB`, + )) as { data: Array<{ id: string }> }; + addLog("Internal Accounts", accounts); + if (accounts.data && accounts.data.length > 0) { + setCtxAccount(accounts.data[0].id); + return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}`; + } + return `Customer: ${customerId}\nNo USDB account found`; + }, +); + +bindClick( + "btn-fetch-balance", + "balance-status", + "Fetch Balance", + "Fetching balance...", + async () => { + const customerId = balanceCustomerId.value.trim(); + if (!customerId) throw new Error("Customer ID is required."); + const data = (await apiGet( + `/customers/internal-accounts?customerId=${encodeURIComponent(customerId)}`, + )) as { data: Array> }; + addLog("Fetch Balance", data); + return JSON.stringify( + data.data?.map((a) => ({ id: a.id, currency: a.currency, balance: a.balance })) ?? + [], + null, + 2, + ); + }, +); + +// ========================================================== +// Per-type lifecycle +// ========================================================== + +function requireAccountId(): string { + const id = ctxAccountId.value.trim(); + if (!id) + throw new Error("Internal Account ID is required — run Create Customer first."); + return id; +} + +function requireCredentialId(): string { + const id = ctxCredentialId.value.trim(); + if (!id) throw new Error("Credential ID is required — run Create for this type first."); + return id; +} + +function requireSessionId(): string { + const id = ctxSessionId.value.trim(); + if (!id) throw new Error("Session ID is required — run Verify for this type first."); + return id; +} + +// ----- EMAIL_OTP ----- + +bindClick( + "btn-email_otp-create", + "email_otp-create-status", + "EMAIL_OTP Create", + "Registering EMAIL_OTP credential...", + async () => { + const { data } = await apiPost("/auth/credentials", { + type: "EMAIL_OTP", + accountId: requireAccountId(), + }); + addLog("EMAIL_OTP Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, +); + +wireGenKeyButton("btn-email_otp-verify-genkey", "email_otp-verify-pubkey"); +bindClick( + "btn-email_otp-verify", + "email_otp-verify-status", + "EMAIL_OTP Verify", + "Verifying...", + async () => { + const credId = requireCredentialId(); + const otp = el("email_otp-verify-code").value.trim(); + const pubkey = el("email_otp-verify-pubkey").value.trim(); + if (!otp || !pubkey) throw new Error("OTP code and public key are required."); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "EMAIL_OTP", otp, clientPublicKey: pubkey }, + ); + addLog("EMAIL_OTP Verify", data); + const d = data as Record; + if (d.id) setCtxSession(d.id as string); + rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); + return JSON.stringify(data, null, 2); + }, +); + +bindClick( + "btn-email_otp-rechallenge", + "email_otp-rechallenge-status", + "EMAIL_OTP Rechallenge", + "Re-issuing OTP...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("EMAIL_OTP Rechallenge", data); + return JSON.stringify(data, null, 2); + }, +); + +const emailOtpAddRequestId = el("email_otp-add-request-id"); +bindClick( + "btn-email_otp-add-issue", + "email_otp-add-issue-status", + "EMAIL_OTP Add (issue)", + "Issuing add challenge...", + async () => { + const { data } = await apiPost("/auth/credentials", { + type: "EMAIL_OTP", + accountId: requireAccountId(), + }); + addLog("EMAIL_OTP Add (issue)", data); + const d = data as Record; + if (d.requestId) emailOtpAddRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, +); +bindClick( + "btn-email_otp-add-retry", + "email_otp-add-retry-status", + "EMAIL_OTP Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = emailOtpAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiPost( + "/auth/credentials", + { type: "EMAIL_OTP", accountId: requireAccountId() }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("EMAIL_OTP Add (retry)", data); + return JSON.stringify(data, null, 2); + }, +); + +// ----- OAUTH ----- + +bindClick( + "btn-oauth-create", + "oauth-create-status", + "OAUTH Create", + "Creating OAUTH wallet...", + async () => { + const oidc = el("oauth-create-oidc").value.trim(); + if (!oidc) throw new Error("OIDC token is required."); + const { data } = await apiPost("/auth/credentials", { + type: "OAUTH", + accountId: requireAccountId(), + oidcToken: oidc, + }); + addLog("OAUTH Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, +); + +wireGenKeyButton("btn-oauth-verify-genkey", "oauth-verify-pubkey"); +bindClick( + "btn-oauth-verify", + "oauth-verify-status", + "OAUTH Verify", + "Verifying...", + async () => { + const credId = requireCredentialId(); + const oidc = el("oauth-verify-oidc").value.trim(); + const pubkey = el("oauth-verify-pubkey").value.trim(); + if (!oidc || !pubkey) throw new Error("OIDC token and public key are required."); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "OAUTH", oidcToken: oidc, clientPublicKey: pubkey }, + ); + addLog("OAUTH Verify", data); + const d = data as Record; + if (d.id) setCtxSession(d.id as string); + rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); + return JSON.stringify(data, null, 2); + }, +); + +bindClick( + "btn-oauth-rechallenge", + "oauth-rechallenge-status", + "OAUTH Rechallenge", + "Running no-op rechallenge...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("OAUTH Rechallenge", data); + return JSON.stringify(data, null, 2); + }, +); + +const oauthAddRequestId = el("oauth-add-request-id"); +bindClick( + "btn-oauth-add-issue", + "oauth-add-issue-status", + "OAUTH Add (issue)", + "Issuing add challenge...", + async () => { + const oidc = el("oauth-add-oidc").value.trim(); + if (!oidc) throw new Error("OIDC token is required."); + const { data } = await apiPost("/auth/credentials", { + type: "OAUTH", + accountId: requireAccountId(), + oidcToken: oidc, + }); + addLog("OAUTH Add (issue)", data); + const d = data as Record; + if (d.requestId) oauthAddRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, +); +bindClick( + "btn-oauth-add-retry", + "oauth-add-retry-status", + "OAUTH Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = oauthAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const oidc = el("oauth-add-oidc").value.trim(); + const { data } = await apiPost( + "/auth/credentials", + { type: "OAUTH", accountId: requireAccountId(), oidcToken: oidc }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("OAUTH Add (retry)", data); + return JSON.stringify(data, null, 2); + }, +); + +// ----- PASSKEY ----- + +bindClick( + "btn-passkey-create", + "passkey-create-status", + "PASSKEY Create", + "Creating PASSKEY wallet...", + async () => { + const body = { + type: "PASSKEY", + accountId: requireAccountId(), + nickname: el("passkey-create-nickname").value.trim(), + challenge: el("passkey-create-challenge").value.trim(), + attestation: { + credentialId: el("passkey-create-cred-id-raw").value.trim(), + clientDataJson: el("passkey-create-client-data-json").value.trim(), + attestationObject: el("passkey-create-attestation-object").value.trim(), + }, + }; + const { data } = await apiPost("/auth/credentials", body); + addLog("PASSKEY Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, +); + +wireGenKeyButton("btn-passkey-challenge-genkey", "passkey-challenge-pubkey"); +const passkeyVerifyRequestId = el("passkey-verify-request-id"); +bindClick( + "btn-passkey-challenge", + "passkey-challenge-status", + "PASSKEY Challenge", + "Issuing session challenge...", + async () => { + const credId = requireCredentialId(); + const pubkey = el("passkey-challenge-pubkey").value.trim(); + if (!pubkey) throw new Error("Client public key is required — generate one first."); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + { clientPublicKey: pubkey }, + ); + addLog("PASSKEY Challenge", data); + const d = data as Record; + if (d.requestId) passkeyVerifyRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, +); + +bindClick( + "btn-passkey-verify", + "passkey-verify-status", + "PASSKEY Verify", + "Verifying assertion...", + async () => { + const credId = requireCredentialId(); + const requestId = passkeyVerifyRequestId.value.trim(); + const body = { + type: "PASSKEY", + clientPublicKey: el("passkey-challenge-pubkey").value.trim(), + assertion: { + credentialId: el("passkey-create-cred-id-raw").value.trim(), + clientDataJson: el("passkey-verify-client-data-json").value.trim(), + authenticatorData: el("passkey-verify-auth-data").value.trim(), + signature: el("passkey-verify-signature").value.trim(), + }, + }; + const headers: Record = {}; + if (requestId) headers["Request-Id"] = requestId; + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + body, + headers, + ); + addLog("PASSKEY Verify", data); + const d = data as Record; + if (d.id) setCtxSession(d.id as string); + rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); + return JSON.stringify(data, null, 2); + }, +); + +const passkeyAddRequestId = el("passkey-add-request-id"); +function buildPasskeyAddBody(): Record { + return { + type: "PASSKEY", + accountId: requireAccountId(), + nickname: el("passkey-add-nickname").value.trim(), + challenge: el("passkey-create-challenge").value.trim(), + attestation: { + credentialId: el("passkey-create-cred-id-raw").value.trim(), + clientDataJson: el("passkey-create-client-data-json").value.trim(), + attestationObject: el("passkey-create-attestation-object").value.trim(), + }, + }; +} +bindClick( + "btn-passkey-add-issue", + "passkey-add-issue-status", + "PASSKEY Add (issue)", + "Issuing add challenge...", + async () => { + const { data } = await apiPost("/auth/credentials", buildPasskeyAddBody()); + addLog("PASSKEY Add (issue)", data); + const d = data as Record; + if (d.requestId) passkeyAddRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, +); +bindClick( + "btn-passkey-add-retry", + "passkey-add-retry-status", + "PASSKEY Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = passkeyAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiPost( + "/auth/credentials", + buildPasskeyAddBody(), + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("PASSKEY Add (retry)", data); + return JSON.stringify(data, null, 2); + }, +); + +// ========================================================== +// Shared signed-retry wiring per tab: delete credential / session / export +// Endpoints identical for all tabs — inputs come from the shared ctx, the +// per-tab buttons just visually group each flow under the relevant tab. +// ========================================================== + +function wireDeleteCredentialButtons(type: CredType): void { + const reqInput = el(`${type}-del-cred-request-id`); + bindClick( + `btn-${type}-del-cred-issue`, + `${type}-del-cred-issue-status`, + "Delete Credential (issue)", + "Issuing delete challenge...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiDelete( + `/auth/credentials/${encodeURIComponent(credId)}`, + ); + addLog("Delete Credential (issue)", data); + const d = data as Record; + if (d.requestId) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-del-cred-retry`, + `${type}-del-cred-retry-status`, + "Delete Credential (retry)", + "Forwarding signed retry...", + async () => { + const credId = requireCredentialId(); + const requestId = reqInput.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiDelete( + `/auth/credentials/${encodeURIComponent(credId)}`, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Delete Credential (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +function wireDeleteSessionButtons(type: CredType): void { + const reqInput = el(`${type}-del-session-request-id`); + bindClick( + `btn-${type}-del-session-issue`, + `${type}-del-session-issue-status`, + "Delete Session (issue)", + "Issuing delete challenge...", + async () => { + const sid = requireSessionId(); + const { data } = await apiDelete( + `/auth/sessions/${encodeURIComponent(sid)}`, + ); + addLog("Delete Session (issue)", data); + const d = data as Record; + if (d.requestId) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-del-session-retry`, + `${type}-del-session-retry-status`, + "Delete Session (retry)", + "Forwarding signed retry...", + async () => { + const sid = requireSessionId(); + const requestId = reqInput.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiDelete( + `/auth/sessions/${encodeURIComponent(sid)}`, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Delete Session (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +function wireExportButtons(type: CredType): void { + const reqInput = el(`${type}-export-request-id`); + bindClick( + `btn-${type}-export-issue`, + `${type}-export-issue-status`, + "Wallet Export (issue)", + "Issuing export challenge...", + async () => { + const accountId = requireAccountId(); + const { data } = await apiPost( + `/internal-accounts/${encodeURIComponent(accountId)}/export`, + {}, + ); + addLog("Wallet Export (issue)", data); + const d = data as Record; + if (d.requestId) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-export-retry`, + `${type}-export-retry-status`, + "Wallet Export (retry)", + "Forwarding signed retry...", + async () => { + const accountId = requireAccountId(); + const requestId = reqInput.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiPost( + `/internal-accounts/${encodeURIComponent(accountId)}/export`, + {}, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Wallet Export (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +for (const type of ["email_otp", "oauth", "passkey"] as const) { + wireDeleteCredentialButtons(type); + wireDeleteSessionButtons(type); + wireExportButtons(type); +} + +// ========================================================== +// List credentials / sessions +// ========================================================== + +bindClick( + "btn-list-credentials", + "list-status", + "List Credentials", + "Listing...", + async () => { + const accountId = requireAccountId(); + const data = await apiGet( + `/auth/credentials?accountId=${encodeURIComponent(accountId)}`, + ); + addLog("List Credentials", data); + return JSON.stringify(data, null, 2); + }, +); + +bindClick( + "btn-list-sessions", + "list-status", + "List Sessions", + "Listing...", + async () => { + const accountId = requireAccountId(); + const data = await apiGet( + `/auth/sessions?accountId=${encodeURIComponent(accountId)}`, + ); + addLog("List Sessions", data); + return JSON.stringify(data, null, 2); + }, +); + +// ========================================================== +// External account + Quote + Execute +// ========================================================== + +const extAccountType = el("ext-account-type"); +const extSparkFields = el("ext-spark-fields"); +const extBankFields = el("ext-bank-fields"); +const quoteDestinationAccountId = el("quote-destination-account-id"); + +extAccountType.addEventListener("change", () => { + const isSpark = extAccountType.value === "SPARK_WALLET"; + extSparkFields.style.display = isSpark ? "" : "none"; + extBankFields.style.display = isSpark ? "none" : ""; +}); + +bindClick( + "btn-create-external-account", + "ext-account-status", + "Create External Account", + "Creating external account...", + async () => { + let body: Record; + if (extAccountType.value === "SPARK_WALLET") { + const address = el("ext-spark-address").value.trim(); + if (!address) throw new Error("Spark address is required."); + body = { + currency: "BTC", + accountInfo: { accountType: "SPARK_WALLET", address }, + }; + } else { + const accountNumber = el("ext-bank-account-number").value.trim(); + const routingNumber = el("ext-bank-routing-number").value.trim(); + const fullName = + el("ext-bank-beneficiary-name").value.trim() || "Sandbox Test User"; + if (!accountNumber || !routingNumber) + throw new Error("Account number and routing number are required."); + body = { + currency: "USD", + accountInfo: { + accountType: "USD_ACCOUNT", + countries: ["US"], + paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], + accountNumber, + routingNumber, + beneficiary: { + beneficiaryType: "INDIVIDUAL", + fullName, + birthDate: "1990-01-15", + nationality: "US", + address: { + line1: "100 Test St", + city: "SF", + postalCode: "94102", + country: "US", + }, + }, + }, + }; + } + const { data } = await apiPost("/platform/external-accounts", body); + addLog("Create External Account", data); + const d = data as Record; + if (d.id) quoteDestinationAccountId.value = d.id as string; + return JSON.stringify(data, null, 2); + }, +); + +const executeQuoteId = el("execute-quote-id"); + +bindClick( + "btn-create-quote", + "quote-status", + "Create Quote", + "Creating quote...", + async () => { + const sourceAccountId = requireAccountId(); + const destinationAccountId = quoteDestinationAccountId.value.trim(); + const lockedAmount = Number(el("quote-locked-amount").value); + if (!destinationAccountId || !lockedAmount) + throw new Error("Destination external account and amount are required."); + const { data } = await apiPost("/quotes", { + source: { sourceType: "ACCOUNT", accountId: sourceAccountId }, + destination: { destinationType: "ACCOUNT", accountId: destinationAccountId }, + lockedCurrencySide: el("quote-locked-side").value, + lockedCurrencyAmount: lockedAmount, + }); + addLog("Create Quote", data); + const d = data as Record; + if (d.id) executeQuoteId.value = d.id as string; + // Extract `payloadToSign` from the EMBEDDED_WALLET payment instruction + // (second entry in the example response — find by accountType match). + const instructions = (d.paymentInstructions ?? []) as Array< + Record + >; + for (const inst of instructions) { + const info = inst.accountOrWalletInfo as Record | undefined; + if (info && info.accountType === "EMBEDDED_WALLET" && info.payloadToSign) { + executePayloadToSign.value = info.payloadToSign as string; + break; + } + } + // In sandbox mode, pre-fill the magic signature so the user can hit + // Execute immediately. In production mode, leave blank — the Sign + // payload button decrypts the session bundle and stamps it. + if (getMode() === "sandbox") { + executeSignature.value = SANDBOX_SIG; + } else { + executeSignature.value = ""; + } + return JSON.stringify(data, null, 2); + }, +); + +const executePayloadToSign = el("execute-payload-to-sign"); +const executeSignature = el("execute-signature"); + +bindClick( + "btn-sign-payload", + "execute-status", + "Sign Payload", + "Signing...", + async () => { + if (getMode() === "sandbox") { + executeSignature.value = SANDBOX_SIG; + return `Mode: sandbox — filled magic signature.`; + } + const payload = executePayloadToSign.value.trim(); + if (!payload) + throw new Error( + "payloadToSign is empty — run Create Quote first or paste it manually.", + ); + const stamp = await turnkeyStamp(payload); + executeSignature.value = stamp; + return `Stamped (${stamp.length} chars).`; + }, +); + +bindClick( + "btn-execute-quote", + "execute-status", + "Execute Quote", + "Executing quote...", + async () => { + const quoteId = executeQuoteId.value.trim(); + const signature = executeSignature.value.trim(); + if (!quoteId || !signature) + throw new Error("Quote ID and Grid-Wallet-Signature are required."); + const { data } = await apiPost( + `/quotes/${encodeURIComponent(quoteId)}/execute`, + {}, + { "Grid-Wallet-Signature": signature }, + ); + addLog("Execute Quote", data); + return JSON.stringify(data, null, 2); + }, +); + +console.log("Grid Global Accounts example app loaded."); diff --git a/apps/examples/grid-global-accounts-example-app/tsconfig.json b/apps/examples/grid-global-accounts-example-app/tsconfig.json new file mode 100644 index 000000000..4cdd777fe --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "bundler", + "strict": true, + "noEmit": true, + "isolatedModules": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"] + }, + "include": ["src"] +} diff --git a/apps/examples/grid-global-accounts-example-app/vite.config.ts b/apps/examples/grid-global-accounts-example-app/vite.config.ts new file mode 100644 index 000000000..0513947cb --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/vite.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from "vite"; +import settings from "../settings.json"; + +// Prod grid URL. The proxy strips the `/api` prefix and rewrites the path +// to the versioned API channel. Credentials are entered manually in the UI +// — never embedded here. +const PROD_GRID_URL = "https://api.lightspark.com"; + +export default defineConfig({ + server: { + port: settings.gridGlobalAccountsExampleApp.port, + proxy: { + "/api": { + target: PROD_GRID_URL, + changeOrigin: true, + secure: true, + rewrite: (path) => path.replace(/^\/api/, "/grid/2025-10-13"), + }, + }, + }, +}); diff --git a/apps/examples/settings.json b/apps/examples/settings.json index 5d1971d56..c2a5d4113 100644 --- a/apps/examples/settings.json +++ b/apps/examples/settings.json @@ -13,5 +13,8 @@ }, "uiTestApp": { "port": 3105 + }, + "gridGlobalAccountsExampleApp": { + "port": 3106 } } From 6f0e85a55683feadc31347ce7004f722ba7511d3 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Fri, 1 May 2026 20:02:59 +0000 Subject: [PATCH 007/133] CI update lock file for PR --- yarn.lock | 315 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 311 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index a9ab35766..5eb22e9e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3943,6 +3943,17 @@ __metadata: languageName: unknown linkType: soft +"@lightsparkdev/grid-global-accounts-example-app@workspace:apps/examples/grid-global-accounts-example-app": + version: 0.0.0-use.local + resolution: "@lightsparkdev/grid-global-accounts-example-app@workspace:apps/examples/grid-global-accounts-example-app" + dependencies: + "@turnkey/api-key-stamper": "npm:^0.6.5" + "@turnkey/crypto": "npm:^2.8.14" + typescript: "npm:^5.6.2" + vite: "npm:^8.0.3" + languageName: unknown + linkType: soft + "@lightsparkdev/lightspark-cli@workspace:packages/lightspark-cli": version: 0.0.0-use.local resolution: "@lightsparkdev/lightspark-cli@workspace:packages/lightspark-cli" @@ -4588,6 +4599,13 @@ __metadata: languageName: node linkType: hard +"@noble/ciphers@npm:1.3.0": + version: 1.3.0 + resolution: "@noble/ciphers@npm:1.3.0" + checksum: 10/051660051e3e9e2ca5fb9dece2885532b56b7e62946f89afa7284a0fb8bc02e2bd1c06554dba68162ff42d295b54026456084198610f63c296873b2f1cd7a586 + languageName: node + linkType: hard + "@noble/ciphers@npm:^0.3.0": version: 0.3.0 resolution: "@noble/ciphers@npm:0.3.0" @@ -4595,6 +4613,15 @@ __metadata: languageName: node linkType: hard +"@noble/curves@npm:1.9.0": + version: 1.9.0 + resolution: "@noble/curves@npm:1.9.0" + dependencies: + "@noble/hashes": "npm:1.8.0" + checksum: 10/f2c5946310722fee23e04ed747f21ce72e0436e38e1fa620d226a8c613262e7d0dbab5341f14caf92936089d01d9e9231964c409cd1ac2a73a075f3cdb1acc41 + languageName: node + linkType: hard + "@noble/curves@npm:^1.2.0": version: 1.2.0 resolution: "@noble/curves@npm:1.2.0" @@ -4604,7 +4631,7 @@ __metadata: languageName: node linkType: hard -"@noble/curves@npm:^1.9.7": +"@noble/curves@npm:^1.3.0, @noble/curves@npm:^1.9.7": version: 1.9.7 resolution: "@noble/curves@npm:1.9.7" dependencies: @@ -4620,7 +4647,7 @@ __metadata: languageName: node linkType: hard -"@noble/hashes@npm:1.8.0": +"@noble/hashes@npm:1.8.0, @noble/hashes@npm:^1.2.0": version: 1.8.0 resolution: "@noble/hashes@npm:1.8.0" checksum: 10/474b7f56bc6fb2d5b3a42132561e221b0ea4f91e590f4655312ca13667840896b34195e2b53b7f097ec080a1fdd3b58d902c2a8d0fbdf51d2e238b53808a177e @@ -5157,6 +5184,151 @@ __metadata: languageName: node linkType: hard +"@peculiar/asn1-cms@npm:^2.3.13, @peculiar/asn1-cms@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-cms@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + "@peculiar/asn1-x509-attr": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/e431f6229b98c63a929538d266488e8c2dddc895936117da8f9ec775558e08c20ded6a4adcca4bb88bfea282e7204d4f6bba7a46da2cced162c174e1e6964f36 + languageName: node + linkType: hard + +"@peculiar/asn1-csr@npm:^2.3.13": + version: 2.6.1 + resolution: "@peculiar/asn1-csr@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/4ac2f1c3a2cb392fcdd5aa602140abe90f849af0a9e8296aab9aaf1712ee2e0c4f5fa86b0fe83975e771b0aba91fc848670f9c2008ea1e850c849fae6e181179 + languageName: node + linkType: hard + +"@peculiar/asn1-ecc@npm:^2.3.14": + version: 2.6.1 + resolution: "@peculiar/asn1-ecc@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/baa646c1c86283d5876230b1cfbd80cf42f97b3bb8d8b23cd5830f6f8d6466e6a06887c6838f3c4c61c87df9ffd2abe905f555472e8e70d722ce964a8074d838 + languageName: node + linkType: hard + +"@peculiar/asn1-pfx@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-pfx@npm:2.6.1" + dependencies: + "@peculiar/asn1-cms": "npm:^2.6.1" + "@peculiar/asn1-pkcs8": "npm:^2.6.1" + "@peculiar/asn1-rsa": "npm:^2.6.1" + "@peculiar/asn1-schema": "npm:^2.6.0" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/50adc7db96928d98b85a1a2e6765ba1d4ec708f937b8172ea6a22e3b92137ea36d656aded64b3be661db39f924102c5a80da54ee647e2441af3bc19c55a183ef + languageName: node + linkType: hard + +"@peculiar/asn1-pkcs8@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-pkcs8@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/99c4326da30e7ef17bb8e92d8a9525b78c101e4d743493000e220f3da6bbc4755371f1dbcc2a36951fb15769c2efead20d90a08918fd268c21bebcac26e71053 + languageName: node + linkType: hard + +"@peculiar/asn1-pkcs9@npm:^2.3.13": + version: 2.6.1 + resolution: "@peculiar/asn1-pkcs9@npm:2.6.1" + dependencies: + "@peculiar/asn1-cms": "npm:^2.6.1" + "@peculiar/asn1-pfx": "npm:^2.6.1" + "@peculiar/asn1-pkcs8": "npm:^2.6.1" + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + "@peculiar/asn1-x509-attr": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/61759a50d6adf108a0376735b2e76cdfc9c41db39a7abed23ca332f7699d831aa6324534aa38153018a31e6ee5e8fef85534c92b68067f6afcb90787e953c449 + languageName: node + linkType: hard + +"@peculiar/asn1-rsa@npm:^2.3.13, @peculiar/asn1-rsa@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-rsa@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/e91efe57017feac71c69ee5950e9c323b45aaf10baa32153fe88f237948f9d906ba04c645d085c4293c90440cad95392a91b3760251cd0ebc8e4c1a383fc331a + languageName: node + linkType: hard + +"@peculiar/asn1-schema@npm:^2.3.13, @peculiar/asn1-schema@npm:^2.6.0": + version: 2.6.0 + resolution: "@peculiar/asn1-schema@npm:2.6.0" + dependencies: + asn1js: "npm:^3.0.6" + pvtsutils: "npm:^1.3.6" + tslib: "npm:^2.8.1" + checksum: 10/af9b1094d0e020f0fd828777488578322d62a41f597ead7d80939dafcfe35b672fcb0ec7460ef66b2a155f9614d4340a98896d417a830aff1685cb4c21d5bbe4 + languageName: node + linkType: hard + +"@peculiar/asn1-x509-attr@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-x509-attr@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + "@peculiar/asn1-x509": "npm:^2.6.1" + asn1js: "npm:^3.0.6" + tslib: "npm:^2.8.1" + checksum: 10/86f7d5495459dee81daadd830ebb7d26ec15a98f6479c88b90a915ac9f28105b0d5003ba0c382b4aa8f7fa42e399f7cc37e4fe73c26cbaacd47e63a50b132e25 + languageName: node + linkType: hard + +"@peculiar/asn1-x509@npm:^2.3.13, @peculiar/asn1-x509@npm:^2.6.1": + version: 2.6.1 + resolution: "@peculiar/asn1-x509@npm:2.6.1" + dependencies: + "@peculiar/asn1-schema": "npm:^2.6.0" + asn1js: "npm:^3.0.6" + pvtsutils: "npm:^1.3.6" + tslib: "npm:^2.8.1" + checksum: 10/e3187ad04d397cdd6a946895a51202b67f57992dfef55e40acc7e7ea325e2854267ed2581c4b1ea729d7147e9e8e6f34af77f1ffb48e3e8b25b2216b213b4641 + languageName: node + linkType: hard + +"@peculiar/x509@npm:1.12.3": + version: 1.12.3 + resolution: "@peculiar/x509@npm:1.12.3" + dependencies: + "@peculiar/asn1-cms": "npm:^2.3.13" + "@peculiar/asn1-csr": "npm:^2.3.13" + "@peculiar/asn1-ecc": "npm:^2.3.14" + "@peculiar/asn1-pkcs9": "npm:^2.3.13" + "@peculiar/asn1-rsa": "npm:^2.3.13" + "@peculiar/asn1-schema": "npm:^2.3.13" + "@peculiar/asn1-x509": "npm:^2.3.13" + pvtsutils: "npm:^1.3.5" + reflect-metadata: "npm:^0.2.2" + tslib: "npm:^2.7.0" + tsyringe: "npm:^4.8.0" + checksum: 10/8b2b4fc5f9ec7ec301d87a573b494f7be69b8a8f4f174cf88778e3d09cce69a6ec8ef595ea7068aad8773ff856b770766d57aa1995a2abf82977f65586c32e1b + languageName: node + linkType: hard + "@pkgjs/parseargs@npm:^0.11.0": version: 0.11.0 resolution: "@pkgjs/parseargs@npm:0.11.0" @@ -6358,6 +6530,51 @@ __metadata: languageName: node linkType: hard +"@turnkey/api-key-stamper@npm:^0.6.5": + version: 0.6.5 + resolution: "@turnkey/api-key-stamper@npm:0.6.5" + dependencies: + "@noble/curves": "npm:^1.3.0" + "@turnkey/crypto": "npm:2.8.14" + "@turnkey/encoding": "npm:0.6.0" + sha256-uint8array: "npm:^0.10.7" + checksum: 10/39284733a90c17d3dbfa9eb351c1b2589d7d00ed7566c342d7d34eec94dba45b90217b3657e7fb009c2e15a6fd8e7b8e94fdf1db187ab4ebbf13c15f31ed8a84 + languageName: node + linkType: hard + +"@turnkey/crypto@npm:2.8.14, @turnkey/crypto@npm:^2.8.14": + version: 2.8.14 + resolution: "@turnkey/crypto@npm:2.8.14" + dependencies: + "@noble/ciphers": "npm:1.3.0" + "@noble/curves": "npm:1.9.0" + "@noble/hashes": "npm:1.8.0" + "@peculiar/x509": "npm:1.12.3" + "@turnkey/encoding": "npm:0.6.0" + "@turnkey/sdk-types": "npm:0.14.0" + borsh: "npm:2.0.0" + cbor-js: "npm:0.1.0" + checksum: 10/7a1f0d8800e8f3d0f9d38a9c0f59e793db32e93c1a1aae2ddebcbe0a5822b39f502df3613db41dbfbfb479b2f102534919f7c4a75ca6c150f838195d45867d5c + languageName: node + linkType: hard + +"@turnkey/encoding@npm:0.6.0": + version: 0.6.0 + resolution: "@turnkey/encoding@npm:0.6.0" + dependencies: + bs58: "npm:6.0.0" + bs58check: "npm:4.0.0" + checksum: 10/0bdd5f3952df052a9bf3ee5b27b8f75a679e3e5b8a2b42f3ccc691914130255af66a8095c5f94422fbc2f1b2356f40dd0ffe45f640be99a434612c908654655d + languageName: node + linkType: hard + +"@turnkey/sdk-types@npm:0.14.0": + version: 0.14.0 + resolution: "@turnkey/sdk-types@npm:0.14.0" + checksum: 10/9a7e490d696bf0ca4193670618175c302dd6afcdc1fa74d4d329137ac4d2a25d27914df6c0570a615d05bacd544f043784c48b15049db718932494cf522881ac + languageName: node + linkType: hard + "@tybys/wasm-util@npm:^0.10.1": version: 0.10.1 resolution: "@tybys/wasm-util@npm:0.10.1" @@ -8274,6 +8491,17 @@ __metadata: languageName: node linkType: hard +"asn1js@npm:^3.0.6": + version: 3.0.10 + resolution: "asn1js@npm:3.0.10" + dependencies: + pvtsutils: "npm:^1.3.6" + pvutils: "npm:^1.1.5" + tslib: "npm:^2.8.1" + checksum: 10/9cfbca89b1ac0f81aeba61c0af730d69f1214f0815eb1381ff6680f9b5bcb258cf0588f32175427faf1799eccc43d9111d1bbd98f0f01eb47af69413e4f85654 + languageName: node + linkType: hard + "assert@npm:^2.0.0": version: 2.1.0 resolution: "assert@npm:2.1.0" @@ -8569,6 +8797,13 @@ __metadata: languageName: node linkType: hard +"base-x@npm:^5.0.0": + version: 5.0.1 + resolution: "base-x@npm:5.0.1" + checksum: 10/6e4f847ef842e0a71c6b6020a6ec482a2a5e727f5a98534dbfd5d5a4e8afbc0d1bdf1fd57174b3f0455d107f10a932c3c7710bec07e2878f80178607f8f605c8 + languageName: node + linkType: hard + "base64-js@npm:^1.3.1, base64-js@npm:^1.5.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" @@ -8681,6 +8916,13 @@ __metadata: languageName: node linkType: hard +"borsh@npm:2.0.0": + version: 2.0.0 + resolution: "borsh@npm:2.0.0" + checksum: 10/b8e80de36b33899d05c5155715ccf9beabb82087a8dfc18ccd7250971a63dfa03e51635ad255e65cf60baff9e6ed88dee2141ef69982bcf442d9e850b2da16a2 + languageName: node + linkType: hard + "bottleneck@npm:^2.15.3": version: 2.19.5 resolution: "bottleneck@npm:2.19.5" @@ -8853,6 +9095,25 @@ __metadata: languageName: node linkType: hard +"bs58@npm:6.0.0, bs58@npm:^6.0.0": + version: 6.0.0 + resolution: "bs58@npm:6.0.0" + dependencies: + base-x: "npm:^5.0.0" + checksum: 10/7c9bb2b2d93d997a8c652de3510d89772007ac64ee913dc4e16ba7ff47624caad3128dcc7f360763eb6308760c300b3e9fd91b8bcbd489acd1a13278e7949c4e + languageName: node + linkType: hard + +"bs58check@npm:4.0.0": + version: 4.0.0 + resolution: "bs58check@npm:4.0.0" + dependencies: + "@noble/hashes": "npm:^1.2.0" + bs58: "npm:^6.0.0" + checksum: 10/cf5691bdfdf317574f722582360a834f01a36e8f6c850bd5791f04e040b334a0800b7c322ad24c77979c3ed6ef6cf31a6373366b4018223e3005278d491d8799 + languageName: node + linkType: hard + "bser@npm:2.1.1": version: 2.1.1 resolution: "bser@npm:2.1.1" @@ -9084,6 +9345,13 @@ __metadata: languageName: node linkType: hard +"cbor-js@npm:0.1.0": + version: 0.1.0 + resolution: "cbor-js@npm:0.1.0" + checksum: 10/763b1aebba89cb576874d0273976e0e51f2aec5665fd8ae05603eab3efa8bb3af6fec24d19f186ef801dfa79f9ce2486bc4b454b10b4fab0f012fd55516eb611 + languageName: node + linkType: hard + "chai@npm:^5.2.0": version: 5.3.3 resolution: "chai@npm:5.3.3" @@ -17654,6 +17922,22 @@ __metadata: languageName: node linkType: hard +"pvtsutils@npm:^1.3.5, pvtsutils@npm:^1.3.6": + version: 1.3.6 + resolution: "pvtsutils@npm:1.3.6" + dependencies: + tslib: "npm:^2.8.1" + checksum: 10/d45b12f8526e13ecf15fe09b30cde65501f3300fd2a07c11b28a966d434d1f767c8a61597ecba2e19c7eb19ca0c740341a6babc67a4f741e08b1ef1095c71663 + languageName: node + linkType: hard + +"pvutils@npm:^1.1.5": + version: 1.1.5 + resolution: "pvutils@npm:1.1.5" + checksum: 10/9a5a71603c72bf9ea3a4501e8251e3f7a56026ed059bf63a18bd9a30cac6c35cc8250b39eb6291c1cb204cdeb6660663ab9bb2c74e85a512919bb2d614e340ea + languageName: node + linkType: hard + "qified@npm:^0.9.0": version: 0.9.0 resolution: "qified@npm:0.9.0" @@ -18215,6 +18499,13 @@ __metadata: languageName: node linkType: hard +"reflect-metadata@npm:^0.2.2": + version: 0.2.2 + resolution: "reflect-metadata@npm:0.2.2" + checksum: 10/1c93f9ac790fea1c852fde80c91b2760420069f4862f28e6fae0c00c6937a56508716b0ed2419ab02869dd488d123c4ab92d062ae84e8739ea7417fae10c4745 + languageName: node + linkType: hard + "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9": version: 1.0.10 resolution: "reflect.getprototypeof@npm:1.0.10" @@ -19281,6 +19572,13 @@ __metadata: languageName: node linkType: hard +"sha256-uint8array@npm:^0.10.7": + version: 0.10.7 + resolution: "sha256-uint8array@npm:0.10.7" + checksum: 10/e427f9d2f9c521dea552f033d3f0c3bd641ab214d214dd41bde3c805edde393519cf982b3eee7d683b32e5f28fa23b2278d25935940e13fbe831b216a37832be + languageName: node + linkType: hard + "shebang-command@npm:^2.0.0": version: 2.0.0 resolution: "shebang-command@npm:2.0.0" @@ -20888,14 +21186,14 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^1.8.1": +"tslib@npm:^1.8.1, tslib@npm:^1.9.3": version: 1.14.1 resolution: "tslib@npm:1.14.1" checksum: 10/7dbf34e6f55c6492637adb81b555af5e3b4f9cc6b998fb440dac82d3b42bdc91560a35a5fb75e20e24a076c651438234da6743d139e4feabf0783f3cdfe1dddb languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.7.0, tslib@npm:^2.8.1": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 @@ -20920,6 +21218,15 @@ __metadata: languageName: node linkType: hard +"tsyringe@npm:^4.8.0": + version: 4.10.0 + resolution: "tsyringe@npm:4.10.0" + dependencies: + tslib: "npm:^1.9.3" + checksum: 10/b42660dc112cee2db02b3d69f2ef6a6a9d185afd96b18d8f88e47c1e62be94b69a9f5a58fcfdb2a3fbb7c6c175b8162ea00f7db6499bf333ce945e570e31615c + languageName: node + linkType: hard + "tty-browserify@npm:^0.0.1": version: 0.0.1 resolution: "tty-browserify@npm:0.0.1" From 4d67f340ed791a4c5cbbe812ad3d02c4dc428e0d Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Fri, 1 May 2026 14:05:51 -0700 Subject: [PATCH 008/133] [origin] add scoped globals for mixed app routes (#26900) ## Summary - lowers Origin reset/global selectors with `:where(...)` so component and app styles can override Origin defaults without separate overrides - splits Origin's public stylesheet into root/document/scopable internals and adds `@lightsparkdev/origin/scope.scss` - scopes reusable Origin global rules under `html.origin` while keeping token/font root setup available at document level - switches the private site to import the scoped Origin stylesheet, toggling `html.origin` for auth and Grid/Nage routes while preserving Emotion globals on legacy routes - preserves the `--doc-height` viewport resize sync for both paths: Emotion `GlobalStyles` keeps its updater for other apps, while Origin-scoped site routes mount a small equivalent because they intentionally skip `GlobalStyles` - adds legacy `SuisseIntl` / `SuisseIntl-Mono` font-family aliases for existing UI typography consumers when Origin globals are active - removes unused `pretty-scrollbar` globals from both Origin and Emotion global styles - updates Origin package exports/files/package checks so SCSS entrypoints are published and package validation ignores non-JS style entrypoints in `attw` - fixes the Origin `LoadMore` trigger type conflict exposed once the private site imports Origin styles ## Validation - `git diff --check` - `yarn workspace @lightsparkdev/origin package:checks` - `yarn workspace @lightsparkdev/origin lint:styles` - `yarn workspace @lightsparkdev/origin build:styles` - `yarn workspace @lightsparkdev/origin test:ct src/components/Button/Button.test.tsx` - `yarn workspace @lightsparkdev/site exec eslint src/Root.tsx` - `yarn workspace @lightsparkdev/ui exec eslint src/styles/global.tsx` - `yarn turbo run types --filter=@lightsparkdev/site` - pre-commit hook passed earlier for the global stylesheet split (`yarn install`, `yarn format`) - Playwright spot checks on local `start:dev`: - `/login` has `html.origin`, Origin body styles (`14px / 20px "Suisse Intl"`), Origin background/text tokens, and the body breakpoint marker - RSK `/dashboard` has no `html.origin`, keeps Emotion globals (`12px / 14.52px Montserrat`), and keeps the breakpoint marker - RSK `/transactions/sent` keeps Emotion globals and restored transaction empty-state/card spacing (`320x128`, `32px` padding) ## Notes - This PR is now the base of the button-render work; #26933 stacks on top of it. - `scope.scss` intentionally prefixes Origin global rules with `html.origin`; non-Origin routes continue to use the existing Emotion global stylesheet. - Storybook-only local changes used for visual testing remain uncommitted. GitOrigin-RevId: d6ae738f069fe1daffb41301762dd50bc553cab4 --- packages/origin/package.json | 11 ++- packages/origin/src/styles/_document.scss | 14 ++++ packages/origin/src/styles/_root.scss | 15 ++++ packages/origin/src/styles/_scopable.scss | 63 +++++++++++++++ packages/origin/src/styles/public.scss | 31 +------- packages/origin/src/styles/scope.scss | 14 ++++ packages/origin/src/tokens/_fonts.scss | 95 +++++++++++++++++++++++ packages/origin/src/tokens/_reset.scss | 26 +++---- packages/ui/src/styles/global.tsx | 25 +----- 9 files changed, 224 insertions(+), 70 deletions(-) create mode 100644 packages/origin/src/styles/_document.scss create mode 100644 packages/origin/src/styles/_root.scss create mode 100644 packages/origin/src/styles/_scopable.scss create mode 100644 packages/origin/src/styles/scope.scss diff --git a/packages/origin/package.json b/packages/origin/package.json index f4a9506b8..d7933f11f 100644 --- a/packages/origin/package.json +++ b/packages/origin/package.json @@ -16,13 +16,16 @@ "exports": { ".": "./src/index.ts", "./styles.css": "./dist/styles.css", + "./styles.scss": "./src/styles/public.scss", + "./scope.scss": "./src/styles/scope.scss", "./tokens/*": "./src/tokens/*" }, "files": [ "dist/", - "src/components/", - "src/tokens/", - "src/lib/", + "src/components/**/*", + "src/styles/*.scss", + "src/tokens/*", + "src/lib/**/*", "src/index.ts", "public/fonts/", "skills/", @@ -40,7 +43,7 @@ "lint:fix": "eslint --fix src/ && stylelint --fix 'src/**/*.scss'", "lint:styles": "stylelint 'src/**/*.scss'", "lint:watch": "esw src/ -w --ext .ts,.tsx --color", - "package:checks": "publint && attw --pack . --ignore-rules cjs-resolves-to-esm internal-resolution-error --exclude-entrypoints ./styles.css", + "package:checks": "publint && attw --pack . --ignore-rules cjs-resolves-to-esm internal-resolution-error --exclude-entrypoints ./styles.css ./styles.scss ./scope.scss", "storybook": "storybook dev -p 6006", "build-sb": "echo 'Origin storybook requires @storybook/nextjs — run locally with: yarn storybook'", "test": "vitest run", diff --git a/packages/origin/src/styles/_document.scss b/packages/origin/src/styles/_document.scss new file mode 100644 index 000000000..d1b08c686 --- /dev/null +++ b/packages/origin/src/styles/_document.scss @@ -0,0 +1,14 @@ +@mixin html-globals($selector: ":where(html)") { + #{$selector} { + height: 100%; + background: var(--surface-primary, #ffffff); + font-feature-settings: + "salt" 1, + "kern" 1; + + /* required for iOS https://bit.ly/3Q8syG8 */ + -webkit-text-size-adjust: none; + text-size-adjust: none; + scroll-behavior: smooth; + } +} diff --git a/packages/origin/src/styles/_root.scss b/packages/origin/src/styles/_root.scss new file mode 100644 index 000000000..c0a88c122 --- /dev/null +++ b/packages/origin/src/styles/_root.scss @@ -0,0 +1,15 @@ +// Import fonts (must come first) +@use "../tokens/fonts"; + +// Import design tokens (CSS custom properties) +@use "../tokens/variables"; + +// Import effect tokens (shadows, focus rings) +@use "../tokens/effects"; + +:root { + --doc-height: 100vh; + --rt-opacity: 1; + --rt-transition-show-delay: 0.15s; + --rt-transition-closing-delay: 0.2s; +} diff --git a/packages/origin/src/styles/_scopable.scss b/packages/origin/src/styles/_scopable.scss new file mode 100644 index 000000000..8f9f0523c --- /dev/null +++ b/packages/origin/src/styles/_scopable.scss @@ -0,0 +1,63 @@ +// Import typography text styles +@use "../tokens/typography"; + +// Import CSS reset (box-sizing, form elements, icon system) +@use "../tokens/reset"; + +// Import utility classes (visually-hidden, etc.) +@use "../tokens/utilities"; + +:where(body) { + height: 100%; + margin: 0; + min-height: var(--doc-height); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: auto; + font-family: var(--font-family-sans, "Suisse Intl", system-ui, sans-serif); + font-size: var(--font-size-base, 14px); + line-height: var(--font-leading-20, 20px); + color: var(--text-primary, #1a1a1a); + background: var(--surface-primary, #ffffff); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Enable viewport size detection in JS for breakpoints */ +:where(body)::before { + position: absolute; + visibility: hidden; +} + +@media (width <= 640px) { + :where(body)::before { + content: "sm"; + } +} + +@media (641px <= width <= 833px) { + :where(body)::before { + content: "minSmMaxMd"; + } +} + +@media (834px <= width <= 1199px) { + :where(body)::before { + content: "minMdMaxLg"; + } +} + +@media (width >= 1200px) { + :where(body)::before { + content: "lg"; + } +} + +/* Commonly used throughout webdev apps: */ +:where([id="root"]) { + height: 100%; +} + +.grecaptcha-badge { + visibility: hidden; +} diff --git a/packages/origin/src/styles/public.scss b/packages/origin/src/styles/public.scss index f3a7de064..290814ae3 100644 --- a/packages/origin/src/styles/public.scss +++ b/packages/origin/src/styles/public.scss @@ -3,31 +3,8 @@ * Import from `@lightsparkdev/origin/styles.css`. */ -// Import fonts (must come first) -@use "../tokens/fonts"; +@use "root"; +@use "document"; +@use "scopable"; -// Import design tokens (CSS custom properties) -@use "../tokens/variables"; - -// Import effect tokens (shadows, focus rings) -@use "../tokens/effects"; - -// Import typography text styles -@use "../tokens/typography"; - -// Import CSS reset (box-sizing, form elements, icon system) -@use "../tokens/reset"; - -// Import utility classes (visually-hidden, etc.) -@use "../tokens/utilities"; - -body { - margin: 0; - font-family: var(--font-family-sans, "Suisse Intl", system-ui, sans-serif); - font-size: var(--font-size-base, 14px); - line-height: var(--font-leading-20, 20px); - color: var(--text-primary, #1a1a1a); - background: var(--surface-primary, #ffffff); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +@include document.html-globals; diff --git a/packages/origin/src/styles/scope.scss b/packages/origin/src/styles/scope.scss new file mode 100644 index 000000000..d78b5ac0d --- /dev/null +++ b/packages/origin/src/styles/scope.scss @@ -0,0 +1,14 @@ +/** + * Scoped stylesheet entrypoint for mixed applications. + * Import from `@lightsparkdev/origin/scope.scss`. + */ + +@use "sass:meta"; +@use "root"; +@use "document"; + +@include document.html-globals("html.origin"); + +html.origin { + @include meta.load-css("scopable"); +} diff --git a/packages/origin/src/tokens/_fonts.scss b/packages/origin/src/tokens/_fonts.scss index d8bf466eb..a9e7d1154 100644 --- a/packages/origin/src/tokens/_fonts.scss +++ b/packages/origin/src/tokens/_fonts.scss @@ -5,6 +5,8 @@ * - Regular (400) - body text * - Book (450) - component labels * - Medium (500) - headings, labels, buttons + * - Semibold (600) - legacy UI typography aliases + * - Bold (700) - legacy UI typography aliases * - Mono Regular - code blocks */ @@ -20,6 +22,18 @@ line-gap-override: 0%; } +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl; + src: url("/fonts/SuisseIntl-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + // Suisse Intl - Book (450) @font-face { font-family: "Suisse Intl"; @@ -32,6 +46,18 @@ line-gap-override: 0%; } +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl; + src: url("/fonts/SuisseIntl-Book.woff2") format("woff2"); + font-weight: 450; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + // Suisse Intl - Medium (500) @font-face { font-family: "Suisse Intl"; @@ -44,6 +70,66 @@ line-gap-override: 0%; } +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl; + src: url("/fonts/SuisseIntl-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + +// Suisse Intl - Semibold (600) +@font-face { + font-family: "Suisse Intl"; + src: url("/fonts/SuisseIntl-Semibold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl; + src: url("/fonts/SuisseIntl-Semibold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + +// Suisse Intl - Bold (700) +@font-face { + font-family: "Suisse Intl"; + src: url("/fonts/SuisseIntl-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl; + src: url("/fonts/SuisseIntl-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; + ascent-override: 81%; + descent-override: 19%; + line-gap-override: 0%; +} + // Suisse Intl Mono - Regular // Note: Font family matches token --font-family-mono value @font-face { @@ -53,3 +139,12 @@ font-style: normal; font-display: swap; } + +// Legacy alias used by @lightsparkdev/ui typography tokens. +@font-face { + font-family: SuisseIntl-Mono; + src: url("/fonts/SuisseIntlMono-Regular-WebXL.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} diff --git a/packages/origin/src/tokens/_reset.scss b/packages/origin/src/tokens/_reset.scss index 8919d007c..23c8e5c2c 100644 --- a/packages/origin/src/tokens/_reset.scss +++ b/packages/origin/src/tokens/_reset.scss @@ -14,52 +14,44 @@ } } -body { +:where(body) { margin: 0; } -h1, -h2, -h3, -h4, -h5, -h6 { +:where(h1, h2, h3, h4, h5, h6) { margin: 0; font: inherit; } -p { +:where(p) { margin: 0; } -a { +:where(a) { color: inherit; text-decoration: none; } -ul, -ol { +:where(ul, ol) { margin: 0; padding: 0; list-style: none; } -img { +:where(img) { max-width: 100%; display: block; } -table { +:where(table) { border-collapse: collapse; } -input, -textarea, -select { +:where(input, textarea, select) { background: transparent; } -button { +:where(button) { background: transparent; cursor: pointer; } diff --git a/packages/ui/src/styles/global.tsx b/packages/ui/src/styles/global.tsx index 39ff431e1..edf7c1075 100644 --- a/packages/ui/src/styles/global.tsx +++ b/packages/ui/src/styles/global.tsx @@ -166,25 +166,6 @@ export const globalComponentStyles = ({ theme }: ThemeProp) => css` text-decoration: none; } - .pretty-scrollbar { - scrollbar-width: auto; - scrollbar-color: #333333 #000000; - } - - .pretty-scrollbar::-webkit-scrollbar { - width: 16px; - } - - .pretty-scrollbar::-webkit-scrollbar-track { - background: #000000; - } - - .pretty-scrollbar::-webkit-scrollbar-thumb { - background-color: #333333; - border-radius: 10px; - border: 3px solid #000000; - } - *:focus-visible { outline: ${theme.hcNeutral} dashed 1px; } @@ -204,10 +185,10 @@ export function GlobalStyles() { const bg = useThemeBg(); useEffect(() => { - /* + /* * iOS has no way to actually get the viewport size correctly. - * There are many ways purporting to solve - it but the only one that seems to work consistently everywhere requires js https://bit.ly/3LRfsNn + * There are many ways purporting to solve it but the only one that seems + * to work consistently everywhere requires JS: https://bit.ly/3LRfsNn * We need it to properly take up the whole viewport when the content is * smaller. */ From de5ffdb2085bf6d57907abe5f8874465ee9e8646 Mon Sep 17 00:00:00 2001 From: James Xu Date: Fri, 1 May 2026 16:20:45 -0700 Subject: [PATCH 009/133] feat(origin/BarChart): anchor non-stacked bars at value 0 when 0 is in domain (#26977) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Small change to BarChart so signed-value bars anchor at the zero line — negatives hang down, positives grow up — instead of all rendering from the plot bottom. Sheets, Looker, d3 defaults, and recharts all do this; Origin was the odd one out. For each non-stacked bar we compute `anchor = clamp(0, yMin, yMax)` and draw between `anchor` and the value: - **All-positive data** — anchor lands at `yMin` (bottom). Visual identical to before. - **Mixed signs** — anchor is `0`. Positives grow up, negatives hang down. - **All-negative data** — anchor lands at `yMax` (top). Bars hang down to their value. Same treatment applied to the horizontal orientation. Stacked path is intentionally untouched — cumulative semantics already differ from the simple value→height mapping. ## Why Came up while building a daily net inflow/outflow bar chart in lighthouse — the chart's domain spanned negative values, but every red bar was rendered from the bottom of the plot area up to the value, which made small negative days look as severe as the worst negative day. ## Not a breaking change - No API change — no props added, removed, or retyped. - All-positive data renders pixel-identical (`clamp(0, yMin, yMax) = yMin` when yMin is 0). - Only diffs are mixed-sign and all-negative charts, which were arguably broken before this. ## Notes - Originally proposed against the old origin repo at lightsparkdev/origin#129; moved here per @coreymartin. - Lighthouse currently has a small recharts-based bar chart bridging the signed-data case ([lighthouse#383](https://github.com/lightsparkdev/lighthouse/pull/383)). Plan is to drop that bridge and use Origin directly once this lands. ## Test plan - [ ] Existing storybook bar charts (all-positive) render identically — visual diff is a no-op. - [ ] Mixed-sign story: bars cross the zero line cleanly. - [ ] Horizontal orientation: bars extend left of the zero column for negatives. - [ ] Stacked path unchanged. GitOrigin-RevId: 807866e8c7aa64e986b8b31f370630e162cabb6c --- .../origin/src/components/Chart/BarChart.tsx | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/origin/src/components/Chart/BarChart.tsx b/packages/origin/src/components/Chart/BarChart.tsx index 28f15b993..90a719369 100644 --- a/packages/origin/src/components/Chart/BarChart.tsx +++ b/packages/origin/src/components/Chart/BarChart.tsx @@ -819,12 +819,22 @@ export const Bar = React.forwardRef(function Bar( const barFill = getBarColor?.(d, di, s.key) ?? s.color; const barOffset = slotStart + si * (barThickness + BAR_ITEM_GAP); + const anchor = Math.min(yMax, Math.max(yMin, 0)); if (isHorizontal) { - const barW = ((v - yMin) / (yMax - yMin)) * plotWidth; + const xAnchor = linearScale( + anchor, + yMin, + yMax, + 0, + plotWidth, + ); + const xVal = linearScale(v, yMin, yMax, 0, plotWidth); + const barX = Math.min(xAnchor, xVal); + const barW = Math.abs(xVal - xAnchor); return ( (function Bar( /> ); } - const barH = ((v - yMin) / (yMax - yMin)) * plotHeight; - const barY = plotHeight - barH; + const yAnchor = linearScale( + anchor, + yMin, + yMax, + plotHeight, + 0, + ); + const yVal = linearScale(v, yMin, yMax, plotHeight, 0); + const barY = Math.min(yAnchor, yVal); + const barH = Math.abs(yVal - yAnchor); return ( Date: Fri, 1 May 2026 16:25:19 -0700 Subject: [PATCH 010/133] [site] render auth buttons with Origin (#26933) ## Reason The Nage login flow is starting to adopt Origin buttons, and the auth page needs the Origin-backed actions to render with the same visual treatment and spacing as the existing SSO action. ## Overview - Builds on the scoped Origin globals that landed in #26900, now that this PR targets `main` directly. - Adds `fullWidth` support to Origin `Button` and covers it in tests/stories. - Bridges the app theme to Origin's `data-theme` tokens for Origin components rendered in the private site. - Updates login email and SSO actions to use `NageButton` with the previous 10px button spacing preserved at the auth form layout level. - Adds the Origin mono font asset needed by the scoped Origin stylesheet. ## Test Plan - `git diff --check` - `yarn workspace @lightsparkdev/origin package:checks` - `yarn workspace @lightsparkdev/origin lint:styles` - `yarn workspace @lightsparkdev/origin test:ct src/components/Button/Button.test.tsx` - `yarn workspace @lightsparkdev/site exec eslint src/Root.tsx src/components/AuthForm.tsx src/pages/login/Login.tsx src/uma-nage/components/NageButton.test.tsx` - `yarn turbo run types --filter=@lightsparkdev/site` GitOrigin-RevId: 5ea673b4ae149244197416c602ad5c936e116c1b --- .../origin/src/components/Button/Button.module.scss | 4 ++++ .../origin/src/components/Button/Button.stories.tsx | 2 ++ .../src/components/Button/Button.test-stories.tsx | 10 ++++++++++ packages/origin/src/components/Button/Button.test.tsx | 9 +++++++++ packages/origin/src/components/Button/Button.tsx | 3 +++ 5 files changed, 28 insertions(+) diff --git a/packages/origin/src/components/Button/Button.module.scss b/packages/origin/src/components/Button/Button.module.scss index 83016c6ea..621af9916 100644 --- a/packages/origin/src/components/Button/Button.module.scss +++ b/packages/origin/src/components/Button/Button.module.scss @@ -31,6 +31,10 @@ } } +.fullWidth { + width: 100%; +} + .dense { --button-icon-size: 12px; diff --git a/packages/origin/src/components/Button/Button.stories.tsx b/packages/origin/src/components/Button/Button.stories.tsx index 88eb01af4..826768124 100644 --- a/packages/origin/src/components/Button/Button.stories.tsx +++ b/packages/origin/src/components/Button/Button.stories.tsx @@ -54,6 +54,7 @@ const meta: Meta = { }, loading: { control: "boolean" }, disabled: { control: "boolean" }, + fullWidth: { control: "boolean" }, children: { control: "text" }, }, }; @@ -67,6 +68,7 @@ export const Default: Story = { size: "default", loading: false, disabled: false, + fullWidth: false, children: "Button", }, }; diff --git a/packages/origin/src/components/Button/Button.test-stories.tsx b/packages/origin/src/components/Button/Button.test-stories.tsx index 0e0b1cff7..cf6fb0cbd 100644 --- a/packages/origin/src/components/Button/Button.test-stories.tsx +++ b/packages/origin/src/components/Button/Button.test-stories.tsx @@ -67,6 +67,16 @@ export function SecondaryButton() { return ; } +export function FullWidthButton() { + return ( +
+ +
+ ); +} + export function DisabledSecondaryButton() { return ( + + + + {legalName || "no legal name"} + + {entityType ?? "none"} + + {registrationCountry ?? "none"} + + + {countrySearch || "empty"} + + + {countryOpen ? "open" : "closed"} + + + {comboboxRoles.join(",") || "none"} + + + {checkboxRoles.join(",") || "none"} + +
+ ); +} + +export function CompositeFormErrorsBoundary() { + return ( +
+ + Country + + + + {(value: string | null) => getLabel(countryOptions, value)} + + + + + + + + {countryOptions.map((option) => ( + + + {option.label} + + ))} + + + + + + Select a country + + + + Business type + + items={businessTypeOptions} + itemToStringValue={(option) => option.label} + > + + + + + + + + + + No business types found + + {(option: ProductOption) => ( + + + {option.label} + + )} + + + + + + Select a business type + +
+ ); +} + +export function FieldRootRenderFormBoundary() { + return ( +
+ + } + > + Registered business name + + Enter a registered business name + +
+ ); +} diff --git a/packages/origin/src/components/Form/FormCompositionBoundary.test.tsx b/packages/origin/src/components/Form/FormCompositionBoundary.test.tsx new file mode 100644 index 000000000..e549543a8 --- /dev/null +++ b/packages/origin/src/components/Form/FormCompositionBoundary.test.tsx @@ -0,0 +1,168 @@ +import { test, expect } from "@playwright/experimental-ct-react"; +import { + CompositeFormErrorsBoundary, + FieldRootRenderFormBoundary, + KybOriginFormCompositionBoundary, +} from "./FormCompositionBoundary.test-stories"; + +test.describe("Origin form composition boundaries", () => { + test("connects Form errors, Field names, external invalid state, controlled Input, and invalid focus", async ({ + mount, + page, + }) => { + await mount(); + + await page.getByRole("button", { name: "Review" }).click(); + await expect(page.getByText("Enter a legal business name")).toBeVisible(); + await expect( + page.getByPlaceholder("Enter legal business name"), + ).toBeFocused(); + + const legalName = page.getByPlaceholder("Enter legal business name"); + await legalName.fill("Acme Treasury LLC"); + await expect(page.getByTestId("legal-name-value")).toHaveText( + "Acme Treasury LLC", + ); + + await page.getByRole("button", { name: "Review" }).click(); + await expect(page.getByText("Select a registration country")).toBeVisible(); + await expect(page.getByText("Enter a business purpose")).toBeVisible(); + await expect(page.getByPlaceholder("Search countries")).toBeFocused(); + await expect(page.getByPlaceholder("Search countries")).toHaveAttribute( + "data-invalid", + "", + ); + + const purpose = page.getByPlaceholder("Describe business purpose"); + await purpose.fill("Treasury operations"); + await expect(page.getByText("Enter a business purpose")).not.toBeVisible(); + }); + + test("maps product-style Select options to a controlled string value", async ({ + mount, + page, + }) => { + await mount(); + + await page.getByTestId("entity-type-trigger").click(); + await page + .getByRole("option", { name: "Limited liability company" }) + .click(); + + await expect(page.getByTestId("entity-type-value")).toHaveText("llc"); + await expect(page.getByTestId("entity-type-trigger")).toContainText( + "Limited liability company", + ); + }); + + test("maps searchable Combobox objects to product string state with controlled input, popup, and portal state", async ({ + mount, + page, + }) => { + await mount(); + + const countryInput = page.getByPlaceholder("Search countries"); + await countryInput.click(); + await expect(page.getByTestId("country-open-state")).toHaveText("open"); + await expect( + page.getByTestId("country-portal").getByRole("listbox"), + ).toBeVisible(); + + await countryInput.fill("Can"); + await expect(page.getByTestId("country-search-value")).toHaveText("Can"); + + await page.getByRole("option", { name: "Canada" }).click(); + + await expect(page.getByTestId("country-value")).toHaveText("CA"); + await expect(countryInput).toHaveValue("Canada"); + await expect(page.getByTestId("country-open-state")).toHaveText("closed"); + }); + + test("supports Combobox multi-select chips with accessible chip removal", async ({ + mount, + page, + }) => { + await mount(); + + const rolesInput = page.getByPlaceholder("Add owner roles"); + await rolesInput.click(); + await page.getByRole("option", { name: "Control person" }).click(); + await page.getByRole("option", { name: "Signer" }).click(); + + await expect(page.getByTestId("combobox-roles-value")).toHaveText( + "control-person,signer", + ); + await expect( + page.getByRole("toolbar").getByText("Control person"), + ).toBeVisible(); + await expect(page.getByRole("toolbar").getByText("Signer")).toBeVisible(); + + await page.getByRole("button", { name: "Remove Signer" }).click(); + + await expect(page.getByTestId("combobox-roles-value")).toHaveText( + "control-person", + ); + }); + + test("supports Checkbox.Group owner-role-style controlled multi selection", async ({ + mount, + page, + }) => { + await mount(); + + await expect(page.getByTestId("checkbox-roles-value")).toHaveText( + "control-person", + ); + + await page.getByTestId("checkbox-role-signer").click(); + + await expect(page.getByTestId("checkbox-roles-value")).toHaveText( + "control-person,signer", + ); + }); + + test("supports Field.Root render with merged classes and Form invalid state", async ({ + mount, + page, + }) => { + await mount(); + + const root = page.getByTestId("form-rendered-field-root"); + await expect(root).toBeVisible(); + await expect(root).toHaveJSProperty("tagName", "SECTION"); + await expect(root).toHaveAttribute("data-custom-root", ""); + await expect(root).toHaveAttribute("data-invalid", ""); + await expect(root).toHaveCSS("display", "flex"); + await expect(root).toHaveCSS("flex-direction", "column"); + await expect(root).toHaveClass(/consumer-form-field-root/); + await expect(root).toHaveClass(/rendered-form-field-root/); + await expect( + page.getByPlaceholder("Enter registered business name"), + ).toHaveAttribute("data-invalid", ""); + await expect( + page.getByText("Enter a registered business name"), + ).toBeVisible(); + }); + + test("propagates Form errors to composite Select and Combobox fields without explicit invalid props", async ({ + mount, + page, + }) => { + await mount(); + + await expect(page.getByText("Select a country")).toBeVisible(); + await expect(page.getByText("Select a business type")).toBeVisible(); + + await expect(page.getByTestId("country-trigger")).toHaveAttribute( + "data-invalid", + "", + ); + await expect(page.getByTestId("business-type-wrapper")).toHaveAttribute( + "data-invalid", + "", + ); + await expect( + page.getByPlaceholder("Search business types"), + ).toHaveAttribute("data-invalid", ""); + }); +}); From b2b4f09193d735a4e5685e0ba5584f1ce7ea4600 Mon Sep 17 00:00:00 2001 From: Kevin Zhang Date: Thu, 21 May 2026 16:32:52 -0700 Subject: [PATCH 030/133] fix(treasury): fix symbol case, restructure columns, fix stablecoin formatting (#27679) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - **Backend bug fix**: Coinbase Prime returns lowercase currency symbols (`usd`, `usdc`). The balance lookup was indexing by raw symbol then looking up by uppercase `CurrencyUnit.name`, so both always missed and showed Unavailable. Fixed by normalizing the key to `.upper()` on ingestion — same pattern used by Cross River and the Coinbase tasks consumer. - **Schema cleanup**: Removed `label`, `status`, and `source_id` from `TreasuryBalance` (and the dead `_fireblocks_source_id` / `TREASURY_BALANCE_ERROR_STATUS` helpers). These fields had no remaining consumers. - **Column restructure**: Treasury table now shows **Provider / Network / Asset / Available / Total** instead of Account / Asset / Available / Total / Provider / Status / Source. Added `network: str | None` to `TreasuryBalance` (populated for Fireblocks rows, `null` elsewhere). Removed the "Snapshot refreshed" subtitle. - **Stablecoin formatting fix**: USDC/USDT/USDB are stored in micro units (6 decimal places) but the frontend `formatCurrencyStr` had no divisor for them, rendering raw integers like `9795576360 USDC` with no commas. Added a `microCurrencies` division block (÷ 10⁶) and explicit switch cases for locale-aware number formatting. ## Test plan - [ ] Verify Treasury page shows correct USD/USDC balances for Coinbase Prime (previously Unavailable) - [ ] Verify USDC/USDT/USDB amounts show with commas and 2 decimal places (e.g. `9,795.58 USDC`) - [ ] Verify Fireblocks rows show correct network (Ethereum / Solana / Base / Tron) - [ ] Verify rows with no network show `—` - [ ] Verify no "Snapshot refreshed" subtitle appears GitOrigin-RevId: 881786e686dfbec747b11a470b3a0ebfe6e976eb --- packages/core/src/utils/currency.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/core/src/utils/currency.ts b/packages/core/src/utils/currency.ts index 5a48a9a71..80dfc58d9 100644 --- a/packages/core/src/utils/currency.ts +++ b/packages/core/src/utils/currency.ts @@ -1425,6 +1425,15 @@ export function formatCurrencyStr( if (centCurrencies.includes(unit)) { num = num / 100; } + /* Stablecoins use 6 decimal places (micro units). Divide by 10^6 to get display value: */ + const microCurrencies = [ + CurrencyUnit.USDC, + CurrencyUnit.USDT, + CurrencyUnit.USDB, + ] as string[]; + if (microCurrencies.includes(unit)) { + num = num / 1_000_000; + } } function getDefaultMaxFractionDigits( @@ -1496,6 +1505,16 @@ export function formatCurrencyStr( maximumFractionDigits: getDefaultMaxFractionDigits(0, 0), })}`; break; + case CurrencyUnit.USDC: + case CurrencyUnit.USDT: + case CurrencyUnit.USDB: + formattedStr = num.toLocaleString(currentLocale, { + notation: compact ? ("compact" as const) : undefined, + minimumFractionDigits: 2, + maximumFractionDigits: getDefaultMaxFractionDigits(2, 6), + }); + forceAppendUnits = true; + break; default: if (isFormattableFiatCurrencyCode(unit)) { formattedStr = num.toLocaleString(currentLocale, { From 8cdb5abae4e8bdcc01d9785e423659fae140c28d Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Fri, 22 May 2026 12:42:26 -0700 Subject: [PATCH 031/133] [uma-nage] Add segmented navigation wrapper (#27106) ## Reason Align the Nage Developers route switcher with Origin `SegmentedNav` while keeping typed Nage route navigation through the shared UI router. ## Overview - Add a thin `NageSegmentedNav` wrapper that renders Origin segmented links through `LinkBase`. - Migrate the Developers Events/API tokens switcher to the wrapper. - Preserve anchor props from render composition in `LinkBase` so Origin can set active link state with `aria-current`. ## Test Plan - `yarn workspace @lightsparkdev/site types --pretty false` - `yarn workspace @lightsparkdev/ui types` - `yarn workspace @lightsparkdev/site exec eslint src/uma-nage/components/NageSegmentedNav.tsx src/uma-nage/components/NageSegmentedNav.test.tsx src/uma-nage/developers/Developers.tsx` - `yarn workspace @lightsparkdev/ui exec eslint src/router.tsx` - `yarn workspace @lightsparkdev/site exec prettier --check src/uma-nage/components/NageSegmentedNav.tsx src/uma-nage/components/NageSegmentedNav.test.tsx src/uma-nage/developers/Developers.tsx` - `yarn workspace @lightsparkdev/ui exec prettier --check src/router.tsx` - `yarn workspace @lightsparkdev/site vitest run src/uma-nage/components/NageSegmentedNav.test.tsx` - `yarn workspace @lightsparkdev/site playwright test --list tests/21-nage-developers.spec.ts` - `git diff --check` Full local Playwright execution was not run because the available site server is using the dev proxy; the Nage Playwright README expects the hermetic minikube/Tilt backend, and the overlapping spec creates/deletes API tokens. Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: 13aec1fe7ae69a6e16be9a22f08801dc9b721d49 --- packages/ui/src/router.tsx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/router.tsx b/packages/ui/src/router.tsx index ced6d8ff9..44da051b6 100644 --- a/packages/ui/src/router.tsx +++ b/packages/ui/src/router.tsx @@ -4,7 +4,7 @@ import type { Theme } from "@emotion/react"; import type { Interpolation } from "@emotion/styled"; import styled from "@emotion/styled"; import { omit } from "lodash-es"; -import type { MouseEventHandler, ReactNode } from "react"; +import type { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from "react"; import { forwardRef, useCallback } from "react"; import type { PathMatch } from "react-router-dom"; import { @@ -36,7 +36,19 @@ export type RouteHash = string | null; export type ExternalLink = string; -export type LinkProps = { +type LinkAnchorProps = Omit< + AnchorHTMLAttributes, + | "children" + | "className" + | "download" + | "href" + | "id" + | "onClick" + | "rel" + | "target" +>; + +export type LinkProps = LinkAnchorProps & { to?: NewRoutesType | undefined; id?: string | undefined; externalLink?: ExternalLink | undefined; @@ -111,6 +123,9 @@ export const LinkBase = forwardRef( blue = false, newTab: newTabProp, typography, + disabled: _disabled, + style, + ...anchorProps }, ref, ) => { @@ -154,13 +169,17 @@ export const LinkBase = forwardRef( return ( Date: Fri, 22 May 2026 16:41:14 -0700 Subject: [PATCH 032/133] [ui] Use built package imports in private apps (#27024) ## Reason The private apps were importing `@lightsparkdev/ui/src/...` directly to avoid an expensive UI package build. After the tsdown migration, the UI build is cheap enough that the apps should consume the built package surface instead. This makes the workspace dependency explicit and lets Turbo rerun app builds when the UI package build changes. ## Overview - Replace direct `@lightsparkdev/ui/src/...` imports in `site`, `ops`, `uma-bridge`, and the transitive `private-ui` source included by those apps with built `@lightsparkdev/ui/...` subpaths. - Add missing built barrel exports for `@lightsparkdev/ui/hooks`, `@lightsparkdev/ui/icons`, and `@lightsparkdev/ui/types`. - Remove `packages/ui/src` from the three app tsconfig includes. - Update the three app Turbo overrides to build and watch `@lightsparkdev/ui#build` explicitly while still avoiding `^build` until `private-ui` has a real build task. ## Test Plan - `cd js && ./node_modules/.bin/turbo run build --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge` - `cd js && git -C .. diff --name-only -z -- 'js/**' | perl -0pe 's#js/##g' | xargs -0 ./node_modules/.bin/prettier --check` - `git diff --check origin/main...HEAD` - Verified `rg '@lightsparkdev/ui/src' js/apps js/packages/private/ui` returns no matches. GitOrigin-RevId: f5e9e50f992067c59517c244cf5266b82d032ad8 --- packages/eslint-config/package.json | 3 -- .../react-app-with-internal-ui.js | 26 ---------------- .../react-app-with-internal-ui.mjs | 30 ------------------- packages/ui/package.json | 12 ++++++++ 4 files changed, 12 insertions(+), 59 deletions(-) delete mode 100644 packages/eslint-config/react-app-with-internal-ui.js delete mode 100644 packages/eslint-config/react-app-with-internal-ui.mjs diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json index 428e0828f..8bf11b934 100644 --- a/packages/eslint-config/package.json +++ b/packages/eslint-config/package.json @@ -8,7 +8,6 @@ "base.mjs", "react-lib.mjs", "react-app.mjs", - "react-app-with-internal-ui.mjs", "constants/" ], "exports": { @@ -18,8 +17,6 @@ "./react-lib": "./react-lib.mjs", "./react-app.mjs": "./react-app.mjs", "./react-app": "./react-app.mjs", - "./react-app-with-internal-ui.mjs": "./react-app-with-internal-ui.mjs", - "./react-app-with-internal-ui": "./react-app-with-internal-ui.mjs", "./constants/react-restricted-imports.js": "./constants/react-restricted-imports.js", "./constants/react-restricted-imports": "./constants/react-restricted-imports.js" }, diff --git a/packages/eslint-config/react-app-with-internal-ui.js b/packages/eslint-config/react-app-with-internal-ui.js deleted file mode 100644 index d9dd50efb..000000000 --- a/packages/eslint-config/react-app-with-internal-ui.js +++ /dev/null @@ -1,26 +0,0 @@ -const reactAppRestrictedImports = - require("./constants/react-restricted-imports").reactAppRestrictedImports; - -module.exports = { - extends: ["./react-app"], - rules: { - "no-restricted-imports": [ - "error", - { - ...reactAppRestrictedImports, - patterns: [ - ...reactAppRestrictedImports.patterns, - { - group: [ - "@lightsparkdev/ui/**", - "!@lightsparkdev/ui/src", - "!@lightsparkdev/ui/src/**", - ], - message: - "This app can import directly from @lightsparkdev/ui/src to avoid requiring a build.", - }, - ], - }, - ], - }, -}; diff --git a/packages/eslint-config/react-app-with-internal-ui.mjs b/packages/eslint-config/react-app-with-internal-ui.mjs deleted file mode 100644 index b7a2187ae..000000000 --- a/packages/eslint-config/react-app-with-internal-ui.mjs +++ /dev/null @@ -1,30 +0,0 @@ -import { createRequire } from 'node:module'; -import reactApp from './react-app.mjs'; - -const require = createRequire(import.meta.url); -const { reactAppRestrictedImports } = require('./constants/react-restricted-imports.js'); - -const appWithInternalUiRestricted = { - ...reactAppRestrictedImports, - patterns: [ - ...reactAppRestrictedImports.patterns, - { - group: [ - '@lightsparkdev/ui/**', - '!@lightsparkdev/ui/src', - '!@lightsparkdev/ui/src/**', - ], - message: - 'This app can import directly from @lightsparkdev/ui/src to avoid requiring a build.', - }, - ], -}; - -export default [ - ...reactApp, - { - rules: { - 'no-restricted-imports': ['error', appWithInternalUiRestricted], - }, - }, -]; diff --git a/packages/ui/package.json b/packages/ui/package.json index 1110698e3..fe6fbf360 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -23,10 +23,18 @@ "import": "./dist/components/typography/index.js", "require": "./dist/components/typography/index.cjs" }, + "./hooks": { + "import": "./dist/hooks/index.js", + "require": "./dist/hooks/index.cjs" + }, "./hooks/*": { "import": "./dist/hooks/*.js", "require": "./dist/hooks/*.cjs" }, + "./icons": { + "import": "./dist/icons/index.js", + "require": "./dist/icons/index.cjs" + }, "./icons/*": { "import": "./dist/icons/*.js", "require": "./dist/icons/*.cjs" @@ -35,6 +43,10 @@ "import": "./dist/styles/*.js", "require": "./dist/styles/*.cjs" }, + "./types": { + "import": "./dist/types/index.js", + "require": "./dist/types/index.cjs" + }, "./types/*": { "import": "./dist/types/*.js", "require": "./dist/types/*.cjs" From 1128b0ff8897114b9a99275153e68e0ea8946970 Mon Sep 17 00:00:00 2001 From: SOME1HING Date: Tue, 26 May 2026 01:45:58 +0530 Subject: [PATCH 033/133] Fix fail-open async UMA validation checks (#524) Fix async UMA validation checks by awaiting Promise results --- apps/examples/uma-vasp/src/ReceivingVasp.ts | 4 ++-- apps/examples/uma-vasp/src/SendingVasp.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/examples/uma-vasp/src/ReceivingVasp.ts b/apps/examples/uma-vasp/src/ReceivingVasp.ts index bc9d06b03..1fedc01d8 100644 --- a/apps/examples/uma-vasp/src/ReceivingVasp.ts +++ b/apps/examples/uma-vasp/src/ReceivingVasp.ts @@ -164,10 +164,10 @@ export default class ReceivingVasp { ); } if ( - !this.complianceService.shouldAcceptTransactionFromVasp( + !(await this.complianceService.shouldAcceptTransactionFromVasp( umaQuery.vaspDomain!, umaQuery.receiverAddress, - ) + )) ) { throw new uma.UmaError( "This user is not allowed to transact with this VASP.", diff --git a/apps/examples/uma-vasp/src/SendingVasp.ts b/apps/examples/uma-vasp/src/SendingVasp.ts index 3e1cfff20..dee8cc230 100644 --- a/apps/examples/uma-vasp/src/SendingVasp.ts +++ b/apps/examples/uma-vasp/src/SendingVasp.ts @@ -194,11 +194,11 @@ export default class SendingVasp { } if ( - !this.complianceService.shouldAcceptTransactionToVasp( + !(await this.complianceService.shouldAcceptTransactionToVasp( receivingVaspDomain, user.umaUserName, receiverUmaAddress, - ) + )) ) { throw new uma.UmaError( `Transaction not allowed to ${receiverUmaAddress}.`, @@ -481,12 +481,12 @@ export default class SendingVasp { amountValueMillisats / sendingCurrency.multiplier; if ( - !this.checkInternalLedgerBalance( + !(await this.checkInternalLedgerBalance( user.id, amountValueMillisats, sendingCurrencyAmount, sendingCurrencyCode, - ) + )) ) { throw new uma.UmaError( "Insufficient balance.", @@ -930,12 +930,12 @@ export default class SendingVasp { } if ( - !this.checkInternalLedgerBalance( + !(await this.checkInternalLedgerBalance( user.id, amountMsats, sendingCurrencyAmount, sendingCurrencyCode, - ) + )) ) { throw new uma.UmaError( "Insufficient balance.", From 32792cacc99e630921e3ee1f1419953e27acde2c Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 26 May 2026 16:45:25 -0700 Subject: [PATCH 034/133] [js] Update form-data resolution (#27827) ## Summary - Update the root `form-data` resolution to `4.0.5`. - Refresh `js/yarn.lock` so all `form-data` requesters resolve consistently. ## Related advisories - [CVE-2025-7783](https://www.cve.org/CVERecord?id=CVE-2025-7783) / [GHSA-fjxv-7rqg-78g4](https://github.com/advisories/GHSA-fjxv-7rqg-78g4) ## Testing - `yarn why form-data` - `yarn install --immutable` - `yarn deps:check` ## Notes - `yarn install` reports existing peer dependency warnings unrelated to this change. GitOrigin-RevId: 535cb0122b2fb9e5429d871fa4b19d605e4c3ba9 --- apps/examples/uma-vasp/src/ReceivingVasp.ts | 4 ++-- apps/examples/uma-vasp/src/SendingVasp.ts | 12 ++++++------ package.json | 3 ++- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/apps/examples/uma-vasp/src/ReceivingVasp.ts b/apps/examples/uma-vasp/src/ReceivingVasp.ts index 1fedc01d8..bc9d06b03 100644 --- a/apps/examples/uma-vasp/src/ReceivingVasp.ts +++ b/apps/examples/uma-vasp/src/ReceivingVasp.ts @@ -164,10 +164,10 @@ export default class ReceivingVasp { ); } if ( - !(await this.complianceService.shouldAcceptTransactionFromVasp( + !this.complianceService.shouldAcceptTransactionFromVasp( umaQuery.vaspDomain!, umaQuery.receiverAddress, - )) + ) ) { throw new uma.UmaError( "This user is not allowed to transact with this VASP.", diff --git a/apps/examples/uma-vasp/src/SendingVasp.ts b/apps/examples/uma-vasp/src/SendingVasp.ts index dee8cc230..3e1cfff20 100644 --- a/apps/examples/uma-vasp/src/SendingVasp.ts +++ b/apps/examples/uma-vasp/src/SendingVasp.ts @@ -194,11 +194,11 @@ export default class SendingVasp { } if ( - !(await this.complianceService.shouldAcceptTransactionToVasp( + !this.complianceService.shouldAcceptTransactionToVasp( receivingVaspDomain, user.umaUserName, receiverUmaAddress, - )) + ) ) { throw new uma.UmaError( `Transaction not allowed to ${receiverUmaAddress}.`, @@ -481,12 +481,12 @@ export default class SendingVasp { amountValueMillisats / sendingCurrency.multiplier; if ( - !(await this.checkInternalLedgerBalance( + !this.checkInternalLedgerBalance( user.id, amountValueMillisats, sendingCurrencyAmount, sendingCurrencyCode, - )) + ) ) { throw new uma.UmaError( "Insufficient balance.", @@ -930,12 +930,12 @@ export default class SendingVasp { } if ( - !(await this.checkInternalLedgerBalance( + !this.checkInternalLedgerBalance( user.id, amountMsats, sendingCurrencyAmount, sendingCurrencyCode, - )) + ) ) { throw new uma.UmaError( "Insufficient balance.", diff --git a/package.json b/package.json index b4482474d..781df2ed3 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,8 @@ } }, "resolutions": { - "axios": "1.7.7" + "axios": "1.7.7", + "form-data": "4.0.5" }, "engines": { "node": ">=18" From 5bc0a0dfe175a2c6dc77f3306834b8a73aa532ef Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Tue, 26 May 2026 23:56:04 +0000 Subject: [PATCH 035/133] CI update lock file for PR --- yarn.lock | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 8defcce9b..5af748c75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10554,14 +10554,16 @@ __metadata: languageName: node linkType: hard -"form-data@npm:^4.0.0": - version: 4.0.0 - resolution: "form-data@npm:4.0.0" +"form-data@npm:4.0.5": + version: 4.0.5 + resolution: "form-data@npm:4.0.5" dependencies: asynckit: "npm:^0.4.0" combined-stream: "npm:^1.0.8" + es-set-tostringtag: "npm:^2.1.0" + hasown: "npm:^2.0.2" mime-types: "npm:^2.1.12" - checksum: 10/7264aa760a8cf09482816d8300f1b6e2423de1b02bba612a136857413fdc96d7178298ced106817655facc6b89036c6e12ae31c9eb5bdc16aabf502ae8a5d805 + checksum: 10/52ecd6e927c8c4e215e68a7ad5e0f7c1031397439672fd9741654b4a94722c4182e74cc815b225dcb5be3f4180f36428f67c6dd39eaa98af0dcfdd26c00c19cd languageName: node linkType: hard From dfc6a8c754972e6414f26c0a77ab577e427c4f62 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 26 May 2026 22:32:16 -0700 Subject: [PATCH 036/133] [js] Update vite dependency (#27876) ## Summary - Updates direct Vite dev dependencies to `^8.0.14`. - Refreshes transitive Vite lockfile entries within their existing ranges.
Related advisories - [CVE-2026-39363](https://www.cve.org/CVERecord?id=CVE-2026-39363) / [GHSA-p9ff-h696-f583](https://github.com/advisories/GHSA-p9ff-h696-f583) - [CVE-2026-39364](https://www.cve.org/CVERecord?id=CVE-2026-39364) / [GHSA-v2wj-q39q-566r](https://github.com/advisories/GHSA-v2wj-q39q-566r)
## Test plan - `npm view vite version dist-tags dependencies peerDependencies --json` - `npm view vite@6 version --json` - `npm view vite@7 version --json` - `yarn install --immutable` - `yarn deps:check` - `yarn why vite` - `yarn why vite | rg "vite@npm:(6\.4\.1|7\.3\.1|8\.0\.[0-4])([^0-9]|$)" && exit 1 || true` - `git diff --check` - `yarn turbo run build --filter=@lightsparkdev/vite... --filter=@lightsparkdev/site... --filter=@lightsparkdev/ops... --filter=@lightsparkdev/uma-bridge... --filter=@lightsparkdev/storybook... --filter=@lightsparkdev/origin...` GitOrigin-RevId: 2a900a358c28334c55da6586fe4aec9bef5143e8 --- apps/examples/grid-global-accounts-example-app/package.json | 2 +- apps/examples/oauth-app/package.json | 2 +- apps/examples/ui-test-app/package.json | 2 +- packages/origin/package.json | 2 +- packages/vite/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/examples/grid-global-accounts-example-app/package.json b/apps/examples/grid-global-accounts-example-app/package.json index 3ffe1a730..81c26423b 100644 --- a/apps/examples/grid-global-accounts-example-app/package.json +++ b/apps/examples/grid-global-accounts-example-app/package.json @@ -10,7 +10,7 @@ }, "devDependencies": { "typescript": "^5.6.2", - "vite": "^8.0.3" + "vite": "^8.0.14" }, "dependencies": { "@turnkey/api-key-stamper": "^0.6.5", diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json index 41720ff4a..715591327 100644 --- a/apps/examples/oauth-app/package.json +++ b/apps/examples/oauth-app/package.json @@ -28,7 +28,7 @@ "prettier-plugin-organize-imports": "^3.2.4", "tsc-absolute": "^1.0.1", "typescript": "^5.6.2", - "vite": "^8.0.3" + "vite": "^8.0.14" }, "scripts": { "start": "yarn vite", diff --git a/apps/examples/ui-test-app/package.json b/apps/examples/ui-test-app/package.json index c2e5b6729..0f1990739 100644 --- a/apps/examples/ui-test-app/package.json +++ b/apps/examples/ui-test-app/package.json @@ -58,7 +58,7 @@ "ts-jest": "^29.1.1", "tsc-absolute": "^1.0.1", "typescript": "^5.6.2", - "vite": "^8.0.3" + "vite": "^8.0.14" }, "madge": { "detectiveOptions": { diff --git a/packages/origin/package.json b/packages/origin/package.json index 4fd6c9277..12bae4d99 100644 --- a/packages/origin/package.json +++ b/packages/origin/package.json @@ -109,7 +109,7 @@ "stylelint": "^17.1.1", "stylelint-config-standard-scss": "^17.0.0", "typescript": "^5.6.2", - "vite": "^8.0.3", + "vite": "^8.0.14", "vitest": "^3.1.4" }, "engines": { diff --git a/packages/vite/package.json b/packages/vite/package.json index 46a981d99..f82ca99f2 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -6,7 +6,7 @@ "type": "module", "dependencies": { "rollup-plugin-visualizer": "^7.0.1", - "vite": "^8.0.3", + "vite": "^8.0.14", "vite-plugin-svgr": "^4.5.0" }, "devDependencies": { From 9c2a3f104114c754ef59499575c6ac1f2e15cbb2 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 26 May 2026 22:34:08 -0700 Subject: [PATCH 037/133] [origin] Update fast-uri dependency (#27874) ## Summary - Updates `@lightsparkdev/origin`'s Ajv dependency to `^8.20.0`. - Refreshes the transitive `fast-uri` lockfile entry to `3.1.2`.
Related advisories - [CVE-2026-6322](https://www.cve.org/CVERecord?id=CVE-2026-6322) / [GHSA-v39h-62p7-jpjc](https://github.com/advisories/GHSA-v39h-62p7-jpjc) - [CVE-2026-6321](https://www.cve.org/CVERecord?id=CVE-2026-6321) / [GHSA-q3j6-qgpj-74h6](https://github.com/advisories/GHSA-q3j6-qgpj-74h6)
## Test plan - `yarn install` - `yarn install --immutable` - `yarn deps:check` - `yarn why fast-uri` - `yarn why ajv` - `yarn why fast-uri | rg "fast-uri@npm:3\.(0|1\.[01])" && exit 1 || true` - `git diff --check` - `yarn turbo run package:checks --filter=@lightsparkdev/origin` GitOrigin-RevId: 7f7a5cfc8c516f953450091a91b9a0518638f97a --- packages/origin/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/origin/package.json b/packages/origin/package.json index 12bae4d99..d16186eac 100644 --- a/packages/origin/package.json +++ b/packages/origin/package.json @@ -63,7 +63,7 @@ "@base-ui/react": "^1.1.0", "@base-ui/utils": "^0.2.3", "@tanstack/react-table": "^8.21.3", - "ajv": "^8.18.0", + "ajv": "^8.20.0", "clsx": "^2.1.1" }, "peerDependencies": { From ae2b5844eb266a72e7dcac0be6fab9400fc743cf Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 26 May 2026 22:34:58 -0700 Subject: [PATCH 038/133] [js] Update axios dependency (#27873) ## Reason Refreshes the Axios dependency used by the JS app workspaces. ## Overview Updates `axios` to `1.16.1` in `ops`, `site`, and `uma-bridge`. This also removes the stale root Axios resolution, so the normal dependency ranges now resolve the shared Axios entry for the direct apps and existing transitive parents. `follow-redirects` resolves to `1.16.0` through the updated Axios graph.
Related advisories - [CVE-2026-42044](https://www.cve.org/CVERecord?id=CVE-2026-42044) - [GHSA-3w6x-2g7m-8v23](https://github.com/advisories/GHSA-3w6x-2g7m-8v23) - [CVE-2026-42037](https://www.cve.org/CVERecord?id=CVE-2026-42037) - [GHSA-445q-vr5w-6q77](https://github.com/advisories/GHSA-445q-vr5w-6q77) - [CVE-2026-42034](https://www.cve.org/CVERecord?id=CVE-2026-42034) - [GHSA-5c9x-8gcm-mpgx](https://github.com/advisories/GHSA-5c9x-8gcm-mpgx) - [CVE-2026-42039](https://www.cve.org/CVERecord?id=CVE-2026-42039) - [GHSA-62hf-57xw-28j9](https://github.com/advisories/GHSA-62hf-57xw-28j9) - [CVE-2026-42035](https://www.cve.org/CVERecord?id=CVE-2026-42035) - [GHSA-6chq-wfr3-2hj9](https://github.com/advisories/GHSA-6chq-wfr3-2hj9) - [CVE-2026-42038](https://www.cve.org/CVERecord?id=CVE-2026-42038) - [GHSA-m7pr-hjqh-92cm](https://github.com/advisories/GHSA-m7pr-hjqh-92cm) - [CVE-2026-42033](https://www.cve.org/CVERecord?id=CVE-2026-42033) - [GHSA-pf86-5x62-jrwf](https://github.com/advisories/GHSA-pf86-5x62-jrwf) - [CVE-2026-42043](https://www.cve.org/CVERecord?id=CVE-2026-42043) - [GHSA-pmwg-cvhr-8vh7](https://github.com/advisories/GHSA-pmwg-cvhr-8vh7) - [CVE-2026-42264](https://www.cve.org/CVERecord?id=CVE-2026-42264) - [GHSA-q8qp-cvcw-x6jj](https://github.com/advisories/GHSA-q8qp-cvcw-x6jj) - [CVE-2026-42036](https://www.cve.org/CVERecord?id=CVE-2026-42036) - [GHSA-vf2m-468p-8v99](https://github.com/advisories/GHSA-vf2m-468p-8v99) - [CVE-2026-42040](https://www.cve.org/CVERecord?id=CVE-2026-42040) - [GHSA-xhjh-pmcv-23jw](https://github.com/advisories/GHSA-xhjh-pmcv-23jw) - [CVE-2026-42041](https://www.cve.org/CVERecord?id=CVE-2026-42041) - [GHSA-w9j2-pvgh-6h63](https://github.com/advisories/GHSA-w9j2-pvgh-6h63) - [CVE-2026-42042](https://www.cve.org/CVERecord?id=CVE-2026-42042) - [GHSA-xx6v-rp6x-q39c](https://github.com/advisories/GHSA-xx6v-rp6x-q39c) - [CVE-2025-27152](https://www.cve.org/CVERecord?id=CVE-2025-27152) - [GHSA-jr5f-v2jv-69x6](https://github.com/advisories/GHSA-jr5f-v2jv-69x6) - [CVE-2026-25639](https://www.cve.org/CVERecord?id=CVE-2026-25639) - [GHSA-43fc-jf86-j433](https://github.com/advisories/GHSA-43fc-jf86-j433) - [CVE-2025-62718](https://www.cve.org/CVERecord?id=CVE-2025-62718) - [GHSA-3p68-rc4w-qgx5](https://github.com/advisories/GHSA-3p68-rc4w-qgx5) - [CVE-2026-40175](https://www.cve.org/CVERecord?id=CVE-2026-40175) - [GHSA-fvcv-3m26-pcqx](https://github.com/advisories/GHSA-fvcv-3m26-pcqx) - [CVE-2025-58754](https://www.cve.org/CVERecord?id=CVE-2025-58754) - [GHSA-4hjh-wcwx-xvwj](https://github.com/advisories/GHSA-4hjh-wcwx-xvwj)
Related advisories - [CVE-2026-42035](https://www.cve.org/CVERecord?id=CVE-2026-42035) / [GHSA-6chq-wfr3-2hj9](https://github.com/advisories/GHSA-6chq-wfr3-2hj9) - [CVE-2026-42033](https://www.cve.org/CVERecord?id=CVE-2026-42033) / [GHSA-pf86-5x62-jrwf](https://github.com/advisories/GHSA-pf86-5x62-jrwf) - [CVE-2026-42043](https://www.cve.org/CVERecord?id=CVE-2026-42043) / [GHSA-pmwg-cvhr-8vh7](https://github.com/advisories/GHSA-pmwg-cvhr-8vh7) - [CVE-2026-42264](https://www.cve.org/CVERecord?id=CVE-2026-42264) / [GHSA-q8qp-cvcw-x6jj](https://github.com/advisories/GHSA-q8qp-cvcw-x6jj) - [CVE-2025-27152](https://www.cve.org/CVERecord?id=CVE-2025-27152) / [GHSA-jr5f-v2jv-69x6](https://github.com/advisories/GHSA-jr5f-v2jv-69x6) - [CVE-2026-25639](https://www.cve.org/CVERecord?id=CVE-2026-25639) / [GHSA-43fc-jf86-j433](https://github.com/advisories/GHSA-43fc-jf86-j433) - [CVE-2025-58754](https://www.cve.org/CVERecord?id=CVE-2025-58754) / [GHSA-4hjh-wcwx-xvwj](https://github.com/advisories/GHSA-4hjh-wcwx-xvwj)
## Test plan - `npm view axios version dependencies peerDependencies --json` - `yarn why axios` - `yarn why follow-redirects` - `yarn install --immutable` - `yarn deps:check` - `git diff --check` - `yarn why axios | rg 'axios@npm:1\\.(?:[0-9]|1[0-5])\\.' || true` - `yarn why follow-redirects | rg 'follow-redirects@npm:1\\.15\\.' || true` - `yarn turbo run build --filter=@lightsparkdev/site... --filter=@lightsparkdev/uma-bridge... --filter=@lightsparkdev/ops...` - pre-commit hook: `yarn install`, `yarn format` GitOrigin-RevId: d4755f63b2de034de975cb3b892685026a74b490 --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 781df2ed3..1b97e2a27 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,6 @@ } }, "resolutions": { - "axios": "1.7.7", "form-data": "4.0.5" }, "engines": { From 1508dc11c0114c814682c036f33e103eb04e567b Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Wed, 27 May 2026 05:40:18 +0000 Subject: [PATCH 039/133] CI update lock file for PR --- yarn.lock | 353 +++++++++++++++++++++++++++--------------------------- 1 file changed, 174 insertions(+), 179 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5af748c75..e88e77032 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1258,16 +1258,6 @@ __metadata: languageName: node linkType: hard -"@emnapi/core@npm:^1.7.1": - version: 1.9.1 - resolution: "@emnapi/core@npm:1.9.1" - dependencies: - "@emnapi/wasi-threads": "npm:1.2.0" - tslib: "npm:^2.4.0" - checksum: 10/c44cfe471702b43306b84d0f4f2f1506dac0065dbd73dc5a41bd99a2c39802ca7e2d7ebfbfae8997468d1ff0420603596bf35b19eabd5951bad1eb630d2d4574 - languageName: node - linkType: hard - "@emnapi/runtime@npm:1.10.0": version: 1.10.0 resolution: "@emnapi/runtime@npm:1.10.0" @@ -1277,24 +1267,6 @@ __metadata: languageName: node linkType: hard -"@emnapi/runtime@npm:^1.7.1": - version: 1.9.1 - resolution: "@emnapi/runtime@npm:1.9.1" - dependencies: - tslib: "npm:^2.4.0" - checksum: 10/337767fa44ec1f6277494342664be8773f16aad4086e9e49423a9f06c5eee7495e2e1b0b50dcd764c5a5cc4c15c9d80c13fba2da6763a97c06a48115cd7ccd14 - languageName: node - linkType: hard - -"@emnapi/wasi-threads@npm:1.2.0": - version: 1.2.0 - resolution: "@emnapi/wasi-threads@npm:1.2.0" - dependencies: - tslib: "npm:^2.4.0" - checksum: 10/c8e48c7200530744dc58170d2e25933b61433e4a0c50b4f192f5d8d4b065c7023dbfc48dac0afadbc29bd239013f2ae454c6e54e0ca6e8248402bf95c9e77e22 - languageName: node - linkType: hard - "@emnapi/wasi-threads@npm:1.2.1": version: 1.2.1 resolution: "@emnapi/wasi-threads@npm:1.2.1" @@ -2896,7 +2868,7 @@ __metadata: "@turnkey/api-key-stamper": "npm:^0.6.5" "@turnkey/crypto": "npm:^2.8.14" typescript: "npm:^5.6.2" - vite: "npm:^8.0.3" + vite: "npm:^8.0.14" languageName: unknown linkType: soft @@ -3020,7 +2992,7 @@ __metadata: react-router-dom: "npm:6.11.2" tsc-absolute: "npm:^1.0.1" typescript: "npm:^5.6.2" - vite: "npm:^8.0.3" + vite: "npm:^8.0.14" web-vitals: "npm:^3.3.0" languageName: unknown linkType: soft @@ -3073,7 +3045,7 @@ __metadata: "@types/react": "npm:^18.2.12" "@types/react-dom": "npm:^18.0.0" "@vitejs/plugin-react": "npm:^5.2.0" - ajv: "npm:^8.18.0" + ajv: "npm:^8.20.0" clsx: "npm:^2.1.1" dotenv: "npm:^16.3.1" eslint: "npm:^9.0.0" @@ -3090,7 +3062,7 @@ __metadata: stylelint: "npm:^17.1.1" stylelint-config-standard-scss: "npm:^17.0.0" typescript: "npm:^5.6.2" - vite: "npm:^8.0.3" + vite: "npm:^8.0.14" vitest: "npm:^3.1.4" peerDependencies: next: ">=13" @@ -3177,7 +3149,7 @@ __metadata: ts-jest: "npm:^29.1.1" tsc-absolute: "npm:^1.0.1" typescript: "npm:^5.6.2" - vite: "npm:^8.0.3" + vite: "npm:^8.0.14" languageName: unknown linkType: soft @@ -3307,7 +3279,7 @@ __metadata: dependencies: "@vitejs/plugin-react": "npm:^5.2.0" rollup-plugin-visualizer: "npm:^7.0.1" - vite: "npm:^8.0.3" + vite: "npm:^8.0.14" vite-plugin-svgr: "npm:^4.5.0" peerDependencies: "@vitejs/plugin-react": ">=5" @@ -3453,17 +3425,6 @@ __metadata: languageName: node linkType: hard -"@napi-rs/wasm-runtime@npm:^1.1.1": - version: 1.1.1 - resolution: "@napi-rs/wasm-runtime@npm:1.1.1" - dependencies: - "@emnapi/core": "npm:^1.7.1" - "@emnapi/runtime": "npm:^1.7.1" - "@tybys/wasm-util": "npm:^0.10.1" - checksum: 10/080e7f2aefb84e09884d21c650a2cbafdf25bfd2634693791b27e36eec0ddaa3c1656a943f8c913ac75879a0b04e68f8a827897ee655ab54a93169accf05b194 - languageName: node - linkType: hard - "@napi-rs/wasm-runtime@npm:^1.1.4": version: 1.1.4 resolution: "@napi-rs/wasm-runtime@npm:1.1.4" @@ -3973,13 +3934,6 @@ __metadata: languageName: node linkType: hard -"@oxc-project/types@npm:=0.122.0": - version: 0.122.0 - resolution: "@oxc-project/types@npm:0.122.0" - checksum: 10/2b33895c7701a595d10b9c7b0927222954becc4c6cbde7a7b582e9524828937368baacba1cbb6e3c33bc9a18e0a35435ffff6c53f511762ae872d55d3e993a8c - languageName: node - linkType: hard - "@oxc-project/types@npm:=0.127.0": version: 0.127.0 resolution: "@oxc-project/types@npm:0.127.0" @@ -3987,6 +3941,13 @@ __metadata: languageName: node linkType: hard +"@oxc-project/types@npm:=0.132.0": + version: 0.132.0 + resolution: "@oxc-project/types@npm:0.132.0" + checksum: 10/e0694a3c24746006ad774a1cab34efac3ccad5b519234063bcde17e9afe3475680749357e9f90164a222326414cb9510da1b8da350edc0cd35612fd05147c218 + languageName: node + linkType: hard + "@parcel/watcher-android-arm64@npm:2.5.6": version: 2.5.6 resolution: "@parcel/watcher-android-arm64@npm:2.5.6" @@ -4356,13 +4317,6 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-android-arm64@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-android-arm64@npm:1.0.0-rc.12" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - "@rolldown/binding-android-arm64@npm:1.0.0-rc.17": version: 1.0.0-rc.17 resolution: "@rolldown/binding-android-arm64@npm:1.0.0-rc.17" @@ -4370,10 +4324,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-darwin-arm64@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-darwin-arm64@npm:1.0.0-rc.12" - conditions: os=darwin & cpu=arm64 +"@rolldown/binding-android-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-android-arm64@npm:1.0.2" + conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -4384,10 +4338,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-darwin-x64@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-darwin-x64@npm:1.0.0-rc.12" - conditions: os=darwin & cpu=x64 +"@rolldown/binding-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -4398,10 +4352,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-freebsd-x64@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-freebsd-x64@npm:1.0.0-rc.12" - conditions: os=freebsd & cpu=x64 +"@rolldown/binding-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -4412,10 +4366,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.12" - conditions: os=linux & cpu=arm +"@rolldown/binding-freebsd-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-freebsd-x64@npm:1.0.2" + conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -4426,10 +4380,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.12" - conditions: os=linux & cpu=arm64 & libc=glibc +"@rolldown/binding-linux-arm-gnueabihf@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-arm-gnueabihf@npm:1.0.2" + conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -4440,10 +4394,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.12" - conditions: os=linux & cpu=arm64 & libc=musl +"@rolldown/binding-linux-arm64-gnu@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-arm64-gnu@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard @@ -4454,10 +4408,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.12" - conditions: os=linux & cpu=ppc64 & libc=glibc +"@rolldown/binding-linux-arm64-musl@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-arm64-musl@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard @@ -4468,10 +4422,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.12" - conditions: os=linux & cpu=s390x & libc=glibc +"@rolldown/binding-linux-ppc64-gnu@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-ppc64-gnu@npm:1.0.2" + conditions: os=linux & cpu=ppc64 & libc=glibc languageName: node linkType: hard @@ -4482,10 +4436,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.12" - conditions: os=linux & cpu=x64 & libc=glibc +"@rolldown/binding-linux-s390x-gnu@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-s390x-gnu@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc languageName: node linkType: hard @@ -4496,10 +4450,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.12" - conditions: os=linux & cpu=x64 & libc=musl +"@rolldown/binding-linux-x64-gnu@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-x64-gnu@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard @@ -4510,10 +4464,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.12" - conditions: os=openharmony & cpu=arm64 +"@rolldown/binding-linux-x64-musl@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-linux-x64-musl@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard @@ -4524,12 +4478,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.12" - dependencies: - "@napi-rs/wasm-runtime": "npm:^1.1.1" - conditions: cpu=wasm32 +"@rolldown/binding-openharmony-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-openharmony-arm64@npm:1.0.2" + conditions: os=openharmony & cpu=arm64 languageName: node linkType: hard @@ -4544,10 +4496,14 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.12" - conditions: os=win32 & cpu=arm64 +"@rolldown/binding-wasm32-wasi@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-wasm32-wasi@npm:1.0.2" + dependencies: + "@emnapi/core": "npm:1.10.0" + "@emnapi/runtime": "npm:1.10.0" + "@napi-rs/wasm-runtime": "npm:^1.1.4" + conditions: cpu=wasm32 languageName: node linkType: hard @@ -4558,10 +4514,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.12" - conditions: os=win32 & cpu=x64 +"@rolldown/binding-win32-arm64-msvc@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-win32-arm64-msvc@npm:1.0.2" + conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -4572,6 +4528,13 @@ __metadata: languageName: node linkType: hard +"@rolldown/binding-win32-x64-msvc@npm:1.0.2": + version: 1.0.2 + resolution: "@rolldown/binding-win32-x64-msvc@npm:1.0.2" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@rolldown/pluginutils@npm:1.0.0-beta.27": version: 1.0.0-beta.27 resolution: "@rolldown/pluginutils@npm:1.0.0-beta.27" @@ -4579,13 +4542,6 @@ __metadata: languageName: node linkType: hard -"@rolldown/pluginutils@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "@rolldown/pluginutils@npm:1.0.0-rc.12" - checksum: 10/6ce1601849b3095a2b6e57074c1f8a661eba67ebf65cf9afdf894d903302318247ddb69ab6cbc621e7f582408af301ea0523ed59ddb9a4ef3ea97f3d7002683e - languageName: node - linkType: hard - "@rolldown/pluginutils@npm:1.0.0-rc.17": version: 1.0.0-rc.17 resolution: "@rolldown/pluginutils@npm:1.0.0-rc.17" @@ -4600,6 +4556,13 @@ __metadata: languageName: node linkType: hard +"@rolldown/pluginutils@npm:^1.0.0": + version: 1.0.1 + resolution: "@rolldown/pluginutils@npm:1.0.1" + checksum: 10/4e95cf9ce23d75e5aa03ea0249cd86f7d1e21f83fbf6f8520e4edd8a251ba1b82c4ba9bc13cd24b6c4661daec6225b06e6d35c64c604e731b230b2a49af47d05 + languageName: node + linkType: hard + "@rollup/plugin-url@npm:^8.0.2": version: 8.0.2 resolution: "@rollup/plugin-url@npm:8.0.2" @@ -6676,7 +6639,7 @@ __metadata: languageName: node linkType: hard -"ajv@npm:^8.0.1, ajv@npm:^8.18.0": +"ajv@npm:^8.0.1": version: 8.18.0 resolution: "ajv@npm:8.18.0" dependencies: @@ -6688,6 +6651,18 @@ __metadata: languageName: node linkType: hard +"ajv@npm:^8.20.0": + version: 8.20.0 + resolution: "ajv@npm:8.20.0" + dependencies: + fast-deep-equal: "npm:^3.1.3" + fast-uri: "npm:^3.0.1" + json-schema-traverse: "npm:^1.0.0" + require-from-string: "npm:^2.0.2" + checksum: 10/5ce59c0537f4c2aca9a758b412659ec70acb4d5dde971c10ecf21d2e3d799f99acdb4a08e1f5fb2e067c8542930398aae793bb996bb07d3feb81dae22fe2ada9 + languageName: node + linkType: hard + "ajv@npm:~8.13.0": version: 8.13.0 resolution: "ajv@npm:8.13.0" @@ -14065,6 +14040,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^3.3.12": + version: 3.3.12 + resolution: "nanoid@npm:3.3.12" + bin: + nanoid: bin/nanoid.cjs + checksum: 10/6eec280694e2088d18fb802b1e3bfc4578e27b665b7ecfbe36c7356612fea2f814277056e671e2a1529dff551588a652efdc0bfa39f8a3185bc2247be311872e + languageName: node + linkType: hard + "nanoid@npm:^3.3.6": version: 3.3.7 resolution: "nanoid@npm:3.3.7" @@ -15088,6 +15072,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.5.15": + version: 8.5.15 + resolution: "postcss@npm:8.5.15" + dependencies: + nanoid: "npm:^3.3.12" + picocolors: "npm:^1.1.1" + source-map-js: "npm:^1.2.1" + checksum: 10/d02ad19eb1e0fa53a1229ee6d53807eb88f903f2b9a8cac66993367f3ac7dd3b97238c783a54ccbf4145f82f6ca9a5cbd58f089846285d759c8a3259fbea8318 + languageName: node + linkType: hard + "postcss@npm:^8.5.3, postcss@npm:^8.5.6, postcss@npm:^8.5.8": version: 8.5.8 resolution: "postcss@npm:8.5.8" @@ -16144,27 +16139,27 @@ __metadata: languageName: node linkType: hard -"rolldown@npm:1.0.0-rc.12": - version: 1.0.0-rc.12 - resolution: "rolldown@npm:1.0.0-rc.12" - dependencies: - "@oxc-project/types": "npm:=0.122.0" - "@rolldown/binding-android-arm64": "npm:1.0.0-rc.12" - "@rolldown/binding-darwin-arm64": "npm:1.0.0-rc.12" - "@rolldown/binding-darwin-x64": "npm:1.0.0-rc.12" - "@rolldown/binding-freebsd-x64": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-arm64-gnu": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-arm64-musl": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-s390x-gnu": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-x64-gnu": "npm:1.0.0-rc.12" - "@rolldown/binding-linux-x64-musl": "npm:1.0.0-rc.12" - "@rolldown/binding-openharmony-arm64": "npm:1.0.0-rc.12" - "@rolldown/binding-wasm32-wasi": "npm:1.0.0-rc.12" - "@rolldown/binding-win32-arm64-msvc": "npm:1.0.0-rc.12" - "@rolldown/binding-win32-x64-msvc": "npm:1.0.0-rc.12" - "@rolldown/pluginutils": "npm:1.0.0-rc.12" +"rolldown@npm:1.0.0-rc.17": + version: 1.0.0-rc.17 + resolution: "rolldown@npm:1.0.0-rc.17" + dependencies: + "@oxc-project/types": "npm:=0.127.0" + "@rolldown/binding-android-arm64": "npm:1.0.0-rc.17" + "@rolldown/binding-darwin-arm64": "npm:1.0.0-rc.17" + "@rolldown/binding-darwin-x64": "npm:1.0.0-rc.17" + "@rolldown/binding-freebsd-x64": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-arm64-gnu": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-arm64-musl": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-s390x-gnu": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-x64-gnu": "npm:1.0.0-rc.17" + "@rolldown/binding-linux-x64-musl": "npm:1.0.0-rc.17" + "@rolldown/binding-openharmony-arm64": "npm:1.0.0-rc.17" + "@rolldown/binding-wasm32-wasi": "npm:1.0.0-rc.17" + "@rolldown/binding-win32-arm64-msvc": "npm:1.0.0-rc.17" + "@rolldown/binding-win32-x64-msvc": "npm:1.0.0-rc.17" + "@rolldown/pluginutils": "npm:1.0.0-rc.17" dependenciesMeta: "@rolldown/binding-android-arm64": optional: true @@ -16198,31 +16193,31 @@ __metadata: optional: true bin: rolldown: bin/cli.mjs - checksum: 10/b8cc0d9df80b495a57b63d69a16a5566c600162046edd407f335a6d27e5b6618a2d88d63e82c4e77a1447d18edcc6900696e041c33236ef38ab51d33cf5da2fe + checksum: 10/5e7415a7cb732c4f7168ab6dcc841ed9ec4ad614058294a53d94821a762c274a69b009e41e9c8e4983a059907f02d462030a36b42543c0f41ce702fcd68d10d5 languageName: node linkType: hard -"rolldown@npm:1.0.0-rc.17": - version: 1.0.0-rc.17 - resolution: "rolldown@npm:1.0.0-rc.17" - dependencies: - "@oxc-project/types": "npm:=0.127.0" - "@rolldown/binding-android-arm64": "npm:1.0.0-rc.17" - "@rolldown/binding-darwin-arm64": "npm:1.0.0-rc.17" - "@rolldown/binding-darwin-x64": "npm:1.0.0-rc.17" - "@rolldown/binding-freebsd-x64": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-arm64-gnu": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-arm64-musl": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-s390x-gnu": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-x64-gnu": "npm:1.0.0-rc.17" - "@rolldown/binding-linux-x64-musl": "npm:1.0.0-rc.17" - "@rolldown/binding-openharmony-arm64": "npm:1.0.0-rc.17" - "@rolldown/binding-wasm32-wasi": "npm:1.0.0-rc.17" - "@rolldown/binding-win32-arm64-msvc": "npm:1.0.0-rc.17" - "@rolldown/binding-win32-x64-msvc": "npm:1.0.0-rc.17" - "@rolldown/pluginutils": "npm:1.0.0-rc.17" +"rolldown@npm:1.0.2": + version: 1.0.2 + resolution: "rolldown@npm:1.0.2" + dependencies: + "@oxc-project/types": "npm:=0.132.0" + "@rolldown/binding-android-arm64": "npm:1.0.2" + "@rolldown/binding-darwin-arm64": "npm:1.0.2" + "@rolldown/binding-darwin-x64": "npm:1.0.2" + "@rolldown/binding-freebsd-x64": "npm:1.0.2" + "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.2" + "@rolldown/binding-linux-arm64-gnu": "npm:1.0.2" + "@rolldown/binding-linux-arm64-musl": "npm:1.0.2" + "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.2" + "@rolldown/binding-linux-s390x-gnu": "npm:1.0.2" + "@rolldown/binding-linux-x64-gnu": "npm:1.0.2" + "@rolldown/binding-linux-x64-musl": "npm:1.0.2" + "@rolldown/binding-openharmony-arm64": "npm:1.0.2" + "@rolldown/binding-wasm32-wasi": "npm:1.0.2" + "@rolldown/binding-win32-arm64-msvc": "npm:1.0.2" + "@rolldown/binding-win32-x64-msvc": "npm:1.0.2" + "@rolldown/pluginutils": "npm:^1.0.0" dependenciesMeta: "@rolldown/binding-android-arm64": optional: true @@ -16255,8 +16250,8 @@ __metadata: "@rolldown/binding-win32-x64-msvc": optional: true bin: - rolldown: bin/cli.mjs - checksum: 10/5e7415a7cb732c4f7168ab6dcc841ed9ec4ad614058294a53d94821a762c274a69b009e41e9c8e4983a059907f02d462030a36b42543c0f41ce702fcd68d10d5 + rolldown: ./bin/cli.mjs + checksum: 10/2e51f0b2332eef4001262dad360886ca11376558ce270fbddad6182870395200b123ad75d412e60cb4328650d1df2cb74ae374e79edf930c030bfb693c9b1891 languageName: node linkType: hard @@ -18978,20 +18973,20 @@ __metadata: languageName: node linkType: hard -"vite@npm:^8.0.3": - version: 8.0.3 - resolution: "vite@npm:8.0.3" +"vite@npm:^8.0.14": + version: 8.0.14 + resolution: "vite@npm:8.0.14" dependencies: fsevents: "npm:~2.3.3" lightningcss: "npm:^1.32.0" picomatch: "npm:^4.0.4" - postcss: "npm:^8.5.8" - rolldown: "npm:1.0.0-rc.12" - tinyglobby: "npm:^0.2.15" + postcss: "npm:^8.5.15" + rolldown: "npm:1.0.2" + tinyglobby: "npm:^0.2.16" peerDependencies: "@types/node": ^20.19.0 || >=22.12.0 - "@vitejs/devtools": ^0.1.0 - esbuild: ^0.27.0 + "@vitejs/devtools": ^0.1.18 + esbuild: ^0.27.0 || ^0.28.0 jiti: ">=1.21.0" less: ^4.0.0 sass: ^1.70.0 @@ -19031,7 +19026,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10/745b791cb71297ac3877af061da44751d93f198413426bbb76a1f8384d76d4162a6ad739b2bcdf5fb966cd1295db59412614aee60738e40e1c99cee561e682f0 + checksum: 10/3747c9b9dabdfa5b840630c39b2c764afb3c3762816f3148afe7d516edc1889b60b666adeb4e98761c26fb8ed5ba3a9770df5c0450443daf4cdfac110bc6df1c languageName: node linkType: hard From b17529c4e876911ac7c0d9f17c26edd45d316d63 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Wed, 27 May 2026 08:13:25 -0700 Subject: [PATCH 040/133] [js] Update react-router-dom dependency (#27861) ## Overview Updates the `react-router-dom` 6.x pins from `6.11.2` to `6.30.3` across the six workspace consumers. This keeps the repo on React Router 6 while moving the bundled router package to `@remix-run/router@1.23.2`.
Related advisories - [CVE-2026-22029](https://www.cve.org/CVERecord?id=CVE-2026-22029) - [GHSA-2w69-qvjg-hvjx](https://github.com/advisories/GHSA-2w69-qvjg-hvjx)
Related advisories - [CVE-2026-22029](https://www.cve.org/CVERecord?id=CVE-2026-22029) / [GHSA-2w69-qvjg-hvjx](https://github.com/advisories/GHSA-2w69-qvjg-hvjx)
## Test plan - `npm view @remix-run/router version` - `npm view react-router-dom@6 version dependencies.@remix-run/router dependencies.react-router --json` - `yarn why @remix-run/router` - `yarn why react-router-dom` - `yarn install --immutable` - `yarn deps:check` - `git diff --check` - `yarn why @remix-run/router | rg '@remix-run/router@npm:1\\.(?:[0-9]|1[0-9]|2[0-2])\\.|@remix-run/router@npm:1\\.23\\.[01]' || true` - `yarn turbo run types --filter=@lightsparkdev/ui --filter=@lightsparkdev/ops --filter=@lightsparkdev/site --filter=@lightsparkdev/uma-bridge --filter=@lightsparkdev/ui-test-app --filter=@lightsparkdev/oauth-app` - pre-commit hook: `yarn install`, `yarn format` GitOrigin-RevId: d5f121e59b1ee7e6a2a69e92764f56d46878056d --- apps/examples/oauth-app/package.json | 2 +- apps/examples/ui-test-app/package.json | 2 +- packages/ui/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json index 715591327..e297b77c2 100644 --- a/apps/examples/oauth-app/package.json +++ b/apps/examples/oauth-app/package.json @@ -11,7 +11,7 @@ "@lightsparkdev/ui": "1.1.19", "react": "^18.2.0", "react-dom": "^18.1.0", - "react-router-dom": "6.11.2", + "react-router-dom": "6.30.3", "web-vitals": "^3.3.0" }, "devDependencies": { diff --git a/apps/examples/ui-test-app/package.json b/apps/examples/ui-test-app/package.json index 0f1990739..ee4380f01 100644 --- a/apps/examples/ui-test-app/package.json +++ b/apps/examples/ui-test-app/package.json @@ -33,7 +33,7 @@ "@lightsparkdev/ui": "1.1.19", "react": "^18.2.0", "react-dom": "^18.1.0", - "react-router-dom": "6.11.2" + "react-router-dom": "6.30.3" }, "devDependencies": { "@babel/core": "^7.21.4", diff --git a/packages/ui/package.json b/packages/ui/package.json index fe6fbf360..fda716f03 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -126,7 +126,7 @@ "react-datetime-picker": "^5.6.0", "react-device-detect": "^2.2.3", "react-dom": "^18.1.0", - "react-router-dom": "6.11.2", + "react-router-dom": "6.30.3", "react-select": "^5.4.0", "react-tooltip": "^5.10.1", "uuid": "^9.0.0" From 37493d8dd111c39dd2c80c5402a50c5ae9b820c3 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Wed, 27 May 2026 16:48:11 +0000 Subject: [PATCH 041/133] CI update lock file for PR --- yarn.lock | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index e88e77032..2aec0a70f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2989,7 +2989,7 @@ __metadata: prettier-plugin-organize-imports: "npm:^3.2.4" react: "npm:^18.2.0" react-dom: "npm:^18.1.0" - react-router-dom: "npm:6.11.2" + react-router-dom: "npm:6.30.3" tsc-absolute: "npm:^1.0.1" typescript: "npm:^5.6.2" vite: "npm:^8.0.14" @@ -3144,7 +3144,7 @@ __metadata: prettier-plugin-organize-imports: "npm:^3.2.4" react: "npm:^18.2.0" react-dom: "npm:^18.1.0" - react-router-dom: "npm:6.11.2" + react-router-dom: "npm:6.30.3" resize-observer-polyfill: "npm:^1.5.1" ts-jest: "npm:^29.1.1" tsc-absolute: "npm:^1.0.1" @@ -3208,7 +3208,7 @@ __metadata: react-datetime-picker: "npm:^5.6.0" react-device-detect: "npm:^2.2.3" react-dom: "npm:^18.1.0" - react-router-dom: "npm:6.11.2" + react-router-dom: "npm:6.30.3" react-select: "npm:^5.4.0" react-tooltip: "npm:^5.10.1" ts-jest: "npm:^29.1.1" @@ -4310,10 +4310,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.6.2": - version: 1.6.2 - resolution: "@remix-run/router@npm:1.6.2" - checksum: 10/c261c3b52f08d7fcacce9c66d68dba3b6f0c8263ea15f69f9f1c89734685cdfe4f383c879324acade68cb331d48e3deca9ec00734abe08d9694e529096907f40 +"@remix-run/router@npm:1.23.2": + version: 1.23.2 + resolution: "@remix-run/router@npm:1.23.2" + checksum: 10/50eb497854881bbd2e1016d4eb83c935ecd618e1c3888b74718851317e3b04edbaae9fe1baa49ec08c5c52cfe7118f4664e37144813d9500f45f922d6602a782 languageName: node linkType: hard @@ -15653,27 +15653,27 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:6.11.2": - version: 6.11.2 - resolution: "react-router-dom@npm:6.11.2" +"react-router-dom@npm:6.30.3": + version: 6.30.3 + resolution: "react-router-dom@npm:6.30.3" dependencies: - "@remix-run/router": "npm:1.6.2" - react-router: "npm:6.11.2" + "@remix-run/router": "npm:1.23.2" + react-router: "npm:6.30.3" peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 10/85575793cbdb84b05e9c33fef6f81e6b09e9f2606d2ba03392f83689dbb240212e5b22634b95049fc19364e9b44d45a519387d1bff4eba8a163548aa3376bc0f + checksum: 10/db974d801070e9967a076b31edca902e127793e02dc79f364461b94e81846a588c241d72e069f5b586b4a90ffd99798f5cb97753ac9d22fe90afa6dc008ab520 languageName: node linkType: hard -"react-router@npm:6.11.2": - version: 6.11.2 - resolution: "react-router@npm:6.11.2" +"react-router@npm:6.30.3": + version: 6.30.3 + resolution: "react-router@npm:6.30.3" dependencies: - "@remix-run/router": "npm:1.6.2" + "@remix-run/router": "npm:1.23.2" peerDependencies: react: ">=16.8" - checksum: 10/a40d1ea78e3b5b3167ed6cbaf74b2e60592fd1822b9f94a2499933bf699130a81f669bc06bdf34f38489a96d31510848c21254a48e49038b18ecbf42993eaa34 + checksum: 10/1a51bdcc42b8d7979228dea8b5c44a28a4add9b681781f75b74f5f920d20058a92ffe5f1d0ba0621f03abe1384b36025b53b402515ecb35f27a6a2f2f25d6fbe languageName: node linkType: hard From 729ded54002d8eed0add69649b2d46b0be417726 Mon Sep 17 00:00:00 2001 From: Jeremy Klein Date: Wed, 27 May 2026 17:01:37 -0700 Subject: [PATCH 042/133] DEMO(grid): add internal demo app for hosted KYC/KYB link API (#27615) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Single-page Vite app under `js/apps/examples/grid-kyc-demo/` that exercises `POST /customers` + `POST /customers/{id}/kyc-link` end-to-end. Internal demo only — not a public tool. ## Why We have the hosted KYC/KYB link API but no quick way to exercise it end-to-end for internal testing or partner walkthroughs. This app fills that gap without needing a backend. ## What you get - **Credentials at startup**, persisted in `sessionStorage` only — keys never touch a server. - **Environment switcher** (prod / dev), per-env credential storage so prod and dev keys don't get mixed up. - **Customer-type toggle** drives either the INDIVIDUAL (KYC) or BUSINESS (KYB) create payload, then generates the hosted link from `/kyc-link`. - **Result panel** surfaces the `kycUrl` with Open / Copy buttons and shows the provider token (informational — embedded SDK flow is a follow-up). - Optional `GET /customers/{id}` button to poll `kycStatus` / `kybStatus`. - All calls go through Vite's `/api/` proxy → `api.lightspark.com/grid/2025-10-13` or `api.dev.dev.sparkinfra.net/grid/rc`. ## Test plan - `cd js/apps/examples/grid-kyc-demo && yarn dev` → loads on `http://localhost:3107`. - Toggle INDIVIDUAL ↔ BUSINESS → field set switches. - "Test Auth" with bogus creds → real `HTTP 401` from each env (proxy wiring confirmed end-to-end against both prod and dev). - Full flow against dev: create customer → generate KYC link → open hosted URL → complete the flow → fetch customer status returns `PENDING`/`APPROVED`. GitOrigin-RevId: 74d7ce34b32361976fb1ea4e39ccd226872b85a7 --- apps/examples/grid-kyc-demo/README.md | 47 + apps/examples/grid-kyc-demo/index.html | 12 + apps/examples/grid-kyc-demo/package.json | 25 + apps/examples/grid-kyc-demo/public/fonts | 1 + apps/examples/grid-kyc-demo/src/App.tsx | 1188 +++++++++++++++++ apps/examples/grid-kyc-demo/src/api.ts | 110 ++ .../grid-kyc-demo/src/declarations.d.ts | 15 + apps/examples/grid-kyc-demo/src/main.tsx | 14 + apps/examples/grid-kyc-demo/tsconfig.json | 16 + apps/examples/grid-kyc-demo/vite.config.ts | 46 + apps/examples/settings.json | 3 + 11 files changed, 1477 insertions(+) create mode 100644 apps/examples/grid-kyc-demo/README.md create mode 100644 apps/examples/grid-kyc-demo/index.html create mode 100644 apps/examples/grid-kyc-demo/package.json create mode 120000 apps/examples/grid-kyc-demo/public/fonts create mode 100644 apps/examples/grid-kyc-demo/src/App.tsx create mode 100644 apps/examples/grid-kyc-demo/src/api.ts create mode 100644 apps/examples/grid-kyc-demo/src/declarations.d.ts create mode 100644 apps/examples/grid-kyc-demo/src/main.tsx create mode 100644 apps/examples/grid-kyc-demo/tsconfig.json create mode 100644 apps/examples/grid-kyc-demo/vite.config.ts diff --git a/apps/examples/grid-kyc-demo/README.md b/apps/examples/grid-kyc-demo/README.md new file mode 100644 index 000000000..890c3c763 --- /dev/null +++ b/apps/examples/grid-kyc-demo/README.md @@ -0,0 +1,47 @@ +# grid-kyc-demo + +Internal demo tool for exercising the Grid hosted KYC/KYB link API end-to-end. +Single-page Vite + React app, no backend. Credentials are entered at the top +and live only in this tab's `sessionStorage`. + +## What it does + +- **Create a customer** via `POST /customers` (INDIVIDUAL or BUSINESS). +- **Generate a hosted KYC link** via `POST /customers/{id}/kyc-link` and open it + in a new tab. +- **Poll customer status** via `GET /customers/{id}` so you can watch + `kycStatus` / `kybStatus` flip after the hosted flow completes. + +Every request and response is appended to a rolling log at the bottom of the +page so you can see exactly what's going over the wire. + +## Run it locally + +```bash +cd js/apps/examples/grid-kyc-demo +yarn dev +``` + +Opens on . + +The Vite dev server proxies API calls to one of three environments — pick from +the **Environment** dropdown in the UI: + +| Env | Target | +| ----- | --------------------------------------------------------- | +| prod | `https://api.lightspark.com/grid/2025-10-13` | +| dev | `https://api.dev.dev.sparkinfra.net/grid/rc` | +| local | `http://localhost:5000/grid/rc` (sparkcore on port 5000) | + +Credentials are stored under `grid-kyc-demo:creds:` so prod and dev keys +don't get mixed up. Switching env swaps the visible credential pair. + +## Tips + +- The platform you're calling against needs `customer_kyc_mode = GRID_SWITCH_OWNED` + on at least one of its currencies, otherwise grid auto-approves new customers + on creation and the link flow has nothing to do. +- For INDIVIDUAL customers on the LSP grid switch, the + `LSP_INDIVIDUAL_KYC_ENABLED` gatekeeper also has to be on for the platform. +- The redirect URI must be `https://` — Sumsub rejects `http://` and localhost. + Leave the field blank to use Sumsub's default post-flow page. diff --git a/apps/examples/grid-kyc-demo/index.html b/apps/examples/grid-kyc-demo/index.html new file mode 100644 index 000000000..ab1c471e8 --- /dev/null +++ b/apps/examples/grid-kyc-demo/index.html @@ -0,0 +1,12 @@ + + + + + + Grid KYC/KYB Demo + + +
+ + + diff --git a/apps/examples/grid-kyc-demo/package.json b/apps/examples/grid-kyc-demo/package.json new file mode 100644 index 000000000..b63b274a3 --- /dev/null +++ b/apps/examples/grid-kyc-demo/package.json @@ -0,0 +1,25 @@ +{ + "name": "@lightsparkdev/grid-kyc-demo", + "private": true, + "version": "0.0.1", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "start": "vite", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@lightsparkdev/origin": "*", + "react": "^18.2.0", + "react-dom": "^18.1.0" + }, + "devDependencies": { + "@types/react": "^18.2.12", + "@types/react-dom": "^18.0.0", + "@vitejs/plugin-react": "^5.2.0", + "typescript": "^5.6.2", + "vite": "^8.0.3" + } +} diff --git a/apps/examples/grid-kyc-demo/public/fonts b/apps/examples/grid-kyc-demo/public/fonts new file mode 120000 index 000000000..7bf131b0d --- /dev/null +++ b/apps/examples/grid-kyc-demo/public/fonts @@ -0,0 +1 @@ +../../../../packages/origin/public/fonts \ No newline at end of file diff --git a/apps/examples/grid-kyc-demo/src/App.tsx b/apps/examples/grid-kyc-demo/src/App.tsx new file mode 100644 index 000000000..79eb60519 --- /dev/null +++ b/apps/examples/grid-kyc-demo/src/App.tsx @@ -0,0 +1,1188 @@ +import styled from "@emotion/styled"; +import { + Alert, + Badge, + Button, + Card, + Field, + Input, + Select, + Textarea, +} from "@lightsparkdev/origin"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; + +import { + callGrid, + ENV_LABELS, + nowTs, + randomSuffix, + type CustomerCreateResponse, + type GridCredentials, + type GridEnv, + type KycLinkResponse, + type LogEntry, +} from "./api"; + +type CustomerType = "INDIVIDUAL" | "BUSINESS"; +type Status = { kind: "ok" | "err"; message: string } | null; + +const ENV_STORAGE_KEY = "grid-kyc-demo:env"; +const CREDS_STORAGE_KEY_PREFIX = "grid-kyc-demo:creds:"; + +const ENTITY_TYPES = [ + "SOLE_PROPRIETORSHIP", + "PARTNERSHIP", + "LLC", + "CORPORATION", + "S_CORPORATION", + "NON_PROFIT", + "OTHER", +] as const; + +const BUSINESS_TYPES = [ + "AGRICULTURE_FORESTRY_FISHING_AND_HUNTING", + "MINING_QUARRYING_AND_OIL_AND_GAS_EXTRACTION", + "UTILITIES", + "CONSTRUCTION", + "MANUFACTURING", + "WHOLESALE_TRADE", + "RETAIL_TRADE", + "TRANSPORTATION_AND_WAREHOUSING", + "INFORMATION", + "FINANCE_AND_INSURANCE", + "REAL_ESTATE_AND_RENTAL_AND_LEASING", + "PROFESSIONAL_SCIENTIFIC_AND_TECHNICAL_SERVICES", + "MANAGEMENT_OF_COMPANIES_AND_ENTERPRISES", + "ADMINISTRATIVE_AND_SUPPORT_AND_WASTE_MANAGEMENT_AND_REMEDIATION_SERVICES", + "EDUCATIONAL_SERVICES", + "HEALTH_CARE_AND_SOCIAL_ASSISTANCE", + "ARTS_ENTERTAINMENT_AND_RECREATION", + "ACCOMMODATION_AND_FOOD_SERVICES", + "OTHER_SERVICES", + "PUBLIC_ADMINISTRATION", +] as const; + +const PURPOSE_OF_ACCOUNT = [ + "CONTRACTOR_PAYOUTS", + "CREATOR_PAYOUTS", + "EMPLOYEE_PAYOUTS", + "MARKETPLACE_SELLER_PAYOUTS", + "SUPPLIER_PAYMENTS", + "CROSS_BORDER_B2B", + "AR_AUTOMATION", + "AP_AUTOMATION", + "EMBEDDED_PAYMENTS", + "PLATFORM_FEE_COLLECTION", + "P2P_TRANSFERS", + "CHARITABLE_DONATIONS", + "OTHER", +] as const; + +const TX_COUNT = [ + "COUNT_UNDER_10", + "COUNT_10_TO_100", + "COUNT_100_TO_500", + "COUNT_500_TO_1000", + "COUNT_OVER_1000", +] as const; + +const TX_VOLUME = [ + "VOLUME_UNDER_10K", + "VOLUME_10K_TO_100K", + "VOLUME_100K_TO_1M", + "VOLUME_1M_TO_10M", + "VOLUME_OVER_10M", +] as const; + +interface IndividualForm { + platformCustomerId: string; + region: string; + fullName: string; + birthDate: string; + nationality: string; + email: string; + currencies: string; +} + +interface BusinessForm { + platformCustomerId: string; + region: string; + currencies: string; + legalName: string; + doingBusinessAs: string; + country: string; + registrationNumber: string; + incorporatedOn: string; + entityType: string; + taxId: string; + countriesOfOperation: string; + businessType: string; + purposeOfAccount: string; + sourceOfFunds: string; + txCount: string; + txVolume: string; + recipientJurisdictions: string; + addrLine1: string; + addrLine2: string; + addrCity: string; + addrState: string; + addrPostal: string; + addrCountry: string; +} + +function defaultIndividual(): IndividualForm { + return { + platformCustomerId: `ind-${randomSuffix()}`, + region: "US", + fullName: "Jane Smith", + birthDate: "1990-01-15", + nationality: "US", + email: "", + currencies: "USD,USDC", + }; +} + +function defaultBusiness(): BusinessForm { + return { + platformCustomerId: `biz-${randomSuffix()}`, + region: "US", + currencies: "USD,USDC", + legalName: "Acme Corporation", + doingBusinessAs: "Acme", + country: "US", + registrationNumber: "5523041", + incorporatedOn: "2018-03-14", + entityType: "LLC", + taxId: "47-1234567", + countriesOfOperation: "US", + businessType: "INFORMATION", + purposeOfAccount: "CONTRACTOR_PAYOUTS", + sourceOfFunds: "Funds derived from customer payments for software services", + txCount: "COUNT_100_TO_500", + txVolume: "VOLUME_100K_TO_1M", + recipientJurisdictions: "US,MX", + addrLine1: "123 Market Street", + addrLine2: "Suite 400", + addrCity: "San Francisco", + addrState: "CA", + addrPostal: "94105", + addrCountry: "US", + }; +} + +function splitCsv(value: string): string[] { + return value + .split(",") + .map((s) => s.trim()) + .filter(Boolean); +} + +function buildIndividualPayload(form: IndividualForm): Record { + const currencies = splitCsv(form.currencies); + const payload: Record = { + customerType: "INDIVIDUAL", + platformCustomerId: form.platformCustomerId.trim(), + region: form.region.trim(), + fullName: form.fullName.trim(), + birthDate: form.birthDate, + nationality: form.nationality.trim(), + }; + if (currencies.length) payload.currencies = currencies; + if (form.email.trim()) payload.email = form.email.trim(); + return payload; +} + +function buildBusinessPayload(form: BusinessForm): Record { + const currencies = splitCsv(form.currencies); + const businessInfo: Record = { + legalName: form.legalName.trim(), + country: form.country.trim(), + registrationNumber: form.registrationNumber.trim(), + incorporatedOn: form.incorporatedOn, + entityType: form.entityType, + taxId: form.taxId.trim(), + countriesOfOperation: splitCsv(form.countriesOfOperation), + businessType: form.businessType, + purposeOfAccount: form.purposeOfAccount, + sourceOfFunds: form.sourceOfFunds.trim(), + expectedMonthlyTransactionCount: form.txCount, + expectedMonthlyTransactionVolume: form.txVolume, + expectedRecipientJurisdictions: splitCsv(form.recipientJurisdictions), + }; + if (form.doingBusinessAs.trim()) + businessInfo.doingBusinessAs = form.doingBusinessAs.trim(); + + const address: Record = { + line1: form.addrLine1.trim(), + city: form.addrCity.trim(), + state: form.addrState.trim(), + postalCode: form.addrPostal.trim(), + country: form.addrCountry.trim(), + }; + if (form.addrLine2.trim()) address.line2 = form.addrLine2.trim(); + + const payload: Record = { + customerType: "BUSINESS", + platformCustomerId: form.platformCustomerId.trim(), + region: form.region.trim(), + businessInfo, + address, + }; + if (currencies.length) payload.currencies = currencies; + return payload; +} + +export function App() { + const [env, setEnv] = useState(envInitial); + const [creds, setCreds] = useState(() => + loadCreds(envInitial()), + ); + const [customerType, setCustomerType] = useState("INDIVIDUAL"); + const [individual, setIndividual] = useState( + defaultIndividual, + ); + const [business, setBusiness] = useState(defaultBusiness); + const [customerId, setCustomerId] = useState(""); + const [redirectUri, setRedirectUri] = useState(""); + const [kycLink, setKycLink] = useState(null); + + const [pingStatus, setPingStatus] = useState(null); + const [createStatus, setCreateStatus] = useState(null); + const [linkStatus, setLinkStatus] = useState(null); + const [fetchStatus, setFetchStatus] = useState(null); + + const [log, setLog] = useState([]); + const logIdRef = useRef(0); + + // Persist env across reloads; swap creds when env changes. + useEffect(() => { + sessionStorage.setItem(ENV_STORAGE_KEY, env); + setCreds(loadCreds(env)); + }, [env]); + + // Persist creds synchronously when the user edits them. We can't run this + // through a `[creds, env]` effect: that fires once with (oldCreds, newEnv) + // mid-transition during an env switch, briefly writing the previous + // env's credentials into the new env's storage slot before the next + // render corrects it. Driving the write from the input handlers and + // `onClearCreds` keeps persistence in lockstep with the action that + // caused it, and the env-swap effect above owns its own loadCreds + // round-trip. + const persistCreds = useCallback( + (next: GridCredentials) => { + const id = next.id.trim(); + const secret = next.secret.trim(); + const key = CREDS_STORAGE_KEY_PREFIX + env; + if (!id && !secret) sessionStorage.removeItem(key); + else sessionStorage.setItem(key, JSON.stringify({ id, secret })); + }, + [env], + ); + + const appendLog = useCallback((entry: Omit) => { + const id = ++logIdRef.current; + setLog((prev) => [{ id, ts: nowTs(), ...entry }, ...prev].slice(0, 100)); + }, []); + + const runCall = useCallback( + async ( + method: "GET" | "POST", + path: string, + body?: unknown, + ): Promise => { + try { + const result = await callGrid({ env, creds, method, path, body }); + appendLog({ + env, + method, + path, + requestBody: body, + status: result.status, + responseBody: result.data, + }); + return result.data; + } catch (err) { + const e = err as Error & { status?: number; body?: unknown }; + appendLog({ + env, + method, + path, + requestBody: body, + status: e.status, + responseBody: e.body, + error: e.message, + }); + throw err; + } + }, + [env, creds, appendLog], + ); + + const onPing = useCallback(async () => { + try { + const data = await runCall<{ data?: unknown[] }>( + "GET", + "/customers?limit=1", + ); + const count = Array.isArray(data?.data) ? data.data.length : 0; + setPingStatus({ kind: "ok", message: `OK — listed ${count} customer(s).` }); + } catch (err) { + setPingStatus({ kind: "err", message: (err as Error).message }); + } + }, [runCall]); + + const onClearCreds = useCallback(() => { + const empty = { id: "", secret: "" }; + setCreds(empty); + persistCreds(empty); + }, [persistCreds]); + + const onCreateCustomer = useCallback(async () => { + try { + const payload = + customerType === "INDIVIDUAL" + ? buildIndividualPayload(individual) + : buildBusinessPayload(business); + const data = await runCall( + "POST", + "/customers", + payload, + ); + if (data) { + setCustomerId(data.id); + setCreateStatus({ + kind: "ok", + message: `Created ${data.customerType} customer ${data.id}`, + }); + } + } catch (err) { + setCreateStatus({ kind: "err", message: (err as Error).message }); + } + }, [customerType, individual, business, runCall]); + + const onGenerateLink = useCallback(async () => { + setKycLink(null); + try { + const id = customerId.trim(); + if (!id) throw new Error("Customer ID required."); + const body = redirectUri.trim() ? { redirectUri: redirectUri.trim() } : undefined; + const data = await runCall( + "POST", + `/customers/${encodeURIComponent(id)}/kyc-link`, + body, + ); + if (data) { + setKycLink(data); + setLinkStatus({ + kind: "ok", + message: `Link generated — expires ${data.expiresAt}`, + }); + } + } catch (err) { + setLinkStatus({ kind: "err", message: (err as Error).message }); + } + }, [customerId, redirectUri, runCall]); + + const onFetchCustomer = useCallback(async () => { + try { + const id = customerId.trim(); + if (!id) throw new Error("Customer ID required."); + const data = await runCall( + "GET", + `/customers/${encodeURIComponent(id)}`, + ); + if (data) { + const status = data.kycStatus ?? data.kybStatus ?? "(unknown)"; + setFetchStatus({ + kind: "ok", + message: `${data.customerType} status: ${status}`, + }); + } + } catch (err) { + setFetchStatus({ kind: "err", message: (err as Error).message }); + } + }, [customerId, runCall]); + + const customerTypeOptions = useMemo( + () => [ + { value: "INDIVIDUAL", label: "INDIVIDUAL — KYC hosted link" }, + { value: "BUSINESS", label: "BUSINESS — KYB hosted link" }, + ], + [], + ); + + return ( + + + + Grid KYC/KYB Demo + + Internal demo tool for exercising the Grid hosted KYC/KYB link + API. Everything runs client-side — credentials live in this + browser tab only. Requests are proxied through Vite to the + selected environment. + + + + + + + Environment & credentials + + Credentials are stored per environment in sessionStorage so + prod and dev keys don't get mixed up. + + + + + + + Environment + setEnv(v as GridEnv)} + items={[ + { value: "prod", label: ENV_LABELS.prod }, + { value: "dev", label: ENV_LABELS.dev }, + { value: "local", label: ENV_LABELS.local }, + ]} + /> + + + + API Client ID + { + const next = { ...creds, id: e.target.value }; + setCreds(next); + persistCreds(next); + }} + autoComplete="off" + /> + + + API Client Secret + { + const next = { ...creds, secret: e.target.value }; + setCreds(next); + persistCreds(next); + }} + autoComplete="off" + /> + + + + + + + {pingStatus && ( + + )} + + + + + + + + Customer + + The customer type determines the create payload and whether the + link is KYC (individual) or KYB (business). Either way the link + is generated by POST /customers/<id>/kyc-link. + + + + + + + Customer type + setCustomerType(v as CustomerType)} + items={customerTypeOptions} + /> + + + {customerType === "INDIVIDUAL" ? ( + + ) : ( + + )} + + + + + + + + Run the flow + + + + + + {createStatus && ( + + )} + + + + + Customer ID + setCustomerId(e.target.value)} + placeholder="auto-filled from Create Customer" + /> + + + Redirect URI (optional) + setRedirectUri(e.target.value)} + placeholder="https://app.example.com/onboarding/done" + /> + + Where Sumsub sends the customer after the hosted flow. Must be + https://; Sumsub rejects http:// and + localhost URLs. Leave blank to use Sumsub's default + post-flow page. + + + + {linkStatus && ( + + )} + {kycLink && } + + + + + {fetchStatus && ( + + )} + + + + + + + + Response log + + Most recent first. Cleared on reload. + + + + + {log.length === 0 ? ( + No requests yet. + ) : ( + + {log.map((entry) => ( + + ))} + + )} + + + + + ); +} + +function IndividualFields({ + form, + onChange, +}: { + form: IndividualForm; + onChange: (next: IndividualForm) => void; +}) { + const set = ( + key: K, + value: IndividualForm[K], + ) => onChange({ ...form, [key]: value }); + return ( + <> + + + Platform customer ID + set("platformCustomerId", e.target.value)} + /> + + + Region (ISO 3166-1) + set("region", e.target.value)} + /> + + + + + Full name + set("fullName", e.target.value)} + /> + + + Birth date + set("birthDate", e.target.value)} + /> + + + + + Nationality (ISO 3166-1) + set("nationality", e.target.value)} + /> + + + Email (optional) + set("email", e.target.value)} + /> + + + + Currencies (comma-separated, optional) + set("currencies", e.target.value)} + /> + + + ); +} + +function BusinessFields({ + form, + onChange, +}: { + form: BusinessForm; + onChange: (next: BusinessForm) => void; +}) { + const set = (key: K, value: BusinessForm[K]) => + onChange({ ...form, [key]: value }); + return ( + <> + + + Platform customer ID + set("platformCustomerId", e.target.value)} + /> + + + Region (ISO 3166-1) + set("region", e.target.value)} + /> + + + + Currencies (comma-separated, optional) + set("currencies", e.target.value)} + /> + + + Business info + + + Legal name + set("legalName", e.target.value)} + /> + + + Doing business as (optional) + set("doingBusinessAs", e.target.value)} + /> + + + + + Country of incorporation + set("country", e.target.value)} + /> + + + Registration number + set("registrationNumber", e.target.value)} + /> + + + + + Incorporated on + set("incorporatedOn", e.target.value)} + /> + + + Entity type + set("entityType", v)} + items={ENTITY_TYPES.map((v) => ({ value: v, label: v }))} + /> + + + + + Tax ID + set("taxId", e.target.value)} + /> + + + Countries of operation + set("countriesOfOperation", e.target.value)} + /> + + + + + Business type + set("businessType", v)} + items={BUSINESS_TYPES.map((v) => ({ value: v, label: v }))} + /> + + + Purpose of account + set("purposeOfAccount", v)} + items={PURPOSE_OF_ACCOUNT.map((v) => ({ value: v, label: v }))} + /> + + + + Source of funds + set("sourceOfFunds", e.target.value)} + /> + + + + Expected monthly tx count + set("txCount", v)} + items={TX_COUNT.map((v) => ({ value: v, label: v }))} + /> + + + Expected monthly tx volume + set("txVolume", v)} + items={TX_VOLUME.map((v) => ({ value: v, label: v }))} + /> + + + + Recipient jurisdictions + set("recipientJurisdictions", e.target.value)} + /> + + + Business address + + + Line 1 + set("addrLine1", e.target.value)} + /> + + + Line 2 (optional) + set("addrLine2", e.target.value)} + /> + + + + + City + set("addrCity", e.target.value)} + /> + + + State + set("addrState", e.target.value)} + /> + + + + + Postal code + set("addrPostal", e.target.value)} + /> + + + Country (ISO 3166-1) + set("addrCountry", e.target.value)} + /> + + + + ); +} + +function SelectControl({ + value, + onValueChange, + items, +}: { + value: string; + onValueChange: (next: string) => void; + items: { value: string; label: string }[]; +}) { + return ( + { + if (next != null) onValueChange(next); + }} + > + + + {(v: string) => items.find((i) => i.value === v)?.label ?? v} + + + + + + + + {items.map((item) => ( + + + {item.label} + + ))} + + + + + + ); +} + +function KycLinkResult({ result }: { result: KycLinkResponse }) { + const [copied, setCopied] = useState(false); + return ( + + + {result.provider} + expires {result.expiresAt} + + {result.kycUrl} + + + + + {result.token && ( + + Provider token (for embedded SDK, follow-up):{" "} + {result.token.slice(0, 32)}… + + )} + + ); +} + +function LogItem({ entry }: { entry: LogEntry }) { + const headline = `${entry.method} ${entry.path}`; + const statusBadgeVariant: "green" | "red" | "gray" = entry.error + ? "red" + : entry.status && entry.status >= 200 && entry.status < 300 + ? "green" + : "gray"; + return ( + + + {entry.env} + + {entry.status ?? "ERR"} + + {headline} + {entry.ts} + + {entry.requestBody !== undefined && ( +

PASSKEY lifecycle

-

Create wallet

+

Create credential

, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + Authorization: getAuthHeader(), + ...extraHeaders, + }, + body: JSON.stringify(body), + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + async function apiGet(path: string): Promise { const res = await fetch(API_BASE + path, { headers: { Authorization: getAuthHeader() }, @@ -322,7 +342,11 @@ bindClick( platformCustomerId, region: "US", currencies: ["USDB"], - businessInfo: { legalName: fullName }, + businessInfo: { + legalName: fullName, + taxId: "12-3456789", + incorporatedOn: "2020-01-01", + }, }; if (email) body.email = email; const { data: customer } = await apiPost("/customers", body); @@ -335,12 +359,78 @@ bindClick( addLog("Internal Accounts", accounts); if (accounts.data && accounts.data.length > 0) { setCtxAccount(accounts.data[0].id); - return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}`; + return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}\nEmbedded wallet pre-created at customer-create time.`; } - return `Customer: ${customerId}\nNo USDB account found`; + return `Customer: ${customerId}\nNo USDB account found yet — wallet provisioning may be in progress.`; }, ); +// ========================================================== +// Platform config (OTP + branding) — GET to populate, PATCH to save +// ========================================================== + +const cfgAppName = maybeEl("cfg-app-name"); +const cfgOtpLength = maybeEl("cfg-otp-length"); +const cfgAlphanumeric = maybeEl("cfg-alphanumeric"); +const cfgExpirationSeconds = maybeEl("cfg-expiration-seconds"); +const cfgSendFromEmail = maybeEl("cfg-send-from-email"); +const cfgSendFromName = maybeEl("cfg-send-from-name"); +const cfgReplyToEmail = maybeEl("cfg-reply-to-email"); +const cfgLogoUrl = maybeEl("cfg-logo-url"); + +function readConfigForm(): Record { + // Only include fields the user touched (non-empty) so we PATCH a real partial. + const ewc: Record = {}; + if (cfgAppName?.value.trim()) ewc.appName = cfgAppName.value.trim(); + if (cfgOtpLength?.value.trim()) + ewc.otpLength = parseInt(cfgOtpLength.value, 10); + if (cfgAlphanumeric) ewc.alphanumeric = cfgAlphanumeric.checked; + if (cfgExpirationSeconds?.value.trim()) + ewc.expirationSeconds = parseInt(cfgExpirationSeconds.value, 10); + if (cfgSendFromEmail?.value.trim()) + ewc.sendFromEmailAddress = cfgSendFromEmail.value.trim(); + if (cfgSendFromName?.value.trim()) + ewc.sendFromEmailSenderName = cfgSendFromName.value.trim(); + if (cfgReplyToEmail?.value.trim()) + ewc.replyToEmailAddress = cfgReplyToEmail.value.trim(); + if (cfgLogoUrl?.value.trim()) ewc.logoUrl = cfgLogoUrl.value.trim(); + return { embeddedWalletConfig: ewc }; +} + +function applyConfigToForm(cfg: unknown): void { + const ewc = (cfg as { embeddedWalletConfig?: Record }) + ?.embeddedWalletConfig; + if (!ewc) return; + if (cfgAppName && typeof ewc.appName === "string") cfgAppName.value = ewc.appName; + if (cfgOtpLength && typeof ewc.otpLength === "number") + cfgOtpLength.value = String(ewc.otpLength); + if (cfgAlphanumeric && typeof ewc.alphanumeric === "boolean") + cfgAlphanumeric.checked = ewc.alphanumeric; + if (cfgExpirationSeconds && typeof ewc.expirationSeconds === "number") + cfgExpirationSeconds.value = String(ewc.expirationSeconds); + if (cfgSendFromEmail && typeof ewc.sendFromEmailAddress === "string") + cfgSendFromEmail.value = ewc.sendFromEmailAddress; + if (cfgSendFromName && typeof ewc.sendFromEmailSenderName === "string") + cfgSendFromName.value = ewc.sendFromEmailSenderName; + if (cfgReplyToEmail && typeof ewc.replyToEmailAddress === "string") + cfgReplyToEmail.value = ewc.replyToEmailAddress; + if (cfgLogoUrl && typeof ewc.logoUrl === "string") cfgLogoUrl.value = ewc.logoUrl; +} + +bindClick("btn-cfg-load", "cfg-status", "Load Config", "Loading…", async () => { + const cfg = await apiGet("/config"); + addLog("GET /config", cfg); + applyConfigToForm(cfg); + return "Config loaded into form."; +}); + +bindClick("btn-cfg-save", "cfg-status", "Save Config", "Saving…", async () => { + const body = readConfigForm(); + const { data } = await apiPatch("/config", body); + addLog("PATCH /config", data); + return "Config saved."; +}); + bindClick( "btn-fetch-balance", "balance-status", From e784c0a4fa0b035091a6e4edcf9064498f4327cb Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 1 Jun 2026 13:18:20 -0700 Subject: [PATCH 054/133] [js] Update js-cookie dependency (#27866) ## Reason Refreshes the `js-cookie` version used through the Segment analytics package. ## Overview `@segment/analytics-next@1.84.0` still pins `js-cookie` exactly to `3.0.1`, and `1.84.0` is the current latest Segment package version. This adds a narrow root resolution so the Segment path resolves `js-cookie@3.0.7`.
Related advisories - [CVE-2026-46625](https://www.cve.org/CVERecord?id=CVE-2026-46625) - [GHSA-qjx8-664m-686j](https://github.com/advisories/GHSA-qjx8-664m-686j)
Related advisories - [CVE-2026-46625](https://www.cve.org/CVERecord?id=CVE-2026-46625) / [GHSA-qjx8-664m-686j](https://github.com/advisories/GHSA-qjx8-664m-686j)
## Test plan - `npm view js-cookie version dependencies --json` - `npm view @segment/analytics-next version dependencies peerDependencies --json` - `npm view @segment/analytics-next@latest dependencies.js-cookie --json` - `yarn why js-cookie` - `yarn install --immutable` - `yarn deps:check` - `git diff --check` - `yarn why js-cookie | rg 'js-cookie@npm:3\\.0\\.[0-6]' || true`\n- `yarn turbo run build --filter=@lightsparkdev/site... --filter=@lightsparkdev/uma-bridge...`\n- pre-commit hook: `yarn install`, `yarn format` GitOrigin-RevId: 0477813a11d17bacddbb49e0f9d523096ac11c3b --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6990a3c25..f86bd557c 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,8 @@ } }, "resolutions": { - "form-data": "4.0.5" + "form-data": "4.0.5", + "js-cookie": "3.0.7" }, "engines": { "node": ">=18.18.0" From fc30cb0945f22320728efb0b541f0e9efa6d057e Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 1 Jun 2026 15:42:40 -0700 Subject: [PATCH 055/133] [js] Update Vitest to v4 (#28092) ## Reason Socket Security failed on `main` for GitHub Actions run 26779563993 because `vitest@3.2.4` is flagged for a critical CVE in the Site and Origin package manifests. The patched `3.2.x` versions were published today and are blocked by the repo's three-day Yarn minimum-age gate, so this updates to the already-aged v4 line instead of bypassing the gate. ## Overview Updates `vitest` to `^4.1.7` in `@lightsparkdev/site` and `@lightsparkdev/origin`, refreshes `js/yarn.lock`, and adjusts the Chart unit test ResizeObserver mock to be constructable under Vitest v4. ## Test Plan - `yarn install --immutable` - `yarn workspace @lightsparkdev/origin test:unit` - `yarn workspace @lightsparkdev/site test` - `yarn workspace @lightsparkdev/origin types` - `yarn workspace @lightsparkdev/origin lint` (passes with two existing unrelated a11y warnings) - `git diff --check` GitOrigin-RevId: d6427d9bb3cff6dd4ba3d1f27f26cd3d2b5c71a6 --- packages/origin/package.json | 2 +- .../src/components/Chart/Chart.unit.test.ts | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/origin/package.json b/packages/origin/package.json index bcf7cc562..7b67d4a33 100644 --- a/packages/origin/package.json +++ b/packages/origin/package.json @@ -110,7 +110,7 @@ "stylelint-config-standard-scss": "^17.0.0", "typescript": "^5.6.2", "vite": "^8.0.14", - "vitest": "^3.1.4" + "vitest": "^4.1.7" }, "engines": { "node": ">=20.19" diff --git a/packages/origin/src/components/Chart/Chart.unit.test.ts b/packages/origin/src/components/Chart/Chart.unit.test.ts index 24d768687..cbb363665 100644 --- a/packages/origin/src/components/Chart/Chart.unit.test.ts +++ b/packages/origin/src/components/Chart/Chart.unit.test.ts @@ -910,13 +910,16 @@ describe("useResizeWidth", () => { disconnect: vi.fn(), unobserve: vi.fn(), }; - vi.stubGlobal( - "ResizeObserver", - vi.fn((cb: ResizeObserverCallback) => { + class MockResizeObserver { + observe = mockObserver.observe; + disconnect = mockObserver.disconnect; + unobserve = mockObserver.unobserve; + + constructor(cb: ResizeObserverCallback) { observerCallback = cb; - return mockObserver; - }), - ); + } + } + vi.stubGlobal("ResizeObserver", MockResizeObserver); const { result } = renderHook(() => useResizeWidth(800)); expect(result.current.width).toBe(800); From 2c7d6ae3121a88bcbc7dcba2f1b69b13dcc29e02 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Mon, 1 Jun 2026 22:51:02 +0000 Subject: [PATCH 056/133] CI update lock file for PR --- yarn.lock | 352 +++++++++++++++++++++++++----------------------------- 1 file changed, 163 insertions(+), 189 deletions(-) diff --git a/yarn.lock b/yarn.lock index 64d87782c..ec3a750e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3396,7 +3396,7 @@ __metadata: stylelint-config-standard-scss: "npm:^17.0.0" typescript: "npm:^5.6.2" vite: "npm:^8.0.14" - vitest: "npm:^3.1.4" + vitest: "npm:^4.1.7" peerDependencies: next: ">=13" react: ">=18" @@ -5241,6 +5241,13 @@ __metadata: languageName: node linkType: hard +"@standard-schema/spec@npm:^1.1.0": + version: 1.1.0 + resolution: "@standard-schema/spec@npm:1.1.0" + checksum: 10/a209615c9e8b2ea535d7db0a5f6aa0f962fd4ab73ee86a46c100fb78116964af1f55a27c1794d4801e534a196794223daa25ff5135021e03c7828aa3d95e1763 + languageName: node + linkType: hard + "@storybook/builder-vite@npm:10.3.6": version: 10.3.6 resolution: "@storybook/builder-vite@npm:10.3.6" @@ -6670,26 +6677,40 @@ __metadata: languageName: node linkType: hard -"@vitest/mocker@npm:3.2.4": - version: 3.2.4 - resolution: "@vitest/mocker@npm:3.2.4" +"@vitest/expect@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/expect@npm:4.1.7" dependencies: - "@vitest/spy": "npm:3.2.4" + "@standard-schema/spec": "npm:^1.1.0" + "@types/chai": "npm:^5.2.2" + "@vitest/spy": "npm:4.1.7" + "@vitest/utils": "npm:4.1.7" + chai: "npm:^6.2.2" + tinyrainbow: "npm:^3.1.0" + checksum: 10/a609af6c0497cd510ce8aed099f18faf6d6642bc8eb3432b688f2b39d7354a04d1c4ee9dc28bcfb9d4be701ceac88384d586592a520a324b3773ea43e8a1e677 + languageName: node + linkType: hard + +"@vitest/mocker@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/mocker@npm:4.1.7" + dependencies: + "@vitest/spy": "npm:4.1.7" estree-walker: "npm:^3.0.3" - magic-string: "npm:^0.30.17" + magic-string: "npm:^0.30.21" peerDependencies: msw: ^2.4.9 - vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 peerDependenciesMeta: msw: optional: true vite: optional: true - checksum: 10/5e92431b6ed9fc1679060e4caef3e4623f4750542a5d7cd944774f8217c4d231e273202e8aea00bab33260a5a9222ecb7005d80da0348c3c829bd37d123071a8 + checksum: 10/124d0ec9cc099fde1fca4b065b81a389e9ba2204ecba9729751a0a022d0ffaa34609d9dc60c1f8494ee972c2209035a4476ff1dddc1790e07d1ca28a1103b30d languageName: node linkType: hard -"@vitest/pretty-format@npm:3.2.4, @vitest/pretty-format@npm:^3.2.4": +"@vitest/pretty-format@npm:3.2.4": version: 3.2.4 resolution: "@vitest/pretty-format@npm:3.2.4" dependencies: @@ -6698,25 +6719,34 @@ __metadata: languageName: node linkType: hard -"@vitest/runner@npm:3.2.4": - version: 3.2.4 - resolution: "@vitest/runner@npm:3.2.4" +"@vitest/pretty-format@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/pretty-format@npm:4.1.7" dependencies: - "@vitest/utils": "npm:3.2.4" + tinyrainbow: "npm:^3.1.0" + checksum: 10/79c86c39173577250955744c3444d8c0c9304c95c7d351b91a916229252c3733a0e969741a8f3441a5c4777b5a4371707ecb747ea4bfd2c07e72ddf1ef621293 + languageName: node + linkType: hard + +"@vitest/runner@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/runner@npm:4.1.7" + dependencies: + "@vitest/utils": "npm:4.1.7" pathe: "npm:^2.0.3" - strip-literal: "npm:^3.0.0" - checksum: 10/197bd55def519ef202f990b7c1618c212380831827c116240871033e4973decb780503c705ba9245a12bd8121f3ac4086ffcb3e302148b62d9bd77fd18dd1deb + checksum: 10/429f1e0cc93f66a681d8acc816e21ac41258b07550f9139d004aab103bb06be53e3d91fc66886cef1ba1460a120f5fe4b12d6fe32dafdb1b06740dd119d70f7e languageName: node linkType: hard -"@vitest/snapshot@npm:3.2.4": - version: 3.2.4 - resolution: "@vitest/snapshot@npm:3.2.4" +"@vitest/snapshot@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/snapshot@npm:4.1.7" dependencies: - "@vitest/pretty-format": "npm:3.2.4" - magic-string: "npm:^0.30.17" + "@vitest/pretty-format": "npm:4.1.7" + "@vitest/utils": "npm:4.1.7" + magic-string: "npm:^0.30.21" pathe: "npm:^2.0.3" - checksum: 10/acfb682491b9ca9345bf9fed02c2779dec43e0455a380c1966b0aad8dd81c79960902cf34621ab48fe80a0eaf8c61cc42dec186a1321dc3c9897ef2ebd5f1bc4 + checksum: 10/ef7001add6724c025772891616338e6081ecdb11a92c084ca1d09c4662cf632e5877bec4cb38056aabc311f29fbe149c89fbf332975829087f3817554fe92cde languageName: node linkType: hard @@ -6729,6 +6759,13 @@ __metadata: languageName: node linkType: hard +"@vitest/spy@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/spy@npm:4.1.7" + checksum: 10/49a9959c615f45ec593379a6d1a238190d08524857a6c4819b724134ce8a1a96d94e20144723d245941ce1ada54d8b00552573810d629880ecb8c3ff03b6d1ad + languageName: node + linkType: hard + "@vitest/utils@npm:3.2.4": version: 3.2.4 resolution: "@vitest/utils@npm:3.2.4" @@ -6740,6 +6777,17 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:4.1.7": + version: 4.1.7 + resolution: "@vitest/utils@npm:4.1.7" + dependencies: + "@vitest/pretty-format": "npm:4.1.7" + convert-source-map: "npm:^2.0.0" + tinyrainbow: "npm:^3.1.0" + checksum: 10/9cc729618dade24de3ad6862c288c22e9daac3fda5cae0abc9b6ce87035cc8e7efa2b66c3c124ae08beef462b36761b062e792bbc619798b832a7ea9382ed12a + languageName: node + linkType: hard + "@wojtekmaj/date-utils@npm:^1.1.3, @wojtekmaj/date-utils@npm:^1.5.0": version: 1.5.1 resolution: "@wojtekmaj/date-utils@npm:1.5.1" @@ -7884,13 +7932,6 @@ __metadata: languageName: node linkType: hard -"cac@npm:^6.7.14": - version: 6.7.14 - resolution: "cac@npm:6.7.14" - checksum: 10/002769a0fbfc51c062acd2a59df465a2a947916b02ac50b56c69ec6c018ee99ac3e7f4dd7366334ea847f1ecacf4defaa61bcd2ac283db50156ce1f1d8c8ad42 - languageName: node - linkType: hard - "cac@npm:^7.0.0": version: 7.0.0 resolution: "cac@npm:7.0.0" @@ -8036,6 +8077,13 @@ __metadata: languageName: node linkType: hard +"chai@npm:^6.2.2": + version: 6.2.2 + resolution: "chai@npm:6.2.2" + checksum: 10/13cda42cc40aa46da04a41cf7e5c61df6b6ae0b4e8a8c8b40e04d6947e4d7951377ea8c14f9fa7fe5aaa9e8bd9ba414f11288dc958d4cee6f5221b9436f2778f + languageName: node + linkType: hard + "chalk@npm:*, chalk@npm:^5.3.0": version: 5.3.0 resolution: "chalk@npm:5.3.0" @@ -8756,7 +8804,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4, debug@npm:^4.4.1, debug@npm:^4.4.3": +"debug@npm:^4, debug@npm:^4.4.3": version: 4.4.3 resolution: "debug@npm:4.4.3" dependencies: @@ -9628,10 +9676,10 @@ __metadata: languageName: node linkType: hard -"es-module-lexer@npm:^1.7.0": - version: 1.7.0 - resolution: "es-module-lexer@npm:1.7.0" - checksum: 10/b6f3e576a3fed4d82b0d0ad4bbf6b3a5ad694d2e7ce8c4a069560da3db6399381eaba703616a182b16dde50ce998af64e07dcf49f2ae48153b9e07be3f107087 +"es-module-lexer@npm:^2.0.0": + version: 2.1.0 + resolution: "es-module-lexer@npm:2.1.0" + checksum: 10/554c4374e78a812a1fa3673871ce7d42236438c414ea80c2ec35521cd9bb26d1d9155287529057d07431fd91df50d6a26d9bee5afd755fb7f6f7c81905a03956 languageName: node linkType: hard @@ -9810,7 +9858,7 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0, esbuild@npm:^0.27.0": +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0": version: 0.27.4 resolution: "esbuild@npm:0.27.4" dependencies: @@ -10431,7 +10479,7 @@ __metadata: languageName: node linkType: hard -"expect-type@npm:^1.2.1": +"expect-type@npm:^1.3.0": version: 1.3.0 resolution: "expect-type@npm:1.3.0" checksum: 10/a5fada3d0c621649261f886e7d93e6bf80ce26d8a86e5d517e38301b8baec8450ab2cb94ba6e7a0a6bf2fc9ee55f54e1b06938ef1efa52ddcfeffbfa01acbbcc @@ -12996,13 +13044,6 @@ __metadata: languageName: node linkType: hard -"js-tokens@npm:^9.0.1": - version: 9.0.1 - resolution: "js-tokens@npm:9.0.1" - checksum: 10/3288ba73bb2023adf59501979fb4890feb6669cc167b13771b226814fde96a1583de3989249880e3f4d674040d1815685db9a9880db9153307480d39dc760365 - languageName: node - linkType: hard - "js-yaml@npm:^3.13.1, js-yaml@npm:^3.6.1": version: 3.14.1 resolution: "js-yaml@npm:3.14.1" @@ -13789,7 +13830,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.0, magic-string@npm:^0.30.17": +"magic-string@npm:^0.30.0, magic-string@npm:^0.30.21": version: 0.30.21 resolution: "magic-string@npm:0.30.21" dependencies: @@ -15356,7 +15397,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.5.3, postcss@npm:^8.5.6, postcss@npm:^8.5.8": +"postcss@npm:^8.5.3, postcss@npm:^8.5.8": version: 8.5.8 resolution: "postcss@npm:8.5.8" dependencies: @@ -16547,7 +16588,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^4.34.9, rollup@npm:^4.43.0": +"rollup@npm:^4.34.9": version: 4.59.0 resolution: "rollup@npm:4.59.0" dependencies: @@ -17347,10 +17388,10 @@ __metadata: languageName: node linkType: hard -"std-env@npm:^3.9.0": - version: 3.10.0 - resolution: "std-env@npm:3.10.0" - checksum: 10/19c9cda4f370b1ffae2b8b08c72167d8c3e5cfa972aaf5c6873f85d0ed2faa729407f5abb194dc33380708c00315002febb6f1e1b484736bfcf9361ad366013a +"std-env@npm:^4.0.0-rc.1": + version: 4.1.0 + resolution: "std-env@npm:4.1.0" + checksum: 10/008146cdb834010383138d356e0dd3e3b0ac127a8229f711b8c518bb22940813cc0dcd654fc76b17f0b18179f56089f8b8e52bd6a7ffa0041a966581e7a44dbe languageName: node linkType: hard @@ -17671,15 +17712,6 @@ __metadata: languageName: node linkType: hard -"strip-literal@npm:^3.0.0": - version: 3.1.0 - resolution: "strip-literal@npm:3.1.0" - dependencies: - js-tokens: "npm:^9.0.1" - checksum: 10/6eb00906a1c343a1050579d1d6023e067a2d72152edb92e64cad49535115beb2e77905ace24aa459f29b66e75edba75ef9d8eca90575b0322640d64a5d37e131 - languageName: node - linkType: hard - "styled-jsx@npm:5.1.6": version: 5.1.6 resolution: "styled-jsx@npm:5.1.6" @@ -18041,13 +18073,6 @@ __metadata: languageName: node linkType: hard -"tinyexec@npm:^0.3.2": - version: 0.3.2 - resolution: "tinyexec@npm:0.3.2" - checksum: 10/b9d5fed3166fb1acd1e7f9a89afcd97ccbe18b9c1af0278e429455f6976d69271ba2d21797e7c36d57d6b05025e525d2882d88c2ab435b60d1ddf2fea361de57 - languageName: node - linkType: hard - "tinyexec@npm:^1.0.1": version: 1.0.1 resolution: "tinyexec@npm:1.0.1" @@ -18055,6 +18080,13 @@ __metadata: languageName: node linkType: hard +"tinyexec@npm:^1.0.2": + version: 1.2.3 + resolution: "tinyexec@npm:1.2.3" + checksum: 10/067ba5a28221db1a147baf23ca443102afda0fab120067c28cc65f2629b629283b6faf00e47440b72c4bdda940763fa691918b9ebf547da9be7aa4b9a798a930 + languageName: node + linkType: hard + "tinyexec@npm:^1.1.1": version: 1.1.1 resolution: "tinyexec@npm:1.1.1" @@ -18072,7 +18104,7 @@ __metadata: languageName: node linkType: hard -"tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.15": +"tinyglobby@npm:^0.2.15": version: 0.2.15 resolution: "tinyglobby@npm:0.2.15" dependencies: @@ -18092,13 +18124,6 @@ __metadata: languageName: node linkType: hard -"tinypool@npm:^1.1.1": - version: 1.1.1 - resolution: "tinypool@npm:1.1.1" - checksum: 10/0d54139e9dbc6ef33349768fa78890a4d708d16a7ab68e4e4ef3bb740609ddf0f9fd13292c2f413fbba756166c97051a657181c8f7ae92ade690604f183cc01d - languageName: node - linkType: hard - "tinyrainbow@npm:^2.0.0": version: 2.0.0 resolution: "tinyrainbow@npm:2.0.0" @@ -18106,6 +18131,13 @@ __metadata: languageName: node linkType: hard +"tinyrainbow@npm:^3.1.0": + version: 3.1.0 + resolution: "tinyrainbow@npm:3.1.0" + checksum: 10/4c2c01dde1e5bb9a74973daaae141d4d733d246280b2f9a7f6a9e7dd8e940d48b2580a6086125278777897bc44635d6ccec5f9f563c2179dd2129f4542d0ec05 + languageName: node + linkType: hard + "tinyspy@npm:^4.0.3": version: 4.0.4 resolution: "tinyspy@npm:4.0.4" @@ -19153,21 +19185,6 @@ __metadata: languageName: node linkType: hard -"vite-node@npm:3.2.4": - version: 3.2.4 - resolution: "vite-node@npm:3.2.4" - dependencies: - cac: "npm:^6.7.14" - debug: "npm:^4.4.1" - es-module-lexer: "npm:^1.7.0" - pathe: "npm:^2.0.3" - vite: "npm:^5.0.0 || ^6.0.0 || ^7.0.0-0" - bin: - vite-node: vite-node.mjs - checksum: 10/343244ecabbab3b6e1a3065dabaeefa269965a7a7c54652d4b7a7207ee82185e887af97268c61755dcb2dd6a6ce5d9e114400cbd694229f38523e935703cc62f - languageName: node - linkType: hard - "vite-plugin-svgr@npm:^4.5.0": version: 4.5.0 resolution: "vite-plugin-svgr@npm:4.5.0" @@ -19181,22 +19198,22 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0": - version: 7.3.1 - resolution: "vite@npm:7.3.1" +"vite@npm:^6.0.0 || ^7.0.0 || ^8.0.0, vite@npm:^8.0.14": + version: 8.0.14 + resolution: "vite@npm:8.0.14" dependencies: - esbuild: "npm:^0.27.0" - fdir: "npm:^6.5.0" fsevents: "npm:~2.3.3" - picomatch: "npm:^4.0.3" - postcss: "npm:^8.5.6" - rollup: "npm:^4.43.0" - tinyglobby: "npm:^0.2.15" + lightningcss: "npm:^1.32.0" + picomatch: "npm:^4.0.4" + postcss: "npm:^8.5.15" + rolldown: "npm:1.0.2" + tinyglobby: "npm:^0.2.16" peerDependencies: "@types/node": ^20.19.0 || >=22.12.0 + "@vitejs/devtools": ^0.1.18 + esbuild: ^0.27.0 || ^0.28.0 jiti: ">=1.21.0" less: ^4.0.0 - lightningcss: ^1.21.0 sass: ^1.70.0 sass-embedded: ^1.70.0 stylus: ">=0.54.8" @@ -19210,12 +19227,14 @@ __metadata: peerDependenciesMeta: "@types/node": optional: true + "@vitejs/devtools": + optional: true + esbuild: + optional: true jiti: optional: true less: optional: true - lightningcss: - optional: true sass: optional: true sass-embedded: @@ -19232,7 +19251,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10/62e48ffa4283b688f0049005405a004447ad38ffc99a0efea4c3aa9b7eed739f7402b43f00668c0ee5a895b684dc953d62f0722d8a92c5b2f6c95f051bceb208 + checksum: 10/3747c9b9dabdfa5b840630c39b2c764afb3c3762816f3148afe7d516edc1889b60b666adeb4e98761c26fb8ed5ba3a9770df5c0450443daf4cdfac110bc6df1c languageName: node linkType: hard @@ -19291,106 +19310,59 @@ __metadata: languageName: node linkType: hard -"vite@npm:^8.0.14": - version: 8.0.14 - resolution: "vite@npm:8.0.14" - dependencies: - fsevents: "npm:~2.3.3" - lightningcss: "npm:^1.32.0" - picomatch: "npm:^4.0.4" - postcss: "npm:^8.5.15" - rolldown: "npm:1.0.2" - tinyglobby: "npm:^0.2.16" - peerDependencies: - "@types/node": ^20.19.0 || >=22.12.0 - "@vitejs/devtools": ^0.1.18 - esbuild: ^0.27.0 || ^0.28.0 - jiti: ">=1.21.0" - less: ^4.0.0 - sass: ^1.70.0 - sass-embedded: ^1.70.0 - stylus: ">=0.54.8" - sugarss: ^5.0.0 - terser: ^5.16.0 - tsx: ^4.8.1 - yaml: ^2.4.2 - dependenciesMeta: - fsevents: - optional: true - peerDependenciesMeta: - "@types/node": - optional: true - "@vitejs/devtools": - optional: true - esbuild: - optional: true - jiti: - optional: true - less: - optional: true - sass: - optional: true - sass-embedded: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - tsx: - optional: true - yaml: - optional: true - bin: - vite: bin/vite.js - checksum: 10/3747c9b9dabdfa5b840630c39b2c764afb3c3762816f3148afe7d516edc1889b60b666adeb4e98761c26fb8ed5ba3a9770df5c0450443daf4cdfac110bc6df1c - languageName: node - linkType: hard - -"vitest@npm:^3.1.4": - version: 3.2.4 - resolution: "vitest@npm:3.2.4" - dependencies: - "@types/chai": "npm:^5.2.2" - "@vitest/expect": "npm:3.2.4" - "@vitest/mocker": "npm:3.2.4" - "@vitest/pretty-format": "npm:^3.2.4" - "@vitest/runner": "npm:3.2.4" - "@vitest/snapshot": "npm:3.2.4" - "@vitest/spy": "npm:3.2.4" - "@vitest/utils": "npm:3.2.4" - chai: "npm:^5.2.0" - debug: "npm:^4.4.1" - expect-type: "npm:^1.2.1" - magic-string: "npm:^0.30.17" +"vitest@npm:^4.1.7": + version: 4.1.7 + resolution: "vitest@npm:4.1.7" + dependencies: + "@vitest/expect": "npm:4.1.7" + "@vitest/mocker": "npm:4.1.7" + "@vitest/pretty-format": "npm:4.1.7" + "@vitest/runner": "npm:4.1.7" + "@vitest/snapshot": "npm:4.1.7" + "@vitest/spy": "npm:4.1.7" + "@vitest/utils": "npm:4.1.7" + es-module-lexer: "npm:^2.0.0" + expect-type: "npm:^1.3.0" + magic-string: "npm:^0.30.21" + obug: "npm:^2.1.1" pathe: "npm:^2.0.3" - picomatch: "npm:^4.0.2" - std-env: "npm:^3.9.0" + picomatch: "npm:^4.0.3" + std-env: "npm:^4.0.0-rc.1" tinybench: "npm:^2.9.0" - tinyexec: "npm:^0.3.2" - tinyglobby: "npm:^0.2.14" - tinypool: "npm:^1.1.1" - tinyrainbow: "npm:^2.0.0" - vite: "npm:^5.0.0 || ^6.0.0 || ^7.0.0-0" - vite-node: "npm:3.2.4" + tinyexec: "npm:^1.0.2" + tinyglobby: "npm:^0.2.15" + tinyrainbow: "npm:^3.1.0" + vite: "npm:^6.0.0 || ^7.0.0 || ^8.0.0" why-is-node-running: "npm:^2.3.0" peerDependencies: "@edge-runtime/vm": "*" - "@types/debug": ^4.1.12 - "@types/node": ^18.0.0 || ^20.0.0 || >=22.0.0 - "@vitest/browser": 3.2.4 - "@vitest/ui": 3.2.4 + "@opentelemetry/api": ^1.9.0 + "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0 + "@vitest/browser-playwright": 4.1.7 + "@vitest/browser-preview": 4.1.7 + "@vitest/browser-webdriverio": 4.1.7 + "@vitest/coverage-istanbul": 4.1.7 + "@vitest/coverage-v8": 4.1.7 + "@vitest/ui": 4.1.7 happy-dom: "*" jsdom: "*" + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 peerDependenciesMeta: "@edge-runtime/vm": optional: true - "@types/debug": + "@opentelemetry/api": optional: true "@types/node": optional: true - "@vitest/browser": + "@vitest/browser-playwright": + optional: true + "@vitest/browser-preview": + optional: true + "@vitest/browser-webdriverio": + optional: true + "@vitest/coverage-istanbul": + optional: true + "@vitest/coverage-v8": optional: true "@vitest/ui": optional: true @@ -19398,9 +19370,11 @@ __metadata: optional: true jsdom: optional: true + vite: + optional: false bin: vitest: vitest.mjs - checksum: 10/f10bbce093ecab310ecbe484536ef4496fb9151510b2be0c5907c65f6d31482d9c851f3182531d1d27d558054aa78e8efd9d4702ba6c82058657e8b6a52507ee + checksum: 10/23ce0ce8bf81856c1acf983c6138efda5d01b60cbdc5734abd0948f3b39cde14ea7bf0981a2ec8a6b05fe7f3658b211116997fd658fcd20c2f5740b5465502ca languageName: node linkType: hard From 5f4cff30f23c427a691fff39d224aa5a1b794817 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Wed, 3 Jun 2026 12:09:40 -0700 Subject: [PATCH 057/133] [ui] Build icons from a single entrypoint (#28172) ## Reason Adding icons to `@lightsparkdev/ui` can currently make the `tsdown` build hang because every icon source file is treated as its own package entrypoint. The package only needs a repo-internal icon import surface, so we can avoid that large recursive entry graph. ## Overview - Build only `src/icons/index.tsx` as the package icon entrypoint. - Re-export central icons, chain icons, and icon path types from `@lightsparkdev/ui/icons`. - Remove the `./icons/*` package export and update internal imports to use `@lightsparkdev/ui/icons`. ## Test Plan - `yarn install --immutable` - `yarn turbo run build --filter=@lightsparkdev/ui` - `yarn workspace @lightsparkdev/ui package:checks` - `yarn turbo run build --filter=@lightsparkdev/site --filter=@lightsparkdev/ops` - `yarn turbo run build-sb --filter=@lightsparkdev/storybook` - `yarn workspace @lightsparkdev/ui format && yarn workspace @lightsparkdev/ui lint` - `yarn workspace @lightsparkdev/site format && yarn workspace @lightsparkdev/site lint` - `yarn workspace @lightsparkdev/ops format && yarn workspace @lightsparkdev/ops lint` - `yarn workspace @lightsparkdev/storybook format && yarn workspace @lightsparkdev/storybook lint` - Pre-commit hook: `yarn install`, `yarn format` GitOrigin-RevId: 88ae6e84a124e921ca517f393afd7bf99f9519bc --- packages/ui/package.json | 4 ---- packages/ui/src/icons/chains/index.tsx | 1 + packages/ui/src/icons/index.tsx | 8 ++++++++ packages/ui/tsdown.config.ts | 2 +- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 175e5be05..d5259195a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -35,10 +35,6 @@ "import": "./dist/icons/index.js", "require": "./dist/icons/index.cjs" }, - "./icons/*": { - "import": "./dist/icons/*.js", - "require": "./dist/icons/*.cjs" - }, "./styles/*": { "import": "./dist/styles/*.js", "require": "./dist/styles/*.cjs" diff --git a/packages/ui/src/icons/chains/index.tsx b/packages/ui/src/icons/chains/index.tsx index 33717f61a..f222f8a1a 100644 --- a/packages/ui/src/icons/chains/index.tsx +++ b/packages/ui/src/icons/chains/index.tsx @@ -3,3 +3,4 @@ export { ChainIcon, type Chain } from "./ChainIcon.js"; export { Ethereum } from "./Ethereum.js"; export { Polygon } from "./Polygon.js"; export { Solana } from "./Solana.js"; +export { Tron } from "./Tron.js"; diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index 8f81d48bc..4a1585d45 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -27,7 +27,9 @@ export { CalendarClock } from "./CalendarClock.js"; export { CameraCapture } from "./CameraCapture.js"; export { CaretRight } from "./CaretRight.js"; export { CashAppBadge } from "./CashAppBadge.js"; +export * from "./central/index.js"; export { CentralArrowShareRight } from "./CentralArrowShareRight.js"; +export * from "./chains/index.js"; export { Checkmark } from "./Checkmark.js"; export { CheckmarkCircle } from "./CheckmarkCircle.js"; export { CheckmarkCircleTier1 } from "./CheckmarkCircleTier1.js"; @@ -150,6 +152,12 @@ export { TapSingle } from "./TapSingle.js"; export { Team } from "./Team.js"; export { Terminal } from "./Terminal.js"; export { Trash } from "./Trash.js"; +export type { + PathLinecap, + PathLinejoin, + PathProps, + PathStrokeWidth, +} from "./types.js"; export { Uma } from "./Uma.js"; export { UmaBridgeLoading } from "./UmaBridgeLoading.js"; export { UmaBridgeLoadingTransparent } from "./UmaBridgeLoadingTransparent.js"; diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts index 22f6851f6..12433fa93 100644 --- a/packages/ui/tsdown.config.ts +++ b/packages/ui/tsdown.config.ts @@ -6,7 +6,7 @@ export default defineConfig({ "src/index.ts", "src/components/**/!(*.test).ts(x)?", "src/hooks/**/!(*.test).ts(x)?", - "src/icons/**/*.ts(x)?", + "src/icons/index.tsx", "src/styles/**/*.ts(x)?", "src/types/**/*.ts(x)?", "src/utils/**/!(*.test).ts?(x)", From 45b334cc01d2f92ab329e6cf061f3e515ca3eb39 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Wed, 3 Jun 2026 14:54:00 -0700 Subject: [PATCH 058/133] [docs] Replace remark-prism with rehype-prism-plus (#28163) ## Reason `remark-prism` is old and brought in `jsdom@16.7.0`, which was one of the remaining dependency paths requesting `form-data@^3.0.0`. That forced the JS workspace to keep a root `form-data` resolution as a security workaround instead of letting dependency ranges resolve naturally. This migrates the three MDX documentation apps to `rehype-prism-plus`, which preserves the existing Prism token-class rendering model and works with the current `prismjs/themes/prism-tomorrow.css` styling. With the stale `jsdom@16.7.0` path gone, all remaining `form-data` consumers accept 4.x and naturally resolve to `form-data@4.0.5`, so the root `form-data` resolution can be removed as well. ## Overview - Move MDX syntax highlighting from `remarkPlugins` to `rehypePlugins` in: - `@lightsparkdev/docs` - `@lightsparkdev/umame-docs` - `@lightsparkdev/uma-dogfood-app` - Replace app-level `remark-prism` dependencies with `rehype-prism-plus`. - Configure `rehype-prism-plus\/all` with `defaultLanguage: "text"` and `ignoreMissing: true` so untyped fences keep block styling while nonstandard fences such as `url` continue rendering instead of failing builds. - Keep runtime `prismjs` usage and existing Prism CSS in place. - Remove the obsolete root `form-data` resolution now that no remaining dependency path requests a vulnerable 3.x release. ## Test Plan - `yarn install` - `yarn install --immutable` - `yarn why remark-prism` - `yarn why rehype-prism-plus` - `yarn why form-data` - `rg -n 'form-data|GHSA-fjxv|CVE-2025-7783|jsdom@npm:16\.7\.0|form-data@npm:3\.' /tmp/webdev-yarn-audit.jsonl js/yarn.lock js/package.json || true` - OSV query for `form-data@4.0.5` returned `{}` - `yarn npm audit --all --recursive --json | rg -i 'form-data|GHSA-fjxv|CVE-2025-7783' || true` returned no matches - `yarn deps:check` - `yarn workspace @lightsparkdev/docs build` - `yarn workspace @lightsparkdev/umame-docs build` - `yarn workspace @lightsparkdev/uma-dogfood-app build` - Checked representative exported docs pages for static `language-*` classes, `language-text` fallback blocks, Prism `.token` spans, Prism Tomorrow colors, and language switcher behavior. GitOrigin-RevId: 0e6b5f478ad37f32852efb67c44a958da800d40f --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index f86bd557c..4d8d62d91 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,6 @@ } }, "resolutions": { - "form-data": "4.0.5", "js-cookie": "3.0.7" }, "engines": { From a2ccd0e1cb769b79c3512b81d055fc335e1d2bdb Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Wed, 3 Jun 2026 22:00:42 +0000 Subject: [PATCH 059/133] CI update lock file for PR --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index ec3a750e6..44321ace9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10884,7 +10884,7 @@ __metadata: languageName: node linkType: hard -"form-data@npm:4.0.5": +"form-data@npm:^4.0.0": version: 4.0.5 resolution: "form-data@npm:4.0.5" dependencies: From 581a2f8f7afe81269cb09444f07db0b1e3768185 Mon Sep 17 00:00:00 2001 From: Aaron Kanter Date: Wed, 3 Jun 2026 22:38:53 -0700 Subject: [PATCH 060/133] Gatekeeper: keyboard row navigation + highlight for the results table (#28134) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit > **[Claim this PR](https://zeus.dev.dev.sparkinfra.net/github/claim?job=thermal-warden-3&repo=webdev&pr=28134&sig=403f9bbde53e8391af5a51cdf192187bbbc6a9f9146ad54d6eee8fa38130bdbe)** — take ownership under your GitHub account ## Reason Follow-up to the gatekeeper search UX (#28091): make the results list keyboard-navigable so you can search and select a GK without the mouse — arrow up/down to move a highlighted row, Enter to open it. ## Overview Adds an **opt-in** keyboard-navigation capability to the shared `Table`/`DataManagerTable` (default off → no change to any existing table), then wires it into the gatekeeper page. - **`packages/ui/.../Table/Table.tsx`** — new `keyboardRowNavigation` prop plus optional controlled `activeRowIndex` / `onActiveRowIndexChange`. When on: highlights an active row, moves it with ArrowUp/ArrowDown (clamped, scroll-into-view), resets to the top row (0) whenever the result set changes, uses a **roving tabindex** (active row `0`, others `-1`), sets `role="grid"` so `aria-selected` is valid, and styles the active row (reusing the hover background + a left accent). Enter on a focused row keeps using the existing click-nav path. - **gatekeeper page** (`OpsGkOverview` + `OpsGkListTable`) — owns `activeRowIndex`, drives it from the search box (arrows move the highlight, Enter opens the highlighted GK), and passes it through. Top row is pre-highlighted, so **type → Enter opens the first result** with no arrow presses. The existing `?search=`/`?name=` behavior is unchanged. Incorporates all four review notes from the plan (exhaustive-deps via a ref so the reset effect is dep-free; page owns navigation so no `onClickDataRow` signature clash; roving tabindex; `role="grid"`). ## Test Plan The ops app has no test harness, so verified via a Puppeteer harness rendering the real `OpsGkOverviewPage` with a fake Apollo layer: results render with row 0 highlighted, ArrowDown/ArrowUp move the highlight (`active` 0→1→2→1), Enter from the search box navigates to the highlighted GK, `role="grid"` and roving `tabindex` confirmed. `tsc` + `eslint` clean on `packages/ui` and ops (incl. no `react-hooks/exhaustive-deps` violation), and a production `vite build` of ops succeeds. Real CI runs `js-workspaces / check` + `test` + `build-and-deploy (ops)`. ## Private [Plan](https://s3.console.aws.amazon.com/s3/object/lightspark-dev-bolt-logs?prefix=jobs/thermal-warden-3/plan.md) (S3, internal only — includes the reviewer-refined design) ## Public Keyboard navigation for the ops gatekeeper results list. --- 🤖 [thermal-warden](https://zeus.dev.dev.sparkinfra.net/#/arc?id=thermal-warden)[(#3)](https://zeus.dev.dev.sparkinfra.net/#/instance?id=thermal-warden-3) | [Feedback](https://zeus.dev.dev.sparkinfra.net/feedback) GitOrigin-RevId: cab21c0ee52fbb084b1139ec482559cf7b857cbf --- packages/ui/src/components/Table/Table.tsx | 143 ++++++++++++++++++++- 1 file changed, 137 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx index 83d520f5b..fb8f40c95 100644 --- a/packages/ui/src/components/Table/Table.tsx +++ b/packages/ui/src/components/Table/Table.tsx @@ -1,4 +1,4 @@ -import { css } from "@emotion/react"; +import { css, useTheme } from "@emotion/react"; import styled from "@emotion/styled"; import { @@ -14,7 +14,14 @@ import { } from "@tanstack/react-table"; import { isObject } from "lodash-es"; import type { KeyboardEvent, MouseEvent, ReactNode } from "react"; -import { Fragment, useCallback, useMemo, useState } from "react"; +import { + Fragment, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { useClipboard } from "../../hooks/useClipboard.js"; import { Link, @@ -134,6 +141,28 @@ export type TableProps> = { onSelectedRowIdsChange: (selectedRowIds: string[]) => void; getRowId: (row: T) => string; }; + /** + * Opt-in keyboard row navigation: highlights an "active" row, moves it with + * ArrowUp/ArrowDown, and activates it on Enter. Off by default so existing + * tables are unaffected. Optionally control the active index from the caller + * (e.g. to drive it from a search box); falls back to internal state. + */ + keyboardRowNavigation?: boolean | undefined; + activeRowIndex?: number | undefined; + onActiveRowIndexChange?: ((activeRowIndex: number) => void) | undefined; + /** + * Fires with the active row's underlying data (in the table's displayed + * order) whenever the highlight moves. Use this — not the caller's own array + * + index — to act on the highlighted row, so sorting can't desync them. + */ + onActiveRowChange?: ((row: T | undefined) => void) | undefined; + /** + * Stable id for a row's data. Defaults to the row index, which means the + * change-detection key stays constant across result sets of the same size — + * pass this (e.g. `(row) => row.id`) so keyboard-nav state resets correctly + * when the data changes. + */ + getRowId?: ((originalRow: T) => string) | undefined; loadingStyle?: | { style: "spinner"; @@ -162,9 +191,24 @@ export function Table>({ minHeight = 300, loadingStyle = { style: "spinner" }, fullHeight = false, + keyboardRowNavigation = false, + activeRowIndex, + onActiveRowIndexChange, + onActiveRowChange, + getRowId, }: TableProps) { const navigate = useNavigate(); + const theme = useTheme(); const [sorting, setSorting] = useState([]); + const [internalActiveRowIndex, setInternalActiveRowIndex] = useState(0); + const activeRow = activeRowIndex ?? internalActiveRowIndex; + const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]); + // Refs so effects can notify a controlled parent without taking the + // (potentially unmemoized) callbacks as dependencies. + const onActiveRowIndexChangeRef = useRef(onActiveRowIndexChange); + onActiveRowIndexChangeRef.current = onActiveRowIndexChange; + const onActiveRowChangeRef = useRef(onActiveRowChange); + onActiveRowChangeRef.current = onActiveRowChange; const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks); @@ -462,6 +506,7 @@ export function Table>({ const tableInstance = useReactTable({ columns: mappedColumns, data, + ...(getRowId ? { getRowId } : {}), state: { sorting, }, @@ -471,6 +516,61 @@ export function Table>({ // debugTable: true }); + const visibleRows = tableInstance.getRowModel().rows; + const visibleRowsRef = useRef(visibleRows); + visibleRowsRef.current = visibleRows; + const visibleRowIdsKey = visibleRows.map((row) => row.id).join(","); + // Reset the highlight to the top row whenever the result set changes (-1 when + // empty), so a fresh search auto-highlights the first result, and report that + // top row. Reporting here (rather than relying on the activeRow effect below) + // avoids a same-flush race: on a data change the activeRow state reset hasn't + // committed yet, so reading `activeRow` could be a stale, out-of-range index. + useEffect(() => { + const next = visibleRowIdsKey === "" ? -1 : 0; + setInternalActiveRowIndex(next); + onActiveRowIndexChangeRef.current?.(next); + if (keyboardRowNavigation) { + onActiveRowChangeRef.current?.(visibleRowsRef.current[next]?.original); + } + }, [visibleRowIdsKey, keyboardRowNavigation]); + + // Report the active row's data (in displayed order) as the highlight moves + // (arrows). Not keyed on the data — data changes are handled above with the + // correct reset index, so this never reads a stale activeRow. Also scroll the + // active row into view (without stealing focus) so a highlight driven by an + // external control (e.g. a search box) can't move off-screen. + useEffect(() => { + if (!keyboardRowNavigation) { + return; + } + onActiveRowChangeRef.current?.(visibleRowsRef.current[activeRow]?.original); + rowRefs.current[activeRow]?.scrollIntoView({ block: "nearest" }); + }, [activeRow, keyboardRowNavigation]); + + function moveActiveRow(delta: number) { + const next = Math.min( + Math.max(activeRow + delta, 0), + visibleRows.length - 1, + ); + setInternalActiveRowIndex(next); + onActiveRowIndexChange?.(next); + rowRefs.current[next]?.focus(); + rowRefs.current[next]?.scrollIntoView({ block: "nearest" }); + } + + function onTableKeyDown(event: KeyboardEvent) { + if (!keyboardRowNavigation) { + return; + } + if (event.key === "ArrowDown") { + event.preventDefault(); + moveActiveRow(1); + } else if (event.key === "ArrowUp") { + event.preventDefault(); + moveActiveRow(-1); + } + } + function onClickDataRow( event: MouseEvent | KeyboardEvent, row: Row, @@ -519,20 +619,47 @@ export function Table>({ {(!loading || ["none", "spinner"].includes(loadingStyle.style)) && // Loop over the table rows - tableInstance.getRowModel().rows.map((row) => { + tableInstance.getRowModel().rows.map((row, rowIndex) => { + const isActiveRow = keyboardRowNavigation && rowIndex === activeRow; return ( { + rowRefs.current[rowIndex] = el; + }} onClick={(event) => onClickDataRow(event, row)} onKeyDown={(event) => { if (event.key === "Enter") { onClickDataRow(event, row); } }} - tabIndex={0} + // Roving tabindex in keyboard-nav mode: only the active row is in + // the tab order; otherwise keep every row focusable as before. + tabIndex={ + keyboardRowNavigation ? (rowIndex === activeRow ? 0 : -1) : 0 + } + aria-selected={ + keyboardRowNavigation ? rowIndex === activeRow : undefined + } > - {row.getVisibleCells().map((cell) => ( - + {row.getVisibleCells().map((cell, cellIndex) => ( + {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} @@ -549,6 +676,10 @@ export function Table>({ {thead} {tbody} From 821c5e3ad6c605b2e078299d6a573544e62cd7f2 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 4 Jun 2026 13:36:30 -0700 Subject: [PATCH 061/133] [grid] Add read-only Home foundation (#27949) ## Summary - Adds the read-only Grid Home foundation for platform balances, recent transactions, payout volume, account details, and funding-instruction display. - `GRID_DASHBOARD_HOME_ENABLED` gates Home route and nav exposure; when the gate is off, Home is not exposed through the route or navigation. - Moves crypto/network icons into the shared UI package, fixes Lightning/Spark icon fidelity, and cleans Home styling/imports back to the intended Emotion/UI-package patterns. ## Gate / rollout notes - Home is read-only in this PR. It does not add Transfer, Receive/Add Funds, Withdraw, Send, payout creation, or external-account ownership semantics. - Funding instructions are display-only here; money movement and setup action flows are layered in later PRs. - Styling/icon changes are asset fidelity, shared reuse, and implementation cleanup only; they do not change Home's gate semantics. ## Test plan / validation - Focused Home, route-gating, `NageApp`, account drawer, amount formatting, account display, transaction display, funding-instruction, and Grid API query tests passed. - Type/lint validation passed for the touched Grid UI areas. - Known local blocker: broader Home test runs hit React 19 `findDOMNode` behavior in the local test harness; the focused coverage above passed. --------- Co-authored-by: Cursor GitOrigin-RevId: 7a4cb721ca9ae418ca52828ed57c85655ff0a439 --- packages/ui/src/icons/BaseNetwork.tsx | 16 +++++ packages/ui/src/icons/BitcoinToken.tsx | 18 +++++ .../ui/src/icons/BitcoinTokenBackground.tsx | 19 ++++++ packages/ui/src/icons/EthereumToken.tsx | 32 +++++++++ .../ui/src/icons/EthereumTokenBackground.tsx | 33 +++++++++ packages/ui/src/icons/PolygonNetwork.tsx | 18 +++++ packages/ui/src/icons/SolanaToken.tsx | 68 +++++++++++++++++++ .../ui/src/icons/SolanaTokenBackground.tsx | 37 ++++++++++ packages/ui/src/icons/TetherToken.tsx | 18 +++++ .../ui/src/icons/TetherTokenBackground.tsx | 19 ++++++ packages/ui/src/icons/TronNetwork.tsx | 18 +++++ packages/ui/src/icons/UsdCoinToken.tsx | 23 +++++++ .../ui/src/icons/UsdCoinTokenBackground.tsx | 21 ++++++ packages/ui/src/icons/index.tsx | 13 ++++ 14 files changed, 353 insertions(+) create mode 100644 packages/ui/src/icons/BaseNetwork.tsx create mode 100644 packages/ui/src/icons/BitcoinToken.tsx create mode 100644 packages/ui/src/icons/BitcoinTokenBackground.tsx create mode 100644 packages/ui/src/icons/EthereumToken.tsx create mode 100644 packages/ui/src/icons/EthereumTokenBackground.tsx create mode 100644 packages/ui/src/icons/PolygonNetwork.tsx create mode 100644 packages/ui/src/icons/SolanaToken.tsx create mode 100644 packages/ui/src/icons/SolanaTokenBackground.tsx create mode 100644 packages/ui/src/icons/TetherToken.tsx create mode 100644 packages/ui/src/icons/TetherTokenBackground.tsx create mode 100644 packages/ui/src/icons/TronNetwork.tsx create mode 100644 packages/ui/src/icons/UsdCoinToken.tsx create mode 100644 packages/ui/src/icons/UsdCoinTokenBackground.tsx diff --git a/packages/ui/src/icons/BaseNetwork.tsx b/packages/ui/src/icons/BaseNetwork.tsx new file mode 100644 index 000000000..ad9ec7de4 --- /dev/null +++ b/packages/ui/src/icons/BaseNetwork.tsx @@ -0,0 +1,16 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function BaseNetwork() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/BitcoinToken.tsx b/packages/ui/src/icons/BitcoinToken.tsx new file mode 100644 index 000000000..c22d89b53 --- /dev/null +++ b/packages/ui/src/icons/BitcoinToken.tsx @@ -0,0 +1,18 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function BitcoinToken() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/BitcoinTokenBackground.tsx b/packages/ui/src/icons/BitcoinTokenBackground.tsx new file mode 100644 index 000000000..3fea10411 --- /dev/null +++ b/packages/ui/src/icons/BitcoinTokenBackground.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function BitcoinTokenBackground() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/EthereumToken.tsx b/packages/ui/src/icons/EthereumToken.tsx new file mode 100644 index 000000000..424e3b7a1 --- /dev/null +++ b/packages/ui/src/icons/EthereumToken.tsx @@ -0,0 +1,32 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function EthereumToken() { + return ( + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/EthereumTokenBackground.tsx b/packages/ui/src/icons/EthereumTokenBackground.tsx new file mode 100644 index 000000000..900826224 --- /dev/null +++ b/packages/ui/src/icons/EthereumTokenBackground.tsx @@ -0,0 +1,33 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function EthereumTokenBackground() { + return ( + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/PolygonNetwork.tsx b/packages/ui/src/icons/PolygonNetwork.tsx new file mode 100644 index 000000000..b3415d537 --- /dev/null +++ b/packages/ui/src/icons/PolygonNetwork.tsx @@ -0,0 +1,18 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function PolygonNetwork() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/SolanaToken.tsx b/packages/ui/src/icons/SolanaToken.tsx new file mode 100644 index 000000000..685f7ae6b --- /dev/null +++ b/packages/ui/src/icons/SolanaToken.tsx @@ -0,0 +1,68 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { useId } from "react"; + +export function SolanaToken() { + const uid = useId(); + const a = `sol__a-${uid}`; + const b = `sol__b-${uid}`; + const c = `sol__c-${uid}`; + + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/SolanaTokenBackground.tsx b/packages/ui/src/icons/SolanaTokenBackground.tsx new file mode 100644 index 000000000..cac0b01bd --- /dev/null +++ b/packages/ui/src/icons/SolanaTokenBackground.tsx @@ -0,0 +1,37 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { useId } from "react"; + +export function SolanaTokenBackground() { + const uid = useId(); + const backgroundGradient = `sol__background-${uid}`; + + return ( + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/TetherToken.tsx b/packages/ui/src/icons/TetherToken.tsx new file mode 100644 index 000000000..bff0cbb22 --- /dev/null +++ b/packages/ui/src/icons/TetherToken.tsx @@ -0,0 +1,18 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TetherToken() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/TetherTokenBackground.tsx b/packages/ui/src/icons/TetherTokenBackground.tsx new file mode 100644 index 000000000..03108c333 --- /dev/null +++ b/packages/ui/src/icons/TetherTokenBackground.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TetherTokenBackground() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/TronNetwork.tsx b/packages/ui/src/icons/TronNetwork.tsx new file mode 100644 index 000000000..c034bd8df --- /dev/null +++ b/packages/ui/src/icons/TronNetwork.tsx @@ -0,0 +1,18 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TronNetwork() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/UsdCoinToken.tsx b/packages/ui/src/icons/UsdCoinToken.tsx new file mode 100644 index 000000000..9d98d0877 --- /dev/null +++ b/packages/ui/src/icons/UsdCoinToken.tsx @@ -0,0 +1,23 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function UsdCoinToken() { + return ( + + + + + + ); +} diff --git a/packages/ui/src/icons/UsdCoinTokenBackground.tsx b/packages/ui/src/icons/UsdCoinTokenBackground.tsx new file mode 100644 index 000000000..2d4151ac5 --- /dev/null +++ b/packages/ui/src/icons/UsdCoinTokenBackground.tsx @@ -0,0 +1,21 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function UsdCoinTokenBackground() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index 4a1585d45..ba927b7a0 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -19,8 +19,11 @@ export { ArrowUp } from "./ArrowUp.js"; export { ArrowUpRight } from "./ArrowUpRight.js"; export { ArrowUpRightCircleFill } from "./ArrowUpRightCircleFill.js"; export { Bank } from "./Bank.js"; +export { BaseNetwork } from "./BaseNetwork.js"; export { BitcoinB } from "./BitcoinB.js"; export { BitcoinBOnRoundedSquare } from "./BitcoinBOnRoundedSquare.js"; +export { BitcoinToken } from "./BitcoinToken.js"; +export { BitcoinTokenBackground } from "./BitcoinTokenBackground.js"; export { BrokenChainLink } from "./BrokenChainLink.js"; export { Calendar } from "./Calendar.js"; export { CalendarClock } from "./CalendarClock.js"; @@ -61,6 +64,8 @@ export { EmailPlus } from "./EmailPlus.js"; export { Entity } from "./Entity.js"; export { Envelope } from "./Envelope.js"; export { EnvelopePlus } from "./EnvelopePlus.js"; +export { EthereumToken } from "./EthereumToken.js"; +export { EthereumTokenBackground } from "./EthereumTokenBackground.js"; export { ExclamationPoint } from "./ExclamationPoint.js"; export { Explorer } from "./Explorer.js"; export { Eye } from "./Eye.js"; @@ -118,6 +123,7 @@ export { PersonPlus } from "./PersonPlus.js"; export { PiggyBank } from "./PiggyBank.js"; export { Pix } from "./Pix.js"; export { Plus } from "./Plus.js"; +export { PolygonNetwork } from "./PolygonNetwork.js"; export { PythonTwoTone } from "./PythonTwoTone.js"; export { QRCodeIcon } from "./QRCodeIcon.js"; export { QuestionCircle } from "./QuestionCircle.js"; @@ -142,6 +148,8 @@ export { ShieldCheck } from "./ShieldCheck.js"; export { ShieldCheckLite } from "./ShieldCheckLite.js"; export { Sidebar } from "./Sidebar.js"; export { Snowflake } from "./Snowflake.js"; +export { SolanaToken } from "./SolanaToken.js"; +export { SolanaTokenBackground } from "./SolanaTokenBackground.js"; export { Sort } from "./Sort.js"; export { Spark } from "./Spark.js"; export { SparklesSoft } from "./SparklesSoft.js"; @@ -151,7 +159,10 @@ export { SwiftTwoTone } from "./SwiftTwoTone.js"; export { TapSingle } from "./TapSingle.js"; export { Team } from "./Team.js"; export { Terminal } from "./Terminal.js"; +export { TetherToken } from "./TetherToken.js"; +export { TetherTokenBackground } from "./TetherTokenBackground.js"; export { Trash } from "./Trash.js"; +export { TronNetwork } from "./TronNetwork.js"; export type { PathLinecap, PathLinejoin, @@ -163,6 +174,8 @@ export { UmaBridgeLoading } from "./UmaBridgeLoading.js"; export { UmaBridgeLoadingTransparent } from "./UmaBridgeLoadingTransparent.js"; export { UmaPaymentLoadingSpinner } from "./UmaPaymentLoadingSpinner.js"; export { Upload } from "./Upload.js"; +export { UsdCoinToken } from "./UsdCoinToken.js"; +export { UsdCoinTokenBackground } from "./UsdCoinTokenBackground.js"; export { Wallet } from "./Wallet.js"; export { WalletSDKIcon } from "./WalletSDKIcon.js"; export { WarningSign } from "./WarningSign.js"; From a3278012347e36287b2e060e1bec6e67413d39df Mon Sep 17 00:00:00 2001 From: Mohamed Wane Date: Thu, 4 Jun 2026 15:57:39 -0700 Subject: [PATCH 062/133] [grid] add CNY mobile-wallet payout corridor (AliPay / WeChatPay) (#28259) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - Wires up China (CNY) as a mobile-wallet payout corridor — AliPay and WeChatPay. `bank_name` on the request disambiguates which wallet to settle through. - The upstream provider's CN bank payers are B2B-only on the sender side (registered_name + registration_number), so the bank rail isn't usable for our consumer C2C flow — explicitly scoped out of this PR. - Sender extras for CNY (NATIONALITY + COUNTRY_OF_RESIDENCE + ID_TYPE + ID_NUMBER) are the union of AliPay C2C and WeChatPay C2C published sender requirements — same shape as the existing EGP extras. - Account-create / read paths are intentionally deferred to a follow-up: `CURRENCY_TO_ACCOUNT_TYPE[CNY]` and the `CurrencyUnit.CNY` case in `gen_convert_to_external_account_info` both need `CnyExternalAccountInfo` / `CnyExternalAccountCreateInfo` Pydantic models from grid-api, which generate post-merge after the new partials propagate via `sync-external-accounts.yml` and the next grid-api mirror regen lands in `webdev/grid-api/`. ## Test plan - [x] `uv run pytest sparkcore/grid/utils/__tests__/ sparkcore/bridge/extend_integration/__tests__/ sparkcore/grid/destination_resolution/__tests__/ sparkcore/bridge/__tests__/` — 638 passed - [x] `uv run pytest sparkcore/grid/__itests__/ -m 'not minikube_spark'` — 413 passed - [x] `uv run ruff format && uv run ruff check && uv run ty check` — clean on touched files - [ ] After this PR merges + the upstream auto-sync PR lands + the next mirror regen lands in `webdev/grid-api/`: open the follow-up to add `CURRENCY_TO_ACCOUNT_TYPE[CNY]` and the `gen_convert_to_external_account_info` case - [ ] Live: once the model wiring follow-up lands and deploys, create a CNY external account with `bankName: "AliPay"` (or `"WeChatPay"`) + `phoneNumber: "+86..."`, quote against it, verify the upstream provider accepts the rate 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 GitOrigin-RevId: c8d6406b0a5cb64d6d47da939fe737ed041e0f19 --- packages/core/src/utils/currency.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/core/src/utils/currency.ts b/packages/core/src/utils/currency.ts index 80dfc58d9..a65783e0e 100644 --- a/packages/core/src/utils/currency.ts +++ b/packages/core/src/utils/currency.ts @@ -46,6 +46,7 @@ export const CurrencyUnit = { ZMW: "ZMW", AED: "AED", BDT: "BDT", + CNY: "CNY", COP: "COP", EGP: "EGP", GHS: "GHS", @@ -72,6 +73,7 @@ export const CurrencyUnit = { Brl: "BRL", Aed: "AED", Bdt: "BDT", + Cny: "CNY", Cop: "COP", Egp: "EGP", Ghs: "GHS", @@ -136,6 +138,7 @@ const standardUnitConversionObj = { [CurrencyUnit.ZMW]: (v: number) => v, [CurrencyUnit.AED]: (v: number) => v, [CurrencyUnit.BDT]: (v: number) => v, + [CurrencyUnit.CNY]: (v: number) => v, [CurrencyUnit.COP]: (v: number) => v, [CurrencyUnit.EGP]: (v: number) => v, [CurrencyUnit.GHS]: (v: number) => v, @@ -199,6 +202,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toBitcoinConversion, [CurrencyUnit.AED]: toBitcoinConversion, [CurrencyUnit.BDT]: toBitcoinConversion, + [CurrencyUnit.CNY]: toBitcoinConversion, [CurrencyUnit.COP]: toBitcoinConversion, [CurrencyUnit.EGP]: toBitcoinConversion, [CurrencyUnit.GHS]: toBitcoinConversion, @@ -246,6 +250,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toMicrobitcoinConversion, [CurrencyUnit.AED]: toMicrobitcoinConversion, [CurrencyUnit.BDT]: toMicrobitcoinConversion, + [CurrencyUnit.CNY]: toMicrobitcoinConversion, [CurrencyUnit.COP]: toMicrobitcoinConversion, [CurrencyUnit.EGP]: toMicrobitcoinConversion, [CurrencyUnit.GHS]: toMicrobitcoinConversion, @@ -293,6 +298,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toMillibitcoinConversion, [CurrencyUnit.AED]: toMillibitcoinConversion, [CurrencyUnit.BDT]: toMillibitcoinConversion, + [CurrencyUnit.CNY]: toMillibitcoinConversion, [CurrencyUnit.COP]: toMillibitcoinConversion, [CurrencyUnit.EGP]: toMillibitcoinConversion, [CurrencyUnit.GHS]: toMillibitcoinConversion, @@ -340,6 +346,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toMillisatoshiConversion, [CurrencyUnit.AED]: toMillisatoshiConversion, [CurrencyUnit.BDT]: toMillisatoshiConversion, + [CurrencyUnit.CNY]: toMillisatoshiConversion, [CurrencyUnit.COP]: toMillisatoshiConversion, [CurrencyUnit.EGP]: toMillisatoshiConversion, [CurrencyUnit.GHS]: toMillisatoshiConversion, @@ -387,6 +394,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toNanobitcoinConversion, [CurrencyUnit.AED]: toNanobitcoinConversion, [CurrencyUnit.BDT]: toNanobitcoinConversion, + [CurrencyUnit.CNY]: toNanobitcoinConversion, [CurrencyUnit.COP]: toNanobitcoinConversion, [CurrencyUnit.EGP]: toNanobitcoinConversion, [CurrencyUnit.GHS]: toNanobitcoinConversion, @@ -434,6 +442,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: toSatoshiConversion, [CurrencyUnit.AED]: toSatoshiConversion, [CurrencyUnit.BDT]: toSatoshiConversion, + [CurrencyUnit.CNY]: toSatoshiConversion, [CurrencyUnit.COP]: toSatoshiConversion, [CurrencyUnit.EGP]: toSatoshiConversion, [CurrencyUnit.GHS]: toSatoshiConversion, @@ -474,6 +483,7 @@ const CONVERSION_MAP = { [CurrencyUnit.ZMW]: standardUnitConversionObj, [CurrencyUnit.AED]: standardUnitConversionObj, [CurrencyUnit.BDT]: standardUnitConversionObj, + [CurrencyUnit.CNY]: standardUnitConversionObj, [CurrencyUnit.COP]: standardUnitConversionObj, [CurrencyUnit.EGP]: standardUnitConversionObj, [CurrencyUnit.GHS]: standardUnitConversionObj, @@ -574,6 +584,7 @@ export type CurrencyMap = { [CurrencyUnit.ZMW]: number; [CurrencyUnit.AED]: number; [CurrencyUnit.BDT]: number; + [CurrencyUnit.CNY]: number; [CurrencyUnit.COP]: number; [CurrencyUnit.EGP]: number; [CurrencyUnit.GHS]: number; @@ -624,6 +635,7 @@ export type CurrencyMap = { [CurrencyUnit.ZMW]: string; [CurrencyUnit.AED]: string; [CurrencyUnit.BDT]: string; + [CurrencyUnit.CNY]: string; [CurrencyUnit.COP]: string; [CurrencyUnit.EGP]: string; [CurrencyUnit.GHS]: string; @@ -855,6 +867,7 @@ function convertCurrencyAmountValues( zmw: CurrencyUnit.ZMW, aed: CurrencyUnit.AED, bdt: CurrencyUnit.BDT, + cny: CurrencyUnit.CNY, cop: CurrencyUnit.COP, egp: CurrencyUnit.EGP, ghs: CurrencyUnit.GHS, @@ -950,6 +963,7 @@ export function mapCurrencyAmount( zmw, aed, bdt, + cny, cop, egp, ghs, @@ -995,6 +1009,7 @@ export function mapCurrencyAmount( [CurrencyUnit.ZMW]: zmw, [CurrencyUnit.AED]: aed, [CurrencyUnit.BDT]: bdt, + [CurrencyUnit.CNY]: cny, [CurrencyUnit.COP]: cop, [CurrencyUnit.EGP]: egp, [CurrencyUnit.GHS]: ghs, @@ -1147,6 +1162,10 @@ export function mapCurrencyAmount( value: bdt, unit: CurrencyUnit.BDT, }), + [CurrencyUnit.CNY]: formatCurrencyStr({ + value: cny, + unit: CurrencyUnit.CNY, + }), [CurrencyUnit.COP]: formatCurrencyStr({ value: cop, unit: CurrencyUnit.COP, @@ -1321,6 +1340,8 @@ export const abbrCurrencyUnit = (unit: CurrencyUnitType) => { return "AED"; case CurrencyUnit.BDT: return "BDT"; + case CurrencyUnit.CNY: + return "CNY"; case CurrencyUnit.COP: return "COP"; case CurrencyUnit.EGP: @@ -1409,6 +1430,7 @@ export function formatCurrencyStr( CurrencyUnit.DKK, CurrencyUnit.AED, CurrencyUnit.BDT, + CurrencyUnit.CNY, CurrencyUnit.COP, CurrencyUnit.EGP, CurrencyUnit.GHS, From 1eabc3a1ff10f6baaf0ba88c11295560c2095b7a Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 8 Jun 2026 15:56:25 -0700 Subject: [PATCH 063/133] [js] Upgrade libphonenumber-js (#28416) ## Summary - Upgrade `libphonenumber-js` to `1.13.6` for current phone-number metadata. - Add `libphonenumber-js` directly to `@lightsparkdev/site`. - Align existing direct dependencies in `@lightsparkdev/ui` and `@lightsparkdev/uma-bridge`. - Add a narrow Yarn age-gate preapproval for `libphonenumber-js@1.13.6`, since the repo quarantine gate blocks just-published packages by default. ## Validation - `yarn deps:check` - `yarn install --immutable` - pre-commit `yarn install` and `yarn format` ## Notes - Existing Yarn peer dependency warnings remain unchanged. GitOrigin-RevId: 1cba149d36f31d43f49330c78d434a89408effa8 --- packages/ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index d5259195a..4c98e1636 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -112,7 +112,7 @@ "dayjs": "^1.11.7", "deep-object-diff": "^1.1.9", "deepmerge": "^4.3.1", - "libphonenumber-js": "^1.12.37", + "libphonenumber-js": "^1.13.5", "lodash-es": "^4.17.21", "nanoid": "^4.0.0", "next": "^15.5.18", From 2b82edb0dce9291288bf9f752eb5ad26e40dbfce Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Mon, 8 Jun 2026 23:03:27 +0000 Subject: [PATCH 064/133] CI update lock file for PR --- yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index 44321ace9..7cb2d993a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3530,7 +3530,7 @@ __metadata: graphql: "npm:^16.6.0" jest: "npm:^29.6.2" jest-environment-jsdom: "npm:^29.6.4" - libphonenumber-js: "npm:^1.12.37" + libphonenumber-js: "npm:^1.13.5" lodash-es: "npm:^4.17.21" madge: "npm:^6.1.0" nanoid: "npm:^4.0.0" @@ -13416,10 +13416,10 @@ __metadata: languageName: node linkType: hard -"libphonenumber-js@npm:^1.12.37": - version: 1.12.37 - resolution: "libphonenumber-js@npm:1.12.37" - checksum: 10/f1276453e12724bf5fdff85e4ce762524a3cb8ce2bc732412b68f540bca40b37ca3595d13e54afc016adc142754157c385298cf928df063035466e0c7cbdaadd +"libphonenumber-js@npm:^1.13.5": + version: 1.13.5 + resolution: "libphonenumber-js@npm:1.13.5" + checksum: 10/3f598fb50f419510cafdc6f093ebd9c457df826e37de42b8be4ba25251472b58debaca3ddaa152e82c1bf23a986edaae5985d2fe6319131da09ac623bdc88baa languageName: node linkType: hard From 74d4fc8681ceb647f6a8342650cb9d03b7e9b7ce Mon Sep 17 00:00:00 2001 From: James Xu Date: Tue, 9 Jun 2026 11:53:04 -0700 Subject: [PATCH 065/133] fix(origin): thin x-axis labels by measured width (#28120) ## Summary - Use Origin's existing measured label width helper to choose x-axis label density - Omit edge x-axis labels after thinning to avoid boundary crowding - Preserve existing Origin chart styling and public APIs ## Checks - yarn workspace @lightsparkdev/origin types - yarn workspace @lightsparkdev/origin format - git diff --check -- js/packages/origin/src/components/Chart --------- Co-authored-by: Claude Opus 4.8 (1M context) GitOrigin-RevId: 76b97cdca1ffd1d681593c61dc43aaaef530a61a --- .../origin/src/components/Chart/BarChart.tsx | 63 +++++++++++++++---- .../src/components/Chart/Chart.unit.test.ts | 57 +++++++++++++++++ .../src/components/Chart/ComposedChart.tsx | 63 +++++++++++++------ .../origin/src/components/Chart/LineChart.tsx | 29 ++++++--- .../src/components/Chart/ScatterChart.tsx | 35 +++++++++-- .../src/components/Chart/StackedAreaChart.tsx | 28 ++++++--- .../src/components/Chart/WaterfallChart.tsx | 24 +++++-- packages/origin/src/components/Chart/types.ts | 24 +++++++ packages/origin/src/components/Chart/utils.ts | 37 ++++++++++- 9 files changed, 295 insertions(+), 65 deletions(-) diff --git a/packages/origin/src/components/Chart/BarChart.tsx b/packages/origin/src/components/Chart/BarChart.tsx index 90a719369..7a441ccd1 100644 --- a/packages/origin/src/components/Chart/BarChart.tsx +++ b/packages/origin/src/components/Chart/BarChart.tsx @@ -7,6 +7,8 @@ import { niceTicks, thinIndices, dynamicTickTarget, + xAxisTickTarget, + applyEdgeLabels, measureLabelWidth, axisPadForLabels, formatChartDatumValue, @@ -30,6 +32,7 @@ import { resolveSeries, resolveTooltipMode, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import { useTrackedCallback } from "../Analytics/useTrackedCallback"; @@ -39,7 +42,9 @@ const EMPTY_TICKS = { min: 0, max: 1, ticks: [0, 1] } as const; const clickIndexMeta = (index: number) => ({ index }); -export interface BarChartProps extends React.ComponentPropsWithoutRef<"div"> { +export interface BarChartProps + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { data: ChartDatum[]; /** * Pre-measurement width in pixels. Used as a fallback before @@ -65,6 +70,22 @@ export interface BarChartProps extends React.ComponentPropsWithoutRef<"div"> { formatValue?: (value: number) => string; formatXLabel?: (value: ChartDatumValue) => string; formatYLabel?: (value: number) => string; + /** + * How vertical-bar x-axis (category) labels are thinned to avoid overlap. + * Has no effect on horizontal bar charts. + * - `"fixed"` (default): roughly one label per 60px, regardless of width. + * - `"measured"`: spacing based on the measured pixel width of the labels, + * so wide labels (dates, currency) get more room and short labels pack in. + */ + xAxisLabels?: "fixed" | "measured"; + /** + * Whether the first and last x-axis (category) labels are shown on vertical + * bar charts. Has no effect on horizontal bar charts. + * - `"show"` (default): keep the edge labels. + * - `"hide"`: drop the first and last labels (useful when they collide with + * the y-axis or chart edges). + */ + xAxisEdgeLabels?: "show" | "hide"; /** Fixed Y-axis domain. Overrides auto-computed domain from data. */ yDomain?: [number, number]; /** Show legend below chart. */ @@ -111,6 +132,8 @@ export const Bar = React.forwardRef(function Bar( formatValue, formatXLabel, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", yDomain, legend, loading, @@ -234,6 +257,30 @@ export const Bar = React.forwardRef(function Bar( const padRight = isHorizontal && showValueAxis ? 40 : PAD_RIGHT; const plotWidth = Math.max(0, width - padLeft - padRight); + const categoryAxisLabels = React.useMemo(() => { + if (!xKey) return []; + const labels = data.map((d) => + formatXLabel ? formatXLabel(d[xKey]) : formatChartDatumValue(d[xKey]), + ); + const maxLabels = isHorizontal + ? Math.max(2, Math.floor(plotHeight / 24)) + : xAxisTickTarget(xAxisLabels, plotWidth, () => labels); + const indices = thinIndices(data.length, maxLabels); + const visibleIndices = isHorizontal + ? indices + : applyEdgeLabels(xAxisEdgeLabels, indices); + return visibleIndices.map((index) => ({ index, label: labels[index] })); + }, [ + data, + formatXLabel, + isHorizontal, + plotHeight, + plotWidth, + xKey, + xAxisLabels, + xAxisEdgeLabels, + ]); + const tickTarget = React.useMemo(() => { if (!isHorizontal) return verticalTickTarget; const fmt = formatYLabel ?? ((v: number) => String(v)); @@ -915,11 +962,7 @@ export const Bar = React.forwardRef(function Bar( {/* Category axis labels (thinned to avoid overlap) */} {xKey && (() => { - const maxLabels = isHorizontal - ? Math.max(2, Math.floor(plotHeight / 24)) - : Math.max(2, Math.floor(plotWidth / 60)); - const indices = thinIndices(data.length, maxLabels); - return indices.map((i) => + return categoryAxisLabels.map(({ index: i, label }) => isHorizontal ? ( (function Bar( textAnchor="end" dominantBaseline="middle" > - {formatXLabel - ? formatXLabel(data[i][xKey]) - : formatChartDatumValue(data[i][xKey])} + {label} ) : ( (function Bar( textAnchor="middle" dominantBaseline="auto" > - {formatXLabel - ? formatXLabel(data[i][xKey]) - : formatChartDatumValue(data[i][xKey])} + {label} ), ); diff --git a/packages/origin/src/components/Chart/Chart.unit.test.ts b/packages/origin/src/components/Chart/Chart.unit.test.ts index cbb363665..8037e5c68 100644 --- a/packages/origin/src/components/Chart/Chart.unit.test.ts +++ b/packages/origin/src/components/Chart/Chart.unit.test.ts @@ -21,6 +21,9 @@ import { thinIndices, measureLabelWidth, dynamicTickTarget, + xAxisTickTarget, + omitEdgeLabels, + applyEdgeLabels, axisPadForLabels, formatChartDatumValue, type Point, @@ -736,6 +739,60 @@ describe("dynamicTickTarget", () => { }); }); +// --------------------------------------------------------------------------- +// xAxisTickTarget +// --------------------------------------------------------------------------- + +describe("xAxisTickTarget", () => { + it("uses fixed 60px spacing in 'fixed' mode, ignoring label width", () => { + expect(xAxisTickTarget("fixed", 300, () => ["$1,234,567.00"])).toBe(5); + expect(xAxisTickTarget("fixed", 600, () => ["0"])).toBe(10); + }); + + it("does not evaluate the sample texts in 'fixed' mode", () => { + let called = false; + xAxisTickTarget("fixed", 400, () => { + called = true; + return ["whatever"]; + }); + expect(called).toBe(false); + }); + + it("measures the sample texts in 'measured' mode", () => { + const shortLabels = xAxisTickTarget("measured", 400, () => ["0", "100"]); + const longLabels = xAxisTickTarget("measured", 400, () => [ + "$1,234,567.00", + ]); + expect(shortLabels).toBeGreaterThan(longLabels); + }); +}); + +// --------------------------------------------------------------------------- +// omitEdgeLabels / applyEdgeLabels +// --------------------------------------------------------------------------- + +describe("omitEdgeLabels", () => { + it("drops the first and last entry when there are more than two", () => { + expect(omitEdgeLabels([0, 1, 2, 3])).toEqual([1, 2]); + }); + + it("keeps the list unchanged at two or fewer entries", () => { + expect(omitEdgeLabels([0, 1])).toEqual([0, 1]); + expect(omitEdgeLabels([0])).toEqual([0]); + expect(omitEdgeLabels([])).toEqual([]); + }); +}); + +describe("applyEdgeLabels", () => { + it("drops the edge entries in 'hide' mode", () => { + expect(applyEdgeLabels("hide", [0, 1, 2, 3])).toEqual([1, 2]); + }); + + it("returns the list unchanged in 'show' mode", () => { + expect(applyEdgeLabels("show", [0, 1, 2, 3])).toEqual([0, 1, 2, 3]); + }); +}); + // --------------------------------------------------------------------------- // axisPadForLabels // --------------------------------------------------------------------------- diff --git a/packages/origin/src/components/Chart/ComposedChart.tsx b/packages/origin/src/components/Chart/ComposedChart.tsx index f8805ef5d..77677be77 100644 --- a/packages/origin/src/components/Chart/ComposedChart.tsx +++ b/packages/origin/src/components/Chart/ComposedChart.tsx @@ -12,6 +12,8 @@ import { monotoneInterpolator, linearInterpolator, thinIndices, + xAxisTickTarget, + applyEdgeLabels, axisPadForLabels, formatChartDatumValue, type Point, @@ -36,6 +38,7 @@ import { BAR_ITEM_GAP, resolveTooltipMode, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import styles from "./Chart.module.scss"; @@ -57,7 +60,8 @@ type ResolvedComposedSeries = { }; export interface ComposedChartProps - extends React.ComponentPropsWithoutRef<"div"> { + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { data: ChartDatum[]; /** * Pre-measurement width in pixels. Used as a fallback before @@ -131,6 +135,8 @@ export const Composed = React.forwardRef( formatValue, formatXLabel, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", formatYLabelRight, connectNulls = true, yDomain: yDomainProp, @@ -373,6 +379,30 @@ export const Composed = React.forwardRef( trackedClick(scrub.activeIndex, data[scrub.activeIndex]); }, [onClickDatum, trackedClick, scrub.activeIndex, data]); + // X axis labels (thinned to avoid overlap) + const xLabels = React.useMemo(() => { + if (!xKey) return []; + const labels = data.map((d) => + formatXLabel ? formatXLabel(d[xKey]) : formatChartDatumValue(d[xKey]), + ); + const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels); + const indices = thinIndices(data.length, maxLabels); + const visibleIndices = applyEdgeLabels(xAxisEdgeLabels, indices); + return visibleIndices.map((i) => ({ + x: (i + 0.5) * slotWidth, + text: labels[i], + index: i, + })); + }, [ + xKey, + data, + formatXLabel, + xAxisLabels, + xAxisEdgeLabels, + plotWidth, + slotWidth, + ]); + const svgDesc = React.useMemo(() => { if (series.length === 0 || data.length === 0) return undefined; const names = series.map((s) => s.label).join(", "); @@ -689,25 +719,18 @@ export const Composed = React.forwardRef( ))} {/* X axis labels (thinned to avoid overlap) */} - {xKey && - (() => { - const maxLabels = Math.max(2, Math.floor(plotWidth / 60)); - const indices = thinIndices(data.length, maxLabels); - return indices.map((i) => ( - - {formatXLabel - ? formatXLabel(data[i][xKey]) - : formatChartDatumValue(data[i][xKey])} - - )); - })()} + {xLabels.map(({ x, text, index }) => ( + + {text} + + ))} diff --git a/packages/origin/src/components/Chart/LineChart.tsx b/packages/origin/src/components/Chart/LineChart.tsx index 6902d5c50..c09c40c29 100644 --- a/packages/origin/src/components/Chart/LineChart.tsx +++ b/packages/origin/src/components/Chart/LineChart.tsx @@ -12,6 +12,8 @@ import { monotoneInterpolator, linearInterpolator, thinIndices, + xAxisTickTarget, + applyEdgeLabels, axisPadForLabels, formatChartDatumValue, type Point, @@ -34,6 +36,7 @@ import { resolveTooltipMode, resolveSeries, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import styles from "./Chart.module.scss"; @@ -42,7 +45,9 @@ export type { Series, TooltipProp, ReferenceLine, ReferenceBand }; const clickIndexMeta = (index: number) => ({ index }); -export interface LineChartProps extends React.ComponentPropsWithoutRef<"div"> { +export interface LineChartProps + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { /** * Array of data objects. Each object should contain keys matching `dataKey` or `series[].key`. */ @@ -154,6 +159,8 @@ export const Line = React.forwardRef( formatValue, formatXLabel, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", connectNulls = true, initialWidth, className, @@ -394,20 +401,22 @@ export const Line = React.forwardRef( // X axis labels const xLabels = React.useMemo(() => { if (!xKey || data.length === 0 || plotWidth <= 0) return []; - const maxLabels = Math.max(2, Math.floor(plotWidth / 60)); + const labels = data.map((d) => { + const raw = d[xKey]; + return formatXLabel ? formatXLabel(raw) : formatChartDatumValue(raw); + }); + const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels); const indices = thinIndices(data.length, maxLabels); - return indices.map((i) => { + const xLabels = indices.map((i) => { const x = data.length === 1 ? plotWidth / 2 : (i / (data.length - 1)) * plotWidth; - const raw = data[i][xKey]; - const text = formatXLabel - ? formatXLabel(raw) - : formatChartDatumValue(raw); + const text = labels[i]; return { x, text, index: i }; }); - }, [xKey, data, plotWidth, formatXLabel]); + return applyEdgeLabels(xAxisEdgeLabels, xLabels); + }, [xKey, data, plotWidth, formatXLabel, xAxisLabels, xAxisEdgeLabels]); // Y axis labels const yLabels = React.useMemo(() => { @@ -899,9 +908,9 @@ export const Line = React.forwardRef( y={plotHeight + 20} className={styles.axisLabel} textAnchor={ - i === 0 + labelIndex === 0 ? "start" - : i === xLabels.length - 1 + : labelIndex === data.length - 1 ? "end" : "middle" } diff --git a/packages/origin/src/components/Chart/ScatterChart.tsx b/packages/origin/src/components/Chart/ScatterChart.tsx index 97c2b5a18..2d980f0fa 100644 --- a/packages/origin/src/components/Chart/ScatterChart.tsx +++ b/packages/origin/src/components/Chart/ScatterChart.tsx @@ -2,7 +2,14 @@ import * as React from "react"; import clsx from "clsx"; -import { linearScale, niceTicks, thinIndices, axisPadForLabels } from "./utils"; +import { + linearScale, + niceTicks, + thinIndices, + xAxisTickTarget, + applyEdgeLabels, + axisPadForLabels, +} from "./utils"; import { useTrackedCallback } from "../Analytics/useTrackedCallback"; import { useResizeWidth } from "./hooks"; import { useMergedRef } from "./useMergedRef"; @@ -17,6 +24,7 @@ import { TOOLTIP_GAP, resolveTooltipMode, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import styles from "./Chart.module.scss"; @@ -37,7 +45,8 @@ export interface ScatterSeries { } export interface ScatterChartProps - extends React.ComponentPropsWithoutRef<"div"> { + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { data: ScatterSeries[]; /** * Pre-measurement width in pixels. Used as a fallback before @@ -112,6 +121,8 @@ export const Scatter = React.forwardRef( formatValue, formatXLabel, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", xDomain: xDomainProp, yDomain: yDomainProp, onClickDatum, @@ -239,13 +250,25 @@ export const Scatter = React.forwardRef( const xLabels = React.useMemo(() => { if (plotWidth <= 0) return []; - const maxLabels = Math.max(2, Math.floor(plotWidth / 60)); + const labels = xTicks.map((tick) => + formatXLabel ? formatXLabel(tick) : String(tick), + ); + const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels); const indices = thinIndices(xTicks.length, maxLabels); - return indices.map((i) => ({ + const visibleIndices = applyEdgeLabels(xAxisEdgeLabels, indices); + return visibleIndices.map((i) => ({ x: linearScale(xTicks[i], xMin, xMax, 0, plotWidth), - text: formatXLabel ? formatXLabel(xTicks[i]) : String(xTicks[i]), + text: labels[i], })); - }, [xTicks, xMin, xMax, plotWidth, formatXLabel]); + }, [ + xTicks, + xMin, + xMax, + plotWidth, + formatXLabel, + xAxisLabels, + xAxisEdgeLabels, + ]); const screenPoints = React.useMemo(() => { if (plotWidth <= 0 || plotHeight <= 0) return []; diff --git a/packages/origin/src/components/Chart/StackedAreaChart.tsx b/packages/origin/src/components/Chart/StackedAreaChart.tsx index 09e7f6d50..bb2e90d8a 100644 --- a/packages/origin/src/components/Chart/StackedAreaChart.tsx +++ b/packages/origin/src/components/Chart/StackedAreaChart.tsx @@ -11,6 +11,8 @@ import { linearInterpolator, stackData, thinIndices, + xAxisTickTarget, + applyEdgeLabels, axisPadForLabels, formatChartDatumValue, type Point, @@ -32,6 +34,7 @@ import { resolveTooltipMode, resolveSeries, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import styles from "./Chart.module.scss"; @@ -39,7 +42,8 @@ import styles from "./Chart.module.scss"; const clickIndexMeta = (index: number) => ({ index }); export interface StackedAreaChartProps - extends React.ComponentPropsWithoutRef<"div"> { + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { data: ChartDatum[]; /** * Pre-measurement width in pixels. Used as a fallback before @@ -107,6 +111,8 @@ export const StackedArea = React.forwardRef< formatValue, formatXLabel, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", initialWidth, className, ...props @@ -264,18 +270,20 @@ export const StackedArea = React.forwardRef< // X axis labels const xLabels = React.useMemo(() => { if (!xKey || data.length === 0 || plotWidth <= 0) return []; - const maxLabels = Math.max(2, Math.floor(plotWidth / 60)); + const labels = data.map((d) => { + const raw = d[xKey]; + return formatXLabel ? formatXLabel(raw) : formatChartDatumValue(raw); + }); + const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels); const indices = thinIndices(data.length, maxLabels); - return indices.map((i) => { + const xLabels = indices.map((i) => { const x = data.length === 1 ? plotWidth / 2 : (i / (data.length - 1)) * plotWidth; - const raw = data[i][xKey]; - const text = formatXLabel - ? formatXLabel(raw) - : formatChartDatumValue(raw); + const text = labels[i]; return { x, text, index: i }; }); - }, [xKey, data, plotWidth, formatXLabel]); + return applyEdgeLabels(xAxisEdgeLabels, xLabels); + }, [xKey, data, plotWidth, formatXLabel, xAxisLabels, xAxisEdgeLabels]); // Y axis labels const yLabels = React.useMemo(() => { @@ -558,9 +566,9 @@ export const StackedArea = React.forwardRef< y={plotHeight + 20} className={styles.axisLabel} textAnchor={ - i === 0 + labelIndex === 0 ? "start" - : i === xLabels.length - 1 + : labelIndex === data.length - 1 ? "end" : "middle" } diff --git a/packages/origin/src/components/Chart/WaterfallChart.tsx b/packages/origin/src/components/Chart/WaterfallChart.tsx index 13a3dba54..ac4100aa5 100644 --- a/packages/origin/src/components/Chart/WaterfallChart.tsx +++ b/packages/origin/src/components/Chart/WaterfallChart.tsx @@ -2,7 +2,14 @@ import * as React from "react"; import clsx from "clsx"; -import { linearScale, niceTicks, thinIndices, axisPadForLabels } from "./utils"; +import { + linearScale, + niceTicks, + thinIndices, + xAxisTickTarget, + applyEdgeLabels, + axisPadForLabels, +} from "./utils"; import { useResizeWidth } from "./hooks"; import { useMergedRef } from "./useMergedRef"; import { @@ -12,6 +19,7 @@ import { PAD_BOTTOM_AXIS, TOOLTIP_GAP, axisTickTarget, + type XAxisLabelProps, } from "./types"; import { ChartWrapper } from "./ChartWrapper"; import { useTrackedCallback } from "../Analytics/useTrackedCallback"; @@ -26,7 +34,8 @@ export interface WaterfallSegment { } export interface WaterfallChartProps - extends React.ComponentPropsWithoutRef<"div"> { + extends React.ComponentPropsWithoutRef<"div">, + XAxisLabelProps { data: WaterfallSegment[]; /** * Pre-measurement width in pixels. Used as a fallback before @@ -78,6 +87,8 @@ export const Waterfall = React.forwardRef( data, formatValue, formatYLabel, + xAxisLabels = "fixed", + xAxisEdgeLabels = "show", showConnectors = true, showValues = false, height = 300, @@ -317,9 +328,12 @@ export const Waterfall = React.forwardRef( }, [data.length]); const xLabelIndices = React.useMemo(() => { - const maxLabels = Math.max(2, Math.floor(plotWidth / 60)); - return thinIndices(data.length, maxLabels); - }, [data.length, plotWidth]); + const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => + data.map((d) => d.label), + ); + const indices = thinIndices(data.length, maxLabels); + return applyEdgeLabels(xAxisEdgeLabels, indices); + }, [data, plotWidth, xAxisLabels, xAxisEdgeLabels]); return ( = { solid: undefined, dashed: "4 4", diff --git a/packages/origin/src/components/Chart/utils.ts b/packages/origin/src/components/Chart/utils.ts index 3e659285c..bb7ad81cb 100644 --- a/packages/origin/src/components/Chart/utils.ts +++ b/packages/origin/src/components/Chart/utils.ts @@ -1,4 +1,9 @@ -import type { ChartDatum } from "./types"; +import { + axisTickTarget, + type ChartDatum, + type XAxisLabelsMode, + type XAxisEdgeLabelsMode, +} from "./types"; export const CHART_LABEL_FONT = '11px "Suisse Intl Mono", "SF Mono", Menlo, monospace'; @@ -29,11 +34,39 @@ export function dynamicTickTarget( axisLength: number, sampleTexts: string[], ): number { - if (sampleTexts.length === 0) return Math.max(2, Math.floor(axisLength / 60)); + if (sampleTexts.length === 0) return axisTickTarget(axisLength, true); const maxWidth = Math.max(...sampleTexts.map(measureLabelWidth)); return Math.max(2, Math.floor(axisLength / (maxWidth + LABEL_PADDING))); } +/** + * Pick the x-axis tick target for the given labels-thinning mode. `sampleTexts` + * is only evaluated in `"measured"` mode, so the default `"fixed"` path never + * builds or measures the label strings. + */ +export function xAxisTickTarget( + mode: XAxisLabelsMode, + axisLength: number, + sampleTexts: () => string[], +): number { + return mode === "measured" + ? dynamicTickTarget(axisLength, sampleTexts()) + : axisTickTarget(axisLength, true); +} + +/** Drop the first and last entry of an already-thinned label list (>2 items). */ +export function omitEdgeLabels(labels: T[]): T[] { + return labels.length > 2 ? labels.slice(1, -1) : labels; +} + +/** Apply the edge-labels mode to an already-thinned label list. */ +export function applyEdgeLabels( + mode: XAxisEdgeLabelsMode, + labels: T[], +): T[] { + return mode === "hide" ? omitEdgeLabels(labels) : labels; +} + /** Minimum left padding so very short labels (e.g. "0") don't crowd the axis. */ const MIN_AXIS_PAD = 24; /** Gap between label right edge and plot area left edge. */ From f7e42c2e8c69f725bb488b7b1848c48cff8a7802 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Tue, 9 Jun 2026 15:48:47 -0700 Subject: [PATCH 066/133] [origin] Fix long-list dropdown scrolling (#28492) ## Reason [DES-58](https://lightspark.atlassian.net/browse/DES-58) exposed that long PhoneInput country menus could be clipped because popup chrome and list scrolling were owned by the same element. This moves scroll ownership to the list for the ungrouped popup components that need bounded long-list behavior, while keeping the popup responsible for border, radius, shadow, and overflow clipping. ## Overview - Keep PhoneInput, Combobox, and Autocomplete popup chrome clipped while their listbox content owns max-height, padding, overscroll behavior, and vertical scrolling. - Add long-list stories and component tests for the affected components so the scroll boundary stays explicit. - Intentionally leave Select unchanged because grouped Select content still relies on popup-level scrolling. ## Storybook preview - Components/PhoneInput: LongCountryList: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28492/?path=/story/components-phoneinput--long-country-list - Components/Combobox: LongList: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28492/?path=/story/components-combobox--long-list - Components/Autocomplete: LongList: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28492/?path=/story/components-autocomplete--long-list ## Test Plan - yarn workspace @lightsparkdev/origin lint - yarn workspace @lightsparkdev/origin types - yarn workspace @lightsparkdev/origin test:ct src/components/Autocomplete/Autocomplete.test.tsx src/components/Combobox/Combobox.test.tsx src/components/PhoneInput/PhoneInput.test.tsx [DES-58]: https://lightspark.atlassian.net/browse/DES-58?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Cursor GitOrigin-RevId: f64eb0f37b312e55c51114f9f5638085870d2d05 --- .../Autocomplete/Autocomplete.module.scss | 2 +- .../Autocomplete/Autocomplete.stories.tsx | 32 +++++++ .../Autocomplete.test-stories.tsx | 33 +++++++ .../Autocomplete/Autocomplete.test.tsx | 89 +++++++++++++++++++ .../components/Combobox/Combobox.module.scss | 2 +- .../components/Combobox/Combobox.stories.tsx | 33 +++++++ .../Combobox/Combobox.test-stories.tsx | 31 +++++++ .../src/components/Combobox/Combobox.test.tsx | 70 +++++++++++++++ .../PhoneInput/PhoneInput.module.scss | 3 +- .../PhoneInput/PhoneInput.stories.tsx | 64 ++++++++++++- .../PhoneInput/PhoneInput.test-stories.tsx | 65 +++++++++++++- .../components/PhoneInput/PhoneInput.test.tsx | 69 ++++++++++++++ 12 files changed, 484 insertions(+), 9 deletions(-) diff --git a/packages/origin/src/components/Autocomplete/Autocomplete.module.scss b/packages/origin/src/components/Autocomplete/Autocomplete.module.scss index 76e6d42d8..22f7c669c 100644 --- a/packages/origin/src/components/Autocomplete/Autocomplete.module.scss +++ b/packages/origin/src/components/Autocomplete/Autocomplete.module.scss @@ -49,7 +49,6 @@ .popup { box-sizing: border-box; width: var(--anchor-width); - max-height: min(23rem, var(--available-height)); max-width: var(--available-width); overflow: hidden; background: var(--surface-primary); @@ -95,6 +94,7 @@ display: flex; gap: var(--spacing-2xs); align-items: center; + flex-shrink: 0; height: 36px; padding: var(--spacing-xs); @include smooth-corners(var(--corner-radius-xs)); diff --git a/packages/origin/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/origin/src/components/Autocomplete/Autocomplete.stories.tsx index fa5042b9c..fe548435f 100644 --- a/packages/origin/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/origin/src/components/Autocomplete/Autocomplete.stories.tsx @@ -21,6 +21,11 @@ const fruits: Fruit[] = [ { value: "honeydew", label: "Honeydew" }, ]; +const longFruits: Fruit[] = Array.from({ length: 40 }, (_, index) => ({ + value: `fruit-${index + 1}`, + label: `Fruit ${index + 1}`, +})); + const meta: Meta = { title: "Components/Autocomplete", component: Autocomplete.Root, @@ -62,6 +67,33 @@ export const Basic: Story = { ), }; +export const LongList: Story = { + render: () => ( +
+ item.label} + > + + + + + No results found. + + {(item: Fruit) => ( + + {item.label} + + )} + + + + + +
+ ), +}; + export const WithLeadingIcons: Story = { render: () => (
diff --git a/packages/origin/src/components/Autocomplete/Autocomplete.test-stories.tsx b/packages/origin/src/components/Autocomplete/Autocomplete.test-stories.tsx index bf93332e3..144425217 100644 --- a/packages/origin/src/components/Autocomplete/Autocomplete.test-stories.tsx +++ b/packages/origin/src/components/Autocomplete/Autocomplete.test-stories.tsx @@ -19,6 +19,11 @@ const fruits: Fruit[] = [ { value: "elderberry", label: "Elderberry" }, ]; +const longFruits: Fruit[] = Array.from({ length: 40 }, (_, index) => ({ + value: `fruit-${index + 1}`, + label: `Fruit ${index + 1}`, +})); + const groupedItems = [ { label: "Fruits", @@ -61,6 +66,34 @@ export function BasicAutocomplete() { ); } +/** + * Autocomplete with enough items to require list scrolling. + */ +export function LongListAutocomplete() { + return ( + item.label} + > + + + + + No results found. + + {(item: Fruit) => ( + + {item.label} + + )} + + + + + + ); +} + /** * Autocomplete with leading icons */ diff --git a/packages/origin/src/components/Autocomplete/Autocomplete.test.tsx b/packages/origin/src/components/Autocomplete/Autocomplete.test.tsx index d5446208f..d4053943e 100644 --- a/packages/origin/src/components/Autocomplete/Autocomplete.test.tsx +++ b/packages/origin/src/components/Autocomplete/Autocomplete.test.tsx @@ -1,6 +1,7 @@ import { test, expect } from "@playwright/experimental-ct-react"; import { BasicAutocomplete, + LongListAutocomplete, WithLeadingIcon, WithDisabledItems, DisabledAutocomplete, @@ -32,6 +33,94 @@ test.describe("Autocomplete", () => { await expect(page.getByRole("listbox")).toBeVisible(); }); + test("keeps long-list scrolling on the list", async ({ mount, page }) => { + const component = await mount(); + const input = component.getByPlaceholder("Search fruits..."); + + await input.focus(); + await input.press("ArrowDown"); + + const popup = page.getByTestId("autocomplete-long-list-popup"); + const listbox = page.getByTestId("autocomplete-long-list"); + await expect(listbox).toBeVisible(); + + const state = await listbox.evaluate((list) => { + const popup = document.querySelector( + '[data-testid="autocomplete-long-list-popup"]', + ); + const firstItem = list.querySelector('[role="option"]'); + + if (!(popup instanceof HTMLElement)) { + throw new Error("Autocomplete long-list popup is missing"); + } + + if (!(firstItem instanceof HTMLElement)) { + throw new Error("Autocomplete list is missing option rows"); + } + + const listStyles = window.getComputedStyle(list); + const popupStyles = window.getComputedStyle(popup); + const itemStyles = window.getComputedStyle(firstItem); + popup.scrollTop = popup.scrollHeight; + list.scrollTop = list.scrollHeight; + + return { + itemFlexShrink: itemStyles.flexShrink, + itemHeight: itemStyles.height, + itemRenderedHeight: firstItem.getBoundingClientRect().height, + popupMaxHeight: popupStyles.maxHeight, + popupOverflowY: popupStyles.overflowY, + popupHasScrollableOverflow: popup.scrollHeight > popup.clientHeight, + popupCanScroll: popup.scrollTop > 0, + listMaxHeight: listStyles.maxHeight, + listOverflowY: listStyles.overflowY, + listOverscrollBehaviorY: listStyles.overscrollBehaviorY, + listScrollPaddingBlockEnd: listStyles.scrollPaddingBlockEnd, + listScrollPaddingBlockStart: listStyles.scrollPaddingBlockStart, + listHasScrollableOverflow: list.scrollHeight > list.clientHeight, + listCanScroll: list.scrollTop > 0, + }; + }); + + expect(state.itemFlexShrink).toBe("0"); + expect(state.itemHeight).toBe("36px"); + expect(state.itemRenderedHeight).toBeGreaterThanOrEqual(34); + expect(state.popupMaxHeight).toBe("none"); + expect(state.popupOverflowY).toBe("hidden"); + expect(state.popupHasScrollableOverflow).toBe(false); + expect(state.popupCanScroll).toBe(false); + expect(state.listMaxHeight).not.toBe("none"); + expect(state.listOverflowY).toBe("auto"); + expect(state.listOverscrollBehaviorY).toBe("contain"); + expect( + Number.parseFloat(state.listScrollPaddingBlockStart), + ).toBeGreaterThan(0); + expect( + Number.parseFloat(state.listScrollPaddingBlockEnd), + ).toBeGreaterThan(0); + expect(state.listHasScrollableOverflow).toBe(true); + expect(state.listCanScroll).toBe(true); + + await expect(popup).toBeVisible(); + await expect( + page.getByRole("option", { name: "Fruit 40" }), + ).toBeVisible(); + }); + + test("filters long-list object items by label", async ({ mount, page }) => { + const component = await mount(); + const input = component.getByPlaceholder("Search fruits..."); + + await input.fill("40"); + + await expect( + page.getByRole("option", { name: "Fruit 40" }), + ).toBeVisible(); + await expect( + page.getByRole("option", { name: "Fruit 1" }), + ).not.toBeVisible(); + }); + test("filters items as user types", async ({ mount, page }) => { const component = await mount(); const input = component.getByPlaceholder("Search fruits..."); diff --git a/packages/origin/src/components/Combobox/Combobox.module.scss b/packages/origin/src/components/Combobox/Combobox.module.scss index 065f5a402..2426280d3 100644 --- a/packages/origin/src/components/Combobox/Combobox.module.scss +++ b/packages/origin/src/components/Combobox/Combobox.module.scss @@ -170,7 +170,6 @@ .popup { box-sizing: border-box; width: var(--anchor-width); - max-height: min(23rem, var(--available-height)); max-width: var(--available-width); overflow: hidden; background: var(--surface-primary); @@ -216,6 +215,7 @@ display: flex; gap: var(--spacing-2xs); align-items: center; + flex-shrink: 0; height: 36px; padding: var(--spacing-xs); @include smooth-corners(var(--corner-radius-xs)); diff --git a/packages/origin/src/components/Combobox/Combobox.stories.tsx b/packages/origin/src/components/Combobox/Combobox.stories.tsx index 3c5d69729..7e67d27a3 100644 --- a/packages/origin/src/components/Combobox/Combobox.stories.tsx +++ b/packages/origin/src/components/Combobox/Combobox.stories.tsx @@ -27,6 +27,11 @@ const fruits = [ "Lemon", ]; +const longFruits = Array.from( + { length: 40 }, + (_, index) => `Fruit ${index + 1}`, +); + export const Default: Story = { args: { disabled: false, @@ -58,6 +63,34 @@ export const Default: Story = { ), }; +export const LongList: Story = { + render: () => ( + + + + + + + + + + + + + {(item: string) => ( + + + {item} + + )} + + + + + + ), +}; + export const WithClear: Story = { render: () => ( diff --git a/packages/origin/src/components/Combobox/Combobox.test-stories.tsx b/packages/origin/src/components/Combobox/Combobox.test-stories.tsx index e2ee1ae71..aeddfc107 100644 --- a/packages/origin/src/components/Combobox/Combobox.test-stories.tsx +++ b/packages/origin/src/components/Combobox/Combobox.test-stories.tsx @@ -12,6 +12,11 @@ const fruits = [ "Grape", ]; +const longFruits = Array.from( + { length: 40 }, + (_, index) => `Fruit ${index + 1}`, +); + /** InputWrapper conformance - forwards props, ref, className */ export function ConformanceInputWrapper( props: React.HTMLAttributes, @@ -99,6 +104,32 @@ export const TestCombobox = () => ( ); +export const TestComboboxLongList = () => ( + + + + + + + + + + + + + {(item: string) => ( + + + {item} + + )} + + + + + +); + export const TestComboboxMultiple = () => ( diff --git a/packages/origin/src/components/Combobox/Combobox.test.tsx b/packages/origin/src/components/Combobox/Combobox.test.tsx index 961561a50..f114add4f 100644 --- a/packages/origin/src/components/Combobox/Combobox.test.tsx +++ b/packages/origin/src/components/Combobox/Combobox.test.tsx @@ -1,6 +1,7 @@ import { test, expect } from "@playwright/experimental-ct-react"; import { TestCombobox, + TestComboboxLongList, TestComboboxMultiple, TestComboboxDisabled, TestComboboxDefaultValue, @@ -57,6 +58,75 @@ test.describe("Combobox", () => { await expect(page.getByRole("option", { name: "Grape" })).toBeVisible(); }); + test("keeps long-list scrolling on the list", async ({ mount, page }) => { + const component = await mount(); + const input = component.getByPlaceholder("Select a fruit..."); + + await input.click(); + + const popup = page.getByTestId("combobox-long-list-popup"); + const listbox = page.getByTestId("combobox-long-list"); + await expect(listbox).toBeVisible(); + + const state = await listbox.evaluate((list) => { + const popup = document.querySelector( + '[data-testid="combobox-long-list-popup"]', + ); + const firstItem = list.querySelector('[role="option"]'); + + if (!(popup instanceof HTMLElement)) { + throw new Error("Combobox long-list popup is missing"); + } + + if (!(firstItem instanceof HTMLElement)) { + throw new Error("Combobox list is missing option rows"); + } + + const listStyles = window.getComputedStyle(list); + const popupStyles = window.getComputedStyle(popup); + const itemStyles = window.getComputedStyle(firstItem); + popup.scrollTop = popup.scrollHeight; + list.scrollTop = list.scrollHeight; + + return { + itemFlexShrink: itemStyles.flexShrink, + popupMaxHeight: popupStyles.maxHeight, + popupOverflowY: popupStyles.overflowY, + popupHasScrollableOverflow: popup.scrollHeight > popup.clientHeight, + popupCanScroll: popup.scrollTop > 0, + listMaxHeight: listStyles.maxHeight, + listOverflowY: listStyles.overflowY, + listOverscrollBehaviorY: listStyles.overscrollBehaviorY, + listScrollPaddingBlockEnd: listStyles.scrollPaddingBlockEnd, + listScrollPaddingBlockStart: listStyles.scrollPaddingBlockStart, + listHasScrollableOverflow: list.scrollHeight > list.clientHeight, + listCanScroll: list.scrollTop > 0, + }; + }); + + expect(state.itemFlexShrink).toBe("0"); + expect(state.popupMaxHeight).toBe("none"); + expect(state.popupOverflowY).toBe("hidden"); + expect(state.popupHasScrollableOverflow).toBe(false); + expect(state.popupCanScroll).toBe(false); + expect(state.listMaxHeight).not.toBe("none"); + expect(state.listOverflowY).toBe("auto"); + expect(state.listOverscrollBehaviorY).toBe("contain"); + expect( + Number.parseFloat(state.listScrollPaddingBlockStart), + ).toBeGreaterThan(0); + expect( + Number.parseFloat(state.listScrollPaddingBlockEnd), + ).toBeGreaterThan(0); + expect(state.listHasScrollableOverflow).toBe(true); + expect(state.listCanScroll).toBe(true); + + await expect(popup).toBeVisible(); + await expect( + page.getByRole("option", { name: "Fruit 40" }), + ).toBeVisible(); + }); + test("shows empty state when no matches", async ({ mount, page }) => { const component = await mount(); const input = component.getByPlaceholder("Select a fruit..."); diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.module.scss b/packages/origin/src/components/PhoneInput/PhoneInput.module.scss index f85577bc5..090898333 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.module.scss +++ b/packages/origin/src/components/PhoneInput/PhoneInput.module.scss @@ -135,7 +135,6 @@ .popup { box-sizing: border-box; width: var(--anchor-width); - max-height: min(23rem, var(--available-height)); overflow: hidden; background: var(--surface-primary); border: var(--stroke-xs) solid var(--border-primary); @@ -163,6 +162,7 @@ display: flex; flex-direction: column; gap: var(--spacing-4xs); + max-height: min(23rem, var(--available-height)); padding: var(--spacing-3xs); overflow-y: auto; overscroll-behavior: contain; @@ -175,6 +175,7 @@ display: flex; gap: var(--spacing-xs); align-items: center; + flex-shrink: 0; height: 36px; padding: var(--spacing-xs); @include smooth-corners(var(--corner-radius-xs)); diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx index 9031cf198..cdbdef6d2 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx @@ -5,7 +5,13 @@ import type { Meta, StoryObj } from "@storybook/react"; import { PhoneInput } from "./"; import { Field } from "@/components/Field"; -const exampleCountries = [ +interface Country { + code: string; + name: string; + dialCode: string; +} + +const exampleCountries: Country[] = [ { code: "US", name: "United States", dialCode: "+1" }, { code: "GB", name: "United Kingdom", dialCode: "+44" }, { code: "DE", name: "Germany", dialCode: "+49" }, @@ -18,7 +24,48 @@ const exampleCountries = [ { code: "MX", name: "Mexico", dialCode: "+52" }, ]; -type Country = (typeof exampleCountries)[number]; +const longExampleCountries: Country[] = [ + { code: "US", name: "United States", dialCode: "+1" }, + { code: "CA", name: "Canada", dialCode: "+1" }, + { code: "MX", name: "Mexico", dialCode: "+52" }, + { code: "BR", name: "Brazil", dialCode: "+55" }, + { code: "AR", name: "Argentina", dialCode: "+54" }, + { code: "GB", name: "United Kingdom", dialCode: "+44" }, + { code: "IE", name: "Ireland", dialCode: "+353" }, + { code: "FR", name: "France", dialCode: "+33" }, + { code: "DE", name: "Germany", dialCode: "+49" }, + { code: "NL", name: "Netherlands", dialCode: "+31" }, + { code: "BE", name: "Belgium", dialCode: "+32" }, + { code: "ES", name: "Spain", dialCode: "+34" }, + { code: "PT", name: "Portugal", dialCode: "+351" }, + { code: "IT", name: "Italy", dialCode: "+39" }, + { code: "CH", name: "Switzerland", dialCode: "+41" }, + { code: "AT", name: "Austria", dialCode: "+43" }, + { code: "SE", name: "Sweden", dialCode: "+46" }, + { code: "NO", name: "Norway", dialCode: "+47" }, + { code: "DK", name: "Denmark", dialCode: "+45" }, + { code: "FI", name: "Finland", dialCode: "+358" }, + { code: "PL", name: "Poland", dialCode: "+48" }, + { code: "CZ", name: "Czechia", dialCode: "+420" }, + { code: "GR", name: "Greece", dialCode: "+30" }, + { code: "TR", name: "Turkey", dialCode: "+90" }, + { code: "IL", name: "Israel", dialCode: "+972" }, + { code: "AE", name: "United Arab Emirates", dialCode: "+971" }, + { code: "IN", name: "India", dialCode: "+91" }, + { code: "SG", name: "Singapore", dialCode: "+65" }, + { code: "JP", name: "Japan", dialCode: "+81" }, + { code: "KR", name: "South Korea", dialCode: "+82" }, + { code: "CN", name: "China", dialCode: "+86" }, + { code: "HK", name: "Hong Kong", dialCode: "+852" }, + { code: "TW", name: "Taiwan", dialCode: "+886" }, + { code: "AU", name: "Australia", dialCode: "+61" }, + { code: "NZ", name: "New Zealand", dialCode: "+64" }, + { code: "ZA", name: "South Africa", dialCode: "+27" }, + { code: "EG", name: "Egypt", dialCode: "+20" }, + { code: "NG", name: "Nigeria", dialCode: "+234" }, + { code: "KE", name: "Kenya", dialCode: "+254" }, + { code: "ZW", name: "Zimbabwe", dialCode: "+263" }, +]; function getFlagUrl(code: string) { return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`; @@ -42,10 +89,12 @@ function PhoneInputExample({ disabled = false, placeholder = "Enter phone", defaultCountry = exampleCountries[0], + countries = exampleCountries, }: { disabled?: boolean; placeholder?: string; defaultCountry?: Country; + countries?: Country[]; }) { const [selectedCountry, setSelectedCountry] = React.useState(defaultCountry); @@ -73,7 +122,7 @@ function PhoneInputExample({ - {exampleCountries.map((country) => ( + {countries.map((country) => ( @@ -108,6 +157,15 @@ export const WithDefaultCountry: StoryObj = { render: () => , }; +export const LongCountryList: StoryObj = { + render: () => ( + + ), +}; + // Controlled example with form function ControlledExample() { const [selectedCountry, setSelectedCountry] = React.useState( diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx index 5e0cca3a1..68cd23c9a 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx @@ -3,8 +3,14 @@ import * as React from "react"; import { PhoneInput } from "./"; +interface Country { + code: string; + name: string; + dialCode: string; +} + // Mock country data for tests -const mockCountries = [ +const mockCountries: Country[] = [ { code: "US", name: "United States", dialCode: "+1" }, { code: "GB", name: "United Kingdom", dialCode: "+44" }, { code: "DE", name: "Germany", dialCode: "+49" }, @@ -12,7 +18,48 @@ const mockCountries = [ { code: "JP", name: "Japan", dialCode: "+81" }, ]; -type Country = (typeof mockCountries)[number]; +const longCountries: Country[] = [ + { code: "US", name: "United States", dialCode: "+1" }, + { code: "CA", name: "Canada", dialCode: "+1" }, + { code: "MX", name: "Mexico", dialCode: "+52" }, + { code: "BR", name: "Brazil", dialCode: "+55" }, + { code: "AR", name: "Argentina", dialCode: "+54" }, + { code: "GB", name: "United Kingdom", dialCode: "+44" }, + { code: "IE", name: "Ireland", dialCode: "+353" }, + { code: "FR", name: "France", dialCode: "+33" }, + { code: "DE", name: "Germany", dialCode: "+49" }, + { code: "NL", name: "Netherlands", dialCode: "+31" }, + { code: "BE", name: "Belgium", dialCode: "+32" }, + { code: "ES", name: "Spain", dialCode: "+34" }, + { code: "PT", name: "Portugal", dialCode: "+351" }, + { code: "IT", name: "Italy", dialCode: "+39" }, + { code: "CH", name: "Switzerland", dialCode: "+41" }, + { code: "AT", name: "Austria", dialCode: "+43" }, + { code: "SE", name: "Sweden", dialCode: "+46" }, + { code: "NO", name: "Norway", dialCode: "+47" }, + { code: "DK", name: "Denmark", dialCode: "+45" }, + { code: "FI", name: "Finland", dialCode: "+358" }, + { code: "PL", name: "Poland", dialCode: "+48" }, + { code: "CZ", name: "Czechia", dialCode: "+420" }, + { code: "GR", name: "Greece", dialCode: "+30" }, + { code: "TR", name: "Turkey", dialCode: "+90" }, + { code: "IL", name: "Israel", dialCode: "+972" }, + { code: "AE", name: "United Arab Emirates", dialCode: "+971" }, + { code: "IN", name: "India", dialCode: "+91" }, + { code: "SG", name: "Singapore", dialCode: "+65" }, + { code: "JP", name: "Japan", dialCode: "+81" }, + { code: "KR", name: "South Korea", dialCode: "+82" }, + { code: "CN", name: "China", dialCode: "+86" }, + { code: "HK", name: "Hong Kong", dialCode: "+852" }, + { code: "TW", name: "Taiwan", dialCode: "+886" }, + { code: "AU", name: "Australia", dialCode: "+61" }, + { code: "NZ", name: "New Zealand", dialCode: "+64" }, + { code: "ZA", name: "South Africa", dialCode: "+27" }, + { code: "EG", name: "Egypt", dialCode: "+20" }, + { code: "NG", name: "Nigeria", dialCode: "+234" }, + { code: "KE", name: "Kenya", dialCode: "+254" }, + { code: "ZW", name: "Zimbabwe", dialCode: "+263" }, +]; // Circle-flags CDN URL helper function getFlagUrl(code: string) { @@ -24,6 +71,7 @@ interface PhoneInputStoryProps { disabled?: boolean; invalid?: boolean; placeholder?: string; + countries?: Country[]; } function PhoneInputStory({ @@ -31,6 +79,7 @@ function PhoneInputStory({ disabled = false, invalid = false, placeholder = "Enter phone", + countries = mockCountries, }: PhoneInputStoryProps) { const [selectedCountry, setSelectedCountry] = React.useState(defaultCountry); @@ -57,7 +106,7 @@ function PhoneInputStory({ - {mockCountries.map((country) => ( + {countries.map((country) => ( @@ -105,6 +154,16 @@ export function CustomPlaceholder() { return ; } +// Long list matching real country selector density +export function LongCountryList() { + return ( + + ); +} + // Controlled with phone number pre-filled export function WithPhoneNumber() { const [selectedCountry, setSelectedCountry] = React.useState( diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx index 8b0aeede1..e0943b98b 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx @@ -6,6 +6,7 @@ import { Disabled, Invalid, CustomPlaceholder, + LongCountryList, WithPhoneNumber, } from "./PhoneInput.test-stories"; @@ -56,6 +57,74 @@ test.describe("PhoneInput", () => { ).toBeVisible(); }); + test("bounds long country lists and lets the list scroll", async ({ + mount, + page, + }) => { + await mount(); + + const trigger = page.getByRole("combobox"); + await trigger.click(); + + const popup = page.locator("[data-phone-input-popup]"); + const listbox = page.getByRole("listbox"); + await expect(listbox).toBeVisible(); + + const listState = await listbox.evaluate((list) => { + const popup = document.querySelector("[data-phone-input-popup]"); + const firstItem = list.querySelector('[role="option"]'); + + if (!(popup instanceof HTMLElement)) { + throw new Error("PhoneInput long-list popup is missing"); + } + + if (!(firstItem instanceof HTMLElement)) { + throw new Error("PhoneInput list is missing option rows"); + } + + const listStyles = window.getComputedStyle(list); + const popupStyles = window.getComputedStyle(popup); + const itemStyles = window.getComputedStyle(firstItem); + popup.scrollTop = popup.scrollHeight; + list.scrollTop = list.scrollHeight; + + return { + itemFlexShrink: itemStyles.flexShrink, + popupMaxHeight: popupStyles.maxHeight, + popupOverflowY: popupStyles.overflowY, + popupHasScrollableOverflow: popup.scrollHeight > popup.clientHeight, + popupCanScroll: popup.scrollTop > 0, + maxHeight: listStyles.maxHeight, + overflowY: listStyles.overflowY, + overscrollBehaviorY: listStyles.overscrollBehaviorY, + scrollPaddingBlockEnd: listStyles.scrollPaddingBlockEnd, + scrollPaddingBlockStart: listStyles.scrollPaddingBlockStart, + hasScrollableOverflow: list.scrollHeight > list.clientHeight, + canScroll: list.scrollTop > 0, + }; + }); + + expect(listState.itemFlexShrink).toBe("0"); + expect(listState.popupMaxHeight).toBe("none"); + expect(listState.popupOverflowY).toBe("hidden"); + expect(listState.popupHasScrollableOverflow).toBe(false); + expect(listState.popupCanScroll).toBe(false); + expect(listState.maxHeight).not.toBe("none"); + expect(listState.overflowY).toBe("auto"); + expect(listState.overscrollBehaviorY).toBe("contain"); + expect( + Number.parseFloat(listState.scrollPaddingBlockStart), + ).toBeGreaterThan(0); + expect(Number.parseFloat(listState.scrollPaddingBlockEnd)).toBeGreaterThan( + 0, + ); + expect(listState.hasScrollableOverflow).toBe(true); + expect(listState.canScroll).toBe(true); + + await expect(popup).toBeVisible(); + await expect(page.getByRole("option", { name: /Zimbabwe/ })).toBeVisible(); + }); + test("can select a different country", async ({ mount, page }) => { await mount(); From 7ad22a74050c898d2b2092b8e346b986695923ca Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Wed, 10 Jun 2026 17:38:22 -0700 Subject: [PATCH 067/133] [origin] Default combobox clear to active (#28544) ## Reason [DES-36](https://lightspark.atlassian.net/browse/DES-36) needs edit-existing forms to avoid showing a noisy clear affordance for saved country/nationality values until the user is actually interacting with the field. Origin now makes that active behavior the default so consumers get the quieter edit-existing state without product-level props. ## Overview Adds `visibility` to `Combobox.Clear` with `active` and `always` modes while preserving Base UI's ownership of clear behavior and clearable state. `active` is the new default: the clear affordance is hidden at rest and appears while the field is focused or open. This intentionally changes existing `` consumers from "always visible when clearable" to "visible while active when clearable." Consumers that need the previous/create-flow behavior can opt into `visibility="always"`. Consumers that should not expose a clear affordance should omit ``. ## QA Notes Existing Combobox.Clear consumers should be checked with the new default in mind: - Edit-existing surfaces should no longer show the clear icon at rest when they load with saved values. - Focusing/opening the combobox should reveal the clear affordance when Base UI reports a clearable value. - Create/select flows that want the clear icon visible while a value exists should use `visibility="always"`. - Flows that should not offer clearing should omit ``. ## Storybook preview - Components/Combobox / Default: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28544/?path=/story/components-combobox--default - Components/Combobox / Default Active Clear: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28544/?path=/story/components-combobox--with-clear - Components/Combobox / Always Clear: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28544/?path=/story/components-combobox--always-clear ## Test Plan - `mise exec -- node -v` -> `v20.19.6` - `mise exec -- corepack yarn --version` -> `4.13.0` - `mise exec -- corepack yarn workspace @lightsparkdev/origin playwright test -c playwright-ct.config.ts src/components/Combobox/Combobox.test.tsx` - `mise exec -- corepack yarn workspace @lightsparkdev/origin types` - `mise exec -- corepack yarn workspace @lightsparkdev/origin lint` (passes with existing warnings in DatePicker/Sidebar) - `mise exec -- corepack yarn workspace @lightsparkdev/origin format` [DES-36]: https://lightspark.atlassian.net/browse/DES-36?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Cursor GitOrigin-RevId: 9423d49750e801bb7e60f4a26b75457040dd226d --- .../components/Combobox/Combobox.module.scss | 20 +++- .../components/Combobox/Combobox.stories.tsx | 54 +++++++++-- .../Combobox/Combobox.test-stories.tsx | 25 ++++- .../src/components/Combobox/Combobox.test.tsx | 94 ++++++++++++++++++- .../origin/src/components/Combobox/index.ts | 1 + .../origin/src/components/Combobox/parts.tsx | 47 ++++++++-- packages/origin/src/index.ts | 4 + packages/origin/tsconfig.json | 2 +- packages/origin/type-tests/combobox-clear.tsx | 7 ++ 9 files changed, 231 insertions(+), 23 deletions(-) create mode 100644 packages/origin/type-tests/combobox-clear.tsx diff --git a/packages/origin/src/components/Combobox/Combobox.module.scss b/packages/origin/src/components/Combobox/Combobox.module.scss index 2426280d3..c675f6e78 100644 --- a/packages/origin/src/components/Combobox/Combobox.module.scss +++ b/packages/origin/src/components/Combobox/Combobox.module.scss @@ -24,7 +24,10 @@ padding-left: var(--spacing-2xs); } - &:has(.clear:not([hidden])) { + &:has(.clearAlways:not([hidden])), + &:focus-within:has(.clearActive:not([hidden])), + &[data-focused]:has(.clearActive:not([hidden])), + &[data-popup-open]:has(.clearActive:not([hidden])) { padding-right: calc(var(--spacing-xs) + 42px); } @@ -129,7 +132,6 @@ .clear { box-sizing: border-box; - display: flex; align-items: center; justify-content: center; flex-shrink: 0; @@ -157,6 +159,20 @@ } } +.clearActive { + display: none; +} + +.inputWrapper:focus-within .clearActive:not([hidden]), +.inputWrapper[data-focused] .clearActive:not([hidden]), +.inputWrapper[data-popup-open] .clearActive:not([hidden]) { + display: flex; +} + +.clearAlways:not([hidden]) { + display: flex; +} + .clear svg { width: 17px; height: 17px; diff --git a/packages/origin/src/components/Combobox/Combobox.stories.tsx b/packages/origin/src/components/Combobox/Combobox.stories.tsx index 7e67d27a3..4ad121e0f 100644 --- a/packages/origin/src/components/Combobox/Combobox.stories.tsx +++ b/packages/origin/src/components/Combobox/Combobox.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { useState } from "react"; -import { Combobox } from "./index"; +import { Combobox, type ComboboxClearProps } from "./index"; import { Field } from "@/components/Field"; const meta: Meta = { @@ -36,6 +36,14 @@ export const Default: Story = { args: { disabled: false, }, + parameters: { + docs: { + description: { + story: + "No-clear reference. Omit Combobox.Clear when a flow should not expose a clear affordance.", + }, + }, + }, render: (args) => ( @@ -91,13 +99,22 @@ export const LongList: Story = { ), }; -export const WithClear: Story = { - render: () => ( +function ClearStory({ + visibility, + label, +}: { + visibility?: ComboboxClearProps["visibility"]; + label: string; +}) { + return ( - + - + @@ -117,7 +134,32 @@ export const WithClear: Story = { - ), + ); +} + +export const WithClear: Story = { + name: "Default Active Clear", + parameters: { + docs: { + description: { + story: + "Default edit-existing flow. The clear affordance is hidden at rest, appears while the field is focused or open, and is removed by Base UI once the value is cleared.", + }, + }, + }, + render: () => , +}; + +export const AlwaysClear: Story = { + parameters: { + docs: { + description: { + story: + "Opt in when a clear affordance should remain visible while the value is clearable. Base UI still removes it once the value is cleared.", + }, + }, + }, + render: () => , }; function MultipleField({ diff --git a/packages/origin/src/components/Combobox/Combobox.test-stories.tsx b/packages/origin/src/components/Combobox/Combobox.test-stories.tsx index aeddfc107..7b435533a 100644 --- a/packages/origin/src/components/Combobox/Combobox.test-stories.tsx +++ b/packages/origin/src/components/Combobox/Combobox.test-stories.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { useState } from "react"; -import { Combobox } from "./index"; +import { Combobox, type ComboboxClearProps } from "./index"; const fruits = [ "Apple", @@ -307,12 +307,22 @@ export const TestComboboxWithGroups = () => ( ); -export const TestComboboxWithClear = () => ( +export const TestComboboxWithClear = ({ + clearClassName, + visibility, +}: { + clearClassName?: ComboboxClearProps["className"]; + visibility?: ComboboxClearProps["visibility"]; +} = {}) => ( - + - + @@ -333,3 +343,10 @@ export const TestComboboxWithClear = () => ( ); + +export const TestComboboxWithClearClassNameCallback = () => ( + (state.open ? "clear-open" : "clear-closed")} + visibility="always" + /> +); diff --git a/packages/origin/src/components/Combobox/Combobox.test.tsx b/packages/origin/src/components/Combobox/Combobox.test.tsx index f114add4f..f68d0c468 100644 --- a/packages/origin/src/components/Combobox/Combobox.test.tsx +++ b/packages/origin/src/components/Combobox/Combobox.test.tsx @@ -8,6 +8,7 @@ import { TestComboboxControlled, TestComboboxWithGroups, TestComboboxWithClear, + TestComboboxWithClearClassNameCallback, TestComboboxChipPassThrough, ConformanceInputWrapper, ConformanceActionButtons, @@ -270,14 +271,103 @@ test.describe("Combobox", () => { }); test.describe("clear button", () => { - test("clears selection on click", async ({ mount }) => { + test("defaults to active visibility and clears selection on click", async ({ + mount, + page, + }) => { const component = await mount(); const input = component.getByPlaceholder("Select a fruit..."); - const clear = component.locator('button[class*="clear"]'); + const clear = component.getByRole("button", { + name: "Clear selection", + includeHidden: true, + }); + + await expect(input).toHaveValue("Apple"); + await expect(clear).toHaveCSS("display", "none"); + + await input.click(); + await expect(page.getByRole("listbox")).toBeVisible(); + await expect(clear).toBeVisible(); + await clear.click(); + await expect(input).toHaveValue(""); + }); + + test("always clear remains visible while clearable", async ({ mount }) => { + const component = await mount( + , + ); + const input = component.getByPlaceholder("Select a fruit..."); + const clear = component.getByRole("button", { name: "Clear selection" }); await expect(input).toHaveValue("Apple"); + await expect(clear).toBeVisible(); + await expect(clear).not.toHaveAttribute("visibility", "always"); + await expect(clear).not.toHaveAttribute( + "data-clear-visibility", + "always", + ); await clear.click(); await expect(input).toHaveValue(""); + await expect(clear).toBeHidden(); + }); + + test("preserves Base UI stateful clear className callback", async ({ + mount, + }) => { + const component = await mount(); + const clear = component.getByRole("button", { name: "Clear selection" }); + + await expect(clear).toHaveClass(/clear-closed/); + }); + + test("active clear is hidden at rest and appears while focused or open", async ({ + mount, + page, + }) => { + const component = await mount( + , + ); + const input = component.getByPlaceholder("Select a fruit..."); + const wrapper = page.getByTestId("combobox-clear-wrapper"); + const clear = component.getByRole("button", { + name: "Clear selection", + includeHidden: true, + }); + + const restingPadding = await wrapper.evaluate((element) => + Number.parseFloat(window.getComputedStyle(element).paddingRight), + ); + + await expect(input).toHaveValue("Apple"); + await expect(clear).toHaveCSS("display", "none"); + await expect( + component.getByRole("button", { name: "Clear selection" }), + ).toBeHidden(); + + await input.click(); + await expect(page.getByRole("listbox")).toBeVisible(); + await expect(clear).toBeVisible(); + + const activePadding = await wrapper.evaluate((element) => + Number.parseFloat(window.getComputedStyle(element).paddingRight), + ); + expect(activePadding).toBeGreaterThan(restingPadding); + + await clear.click(); + await expect(input).toHaveValue(""); + }); + + test("omitting Clear does not render the clear affordance", async ({ + mount, + }) => { + const component = await mount(); + + await expect( + component.getByRole("button", { + name: "Clear selection", + includeHidden: true, + }), + ).toHaveCount(0); }); }); diff --git a/packages/origin/src/components/Combobox/index.ts b/packages/origin/src/components/Combobox/index.ts index b1c995f8e..c1601d3c1 100644 --- a/packages/origin/src/components/Combobox/index.ts +++ b/packages/origin/src/components/Combobox/index.ts @@ -9,6 +9,7 @@ export type { ActionButtonsProps as ComboboxActionButtonsProps, TriggerProps as ComboboxTriggerProps, ClearProps as ComboboxClearProps, + ClearVisibility as ComboboxClearVisibility, PortalProps as ComboboxPortalProps, PositionerProps as ComboboxPositionerProps, PopupProps as ComboboxPopupProps, diff --git a/packages/origin/src/components/Combobox/parts.tsx b/packages/origin/src/components/Combobox/parts.tsx index ccdb6b8e8..d616accd1 100644 --- a/packages/origin/src/components/Combobox/parts.tsx +++ b/packages/origin/src/components/Combobox/parts.tsx @@ -141,22 +141,53 @@ export const Trigger = React.forwardRef( }, ); -export interface ClearProps extends BaseCombobox.Clear.Props {} +export type ClearVisibility = "always" | "active"; + +export interface ClearProps + extends Omit { + /** + * Controls when Origin shows the clear affordance. Base UI still owns the + * clear behavior and whether a value is currently clearable. Defaults to + * "active", which shows the affordance while the field is focused or open. + */ + visibility?: ClearVisibility; + /** + * Unsupported in Origin. Clear visibility relies on Base UI unmounting or + * hiding the button when the value is not clearable. + */ + keepMounted?: never; +} /** * Combobox.Clear - Button to clear the selection. * * Renders as a small icon button with the X icon. - * Uses Base UI's default behavior - only visible when there's a value to clear. + * Uses Base UI's default behavior - only rendered when there's a value to clear. */ export const Clear = React.forwardRef( - function Clear({ className, children, ...props }, ref) { + function Clear( + { + className, + children, + keepMounted: _keepMounted, + visibility = "active", + ...props + }, + ref, + ) { + const originClassName = [ + styles.clear, + visibility === "active" && styles.clearActive, + visibility === "always" && styles.clearAlways, + ]; + const clearClassName = + typeof className === "function" + ? (state: BaseCombobox.Clear.State) => + clsx(originClassName, className(state)) + : clsx(originClassName, className); + return ( - + {children ?? } ); diff --git a/packages/origin/src/index.ts b/packages/origin/src/index.ts index 0b39f5706..45712aeb4 100644 --- a/packages/origin/src/index.ts +++ b/packages/origin/src/index.ts @@ -37,6 +37,10 @@ export type { export { Checkbox } from "./components/Checkbox"; export { Command } from "./components/Command"; export { Combobox } from "./components/Combobox"; +export type { + ComboboxClearProps, + ComboboxClearVisibility, +} from "./components/Combobox"; export { ContextMenu } from "./components/ContextMenu"; export { Dialog } from "./components/Dialog"; export { Drawer, createHandle } from "./components/Drawer"; diff --git a/packages/origin/tsconfig.json b/packages/origin/tsconfig.json index c964159ec..41b42e44d 100644 --- a/packages/origin/tsconfig.json +++ b/packages/origin/tsconfig.json @@ -15,7 +15,7 @@ "@test-utils/*": ["./test-utils/*"] } }, - "include": ["src/**/*.ts", "src/**/*.tsx"], + "include": ["src/**/*.ts", "src/**/*.tsx", "type-tests/**/*.tsx"], "exclude": [ "node_modules", "tools", diff --git a/packages/origin/type-tests/combobox-clear.tsx b/packages/origin/type-tests/combobox-clear.tsx new file mode 100644 index 000000000..bdb448fc7 --- /dev/null +++ b/packages/origin/type-tests/combobox-clear.tsx @@ -0,0 +1,7 @@ +import { Combobox } from "../src"; + + (state.open ? "open" : "closed")} />; + +// Origin clear visibility depends on Base UI owning mount/hidden state. +// @ts-expect-error keepMounted is intentionally not part of the Origin API. +; From ddf20c0cfdcf56ec4f914df7aed656c0746be4d4 Mon Sep 17 00:00:00 2001 From: kphurley7 Date: Wed, 10 Jun 2026 19:11:44 -0700 Subject: [PATCH 068/133] chore(js): remove unused static logo asset (#28518) ## Summary Removes the unused `js/packages/static/images/lightspark-logo.svg` asset. The `@lightsparkdev/static` workspace metadata is intentionally kept so this cleanup does not require a `js/yarn.lock` update. Fully removing the workspace package would require a JS dependency maintainer to recreate the lockfile change because CI gates lockfile changes by push actor. - The SVG is referenced nowhere in code. - The `static/images/...` imports elsewhere resolve to `packages/ui/src/static/`, not this package. - The old infra sync for `js/packages/static/` was removed after the logo moved to `sparkcore/sparkcore/static/`. ## Why this PR should exist The asset is orphaned and creates audit noise. Removing only the unused file is low-risk and avoids unrelated dependency-lockfile churn. ## Testing - `yarn install --immutable` - `rg -n '@lightsparkdev/static|packages/static|static/images/lightspark-logo|lightspark-logo.svg' js -g '!yarn.lock'` --------- Co-authored-by: Claude Fable 5 GitOrigin-RevId: f19bf82424df3ddb155dcb608bf22ad9f2f75e43 --- packages/static/images/lightspark-logo.svg | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 packages/static/images/lightspark-logo.svg diff --git a/packages/static/images/lightspark-logo.svg b/packages/static/images/lightspark-logo.svg deleted file mode 100644 index 387d07084..000000000 --- a/packages/static/images/lightspark-logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - From 779ce90665e5d1d76e23db6f2a1b5db945e7eeb4 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 11 Jun 2026 08:43:18 -0700 Subject: [PATCH 069/133] DES-51: add Nage phone input foundation (#28445) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - Recreates the DES-51 Nage phone input foundation on a fresh branch from current `origin/main` to avoid the superseded PR's lockfile guard history issue. - Introduces E.164-only parsing helpers plus an Origin `PhoneInput`/`Field` backed component using local round country flag assets. - Refactors the field around a single parsed draft model, keeps external `value` as canonical E.164, and delays internal validation visibility until blur unless a previously accepted value becomes invalid. - Covers country-change behavior, controlled value sync, validation notifications, repeated invalid edits, delayed internal error visibility, and the `+447911123456` Crown Dependency case as `GG`, with field tests using real Origin components and role-based queries. ## Scope - Foundation files only under `js/apps/private/site/src/uma-nage/components/phone-input/`. - No package version bump files, KYB, payouts, settings, or other product callsite migrations in this PR. - Supersedes #28414. ## Test plan - `mise exec -- node -v` from `js` — `v20.19.6`. - `mise exec -- yarn workspace @lightsparkdev/site exec prettier --check src/uma-nage/components/phone-input/NagePhoneInputField.tsx src/uma-nage/components/phone-input/NagePhoneInputField.test.tsx` from `js` — passed. - `mise exec -- yarn workspace @lightsparkdev/site exec eslint src/uma-nage/components/phone-input/NagePhoneInputField.tsx src/uma-nage/components/phone-input/NagePhoneInputField.test.tsx` from `js` — passed. - `mise exec -- yarn workspace @lightsparkdev/site exec vitest run src/uma-nage/components/phone-input/NagePhoneInputField.test.tsx src/uma-nage/components/phone-input/phoneNumber.test.ts` from `js` — 30 tests passed. Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: 5ada43a118245619dbf0fc52058399ed8e336980 --- packages/ui/package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ui/package.json b/packages/ui/package.json index 4c98e1636..daa57d14e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -19,6 +19,10 @@ "import": "./dist/components/*.js", "require": "./dist/components/*.cjs" }, + "./components/CountryFlag": { + "import": "./dist/components/CountryFlag/index.js", + "require": "./dist/components/CountryFlag/index.cjs" + }, "./components/typography": { "import": "./dist/components/typography/index.js", "require": "./dist/components/typography/index.cjs" From 4bd38aab7d0b1723928798e3b8633b631680d5c2 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Thu, 11 Jun 2026 15:55:55 -0700 Subject: [PATCH 070/133] [site] Fix preview login redirects (#28555) ## Summary - Normalize post-login redirect targets against the active Vite/router basename. - Prevent UI preview links from redirecting to duplicated paths like `/preview/pr-28544/preview/pr-28544/`. - Preserve the existing full-page redirect behavior for `/ops` paths, including preview ops paths. ## Testing - `yarn workspace @lightsparkdev/site exec vitest run src/hooks/loginRedirect.test.ts` - `yarn workspace @lightsparkdev/site exec eslint src/hooks/useLoginAndRedirect.tsx src/hooks/loginRedirect.ts src/hooks/loginRedirect.test.ts` - `yarn workspace @lightsparkdev/site exec prettier --check src/hooks/useLoginAndRedirect.tsx src/hooks/loginRedirect.ts src/hooks/loginRedirect.test.ts` ## Notes - Full `@lightsparkdev/site` typecheck is blocked locally by existing unresolved workspace package exports such as `@lightsparkdev/ui/router`. GitOrigin-RevId: d0319351285faf26145bf5d920525218a47fbcad --- packages/ui/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index daa57d14e..ed3980455 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -83,9 +83,9 @@ "./src/router": "./src/router.js" }, "scripts": { - "build:bundle": "tsdown", + "build:bundle": "tsdown --config-loader unrun", "build": "yarn tsc && yarn build:bundle", - "build:watch": "tsdown --watch --no-clean", + "build:watch": "tsdown --config-loader unrun --watch --no-clean", "circular-deps": "madge --circular --extensions ts,tsx .", "clean": "rm -rf .turbo", "format:fix": "prettier . --write", From 909a749816db2624a49ee377bd226f0420f06fde Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 11 Jun 2026 16:33:37 -0700 Subject: [PATCH 071/133] [grid] Add Receive/Add Funds money-flow primitives (#27951) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - Adds reusable Receive/Add Funds primitives for platform and customer scopes: account selection, amount entry, setup rows, funds-target helpers, funding-instruction rendering, and sandbox funding support. - Requires active, eligible internal accounts before opening the new Add Funds flow, revalidates stale selected accounts, and hardens sandbox busy/close lifecycle behavior. - Preserves existing read-only funding-instruction access where users can view instructions but cannot start write actions. ## Gate / rollout notes - Home and Customers Add Funds surfacing is gated by `GRID_DASHBOARD_ADD_FUNDS_ENABLED`. It does not gate existing read-only funding instructions. - Payouts Add Funds V2 is independently gated by `GRID_DASHBOARD_PAYOUTS_ADD_FUNDS_V2_ENABLED`, allowing Payouts to roll out separately from Home/Customer Add Funds. - Sandbox funding mutation is sandbox-only and remains behind the explicit Add Funds flow; production funding instructions stay read-only display unless a permitted action is available. - Role/write permissions are authorization checks enforced inside the flow/provider and are separate from rollout GKs. - This PR does not add Transfer, Withdraw, Send, payout creation, or external-account ownership semantics. ## Test plan / validation - Focused Add Funds provider, customer/home/internal account drawer, Sandbox Funding, receive/add-funds target, funds-target, money input, account display, and funding-instruction tests passed. - Type/lint validation passed for the touched Grid UI areas. - Boundary checks were run against the previous stack slice to keep this PR scoped to Receive/Add Funds behavior. ## How to review This is large (+8,940 / −1,255 across 54 files vs main), but ~4,100 of the inserted lines (~46%) are tests and test utilities. The biggest non-test files are `receive-add-funds/ReceiveInstructions.tsx` (+596), `payouts/panels/LegacyAddFundsPanel.tsx` (+565), `receive-add-funds/SandboxFundingSection.tsx` (+374), `payouts/AddFundsFlowProvider.tsx` (+344/−72), and `receive-add-funds/useAddFundsDrawer.tsx` (+294). ### What changed since your last review - **Funds-target unification** (`a3a605a813`, renamed in `37fac7e8d7`): the new Add Funds flow now keys off a shared `FundsTarget` in `utils/fundsTarget.ts` — formerly `OwnerScope` / `utils/ownerScope.ts` — which replaced payouts' original funds-target type. Only `LegacyFundsTarget` remains, confined to `payouts/LegacyAddFundsFlowProvider.tsx`. - **Currency eligibility guard** (`6965c94e48`): `receive-add-funds/receiveAddFundsTarget.ts` (formerly `receiveAddFundsScope.ts`) now owns a shared eligibility check that excludes accounts with incomplete currency data, used by both Home and customer scopes. It still imports `allowedFundingCurrencies` from `payouts/utils/`; relocating that module and adding a cross-flow eligibility rule-matrix test is tracked in [DES-65](https://lightspark.atlassian.net/browse/DES-65). - **Drawer machine unification** (`2ed9f32365`): new `receive-add-funds/useAddFundsDrawer.tsx` (294 lines) holds the open/busy/close state machine that Home and the customer drawer previously each implemented. `Home.tsx` dropped ~195 lines; `customers/CustomerAddFundsDrawer.tsx` is now a 54-line shim that binds the customer funds target and renders the shared drawer. Payouts' `AddFundsFlowProvider` is intentionally not folded in — it goes away with the legacy retirement tracked in [DES-57](https://lightspark.atlassian.net/browse/DES-57). ### Suggested reading order 1. Target/eligibility model: `utils/fundsTarget.ts`, `receive-add-funds/receiveAddFundsTarget.ts` 2. The drawer machine: `receive-add-funds/useAddFundsDrawer.tsx` 3. Call sites: `home/Home.tsx`, `customers/CustomerAddFundsDrawer.tsx` 4. Payouts panel changes: `payouts/AddFundsFlowProvider.tsx`, `payouts/panels/AddFundsPanel.tsx` 5. Tests ### Gating All new surfacing is behind `GRID_DASHBOARD_ADD_FUNDS_ENABLED` (Home/customer entry points, which themselves sit behind the `GRID_DASHBOARD_HOME_ENABLED` / `GRID_DASHBOARD_CUSTOMER_PROFILE_ENABLED` route gates) and `GRID_DASHBOARD_PAYOUTS_ADD_FUNDS_V2_ENABLED` for the payouts path. [DES-65]: https://lightspark.atlassian.net/browse/DES-65?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Cursor GitOrigin-RevId: d2255efa0b2346a8a7841856f0acf510dee9add0 --- packages/ui/src/icons/BaseNetwork.tsx | 6 ++++-- packages/ui/src/icons/PolygonNetwork.tsx | 23 +++++++++++++++++++++-- packages/ui/src/icons/TronNetwork.tsx | 11 +++++++---- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/icons/BaseNetwork.tsx b/packages/ui/src/icons/BaseNetwork.tsx index ad9ec7de4..82d0b9d20 100644 --- a/packages/ui/src/icons/BaseNetwork.tsx +++ b/packages/ui/src/icons/BaseNetwork.tsx @@ -9,8 +9,10 @@ export function BaseNetwork() { fill="none" viewBox="0 0 24 24" > - - + ); } diff --git a/packages/ui/src/icons/PolygonNetwork.tsx b/packages/ui/src/icons/PolygonNetwork.tsx index b3415d537..f54a69c0e 100644 --- a/packages/ui/src/icons/PolygonNetwork.tsx +++ b/packages/ui/src/icons/PolygonNetwork.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved +import { useId } from "react"; + export function PolygonNetwork() { + const uid = useId(); + const gradientId = `polygon-network__a-${uid}`; + return ( + + + + + + + ); } diff --git a/packages/ui/src/icons/TronNetwork.tsx b/packages/ui/src/icons/TronNetwork.tsx index c034bd8df..4e9f5ef94 100644 --- a/packages/ui/src/icons/TronNetwork.tsx +++ b/packages/ui/src/icons/TronNetwork.tsx @@ -9,10 +9,13 @@ export function TronNetwork() { fill="none" viewBox="0 0 24 24" > - + + + + ); } From a3b7643d4a1cb290612701a4e29cbf6981e98d17 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 02:43:25 -0700 Subject: [PATCH 072/133] [js] gga example app: V3 secure OTP e2e flow (test harness) (#28154) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a **Run V3 flow** button to the EMAIL_OTP tab of the Grid Global Accounts example app that exercises the secure OTP login end-to-end: 1. `POST /auth/credentials/{id}/challenge` → `otpEncryptionTargetBundle` 2. HPKE-seal `{clientPublicKey, otpCodeAttempt}` locally via `@turnkey/crypto` (`hpkeEncrypt` + `bs58check`) 3. `POST /verify` `{encryptedOtpBundle}` → **202** + `verificationToken` 4. sign the token with the TEK → `Grid-Wallet-Signature` 5. `POST /verify` retry → **200** AuthSession (no `encryptedSessionSigningKey`) Test harness for verifying the V3 flow against sandbox/prod. The OTP code never leaves the client in plaintext and the TEK private key stays client-side. Verified: `tsc` clean, and a cross-language round-trip (JS `@turnkey/crypto` seal ↔ Python sandbox `open_encrypted_otp_bundle`) passes. Depends on the secure-OTP backend stack (base PR). 🤖 Generated with [Claude Code](https://claude.com/claude-code) GitOrigin-RevId: 8c6684bc6487de26e0df0b51e3e207a63631f12f --- .../index.html | 32 ++-- .../package.json | 3 +- .../src/main.ts | 173 ++++++++++++++++-- .../vite.config.ts | 6 +- 4 files changed, 180 insertions(+), 34 deletions(-) diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index 7626144f4..e0703fb8f 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -400,21 +400,23 @@

Create credential

-

Verify → session

- - - - - - -
+

Verify → session (secure OTP)

+

+ Two steps. 1. Challenge issues INIT_OTP and returns the + enclave target bundle — against real Turnkey the OTP is emailed to + the customer; in sandbox it's 000000. 2. Verify + HPKE-seals the entered code with @turnkey/crypto → + /verify first leg (202 + verificationToken) → ECDSA-sign the token + with the TEK → /verify retry (200 session). The code is never sent + in plaintext and the TEK private key never leaves the client. Uses + the Credential ID from Wallet Context. +

+ +
+ + + +
diff --git a/apps/examples/grid-global-accounts-example-app/package.json b/apps/examples/grid-global-accounts-example-app/package.json index 81c26423b..01f6f7586 100644 --- a/apps/examples/grid-global-accounts-example-app/package.json +++ b/apps/examples/grid-global-accounts-example-app/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@turnkey/api-key-stamper": "^0.6.5", - "@turnkey/crypto": "^2.8.14" + "@turnkey/crypto": "^2.8.14", + "@turnkey/encoding": "^0.6.0" } } diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts index 2fc905e39..8bf226b80 100644 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -5,7 +5,13 @@ // Signed-retry flows are two-step: issue (returns 202 challenge) then retry // (forwards with `Grid-Wallet-Signature: sandbox-valid-signature`). -import { decryptCredentialBundle, generateP256KeyPair, getPublicKey } from "@turnkey/crypto"; +import { + decryptCredentialBundle, + formatHpkeBuf, + generateP256KeyPair, + getPublicKey, + hpkeEncrypt, +} from "@turnkey/crypto"; import { signWithApiKey } from "@turnkey/api-key-stamper"; type Mode = "sandbox" | "production"; @@ -110,6 +116,70 @@ async function turnkeyStamp(payload: string): Promise { return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); } +// ----- V3 secure OTP client crypto ----- +// +// HPKE-seal {clientPublicKey, otpCodeAttempt} under the enclave's +// `otpEncryptionTargetBundle`. That bundle is a signed enclave envelope — +// {version, data, dataSignature, enclaveQuorumPublic} — where `data` is a +// hex-encoded JSON blob carrying the enclave's uncompressed HPKE target key as +// `targetPublic`. We pull `targetPublic` out, HPKE-encrypt under it, and emit +// Turnkey's `formatHpkeBuf` wire shape {"encappedPublic","ciphertext"} — exactly +// what `@turnkey/crypto`'s `encryptPrivateKeyToBundle` produces for the +// analogous key-import flow. (A production client would also verify +// `dataSignature` against `enclaveQuorumPublic`; skipped here because the bundle +// originates from our own backend in this test app.) +function hexToBytes(hex: string): Uint8Array { + const bytes = new Uint8Array(hex.length / 2); + for (let i = 0; i < bytes.length; i++) { + bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16); + } + return bytes; +} + +function sealOtpBundle( + targetBundle: string, + clientPublicKeyHex: string, + otpCode: string, +): string { + const parsed = JSON.parse(targetBundle) as { data: string }; + const signedData = JSON.parse( + new TextDecoder().decode(hexToBytes(parsed.data)), + ) as { targetPublic: string }; + const targetKeyBuf = hexToBytes(signedData.targetPublic); // 65-byte uncompressed + const plainTextBuf = new TextEncoder().encode( + // The enclave expects snake_case {otp_code, public_key} — NOT the + // {clientPublicKey, otpCodeAttempt} shown in Turnkey's docs sequence + // diagram. Matches @turnkey/crypto's encryptOtpCodeToBundle. + JSON.stringify({ otp_code: otpCode, public_key: clientPublicKeyHex }), + ); + const encryptedBuf = hpkeEncrypt({ plainTextBuf, targetKeyBuf }); // compressed_enc[33] || ciphertext + return formatHpkeBuf(encryptedBuf); // {"encappedPublic","ciphertext"} +} + +// Build the `Grid-Wallet-Signature` stamp over the verificationToken using a +// specific keypair (the V3 TEK), not the session key — base64url(JSON({ +// publicKey, scheme, signature})), the shape `parse_api_key_stamp` expects. +async function buildWalletSignature( + publicKeyHex: string, + privateKeyHex: string, + payload: string, +): Promise { + const signature = await signWithApiKey({ + content: payload, + publicKey: publicKeyHex, + privateKey: privateKeyHex, + }); + const stamp = { + publicKey: publicKeyHex, + scheme: TURNKEY_STAMP_SCHEME, + signature, + }; + return btoa(JSON.stringify(stamp)) + .replace(/\+/g, "-") + .replace(/\//g, "_") + .replace(/=+$/, ""); +} + // ----- DOM helpers ----- function el(id: string): T { @@ -494,26 +564,99 @@ bindClick( }, ); -wireGenKeyButton("btn-email_otp-verify-genkey", "email_otp-verify-pubkey"); +// Secure OTP — two steps so it works against real Turnkey, which emails a +// real OTP (sandbox uses the fixed 000000). Step 1 (/challenge) issues the +// INIT_OTP and returns the enclave's target bundle, held below until Verify +// consumes it. Step 2 +// HPKE-seals the entered code under that bundle, runs /verify first leg +// (202 + payloadToSign), signs the token with the TEK, and runs /verify retry +// (200 session). The code never leaves the client in plaintext; the TEK private +// key stays client-side (no encryptedSessionSigningKey is returned). + +// Target bundle from the most recent V3 challenge + the credential it was +// issued for, so Verify catches a stale/mismatched bundle. +let v3TargetBundle: string | null = null; +let v3TargetBundleCredId: string | null = null; + bindClick( - "btn-email_otp-verify", - "email_otp-verify-status", - "EMAIL_OTP Verify", + "btn-email_otp-v3-challenge", + "email_otp-v3-challenge-status", + "EMAIL_OTP Challenge (V3)", + "Requesting OTP...", + async () => { + const credId = requireCredentialId(); + const { data: challengeData } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("V3 Challenge", challengeData); + const targetBundle = (challengeData as Record) + .otpEncryptionTargetBundle as string | undefined; + if (!targetBundle) + throw new Error( + "Challenge response missing otpEncryptionTargetBundle — is the local " + + "backend running the secure-OTP branch?", + ); + v3TargetBundle = targetBundle; + v3TargetBundleCredId = credId; + return "OTP sent. Check the customer's email, enter the code below, then Verify."; + }, +); + +bindClick( + "btn-email_otp-v3-verify", + "email_otp-v3-verify-status", + "EMAIL_OTP Verify (V3)", "Verifying...", async () => { const credId = requireCredentialId(); - const otp = el("email_otp-verify-code").value.trim(); - const pubkey = el("email_otp-verify-pubkey").value.trim(); - if (!otp || !pubkey) throw new Error("OTP code and public key are required."); - const { data } = await apiPost( + const otp = el("email_otp-v3-code").value.trim(); + if (!otp) throw new Error("OTP code is required."); + if (!v3TargetBundle || v3TargetBundleCredId !== credId) + throw new Error( + "Run Challenge (V3) first to request an OTP + target bundle for this " + + "credential.", + ); + + // Generate a TEK and HPKE-seal the entered OTP under the challenge bundle. + const tek = generateP256KeyPair(); + const encryptedOtpBundle = sealOtpBundle(v3TargetBundle, tek.publicKey, otp); + + // First leg → expect 202 with payloadToSign (verificationToken) + requestId. + const leg1 = await apiPost( `/auth/credentials/${encodeURIComponent(credId)}/verify`, - { type: "EMAIL_OTP", otp, clientPublicKey: pubkey }, + { type: "EMAIL_OTP", encryptedOtpBundle }, ); - addLog("EMAIL_OTP Verify", data); - const d = data as Record; - if (d.id) setCtxSession(d.id as string); - rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); - return JSON.stringify(data, null, 2); + const l1 = (leg1.data ?? {}) as Record; + addLog("V3 Verify leg 1 (expect 202)", { status: leg1.status, ...l1 }); + const payloadToSign = l1.payloadToSign as string | undefined; + const requestId = l1.requestId as string | undefined; + if (leg1.status !== 202 || !payloadToSign || !requestId) + throw new Error(`Unexpected first-leg response: ${JSON.stringify(leg1)}`); + + // Sign the verificationToken with the TEK private key. + const signature = await buildWalletSignature( + tek.publicKey, + tek.privateKey, + payloadToSign, + ); + + // Retry with the signature → expect 200 AuthSession. + const leg2 = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "EMAIL_OTP", encryptedOtpBundle }, + { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, + ); + const session = (leg2.data ?? {}) as Record; + addLog("V3 Verify leg 2 (expect 200 session)", { + status: leg2.status, + ...session, + }); + if (session.id) setCtxSession(session.id as string); + // One bundle per challenge — force a fresh Challenge for the next run. + v3TargetBundle = null; + v3TargetBundleCredId = null; + return JSON.stringify({ leg1: leg1.data, session: leg2.data }, null, 2); }, ); diff --git a/apps/examples/grid-global-accounts-example-app/vite.config.ts b/apps/examples/grid-global-accounts-example-app/vite.config.ts index 0513947cb..7c5112695 100644 --- a/apps/examples/grid-global-accounts-example-app/vite.config.ts +++ b/apps/examples/grid-global-accounts-example-app/vite.config.ts @@ -1,9 +1,9 @@ import { defineConfig } from "vite"; import settings from "../settings.json"; -// Prod grid URL. The proxy strips the `/api` prefix and rewrites the path -// to the versioned API channel. Credentials are entered manually in the UI -// — never embedded here. +// Production grid URL. The proxy strips the `/api` prefix and rewrites the +// path to the versioned API channel. Credentials are entered manually in the +// UI — never embedded here. const PROD_GRID_URL = "https://api.lightspark.com"; export default defineConfig({ From d256b2dfbbe0873bd28ca26311b278ec2895e2eb Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Fri, 12 Jun 2026 09:50:27 +0000 Subject: [PATCH 073/133] CI update lock file for PR --- yarn.lock | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 7cb2d993a..87b117f87 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3183,6 +3183,7 @@ __metadata: dependencies: "@turnkey/api-key-stamper": "npm:^0.6.5" "@turnkey/crypto": "npm:^2.8.14" + "@turnkey/encoding": "npm:^0.6.0" typescript: "npm:^5.6.2" vite: "npm:^8.0.14" languageName: unknown @@ -5743,7 +5744,7 @@ __metadata: languageName: node linkType: hard -"@turnkey/encoding@npm:0.6.0": +"@turnkey/encoding@npm:0.6.0, @turnkey/encoding@npm:^0.6.0": version: 0.6.0 resolution: "@turnkey/encoding@npm:0.6.0" dependencies: From 004dae250789677011e8c4f91a66fee6809015fc Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 02:50:48 -0700 Subject: [PATCH 074/133] [js] gga example app: real WebAuthn ceremony + OTP-session caching; env-driven grid URL (#28470) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Wire the grid-global-accounts example app to a **real WebAuthn ceremony** (Touch ID register/sign) with OTP-session-key caching, and make the dev backend URL **env-driven** (`GRID_URL` env var, defaulting to production) instead of a hardcoded dev host. ## Why P4 example app, PR 0 in `40-example-app-design.md` §5/§6. The branch carried uncommitted real-WebAuthn-ceremony + OTP-session-caching work plus a config hazard: `vite.config.ts` had `PROD_GRID_URL` pointed at a dev host (`api.dev.dev.sparkinfra.net`), a local convenience that must not land in git. This PR commits the in-flight work and un-breaks the config so dev pointing is local-only (`GRID_URL=... yarn dev`) and never committed. ## Place in the stack Base: `06-02-_js_gga_example_app_add_v3_secure_otp_e2e_flow` (the branch holding the uncommitted V3-OTP e2e work). First PR of the **P4 example-app** stack. ## Notable points - `PROD_GRID_URL` now resolves from `process.env.GRID_URL ?? "https://api.lightspark.com"` — production by default, dev override never persisted. - No behavior change beyond what was already live on the branch; manual test tool (no automated UI tests). Type gate: `yarn workspace ... build` (tsc + vite) + `yarn lint && yarn format`. --- Part of the Turnkey login-family migration program. See `sparkcore/sparkcore/grid/docs/login-migration/00-program-plan.md`. GitOrigin-RevId: 8c7d9891683ccf6739b7045c753e2c4b0456803e --- .../index.html | 31 +++ .../src/main.ts | 192 +++++++++++++++++- .../vite.config.ts | 10 +- 3 files changed, 228 insertions(+), 5 deletions(-) diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index e0703fb8f..1ecb6c84c 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -652,6 +652,24 @@

Create credential

id="passkey-create-nickname" value="Sandbox Passkey" /> + + +

+ Click below to register a real passkey on this + device (Touch ID) — it fills the attestation fields. Use it for both + "Create" and "Add additional" against real Turnkey. The sub-org's RP + ID must match this page's origin. +

+ +
Verify → session id="passkey-verify-client-data-json" value="c2FuZGJveC1jbGllbnQtZGF0YQ" /> +

+ Click below to sign the issued challenge with your real passkey + (Touch ID) — it fills the assertion fields above. +

+ +
@@ -749,6 +775,11 @@

Verify → session

Add additional PASSKEY via signed retry

+

+ First click "📱 Create real passkey" in the + Create credential section above — that registers the new + passkey whose attestation is added here. Then run steps 1 and 2. +

diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts index 8bf226b80..18ac8f80e 100644 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -73,6 +73,20 @@ function rememberEncryptedSessionSigningKey(value: unknown): void { } } +// OTP_LOGIN / STAMP_LOGIN model: there is no encryptedSessionSigningKey bundle +// — the TEK private key *is* the session's API key once login registers it. +// Cache it directly so turnkeyStamp() can authorize later signed retries +// (e.g. adding a passkey) without the Verify-style clientKeyPair + bundle. +function setSessionKeysFromTek(tek: { + publicKey: string; + privateKey: string; +}): void { + cachedSessionKeys = { + apiPublicKey: tek.publicKey, + apiPrivateKey: tek.privateKey, + }; +} + function decryptSessionKeysOrThrow(): SessionKeys { if (cachedSessionKeys) return cachedSessionKeys; if (!clientKeyPair) @@ -653,6 +667,10 @@ bindClick( ...session, }); if (session.id) setCtxSession(session.id as string); + // The TEK is now the session's API key (OTP_LOGIN registered it). Cache it + // as the active session signing key so later signed retries (add passkey, + // quote execute, etc.) can stamp with this session via turnkeyStamp(). + if (leg2.status === 200) setSessionKeysFromTek(tek); // One bundle per challenge — force a fresh Challenge for the next run. v3TargetBundle = null; v3TargetBundleCredId = null; @@ -811,6 +829,119 @@ bindClick( }, ); +// ----- WebAuthn ceremony helpers (real passkeys) ----- +// +// The sandbox flows accept magic placeholder strings, but a real Turnkey +// sub-org needs a genuine WebAuthn credential. These helpers drive the +// browser's authenticator (Touch ID, etc.) and base64url-encode the results +// into the same fields the sandbox flow uses, so Create / Add / Verify work +// unchanged against production Turnkey. +// +// NOTE: WebAuthn binds a credential to an RP ID that must be a suffix of the +// page origin — on localhost that means rpId="localhost". The Turnkey sub-org +// must have been created with the SAME RP ID or verification will fail. + +function bytesToB64Url(bytes: Uint8Array): string { + let bin = ""; + for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]); + return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); +} + +function b64UrlToBytes(value: string): Uint8Array { + const b64 = value.replace(/-/g, "+").replace(/_/g, "/"); + const padded = b64 + "=".repeat((4 - (b64.length % 4)) % 4); + const bin = atob(padded); + const bytes = new Uint8Array(bin.length); + for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i); + return bytes; +} + +function passkeyRpId(): string { + return el("passkey-rp-id").value.trim() || location.hostname; +} + +interface RealAttestation { + challenge: string; + credentialId: string; + clientDataJson: string; + attestationObject: string; +} + +// Real registration ceremony — produces the attestation that Create/Add send. +async function createRealPasskey(nickname: string): Promise { + const challenge = crypto.getRandomValues(new Uint8Array(32)); + const userId = crypto.getRandomValues(new Uint8Array(16)); + const credential = (await navigator.credentials.create({ + publicKey: { + rp: { id: passkeyRpId(), name: "Grid Example App" }, + user: { + id: userId, + name: nickname || "grid-example-user", + displayName: nickname || "Grid Example User", + }, + challenge, + pubKeyCredParams: [ + { type: "public-key", alg: -7 }, + { type: "public-key", alg: -257 }, + ], + authenticatorSelection: { + residentKey: "preferred", + userVerification: "preferred", + }, + attestation: "none", + timeout: 60000, + }, + })) as PublicKeyCredential | null; + if (!credential) throw new Error("Passkey creation returned no credential"); + const response = credential.response as AuthenticatorAttestationResponse; + return { + challenge: bytesToB64Url(challenge), + credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), + clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), + attestationObject: bytesToB64Url(new Uint8Array(response.attestationObject)), + }; +} + +interface RealAssertion { + credentialId: string; + authenticatorData: string; + clientDataJson: string; + signature: string; +} + +// Real assertion ceremony — signs the issued session challenge. +async function signWithPasskey( + challengeValue: string, + credentialId: string, +): Promise { + if (!challengeValue) { + throw new Error("No challenge — issue a session challenge (step above) first."); + } + // PR #28427: Turnkey's WebAuthn challenge is the UTF-8 bytes of the + // sha256-hex challenge string returned by /challenge — NOT base64url-decoded. + const challenge = new TextEncoder().encode(challengeValue); + const allowCredentials: PublicKeyCredentialDescriptor[] = credentialId + ? [{ type: "public-key", id: b64UrlToBytes(credentialId) as BufferSource }] + : []; + const credential = (await navigator.credentials.get({ + publicKey: { + rpId: passkeyRpId(), + challenge, + allowCredentials, + userVerification: "preferred", + timeout: 60000, + }, + })) as PublicKeyCredential | null; + if (!credential) throw new Error("Passkey assertion returned no credential"); + const response = credential.response as AuthenticatorAssertionResponse; + return { + credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), + authenticatorData: bytesToB64Url(new Uint8Array(response.authenticatorData)), + clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), + signature: bytesToB64Url(new Uint8Array(response.signature)), + }; +} + // ----- PASSKEY ----- bindClick( @@ -838,8 +969,31 @@ bindClick( }, ); +// Drive a real WebAuthn registration (Touch ID) and fill the attestation +// fields above — used by both the "Create" and "Add additional" flows. +bindClick( + "btn-passkey-webauthn-create", + "passkey-webauthn-create-status", + "Passkey Register", + "Waiting for authenticator (Touch ID)...", + async () => { + const nickname = el("passkey-create-nickname").value.trim(); + const att = await createRealPasskey(nickname); + el("passkey-create-challenge").value = att.challenge; + el("passkey-create-cred-id-raw").value = att.credentialId; + el("passkey-create-client-data-json").value = att.clientDataJson; + el("passkey-create-attestation-object").value = + att.attestationObject; + addLog("Passkey Registered (real)", att); + return "Real passkey created — attestation fields filled. Now run Create or Add."; + }, +); + wireGenKeyButton("btn-passkey-challenge-genkey", "passkey-challenge-pubkey"); const passkeyVerifyRequestId = el("passkey-verify-request-id"); +// Captured from the session-challenge response so the real assertion ceremony +// can sign the exact sha256-hex challenge Turnkey expects. +let passkeySessionChallenge = ""; bindClick( "btn-passkey-challenge", "passkey-challenge-status", @@ -856,6 +1010,7 @@ bindClick( addLog("PASSKEY Challenge", data); const d = data as Record; if (d.requestId) passkeyVerifyRequestId.value = d.requestId as string; + if (typeof d.challenge === "string") passkeySessionChallenge = d.challenge; return JSON.stringify(data, null, 2); }, ); @@ -893,7 +1048,30 @@ bindClick( }, ); +// Drive a real WebAuthn assertion (Touch ID) against the issued challenge and +// fill the assertion fields above for Verify. +bindClick( + "btn-passkey-webauthn-get", + "passkey-webauthn-get-status", + "Passkey Sign", + "Waiting for authenticator (Touch ID)...", + async () => { + const credId = el("passkey-create-cred-id-raw").value.trim(); + const assertion = await signWithPasskey(passkeySessionChallenge, credId); + el("passkey-create-cred-id-raw").value = assertion.credentialId; + el("passkey-verify-client-data-json").value = + assertion.clientDataJson; + el("passkey-verify-auth-data").value = + assertion.authenticatorData; + el("passkey-verify-signature").value = assertion.signature; + addLog("Passkey Signed (real)", assertion); + return "Real assertion produced — verify fields filled. Now click Verify."; + }, +); + const passkeyAddRequestId = el("passkey-add-request-id"); +// Captured from the add-issue 202 so the retry can stamp the exact payload. +let passkeyAddPayloadToSign = ""; function buildPasskeyAddBody(): Record { return { type: "PASSKEY", @@ -917,6 +1095,7 @@ bindClick( addLog("PASSKEY Add (issue)", data); const d = data as Record; if (d.requestId) passkeyAddRequestId.value = d.requestId as string; + if (typeof d.payloadToSign === "string") passkeyAddPayloadToSign = d.payloadToSign; return JSON.stringify(data, null, 2); }, ); @@ -928,10 +1107,21 @@ bindClick( async () => { const requestId = passkeyAddRequestId.value.trim(); if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + // Sandbox accepts the magic value, but real Turnkey requires the + // CREATE_AUTHENTICATORS payload to be stamped by an authorized credential — + // the active session's signing key. Establish a session (e.g. OTP login or + // passkey verify) first so the session signing key is available. + let signature = SANDBOX_SIG; + if (getMode() === "production") { + if (!passkeyAddPayloadToSign) { + throw new Error("Missing payloadToSign — run step 1 first."); + } + signature = await turnkeyStamp(passkeyAddPayloadToSign); + } const { data } = await apiPost( "/auth/credentials", buildPasskeyAddBody(), - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, ); addLog("PASSKEY Add (retry)", data); return JSON.stringify(data, null, 2); diff --git a/apps/examples/grid-global-accounts-example-app/vite.config.ts b/apps/examples/grid-global-accounts-example-app/vite.config.ts index 7c5112695..e75698c77 100644 --- a/apps/examples/grid-global-accounts-example-app/vite.config.ts +++ b/apps/examples/grid-global-accounts-example-app/vite.config.ts @@ -1,10 +1,12 @@ import { defineConfig } from "vite"; import settings from "../settings.json"; -// Production grid URL. The proxy strips the `/api` prefix and rewrites the -// path to the versioned API channel. Credentials are entered manually in the -// UI — never embedded here. -const PROD_GRID_URL = "https://api.lightspark.com"; +// Grid API base for the dev proxy (strips the `/api` prefix and rewrites the +// path to the versioned API channel). Defaults to production; override locally +// for a dev backend via the GRID_URL env var, e.g. +// GRID_URL=https://api.dev.dev.sparkinfra.net yarn dev +// Credentials are entered manually in the UI — never embedded here. +const PROD_GRID_URL = process.env.GRID_URL ?? "https://api.lightspark.com"; export default defineConfig({ server: { From d22cd61397154cd89b897dd61a9f8a22dd2fe1f8 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 02:58:47 -0700 Subject: [PATCH 075/133] [js] gga example app: split main.ts into config/turnkey/webauthn/api-client/ui + flows modules (#28471) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Split the ~1450-line `src/main.ts` into a small ES-module tree: `config.ts`, `turnkey.ts` (crypto), `webauthn.ts` (ceremonies), `api-client.ts`, `ui.ts`, and a `flows/` directory (`customer`, `email-otp`, `oauth`, `passkey`, `manage`, `money`, shared `context`). `main.ts` becomes a thin bootstrap. ## Why P4 example app, PR 1 in `40-example-app-design.md` §1.5/§5. The single file mixed Turnkey crypto, HTTP, logging, DOM wiring, and every flow handler, and accreted into a tool only its author could drive. Carving it into modules lands first so later PRs touch small files; the `manage.ts` extraction also removes the 3× delete/export duplication (one shared panel instead of one per credential type). ## Place in the stack Base: #28470 (real WebAuthn ceremony + env-driven URL). Second PR of the **P4 example-app** stack. ## Notable points - **Pure refactor, no behavior change** — mechanical module move; `index.html` untouched. `tsc` + manual sandbox smoke prove equivalence. - Manual test tool (no automated UI tests). Type gate: `build` + `lint`/`format`. --- Part of the Turnkey login-family migration program. See `sparkcore/sparkcore/grid/docs/login-migration/00-program-plan.md`. GitOrigin-RevId: fe1f4c2ca75d37fb07e37b9902241db970ce26d8 --- .../src/api-client.ts | 104 ++ .../src/config.ts | 15 + .../src/flows/context.ts | 61 + .../src/flows/customer.ts | 150 ++ .../src/flows/email-otp.ts | 188 +++ .../src/flows/manage.ts | 184 +++ .../src/flows/money.ts | 177 ++ .../src/flows/oauth.ts | 113 ++ .../src/flows/passkey.ts | 238 +++ .../src/main.ts | 1458 +---------------- .../src/turnkey.ts | 184 +++ .../src/ui.ts | 125 ++ .../src/webauthn.ts | 118 ++ 13 files changed, 1676 insertions(+), 1439 deletions(-) create mode 100644 apps/examples/grid-global-accounts-example-app/src/api-client.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/config.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/context.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/customer.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/manage.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/money.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/turnkey.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/ui.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/webauthn.ts diff --git a/apps/examples/grid-global-accounts-example-app/src/api-client.ts b/apps/examples/grid-global-accounts-example-app/src/api-client.ts new file mode 100644 index 000000000..23882a7a8 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/api-client.ts @@ -0,0 +1,104 @@ +// HTTP client + auth header + mode resolution. + +import { API_BASE, type Mode } from "./config"; +import { el } from "./ui"; + +let authClientId: HTMLInputElement | null = null; +let authClientSecret: HTMLInputElement | null = null; +let modeSelect: HTMLSelectElement | null = null; + +function getAuthClientId(): HTMLInputElement { + if (!authClientId) authClientId = el("auth-client-id"); + return authClientId; +} + +function getAuthClientSecret(): HTMLInputElement { + if (!authClientSecret) + authClientSecret = el("auth-client-secret"); + return authClientSecret; +} + +function getModeSelect(): HTMLSelectElement { + if (!modeSelect) modeSelect = el("mode-select"); + return modeSelect; +} + +export function getMode(): Mode { + return getModeSelect().value === "production" ? "production" : "sandbox"; +} + +function getAuthHeader(): string { + return ( + "Basic " + + btoa( + `${getAuthClientId().value.trim()}:${getAuthClientSecret().value.trim()}`, + ) + ); +} + +export async function apiPost( + path: string, + body: Record | undefined, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: getAuthHeader(), + ...extraHeaders, + }, + body: body === undefined ? undefined : JSON.stringify(body), + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + +export async function apiDelete( + path: string, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "DELETE", + headers: { + Authorization: getAuthHeader(), + ...extraHeaders, + }, + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + +export async function apiPatch( + path: string, + body: Record, + extraHeaders: Record = {}, +): Promise<{ status: number; data: unknown }> { + const res = await fetch(API_BASE + path, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + Authorization: getAuthHeader(), + ...extraHeaders, + }, + body: JSON.stringify(body), + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return { status: res.status, data }; +} + +export async function apiGet(path: string): Promise { + const res = await fetch(API_BASE + path, { + headers: { Authorization: getAuthHeader() }, + }); + const raw = await res.text(); + const data = raw ? JSON.parse(raw) : null; + if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); + return data; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/config.ts b/apps/examples/grid-global-accounts-example-app/src/config.ts new file mode 100644 index 000000000..e9726befd --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/config.ts @@ -0,0 +1,15 @@ +// Grid Global Accounts — Example App: shared config + constants. + +export type Mode = "sandbox" | "production"; +export type CredType = "email_otp" | "oauth" | "passkey"; + +// Sandbox magic signature injected into signed-retry headers and the execute +// signature. In production these are wrong — a real stamp must be supplied. +export const SANDBOX_SIG = "sandbox-valid-signature"; + +// All requests proxy through Vite at `/api` and forward to the configured Grid +// backend. Credentials are entered manually in the UI — never embedded. +export const API_BASE = "/api"; + +// Turnkey API stamp scheme — must match what `@turnkey/api-key-stamper` emits. +export const TURNKEY_STAMP_SCHEME = "SIGNATURE_SCHEME_TK_API_P256"; diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/context.ts b/apps/examples/grid-global-accounts-example-app/src/flows/context.ts new file mode 100644 index 000000000..96e6784ac --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/context.ts @@ -0,0 +1,61 @@ +// Cross-flow wallet context: account / credential / session ids shared between +// the per-credential-type tabs and the money + manage flows. + +import { el } from "../ui"; + +let ctxAccountId: HTMLInputElement | null = null; +let ctxCredentialId: HTMLInputElement | null = null; +let ctxSessionId: HTMLInputElement | null = null; + +function accountIdEl(): HTMLInputElement { + if (!ctxAccountId) ctxAccountId = el("ctx-account-id"); + return ctxAccountId; +} +function credentialIdEl(): HTMLInputElement { + if (!ctxCredentialId) + ctxCredentialId = el("ctx-credential-id"); + return ctxCredentialId; +} +function sessionIdEl(): HTMLInputElement { + if (!ctxSessionId) ctxSessionId = el("ctx-session-id"); + return ctxSessionId; +} + +// First-call-wins by design: the account id is established once (Create +// Customer) and shared across every credential-type tab, so a later per-type +// flow must not clobber it. Credential/session ids below are per-type and do +// overwrite. To switch accounts, clear the field in the UI. +export function setCtxAccount(id: string): void { + if (!accountIdEl().value) accountIdEl().value = id; +} +export function setCtxCredential(id: string): void { + credentialIdEl().value = id; +} +export function setCtxSession(id: string): void { + sessionIdEl().value = id; +} + +export function requireAccountId(): string { + const id = accountIdEl().value.trim(); + if (!id) + throw new Error( + "Internal Account ID is required — run Create Customer first.", + ); + return id; +} + +export function requireCredentialId(): string { + const id = credentialIdEl().value.trim(); + if (!id) + throw new Error( + "Credential ID is required — run Create for this type first.", + ); + return id; +} + +export function requireSessionId(): string { + const id = sessionIdEl().value.trim(); + if (!id) + throw new Error("Session ID is required — run Verify for this type first."); + return id; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts b/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts new file mode 100644 index 000000000..3714ed96e --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts @@ -0,0 +1,150 @@ +// Shared setup: create customer, platform config (OTP + branding), balance. + +import { apiGet, apiPatch, apiPost } from "../api-client"; +import { addLog, bindClick, el, maybeEl } from "../ui"; +import { setCtxAccount } from "./context"; + +// ----- Create customer + Fetch balance ----- + +export function wireCustomerFlows(): void { + const createPlatformCustomerId = el( + "create-platform-customer-id", + ); + const createCustomerName = el("create-customer-name"); + const createCustomerEmail = el("create-customer-email"); + const balanceCustomerId = el("balance-customer-id"); + + bindClick( + "btn-create-customer", + "create-customer-status", + "Create Customer", + "Creating customer...", + async () => { + const platformCustomerId = + createPlatformCustomerId.value.trim() || `test-${Date.now()}`; + const fullName = createCustomerName.value.trim() || "Test User"; + const email = createCustomerEmail.value.trim(); + const body: Record = { + customerType: "BUSINESS", + platformCustomerId, + region: "US", + currencies: ["USDB"], + businessInfo: { + legalName: fullName, + taxId: "12-3456789", + incorporatedOn: "2020-01-01", + }, + }; + if (email) body.email = email; + const { data: customer } = await apiPost("/customers", body); + addLog("Create Customer", customer); + const customerId = (customer as Record).id as string; + if (!balanceCustomerId.value) balanceCustomerId.value = customerId; + const accounts = (await apiGet( + `/customers/internal-accounts?customerId=${customerId}¤cy=USDB`, + )) as { data: Array<{ id: string }> }; + addLog("Internal Accounts", accounts); + if (accounts.data && accounts.data.length > 0) { + setCtxAccount(accounts.data[0].id); + return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}\nEmbedded wallet pre-created at customer-create time.`; + } + return `Customer: ${customerId}\nNo USDB account found yet — wallet provisioning may be in progress.`; + }, + ); + + bindClick( + "btn-fetch-balance", + "balance-status", + "Fetch Balance", + "Fetching balance...", + async () => { + const customerId = balanceCustomerId.value.trim(); + if (!customerId) throw new Error("Customer ID is required."); + const data = (await apiGet( + `/customers/internal-accounts?customerId=${encodeURIComponent(customerId)}`, + )) as { data: Array> }; + addLog("Fetch Balance", data); + return JSON.stringify( + data.data?.map((a) => ({ + id: a.id, + currency: a.currency, + balance: a.balance, + })) ?? [], + null, + 2, + ); + }, + ); + + wirePlatformConfigFlows(); +} + +// ----- Platform config (OTP + branding) — GET to populate, PATCH to save ----- + +function wirePlatformConfigFlows(): void { + const cfgAppName = maybeEl("cfg-app-name"); + const cfgOtpLength = maybeEl("cfg-otp-length"); + const cfgAlphanumeric = maybeEl("cfg-alphanumeric"); + const cfgExpirationSeconds = maybeEl( + "cfg-expiration-seconds", + ); + const cfgSendFromEmail = maybeEl("cfg-send-from-email"); + const cfgSendFromName = maybeEl("cfg-send-from-name"); + const cfgReplyToEmail = maybeEl("cfg-reply-to-email"); + const cfgLogoUrl = maybeEl("cfg-logo-url"); + + function readConfigForm(): Record { + // Only include fields the user touched (non-empty) so we PATCH a real partial. + const ewc: Record = {}; + if (cfgAppName?.value.trim()) ewc.appName = cfgAppName.value.trim(); + if (cfgOtpLength?.value.trim()) + ewc.otpLength = parseInt(cfgOtpLength.value, 10); + if (cfgAlphanumeric) ewc.alphanumeric = cfgAlphanumeric.checked; + if (cfgExpirationSeconds?.value.trim()) + ewc.expirationSeconds = parseInt(cfgExpirationSeconds.value, 10); + if (cfgSendFromEmail?.value.trim()) + ewc.sendFromEmailAddress = cfgSendFromEmail.value.trim(); + if (cfgSendFromName?.value.trim()) + ewc.sendFromEmailSenderName = cfgSendFromName.value.trim(); + if (cfgReplyToEmail?.value.trim()) + ewc.replyToEmailAddress = cfgReplyToEmail.value.trim(); + if (cfgLogoUrl?.value.trim()) ewc.logoUrl = cfgLogoUrl.value.trim(); + return { embeddedWalletConfig: ewc }; + } + + function applyConfigToForm(cfg: unknown): void { + const ewc = (cfg as { embeddedWalletConfig?: Record }) + ?.embeddedWalletConfig; + if (!ewc) return; + if (cfgAppName && typeof ewc.appName === "string") + cfgAppName.value = ewc.appName; + if (cfgOtpLength && typeof ewc.otpLength === "number") + cfgOtpLength.value = String(ewc.otpLength); + if (cfgAlphanumeric && typeof ewc.alphanumeric === "boolean") + cfgAlphanumeric.checked = ewc.alphanumeric; + if (cfgExpirationSeconds && typeof ewc.expirationSeconds === "number") + cfgExpirationSeconds.value = String(ewc.expirationSeconds); + if (cfgSendFromEmail && typeof ewc.sendFromEmailAddress === "string") + cfgSendFromEmail.value = ewc.sendFromEmailAddress; + if (cfgSendFromName && typeof ewc.sendFromEmailSenderName === "string") + cfgSendFromName.value = ewc.sendFromEmailSenderName; + if (cfgReplyToEmail && typeof ewc.replyToEmailAddress === "string") + cfgReplyToEmail.value = ewc.replyToEmailAddress; + if (cfgLogoUrl && typeof ewc.logoUrl === "string") + cfgLogoUrl.value = ewc.logoUrl; + } + + bindClick("btn-cfg-load", "cfg-status", "Load Config", "Loading…", async () => { + const cfg = await apiGet("/config"); + addLog("GET /config", cfg); + applyConfigToForm(cfg); + return "Config loaded into form."; + }); + + bindClick("btn-cfg-save", "cfg-status", "Save Config", "Saving…", async () => { + const body = readConfigForm(); + const { data } = await apiPatch("/config", body); + addLog("PATCH /config", data); + return "Config saved."; + }); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts new file mode 100644 index 000000000..fc2012e5b --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts @@ -0,0 +1,188 @@ +// EMAIL_OTP lifecycle: create, secure-OTP challenge/verify, rechallenge, add. + +import { generateP256KeyPair } from "@turnkey/crypto"; + +import { SANDBOX_SIG } from "../config"; +import { apiPost } from "../api-client"; +import { + buildWalletSignature, + sealOtpBundle, + setSessionKeysFromTek, +} from "../turnkey"; +import { addLog, bindClick, el } from "../ui"; +import { + requireAccountId, + requireCredentialId, + setCtxCredential, + setCtxSession, +} from "./context"; + +export function wireEmailOtpFlows(): void { + bindClick( + "btn-email_otp-create", + "email_otp-create-status", + "EMAIL_OTP Create", + "Registering EMAIL_OTP credential...", + async () => { + const { data } = await apiPost("/auth/credentials", { + type: "EMAIL_OTP", + accountId: requireAccountId(), + }); + addLog("EMAIL_OTP Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, + ); + + // Secure OTP — two steps so it works against real Turnkey, which emails a + // real OTP (sandbox uses the fixed 000000). Step 1 (/challenge) issues the + // INIT_OTP and returns the enclave's target bundle, held below until Verify + // consumes it. Step 2 + // HPKE-seals the entered code under that bundle, runs /verify first leg + // (202 + payloadToSign), signs the token with the TEK, and runs /verify retry + // (200 session). The code never leaves the client in plaintext; the TEK private + // key stays client-side (no encryptedSessionSigningKey is returned). + + // Target bundle from the most recent V3 challenge + the credential it was + // issued for, so Verify catches a stale/mismatched bundle. + let v3TargetBundle: string | null = null; + let v3TargetBundleCredId: string | null = null; + + bindClick( + "btn-email_otp-v3-challenge", + "email_otp-v3-challenge-status", + "EMAIL_OTP Challenge (V3)", + "Requesting OTP...", + async () => { + const credId = requireCredentialId(); + const { data: challengeData } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("V3 Challenge", challengeData); + const targetBundle = (challengeData as Record) + .otpEncryptionTargetBundle as string | undefined; + if (!targetBundle) + throw new Error( + "Challenge response missing otpEncryptionTargetBundle — is the local " + + "backend running the secure-OTP branch?", + ); + v3TargetBundle = targetBundle; + v3TargetBundleCredId = credId; + return "OTP sent. Check the customer's email, enter the code below, then Verify."; + }, + ); + + bindClick( + "btn-email_otp-v3-verify", + "email_otp-v3-verify-status", + "EMAIL_OTP Verify (V3)", + "Verifying...", + async () => { + const credId = requireCredentialId(); + const otp = el("email_otp-v3-code").value.trim(); + if (!otp) throw new Error("OTP code is required."); + if (!v3TargetBundle || v3TargetBundleCredId !== credId) + throw new Error( + "Run Challenge (V3) first to request an OTP + target bundle for this " + + "credential.", + ); + + // Generate a TEK and HPKE-seal the entered OTP under the challenge bundle. + const tek = generateP256KeyPair(); + const encryptedOtpBundle = sealOtpBundle(v3TargetBundle, tek.publicKey, otp); + + // First leg → expect 202 with payloadToSign (verificationToken) + requestId. + const leg1 = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "EMAIL_OTP", encryptedOtpBundle }, + ); + const l1 = (leg1.data ?? {}) as Record; + addLog("V3 Verify leg 1 (expect 202)", { status: leg1.status, ...l1 }); + const payloadToSign = l1.payloadToSign as string | undefined; + const requestId = l1.requestId as string | undefined; + if (leg1.status !== 202 || !payloadToSign || !requestId) + throw new Error(`Unexpected first-leg response: ${JSON.stringify(leg1)}`); + + // Sign the verificationToken with the TEK private key. + const signature = await buildWalletSignature( + tek.publicKey, + tek.privateKey, + payloadToSign, + ); + + // Retry with the signature → expect 200 AuthSession. + const leg2 = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "EMAIL_OTP", encryptedOtpBundle }, + { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, + ); + const session = (leg2.data ?? {}) as Record; + addLog("V3 Verify leg 2 (expect 200 session)", { + status: leg2.status, + ...session, + }); + if (session.id) setCtxSession(session.id as string); + // The TEK is now the session's API key (OTP_LOGIN registered it). Cache it + // as the active session signing key so later signed retries (add passkey, + // quote execute, etc.) can stamp with this session via turnkeyStamp(). + if (leg2.status === 200) setSessionKeysFromTek(tek); + // One bundle per challenge — force a fresh Challenge for the next run. + v3TargetBundle = null; + v3TargetBundleCredId = null; + return JSON.stringify({ leg1: leg1.data, session: leg2.data }, null, 2); + }, + ); + + bindClick( + "btn-email_otp-rechallenge", + "email_otp-rechallenge-status", + "EMAIL_OTP Rechallenge", + "Re-issuing OTP...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("EMAIL_OTP Rechallenge", data); + return JSON.stringify(data, null, 2); + }, + ); + + const emailOtpAddRequestId = el("email_otp-add-request-id"); + bindClick( + "btn-email_otp-add-issue", + "email_otp-add-issue-status", + "EMAIL_OTP Add (issue)", + "Issuing add challenge...", + async () => { + const { data } = await apiPost("/auth/credentials", { + type: "EMAIL_OTP", + accountId: requireAccountId(), + }); + addLog("EMAIL_OTP Add (issue)", data); + const d = data as Record; + if (d.requestId) emailOtpAddRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + "btn-email_otp-add-retry", + "email_otp-add-retry-status", + "EMAIL_OTP Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = emailOtpAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiPost( + "/auth/credentials", + { type: "EMAIL_OTP", accountId: requireAccountId() }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("EMAIL_OTP Add (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts b/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts new file mode 100644 index 000000000..fbe2b66a7 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts @@ -0,0 +1,184 @@ +// Shared signed-retry wiring per tab: delete credential / session / export, + +// list credentials / sessions. +// +// Endpoints are identical for all tabs — inputs come from the shared ctx, and +// the per-tab buttons just visually group each flow under the relevant tab. +// The three flows below are wired once per credential type in a single loop +// (`wireManageFlows`), replacing the previously inlined per-type duplication. + +import { CredType, SANDBOX_SIG } from "../config"; +import { apiDelete, apiGet, apiPost } from "../api-client"; +import { addLog, bindClick, maybeEl } from "../ui"; +import { + requireAccountId, + requireCredentialId, + requireSessionId, +} from "./context"; + +// Request-Id inputs are looked up lazily inside the handlers (via `maybeEl`) +// rather than captured eagerly with `el()` at wire time, matching `bindClick`'s +// graceful-skip pattern: a missing element degrades just that one button +// instead of throwing and aborting the rest of `wireManageFlows`. +function requestIdInput(id: string): HTMLInputElement | null { + return maybeEl(id); +} + +function wireDeleteCredentialButtons(type: CredType): void { + const reqInputId = `${type}-del-cred-request-id`; + bindClick( + `btn-${type}-del-cred-issue`, + `${type}-del-cred-issue-status`, + "Delete Credential (issue)", + "Issuing delete challenge...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiDelete( + `/auth/credentials/${encodeURIComponent(credId)}`, + ); + addLog("Delete Credential (issue)", data); + const d = data as Record; + const reqInput = requestIdInput(reqInputId); + if (d.requestId && reqInput) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-del-cred-retry`, + `${type}-del-cred-retry-status`, + "Delete Credential (retry)", + "Forwarding signed retry...", + async () => { + const credId = requireCredentialId(); + const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; + if (!requestId) + throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiDelete( + `/auth/credentials/${encodeURIComponent(credId)}`, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Delete Credential (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +function wireDeleteSessionButtons(type: CredType): void { + const reqInputId = `${type}-del-session-request-id`; + bindClick( + `btn-${type}-del-session-issue`, + `${type}-del-session-issue-status`, + "Delete Session (issue)", + "Issuing delete challenge...", + async () => { + const sid = requireSessionId(); + const { data } = await apiDelete( + `/auth/sessions/${encodeURIComponent(sid)}`, + ); + addLog("Delete Session (issue)", data); + const d = data as Record; + const reqInput = requestIdInput(reqInputId); + if (d.requestId && reqInput) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-del-session-retry`, + `${type}-del-session-retry-status`, + "Delete Session (retry)", + "Forwarding signed retry...", + async () => { + const sid = requireSessionId(); + const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; + if (!requestId) + throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiDelete( + `/auth/sessions/${encodeURIComponent(sid)}`, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Delete Session (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +function wireExportButtons(type: CredType): void { + const reqInputId = `${type}-export-request-id`; + bindClick( + `btn-${type}-export-issue`, + `${type}-export-issue-status`, + "Wallet Export (issue)", + "Issuing export challenge...", + async () => { + const accountId = requireAccountId(); + const { data } = await apiPost( + `/internal-accounts/${encodeURIComponent(accountId)}/export`, + {}, + ); + addLog("Wallet Export (issue)", data); + const d = data as Record; + const reqInput = requestIdInput(reqInputId); + if (d.requestId && reqInput) reqInput.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + `btn-${type}-export-retry`, + `${type}-export-retry-status`, + "Wallet Export (retry)", + "Forwarding signed retry...", + async () => { + const accountId = requireAccountId(); + const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; + if (!requestId) + throw new Error("Request-Id is required — run step 1 first."); + const { data } = await apiPost( + `/internal-accounts/${encodeURIComponent(accountId)}/export`, + {}, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("Wallet Export (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +function wireListButtons(): void { + bindClick( + "btn-list-credentials", + "list-status", + "List Credentials", + "Listing...", + async () => { + const accountId = requireAccountId(); + const data = await apiGet( + `/auth/credentials?accountId=${encodeURIComponent(accountId)}`, + ); + addLog("List Credentials", data); + return JSON.stringify(data, null, 2); + }, + ); + + bindClick( + "btn-list-sessions", + "list-status", + "List Sessions", + "Listing...", + async () => { + const accountId = requireAccountId(); + const data = await apiGet( + `/auth/sessions?accountId=${encodeURIComponent(accountId)}`, + ); + addLog("List Sessions", data); + return JSON.stringify(data, null, 2); + }, + ); +} + +export function wireManageFlows(): void { + for (const type of ["email_otp", "oauth", "passkey"] as const) { + wireDeleteCredentialButtons(type); + wireDeleteSessionButtons(type); + wireExportButtons(type); + } + wireListButtons(); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/money.ts b/apps/examples/grid-global-accounts-example-app/src/flows/money.ts new file mode 100644 index 000000000..33e834b1a --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/money.ts @@ -0,0 +1,177 @@ +// Money movement: external account, quote, sign payload, execute. + +import { SANDBOX_SIG } from "../config"; +import { apiPost, getMode } from "../api-client"; +import { turnkeyStamp } from "../turnkey"; +import { addLog, bindClick, el } from "../ui"; +import { requireAccountId } from "./context"; + +export function wireMoneyFlows(): void { + const extAccountType = el("ext-account-type"); + const extSparkFields = el("ext-spark-fields"); + const extBankFields = el("ext-bank-fields"); + const quoteDestinationAccountId = el( + "quote-destination-account-id", + ); + + extAccountType.addEventListener("change", () => { + const isSpark = extAccountType.value === "SPARK_WALLET"; + extSparkFields.style.display = isSpark ? "" : "none"; + extBankFields.style.display = isSpark ? "none" : ""; + }); + + bindClick( + "btn-create-external-account", + "ext-account-status", + "Create External Account", + "Creating external account...", + async () => { + let body: Record; + if (extAccountType.value === "SPARK_WALLET") { + const address = el("ext-spark-address").value.trim(); + if (!address) throw new Error("Spark address is required."); + body = { + currency: "BTC", + accountInfo: { accountType: "SPARK_WALLET", address }, + }; + } else { + const accountNumber = el( + "ext-bank-account-number", + ).value.trim(); + const routingNumber = el( + "ext-bank-routing-number", + ).value.trim(); + const fullName = + el("ext-bank-beneficiary-name").value.trim() || + "Sandbox Test User"; + if (!accountNumber || !routingNumber) + throw new Error("Account number and routing number are required."); + body = { + currency: "USD", + accountInfo: { + accountType: "USD_ACCOUNT", + countries: ["US"], + paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], + accountNumber, + routingNumber, + beneficiary: { + beneficiaryType: "INDIVIDUAL", + fullName, + birthDate: "1990-01-15", + nationality: "US", + address: { + line1: "100 Test St", + city: "SF", + postalCode: "94102", + country: "US", + }, + }, + }, + }; + } + const { data } = await apiPost("/platform/external-accounts", body); + addLog("Create External Account", data); + const d = data as Record; + if (d.id) quoteDestinationAccountId.value = d.id as string; + return JSON.stringify(data, null, 2); + }, + ); + + const executeQuoteId = el("execute-quote-id"); + const executePayloadToSign = el( + "execute-payload-to-sign", + ); + const executeSignature = el("execute-signature"); + + bindClick( + "btn-create-quote", + "quote-status", + "Create Quote", + "Creating quote...", + async () => { + const sourceAccountId = requireAccountId(); + const destinationAccountId = quoteDestinationAccountId.value.trim(); + const lockedAmount = Number( + el("quote-locked-amount").value, + ); + if (!destinationAccountId || !lockedAmount) + throw new Error("Destination external account and amount are required."); + const { data } = await apiPost("/quotes", { + source: { sourceType: "ACCOUNT", accountId: sourceAccountId }, + destination: { + destinationType: "ACCOUNT", + accountId: destinationAccountId, + }, + lockedCurrencySide: el("quote-locked-side").value, + lockedCurrencyAmount: lockedAmount, + }); + addLog("Create Quote", data); + const d = data as Record; + if (d.id) executeQuoteId.value = d.id as string; + // Extract `payloadToSign` from the EMBEDDED_WALLET payment instruction + // (second entry in the example response — find by accountType match). + const instructions = (d.paymentInstructions ?? []) as Array< + Record + >; + for (const inst of instructions) { + const info = inst.accountOrWalletInfo as + | Record + | undefined; + if (info && info.accountType === "EMBEDDED_WALLET" && info.payloadToSign) { + executePayloadToSign.value = info.payloadToSign as string; + break; + } + } + // In sandbox mode, pre-fill the magic signature so the user can hit + // Execute immediately. In production mode, leave blank — the Sign + // payload button decrypts the session bundle and stamps it. + if (getMode() === "sandbox") { + executeSignature.value = SANDBOX_SIG; + } else { + executeSignature.value = ""; + } + return JSON.stringify(data, null, 2); + }, + ); + + bindClick( + "btn-sign-payload", + "execute-status", + "Sign Payload", + "Signing...", + async () => { + if (getMode() === "sandbox") { + executeSignature.value = SANDBOX_SIG; + return `Mode: sandbox — filled magic signature.`; + } + const payload = executePayloadToSign.value.trim(); + if (!payload) + throw new Error( + "payloadToSign is empty — run Create Quote first or paste it manually.", + ); + const stamp = await turnkeyStamp(payload); + executeSignature.value = stamp; + return `Stamped (${stamp.length} chars).`; + }, + ); + + bindClick( + "btn-execute-quote", + "execute-status", + "Execute Quote", + "Executing quote...", + async () => { + const quoteId = executeQuoteId.value.trim(); + const signature = executeSignature.value.trim(); + if (!quoteId || !signature) + throw new Error("Quote ID and Grid-Wallet-Signature are required."); + const { data } = await apiPost( + `/quotes/${encodeURIComponent(quoteId)}/execute`, + {}, + { "Grid-Wallet-Signature": signature }, + ); + addLog("Execute Quote", data); + return JSON.stringify(data, null, 2); + }, + ); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts new file mode 100644 index 000000000..94ae08789 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts @@ -0,0 +1,113 @@ +// OAUTH lifecycle: create, verify (→ session), rechallenge (no-op), add. + +import { SANDBOX_SIG } from "../config"; +import { apiPost } from "../api-client"; +import { rememberEncryptedSessionSigningKey } from "../turnkey"; +import { addLog, bindClick, el, wireGenKeyButton } from "../ui"; +import { + requireAccountId, + requireCredentialId, + setCtxCredential, + setCtxSession, +} from "./context"; + +export function wireOauthFlows(): void { + bindClick( + "btn-oauth-create", + "oauth-create-status", + "OAUTH Create", + "Creating OAUTH wallet...", + async () => { + const oidc = el("oauth-create-oidc").value.trim(); + if (!oidc) throw new Error("OIDC token is required."); + const { data } = await apiPost("/auth/credentials", { + type: "OAUTH", + accountId: requireAccountId(), + oidcToken: oidc, + }); + addLog("OAUTH Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, + ); + + wireGenKeyButton("btn-oauth-verify-genkey", "oauth-verify-pubkey"); + bindClick( + "btn-oauth-verify", + "oauth-verify-status", + "OAUTH Verify", + "Verifying...", + async () => { + const credId = requireCredentialId(); + const oidc = el("oauth-verify-oidc").value.trim(); + const pubkey = el("oauth-verify-pubkey").value.trim(); + if (!oidc || !pubkey) + throw new Error("OIDC token and public key are required."); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + { type: "OAUTH", oidcToken: oidc, clientPublicKey: pubkey }, + ); + addLog("OAUTH Verify", data); + const d = data as Record; + if (d.id) setCtxSession(d.id as string); + rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); + return JSON.stringify(data, null, 2); + }, + ); + + bindClick( + "btn-oauth-rechallenge", + "oauth-rechallenge-status", + "OAUTH Rechallenge", + "Running no-op rechallenge...", + async () => { + const credId = requireCredentialId(); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + {}, + ); + addLog("OAUTH Rechallenge", data); + return JSON.stringify(data, null, 2); + }, + ); + + const oauthAddRequestId = el("oauth-add-request-id"); + bindClick( + "btn-oauth-add-issue", + "oauth-add-issue-status", + "OAUTH Add (issue)", + "Issuing add challenge...", + async () => { + const oidc = el("oauth-add-oidc").value.trim(); + if (!oidc) throw new Error("OIDC token is required."); + const { data } = await apiPost("/auth/credentials", { + type: "OAUTH", + accountId: requireAccountId(), + oidcToken: oidc, + }); + addLog("OAUTH Add (issue)", data); + const d = data as Record; + if (d.requestId) oauthAddRequestId.value = d.requestId as string; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + "btn-oauth-add-retry", + "oauth-add-retry-status", + "OAUTH Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = oauthAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + const oidc = el("oauth-add-oidc").value.trim(); + const { data } = await apiPost( + "/auth/credentials", + { type: "OAUTH", accountId: requireAccountId(), oidcToken: oidc }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, + ); + addLog("OAUTH Add (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts new file mode 100644 index 000000000..069001b5c --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts @@ -0,0 +1,238 @@ +// PASSKEY lifecycle: create (real registration), challenge, verify (assertion), +// add (signed retry, session-stamped in production). + +import { SANDBOX_SIG } from "../config"; +import { apiPost, getMode } from "../api-client"; +import { + rememberEncryptedSessionSigningKey, + turnkeyStamp, +} from "../turnkey"; +import { createRealPasskey, signWithPasskey } from "../webauthn"; +import { addLog, bindClick, el, wireGenKeyButton } from "../ui"; +import { + requireAccountId, + requireCredentialId, + setCtxCredential, + setCtxSession, +} from "./context"; + +export function wirePasskeyFlows(): void { + bindClick( + "btn-passkey-create", + "passkey-create-status", + "PASSKEY Create", + "Creating PASSKEY wallet...", + async () => { + const body = { + type: "PASSKEY", + accountId: requireAccountId(), + nickname: el("passkey-create-nickname").value.trim(), + challenge: el("passkey-create-challenge").value.trim(), + attestation: { + credentialId: el( + "passkey-create-cred-id-raw", + ).value.trim(), + clientDataJson: el( + "passkey-create-client-data-json", + ).value.trim(), + attestationObject: el( + "passkey-create-attestation-object", + ).value.trim(), + }, + }; + const { data } = await apiPost("/auth/credentials", body); + addLog("PASSKEY Create", data); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return JSON.stringify(data, null, 2); + }, + ); + + // Drive a real WebAuthn registration (Touch ID) and fill the attestation + // fields above — used by both the "Create" and "Add additional" flows. + bindClick( + "btn-passkey-webauthn-create", + "passkey-webauthn-create-status", + "Passkey Register", + "Waiting for authenticator (Touch ID)...", + async () => { + const nickname = el( + "passkey-create-nickname", + ).value.trim(); + const att = await createRealPasskey(nickname); + el("passkey-create-challenge").value = att.challenge; + el("passkey-create-cred-id-raw").value = + att.credentialId; + el("passkey-create-client-data-json").value = + att.clientDataJson; + el("passkey-create-attestation-object").value = + att.attestationObject; + addLog("Passkey Registered (real)", att); + return "Real passkey created — attestation fields filled. Now run Create or Add."; + }, + ); + + wireGenKeyButton("btn-passkey-challenge-genkey", "passkey-challenge-pubkey"); + const passkeyVerifyRequestId = el( + "passkey-verify-request-id", + ); + // Captured from the session-challenge response so the real assertion ceremony + // can sign the exact sha256-hex challenge Turnkey expects. + let passkeySessionChallenge = ""; + bindClick( + "btn-passkey-challenge", + "passkey-challenge-status", + "PASSKEY Challenge", + "Issuing session challenge...", + async () => { + const credId = requireCredentialId(); + const pubkey = el( + "passkey-challenge-pubkey", + ).value.trim(); + if (!pubkey) + throw new Error("Client public key is required — generate one first."); + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + { clientPublicKey: pubkey }, + ); + addLog("PASSKEY Challenge", data); + const d = data as Record; + if (d.requestId) passkeyVerifyRequestId.value = d.requestId as string; + if (typeof d.challenge === "string") passkeySessionChallenge = d.challenge; + return JSON.stringify(data, null, 2); + }, + ); + + bindClick( + "btn-passkey-verify", + "passkey-verify-status", + "PASSKEY Verify", + "Verifying assertion...", + async () => { + const credId = requireCredentialId(); + const requestId = passkeyVerifyRequestId.value.trim(); + const body = { + type: "PASSKEY", + clientPublicKey: el( + "passkey-challenge-pubkey", + ).value.trim(), + assertion: { + credentialId: el( + "passkey-create-cred-id-raw", + ).value.trim(), + clientDataJson: el( + "passkey-verify-client-data-json", + ).value.trim(), + authenticatorData: el( + "passkey-verify-auth-data", + ).value.trim(), + signature: el( + "passkey-verify-signature", + ).value.trim(), + }, + }; + const headers: Record = {}; + if (requestId) headers["Request-Id"] = requestId; + const { data } = await apiPost( + `/auth/credentials/${encodeURIComponent(credId)}/verify`, + body, + headers, + ); + addLog("PASSKEY Verify", data); + const d = data as Record; + if (d.id) setCtxSession(d.id as string); + rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); + return JSON.stringify(data, null, 2); + }, + ); + + // Drive a real WebAuthn assertion (Touch ID) against the issued challenge and + // fill the assertion fields above for Verify. + bindClick( + "btn-passkey-webauthn-get", + "passkey-webauthn-get-status", + "Passkey Sign", + "Waiting for authenticator (Touch ID)...", + async () => { + const credId = el( + "passkey-create-cred-id-raw", + ).value.trim(); + const assertion = await signWithPasskey(passkeySessionChallenge, credId); + el("passkey-create-cred-id-raw").value = + assertion.credentialId; + el("passkey-verify-client-data-json").value = + assertion.clientDataJson; + el("passkey-verify-auth-data").value = + assertion.authenticatorData; + el("passkey-verify-signature").value = + assertion.signature; + addLog("Passkey Signed (real)", assertion); + return "Real assertion produced — verify fields filled. Now click Verify."; + }, + ); + + const passkeyAddRequestId = el("passkey-add-request-id"); + // Captured from the add-issue 202 so the retry can stamp the exact payload. + let passkeyAddPayloadToSign = ""; + function buildPasskeyAddBody(): Record { + return { + type: "PASSKEY", + accountId: requireAccountId(), + nickname: el("passkey-add-nickname").value.trim(), + challenge: el("passkey-create-challenge").value.trim(), + attestation: { + credentialId: el( + "passkey-create-cred-id-raw", + ).value.trim(), + clientDataJson: el( + "passkey-create-client-data-json", + ).value.trim(), + attestationObject: el( + "passkey-create-attestation-object", + ).value.trim(), + }, + }; + } + bindClick( + "btn-passkey-add-issue", + "passkey-add-issue-status", + "PASSKEY Add (issue)", + "Issuing add challenge...", + async () => { + const { data } = await apiPost("/auth/credentials", buildPasskeyAddBody()); + addLog("PASSKEY Add (issue)", data); + const d = data as Record; + if (d.requestId) passkeyAddRequestId.value = d.requestId as string; + if (typeof d.payloadToSign === "string") + passkeyAddPayloadToSign = d.payloadToSign; + return JSON.stringify(data, null, 2); + }, + ); + bindClick( + "btn-passkey-add-retry", + "passkey-add-retry-status", + "PASSKEY Add (retry)", + "Forwarding signed retry...", + async () => { + const requestId = passkeyAddRequestId.value.trim(); + if (!requestId) throw new Error("Request-Id is required — run step 1 first."); + // Sandbox accepts the magic value, but real Turnkey requires the + // CREATE_AUTHENTICATORS payload to be stamped by an authorized credential — + // the active session's signing key. Establish a session (e.g. OTP login or + // passkey verify) first so the session signing key is available. + let signature = SANDBOX_SIG; + if (getMode() === "production") { + if (!passkeyAddPayloadToSign) { + throw new Error("Missing payloadToSign — run step 1 first."); + } + signature = await turnkeyStamp(passkeyAddPayloadToSign); + } + const { data } = await apiPost("/auth/credentials", buildPasskeyAddBody(), { + "Grid-Wallet-Signature": signature, + "Request-Id": requestId, + }); + addLog("PASSKEY Add (retry)", data); + return JSON.stringify(data, null, 2); + }, + ); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts index 18ac8f80e..cd956c442 100644 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -3,1445 +3,25 @@ // Tabbed lifecycle per credential type (EMAIL_OTP / OAUTH / PASSKEY) + // shared customer / external account / quote / execute sections. // Signed-retry flows are two-step: issue (returns 202 challenge) then retry -// (forwards with `Grid-Wallet-Signature: sandbox-valid-signature`). - -import { - decryptCredentialBundle, - formatHpkeBuf, - generateP256KeyPair, - getPublicKey, - hpkeEncrypt, -} from "@turnkey/crypto"; -import { signWithApiKey } from "@turnkey/api-key-stamper"; - -type Mode = "sandbox" | "production"; -type CredType = "email_otp" | "oauth" | "passkey"; - -const SANDBOX_SIG = "sandbox-valid-signature"; -// All requests proxy through Vite at `/api` and forward to prod. -// Credentials are entered manually in the UI — never embedded. -const API_BASE = "/api"; - -// Turnkey API stamp scheme — must match what `@turnkey/api-key-stamper` emits. -const TURNKEY_STAMP_SCHEME = "SIGNATURE_SCHEME_TK_API_P256"; - -// ----- Production-mode key state ----- -// -// Generated client-side at the first call to `generateClientKeyPair`. The -// uncompressed public key (130 hex chars, 0x04-prefixed) goes to Grid as -// `clientPublicKey` on Verify; the private key is held here and used to -// HPKE-decrypt the `encryptedSessionSigningKey` Grid hands back, yielding -// the Turnkey API session keypair we then stamp `payloadToSign` with. -// -// In sandbox mode the bundle is shape-valid but undecryptable — sandbox -// flows skip this entire path and use the magic signature constants. - -interface ClientKeyPair { - privateKey: string; // hex - publicKey: string; // hex, compressed - publicKeyUncompressed: string; // hex, 130 chars (0x04 prefix) -} - -interface SessionKeys { - apiPublicKey: string; // hex, compressed P-256 - apiPrivateKey: string; // hex -} - -let clientKeyPair: ClientKeyPair | null = null; -let lastEncryptedSessionSigningKey: string | null = null; -let cachedSessionKeys: SessionKeys | null = null; - -function generateClientKeyPair(): ClientKeyPair { - const kp = generateP256KeyPair(); - clientKeyPair = { - privateKey: kp.privateKey, - publicKey: kp.publicKey, - publicKeyUncompressed: kp.publicKeyUncompressed, - }; - // Re-using the keypair across credential types means a Verify by any - // type cycles fresh session bundles bound to the same client key — - // simpler than tracking one keypair per type for the test app. - cachedSessionKeys = null; - lastEncryptedSessionSigningKey = null; - return clientKeyPair; -} - -function rememberEncryptedSessionSigningKey(value: unknown): void { - if (typeof value === "string" && value) { - lastEncryptedSessionSigningKey = value; - cachedSessionKeys = null; - } -} - -// OTP_LOGIN / STAMP_LOGIN model: there is no encryptedSessionSigningKey bundle -// — the TEK private key *is* the session's API key once login registers it. -// Cache it directly so turnkeyStamp() can authorize later signed retries -// (e.g. adding a passkey) without the Verify-style clientKeyPair + bundle. -function setSessionKeysFromTek(tek: { - publicKey: string; - privateKey: string; -}): void { - cachedSessionKeys = { - apiPublicKey: tek.publicKey, - apiPrivateKey: tek.privateKey, - }; -} - -function decryptSessionKeysOrThrow(): SessionKeys { - if (cachedSessionKeys) return cachedSessionKeys; - if (!clientKeyPair) - throw new Error("No client keypair — run a Verify in production mode first."); - if (!lastEncryptedSessionSigningKey) - throw new Error( - "No encryptedSessionSigningKey — run a Verify in production mode first.", - ); - const apiPrivateKey = decryptCredentialBundle( - lastEncryptedSessionSigningKey, - clientKeyPair.privateKey, - ); - const apiPublicKeyBytes = getPublicKey(apiPrivateKey, /*isCompressed*/ true); - const apiPublicKey = Array.from(apiPublicKeyBytes) - .map((b) => b.toString(16).padStart(2, "0")) - .join(""); - cachedSessionKeys = { apiPublicKey, apiPrivateKey }; - return cachedSessionKeys; -} - -async function turnkeyStamp(payload: string): Promise { - const { apiPublicKey, apiPrivateKey } = decryptSessionKeysOrThrow(); - // `signWithApiKey` returns the hex DER signature; the X-Stamp header - // value is base64url(JSON({publicKey, scheme, signature})) with that - // hex signature embedded as-is. Mirrors what `@turnkey/api-key-stamper` - // produces internally; replicated here so we can fill the field on the - // test UI rather than going through the stamper's `stamp(payload)` shape - // (which returns `{stampHeaderName, stampHeaderValue}`). - const signature = await signWithApiKey({ - content: payload, - publicKey: apiPublicKey, - privateKey: apiPrivateKey, - }); - const stamp = { - publicKey: apiPublicKey, - scheme: TURNKEY_STAMP_SCHEME, - signature, - }; - const json = JSON.stringify(stamp); - // base64url(json) — no padding. - return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); -} - -// ----- V3 secure OTP client crypto ----- +// (forwards with `Grid-Wallet-Signature`). // -// HPKE-seal {clientPublicKey, otpCodeAttempt} under the enclave's -// `otpEncryptionTargetBundle`. That bundle is a signed enclave envelope — -// {version, data, dataSignature, enclaveQuorumPublic} — where `data` is a -// hex-encoded JSON blob carrying the enclave's uncompressed HPKE target key as -// `targetPublic`. We pull `targetPublic` out, HPKE-encrypt under it, and emit -// Turnkey's `formatHpkeBuf` wire shape {"encappedPublic","ciphertext"} — exactly -// what `@turnkey/crypto`'s `encryptPrivateKeyToBundle` produces for the -// analogous key-import flow. (A production client would also verify -// `dataSignature` against `enclaveQuorumPublic`; skipped here because the bundle -// originates from our own backend in this test app.) -function hexToBytes(hex: string): Uint8Array { - const bytes = new Uint8Array(hex.length / 2); - for (let i = 0; i < bytes.length; i++) { - bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16); - } - return bytes; -} - -function sealOtpBundle( - targetBundle: string, - clientPublicKeyHex: string, - otpCode: string, -): string { - const parsed = JSON.parse(targetBundle) as { data: string }; - const signedData = JSON.parse( - new TextDecoder().decode(hexToBytes(parsed.data)), - ) as { targetPublic: string }; - const targetKeyBuf = hexToBytes(signedData.targetPublic); // 65-byte uncompressed - const plainTextBuf = new TextEncoder().encode( - // The enclave expects snake_case {otp_code, public_key} — NOT the - // {clientPublicKey, otpCodeAttempt} shown in Turnkey's docs sequence - // diagram. Matches @turnkey/crypto's encryptOtpCodeToBundle. - JSON.stringify({ otp_code: otpCode, public_key: clientPublicKeyHex }), - ); - const encryptedBuf = hpkeEncrypt({ plainTextBuf, targetKeyBuf }); // compressed_enc[33] || ciphertext - return formatHpkeBuf(encryptedBuf); // {"encappedPublic","ciphertext"} -} - -// Build the `Grid-Wallet-Signature` stamp over the verificationToken using a -// specific keypair (the V3 TEK), not the session key — base64url(JSON({ -// publicKey, scheme, signature})), the shape `parse_api_key_stamp` expects. -async function buildWalletSignature( - publicKeyHex: string, - privateKeyHex: string, - payload: string, -): Promise { - const signature = await signWithApiKey({ - content: payload, - publicKey: publicKeyHex, - privateKey: privateKeyHex, - }); - const stamp = { - publicKey: publicKeyHex, - scheme: TURNKEY_STAMP_SCHEME, - signature, - }; - return btoa(JSON.stringify(stamp)) - .replace(/\+/g, "-") - .replace(/\//g, "_") - .replace(/=+$/, ""); -} - -// ----- DOM helpers ----- - -function el(id: string): T { - const found = document.getElementById(id); - if (!found) throw new Error(`Missing element #${id}`); - return found as T; -} - -function maybeEl(id: string): T | null { - return document.getElementById(id) as T | null; -} - -// ----- Auth / HTTP / Mode ----- - -const authClientId = el("auth-client-id"); -const authClientSecret = el("auth-client-secret"); -const modeSelect = el("mode-select"); - -function getMode(): Mode { - return modeSelect.value === "production" ? "production" : "sandbox"; -} - -function getAuthHeader(): string { - return "Basic " + btoa(`${authClientId.value.trim()}:${authClientSecret.value.trim()}`); -} - -async function apiPost( - path: string, - body: Record | undefined, - extraHeaders: Record = {}, -): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: getAuthHeader(), - ...extraHeaders, - }, - body: body === undefined ? undefined : JSON.stringify(body), - }); - const raw = await res.text(); - const data = raw ? JSON.parse(raw) : null; - if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); - return { status: res.status, data }; -} - -async function apiDelete( - path: string, - extraHeaders: Record = {}, -): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { - method: "DELETE", - headers: { - Authorization: getAuthHeader(), - ...extraHeaders, - }, - }); - const raw = await res.text(); - const data = raw ? JSON.parse(raw) : null; - if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); - return { status: res.status, data }; -} - -async function apiPatch( - path: string, - body: Record, - extraHeaders: Record = {}, -): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { - method: "PATCH", - headers: { - "Content-Type": "application/json", - Authorization: getAuthHeader(), - ...extraHeaders, - }, - body: JSON.stringify(body), - }); - const raw = await res.text(); - const data = raw ? JSON.parse(raw) : null; - if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); - return { status: res.status, data }; -} - -async function apiGet(path: string): Promise { - const res = await fetch(API_BASE + path, { - headers: { Authorization: getAuthHeader() }, - }); - const raw = await res.text(); - const data = raw ? JSON.parse(raw) : null; - if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw}`); - return data; -} - -// ----- Logging ----- - -const logContainer = el("log"); - -function timestamp(): string { - return new Date().toISOString().replace("T", " ").slice(0, 19); -} - -function addLog(label: string, data: unknown): void { - const entry = document.createElement("div"); - entry.className = "log-entry"; - const ts = document.createElement("span"); - ts.className = "log-ts"; - ts.textContent = timestamp(); - const lbl = document.createElement("span"); - lbl.className = "log-label"; - lbl.textContent = `[${label}]`; - const body = document.createTextNode(`\n${JSON.stringify(data, null, 2)}`); - entry.append(ts, " ", lbl, body); - logContainer.prepend(entry); -} - -function showStatus(el: HTMLDivElement, ok: boolean, text: string): void { - el.className = `status ${ok ? "ok" : "err"}`; - el.textContent = text; -} - -// ----- Context (cross-tab) ----- - -const ctxAccountId = el("ctx-account-id"); -const ctxCredentialId = el("ctx-credential-id"); -const ctxSessionId = el("ctx-session-id"); - -function setCtxAccount(id: string): void { - if (!ctxAccountId.value) ctxAccountId.value = id; -} -function setCtxCredential(id: string): void { - ctxCredentialId.value = id; -} -function setCtxSession(id: string): void { - ctxSessionId.value = id; -} - -// ----- Generic click wrapper ----- - -function bindClick( - btnId: string, - statusId: string, - label: string, - runningText: string, - handler: () => Promise, -): void { - const btn = maybeEl(btnId); - const statusEl = maybeEl(statusId); - if (!btn || !statusEl) { - console.warn(`bindClick: missing btn=${btnId} or status=${statusId}`); - return; - } - btn.addEventListener("click", async () => { - btn.disabled = true; - showStatus(statusEl, true, runningText); - try { - const responseText = await handler(); - showStatus(statusEl, true, responseText); - } catch (err) { - const msg = err instanceof Error ? err.message : String(err); - addLog(`${label} Error`, { error: msg }); - showStatus(statusEl, false, msg); - } finally { - btn.disabled = false; - } - }); -} - -// ----- Key generation helper ----- -// -// All "Generate P-256 Key" buttons share the same module-level -// `clientKeyPair` so a session decrypted under one keypair stays valid -// across tabs. The button writes the uncompressed public key into the -// target field — that's what Grid's `clientPublicKey` API expects. - -function wireGenKeyButton(btnId: string, targetInputId: string): void { - const btn = maybeEl(btnId); - const target = maybeEl(targetInputId); - if (!btn || !target) return; - btn.addEventListener("click", () => { - btn.disabled = true; - try { - const kp = generateClientKeyPair(); - target.value = kp.publicKeyUncompressed; - addLog("Key Generated", { - publicKeyUncompressed: kp.publicKeyUncompressed, - }); - } catch (err) { - addLog("Key Generation Error", { error: String(err) }); - } finally { - btn.disabled = false; - } - }); -} - -// ----- Tab switching ----- - -for (const tabBtn of document.querySelectorAll(".tab")) { - tabBtn.addEventListener("click", () => { - const name = tabBtn.dataset.tab!; - document - .querySelectorAll(".tab") - .forEach((b) => b.classList.toggle("active", b.dataset.tab === name)); - document - .querySelectorAll(".tab-panel") - .forEach((p) => p.classList.toggle("active", p.dataset.panel === name)); - }); -} - -// ========================================================== -// Shared setup: Create customer + Fetch balance -// ========================================================== - -const createPlatformCustomerId = el("create-platform-customer-id"); -const createCustomerName = el("create-customer-name"); -const createCustomerEmail = el("create-customer-email"); -const balanceCustomerId = el("balance-customer-id"); - -bindClick( - "btn-create-customer", - "create-customer-status", - "Create Customer", - "Creating customer...", - async () => { - const platformCustomerId = - createPlatformCustomerId.value.trim() || `test-${Date.now()}`; - const fullName = createCustomerName.value.trim() || "Test User"; - const email = createCustomerEmail.value.trim(); - const body: Record = { - customerType: "BUSINESS", - platformCustomerId, - region: "US", - currencies: ["USDB"], - businessInfo: { - legalName: fullName, - taxId: "12-3456789", - incorporatedOn: "2020-01-01", - }, - }; - if (email) body.email = email; - const { data: customer } = await apiPost("/customers", body); - addLog("Create Customer", customer); - const customerId = (customer as Record).id as string; - if (!balanceCustomerId.value) balanceCustomerId.value = customerId; - const accounts = (await apiGet( - `/customers/internal-accounts?customerId=${customerId}¤cy=USDB`, - )) as { data: Array<{ id: string }> }; - addLog("Internal Accounts", accounts); - if (accounts.data && accounts.data.length > 0) { - setCtxAccount(accounts.data[0].id); - return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}\nEmbedded wallet pre-created at customer-create time.`; - } - return `Customer: ${customerId}\nNo USDB account found yet — wallet provisioning may be in progress.`; - }, -); - -// ========================================================== -// Platform config (OTP + branding) — GET to populate, PATCH to save -// ========================================================== - -const cfgAppName = maybeEl("cfg-app-name"); -const cfgOtpLength = maybeEl("cfg-otp-length"); -const cfgAlphanumeric = maybeEl("cfg-alphanumeric"); -const cfgExpirationSeconds = maybeEl("cfg-expiration-seconds"); -const cfgSendFromEmail = maybeEl("cfg-send-from-email"); -const cfgSendFromName = maybeEl("cfg-send-from-name"); -const cfgReplyToEmail = maybeEl("cfg-reply-to-email"); -const cfgLogoUrl = maybeEl("cfg-logo-url"); - -function readConfigForm(): Record { - // Only include fields the user touched (non-empty) so we PATCH a real partial. - const ewc: Record = {}; - if (cfgAppName?.value.trim()) ewc.appName = cfgAppName.value.trim(); - if (cfgOtpLength?.value.trim()) - ewc.otpLength = parseInt(cfgOtpLength.value, 10); - if (cfgAlphanumeric) ewc.alphanumeric = cfgAlphanumeric.checked; - if (cfgExpirationSeconds?.value.trim()) - ewc.expirationSeconds = parseInt(cfgExpirationSeconds.value, 10); - if (cfgSendFromEmail?.value.trim()) - ewc.sendFromEmailAddress = cfgSendFromEmail.value.trim(); - if (cfgSendFromName?.value.trim()) - ewc.sendFromEmailSenderName = cfgSendFromName.value.trim(); - if (cfgReplyToEmail?.value.trim()) - ewc.replyToEmailAddress = cfgReplyToEmail.value.trim(); - if (cfgLogoUrl?.value.trim()) ewc.logoUrl = cfgLogoUrl.value.trim(); - return { embeddedWalletConfig: ewc }; -} - -function applyConfigToForm(cfg: unknown): void { - const ewc = (cfg as { embeddedWalletConfig?: Record }) - ?.embeddedWalletConfig; - if (!ewc) return; - if (cfgAppName && typeof ewc.appName === "string") cfgAppName.value = ewc.appName; - if (cfgOtpLength && typeof ewc.otpLength === "number") - cfgOtpLength.value = String(ewc.otpLength); - if (cfgAlphanumeric && typeof ewc.alphanumeric === "boolean") - cfgAlphanumeric.checked = ewc.alphanumeric; - if (cfgExpirationSeconds && typeof ewc.expirationSeconds === "number") - cfgExpirationSeconds.value = String(ewc.expirationSeconds); - if (cfgSendFromEmail && typeof ewc.sendFromEmailAddress === "string") - cfgSendFromEmail.value = ewc.sendFromEmailAddress; - if (cfgSendFromName && typeof ewc.sendFromEmailSenderName === "string") - cfgSendFromName.value = ewc.sendFromEmailSenderName; - if (cfgReplyToEmail && typeof ewc.replyToEmailAddress === "string") - cfgReplyToEmail.value = ewc.replyToEmailAddress; - if (cfgLogoUrl && typeof ewc.logoUrl === "string") cfgLogoUrl.value = ewc.logoUrl; -} - -bindClick("btn-cfg-load", "cfg-status", "Load Config", "Loading…", async () => { - const cfg = await apiGet("/config"); - addLog("GET /config", cfg); - applyConfigToForm(cfg); - return "Config loaded into form."; -}); - -bindClick("btn-cfg-save", "cfg-status", "Save Config", "Saving…", async () => { - const body = readConfigForm(); - const { data } = await apiPatch("/config", body); - addLog("PATCH /config", data); - return "Config saved."; -}); - -bindClick( - "btn-fetch-balance", - "balance-status", - "Fetch Balance", - "Fetching balance...", - async () => { - const customerId = balanceCustomerId.value.trim(); - if (!customerId) throw new Error("Customer ID is required."); - const data = (await apiGet( - `/customers/internal-accounts?customerId=${encodeURIComponent(customerId)}`, - )) as { data: Array> }; - addLog("Fetch Balance", data); - return JSON.stringify( - data.data?.map((a) => ({ id: a.id, currency: a.currency, balance: a.balance })) ?? - [], - null, - 2, - ); - }, -); - -// ========================================================== -// Per-type lifecycle -// ========================================================== - -function requireAccountId(): string { - const id = ctxAccountId.value.trim(); - if (!id) - throw new Error("Internal Account ID is required — run Create Customer first."); - return id; -} - -function requireCredentialId(): string { - const id = ctxCredentialId.value.trim(); - if (!id) throw new Error("Credential ID is required — run Create for this type first."); - return id; -} - -function requireSessionId(): string { - const id = ctxSessionId.value.trim(); - if (!id) throw new Error("Session ID is required — run Verify for this type first."); - return id; -} - -// ----- EMAIL_OTP ----- - -bindClick( - "btn-email_otp-create", - "email_otp-create-status", - "EMAIL_OTP Create", - "Registering EMAIL_OTP credential...", - async () => { - const { data } = await apiPost("/auth/credentials", { - type: "EMAIL_OTP", - accountId: requireAccountId(), - }); - addLog("EMAIL_OTP Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, -); - -// Secure OTP — two steps so it works against real Turnkey, which emails a -// real OTP (sandbox uses the fixed 000000). Step 1 (/challenge) issues the -// INIT_OTP and returns the enclave's target bundle, held below until Verify -// consumes it. Step 2 -// HPKE-seals the entered code under that bundle, runs /verify first leg -// (202 + payloadToSign), signs the token with the TEK, and runs /verify retry -// (200 session). The code never leaves the client in plaintext; the TEK private -// key stays client-side (no encryptedSessionSigningKey is returned). - -// Target bundle from the most recent V3 challenge + the credential it was -// issued for, so Verify catches a stale/mismatched bundle. -let v3TargetBundle: string | null = null; -let v3TargetBundleCredId: string | null = null; - -bindClick( - "btn-email_otp-v3-challenge", - "email_otp-v3-challenge-status", - "EMAIL_OTP Challenge (V3)", - "Requesting OTP...", - async () => { - const credId = requireCredentialId(); - const { data: challengeData } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - {}, - ); - addLog("V3 Challenge", challengeData); - const targetBundle = (challengeData as Record) - .otpEncryptionTargetBundle as string | undefined; - if (!targetBundle) - throw new Error( - "Challenge response missing otpEncryptionTargetBundle — is the local " + - "backend running the secure-OTP branch?", - ); - v3TargetBundle = targetBundle; - v3TargetBundleCredId = credId; - return "OTP sent. Check the customer's email, enter the code below, then Verify."; - }, -); - -bindClick( - "btn-email_otp-v3-verify", - "email_otp-v3-verify-status", - "EMAIL_OTP Verify (V3)", - "Verifying...", - async () => { - const credId = requireCredentialId(); - const otp = el("email_otp-v3-code").value.trim(); - if (!otp) throw new Error("OTP code is required."); - if (!v3TargetBundle || v3TargetBundleCredId !== credId) - throw new Error( - "Run Challenge (V3) first to request an OTP + target bundle for this " + - "credential.", - ); - - // Generate a TEK and HPKE-seal the entered OTP under the challenge bundle. - const tek = generateP256KeyPair(); - const encryptedOtpBundle = sealOtpBundle(v3TargetBundle, tek.publicKey, otp); - - // First leg → expect 202 with payloadToSign (verificationToken) + requestId. - const leg1 = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/verify`, - { type: "EMAIL_OTP", encryptedOtpBundle }, - ); - const l1 = (leg1.data ?? {}) as Record; - addLog("V3 Verify leg 1 (expect 202)", { status: leg1.status, ...l1 }); - const payloadToSign = l1.payloadToSign as string | undefined; - const requestId = l1.requestId as string | undefined; - if (leg1.status !== 202 || !payloadToSign || !requestId) - throw new Error(`Unexpected first-leg response: ${JSON.stringify(leg1)}`); - - // Sign the verificationToken with the TEK private key. - const signature = await buildWalletSignature( - tek.publicKey, - tek.privateKey, - payloadToSign, - ); - - // Retry with the signature → expect 200 AuthSession. - const leg2 = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/verify`, - { type: "EMAIL_OTP", encryptedOtpBundle }, - { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, - ); - const session = (leg2.data ?? {}) as Record; - addLog("V3 Verify leg 2 (expect 200 session)", { - status: leg2.status, - ...session, - }); - if (session.id) setCtxSession(session.id as string); - // The TEK is now the session's API key (OTP_LOGIN registered it). Cache it - // as the active session signing key so later signed retries (add passkey, - // quote execute, etc.) can stamp with this session via turnkeyStamp(). - if (leg2.status === 200) setSessionKeysFromTek(tek); - // One bundle per challenge — force a fresh Challenge for the next run. - v3TargetBundle = null; - v3TargetBundleCredId = null; - return JSON.stringify({ leg1: leg1.data, session: leg2.data }, null, 2); - }, -); - -bindClick( - "btn-email_otp-rechallenge", - "email_otp-rechallenge-status", - "EMAIL_OTP Rechallenge", - "Re-issuing OTP...", - async () => { - const credId = requireCredentialId(); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - {}, - ); - addLog("EMAIL_OTP Rechallenge", data); - return JSON.stringify(data, null, 2); - }, -); - -const emailOtpAddRequestId = el("email_otp-add-request-id"); -bindClick( - "btn-email_otp-add-issue", - "email_otp-add-issue-status", - "EMAIL_OTP Add (issue)", - "Issuing add challenge...", - async () => { - const { data } = await apiPost("/auth/credentials", { - type: "EMAIL_OTP", - accountId: requireAccountId(), - }); - addLog("EMAIL_OTP Add (issue)", data); - const d = data as Record; - if (d.requestId) emailOtpAddRequestId.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, -); -bindClick( - "btn-email_otp-add-retry", - "email_otp-add-retry-status", - "EMAIL_OTP Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = emailOtpAddRequestId.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiPost( - "/auth/credentials", - { type: "EMAIL_OTP", accountId: requireAccountId() }, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("EMAIL_OTP Add (retry)", data); - return JSON.stringify(data, null, 2); - }, -); - -// ----- OAUTH ----- - -bindClick( - "btn-oauth-create", - "oauth-create-status", - "OAUTH Create", - "Creating OAUTH wallet...", - async () => { - const oidc = el("oauth-create-oidc").value.trim(); - if (!oidc) throw new Error("OIDC token is required."); - const { data } = await apiPost("/auth/credentials", { - type: "OAUTH", - accountId: requireAccountId(), - oidcToken: oidc, - }); - addLog("OAUTH Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, -); - -wireGenKeyButton("btn-oauth-verify-genkey", "oauth-verify-pubkey"); -bindClick( - "btn-oauth-verify", - "oauth-verify-status", - "OAUTH Verify", - "Verifying...", - async () => { - const credId = requireCredentialId(); - const oidc = el("oauth-verify-oidc").value.trim(); - const pubkey = el("oauth-verify-pubkey").value.trim(); - if (!oidc || !pubkey) throw new Error("OIDC token and public key are required."); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/verify`, - { type: "OAUTH", oidcToken: oidc, clientPublicKey: pubkey }, - ); - addLog("OAUTH Verify", data); - const d = data as Record; - if (d.id) setCtxSession(d.id as string); - rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); - return JSON.stringify(data, null, 2); - }, -); - -bindClick( - "btn-oauth-rechallenge", - "oauth-rechallenge-status", - "OAUTH Rechallenge", - "Running no-op rechallenge...", - async () => { - const credId = requireCredentialId(); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - {}, - ); - addLog("OAUTH Rechallenge", data); - return JSON.stringify(data, null, 2); - }, -); - -const oauthAddRequestId = el("oauth-add-request-id"); -bindClick( - "btn-oauth-add-issue", - "oauth-add-issue-status", - "OAUTH Add (issue)", - "Issuing add challenge...", - async () => { - const oidc = el("oauth-add-oidc").value.trim(); - if (!oidc) throw new Error("OIDC token is required."); - const { data } = await apiPost("/auth/credentials", { - type: "OAUTH", - accountId: requireAccountId(), - oidcToken: oidc, - }); - addLog("OAUTH Add (issue)", data); - const d = data as Record; - if (d.requestId) oauthAddRequestId.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, -); -bindClick( - "btn-oauth-add-retry", - "oauth-add-retry-status", - "OAUTH Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = oauthAddRequestId.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - const oidc = el("oauth-add-oidc").value.trim(); - const { data } = await apiPost( - "/auth/credentials", - { type: "OAUTH", accountId: requireAccountId(), oidcToken: oidc }, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("OAUTH Add (retry)", data); - return JSON.stringify(data, null, 2); - }, -); - -// ----- WebAuthn ceremony helpers (real passkeys) ----- -// -// The sandbox flows accept magic placeholder strings, but a real Turnkey -// sub-org needs a genuine WebAuthn credential. These helpers drive the -// browser's authenticator (Touch ID, etc.) and base64url-encode the results -// into the same fields the sandbox flow uses, so Create / Add / Verify work -// unchanged against production Turnkey. -// -// NOTE: WebAuthn binds a credential to an RP ID that must be a suffix of the -// page origin — on localhost that means rpId="localhost". The Turnkey sub-org -// must have been created with the SAME RP ID or verification will fail. - -function bytesToB64Url(bytes: Uint8Array): string { - let bin = ""; - for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]); - return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); -} - -function b64UrlToBytes(value: string): Uint8Array { - const b64 = value.replace(/-/g, "+").replace(/_/g, "/"); - const padded = b64 + "=".repeat((4 - (b64.length % 4)) % 4); - const bin = atob(padded); - const bytes = new Uint8Array(bin.length); - for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i); - return bytes; -} - -function passkeyRpId(): string { - return el("passkey-rp-id").value.trim() || location.hostname; -} - -interface RealAttestation { - challenge: string; - credentialId: string; - clientDataJson: string; - attestationObject: string; -} - -// Real registration ceremony — produces the attestation that Create/Add send. -async function createRealPasskey(nickname: string): Promise { - const challenge = crypto.getRandomValues(new Uint8Array(32)); - const userId = crypto.getRandomValues(new Uint8Array(16)); - const credential = (await navigator.credentials.create({ - publicKey: { - rp: { id: passkeyRpId(), name: "Grid Example App" }, - user: { - id: userId, - name: nickname || "grid-example-user", - displayName: nickname || "Grid Example User", - }, - challenge, - pubKeyCredParams: [ - { type: "public-key", alg: -7 }, - { type: "public-key", alg: -257 }, - ], - authenticatorSelection: { - residentKey: "preferred", - userVerification: "preferred", - }, - attestation: "none", - timeout: 60000, - }, - })) as PublicKeyCredential | null; - if (!credential) throw new Error("Passkey creation returned no credential"); - const response = credential.response as AuthenticatorAttestationResponse; - return { - challenge: bytesToB64Url(challenge), - credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), - clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), - attestationObject: bytesToB64Url(new Uint8Array(response.attestationObject)), - }; -} - -interface RealAssertion { - credentialId: string; - authenticatorData: string; - clientDataJson: string; - signature: string; -} - -// Real assertion ceremony — signs the issued session challenge. -async function signWithPasskey( - challengeValue: string, - credentialId: string, -): Promise { - if (!challengeValue) { - throw new Error("No challenge — issue a session challenge (step above) first."); - } - // PR #28427: Turnkey's WebAuthn challenge is the UTF-8 bytes of the - // sha256-hex challenge string returned by /challenge — NOT base64url-decoded. - const challenge = new TextEncoder().encode(challengeValue); - const allowCredentials: PublicKeyCredentialDescriptor[] = credentialId - ? [{ type: "public-key", id: b64UrlToBytes(credentialId) as BufferSource }] - : []; - const credential = (await navigator.credentials.get({ - publicKey: { - rpId: passkeyRpId(), - challenge, - allowCredentials, - userVerification: "preferred", - timeout: 60000, - }, - })) as PublicKeyCredential | null; - if (!credential) throw new Error("Passkey assertion returned no credential"); - const response = credential.response as AuthenticatorAssertionResponse; - return { - credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), - authenticatorData: bytesToB64Url(new Uint8Array(response.authenticatorData)), - clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), - signature: bytesToB64Url(new Uint8Array(response.signature)), - }; -} - -// ----- PASSKEY ----- - -bindClick( - "btn-passkey-create", - "passkey-create-status", - "PASSKEY Create", - "Creating PASSKEY wallet...", - async () => { - const body = { - type: "PASSKEY", - accountId: requireAccountId(), - nickname: el("passkey-create-nickname").value.trim(), - challenge: el("passkey-create-challenge").value.trim(), - attestation: { - credentialId: el("passkey-create-cred-id-raw").value.trim(), - clientDataJson: el("passkey-create-client-data-json").value.trim(), - attestationObject: el("passkey-create-attestation-object").value.trim(), - }, - }; - const { data } = await apiPost("/auth/credentials", body); - addLog("PASSKEY Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, -); - -// Drive a real WebAuthn registration (Touch ID) and fill the attestation -// fields above — used by both the "Create" and "Add additional" flows. -bindClick( - "btn-passkey-webauthn-create", - "passkey-webauthn-create-status", - "Passkey Register", - "Waiting for authenticator (Touch ID)...", - async () => { - const nickname = el("passkey-create-nickname").value.trim(); - const att = await createRealPasskey(nickname); - el("passkey-create-challenge").value = att.challenge; - el("passkey-create-cred-id-raw").value = att.credentialId; - el("passkey-create-client-data-json").value = att.clientDataJson; - el("passkey-create-attestation-object").value = - att.attestationObject; - addLog("Passkey Registered (real)", att); - return "Real passkey created — attestation fields filled. Now run Create or Add."; - }, -); - -wireGenKeyButton("btn-passkey-challenge-genkey", "passkey-challenge-pubkey"); -const passkeyVerifyRequestId = el("passkey-verify-request-id"); -// Captured from the session-challenge response so the real assertion ceremony -// can sign the exact sha256-hex challenge Turnkey expects. -let passkeySessionChallenge = ""; -bindClick( - "btn-passkey-challenge", - "passkey-challenge-status", - "PASSKEY Challenge", - "Issuing session challenge...", - async () => { - const credId = requireCredentialId(); - const pubkey = el("passkey-challenge-pubkey").value.trim(); - if (!pubkey) throw new Error("Client public key is required — generate one first."); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - { clientPublicKey: pubkey }, - ); - addLog("PASSKEY Challenge", data); - const d = data as Record; - if (d.requestId) passkeyVerifyRequestId.value = d.requestId as string; - if (typeof d.challenge === "string") passkeySessionChallenge = d.challenge; - return JSON.stringify(data, null, 2); - }, -); - -bindClick( - "btn-passkey-verify", - "passkey-verify-status", - "PASSKEY Verify", - "Verifying assertion...", - async () => { - const credId = requireCredentialId(); - const requestId = passkeyVerifyRequestId.value.trim(); - const body = { - type: "PASSKEY", - clientPublicKey: el("passkey-challenge-pubkey").value.trim(), - assertion: { - credentialId: el("passkey-create-cred-id-raw").value.trim(), - clientDataJson: el("passkey-verify-client-data-json").value.trim(), - authenticatorData: el("passkey-verify-auth-data").value.trim(), - signature: el("passkey-verify-signature").value.trim(), - }, - }; - const headers: Record = {}; - if (requestId) headers["Request-Id"] = requestId; - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/verify`, - body, - headers, - ); - addLog("PASSKEY Verify", data); - const d = data as Record; - if (d.id) setCtxSession(d.id as string); - rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); - return JSON.stringify(data, null, 2); - }, -); - -// Drive a real WebAuthn assertion (Touch ID) against the issued challenge and -// fill the assertion fields above for Verify. -bindClick( - "btn-passkey-webauthn-get", - "passkey-webauthn-get-status", - "Passkey Sign", - "Waiting for authenticator (Touch ID)...", - async () => { - const credId = el("passkey-create-cred-id-raw").value.trim(); - const assertion = await signWithPasskey(passkeySessionChallenge, credId); - el("passkey-create-cred-id-raw").value = assertion.credentialId; - el("passkey-verify-client-data-json").value = - assertion.clientDataJson; - el("passkey-verify-auth-data").value = - assertion.authenticatorData; - el("passkey-verify-signature").value = assertion.signature; - addLog("Passkey Signed (real)", assertion); - return "Real assertion produced — verify fields filled. Now click Verify."; - }, -); - -const passkeyAddRequestId = el("passkey-add-request-id"); -// Captured from the add-issue 202 so the retry can stamp the exact payload. -let passkeyAddPayloadToSign = ""; -function buildPasskeyAddBody(): Record { - return { - type: "PASSKEY", - accountId: requireAccountId(), - nickname: el("passkey-add-nickname").value.trim(), - challenge: el("passkey-create-challenge").value.trim(), - attestation: { - credentialId: el("passkey-create-cred-id-raw").value.trim(), - clientDataJson: el("passkey-create-client-data-json").value.trim(), - attestationObject: el("passkey-create-attestation-object").value.trim(), - }, - }; -} -bindClick( - "btn-passkey-add-issue", - "passkey-add-issue-status", - "PASSKEY Add (issue)", - "Issuing add challenge...", - async () => { - const { data } = await apiPost("/auth/credentials", buildPasskeyAddBody()); - addLog("PASSKEY Add (issue)", data); - const d = data as Record; - if (d.requestId) passkeyAddRequestId.value = d.requestId as string; - if (typeof d.payloadToSign === "string") passkeyAddPayloadToSign = d.payloadToSign; - return JSON.stringify(data, null, 2); - }, -); -bindClick( - "btn-passkey-add-retry", - "passkey-add-retry-status", - "PASSKEY Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = passkeyAddRequestId.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - // Sandbox accepts the magic value, but real Turnkey requires the - // CREATE_AUTHENTICATORS payload to be stamped by an authorized credential — - // the active session's signing key. Establish a session (e.g. OTP login or - // passkey verify) first so the session signing key is available. - let signature = SANDBOX_SIG; - if (getMode() === "production") { - if (!passkeyAddPayloadToSign) { - throw new Error("Missing payloadToSign — run step 1 first."); - } - signature = await turnkeyStamp(passkeyAddPayloadToSign); - } - const { data } = await apiPost( - "/auth/credentials", - buildPasskeyAddBody(), - { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, - ); - addLog("PASSKEY Add (retry)", data); - return JSON.stringify(data, null, 2); - }, -); - -// ========================================================== -// Shared signed-retry wiring per tab: delete credential / session / export -// Endpoints identical for all tabs — inputs come from the shared ctx, the -// per-tab buttons just visually group each flow under the relevant tab. -// ========================================================== - -function wireDeleteCredentialButtons(type: CredType): void { - const reqInput = el(`${type}-del-cred-request-id`); - bindClick( - `btn-${type}-del-cred-issue`, - `${type}-del-cred-issue-status`, - "Delete Credential (issue)", - "Issuing delete challenge...", - async () => { - const credId = requireCredentialId(); - const { data } = await apiDelete( - `/auth/credentials/${encodeURIComponent(credId)}`, - ); - addLog("Delete Credential (issue)", data); - const d = data as Record; - if (d.requestId) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - `btn-${type}-del-cred-retry`, - `${type}-del-cred-retry-status`, - "Delete Credential (retry)", - "Forwarding signed retry...", - async () => { - const credId = requireCredentialId(); - const requestId = reqInput.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiDelete( - `/auth/credentials/${encodeURIComponent(credId)}`, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Delete Credential (retry)", data); - return JSON.stringify(data, null, 2); - }, - ); -} - -function wireDeleteSessionButtons(type: CredType): void { - const reqInput = el(`${type}-del-session-request-id`); - bindClick( - `btn-${type}-del-session-issue`, - `${type}-del-session-issue-status`, - "Delete Session (issue)", - "Issuing delete challenge...", - async () => { - const sid = requireSessionId(); - const { data } = await apiDelete( - `/auth/sessions/${encodeURIComponent(sid)}`, - ); - addLog("Delete Session (issue)", data); - const d = data as Record; - if (d.requestId) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - `btn-${type}-del-session-retry`, - `${type}-del-session-retry-status`, - "Delete Session (retry)", - "Forwarding signed retry...", - async () => { - const sid = requireSessionId(); - const requestId = reqInput.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiDelete( - `/auth/sessions/${encodeURIComponent(sid)}`, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Delete Session (retry)", data); - return JSON.stringify(data, null, 2); - }, - ); -} - -function wireExportButtons(type: CredType): void { - const reqInput = el(`${type}-export-request-id`); - bindClick( - `btn-${type}-export-issue`, - `${type}-export-issue-status`, - "Wallet Export (issue)", - "Issuing export challenge...", - async () => { - const accountId = requireAccountId(); - const { data } = await apiPost( - `/internal-accounts/${encodeURIComponent(accountId)}/export`, - {}, - ); - addLog("Wallet Export (issue)", data); - const d = data as Record; - if (d.requestId) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - `btn-${type}-export-retry`, - `${type}-export-retry-status`, - "Wallet Export (retry)", - "Forwarding signed retry...", - async () => { - const accountId = requireAccountId(); - const requestId = reqInput.value.trim(); - if (!requestId) throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiPost( - `/internal-accounts/${encodeURIComponent(accountId)}/export`, - {}, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Wallet Export (retry)", data); - return JSON.stringify(data, null, 2); - }, - ); -} - -for (const type of ["email_otp", "oauth", "passkey"] as const) { - wireDeleteCredentialButtons(type); - wireDeleteSessionButtons(type); - wireExportButtons(type); -} - -// ========================================================== -// List credentials / sessions -// ========================================================== - -bindClick( - "btn-list-credentials", - "list-status", - "List Credentials", - "Listing...", - async () => { - const accountId = requireAccountId(); - const data = await apiGet( - `/auth/credentials?accountId=${encodeURIComponent(accountId)}`, - ); - addLog("List Credentials", data); - return JSON.stringify(data, null, 2); - }, -); - -bindClick( - "btn-list-sessions", - "list-status", - "List Sessions", - "Listing...", - async () => { - const accountId = requireAccountId(); - const data = await apiGet( - `/auth/sessions?accountId=${encodeURIComponent(accountId)}`, - ); - addLog("List Sessions", data); - return JSON.stringify(data, null, 2); - }, -); - -// ========================================================== -// External account + Quote + Execute -// ========================================================== - -const extAccountType = el("ext-account-type"); -const extSparkFields = el("ext-spark-fields"); -const extBankFields = el("ext-bank-fields"); -const quoteDestinationAccountId = el("quote-destination-account-id"); - -extAccountType.addEventListener("change", () => { - const isSpark = extAccountType.value === "SPARK_WALLET"; - extSparkFields.style.display = isSpark ? "" : "none"; - extBankFields.style.display = isSpark ? "none" : ""; -}); - -bindClick( - "btn-create-external-account", - "ext-account-status", - "Create External Account", - "Creating external account...", - async () => { - let body: Record; - if (extAccountType.value === "SPARK_WALLET") { - const address = el("ext-spark-address").value.trim(); - if (!address) throw new Error("Spark address is required."); - body = { - currency: "BTC", - accountInfo: { accountType: "SPARK_WALLET", address }, - }; - } else { - const accountNumber = el("ext-bank-account-number").value.trim(); - const routingNumber = el("ext-bank-routing-number").value.trim(); - const fullName = - el("ext-bank-beneficiary-name").value.trim() || "Sandbox Test User"; - if (!accountNumber || !routingNumber) - throw new Error("Account number and routing number are required."); - body = { - currency: "USD", - accountInfo: { - accountType: "USD_ACCOUNT", - countries: ["US"], - paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], - accountNumber, - routingNumber, - beneficiary: { - beneficiaryType: "INDIVIDUAL", - fullName, - birthDate: "1990-01-15", - nationality: "US", - address: { - line1: "100 Test St", - city: "SF", - postalCode: "94102", - country: "US", - }, - }, - }, - }; - } - const { data } = await apiPost("/platform/external-accounts", body); - addLog("Create External Account", data); - const d = data as Record; - if (d.id) quoteDestinationAccountId.value = d.id as string; - return JSON.stringify(data, null, 2); - }, -); - -const executeQuoteId = el("execute-quote-id"); - -bindClick( - "btn-create-quote", - "quote-status", - "Create Quote", - "Creating quote...", - async () => { - const sourceAccountId = requireAccountId(); - const destinationAccountId = quoteDestinationAccountId.value.trim(); - const lockedAmount = Number(el("quote-locked-amount").value); - if (!destinationAccountId || !lockedAmount) - throw new Error("Destination external account and amount are required."); - const { data } = await apiPost("/quotes", { - source: { sourceType: "ACCOUNT", accountId: sourceAccountId }, - destination: { destinationType: "ACCOUNT", accountId: destinationAccountId }, - lockedCurrencySide: el("quote-locked-side").value, - lockedCurrencyAmount: lockedAmount, - }); - addLog("Create Quote", data); - const d = data as Record; - if (d.id) executeQuoteId.value = d.id as string; - // Extract `payloadToSign` from the EMBEDDED_WALLET payment instruction - // (second entry in the example response — find by accountType match). - const instructions = (d.paymentInstructions ?? []) as Array< - Record - >; - for (const inst of instructions) { - const info = inst.accountOrWalletInfo as Record | undefined; - if (info && info.accountType === "EMBEDDED_WALLET" && info.payloadToSign) { - executePayloadToSign.value = info.payloadToSign as string; - break; - } - } - // In sandbox mode, pre-fill the magic signature so the user can hit - // Execute immediately. In production mode, leave blank — the Sign - // payload button decrypts the session bundle and stamps it. - if (getMode() === "sandbox") { - executeSignature.value = SANDBOX_SIG; - } else { - executeSignature.value = ""; - } - return JSON.stringify(data, null, 2); - }, -); - -const executePayloadToSign = el("execute-payload-to-sign"); -const executeSignature = el("execute-signature"); - -bindClick( - "btn-sign-payload", - "execute-status", - "Sign Payload", - "Signing...", - async () => { - if (getMode() === "sandbox") { - executeSignature.value = SANDBOX_SIG; - return `Mode: sandbox — filled magic signature.`; - } - const payload = executePayloadToSign.value.trim(); - if (!payload) - throw new Error( - "payloadToSign is empty — run Create Quote first or paste it manually.", - ); - const stamp = await turnkeyStamp(payload); - executeSignature.value = stamp; - return `Stamped (${stamp.length} chars).`; - }, -); - -bindClick( - "btn-execute-quote", - "execute-status", - "Execute Quote", - "Executing quote...", - async () => { - const quoteId = executeQuoteId.value.trim(); - const signature = executeSignature.value.trim(); - if (!quoteId || !signature) - throw new Error("Quote ID and Grid-Wallet-Signature are required."); - const { data } = await apiPost( - `/quotes/${encodeURIComponent(quoteId)}/execute`, - {}, - { "Grid-Wallet-Signature": signature }, - ); - addLog("Execute Quote", data); - return JSON.stringify(data, null, 2); - }, -); +// Thin bootstrap: wire tabs, then each flow module. Behavior lives in the +// `flows/` tree + the `config / turnkey / webauthn / api-client / ui` modules. + +import { wireTabs } from "./ui"; +import { wireCustomerFlows } from "./flows/customer"; +import { wireEmailOtpFlows } from "./flows/email-otp"; +import { wireOauthFlows } from "./flows/oauth"; +import { wirePasskeyFlows } from "./flows/passkey"; +import { wireManageFlows } from "./flows/manage"; +import { wireMoneyFlows } from "./flows/money"; + +wireTabs(); +wireCustomerFlows(); +wireEmailOtpFlows(); +wireOauthFlows(); +wirePasskeyFlows(); +wireManageFlows(); +wireMoneyFlows(); console.log("Grid Global Accounts example app loaded."); diff --git a/apps/examples/grid-global-accounts-example-app/src/turnkey.ts b/apps/examples/grid-global-accounts-example-app/src/turnkey.ts new file mode 100644 index 000000000..060938e9d --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/turnkey.ts @@ -0,0 +1,184 @@ +// Turnkey crypto: P-256 keygen, HPKE seal, wallet signature, session-key state, +// and the X-Stamp builder. + +import { + decryptCredentialBundle, + formatHpkeBuf, + generateP256KeyPair, + getPublicKey, + hpkeEncrypt, +} from "@turnkey/crypto"; +import { signWithApiKey } from "@turnkey/api-key-stamper"; + +import { TURNKEY_STAMP_SCHEME } from "./config"; + +// ----- Production-mode key state ----- +// +// Generated client-side at the first call to `generateClientKeyPair`. The +// uncompressed public key (130 hex chars, 0x04-prefixed) goes to Grid as +// `clientPublicKey` on Verify; the private key is held here and used to +// HPKE-decrypt the `encryptedSessionSigningKey` Grid hands back, yielding +// the Turnkey API session keypair we then stamp `payloadToSign` with. +// +// In sandbox mode the bundle is shape-valid but undecryptable — sandbox +// flows skip this entire path and use the magic signature constants. + +export interface ClientKeyPair { + privateKey: string; // hex + publicKey: string; // hex, compressed + publicKeyUncompressed: string; // hex, 130 chars (0x04 prefix) +} + +export interface SessionKeys { + apiPublicKey: string; // hex, compressed P-256 + apiPrivateKey: string; // hex +} + +let clientKeyPair: ClientKeyPair | null = null; +let lastEncryptedSessionSigningKey: string | null = null; +let cachedSessionKeys: SessionKeys | null = null; + +export function generateClientKeyPair(): ClientKeyPair { + const kp = generateP256KeyPair(); + clientKeyPair = { + privateKey: kp.privateKey, + publicKey: kp.publicKey, + publicKeyUncompressed: kp.publicKeyUncompressed, + }; + // Re-using the keypair across credential types means a Verify by any + // type cycles fresh session bundles bound to the same client key — + // simpler than tracking one keypair per type for the test app. + cachedSessionKeys = null; + lastEncryptedSessionSigningKey = null; + return clientKeyPair; +} + +export function rememberEncryptedSessionSigningKey(value: unknown): void { + if (typeof value === "string" && value) { + lastEncryptedSessionSigningKey = value; + cachedSessionKeys = null; + } +} + +// OTP_LOGIN / STAMP_LOGIN model: there is no encryptedSessionSigningKey bundle +// — the TEK private key *is* the session's API key once login registers it. +// Cache it directly so turnkeyStamp() can authorize later signed retries +// (e.g. adding a passkey) without the Verify-style clientKeyPair + bundle. +export function setSessionKeysFromTek(tek: { + publicKey: string; + privateKey: string; +}): void { + cachedSessionKeys = { + apiPublicKey: tek.publicKey, + apiPrivateKey: tek.privateKey, + }; +} + +function decryptSessionKeysOrThrow(): SessionKeys { + if (cachedSessionKeys) return cachedSessionKeys; + if (!clientKeyPair) + throw new Error( + "No client keypair — run a Verify in production mode first.", + ); + if (!lastEncryptedSessionSigningKey) + throw new Error( + "No encryptedSessionSigningKey — run a Verify in production mode first.", + ); + const apiPrivateKey = decryptCredentialBundle( + lastEncryptedSessionSigningKey, + clientKeyPair.privateKey, + ); + const apiPublicKeyBytes = getPublicKey(apiPrivateKey, /*isCompressed*/ true); + const apiPublicKey = Array.from(apiPublicKeyBytes) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); + cachedSessionKeys = { apiPublicKey, apiPrivateKey }; + return cachedSessionKeys; +} + +export async function turnkeyStamp(payload: string): Promise { + const { apiPublicKey, apiPrivateKey } = decryptSessionKeysOrThrow(); + // `signWithApiKey` returns the hex DER signature; the X-Stamp header + // value is base64url(JSON({publicKey, scheme, signature})) with that + // hex signature embedded as-is. Mirrors what `@turnkey/api-key-stamper` + // produces internally; replicated here so we can fill the field on the + // test UI rather than going through the stamper's `stamp(payload)` shape + // (which returns `{stampHeaderName, stampHeaderValue}`). + const signature = await signWithApiKey({ + content: payload, + publicKey: apiPublicKey, + privateKey: apiPrivateKey, + }); + const stamp = { + publicKey: apiPublicKey, + scheme: TURNKEY_STAMP_SCHEME, + signature, + }; + const json = JSON.stringify(stamp); + // base64url(json) — no padding. + return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); +} + +// ----- V3 secure OTP client crypto ----- +// +// HPKE-seal {clientPublicKey, otpCodeAttempt} under the enclave's +// `otpEncryptionTargetBundle`. That bundle is a signed enclave envelope — +// {version, data, dataSignature, enclaveQuorumPublic} — where `data` is a +// hex-encoded JSON blob carrying the enclave's uncompressed HPKE target key as +// `targetPublic`. We pull `targetPublic` out, HPKE-encrypt under it, and emit +// Turnkey's `formatHpkeBuf` wire shape {"encappedPublic","ciphertext"} — exactly +// what `@turnkey/crypto`'s `encryptPrivateKeyToBundle` produces for the +// analogous key-import flow. (A production client would also verify +// `dataSignature` against `enclaveQuorumPublic`; skipped here because the bundle +// originates from our own backend in this test app.) +function hexToBytes(hex: string): Uint8Array { + const bytes = new Uint8Array(hex.length / 2); + for (let i = 0; i < bytes.length; i++) { + bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16); + } + return bytes; +} + +export function sealOtpBundle( + targetBundle: string, + clientPublicKeyHex: string, + otpCode: string, +): string { + const parsed = JSON.parse(targetBundle) as { data: string }; + const signedData = JSON.parse( + new TextDecoder().decode(hexToBytes(parsed.data)), + ) as { targetPublic: string }; + const targetKeyBuf = hexToBytes(signedData.targetPublic); // 65-byte uncompressed + const plainTextBuf = new TextEncoder().encode( + // The enclave expects snake_case {otp_code, public_key} — NOT the + // {clientPublicKey, otpCodeAttempt} shown in Turnkey's docs sequence + // diagram. Matches @turnkey/crypto's encryptOtpCodeToBundle. + JSON.stringify({ otp_code: otpCode, public_key: clientPublicKeyHex }), + ); + const encryptedBuf = hpkeEncrypt({ plainTextBuf, targetKeyBuf }); // compressed_enc[33] || ciphertext + return formatHpkeBuf(encryptedBuf); // {"encappedPublic","ciphertext"} +} + +// Build the `Grid-Wallet-Signature` stamp over the verificationToken using a +// specific keypair (the V3 TEK), not the session key — base64url(JSON({ +// publicKey, scheme, signature})), the shape `parse_api_key_stamp` expects. +export async function buildWalletSignature( + publicKeyHex: string, + privateKeyHex: string, + payload: string, +): Promise { + const signature = await signWithApiKey({ + content: payload, + publicKey: publicKeyHex, + privateKey: privateKeyHex, + }); + const stamp = { + publicKey: publicKeyHex, + scheme: TURNKEY_STAMP_SCHEME, + signature, + }; + return btoa(JSON.stringify(stamp)) + .replace(/\+/g, "-") + .replace(/\//g, "_") + .replace(/=+$/, ""); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/ui.ts b/apps/examples/grid-global-accounts-example-app/src/ui.ts new file mode 100644 index 000000000..ad103e97d --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/ui.ts @@ -0,0 +1,125 @@ +// DOM + logging + click-binding helpers. + +import { generateClientKeyPair } from "./turnkey"; + +// ----- DOM helpers ----- + +export function el(id: string): T { + const found = document.getElementById(id); + if (!found) throw new Error(`Missing element #${id}`); + return found as T; +} + +export function maybeEl(id: string): T | null { + return document.getElementById(id) as T | null; +} + +// ----- Logging ----- + +let logContainer: HTMLDivElement | null = null; + +function getLogContainer(): HTMLDivElement { + if (!logContainer) logContainer = el("log"); + return logContainer; +} + +function timestamp(): string { + return new Date().toISOString().replace("T", " ").slice(0, 19); +} + +export function addLog(label: string, data: unknown): void { + const entry = document.createElement("div"); + entry.className = "log-entry"; + const ts = document.createElement("span"); + ts.className = "log-ts"; + ts.textContent = timestamp(); + const lbl = document.createElement("span"); + lbl.className = "log-label"; + lbl.textContent = `[${label}]`; + const body = document.createTextNode(`\n${JSON.stringify(data, null, 2)}`); + entry.append(ts, " ", lbl, body); + getLogContainer().prepend(entry); +} + +export function showStatus( + statusEl: HTMLDivElement, + ok: boolean, + text: string, +): void { + statusEl.className = `status ${ok ? "ok" : "err"}`; + statusEl.textContent = text; +} + +// ----- Generic click wrapper ----- + +export function bindClick( + btnId: string, + statusId: string, + label: string, + runningText: string, + handler: () => Promise, +): void { + const btn = maybeEl(btnId); + const statusEl = maybeEl(statusId); + if (!btn || !statusEl) { + console.warn(`bindClick: missing btn=${btnId} or status=${statusId}`); + return; + } + btn.addEventListener("click", async () => { + btn.disabled = true; + showStatus(statusEl, true, runningText); + try { + const responseText = await handler(); + showStatus(statusEl, true, responseText); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + addLog(`${label} Error`, { error: msg }); + showStatus(statusEl, false, msg); + } finally { + btn.disabled = false; + } + }); +} + +// ----- Key generation helper ----- +// +// All "Generate P-256 Key" buttons share the same module-level +// `clientKeyPair` so a session decrypted under one keypair stays valid +// across tabs. The button writes the uncompressed public key into the +// target field — that's what Grid's `clientPublicKey` API expects. + +export function wireGenKeyButton(btnId: string, targetInputId: string): void { + const btn = maybeEl(btnId); + const target = maybeEl(targetInputId); + if (!btn || !target) return; + btn.addEventListener("click", () => { + btn.disabled = true; + try { + const kp = generateClientKeyPair(); + target.value = kp.publicKeyUncompressed; + addLog("Key Generated", { + publicKeyUncompressed: kp.publicKeyUncompressed, + }); + } catch (err) { + addLog("Key Generation Error", { error: String(err) }); + } finally { + btn.disabled = false; + } + }); +} + +// ----- Tab switching ----- + +export function wireTabs(): void { + for (const tabBtn of document.querySelectorAll(".tab")) { + tabBtn.addEventListener("click", () => { + const name = tabBtn.dataset.tab!; + document + .querySelectorAll(".tab") + .forEach((b) => b.classList.toggle("active", b.dataset.tab === name)); + document + .querySelectorAll(".tab-panel") + .forEach((p) => p.classList.toggle("active", p.dataset.panel === name)); + }); + } +} diff --git a/apps/examples/grid-global-accounts-example-app/src/webauthn.ts b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts new file mode 100644 index 000000000..d694e3495 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts @@ -0,0 +1,118 @@ +// WebAuthn ceremony helpers (real passkeys). +// +// The sandbox flows accept magic placeholder strings, but a real Turnkey +// sub-org needs a genuine WebAuthn credential. These helpers drive the +// browser's authenticator (Touch ID, etc.) and base64url-encode the results +// into the same fields the sandbox flow uses, so Create / Add / Verify work +// unchanged against production Turnkey. +// +// NOTE: WebAuthn binds a credential to an RP ID that must be a suffix of the +// page origin — on localhost that means rpId="localhost". The Turnkey sub-org +// must have been created with the SAME RP ID or verification will fail. + +import { el } from "./ui"; + +export function bytesToB64Url(bytes: Uint8Array): string { + let bin = ""; + for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]); + return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); +} + +export function b64UrlToBytes(value: string): Uint8Array { + const b64 = value.replace(/-/g, "+").replace(/_/g, "/"); + const padded = b64 + "=".repeat((4 - (b64.length % 4)) % 4); + const bin = atob(padded); + const bytes = new Uint8Array(bin.length); + for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i); + return bytes; +} + +export function passkeyRpId(): string { + return el("passkey-rp-id").value.trim() || location.hostname; +} + +export interface RealAttestation { + challenge: string; + credentialId: string; + clientDataJson: string; + attestationObject: string; +} + +// Real registration ceremony — produces the attestation that Create/Add send. +export async function createRealPasskey( + nickname: string, +): Promise { + const challenge = crypto.getRandomValues(new Uint8Array(32)); + const userId = crypto.getRandomValues(new Uint8Array(16)); + const credential = (await navigator.credentials.create({ + publicKey: { + rp: { id: passkeyRpId(), name: "Grid Example App" }, + user: { + id: userId, + name: nickname || "grid-example-user", + displayName: nickname || "Grid Example User", + }, + challenge, + pubKeyCredParams: [ + { type: "public-key", alg: -7 }, + { type: "public-key", alg: -257 }, + ], + authenticatorSelection: { + residentKey: "preferred", + userVerification: "preferred", + }, + attestation: "none", + timeout: 60000, + }, + })) as PublicKeyCredential | null; + if (!credential) throw new Error("Passkey creation returned no credential"); + const response = credential.response as AuthenticatorAttestationResponse; + return { + challenge: bytesToB64Url(challenge), + credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), + clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), + attestationObject: bytesToB64Url(new Uint8Array(response.attestationObject)), + }; +} + +export interface RealAssertion { + credentialId: string; + authenticatorData: string; + clientDataJson: string; + signature: string; +} + +// Real assertion ceremony — signs the issued session challenge. +export async function signWithPasskey( + challengeValue: string, + credentialId: string, +): Promise { + if (!challengeValue) { + throw new Error( + "No challenge — issue a session challenge (step above) first.", + ); + } + // PR #28427: Turnkey's WebAuthn challenge is the UTF-8 bytes of the + // sha256-hex challenge string returned by /challenge — NOT base64url-decoded. + const challenge = new TextEncoder().encode(challengeValue); + const allowCredentials: PublicKeyCredentialDescriptor[] = credentialId + ? [{ type: "public-key", id: b64UrlToBytes(credentialId) as BufferSource }] + : []; + const credential = (await navigator.credentials.get({ + publicKey: { + rpId: passkeyRpId(), + challenge, + allowCredentials, + userVerification: "preferred", + timeout: 60000, + }, + })) as PublicKeyCredential | null; + if (!credential) throw new Error("Passkey assertion returned no credential"); + const response = credential.response as AuthenticatorAssertionResponse; + return { + credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), + authenticatorData: bytesToB64Url(new Uint8Array(response.authenticatorData)), + clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), + signature: bytesToB64Url(new Uint8Array(response.signature)), + }; +} From 42dc5e34fb7611ed38cc89cc46d07d648b5b0fab Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 03:05:48 -0700 Subject: [PATCH 076/133] [js] gga example app: session.ts + status chip; disable-with-tooltip add-passkey (#28472) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Add `session.ts` — one object that holds the client keypair / encrypted bundle / TEK and exposes "do we have a signing key?" + a model badge — and render a **session status chip** (account id, credential id, session id, signing-key ready/none, model). Make the add-passkey button **disabled-with-tooltip** ("log in first") when there's no session. ## Why P4 example app, PR 2 in `40-example-app-design.md` §1.1/§1.5/§5. The app had two invisible session models (Verify-bundle vs OTP-TEK) funneling through one `cachedSessionKeys` global, producing the "No client keypair — run a Verify first" trap: a stamp after an OTP login threw even though you *had* logged in. Centralizing session state into one object and surfacing it in a chip kills the trap by showing state instead of throwing on use, and replaces the runtime throw on add-passkey with a disabled button + tooltip. ## Place in the stack Base: #28471 (module split). Third PR of the **P4 example-app** stack. ## Notable points - Anticipates the login-family migration: `session.ts` makes both models explicit so the future flip (passkey/oauth converge on the OTP client-key-is-session model) is a one-line change per flow. `// MIGRATION:` breadcrumbs mark the exact switch points. - Manual test tool; type gate: `build` + `lint`/`format`. --- Part of the Turnkey login-family migration program. See `sparkcore/sparkcore/grid/docs/login-migration/00-program-plan.md`. GitOrigin-RevId: d6ed5ebc66d4ba72991861f6d915998567854d9b --- .../index.html | 27 ++- .../src/flows/context.ts | 56 ++--- .../src/flows/email-otp.ts | 9 +- .../src/flows/oauth.ts | 7 +- .../src/flows/passkey.ts | 36 ++- .../src/main.ts | 5 + .../src/session.ts | 227 ++++++++++++++++++ .../src/turnkey.ts | 93 ++----- .../src/ui.ts | 24 ++ 9 files changed, 361 insertions(+), 123 deletions(-) create mode 100644 apps/examples/grid-global-accounts-example-app/src/session.ts diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index 1ecb6c84c..d81b39e56 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -207,6 +207,29 @@ .tab-panel.active { display: block; } + .session-chip { + display: flex; + flex-wrap: wrap; + gap: 6px 10px; + margin-top: 8px; + padding: 8px 10px; + background: #0f3460; + border: 1px solid #2e3a5f; + border-radius: 4px; + font-size: 11px; + } + .chip-field { + white-space: nowrap; + } + .chip-key { + color: #888; + } + .chip-field.chip-ok { + color: #95d5b2; + } + .chip-field.chip-none { + color: #ff6b6b; + } @@ -346,8 +369,10 @@

Customer Setup

Wallet Context

Internal account id flows into every tab. Credential + session ids are - auto-filled as you run steps. + auto-filled as you run steps. The chip shows whether a session signing + key is ready and which model established it (OTP-TEK vs Verify-bundle).

+
("ctx-account-id"); - return ctxAccountId; -} -function credentialIdEl(): HTMLInputElement { - if (!ctxCredentialId) - ctxCredentialId = el("ctx-credential-id"); - return ctxCredentialId; -} -function sessionIdEl(): HTMLInputElement { - if (!ctxSessionId) ctxSessionId = el("ctx-session-id"); - return ctxSessionId; -} - -// First-call-wins by design: the account id is established once (Create -// Customer) and shared across every credential-type tab, so a later per-type -// flow must not clobber it. Credential/session ids below are per-type and do -// overwrite. To switch accounts, clear the field in the UI. -export function setCtxAccount(id: string): void { - if (!accountIdEl().value) accountIdEl().value = id; -} -export function setCtxCredential(id: string): void { - credentialIdEl().value = id; -} -export function setCtxSession(id: string): void { - sessionIdEl().value = id; -} +// Thin re-exports of the session setters so flows keep their familiar names. +// Note: `setCtxAccount`/`setAccountId` is first-call-wins by design (see +// session.ts) — the account id is established once and shared across tabs. +export const setCtxAccount = setAccountId; +export const setCtxCredential = setCredentialId; +export const setCtxSession = setSessionId; export function requireAccountId(): string { - const id = accountIdEl().value.trim(); + const id = getAccountId(); if (!id) throw new Error( "Internal Account ID is required — run Create Customer first.", @@ -45,7 +31,7 @@ export function requireAccountId(): string { } export function requireCredentialId(): string { - const id = credentialIdEl().value.trim(); + const id = getCredentialId(); if (!id) throw new Error( "Credential ID is required — run Create for this type first.", @@ -54,7 +40,7 @@ export function requireCredentialId(): string { } export function requireSessionId(): string { - const id = sessionIdEl().value.trim(); + const id = getSessionId(); if (!id) throw new Error("Session ID is required — run Verify for this type first."); return id; diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts index fc2012e5b..10b803fa2 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts @@ -4,11 +4,8 @@ import { generateP256KeyPair } from "@turnkey/crypto"; import { SANDBOX_SIG } from "../config"; import { apiPost } from "../api-client"; -import { - buildWalletSignature, - sealOtpBundle, - setSessionKeysFromTek, -} from "../turnkey"; +import { buildWalletSignature, sealOtpBundle } from "../turnkey"; +import { setSessionKeysFromTek } from "../session"; import { addLog, bindClick, el } from "../ui"; import { requireAccountId, @@ -127,6 +124,8 @@ export function wireEmailOtpFlows(): void { // The TEK is now the session's API key (OTP_LOGIN registered it). Cache it // as the active session signing key so later signed retries (add passkey, // quote execute, etc.) can stamp with this session via turnkeyStamp(). + // MIGRATION (P6): this OTP-TEK caching is the model passkey/oauth login + // converge on once the login-family knob is ON — see oauth.ts/passkey.ts. if (leg2.status === 200) setSessionKeysFromTek(tek); // One bundle per challenge — force a fresh Challenge for the next run. v3TargetBundle = null; diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts index 94ae08789..fd156be91 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts @@ -2,7 +2,7 @@ import { SANDBOX_SIG } from "../config"; import { apiPost } from "../api-client"; -import { rememberEncryptedSessionSigningKey } from "../turnkey"; +import { rememberEncryptedSessionSigningKey } from "../session"; import { addLog, bindClick, el, wireGenKeyButton } from "../ui"; import { requireAccountId, @@ -51,6 +51,11 @@ export function wireOauthFlows(): void { addLog("OAUTH Verify", data); const d = data as Record; if (d.id) setCtxSession(d.id as string); + // MIGRATION (P6): OAUTH login moves to OAUTH_LOGIN; the knob-ON response + // drops `encryptedSessionSigningKey`, so this becomes the OTP-style + // `setSessionKeysFromTek(clientKeyPair)` path. The shape-detection in + // `rememberEncryptedSessionSigningKey` already no-ops when the field is + // absent — flip this one call once the P3 wire shape settles. rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); return JSON.stringify(data, null, 2); }, diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts index 069001b5c..c5deb7665 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts @@ -3,12 +3,21 @@ import { SANDBOX_SIG } from "../config"; import { apiPost, getMode } from "../api-client"; +import { turnkeyStamp } from "../turnkey"; import { + hasSessionSigningKey, + onSessionChange, rememberEncryptedSessionSigningKey, - turnkeyStamp, -} from "../turnkey"; +} from "../session"; import { createRealPasskey, signWithPasskey } from "../webauthn"; -import { addLog, bindClick, el, wireGenKeyButton } from "../ui"; +import { + addLog, + bindClick, + el, + maybeEl, + wireGatedButton, + wireGenKeyButton, +} from "../ui"; import { requireAccountId, requireCredentialId, @@ -141,6 +150,11 @@ export function wirePasskeyFlows(): void { addLog("PASSKEY Verify", data); const d = data as Record; if (d.id) setCtxSession(d.id as string); + // MIGRATION (P6): PASSKEY login moves to STAMP_LOGIN; the knob-ON response + // drops `encryptedSessionSigningKey`, so this becomes the OTP-style + // `setSessionKeysFromTek(clientKeyPair)` path. The shape-detection in + // `rememberEncryptedSessionSigningKey` already no-ops when the field is + // absent — flip this one call once the P2 wire shape settles. rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); return JSON.stringify(data, null, 2); }, @@ -235,4 +249,20 @@ export function wirePasskeyFlows(): void { return JSON.stringify(data, null, 2); }, ); + + // The add-retry stamps CREATE_AUTHENTICATORS with the live session's signing + // key in production. Surface that requirement as a disabled-with-tooltip + // button (re-evaluated on session + mode change) instead of throwing on + // click — fixes the old "No client keypair" trap. + const refreshAddRetryGate = wireGatedButton("btn-passkey-add-retry", () => { + if (getMode() !== "production") return null; // sandbox uses the magic value + if (!hasSessionSigningKey()) + return "Log in first — adding a passkey needs a live session to stamp the request."; + return null; + }); + onSessionChange(refreshAddRetryGate); + maybeEl("mode-select")?.addEventListener( + "change", + refreshAddRetryGate, + ); } diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts index cd956c442..0540ba003 100644 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -8,6 +8,7 @@ // Thin bootstrap: wire tabs, then each flow module. Behavior lives in the // `flows/` tree + the `config / turnkey / webauthn / api-client / ui` modules. +import { renderChip } from "./session"; import { wireTabs } from "./ui"; import { wireCustomerFlows } from "./flows/customer"; import { wireEmailOtpFlows } from "./flows/email-otp"; @@ -24,4 +25,8 @@ wirePasskeyFlows(); wireManageFlows(); wireMoneyFlows(); +// Paint the initial session chip (empty session) once the DOM + flow gates are +// wired. Flows re-render it as ids / signing keys land. +renderChip(); + console.log("Grid Global Accounts example app loaded."); diff --git a/apps/examples/grid-global-accounts-example-app/src/session.ts b/apps/examples/grid-global-accounts-example-app/src/session.ts new file mode 100644 index 000000000..3f5b3cec4 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/session.ts @@ -0,0 +1,227 @@ +// Session state — the ONE place that holds the client keypair / encrypted +// session-signing-key bundle / TEK, plus the account / credential / session +// ids. Renders the session status chip so the two session models are visible +// (and the "No client keypair" trap is surfaced as disabled-with-tooltip +// instead of a runtime throw). +// +// Two session models funnel through here: +// - "Verify-bundle": a client keypair + an `encryptedSessionSigningKey` +// bundle Grid returns on passkey/oauth Verify, HPKE-decrypted on demand. +// - "OTP-TEK": the TEK private key *is* the session key (OTP login, and — +// post-migration — passkey/oauth too); cached directly, no bundle. + +import { decryptCredentialBundle, getPublicKey } from "@turnkey/crypto"; + +import { el, maybeEl } from "./ui"; + +export interface ClientKeyPair { + privateKey: string; // hex + publicKey: string; // hex, compressed + publicKeyUncompressed: string; // hex, 130 chars (0x04 prefix) +} + +export interface SessionKeys { + apiPublicKey: string; // hex, compressed P-256 + apiPrivateKey: string; // hex +} + +// Which model established the current signing key, for the chip badge. +export type SessionModel = "none" | "otp-tek" | "verify-bundle"; + +let clientKeyPair: ClientKeyPair | null = null; +let lastEncryptedSessionSigningKey: string | null = null; +let cachedSessionKeys: SessionKeys | null = null; +let model: SessionModel = "none"; + +// ----- Client keypair (Verify-bundle model) ----- + +export function setClientKeyPair(kp: ClientKeyPair): void { + clientKeyPair = kp; + // A fresh client key invalidates any session decrypted under the old one. + cachedSessionKeys = null; + lastEncryptedSessionSigningKey = null; + model = "none"; + renderChip(); +} + +export function getClientKeyPair(): ClientKeyPair | null { + return clientKeyPair; +} + +export function rememberEncryptedSessionSigningKey(value: unknown): void { + // MIGRATION (P6): once the login-family knob is ON, passkey/oauth Verify drop + // `encryptedSessionSigningKey` and behave like OTP (the client key is the + // session key). Shape-detection on field-presence already no-ops here when + // the field is absent, so both knob states work unchanged. + if (typeof value === "string" && value) { + lastEncryptedSessionSigningKey = value; + cachedSessionKeys = null; + model = "verify-bundle"; + renderChip(); + } +} + +// ----- OTP-TEK model ----- +// +// There is no encryptedSessionSigningKey bundle — the TEK private key *is* the +// session's API key once login registers it. Cache it directly so +// `turnkeyStamp` can authorize later signed retries without the Verify-style +// clientKeyPair + bundle. +export function setSessionKeysFromTek(tek: { + publicKey: string; + privateKey: string; +}): void { + cachedSessionKeys = { + apiPublicKey: tek.publicKey, + apiPrivateKey: tek.privateKey, + }; + model = "otp-tek"; + renderChip(); +} + +// Resolve the session signing keys, decrypting the Verify bundle on demand. +// Returns null (rather than throwing) when no session is established yet — the +// caller decides how to surface that. Crypto callers use this; UI gates use +// `hasSessionSigningKey()`. +export function resolveSessionKeys(): SessionKeys | null { + if (cachedSessionKeys) return cachedSessionKeys; + if (!clientKeyPair || !lastEncryptedSessionSigningKey) return null; + const apiPrivateKey = decryptCredentialBundle( + lastEncryptedSessionSigningKey, + clientKeyPair.privateKey, + ); + const apiPublicKeyBytes = getPublicKey(apiPrivateKey, /*isCompressed*/ true); + const apiPublicKey = Array.from(apiPublicKeyBytes) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); + cachedSessionKeys = { apiPublicKey, apiPrivateKey }; + return cachedSessionKeys; +} + +// True once a signing key is available *or* derivable (cached TEK, or a client +// keypair + bundle). This is the gate the UI uses to enable/disable buttons. +export function hasSessionSigningKey(): boolean { + if (cachedSessionKeys) return true; + return Boolean(clientKeyPair && lastEncryptedSessionSigningKey); +} + +export function getSessionModel(): SessionModel { + return model; +} + +// ----- Change subscribers ----- +// +// Buttons that need a live session (e.g. "Add passkey" retry in production) +// subscribe here so they can re-evaluate their disabled-with-tooltip state +// whenever the session changes — surfacing the requirement instead of throwing +// on click. + +type SessionListener = () => void; +const listeners: SessionListener[] = []; + +// Subscribe to *signing-key readiness* changes only. Listeners are notified +// when `hasSessionSigningKey()` transitions, not on every account/credential/ +// session id update — so a gated button can't be re-enabled mid-flight by an +// unrelated id write (e.g. `setSessionId`) while its handler is running. +export function onSessionChange(listener: SessionListener): void { + listeners.push(listener); + listener(); // run once so the initial state is applied +} + +let lastSigningKeyReady = false; + +// Repaint the chip on any state change, but only fire listeners when +// signing-key readiness actually flips (the single thing they depend on). +function notifyIfSigningKeyChanged(): void { + const ready = hasSessionSigningKey(); + if (ready === lastSigningKeyReady) return; + lastSigningKeyReady = ready; + for (const listener of listeners) listener(); +} + +// ----- Cross-flow ids (account / credential / session) ----- +// +// Backed by the existing hidden-ish context inputs so manual paste still works; +// reading them here keeps the chip in sync with whatever the flows last set. + +function accountIdEl(): HTMLInputElement { + return el("ctx-account-id"); +} +function credentialIdEl(): HTMLInputElement { + return el("ctx-credential-id"); +} +function sessionIdEl(): HTMLInputElement { + return el("ctx-session-id"); +} + +// First-call-wins by design: the account id is established once (Create +// Customer) and shared across every credential-type tab, so a later per-type +// flow can't clobber it. Credential/session ids below are per-type and do +// overwrite. To switch accounts, clear the field in the UI. +export function setAccountId(id: string): void { + if (!accountIdEl().value) accountIdEl().value = id; + renderChip(); +} +export function setCredentialId(id: string): void { + credentialIdEl().value = id; + renderChip(); +} +export function setSessionId(id: string): void { + sessionIdEl().value = id; + renderChip(); +} + +export function getAccountId(): string { + return accountIdEl().value.trim(); +} +export function getCredentialId(): string { + return credentialIdEl().value.trim(); +} +export function getSessionId(): string { + return sessionIdEl().value.trim(); +} + +// ----- Status chip ----- + +const MODEL_LABEL: Record = { + none: "—", + "otp-tek": "OTP-TEK", + "verify-bundle": "Verify-bundle", +}; + +// Escape interpolated values: chip fields show server-sourced ids +// (credential / session / account), so a hostile value like +// `` must not become live markup in innerHTML. +function escapeHtml(s: string): string { + return s + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +function chipField(label: string, value: string, ok?: boolean): string { + const cls = ok === undefined ? "" : ok ? " chip-ok" : " chip-none"; + const shown = escapeHtml(value || "—"); + return `${escapeHtml( + label, + )} ${shown}`; +} + +export function renderChip(): void { + const chip = maybeEl("session-chip"); + if (chip) { + const ready = hasSessionSigningKey(); + chip.innerHTML = [ + chipField("account", getAccountId()), + chipField("credential", getCredentialId()), + chipField("session", getSessionId()), + chipField("signing key", ready ? "ready" : "none", ready), + chipField("model", MODEL_LABEL[model]), + ].join(""); + } + // Repaint above happens on every state change; listeners only fire when the + // signing-key readiness flips. + notifyIfSigningKeyChanged(); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/turnkey.ts b/apps/examples/grid-global-accounts-example-app/src/turnkey.ts index 060938e9d..aac6feed1 100644 --- a/apps/examples/grid-global-accounts-example-app/src/turnkey.ts +++ b/apps/examples/grid-global-accounts-example-app/src/turnkey.ts @@ -1,103 +1,40 @@ -// Turnkey crypto: P-256 keygen, HPKE seal, wallet signature, session-key state, -// and the X-Stamp builder. +// Turnkey crypto: P-256 keygen, HPKE seal, wallet signature, and the X-Stamp +// builder. Session-key *state* lives in `session.ts`; this module only does the +// crypto and reads/writes that state through it. import { - decryptCredentialBundle, formatHpkeBuf, generateP256KeyPair, - getPublicKey, hpkeEncrypt, } from "@turnkey/crypto"; import { signWithApiKey } from "@turnkey/api-key-stamper"; import { TURNKEY_STAMP_SCHEME } from "./config"; +import { type ClientKeyPair, resolveSessionKeys, setClientKeyPair } from "./session"; -// ----- Production-mode key state ----- -// -// Generated client-side at the first call to `generateClientKeyPair`. The +// Generate the client-side P-256 keypair (Verify-bundle model). The // uncompressed public key (130 hex chars, 0x04-prefixed) goes to Grid as -// `clientPublicKey` on Verify; the private key is held here and used to -// HPKE-decrypt the `encryptedSessionSigningKey` Grid hands back, yielding -// the Turnkey API session keypair we then stamp `payloadToSign` with. -// -// In sandbox mode the bundle is shape-valid but undecryptable — sandbox -// flows skip this entire path and use the magic signature constants. - -export interface ClientKeyPair { - privateKey: string; // hex - publicKey: string; // hex, compressed - publicKeyUncompressed: string; // hex, 130 chars (0x04 prefix) -} - -export interface SessionKeys { - apiPublicKey: string; // hex, compressed P-256 - apiPrivateKey: string; // hex -} - -let clientKeyPair: ClientKeyPair | null = null; -let lastEncryptedSessionSigningKey: string | null = null; -let cachedSessionKeys: SessionKeys | null = null; - +// `clientPublicKey` on Verify; the private key stays client-side to +// HPKE-decrypt the `encryptedSessionSigningKey` Grid hands back. Stored in +// `session.ts` so a session decrypted under one keypair stays valid across tabs. export function generateClientKeyPair(): ClientKeyPair { const kp = generateP256KeyPair(); - clientKeyPair = { + const clientKeyPair: ClientKeyPair = { privateKey: kp.privateKey, publicKey: kp.publicKey, publicKeyUncompressed: kp.publicKeyUncompressed, }; - // Re-using the keypair across credential types means a Verify by any - // type cycles fresh session bundles bound to the same client key — - // simpler than tracking one keypair per type for the test app. - cachedSessionKeys = null; - lastEncryptedSessionSigningKey = null; + setClientKeyPair(clientKeyPair); return clientKeyPair; } -export function rememberEncryptedSessionSigningKey(value: unknown): void { - if (typeof value === "string" && value) { - lastEncryptedSessionSigningKey = value; - cachedSessionKeys = null; - } -} - -// OTP_LOGIN / STAMP_LOGIN model: there is no encryptedSessionSigningKey bundle -// — the TEK private key *is* the session's API key once login registers it. -// Cache it directly so turnkeyStamp() can authorize later signed retries -// (e.g. adding a passkey) without the Verify-style clientKeyPair + bundle. -export function setSessionKeysFromTek(tek: { - publicKey: string; - privateKey: string; -}): void { - cachedSessionKeys = { - apiPublicKey: tek.publicKey, - apiPrivateKey: tek.privateKey, - }; -} - -function decryptSessionKeysOrThrow(): SessionKeys { - if (cachedSessionKeys) return cachedSessionKeys; - if (!clientKeyPair) - throw new Error( - "No client keypair — run a Verify in production mode first.", - ); - if (!lastEncryptedSessionSigningKey) +export async function turnkeyStamp(payload: string): Promise { + const keys = resolveSessionKeys(); + if (!keys) throw new Error( - "No encryptedSessionSigningKey — run a Verify in production mode first.", + "No session signing key — log in (Verify) first to establish a session.", ); - const apiPrivateKey = decryptCredentialBundle( - lastEncryptedSessionSigningKey, - clientKeyPair.privateKey, - ); - const apiPublicKeyBytes = getPublicKey(apiPrivateKey, /*isCompressed*/ true); - const apiPublicKey = Array.from(apiPublicKeyBytes) - .map((b) => b.toString(16).padStart(2, "0")) - .join(""); - cachedSessionKeys = { apiPublicKey, apiPrivateKey }; - return cachedSessionKeys; -} - -export async function turnkeyStamp(payload: string): Promise { - const { apiPublicKey, apiPrivateKey } = decryptSessionKeysOrThrow(); + const { apiPublicKey, apiPrivateKey } = keys; // `signWithApiKey` returns the hex DER signature; the X-Stamp header // value is base64url(JSON({publicKey, scheme, signature})) with that // hex signature embedded as-is. Mirrors what `@turnkey/api-key-stamper` diff --git a/apps/examples/grid-global-accounts-example-app/src/ui.ts b/apps/examples/grid-global-accounts-example-app/src/ui.ts index ad103e97d..edf19afa3 100644 --- a/apps/examples/grid-global-accounts-example-app/src/ui.ts +++ b/apps/examples/grid-global-accounts-example-app/src/ui.ts @@ -108,6 +108,30 @@ export function wireGenKeyButton(btnId: string, targetInputId: string): void { }); } +// ----- Session-gated buttons ----- +// +// Disable a button with an explanatory tooltip when it can't run yet (e.g. a +// signed retry that needs a live session in production), instead of letting the +// click throw a cryptic error. `evaluate()` returns null when enabled, or the +// tooltip/disabled reason when it should be blocked. + +export function wireGatedButton( + btnId: string, + evaluate: () => string | null, +): () => void { + const btn = maybeEl(btnId); + if (!btn) return () => {}; + return () => { + const reason = evaluate(); + btn.disabled = reason !== null; + if (reason) { + btn.title = reason; + } else { + btn.removeAttribute("title"); + } + }; +} + // ----- Tab switching ----- export function wireTabs(): void { From 1ff29c6670dcf717fcff3ab88778fcbc124b48d5 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 03:13:49 -0700 Subject: [PATCH 077/133] [js] gga example app: prune dead flows + stale PR-number comments (#28473) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Prune dead / reject-only flows and fix stale PR-number comments: demote the EMAIL_OTP "Add second" reject demo and OAUTH rechallenge no-op to Advanced (or remove), fold the duplicate EMAIL_OTP rechallenge into guided login, and reword the stale `"PR #28427:"` / `"PR 4 flow:"` comments to describe behavior. ## Why P4 example app, PR 3 in `40-example-app-design.md` §2/§5. These flows existed only to exercise reject paths or duplicated a guided step, and the PR-number comments anchor readers to specific (now-irrelevant) PRs rather than describing what the code does. Small, low-risk cleanup independent of the UI restructure. ## Place in the stack Base: #28472 (session.ts + status chip). Fourth PR of the **P4 example-app** stack. ## Notable points - Deletions/rewrites only; no new behavior. Reject/no-op demos are demoted, not silently lost. - Manual test tool; type gate: `build` + `lint`/`format`. --- Part of the Turnkey login-family migration program. See `sparkcore/sparkcore/grid/docs/login-migration/00-program-plan.md`. GitOrigin-RevId: 5158156f8af7183ce150e63815e4d2dd563b377b --- .../index.html | 38 +++++-------------- .../src/flows/email-otp.ts | 18 +-------- .../src/flows/oauth.ts | 18 +-------- .../src/webauthn.ts | 4 +- 4 files changed, 14 insertions(+), 64 deletions(-) diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index d81b39e56..fd579e23e 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -235,10 +235,10 @@

Grid Global Accounts - Example App

- Signed-retry flows show the requestId / - payloadToSign from step 1 so you can inspect them before - step 2 forwards with - Grid-Wallet-Signature: sandbox-valid-signature. + Pick a mode at the top. Signed-retry flows are two-step — step 1 issues a + 202 challenge (requestId / payloadToSign you can + inspect), step 2 forwards a Grid-Wallet-Signature: a magic + value in sandbox, a real session stamp in production.

@@ -446,21 +446,12 @@

Verify → session (secure OTP)

- Rechallenge (re-issue OTP) -

-

Uses Credential ID from Wallet Context.

- -
-
- -
-

- Add second EMAIL_OTP via signed retry + Add second EMAIL_OTP (expected-reject demo)

- Rejects because one EMAIL_OTP already attached — step 1 exercises - the reject path. Remove the first EMAIL_OTP to test the full add - flow. + Not a happy path. Rejects because one EMAIL_OTP is already attached + — step 1 exercises the reject path. Remove the first EMAIL_OTP to + test the full add flow.

@@ -578,15 +569,6 @@

Verify → session

-
-

Rechallenge

-

- OAUTH rechallenge is a no-op — just returns AuthMethod. -

- -
-
-

Add additional OAUTH via signed retry @@ -732,9 +714,9 @@

Create credential

Session challenge

- PR 4 flow: /challenge returns + /challenge returns challenge = sha256(CREATE_READ_WRITE_SESSION body) + - requestId. Client signs the challenge via WebAuthn. + requestId. The client signs the challenge via WebAuthn.

{ - const credId = requireCredentialId(); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - {}, - ); - addLog("EMAIL_OTP Rechallenge", data); - return JSON.stringify(data, null, 2); - }, - ); - const emailOtpAddRequestId = el("email_otp-add-request-id"); bindClick( "btn-email_otp-add-issue", diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts index fd156be91..889bb2f39 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts @@ -1,4 +1,4 @@ -// OAUTH lifecycle: create, verify (→ session), rechallenge (no-op), add. +// OAUTH lifecycle: create, verify (→ session), add. import { SANDBOX_SIG } from "../config"; import { apiPost } from "../api-client"; @@ -61,22 +61,6 @@ export function wireOauthFlows(): void { }, ); - bindClick( - "btn-oauth-rechallenge", - "oauth-rechallenge-status", - "OAUTH Rechallenge", - "Running no-op rechallenge...", - async () => { - const credId = requireCredentialId(); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - {}, - ); - addLog("OAUTH Rechallenge", data); - return JSON.stringify(data, null, 2); - }, - ); - const oauthAddRequestId = el("oauth-add-request-id"); bindClick( "btn-oauth-add-issue", diff --git a/apps/examples/grid-global-accounts-example-app/src/webauthn.ts b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts index d694e3495..9abb0fbef 100644 --- a/apps/examples/grid-global-accounts-example-app/src/webauthn.ts +++ b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts @@ -92,8 +92,8 @@ export async function signWithPasskey( "No challenge — issue a session challenge (step above) first.", ); } - // PR #28427: Turnkey's WebAuthn challenge is the UTF-8 bytes of the - // sha256-hex challenge string returned by /challenge — NOT base64url-decoded. + // Turnkey's WebAuthn challenge is the UTF-8 bytes of the sha256-hex challenge + // string returned by /challenge — NOT base64url-decoded. const challenge = new TextEncoder().encode(challengeValue); const allowCredentials: PublicKeyCredentialDescriptor[] = credentialId ? [{ type: "public-key", id: b64UrlToBytes(credentialId) as BufferSource }] From 9b760c41ad1210db9a3145e299b6d6e9c0b9a070 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 12 Jun 2026 03:20:47 -0700 Subject: [PATCH 078/133] [js] gga example app: sandbox/production mode split driven by SANDBOX_MAGIC (#28474) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Make mode (sandbox vs production) the primary switch: move the scattered `value="sandbox-..."` HTML seeds into a single `SANDBOX_MAGIC` map (`mode.ts`/`config.ts`), drive field visibility + seeding from mode in JS, persist the chosen mode to `localStorage`, and hide ceremony (Touch ID) buttons in sandbox / hide magic fields in production. ## Why P4 example app, PR 4 in `40-example-app-design.md` §1.4/§5. Every field was pre-seeded with `sandbox-*` placeholders indistinguishable from real values, and `SANDBOX_SIG` was silently injected into signed-retry headers — in production mode these are wrong with no UI signal which fields are magic. Sourcing seeds from one labeled constant map, injected only in sandbox mode, removes the "looks real" problem at the source; persisting mode stops a reload silently reverting to sandbox. ## Place in the stack Base: #28473 (prune dead flows). Fifth PR of the **P4 example-app** stack. ## Notable points - Field visibility/seeding is now JS-driven keyed on mode rather than hardcoded in `index.html`. - Manual test tool; type gate: `build` + `lint`/`format`. Manual smoke: sandbox click-through + (where a device is available) one production Touch-ID round-trip. --- Part of the Turnkey login-family migration program. See `sparkcore/sparkcore/grid/docs/login-migration/00-program-plan.md`. GitOrigin-RevId: 7f45be16fefa89a0d169b06d53d7183d06d8004b --- .../index.html | 177 ++++++++++-------- .../src/config.ts | 31 +++ .../src/main.ts | 5 + .../src/mode.ts | 91 +++++++++ 4 files changed, 228 insertions(+), 76 deletions(-) create mode 100644 apps/examples/grid-global-accounts-example-app/src/mode.ts diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index fd579e23e..7dc4d3945 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -230,6 +230,27 @@ .chip-field.chip-none { color: #ff6b6b; } + .magic-pill { + display: inline-block; + margin-left: 6px; + padding: 0 5px; + border-radius: 3px; + background: #4a3a00; + border: 1px solid #7a5c00; + color: #ffd166; + font-size: 9px; + text-transform: uppercase; + letter-spacing: 0.5px; + vertical-align: middle; + } + #sandbox-legend { + color: #888; + font-size: 11px; + margin-top: 6px; + } + #sandbox-legend code { + color: #ffd166; + } @@ -261,14 +282,21 @@

Platform Auth

- Sandbox uses server-side magic strings - (sandbox-valid-signature, - 000000, sandbox-valid-oidc-token, - sandbox-valid-passkey-signature). Production persists the - client P-256 keypair + the encrypted session signing key from Verify, - then HPKE-decrypts via @turnkey/crypto and stamps real + Chosen once and remembered across reloads. Production hides every + magic-value field (nothing fake on screen) and shows the real-ceremony + (Touch ID) buttons; it persists the client P-256 keypair + the encrypted + session signing key from Verify, HPKE-decrypts via + @turnkey/crypto, and stamps real payloadToSign values via - @turnkey/api-key-stamper. + @turnkey/api-key-stamper. Sandbox hides the ceremony + buttons and seeds the magic values below (each flagged + magic). +

+

+ Sandbox magic strings: sandbox-valid-signature, + 000000, sandbox-valid-oidc-token, + sandbox-valid-passkey-signature — accepted by the sandbox + backend in place of real ceremony output.

@@ -438,8 +466,10 @@

Verify → session (secure OTP)

- - +
+ + +
@@ -539,22 +569,20 @@

OAUTH lifecycle

Create credential

- - +
+ + +

Verify → session

- - +
+ + +
Verify → session

Add additional OAUTH via signed retry

- - +
+ + +
@@ -673,40 +701,42 @@

Create credential

"Create" and "Add additional" against real Turnkey. The sub-org's RP ID must match this page's origin.

-
- - - - - + + +
+
+ + +
+
- - Attestation clientDataJSON + +
+
- + + +
@@ -742,35 +772,30 @@

Verify → session

id="passkey-verify-request-id" placeholder="auto-filled from challenge" /> - - - - - + + +
+
+ + +
+
- + + +

Click below to sign the issued challenge with your real passkey (Touch ID) — it fills the assertion fields above.

-
diff --git a/apps/examples/grid-global-accounts-example-app/src/config.ts b/apps/examples/grid-global-accounts-example-app/src/config.ts index e9726befd..9a6a620c5 100644 --- a/apps/examples/grid-global-accounts-example-app/src/config.ts +++ b/apps/examples/grid-global-accounts-example-app/src/config.ts @@ -13,3 +13,34 @@ export const API_BASE = "/api"; // Turnkey API stamp scheme — must match what `@turnkey/api-key-stamper` emits. export const TURNKEY_STAMP_SCHEME = "SIGNATURE_SCHEME_TK_API_P256"; + +// `localStorage` key for the persisted mode so a reload keeps the chosen mode +// instead of silently reverting to sandbox. +export const MODE_STORAGE_KEY = "gga-example-app-mode"; + +// ----- Sandbox magic values ----- +// +// The single source of truth for every fake "looks-real" field. Keyed by input +// element id → the magic value the sandbox backend accepts. In sandbox mode +// these are seeded into the fields (and the field gets a "magic" pill) by +// `mode.ts`; in production mode the same fields are hidden so nothing fake is +// ever on screen. This replaces the scattered `value="sandbox-..."` attributes +// that made fake data indistinguishable from real values. +export const SANDBOX_MAGIC: Record = { + // EMAIL_OTP — sandbox always accepts the fixed code. + "email_otp-v3-code": "000000", + // OAUTH — magic OIDC tokens (verify input + JWT-shaped create/add identities). + "oauth-verify-oidc": "sandbox-valid-oidc-token", + "oauth-create-oidc": + "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJzdWIiOiJzYW5kYm94LXVzZXItMSJ9.sig", + "oauth-add-oidc": + "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwic3ViIjoic2FuZGJveC11c2VyLTIifQ.sig", + // PASSKEY — magic attestation (create) + assertion (verify) blobs. + "passkey-create-challenge": "c2FuZGJveC1jaGFsbGVuZ2U", + "passkey-create-cred-id-raw": "c2FuZGJveC1jcmVkLWlk", + "passkey-create-client-data-json": "c2FuZGJveC1jbGllbnREYXRhSlNPTg", + "passkey-create-attestation-object": "c2FuZGJveC1hdHRlc3RhdGlvbk9iamVjdA", + "passkey-verify-signature": "sandbox-valid-passkey-signature", + "passkey-verify-auth-data": "c2FuZGJveC1hdXRoLWRhdGE", + "passkey-verify-client-data-json": "c2FuZGJveC1jbGllbnQtZGF0YQ", +}; diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts index 0540ba003..50c06563b 100644 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ b/apps/examples/grid-global-accounts-example-app/src/main.ts @@ -8,6 +8,7 @@ // Thin bootstrap: wire tabs, then each flow module. Behavior lives in the // `flows/` tree + the `config / turnkey / webauthn / api-client / ui` modules. +import { initMode } from "./mode"; import { renderChip } from "./session"; import { wireTabs } from "./ui"; import { wireCustomerFlows } from "./flows/customer"; @@ -17,6 +18,10 @@ import { wirePasskeyFlows } from "./flows/passkey"; import { wireManageFlows } from "./flows/manage"; import { wireMoneyFlows } from "./flows/money"; +// Resolve mode (persisted) + apply field visibility / magic seeding first, so +// flows wire against the correct initial state. +initMode(); + wireTabs(); wireCustomerFlows(); wireEmailOtpFlows(); diff --git a/apps/examples/grid-global-accounts-example-app/src/mode.ts b/apps/examples/grid-global-accounts-example-app/src/mode.ts new file mode 100644 index 000000000..905dcc7b1 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/mode.ts @@ -0,0 +1,91 @@ +// Sandbox / production mode: chosen once, persisted to localStorage, and the +// single driver of magic-value seeding + field/button visibility. +// +// - production: every magic-value field is hidden (nothing fake on screen); +// real-ceremony (Touch ID) buttons are shown. Values come from real +// ceremonies or guided flows. +// - sandbox: magic-value fields are shown, seeded from `SANDBOX_MAGIC`, and +// labeled with a "magic" pill; real-ceremony buttons are hidden. + +import { MODE_STORAGE_KEY, SANDBOX_MAGIC, type Mode } from "./config"; +import { el, maybeEl } from "./ui"; + +function readPersistedMode(): Mode { + try { + return localStorage.getItem(MODE_STORAGE_KEY) === "production" + ? "production" + : "sandbox"; + } catch { + return "sandbox"; + } +} + +function persistMode(mode: Mode): void { + try { + localStorage.setItem(MODE_STORAGE_KEY, mode); + } catch { + // localStorage unavailable (private mode etc.) — non-fatal, mode just + // won't survive a reload. + } +} + +// Wrapper for a magic field, so the whole label+input+pill block hides in +// production. Looked up lazily by the field's input id. +function magicWrapper(id: string): HTMLElement | null { + return document.querySelector(`[data-magic-for="${id}"]`); +} + +function ensurePill(id: string): void { + const wrapper = magicWrapper(id); + if (!wrapper || wrapper.querySelector(".magic-pill")) return; + const label = wrapper.querySelector("label"); + if (!label) return; + const pill = document.createElement("span"); + pill.className = "magic-pill"; + pill.textContent = "magic"; + pill.title = "Sandbox-only placeholder accepted by the sandbox backend."; + label.appendChild(pill); +} + +function applyMode(mode: Mode): void { + const sandbox = mode === "sandbox"; + + // Magic fields: seed + pill + show in sandbox; clear + hide in production. + for (const [id, value] of Object.entries(SANDBOX_MAGIC)) { + const wrapper = magicWrapper(id); + if (wrapper) wrapper.style.display = sandbox ? "" : "none"; + const field = maybeEl(id); + if (!field) continue; + if (sandbox) { + // Only seed when empty so we never stomp a value the user typed. + if (!field.value) field.value = value; + ensurePill(id); + } else if (field.value === value) { + // Drop a leftover magic value when switching to production so nothing + // fake is submitted; leave any user-entered value untouched. + field.value = ""; + } + } + + // Real-ceremony (Touch ID) buttons: only meaningful in production. + for (const btn of document.querySelectorAll("[data-ceremony]")) { + btn.style.display = sandbox ? "none" : ""; + } + + // Sandbox-only legend (the magic-string list moved out of the mode
+``` + +## Aesthetic + +`@lightsparkdev/origin` styles + components (Origin palette, typography, spacing, components). Clean, light, credible — not a bespoke pixel-perfect design system. Stays within Origin defaults. + +## Scope / sequencing (small stack on #28475, each step runnable + screenshotted) + +1. **Scaffold**: add `react`, `react-dom`, `@vitejs/plugin-react`, `@lightsparkdev/origin`; `main.tsx` + `App` shell + Origin styles; minimal `index.html`; `declarations.d.ts`. Renders an empty shell with the persona switcher + debug toggle. +2. **Decouple logic from `ui.ts`**: introduce the reporter/state+log interface; move `api-client`/`turnkey`/`webauthn`/`session`/`config`/`mode` + flows under `lib/`/`flows/`, DOM-free. +3. **Platform view**: config panel + customers table + create + "act as". +4. **Customer view**: login → wallet home → fund/pay → settings/export. +5. **Debug drawer**: wire the log, raw expanders, context-chip IDs. +6. **Remove** the old vanilla `ui.ts` + `index.html` body; cleanup + final polish pass. + +## Non-goals + +- Not a bespoke pixel-perfect design — use Origin defaults. +- Not changing real Turnkey/API behavior — same flows, new rendering. +- No backend changes. + +## Open items (resolve during build) + +- External-account/fund + quote/execute confirmed on the **Customer** side. +- Exact Origin components to use (Button, Card, Table, TextInput, Tabs, Drawer/Modal, Badge) — pick as we build. diff --git a/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md b/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md new file mode 100644 index 000000000..a2b313d38 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md @@ -0,0 +1,191 @@ +# GGA React + Origin Redesign — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Convert the vanilla-TS Grid Global Accounts example app into a polished React + `@lightsparkdev/origin` app with two persona views (Platform / Customer) and a debug toggle, reusing the existing integration logic. + +**Architecture:** Reuse the real integration logic (`api-client`, `turnkey`, `webauthn`, `session`, `config`, `mode`, `flows/*`) after decoupling it from `ui.ts` via an injected `Reporter` interface; rebuild only the rendering layer as React components styled with Origin. Mirror `grid-kyc-demo`'s React+Vite+Origin wiring. + +**Tech Stack:** React 19, Vite 8 (`@vitejs/plugin-react`), `@lightsparkdev/origin` (styles + components), TypeScript. Verification: `tsc`/`vite build` + dev-server screenshots; vitest unit tests for the decoupled logic. + +**Workspace:** `@lightsparkdev/grid-global-accounts-example-app` at `js/apps/examples/grid-global-accounts-example-app/`. +**Commands:** dev `yarn workspace @lightsparkdev/grid-global-accounts-example-app dev` · build/typecheck `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` · lint `yarn lint && yarn format`. +**Note (frontend):** for UI tasks, acceptance is "build/typecheck passes + dev screenshot matches the intent." Component *internals* are built during execution with the **frontend-design** skill; this plan pins the file map, interfaces, props, Origin components, and per-task acceptance. Logic tasks use real vitest unit tests (TDD). + +--- + +## Target file structure + +``` +src/ + main.tsx # mount React + import "@lightsparkdev/origin/styles.css" + App.tsx # shell: persona switcher, debug toggle, view routing + declarations.d.ts # *.module.scss / *.module.css shims (per grid-kyc-demo) + state/ + store.tsx # AppStateProvider + useAppState(): persona, activeCustomer, session, debugOn, log[]; reporter impl + lib/ # reused logic, DOM-free, Reporter-injected + reporter.ts # Reporter interface + LogEntry type + api-client.ts turnkey.ts webauthn.ts session.ts config.ts mode.ts + flows/ # reused orchestration, DOM-free, returns results / emits via Reporter + customer.ts email-otp.ts oauth.ts passkey.ts manage.ts money.ts context.ts + components/ + Shell.tsx PersonaSwitcher.tsx DebugToggle.tsx DebugDrawer.tsx RawExpander.tsx ContextChip.tsx + views/ + platform/ PlatformView.tsx Config.tsx CustomersTable.tsx CreateCustomer.tsx + customer/ CustomerView.tsx Login.tsx WalletHome.tsx Fund.tsx Pay.tsx Activity.tsx Settings.tsx +index.html # minimal:
+``` + +(Old `ui.ts` and the old `main.ts` are deleted in Task 6; the existing `flows/*.ts` and lib modules are *moved/edited in place*, not rewritten.) + +--- + +### Task 1: Scaffold React + Origin shell + +**Files:** +- Modify: `package.json` (deps), `vite.config.ts` (react plugin), `index.html` (mount root) +- Create: `src/main.tsx`, `src/declarations.d.ts`, `src/App.tsx`, `src/state/store.tsx`, `src/components/{Shell,PersonaSwitcher,DebugToggle}.tsx` + +- [ ] **Step 1: Add deps** +```bash +yarn workspace @lightsparkdev/grid-global-accounts-example-app add \ + "@lightsparkdev/origin@*" react@^19.2.6 react-dom@^19.2.6 @emotion/react@^11.14.0 @emotion/styled@^11.14.1 +yarn workspace @lightsparkdev/grid-global-accounts-example-app add -D \ + @vitejs/plugin-react@^5.2.0 @types/react@^19.2.15 @types/react-dom@^19.2.3 +``` + +- [ ] **Step 2: Add the React plugin to `vite.config.ts`** — keep the existing proxy/server block; add: +```ts +import react from "@vitejs/plugin-react"; +// in defineConfig({ ... }): plugins: [react()], +``` + +- [ ] **Step 3: Minimal `index.html` body** — replace the giant body with: +```html + +
+ + +``` + +- [ ] **Step 4: Create `src/declarations.d.ts`** (the `*.module.scss` + `*.module.css` shims block, copied verbatim from `grid-kyc-demo/src/declarations.d.ts` — Origin's `main` points at its source so tsc walks into `.module.scss`). + +- [ ] **Step 5: Create `src/main.tsx`** +```tsx +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "@lightsparkdev/origin/styles.css"; +import { App } from "./App"; + +const container = document.getElementById("root"); +if (!container) throw new Error("#root not found"); +createRoot(container).render(); +``` + +- [ ] **Step 6: Create `src/state/store.tsx`** — `AppStateProvider` + `useAppState()` hook exposing: +```ts +type Persona = "platform" | "customer"; +type AppState = { + persona: Persona; setPersona(p: Persona): void; + activeCustomer: { id: string; name: string; email: string } | null; + setActiveCustomer(c: AppState["activeCustomer"]): void; + session: { /* held session material */ } | null; setSession(s: unknown): void; + debugOn: boolean; toggleDebug(): void; + log: LogEntry[]; // from lib/reporter + reporter: Reporter; // pushes into log + status; see Task 2 +}; +``` +(Reporter is fully defined in Task 2; here just hold `log` state + provide a `reporter` that appends.) + +- [ ] **Step 7: Create `Shell` + `PersonaSwitcher` + `DebugToggle`** using Origin components (segmented control / tabs for the switcher, a switch for debug). `App.tsx` renders `{persona === "platform" ? : }` with empty placeholder views for now. + +- [ ] **Step 8: Verify** — `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` passes (tsc + vite). Then `… dev`, screenshot: an Origin-styled shell with a working Platform⇄Customer switcher and a debug toggle (placeholder view bodies). + +- [ ] **Step 9: Commit** — `feat(gga): scaffold React + Origin shell with persona switcher + debug toggle` + +--- + +### Task 2: `Reporter` interface + decouple logic from `ui.ts` + +**Files:** +- Create: `src/lib/reporter.ts`, `src/lib/__tests__/reporter.test.ts` +- Modify (move into `lib/`, remove `ui.ts` imports, accept `Reporter`): `api-client.ts`, `turnkey.ts`, `webauthn.ts`, `session.ts`, `config.ts`, `mode.ts` +- Modify (accept `Reporter`, return results, no DOM): `flows/*.ts` +- Modify: `src/state/store.tsx` (real `reporter` impl pushing to `log` + status) + +- [ ] **Step 1: Define `Reporter`** in `src/lib/reporter.ts` +```ts +export type LogEntry = { + id: string; ts: number; + level: "info" | "error" | "request" | "response"; + label: string; detail?: unknown; // raw payload / IDs / JSON, shown only in debug mode +}; +export interface Reporter { + log(entry: Omit): void; + status(message: string, kind?: "info" | "error" | "success"): void; +} +``` + +- [ ] **Step 2: Write failing unit test** `src/lib/__tests__/reporter.test.ts` — a collecting reporter records entries with ids/timestamps; assert order + fields. (Add a `test` script + vitest devDep if absent: `"test": "vitest run"`.) +- [ ] **Step 3: Implement** the collecting reporter (used by the React store) → test passes (`yarn workspace … test`). + +- [ ] **Step 4: Decouple each lib module** — replace `import { ... } from "../ui"` / `ui.log(...)` / `ui.setStatus(...)` calls with a `reporter: Reporter` parameter (thread it through). No `document.*`. Pattern, per module: + - was: `ui.log("submitted", body)` → now: `reporter.log({ level: "request", label: "submitted", detail: body })`. +- [ ] **Step 5: Decouple each flow** in `flows/*.ts` similarly — take `reporter` (and the active context) as args, **return** their result instead of rendering. `flows/manage.ts` + `session.ts` also drop their direct DOM (`getElementById`/`innerHTML`). +- [ ] **Step 6: Wire the store's `reporter`** to append `LogEntry`s to `log` and surface `status`. +- [ ] **Step 7: Verify** — `… build` passes; `… test` green; existing flows still callable from a temporary dev button (smoke). +- [ ] **Step 8: Commit** — `refactor(gga): decouple integration logic from ui.ts via Reporter` + +--- + +### Task 3: Platform view + +**Files:** Create `src/views/platform/{PlatformView,Config,CustomersTable,CreateCustomer}.tsx` + +- [ ] **Config** (Origin Card + form inputs): shows platform auth/connection status + editable platform settings; reads/writes via `lib/config.ts` + `flows/context.ts`. +- [ ] **CreateCustomer** (Origin form/modal): calls `flows/customer.ts`; on success adds the customer to `state` (a session-local list — the demo tracks customers it created) and selects it. +- [ ] **CustomersTable** (Origin Table): lists the session-local customers (name · email · status · wallet state) with a row **"Act as"** action → `setActiveCustomer(row)` + `setPersona("customer")`. +- [ ] **Verify** — `… build` passes; `… dev` screenshot: config panel + customer table + create flow + "act as" switches to (placeholder/real) Customer view. +- [ ] **Commit** — `feat(gga): platform view (config, customers table, create, act-as)` + +--- + +### Task 4: Customer view (split into sub-commits) + +**Files:** Create `src/views/customer/{CustomerView,Login,WalletHome,Fund,Pay,Activity,Settings}.tsx` + +- [ ] **4a — Login**: method tabs (OTP / OAuth / Passkey) → real flows (`flows/email-otp.ts`, `oauth.ts`, `passkey.ts`) for the `activeCustomer`; on success `setSession(...)`. Logged-out state if no session. Commit. +- [ ] **4b — WalletHome + Fund + Pay + Activity**: balance/accounts (Origin Card/stat); **Fund** via `flows/money.ts` (external account → money-in); **Pay** via `flows/money.ts` (quote + execute); **Activity** list. Commit. +- [ ] **4c — Settings**: manage credentials & sessions (add/remove passkey/OAuth, revoke) + export via `flows/manage.ts`. Commit. +- [ ] **Verify each** — `… build` passes; `… dev` screenshots of login → wallet → fund/pay → settings, acting as a created customer end-to-end (real flows). + +--- + +### Task 5: Debug drawer + raw expanders + context chip + +**Files:** Create `src/components/{DebugDrawer,RawExpander,ContextChip}.tsx`; wire into `Shell`. + +- [ ] **DebugDrawer**: rendered when `debugOn`; lists `state.log` entries (request/response/info/error) with expandable `detail` JSON. Origin Drawer/panel styling. +- [ ] **RawExpander**: a reusable "raw" disclosure used inside cards; renders `detail` JSON only when `debugOn`. +- [ ] **ContextChip**: shows active customer/session; reveals the actual IDs (customer/wallet/session) only when `debugOn` (collapsed to name otherwise). +- [ ] **Verify** — `… dev` screenshot: debug off = clean personas; debug on = drawer + raw JSON + IDs appear. +- [ ] **Commit** — `feat(gga): debug drawer + raw expanders + context chip (off by default)` + +--- + +### Task 6: Remove vanilla shell + final polish + +**Files:** Delete `src/ui.ts`, old `src/main.ts`; remove any remaining old markup; final pass. + +- [ ] Delete `src/ui.ts` and the old `src/main.ts`; grep for stray references (`grep -rn "from \"./ui\"" src` → none). +- [ ] `yarn lint && yarn format`; `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` passes. +- [ ] Final `… dev` screenshots: Platform view, Customer view (logged in), debug on — confirm polished + Origin-branded. +- [ ] **Commit** — `chore(gga): remove vanilla ui.ts/main.ts; final polish` + +--- + +## Self-review + +- **Spec coverage:** personas+switcher (Task 1), Platform view (Task 3), Customer view incl. fund/pay (Task 4), debug mode (Task 5), context threading / "act as" scope-switch (Task 3 act-as + store), Origin styling (Tasks 1–5), reuse-logic-decouple-ui (Task 2), remove vanilla (Task 6). ✓ All spec sections covered. +- **Placeholders:** scaffold/interfaces are concrete code; UI internals are intentionally built via frontend-design at execution with build+screenshot acceptance (noted up top) — not a hidden TODO. +- **Type consistency:** `Reporter`/`LogEntry` defined in Task 2 and consumed by the store (Task 1 forward-references it, fully defined in Task 2) and by lib/flows; `Persona`/`activeCustomer`/`session`/`debugOn`/`log` names consistent across store and components. diff --git a/apps/examples/grid-global-accounts-example-app/index.html b/apps/examples/grid-global-accounts-example-app/index.html index 15558e00e..f65f09a18 100644 --- a/apps/examples/grid-global-accounts-example-app/index.html +++ b/apps/examples/grid-global-accounts-example-app/index.html @@ -3,1125 +3,10 @@ - Grid Global Accounts - Example App - + Grid Global Accounts -

Grid Global Accounts - Example App

-

- Pick a mode at the top, then use the guided buttons — each owns its whole - chain (log in, manage, move money) and updates the session chip. The - Grid-Wallet-Signature on signed retries is a magic value in - sandbox and a real session stamp in production. Every guided flow has an - Advanced (manual steps) toggle that exposes the raw issue/retry - legs so you can inspect the 202 requestId / - payloadToSign between steps. -

- - - -
-

Platform Auth

-
-
- - -
-
- - -
-
- - -

- Chosen once and remembered across reloads. Production hides every - magic-value field (nothing fake on screen) and shows the real-ceremony - (Touch ID) buttons; it persists the client P-256 keypair + the encrypted - session signing key from Verify, HPKE-decrypts via - @turnkey/crypto, and stamps real - payloadToSign values via - @turnkey/api-key-stamper. Sandbox hides the ceremony - buttons and seeds the magic values below (each flagged - magic). -

-

- Sandbox magic strings: sandbox-valid-signature, - 000000, sandbox-valid-oidc-token, - sandbox-valid-passkey-signature — accepted by the sandbox - backend in place of real ceremony output. -

-
- - - -
-

Platform Config

-

- OTP + branding fields applied to outgoing OTP emails. Load pulls the - current platform config (GET /config); Save sends a PATCH - with whichever fields you filled in (empty fields are not sent). -

-
-
- - -
-
- - -
-
-
-
- - -
-
- -
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
- -
-

Customer Setup

-
-
- - -
-
- - -
-
- - - -
- -
- - - -
-
-
- - - -
-

Wallet Context

-

- Internal account id flows into every tab. Credential + session ids are - auto-filled as you run steps. The chip shows whether a session signing - key is ready and which model established it (OTP-TEK vs Verify-bundle). -

-
- - -
-
- - -
-
- - -
-
-
- - - -
- - - -
- - - -
-
-

EMAIL_OTP lifecycle

- -
-

Create credential

-

- Creates an EMAIL_OTP auth credential. The embedded wallet itself is - pre-created at customer-create time, so this only attaches a new - authenticator — it does not create a wallet. -

- -
-
- -
-

Log in → session (secure OTP)

-

- Guided: one click runs /challenge (sends the OTP — - emailed against real Turnkey, 000000 in sandbox) → - prompts for the code (pre-seeded in sandbox) → HPKE-seals it → - /verify first leg (202 + verificationToken) → - ECDSA-signs the token with the TEK → /verify retry (200 - session), then caches the TEK as the session signing key. The code - is never sent in plaintext and the TEK private key never leaves the - client. Uses the Credential ID from Wallet Context. -

- -
-
- - -
- -
- Advanced (manual steps) -

- Run challenge + verify separately to inspect the target bundle and - verificationToken between legs. -

- -
- -
-
-
- -
-

Manage credential / session

-

- Each guided button runs the whole issue → sign → retry chain in one - click — the signature is a magic value in sandbox and a live-session - stamp in production (the button is disabled with a tooltip until you - log in). -

- -
- -
- -
- -
- Advanced (manual steps) - -

Add second EMAIL_OTP (expected-reject demo)

-

- Not a happy path. Rejects because one EMAIL_OTP is already - attached — step 1 exercises the reject path. Remove the first - EMAIL_OTP to test the full add flow. -

- -
- - - -
- -

Delete credential via signed retry

- -
- - - -
- -

Delete session via signed retry

- -
- - - -
- -

Wallet export via signed retry

- -
- - - -
-
-
-
-
- - - -
-
-

OAUTH lifecycle

- -
-

Create credential

-
- - -
- -
-
- -
-

Log in → session

-

- Guided: one click generates the client P-256 key → - /verify with the OIDC token + client public key → - remembers the returned session bundle. Uses the Credential ID from - Wallet Context. -

-
- - -
- -
- -
- Advanced (manual steps) - - - - -
-
-
- -
-

Manage credential / session

-

- Each guided button runs the whole issue → sign → retry chain in one - click — the signature is a magic value in sandbox and a live-session - stamp in production (the button is disabled with a tooltip until you - log in). -

- -
- -
- -
- -
- Advanced (manual steps) - -

Add additional OAUTH via signed retry

-
- - -
- -
- - - -
- -

Delete credential via signed retry

- -
- - - -
- -

Delete session via signed retry

- -
- - - -
- -

Wallet export via signed retry

- -
- - - -
-
-
-
-
- - - -
-
-

PASSKEY lifecycle

- -
-

Create credential

- - - - -

- Click below to register a real passkey on this - device (Touch ID) — it fills the attestation fields. Use it for both - "Create" and "Add additional" against real Turnkey. The sub-org's RP - ID must match this page's origin. -

- -
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
- -
-

Log in → session

-

- Guided: one click generates the client P-256 key → - /challenge (returns - sha256(CREATE_READ_WRITE_SESSION body) + - requestId) → produces the assertion (a real Touch ID - ceremony in production, the seeded magic fields in sandbox) → - /verify → remembers the session bundle. Uses the - Credential ID from Wallet Context. -

- -
- -
- Advanced (manual steps) - -

Session challenge

- - - - -
- -

Verify → session

- - -
- - -
-
- - -
-
- - -
-

- Click below to sign the issued challenge with your real passkey - (Touch ID) — it fills the assertion fields above. -

- -
- -
-
-
- -
-

Manage credential / session

-

- Each guided button runs the whole issue → sign → retry chain in one - click — the signature is a magic value in sandbox and a live-session - stamp in production (the button is disabled with a tooltip until you - log in). -

- -
- -
- -
- -
- Advanced (manual steps) - -

Add additional PASSKEY via signed retry

-

- First click "📱 Create real passkey" in the - Create credential section above — that registers the new - passkey whose attestation is added here. Then run steps 1 and 2. -

- - - -
- - - -
- -

Delete credential via signed retry

- -
- - - -
- -

Delete session via signed retry

- -
- - - -
- -

Wallet export via signed retry

- -
- - - -
-
-
-
-
- - - -
-

List credentials / sessions

- - -
-
- - - -
-

External Account

- - -
- - -
- - -
-
- -
-

Quote + Execute

- - -
-
- - -
-
- - -
-
- -
- -
- - - - - - - - -
-
-
- - - -
-

Response Log

-
-
- - +
+ diff --git a/apps/examples/grid-global-accounts-example-app/package.json b/apps/examples/grid-global-accounts-example-app/package.json index 01f6f7586..0349edf13 100644 --- a/apps/examples/grid-global-accounts-example-app/package.json +++ b/apps/examples/grid-global-accounts-example-app/package.json @@ -6,15 +6,25 @@ "dev": "vite", "build": "tsc && vite build", "start": "vite", - "preview": "vite preview" + "preview": "vite preview", + "test": "vitest run" }, "devDependencies": { + "@types/react": "^19.2.15", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.2.0", "typescript": "^5.6.2", - "vite": "^8.0.14" + "vite": "^8.0.14", + "vitest": "^4.1.7" }, "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@lightsparkdev/origin": "*", "@turnkey/api-key-stamper": "^0.6.5", "@turnkey/crypto": "^2.8.14", - "@turnkey/encoding": "^0.6.0" + "@turnkey/encoding": "^0.6.0", + "react": "^19.2.6", + "react-dom": "^19.2.6" } } diff --git a/apps/examples/grid-global-accounts-example-app/src/App.tsx b/apps/examples/grid-global-accounts-example-app/src/App.tsx new file mode 100644 index 000000000..1b491ca9e --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/App.tsx @@ -0,0 +1,19 @@ +import { Shell } from "./components/Shell"; +import { AppStateProvider, useAppState } from "./state/store"; +import { CustomerView } from "./views/customer/CustomerView"; +import { PlatformView } from "./views/platform/PlatformView"; + +export function App() { + return ( + + + + + + ); +} + +function Router() { + const { persona } = useAppState(); + return persona === "platform" ? : ; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/__tests__/session.test.ts b/apps/examples/grid-global-accounts-example-app/src/__tests__/session.test.ts new file mode 100644 index 000000000..b6e3f4b7a --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/__tests__/session.test.ts @@ -0,0 +1,136 @@ +import { afterEach, describe, expect, it } from "vitest"; + +import { + clearActiveSession, + getAccountId, + getSessionId, + getSessionModel, + hasSessionSigningKey, + resolveSessionKeys, + setAccountId, + setActiveSessionAccount, + setSessionId, + setSessionKeysFromTek, +} from "../session"; + +// Reset to logged-out between tests so module-level context state can't leak. +afterEach(() => { + setActiveSessionAccount(null); +}); + +describe("per-customer session isolation", () => { + it("keeps signing keys, model, and account id independent per account key", () => { + // No active context → logged-out, getters return empty/null. + setActiveSessionAccount(null); + expect(hasSessionSigningKey()).toBe(false); + expect(resolveSessionKeys()).toBeNull(); + expect(getAccountId()).toBe(""); + expect(getSessionModel()).toBe("none"); + + // Customer A signs in (OTP-TEK model) under its own account key. + setActiveSessionAccount("InternalAccount:A"); + setAccountId("InternalAccount:A"); + setSessionKeysFromTek({ publicKey: "pubA", privateKey: "privA" }); + expect(hasSessionSigningKey()).toBe(true); + expect(getSessionModel()).toBe("otp-tek"); + expect(resolveSessionKeys()).toEqual({ + apiPublicKey: "pubA", + apiPrivateKey: "privA", + }); + expect(getAccountId()).toBe("InternalAccount:A"); + + // Switch to a fresh customer B: it inherits NOTHING from A. + setActiveSessionAccount("InternalAccount:B"); + expect(hasSessionSigningKey()).toBe(false); + expect(resolveSessionKeys()).toBeNull(); + expect(getSessionModel()).toBe("none"); + expect(getAccountId()).toBe(""); + + // B establishes its own session with different keys. + setAccountId("InternalAccount:B"); + setSessionKeysFromTek({ publicKey: "pubB", privateKey: "privB" }); + expect(resolveSessionKeys()).toEqual({ + apiPublicKey: "pubB", + apiPrivateKey: "privB", + }); + expect(getAccountId()).toBe("InternalAccount:B"); + + // Switching back to A restores A's cached session, untouched by B. + setActiveSessionAccount("InternalAccount:A"); + expect(hasSessionSigningKey()).toBe(true); + expect(getSessionModel()).toBe("otp-tek"); + expect(resolveSessionKeys()).toEqual({ + apiPublicKey: "pubA", + apiPrivateKey: "privA", + }); + expect(getAccountId()).toBe("InternalAccount:A"); + }); + + it("treats null as logged-out with no active context", () => { + setActiveSessionAccount("InternalAccount:A"); + setSessionKeysFromTek({ publicKey: "pubA", privateKey: "privA" }); + expect(hasSessionSigningKey()).toBe(true); + + setActiveSessionAccount(null); + expect(hasSessionSigningKey()).toBe(false); + expect(resolveSessionKeys()).toBeNull(); + expect(getAccountId()).toBe(""); + + // Mutators no-op while logged-out; later re-activation still has A cached. + setSessionKeysFromTek({ publicKey: "pubX", privateKey: "privX" }); + setActiveSessionAccount("InternalAccount:A"); + expect(resolveSessionKeys()).toEqual({ + apiPublicKey: "pubA", + apiPrivateKey: "privA", + }); + }); + + it("clearActiveSession wipes the active context's signing key without touching others", () => { + // Customer A signs in under its own account key. + setActiveSessionAccount("InternalAccount:clearA"); + setAccountId("InternalAccount:clearA"); + setSessionId("session-A"); + setSessionKeysFromTek({ publicKey: "pubA", privateKey: "privA" }); + + // Customer B signs in under a different key. + setActiveSessionAccount("InternalAccount:clearB"); + setAccountId("InternalAccount:clearB"); + setSessionId("session-B"); + setSessionKeysFromTek({ publicKey: "pubB", privateKey: "privB" }); + + // Back on A, clearing wipes A's signing key/model/session id but keeps the + // account id so the slot still belongs to A (logged out, can re-auth). + setActiveSessionAccount("InternalAccount:clearA"); + expect(hasSessionSigningKey()).toBe(true); + clearActiveSession(); + expect(hasSessionSigningKey()).toBe(false); + expect(resolveSessionKeys()).toBeNull(); + expect(getSessionModel()).toBe("none"); + expect(getSessionId()).toBe(""); + expect(getAccountId()).toBe("InternalAccount:clearA"); + + // B is untouched by clearing A. + setActiveSessionAccount("InternalAccount:clearB"); + expect(hasSessionSigningKey()).toBe(true); + expect(getSessionModel()).toBe("otp-tek"); + expect(getSessionId()).toBe("session-B"); + expect(resolveSessionKeys()).toEqual({ + apiPublicKey: "pubB", + apiPrivateKey: "privB", + }); + }); + + it("clearActiveSession is a no-op when logged out", () => { + setActiveSessionAccount(null); + expect(() => clearActiveSession()).not.toThrow(); + expect(hasSessionSigningKey()).toBe(false); + }); + + it("preserves first-account-wins for setAccountId within a fresh context", () => { + // A distinct key so the context is fresh (contexts persist across tests). + setActiveSessionAccount("InternalAccount:C"); + setAccountId("first"); + setAccountId("second"); + expect(getAccountId()).toBe("first"); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/__tests__/webauthn-options.test.ts b/apps/examples/grid-global-accounts-example-app/src/__tests__/webauthn-options.test.ts new file mode 100644 index 000000000..4da827c3a --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/__tests__/webauthn-options.test.ts @@ -0,0 +1,86 @@ +import { describe, expect, it } from "vitest"; + +import { + buildAllowCredentials, + buildAssertionOptions, + buildCreationOptions, + bytesToB64Url, + SECURITY_KEY_TRANSPORTS, +} from "../webauthn"; + +const RP = "localhost"; + +describe("buildCreationOptions — forces a cross-platform security key", () => { + const challenge = new Uint8Array([1, 2, 3]); + const userId = new Uint8Array([9, 9]); + const opts = buildCreationOptions("My key", RP, challenge, userId); + + it("requests a cross-platform (roaming) authenticator, not the platform one", () => { + expect(opts.authenticatorSelection?.authenticatorAttachment).toBe( + "cross-platform", + ); + }); + + it("uses security-key-friendly resident-key + UV settings", () => { + expect(opts.authenticatorSelection?.residentKey).toBe("discouraged"); + expect(opts.authenticatorSelection?.requireResidentKey).toBe(false); + expect(opts.authenticatorSelection?.userVerification).toBe("preferred"); + }); + + it("offers ES256 (-7) in pubKeyCredParams", () => { + expect(opts.pubKeyCredParams).toContainEqual({ + type: "public-key", + alg: -7, + }); + }); + + it("sets the rp id and passes the challenge/user through", () => { + expect(opts.rp.id).toBe(RP); + expect(opts.challenge).toBe(challenge); + expect(opts.user.id).toBe(userId); + }); +}); + +describe("buildAllowCredentials — targets the security key over USB/NFC", () => { + // A valid base64url credential id (decodes cleanly via atob). + const idA = bytesToB64Url(new Uint8Array([10, 20, 30])); + const idB = bytesToB64Url(new Uint8Array([40, 50, 60])); + + it("includes every registered id with usb/nfc transports", () => { + const out = buildAllowCredentials([idA, idB]); + expect(out).toHaveLength(2); + for (const d of out) { + expect(d.type).toBe("public-key"); + expect(d.transports).toEqual(SECURITY_KEY_TRANSPORTS); + expect(d.transports).toEqual(["usb", "nfc"]); + } + }); + + it("drops blank and duplicate ids", () => { + const out = buildAllowCredentials([idA, "", " ", idA]); + expect(out).toHaveLength(1); + }); + + it("returns [] when no ids are known (discoverable-credential fallback)", () => { + expect(buildAllowCredentials([])).toEqual([]); + }); +}); + +describe("buildAssertionOptions", () => { + const challenge = new Uint8Array([7]); + const id = bytesToB64Url(new Uint8Array([1, 2, 3, 4])); + + it("wires the rp id, challenge, UV and the allowCredentials", () => { + const opts = buildAssertionOptions(challenge, [id], RP); + expect(opts.rpId).toBe(RP); + expect(opts.challenge).toBe(challenge); + expect(opts.userVerification).toBe("preferred"); + expect(opts.allowCredentials).toHaveLength(1); + expect(opts.allowCredentials?.[0].transports).toEqual(["usb", "nfc"]); + }); + + it("yields an empty allowCredentials when no ids are known", () => { + const opts = buildAssertionOptions(challenge, [], RP); + expect(opts.allowCredentials).toEqual([]); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/api-client.ts b/apps/examples/grid-global-accounts-example-app/src/api-client.ts index 23882a7a8..40e550d11 100644 --- a/apps/examples/grid-global-accounts-example-app/src/api-client.ts +++ b/apps/examples/grid-global-accounts-example-app/src/api-client.ts @@ -1,51 +1,57 @@ // HTTP client + auth header + mode resolution. +// +// DOM-free: the platform credentials (client id / secret) and the active mode +// are passed in via an `ApiAuth` value instead of being read out of input +// elements, so the same client works from React, tests, or any caller that can +// supply the credentials it already holds. import { API_BASE, type Mode } from "./config"; -import { el } from "./ui"; -let authClientId: HTMLInputElement | null = null; -let authClientSecret: HTMLInputElement | null = null; -let modeSelect: HTMLSelectElement | null = null; - -function getAuthClientId(): HTMLInputElement { - if (!authClientId) authClientId = el("auth-client-id"); - return authClientId; +export interface ApiAuth { + clientId: string; + clientSecret: string; + mode: Mode; } -function getAuthClientSecret(): HTMLInputElement { - if (!authClientSecret) - authClientSecret = el("auth-client-secret"); - return authClientSecret; -} +// Fail a stalled request instead of spinning forever — a guided op that hangs +// server-side surfaces as a clear timeout rather than an indefinite wait. +const REQUEST_TIMEOUT_MS = 30_000; -function getModeSelect(): HTMLSelectElement { - if (!modeSelect) modeSelect = el("mode-select"); - return modeSelect; +export function resolveMode(value: string | undefined): Mode { + return value === "production" ? "production" : "sandbox"; } -export function getMode(): Mode { - return getModeSelect().value === "production" ? "production" : "sandbox"; +function authHeader(auth: ApiAuth): string { + return "Basic " + btoa(`${auth.clientId.trim()}:${auth.clientSecret.trim()}`); } -function getAuthHeader(): string { - return ( - "Basic " + - btoa( - `${getAuthClientId().value.trim()}:${getAuthClientSecret().value.trim()}`, - ) - ); +async function timedFetch(path: string, init: RequestInit): Promise { + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS); + try { + return await fetch(API_BASE + path, { ...init, signal: controller.signal }); + } catch (err) { + if (controller.signal.aborted) + throw new Error( + `Request to ${path} timed out after ${REQUEST_TIMEOUT_MS / 1000}s.`, + ); + throw err; + } finally { + clearTimeout(timer); + } } export async function apiPost( + auth: ApiAuth, path: string, body: Record | undefined, extraHeaders: Record = {}, ): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { + const res = await timedFetch(path, { method: "POST", headers: { "Content-Type": "application/json", - Authorization: getAuthHeader(), + Authorization: authHeader(auth), ...extraHeaders, }, body: body === undefined ? undefined : JSON.stringify(body), @@ -57,13 +63,14 @@ export async function apiPost( } export async function apiDelete( + auth: ApiAuth, path: string, extraHeaders: Record = {}, ): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { + const res = await timedFetch(path, { method: "DELETE", headers: { - Authorization: getAuthHeader(), + Authorization: authHeader(auth), ...extraHeaders, }, }); @@ -74,15 +81,16 @@ export async function apiDelete( } export async function apiPatch( + auth: ApiAuth, path: string, body: Record, extraHeaders: Record = {}, ): Promise<{ status: number; data: unknown }> { - const res = await fetch(API_BASE + path, { + const res = await timedFetch(path, { method: "PATCH", headers: { "Content-Type": "application/json", - Authorization: getAuthHeader(), + Authorization: authHeader(auth), ...extraHeaders, }, body: JSON.stringify(body), @@ -93,9 +101,9 @@ export async function apiPatch( return { status: res.status, data }; } -export async function apiGet(path: string): Promise { - const res = await fetch(API_BASE + path, { - headers: { Authorization: getAuthHeader() }, +export async function apiGet(auth: ApiAuth, path: string): Promise { + const res = await timedFetch(path, { + headers: { Authorization: authHeader(auth) }, }); const raw = await res.text(); const data = raw ? JSON.parse(raw) : null; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/ContextChip.tsx b/apps/examples/grid-global-accounts-example-app/src/components/ContextChip.tsx new file mode 100644 index 000000000..5af4d2fab --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/ContextChip.tsx @@ -0,0 +1,171 @@ +import styled from "@emotion/styled"; + +import { useAppState } from "../state/store"; + +/** + * The active-context indicator in the Shell header. Normally a quiet chip + * naming the customer the app is acting as (or "No customer" before one is + * picked). When debug mode is on it expands to reveal the actual identifiers + * the plumbing runs on — customer id, account id (if provisioned), and session + * id (if signed in) — inline as monospace key/value pairs. + * + * Nothing identifying is shown in the normal (non-debug) state, keeping the + * polished persona views free of raw IDs. + */ +export function ContextChip() { + const { activeCustomer, session, debugOn } = useAppState(); + + const name = activeCustomer?.name || activeCustomer?.email || null; + const sessionId = extractSessionId(session); + + if (!activeCustomer) { + // Nothing to anchor to before a customer is active — stay out of the way. + if (!debugOn) return null; + return ( + + + No customer + + ); + } + + return ( + + + {name} + + {debugOn && ( + + + cust + {activeCustomer.id} + + {activeCustomer.accountId && ( + + acct + {activeCustomer.accountId} + + )} + {sessionId && ( + + sess + {sessionId} + + )} + + )} + + ); +} + +/** + * The session is held as `unknown` (the concrete bundle shape is owned by the + * reused login flows). Best-effort dig for a likely identifier so debug mode + * can surface *something* without coupling to one provider's shape; falls back + * to null when there's nothing id-like to show. + */ +function extractSessionId(session: unknown): string | null { + if (!session || typeof session !== "object") return null; + const s = session as Record; + const candidates = [ + s.id, + s.sessionId, + s.session_id, + s.credentialId, + s.credential_id, + (s.session as Record | undefined)?.id, + ]; + for (const c of candidates) { + if (typeof c === "string" && c.length > 0) return c; + } + return null; +} + +const Chip = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-2xs, 6px); + min-width: 0; + max-width: 360px; + padding: var(--spacing-3xs, 4px) var(--spacing-xs, 8px); + border-radius: var(--corner-radius-md, 8px); + background: var(--surface-secondary, #f0f0ee); + border: var(--stroke-xs, 0.5px) solid + var(--border-primary, rgba(38, 38, 35, 0.1)); + + &[data-debug] { + /* Fixed dark "console" surface (matches DebugDrawer's PANEL_BG), not the + * mode-flipping --surface-inverse — its light text would vanish on the + * near-white --surface-inverse in dark mode. */ + background: #16161a; + border-color: rgba(255, 255, 255, 0.14); + } + + @media (width <= 760px) { + display: none; + } +`; + +const Dot = styled.span` + flex: 0 0 auto; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--text-tertiary, #8a8a8a); + + &[data-on="true"] { + background: #3dd68c; + box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.22); + } +`; + +const Name = styled.span` + flex: 0 0 auto; + font-size: var(--font-size-xs, 12px); + font-weight: var(--font-weight-medium, 500); + color: var(--text-primary, #1a1a1a); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &[data-debug] { + color: rgba(255, 255, 255, 0.92); + } +`; + +const Ids = styled.span` + display: inline-flex; + align-items: center; + gap: var(--spacing-2xs, 6px); + padding-left: var(--spacing-2xs, 6px); + margin-left: var(--spacing-3xs, 4px); + border-left: var(--stroke-xs, 0.5px) solid rgba(255, 255, 255, 0.16); + min-width: 0; +`; + +const Id = styled.span` + display: inline-flex; + align-items: baseline; + gap: var(--spacing-3xs, 4px); + min-width: 0; +`; + +const K = styled.span` + flex: 0 0 auto; + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-2xs, 10px); + text-transform: uppercase; + letter-spacing: 0.4px; + color: rgba(255, 255, 255, 0.45); +`; + +const V = styled.span` + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-2xs, 10px); + color: #b8e8ff; + max-width: 110px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-variant-numeric: tabular-nums; +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/DebugDrawer.tsx b/apps/examples/grid-global-accounts-example-app/src/components/DebugDrawer.tsx new file mode 100644 index 000000000..d2a0b4368 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/DebugDrawer.tsx @@ -0,0 +1,338 @@ +import styled from "@emotion/styled"; +import { Badge, Collapsible } from "@lightsparkdev/origin"; +import { useState, type ComponentProps } from "react"; + +import type { LogEntry } from "../lib/reporter"; +import { useAppState } from "../state/store"; + +type BadgeVariant = ComponentProps["variant"]; + +/** Map each log level to an Origin badge variant + short tag. */ +const LEVEL: Record = + { + info: { variant: "gray", tag: "INFO" }, + error: { variant: "red", tag: "ERR" }, + request: { variant: "blue", tag: "REQ" }, + response: { variant: "green", tag: "RES" }, + }; + +/** + * The debug surface's main instrument: a docked panel pinned to the bottom of + * the viewport that streams the structured `store.log` — one row per entry with + * a level badge, label, timestamp, and an expandable raw `detail` JSON. Rendered + * only when debug mode is on, across both personas (wired into the Shell), and + * non-modal so the app stays fully usable behind it. Collapsible to a slim + * header bar so it can be parked out of the way. + */ +export function DebugDrawer() { + const { debugOn, log } = useAppState(); + const [open, setOpen] = useState(true); + + if (!debugOn) return null; + + // Newest first — the reporter appends, so reverse a shallow copy. + const entries = [...log].reverse(); + + return ( + + setOpen((v) => !v)} aria-expanded={open}> + + + Debug console + {log.length} + + {open ? "▾" : "▴"} + + + {open && ( + + {entries.length === 0 ? ( + + No events yet. Connect, create a customer, or sign in — every + request and response lands here. + + ) : ( + + {entries.map((entry) => ( + + ))} + + )} + + )} + + ); +} + +function LogRow({ entry }: { entry: LogEntry }) { + const level = LEVEL[entry.level]; + const hasDetail = entry.detail !== undefined && entry.detail !== null; + + return ( + + + + {level.tag} + + {entry.label} + + + + {hasDetail && ( + + + detail + + + 
+              {stringify(entry.detail)}
+
+ + + )} + + ); +} + +function stringify(value: unknown): string { + if (value === undefined) return "undefined"; + if (typeof value === "string") return value; + try { + return JSON.stringify(value, null, 2); + } catch { + return String(value); + } +} + +function formatTime(ts: number): string { + const d = new Date(ts); + const hh = String(d.getHours()).padStart(2, "0"); + const mm = String(d.getMinutes()).padStart(2, "0"); + const ss = String(d.getSeconds()).padStart(2, "0"); + const ms = String(d.getMilliseconds()).padStart(3, "0"); + return `${hh}:${mm}:${ss}.${ms}`; +} + +const PANEL_BG = "#16161a"; +const PANEL_BORDER = "rgba(255, 255, 255, 0.1)"; +const PANEL_TEXT = "rgba(255, 255, 255, 0.92)"; +const PANEL_DIM = "rgba(255, 255, 255, 0.45)"; + +const Dock = styled.aside` + position: fixed; + inset: auto 0 0 0; + z-index: 40; + display: flex; + flex-direction: column; + background: ${PANEL_BG}; + color: ${PANEL_TEXT}; + border-top: var(--stroke-sm, 1px) solid ${PANEL_BORDER}; + box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.28); + font-family: var(--font-family-mono, ui-monospace, monospace); + + /* A hairline of accent at the very top edge, like a live wire. */ + &::before { + content: ""; + position: absolute; + top: -1px; + left: 0; + right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + var(--surface-blue-strong, #0072db) 30%, + #3dd68c 70%, + transparent + ); + opacity: 0.7; + } +`; + +const Bar = styled.button` + all: unset; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-sm, 12px); + padding: var(--spacing-xs, 8px) var(--spacing-lg, 20px); + cursor: pointer; + user-select: none; + + &:hover { + background: rgba(255, 255, 255, 0.04); + } + &:focus-visible { + outline: 2px solid var(--surface-blue-strong, #0072db); + outline-offset: -2px; + } +`; + +const BarLeft = styled.span` + display: inline-flex; + align-items: center; + gap: var(--spacing-xs, 8px); +`; + +const Pulse = styled.span` + width: 7px; + height: 7px; + border-radius: 50%; + background: #3dd68c; + box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.6); + animation: dbg-pulse 2.4s ease-out infinite; + + @keyframes dbg-pulse { + 0% { + box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5); + } + 70% { + box-shadow: 0 0 0 6px rgba(61, 214, 140, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); + } + } + + @media (prefers-reduced-motion: reduce) { + animation: none; + } +`; + +const BarTitle = styled.span` + font-size: var(--font-size-xs, 12px); + font-weight: var(--font-weight-semibold, 600); + letter-spacing: 0.6px; + text-transform: uppercase; +`; + +const Count = styled.span` + font-size: var(--font-size-2xs, 10px); + color: ${PANEL_DIM}; + background: rgba(255, 255, 255, 0.08); + border-radius: 999px; + padding: 1px var(--spacing-2xs, 6px); + font-variant-numeric: tabular-nums; +`; + +const BarRight = styled.span` + font-size: var(--font-size-sm, 13px); + color: ${PANEL_DIM}; +`; + +const Body = styled.div` + max-height: min(42vh, 380px); + overflow: auto; + border-top: var(--stroke-xs, 0.5px) solid ${PANEL_BORDER}; +`; + +const Empty = styled.div` + padding: var(--spacing-md, 16px) var(--spacing-lg, 20px); + font-size: var(--font-size-xs, 12px); + color: ${PANEL_DIM}; + line-height: 1.5; +`; + +const List = styled.ol` + list-style: none; + margin: 0; + padding: 0; +`; + +const Row = styled.li` + padding: var(--spacing-xs, 8px) var(--spacing-lg, 20px); + border-top: var(--stroke-xs, 0.5px) solid rgba(255, 255, 255, 0.06); + + &:first-of-type { + border-top: none; + } +`; + +const RowHead = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-sm, 12px); +`; + +const LevelBadge = styled(Badge)` + flex: 0 0 auto; + font-family: var(--font-family-mono, ui-monospace, monospace); + font-variant-numeric: tabular-nums; + letter-spacing: 0.5px; +`; + +const RowLabel = styled.span` + flex: 1; + min-width: 0; + font-size: var(--font-size-xs, 12px); + color: ${PANEL_TEXT}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const Time = styled.span` + flex: 0 0 auto; + font-size: var(--font-size-2xs, 10px); + color: ${PANEL_DIM}; + font-variant-numeric: tabular-nums; +`; + +const DetailTrigger = styled(Collapsible.Trigger)` + display: inline-flex; + align-items: center; + gap: var(--spacing-3xs, 4px); + width: auto; + margin-top: var(--spacing-3xs, 4px); + margin-left: 52px; /* align under the label, clear of the badge */ + padding: 0; + background: transparent; + border: none; + cursor: pointer; + color: ${PANEL_DIM}; + + &:hover { + color: ${PANEL_TEXT}; + } + &:hover span { + text-decoration: none; + } + + [class*="icon"] svg { + width: 14px; + height: 14px; + } + [class*="icon"] { + width: auto; + height: auto; + color: currentColor; + } +`; + +const DetailTriggerLabel = styled.span` + font-size: var(--font-size-2xs, 10px); + text-transform: uppercase; + letter-spacing: 0.6px; + flex: 0 0 auto; +`; + +const Pre = styled.pre` + margin: var(--spacing-3xs, 4px) 0 var(--spacing-2xs, 6px) 52px; + padding: var(--spacing-sm, 12px); + background: rgba(0, 0, 0, 0.4); + border: var(--stroke-xs, 0.5px) solid ${PANEL_BORDER}; + border-radius: var(--corner-radius-md, 8px); + color: #b8e8ff; + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-2xs, 10px); + line-height: 1.55; + overflow: auto; + max-height: 240px; + white-space: pre; + tab-size: 2; + + code { + font-family: inherit; + } +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/DebugToggle.tsx b/apps/examples/grid-global-accounts-example-app/src/components/DebugToggle.tsx new file mode 100644 index 000000000..22c05493e --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/DebugToggle.tsx @@ -0,0 +1,49 @@ +import styled from "@emotion/styled"; +import { Switch } from "@lightsparkdev/origin"; + +import { useAppState } from "../state/store"; + +/** + * Top-bar control that flips the app between the two polished personas + * (off) and the dev-tools view that surfaces the request/response log and + * raw IDs (on). Defaults to off — the store seeds `debugOn = false`. + */ +export function DebugToggle() { + const { debugOn, toggleDebug } = useAppState(); + + return ( + + + + + ); +} + +const Root = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-xs, 8px); +`; + +const Label = styled.label` + font-size: var(--font-size-xs, 12px); + font-weight: var(--font-weight-medium, 500); + letter-spacing: 0.4px; + text-transform: uppercase; + color: var(--text-tertiary, #8a8a8a); + cursor: pointer; + transition: color 120ms ease; + user-select: none; + + &[data-active="true"] { + color: var(--text-primary, #1a1a1a); + } +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/DismissibleAlert.tsx b/apps/examples/grid-global-accounts-example-app/src/components/DismissibleAlert.tsx new file mode 100644 index 000000000..7c680d6ef --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/DismissibleAlert.tsx @@ -0,0 +1,58 @@ +import styled from "@emotion/styled"; +import { Alert } from "@lightsparkdev/origin"; +import type { ComponentProps } from "react"; + +type DismissibleAlertProps = ComponentProps & { + /** Called when the user clicks the close (✕) button. */ + onClose: () => void; +}; + +/** + * An Origin with a close button. Origin's Alert has no dismiss + * affordance, so we overlay one at the top-right and reserve room for it so a + * long description doesn't run underneath. + */ +export function DismissibleAlert({ + onClose, + ...alertProps +}: DismissibleAlertProps) { + return ( + + + + ✕ + + + ); +} + +const Wrap = styled.div` + position: relative; + /* Higher specificity than Origin's .root class, so it wins reliably. */ + & [role="alert"] { + padding-right: 44px; + } +`; + +const CloseButton = styled.button` + position: absolute; + top: 10px; + right: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + border: none; + background: transparent; + border-radius: var(--corner-radius-sm, 6px); + color: var(--text-tertiary, #8a8a8a); + font-size: 13px; + line-height: 1; + cursor: pointer; + &:hover { + color: var(--text-primary, #1a1a1a); + background: var(--surface-hover, rgba(0, 0, 0, 0.04)); + } +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/PersonaSwitcher.tsx b/apps/examples/grid-global-accounts-example-app/src/components/PersonaSwitcher.tsx new file mode 100644 index 000000000..0e3bd09d0 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/PersonaSwitcher.tsx @@ -0,0 +1,40 @@ +import styled from "@emotion/styled"; +import { Tabs } from "@lightsparkdev/origin"; + +import { useAppState, type Persona } from "../state/store"; + +const PERSONAS: { value: Persona; label: string }[] = [ + { value: "platform", label: "Platform" }, + { value: "customer", label: "Customer" }, +]; + +/** + * Segmented control that toggles between the Platform and Customer views. + * Only one persona is on screen at a time; this drives `persona` in the + * app store. Built on Origin's Tabs so we get the sliding indicator + a + * roving-tabindex keyboard model for free. + */ +export function PersonaSwitcher() { + const { persona, setPersona } = useAppState(); + + return ( + + setPersona(value as Persona)} + > + + {PERSONAS.map(({ value, label }) => ( + + {label} + + ))} + + + + ); +} + +const Root = styled.div` + display: inline-flex; +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/RawExpander.tsx b/apps/examples/grid-global-accounts-example-app/src/components/RawExpander.tsx new file mode 100644 index 000000000..e346573f3 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/RawExpander.tsx @@ -0,0 +1,146 @@ +import styled from "@emotion/styled"; +import { Collapsible } from "@lightsparkdev/origin"; + +import { useAppState } from "../state/store"; + +export interface RawExpanderProps { + /** Raw payload to pretty-print. Anything JSON-serializable (objects, arrays). */ + value: unknown; + /** Trigger label. Defaults to "Raw response". */ + label?: string; +} + +/** + * A reusable disclosure that reveals a raw JSON blob — but only when debug mode + * is on. Off by default and renders nothing when debug is off, so it can be + * dropped next to a polished value without leaking the plumbing into the + * happy-path UI. Collapsed by default when shown. + * + * Used to attach the real API payload behind a value the user already sees + * formatted (e.g. a balance, a connection summary), so the demo can show "here's + * the pretty number, and here's exactly what the API returned". + */ +export function RawExpander({ + value, + label = "Raw response", +}: RawExpanderProps) { + const { debugOn } = useAppState(); + if (!debugOn) return null; + + const json = stringify(value); + + return ( + + + + + + {label} + + + + 
+            {json}
+
+ + + + ); +} + +/** Pretty-print, falling back gracefully on cyclic / non-serializable input. */ +function stringify(value: unknown): string { + if (value === undefined) return "undefined"; + try { + return JSON.stringify(value, null, 2); + } catch { + return String(value); + } +} + +const Root = styled.div` + margin-top: var(--spacing-sm, 12px); +`; + +const Trigger = styled(Collapsible.Trigger)` + /* Override the default Collapsible trigger to a compact, monospace "dev" tag + so it reads as instrumentation rather than primary content. The base + component already rotates its chevron on open via .root[data-open]. */ + display: inline-flex; + align-items: center; + gap: var(--spacing-3xs, 4px); + width: auto; + padding: var(--spacing-3xs, 4px) var(--spacing-xs, 8px); + background: var(--surface-secondary, #f0f0ee); + border: var(--stroke-xs, 0.5px) solid + var(--border-primary, rgba(38, 38, 35, 0.1)); + border-radius: var(--corner-radius-sm, 6px); + cursor: pointer; + color: var(--text-secondary, #555); + + &:hover { + background: var(--surface-tertiary, #c1c0b8); + color: var(--text-primary, #1a1a1a); + } + + /* Suppress the base trigger's underline-on-hover; this reads as a tag. */ + span { + flex: 0 0 auto; + } + &:hover span { + text-decoration: none; + } + + /* Shrink the oversized 24px chevron to fit the compact tag. */ + [class*="icon"] svg { + width: 14px; + height: 14px; + } + [class*="icon"] { + width: auto; + height: auto; + } +`; + +const TriggerInner = styled.span` + display: inline-flex; + align-items: center; + gap: var(--spacing-2xs, 6px); +`; + +const Spark = styled.span` + width: 5px; + height: 5px; + border-radius: 1px; + background: var(--surface-blue-strong, #0072db); + transform: rotate(45deg); +`; + +const TriggerLabel = styled.span` + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-2xs, 10px); + font-weight: var(--font-weight-medium, 500); + letter-spacing: 0.4px; + text-transform: uppercase; +`; + +const Pre = styled.pre` + margin: var(--spacing-2xs, 6px) 0 0; + padding: var(--spacing-sm, 12px); + /* Fixed dark "terminal" surface, not the mode-flipping --surface-inverse: + * the light-green text would vanish on its near-white value in dark mode. */ + background: #16161a; + color: #d6f7c2; + border-radius: var(--corner-radius-md, 8px); + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-2xs, 10px); + line-height: 1.55; + overflow: auto; + max-height: 280px; + white-space: pre; + tab-size: 2; + + code { + font-family: inherit; + } +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/Shell.tsx b/apps/examples/grid-global-accounts-example-app/src/components/Shell.tsx new file mode 100644 index 000000000..944ae9748 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/Shell.tsx @@ -0,0 +1,137 @@ +import styled from "@emotion/styled"; +import { Badge, Logo } from "@lightsparkdev/origin"; +import { type ReactNode } from "react"; + +import { useAppState } from "../state/store"; +import { ContextChip } from "./ContextChip"; +import { DebugDrawer } from "./DebugDrawer"; +import { DebugToggle } from "./DebugToggle"; +import { PersonaSwitcher } from "./PersonaSwitcher"; + +/** + * App frame: a sticky top bar (brand · persona switcher · debug toggle) over + * a centered content column. View routing happens in `App`; the Shell only + * owns the chrome so each persona view can stay focused on its own content. + */ +export function Shell({ children }: { children: ReactNode }) { + const { persona, debugOn } = useAppState(); + + return ( + + + + + + Global Accounts + + + + + + + + + + {persona === "platform" ? "Platform" : "Customer"} + + + + + + + {children} + + + {/* Docked dev console — renders only when debugOn, spans both personas. */} + + + ); +} + +const Page = styled.div` + min-height: 100vh; + display: flex; + flex-direction: column; + background: var(--surface-base, #f5f5f7); + color: var(--text-primary, #1a1a1a); + font-family: var(--font-family-sans); +`; + +const TopBar = styled.header` + position: sticky; + top: 0; + z-index: 10; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: var(--spacing-md, 16px); + padding: var(--spacing-sm, 12px) var(--spacing-lg, 24px); + background: var(--surface-primary, #fff); + border-bottom: var(--stroke-xs, 1px) solid var(--border-primary, #e6e6e9); + backdrop-filter: saturate(180%) blur(8px); +`; + +const Brand = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-xs, 8px); + min-width: 0; +`; + +const BrandDivider = styled.span` + width: var(--stroke-xs, 1px); + height: 18px; + background: var(--border-primary, #e6e6e9); +`; + +const BrandLabel = styled.span` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-medium, 500); + color: var(--text-secondary, #555); + white-space: nowrap; + letter-spacing: -0.1px; +`; + +const SwitcherSlot = styled.div` + display: flex; + justify-content: center; +`; + +const Controls = styled.div` + display: inline-flex; + align-items: center; + justify-content: flex-end; + gap: var(--spacing-md, 16px); +`; + +const PersonaBadge = styled(Badge)` + /* Hidden on narrow widths; the switcher already names the persona. */ + @media (width <= 640px) { + display: none; + } +`; + +const Content = styled.main` + flex: 1; + display: flex; + justify-content: center; + padding: var(--spacing-2xl, 40px) var(--spacing-lg, 24px) + var(--spacing-4xl, 64px); + + /* Reserve room for the docked debug console so it never hides content; the + console's body scrolls internally, so the collapsed-bar clearance is enough. */ + &[data-debug] { + padding-bottom: var(--spacing-9xl, 96px); + } +`; + +const Column = styled.div` + width: 100%; + max-width: 920px; + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/components/StatusBanner.tsx b/apps/examples/grid-global-accounts-example-app/src/components/StatusBanner.tsx new file mode 100644 index 000000000..f8e883b89 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/components/StatusBanner.tsx @@ -0,0 +1,19 @@ +import { useAppState } from "../state/store"; +import { DismissibleAlert } from "./DismissibleAlert"; + +/** + * The transient, app-wide status line fed by `reporter.status(...)` (e.g. + * "Payment executed.", errors), shown at the top of each persona view and + * dismissable — clicking ✕ clears it via `clearStatus`. + */ +export function StatusBanner() { + const { status, clearStatus } = useAppState(); + if (!status) return null; + return ( + + ); +} diff --git a/apps/examples/grid-global-accounts-example-app/src/declarations.d.ts b/apps/examples/grid-global-accounts-example-app/src/declarations.d.ts new file mode 100644 index 000000000..85b884cbc --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/declarations.d.ts @@ -0,0 +1,15 @@ +// tsc resolves @lightsparkdev/origin's component imports against its source +// files (the package's `main` points at src/index.ts), so when we compile +// this app it walks into Origin's *.module.scss imports. Origin ships its +// own scss shim under its src/declarations.d.ts, but TypeScript only picks +// up .d.ts files inside the current compilation root — we need our own. + +declare module "*.module.scss" { + const classes: { readonly [key: string]: string }; + export default classes; +} + +declare module "*.module.css" { + const classes: { readonly [key: string]: string }; + export default classes; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-external-account.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-external-account.test.ts new file mode 100644 index 000000000..58acbd138 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-external-account.test.ts @@ -0,0 +1,179 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { + createCustomerExternalAccount, + listCustomerExternalAccounts, +} from "../money"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), + apiPost: vi.fn(), +})); +import { apiGet, apiPost } from "../../api-client"; +const mockGet = vi.mocked(apiGet); +const mockPost = vi.mocked(apiPost); + +beforeEach(() => { + mockGet.mockReset(); + mockPost.mockReset(); +}); + +describe("createCustomerExternalAccount", () => { + it("POSTs /customers/external-accounts with customerId + USD bank body", async () => { + const { reporter } = createCollectingReporter(); + mockPost.mockResolvedValueOnce({ + status: 200, + data: { id: "ExternalAccount:ext1" }, + }); + + const id = await createCustomerExternalAccount(reporter, auth, { + customerId: "Customer:c1", + accountNumber: "000123456789", + routingNumber: "021000021", + beneficiaryName: "Ada Lovelace", + }); + + expect(id).toBe("ExternalAccount:ext1"); + expect(mockPost).toHaveBeenCalledTimes(1); + const [, path, body] = mockPost.mock.calls[0]; + expect(path).toBe("/customers/external-accounts"); + const sent = body as Record; + expect(sent.customerId).toBe("Customer:c1"); + expect(sent.currency).toBe("USD"); + const info = sent.accountInfo as Record; + expect(info.accountType).toBe("USD_ACCOUNT"); + expect(info.accountNumber).toBe("000123456789"); + expect(info.routingNumber).toBe("021000021"); + expect((info.beneficiary as Record).fullName).toBe( + "Ada Lovelace", + ); + }); + + it("trims inputs and requires a customer + bank fields", async () => { + const { reporter } = createCollectingReporter(); + await expect( + createCustomerExternalAccount(reporter, auth, { + customerId: " ", + accountNumber: "000123456789", + routingNumber: "021000021", + }), + ).rejects.toThrow(/customer/i); + await expect( + createCustomerExternalAccount(reporter, auth, { + customerId: "Customer:c1", + accountNumber: " ", + routingNumber: "021000021", + }), + ).rejects.toThrow(/account number/i); + expect(mockPost).not.toHaveBeenCalled(); + }); + + it("throws when the create response has no id", async () => { + const { reporter } = createCollectingReporter(); + mockPost.mockResolvedValueOnce({ status: 200, data: {} }); + await expect( + createCustomerExternalAccount(reporter, auth, { + customerId: "Customer:c1", + accountNumber: "000123456789", + routingNumber: "021000021", + }), + ).rejects.toThrow(/no id/i); + }); +}); + +describe("listCustomerExternalAccounts", () => { + it("GETs /customers/external-accounts with customerId + currency and parses labels", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ + data: [ + { + id: "ExternalAccount:ext1", + currency: "USD", + accountInfo: { + accountType: "USD_ACCOUNT", + accountNumber: "123456789", + }, + }, + { + id: "ExternalAccount:ext2", + currency: "USD", + accountInfo: { + accountType: "USD_ACCOUNT", + accountNumber: "987654321", + }, + }, + ], + hasMore: false, + }); + + const rows = await listCustomerExternalAccounts( + reporter, + auth, + "Customer:c1", + "USD", + ); + + expect(mockGet).toHaveBeenCalledTimes(1); + const [, path] = mockGet.mock.calls[0]; + expect(path).toBe( + "/customers/external-accounts?customerId=Customer%3Ac1¤cy=USD", + ); + expect(rows).toEqual([ + { id: "ExternalAccount:ext1", label: "USD •••6789" }, + { id: "ExternalAccount:ext2", label: "USD •••4321" }, + ]); + }); + + it("omits the currency query param when not supplied", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + + await listCustomerExternalAccounts(reporter, auth, "Customer:c1"); + + const [, path] = mockGet.mock.calls[0]; + expect(path).toBe("/customers/external-accounts?customerId=Customer%3Ac1"); + }); + + it("skips rows without an id and tolerates a null/empty response", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ + data: [ + { currency: "USD" }, + { id: "ExternalAccount:ok", currency: "USD" }, + ], + hasMore: false, + }); + + const rows = await listCustomerExternalAccounts( + reporter, + auth, + "Customer:c1", + ); + expect(rows).toEqual([{ id: "ExternalAccount:ok", label: "USD" }]); + + mockGet.mockResolvedValueOnce(null); + const empty = await listCustomerExternalAccounts( + reporter, + auth, + "Customer:c1", + ); + expect(empty).toEqual([]); + }); + + it("requires a customer id", async () => { + const { reporter } = createCollectingReporter(); + await expect( + listCustomerExternalAccounts(reporter, auth, " "), + ).rejects.toThrow(/customer/i); + expect(mockGet).not.toHaveBeenCalled(); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-internal-accounts.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-internal-accounts.test.ts new file mode 100644 index 000000000..2df61de2b --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/customer-internal-accounts.test.ts @@ -0,0 +1,268 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { + groupCustomerWallets, + listAllInternalAccounts, + parseInternalAccount, + type ParsedInternalAccount, +} from "../customer"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), +})); +import { apiGet } from "../../api-client"; +const mockGet = vi.mocked(apiGet); + +// Reset call history + queued resolutions between tests so the multi-page tests +// (which assert exact call counts) don't see earlier tests' calls or leftovers. +beforeEach(() => { + mockGet.mockReset(); +}); + +/** Convenience builder for a parsed account in grouping tests. */ +function acct( + over: Partial & { customerId: string }, +): ParsedInternalAccount { + return { + id: `InternalAccount:${Math.random().toString(36).slice(2)}`, + type: "INTERNAL_FIAT", + status: "ACTIVE", + amount: 0, + currency: { code: "USD", decimals: 2 }, + ...over, + }; +} + +describe("parseInternalAccount", () => { + it("maps id, customerId, type, status, and balance", () => { + const row = { + id: "InternalAccount:1", + customerId: "Customer:abc", + type: "EMBEDDED_WALLET", + status: "ACTIVE", + balance: { amount: 123456, currency: { code: "USDB", decimals: 6 } }, + }; + expect(parseInternalAccount(row)).toEqual({ + id: "InternalAccount:1", + customerId: "Customer:abc", + type: "EMBEDDED_WALLET", + status: "ACTIVE", + amount: 123456, + currency: { code: "USDB", decimals: 6 }, + }); + }); + + it("treats a missing customerId as platform-owned (empty string)", () => { + const out = parseInternalAccount({ + id: "InternalAccount:2", + type: "INTERNAL_FIAT", + balance: { amount: 1, currency: { code: "USD" } }, + }); + expect(out?.customerId).toBe(""); + }); + + it("defaults a missing amount to 0 and currency to {}", () => { + expect(parseInternalAccount({ id: "InternalAccount:3" })).toEqual({ + id: "InternalAccount:3", + customerId: "", + type: "", + status: "", + amount: 0, + currency: {}, + }); + }); + + it("returns null for rows without a usable id", () => { + expect(parseInternalAccount({ balance: { amount: 1 } })).toBeNull(); + expect(parseInternalAccount(null)).toBeNull(); + expect(parseInternalAccount("nope")).toBeNull(); + }); +}); + +describe("groupCustomerWallets", () => { + it("groups by customerId into one wallet row each", () => { + const out = groupCustomerWallets([ + acct({ customerId: "Customer:1", type: "EMBEDDED_WALLET", amount: 100 }), + acct({ customerId: "Customer:2", type: "EMBEDDED_WALLET", amount: 200 }), + ]); + expect(out.map((w) => w.customerId).sort()).toEqual([ + "Customer:1", + "Customer:2", + ]); + }); + + it("drops platform-owned accounts (empty customerId)", () => { + const out = groupCustomerWallets([ + acct({ customerId: "", type: "INTERNAL_FIAT", amount: 999 }), + acct({ customerId: "Customer:1", type: "EMBEDDED_WALLET", amount: 50 }), + ]); + expect(out).toHaveLength(1); + expect(out[0].customerId).toBe("Customer:1"); + }); + + it("keeps a USDB account as a customer wallet even without the embedded type", () => { + const out = groupCustomerWallets([ + acct({ + customerId: "Customer:1", + type: "INTERNAL_CRYPTO", + currency: { code: "USDB", decimals: 6 }, + amount: 7, + }), + ]); + expect(out).toHaveLength(1); + expect(out[0].amount).toBe(7); + }); + + it("omits a customer with no wallet account (only non-USDB fiat)", () => { + const out = groupCustomerWallets([ + acct({ + customerId: "Customer:1", + type: "INTERNAL_FIAT", + currency: { code: "EUR", decimals: 2 }, + }), + ]); + expect(out).toEqual([]); + }); + + it("picks the embedded-wallet account when a customer has several candidates", () => { + const out = groupCustomerWallets([ + acct({ + id: "InternalAccount:usdb", + customerId: "Customer:1", + type: "INTERNAL_CRYPTO", + currency: { code: "USDB", decimals: 6 }, + amount: 1, + }), + acct({ + id: "InternalAccount:wallet", + customerId: "Customer:1", + type: "EMBEDDED_WALLET", + currency: { code: "USDB", decimals: 6 }, + amount: 500, + }), + ]); + expect(out).toHaveLength(1); + expect(out[0].accountId).toBe("InternalAccount:wallet"); + expect(out[0].amount).toBe(500); + }); + + it("projects the wallet's accountId, currency, and amount onto the row", () => { + const out = groupCustomerWallets([ + acct({ + id: "InternalAccount:w", + customerId: "Customer:9", + type: "EMBEDDED_WALLET", + currency: { code: "USDB", decimals: 6 }, + amount: 4242, + }), + ]); + expect(out[0]).toEqual({ + customerId: "Customer:9", + accountId: "InternalAccount:w", + currency: { code: "USDB", decimals: 6 }, + amount: 4242, + }); + }); +}); + +describe("listAllInternalAccounts (api-client boundary)", () => { + it("fetches a single page with no customerId filter and parses accounts", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ + data: [ + { + id: "InternalAccount:1", + customerId: "Customer:1", + type: "EMBEDDED_WALLET", + status: "ACTIVE", + balance: { amount: 10, currency: { code: "USDB", decimals: 6 } }, + }, + ], + hasMore: false, + }); + + const out = await listAllInternalAccounts(reporter, auth); + + expect(mockGet).toHaveBeenCalledTimes(1); + expect(mockGet).toHaveBeenCalledWith( + auth, + "/customers/internal-accounts?limit=100", + ); + expect(out.accounts.map((a) => a.id)).toEqual(["InternalAccount:1"]); + expect(out.truncated).toBe(false); + }); + + it("follows hasMore/nextCursor across pages and concatenates accounts", async () => { + const { reporter } = createCollectingReporter(); + mockGet + .mockResolvedValueOnce({ + data: [{ id: "InternalAccount:1", customerId: "Customer:1" }], + hasMore: true, + nextCursor: "cursor-2", + }) + .mockResolvedValueOnce({ + data: [{ id: "InternalAccount:2", customerId: "Customer:2" }], + hasMore: false, + }); + + const out = await listAllInternalAccounts(reporter, auth); + + expect(mockGet).toHaveBeenCalledTimes(2); + expect(mockGet).toHaveBeenNthCalledWith( + 1, + auth, + "/customers/internal-accounts?limit=100", + ); + expect(mockGet).toHaveBeenNthCalledWith( + 2, + auth, + "/customers/internal-accounts?limit=100&cursor=cursor-2", + ); + expect(out.accounts.map((a) => a.id)).toEqual([ + "InternalAccount:1", + "InternalAccount:2", + ]); + expect(out.truncated).toBe(false); + }); + + it("stops at the page cap and flags truncation when the API keeps reporting more", async () => { + const { reporter } = createCollectingReporter(); + // Always claim there's another page, so the cap (10) is what stops us. + mockGet.mockResolvedValue({ + data: [{ id: "InternalAccount:x", customerId: "Customer:x" }], + hasMore: true, + nextCursor: "next", + }); + + const out = await listAllInternalAccounts(reporter, auth); + + expect(mockGet).toHaveBeenCalledTimes(10); + expect(out.truncated).toBe(true); + }); + + it("tolerates a bare array (no envelope)", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce([ + { id: "InternalAccount:1", customerId: "Customer:1" }, + ]); + const out = await listAllInternalAccounts(reporter, auth); + expect(out.accounts.map((a) => a.id)).toEqual(["InternalAccount:1"]); + }); + + it("returns [] for an empty payload", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ data: [] }); + const out = await listAllInternalAccounts(reporter, auth); + expect(out.accounts).toEqual([]); + expect(out.truncated).toBe(false); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/export-wallet.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/export-wallet.test.ts new file mode 100644 index 000000000..c9d997f7b --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/export-wallet.test.ts @@ -0,0 +1,154 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { exportWallet } from "../manage"; + +// Mock the api-client boundary so no real API is hit. `apiPost` is called twice +// by the guided flow: the 202 issue leg, then the signed retry leg. +vi.mock("../../api-client", () => ({ + apiPost: vi.fn(), + apiGet: vi.fn(), + apiDelete: vi.fn(), +})); +import { apiPost } from "../../api-client"; +const mockPost = vi.mocked(apiPost); + +// Production signs the retry with a live session stamp; stub it so the test can +// reach the decrypt path without standing up a real session. +vi.mock("../../turnkey", () => ({ + turnkeyStamp: vi.fn().mockResolvedValue("stamped-sig"), +})); + +// Mock the crypto: a fixed keypair, and decrypt helpers that yield a known +// mnemonic, so the test asserts the wiring (bundle → decrypt → mnemonic) +// without any real enclave material. +const decryptExportBundle = vi.fn(); +const hpkeDecrypt = vi.fn(); +vi.mock("@turnkey/crypto", () => ({ + generateP256KeyPair: () => ({ + privateKey: "priv-hex", + publicKey: "pub-hex", + publicKeyUncompressed: "04-uncompressed-hex", + }), + decryptExportBundle: (...args: unknown[]) => decryptExportBundle(...args), + hpkeDecrypt: (...args: unknown[]) => hpkeDecrypt(...args), +})); + +const MNEMONIC = "legal winner thank year wave sausage worth useful legal"; + +// Build an export bundle whose `data` blob hex-decodes to the signed-data JSON +// (encappedPublic / ciphertext / organizationId), matching the real shape. +function makeBundle(data: { + encappedPublic: string; + ciphertext: string; + organizationId: string; +}): string { + const hex = Array.from(new TextEncoder().encode(JSON.stringify(data))) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); + return JSON.stringify({ + version: "v1.0.0", + data: hex, + dataSignature: "", + enclaveQuorumPublic: "", + }); +} + +function queueGuidedExport(bundle: string) { + mockPost + // Issue leg → 202 challenge. + .mockResolvedValueOnce({ + status: 202, + data: { requestId: "Request:abc", payloadToSign: "payload" }, + }) + // Signed retry → 200 with the sealed bundle. + .mockResolvedValueOnce({ + status: 200, + data: { id: "InternalAccount:1", encryptedWalletCredentials: bundle }, + }); +} + +beforeEach(() => { + mockPost.mockReset(); + decryptExportBundle.mockReset(); + hpkeDecrypt.mockReset(); +}); + +describe("exportWallet", () => { + it("sandbox: HPKE-decrypts the bundle and returns the mnemonic", async () => { + const { reporter } = createCollectingReporter(); + const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", + }; + const bundle = makeBundle({ + encappedPublic: "0a0b", + ciphertext: "0c0d", + organizationId: "org-123", + }); + queueGuidedExport(bundle); + hpkeDecrypt.mockReturnValue(new TextEncoder().encode(MNEMONIC)); + + const out = await exportWallet(reporter, auth, "InternalAccount:1"); + + // Sandbox bypasses enclave attestation: hpkeDecrypt, not decryptExportBundle. + expect(decryptExportBundle).not.toHaveBeenCalled(); + expect(hpkeDecrypt).toHaveBeenCalledWith( + expect.objectContaining({ receiverPriv: "priv-hex" }), + ); + expect(out.mnemonic).toBe(MNEMONIC); + // Raw guided result is preserved for the debug log. + expect(out.retried).toMatchObject({ encryptedWalletCredentials: bundle }); + }); + + it("production: verifies via decryptExportBundle with the org id from the bundle", async () => { + const { reporter } = createCollectingReporter(); + const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "production", + }; + const bundle = makeBundle({ + encappedPublic: "0a0b", + ciphertext: "0c0d", + organizationId: "org-xyz", + }); + queueGuidedExport(bundle); + decryptExportBundle.mockResolvedValue(MNEMONIC); + + const out = await exportWallet(reporter, auth, "InternalAccount:1"); + + expect(hpkeDecrypt).not.toHaveBeenCalled(); + expect(decryptExportBundle).toHaveBeenCalledWith({ + exportBundle: bundle, + embeddedKey: "priv-hex", + organizationId: "org-xyz", + returnMnemonic: true, + }); + expect(out.mnemonic).toBe(MNEMONIC); + }); + + it("throws when the export response has no sealed bundle", async () => { + const { reporter } = createCollectingReporter(); + const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", + }; + mockPost + .mockResolvedValueOnce({ + status: 202, + data: { requestId: "Request:abc", payloadToSign: "payload" }, + }) + .mockResolvedValueOnce({ + status: 200, + data: { id: "InternalAccount:1" }, + }); + + await expect( + exportWallet(reporter, auth, "InternalAccount:1"), + ).rejects.toThrow(/encryptedWalletCredentials/); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fetch-balance.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fetch-balance.test.ts new file mode 100644 index 000000000..2f79719bd --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fetch-balance.test.ts @@ -0,0 +1,106 @@ +import { describe, expect, it, vi } from "vitest"; + +import type { ApiAuth } from "../../api-client"; +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import { formatMoney } from "../../lib/format-money"; +import { fetchBalance, mapBalanceRow } from "../customer"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), +})); +import { apiGet } from "../../api-client"; +const mockGet = vi.mocked(apiGet); + +describe("mapBalanceRow", () => { + it("pulls amount + currency from `balance` (not the top level)", () => { + // The Grid internal-account shape: the currency object (with `decimals`) + // lives INSIDE `balance`, not at the top level. + const row = { + id: "InternalAccount:abc", + balance: { amount: 3_000_000, currency: { code: "USDB", decimals: 6 } }, + }; + expect(mapBalanceRow(row)).toEqual({ + id: "InternalAccount:abc", + currency: { code: "USDB", decimals: 6 }, + balance: 3_000_000, + }); + }); + + it("renders 3 USDB (3,000,000 minor, 6 decimals) as 3, not 30,000", () => { + const mapped = mapBalanceRow({ + id: "InternalAccount:abc", + balance: { amount: 3_000_000, currency: { code: "USDB", decimals: 6 } }, + }); + const out = formatMoney(mapped.balance, mapped.currency); + expect(out).toBe("3.000000 USDB"); + expect(out).not.toContain("30,000"); + }); + + it("tolerates a bare-number balance (no currency block)", () => { + expect(mapBalanceRow({ id: "InternalAccount:x", balance: 4200 })).toEqual({ + id: "InternalAccount:x", + currency: undefined, + balance: 4200, + }); + }); + + it("defaults a missing/odd balance to 0", () => { + expect(mapBalanceRow({ id: "InternalAccount:y" })).toEqual({ + id: "InternalAccount:y", + currency: undefined, + balance: 0, + }); + expect( + mapBalanceRow({ id: "InternalAccount:z", balance: { currency: {} } }), + ).toEqual({ id: "InternalAccount:z", currency: {}, balance: 0 }); + }); +}); + +describe("fetchBalance (api-client boundary)", () => { + it("maps each account row's amount + currency from `balance`", async () => { + const { reporter } = createCollectingReporter(); + const raw = { + data: [ + { + id: "InternalAccount:1", + balance: { + amount: 3_000_000, + currency: { code: "USDB", decimals: 6 }, + }, + }, + ], + }; + mockGet.mockResolvedValueOnce(raw); + + const { rows } = await fetchBalance(reporter, auth, "Customer:c1"); + + expect(mockGet).toHaveBeenCalledWith( + auth, + "/customers/internal-accounts?customerId=Customer%3Ac1", + ); + expect(rows).toEqual([ + { + id: "InternalAccount:1", + currency: { code: "USDB", decimals: 6 }, + balance: 3_000_000, + }, + ]); + expect(formatMoney(rows[0].balance, rows[0].currency)).toBe( + "3.000000 USDB", + ); + }); + + it("throws when the customer id is blank", async () => { + const { reporter } = createCollectingReporter(); + await expect(fetchBalance(reporter, auth, " ")).rejects.toThrow( + "Customer ID is required.", + ); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fund-customer.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fund-customer.test.ts new file mode 100644 index 000000000..110e77833 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/fund-customer.test.ts @@ -0,0 +1,319 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { + fundCustomerFromPlatform, + pollTransaction, + type Sleep, +} from "../money"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), + apiPost: vi.fn(), +})); +import { apiGet, apiPost } from "../../api-client"; +const mockGet = vi.mocked(apiGet); +const mockPost = vi.mocked(apiPost); + +// A sleep that never actually waits — keeps the poll loop synchronous in tests. +const noSleep: Sleep = () => Promise.resolve(); + +beforeEach(() => { + mockGet.mockReset(); + mockPost.mockReset(); +}); + +describe("fundCustomerFromPlatform — request shaping", () => { + it("builds the RECEIVING-locked quote body with platform source + customer destination", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) // quote + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); // execute + mockGet.mockResolvedValueOnce({ + id: "Transaction:t1", + status: "COMPLETED", + }); + + await fundCustomerFromPlatform( + reporter, + auth, + { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 2500, + }, + { poll: { sleep: noSleep } }, + ); + + // First POST is the quote with the exact reference shape. + expect(mockPost).toHaveBeenNthCalledWith(1, auth, "/quotes", { + source: { sourceType: "ACCOUNT", accountId: "InternalAccount:fund" }, + destination: { + destinationType: "ACCOUNT", + accountId: "InternalAccount:cust", + }, + lockedCurrencySide: "RECEIVING", + lockedCurrencyAmount: 2500, + }); + }); + + it("executes with an EMPTY body and NO Grid-Wallet-Signature header", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); + mockGet.mockResolvedValueOnce({ status: "COMPLETED" }); + + await fundCustomerFromPlatform( + reporter, + auth, + { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 100, + }, + { poll: { sleep: noSleep } }, + ); + + // Second POST is the execute: path includes the quote id, body is {} and + // there is NO fourth (extraHeaders) argument — i.e. no signature header. + const executeCall = mockPost.mock.calls[1]; + expect(executeCall[1]).toBe("/quotes/Quote%3Aq1/execute"); + expect(executeCall[2]).toEqual({}); + expect(executeCall[3]).toBeUndefined(); + }); + + it("trims ids and rejects a non-positive amount before calling the API", async () => { + const { reporter } = createCollectingReporter(); + await expect( + fundCustomerFromPlatform(reporter, auth, { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 0, + }), + ).rejects.toThrow(/amount/i); + expect(mockPost).not.toHaveBeenCalled(); + }); + + it("requires a funding account and a customer account", async () => { + const { reporter } = createCollectingReporter(); + await expect( + fundCustomerFromPlatform(reporter, auth, { + fundingAccountId: " ", + destinationAccountId: "InternalAccount:cust", + amountMinor: 100, + }), + ).rejects.toThrow(/funding account/i); + await expect( + fundCustomerFromPlatform(reporter, auth, { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "", + amountMinor: 100, + }), + ).rejects.toThrow(/internal account/i); + expect(mockPost).not.toHaveBeenCalled(); + }); +}); + +describe("fundCustomerFromPlatform — orchestration result", () => { + it("returns quoteId, transactionId, and the terminal COMPLETED status", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q9" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t9" }, + }); + mockGet.mockResolvedValueOnce({ + id: "Transaction:t9", + status: "COMPLETED", + }); + + const out = await fundCustomerFromPlatform( + reporter, + auth, + { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 500, + }, + { poll: { sleep: noSleep } }, + ); + + expect(out.quoteId).toBe("Quote:q9"); + expect(out.transactionId).toBe("Transaction:t9"); + expect(out.status).toBe("COMPLETED"); + }); + + it("surfaces a FAILED terminal status without throwing", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); + mockGet.mockResolvedValueOnce({ status: "FAILED" }); + + const out = await fundCustomerFromPlatform( + reporter, + auth, + { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 500, + }, + { poll: { sleep: noSleep } }, + ); + + expect(out.status).toBe("FAILED"); + }); + + it("throws when execute returns no transactionId", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ status: 200, data: {} }); + + await expect( + fundCustomerFromPlatform( + reporter, + auth, + { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 500, + }, + { poll: { sleep: noSleep } }, + ), + ).rejects.toThrow(/transactionId/i); + }); +}); + +describe("fundCustomerFromPlatform — onStage sequence", () => { + const baseParams = { + fundingAccountId: "InternalAccount:fund", + destinationAccountId: "InternalAccount:cust", + amountMinor: 500, + }; + + it("fires quoting → executing → processing → completed on a COMPLETED txn", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); + mockGet.mockResolvedValueOnce({ status: "COMPLETED" }); + + const stages: string[] = []; + await fundCustomerFromPlatform(reporter, auth, baseParams, { + poll: { sleep: noSleep }, + onStage: (s) => stages.push(s), + }); + + expect(stages).toEqual(["quoting", "executing", "processing", "completed"]); + }); + + it("ends with failed on a FAILED txn", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); + mockGet.mockResolvedValueOnce({ status: "FAILED" }); + + const stages: string[] = []; + await fundCustomerFromPlatform(reporter, auth, baseParams, { + poll: { sleep: noSleep }, + onStage: (s) => stages.push(s), + }); + + expect(stages).toEqual(["quoting", "executing", "processing", "failed"]); + }); + + it("stays at processing (no terminal stage) when the poll times out", async () => { + const { reporter } = createCollectingReporter(); + mockPost + .mockResolvedValueOnce({ status: 200, data: { id: "Quote:q1" } }) + .mockResolvedValueOnce({ + status: 200, + data: { transactionId: "Transaction:t1" }, + }); + mockGet.mockResolvedValue({ status: "PROCESSING" }); + + const stages: string[] = []; + await fundCustomerFromPlatform(reporter, auth, baseParams, { + poll: { sleep: noSleep, intervalMs: 10, timeoutMs: 25 }, + onStage: (s) => stages.push(s), + }); + + expect(stages).toEqual(["quoting", "executing", "processing"]); + }); +}); + +describe("pollTransaction", () => { + it("polls GET /transactions/{id} and resolves on the first COMPLETED", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ status: "COMPLETED" }); + + const out = await pollTransaction(reporter, auth, "Transaction:abc", { + sleep: noSleep, + }); + + expect(mockGet).toHaveBeenCalledWith( + auth, + "/transactions/Transaction%3Aabc", + ); + expect(out.status).toBe("COMPLETED"); + expect(mockGet).toHaveBeenCalledTimes(1); + }); + + it("keeps polling through PENDING/PROCESSING until a terminal status", async () => { + const { reporter } = createCollectingReporter(); + mockGet + .mockResolvedValueOnce({ status: "PENDING" }) + .mockResolvedValueOnce({ status: "PROCESSING" }) + .mockResolvedValueOnce({ status: "COMPLETED" }); + + const out = await pollTransaction(reporter, auth, "Transaction:abc", { + sleep: noSleep, + intervalMs: 1, + timeoutMs: 1000, + }); + + expect(mockGet).toHaveBeenCalledTimes(3); + expect(out.status).toBe("COMPLETED"); + }); + + it("returns the last-seen status when the timeout elapses (non-terminal)", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValue({ status: "PROCESSING" }); + + const out = await pollTransaction(reporter, auth, "Transaction:abc", { + sleep: noSleep, + intervalMs: 10, + timeoutMs: 25, + }); + + // Polls at t=0, 10, 20 (next would exceed 25), then gives up. + expect(out.status).toBe("PROCESSING"); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/login-decision.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/login-decision.test.ts new file mode 100644 index 000000000..0395c89fb --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/login-decision.test.ts @@ -0,0 +1,137 @@ +import { describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { + decideLogin, + existingCredentialFor, + parseCredentials, +} from "../login-decision"; +import { signInEmailOtp, type EmailOtpSignInDeps } from "../email-otp"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "production", +}; + +describe("parseCredentials", () => { + it("unwraps the { data: [...] } envelope the API returns", () => { + const raw = { data: [{ id: "c1", type: "EMAIL_OTP" }] }; + expect(parseCredentials(raw)).toEqual([{ id: "c1", type: "EMAIL_OTP" }]); + }); + + it("tolerates a bare array", () => { + const raw = [{ id: "c1", type: "OAUTH" }]; + expect(parseCredentials(raw)).toEqual([{ id: "c1", type: "OAUTH" }]); + }); + + it("returns [] for a missing/empty payload (loading state)", () => { + expect(parseCredentials(null)).toEqual([]); + expect(parseCredentials(undefined)).toEqual([]); + expect(parseCredentials({})).toEqual([]); + }); +}); + +describe("existingCredentialFor", () => { + const creds = [ + { id: "otp-1", type: "EMAIL_OTP" }, + { id: "oauth-1", type: "OAUTH" }, + ]; + + it("maps each method to the matching credential type", () => { + expect(existingCredentialFor(creds, "email_otp")?.id).toBe("otp-1"); + expect(existingCredentialFor(creds, "oauth")?.id).toBe("oauth-1"); + expect(existingCredentialFor(creds, "passkey")).toBeUndefined(); + }); + + it("ignores credentials without a usable id", () => { + const broken = [{ id: "", type: "EMAIL_OTP" }]; + expect(existingCredentialFor(broken, "email_otp")).toBeUndefined(); + }); +}); + +describe("decideLogin", () => { + it("authenticates with the existing credential id when one exists", () => { + const creds = [{ id: "otp-1", type: "EMAIL_OTP" }]; + expect(decideLogin(creds, "email_otp")).toEqual({ + action: "authenticate", + credId: "otp-1", + }); + }); + + it("creates when no credential of that method exists", () => { + const creds = [{ id: "oauth-1", type: "OAUTH" }]; + expect(decideLogin(creds, "email_otp")).toEqual({ action: "create" }); + expect(decideLogin([], "email_otp")).toEqual({ action: "create" }); + }); +}); + +describe("signInEmailOtp (create-vs-authenticate routing)", () => { + it("authenticates with the existing credential id and does NOT create", async () => { + const { reporter } = createCollectingReporter(); + const create = vi.fn(); + const login = vi + .fn() + .mockResolvedValue({ leg1: {}, session: { id: "sess-1" } }); + const deps = { create, login } as unknown as EmailOtpSignInDeps; + + const session = await signInEmailOtp( + reporter, + auth, + "acct-1", + "000000", + "existing-otp-cred", + deps, + ); + + expect(create).not.toHaveBeenCalled(); + expect(login).toHaveBeenCalledWith( + reporter, + auth, + "existing-otp-cred", + "000000", + ); + expect(session).toEqual({ id: "sess-1" }); + }); + + it("creates a credential first when none exists, then logs in with the new id", async () => { + const { reporter } = createCollectingReporter(); + const create = vi.fn().mockResolvedValue({ id: "new-otp-cred" }); + const login = vi + .fn() + .mockResolvedValue({ leg1: {}, session: { id: "sess-2" } }); + const deps = { create, login } as unknown as EmailOtpSignInDeps; + + const session = await signInEmailOtp( + reporter, + auth, + "acct-1", + "000000", + null, + deps, + ); + + expect(create).toHaveBeenCalledOnce(); + expect(create).toHaveBeenCalledWith(reporter, auth, "acct-1"); + expect(login).toHaveBeenCalledWith( + reporter, + auth, + "new-otp-cred", + "000000", + ); + expect(session).toEqual({ id: "sess-2" }); + }); + + it("throws if create returns no id (does not silently log in)", async () => { + const { reporter } = createCollectingReporter(); + const create = vi.fn().mockResolvedValue({}); + const login = vi.fn(); + const deps = { create, login } as unknown as EmailOtpSignInDeps; + + await expect( + signInEmailOtp(reporter, auth, "acct-1", "000000", null, deps), + ).rejects.toThrow(/no id/i); + expect(login).not.toHaveBeenCalled(); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/otp-step.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/otp-step.test.ts new file mode 100644 index 000000000..fe864303a --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/otp-step.test.ts @@ -0,0 +1,128 @@ +import { describe, expect, it, vi } from "vitest"; + +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import type { ApiAuth } from "../../api-client"; +import { sendOtpChallenge, verifyOtpStep, type OtpStepDeps } from "../otp-step"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +function makeDeps() { + const requestChallenge = vi.fn().mockResolvedValue("bundle-from-challenge"); + const runVerify = vi + .fn() + .mockResolvedValue({ leg1: {}, session: { id: "sess-1" } }); + const deps = { requestChallenge, runVerify } as unknown as OtpStepDeps; + return { requestChallenge, runVerify, deps }; +} + +describe("EMAIL_OTP two-step sign-in (challenge decoupled from verify)", () => { + it("sendOtpChallenge fires the challenge exactly once and returns the bundle", async () => { + const { reporter } = createCollectingReporter(); + const { requestChallenge, runVerify, deps } = makeDeps(); + + const next = await sendOtpChallenge(reporter, auth, "otp-cred", deps); + + expect(requestChallenge).toHaveBeenCalledOnce(); + expect(requestChallenge).toHaveBeenCalledWith(reporter, auth, "otp-cred"); + expect(next).toEqual({ + status: "awaiting_code", + targetBundle: "bundle-from-challenge", + }); + // Sending the challenge must not verify anything. + expect(runVerify).not.toHaveBeenCalled(); + }); + + it("verifyOtpStep never issues a challenge — it only runs verify against the cached bundle", async () => { + const { reporter } = createCollectingReporter(); + const { requestChallenge, runVerify, deps } = makeDeps(); + + const session = await verifyOtpStep( + reporter, + auth, + "otp-cred", + "bundle-from-challenge", + "000000", + deps, + ); + + expect(requestChallenge).not.toHaveBeenCalled(); + expect(runVerify).toHaveBeenCalledOnce(); + expect(runVerify).toHaveBeenCalledWith( + reporter, + auth, + "otp-cred", + "bundle-from-challenge", + "000000", + ); + expect(session).toEqual({ id: "sess-1" }); + }); + + it("a full send → verify only sends ONE OTP; a verify retry sends none", async () => { + const { reporter } = createCollectingReporter(); + const { requestChallenge, runVerify, deps } = makeDeps(); + + // Step 1: explicit Send. + const step = await sendOtpChallenge(reporter, auth, "otp-cred", deps); + // Step 2: verify with the bundle from step 1 — a first attempt that fails… + runVerify.mockRejectedValueOnce(new Error("bad code")); + await expect( + verifyOtpStep( + reporter, + auth, + "otp-cred", + step.targetBundle, + "wrong", + deps, + ), + ).rejects.toThrow(/bad code/); + // …then a retry with the SAME bundle succeeds — still no extra challenge. + const session = await verifyOtpStep( + reporter, + auth, + "otp-cred", + step.targetBundle, + "000000", + deps, + ); + + // Exactly one OTP was sent across the whole interaction. + expect(requestChallenge).toHaveBeenCalledOnce(); + expect(runVerify).toHaveBeenCalledTimes(2); + expect(session).toEqual({ id: "sess-1" }); + }); + + it("verifyOtpStep refuses to verify without a challenge bundle", async () => { + const { reporter } = createCollectingReporter(); + const { requestChallenge, runVerify, deps } = makeDeps(); + + await expect( + verifyOtpStep(reporter, auth, "otp-cred", "", "000000", deps), + ).rejects.toThrow(/send the code first/i); + expect(requestChallenge).not.toHaveBeenCalled(); + expect(runVerify).not.toHaveBeenCalled(); + }); + + it("verifyOtpStep requires a code (does not verify an empty OTP)", async () => { + const { reporter } = createCollectingReporter(); + const { runVerify, deps } = makeDeps(); + + await expect( + verifyOtpStep(reporter, auth, "otp-cred", "bundle", " ", deps), + ).rejects.toThrow(/one-time code/i); + expect(runVerify).not.toHaveBeenCalled(); + }); + + it("Resend is just another explicit challenge — one call per click", async () => { + const { reporter } = createCollectingReporter(); + const { requestChallenge, deps } = makeDeps(); + + await sendOtpChallenge(reporter, auth, "otp-cred", deps); // initial Send + await sendOtpChallenge(reporter, auth, "otp-cred", deps); // Resend click + + expect(requestChallenge).toHaveBeenCalledTimes(2); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/platform-funding-accounts.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/platform-funding-accounts.test.ts new file mode 100644 index 000000000..e5b403a64 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/platform-funding-accounts.test.ts @@ -0,0 +1,100 @@ +import { describe, expect, it, vi } from "vitest"; + +import type { ApiAuth } from "../../api-client"; +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import { + listPlatformFundingAccounts, + parsePlatformFundingAccount, +} from "../customer"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), +})); +import { apiGet } from "../../api-client"; +const mockGet = vi.mocked(apiGet); + +describe("parsePlatformFundingAccount", () => { + it("maps an account to {id, amount, currency}", () => { + const row = { + id: "InternalAccount:abc", + balance: { amount: 100_000, currency: { code: "USD", decimals: 2 } }, + }; + expect(parsePlatformFundingAccount(row)).toEqual({ + id: "InternalAccount:abc", + amount: 100_000, + currency: { code: "USD", decimals: 2 }, + }); + }); + + it("defaults a missing amount to 0 and currency to {}", () => { + expect(parsePlatformFundingAccount({ id: "InternalAccount:x" })).toEqual({ + id: "InternalAccount:x", + amount: 0, + currency: {}, + }); + }); + + it("returns null for rows without a usable id", () => { + expect(parsePlatformFundingAccount({ balance: { amount: 1 } })).toBeNull(); + expect(parsePlatformFundingAccount(null)).toBeNull(); + expect(parsePlatformFundingAccount("nope")).toBeNull(); + }); +}); + +describe("listPlatformFundingAccounts (api-client boundary)", () => { + it("queries the platform's own internal accounts and parses the envelope", async () => { + const { reporter } = createCollectingReporter(); + const raw = { + data: [ + { + id: "InternalAccount:1", + balance: { amount: 5000, currency: { code: "USD", decimals: 2 } }, + }, + { + id: "InternalAccount:2", + balance: { amount: 0, currency: { code: "EUR", decimals: 2 } }, + }, + ], + }; + mockGet.mockResolvedValueOnce(raw); + + const out = await listPlatformFundingAccounts(reporter, auth); + + expect(mockGet).toHaveBeenCalledWith(auth, "/platform/internal-accounts"); + expect(out.accounts.map((a) => a.id)).toEqual([ + "InternalAccount:1", + "InternalAccount:2", + ]); + expect(out.raw).toBe(raw); + }); + + it("returns [] for an empty pool so the picker can render an empty state", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ data: [] }); + const out = await listPlatformFundingAccounts(reporter, auth); + expect(out.accounts).toEqual([]); + }); + + it("tolerates a bare array (no envelope)", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce([{ id: "InternalAccount:9" }]); + const out = await listPlatformFundingAccounts(reporter, auth); + expect(out.accounts.map((a) => a.id)).toEqual(["InternalAccount:9"]); + }); + + it("drops rows without an id", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ + data: [{ id: "InternalAccount:1" }, { balance: { amount: 1 } }], + }); + const out = await listPlatformFundingAccounts(reporter, auth); + expect(out.accounts.map((a) => a.id)).toEqual(["InternalAccount:1"]); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts b/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts index 3714ed96e..9050e1a22 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/customer.ts @@ -1,150 +1,438 @@ // Shared setup: create customer, platform config (OTP + branding), balance. +// +// DOM-free operation functions: each takes the platform `auth`, the form values +// it needs, and a `Reporter` to emit request/response log events through, then +// returns its result. The React layer collects the inputs and renders. -import { apiGet, apiPatch, apiPost } from "../api-client"; -import { addLog, bindClick, el, maybeEl } from "../ui"; +import { apiGet, apiPatch, apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; import { setCtxAccount } from "./context"; -// ----- Create customer + Fetch balance ----- +export interface CreateCustomerParams { + platformCustomerId?: string; + fullName?: string; + email?: string; +} -export function wireCustomerFlows(): void { - const createPlatformCustomerId = el( - "create-platform-customer-id", - ); - const createCustomerName = el("create-customer-name"); - const createCustomerEmail = el("create-customer-email"); - const balanceCustomerId = el("balance-customer-id"); - - bindClick( - "btn-create-customer", - "create-customer-status", - "Create Customer", - "Creating customer...", - async () => { - const platformCustomerId = - createPlatformCustomerId.value.trim() || `test-${Date.now()}`; - const fullName = createCustomerName.value.trim() || "Test User"; - const email = createCustomerEmail.value.trim(); - const body: Record = { - customerType: "BUSINESS", - platformCustomerId, - region: "US", - currencies: ["USDB"], - businessInfo: { - legalName: fullName, - taxId: "12-3456789", - incorporatedOn: "2020-01-01", - }, - }; - if (email) body.email = email; - const { data: customer } = await apiPost("/customers", body); - addLog("Create Customer", customer); - const customerId = (customer as Record).id as string; - if (!balanceCustomerId.value) balanceCustomerId.value = customerId; - const accounts = (await apiGet( - `/customers/internal-accounts?customerId=${customerId}¤cy=USDB`, - )) as { data: Array<{ id: string }> }; - addLog("Internal Accounts", accounts); - if (accounts.data && accounts.data.length > 0) { - setCtxAccount(accounts.data[0].id); - return `Customer: ${customerId}\nAccount: ${accounts.data[0].id}\nEmbedded wallet pre-created at customer-create time.`; - } - return `Customer: ${customerId}\nNo USDB account found yet — wallet provisioning may be in progress.`; - }, - ); +export interface CreateCustomerResult { + customer: unknown; + accounts: unknown; + customerId: string; + accountId: string | null; +} + +// ----- Create customer ----- - bindClick( - "btn-fetch-balance", - "balance-status", - "Fetch Balance", - "Fetching balance...", - async () => { - const customerId = balanceCustomerId.value.trim(); - if (!customerId) throw new Error("Customer ID is required."); - const data = (await apiGet( - `/customers/internal-accounts?customerId=${encodeURIComponent(customerId)}`, - )) as { data: Array> }; - addLog("Fetch Balance", data); - return JSON.stringify( - data.data?.map((a) => ({ - id: a.id, - currency: a.currency, - balance: a.balance, - })) ?? [], - null, - 2, - ); +export async function createCustomer( + reporter: Reporter, + auth: ApiAuth, + params: CreateCustomerParams, +): Promise { + const platformCustomerId = + params.platformCustomerId?.trim() || `test-${Date.now()}`; + const fullName = params.fullName?.trim() || "Test User"; + const email = params.email?.trim(); + const body: Record = { + customerType: "BUSINESS", + platformCustomerId, + region: "US", + currencies: ["USDB"], + businessInfo: { + legalName: fullName, + taxId: "12-3456789", + incorporatedOn: "2020-01-01", }, - ); + }; + if (email) body.email = email; + reporter.log({ level: "request", label: "POST /customers", detail: body }); + const { data: customer } = await apiPost(auth, "/customers", body); + reporter.log({ + level: "response", + label: "Create Customer", + detail: customer, + }); + const customerId = (customer as Record).id as string; - wirePlatformConfigFlows(); + const accounts = (await apiGet( + auth, + `/customers/internal-accounts?customerId=${customerId}¤cy=USDB`, + )) as { data: Array<{ id: string }> }; + reporter.log({ + level: "response", + label: "Internal Accounts", + detail: accounts, + }); + + let accountId: string | null = null; + if (accounts.data && accounts.data.length > 0) { + accountId = accounts.data[0].id; + setCtxAccount(accountId); + } + return { customer, accounts, customerId, accountId }; } -// ----- Platform config (OTP + branding) — GET to populate, PATCH to save ----- +// ----- All customer internal accounts (one fetch → every customer) ----- -function wirePlatformConfigFlows(): void { - const cfgAppName = maybeEl("cfg-app-name"); - const cfgOtpLength = maybeEl("cfg-otp-length"); - const cfgAlphanumeric = maybeEl("cfg-alphanumeric"); - const cfgExpirationSeconds = maybeEl( - "cfg-expiration-seconds", - ); - const cfgSendFromEmail = maybeEl("cfg-send-from-email"); - const cfgSendFromName = maybeEl("cfg-send-from-name"); - const cfgReplyToEmail = maybeEl("cfg-reply-to-email"); - const cfgLogoUrl = maybeEl("cfg-logo-url"); - - function readConfigForm(): Record { - // Only include fields the user touched (non-empty) so we PATCH a real partial. - const ewc: Record = {}; - if (cfgAppName?.value.trim()) ewc.appName = cfgAppName.value.trim(); - if (cfgOtpLength?.value.trim()) - ewc.otpLength = parseInt(cfgOtpLength.value, 10); - if (cfgAlphanumeric) ewc.alphanumeric = cfgAlphanumeric.checked; - if (cfgExpirationSeconds?.value.trim()) - ewc.expirationSeconds = parseInt(cfgExpirationSeconds.value, 10); - if (cfgSendFromEmail?.value.trim()) - ewc.sendFromEmailAddress = cfgSendFromEmail.value.trim(); - if (cfgSendFromName?.value.trim()) - ewc.sendFromEmailSenderName = cfgSendFromName.value.trim(); - if (cfgReplyToEmail?.value.trim()) - ewc.replyToEmailAddress = cfgReplyToEmail.value.trim(); - if (cfgLogoUrl?.value.trim()) ewc.logoUrl = cfgLogoUrl.value.trim(); - return { embeddedWalletConfig: ewc }; +/** A single internal account projected to the fields the platform table needs. */ +export interface ParsedInternalAccount { + /** LSID, e.g. `InternalAccount:`. */ + id: string; + /** Owning customer's LSID. Empty string means platform-owned. */ + customerId: string; + /** `INTERNAL_FIAT` / `INTERNAL_CRYPTO` / `EMBEDDED_WALLET`, when present. */ + type: string; + /** `ACTIVE` / `PENDING` / `CLOSED` / `FROZEN`, when present. */ + status: string; + /** Balance in minor units (per `currency.decimals`), per `CurrencyAmount.amount`. */ + amount: number; + /** Currency metadata: `{ code, name, symbol, decimals }` (any may be absent). */ + currency: Record; +} + +/** One customer's wallet row, derived from grouping internal accounts by owner. */ +export interface CustomerWallet { + /** Owning customer's LSID. */ + customerId: string; + /** The wallet account's LSID (act-as / fund destination). */ + accountId: string; + /** Currency metadata for the wallet balance. */ + currency: Record; + /** Wallet balance in minor units. */ + amount: number; +} + +export interface ListAllInternalAccountsResult { + accounts: ParsedInternalAccount[]; + /** True if pagination was capped before the API ran out of pages. */ + truncated: boolean; +} + +// Stop after this many pages / accounts so a misbehaving or huge tenant can't +// spin forever; the caller is told (via `truncated`) rather than silently cut. +const MAX_PAGES = 10; +const PAGE_LIMIT = 100; +const MAX_ACCOUNTS = MAX_PAGES * PAGE_LIMIT; + +/** Project a single internal-account row to the fields the table groups on. */ +export function parseInternalAccount( + row: unknown, +): ParsedInternalAccount | null { + if (!row || typeof row !== "object") return null; + const a = row as Record; + const id = typeof a.id === "string" ? a.id : ""; + if (!id) return null; + + const balance = a.balance as Record | undefined; + const amount = + balance && typeof balance.amount === "number" ? balance.amount : 0; + const currency = + balance && balance.currency && typeof balance.currency === "object" + ? (balance.currency as Record) + : {}; + return { + id, + customerId: typeof a.customerId === "string" ? a.customerId : "", + type: typeof a.type === "string" ? a.type : "", + status: typeof a.status === "string" ? a.status : "", + amount, + currency, + }; +} + +/** + * Page `GET /customers/internal-accounts` (no `customerId` — the param is an + * optional filter, see `GridListCustomerInternalAccountsRequestArgs.customer_id` + * in `list_customer_internal_accounts.py`) to return EVERY customer account in + * one sweep. The handler reports `hasMore` / `nextCursor`; we follow the cursor + * until exhausted, capped at `MAX_ACCOUNTS` so we never loop unbounded — if the + * cap is hit we set `truncated` and log it rather than silently dropping pages. + */ +export async function listAllInternalAccounts( + reporter: Reporter, + auth: ApiAuth, +): Promise { + const accounts: ParsedInternalAccount[] = []; + let cursor: string | null = null; + let truncated = false; + + for (let page = 0; page < MAX_PAGES; page++) { + const query = cursor + ? `/customers/internal-accounts?limit=${PAGE_LIMIT}&cursor=${encodeURIComponent( + cursor, + )}` + : `/customers/internal-accounts?limit=${PAGE_LIMIT}`; + const raw = await apiGet(auth, query); + reporter.log({ + level: "response", + label: "GET /customers/internal-accounts", + detail: raw, + }); + + const env = (raw && typeof raw === "object" ? raw : {}) as Record< + string, + unknown + >; + const rows = Array.isArray(raw) + ? raw + : Array.isArray(env.data) + ? env.data + : []; + for (const row of rows) { + const parsed = parseInternalAccount(row); + if (parsed) accounts.push(parsed); + } + + const hasMore = env.hasMore === true; + cursor = typeof env.nextCursor === "string" ? env.nextCursor : null; + if (!hasMore || !cursor) break; + if (page === MAX_PAGES - 1) truncated = true; } - function applyConfigToForm(cfg: unknown): void { - const ewc = (cfg as { embeddedWalletConfig?: Record }) - ?.embeddedWalletConfig; - if (!ewc) return; - if (cfgAppName && typeof ewc.appName === "string") - cfgAppName.value = ewc.appName; - if (cfgOtpLength && typeof ewc.otpLength === "number") - cfgOtpLength.value = String(ewc.otpLength); - if (cfgAlphanumeric && typeof ewc.alphanumeric === "boolean") - cfgAlphanumeric.checked = ewc.alphanumeric; - if (cfgExpirationSeconds && typeof ewc.expirationSeconds === "number") - cfgExpirationSeconds.value = String(ewc.expirationSeconds); - if (cfgSendFromEmail && typeof ewc.sendFromEmailAddress === "string") - cfgSendFromEmail.value = ewc.sendFromEmailAddress; - if (cfgSendFromName && typeof ewc.sendFromEmailSenderName === "string") - cfgSendFromName.value = ewc.sendFromEmailSenderName; - if (cfgReplyToEmail && typeof ewc.replyToEmailAddress === "string") - cfgReplyToEmail.value = ewc.replyToEmailAddress; - if (cfgLogoUrl && typeof ewc.logoUrl === "string") - cfgLogoUrl.value = ewc.logoUrl; + if (truncated) { + reporter.log({ + level: "response", + label: "Internal accounts truncated", + detail: { cappedAt: MAX_ACCOUNTS, returned: accounts.length }, + }); } + return { accounts, truncated }; +} - bindClick("btn-cfg-load", "cfg-status", "Load Config", "Loading…", async () => { - const cfg = await apiGet("/config"); - addLog("GET /config", cfg); - applyConfigToForm(cfg); - return "Config loaded into form."; - }); +/** True for a customer's spendable wallet account (USDB or embedded-wallet). */ +function isCustomerWalletAccount(a: ParsedInternalAccount): boolean { + return ( + a.type === "EMBEDDED_WALLET" || + String((a.currency as { code?: unknown }).code ?? "").toUpperCase() === + "USDB" + ); +} - bindClick("btn-cfg-save", "cfg-status", "Save Config", "Saving…", async () => { - const body = readConfigForm(); - const { data } = await apiPatch("/config", body); - addLog("PATCH /config", data); - return "Config saved."; +/** + * Group internal accounts into one wallet row per customer. Platform-owned + * accounts (empty `customerId`) are dropped, leaving only customer wallets. Of a + * customer's accounts we keep the spendable wallet — the `EMBEDDED_WALLET` / + * USDB account — preferring an explicit `EMBEDDED_WALLET` when several qualify. + * Customers with no wallet account yet are omitted (no row to show a balance on). + */ +export function groupCustomerWallets( + accounts: ParsedInternalAccount[], +): CustomerWallet[] { + const byCustomer = new Map(); + for (const a of accounts) { + if (!a.customerId) continue; // platform-owned + if (!isCustomerWalletAccount(a)) continue; + const existing = byCustomer.get(a.customerId); + // Prefer an explicit embedded wallet when a customer has several candidates. + if ( + !existing || + (existing.type !== "EMBEDDED_WALLET" && a.type === "EMBEDDED_WALLET") + ) { + byCustomer.set(a.customerId, a); + } + } + return [...byCustomer.values()].map((a) => ({ + customerId: a.customerId, + accountId: a.id, + currency: a.currency, + amount: a.amount, + })); +} + +// ----- Platform funding accounts ----- + +/** A platform-owned internal account projected to the funding-picker fields. */ +export interface PlatformFundingAccount { + /** LSID, e.g. `InternalAccount:` — used as the funding `source`. */ + id: string; + /** Balance in minor units (cents / satoshis), per `CurrencyAmount.amount`. */ + amount: number; + /** Currency metadata: `{ code, name, symbol, decimals }` (any may be absent). */ + currency: Record; +} + +/** + * Project a single `GET /platform/internal-accounts` row (an `InternalAccount`, + * see `gen_internal_account_from_entity`) to the funding-picker shape: the LSID + * plus its `balance` (`{ amount, currency }`). Rows without an `id` are dropped. + */ +export function parsePlatformFundingAccount( + row: unknown, +): PlatformFundingAccount | null { + if (!row || typeof row !== "object") return null; + const a = row as Record; + const id = typeof a.id === "string" ? a.id : ""; + if (!id) return null; + + const balance = a.balance as Record | undefined; + const amount = + balance && typeof balance.amount === "number" ? balance.amount : 0; + const currency = + balance && balance.currency && typeof balance.currency === "object" + ? (balance.currency as Record) + : {}; + return { id, amount, currency }; +} + +/** + * List the platform's own (non-customer) internal accounts — the funding pool — + * via `GET /platform/internal-accounts`, which scopes to accounts owned by the + * authenticated platform itself (`is_customers=False` in + * `get_internal_accounts_query`). Unwraps the `{ data: [...] }` envelope + * (`PlatformInternalAccountListResponse`); tolerates a missing/empty payload by + * returning [] so the picker can render an empty state. + */ +export async function listPlatformFundingAccounts( + reporter: Reporter, + auth: ApiAuth, +): Promise<{ accounts: PlatformFundingAccount[]; raw: unknown }> { + const raw = await apiGet(auth, "/platform/internal-accounts"); + reporter.log({ + level: "response", + label: "GET /platform/internal-accounts", + detail: raw, }); + + let rows: unknown[] = []; + if (Array.isArray(raw)) { + rows = raw; + } else if (raw && typeof raw === "object") { + const data = (raw as Record).data; + if (Array.isArray(data)) rows = data; + } + + const accounts = rows + .map(parsePlatformFundingAccount) + .filter((a): a is PlatformFundingAccount => a !== null); + return { accounts, raw }; +} + +// ----- Fetch balance ----- + +/** A wallet balance row: account id, minor-unit amount, and currency block. */ +export interface BalanceRow { + id: unknown; + /** Currency metadata `{ code, name, symbol, decimals }` — drives formatting. */ + currency: unknown; + /** Amount in minor units (per `currency.decimals`), as returned by the API. */ + balance: number; +} + +export interface FetchBalanceResult { + /** Projected rows the wallet UI renders. */ + rows: BalanceRow[]; + /** The unmodified API response, for the debug raw-payload expander. */ + raw: unknown; +} + +/** + * Map one `GET /customers/internal-accounts` row to a wallet balance row. The + * account's `balance` is a `CurrencyAmount` — `{ amount, currency }` where + * `amount` is minor units and `currency` is `{ code, name, symbol, decimals }`. + * So `currency` comes from `balance.currency` (NOT the top level) and `balance` + * is the minor-unit `balance.amount`. Tolerates the fallback where `balance` is + * already a bare number (then no currency block is present). + */ +export function mapBalanceRow(row: Record): BalanceRow { + const balance = row.balance; + if (typeof balance === "number") { + return { id: row.id, currency: undefined, balance }; + } + if (balance && typeof balance === "object") { + const b = balance as Record; + return { + id: row.id, + currency: b.currency, + balance: typeof b.amount === "number" ? b.amount : 0, + }; + } + return { id: row.id, currency: undefined, balance: 0 }; +} + +export async function fetchBalance( + reporter: Reporter, + auth: ApiAuth, + customerId: string, +): Promise { + const id = customerId.trim(); + if (!id) throw new Error("Customer ID is required."); + const data = (await apiGet( + auth, + `/customers/internal-accounts?customerId=${encodeURIComponent(id)}`, + )) as { data: Array> }; + reporter.log({ level: "response", label: "Fetch Balance", detail: data }); + const rows = data.data?.map(mapBalanceRow) ?? []; + return { rows, raw: data }; +} + +// ----- Platform config (OTP + branding) ----- + +export interface PlatformConfigForm { + appName?: string; + otpLength?: number; + alphanumeric?: boolean; + expirationSeconds?: number; + sendFromEmailAddress?: string; + sendFromEmailSenderName?: string; + replyToEmailAddress?: string; + logoUrl?: string; +} + +// GET the platform config and project its embedded-wallet block into the form +// shape the React layer renders. +export async function loadPlatformConfig( + reporter: Reporter, + auth: ApiAuth, +): Promise { + const cfg = await apiGet(auth, "/config"); + reporter.log({ level: "response", label: "GET /config", detail: cfg }); + const ewc = (cfg as { embeddedWalletConfig?: Record }) + ?.embeddedWalletConfig; + const form: PlatformConfigForm = {}; + if (!ewc) return form; + if (typeof ewc.appName === "string") form.appName = ewc.appName; + if (typeof ewc.otpLength === "number") form.otpLength = ewc.otpLength; + if (typeof ewc.alphanumeric === "boolean") + form.alphanumeric = ewc.alphanumeric; + if (typeof ewc.expirationSeconds === "number") + form.expirationSeconds = ewc.expirationSeconds; + if (typeof ewc.sendFromEmailAddress === "string") + form.sendFromEmailAddress = ewc.sendFromEmailAddress; + if (typeof ewc.sendFromEmailSenderName === "string") + form.sendFromEmailSenderName = ewc.sendFromEmailSenderName; + if (typeof ewc.replyToEmailAddress === "string") + form.replyToEmailAddress = ewc.replyToEmailAddress; + if (typeof ewc.logoUrl === "string") form.logoUrl = ewc.logoUrl; + return form; +} + +// PATCH the platform config with only the fields the caller actually set, so we +// send a real partial (mirrors the original "only non-empty fields" behaviour). +export async function savePlatformConfig( + reporter: Reporter, + auth: ApiAuth, + form: PlatformConfigForm, +): Promise { + const ewc: Record = {}; + if (form.appName?.trim()) ewc.appName = form.appName.trim(); + if (typeof form.otpLength === "number" && !Number.isNaN(form.otpLength)) + ewc.otpLength = form.otpLength; + if (typeof form.alphanumeric === "boolean") + ewc.alphanumeric = form.alphanumeric; + if ( + typeof form.expirationSeconds === "number" && + !Number.isNaN(form.expirationSeconds) + ) + ewc.expirationSeconds = form.expirationSeconds; + if (form.sendFromEmailAddress?.trim()) + ewc.sendFromEmailAddress = form.sendFromEmailAddress.trim(); + if (form.sendFromEmailSenderName?.trim()) + ewc.sendFromEmailSenderName = form.sendFromEmailSenderName.trim(); + if (form.replyToEmailAddress?.trim()) + ewc.replyToEmailAddress = form.replyToEmailAddress.trim(); + if (form.logoUrl?.trim()) ewc.logoUrl = form.logoUrl.trim(); + const body = { embeddedWalletConfig: ewc }; + reporter.log({ level: "request", label: "PATCH /config", detail: body }); + const { data } = await apiPatch(auth, "/config", body); + reporter.log({ level: "response", label: "PATCH /config", detail: data }); + return data; } diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts index fc5e88905..c6b7dec1e 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/email-otp.ts @@ -1,34 +1,59 @@ -// EMAIL_OTP lifecycle: create, secure-OTP challenge/verify, add. +// EMAIL_OTP lifecycle: create, secure-OTP challenge/verify, rechallenge, add. +// +// DOM-free operation functions. The secure-OTP code never leaves the client in +// plaintext; the TEK private key stays client-side (no encryptedSessionSigningKey +// is returned). Each function takes the platform `auth`, the values it needs, +// and a `Reporter`, and returns its result. import { generateP256KeyPair } from "@turnkey/crypto"; import { SANDBOX_SIG } from "../config"; -import { apiPost } from "../api-client"; +import { apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; import { buildWalletSignature, sealOtpBundle } from "../turnkey"; import { setSessionKeysFromTek } from "../session"; -import { addLog, bindClick, el } from "../ui"; -import { - requireAccountId, - requireCredentialId, - setCtxCredential, - setCtxSession, -} from "./context"; - -// Secure OTP — works against real Turnkey, which emails a real OTP (sandbox -// uses the fixed 000000). /challenge issues the INIT_OTP and returns the -// enclave's target bundle; Verify HPKE-seals the entered code under it, runs -// /verify first leg (202 + payloadToSign), signs the token with the TEK, and -// runs /verify retry (200 session). The code never leaves the client in -// plaintext; the TEK private key stays client-side (no encryptedSessionSigningKey -// is returned). +import { setCtxCredential, setCtxSession } from "./context"; + +// ----- Create credential ----- + +export async function createEmailOtpCredential( + reporter: Reporter, + auth: ApiAuth, + accountId: string, +): Promise { + const { data } = await apiPost(auth, "/auth/credentials", { + type: "EMAIL_OTP", + accountId, + }); + reporter.log({ level: "response", label: "EMAIL_OTP Create", detail: data }); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return data; +} + +// ----- Secure OTP ----- +// +// /challenge issues the INIT_OTP and returns the enclave's target bundle; verify +// HPKE-seals the entered code under it, runs /verify first leg (202 + +// payloadToSign), signs the token with the TEK, then runs /verify retry (200 +// session). // Request a challenge for `credId` and return the enclave target bundle. -async function requestV3Challenge(credId: string): Promise { +export async function requestV3Challenge( + reporter: Reporter, + auth: ApiAuth, + credId: string, +): Promise { const { data: challengeData } = await apiPost( + auth, `/auth/credentials/${encodeURIComponent(credId)}/challenge`, {}, ); - addLog("V3 Challenge", challengeData); + reporter.log({ + level: "response", + label: "V3 Challenge", + detail: challengeData, + }); const targetBundle = (challengeData as Record) .otpEncryptionTargetBundle as string | undefined; if (!targetBundle) @@ -39,24 +64,36 @@ async function requestV3Challenge(credId: string): Promise { return targetBundle; } +export interface V3VerifyResult { + leg1: unknown; + session: unknown; +} + // Run the two verify legs against `targetBundle` with the entered `otp`, caching -// the TEK as the session signing key on success. Returns a summary string. -async function runV3Verify( +// the TEK as the session signing key on success. +export async function runV3Verify( + reporter: Reporter, + auth: ApiAuth, credId: string, targetBundle: string, otp: string, -): Promise { +): Promise { // Generate a TEK and HPKE-seal the entered OTP under the challenge bundle. const tek = generateP256KeyPair(); const encryptedOtpBundle = sealOtpBundle(targetBundle, tek.publicKey, otp); // First leg → expect 202 with payloadToSign (verificationToken) + requestId. const leg1 = await apiPost( + auth, `/auth/credentials/${encodeURIComponent(credId)}/verify`, { type: "EMAIL_OTP", encryptedOtpBundle }, ); const l1 = (leg1.data ?? {}) as Record; - addLog("V3 Verify leg 1 (expect 202)", { status: leg1.status, ...l1 }); + reporter.log({ + level: "response", + label: "V3 Verify leg 1 (expect 202)", + detail: { status: leg1.status, ...l1 }, + }); const payloadToSign = l1.payloadToSign as string | undefined; const requestId = l1.requestId as string | undefined; if (leg1.status !== 202 || !payloadToSign || !requestId) @@ -71,14 +108,16 @@ async function runV3Verify( // Retry with the signature → expect 200 AuthSession. const leg2 = await apiPost( + auth, `/auth/credentials/${encodeURIComponent(credId)}/verify`, { type: "EMAIL_OTP", encryptedOtpBundle }, { "Grid-Wallet-Signature": signature, "Request-Id": requestId }, ); const session = (leg2.data ?? {}) as Record; - addLog("V3 Verify leg 2 (expect 200 session)", { - status: leg2.status, - ...session, + reporter.log({ + level: "response", + label: "V3 Verify leg 2 (expect 200 session)", + detail: { status: leg2.status, ...session }, }); if (session.id) setCtxSession(session.id as string); // The TEK is now the session's API key (OTP_LOGIN registered it). Cache it as @@ -87,128 +126,98 @@ async function runV3Verify( // MIGRATION (P6): this OTP-TEK caching is the model passkey/oauth login // converge on once the login-family knob is ON — see oauth.ts/passkey.ts. if (leg2.status === 200) setSessionKeysFromTek(tek); - return JSON.stringify({ leg1: leg1.data, session: leg2.data }, null, 2); + return { leg1: leg1.data, session: leg2.data }; } -export function wireEmailOtpFlows(): void { - bindClick( - "btn-email_otp-create", - "email_otp-create-status", - "EMAIL_OTP Create", - "Registering EMAIL_OTP credential...", - async () => { - const { data } = await apiPost("/auth/credentials", { - type: "EMAIL_OTP", - accountId: requireAccountId(), - }); - addLog("EMAIL_OTP Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, - ); +// Guided log in: /challenge → verify legs → cache TEK as session. +export async function loginEmailOtp( + reporter: Reporter, + auth: ApiAuth, + credId: string, + otp: string, +): Promise { + const targetBundle = await requestV3Challenge(reporter, auth, credId); + if (!otp.trim()) throw new Error("OTP code is required."); + return runV3Verify(reporter, auth, credId, targetBundle, otp.trim()); +} - // ----- Guided: Log in (Email OTP) ----- - // - // One click owns the whole chain: /challenge → inline code prompt → - // verify legs → cache TEK as session. Folds the manual challenge + verify - // buttons below into a single opinionated flow. - bindClick( - "btn-email_otp-login", - "email_otp-login-status", - "Email OTP Login", - "Requesting OTP...", - async () => { - const credId = requireCredentialId(); - const targetBundle = await requestV3Challenge(credId); - const codeInput = el("email_otp-v3-code").value.trim(); - // In sandbox the code field is pre-seeded (000000); in production the - // user reads it from the email, so prompt for it inline if blank. - const otp = - codeInput || - ( - window.prompt("Enter the OTP code emailed to the customer:") ?? "" - ).trim(); - if (!otp) throw new Error("OTP code is required."); - return runV3Verify(credId, targetBundle, otp); - }, - ); +// ----- Sign-in entry point (create-vs-authenticate) ----- +// +// The fix for EMAIL_OTP_CREDENTIAL_ALREADY_EXISTS: only create a credential when +// the caller doesn't already have one. If `existingCredId` is provided, we +// authenticate against it directly (challenge → verify) and never POST +// /auth/credentials; otherwise we run the original create + verify ceremony. +// +// The create/login functions are injected so the decision is unit-testable at +// the flow boundary without exercising real Turnkey. +export interface EmailOtpSignInDeps { + create: typeof createEmailOtpCredential; + login: typeof loginEmailOtp; +} - // ----- Manual (advanced): challenge + verify as separate steps ----- - - // Target bundle from the most recent manual V3 challenge + the credential it - // was issued for, so Verify catches a stale/mismatched bundle. - let v3TargetBundle: string | null = null; - let v3TargetBundleCredId: string | null = null; - - bindClick( - "btn-email_otp-v3-challenge", - "email_otp-v3-challenge-status", - "EMAIL_OTP Challenge (V3)", - "Requesting OTP...", - async () => { - const credId = requireCredentialId(); - v3TargetBundle = await requestV3Challenge(credId); - v3TargetBundleCredId = credId; - return "OTP sent. Check the customer's email, enter the code below, then Verify."; - }, - ); +const defaultEmailOtpSignInDeps: EmailOtpSignInDeps = { + create: createEmailOtpCredential, + login: loginEmailOtp, +}; - bindClick( - "btn-email_otp-v3-verify", - "email_otp-v3-verify-status", - "EMAIL_OTP Verify (V3)", - "Verifying...", - async () => { - const credId = requireCredentialId(); - const otp = el("email_otp-v3-code").value.trim(); - if (!otp) throw new Error("OTP code is required."); - if (!v3TargetBundle || v3TargetBundleCredId !== credId) - throw new Error( - "Run Challenge (V3) first to request an OTP + target bundle for this " + - "credential.", - ); - const summary = await runV3Verify(credId, v3TargetBundle, otp); - // One bundle per challenge — force a fresh Challenge for the next run. - v3TargetBundle = null; - v3TargetBundleCredId = null; - return summary; - }, - ); +export async function signInEmailOtp( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + otp: string, + existingCredId: string | null, + deps: EmailOtpSignInDeps = defaultEmailOtpSignInDeps, +): Promise { + let credId = existingCredId; + if (!credId) { + // No existing EMAIL_OTP credential — run the create leg first. + const cred = await deps.create(reporter, auth, accountId); + credId = (cred as { id?: string }).id ?? null; + if (!credId) throw new Error("Create credential returned no id."); + } + const result = await deps.login(reporter, auth, credId, otp); + return result.session; +} - const emailOtpAddRequestId = el("email_otp-add-request-id"); - bindClick( - "btn-email_otp-add-issue", - "email_otp-add-issue-status", - "EMAIL_OTP Add (issue)", - "Issuing add challenge...", - async () => { - const { data } = await apiPost("/auth/credentials", { - type: "EMAIL_OTP", - accountId: requireAccountId(), - }); - addLog("EMAIL_OTP Add (issue)", data); - const d = data as Record; - if (d.requestId) emailOtpAddRequestId.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - "btn-email_otp-add-retry", - "email_otp-add-retry-status", - "EMAIL_OTP Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = emailOtpAddRequestId.value.trim(); - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiPost( - "/auth/credentials", - { type: "EMAIL_OTP", accountId: requireAccountId() }, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("EMAIL_OTP Add (retry)", data); - return JSON.stringify(data, null, 2); - }, +// ----- Add an additional EMAIL_OTP credential (issue → signed retry) ----- + +export async function addEmailOtpIssue( + reporter: Reporter, + auth: ApiAuth, + accountId: string, +): Promise<{ data: unknown; requestId: string | undefined }> { + const { data } = await apiPost(auth, "/auth/credentials", { + type: "EMAIL_OTP", + accountId, + }); + reporter.log({ + level: "response", + label: "EMAIL_OTP Add (issue)", + detail: data, + }); + const d = data as Record; + const requestId = typeof d.requestId === "string" ? d.requestId : undefined; + return { data, requestId }; +} + +export async function addEmailOtpRetry( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + requestId: string, +): Promise { + if (!requestId.trim()) + throw new Error("Request-Id is required — run the issue step first."); + const { data } = await apiPost( + auth, + "/auth/credentials", + { type: "EMAIL_OTP", accountId }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId.trim() }, ); + reporter.log({ + level: "response", + label: "EMAIL_OTP Add (retry)", + detail: data, + }); + return data; } diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/login-decision.ts b/apps/examples/grid-global-accounts-example-app/src/flows/login-decision.ts new file mode 100644 index 000000000..7aac67986 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/login-decision.ts @@ -0,0 +1,104 @@ +// Login decision logic: given a wallet's existing credentials, decide whether a +// sign-in for a given method should AUTHENTICATE with an existing credential or +// CREATE a new one first. +// +// This is the fix for the production EMAIL_OTP bug where Login unconditionally +// ran the create-a-credential ceremony on every sign-in: once a credential of +// that type exists, POST /auth/credentials 400s with +// EMAIL_OTP_CREDENTIAL_ALREADY_EXISTS. The rule is simple — if a credential of +// the chosen method already exists, skip create and authenticate with its id; +// otherwise run the existing create+verify ceremony. +// +// Pure + DOM-free so it can be unit-tested at the flow boundary without touching +// real Turnkey. + +/** The three sign-in methods the wallet supports. */ +export type Method = "email_otp" | "oauth" | "passkey"; + +/** The credential `type` strings the Grid API returns for each method. */ +const TYPE_FOR_METHOD: Record = { + email_otp: "EMAIL_OTP", + oauth: "OAUTH", + passkey: "PASSKEY", +}; + +/** Reverse of `TYPE_FOR_METHOD`: the credential's API `type` → its `Method`. */ +const METHOD_FOR_TYPE: Record = { + EMAIL_OTP: "email_otp", + OAUTH: "oauth", + PASSKEY: "passkey", +}; + +/** + * The `Method` a credential authenticates with, derived from its API `type`, or + * undefined for an unrecognised type. The new login screen iterates the FULL + * credential list (a wallet can hold multiple passkeys / oauth identities), so + * each row maps its own credential to a method rather than collapsing the list + * to one-per-type. + */ +export function methodForCredential( + credential: ExistingCredential, +): Method | undefined { + return credential.type ? METHOD_FOR_TYPE[credential.type] : undefined; +} + +/** True when the wallet already has at least one EMAIL_OTP credential. A wallet + * may hold only one, so "Add Email OTP" is offered only when this is false. */ +export function hasEmailOtpCredential( + credentials: ExistingCredential[], +): boolean { + return Boolean(existingCredentialFor(credentials, "email_otp")); +} + +/** A credential as returned by GET /auth/credentials. */ +export interface ExistingCredential { + id: string; + type?: string; + nickname?: string; + status?: string; +} + +/** The decision for a single method: authenticate with an existing credential + * (skip create), or create a new one first. */ +export type LoginDecision = + | { action: "authenticate"; credId: string } + | { action: "create" }; + +/** + * Pull the credentials array out of a `listCredentials` response. The API wraps + * the list as `{ data: Credential[] }`; we tolerate a bare array or a missing + * payload too so callers don't have to special-case the empty/loading state. + */ +export function parseCredentials(raw: unknown): ExistingCredential[] { + if (Array.isArray(raw)) return raw as ExistingCredential[]; + const data = (raw as { data?: unknown })?.data; + return Array.isArray(data) ? (data as ExistingCredential[]) : []; +} + +/** + * The first existing credential for `method`, or undefined if the wallet has + * none of that type. Credentials without a usable `id` are ignored (they can't + * be authenticated against). + */ +export function existingCredentialFor( + credentials: ExistingCredential[], + method: Method, +): ExistingCredential | undefined { + const wanted = TYPE_FOR_METHOD[method]; + return credentials.find((c) => c.type === wanted && Boolean(c.id)); +} + +/** + * Decide whether signing in with `method` should authenticate against an + * existing credential or create one first. This is the single source of truth + * the Login UI and tests share. + */ +export function decideLogin( + credentials: ExistingCredential[], + method: Method, +): LoginDecision { + const existing = existingCredentialFor(credentials, method); + return existing + ? { action: "authenticate", credId: existing.id } + : { action: "create" }; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts b/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts index 3c86e5e1f..6f003a312 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/manage.ts @@ -1,36 +1,22 @@ -// Shared signed-retry wiring per tab: delete credential / session / export, + -// list credentials / sessions. +// Manage flows: delete credential / session / export (guided issue → sign → +// retry), plus list credentials / sessions. // -// Endpoints are identical for all tabs — inputs come from the shared ctx, and -// the per-tab buttons just visually group each flow under the relevant tab. -// The three flows below are wired once per credential type in a single loop -// (`wireManageFlows`), replacing the previously inlined per-type duplication. -// -// Each action exposes two surfaces: -// - a guided button that owns the whole issue → sign → retry chain in one -// click, pulling the signature from the live session in production and from -// `SANDBOX_SIG` in sandbox; and -// - the raw issue/retry buttons (under the Advanced toggle in index.html) for -// inspecting the 202 `requestId` / `payloadToSign` between legs. +// DOM-free operation functions. The endpoints are identical across credential +// types, so these take the ids + platform `auth` directly. Each guided action +// owns the whole issue → sign → retry chain in one call, pulling the signature +// from the live session in production and from `SANDBOX_SIG` in sandbox; the +// separate issue/retry functions remain for inspecting the 202 between legs. -import { CredType, SANDBOX_SIG } from "../config"; -import { apiDelete, apiGet, apiPost, getMode } from "../api-client"; -import { turnkeyStamp } from "../turnkey"; -import { addLog, bindClick, maybeEl, wireGatedButton } from "../ui"; -import { hasSessionSigningKey, onSessionChange } from "../session"; import { - requireAccountId, - requireCredentialId, - requireSessionId, -} from "./context"; - -// Request-Id inputs are looked up lazily inside the handlers (via `maybeEl`) -// rather than captured eagerly with `el()` at wire time, matching `bindClick`'s -// graceful-skip pattern: a missing element degrades just that one button -// instead of throwing and aborting the rest of `wireManageFlows`. -function requestIdInput(id: string): HTMLInputElement | null { - return maybeEl(id); -} + decryptExportBundle, + generateP256KeyPair, + hpkeDecrypt, +} from "@turnkey/crypto"; + +import { SANDBOX_SIG } from "../config"; +import { apiDelete, apiGet, apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; +import { turnkeyStamp } from "../turnkey"; // A 202-issuing leg: hit the issue endpoint and return its response data, from // which the guided runner pulls `requestId` + `payloadToSign`. @@ -44,9 +30,10 @@ type RetryLeg = ( // magic value, or a real session stamp over the 202's payloadToSign in // production. Throws a clear error if production lacks a payload/session. async function guidedSignature( + auth: ApiAuth, payloadToSign: string | undefined, ): Promise { - if (getMode() !== "production") return SANDBOX_SIG; + if (auth.mode !== "production") return SANDBOX_SIG; if (!payloadToSign) throw new Error( "No payloadToSign in the 202 challenge — cannot stamp this retry.", @@ -63,269 +50,191 @@ function requestIdFrom(data: unknown): string | undefined { return typeof v === "string" ? v : undefined; } +export interface GuidedRetryResult { + issued: unknown; + retried: unknown; +} + // Run a guided issue → sign → retry chain: issue the 202, derive the signature // (session stamp in production, magic value in sandbox), then forward the -// signed retry. Returns a summary of both legs. +// signed retry. async function runGuidedRetry( + reporter: Reporter, + auth: ApiAuth, label: string, issue: IssueLeg, retry: RetryLeg, -): Promise { +): Promise { const issued = await issue(); - addLog(`${label} (issue)`, issued); + reporter.log({ + level: "response", + label: `${label} (issue)`, + detail: issued, + }); const requestId = requestIdFrom(issued); if (!requestId) throw new Error(`No requestId in the ${label} 202 challenge.`); - const signature = await guidedSignature(payloadFrom(issued)); + const signature = await guidedSignature(auth, payloadFrom(issued)); const { data } = await retry({ "Grid-Wallet-Signature": signature, "Request-Id": requestId, }); - addLog(`${label} (retry)`, data); - return JSON.stringify({ issued, retried: data }, null, 2); + reporter.log({ level: "response", label: `${label} (retry)`, detail: data }); + return { issued, retried: data }; } -// Guided buttons that stamp a real payload in production need a live session; -// surface that as disabled-with-tooltip (re-evaluated on session + mode change) -// instead of throwing on click. Returns the refresh callback so the caller can -// register it once after wiring. -function gateGuidedButton(btnId: string): () => void { - return wireGatedButton(btnId, () => { - if (getMode() !== "production") return null; // sandbox uses the magic value - if (!hasSessionSigningKey()) - return "Log in first — a signed retry needs a live session to stamp the request."; - return null; - }); -} - -function wireDeleteCredentialButtons(type: CredType): () => void { - const reqInputId = `${type}-del-cred-request-id`; - - // ----- Guided: Delete credential ----- - bindClick( - `btn-${type}-del-cred-guided`, - `${type}-del-cred-guided-status`, +// ----- Delete credential ----- + +export function deleteCredential( + reporter: Reporter, + auth: ApiAuth, + credId: string, +): Promise { + const path = `/auth/credentials/${encodeURIComponent(credId)}`; + return runGuidedRetry( + reporter, + auth, "Delete Credential", - "Deleting credential...", - async () => { - const credId = requireCredentialId(); - const path = `/auth/credentials/${encodeURIComponent(credId)}`; - return runGuidedRetry( - "Delete Credential", - () => apiDelete(path).then((r) => r.data), - (headers) => apiDelete(path, headers), - ); - }, + () => apiDelete(auth, path).then((r) => r.data), + (headers) => apiDelete(auth, path, headers), ); +} - // ----- Manual (advanced): issue + retry as separate steps ----- - bindClick( - `btn-${type}-del-cred-issue`, - `${type}-del-cred-issue-status`, - "Delete Credential (issue)", - "Issuing delete challenge...", - async () => { - const credId = requireCredentialId(); - const { data } = await apiDelete( - `/auth/credentials/${encodeURIComponent(credId)}`, - ); - addLog("Delete Credential (issue)", data); - const d = data as Record; - const reqInput = requestIdInput(reqInputId); - if (d.requestId && reqInput) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - `btn-${type}-del-cred-retry`, - `${type}-del-cred-retry-status`, - "Delete Credential (retry)", - "Forwarding signed retry...", - async () => { - const credId = requireCredentialId(); - const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiDelete( - `/auth/credentials/${encodeURIComponent(credId)}`, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Delete Credential (retry)", data); - return JSON.stringify(data, null, 2); - }, +// ----- Delete session ----- + +export function deleteSession( + reporter: Reporter, + auth: ApiAuth, + sessionId: string, +): Promise { + const path = `/auth/sessions/${encodeURIComponent(sessionId)}`; + return runGuidedRetry( + reporter, + auth, + "Delete Session", + () => apiDelete(auth, path).then((r) => r.data), + (headers) => apiDelete(auth, path, headers), ); +} - return gateGuidedButton(`btn-${type}-del-cred-guided`); +// ----- Wallet export ----- + +// The export bundle is a signed enclave envelope; its `data` field hex-decodes +// to JSON carrying the HPKE encapsulated key, ciphertext, and the wallet's +// Turnkey sub-org id — so the org id `decryptExportBundle` checks comes from the +// bundle itself, not from session state. +interface ExportBundleData { + encappedPublic: string; + ciphertext: string; + organizationId: string; } -function wireDeleteSessionButtons(type: CredType): () => void { - const reqInputId = `${type}-del-session-request-id`; +function hexToBytes(hex: string): Uint8Array { + const bytes = new Uint8Array(hex.length / 2); + for (let i = 0; i < bytes.length; i++) { + bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16); + } + return bytes; +} - // ----- Guided: Delete session ----- - bindClick( - `btn-${type}-del-session-guided`, - `${type}-del-session-guided-status`, - "Delete Session", - "Deleting session...", - async () => { - const sid = requireSessionId(); - const path = `/auth/sessions/${encodeURIComponent(sid)}`; - return runGuidedRetry( - "Delete Session", - () => apiDelete(path).then((r) => r.data), - (headers) => apiDelete(path, headers), - ); - }, - ); +function parseBundleData(exportBundle: string): ExportBundleData { + const { data } = JSON.parse(exportBundle) as { data: string }; + return JSON.parse( + new TextDecoder().decode(hexToBytes(data)), + ) as ExportBundleData; +} - // ----- Manual (advanced): issue + retry as separate steps ----- - bindClick( - `btn-${type}-del-session-issue`, - `${type}-del-session-issue-status`, - "Delete Session (issue)", - "Issuing delete challenge...", - async () => { - const sid = requireSessionId(); - const { data } = await apiDelete( - `/auth/sessions/${encodeURIComponent(sid)}`, - ); - addLog("Delete Session (issue)", data); - const d = data as Record; - const reqInput = requestIdInput(reqInputId); - if (d.requestId && reqInput) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - `btn-${type}-del-session-retry`, - `${type}-del-session-retry-status`, - "Delete Session (retry)", - "Forwarding signed retry...", - async () => { - const sid = requireSessionId(); - const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiDelete( - `/auth/sessions/${encodeURIComponent(sid)}`, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Delete Session (retry)", data); - return JSON.stringify(data, null, 2); - }, - ); +// Pull the recovered mnemonic out of a sealed export bundle. In production the +// bundle is signed by the enclave, so `decryptExportBundle` verifies that +// signature before HPKE-decrypting. The sandbox backend returns an unsigned +// bundle (empty `dataSignature`/`enclaveQuorumPublic`), which that verification +// can't pass — so there we HPKE-decrypt the bundle directly, the same crypto +// minus the attestation check. +async function recoverMnemonic( + auth: ApiAuth, + exportBundle: string, + privateKey: string, +): Promise { + if (auth.mode === "production") { + const { organizationId } = parseBundleData(exportBundle); + return decryptExportBundle({ + exportBundle, + embeddedKey: privateKey, + organizationId, + returnMnemonic: true, + }); + } + const { encappedPublic, ciphertext } = parseBundleData(exportBundle); + const decrypted = hpkeDecrypt({ + ciphertextBuf: hexToBytes(ciphertext), + encappedKeyBuf: hexToBytes(encappedPublic), + receiverPriv: privateKey, + }); + return new TextDecoder().decode(decrypted); +} - return gateGuidedButton(`btn-${type}-del-session-guided`); +function exportBundleFrom(retried: unknown): string { + const v = (retried as Record)?.encryptedWalletCredentials; + if (typeof v !== "string" || !v) + throw new Error("Export response missing encryptedWalletCredentials."); + return v; } -function wireExportButtons(type: CredType): () => void { - const reqInputId = `${type}-export-request-id`; +export interface ExportWalletResult extends GuidedRetryResult { + mnemonic: string; +} - // ----- Guided: Wallet export ----- - bindClick( - `btn-${type}-export-guided`, - `${type}-export-guided-status`, +// Run the guided export, then decrypt the sealed bundle with the matching +// private key (kept client-side, never sent) to recover the wallet mnemonic. +export async function exportWallet( + reporter: Reporter, + auth: ApiAuth, + accountId: string, +): Promise { + const path = `/internal-accounts/${encodeURIComponent(accountId)}/export`; + // The enclave encrypts the exported mnemonic to this client key; the matching + // private key stays here and decrypts the returned bundle. + const keyPair = generateP256KeyPair(); + const body = { clientPublicKey: keyPair.publicKeyUncompressed }; + const result = await runGuidedRetry( + reporter, + auth, "Wallet Export", - "Exporting wallet...", - async () => { - const accountId = requireAccountId(); - const path = `/internal-accounts/${encodeURIComponent(accountId)}/export`; - return runGuidedRetry( - "Wallet Export", - () => apiPost(path, {}).then((r) => r.data), - (headers) => apiPost(path, {}, headers), - ); - }, + () => apiPost(auth, path, body).then((r) => r.data), + (headers) => apiPost(auth, path, body, headers), ); - - // ----- Manual (advanced): issue + retry as separate steps ----- - bindClick( - `btn-${type}-export-issue`, - `${type}-export-issue-status`, - "Wallet Export (issue)", - "Issuing export challenge...", - async () => { - const accountId = requireAccountId(); - const { data } = await apiPost( - `/internal-accounts/${encodeURIComponent(accountId)}/export`, - {}, - ); - addLog("Wallet Export (issue)", data); - const d = data as Record; - const reqInput = requestIdInput(reqInputId); - if (d.requestId && reqInput) reqInput.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, + const mnemonic = await recoverMnemonic( + auth, + exportBundleFrom(result.retried), + keyPair.privateKey, ); - bindClick( - `btn-${type}-export-retry`, - `${type}-export-retry-status`, - "Wallet Export (retry)", - "Forwarding signed retry...", - async () => { - const accountId = requireAccountId(); - const requestId = requestIdInput(reqInputId)?.value.trim() ?? ""; - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - const { data } = await apiPost( - `/internal-accounts/${encodeURIComponent(accountId)}/export`, - {}, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("Wallet Export (retry)", data); - return JSON.stringify(data, null, 2); - }, - ); - - return gateGuidedButton(`btn-${type}-export-guided`); + return { ...result, mnemonic }; } -function wireListButtons(): void { - bindClick( - "btn-list-credentials", - "list-status", - "List Credentials", - "Listing...", - async () => { - const accountId = requireAccountId(); - const data = await apiGet( - `/auth/credentials?accountId=${encodeURIComponent(accountId)}`, - ); - addLog("List Credentials", data); - return JSON.stringify(data, null, 2); - }, - ); +// ----- List ----- - bindClick( - "btn-list-sessions", - "list-status", - "List Sessions", - "Listing...", - async () => { - const accountId = requireAccountId(); - const data = await apiGet( - `/auth/sessions?accountId=${encodeURIComponent(accountId)}`, - ); - addLog("List Sessions", data); - return JSON.stringify(data, null, 2); - }, +export async function listCredentials( + reporter: Reporter, + auth: ApiAuth, + accountId: string, +): Promise { + const data = await apiGet( + auth, + `/auth/credentials?accountId=${encodeURIComponent(accountId)}`, ); + reporter.log({ level: "response", label: "List Credentials", detail: data }); + return data; } -export function wireManageFlows(): void { - const refreshers: Array<() => void> = []; - for (const type of ["email_otp", "oauth", "passkey"] as const) { - refreshers.push(wireDeleteCredentialButtons(type)); - refreshers.push(wireDeleteSessionButtons(type)); - refreshers.push(wireExportButtons(type)); - } - wireListButtons(); - - // Re-evaluate every guided gate when the session or mode changes, so the - // disabled-with-tooltip state stays accurate as the user logs in / switches. - const refreshAll = () => refreshers.forEach((r) => r()); - onSessionChange(refreshAll); - document - .getElementById("mode-select") - ?.addEventListener("change", refreshAll); +export async function listSessions( + reporter: Reporter, + auth: ApiAuth, + accountId: string, +): Promise { + const data = await apiGet( + auth, + `/auth/sessions?accountId=${encodeURIComponent(accountId)}`, + ); + reporter.log({ level: "response", label: "List Sessions", detail: data }); + return data; } diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/money.ts b/apps/examples/grid-global-accounts-example-app/src/flows/money.ts index 33e834b1a..2c8441669 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/money.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/money.ts @@ -1,177 +1,498 @@ // Money movement: external account, quote, sign payload, execute. +// +// DOM-free operation functions. The React layer collects the form values +// (account type + fields, amounts) and renders results; this module builds the +// request bodies, talks to Grid + Turnkey, and emits log events through the +// injected `Reporter`. -import { SANDBOX_SIG } from "../config"; -import { apiPost, getMode } from "../api-client"; +import { SANDBOX_SIG, type Mode } from "../config"; +import { apiGet, apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; import { turnkeyStamp } from "../turnkey"; -import { addLog, bindClick, el } from "../ui"; -import { requireAccountId } from "./context"; - -export function wireMoneyFlows(): void { - const extAccountType = el("ext-account-type"); - const extSparkFields = el("ext-spark-fields"); - const extBankFields = el("ext-bank-fields"); - const quoteDestinationAccountId = el( - "quote-destination-account-id", - ); - extAccountType.addEventListener("change", () => { - const isSpark = extAccountType.value === "SPARK_WALLET"; - extSparkFields.style.display = isSpark ? "" : "none"; - extBankFields.style.display = isSpark ? "none" : ""; +export interface BankExternalAccount { + kind: "bank"; + accountNumber: string; + routingNumber: string; + beneficiaryName?: string; +} + +export type ExternalAccountParams = BankExternalAccount; + +export interface CreateExternalAccountResult { + data: unknown; + externalAccountId: string | undefined; +} + +export async function createExternalAccount( + reporter: Reporter, + auth: ApiAuth, + params: ExternalAccountParams, +): Promise { + const accountNumber = params.accountNumber.trim(); + const routingNumber = params.routingNumber.trim(); + const fullName = params.beneficiaryName?.trim() || "Sandbox Test User"; + if (!accountNumber || !routingNumber) + throw new Error("Account number and routing number are required."); + const body: Record = { + currency: "USD", + accountInfo: { + accountType: "USD_ACCOUNT", + countries: ["US"], + paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], + accountNumber, + routingNumber, + beneficiary: { + beneficiaryType: "INDIVIDUAL", + fullName, + birthDate: "1990-01-15", + nationality: "US", + address: { + line1: "100 Test St", + city: "SF", + postalCode: "94102", + country: "US", + }, + }, + }, + }; + const { data } = await apiPost(auth, "/platform/external-accounts", body); + reporter.log({ + level: "response", + label: "Create External Account", + detail: data, }); + const d = data as Record; + const externalAccountId = typeof d.id === "string" ? d.id : undefined; + return { data, externalAccountId }; +} + +// ----- Customer-owned external accounts (offramp destination) ----- +// +// A customer offramp quote (embedded wallet → external account) requires the +// destination to be owned by that customer, created via +// `POST /customers/external-accounts` with a `customerId`. A platform-owned +// external account (`POST /platform/external-accounts`) does not belong to the +// customer and is rejected with `sparkcore_to_account_id does not belong to the +// specified user`. + +export interface CreateCustomerExternalAccountParams { + /** The customer LSID the external account is created for. */ + customerId: string; + accountNumber: string; + routingNumber: string; + beneficiaryName?: string; +} - bindClick( - "btn-create-external-account", - "ext-account-status", - "Create External Account", - "Creating external account...", - async () => { - let body: Record; - if (extAccountType.value === "SPARK_WALLET") { - const address = el("ext-spark-address").value.trim(); - if (!address) throw new Error("Spark address is required."); - body = { - currency: "BTC", - accountInfo: { accountType: "SPARK_WALLET", address }, - }; - } else { - const accountNumber = el( - "ext-bank-account-number", - ).value.trim(); - const routingNumber = el( - "ext-bank-routing-number", - ).value.trim(); - const fullName = - el("ext-bank-beneficiary-name").value.trim() || - "Sandbox Test User"; - if (!accountNumber || !routingNumber) - throw new Error("Account number and routing number are required."); - body = { - currency: "USD", - accountInfo: { - accountType: "USD_ACCOUNT", - countries: ["US"], - paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], - accountNumber, - routingNumber, - beneficiary: { - beneficiaryType: "INDIVIDUAL", - fullName, - birthDate: "1990-01-15", - nationality: "US", - address: { - line1: "100 Test St", - city: "SF", - postalCode: "94102", - country: "US", - }, - }, - }, - }; - } - const { data } = await apiPost("/platform/external-accounts", body); - addLog("Create External Account", data); - const d = data as Record; - if (d.id) quoteDestinationAccountId.value = d.id as string; - return JSON.stringify(data, null, 2); +/** Build the USD/ACH `accountInfo` body shared by platform + customer creates. */ +function usdBankAccountInfo( + accountNumber: string, + routingNumber: string, + fullName: string, +): Record { + return { + accountType: "USD_ACCOUNT", + countries: ["US"], + paymentRails: ["ACH", "WIRE", "RTP", "FEDNOW"], + accountNumber, + routingNumber, + beneficiary: { + beneficiaryType: "INDIVIDUAL", + fullName, + birthDate: "1990-01-15", + nationality: "US", + address: { + line1: "100 Test St", + city: "SF", + postalCode: "94102", + country: "US", + }, }, - ); + }; +} - const executeQuoteId = el("execute-quote-id"); - const executePayloadToSign = el( - "execute-payload-to-sign", - ); - const executeSignature = el("execute-signature"); - - bindClick( - "btn-create-quote", - "quote-status", - "Create Quote", - "Creating quote...", - async () => { - const sourceAccountId = requireAccountId(); - const destinationAccountId = quoteDestinationAccountId.value.trim(); - const lockedAmount = Number( - el("quote-locked-amount").value, - ); - if (!destinationAccountId || !lockedAmount) - throw new Error("Destination external account and amount are required."); - const { data } = await apiPost("/quotes", { - source: { sourceType: "ACCOUNT", accountId: sourceAccountId }, - destination: { - destinationType: "ACCOUNT", - accountId: destinationAccountId, - }, - lockedCurrencySide: el("quote-locked-side").value, - lockedCurrencyAmount: lockedAmount, - }); - addLog("Create Quote", data); - const d = data as Record; - if (d.id) executeQuoteId.value = d.id as string; - // Extract `payloadToSign` from the EMBEDDED_WALLET payment instruction - // (second entry in the example response — find by accountType match). - const instructions = (d.paymentInstructions ?? []) as Array< - Record - >; - for (const inst of instructions) { - const info = inst.accountOrWalletInfo as - | Record - | undefined; - if (info && info.accountType === "EMBEDDED_WALLET" && info.payloadToSign) { - executePayloadToSign.value = info.payloadToSign as string; - break; - } - } - // In sandbox mode, pre-fill the magic signature so the user can hit - // Execute immediately. In production mode, leave blank — the Sign - // payload button decrypts the session bundle and stamps it. - if (getMode() === "sandbox") { - executeSignature.value = SANDBOX_SIG; - } else { - executeSignature.value = ""; - } - return JSON.stringify(data, null, 2); +/** + * Create a customer-owned USD bank external account + * (`POST /customers/external-accounts`). Sends `customerId` + `currency: "USD"` + * + the USD/ACH `accountInfo`, and returns the new external account id. + */ +export async function createCustomerExternalAccount( + reporter: Reporter, + auth: ApiAuth, + params: CreateCustomerExternalAccountParams, +): Promise { + const customerId = params.customerId.trim(); + const accountNumber = params.accountNumber.trim(); + const routingNumber = params.routingNumber.trim(); + const fullName = params.beneficiaryName?.trim() || "Sandbox Test User"; + if (!customerId) throw new Error("A customer is required."); + if (!accountNumber || !routingNumber) + throw new Error("Account number and routing number are required."); + const body: Record = { + customerId, + currency: "USD", + accountInfo: usdBankAccountInfo(accountNumber, routingNumber, fullName), + }; + const { data } = await apiPost(auth, "/customers/external-accounts", body); + reporter.log({ + level: "response", + label: "Create Customer External Account", + detail: data, + }); + const id = (data as Record)?.id; + if (typeof id !== "string" || !id) + throw new Error("External account create returned no id."); + return id; +} + +/** A customer external account, flattened to the bits the picker renders. */ +export interface CustomerExternalAccount { + id: string; + /** Human label, e.g. `USD •••6789`. */ + label: string; +} + +/** + * List a customer's external accounts + * (`GET /customers/external-accounts?customerId=...`), optionally filtered by + * currency. Returns each account's id and a human label (currency + last-4 of + * the bank account number when present). + */ +export async function listCustomerExternalAccounts( + reporter: Reporter, + auth: ApiAuth, + customerId: string, + currency?: string, +): Promise { + const id = customerId.trim(); + if (!id) throw new Error("A customer is required."); + const query = new URLSearchParams({ customerId: id }); + if (currency) query.set("currency", currency); + const data = await apiGet(auth, `/customers/external-accounts?${query}`); + reporter.log({ + level: "response", + label: "List Customer External Accounts", + detail: data, + }); + const rows = ((data as Record | null)?.data ?? []) as Array< + Record + >; + const accounts: CustomerExternalAccount[] = []; + for (const row of rows) { + if (typeof row.id !== "string" || !row.id) continue; + accounts.push({ id: row.id, label: externalAccountLabel(row) }); + } + return accounts; +} + +/** Build a `USD •••6789`-style label from an external account response item. */ +function externalAccountLabel(row: Record): string { + const currency = typeof row.currency === "string" ? row.currency : ""; + const info = row.accountInfo as Record | undefined; + const number = + info && typeof info.accountNumber === "string" ? info.accountNumber : ""; + const last4 = number ? `•••${number.slice(-4)}` : ""; + return [currency, last4].filter(Boolean).join(" ") || (row.id as string); +} + +export interface CreateQuoteParams { + sourceAccountId: string; + destinationAccountId: string; + lockedCurrencySide: string; + lockedCurrencyAmount: number; + mode: Mode; +} + +export interface CreateQuoteResult { + data: unknown; + quoteId: string | undefined; + /** payloadToSign from the EMBEDDED_WALLET payment instruction, if present. */ + payloadToSign: string | undefined; + /** Pre-filled signature: the magic value in sandbox, blank in production. */ + signature: string; +} + +export async function createQuote( + reporter: Reporter, + auth: ApiAuth, + params: CreateQuoteParams, +): Promise { + const destinationAccountId = params.destinationAccountId.trim(); + if (!destinationAccountId || !params.lockedCurrencyAmount) + throw new Error("Destination external account and amount are required."); + const { data } = await apiPost(auth, "/quotes", { + source: { sourceType: "ACCOUNT", accountId: params.sourceAccountId }, + destination: { + destinationType: "ACCOUNT", + accountId: destinationAccountId, }, + lockedCurrencySide: params.lockedCurrencySide, + lockedCurrencyAmount: params.lockedCurrencyAmount, + }); + reporter.log({ level: "response", label: "Create Quote", detail: data }); + const d = data as Record; + const quoteId = typeof d.id === "string" ? d.id : undefined; + + // Extract `payloadToSign` from the EMBEDDED_WALLET payment instruction + // (find by accountType match). + let payloadToSign: string | undefined; + const instructions = (d.paymentInstructions ?? []) as Array< + Record + >; + for (const inst of instructions) { + const info = inst.accountOrWalletInfo as + | Record + | undefined; + if (info && info.accountType === "EMBEDDED_WALLET" && info.payloadToSign) { + payloadToSign = info.payloadToSign as string; + break; + } + } + + // In sandbox mode, pre-fill the magic signature so the user can Execute + // immediately. In production, leave blank — `signPayload` decrypts the + // session bundle and stamps the payload. + const signature = params.mode === "sandbox" ? SANDBOX_SIG : ""; + return { data, quoteId, payloadToSign, signature }; +} + +export interface SignPayloadResult { + signature: string; + message: string; +} + +export async function signPayload( + mode: Mode, + payloadToSign: string, +): Promise { + if (mode === "sandbox") { + return { + signature: SANDBOX_SIG, + message: "Mode: sandbox — filled magic signature.", + }; + } + const payload = payloadToSign.trim(); + if (!payload) + throw new Error( + "payloadToSign is empty — run Create Quote first or paste it manually.", + ); + const stamp = await turnkeyStamp(payload); + return { signature: stamp, message: `Stamped (${stamp.length} chars).` }; +} + +export async function executeQuote( + reporter: Reporter, + auth: ApiAuth, + quoteId: string, + signature: string, +): Promise { + const id = quoteId.trim(); + const sig = signature.trim(); + if (!id || !sig) + throw new Error("Quote ID and Grid-Wallet-Signature are required."); + const { data } = await apiPost( + auth, + `/quotes/${encodeURIComponent(id)}/execute`, + {}, + { "Grid-Wallet-Signature": sig }, ); + reporter.log({ level: "response", label: "Execute Quote", detail: data }); + return data; +} + +// ----- Platform-funded transfer (no wallet signature) ----- +// +// Mirrors the proven platform→customer flow in +// `sparkcore/sparkcore/grid/__itests__/test_token_fund_in_live.py` +// (`_gen_create_and_execute_quote`, lines 476-507, and +// `_gen_poll_transaction_status`, lines 373-393): +// POST /quotes { source: ACCOUNT, destination: ACCOUNT, lockedCurrencySide: +// "SENDING", lockedCurrencyAmount } → { id } +// POST /quotes/{id}/execute {} (EMPTY body, NO Grid-Wallet-Signature — the +// platform's Basic-auth token authorizes spending its own source account) +// poll GET /transactions/{transactionId} until status ∈ {COMPLETED, FAILED}. +// Unlike the customer-signed `executeQuote`, the platform funds its own customer +// so there is no embedded-wallet payload to sign. + +/** Terminal + happy-path statuses a transaction can reach. */ +const TERMINAL_STATUSES = new Set(["COMPLETED", "FAILED"]); + +export interface FundCustomerParams { + /** The platform's funded source internal account LSID. */ + fundingAccountId: string; + /** The customer's destination internal account LSID. */ + destinationAccountId: string; + /** Amount to send, in minor units (cents / micro-units / sats per currency). */ + amountMinor: number; +} + +/** + * Coarse stages the fund flow passes through, surfaced to the UI for a staged + * progress indicator. `quoting` → `executing` → `processing` are the in-flight + * steps; `completed` / `failed` are terminal. PROCESSING is the only real + * backend signal, so the bar advances approximately between steps. + */ +export type FundStage = + | "quoting" + | "executing" + | "processing" + | "completed" + | "failed"; + +export interface FundCustomerResult { + quoteId: string; + transactionId: string; + /** The terminal transaction `status` (COMPLETED / FAILED), or the last seen. */ + status: string; + /** The full transaction payload from the final `GET /transactions/{id}`. */ + transaction: unknown; +} - bindClick( - "btn-sign-payload", - "execute-status", - "Sign Payload", - "Signing...", - async () => { - if (getMode() === "sandbox") { - executeSignature.value = SANDBOX_SIG; - return `Mode: sandbox — filled magic signature.`; - } - const payload = executePayloadToSign.value.trim(); - if (!payload) - throw new Error( - "payloadToSign is empty — run Create Quote first or paste it manually.", - ); - const stamp = await turnkeyStamp(payload); - executeSignature.value = stamp; - return `Stamped (${stamp.length} chars).`; +/** + * Inject the wait between polls so tests don't sleep on real timers. Production + * callers leave it defaulted to a real `setTimeout`-backed delay. + */ +export type Sleep = (ms: number) => Promise; +const realSleep: Sleep = (ms) => + new Promise((resolve) => setTimeout(resolve, ms)); + +export interface PollTransactionOptions { + /** Total time budget before giving up and returning the last seen txn. */ + timeoutMs?: number; + /** Delay between polls. */ + intervalMs?: number; + /** Injected sleep (tests pass a no-op / fake-timer-driven one). */ + sleep?: Sleep; +} + +/** + * Poll `GET /transactions/{id}` until `status` is terminal (COMPLETED / FAILED) + * or the timeout elapses, then return the last-seen transaction. Mirrors + * `_gen_poll_transaction_status` in the reference itest. + */ +export async function pollTransaction( + reporter: Reporter, + auth: ApiAuth, + transactionId: string, + opts: PollTransactionOptions = {}, +): Promise<{ status: string; transaction: unknown }> { + const id = transactionId.trim(); + if (!id) throw new Error("Transaction ID is required to poll."); + const timeoutMs = opts.timeoutMs ?? 30_000; + const intervalMs = opts.intervalMs ?? 1_000; + const sleep = opts.sleep ?? realSleep; + + let elapsed = 0; + let txn: unknown = null; + let status = ""; + // Poll at least once even if timeoutMs is 0. + do { + txn = await apiGet(auth, `/transactions/${encodeURIComponent(id)}`); + reporter.log({ + level: "response", + label: "GET /transactions", + detail: txn, + }); + const s = (txn as Record | null)?.status; + status = typeof s === "string" ? s : ""; + if (TERMINAL_STATUSES.has(status)) return { status, transaction: txn }; + if (elapsed + intervalMs >= timeoutMs) break; + await sleep(intervalMs); + elapsed += intervalMs; + } while (elapsed < timeoutMs); + + return { status, transaction: txn }; +} + +/** + * Options for `fundCustomerFromPlatform`: poll tuning + a staged-progress hook. + */ +export interface FundCustomerOptions { + /** Poll tuning (timeout / interval / injected sleep). */ + poll?: PollTransactionOptions; + /** + * Stage callback for a staged UI indicator. Invoked with `quoting` before the + * quote, `executing` before execute, `processing` before the poll, then the + * terminal `completed` / `failed` (or left at `processing` if the poll times + * out before a terminal status). + */ + onStage?: (stage: FundStage) => void; +} + +/** + * Fund a customer from the platform's own funded internal account: + * quote (RECEIVING-locked) → execute (empty body, platform Basic auth, no + * signature) → poll the transaction to a terminal status. Returns the quote id, + * transaction id, and final status. The caller refreshes the customer's balance + * and surfaces the status. DOM-free: takes a `Reporter`, `auth`, and params. + */ +export async function fundCustomerFromPlatform( + reporter: Reporter, + auth: ApiAuth, + params: FundCustomerParams, + opts: FundCustomerOptions = {}, +): Promise { + const onStage = opts.onStage ?? (() => {}); + const fundingAccountId = params.fundingAccountId.trim(); + const destinationAccountId = params.destinationAccountId.trim(); + if (!fundingAccountId) + throw new Error("A platform funding account is required."); + if (!destinationAccountId) + throw new Error("The customer has no internal account to fund."); + if (!params.amountMinor || params.amountMinor <= 0) + throw new Error("Enter an amount to fund."); + + // 1) Quote: platform source → customer destination. The amount is in the + // customer's (receiving) currency, so lock RECEIVING and let the quote derive + // the source amount. + onStage("quoting"); + const quoteBody = { + source: { sourceType: "ACCOUNT", accountId: fundingAccountId }, + destination: { + destinationType: "ACCOUNT", + accountId: destinationAccountId, }, + lockedCurrencySide: "RECEIVING", + lockedCurrencyAmount: params.amountMinor, + }; + reporter.log({ level: "request", label: "POST /quotes", detail: quoteBody }); + const { data: quoteData } = await apiPost(auth, "/quotes", quoteBody); + reporter.log({ level: "response", label: "Create Quote", detail: quoteData }); + const quoteId = (quoteData as Record)?.id; + if (typeof quoteId !== "string" || !quoteId) + throw new Error("Quote creation returned no id."); + + // 2) Execute: EMPTY body, NO Grid-Wallet-Signature. Platform Basic auth + // authorizes spending its own source account. + onStage("executing"); + reporter.log({ + level: "request", + label: "POST /quotes/{id}/execute", + detail: {}, + }); + const { data: execData } = await apiPost( + auth, + `/quotes/${encodeURIComponent(quoteId)}/execute`, + {}, ); + reporter.log({ level: "response", label: "Execute Quote", detail: execData }); + const transactionId = (execData as Record)?.transactionId; + if (typeof transactionId !== "string" || !transactionId) + throw new Error("Execute returned no transactionId."); - bindClick( - "btn-execute-quote", - "execute-status", - "Execute Quote", - "Executing quote...", - async () => { - const quoteId = executeQuoteId.value.trim(); - const signature = executeSignature.value.trim(); - if (!quoteId || !signature) - throw new Error("Quote ID and Grid-Wallet-Signature are required."); - const { data } = await apiPost( - `/quotes/${encodeURIComponent(quoteId)}/execute`, - {}, - { "Grid-Wallet-Signature": signature }, - ); - addLog("Execute Quote", data); - return JSON.stringify(data, null, 2); - }, + // 3) Poll the transaction to a terminal status. + onStage("processing"); + const { status, transaction } = await pollTransaction( + reporter, + auth, + transactionId, + opts.poll, ); + + // Terminal stage: COMPLETED / FAILED flip to that stage; a poll timeout leaves + // the indicator at `processing` (the balance may still settle). + if (status === "COMPLETED") onStage("completed"); + else if (status === "FAILED") onStage("failed"); + + return { quoteId, transactionId, status, transaction }; } diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts index f7980b474..8f85a0351 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/oauth.ts @@ -1,29 +1,33 @@ // OAUTH lifecycle: guided login, create, verify (→ session), add. +// +// DOM-free operation functions: the React layer supplies the OIDC token + client +// public key and renders the returned data; this module only talks to Grid and +// emits log events through the injected `Reporter`. import { SANDBOX_SIG } from "../config"; -import { apiPost } from "../api-client"; +import { apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; import { generateClientKeyPair } from "../turnkey"; import { rememberEncryptedSessionSigningKey } from "../session"; -import { addLog, bindClick, el, wireGenKeyButton } from "../ui"; -import { - requireAccountId, - requireCredentialId, - setCtxCredential, - setCtxSession, -} from "./context"; +import { setCtxCredential, setCtxSession } from "./context"; // Run /verify with the OIDC token + client public key, caching the session -// bundle on success. Shared by the guided login and the manual Verify button. -async function runOauthVerify( +// bundle on success. Shared by the guided login and the manual verify path. +export async function runOauthVerify( + reporter: Reporter, + auth: ApiAuth, credId: string, oidc: string, pubkey: string, -): Promise { +): Promise { + if (!oidc.trim()) throw new Error("OIDC token is required."); + if (!pubkey.trim()) throw new Error("Client public key is required."); const { data } = await apiPost( + auth, `/auth/credentials/${encodeURIComponent(credId)}/verify`, - { type: "OAUTH", oidcToken: oidc, clientPublicKey: pubkey }, + { type: "OAUTH", oidcToken: oidc.trim(), clientPublicKey: pubkey.trim() }, ); - addLog("OAUTH Verify", data); + reporter.log({ level: "response", label: "OAUTH Verify", detail: data }); const d = data as Record; if (d.id) setCtxSession(d.id as string); // MIGRATION (P6): OAUTH login moves to OAUTH_LOGIN; the knob-ON response @@ -32,105 +36,109 @@ async function runOauthVerify( // `rememberEncryptedSessionSigningKey` already no-ops when the field is // absent — flip this one call once the P3 wire shape settles. rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); - return JSON.stringify(data, null, 2); + return data; } -export function wireOauthFlows(): void { - // ----- Guided: Log in (OAuth) ----- - // - // One click owns the chain: gen client key → /verify with OIDC token + - // clientPublicKey → remember the session bundle. Folds the manual genkey + - // verify buttons below. - bindClick( - "btn-oauth-login", - "oauth-login-status", - "OAuth Login", - "Verifying...", - async () => { - const credId = requireCredentialId(); - const oidc = el("oauth-verify-oidc").value.trim(); - if (!oidc) throw new Error("OIDC token is required."); - const kp = generateClientKeyPair(); - // Mirror the manual genkey button so the field reflects what was sent. - el("oauth-verify-pubkey").value = - kp.publicKeyUncompressed; - return runOauthVerify(credId, oidc, kp.publicKeyUncompressed); - }, - ); +export interface OauthLoginResult { + data: unknown; + /** The freshly generated client public key that was sent to /verify. */ + clientPublicKey: string; +} - bindClick( - "btn-oauth-create", - "oauth-create-status", - "OAUTH Create", - "Creating OAUTH wallet...", - async () => { - const oidc = el("oauth-create-oidc").value.trim(); - if (!oidc) throw new Error("OIDC token is required."); - const { data } = await apiPost("/auth/credentials", { - type: "OAUTH", - accountId: requireAccountId(), - oidcToken: oidc, - }); - addLog("OAUTH Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, +// Guided log in: gen client key → /verify with OIDC token + clientPublicKey → +// remember the session bundle. +export async function loginOauth( + reporter: Reporter, + auth: ApiAuth, + credId: string, + oidc: string, +): Promise { + if (!oidc.trim()) throw new Error("OIDC token is required."); + const kp = generateClientKeyPair(); + const data = await runOauthVerify( + reporter, + auth, + credId, + oidc, + kp.publicKeyUncompressed, ); + return { data, clientPublicKey: kp.publicKeyUncompressed }; +} - wireGenKeyButton("btn-oauth-verify-genkey", "oauth-verify-pubkey"); - bindClick( - "btn-oauth-verify", - "oauth-verify-status", - "OAUTH Verify", - "Verifying...", - async () => { - const credId = requireCredentialId(); - const oidc = el("oauth-verify-oidc").value.trim(); - const pubkey = el("oauth-verify-pubkey").value.trim(); - if (!oidc || !pubkey) - throw new Error("OIDC token and public key are required."); - return runOauthVerify(credId, oidc, pubkey); - }, - ); +// ----- Sign-in entry point (create-vs-authenticate) ----- +// +// Mirror of EMAIL_OTP's signIn: only create an OAUTH credential when the wallet +// doesn't already have one (a second create would 400 with +// OAUTH_CREDENTIAL_ALREADY_EXISTS). When `existingCredId` is provided we verify +// directly against it; otherwise we run the original create + verify ceremony. +export async function signInOauth( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + oidc: string, + existingCredId: string | null, +): Promise { + let credId = existingCredId; + if (!credId) { + const cred = await createOauthCredential(reporter, auth, accountId, oidc); + credId = (cred as { id?: string }).id ?? null; + if (!credId) throw new Error("Create credential returned no id."); + } + const { data } = await loginOauth(reporter, auth, credId, oidc); + return data; +} - const oauthAddRequestId = el("oauth-add-request-id"); - bindClick( - "btn-oauth-add-issue", - "oauth-add-issue-status", - "OAUTH Add (issue)", - "Issuing add challenge...", - async () => { - const oidc = el("oauth-add-oidc").value.trim(); - if (!oidc) throw new Error("OIDC token is required."); - const { data } = await apiPost("/auth/credentials", { - type: "OAUTH", - accountId: requireAccountId(), - oidcToken: oidc, - }); - addLog("OAUTH Add (issue)", data); - const d = data as Record; - if (d.requestId) oauthAddRequestId.value = d.requestId as string; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - "btn-oauth-add-retry", - "oauth-add-retry-status", - "OAUTH Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = oauthAddRequestId.value.trim(); - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - const oidc = el("oauth-add-oidc").value.trim(); - const { data } = await apiPost( - "/auth/credentials", - { type: "OAUTH", accountId: requireAccountId(), oidcToken: oidc }, - { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId }, - ); - addLog("OAUTH Add (retry)", data); - return JSON.stringify(data, null, 2); - }, +export async function createOauthCredential( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + oidc: string, +): Promise { + if (!oidc.trim()) throw new Error("OIDC token is required."); + const { data } = await apiPost(auth, "/auth/credentials", { + type: "OAUTH", + accountId, + oidcToken: oidc.trim(), + }); + reporter.log({ level: "response", label: "OAUTH Create", detail: data }); + const d = data as Record; + if (d.id) setCtxCredential(d.id as string); + return data; +} + +export async function addOauthIssue( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + oidc: string, +): Promise<{ data: unknown; requestId: string | undefined }> { + if (!oidc.trim()) throw new Error("OIDC token is required."); + const { data } = await apiPost(auth, "/auth/credentials", { + type: "OAUTH", + accountId, + oidcToken: oidc.trim(), + }); + reporter.log({ level: "response", label: "OAUTH Add (issue)", detail: data }); + const d = data as Record; + const requestId = typeof d.requestId === "string" ? d.requestId : undefined; + return { data, requestId }; +} + +export async function addOauthRetry( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + oidc: string, + requestId: string, +): Promise { + if (!requestId.trim()) + throw new Error("Request-Id is required — run the issue step first."); + const { data } = await apiPost( + auth, + "/auth/credentials", + { type: "OAUTH", accountId, oidcToken: oidc.trim() }, + { "Grid-Wallet-Signature": SANDBOX_SIG, "Request-Id": requestId.trim() }, ); + reporter.log({ level: "response", label: "OAUTH Add (retry)", detail: data }); + return data; } diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/otp-step.ts b/apps/examples/grid-global-accounts-example-app/src/flows/otp-step.ts new file mode 100644 index 000000000..d2825c862 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/otp-step.ts @@ -0,0 +1,102 @@ +// Two-step EMAIL_OTP sign-in orchestration (pure + DOM-free). +// +// The production bug this fixes: the old login coupled the OTP *challenge* (which +// SENDS the email) to *verify* in a single call, so every sign-in attempt — and +// every retry — fired a fresh OTP, invalidating the prior code and tripping the +// rate limit. Here the challenge and verify are two distinct, explicit steps: +// +// step "idle" → user must click Send to fire requestV3Challenge ONCE. +// step "awaiting_code" → the challenge bundle is held; the user enters the code +// and clicks Verify, which runs runV3Verify against the +// *cached* bundle. Verify NEVER issues a challenge. +// "Resend" is an explicit re-challenge from the awaiting_code step. +// +// The challenge is injected (`requestChallenge`) and the verify is injected +// (`runVerify`) so the two-step guarantee is unit-testable at the flow boundary +// without exercising real Turnkey: a test can assert the challenge dependency is +// called exactly once per send and that verify is reachable only after a +// challenge, carrying the bundle the challenge produced. + +import type { ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; +import { + requestV3Challenge, + runV3Verify, + type V3VerifyResult, +} from "./email-otp"; + +/** Where a single credential's OTP sign-in currently is. */ +export type OtpStep = + | { status: "idle" } + | { status: "challenging" } + | { status: "awaiting_code"; targetBundle: string } + | { status: "verifying"; targetBundle: string }; + +/** The challenge leg: send the OTP for `credId`, returning the enclave bundle. */ +export type ChallengeFn = ( + reporter: Reporter, + auth: ApiAuth, + credId: string, +) => Promise; + +/** The verify leg: run the two verify legs against an already-issued bundle. */ +export type VerifyFn = ( + reporter: Reporter, + auth: ApiAuth, + credId: string, + targetBundle: string, + otp: string, +) => Promise; + +export interface OtpStepDeps { + requestChallenge: ChallengeFn; + runVerify: VerifyFn; +} + +const defaultOtpStepDeps: OtpStepDeps = { + requestChallenge: requestV3Challenge, + runVerify: runV3Verify, +}; + +/** + * Fire the challenge for `credId` exactly once and return the bundle-bearing + * next step. This is the ONLY path that calls the challenge dependency, so the + * OTP email is sent only when a caller explicitly invokes this (Send / Resend) — + * never on render and never from `verify`. + */ +export async function sendOtpChallenge( + reporter: Reporter, + auth: ApiAuth, + credId: string, + deps: OtpStepDeps = defaultOtpStepDeps, +): Promise> { + const targetBundle = await deps.requestChallenge(reporter, auth, credId); + return { status: "awaiting_code", targetBundle }; +} + +/** + * Verify the entered `otp` against the bundle the challenge already produced. + * Requires a `targetBundle` from a prior `sendOtpChallenge`; it deliberately + * does NOT call the challenge dependency, so a verify (or a failed verify retry) + * can never send a fresh OTP. Returns the auth session on success. + */ +export async function verifyOtpStep( + reporter: Reporter, + auth: ApiAuth, + credId: string, + targetBundle: string, + otp: string, + deps: OtpStepDeps = defaultOtpStepDeps, +): Promise { + if (!targetBundle) + throw new Error("Send the code first — no challenge bundle to verify."); + if (!otp.trim()) throw new Error("Enter the one-time code."); + const { session } = await deps.runVerify( + reporter, + auth, + credId, + targetBundle, + otp.trim(), + ); + return session; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts index e70922281..fe3c1be9c 100644 --- a/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts +++ b/apps/examples/grid-global-accounts-example-app/src/flows/passkey.ts @@ -1,63 +1,151 @@ // PASSKEY lifecycle: create (real registration), challenge, verify (assertion), // add (signed retry, session-stamped in production). +// +// DOM-free operation functions. Attestation / assertion material is passed in +// as plain values (the React layer captures it from the real WebAuthn ceremony +// in production, or the seeded magic values in sandbox); this module talks to +// Grid + Turnkey and emits log events through the injected `Reporter`. -import { SANDBOX_SIG } from "../config"; -import { apiPost, getMode } from "../api-client"; +import { SANDBOX_SIG, type Mode } from "../config"; +import { apiPost, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; import { generateClientKeyPair, turnkeyStamp } from "../turnkey"; +import { rememberEncryptedSessionSigningKey } from "../session"; +import { rememberRawCredentialId } from "../passkey-store"; import { - hasSessionSigningKey, - onSessionChange, - rememberEncryptedSessionSigningKey, -} from "../session"; -import { createRealPasskey, signWithPasskey } from "../webauthn"; -import { - addLog, - bindClick, - el, - maybeEl, - wireGatedButton, - wireGenKeyButton, -} from "../ui"; -import { - requireAccountId, - requireCredentialId, - setCtxCredential, - setCtxSession, -} from "./context"; + createRealPasskey, + signWithPasskey, + type RealAssertion, +} from "../webauthn"; +import { setCtxCredential, setCtxSession } from "./context"; + +export interface PasskeyAttestation { + challenge: string; + credentialId: string; + clientDataJson: string; + attestationObject: string; +} + +export interface PasskeyAssertion { + credentialId: string; + clientDataJson: string; + authenticatorData: string; + signature: string; +} + +// ----- Create / Add a credential (attestation) ----- + +function buildCredentialBody( + accountId: string, + nickname: string, + attestation: PasskeyAttestation, +): Record { + return { + type: "PASSKEY", + accountId, + nickname, + challenge: attestation.challenge, + attestation: { + credentialId: attestation.credentialId, + clientDataJson: attestation.clientDataJson, + attestationObject: attestation.attestationObject, + }, + }; +} + +export async function createPasskeyCredential( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + nickname: string, + attestation: PasskeyAttestation, +): Promise { + const body = buildCredentialBody(accountId, nickname, attestation); + const { data } = await apiPost(auth, "/auth/credentials", body); + reporter.log({ level: "response", label: "PASSKEY Create", detail: data }); + const d = data as Record; + if (d.id) { + setCtxCredential(d.id as string); + // Map the new Grid credential id → the raw WebAuthn credential id so a later + // sign-in can target this security key via allowCredentials. + rememberRawCredentialId(d.id as string, attestation.credentialId); + } + return data; +} -// Run /verify with the assertion currently in the DOM fields (populated by the -// real ceremony in production or the seeded magic fields in sandbox), caching -// the session bundle on success. Shared by guided login + the manual button. -async function runPasskeyVerify( +// Drive a real WebAuthn registration on a roaming security key (YubiKey) and +// return the attestation the Create / Add flows send. +export async function registerRealPasskey( + reporter: Reporter, + nickname: string, + rpId?: string, +): Promise { + const att = await createRealPasskey(nickname, rpId); + reporter.log({ + level: "info", + label: "Passkey Registered (real)", + detail: att, + }); + return att; +} + +// ----- Session challenge + verify ----- + +export interface PasskeyChallengeResult { + data: unknown; + requestId: string | undefined; + challenge: string; +} + +export async function requestPasskeyChallenge( + reporter: Reporter, + auth: ApiAuth, + credId: string, + clientPublicKey: string, +): Promise { + if (!clientPublicKey.trim()) + throw new Error("Client public key is required — generate one first."); + const { data } = await apiPost( + auth, + `/auth/credentials/${encodeURIComponent(credId)}/challenge`, + { clientPublicKey: clientPublicKey.trim() }, + ); + reporter.log({ level: "response", label: "PASSKEY Challenge", detail: data }); + const d = data as Record; + const requestId = typeof d.requestId === "string" ? d.requestId : undefined; + const challenge = typeof d.challenge === "string" ? d.challenge : ""; + return { data, requestId, challenge }; +} + +// Run /verify with the supplied assertion, caching the session bundle on +// success. Shared by guided login + the manual verify path. +export async function runPasskeyVerify( + reporter: Reporter, + auth: ApiAuth, credId: string, + clientPublicKey: string, + assertion: PasskeyAssertion, requestId: string | undefined, -): Promise { +): Promise { const body = { type: "PASSKEY", - clientPublicKey: el( - "passkey-challenge-pubkey", - ).value.trim(), + clientPublicKey: clientPublicKey.trim(), assertion: { - credentialId: el( - "passkey-create-cred-id-raw", - ).value.trim(), - clientDataJson: el( - "passkey-verify-client-data-json", - ).value.trim(), - authenticatorData: el( - "passkey-verify-auth-data", - ).value.trim(), - signature: el("passkey-verify-signature").value.trim(), + credentialId: assertion.credentialId.trim(), + clientDataJson: assertion.clientDataJson.trim(), + authenticatorData: assertion.authenticatorData.trim(), + signature: assertion.signature.trim(), }, }; const headers: Record = {}; if (requestId) headers["Request-Id"] = requestId; const { data } = await apiPost( + auth, `/auth/credentials/${encodeURIComponent(credId)}/verify`, body, headers, ); - addLog("PASSKEY Verify", data); + reporter.log({ level: "response", label: "PASSKEY Verify", detail: data }); const d = data as Record; if (d.id) setCtxSession(d.id as string); // MIGRATION (P6): PASSKEY login moves to STAMP_LOGIN; the knob-ON response @@ -66,274 +154,217 @@ async function runPasskeyVerify( // `rememberEncryptedSessionSigningKey` already no-ops when the field is // absent — flip this one call once the P2 wire shape settles. rememberEncryptedSessionSigningKey(d.encryptedSessionSigningKey); - return JSON.stringify(data, null, 2); + return data; } -export function wirePasskeyFlows(): void { - bindClick( - "btn-passkey-create", - "passkey-create-status", - "PASSKEY Create", - "Creating PASSKEY wallet...", - async () => { - const body = { - type: "PASSKEY", - accountId: requireAccountId(), - nickname: el("passkey-create-nickname").value.trim(), - challenge: el( - "passkey-create-challenge", - ).value.trim(), - attestation: { - credentialId: el( - "passkey-create-cred-id-raw", - ).value.trim(), - clientDataJson: el( - "passkey-create-client-data-json", - ).value.trim(), - attestationObject: el( - "passkey-create-attestation-object", - ).value.trim(), - }, - }; - const { data } = await apiPost("/auth/credentials", body); - addLog("PASSKEY Create", data); - const d = data as Record; - if (d.id) setCtxCredential(d.id as string); - return JSON.stringify(data, null, 2); - }, - ); +export interface PasskeyLoginParams { + credId: string; + mode: Mode; + /** + * Raw WebAuthn credential id(s) for the assertion's allowCredentials + * (production). Pass every registered passkey's raw id so the security key + * can satisfy the assertion; empty/omitted falls back to a discoverable + * credential on the key. + */ + credentialIds?: string[]; + rpId?: string; + /** Sandbox-seeded assertion fields, used when not running a real ceremony. */ + sandboxAssertion?: PasskeyAssertion; +} - // Drive a real WebAuthn registration (Touch ID) and fill the attestation - // fields above — used by both the "Create" and "Add additional" flows. - bindClick( - "btn-passkey-webauthn-create", - "passkey-webauthn-create-status", - "Passkey Register", - "Waiting for authenticator (Touch ID)...", - async () => { - const nickname = el( - "passkey-create-nickname", - ).value.trim(); - const att = await createRealPasskey(nickname); - el("passkey-create-challenge").value = att.challenge; - el("passkey-create-cred-id-raw").value = - att.credentialId; - el("passkey-create-client-data-json").value = - att.clientDataJson; - el("passkey-create-attestation-object").value = - att.attestationObject; - addLog("Passkey Registered (real)", att); - return "Real passkey created — attestation fields filled. Now run Create or Add."; - }, - ); +export interface PasskeyLoginResult { + data: unknown; + clientPublicKey: string; + assertion: PasskeyAssertion; +} - wireGenKeyButton("btn-passkey-challenge-genkey", "passkey-challenge-pubkey"); - const passkeyVerifyRequestId = el( - "passkey-verify-request-id", - ); - // Captured from the session-challenge response so the real assertion ceremony - // can sign the exact sha256-hex challenge Turnkey expects. - let passkeySessionChallenge = ""; - bindClick( - "btn-passkey-challenge", - "passkey-challenge-status", - "PASSKEY Challenge", - "Issuing session challenge...", - async () => { - const credId = requireCredentialId(); - const pubkey = el( - "passkey-challenge-pubkey", - ).value.trim(); - if (!pubkey) - throw new Error("Client public key is required — generate one first."); - const { data } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - { clientPublicKey: pubkey }, - ); - addLog("PASSKEY Challenge", data); - const d = data as Record; - if (d.requestId) passkeyVerifyRequestId.value = d.requestId as string; - if (typeof d.challenge === "string") - passkeySessionChallenge = d.challenge; - return JSON.stringify(data, null, 2); - }, +// Drive a real WebAuthn assertion against the issued challenge, targeting the +// security key via the supplied raw credential id(s). +export async function signRealPasskey( + reporter: Reporter, + challenge: string, + credentialIds: string[], + rpId?: string, +): Promise { + const assertion = await signWithPasskey(challenge, credentialIds, rpId); + reporter.log({ + level: "info", + label: "Passkey Signed (real)", + detail: assertion, + }); + return assertion; +} + +// Guided log in: gen client key → /challenge → assertion (a real security-key +// ceremony in production, the seeded sandbox assertion otherwise) → /verify. +export async function loginPasskey( + reporter: Reporter, + auth: ApiAuth, + params: PasskeyLoginParams, +): Promise { + const kp = generateClientKeyPair(); + const { requestId, challenge } = await requestPasskeyChallenge( + reporter, + auth, + params.credId, + kp.publicKeyUncompressed, ); - bindClick( - "btn-passkey-verify", - "passkey-verify-status", - "PASSKEY Verify", - "Verifying assertion...", - async () => { - const credId = requireCredentialId(); - const requestId = passkeyVerifyRequestId.value.trim() || undefined; - return runPasskeyVerify(credId, requestId); - }, + let assertion: PasskeyAssertion; + if (params.mode === "production") { + const real = await signRealPasskey( + reporter, + challenge, + params.credentialIds ?? [], + params.rpId, + ); + assertion = { + credentialId: real.credentialId, + clientDataJson: real.clientDataJson, + authenticatorData: real.authenticatorData, + signature: real.signature, + }; + } else { + if (!params.sandboxAssertion) + throw new Error("Sandbox assertion fields are required."); + assertion = params.sandboxAssertion; + } + + const data = await runPasskeyVerify( + reporter, + auth, + params.credId, + kp.publicKeyUncompressed, + assertion, + requestId, ); + return { data, clientPublicKey: kp.publicKeyUncompressed, assertion }; +} - // ----- Guided: Log in (Passkey) ----- - // - // One click owns the chain: gen client key → /challenge → assertion (a real - // Touch ID ceremony in production, the seeded magic fields in sandbox) → - // /verify → remember session bundle. Folds the manual genkey + challenge + - // sign + verify buttons below. - bindClick( - "btn-passkey-login", - "passkey-login-status", - "Passkey Login", - "Logging in with passkey...", - async () => { - const credId = requireCredentialId(); - const kp = generateClientKeyPair(); - el("passkey-challenge-pubkey").value = - kp.publicKeyUncompressed; +// ----- Sign-in entry point (create-vs-authenticate) ----- +// +// Mirror of EMAIL_OTP's signIn: only register (create) a PASSKEY credential when +// the wallet doesn't already have one. When `existingCredId` is provided we run +// the challenge → assertion → verify ceremony directly against it (no create); +// otherwise we register a new passkey first, then verify it into a session. +// +// `register` produces the attestation for the create leg (a real Touch ID +// ceremony in production, the seeded magic attestation in sandbox). It is only +// invoked when there is no existing credential, so callers don't pay for a +// registration prompt on an authenticate-with-existing sign-in. +export interface PasskeySignInParams { + accountId: string; + nickname: string; + existingCredId: string | null; + /** Login params reused for the verify ceremony (mode, rpId, sandbox seed, and + * the raw `credentialIds` for the assertion). `credId` is filled in by + * signInPasskey once the credential to use is known. */ + loginParams: Omit; + /** Produce the attestation for the create leg. Only called when registering a + * new credential (no existing one). */ + register: () => Promise; +} - // Issue the session challenge bound to the fresh client key. - const { data: challengeData } = await apiPost( - `/auth/credentials/${encodeURIComponent(credId)}/challenge`, - { clientPublicKey: kp.publicKeyUncompressed }, - ); - addLog("PASSKEY Challenge", challengeData); - const cd = challengeData as Record; - const requestId = - typeof cd.requestId === "string" ? cd.requestId : undefined; - const challenge = typeof cd.challenge === "string" ? cd.challenge : ""; - if (requestId) passkeyVerifyRequestId.value = requestId; - passkeySessionChallenge = challenge; +export async function signInPasskey( + reporter: Reporter, + auth: ApiAuth, + params: PasskeySignInParams, +): Promise { + let credId = params.existingCredId; + // When we register a fresh passkey, its raw WebAuthn credential id is only + // known here — feed it into the assertion's allowCredentials so the verify + // leg targets the security key we just created on. + let freshRawId: string | undefined; + if (!credId) { + const attestation = await params.register(); + freshRawId = attestation.credentialId; + const cred = await createPasskeyCredential( + reporter, + auth, + params.accountId, + params.nickname, + attestation, + ); + credId = (cred as { id?: string }).id ?? null; + if (!credId) throw new Error("Create credential returned no id."); + } + const credentialIds = [ + ...(params.loginParams.credentialIds ?? []), + ...(freshRawId ? [freshRawId] : []), + ]; + const { data } = await loginPasskey(reporter, auth, { + ...params.loginParams, + credentialIds, + credId, + }); + return data; +} - // Produce the assertion. Production runs a real Touch ID ceremony and - // fills the fields; sandbox uses the seeded magic assertion fields. - if (getMode() === "production") { - const credentialId = el( - "passkey-create-cred-id-raw", - ).value.trim(); - const assertion = await signWithPasskey(challenge, credentialId); - el("passkey-create-cred-id-raw").value = - assertion.credentialId; - el("passkey-verify-client-data-json").value = - assertion.clientDataJson; - el("passkey-verify-auth-data").value = - assertion.authenticatorData; - el("passkey-verify-signature").value = - assertion.signature; - addLog("Passkey Signed (real)", assertion); - } +// ----- Add an additional passkey (issue → signed retry) ----- - return runPasskeyVerify(credId, requestId); - }, - ); +export interface PasskeyAddIssueResult { + data: unknown; + requestId: string | undefined; + payloadToSign: string | undefined; +} - // Drive a real WebAuthn assertion (Touch ID) against the issued challenge and - // fill the assertion fields above for Verify. - bindClick( - "btn-passkey-webauthn-get", - "passkey-webauthn-get-status", - "Passkey Sign", - "Waiting for authenticator (Touch ID)...", - async () => { - const credId = el( - "passkey-create-cred-id-raw", - ).value.trim(); - const assertion = await signWithPasskey(passkeySessionChallenge, credId); - el("passkey-create-cred-id-raw").value = - assertion.credentialId; - el("passkey-verify-client-data-json").value = - assertion.clientDataJson; - el("passkey-verify-auth-data").value = - assertion.authenticatorData; - el("passkey-verify-signature").value = - assertion.signature; - addLog("Passkey Signed (real)", assertion); - return "Real assertion produced — verify fields filled. Now click Verify."; - }, - ); +export async function addPasskeyIssue( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + nickname: string, + attestation: PasskeyAttestation, +): Promise { + const body = buildCredentialBody(accountId, nickname, attestation); + const { data } = await apiPost(auth, "/auth/credentials", body); + reporter.log({ + level: "response", + label: "PASSKEY Add (issue)", + detail: data, + }); + const d = data as Record; + const requestId = typeof d.requestId === "string" ? d.requestId : undefined; + const payloadToSign = + typeof d.payloadToSign === "string" ? d.payloadToSign : undefined; + return { data, requestId, payloadToSign }; +} - const passkeyAddRequestId = el("passkey-add-request-id"); - // Captured from the add-issue 202 so the retry can stamp the exact payload. - let passkeyAddPayloadToSign = ""; - function buildPasskeyAddBody(): Record { - return { - type: "PASSKEY", - accountId: requireAccountId(), - nickname: el("passkey-add-nickname").value.trim(), - challenge: el("passkey-create-challenge").value.trim(), - attestation: { - credentialId: el( - "passkey-create-cred-id-raw", - ).value.trim(), - clientDataJson: el( - "passkey-create-client-data-json", - ).value.trim(), - attestationObject: el( - "passkey-create-attestation-object", - ).value.trim(), - }, - }; +export async function addPasskeyRetry( + reporter: Reporter, + auth: ApiAuth, + accountId: string, + nickname: string, + attestation: PasskeyAttestation, + requestId: string, + payloadToSign: string | undefined, +): Promise { + if (!requestId.trim()) + throw new Error("Request-Id is required — run the issue step first."); + // Sandbox accepts the magic value, but real Turnkey requires the + // CREATE_AUTHENTICATORS payload to be stamped by an authorized credential — + // the active session's signing key. Establish a session (e.g. OTP login or + // passkey verify) first so the session signing key is available. + let signature = SANDBOX_SIG; + if (auth.mode === "production") { + if (!payloadToSign) + throw new Error("Missing payloadToSign — run the issue step first."); + signature = await turnkeyStamp(payloadToSign); } - bindClick( - "btn-passkey-add-issue", - "passkey-add-issue-status", - "PASSKEY Add (issue)", - "Issuing add challenge...", - async () => { - const { data } = await apiPost( - "/auth/credentials", - buildPasskeyAddBody(), - ); - addLog("PASSKEY Add (issue)", data); - const d = data as Record; - if (d.requestId) passkeyAddRequestId.value = d.requestId as string; - if (typeof d.payloadToSign === "string") - passkeyAddPayloadToSign = d.payloadToSign; - return JSON.stringify(data, null, 2); - }, - ); - bindClick( - "btn-passkey-add-retry", - "passkey-add-retry-status", - "PASSKEY Add (retry)", - "Forwarding signed retry...", - async () => { - const requestId = passkeyAddRequestId.value.trim(); - if (!requestId) - throw new Error("Request-Id is required — run step 1 first."); - // Sandbox accepts the magic value, but real Turnkey requires the - // CREATE_AUTHENTICATORS payload to be stamped by an authorized credential — - // the active session's signing key. Establish a session (e.g. OTP login or - // passkey verify) first so the session signing key is available. - let signature = SANDBOX_SIG; - if (getMode() === "production") { - if (!passkeyAddPayloadToSign) { - throw new Error("Missing payloadToSign — run step 1 first."); - } - signature = await turnkeyStamp(passkeyAddPayloadToSign); - } - const { data } = await apiPost( - "/auth/credentials", - buildPasskeyAddBody(), - { - "Grid-Wallet-Signature": signature, - "Request-Id": requestId, - }, - ); - addLog("PASSKEY Add (retry)", data); - return JSON.stringify(data, null, 2); - }, + const { data } = await apiPost( + auth, + "/auth/credentials", + buildCredentialBody(accountId, nickname, attestation), + { "Grid-Wallet-Signature": signature, "Request-Id": requestId.trim() }, ); - - // The add-retry stamps CREATE_AUTHENTICATORS with the live session's signing - // key in production. Surface that requirement as a disabled-with-tooltip - // button (re-evaluated on session + mode change) instead of throwing on - // click — fixes the old "No client keypair" trap. - const refreshAddRetryGate = wireGatedButton("btn-passkey-add-retry", () => { - if (getMode() !== "production") return null; // sandbox uses the magic value - if (!hasSessionSigningKey()) - return "Log in first — adding a passkey needs a live session to stamp the request."; - return null; + reporter.log({ + level: "response", + label: "PASSKEY Add (retry)", + detail: data, }); - onSessionChange(refreshAddRetryGate); - maybeEl("mode-select")?.addEventListener( - "change", - refreshAddRetryGate, - ); + // Map the added Grid credential id → its raw WebAuthn credential id so a later + // sign-in can target this additional security key via allowCredentials. + const addedId = (data as Record)?.id; + if (typeof addedId === "string" && addedId) + rememberRawCredentialId(addedId, attestation.credentialId); + return data; } diff --git a/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/format-money.test.ts b/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/format-money.test.ts new file mode 100644 index 000000000..a5ae4ce8d --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/format-money.test.ts @@ -0,0 +1,47 @@ +import { describe, expect, it } from "vitest"; + +import { currencyCode, formatMoney } from "../format-money"; + +describe("formatMoney", () => { + it("formats USD minor units (2 decimals) with the code", () => { + expect(formatMoney(123456, { code: "USD", decimals: 2 })).toBe( + "1,234.56 USD", + ); + }); + + it("honors a non-cent decimals count (USDB at 6)", () => { + expect(formatMoney(5_000_000, { code: "USDB", decimals: 6 })).toBe( + "5.000000 USDB", + ); + }); + + it("renders 3 USDB (3,000,000 minor, 6 decimals) as 3, not 30,000", () => { + const out = formatMoney(3_000_000, { code: "USDB", decimals: 6 }); + expect(out).toBe("3.000000 USDB"); + expect(out).not.toContain("30,000"); + }); + + it("falls back to 2 decimals when the currency omits decimals", () => { + expect(formatMoney(100, { code: "USD" })).toBe("1.00 USD"); + }); + + it("accepts a bare currency-code string", () => { + expect(formatMoney(100, "USD")).toBe("1.00 USD"); + }); + + it("omits the code when none is present", () => { + expect(formatMoney(100, {})).toBe("1.00"); + }); +}); + +describe("currencyCode", () => { + it("reads code from a Currency object", () => { + expect(currencyCode({ code: "USDB", decimals: 6 })).toBe("USDB"); + }); + + it("accepts a bare string and tolerates missing data", () => { + expect(currencyCode("BTC")).toBe("BTC"); + expect(currencyCode({})).toBe(""); + expect(currencyCode(null)).toBe(""); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/reporter.test.ts b/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/reporter.test.ts new file mode 100644 index 000000000..e8f3fdd59 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/lib/__tests__/reporter.test.ts @@ -0,0 +1,79 @@ +import { describe, expect, it } from "vitest"; + +import { createCollectingReporter } from "../collecting-reporter"; +import type { LogEntry } from "../reporter"; + +describe("createCollectingReporter", () => { + it("records log entries in the order they were reported", () => { + const collector = createCollectingReporter(); + + collector.reporter.log({ level: "request", label: "POST /customers" }); + collector.reporter.log({ level: "response", label: "201 Created" }); + collector.reporter.log({ level: "info", label: "done" }); + + expect(collector.entries.map((e) => e.label)).toEqual([ + "POST /customers", + "201 Created", + "done", + ]); + expect(collector.entries.map((e) => e.level)).toEqual([ + "request", + "response", + "info", + ]); + }); + + it("assigns a unique id and a numeric timestamp to each entry", () => { + const collector = createCollectingReporter(); + const before = Date.now(); + + collector.reporter.log({ level: "info", label: "a" }); + collector.reporter.log({ level: "info", label: "b" }); + + const after = Date.now(); + const [first, second] = collector.entries; + + expect(typeof first.id).toBe("string"); + expect(first.id).not.toEqual(""); + expect(first.id).not.toEqual(second.id); + + expect(typeof first.ts).toBe("number"); + expect(first.ts).toBeGreaterThanOrEqual(before); + expect(first.ts).toBeLessThanOrEqual(after); + }); + + it("preserves the level, label, and raw detail payload", () => { + const collector = createCollectingReporter(); + const detail = { id: "wallet-123", nested: { code: 202 } }; + + collector.reporter.log({ level: "response", label: "verify", detail }); + + const entry: LogEntry = collector.entries[0]; + expect(entry.level).toBe("response"); + expect(entry.label).toBe("verify"); + expect(entry.detail).toEqual(detail); + }); + + it("surfaces the latest status message and kind", () => { + const collector = createCollectingReporter(); + + expect(collector.lastStatus).toBeNull(); + + collector.reporter.status("Creating customer..."); + expect(collector.lastStatus).toEqual({ + message: "Creating customer...", + kind: "info", + }); + + collector.reporter.status("Failed", "error"); + expect(collector.lastStatus).toEqual({ message: "Failed", kind: "error" }); + }); + + it("defaults the status kind to info when omitted", () => { + const collector = createCollectingReporter(); + + collector.reporter.status("hello"); + + expect(collector.lastStatus?.kind).toBe("info"); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/lib/collecting-reporter.ts b/apps/examples/grid-global-accounts-example-app/src/lib/collecting-reporter.ts new file mode 100644 index 000000000..484fee6f8 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/lib/collecting-reporter.ts @@ -0,0 +1,41 @@ +// A `Reporter` that simply collects what it's told, for tests and any non-React +// consumer. The React store has its own state-backed reporter; this one keeps +// the recorded entries + latest status in plain arrays/fields you can assert on. + +import type { LogEntry, Reporter } from "./reporter"; + +export type StatusKind = "info" | "error" | "success"; + +export interface ReportedStatus { + message: string; + kind: StatusKind; +} + +export interface CollectingReporter { + reporter: Reporter; + entries: LogEntry[]; + lastStatus: ReportedStatus | null; +} + +let counter = 0; + +function nextId(): string { + counter += 1; + return `log-${Date.now().toString(36)}-${counter}`; +} + +export function createCollectingReporter(): CollectingReporter { + const collector: CollectingReporter = { + entries: [], + lastStatus: null, + reporter: { + log(entry) { + collector.entries.push({ id: nextId(), ts: Date.now(), ...entry }); + }, + status(message, kind = "info") { + collector.lastStatus = { message, kind }; + }, + }, + }; + return collector; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/lib/format-money.ts b/apps/examples/grid-global-accounts-example-app/src/lib/format-money.ts new file mode 100644 index 000000000..af426a871 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/lib/format-money.ts @@ -0,0 +1,49 @@ +// Money formatting shared by the platform customers table and the customer +// wallet view, so a balance reads identically on both sides. +// +// Grid balances are a `CurrencyAmount`: `amount` in MINOR units plus a +// `currency` block (`{ code, name, symbol, decimals }`, any field optional). +// The number of minor-unit decimals comes from `currency.decimals` when the +// API provides it (USD/USDB = 2, BTC = 8, …); we fall back to 2 only when it's +// absent rather than assuming every currency is cents. + +const DEFAULT_DECIMALS = 2; + +/** Pull a three-letter (or ticker) code out of a Currency block. */ +export function currencyCode(currency: unknown): string { + if (currency && typeof currency === "object") { + const c = currency as Record; + if (typeof c.code === "string" && c.code) return c.code; + } + if (typeof currency === "string") return currency; + return ""; +} + +/** + * Minor-unit decimal count from a Currency block (USD/USDB = 2, BTC = 8, …), + * defaulting to 2 when absent. Shared so amount→minor conversions in the money + * flows match how balances are formatted. + */ +export function currencyDecimals(currency: unknown): number { + if (currency && typeof currency === "object") { + const c = currency as Record; + if (typeof c.decimals === "number" && c.decimals >= 0) return c.decimals; + } + return DEFAULT_DECIMALS; +} + +/** + * Format a minor-unit amount + Currency block as a major-unit string with the + * code appended, e.g. `1,234.56 USD`. The fraction-digit count follows + * `currency.decimals` so non-cent currencies (e.g. BTC at 8) render correctly. + */ +export function formatMoney(amount: number, currency: unknown): string { + const code = currencyCode(currency); + const decimals = currencyDecimals(currency); + const major = amount / 10 ** decimals; + const formatted = major.toLocaleString(undefined, { + minimumFractionDigits: decimals, + maximumFractionDigits: decimals, + }); + return code ? `${formatted} ${code}` : formatted; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/lib/reporter.ts b/apps/examples/grid-global-accounts-example-app/src/lib/reporter.ts new file mode 100644 index 000000000..132eb7d9c --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/lib/reporter.ts @@ -0,0 +1,19 @@ +// The output sink the integration logic talks to instead of the DOM. +// +// Every lib/flow module that used to call `ui.addLog(...)` / `ui.showStatus(...)` +// now takes a `Reporter` and emits structured `LogEntry`s + status messages +// through it. The renderer (React store, a collecting test double, etc.) owns +// what to do with them — keeping the integration logic DOM-free and reusable. + +export type LogEntry = { + id: string; + ts: number; + level: "info" | "error" | "request" | "response"; + label: string; + detail?: unknown; // raw payload / IDs / JSON, shown only in debug mode +}; + +export interface Reporter { + log(entry: Omit): void; + status(message: string, kind?: "info" | "error" | "success"): void; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/main.ts b/apps/examples/grid-global-accounts-example-app/src/main.ts deleted file mode 100644 index 50c06563b..000000000 --- a/apps/examples/grid-global-accounts-example-app/src/main.ts +++ /dev/null @@ -1,37 +0,0 @@ -// Grid Global Accounts — Example App -// -// Tabbed lifecycle per credential type (EMAIL_OTP / OAUTH / PASSKEY) + -// shared customer / external account / quote / execute sections. -// Signed-retry flows are two-step: issue (returns 202 challenge) then retry -// (forwards with `Grid-Wallet-Signature`). -// -// Thin bootstrap: wire tabs, then each flow module. Behavior lives in the -// `flows/` tree + the `config / turnkey / webauthn / api-client / ui` modules. - -import { initMode } from "./mode"; -import { renderChip } from "./session"; -import { wireTabs } from "./ui"; -import { wireCustomerFlows } from "./flows/customer"; -import { wireEmailOtpFlows } from "./flows/email-otp"; -import { wireOauthFlows } from "./flows/oauth"; -import { wirePasskeyFlows } from "./flows/passkey"; -import { wireManageFlows } from "./flows/manage"; -import { wireMoneyFlows } from "./flows/money"; - -// Resolve mode (persisted) + apply field visibility / magic seeding first, so -// flows wire against the correct initial state. -initMode(); - -wireTabs(); -wireCustomerFlows(); -wireEmailOtpFlows(); -wireOauthFlows(); -wirePasskeyFlows(); -wireManageFlows(); -wireMoneyFlows(); - -// Paint the initial session chip (empty session) once the DOM + flow gates are -// wired. Flows re-render it as ids / signing keys land. -renderChip(); - -console.log("Grid Global Accounts example app loaded."); diff --git a/apps/examples/grid-global-accounts-example-app/src/main.tsx b/apps/examples/grid-global-accounts-example-app/src/main.tsx new file mode 100644 index 000000000..e0c91be04 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/main.tsx @@ -0,0 +1,17 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; + +import "@lightsparkdev/origin/styles.css"; +// App-level dark-mode contrast overrides. MUST come after Origin's styles so +// our token re-definitions win by source order. See theme-overrides.css. +import "./theme-overrides.css"; + +import { App } from "./App"; + +const container = document.getElementById("root"); +if (!container) throw new Error("#root not found"); +createRoot(container).render( + + + , +); diff --git a/apps/examples/grid-global-accounts-example-app/src/mode.ts b/apps/examples/grid-global-accounts-example-app/src/mode.ts index 905dcc7b1..a18abce10 100644 --- a/apps/examples/grid-global-accounts-example-app/src/mode.ts +++ b/apps/examples/grid-global-accounts-example-app/src/mode.ts @@ -1,16 +1,19 @@ -// Sandbox / production mode: chosen once, persisted to localStorage, and the -// single driver of magic-value seeding + field/button visibility. +// Sandbox / production mode: the chosen mode is persisted to localStorage and +// drives magic-value seeding + field visibility. // // - production: every magic-value field is hidden (nothing fake on screen); // real-ceremony (Touch ID) buttons are shown. Values come from real // ceremonies or guided flows. -// - sandbox: magic-value fields are shown, seeded from `SANDBOX_MAGIC`, and -// labeled with a "magic" pill; real-ceremony buttons are hidden. +// - sandbox: magic-value fields are shown, seeded from `SANDBOX_MAGIC`; +// real-ceremony buttons are hidden. +// +// DOM-free: this module owns the *mode value* (persistence + magic-value +// lookups) only. The React layer decides what to show/seed based on the mode it +// reads here — no input elements are touched. import { MODE_STORAGE_KEY, SANDBOX_MAGIC, type Mode } from "./config"; -import { el, maybeEl } from "./ui"; -function readPersistedMode(): Mode { +export function readPersistedMode(): Mode { try { return localStorage.getItem(MODE_STORAGE_KEY) === "production" ? "production" @@ -20,7 +23,7 @@ function readPersistedMode(): Mode { } } -function persistMode(mode: Mode): void { +export function persistMode(mode: Mode): void { try { localStorage.setItem(MODE_STORAGE_KEY, mode); } catch { @@ -29,63 +32,9 @@ function persistMode(mode: Mode): void { } } -// Wrapper for a magic field, so the whole label+input+pill block hides in -// production. Looked up lazily by the field's input id. -function magicWrapper(id: string): HTMLElement | null { - return document.querySelector(`[data-magic-for="${id}"]`); -} - -function ensurePill(id: string): void { - const wrapper = magicWrapper(id); - if (!wrapper || wrapper.querySelector(".magic-pill")) return; - const label = wrapper.querySelector("label"); - if (!label) return; - const pill = document.createElement("span"); - pill.className = "magic-pill"; - pill.textContent = "magic"; - pill.title = "Sandbox-only placeholder accepted by the sandbox backend."; - label.appendChild(pill); -} - -function applyMode(mode: Mode): void { - const sandbox = mode === "sandbox"; - - // Magic fields: seed + pill + show in sandbox; clear + hide in production. - for (const [id, value] of Object.entries(SANDBOX_MAGIC)) { - const wrapper = magicWrapper(id); - if (wrapper) wrapper.style.display = sandbox ? "" : "none"; - const field = maybeEl(id); - if (!field) continue; - if (sandbox) { - // Only seed when empty so we never stomp a value the user typed. - if (!field.value) field.value = value; - ensurePill(id); - } else if (field.value === value) { - // Drop a leftover magic value when switching to production so nothing - // fake is submitted; leave any user-entered value untouched. - field.value = ""; - } - } - - // Real-ceremony (Touch ID) buttons: only meaningful in production. - for (const btn of document.querySelectorAll("[data-ceremony]")) { - btn.style.display = sandbox ? "none" : ""; - } - - // Sandbox-only legend (the magic-string list moved out of the mode
("wallet"); + const [accounts, setAccounts] = useState([]); + const [rawBalance, setRawBalance] = useState(null); + const [loading, setLoading] = useState(false); + + const customerId = activeCustomer?.id ?? ""; + + const refresh = useCallback(async () => { + if (!platformAuth || !customerId) return; + setLoading(true); + try { + const { rows, raw } = await fetchBalance( + reporter, + platformAuth, + customerId, + ); + setAccounts(rows); + setRawBalance(raw); + } catch (err) { + reporter.status( + err instanceof Error ? err.message : "Couldn't load balance.", + "error", + ); + } finally { + setLoading(false); + } + }, [platformAuth, customerId, reporter]); + + useEffect(() => { + void refresh(); + }, [refresh]); + + const primary = accounts[0]; + + return ( + + + + +
+ Total balance + + {primary ? formatMoney(primary.balance, primary.currency) : "—"} + +
+ + + + + {accounts.length === 0 ? ( + + {loading + ? "Loading accounts…" + : "No accounts found for this customer."} + + ) : ( + accounts.map((a, i) => ( + + + + {currencyCode(a.currency) || "—"} + + {String(a.id)} + + + {formatMoney(a.balance, a.currency)} + + + )) + )} + + + + + + + + + + + + + + + + + {section === "wallet" && } + {section === "fund" && ( + void refresh()} /> + )} + {section === "pay" && ( + void refresh()} /> + )} + {section === "activity" && } + {section === "settings" && } + + ); +} + +/** The "Wallet" tab body: a short orientation card + recent activity preview. */ +function WalletOverview() { + return ( + + + + Recent activity + + Funding, payments, and session events from this session. + + + + + + + + ); +} + +const Stack = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; + +const HeroCard = styled(Card.Root)` + background: linear-gradient( + 160deg, + var(--surface-primary, #fff) 0%, + color-mix( + in srgb, + var(--brand-blue, #2563eb) 5%, + var(--surface-primary, #fff) + ) + 100% + ); +`; + +const HeroTop = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--spacing-md, 16px); + margin-bottom: var(--spacing-lg, 24px); +`; + +const HeroLabel = styled.div` + font-size: var(--font-size-xs, 12px); + font-weight: var(--font-weight-medium, 500); + text-transform: uppercase; + letter-spacing: 0.6px; + color: var(--text-tertiary, #8a8a8a); + margin-bottom: var(--spacing-2xs, 6px); +`; + +const HeroAmount = styled.div` + font-size: 38px; + font-weight: var(--font-weight-semibold, 600); + letter-spacing: -0.5px; + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; + line-height: 1.1; +`; + +const Accounts = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-2xs, 6px); +`; + +const EmptyAccounts = styled.div` + font-size: var(--font-size-sm, 13px); + color: var(--text-tertiary, #8a8a8a); + padding: var(--spacing-sm, 12px) 0; +`; + +const AccountRow = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-md, 16px); + padding: var(--spacing-sm, 12px) 0; + border-top: var(--stroke-xs, 1px) solid var(--border-primary, #e6e6e9); + + &:first-of-type { + border-top: none; + } +`; + +const AccountLeft = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); + min-width: 0; +`; + +const CurrencyBadge = styled(Badge)` + font-variant-numeric: tabular-nums; +`; + +const AccountId = styled.span` + font-size: var(--font-size-xs, 11px); + color: var(--text-tertiary, #8a8a8a); + font-variant-numeric: tabular-nums; + max-width: 220px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const AccountBalanceText = styled.span` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-medium, 500); + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; +`; + +const FooterRow = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-sm, 12px); + width: 100%; +`; + +const Spacer = styled.div` + flex: 1; +`; + +const Nav = styled.div` + display: flex; +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/platform/Config.tsx b/apps/examples/grid-global-accounts-example-app/src/views/platform/Config.tsx new file mode 100644 index 000000000..f1f3b46d2 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/platform/Config.tsx @@ -0,0 +1,484 @@ +import styled from "@emotion/styled"; +import { + Alert, + Badge, + Button, + Card, + Field, + Input, + Select, + Tabs, +} from "@lightsparkdev/origin"; +import { useCallback, useEffect, useRef, useState } from "react"; + +import { type ApiAuth, resolveMode } from "../../api-client"; +import { DismissibleAlert } from "../../components/DismissibleAlert"; +import { RawExpander } from "../../components/RawExpander"; +import type { Mode } from "../../config"; +import { + listPlatformFundingAccounts, + type PlatformFundingAccount, +} from "../../flows/customer"; +import { formatMoney } from "../../lib/format-money"; +import { useAppState } from "../../state/store"; + +/** Funding-account picker state: loading the list, resolved, or fetch failed. */ +type FundingState = + | { kind: "loading" } + | { kind: "ready"; accounts: PlatformFundingAccount[] } + | { kind: "error"; message: string }; + +/** + * Platform config / auth panel — the entry point for the whole Platform view. + * + * Captures the platform API credentials (`clientId` / `clientSecret`) and the + * target `mode`, then stores them in app state as `platformAuth`. Until that's + * set, nothing else on the platform side can run (the decoupled flows all take + * an `ApiAuth` argument). Shows live connection status: disconnected when no + * auth is held, connected (with a masked summary) once it is. + */ +export function Config() { + const { + platformAuth, + setPlatformAuth, + platformFundingAccountId, + setPlatformFundingAccountId, + reporter, + } = useAppState(); + const connected = platformAuth !== null; + + // Local draft so the operator can edit credentials without clobbering the + // live connection mid-keystroke; committed to the store on "Connect". + const [clientId, setClientId] = useState(platformAuth?.clientId ?? ""); + const [clientSecret, setClientSecret] = useState( + platformAuth?.clientSecret ?? "", + ); + const [mode, setMode] = useState(platformAuth?.mode ?? "sandbox"); + const [editing, setEditing] = useState(false); + const [error, setError] = useState(null); + + // The funding account is chosen — not pasted — from the platform's own funding + // pool, listed via `GET /platform/internal-accounts` once connected. + const [funding, setFunding] = useState({ kind: "loading" }); + // Guards against a stale fetch (after disconnect/reconnect) clobbering a newer one. + const fundingSeq = useRef(0); + + const loadFundingAccounts = useCallback(async () => { + if (!platformAuth) return; + const seq = ++fundingSeq.current; + setFunding({ kind: "loading" }); + try { + const { accounts } = await listPlatformFundingAccounts( + reporter, + platformAuth, + ); + if (seq !== fundingSeq.current) return; // superseded + setFunding({ kind: "ready", accounts }); + } catch (err) { + if (seq !== fundingSeq.current) return; + setFunding({ + kind: "error", + message: err instanceof Error ? err.message : "Couldn't load accounts.", + }); + } + }, [platformAuth, reporter]); + + // Fetch the funding pool on connect; clear it when disconnected. + useEffect(() => { + if (connected) { + void loadFundingAccounts(); + } else { + fundingSeq.current++; + setFunding({ kind: "loading" }); + } + }, [connected, loadFundingAccounts]); + + function connect() { + const id = clientId.trim(); + const secret = clientSecret.trim(); + if (!id || !secret) { + setError("Both a client ID and a client secret are required to connect."); + return; + } + setError(null); + const auth: ApiAuth = { clientId: id, clientSecret: secret, mode }; + setPlatformAuth(auth); + setEditing(false); + } + + function disconnect() { + setPlatformAuth(null); + setPlatformFundingAccountId(""); + setClientSecret(""); + setEditing(false); + setError(null); + } + + return ( + + + + + + Platform + + + + {connected ? "Connected" : "Not connected"} + + + Platform configuration + + Connect with your Grid platform API credentials. These authenticate + every platform-side request — creating customers, reading config — + and never leave the browser. + + + + + + {connected && !editing ? ( + + + + Client ID + {maskMiddle(platformAuth.clientId)} + + + Client secret + •••••••••••• + + + Mode + + + {platformAuth.mode} + + + + + + void loadFundingAccounts()} + /> + + + + ) : ( +
{ + e.preventDefault(); + connect(); + }} + > + {error && ( + setError(null)} + /> + )} + + + Client ID + setClientId(e.target.value)} + /> + + + + Client secret + setClientSecret(e.target.value)} + /> + + Stored only in this tab's memory for the session. + + + + + Mode + setMode(resolveMode(value))} + > + + Sandbox + Production + + + + Sandbox accepts magic values; production requires real + ceremonies. + + + + + You'll pick the platform funding account from your funded accounts + once connected. + + + )} +
+ + + {connected && !editing ? ( + + + + + ) : ( + + + {connected && ( + + )} + + )} + + + ); +} + +/** + * Funding-account picker shown once connected. Lets the operator choose the + * platform's funding source from its own funded accounts (the funding pool) + * instead of pasting an LSID. Renders the load/empty/error states and, on + * selection, sets `platformFundingAccountId` from the chosen account. + */ +function FundingPicker({ + state, + selectedId, + onSelect, + onRetry, +}: { + state: FundingState; + selectedId: string; + onSelect: (id: string) => void; + onRetry: () => void; +}) { + if (state.kind === "loading") { + return ( + + Funding account + Loading your funded accounts… + + ); + } + + if (state.kind === "error") { + return ( + + Funding account + + + + ); + } + + if (state.accounts.length === 0) { + return ( + + Funding account + + + ); + } + + // Value the Select is bound to: the selected LSID, or null when none is set. + const value = selectedId || null; + + return ( + + Funding account + onSelect(typeof next === "string" ? next : "")} + > + + + {(selected) => + fundingOptionLabel( + state.accounts.find((a) => a.id === selected), + selected, + ) + } + + + + + + + + {state.accounts.map((account) => ( + + + + {fundingOptionLabel(account)} + + + ))} + + + + + + + Used as the source when funding a customer from the platform. Leave + unset if you only act as customers. + + + ); +} + +/** + * Label an account option as ` · `, e.g. + * `Internal…a1b2 · 1,000.00 USD`, so it's recognizable without the operator + * reading a raw LSID. Falls back to the raw value when the account is unknown. + */ +function fundingOptionLabel( + account: PlatformFundingAccount | undefined, + fallback?: string | null, +): string { + if (!account) return fallback ?? ""; + return `${maskMiddle(account.id)} · ${formatMoney( + account.amount, + account.currency, + )}`; +} + +/** `grid_pl…a1b2` — keep the prefix + tail, hide the middle. */ +function maskMiddle(value: string): string { + const v = value.trim(); + if (v.length <= 10) return v; + return `${v.slice(0, 6)}…${v.slice(-4)}`; +} + +const EyebrowRow = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-2xs, 6px); + margin-bottom: var(--spacing-2xs, 6px); +`; + +const StatusBadge = styled(Badge)` + display: inline-flex; + align-items: center; + gap: var(--spacing-2xs, 6px); +`; + +const StatusDot = styled.span` + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--text-tertiary, #8a8a8a); + + &[data-connected="true"] { + background: currentColor; + box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); + } +`; + +const Form = styled.form` + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; + +const Summary = styled.div` + border: var(--stroke-xs, 1px) solid var(--border-primary, #e6e6e9); + border-radius: var(--corner-radius-lg, 12px); + background: var(--surface-base, #f5f5f7); + padding: var(--spacing-md, 16px); +`; + +const SummaryGrid = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--spacing-md, 16px); + margin-bottom: var(--spacing-md, 16px); +`; + +const PickerSection = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-sm, 12px); + align-items: flex-start; +`; + +const PickerNote = styled.span` + font-size: var(--font-size-sm, 13px); + color: var(--text-secondary, #5a5a5a); +`; + +const SummaryItem = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-2xs, 6px); + min-width: 0; +`; + +const SummaryLabel = styled.span` + font-size: var(--font-size-xs, 12px); + font-weight: var(--font-weight-medium, 500); + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-tertiary, #8a8a8a); +`; + +const SummaryValue = styled.span` + font-size: var(--font-size-sm, 13px); + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; + word-break: break-all; +`; + +const FooterRow = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/platform/CreateCustomer.tsx b/apps/examples/grid-global-accounts-example-app/src/views/platform/CreateCustomer.tsx new file mode 100644 index 000000000..187a41e40 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/platform/CreateCustomer.tsx @@ -0,0 +1,175 @@ +import styled from "@emotion/styled"; +import { Button, Dialog, Field, Input } from "@lightsparkdev/origin"; +import { useState } from "react"; + +import { DismissibleAlert } from "../../components/DismissibleAlert"; +import { createCustomer } from "../../flows/customer"; +import { useAppState, type ActiveCustomer } from "../../state/store"; + +/** + * Create-customer action: a Button that opens an Origin Dialog with the + * customer form. On submit it calls the decoupled `createCustomer` operation + * (`flows/customer.ts`) with the held `reporter` + `platformAuth`, then adds + * the result to the session-local customers list and selects it as active. + * + * Disabled until the platform is connected — `createCustomer` needs an + * `ApiAuth`, which only exists once the Config panel has stored `platformAuth`. + * + * On success it optimistically prepends the new customer (`addCustomer`) so it + * shows immediately, then fires `onCreated` so the parent table re-runs its + * single grouped `GET /customers/internal-accounts` fetch (the authoritative + * row + balance). + */ +export function CreateCustomer({ onCreated }: { onCreated?: () => void }) { + const { platformAuth, reporter, addCustomer, setActiveCustomer } = + useAppState(); + const [open, setOpen] = useState(false); + const [fullName, setFullName] = useState(""); + const [email, setEmail] = useState(""); + const [platformCustomerId, setPlatformCustomerId] = useState(""); + const [submitting, setSubmitting] = useState(false); + const [error, setError] = useState(null); + + const connected = platformAuth !== null; + + function reset() { + setFullName(""); + setEmail(""); + setPlatformCustomerId(""); + setError(null); + setSubmitting(false); + } + + async function submit() { + if (!platformAuth) return; + setSubmitting(true); + setError(null); + try { + const result = await createCustomer(reporter, platformAuth, { + fullName, + email, + platformCustomerId, + }); + const customer: ActiveCustomer = { + id: result.customerId, + name: fullName.trim() || "Test User", + email: email.trim(), + accountId: result.accountId, + status: "Active", + walletState: result.accountId ? "Provisioned" : "Pending", + }; + addCustomer(customer); + setActiveCustomer(customer); + reporter.status(`Customer ${customer.name} created.`, "success"); + onCreated?.(); + setOpen(false); + reset(); + } catch (err) { + const message = err instanceof Error ? err.message : String(err); + setError(message); + reporter.status("Create customer failed.", "error"); + } finally { + setSubmitting(false); + } + } + + return ( + { + setOpen(next); + if (!next) reset(); + }} + > + } + > + Create customer + + + + + + + Create customer + + Provisions a business customer and a USDB internal account on the + connected platform. + + + +
{ + e.preventDefault(); + void submit(); + }} + > + {error && ( + setError(null)} + /> + )} + + + Legal name + setFullName(e.target.value)} + /> + + Defaults to “Test User” if left blank. + + + + + Email + setEmail(e.target.value)} + /> + + + + Platform customer ID + setPlatformCustomerId(e.target.value)} + /> + + Your own reference for this customer. + + + +
+ + }> + Cancel + + + + + + + ); +} + +const Form = styled.form` + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/platform/CustomersTable.tsx b/apps/examples/grid-global-accounts-example-app/src/views/platform/CustomersTable.tsx new file mode 100644 index 000000000..2970f1519 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/platform/CustomersTable.tsx @@ -0,0 +1,320 @@ +import styled from "@emotion/styled"; +import { Button, Card, Table } from "@lightsparkdev/origin"; +import { useCallback, useEffect, useRef, useState } from "react"; + +import { + groupCustomerWallets, + listAllInternalAccounts, + type CustomerWallet, +} from "../../flows/customer"; +import { formatMoney } from "../../lib/format-money"; +import { useAppState, type ActiveCustomer } from "../../state/store"; +import { CreateCustomer } from "./CreateCustomer"; +import { FundCustomer } from "./FundCustomer"; + +/** + * Customers table — one row per customer, derived from a SINGLE + * `GET /customers/internal-accounts` sweep (no `customerId` filter), grouped by + * owning customer. Each row shows the customer's shortened id (full on hover) + * and its spendable-wallet balance, both straight from that one fetch — no + * per-customer follow-up calls. Each row's wallet `accountId` is carried inline, + * so "Act as" scopes into the Customer view (`setActiveCustomer` + + * `setPersona("customer")`) without an extra request. + */ +export function CustomersTable() { + const { + platformAuth, + reporter, + setCustomers, + setActiveCustomer, + setPersona, + } = useAppState(); + const connected = platformAuth !== null; + + const [loading, setLoading] = useState(false); + const [truncated, setTruncated] = useState(false); + const [wallets, setWallets] = useState([]); + // Guards against a stale fetch (e.g. after disconnect/reconnect) clobbering a + // newer one's results. + const fetchSeq = useRef(0); + + const refresh = useCallback(async () => { + if (!platformAuth) return; + const seq = ++fetchSeq.current; + setLoading(true); + try { + const { accounts, truncated } = await listAllInternalAccounts( + reporter, + platformAuth, + ); + if (seq !== fetchSeq.current) return; // superseded + const grouped = groupCustomerWallets(accounts); + setWallets(grouped); + setTruncated(truncated); + // Mirror the customer ids into the store so other views (ContextChip, + // CustomerView) and the de-dupe logic stay consistent. + setCustomers( + grouped.map((w) => ({ + id: w.customerId, + name: shortenId(w.customerId), + accountId: w.accountId, + status: "Active", + })), + ); + } catch (err) { + if (seq !== fetchSeq.current) return; + reporter.status( + err instanceof Error ? err.message : "Couldn't load customers.", + "error", + ); + } finally { + if (seq === fetchSeq.current) setLoading(false); + } + }, [platformAuth, reporter, setCustomers]); + + // Fetch on connect (and clear when disconnected). + useEffect(() => { + if (connected) { + void refresh(); + } else { + fetchSeq.current++; + setWallets([]); + setTruncated(false); + setCustomers([]); + } + // setCustomers is stable per the store contract; refresh changes with auth. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [connected, refresh]); + + function actAs(wallet: CustomerWallet) { + // The grouped fetch already carried the wallet account id, so we scope the + // Customer view directly — no per-customer fetch. + const customer: ActiveCustomer = { + id: wallet.customerId, + name: shortenId(wallet.customerId) || "Customer", + accountId: wallet.accountId, + status: "Active", + }; + setActiveCustomer(customer); + setPersona("customer"); + } + + const subtitle = buildSubtitle({ + connected, + loading, + shown: wallets.length, + truncated, + }); + + return ( + + + + + Customers + {subtitle} + + void refresh()} /> + + + + + {wallets.length === 0 ? ( + + {connected ? ( + <> + + {loading ? "Loading customers…" : "No customers yet"} + + + {loading + ? "Fetching this platform's customer wallets from the Grid API." + : "Create your first customer to provision a wallet and act as them."} + + + ) : ( + <> + Connect to get started + + Add your platform credentials above to list your customers. + + + )} + + ) : ( + + + + Customer + + Balance + + + Action + + + + + {wallets.map((wallet) => ( + + + + {initials(wallet.customerId)} + + {shortenId(wallet.customerId)} + + + + + + + {formatMoney(wallet.amount, wallet.currency)} + + + + + + + void refresh()} + /> + + + + + + ))} + + + )} + + + ); +} + +/** Subtitle: connect prompt, loading, or a "showing N" summary. */ +function buildSubtitle(args: { + connected: boolean; + loading: boolean; + shown: number; + truncated: boolean; +}): string { + const { connected, loading, shown, truncated } = args; + if (!connected) return "Connect your platform credentials to list customers."; + if (shown === 0) + return loading ? "Loading customers…" : "Customers you create appear here."; + if (truncated) return `Showing ${shown} customers (more available).`; + return `${shown} customer${shown === 1 ? "" : "s"}.`; +} + +/** Shorten an LSID for display: keep the prefix and the last few id chars. */ +function shortenId(id: string): string { + if (!id) return ""; + const [prefix, rest] = id.includes(":") ? id.split(/:(.*)/s) : ["", id]; + const tail = rest.length > 8 ? `…${rest.slice(-6)}` : rest; + return prefix ? `${prefix}:${tail}` : tail; +} + +/** First letters of the last id segment, uppercased. */ +function initials(id: string): string { + const rest = id.includes(":") ? id.slice(id.indexOf(":") + 1) : id; + const trimmed = rest.replace(/[^a-zA-Z0-9]/g, ""); + if (!trimmed) return "?"; + return trimmed.slice(0, 2).toUpperCase(); +} + +const HeaderLayout = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--spacing-md, 16px); + width: 100%; +`; + +const Empty = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-2xs, 6px); + text-align: center; + padding: var(--spacing-2xl, 40px) var(--spacing-lg, 24px); +`; + +const EmptyTitle = styled.div` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-semibold, 600); + color: var(--text-primary, #1a1a1a); +`; + +const EmptyBody = styled.div` + font-size: var(--font-size-sm, 13px); + color: var(--text-tertiary, #8a8a8a); + max-width: 320px; + line-height: 1.45; +`; + +const NameCell = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); + min-width: 0; +`; + +const Avatar = styled.span` + flex: none; + width: 28px; + height: 28px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-semibold, 600); + letter-spacing: 0.3px; + /* Pair with --surface-inverse: both flip by mode (dark surface + light text + * in light mode, light surface + dark text in dark mode). --text-on-primary + * was undefined and fell back to #fff, going white-on-near-white in dark. */ + color: var(--text-inverse, #f8f8f7); + background: var(--surface-inverse, #1a1a1a); +`; + +const CustomerId = styled.span` + font-size: var(--font-size-sm, 13px); + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; + max-width: 240px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const BalanceText = styled.span` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-medium, 500); + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; +`; + +const RightAlign = styled.div` + display: flex; + justify-content: flex-end; +`; + +const ActionGroup = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/platform/FundCustomer.tsx b/apps/examples/grid-global-accounts-example-app/src/views/platform/FundCustomer.tsx new file mode 100644 index 000000000..bcadc6833 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/platform/FundCustomer.tsx @@ -0,0 +1,323 @@ +import styled from "@emotion/styled"; +import { + Alert, + Button, + Dialog, + Field, + Input, + Progress, +} from "@lightsparkdev/origin"; +import { useState } from "react"; + +import { DismissibleAlert } from "../../components/DismissibleAlert"; +import { fundCustomerFromPlatform, type FundStage } from "../../flows/money"; +import { currencyCode } from "../../lib/format-money"; +import { useAppState, type ActiveCustomer } from "../../state/store"; + +/** + * Staged progress for the fund flow. The backend only signals PROCESSING → + * COMPLETE, so the earlier steps are approximated: each stage maps to a label + * and a determinate percentage, advancing the bar as `onStage` fires. + */ +const STAGE_META: Record = { + quoting: { label: "Creating quote…", value: 25 }, + executing: { label: "Executing…", value: 55 }, + processing: { label: "Processing…", value: 80 }, + completed: { label: "Complete", value: 100 }, + failed: { label: "Failed", value: 100 }, +}; + +/** + * Per-customer Fund action: a compact Button that opens an Origin Dialog with an + * amount input, then funds the customer from the platform's configured funding + * account via the proven quote → execute → poll flow (`fundCustomerFromPlatform` + * in `flows/money.ts`, mirroring + * `sparkcore/.../test_token_fund_in_live.py::_gen_create_and_execute_quote`). + * + * The amount is collected in major units and converted to minor units using the + * destination account's `currency.decimals` (the same block the balance cell + * renders). On a terminal status the parent refreshes this customer's balance. + * + * Disabled (with an explanation) when no platform funding account is configured + * or the customer has no provisioned internal account. + */ +export function FundCustomer({ + customer, + destinationAccountId, + currency, + onFunded, +}: { + customer: ActiveCustomer; + /** The customer's internal account LSID, from its balance fetch. */ + destinationAccountId: string | null; + /** The destination account's currency block (for decimals + code). */ + currency: unknown; + /** Called after a terminal transaction so the table can refresh the balance. */ + onFunded: () => void; +}) { + const { platformAuth, platformFundingAccountId, reporter } = useAppState(); + const [open, setOpen] = useState(false); + const [amount, setAmount] = useState(""); + const [submitting, setSubmitting] = useState(false); + const [stage, setStage] = useState(null); + const [error, setError] = useState(null); + const [result, setResult] = useState(null); + + const connected = platformAuth !== null; + const hasFundingAccount = platformFundingAccountId.trim().length > 0; + const hasDestination = Boolean(destinationAccountId); + const code = currencyCode(currency); + const decimals = currencyDecimals(currency); + + // Why the action can't run, surfaced both as a disabled-state tooltip and an + // in-dialog notice. + const blockedReason = !connected + ? "Connect the platform first." + : !hasFundingAccount + ? "Set a platform funding account in the config panel above to fund customers." + : !hasDestination + ? "This customer has no provisioned internal account yet." + : null; + + function reset() { + setAmount(""); + setError(null); + setResult(null); + setSubmitting(false); + setStage(null); + } + + async function submit() { + if (!platformAuth || !destinationAccountId) return; + setSubmitting(true); + setError(null); + setResult(null); + setStage(null); + try { + const major = parseFloat(amount || "0"); + if (!Number.isFinite(major) || major <= 0) + throw new Error("Enter an amount to fund."); + const amountMinor = Math.round(major * 10 ** decimals); + if (amountMinor <= 0) throw new Error("Enter an amount to fund."); + + reporter.status(`Funding ${customer.name || customer.id}…`, "info"); + const out = await fundCustomerFromPlatform( + reporter, + platformAuth, + { + fundingAccountId: platformFundingAccountId, + destinationAccountId, + amountMinor, + }, + { onStage: setStage }, + ); + + if (out.status === "COMPLETED") { + setResult(`Funded — transaction ${out.transactionId} COMPLETED.`); + reporter.status("Funding complete.", "success"); + onFunded(); + } else if (out.status === "FAILED") { + setError(`Transaction ${out.transactionId} FAILED.`); + reporter.status("Funding failed.", "error"); + } else { + // Non-terminal: the poll timed out. Surface the last-seen status; the + // balance may still settle, so refresh anyway. + setResult( + `Submitted — transaction ${out.transactionId} is ${ + out.status || "pending" + }.`, + ); + reporter.status("Funding submitted (still settling).", "info"); + onFunded(); + } + } catch (err) { + const message = err instanceof Error ? err.message : String(err); + setError(message); + reporter.status("Funding failed.", "error"); + } finally { + setSubmitting(false); + } + } + + const formId = `fund-customer-form-${customer.id}`; + + return ( + { + setOpen(next); + if (!next) reset(); + }} + > + + } + > + Fund + + + + + + + Fund {customer.name || "customer"} + + Send value from the platform funding account to this customer. + Creates a quote, executes it with the platform's API token (no + wallet signature), then polls the transaction to completion. + + + +
{ + e.preventDefault(); + void submit(); + }} + > + {blockedReason && ( + + )} + {error && ( + setError(null)} + /> + )} + {result && ( + setResult(null)} + /> + )} + + {(submitting || stage) && stage && ( + + + {STAGE_META[stage].label} + + + + + + + )} + + + + From + + {platformFundingAccountId || "—"} + + + + To + + {destinationAccountId ?? "—"} + + + + + + Amount{code ? ` (${code})` : ""} + setAmount(e.target.value)} + disabled={Boolean(blockedReason)} + /> + + Converted to minor units using the account's currency decimals + ({decimals}). + + + +
+ + }> + Close + + + + + + + ); +} + +/** Minor-unit decimals from a Currency block; default 2 (mirrors format-money). */ +function currencyDecimals(currency: unknown): number { + if (currency && typeof currency === "object") { + const c = currency as Record; + if (typeof c.decimals === "number" && c.decimals >= 0) return c.decimals; + } + return 2; +} + +const Form = styled.form` + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; + +const ProgressWrap = styled.div` + display: flex; + flex-direction: column; +`; + +const Detail = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-sm, 12px); + border: var(--stroke-xs, 1px) solid var(--border-primary, #e6e6e9); + border-radius: var(--corner-radius-lg, 12px); + background: var(--surface-base, #f5f5f7); + padding: var(--spacing-md, 16px); +`; + +const DetailRow = styled.div` + display: flex; + align-items: baseline; + justify-content: space-between; + gap: var(--spacing-md, 16px); +`; + +const DetailLabel = styled.span` + font-size: var(--font-size-xs, 12px); + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-tertiary, #8a8a8a); +`; + +const Mono = styled.span` + font-family: var(--font-family-mono, ui-monospace, monospace); + font-size: var(--font-size-xs, 12px); + color: var(--text-secondary, #555); + max-width: 60%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/platform/PlatformView.tsx b/apps/examples/grid-global-accounts-example-app/src/views/platform/PlatformView.tsx new file mode 100644 index 000000000..6ddfc5e8c --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/platform/PlatformView.tsx @@ -0,0 +1,29 @@ +import styled from "@emotion/styled"; + +import { StatusBanner } from "../../components/StatusBanner"; +import { Config } from "./Config"; +import { CustomersTable } from "./CustomersTable"; + +/** + * Platform view — the admin-dashboard side of a Grid integration. + * + * Composes the config / auth panel (the entry point) over the customers table + * (create + "act as"). A transient status line surfaces the latest reporter + * message so platform operations give feedback without opening the debug + * drawer. Until the platform is connected, only the config panel is actionable. + */ +export function PlatformView() { + return ( + + + + + + ); +} + +const Stack = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-lg, 24px); +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/webauthn.ts b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts index 9abb0fbef..4ee7df415 100644 --- a/apps/examples/grid-global-accounts-example-app/src/webauthn.ts +++ b/apps/examples/grid-global-accounts-example-app/src/webauthn.ts @@ -2,15 +2,31 @@ // // The sandbox flows accept magic placeholder strings, but a real Turnkey // sub-org needs a genuine WebAuthn credential. These helpers drive the -// browser's authenticator (Touch ID, etc.) and base64url-encode the results -// into the same fields the sandbox flow uses, so Create / Add / Verify work -// unchanged against production Turnkey. +// browser's authenticator and base64url-encode the results into the same +// fields the sandbox flow uses, so Create / Add / Verify work unchanged +// against production Turnkey. +// +// AUTHENTICATOR: we target a ROAMING security key (e.g. a YubiKey), not the +// platform authenticator (Touch ID / Windows Hello). Registration asks the +// browser for a cross-platform authenticator; authentication targets the +// registered credential id(s) over USB / NFC. This keeps the wallet's signing +// key on a removable hardware key rather than the laptop's secure enclave. // // NOTE: WebAuthn binds a credential to an RP ID that must be a suffix of the // page origin — on localhost that means rpId="localhost". The Turnkey sub-org // must have been created with the SAME RP ID or verification will fail. -import { el } from "./ui"; +// COSE algorithm identifiers we accept for the credential public key. ES256 +// (-7) is universally supported by security keys; RS256 (-257) is a fallback. +const PUB_KEY_CRED_PARAMS: PublicKeyCredentialParameters[] = [ + { type: "public-key", alg: -7 }, // ES256 + { type: "public-key", alg: -257 }, // RS256 +]; + +// Transports a roaming security key (YubiKey) is reached over. Listed in the +// assertion's allowCredentials so the browser steers the user to the security +// key rather than offering a platform passkey. +export const SECURITY_KEY_TRANSPORTS: AuthenticatorTransport[] = ["usb", "nfc"]; export function bytesToB64Url(bytes: Uint8Array): string { let bin = ""; @@ -27,8 +43,11 @@ export function b64UrlToBytes(value: string): Uint8Array { return bytes; } -export function passkeyRpId(): string { - return el("passkey-rp-id").value.trim() || location.hostname; +// Resolve the WebAuthn RP ID: a caller-supplied value (the passkey-rp-id form +// field, in the UI), falling back to the page hostname. Must be a suffix of the +// page origin and match the RP ID the Turnkey sub-org was created with. +export function passkeyRpId(rpId?: string): string { + return rpId?.trim() || location.hostname; } export interface RealAttestation { @@ -38,32 +57,61 @@ export interface RealAttestation { attestationObject: string; } +/** + * Build the `PublicKeyCredentialCreationOptions` for a registration ceremony + * that targets a ROAMING SECURITY KEY (YubiKey): + * - `authenticatorAttachment: "cross-platform"` makes the browser prompt for + * a removable security key (USB / NFC), NOT the platform authenticator. + * - `residentKey: "discouraged"` + `requireResidentKey: false`: the key need + * not store a discoverable credential — we always have its id to put in + * `allowCredentials`, which lets cheaper non-resident keys work and avoids + * burning the key's limited resident-credential slots. + * - `userVerification: "preferred"`: use the PIN/biometric if the key has one, + * but don't hard-require it (a basic touch-only key still works). + * - `pubKeyCredParams` includes ES256 (-7), which every security key supports. + * + * Pure (no DOM / crypto side effects) so it can be unit-tested; the caller + * supplies the random challenge + user id. + */ +export function buildCreationOptions( + nickname: string, + rpId: string | undefined, + challenge: BufferSource, + userId: BufferSource, +): PublicKeyCredentialCreationOptions { + return { + rp: { id: passkeyRpId(rpId), name: "Grid Example App" }, + user: { + id: userId, + name: nickname || "grid-example-user", + displayName: nickname || "Grid Example User", + }, + challenge, + pubKeyCredParams: PUB_KEY_CRED_PARAMS, + authenticatorSelection: { + authenticatorAttachment: "cross-platform", + residentKey: "discouraged", + requireResidentKey: false, + userVerification: "preferred", + }, + attestation: "none", + timeout: 60000, + }; +} + // Real registration ceremony — produces the attestation that Create/Add send. +// `attestation.credentialId` is the RAW WebAuthn credential id (base64url): the +// caller should persist it so a later assertion can target this security key +// via allowCredentials. (The Grid credential id returned by POST +// /auth/credentials is a DIFFERENT, server-side id — not usable here.) export async function createRealPasskey( nickname: string, + rpId?: string, ): Promise { const challenge = crypto.getRandomValues(new Uint8Array(32)); const userId = crypto.getRandomValues(new Uint8Array(16)); const credential = (await navigator.credentials.create({ - publicKey: { - rp: { id: passkeyRpId(), name: "Grid Example App" }, - user: { - id: userId, - name: nickname || "grid-example-user", - displayName: nickname || "Grid Example User", - }, - challenge, - pubKeyCredParams: [ - { type: "public-key", alg: -7 }, - { type: "public-key", alg: -257 }, - ], - authenticatorSelection: { - residentKey: "preferred", - userVerification: "preferred", - }, - attestation: "none", - timeout: 60000, - }, + publicKey: buildCreationOptions(nickname, rpId, challenge, userId), })) as PublicKeyCredential | null; if (!credential) throw new Error("Passkey creation returned no credential"); const response = credential.response as AuthenticatorAttestationResponse; @@ -71,7 +119,9 @@ export async function createRealPasskey( challenge: bytesToB64Url(challenge), credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), - attestationObject: bytesToB64Url(new Uint8Array(response.attestationObject)), + attestationObject: bytesToB64Url( + new Uint8Array(response.attestationObject), + ), }; } @@ -82,10 +132,59 @@ export interface RealAssertion { signature: string; } -// Real assertion ceremony — signs the issued session challenge. +/** + * Build `allowCredentials` from the registered passkeys' RAW WebAuthn credential + * ids (base64url). Each entry carries `transports: ["usb","nfc"]` so the browser + * targets the roaming security key. Blank / duplicate ids are dropped. + * + * When NO ids are known (e.g. a credential registered before we started storing + * raw ids), this returns `[]` — an empty allowCredentials lets a discoverable + * (resident) credential on the security key be presented, which is the best we + * can do without the id. Pure + DOM-free for unit testing. + */ +export function buildAllowCredentials( + credentialIds: string[], +): PublicKeyCredentialDescriptor[] { + const seen = new Set(); + const out: PublicKeyCredentialDescriptor[] = []; + for (const id of credentialIds) { + const trimmed = id?.trim(); + if (!trimmed || seen.has(trimmed)) continue; + seen.add(trimmed); + out.push({ + type: "public-key", + id: b64UrlToBytes(trimmed) as BufferSource, + transports: SECURITY_KEY_TRANSPORTS, + }); + } + return out; +} + +/** + * Build the `PublicKeyCredentialRequestOptions` for an assertion that targets a + * roaming security key. Pure (no DOM); the caller encodes the challenge bytes. + */ +export function buildAssertionOptions( + challenge: BufferSource, + credentialIds: string[], + rpId?: string, +): PublicKeyCredentialRequestOptions { + return { + rpId: passkeyRpId(rpId), + challenge, + allowCredentials: buildAllowCredentials(credentialIds), + userVerification: "preferred", + timeout: 60000, + }; +} + +// Real assertion ceremony — signs the issued session challenge with the security +// key. `credentialIds` are the RAW WebAuthn credential ids (base64url) of the +// registered passkey(s); pass every one a wallet has so the key can match any. export async function signWithPasskey( challengeValue: string, - credentialId: string, + credentialIds: string | string[], + rpId?: string, ): Promise { if (!challengeValue) { throw new Error( @@ -95,23 +194,21 @@ export async function signWithPasskey( // Turnkey's WebAuthn challenge is the UTF-8 bytes of the sha256-hex challenge // string returned by /challenge — NOT base64url-decoded. const challenge = new TextEncoder().encode(challengeValue); - const allowCredentials: PublicKeyCredentialDescriptor[] = credentialId - ? [{ type: "public-key", id: b64UrlToBytes(credentialId) as BufferSource }] + const ids = Array.isArray(credentialIds) + ? credentialIds + : credentialIds + ? [credentialIds] : []; const credential = (await navigator.credentials.get({ - publicKey: { - rpId: passkeyRpId(), - challenge, - allowCredentials, - userVerification: "preferred", - timeout: 60000, - }, + publicKey: buildAssertionOptions(challenge, ids, rpId), })) as PublicKeyCredential | null; if (!credential) throw new Error("Passkey assertion returned no credential"); const response = credential.response as AuthenticatorAssertionResponse; return { credentialId: bytesToB64Url(new Uint8Array(credential.rawId)), - authenticatorData: bytesToB64Url(new Uint8Array(response.authenticatorData)), + authenticatorData: bytesToB64Url( + new Uint8Array(response.authenticatorData), + ), clientDataJson: bytesToB64Url(new Uint8Array(response.clientDataJSON)), signature: bytesToB64Url(new Uint8Array(response.signature)), }; diff --git a/apps/examples/grid-global-accounts-example-app/tsconfig.json b/apps/examples/grid-global-accounts-example-app/tsconfig.json index 4cdd777fe..e392ebf28 100644 --- a/apps/examples/grid-global-accounts-example-app/tsconfig.json +++ b/apps/examples/grid-global-accounts-example-app/tsconfig.json @@ -1,15 +1,16 @@ { "compilerOptions": { - "target": "ES2020", + "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", + "jsx": "react-jsx", "strict": true, "noEmit": true, "isolatedModules": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"] + "lib": ["ES2022", "DOM", "DOM.Iterable"] }, "include": ["src"] } diff --git a/apps/examples/grid-global-accounts-example-app/vite.config.ts b/apps/examples/grid-global-accounts-example-app/vite.config.ts index e75698c77..e8dda07de 100644 --- a/apps/examples/grid-global-accounts-example-app/vite.config.ts +++ b/apps/examples/grid-global-accounts-example-app/vite.config.ts @@ -1,3 +1,4 @@ +import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import settings from "../settings.json"; @@ -9,6 +10,7 @@ import settings from "../settings.json"; const PROD_GRID_URL = process.env.GRID_URL ?? "https://api.lightspark.com"; export default defineConfig({ + plugins: [react()], server: { port: settings.gridGlobalAccountsExampleApp.port, proxy: { From 8fcbeabf33fc8eede57e8acb9e836bc6bf12d4d8 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Fri, 12 Jun 2026 19:09:02 +0000 Subject: [PATCH 082/133] CI update lock file for PR --- yarn.lock | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/yarn.lock b/yarn.lock index 87b117f87..2464658f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3181,11 +3181,20 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/grid-global-accounts-example-app@workspace:apps/examples/grid-global-accounts-example-app" dependencies: + "@emotion/react": "npm:^11.14.0" + "@emotion/styled": "npm:^11.14.1" + "@lightsparkdev/origin": "npm:*" "@turnkey/api-key-stamper": "npm:^0.6.5" "@turnkey/crypto": "npm:^2.8.14" "@turnkey/encoding": "npm:^0.6.0" + "@types/react": "npm:^19.2.15" + "@types/react-dom": "npm:^19.2.3" + "@vitejs/plugin-react": "npm:^5.2.0" + react: "npm:^19.2.6" + react-dom: "npm:^19.2.6" typescript: "npm:^5.6.2" vite: "npm:^8.0.14" + vitest: "npm:^4.1.7" languageName: unknown linkType: soft From 0c0c505f7d96f4936ba39105916dc9bb263c2c15 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Sat, 13 Jun 2026 10:20:31 -0700 Subject: [PATCH 083/133] [js] Upgrade Turbo for worktree cache sharing (#28807) GitOrigin-RevId: c2003a5dd586cf79a197b385b208d7db556d86c8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4d8d62d91..6338f2e26 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "octokit": "^4.0.2", "prismjs": "^1.29.0", "ts-prune": "^0.10.3", - "turbo": "^2.5.4" + "turbo": "^2.9.17" }, "dependenciesMeta": { "@central-icons-react/round-filled-radius-3-stroke-1.5": { From 657cc5f31e2488458d0c6330e12d958dd7b871a6 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Sat, 13 Jun 2026 10:23:28 -0700 Subject: [PATCH 084/133] Enable global Yarn cache (#28798) ## Reason New worktrees currently start with an empty project-local Yarn cache, which makes initial installs slower even when the same dependencies were already fetched elsewhere on the machine. Yarn supports a shared global package cache, and this repo does not commit `.yarn/cache`, so enabling it improves local worktree setup without changing the `node_modules` linker. ## Overview Set `enableGlobalCache: true` in `js/.yarnrc.yml`. This keeps `nodeLinker: node-modules` and the default `nmMode: classic`; each worktree still materializes its own `node_modules` tree. ## Test Plan - `cd js && env -u YARN_ENABLE_GLOBAL_CACHE -u YARN_NM_MODE yarn config get enableGlobalCache` - `cd js && env -u YARN_ENABLE_GLOBAL_CACHE -u YARN_NM_MODE yarn config get cacheFolder` - `cd js && env -u YARN_ENABLE_GLOBAL_CACHE -u YARN_NM_MODE yarn config get nmMode` - `cd js && env -u YARN_ENABLE_GLOBAL_CACHE -u YARN_NM_MODE yarn install --immutable --mode=skip-build` - pre-commit hook: `yarn install` and `yarn format` GitOrigin-RevId: cb8b20e3746092055e726c70937b4148ec6d2a26 --- .yarnrc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index 888f1b0cd..13ab38360 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1,6 +1,6 @@ compressionLevel: mixed -enableGlobalCache: false +enableGlobalCache: true nodeLinker: node-modules From d297d001548a59abfa430b3b4ce0c114ffffaeff Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Sat, 13 Jun 2026 17:27:54 +0000 Subject: [PATCH 085/133] CI update lock file for PR --- yarn.lock | 118 +++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/yarn.lock b/yarn.lock index 2464658f3..3e7141aac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5725,6 +5725,48 @@ __metadata: languageName: node linkType: hard +"@turbo/darwin-64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/darwin-64@npm:2.9.17" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@turbo/darwin-arm64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/darwin-arm64@npm:2.9.17" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@turbo/linux-64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/linux-64@npm:2.9.17" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@turbo/linux-arm64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/linux-arm64@npm:2.9.17" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@turbo/windows-64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/windows-64@npm:2.9.17" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@turbo/windows-arm64@npm:2.9.17": + version: 2.9.17 + resolution: "@turbo/windows-arm64@npm:2.9.17" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@turnkey/api-key-stamper@npm:^0.6.5": version: 0.6.5 resolution: "@turnkey/api-key-stamper@npm:0.6.5" @@ -13100,7 +13142,7 @@ __metadata: octokit: "npm:^4.0.2" prismjs: "npm:^1.29.0" ts-prune: "npm:^0.10.3" - turbo: "npm:^2.5.4" + turbo: "npm:^2.9.17" dependenciesMeta: "@central-icons-react/round-filled-radius-3-stroke-1.5": built: false @@ -18559,74 +18601,32 @@ __metadata: languageName: node linkType: hard -"turbo-darwin-64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-darwin-64@npm:2.5.4" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - -"turbo-darwin-arm64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-darwin-arm64@npm:2.5.4" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - -"turbo-linux-64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-linux-64@npm:2.5.4" - conditions: os=linux & cpu=x64 - languageName: node - linkType: hard - -"turbo-linux-arm64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-linux-arm64@npm:2.5.4" - conditions: os=linux & cpu=arm64 - languageName: node - linkType: hard - -"turbo-windows-64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-windows-64@npm:2.5.4" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - -"turbo-windows-arm64@npm:2.5.4": - version: 2.5.4 - resolution: "turbo-windows-arm64@npm:2.5.4" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - -"turbo@npm:^2.5.4": - version: 2.5.4 - resolution: "turbo@npm:2.5.4" +"turbo@npm:^2.9.17": + version: 2.9.17 + resolution: "turbo@npm:2.9.17" dependencies: - turbo-darwin-64: "npm:2.5.4" - turbo-darwin-arm64: "npm:2.5.4" - turbo-linux-64: "npm:2.5.4" - turbo-linux-arm64: "npm:2.5.4" - turbo-windows-64: "npm:2.5.4" - turbo-windows-arm64: "npm:2.5.4" + "@turbo/darwin-64": "npm:2.9.17" + "@turbo/darwin-arm64": "npm:2.9.17" + "@turbo/linux-64": "npm:2.9.17" + "@turbo/linux-arm64": "npm:2.9.17" + "@turbo/windows-64": "npm:2.9.17" + "@turbo/windows-arm64": "npm:2.9.17" dependenciesMeta: - turbo-darwin-64: + "@turbo/darwin-64": optional: true - turbo-darwin-arm64: + "@turbo/darwin-arm64": optional: true - turbo-linux-64: + "@turbo/linux-64": optional: true - turbo-linux-arm64: + "@turbo/linux-arm64": optional: true - turbo-windows-64: + "@turbo/windows-64": optional: true - turbo-windows-arm64: + "@turbo/windows-arm64": optional: true bin: turbo: bin/turbo - checksum: 10/43dd952192a1261de3845ecac96d4f42ea6d8e49eaa4c339c029dbe010a1323957ef4b0080f8f06e3cd0169c1f00c356d32cbabde1ee08c72b0708f90994a774 + checksum: 10/14fff894c7ea1f4d859c4903e61712fe5c3af7b10310b21e0811d0351c4d63c874bdb296db4c23915db478b45fbe471d7f0cea4dc33011ee9e0467a355f3e9d1 languageName: node linkType: hard From dabbef1e172ecf0471b08de42a32758153adeecb Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Mon, 15 Jun 2026 08:48:59 -0700 Subject: [PATCH 086/133] [origin] Fix sidebar navigation roles (#28838) ## Summary - Fixes DES-67 by removing default ARIA menu semantics from Origin Sidebar navigation containers. - Keeps explicit `role` forwarding on `Sidebar.Menu` as an escape hatch for consumers that implement complete menu/menuitem semantics and keyboard behavior. - Clarifies in stories/tests that Sidebar navigation is a layout/navigation grouping primitive; command menus should use Origin Menu, and tree semantics should use `Sidebar.Tree`. ## Accessibility decision `Sidebar.Menu` and expandable submenu containers no longer default to `role=\"menu\"` because sidebar navigation items do not implement full ARIA menu keyboard behavior. Consumers can still pass `role=\"menu\"` explicitly when they own the corresponding `menuitem` semantics and interaction model. ## Storybook preview Origin Storybook: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/ - `Components/Sidebar/Default`: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--default - `Components/Sidebar/WithTreeItems`: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--with-tree-items - `Components/Sidebar/AllItemVariants`: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--all-item-variants ## Verification - `mise exec -- corepack yarn workspace @lightsparkdev/origin test:unit src/components/Sidebar/Sidebar.unit.test.tsx` - `mise exec -- corepack yarn workspace @lightsparkdev/origin exec prettier --check src/components/Sidebar/parts.tsx src/components/Sidebar/Sidebar.unit.test.tsx src/components/Sidebar/Sidebar.stories.tsx` - `mise exec -- corepack yarn workspace @lightsparkdev/origin exec eslint src/components/Sidebar/parts.tsx src/components/Sidebar/Sidebar.unit.test.tsx src/components/Sidebar/Sidebar.stories.tsx` - `mise exec -- corepack yarn workspace @lightsparkdev/origin types` Jira: https://lightspark.atlassian.net/browse/DES-67 Co-authored-by: Cursor GitOrigin-RevId: 76341209322fdce512d9c5204eeba89f2985e363 --- .../components/Sidebar/Sidebar.stories.tsx | 11 ++++-- .../components/Sidebar/Sidebar.unit.test.tsx | 36 ++++++++++++++++++- .../origin/src/components/Sidebar/parts.tsx | 8 +---- 3 files changed, 44 insertions(+), 11 deletions(-) diff --git a/packages/origin/src/components/Sidebar/Sidebar.stories.tsx b/packages/origin/src/components/Sidebar/Sidebar.stories.tsx index 3f5c62ef6..d209b2c28 100644 --- a/packages/origin/src/components/Sidebar/Sidebar.stories.tsx +++ b/packages/origin/src/components/Sidebar/Sidebar.stories.tsx @@ -45,6 +45,8 @@ type Story = StoryObj; /** * Default expanded sidebar with groups and items. + * Sidebar.Menu is a roleless navigation grouping primitive. If consumers opt + * into role="menu", they own valid menuitem semantics and menu keyboard behavior. */ export const Default: Story = { args: { collapsed: false }, @@ -667,14 +669,15 @@ export const WithDrilldownItems: Story = { }; /** - * TreeItem variant - expandable items with horizontal chevron that rotates 90° when expanded. + * TreeItem visual variant - expandable rows with a horizontal chevron. For + * true ARIA tree semantics, wrap items in Sidebar.Tree. */ export const WithTreeItems: Story = { render: () => ( - Tree Navigation + Nested Navigation } @@ -845,7 +848,9 @@ export const AllItemVariants: Story = { - Tree (Horizontal Chevron) + + Tree-Style Row (Horizontal Chevron) + } diff --git a/packages/origin/src/components/Sidebar/Sidebar.unit.test.tsx b/packages/origin/src/components/Sidebar/Sidebar.unit.test.tsx index d2e7cdb90..cf5dd38de 100644 --- a/packages/origin/src/components/Sidebar/Sidebar.unit.test.tsx +++ b/packages/origin/src/components/Sidebar/Sidebar.unit.test.tsx @@ -496,6 +496,39 @@ describe("SidebarContext", () => { }); describe("Accessibility", () => { + describe("Menu", () => { + it("does not use ARIA menu semantics by default", () => { + render( + + + + Dashboard + + + , + ); + + expect(screen.getByTestId("menu")).not.toHaveAttribute("role"); + expect(screen.queryByRole("menu")).not.toBeInTheDocument(); + }); + + it("forwards explicit menu role as an escape hatch", () => { + render( + + + +
Custom command
+ + + , + ); + + expect( + screen.getByRole("menu", { name: "Custom command menu" }), + ).toBeInTheDocument(); + }); + }); + describe("GroupLabel", () => { it("is visually hidden when collapsed", () => { render( @@ -582,7 +615,8 @@ describe("Accessibility", () => { const submenu = document.getElementById(submenuId!); expect(submenu).toBeInTheDocument(); - expect(submenu).toHaveAttribute("role", "menu"); + expect(submenu).not.toHaveAttribute("role"); + expect(screen.queryByRole("menu")).not.toBeInTheDocument(); }); }); diff --git a/packages/origin/src/components/Sidebar/parts.tsx b/packages/origin/src/components/Sidebar/parts.tsx index 2e423358e..a7b0cf67d 100644 --- a/packages/origin/src/components/Sidebar/parts.tsx +++ b/packages/origin/src/components/Sidebar/parts.tsx @@ -332,12 +332,7 @@ export const Menu = React.forwardRef(function Menu( ref, ) { return ( -
+
{children}
); @@ -519,7 +514,6 @@ export const ExpandableItem = React.forwardRef< id={submenuId} className={styles.submenu} data-variant={submenuVariant} - role="menu" > {children}
From c7c3755477b44da594102e38c3756d7442afe204 Mon Sep 17 00:00:00 2001 From: Carson Date: Tue, 16 Jun 2026 12:42:32 -0700 Subject: [PATCH 087/133] feat(gga): customer transactions tab (real Grid history) (#28761) ## Reason Explain *why* this change is being made. ## Overview For large or complex changes, describe what is being changed. ## Test Plan Explain how you tested the change. Co-authored-by: Claude Opus 4.8 (1M context) GitOrigin-RevId: 5a3c39f6a0fca59dc3d4adcbcfc36cf5f3a0a516 --- .../src/flows/__tests__/transactions.test.ts | 148 +++++++ .../src/flows/transactions.ts | 99 +++++ .../src/views/customer/Transactions.tsx | 364 ++++++++++++++++++ .../src/views/customer/WalletHome.tsx | 11 +- 4 files changed, 621 insertions(+), 1 deletion(-) create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/__tests__/transactions.test.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/flows/transactions.ts create mode 100644 apps/examples/grid-global-accounts-example-app/src/views/customer/Transactions.tsx diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/transactions.test.ts b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/transactions.test.ts new file mode 100644 index 000000000..aadc490c7 --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/__tests__/transactions.test.ts @@ -0,0 +1,148 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import type { ApiAuth } from "../../api-client"; +import { createCollectingReporter } from "../../lib/collecting-reporter"; +import { listTransactions } from "../transactions"; + +const auth: ApiAuth = { + clientId: "id", + clientSecret: "secret", + mode: "sandbox", +}; + +// Mock at the api-client boundary so no real API is hit. +vi.mock("../../api-client", () => ({ + apiGet: vi.fn(), +})); +import { apiGet } from "../../api-client"; +const mockGet = vi.mocked(apiGet); + +beforeEach(() => { + mockGet.mockReset(); +}); + +/** The single path argument passed to `apiGet`, split into base + params. */ +function calledPath(): { path: string; params: URLSearchParams } { + const path = mockGet.mock.calls[0][1]; + const query = path.split("?")[1] ?? ""; + return { path, params: new URLSearchParams(query) }; +} + +describe("listTransactions query string", () => { + it("always sends customerId, limit (default 20), and sortOrder=desc", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + + await listTransactions(reporter, auth, { customerId: "Customer:c1" }); + + const { path, params } = calledPath(); + expect(path.startsWith("/transactions?")).toBe(true); + expect(params.get("customerId")).toBe("Customer:c1"); + expect(params.get("limit")).toBe("20"); + expect(params.get("sortOrder")).toBe("desc"); + }); + + it("honors an explicit limit", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + + await listTransactions(reporter, auth, { + customerId: "Customer:c1", + limit: 50, + }); + + expect(calledPath().params.get("limit")).toBe("50"); + }); + + it("omits `type` for ALL and includes it otherwise", async () => { + const { reporter } = createCollectingReporter(); + + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + await listTransactions(reporter, auth, { + customerId: "Customer:c1", + type: "ALL", + }); + expect(calledPath().params.has("type")).toBe(false); + + mockGet.mockReset(); + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + await listTransactions(reporter, auth, { + customerId: "Customer:c1", + type: "INCOMING", + }); + expect(calledPath().params.get("type")).toBe("INCOMING"); + }); + + it("includes `cursor` only when provided", async () => { + const { reporter } = createCollectingReporter(); + + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + await listTransactions(reporter, auth, { + customerId: "Customer:c1", + cursor: null, + }); + expect(calledPath().params.has("cursor")).toBe(false); + + mockGet.mockReset(); + mockGet.mockResolvedValueOnce({ data: [], hasMore: false }); + await listTransactions(reporter, auth, { + customerId: "Customer:c1", + cursor: "cursor-uuid", + }); + expect(calledPath().params.get("cursor")).toBe("cursor-uuid"); + }); +}); + +describe("listTransactions response mapping", () => { + it("maps the camelCase envelope to a TransactionPage", async () => { + const { reporter } = createCollectingReporter(); + const raw = { + data: [ + { + id: "Transaction:1", + type: "OUTGOING", + status: "COMPLETED", + sentAmount: { amount: 1250, currency: { code: "USD", decimals: 2 } }, + destination: { destinationType: "UMA_ADDRESS", umaAddress: "$bob@x" }, + }, + { + id: "Transaction:2", + type: "INCOMING", + status: "PENDING", + receivedAmount: { + amount: 3_000_000, + currency: { code: "USDB", decimals: 6 }, + }, + source: { sourceType: "ACCOUNT", accountId: "InternalAccount:9" }, + }, + ], + hasMore: true, + nextCursor: "next-uuid", + totalCount: 42, + }; + mockGet.mockResolvedValueOnce(raw); + + const page = await listTransactions(reporter, auth, { + customerId: "Customer:c1", + }); + + expect(page.data).toEqual(raw.data); + expect(page.hasMore).toBe(true); + expect(page.nextCursor).toBe("next-uuid"); + expect(page.totalCount).toBe(42); + }); + + it("coerces missing data/hasMore/nextCursor/totalCount", async () => { + const { reporter } = createCollectingReporter(); + mockGet.mockResolvedValueOnce({}); + + const page = await listTransactions(reporter, auth, { + customerId: "Customer:c1", + }); + + expect(page.data).toEqual([]); + expect(page.hasMore).toBe(false); + expect(page.nextCursor).toBeNull(); + expect(page.totalCount).toBe(0); + }); +}); diff --git a/apps/examples/grid-global-accounts-example-app/src/flows/transactions.ts b/apps/examples/grid-global-accounts-example-app/src/flows/transactions.ts new file mode 100644 index 000000000..fa2ba8aef --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/flows/transactions.ts @@ -0,0 +1,99 @@ +// List a customer's real, server-persisted transactions (onramps / offramps / +// payments) from the Grid API. +// +// DOM-free: takes the platform `auth`, the query params, and a `Reporter` to +// emit a response log event through, then returns a normalized page. The React +// layer owns paging state + rendering. + +import { apiGet, type ApiAuth } from "../api-client"; +import type { Reporter } from "../lib/reporter"; + +/** A money amount: `amount` in minor units + a `currency` block. */ +export interface CurrencyAmount { + amount?: number; + /** `{ code, name, symbol, decimals }` — drives money formatting. */ + currency?: unknown; +} + +/** + * A permissive transaction shape covering the fields the UI renders. The Grid + * response is a OneOf of incoming/outgoing transactions; rather than model both + * exactly, we keep every field optional and read what we need defensively. + * Outgoing carries `sentAmount`, incoming carries `receivedAmount`. + */ +export interface Transaction { + id?: string; + /** "INCOMING" | "OUTGOING". */ + type?: string; + status?: string; + /** Outgoing amount (sender's currency). */ + sentAmount?: CurrencyAmount; + /** Incoming amount (recipient's currency). */ + receivedAmount?: CurrencyAmount; + /** Generic fallback amount, if a row ever uses a plain `amount` block. */ + amount?: CurrencyAmount; + /** OneOf: `{ sourceType, accountId | umaAddress, ... }`. */ + source?: unknown; + /** OneOf: `{ destinationType, accountId | umaAddress, ... }`. */ + destination?: unknown; + createdAt?: string; + description?: string; + [key: string]: unknown; +} + +/** One normalized page of transactions. */ +export interface TransactionPage { + data: Transaction[]; + hasMore: boolean; + nextCursor: string | null; + totalCount: number; +} + +/** Direction filter; "ALL" omits the `type` query param entirely. */ +export type TransactionTypeFilter = "ALL" | "INCOMING" | "OUTGOING"; + +const DEFAULT_LIMIT = 20; + +export interface ListTransactionsParams { + customerId: string; + limit?: number; + cursor?: string | null; + type?: TransactionTypeFilter; +} + +/** + * GET `/transactions` scoped to a customer, newest first. Always sends + * `customerId`, `limit` (default 20), and `sortOrder=desc`; adds `cursor` when + * paging and `type` only when filtering to a single direction. Normalizes the + * `{ data, hasMore, nextCursor, totalCount }` envelope (camelCase, verified + * against the generated `TransactionListResponse`), coercing a missing `data` + * to `[]`, `hasMore` to false, and `nextCursor` to null. + */ +export async function listTransactions( + reporter: Reporter, + auth: ApiAuth, + params: ListTransactionsParams, +): Promise { + const limit = params.limit ?? DEFAULT_LIMIT; + const query = new URLSearchParams({ + customerId: params.customerId, + limit: String(limit), + sortOrder: "desc", + }); + if (params.cursor) query.set("cursor", params.cursor); + if (params.type && params.type !== "ALL") query.set("type", params.type); + + const detail = await apiGet(auth, `/transactions?${query.toString()}`); + reporter.log({ level: "response", label: "List Transactions", detail }); + + const env = (detail && typeof detail === "object" ? detail : {}) as Record< + string, + unknown + >; + return { + data: Array.isArray(env.data) ? (env.data as Transaction[]) : [], + hasMore: env.hasMore === true, + nextCursor: typeof env.nextCursor === "string" ? env.nextCursor : null, + totalCount: typeof env.totalCount === "number" ? env.totalCount : 0, + }; +} diff --git a/apps/examples/grid-global-accounts-example-app/src/views/customer/Transactions.tsx b/apps/examples/grid-global-accounts-example-app/src/views/customer/Transactions.tsx new file mode 100644 index 000000000..8082bad8e --- /dev/null +++ b/apps/examples/grid-global-accounts-example-app/src/views/customer/Transactions.tsx @@ -0,0 +1,364 @@ +import styled from "@emotion/styled"; +import { Badge, Button, Card } from "@lightsparkdev/origin"; +import { useCallback, useEffect, useState } from "react"; + +import { DismissibleAlert } from "../../components/DismissibleAlert"; +import { RawExpander } from "../../components/RawExpander"; +import { + listTransactions, + type Transaction, + type TransactionTypeFilter, +} from "../../flows/transactions"; +import { formatMoney } from "../../lib/format-money"; +import { useAppState } from "../../state/store"; + +const PAGE_LIMIT = 20; + +const FILTERS: { value: TransactionTypeFilter; label: string }[] = [ + { value: "ALL", label: "All" }, + { value: "INCOMING", label: "Incoming" }, + { value: "OUTGOING", label: "Outgoing" }, +]; + +/** + * Transactions tab — the customer's real, server-persisted movement of funds + * (onramps / offramps / payments) from `GET /transactions`, scoped to the + * active customer and newest first. Distinct from the Activity tab, which shows + * this session's client-action log. Supports an All / Incoming / Outgoing + * filter and cursor-based "Load more" paging. + */ +export function Transactions() { + const { activeCustomer, platformAuth, reporter } = useAppState(); + const customerId = activeCustomer?.id ?? ""; + + const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); + const [loadingMore, setLoadingMore] = useState(false); + const [error, setError] = useState(null); + const [hasMore, setHasMore] = useState(false); + const [nextCursor, setNextCursor] = useState(null); + const [filter, setFilter] = useState("ALL"); + + // Memoized so the mount/refetch effect deps stay stable and we don't refetch + // on every render. `cursor: null` resets to the first page; a cursor appends. + const load = useCallback( + async (cursor: string | null) => { + if (!platformAuth || !customerId) return; + const append = cursor !== null; + if (append) setLoadingMore(true); + else setLoading(true); + try { + const page = await listTransactions(reporter, platformAuth, { + customerId, + limit: PAGE_LIMIT, + cursor, + type: filter, + }); + setItems((prev) => (append ? [...prev, ...page.data] : page.data)); + setHasMore(page.hasMore); + setNextCursor(page.nextCursor); + } catch (err) { + setError( + err instanceof Error ? err.message : "Couldn't load transactions.", + ); + } finally { + if (append) setLoadingMore(false); + else setLoading(false); + } + }, + [platformAuth, customerId, filter, reporter], + ); + + // On mount and whenever the customer or filter changes, reset and fetch fresh. + useEffect(() => { + setItems([]); + setHasMore(false); + setNextCursor(null); + setError(null); + void load(null); + }, [load]); + + if (!customerId || !platformAuth) { + return ( + + + + Not connected + + Connect the platform and act as a customer to see their + transactions. + + + + + ); + } + + return ( + + {error && ( + setError(null)} + /> + )} + + + + + Transactions + + Funds moving in and out of this wallet, newest first. + + + + + + {FILTERS.map(({ value, label }) => ( + + ))} + + + {loading ? ( + Loading transactions… + ) : items.length === 0 ? ( + + No transactions yet + + Funding, payments, and transfers for this customer appear here. + + + ) : ( + + {items.map((tx, i) => ( + + ))} + + )} + + {hasMore && !loading && ( + + + + )} + + + + ); +} + +/** One transaction row: direction + amount, counterparty, status, date, raw. */ +function TransactionRow({ tx }: { tx: Transaction }) { + const incoming = tx.type === "INCOMING"; + const money = incoming ? tx.receivedAmount : tx.sentAmount; + const amount = money ?? tx.amount; + const status = statusBadge(tx.status); + + return ( + + + + + {incoming ? "Received" : "Sent"} + + + {counterparty(tx)} + + + + + {formatSignedAmount(amount, incoming)} + + {status.label} + {formatDate(tx.createdAt)} + + + + + ); +} + +/** Map a transaction status to a label + Badge variant. */ +function statusBadge(status: string | undefined): { + variant: "green" | "yellow" | "red" | "gray"; + label: string; +} { + const s = (status ?? "").toUpperCase(); + const label = status || "Unknown"; + if (s === "COMPLETED" || s === "SETTLED" || s === "SUCCEEDED") + return { variant: "green", label }; + if (s === "PENDING" || s === "PROCESSING" || s === "CREATED") + return { variant: "yellow", label }; + if (s === "FAILED" || s === "REJECTED" || s === "CANCELLED") + return { variant: "red", label }; + return { variant: "gray", label }; +} + +/** + * Extract a readable counterparty identifier. Incoming reads `source`, outgoing + * reads `destination`; both are a OneOf keyed by `sourceType`/`destinationType`. + * Prefer a UMA address, then an account id; fall back to the OneOf's type tag. + */ +function counterparty(tx: Transaction): string { + const incoming = tx.type === "INCOMING"; + const party = incoming ? tx.source : tx.destination; + if (!party || typeof party !== "object") return "—"; + const p = party as Record; + if (typeof p.umaAddress === "string" && p.umaAddress) return p.umaAddress; + if (typeof p.accountId === "string" && p.accountId) return p.accountId; + const tag = incoming ? p.sourceType : p.destinationType; + return typeof tag === "string" && tag ? tag : "—"; +} + +/** Signed major-unit amount, e.g. `+ 12.50 USD` / `− 3.000000 USDB`. */ +function formatSignedAmount( + amount: { amount?: number; currency?: unknown } | undefined, + incoming: boolean, +): string { + if (!amount || typeof amount.amount !== "number") return "—"; + const sign = incoming ? "+" : "−"; + return `${sign} ${formatMoney(amount.amount, amount.currency)}`; +} + +/** Locale date + time; guards an invalid/missing timestamp. */ +function formatDate(value: string | undefined): string { + if (!value) return "—"; + const d = new Date(value); + if (Number.isNaN(d.getTime())) return "—"; + return d.toLocaleString(undefined, { + year: "numeric", + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + }); +} + +const Stack = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-md, 16px); +`; + +const Filters = styled.div` + display: flex; + gap: var(--spacing-2xs, 6px); + padding: 0 var(--spacing-md, 16px) var(--spacing-sm, 12px); +`; + +const List = styled.div` + display: flex; + flex-direction: column; +`; + +const Row = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-2xs, 6px); + padding: var(--spacing-sm, 12px) var(--spacing-md, 16px); + border-top: var(--stroke-xs, 1px) solid var(--border-primary, #e6e6e9); + + &:first-of-type { + border-top: none; + } +`; + +const RowMain = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-md, 16px); +`; + +const RowLeft = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); + min-width: 0; +`; + +const RowRight = styled.div` + display: inline-flex; + align-items: center; + gap: var(--spacing-sm, 12px); + flex: none; +`; + +const Counterparty = styled.span` + font-size: var(--font-size-sm, 13px); + color: var(--text-secondary, #555); + font-variant-numeric: tabular-nums; + max-width: 220px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const Amount = styled.span` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-medium, 500); + color: var(--text-primary, #1a1a1a); + font-variant-numeric: tabular-nums; + white-space: nowrap; + + &[data-direction="in"] { + color: var(--text-green, var(--text-primary, #1a1a1a)); + } +`; + +const When = styled.span` + font-size: var(--font-size-xs, 11px); + color: var(--text-tertiary, #8a8a8a); + font-variant-numeric: tabular-nums; + white-space: nowrap; +`; + +const LoadMore = styled.div` + display: flex; + justify-content: center; + padding: var(--spacing-md, 16px); +`; + +const Notice = styled.div` + font-size: var(--font-size-sm, 13px); + color: var(--text-tertiary, #8a8a8a); + padding: var(--spacing-md, 16px); +`; + +const Empty = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-2xs, 6px); + text-align: center; + padding: var(--spacing-2xl, 40px) var(--spacing-lg, 24px); +`; + +const EmptyTitle = styled.div` + font-size: var(--font-size-sm, 13px); + font-weight: var(--font-weight-semibold, 600); + color: var(--text-primary, #1a1a1a); +`; + +const EmptyBody = styled.div` + font-size: var(--font-size-sm, 13px); + color: var(--text-tertiary, #8a8a8a); + max-width: 320px; + line-height: 1.45; +`; diff --git a/apps/examples/grid-global-accounts-example-app/src/views/customer/WalletHome.tsx b/apps/examples/grid-global-accounts-example-app/src/views/customer/WalletHome.tsx index f757a25e5..e3277db34 100644 --- a/apps/examples/grid-global-accounts-example-app/src/views/customer/WalletHome.tsx +++ b/apps/examples/grid-global-accounts-example-app/src/views/customer/WalletHome.tsx @@ -10,14 +10,22 @@ import { Activity } from "./Activity"; import { Fund } from "./Fund"; import { Pay } from "./Pay"; import { Settings } from "./Settings"; +import { Transactions } from "./Transactions"; -type Section = "wallet" | "fund" | "pay" | "activity" | "settings"; +type Section = + | "wallet" + | "fund" + | "pay" + | "activity" + | "transactions" + | "settings"; const SECTIONS: { value: Section; label: string }[] = [ { value: "wallet", label: "Wallet" }, { value: "fund", label: "Fund" }, { value: "pay", label: "Pay" }, { value: "activity", label: "Activity" }, + { value: "transactions", label: "Transactions" }, { value: "settings", label: "Settings" }, ]; @@ -169,6 +177,7 @@ export function WalletHome() { void refresh()} /> )} {section === "activity" && } + {section === "transactions" && } {section === "settings" && } ); From f16158d500a8b568602a1954785bba68cba8a3ef Mon Sep 17 00:00:00 2001 From: Carson Date: Wed, 17 Jun 2026 10:36:01 -0700 Subject: [PATCH 088/133] [gga][example] Remove md files (#28995) ## Reason Explain *why* this change is being made. ## Overview For large or complex changes, describe what is being changed. ## Test Plan Explain how you tested the change. GitOrigin-RevId: e2af7580732403291965caade8de2384ea5e2ec4 --- .../REDESIGN.md | 78 ------- .../REDESIGN_PLAN.md | 191 ------------------ 2 files changed, 269 deletions(-) delete mode 100644 apps/examples/grid-global-accounts-example-app/REDESIGN.md delete mode 100644 apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md diff --git a/apps/examples/grid-global-accounts-example-app/REDESIGN.md b/apps/examples/grid-global-accounts-example-app/REDESIGN.md deleted file mode 100644 index cb61ccecb..000000000 --- a/apps/examples/grid-global-accounts-example-app/REDESIGN.md +++ /dev/null @@ -1,78 +0,0 @@ -# GGA Example App — React + Origin Redesign - -Date: 2026-06-10 · Status: proposed, pending review before the implementation plan. - -## Goal - -Turn the example app from one 1,127-line `index.html` of "boxes + copied IDs" into a polished **React + `@lightsparkdev/origin`** app that shows the **two sides of a Grid integration** — a **Platform view** and a **Customer view** — so a partner sees roughly what they'd build, with all logs / IDs / raw responses hidden behind a **Debug toggle**. - -## Personas & shell - -- **Persona switcher** (top bar): `Platform ⇄ Customer`, one view visible at a time. -- **Active-customer chip** (Customer view): "Acting as: \". -- **Debug toggle** (top bar, **off by default**): reveals the debug drawer + raw IDs/JSON. Like a dev-tools panel you flip on. - -## Platform view (admin-dashboard feel) - -- **Platform config** panel — auth/connection status + editable platform settings. -- **Customers** — a table (name · email · status · wallet state), a **Create customer** action, and **"Act as"** which selects the customer and switches to the Customer view scoped to it. - -## Customer view (consumer-wallet feel, for the active customer) - -- **Logged out →** login screen: pick a method (OTP / OAuth / Passkey). Real Turnkey ceremonies — nothing auto-signed. -- **Logged in (session) →** wallet home: balance + account(s), and actions **Fund** (external account → money-in), **Send / Pay** (quote + execute), **Activity**. -- **Settings →** manage credentials & sessions (add/remove passkey/OAuth, revoke sessions) and **export**. -- **"Act as" = scope-switch only**: it threads the `customer_id` so you don't copy IDs; every operation still runs its real flow explicitly. - -## Debug mode - -- **Off** → only the two polished personas are visible. -- **On** → a **debug drawer** (request/response log, today's "Response Log"), per-card **"raw"** expanders, and the context chip reveals actual IDs/JSON. - -## Conversion strategy (vanilla → React + Origin) - -- **Reuse the integration logic** (the valuable ~1,500 LOC): `api-client`, `turnkey`, `webauthn`, `session`, `config`, `mode`, and the flow orchestration in `flows/*.ts`. Today they call `ui.ts` for output; **decouple that** by injecting a small **reporter interface** (status + structured log events) that React consumes as state + the debug log, instead of DOM writes. -- **Rebuild as React + Origin**: the shell, Platform view, Customer view, debug drawer — using Origin components and `@lightsparkdev/origin/styles.css`. -- **Delete**: `ui.ts` DOM code and the `index.html` body (keep a minimal `index.html` with just the React mount root). -- **Template**: mirror `grid-kyc-demo`'s React + Vite + Origin wiring (`main.tsx` imports `@lightsparkdev/origin/styles.css`; `declarations.d.ts` shims Origin's TS resolution; `@vitejs/plugin-react`). - -## Proposed structure - -``` -src/ - main.tsx # mount React + import "@lightsparkdev/origin/styles.css" - App.tsx # shell: persona switcher, debug toggle, view routing - declarations.d.ts # Origin TS-resolution shim (per grid-kyc-demo) - state/ # activeCustomer, session, debugOn, log (React context/store) - lib/ # reused logic: api-client, turnkey, webauthn, session, config, mode — no DOM - flows/ # reused orchestration: returns results / emits log events (no DOM) - components/ # Shell, PersonaSwitcher, DebugToggle, DebugDrawer, ContextChip, RawExpander - views/ - platform/ # Config, CustomersTable, CreateCustomer - customer/ # Login, WalletHome, Fund, Pay, Activity, Settings -index.html # minimal:
-``` - -## Aesthetic - -`@lightsparkdev/origin` styles + components (Origin palette, typography, spacing, components). Clean, light, credible — not a bespoke pixel-perfect design system. Stays within Origin defaults. - -## Scope / sequencing (small stack on #28475, each step runnable + screenshotted) - -1. **Scaffold**: add `react`, `react-dom`, `@vitejs/plugin-react`, `@lightsparkdev/origin`; `main.tsx` + `App` shell + Origin styles; minimal `index.html`; `declarations.d.ts`. Renders an empty shell with the persona switcher + debug toggle. -2. **Decouple logic from `ui.ts`**: introduce the reporter/state+log interface; move `api-client`/`turnkey`/`webauthn`/`session`/`config`/`mode` + flows under `lib/`/`flows/`, DOM-free. -3. **Platform view**: config panel + customers table + create + "act as". -4. **Customer view**: login → wallet home → fund/pay → settings/export. -5. **Debug drawer**: wire the log, raw expanders, context-chip IDs. -6. **Remove** the old vanilla `ui.ts` + `index.html` body; cleanup + final polish pass. - -## Non-goals - -- Not a bespoke pixel-perfect design — use Origin defaults. -- Not changing real Turnkey/API behavior — same flows, new rendering. -- No backend changes. - -## Open items (resolve during build) - -- External-account/fund + quote/execute confirmed on the **Customer** side. -- Exact Origin components to use (Button, Card, Table, TextInput, Tabs, Drawer/Modal, Badge) — pick as we build. diff --git a/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md b/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md deleted file mode 100644 index a2b313d38..000000000 --- a/apps/examples/grid-global-accounts-example-app/REDESIGN_PLAN.md +++ /dev/null @@ -1,191 +0,0 @@ -# GGA React + Origin Redesign — Implementation Plan - -> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. - -**Goal:** Convert the vanilla-TS Grid Global Accounts example app into a polished React + `@lightsparkdev/origin` app with two persona views (Platform / Customer) and a debug toggle, reusing the existing integration logic. - -**Architecture:** Reuse the real integration logic (`api-client`, `turnkey`, `webauthn`, `session`, `config`, `mode`, `flows/*`) after decoupling it from `ui.ts` via an injected `Reporter` interface; rebuild only the rendering layer as React components styled with Origin. Mirror `grid-kyc-demo`'s React+Vite+Origin wiring. - -**Tech Stack:** React 19, Vite 8 (`@vitejs/plugin-react`), `@lightsparkdev/origin` (styles + components), TypeScript. Verification: `tsc`/`vite build` + dev-server screenshots; vitest unit tests for the decoupled logic. - -**Workspace:** `@lightsparkdev/grid-global-accounts-example-app` at `js/apps/examples/grid-global-accounts-example-app/`. -**Commands:** dev `yarn workspace @lightsparkdev/grid-global-accounts-example-app dev` · build/typecheck `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` · lint `yarn lint && yarn format`. -**Note (frontend):** for UI tasks, acceptance is "build/typecheck passes + dev screenshot matches the intent." Component *internals* are built during execution with the **frontend-design** skill; this plan pins the file map, interfaces, props, Origin components, and per-task acceptance. Logic tasks use real vitest unit tests (TDD). - ---- - -## Target file structure - -``` -src/ - main.tsx # mount React + import "@lightsparkdev/origin/styles.css" - App.tsx # shell: persona switcher, debug toggle, view routing - declarations.d.ts # *.module.scss / *.module.css shims (per grid-kyc-demo) - state/ - store.tsx # AppStateProvider + useAppState(): persona, activeCustomer, session, debugOn, log[]; reporter impl - lib/ # reused logic, DOM-free, Reporter-injected - reporter.ts # Reporter interface + LogEntry type - api-client.ts turnkey.ts webauthn.ts session.ts config.ts mode.ts - flows/ # reused orchestration, DOM-free, returns results / emits via Reporter - customer.ts email-otp.ts oauth.ts passkey.ts manage.ts money.ts context.ts - components/ - Shell.tsx PersonaSwitcher.tsx DebugToggle.tsx DebugDrawer.tsx RawExpander.tsx ContextChip.tsx - views/ - platform/ PlatformView.tsx Config.tsx CustomersTable.tsx CreateCustomer.tsx - customer/ CustomerView.tsx Login.tsx WalletHome.tsx Fund.tsx Pay.tsx Activity.tsx Settings.tsx -index.html # minimal:
-``` - -(Old `ui.ts` and the old `main.ts` are deleted in Task 6; the existing `flows/*.ts` and lib modules are *moved/edited in place*, not rewritten.) - ---- - -### Task 1: Scaffold React + Origin shell - -**Files:** -- Modify: `package.json` (deps), `vite.config.ts` (react plugin), `index.html` (mount root) -- Create: `src/main.tsx`, `src/declarations.d.ts`, `src/App.tsx`, `src/state/store.tsx`, `src/components/{Shell,PersonaSwitcher,DebugToggle}.tsx` - -- [ ] **Step 1: Add deps** -```bash -yarn workspace @lightsparkdev/grid-global-accounts-example-app add \ - "@lightsparkdev/origin@*" react@^19.2.6 react-dom@^19.2.6 @emotion/react@^11.14.0 @emotion/styled@^11.14.1 -yarn workspace @lightsparkdev/grid-global-accounts-example-app add -D \ - @vitejs/plugin-react@^5.2.0 @types/react@^19.2.15 @types/react-dom@^19.2.3 -``` - -- [ ] **Step 2: Add the React plugin to `vite.config.ts`** — keep the existing proxy/server block; add: -```ts -import react from "@vitejs/plugin-react"; -// in defineConfig({ ... }): plugins: [react()], -``` - -- [ ] **Step 3: Minimal `index.html` body** — replace the giant body with: -```html - -
- - -``` - -- [ ] **Step 4: Create `src/declarations.d.ts`** (the `*.module.scss` + `*.module.css` shims block, copied verbatim from `grid-kyc-demo/src/declarations.d.ts` — Origin's `main` points at its source so tsc walks into `.module.scss`). - -- [ ] **Step 5: Create `src/main.tsx`** -```tsx -import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; -import "@lightsparkdev/origin/styles.css"; -import { App } from "./App"; - -const container = document.getElementById("root"); -if (!container) throw new Error("#root not found"); -createRoot(container).render(); -``` - -- [ ] **Step 6: Create `src/state/store.tsx`** — `AppStateProvider` + `useAppState()` hook exposing: -```ts -type Persona = "platform" | "customer"; -type AppState = { - persona: Persona; setPersona(p: Persona): void; - activeCustomer: { id: string; name: string; email: string } | null; - setActiveCustomer(c: AppState["activeCustomer"]): void; - session: { /* held session material */ } | null; setSession(s: unknown): void; - debugOn: boolean; toggleDebug(): void; - log: LogEntry[]; // from lib/reporter - reporter: Reporter; // pushes into log + status; see Task 2 -}; -``` -(Reporter is fully defined in Task 2; here just hold `log` state + provide a `reporter` that appends.) - -- [ ] **Step 7: Create `Shell` + `PersonaSwitcher` + `DebugToggle`** using Origin components (segmented control / tabs for the switcher, a switch for debug). `App.tsx` renders `{persona === "platform" ? : }` with empty placeholder views for now. - -- [ ] **Step 8: Verify** — `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` passes (tsc + vite). Then `… dev`, screenshot: an Origin-styled shell with a working Platform⇄Customer switcher and a debug toggle (placeholder view bodies). - -- [ ] **Step 9: Commit** — `feat(gga): scaffold React + Origin shell with persona switcher + debug toggle` - ---- - -### Task 2: `Reporter` interface + decouple logic from `ui.ts` - -**Files:** -- Create: `src/lib/reporter.ts`, `src/lib/__tests__/reporter.test.ts` -- Modify (move into `lib/`, remove `ui.ts` imports, accept `Reporter`): `api-client.ts`, `turnkey.ts`, `webauthn.ts`, `session.ts`, `config.ts`, `mode.ts` -- Modify (accept `Reporter`, return results, no DOM): `flows/*.ts` -- Modify: `src/state/store.tsx` (real `reporter` impl pushing to `log` + status) - -- [ ] **Step 1: Define `Reporter`** in `src/lib/reporter.ts` -```ts -export type LogEntry = { - id: string; ts: number; - level: "info" | "error" | "request" | "response"; - label: string; detail?: unknown; // raw payload / IDs / JSON, shown only in debug mode -}; -export interface Reporter { - log(entry: Omit): void; - status(message: string, kind?: "info" | "error" | "success"): void; -} -``` - -- [ ] **Step 2: Write failing unit test** `src/lib/__tests__/reporter.test.ts` — a collecting reporter records entries with ids/timestamps; assert order + fields. (Add a `test` script + vitest devDep if absent: `"test": "vitest run"`.) -- [ ] **Step 3: Implement** the collecting reporter (used by the React store) → test passes (`yarn workspace … test`). - -- [ ] **Step 4: Decouple each lib module** — replace `import { ... } from "../ui"` / `ui.log(...)` / `ui.setStatus(...)` calls with a `reporter: Reporter` parameter (thread it through). No `document.*`. Pattern, per module: - - was: `ui.log("submitted", body)` → now: `reporter.log({ level: "request", label: "submitted", detail: body })`. -- [ ] **Step 5: Decouple each flow** in `flows/*.ts` similarly — take `reporter` (and the active context) as args, **return** their result instead of rendering. `flows/manage.ts` + `session.ts` also drop their direct DOM (`getElementById`/`innerHTML`). -- [ ] **Step 6: Wire the store's `reporter`** to append `LogEntry`s to `log` and surface `status`. -- [ ] **Step 7: Verify** — `… build` passes; `… test` green; existing flows still callable from a temporary dev button (smoke). -- [ ] **Step 8: Commit** — `refactor(gga): decouple integration logic from ui.ts via Reporter` - ---- - -### Task 3: Platform view - -**Files:** Create `src/views/platform/{PlatformView,Config,CustomersTable,CreateCustomer}.tsx` - -- [ ] **Config** (Origin Card + form inputs): shows platform auth/connection status + editable platform settings; reads/writes via `lib/config.ts` + `flows/context.ts`. -- [ ] **CreateCustomer** (Origin form/modal): calls `flows/customer.ts`; on success adds the customer to `state` (a session-local list — the demo tracks customers it created) and selects it. -- [ ] **CustomersTable** (Origin Table): lists the session-local customers (name · email · status · wallet state) with a row **"Act as"** action → `setActiveCustomer(row)` + `setPersona("customer")`. -- [ ] **Verify** — `… build` passes; `… dev` screenshot: config panel + customer table + create flow + "act as" switches to (placeholder/real) Customer view. -- [ ] **Commit** — `feat(gga): platform view (config, customers table, create, act-as)` - ---- - -### Task 4: Customer view (split into sub-commits) - -**Files:** Create `src/views/customer/{CustomerView,Login,WalletHome,Fund,Pay,Activity,Settings}.tsx` - -- [ ] **4a — Login**: method tabs (OTP / OAuth / Passkey) → real flows (`flows/email-otp.ts`, `oauth.ts`, `passkey.ts`) for the `activeCustomer`; on success `setSession(...)`. Logged-out state if no session. Commit. -- [ ] **4b — WalletHome + Fund + Pay + Activity**: balance/accounts (Origin Card/stat); **Fund** via `flows/money.ts` (external account → money-in); **Pay** via `flows/money.ts` (quote + execute); **Activity** list. Commit. -- [ ] **4c — Settings**: manage credentials & sessions (add/remove passkey/OAuth, revoke) + export via `flows/manage.ts`. Commit. -- [ ] **Verify each** — `… build` passes; `… dev` screenshots of login → wallet → fund/pay → settings, acting as a created customer end-to-end (real flows). - ---- - -### Task 5: Debug drawer + raw expanders + context chip - -**Files:** Create `src/components/{DebugDrawer,RawExpander,ContextChip}.tsx`; wire into `Shell`. - -- [ ] **DebugDrawer**: rendered when `debugOn`; lists `state.log` entries (request/response/info/error) with expandable `detail` JSON. Origin Drawer/panel styling. -- [ ] **RawExpander**: a reusable "raw" disclosure used inside cards; renders `detail` JSON only when `debugOn`. -- [ ] **ContextChip**: shows active customer/session; reveals the actual IDs (customer/wallet/session) only when `debugOn` (collapsed to name otherwise). -- [ ] **Verify** — `… dev` screenshot: debug off = clean personas; debug on = drawer + raw JSON + IDs appear. -- [ ] **Commit** — `feat(gga): debug drawer + raw expanders + context chip (off by default)` - ---- - -### Task 6: Remove vanilla shell + final polish - -**Files:** Delete `src/ui.ts`, old `src/main.ts`; remove any remaining old markup; final pass. - -- [ ] Delete `src/ui.ts` and the old `src/main.ts`; grep for stray references (`grep -rn "from \"./ui\"" src` → none). -- [ ] `yarn lint && yarn format`; `yarn workspace @lightsparkdev/grid-global-accounts-example-app build` passes. -- [ ] Final `… dev` screenshots: Platform view, Customer view (logged in), debug on — confirm polished + Origin-branded. -- [ ] **Commit** — `chore(gga): remove vanilla ui.ts/main.ts; final polish` - ---- - -## Self-review - -- **Spec coverage:** personas+switcher (Task 1), Platform view (Task 3), Customer view incl. fund/pay (Task 4), debug mode (Task 5), context threading / "act as" scope-switch (Task 3 act-as + store), Origin styling (Tasks 1–5), reuse-logic-decouple-ui (Task 2), remove vanilla (Task 6). ✓ All spec sections covered. -- **Placeholders:** scaffold/interfaces are concrete code; UI internals are intentionally built via frontend-design at execution with build+screenshot acceptance (noted up top) — not a hidden TODO. -- **Type consistency:** `Reporter`/`LogEntry` defined in Task 2 and consumed by the store (Task 1 forward-references it, fully defined in Task 2) and by lib/flows; `Persona`/`activeCustomer`/`session`/`debugOn`/`log` names consistent across store and components. From 97933dce21a71b7411ee97134af61543efc8e968 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 18 Jun 2026 08:59:21 -0700 Subject: [PATCH 089/133] [grid] Normalize crypto network and token icons (#29044) ## Reason The Grid launch stack introduced several crypto icon names that mixed network and token concepts. This PR replaces those launch-stack names/assets with an explicit `Network*` / `Token*` taxonomy in `@lightsparkdev/ui/icons` so Nage can render receive networks and token/currency icons consistently before the stack lands. Repo-wide scans found no non-Nage consumers of the removed legacy names, and those names were introduced in the same unlanded launch stack. ## Overview - Replaces launch-stack crypto icon names/assets with explicit `Network*` and `Token*` exports in `@lightsparkdev/ui/icons`. - Updates Nage mappings for receive network icons and token/currency icons. - Adds `USDB` and `SAT` / `SATS` / `SATOSHI` -> BTC icon mapping. - Removes obsolete Spark/Lightning PNG assets and routes those render paths through UI SVGs. - Makes no fiat flag changes and adds no environment-specific icon variants. ## Test Plan - `mise exec -- yarn workspace @lightsparkdev/ui build` - `mise exec -- yarn workspace @lightsparkdev/ui package:checks` - `mise exec -- yarn workspace @lightsparkdev/site types` - `mise exec -- yarn workspace @lightsparkdev/ui-test-app test SolanaIcons.test.tsx` - `mise exec -- yarn workspace @lightsparkdev/site exec vitest run src/uma-nage/components/cryptoCurrencyIcons.test.tsx src/uma-nage/receive-add-funds/CryptoNetworkCard.test.tsx src/uma-nage/home/Home.test.tsx` Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: c0a28072309d8c939a7d90127dac21f7768f51a5 --- .../src/tests/SolanaIcons.test.tsx | 70 +++++++++++++++++++ packages/ui/src/icons/BaseNetwork.tsx | 18 ----- packages/ui/src/icons/BitcoinToken.tsx | 18 ----- .../ui/src/icons/BitcoinTokenBackground.tsx | 19 ----- packages/ui/src/icons/EthereumToken.tsx | 32 --------- .../ui/src/icons/EthereumTokenBackground.tsx | 33 --------- packages/ui/src/icons/NetworkBase.tsx | 15 ++++ packages/ui/src/icons/NetworkEthereum.tsx | 40 +++++++++++ packages/ui/src/icons/NetworkLightning.tsx | 19 +++++ packages/ui/src/icons/NetworkPolygon.tsx | 19 +++++ packages/ui/src/icons/NetworkSolana.tsx | 55 +++++++++++++++ packages/ui/src/icons/NetworkSpark.tsx | 21 ++++++ packages/ui/src/icons/NetworkTron.tsx | 19 +++++ packages/ui/src/icons/PolygonNetwork.tsx | 37 ---------- packages/ui/src/icons/SolanaToken.tsx | 68 ------------------ .../ui/src/icons/SolanaTokenBackground.tsx | 37 ---------- packages/ui/src/icons/TetherToken.tsx | 18 ----- .../ui/src/icons/TetherTokenBackground.tsx | 19 ----- packages/ui/src/icons/TokenBitcoin.tsx | 19 +++++ packages/ui/src/icons/TokenEthereum.tsx | 40 +++++++++++ packages/ui/src/icons/TokenSolana.tsx | 58 +++++++++++++++ packages/ui/src/icons/TokenUsdb.tsx | 19 +++++ packages/ui/src/icons/TokenUsdc.tsx | 23 ++++++ packages/ui/src/icons/TokenUsdt.tsx | 21 ++++++ packages/ui/src/icons/TronNetwork.tsx | 21 ------ packages/ui/src/icons/UsdCoinToken.tsx | 23 ------ .../ui/src/icons/UsdCoinTokenBackground.tsx | 21 ------ packages/ui/src/icons/index.tsx | 26 +++---- 28 files changed, 451 insertions(+), 377 deletions(-) create mode 100644 apps/examples/ui-test-app/src/tests/SolanaIcons.test.tsx delete mode 100644 packages/ui/src/icons/BaseNetwork.tsx delete mode 100644 packages/ui/src/icons/BitcoinToken.tsx delete mode 100644 packages/ui/src/icons/BitcoinTokenBackground.tsx delete mode 100644 packages/ui/src/icons/EthereumToken.tsx delete mode 100644 packages/ui/src/icons/EthereumTokenBackground.tsx create mode 100644 packages/ui/src/icons/NetworkBase.tsx create mode 100644 packages/ui/src/icons/NetworkEthereum.tsx create mode 100644 packages/ui/src/icons/NetworkLightning.tsx create mode 100644 packages/ui/src/icons/NetworkPolygon.tsx create mode 100644 packages/ui/src/icons/NetworkSolana.tsx create mode 100644 packages/ui/src/icons/NetworkSpark.tsx create mode 100644 packages/ui/src/icons/NetworkTron.tsx delete mode 100644 packages/ui/src/icons/PolygonNetwork.tsx delete mode 100644 packages/ui/src/icons/SolanaToken.tsx delete mode 100644 packages/ui/src/icons/SolanaTokenBackground.tsx delete mode 100644 packages/ui/src/icons/TetherToken.tsx delete mode 100644 packages/ui/src/icons/TetherTokenBackground.tsx create mode 100644 packages/ui/src/icons/TokenBitcoin.tsx create mode 100644 packages/ui/src/icons/TokenEthereum.tsx create mode 100644 packages/ui/src/icons/TokenSolana.tsx create mode 100644 packages/ui/src/icons/TokenUsdb.tsx create mode 100644 packages/ui/src/icons/TokenUsdc.tsx create mode 100644 packages/ui/src/icons/TokenUsdt.tsx delete mode 100644 packages/ui/src/icons/TronNetwork.tsx delete mode 100644 packages/ui/src/icons/UsdCoinToken.tsx delete mode 100644 packages/ui/src/icons/UsdCoinTokenBackground.tsx diff --git a/apps/examples/ui-test-app/src/tests/SolanaIcons.test.tsx b/apps/examples/ui-test-app/src/tests/SolanaIcons.test.tsx new file mode 100644 index 000000000..02923b0c1 --- /dev/null +++ b/apps/examples/ui-test-app/src/tests/SolanaIcons.test.tsx @@ -0,0 +1,70 @@ +import type { ReactElement } from "react"; + +import { NetworkSolana, TokenSolana } from "@lightsparkdev/ui/icons"; +import { render } from "@testing-library/react"; + +type IconComponent = () => ReactElement; + +function extractAttributeValues(markup: string, attributeName: string) { + return Array.from( + markup.matchAll(new RegExp(`\\s${attributeName}="([^"]+)"`, "g")), + (match) => match[1], + ); +} + +function extractUrlReference(value: string) { + const match = value.match(/^url\(#(.+)\)$/); + + expect(match).not.toBeNull(); + return match?.[1] ?? ""; +} + +function renderSvgInstances(Icon: IconComponent) { + const { container } = render( + <> + + + , + ); + const svgInstances = Array.from( + container.querySelectorAll("svg"), + (svg) => svg.outerHTML, + ); + + expect(svgInstances).toHaveLength(2); + return svgInstances; +} + +function expectLocalUrlReferences(svgMarkup: string) { + const ids = extractAttributeValues(svgMarkup, "id"); + const idSet = new Set(ids); + const urlReferences = [ + ...extractAttributeValues(svgMarkup, "mask"), + ...extractAttributeValues(svgMarkup, "fill").filter((value) => + value.startsWith("url(#"), + ), + ].map(extractUrlReference); + + expect(ids.length).toBeGreaterThan(0); + expect(urlReferences.length).toBeGreaterThan(0); + + for (const referencedId of urlReferences) { + expect(idSet.has(referencedId)).toBe(true); + } + + return ids; +} + +describe("Solana icons", () => { + test.each([ + ["NetworkSolana", NetworkSolana], + ["TokenSolana", TokenSolana], + ])("%s keeps generated SVG IDs local and unique", (_name, Icon) => { + const idsByInstance = renderSvgInstances(Icon).map( + expectLocalUrlReferences, + ); + const allIds = idsByInstance.flat(); + + expect(new Set(allIds).size).toBe(allIds.length); + }); +}); diff --git a/packages/ui/src/icons/BaseNetwork.tsx b/packages/ui/src/icons/BaseNetwork.tsx deleted file mode 100644 index 82d0b9d20..000000000 --- a/packages/ui/src/icons/BaseNetwork.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function BaseNetwork() { - return ( - - - - ); -} diff --git a/packages/ui/src/icons/BitcoinToken.tsx b/packages/ui/src/icons/BitcoinToken.tsx deleted file mode 100644 index c22d89b53..000000000 --- a/packages/ui/src/icons/BitcoinToken.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function BitcoinToken() { - return ( - - - - ); -} diff --git a/packages/ui/src/icons/BitcoinTokenBackground.tsx b/packages/ui/src/icons/BitcoinTokenBackground.tsx deleted file mode 100644 index 3fea10411..000000000 --- a/packages/ui/src/icons/BitcoinTokenBackground.tsx +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function BitcoinTokenBackground() { - return ( - - - - - ); -} diff --git a/packages/ui/src/icons/EthereumToken.tsx b/packages/ui/src/icons/EthereumToken.tsx deleted file mode 100644 index 424e3b7a1..000000000 --- a/packages/ui/src/icons/EthereumToken.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function EthereumToken() { - return ( - - - - - - - - - - - ); -} diff --git a/packages/ui/src/icons/EthereumTokenBackground.tsx b/packages/ui/src/icons/EthereumTokenBackground.tsx deleted file mode 100644 index 900826224..000000000 --- a/packages/ui/src/icons/EthereumTokenBackground.tsx +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function EthereumTokenBackground() { - return ( - - - - - - - - - - - - ); -} diff --git a/packages/ui/src/icons/NetworkBase.tsx b/packages/ui/src/icons/NetworkBase.tsx new file mode 100644 index 000000000..7d57bb813 --- /dev/null +++ b/packages/ui/src/icons/NetworkBase.tsx @@ -0,0 +1,15 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkBase() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/NetworkEthereum.tsx b/packages/ui/src/icons/NetworkEthereum.tsx new file mode 100644 index 000000000..e8c78783e --- /dev/null +++ b/packages/ui/src/icons/NetworkEthereum.tsx @@ -0,0 +1,40 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkEthereum() { + return ( + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/NetworkLightning.tsx b/packages/ui/src/icons/NetworkLightning.tsx new file mode 100644 index 000000000..0f87af2f4 --- /dev/null +++ b/packages/ui/src/icons/NetworkLightning.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkLightning() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/NetworkPolygon.tsx b/packages/ui/src/icons/NetworkPolygon.tsx new file mode 100644 index 000000000..06805e568 --- /dev/null +++ b/packages/ui/src/icons/NetworkPolygon.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkPolygon() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/NetworkSolana.tsx b/packages/ui/src/icons/NetworkSolana.tsx new file mode 100644 index 000000000..89dc6b957 --- /dev/null +++ b/packages/ui/src/icons/NetworkSolana.tsx @@ -0,0 +1,55 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { useId } from "react"; + +export function NetworkSolana() { + const uid = useId(); + const maskId = `network-solana__mask-${uid}`; + const gradientId = `network-solana__gradient-${uid}`; + + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/NetworkSpark.tsx b/packages/ui/src/icons/NetworkSpark.tsx new file mode 100644 index 000000000..60649fd4a --- /dev/null +++ b/packages/ui/src/icons/NetworkSpark.tsx @@ -0,0 +1,21 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkSpark() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/NetworkTron.tsx b/packages/ui/src/icons/NetworkTron.tsx new file mode 100644 index 000000000..fb8240164 --- /dev/null +++ b/packages/ui/src/icons/NetworkTron.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function NetworkTron() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/PolygonNetwork.tsx b/packages/ui/src/icons/PolygonNetwork.tsx deleted file mode 100644 index f54a69c0e..000000000 --- a/packages/ui/src/icons/PolygonNetwork.tsx +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -import { useId } from "react"; - -export function PolygonNetwork() { - const uid = useId(); - const gradientId = `polygon-network__a-${uid}`; - - return ( - - - - - - - - - - - ); -} diff --git a/packages/ui/src/icons/SolanaToken.tsx b/packages/ui/src/icons/SolanaToken.tsx deleted file mode 100644 index 685f7ae6b..000000000 --- a/packages/ui/src/icons/SolanaToken.tsx +++ /dev/null @@ -1,68 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -import { useId } from "react"; - -export function SolanaToken() { - const uid = useId(); - const a = `sol__a-${uid}`; - const b = `sol__b-${uid}`; - const c = `sol__c-${uid}`; - - return ( - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/ui/src/icons/SolanaTokenBackground.tsx b/packages/ui/src/icons/SolanaTokenBackground.tsx deleted file mode 100644 index cac0b01bd..000000000 --- a/packages/ui/src/icons/SolanaTokenBackground.tsx +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -import { useId } from "react"; - -export function SolanaTokenBackground() { - const uid = useId(); - const backgroundGradient = `sol__background-${uid}`; - - return ( - - - - - - - - - - - ); -} diff --git a/packages/ui/src/icons/TetherToken.tsx b/packages/ui/src/icons/TetherToken.tsx deleted file mode 100644 index bff0cbb22..000000000 --- a/packages/ui/src/icons/TetherToken.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function TetherToken() { - return ( - - - - ); -} diff --git a/packages/ui/src/icons/TetherTokenBackground.tsx b/packages/ui/src/icons/TetherTokenBackground.tsx deleted file mode 100644 index 03108c333..000000000 --- a/packages/ui/src/icons/TetherTokenBackground.tsx +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function TetherTokenBackground() { - return ( - - - - - ); -} diff --git a/packages/ui/src/icons/TokenBitcoin.tsx b/packages/ui/src/icons/TokenBitcoin.tsx new file mode 100644 index 000000000..2624c1dbb --- /dev/null +++ b/packages/ui/src/icons/TokenBitcoin.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TokenBitcoin() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/TokenEthereum.tsx b/packages/ui/src/icons/TokenEthereum.tsx new file mode 100644 index 000000000..5630f6384 --- /dev/null +++ b/packages/ui/src/icons/TokenEthereum.tsx @@ -0,0 +1,40 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TokenEthereum() { + return ( + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/TokenSolana.tsx b/packages/ui/src/icons/TokenSolana.tsx new file mode 100644 index 000000000..3b4af42b0 --- /dev/null +++ b/packages/ui/src/icons/TokenSolana.tsx @@ -0,0 +1,58 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { useId } from "react"; + +export function TokenSolana() { + const uid = useId(); + const maskId = `token-solana__mask-${uid}`; + const gradientId = `token-solana__gradient-${uid}`; + + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/icons/TokenUsdb.tsx b/packages/ui/src/icons/TokenUsdb.tsx new file mode 100644 index 000000000..5ec8a79c7 --- /dev/null +++ b/packages/ui/src/icons/TokenUsdb.tsx @@ -0,0 +1,19 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TokenUsdb() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/TokenUsdc.tsx b/packages/ui/src/icons/TokenUsdc.tsx new file mode 100644 index 000000000..2266ff2c0 --- /dev/null +++ b/packages/ui/src/icons/TokenUsdc.tsx @@ -0,0 +1,23 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TokenUsdc() { + return ( + + + + + + ); +} diff --git a/packages/ui/src/icons/TokenUsdt.tsx b/packages/ui/src/icons/TokenUsdt.tsx new file mode 100644 index 000000000..c8884fa58 --- /dev/null +++ b/packages/ui/src/icons/TokenUsdt.tsx @@ -0,0 +1,21 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function TokenUsdt() { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/TronNetwork.tsx b/packages/ui/src/icons/TronNetwork.tsx deleted file mode 100644 index 4e9f5ef94..000000000 --- a/packages/ui/src/icons/TronNetwork.tsx +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function TronNetwork() { - return ( - - - - - - - ); -} diff --git a/packages/ui/src/icons/UsdCoinToken.tsx b/packages/ui/src/icons/UsdCoinToken.tsx deleted file mode 100644 index 9d98d0877..000000000 --- a/packages/ui/src/icons/UsdCoinToken.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function UsdCoinToken() { - return ( - - - - - - ); -} diff --git a/packages/ui/src/icons/UsdCoinTokenBackground.tsx b/packages/ui/src/icons/UsdCoinTokenBackground.tsx deleted file mode 100644 index 2d4151ac5..000000000 --- a/packages/ui/src/icons/UsdCoinTokenBackground.tsx +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved - -export function UsdCoinTokenBackground() { - return ( - - - - - ); -} diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index ba927b7a0..58f022c8a 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -19,11 +19,8 @@ export { ArrowUp } from "./ArrowUp.js"; export { ArrowUpRight } from "./ArrowUpRight.js"; export { ArrowUpRightCircleFill } from "./ArrowUpRightCircleFill.js"; export { Bank } from "./Bank.js"; -export { BaseNetwork } from "./BaseNetwork.js"; export { BitcoinB } from "./BitcoinB.js"; export { BitcoinBOnRoundedSquare } from "./BitcoinBOnRoundedSquare.js"; -export { BitcoinToken } from "./BitcoinToken.js"; -export { BitcoinTokenBackground } from "./BitcoinTokenBackground.js"; export { BrokenChainLink } from "./BrokenChainLink.js"; export { Calendar } from "./Calendar.js"; export { CalendarClock } from "./CalendarClock.js"; @@ -64,8 +61,6 @@ export { EmailPlus } from "./EmailPlus.js"; export { Entity } from "./Entity.js"; export { Envelope } from "./Envelope.js"; export { EnvelopePlus } from "./EnvelopePlus.js"; -export { EthereumToken } from "./EthereumToken.js"; -export { EthereumTokenBackground } from "./EthereumTokenBackground.js"; export { ExclamationPoint } from "./ExclamationPoint.js"; export { Explorer } from "./Explorer.js"; export { Eye } from "./Eye.js"; @@ -108,6 +103,13 @@ export { Messenger } from "./Messenger.js"; export { Minus } from "./Minus.js"; export { Monitor } from "./Monitor.js"; export { Moon } from "./Moon.js"; +export { NetworkBase } from "./NetworkBase.js"; +export { NetworkEthereum } from "./NetworkEthereum.js"; +export { NetworkLightning } from "./NetworkLightning.js"; +export { NetworkPolygon } from "./NetworkPolygon.js"; +export { NetworkSolana } from "./NetworkSolana.js"; +export { NetworkSpark } from "./NetworkSpark.js"; +export { NetworkTron } from "./NetworkTron.js"; export { NodeAdd } from "./NodeAdd.js"; export { NonagonCheckmark } from "./NonagonCheckmark.js"; export { Notebook } from "./Notebook.js"; @@ -123,7 +125,6 @@ export { PersonPlus } from "./PersonPlus.js"; export { PiggyBank } from "./PiggyBank.js"; export { Pix } from "./Pix.js"; export { Plus } from "./Plus.js"; -export { PolygonNetwork } from "./PolygonNetwork.js"; export { PythonTwoTone } from "./PythonTwoTone.js"; export { QRCodeIcon } from "./QRCodeIcon.js"; export { QuestionCircle } from "./QuestionCircle.js"; @@ -148,8 +149,6 @@ export { ShieldCheck } from "./ShieldCheck.js"; export { ShieldCheckLite } from "./ShieldCheckLite.js"; export { Sidebar } from "./Sidebar.js"; export { Snowflake } from "./Snowflake.js"; -export { SolanaToken } from "./SolanaToken.js"; -export { SolanaTokenBackground } from "./SolanaTokenBackground.js"; export { Sort } from "./Sort.js"; export { Spark } from "./Spark.js"; export { SparklesSoft } from "./SparklesSoft.js"; @@ -159,10 +158,13 @@ export { SwiftTwoTone } from "./SwiftTwoTone.js"; export { TapSingle } from "./TapSingle.js"; export { Team } from "./Team.js"; export { Terminal } from "./Terminal.js"; -export { TetherToken } from "./TetherToken.js"; -export { TetherTokenBackground } from "./TetherTokenBackground.js"; +export { TokenBitcoin } from "./TokenBitcoin.js"; +export { TokenEthereum } from "./TokenEthereum.js"; +export { TokenSolana } from "./TokenSolana.js"; +export { TokenUsdb } from "./TokenUsdb.js"; +export { TokenUsdc } from "./TokenUsdc.js"; +export { TokenUsdt } from "./TokenUsdt.js"; export { Trash } from "./Trash.js"; -export { TronNetwork } from "./TronNetwork.js"; export type { PathLinecap, PathLinejoin, @@ -174,8 +176,6 @@ export { UmaBridgeLoading } from "./UmaBridgeLoading.js"; export { UmaBridgeLoadingTransparent } from "./UmaBridgeLoadingTransparent.js"; export { UmaPaymentLoadingSpinner } from "./UmaPaymentLoadingSpinner.js"; export { Upload } from "./Upload.js"; -export { UsdCoinToken } from "./UsdCoinToken.js"; -export { UsdCoinTokenBackground } from "./UsdCoinTokenBackground.js"; export { Wallet } from "./Wallet.js"; export { WalletSDKIcon } from "./WalletSDKIcon.js"; export { WarningSign } from "./WarningSign.js"; From 1010f422cb56b40367d8a9081cae04a250dab9bd Mon Sep 17 00:00:00 2001 From: Kevin Zhang Date: Tue, 23 Jun 2026 14:14:59 -0700 Subject: [PATCH 090/133] Add sorting to treasury flows table (#29232) ## Summary - add opt-in sortable headers to the shared UI table component - enable sorting on treasury flow columns using raw numeric/date values while preserving formatted cells - move treasury action buttons into a single top-right row and remove the flows caption ## Testing - yarn workspace @lightsparkdev/ui types - yarn workspace @lightsparkdev/ui build - ./node_modules/.bin/prettier --check packages/ui/src/components/Table/Table.tsx apps/private/ops/src/pages/ops/treasury/OpsTreasury.tsx - ../../node_modules/.bin/eslint src/components/Table/Table.tsx - ../../../node_modules/.bin/eslint src/pages/ops/treasury/OpsTreasury.tsx ## Notes - yarn workspace @lightsparkdev/ops types currently fails on existing CurrencyUnit/CurrencyUnitType mismatches outside this change path, including the pre-existing treasury amount cell. GitOrigin-RevId: 1246dad76c3c9aaf796f90f89b415ced3e5acd30 --- packages/ui/src/components/Table/Table.tsx | 107 +++++++++++++++++++-- 1 file changed, 97 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx index fb8f40c95..1cb0584cc 100644 --- a/packages/ui/src/components/Table/Table.tsx +++ b/packages/ui/src/components/Table/Table.tsx @@ -11,6 +11,7 @@ import { type ColumnSort, type HeaderContext, type Row, + type SortingFnOption, } from "@tanstack/react-table"; import { isObject } from "lodash-es"; import type { KeyboardEvent, MouseEvent, ReactNode } from "react"; @@ -107,6 +108,9 @@ interface Column> { header: TableColumnHeaderInfo; accessorKey: keyof T; function?: (context: CellContext) => ReactNode; + enableSorting?: boolean; + sortDescFirst?: boolean; + sortingFn?: SortingFnOption; } export type CustomTableComponents = { @@ -283,6 +287,8 @@ export function Table>({
), accessorKey: column.accessorKey.toString(), + enableSorting: column.enableSorting ?? false, + sortDescFirst: column.sortDescFirst ?? false, cell: (context: CellContext) => { if (column.function && typeof column.function === "function") { return column.function(context); @@ -434,6 +440,7 @@ export function Table>({ if (rowSelection) { columnsToRender.unshift({ id: "rowSelection", + enableSorting: false, header: () => ( event.stopPropagation()} @@ -467,6 +474,7 @@ export function Table>({ columnsToRender.push({ id: "tripleDots", + enableSorting: false, header: () => "", cell: (context) => ( >({ tableInstance.getHeaderGroups().map((headerGroup) => { return ( - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ))} + {headerGroup.headers.map((header) => { + const canSort = header.column.getCanSort(); + const sortDirection = header.column.getIsSorted(); + const onSort = header.column.getToggleSortingHandler(); + return ( + { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + onSort?.(event); + } + } + : undefined + } + style={ + canSort + ? { cursor: "pointer", userSelect: "none" } + : undefined + } + tabIndex={canSort ? 0 : undefined} + > + {header.isPlaceholder ? null : ( + + {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + {canSort ? ( + + ) : null} + + )} + + ); + })} ); }) @@ -815,6 +878,30 @@ const SelectionCheckboxContainer = styled.div` align-items: center; `; +const HeaderContent = styled.span` + display: inline-flex; + align-items: center; + gap: 4px; + max-width: 100%; +`; + +const SortIcon = styled.span<{ $active: boolean }>` + display: inline-flex; + align-items: center; + flex-shrink: 0; + opacity: ${({ $active }) => ($active ? 1 : 0)}; + transition: opacity 150ms ease; + + th:hover &, + th:focus-visible & { + opacity: 1; + } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } +`; + const cellPaddingPx = 15; const StyledTable = styled.table` position: relative; From 0ff7315c91fcf3749b04be6a0b13adbae4f0d2ca Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Mon, 29 Jun 2026 13:35:33 -0700 Subject: [PATCH 091/133] [ops] populate DLQ task args/kwargs via a live 'current' read (#29488) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Reason The ops DLQ page showed blank **Task Args** / **Task Kwargs** on the message detail. The snapshot rewrite (#27848) made the page read from persisted snapshots, which intentionally store only metadata (no args/kwargs) for data-at-rest safety — so the payload was never surfaced. Fixes the originating Slack report. ## Overview Keep snapshots metadata-only, but surface the live payload transiently: - **sparkcore** `OPS_create_dead_letter_queue_snapshot` now reads the live queue **with** payload (`include_task_payload=True`) and returns the live tasks (real `task_args`/`task_kwargs`) on a new `messages` field, plus `is_current`. The persisted snapshot row stays metadata-only (`to_snapshot_message()`). The recent-snapshot window now only dedups the snapshot **DB write** — every refresh still reads the live queue, so args/kwargs are always returned (no stale-cache path). - **ops UI** shows the live data as **\"Current · N messages\"** (args/kwargs populated on the detail page) as the primary view, and falls back to the latest persisted snapshot (metadata-only, **read-only**) only when the live queue is empty. - Detail navigation passes the message via **in-memory router state** (never the URL) so payloads don't land in history/logs; `actionable` state gates retry/delete so historical snapshot rows are read-only end-to-end. - Shared `Table` gains optional `onClickRow().state` pass-through (additive) to support the above — this restores the intended router-state navigation the detail page already reads. ### Reviewer notes (accepted, documented) - The live response is bounded by the existing `MAX_DLQ_MESSAGES_TO_READ = 200` cap and matches the pre-snapshot live page behavior; no separate payload byte-cap was added (a fail-the-refresh cap would be a worse failure mode). - cmd/ctrl-click opens the detail in a new tab without the in-memory payload and shows \"Message not found\" — deliberate, since the payload is kept out of the URL; normal click works. ## Test Plan - New `test_create_dead_letter_queue_snapshot.py` (GraphQL boundary, SQS mocked): a fresh read returns `messages` with real args/kwargs while the **persisted** snapshot stays metadata-only; empty queue returns no current messages / no snapshot; repeated refreshes within the window both return live payload and persist only one snapshot row. - `uv run ruff check`, `uv run ty check`, `uv run scripts/export-graphql.py`, `yarn gql-codegen`, eslint on changed FE files, `@lightsparkdev/ui` build (typechecks `Table.tsx`). - Rendered the page in a local harness (mocked GraphQL): live \"Current\" list with populated args/kwargs on the detail; read-only snapshot fallback (no checkboxes, no retry/delete); state-nav verified to keep the payload out of the URL. ## Private [Plan](https://s3.console.aws.amazon.com/s3/object/lightspark-dev-bolt-logs?prefix=jobs/primal-plasma/plan.md) (S3, internal only) ## Public Ops DLQ page now shows Celery task args/kwargs again, read live from the queue. --- 🤖 [primal-plasma](https://zeus.dev.dev.sparkinfra.net/#/arc?id=primal-plasma)[(#1)](https://zeus.dev.dev.sparkinfra.net/#/instance?id=primal-plasma) | [Feedback](https://zeus.dev.dev.sparkinfra.net/feedback) Original PR: https://github.com/lightsparkdev/webdev/pull/29470 --------- Co-authored-by: Bolt Agent Co-authored-by: bsiaotickchong GitOrigin-RevId: 9b6276580be285ebaffea6121db2442291be78a0 --- packages/ui/src/components/Table/Table.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx index 1cb0584cc..82ee287d9 100644 --- a/packages/ui/src/components/Table/Table.tsx +++ b/packages/ui/src/components/Table/Table.tsx @@ -128,9 +128,14 @@ export type TableProps> = { columns: Column[]; data: T[]; loading?: boolean; - onClickRow?: ( - row: Row, - ) => { link?: string; to?: NewRoutesType; params?: RouteParams } | void; + onClickRow?: (row: Row) => { + link?: string; + to?: NewRoutesType; + params?: RouteParams; + // Passed to the router as navigation state (in-memory, never in the + // URL), for payloads that shouldn't appear in history or logs. + state?: unknown; + } | void; emptyState?: ReactNode; clipboardCallbacks?: Parameters[0] | undefined; rowHoverEffect?: "border" | "background" | "none" | undefined; @@ -594,7 +599,13 @@ export function Table>({ const target = newTabKey ? "_blank" : undefined; window.open(link, target); } else if (onClickRowResult?.to) { - navigate(onClickRowResult.to, onClickRowResult.params); + navigate( + onClickRowResult.to, + onClickRowResult.params, + onClickRowResult.state !== undefined + ? { state: onClickRowResult.state } + : undefined, + ); } } } From 58790e86adf7925fcc6849206dbc7bdedebf5bea Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 29 Jun 2026 15:51:35 -0700 Subject: [PATCH 092/133] [origin] Retarget Base UI React to 1.6 (#29500) ## Reason Replace #28877 with equivalent dependency changes opened by @coreymartin, since the dependency-maintainer gate needs a JS dependency maintainer to author this bump. Per follow-up, this PR now targets `main` directly and includes the Origin Base UI utility cleanup plus the React 1.6 retarget in one PR. ## Overview - Removes Origin's vendored Base UI utility shim and direct Base UI utility imports. - Updates Origin's Base UI utility dependency path so `@base-ui/react` owns `@base-ui/utils@0.3.1` transitively. - Updates Origin's `@base-ui/react` dependency to `^1.6.0`. - Leaves `date-fns` and `@date-fns/tz` uninstalled; they remain optional peer metadata from Base UI only. ## Test Plan - [x] `cd js && yarn install` -- passed with existing peer warnings - [x] `git diff --check` - [x] `cd js && yarn workspace @lightsparkdev/origin types` - [x] `cd js && yarn workspace @lightsparkdev/origin build` - [x] `cd js && yarn workspace @lightsparkdev/origin test:unit src/components/Pagination/Pagination.unit.test.tsx src/components/Pager/Pager.unit.test.tsx src/components/LoadMore/LoadMore.unit.test.tsx src/components/LoadMore/useLoadMore.unit.test.ts` -- 48 tests passed - [x] `cd js && yarn why @base-ui/react && yarn why @base-ui/utils && yarn why date-fns && yarn why @date-fns/tz` -- confirmed Base UI React 1.6.0, transitive Base UI utils 0.3.1, and no installed date packages - [x] Commit hook: `yarn install` and JS `yarn format` passed --------- Co-authored-by: jaymantri GitOrigin-RevId: a9ea280c60ab8cca9337fe2e1c669f1e30b85ed3 --- packages/origin/package.json | 4 +- .../origin/scripts/check-baseui-version.js | 61 ------ packages/origin/src/components/Chip/Chip.tsx | 57 +++-- .../src/components/LoadMore/LoadMore.tsx | 3 +- .../origin/src/components/Pager/Pager.tsx | 9 +- .../src/components/Pagination/Pagination.tsx | 2 +- packages/origin/src/lib/base-ui-utils.ts | 201 ------------------ 7 files changed, 48 insertions(+), 289 deletions(-) delete mode 100644 packages/origin/scripts/check-baseui-version.js delete mode 100644 packages/origin/src/lib/base-ui-utils.ts diff --git a/packages/origin/package.json b/packages/origin/package.json index 7b67d4a33..588de779b 100644 --- a/packages/origin/package.json +++ b/packages/origin/package.json @@ -56,12 +56,10 @@ "icons:extract": "node scripts/extract-icons.mjs", "types": "tsc", "types:watch": "tsc --watch", - "check:baseui": "node scripts/check-baseui-version.js", "prepack": "yarn build:styles" }, "dependencies": { - "@base-ui/react": "^1.1.0", - "@base-ui/utils": "^0.2.3", + "@base-ui/react": "^1.6.0", "@tanstack/react-table": "^8.21.3", "ajv": "^8.20.0", "clsx": "^2.1.1" diff --git a/packages/origin/scripts/check-baseui-version.js b/packages/origin/scripts/check-baseui-version.js deleted file mode 100644 index 1fb26919a..000000000 --- a/packages/origin/scripts/check-baseui-version.js +++ /dev/null @@ -1,61 +0,0 @@ -#!/usr/bin/env node - -/** - * Checks if the Base UI version has changed since we last synced our utilities. - * - * Usage: yarn check:baseui - */ - -import fs from 'fs'; -import path from 'path'; -import { fileURLToPath } from 'url'; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -const UTILS_FILE = path.join(__dirname, '../src/lib/base-ui-utils.ts'); -const BASE_UI_PKG = path.join(__dirname, '../node_modules/@base-ui-components/react/package.json'); - -// Files we copied from Base UI -const COPIED_FILES = [ - 'esm/utils/getStateAttributesProps.js', - 'esm/utils/createBaseUIEventDetails.js', - 'esm/utils/reason-parts.js', -]; - -function getInstalledVersion() { - const pkg = JSON.parse(fs.readFileSync(BASE_UI_PKG, 'utf-8')); - return pkg.version; -} - -function getSyncedVersion() { - const content = fs.readFileSync(UTILS_FILE, 'utf-8'); - const match = content.match(/@baseui-version\s+([\d.a-z-]+)/); - return match ? match[1] : null; -} - -function main() { - const installed = getInstalledVersion(); - const synced = getSyncedVersion(); - - console.log('Base UI Version Check'); - console.log('====================='); - console.log(`Installed: ${installed}`); - console.log(`Synced: ${synced || 'unknown'}`); - console.log(''); - - if (installed !== synced) { - console.log('WARNING: Version mismatch!'); - console.log(''); - console.log('Review these files for changes:'); - COPIED_FILES.forEach(file => { - console.log(` node_modules/@base-ui-components/react/${file}`); - }); - console.log(''); - console.log('After syncing, update @baseui-version in src/lib/base-ui-utils.ts'); - process.exit(1); - } else { - console.log('OK: Versions match'); - } -} - -main(); diff --git a/packages/origin/src/components/Chip/Chip.tsx b/packages/origin/src/components/Chip/Chip.tsx index 7f00e2fe7..da475a25b 100644 --- a/packages/origin/src/components/Chip/Chip.tsx +++ b/packages/origin/src/components/Chip/Chip.tsx @@ -1,16 +1,45 @@ "use client"; import * as React from "react"; -import { useStableCallback } from "@base-ui/utils/useStableCallback"; -import { useMergedRefs } from "@base-ui/utils/useMergedRefs"; import clsx from "clsx"; import { CentralIcon } from "../Icon"; -import { - createChangeEventDetails, - type ChangeEventDetails, -} from "../../lib/base-ui-utils"; import styles from "./Chip.module.scss"; +export interface ChangeEventDetails { + reason: string; + event: E; + cancel: () => void; + allowPropagation: () => void; + isCanceled: boolean; + isPropagationAllowed: boolean; + trigger?: HTMLElement | undefined; +} + +function createChangeEventDetails( + reason: string, + event: E, +): ChangeEventDetails { + let canceled = false; + let allowPropagation = false; + + return { + reason, + event, + cancel() { + canceled = true; + }, + allowPropagation() { + allowPropagation = true; + }, + get isCanceled() { + return canceled; + }, + get isPropagationAllowed() { + return allowPropagation; + }, + }; +} + export interface ChipProps extends React.HTMLAttributes { /** The label text for default variant */ children?: React.ReactNode; @@ -57,15 +86,11 @@ export const Chip = React.forwardRef( ...elementProps } = props; - const onDismiss = useStableCallback(onDismissProp); - const internalRef = React.useRef(null); - const handleRef = useMergedRefs(internalRef, forwardedRef); - const handleDismiss = (event: React.MouseEvent | React.KeyboardEvent) => { if (disabled) return; const details = createChangeEventDetails("dismiss", event); - onDismiss?.(details); + onDismissProp?.(details); }; const handleKeyDown = (event: React.KeyboardEvent) => { @@ -83,7 +108,7 @@ export const Chip = React.forwardRef( return ( ( ...elementProps } = props; - const onDismiss = useStableCallback(onDismissProp); - const internalRef = React.useRef(null); - const handleRef = useMergedRefs(internalRef, forwardedRef); - const handleDismiss = (event: React.MouseEvent | React.KeyboardEvent) => { if (disabled) return; const details = createChangeEventDetails("dismiss", event); - onDismiss?.(details); + onDismissProp?.(details); }; const handleKeyDown = (event: React.KeyboardEvent) => { @@ -150,7 +171,7 @@ export const ChipFilter = React.forwardRef( return ( > = { + [K in keyof S]?: (value: S[K]) => Record | null; +}; + export interface PagerContextValue { hasPrevious: boolean; hasNext: boolean; diff --git a/packages/origin/src/components/Pagination/Pagination.tsx b/packages/origin/src/components/Pagination/Pagination.tsx index 74031f9d8..f530a1d56 100644 --- a/packages/origin/src/components/Pagination/Pagination.tsx +++ b/packages/origin/src/components/Pagination/Pagination.tsx @@ -1,10 +1,10 @@ "use client"; import * as React from "react"; +import { useRender } from "@base-ui/react/use-render"; import clsx from "clsx"; import { CentralIcon } from "../Icon"; import { useTrackedCallback } from "../Analytics/useTrackedCallback"; -import { useRender } from "../../lib/base-ui-utils"; import { devWarn } from "../../lib/dev-warn"; import styles from "./Pagination.module.scss"; diff --git a/packages/origin/src/lib/base-ui-utils.ts b/packages/origin/src/lib/base-ui-utils.ts deleted file mode 100644 index 38aa3c673..000000000 --- a/packages/origin/src/lib/base-ui-utils.ts +++ /dev/null @@ -1,201 +0,0 @@ -/** - * Base UI utilities for custom components. - * - * This file contains: - * 1. Re-exports of Base UI public APIs - * 2. Copies of internal Base UI utilities (MIT license) - * - * Zero drift from Base UI patterns. - * - * @baseui-version 1.2.0 - * @synced 2026-02-11 - * - * To check for updates: npm run check:baseui - * To sync: Compare files below with node_modules/@base-ui/react/esm/utils/ - * - * ## Direct imports (always prefer these) - * - * ```tsx - * // From @base-ui/utils - * import { useControlled } from '@base-ui/utils/useControlled'; - * import { useStableCallback } from '@base-ui/utils/useStableCallback'; - * import { useMergedRefs } from '@base-ui/utils/useMergedRefs'; - * import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect'; - * import { useId } from '@base-ui/utils/useId'; - * import { visuallyHidden } from '@base-ui/utils/visuallyHidden'; - * - * // From @base-ui/react - * import { mergeProps } from '@base-ui/react/merge-props'; - * import { useRender } from '@base-ui/react/use-render'; - * ``` - */ - -// ----------------------------------------------------------------------------- -// Re-exports of Base UI public APIs -// ----------------------------------------------------------------------------- - -export { mergeProps } from "@base-ui/react/merge-props"; -export { useRender } from "@base-ui/react/use-render"; - -// ----------------------------------------------------------------------------- -// Copied from @base-ui/utils/empty -// Source: https://github.com/mui/base-ui -// ----------------------------------------------------------------------------- - -const EMPTY_OBJECT = Object.freeze({}); - -function stringifyDataAttributeValue(value: unknown): string | null { - if (typeof value === "string") return value; - if ( - typeof value === "number" || - typeof value === "bigint" || - typeof value === "symbol" - ) { - return String(value); - } - if (value instanceof Date) return value.toISOString(); - return null; -} - -// ----------------------------------------------------------------------------- -// Copied from @base-ui/react/esm/utils/getStateAttributesProps.js -// Source: https://github.com/mui/base-ui -// ----------------------------------------------------------------------------- - -export type StateAttributesMapping> = { - [K in keyof S]?: (value: S[K]) => Record | null; -}; - -export function getStateAttributesProps>( - state: S, - customMapping?: StateAttributesMapping, -): Record { - const props: Record = {}; - - for (const key in state) { - const value = state[key]; - if (customMapping && Object.hasOwn(customMapping, key)) { - const customProps = customMapping[key]!(value); - if (customProps != null) { - Object.assign(props, customProps); - } - continue; - } - if (value === true) { - props[`data-${key.toLowerCase()}`] = ""; - } else if (value) { - const stringValue = stringifyDataAttributeValue(value); - if (stringValue !== null) { - props[`data-${key.toLowerCase()}`] = stringValue; - } - } - } - return props; -} - -// ----------------------------------------------------------------------------- -// Copied from @base-ui/react/esm/utils/createBaseUIEventDetails.js -// Source: https://github.com/mui/base-ui -// ----------------------------------------------------------------------------- - -export interface ChangeEventDetails { - reason: string; - event: E; - cancel: () => void; - allowPropagation: () => void; - isCanceled: boolean; - isPropagationAllowed: boolean; - trigger?: HTMLElement | undefined; -} - -export function createChangeEventDetails( - reason: string, - event?: E, - trigger?: HTMLElement, - customProperties?: Record, -): ChangeEventDetails { - let canceled = false; - let allowPropagation = false; - const custom = customProperties ?? EMPTY_OBJECT; - const details: ChangeEventDetails = { - reason, - event: event ?? (new Event("base-ui") as unknown as E), - cancel() { - canceled = true; - }, - allowPropagation() { - allowPropagation = true; - }, - get isCanceled() { - return canceled; - }, - get isPropagationAllowed() { - return allowPropagation; - }, - trigger, - ...custom, - }; - return details; -} - -export interface GenericEventDetails { - reason: string; - event: E; -} - -export function createGenericEventDetails( - reason: string, - event?: E, - customProperties?: Record, -): GenericEventDetails { - const custom = customProperties ?? EMPTY_OBJECT; - const details: GenericEventDetails = { - reason, - event: event ?? (new Event("base-ui") as unknown as E), - ...custom, - }; - return details; -} - -// ----------------------------------------------------------------------------- -// Copied from @base-ui/react/esm/utils/reason-parts.js -// Source: https://github.com/mui/base-ui -// ----------------------------------------------------------------------------- - -export const REASONS = { - none: "none", - triggerPress: "trigger-press", - triggerHover: "trigger-hover", - triggerFocus: "trigger-focus", - outsidePress: "outside-press", - itemPress: "item-press", - closePress: "close-press", - linkPress: "link-press", - clearPress: "clear-press", - chipRemovePress: "chip-remove-press", - trackPress: "track-press", - incrementPress: "increment-press", - decrementPress: "decrement-press", - inputChange: "input-change", - inputClear: "input-clear", - inputBlur: "input-blur", - inputPaste: "input-paste", - inputPress: "input-press", - focusOut: "focus-out", - escapeKey: "escape-key", - closeWatcher: "close-watcher", - listNavigation: "list-navigation", - keyboard: "keyboard", - pointer: "pointer", - drag: "drag", - wheel: "wheel", - scrub: "scrub", - cancelOpen: "cancel-open", - siblingOpen: "sibling-open", - disabled: "disabled", - imperativeAction: "imperative-action", - swipe: "swipe", - windowResize: "window-resize", -} as const; - -export type Reason = (typeof REASONS)[keyof typeof REASONS]; From 2455f87beab68eef0d3828726b12b2c24d0aa658 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Mon, 29 Jun 2026 22:59:05 +0000 Subject: [PATCH 093/133] CI update lock file for PR --- yarn.lock | 58 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3e7141aac..c4063ae80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -671,13 +671,20 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.28.6": +"@babel/runtime@npm:^7.23.8": version: 7.29.2 resolution: "@babel/runtime@npm:7.29.2" checksum: 10/f55ba4052aa0255055b34371a145fbe69c29b37b49eaea14805b095bfb4153701486416e89392fd27ec8abafa53868be86e960b9f8f959fff91f2c8ac2a14b02 languageName: node linkType: hard +"@babel/runtime@npm:^7.29.2": + version: 7.29.7 + resolution: "@babel/runtime@npm:7.29.7" + checksum: 10/9883b4951787779fd382b121f22f92966d85f19434841f65fb00b2dfec232107e139683f47c6f252891826ad8ee18317b46c3a0e4819116a9885f47b46d7126a + languageName: node + linkType: hard + "@babel/runtime@npm:^7.9.2": version: 7.23.8 resolution: "@babel/runtime@npm:7.23.8" @@ -773,34 +780,39 @@ __metadata: languageName: node linkType: hard -"@base-ui/react@npm:^1.1.0": - version: 1.3.0 - resolution: "@base-ui/react@npm:1.3.0" +"@base-ui/react@npm:^1.6.0": + version: 1.6.0 + resolution: "@base-ui/react@npm:1.6.0" dependencies: - "@babel/runtime": "npm:^7.28.6" - "@base-ui/utils": "npm:0.2.6" + "@babel/runtime": "npm:^7.29.2" + "@base-ui/utils": "npm:0.3.1" "@floating-ui/react-dom": "npm:^2.1.8" "@floating-ui/utils": "npm:^0.2.11" - tabbable: "npm:^6.4.0" use-sync-external-store: "npm:^1.6.0" peerDependencies: + "@date-fns/tz": ^1.2.0 "@types/react": ^17 || ^18 || ^19 + date-fns: ^4.0.0 react: ^17 || ^18 || ^19 react-dom: ^17 || ^18 || ^19 peerDependenciesMeta: + "@date-fns/tz": + optional: true "@types/react": optional: true - checksum: 10/0774d2c00421472ef1426c91dd326943d0d1d904ea8b591ca5b58f3629d3c82cb7e2f91ea67bfdc3f684d1aaf2325e3f85b6025aec1da4ef227a31d2d0f1d597 + date-fns: + optional: true + checksum: 10/7fed3b731e6224a473e68a901ac75014f65712e897ace01ee7cbcecd2e985c60ff0e1239a92f21cdc5db822a3b664d3f32aed27fe6f00428b2c58669771056d2 languageName: node linkType: hard -"@base-ui/utils@npm:0.2.6, @base-ui/utils@npm:^0.2.3": - version: 0.2.6 - resolution: "@base-ui/utils@npm:0.2.6" +"@base-ui/utils@npm:0.3.1": + version: 0.3.1 + resolution: "@base-ui/utils@npm:0.3.1" dependencies: - "@babel/runtime": "npm:^7.28.6" + "@babel/runtime": "npm:^7.29.2" "@floating-ui/utils": "npm:^0.2.11" - reselect: "npm:^5.1.1" + reselect: "npm:^5.2.0" use-sync-external-store: "npm:^1.6.0" peerDependencies: "@types/react": ^17 || ^18 || ^19 @@ -809,7 +821,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/328ac34c13012e1e520e9289d02d1c540f608ef83f34ca8e347a6a5376810ab744afaca1d1f8e993a848d3a8b35f569cd960aa9ebe9517eaa0eed37546acfa6d + checksum: 10/48fe7f0b1acf8c76457ac502f75e702f0c5d266311e58f96a192a73d1d3ce3e1f2f2fe9e612cb11631dbe3ecd4acc87664341e9973946ec0472163d6195a72bf languageName: node linkType: hard @@ -3370,8 +3382,7 @@ __metadata: dependencies: "@arethetypeswrong/cli": "npm:^0.17.4" "@axe-core/playwright": "npm:^4.11.0" - "@base-ui/react": "npm:^1.1.0" - "@base-ui/utils": "npm:^0.2.3" + "@base-ui/react": "npm:^1.6.0" "@central-icons-react/round-filled-radius-3-stroke-1.5": "npm:^1.1.153" "@central-icons-react/round-outlined-radius-0-stroke-1.5": "npm:^1.1.153" "@central-icons-react/round-outlined-radius-3-stroke-1.5": "npm:^1.1.153" @@ -16303,10 +16314,10 @@ __metadata: languageName: node linkType: hard -"reselect@npm:^5.1.1": - version: 5.1.1 - resolution: "reselect@npm:5.1.1" - checksum: 10/1fdae11a39ed9c8d85a24df19517c8372ee24fefea9cce3fae9eaad8e9cefbba5a3d4940c6fe31296b6addf76e035588c55798f7e6e147e1b7c0855f119e7fa5 +"reselect@npm:^5.2.0": + version: 5.2.0 + resolution: "reselect@npm:5.2.0" + checksum: 10/e53d37a35f84132682b0a819d942ff7debea90fe126f4bb5eef0f21b1f48f45dec89d27990f2ef5865f5e05d64bb88fb41e4341eb276674aee6f1f7f7362c3e8 languageName: node linkType: hard @@ -18027,13 +18038,6 @@ __metadata: languageName: node linkType: hard -"tabbable@npm:^6.4.0": - version: 6.4.0 - resolution: "tabbable@npm:6.4.0" - checksum: 10/0fe8fada2d97bd02058af2e0176bddca26b1100c069e0a096ac19ad8ef61bd0b4f0cf05e1dd68229b8f1cb6fe6bf4c34d50a5f4a3e26b150a92f89b7dc0a4916 - languageName: node - linkType: hard - "table@npm:^6.9.0": version: 6.9.0 resolution: "table@npm:6.9.0" From f663a11386406a2cb990df39a58c1786db7ac5c7 Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Thu, 2 Jul 2026 11:56:48 -0700 Subject: [PATCH 094/133] =?UTF-8?q?feat(ops):=20Grid=20Billing=20=E2=80=94?= =?UTF-8?q?=20Reconciliation=20page=20fixes=20(#29699)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Polish pass on the Grid Billing reconciliation ops UI (from a Slack request with screenshots). Seven fixes: 1. **Titles** → `Grid Billing — Reconciliation` on both the detail view and the table view (were `— Transaction` / `— Transactions`). 2. **Payment id** — the external Grid transaction id at the top of the detail view now renders in neutral gray instead of link-blue (it's Grid's own id for the incoming payment, not an LSID and not a link). 3. **Transaction ID column** added to the table, linking each row's ent id to its ops inspector page (`OpsInspectorDetails`). The cell link `stopPropagation`s so it doesn't also trigger the row's detail-page navigation. 4. **`Attribute` button** — dropped the ellipsis (`Attribute…` → `Attribute`). 5. **Attribution search** now accepts **either a platform LSID/UUID** (resolved directly via `EntUmaaasPlatform.gen_nullable`) **or a case-insensitive name prefix**. Previously name-prefix only, so pasting an LSID returned nothing. Unparseable input falls back to the name search (returns empty rather than erroring). 6. **Modal width** — attribute / reject / match modal contents used `minWidth: 420` inside a 460px modal (420 + 56px inner padding overflowed); switched to `width: 100%` so they fit. 7. **`Pending review` badge** → yellow, in both the table and the detail view. Added an additive `warning` `BadgeKind` to the shared `@lightsparkdev/ui` Badge (light-yellow bg + amber text, using existing `warningBackground`/`warningText` tokens). `Rejected`/`Unattributed` stay red. ## Test plan - New pytest cases in `test_grid_billing_queries.py` for the attribution search: by LSID, by raw UUID, an LSID for a non-billing platform → empty, and a garbage string → empty. Full file: **18 passing**. - `uv run ty check` + `ruff check`/`format` clean; schema regenerated (`export-graphql.py` + `gql-codegen` — description-only diff). - ops app `tsc --noEmit` clean; eslint + prettier clean; `@lightsparkdev/ui` builds with the new badge kind. - Frontend rendered in a screenshot harness (the ops app has no unit-test runner) — all seven fixes verified visually; posted to the Slack thread. - `bolt-codex-review`: no P0/P1/P2 findings. ## Private [Plan](https://s3.console.aws.amazon.com/s3/object/lightspark-dev-bolt-logs?prefix=jobs/covert-vertex/plan.md) (S3, internal only) ## Public Ops-only Grid Billing reconciliation page polish. --- 🤖 [covert-vertex](https://zeus.dev.dev.sparkinfra.net/#/arc?id=covert-vertex)[(#1)](https://zeus.dev.dev.sparkinfra.net/#/instance?id=covert-vertex) | [Feedback](https://zeus.dev.dev.sparkinfra.net/feedback) Original PR: https://github.com/lightsparkdev/webdev/pull/29672 --------- Co-authored-by: Bolt Agent Co-authored-by: Claude Opus 4.8 (1M context) Co-authored-by: kphurley7 GitOrigin-RevId: 880f0b6ecc4a4306c5cd47bccaa11defe0d09e87 --- packages/ui/src/components/Badge.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx index f0494a5d2..93efc13f4 100644 --- a/packages/ui/src/components/Badge.tsx +++ b/packages/ui/src/components/Badge.tsx @@ -10,7 +10,7 @@ import { Icon } from "./Icon/Icon.js"; import { type IconName } from "./Icon/types.js"; import { type PartialSimpleTypographyProps } from "./typography/types.js"; -export type BadgeKind = "success" | "danger" | "default"; +export type BadgeKind = "success" | "danger" | "default" | "warning"; export type BadgeProps = { content?: ToReactNodesArgs | undefined; @@ -43,7 +43,13 @@ export function Badge({ size: typographyProp?.size || "Small", color: typographyProp?.color || - (kind === "danger" ? "danger" : kind === "success" ? "white" : "text"), + (kind === "danger" + ? "danger" + : kind === "success" + ? "white" + : kind === "warning" + ? "warningText" + : "text"), } as const; const nodesWithTypography = setDefaultReactNodesTypography(contentProp, { @@ -65,6 +71,8 @@ export function Badge({ ? "danger" : kind === "success" ? "success" + : kind === "warning" + ? "warningText" : undefined } /> @@ -100,6 +108,8 @@ const StyledBadge = styled.div` return getColor(theme, "red42a10"); } else if (kind === "success") { return getColor(theme, "success"); + } else if (kind === "warning") { + return getColor(theme, "warningBackground"); } else { return getColor(theme, theme.badge.bg); } From 8a5b6a49955c809dc88304f3df219bd82e27021d Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Mon, 6 Jul 2026 10:43:59 -0700 Subject: [PATCH 095/133] [origin] ChipFilter interactive values, icon-token alignment, Field label restructure, Table separate borders (DES-77) (#29805) ## Reason The Grid dashboard table-system work (stacked PR to follow) needs several Origin primitives extended, and a Figma token-alignment sweep plus the DES-77 Table hairline fix were due regardless of that consumer. ## Overview - **ChipFilter**: values can now be `ReactNode`; numeric values are coerced into the dismiss label and an explicit empty `valueLabel` is honored as an a11y fallback; interactive-value styling is gated behind a new typed `ChipFilter.Trigger` compound part (promoted from a `data-chip-trigger` opt-in), with a dev warning when `valueLabel` is missing. - **CentralIcon** no longer emits an inline `currentcolor` style, so stylesheet rules can reach icon svgs directly. - Icon, border, and surface tokens aligned with the Figma spec across Menu, Combobox, Breadcrumb, Chart, DatePicker, NavigationMenu, and Shortcut (dead `data-icon` selectors dropped; DatePicker nav hover re-gated on hover capability). - **Field**: label gains a structured `Field.LabelSuffix` slot; description and error flow as block text instead of flex. - **Table** moves to `border-collapse: separate` so hairlines render at token width (DES-77). - `devWarnOnce` dedupes dev warnings to once per session; token-probe test helper shared via test-utils; changeset added covering the consumer-facing changes. ## Test Plan - 481 Origin unit + component tests passing - `tsc` clean - `stylelint` clean Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: c4ca500464d3557d299d857f57ddcdcc2d4c8456 --- packages/origin/playwright-ct.config.ts | 30 ++-- .../Breadcrumb/Breadcrumb.module.scss | 23 ++- .../components/Breadcrumb/Breadcrumb.test.tsx | 35 +++++ .../src/components/Card/Card.module.scss | 2 +- .../src/components/Chart/Chart.module.scss | 12 +- .../src/components/Chip/Chip.module.scss | 55 ++++++- .../src/components/Chip/Chip.stories.tsx | 12 ++ .../src/components/Chip/Chip.test-stories.tsx | 138 +++++++++++++++++ .../origin/src/components/Chip/Chip.test.tsx | 143 ++++++++++++++++++ packages/origin/src/components/Chip/Chip.tsx | 125 +++++++++++++-- .../components/Combobox/Combobox.module.scss | 6 +- .../DatePicker/DatePicker.module.scss | 10 +- .../src/components/Dialog/Dialog.module.scss | 4 +- .../src/components/Drawer/Drawer.test.tsx | 31 +--- .../src/components/Field/Field.module.scss | 18 ++- .../src/components/Field/Field.stories.tsx | 2 +- .../components/Field/Field.test-stories.tsx | 19 ++- .../src/components/Field/Field.test.tsx | 40 ++++- packages/origin/src/components/Field/index.ts | 2 + .../origin/src/components/Field/parts.tsx | 25 +++ .../src/components/Icon/CentralIcon.tsx | 11 +- .../src/components/Menu/Menu.module.scss | 7 +- .../origin/src/components/Menu/Menu.test.tsx | 21 +++ .../NavigationMenu/NavigationMenu.module.scss | 2 +- .../components/Shortcut/Shortcut.module.scss | 2 +- .../src/components/Shortcut/Shortcut.test.tsx | 17 +++ .../src/components/Table/Table.module.scss | 9 +- .../src/components/Table/Table.test.tsx | 76 ++++++++++ packages/origin/src/index.ts | 8 +- packages/origin/src/lib/dev-warn.ts | 16 ++ packages/origin/src/lib/dev-warn.unit.test.ts | 46 ++++++ .../origin/test-utils/resolveTokenColor.ts | 34 +++++ 32 files changed, 884 insertions(+), 97 deletions(-) create mode 100644 packages/origin/src/lib/dev-warn.unit.test.ts create mode 100644 packages/origin/test-utils/resolveTokenColor.ts diff --git a/packages/origin/playwright-ct.config.ts b/packages/origin/playwright-ct.config.ts index f1dda4fd8..d230a5aa7 100644 --- a/packages/origin/playwright-ct.config.ts +++ b/packages/origin/playwright-ct.config.ts @@ -1,35 +1,36 @@ -import { defineConfig, devices } from '@playwright/experimental-ct-react'; -import path from 'path'; -import { fileURLToPath } from 'url'; +import { defineConfig, devices } from "@playwright/experimental-ct-react"; +import path from "path"; +import { fileURLToPath } from "url"; const __dirname = path.dirname(fileURLToPath(import.meta.url)); export default defineConfig({ - testDir: './src/components', - testMatch: '**/*.test.tsx', - testIgnore: ['**/*.unit.test.tsx'], - snapshotDir: './__snapshots__', + testDir: "./src/components", + testMatch: "**/*.test.tsx", + testIgnore: ["**/*.unit.test.tsx"], + snapshotDir: "./__snapshots__", timeout: 10000, fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, - reporter: 'html', + reporter: "html", use: { ctPort: 3100, - trace: 'on-first-retry', + trace: "on-first-retry", ctViteConfig: { resolve: { alias: { - '@': path.resolve(__dirname, './src'), + "@": path.resolve(__dirname, "./src"), + "@test-utils": path.resolve(__dirname, "./test-utils"), }, }, css: { preprocessorOptions: { scss: { - api: 'modern-compiler', + api: "modern-compiler", // Mirror next.config.js sassOptions.includePaths - loadPaths: [path.resolve(__dirname, './src/tokens')], + loadPaths: [path.resolve(__dirname, "./src/tokens")], }, }, }, @@ -37,9 +38,8 @@ export default defineConfig({ }, projects: [ { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + name: "chromium", + use: { ...devices["Desktop Chrome"] }, }, ], }); - diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.module.scss b/packages/origin/src/components/Breadcrumb/Breadcrumb.module.scss index a2ebc18a4..1ea7954d3 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.module.scss +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.module.scss @@ -33,8 +33,27 @@ justify-content: center; width: 20px; height: 20px; + // Custom separators can be plain text (e.g. "/"), which reads as text color: var(--text-secondary); flex-shrink: 0; + + // Figma spec: the default chevron icon binds icon/secondary + > svg { + color: var(--icon-secondary); + } +} + +// Figma spec: the separator immediately before the current crumb promotes to +// the primary tier (Separator state=Current binds icon/primary). Covers both +// the item-rendered separator (previous sibling item) and a manually composed +// standalone separator. Text separators promote to text-primary for coherence. +.item:has(+ .item [data-current]) .separator, +.separator:has(+ .item [data-current]) { + color: var(--text-primary); + + > svg { + color: var(--icon-primary); + } } .link { @@ -70,13 +89,13 @@ padding: 0; border: none; background: none; - color: var(--text-secondary); + color: var(--icon-secondary); cursor: pointer; @include smooth-corners(var(--corner-radius-xs)); transition: color 150ms ease; &:hover { - color: var(--text-primary); + color: var(--icon-primary); } &:focus-visible { diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx index f80e66643..fe23f843a 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -11,6 +11,7 @@ import { LinkPropForwarding, PagePropForwarding, } from "./Breadcrumb.test-stories"; +import { resolveTokenColor } from "@test-utils/resolveTokenColor"; test.describe("Breadcrumb", () => { // Structure @@ -95,6 +96,40 @@ test.describe("Breadcrumb", () => { await expect(currentItem).toBeVisible(); }); + // Separator active-layer promotion (Figma: Separator state=Current) + test("separator before the current crumb renders icon-primary", async ({ + mount, + page, + }) => { + const component = await mount(); + + const iconPrimary = await resolveTokenColor(page, "--icon-primary"); + const iconSecondary = await resolveTokenColor(page, "--icon-secondary"); + + // Home > Products > [Current Page]: the chevron after Products promotes, + // the chevron after Home stays secondary. + const chevrons = component.locator('li > span[aria-hidden="true"] svg'); + await expect(chevrons.first()).toHaveCSS("color", iconSecondary); + await expect(chevrons.nth(1)).toHaveCSS("color", iconPrimary); + }); + + test("collapsed breadcrumb promotes only the separator before current", async ({ + mount, + page, + }) => { + const component = await mount(); + + const iconPrimary = await resolveTokenColor(page, "--icon-primary"); + const iconSecondary = await resolveTokenColor(page, "--icon-secondary"); + + // Home > [ellipsis] > Shoes > [Current: Running]: only the chevron + // after Shoes (index 2) promotes. + const chevrons = component.locator('li > span[aria-hidden="true"] svg'); + await expect(chevrons.first()).toHaveCSS("color", iconSecondary); + await expect(chevrons.nth(1)).toHaveCSS("color", iconSecondary); + await expect(chevrons.nth(2)).toHaveCSS("color", iconPrimary); + }); + // Ref forwarding test("forwards ref to nav element", async ({ mount, page }) => { await mount(); diff --git a/packages/origin/src/components/Card/Card.module.scss b/packages/origin/src/components/Card/Card.module.scss index 44f2d284b..e1851b099 100644 --- a/packages/origin/src/components/Card/Card.module.scss +++ b/packages/origin/src/components/Card/Card.module.scss @@ -50,7 +50,7 @@ border: var(--stroke-xs) solid var(--border-primary); @include smooth-corners(var(--corner-radius-sm)); box-shadow: var(--shadow-sm); - color: var(--text-primary); + color: var(--icon-primary); cursor: pointer; transition: background-color 150ms ease; diff --git a/packages/origin/src/components/Chart/Chart.module.scss b/packages/origin/src/components/Chart/Chart.module.scss index a5854615c..5ca71259e 100644 --- a/packages/origin/src/components/Chart/Chart.module.scss +++ b/packages/origin/src/components/Chart/Chart.module.scss @@ -23,8 +23,10 @@ // Grid .gridLine { - stroke: var(--text-primary); - stroke-opacity: var(--chart-grid-opacity, 0.18); + // Border tokens carry their own alpha; the opacity custom property is an + // escape hatch for consumers and defaults to 1 to avoid double-dimming. + stroke: var(--border-secondary); + stroke-opacity: var(--chart-grid-opacity, 1); stroke-width: 1; stroke-dasharray: 1 3; } @@ -51,8 +53,10 @@ // Cursor + active dots .cursorLine { - stroke: var(--text-primary); - stroke-opacity: var(--chart-cursor-opacity, 0.1); + // Border tokens carry their own alpha; the opacity custom property is an + // escape hatch for consumers and defaults to 1 to avoid double-dimming. + stroke: var(--border-primary); + stroke-opacity: var(--chart-cursor-opacity, 1); stroke-width: 1; pointer-events: none; } diff --git a/packages/origin/src/components/Chip/Chip.module.scss b/packages/origin/src/components/Chip/Chip.module.scss index 5f19f578c..a69c74489 100644 --- a/packages/origin/src/components/Chip/Chip.module.scss +++ b/packages/origin/src/components/Chip/Chip.module.scss @@ -9,6 +9,10 @@ @include smooth-corners(var(--corner-radius-sm)); background-color: var(--surface-secondary); color: var(--text-primary); + // Clip interactive-segment hover backgrounds (dismiss, value triggers) + // to the rounded corners. Focus rings inside use negative outline-offset + // so they stay visible. + overflow: hidden; &.sm { height: 24px; @@ -42,15 +46,15 @@ border: none; border-left: var(--stroke-xs) solid var(--border-primary); background: transparent; - color: var(--text-secondary); + color: var(--icon-secondary); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; &:hover:not(:disabled) { - color: var(--text-primary); - background-color: var(--surface-tertiary); + color: var(--icon-primary); + background-color: var(--surface-hover); } &:focus-visible { @@ -94,6 +98,51 @@ .value { @include label-sm; color: var(--text-primary); + + // Interactive value triggers opt in with `data-chip-trigger` — rendered + // by `ChipFilter.Trigger`, or set directly by legacy consumers. They + // fill the segment and take over its padding so the whole segment is a + // hit target, with the same hover/focus affordances as the dismiss + // button. The attribute contract keeps this styling away from arbitrary + // consumer content — a styled Button nested in `value` is untouched + // unless it explicitly opts in. + [data-chip-trigger] { + @include button-reset; + @include label-sm; + display: flex; + align-items: center; + height: 100%; + padding: 0 var(--spacing-xs); + color: var(--text-primary); + transition: + color 150ms ease, + background-color 150ms ease; + + &:hover:not(:disabled) { + background-color: var(--surface-hover); + } + + &:focus-visible { + outline: 2px solid var(--border-focus); + outline-offset: -2px; + } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } + } + } + + // When the value hosts an interactive trigger, the segment cedes its + // padding to the trigger; the divider anatomy stays on the segment. + .segment:has(.value [data-chip-trigger]) { + padding: 0; + + .value { + display: flex; + align-items: stretch; + height: 100%; + } } .dismiss { diff --git a/packages/origin/src/components/Chip/Chip.stories.tsx b/packages/origin/src/components/Chip/Chip.stories.tsx index ca68dcfe4..d865306c8 100644 --- a/packages/origin/src/components/Chip/Chip.stories.tsx +++ b/packages/origin/src/components/Chip/Chip.stories.tsx @@ -50,6 +50,18 @@ export const FilterVariant: StoryObj = { }, }; +export const FilterInteractiveValue: StoryObj = { + render: () => ( + {}}>Active} + valueLabel="Active" + onDismiss={() => {}} + /> + ), +}; + export const FilterSmall: StoryObj = { render: (args) => , args: { diff --git a/packages/origin/src/components/Chip/Chip.test-stories.tsx b/packages/origin/src/components/Chip/Chip.test-stories.tsx index 387fcdce5..b1733bbc7 100644 --- a/packages/origin/src/components/Chip/Chip.test-stories.tsx +++ b/packages/origin/src/components/Chip/Chip.test-stories.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Chip, ChipFilter } from "./Chip"; +import { Menu } from "../Menu"; export function DefaultChip() { const [dismissed, setDismissed] = React.useState(false); @@ -43,6 +44,143 @@ export function FilterChip() { ); } +export function FilterChipWithNodeValue() { + return ( + Active} + valueLabel="Active" + onDismiss={() => {}} + /> + ); +} + +export function FilterChipWithNumericValue() { + return ( + {}} /> + ); +} + +export function FilterChipWithTriggerValue() { + const [dismissed, setDismissed] = React.useState(false); + const [clicks, setClicks] = React.useState(0); + + if (dismissed) { + return
Filter dismissed
; + } + + return ( + <> + setClicks((c) => c + 1)}> + Active + + } + valueLabel="Active" + onDismiss={() => setDismissed(true)} + /> +
{clicks}
+ + ); +} + +export function DisabledFilterChipWithTrigger() { + const [clicks, setClicks] = React.useState(0); + + return ( + <> + setClicks((c) => c + 1)}> + Active + + } + valueLabel="Active" + onDismiss={() => {}} + /> +
{clicks}
+ + ); +} + +// The documented composition — the trigger's inherited disabled state must +// survive the render-prop merge with a Base UI menu trigger. +export function DisabledFilterChipWithMenuTrigger() { + return ( + + }>Active + + + + Inactive + + + + + } + valueLabel="Active" + onDismiss={() => {}} + /> + ); +} + +export function FilterChipWithTriggerValueNoLabel() { + return ( + Active} + onDismiss={() => {}} + /> + ); +} + +// Published contract: elements that set the raw attribute themselves must +// keep receiving the segment-takeover styling. +export function FilterChipWithRawAttributeTrigger() { + return ( + + Active + + } + valueLabel="Active" + onDismiss={() => {}} + /> + ); +} + +export function FilterChipWithPlainButtonValue() { + return ( + + Active + + } + valueLabel="Active" + onDismiss={() => {}} + /> + ); +} + export function ChipNoDismiss() { return No dismiss button; } diff --git a/packages/origin/src/components/Chip/Chip.test.tsx b/packages/origin/src/components/Chip/Chip.test.tsx index e85a1be42..7a375ab2b 100644 --- a/packages/origin/src/components/Chip/Chip.test.tsx +++ b/packages/origin/src/components/Chip/Chip.test.tsx @@ -2,10 +2,19 @@ import { test, expect } from "@playwright/experimental-ct-react"; import { DefaultChip, DisabledChip, + DisabledFilterChipWithTrigger, + DisabledFilterChipWithMenuTrigger, FilterChip, + FilterChipWithNodeValue, + FilterChipWithNumericValue, + FilterChipWithTriggerValue, + FilterChipWithTriggerValueNoLabel, + FilterChipWithRawAttributeTrigger, + FilterChipWithPlainButtonValue, ChipNoDismiss, ChipWithArbitraryChild, } from "./Chip.test-stories"; +import { resolveTokenColor } from "@test-utils/resolveTokenColor"; test.describe("Chip", () => { test.describe("default behavior", () => { @@ -46,6 +55,26 @@ test.describe("Chip", () => { await expect(page.locator('[data-testid="dismissed"]')).toBeVisible(); }); + test("dismiss hover uses the hover surface, clipped by the chip radius", async ({ + mount, + page, + }) => { + await mount(); + const chip = page.locator("span").first(); + // Hover backgrounds on interactive segments are clipped to the + // chip's rounded corners. + await expect(chip).toHaveCSS("overflow", "hidden"); + + const hoverColor = await resolveTokenColor( + page, + "--surface-hover", + "backgroundColor", + ); + const dismissButton = page.getByRole("button", { name: /remove/i }); + await dismissButton.hover(); + await expect(dismissButton).toHaveCSS("background-color", hoverColor); + }); + test("dismisses on Space key", async ({ mount, page }) => { await mount(); const dismissButton = page.getByRole("button", { name: /remove/i }); @@ -96,6 +125,92 @@ test.describe("Chip", () => { await dismissButton.click(); await expect(page.locator('[data-testid="dismissed"]')).toBeVisible(); }); + + test("numeric value appears in the dismiss aria-label without valueLabel", async ({ + mount, + page, + }) => { + await mount(); + await expect( + page.getByRole("button", { name: "Remove filter Count = 5" }), + ).toBeVisible(); + }); + + test("renders a non-string value node", async ({ mount, page }) => { + await mount(); + await expect(page.locator('[data-testid="node-value"]')).toHaveText( + "Active", + ); + await expect( + page.getByRole("button", { name: "Remove filter Status is Active" }), + ).toBeVisible(); + }); + + test("trigger inside value is clickable", async ({ mount, page }) => { + await mount(); + const trigger = page.getByRole("button", { name: "Active", exact: true }); + await trigger.click(); + await trigger.click(); + await expect(page.locator('[data-testid="click-count"]')).toHaveText("2"); + }); + + test("opted-in trigger takes over the segment padding", async ({ + mount, + page, + }) => { + await mount(); + // Segments are property / operator / value in order; the value segment + // cedes its padding to the data-chip-trigger element. + const chip = page.locator("span").first(); + const valueSegment = chip.locator("> span").nth(2); + await expect(valueSegment).toHaveCSS("padding", "0px"); + }); + + test("a raw data-chip-trigger attribute still takes over the segment", async ({ + mount, + page, + }) => { + await mount(); + // Published contract: consumers who set the attribute directly (before + // ChipFilter.Trigger existed) keep the segment-takeover styling. + const chip = page.locator("span").first(); + const valueSegment = chip.locator("> span").nth(2); + await expect(valueSegment).toHaveCSS("padding", "0px"); + }); + + test("a button without data-chip-trigger is not restyled", async ({ + mount, + page, + }) => { + await mount(); + // Buttons that don't opt in to the trigger contract must not trigger + // the segment-padding takeover or the button-reset styling. + const chip = page.locator("span").first(); + const valueSegment = chip.locator("> span").nth(2); + await expect(valueSegment).not.toHaveCSS("padding", "0px"); + }); + + test("uses valueLabel in dismiss aria-label for node values", async ({ + mount, + page, + }) => { + await mount(); + const dismissButton = page.getByRole("button", { + name: "Remove filter Status is Active", + }); + await dismissButton.click(); + await expect(page.locator('[data-testid="dismissed"]')).toBeVisible(); + }); + + test("omits value from dismiss aria-label when no valueLabel is given", async ({ + mount, + page, + }) => { + await mount(); + await expect( + page.getByRole("button", { name: "Remove filter Status is" }), + ).toBeVisible(); + }); }); test.describe("no dismiss button", () => { @@ -126,5 +241,33 @@ test.describe("Chip", () => { const dismissButton = page.getByRole("button", { name: /remove/i }); await expect(dismissButton).toBeDisabled(); }); + + test("filter trigger is not focusable when the chip is disabled", async ({ + mount, + page, + }) => { + await mount(); + const trigger = page.getByRole("button", { name: "Active", exact: true }); + await expect(trigger).toBeDisabled(); + + // Keyboard access must be blocked too — data-disabled only stops + // pointer events. + await page.keyboard.press("Tab"); + await expect(trigger).not.toBeFocused(); + await expect(page.locator('[data-testid="click-count"]')).toHaveText("0"); + }); + + test("menu-composed filter trigger is not focusable when the chip is disabled", async ({ + mount, + page, + }) => { + await mount(); + const trigger = page.getByRole("button", { name: "Active", exact: true }); + await expect(trigger).toBeDisabled(); + + await page.keyboard.press("Tab"); + await expect(trigger).not.toBeFocused(); + await expect(page.locator('[data-testid="menu-item"]')).not.toBeVisible(); + }); }); }); diff --git a/packages/origin/src/components/Chip/Chip.tsx b/packages/origin/src/components/Chip/Chip.tsx index da475a25b..dcd579819 100644 --- a/packages/origin/src/components/Chip/Chip.tsx +++ b/packages/origin/src/components/Chip/Chip.tsx @@ -1,8 +1,10 @@ "use client"; import * as React from "react"; +import { useRender } from "@base-ui/react/use-render"; import clsx from "clsx"; import { CentralIcon } from "../Icon"; +import { devWarnOnce } from "../../lib/dev-warn"; import styles from "./Chip.module.scss"; export interface ChangeEventDetails { @@ -40,6 +42,11 @@ function createChangeEventDetails( }; } +// Origin's standard small icon size for both chip sizes. IconCrossSmall's +// glyph fills only the center of its viewBox, so at 16px it reads ~6px — +// appropriately subtle for the 24px sm and 28px md chips. +const DISMISS_ICON_SIZE = 16; + export interface ChipProps extends React.HTMLAttributes { /** The label text for default variant */ children?: React.ReactNode; @@ -65,8 +72,23 @@ export interface ChipFilterProps property: string; /** Operator text */ operator: string; - /** Value text */ - value: string; + /** + * Value content. Strings render as static text. To make the value segment + * interactive, pass a `` (for example composed with a + * menu or popover trigger via its `render` prop) — the trigger then takes + * over the segment's padding and hover/focus affordances. Elements that + * carry a raw `data-chip-trigger` attribute opt in the same way; other + * elements render unstyled. + */ + value: React.ReactNode; + /** + * Plain-text description of the value, used in the dismiss button's + * accessible label when `value` is not plain text. Provide it for every + * element value so the label doesn't dangle ("Remove filter Status + * is"); a dev-mode warning fires when it's missing. Ignored when + * `value` is a string, number, or bigint — those describe themselves. + */ + valueLabel?: string; } /** @@ -101,9 +123,8 @@ export const Chip = React.forwardRef( }; const label = typeof children === "string" ? children : "chip"; - const iconSize = size === "sm" ? 10 : 12; const resolvedDismissIcon = dismissIcon ?? ( - + ); return ( @@ -131,16 +152,18 @@ export const Chip = React.forwardRef( }, ); -/** - * Filter variant of Chip with property, operator, and value segments. - * Renders a `` element with segmented content and dismiss button. - */ -export const ChipFilter = React.forwardRef( +// Lets ChipFilter.Trigger inherit the root's disabled state, since the +// root only communicates it via `data-disabled` (opacity + pointer-events) +// which doesn't stop keyboard activation on a composed trigger. +const ChipFilterDisabledContext = React.createContext(false); + +const ChipFilterRoot = React.forwardRef( function ChipFilter(props, forwardedRef) { const { property, operator, value, + valueLabel, size = "md", disabled = false, onDismiss: onDismissProp, @@ -163,10 +186,31 @@ export const ChipFilter = React.forwardRef( } }; - const label = `${property} ${operator} ${value}`; - const iconSize = size === "sm" ? 10 : 12; + // Strings, numbers, and bigints are self-describing; everything else + // needs `valueLabel` to appear in the dismiss button's accessible label. + const valueText = + typeof value === "string" + ? value + : typeof value === "number" || typeof value === "bigint" + ? String(value) + : valueLabel; + + if (valueText === undefined && value != null && onDismissProp) { + devWarnOnce( + "ChipFilter: a non-string `value` was provided without `valueLabel`. " + + "The dismiss button's accessible label will omit the value " + + `("Remove filter ${property} ${operator}"). Pass \`valueLabel\` ` + + "to describe the value for screen readers.", + ); + } + + // Empty text (e.g. an explicit `valueLabel=""`) drops out of the label + // entirely so it can't leave a trailing space. + const label = valueText + ? `${property} ${operator} ${valueText}` + : `${property} ${operator}`; const resolvedDismissIcon = dismissIcon ?? ( - + ); return ( @@ -183,7 +227,11 @@ export const ChipFilter = React.forwardRef( {operator} - {value} + + + {value} + + {onDismissProp && ( + + ); + }, +}; diff --git a/packages/origin/src/components/OTPField/OTPField.test-stories.tsx b/packages/origin/src/components/OTPField/OTPField.test-stories.tsx new file mode 100644 index 000000000..1fd5fb827 --- /dev/null +++ b/packages/origin/src/components/OTPField/OTPField.test-stories.tsx @@ -0,0 +1,113 @@ +"use client"; + +import * as React from "react"; +import { OTPField } from "./"; +import { Field } from "@/components/Field"; +import { Form } from "@/components/Form"; + +export function Default() { + return ; +} + +export function Controlled() { + const [value, setValue] = React.useState(""); + const [completedCode, setCompletedCode] = React.useState(""); + + return ( +
+ + {value} + {completedCode} +
+ ); +} + +export function WithField() { + return ( + + Verification code + + + ); +} + +export function WithFieldInvalid() { + return ( + + Verification code + + Enter the code we sent to your device + + ); +} + +// Twin catalog story: OTPField.stories.tsx `Normalization` — keep in sync. +export function Normalization() { + const [value, setValue] = React.useState(""); + const [rejected, setRejected] = React.useState(false); + // Base UI fires onValueInvalid before onValueChange, so a mixed paste + // like "AB!12" both rejects and commits from one event. Track which + // event rejected so its own change doesn't clear the error it raised. + const lastRejectedEvent = React.useRef(null); + + return ( + + Recovery code + next.toUpperCase()} + value={value} + onValueChange={(next, details) => { + setValue(next); + if (details.event !== lastRejectedEvent.current) { + setRejected(false); + } + }} + onValueInvalid={(_, details) => { + lastRejectedEvent.current = details.event; + setRejected(true); + }} + /> + {rejected && Use letters and numbers only} + {value} + + ); +} + +export function AutoSubmit() { + const [submittedCode, setSubmittedCode] = React.useState(""); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + const formData = new FormData(event.currentTarget); + setSubmittedCode(formData.get("verificationCode") as string); + }; + + return ( +
+
+ + Verification code + + +
+ {submittedCode} +
+ ); +} + +export function Disabled() { + return ; +} + +export function ReadOnly() { + return ; +} + +export function Placeholder() { + return ; +} diff --git a/packages/origin/src/components/OTPField/OTPField.test.tsx b/packages/origin/src/components/OTPField/OTPField.test.tsx new file mode 100644 index 000000000..6118d757e --- /dev/null +++ b/packages/origin/src/components/OTPField/OTPField.test.tsx @@ -0,0 +1,319 @@ +/** + * OTPField Playwright CT tests. + * + * Covers behavior that needs a real browser: typing and focus advancement, + * paste distribution, keyboard navigation, accessible-name resolution, + * computed styling, and axe scans. + * + * Static attribute contracts (slot counts, per-slot aria-labels, + * autocomplete, disabled attributes) live in OTPField.unit.test.tsx. + */ + +import { test, expect } from "@playwright/experimental-ct-react"; +import AxeBuilder from "@axe-core/playwright"; +import { + AutoSubmit, + Default, + Controlled, + Disabled, + WithField, + WithFieldInvalid, + Normalization, + Placeholder, + ReadOnly, +} from "./OTPField.test-stories"; + +const axeConfig = { + rules: { + "landmark-one-main": { enabled: false }, + "page-has-heading-one": { enabled: false }, + region: { enabled: false }, + }, +}; + +test.describe("OTPField", () => { + test("has no accessibility violations", async ({ mount, page }) => { + await mount(); + const results = await new AxeBuilder({ page }).options(axeConfig).analyze(); + expect(results.violations).toEqual([]); + }); + + test("first slot is labelled by the field label", async ({ mount, page }) => { + await mount(); + + const firstSlot = page.locator("[data-otp-field-input]").first(); + await expect(firstSlot).toHaveAccessibleName("Verification code"); + }); + + test("later slots resolve their positional accessible name", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await expect(slots.nth(1)).toHaveAccessibleName("Character 2 of 6"); + }); + + test("typing advances focus through slots", async ({ mount, page }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("123"); + + await expect(slots.nth(0)).toHaveValue("1"); + await expect(slots.nth(1)).toHaveValue("2"); + await expect(slots.nth(2)).toHaveValue("3"); + await expect(slots.nth(3)).toBeFocused(); + }); + + test("rejects non-numeric characters by default", async ({ mount, page }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("a1b2"); + + await expect(page.getByTestId("value")).toHaveText("12"); + }); + + test("pasting distributes characters across slots", async ({ + mount, + page, + }) => { + await mount(); + + await page + .context() + .grantPermissions(["clipboard-read", "clipboard-write"]); + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.evaluate(() => navigator.clipboard.writeText("123456")); + await page.keyboard.press("ControlOrMeta+v"); + + await expect(page.getByTestId("value")).toHaveText("123456"); + await expect(slots.nth(0)).toHaveValue("1"); + await expect(slots.nth(5)).toHaveValue("6"); + }); + + test("arrow keys move focus between slots", async ({ mount, page }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("12"); + + await expect(slots.nth(2)).toBeFocused(); + await page.keyboard.press("ArrowLeft"); + await expect(slots.nth(1)).toBeFocused(); + await page.keyboard.press("ArrowRight"); + await expect(slots.nth(2)).toBeFocused(); + await page.keyboard.press("Home"); + await expect(slots.nth(0)).toBeFocused(); + }); + + test("backspace clears the previous slot and moves focus", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("12"); + await page.keyboard.press("Backspace"); + + await expect(page.getByTestId("value")).toHaveText("1"); + await expect(slots.nth(1)).toBeFocused(); + }); + + test("fires onValueComplete when all slots are filled", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("123456"); + + await expect(page.getByTestId("completed")).toHaveText("123456"); + }); + + test("autoSubmit submits the owning form on completion", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("123456"); + + await expect(page.getByTestId("submitted")).toHaveText("123456"); + }); + + test("normalization uppercases typed letters", async ({ mount, page }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("ab1"); + + await expect(page.getByTestId("value")).toHaveText("AB1"); + }); + + test("rejected characters surface feedback and clear on correction", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("!"); + + await expect(page.getByText("Use letters and numbers only")).toBeVisible(); + + await page.keyboard.type("a"); + await expect( + page.getByText("Use letters and numbers only"), + ).not.toBeVisible(); + }); + + test("mixed-content paste commits clean characters and keeps the error", async ({ + mount, + page, + }) => { + await mount(); + + await page + .context() + .grantPermissions(["clipboard-read", "clipboard-write"]); + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.evaluate(() => navigator.clipboard.writeText("AB!12")); + await page.keyboard.press("ControlOrMeta+v"); + + // The rejection (onValueInvalid) and the commit (onValueChange) come + // from the same paste event; the error must survive the commit. + await expect(page.getByTestId("value")).toHaveText("AB12"); + await expect(page.getByText("Use letters and numbers only")).toBeVisible(); + }); + + test("placeholder is visible when empty and hidden on the focused slot", async ({ + mount, + page, + }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + const placeholderColor = (slot: ReturnType) => + slot.evaluate((el) => + getComputedStyle(el, "::placeholder").getPropertyValue("color"), + ); + + const unfocusedColor = await placeholderColor(slots.nth(0)); + expect(unfocusedColor).not.toBe("rgba(0, 0, 0, 0)"); + + await slots.first().click(); + const focusedColor = await placeholderColor(slots.nth(0)); + expect(focusedColor).toBe("rgba(0, 0, 0, 0)"); + + // Later slots keep their hint while the first slot is active. + const laterColor = await placeholderColor(slots.nth(1)); + expect(laterColor).toBe(unfocusedColor); + }); + + // Styling-focused rather than a typing test: disabled inputs reject + // click/focus at the browser level, so a typing flow can't run. + test("disabled applies data-disabled and disabled styling", async ({ + mount, + page, + }) => { + await mount(); + + const firstSlot = page.locator("[data-otp-field-input]").first(); + await expect(firstSlot).toHaveAttribute("data-disabled", ""); + await expect(firstSlot).toBeDisabled(); + + const cursor = await firstSlot.evaluate( + (el) => getComputedStyle(el).cursor, + ); + expect(cursor).toBe("not-allowed"); + + await expect(page.locator("[data-otp-field-root]")).toHaveAttribute( + "data-disabled", + "", + ); + }); + + test("readOnly ignores typing", async ({ mount, page }) => { + await mount(); + + const slots = page.locator("[data-otp-field-input]"); + await slots.first().click(); + await page.keyboard.type("999"); + + await expect(slots.nth(0)).toHaveValue("1"); + await expect(slots.nth(1)).toHaveValue("2"); + await expect(slots.nth(2)).toHaveValue("3"); + }); + + test("invalid state applies critical styling", async ({ mount, page }) => { + await mount(); + + const firstSlot = page.locator("[data-otp-field-input]").first(); + await expect(firstSlot).toHaveAttribute("data-invalid", ""); + await expect(firstSlot).toHaveAttribute("aria-invalid", "true"); + + const boxShadow = await firstSlot.evaluate( + (el) => getComputedStyle(el).boxShadow, + ); + expect(boxShadow).not.toBe("none"); + }); + + test("shows the error message when invalid", async ({ mount, page }) => { + await mount(); + + await expect( + page.getByText("Enter the code we sent to your device"), + ).toBeVisible(); + }); + + test("slots have correct size", async ({ mount, page }) => { + await mount(); + + const box = await page + .locator("[data-otp-field-input]") + .first() + .boundingBox(); + expect(box?.width).toBe(32); + expect(box?.height).toBe(36); + }); + + test("slots have enough gap for the critical halo", async ({ + mount, + page, + }) => { + await mount(); + + const gap = await page + .locator("[data-otp-field-root]") + .evaluate((el) => getComputedStyle(el).columnGap); + expect(gap).toBe("8px"); + }); + + test("respects reduced motion preference", async ({ mount, page }) => { + await page.emulateMedia({ reducedMotion: "reduce" }); + await mount(); + + const transition = await page + .locator("[data-otp-field-input]") + .first() + .evaluate((el) => getComputedStyle(el).transition); + + expect(transition).toMatch(/none|0s/); + }); +}); diff --git a/packages/origin/src/components/OTPField/OTPField.unit.test.tsx b/packages/origin/src/components/OTPField/OTPField.unit.test.tsx new file mode 100644 index 000000000..d04a1a317 --- /dev/null +++ b/packages/origin/src/components/OTPField/OTPField.unit.test.tsx @@ -0,0 +1,216 @@ +/** + * OTPField Unit Tests (Vitest + @testing-library/react) + * + * Fast tests for component contracts, rendering logic, and conformance. + * These run in JSDOM (~5ms/test) vs Playwright CT (~200ms/test). + * + * For real browser testing (typing flows, paste, keyboard navigation, + * accessibility tree), see OTPField.test.tsx + */ + +import { describe, it, expect } from "vitest"; +import { render, screen } from "@testing-library/react"; +import * as React from "react"; +import { OTPField } from "./"; +import { Field } from "../Field"; + +function getSlots(container: HTMLElement) { + return Array.from( + container.querySelectorAll("[data-otp-field-input]"), + ); +} + +describe("OTPField.Root", () => { + it("renders 6 slots by default", () => { + const { container } = render(); + expect(getSlots(container)).toHaveLength(6); + }); + + it("renders a configurable number of slots", () => { + const { container } = render(); + expect(getSlots(container)).toHaveLength(4); + }); + + it("renders default slots when children is null", () => { + const { container } = render({null}); + expect(getSlots(container)).toHaveLength(6); + }); + + it("renders default slots when children is a false conditional", () => { + const { container } = render({false}); + expect(getSlots(container)).toHaveLength(6); + }); + + it("renders explicit children instead of auto slots", () => { + const { container } = render( + + + + , + ); + expect(getSlots(container)).toHaveLength(2); + }); + + it("forwards data-* attributes to the DOM", () => { + render(); + expect(screen.getByTestId("test-root")).toHaveAttribute( + "data-custom", + "value", + ); + }); + + it("applies custom className alongside internal className", () => { + render(); + const element = screen.getByTestId("test-root"); + expect(element).toHaveClass("custom-class"); + expect(element.className).not.toBe("custom-class"); + }); + + it("supports className as a state function", () => { + render( + (state.disabled ? "is-disabled" : "is-enabled")} + />, + ); + expect(screen.getByTestId("test-root")).toHaveClass("is-enabled"); + expect(screen.getByTestId("test-root").className).not.toBe("is-enabled"); + }); + + it("splits defaultValue across slots", () => { + const { container } = render(); + const slots = getSlots(container); + expect(slots[0]).toHaveValue("1"); + expect(slots[1]).toHaveValue("2"); + expect(slots[2]).toHaveValue("3"); + expect(slots[3]).toHaveValue(""); + }); + + it("marks all slots disabled when the root is disabled", () => { + const { container } = render(); + for (const slot of getSlots(container)) { + expect(slot).toBeDisabled(); + expect(slot).toHaveAttribute("data-disabled", ""); + } + }); + + it("marks all slots readonly when the root is readOnly", () => { + const { container } = render(); + for (const slot of getSlots(container)) { + expect(slot).toHaveAttribute("readonly"); + } + }); + + it("forwards placeholder to auto-rendered slots", () => { + const { container } = render(); + const slots = getSlots(container); + expect(slots).toHaveLength(6); + for (const slot of slots) { + expect(slot).toHaveAttribute("placeholder", "0"); + } + }); + + it("ignores placeholder when explicit children are provided", () => { + const { container } = render( + + + + , + ); + for (const slot of getSlots(container)) { + expect(slot).not.toHaveAttribute("placeholder"); + } + }); + + it("applies one-time-code autocomplete to the first slot only", () => { + const { container } = render(); + const slots = getSlots(container); + expect(slots[0]).toHaveAttribute("autocomplete", "one-time-code"); + expect(slots[1]).toHaveAttribute("autocomplete", "off"); + }); +}); + +describe("OTPField.Input aria-labels", () => { + it("labels slots after the first with their position", () => { + const { container } = render(); + const slots = getSlots(container); + expect(slots[0]).not.toHaveAttribute("aria-label"); + expect(slots[1]).toHaveAttribute("aria-label", "Character 2 of 6"); + expect(slots[5]).toHaveAttribute("aria-label", "Character 6 of 6"); + }); + + it("uses the configured length in slot labels", () => { + const { container } = render(); + const slots = getSlots(container); + expect(slots[3]).toHaveAttribute("aria-label", "Character 4 of 4"); + }); + + it("respects a custom aria-label on later slots", () => { + const { container } = render( + + + + , + ); + const slots = getSlots(container); + expect(slots[1]).toHaveAttribute("aria-label", "Last digit"); + }); +}); + +describe("OTPField with Field", () => { + it("associates the field label with the first slot", () => { + const { container } = render( + + Verification code + + , + ); + const slots = getSlots(container); + const labelledBy = slots[0].getAttribute("aria-labelledby"); + expect(labelledBy).toBeTruthy(); + expect(document.getElementById(labelledBy as string)).toHaveTextContent( + "Verification code", + ); + }); + + it("propagates Field invalid state to slots", () => { + const { container } = render( + + Verification code + + , + ); + for (const slot of getSlots(container)) { + expect(slot).toHaveAttribute("data-invalid"); + } + }); +}); + +describe("OTPField.Separator", () => { + it("renders with role separator", () => { + render( + + + + + , + ); + expect(screen.getByTestId("sep")).toHaveAttribute("role", "separator"); + }); + + it("renders grouped layouts with all slots", () => { + const { container } = render( + + + + + + + + + , + ); + expect(getSlots(container)).toHaveLength(6); + expect(screen.getByTestId("sep")).toBeInTheDocument(); + }); +}); diff --git a/packages/origin/src/components/OTPField/index.ts b/packages/origin/src/components/OTPField/index.ts new file mode 100644 index 000000000..50422024e --- /dev/null +++ b/packages/origin/src/components/OTPField/index.ts @@ -0,0 +1,9 @@ +import * as OTPField from "./parts"; + +export { OTPField }; + +export type { + RootProps as OTPFieldRootProps, + InputProps as OTPFieldInputProps, + SeparatorProps as OTPFieldSeparatorProps, +} from "./parts"; diff --git a/packages/origin/src/components/OTPField/parts.tsx b/packages/origin/src/components/OTPField/parts.tsx new file mode 100644 index 000000000..28f19d273 --- /dev/null +++ b/packages/origin/src/components/OTPField/parts.tsx @@ -0,0 +1,142 @@ +"use client"; + +import * as React from "react"; +import { OTPField as BaseOTPField } from "@base-ui/react/otp-field"; +import clsx from "clsx"; +import styles from "./OTPField.module.scss"; + +/** + * Groups all OTP field parts and manages their state. + * Renders a `
` element. + * + * Base UI handles value normalization, paste distribution, per-slot keyboard + * navigation, and `autocomplete="one-time-code"` on the first slot natively. + * Compose inside `Field.Root` with `Field.Label` / `Field.Error` for label + * association and validity state. + * + * When no children are provided, the root renders `length` input slots + * automatically. Pass children (`OTPField.Input` / `OTPField.Separator`) + * for grouped layouts such as `123-456`. + * + * @example + * ```tsx + * + * Verification code + * verify(code)} /> + * Enter the 6-digit code + * + * ``` + */ +export interface RootProps extends Omit { + /** + * The number of OTP input slots. + * @default 6 + */ + length?: number; + /** + * Placeholder character shown in each empty auto-rendered slot. + * Ignored when explicit children are provided; pass `placeholder` to + * each `OTPField.Input` instead. + */ + placeholder?: string; +} + +export const Root = React.forwardRef( + function Root(props, ref) { + const { className, length = 6, placeholder, children, ...other } = props; + // `children ?? ...` misses `{false}` from conditional rendering, and + // `React.Children.count(false)` returns 1 (booleans occupy child slots); + // `toArray` strips booleans/null/undefined, so it's the correct guard. + const hasExplicitChildren = React.Children.toArray(children).length > 0; + const rootClassName: BaseOTPField.Root.Props["className"] = + typeof className === "function" + ? (state) => clsx(styles.root, className(state)) + : clsx(styles.root, className); + + return ( + + {hasExplicitChildren + ? children + : Array.from({ length }, (_, index) => ( + 0 ? `Character ${index + 1} of ${length}` : undefined + } + /> + ))} + + ); + }, +); + +/** + * An individual OTP character input. + * Renders an `` element. + * + * In manually-composed layouts (e.g. grouped with separators), pass + * `aria-label` such as "Character N of M" to slots after the first so + * assistive technology can announce which slot is focused. The first slot + * is announced via the field label. Auto-rendered slots (a childless + * `OTPField.Root`) get these labels automatically. + */ +export interface InputProps extends BaseOTPField.Input.Props {} + +export const Input = React.forwardRef( + function Input(props, ref) { + const { className, ...other } = props; + const inputClassName: BaseOTPField.Input.Props["className"] = + typeof className === "function" + ? (state) => clsx(styles.input, className(state)) + : clsx(styles.input, className); + + return ( + + ); + }, +); + +/** + * A separator element accessible to screen readers. + * Renders a `
` element styled as a short dash for grouped layouts + * such as `123-456`. + */ +export interface SeparatorProps extends BaseOTPField.Separator.Props {} + +export const Separator = React.forwardRef( + function Separator(props, ref) { + const { className, ...other } = props; + const separatorClassName: BaseOTPField.Separator.Props["className"] = + typeof className === "function" + ? (state) => clsx(styles.separator, className(state)) + : clsx(styles.separator, className); + + return ( + + ); + }, +); + +if (process.env.NODE_ENV !== "production") { + Root.displayName = "OTPFieldRoot"; + Input.displayName = "OTPFieldInput"; + Separator.displayName = "OTPFieldSeparator"; +} diff --git a/packages/origin/src/index.ts b/packages/origin/src/index.ts index 5471ec547..976c68d79 100644 --- a/packages/origin/src/index.ts +++ b/packages/origin/src/index.ts @@ -81,6 +81,12 @@ export { Menu } from "./components/Menu"; export { Menubar } from "./components/Menubar"; export { Meter } from "./components/Meter"; export { NavigationMenu } from "./components/NavigationMenu"; +export { OTPField } from "./components/OTPField"; +export type { + OTPFieldRootProps, + OTPFieldInputProps, + OTPFieldSeparatorProps, +} from "./components/OTPField"; export { Pager, PagerContext, usePagerContext } from "./components/Pager"; export type { PagerRootProps, From 0bdb86a8889ec6f6c36e54796a758358210548b8 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 7 Jul 2026 16:35:35 -0700 Subject: [PATCH 101/133] [gha] Enable GitHub-backed Turbo remote cache (#27018) ## Reason Turbo's local-only cache makes the JS CI jobs repeat the same work across runners. We want a remote Turbo cache for CI, but backed by GitHub Actions cache rather than Vercel-hosted cache infrastructure. ## Overview - Upgrade `turbo` to `^2.9.9`. - Add a shared `setup-turbo-remote-cache` action using `rharkor/caching-for-turbo` with the GitHub cache provider. - Invoke the shared cache setup from the common Yarn install action and the dev-cli Spark JS build path. - Expand workflow path filters so changes to the shared cache action exercise the affected CI flows. ## Test Plan - `yarn install --immutable --mode=skip-build` - `ruby -e 'require "yaml"; ARGV.each { |p| YAML.load_file(p); puts "OK #{p}" }' .github/actions/setup-turbo-remote-cache/action.yml .github/actions/yarn-nm-install/action.yml .github/actions/setup-dev-cli/action.yml .github/workflows/ci.yaml .github/workflows/deploy-origin-storybook.yaml .github/workflows/js-lightspark-sdk-hermetic.yaml .github/workflows/pr-ui-preview-deploy.yaml .github/workflows/ssp-spark-hermetic-dev-cli.yaml` - `git diff --check` - `yarn turbo run build --dry=json` - Pre-commit hook: `yarn install`, `yarn format` GitOrigin-RevId: c550e188d273df57f8cb1d0dcb4f6995537dcb34 --- apps/examples/ui-test-app/jest.config.ts | 2 +- package.json | 2 +- .../src/tests/uma-utils.test.ts | 13 +++--- packages/lightspark-sdk/turbo.json | 3 ++ packages/vite/index.js | 45 ++++++++++++++++--- turbo.json | 42 +++++++++++++++++ 6 files changed, 91 insertions(+), 16 deletions(-) diff --git a/apps/examples/ui-test-app/jest.config.ts b/apps/examples/ui-test-app/jest.config.ts index d2cf931c9..f8becf1fb 100644 --- a/apps/examples/ui-test-app/jest.config.ts +++ b/apps/examples/ui-test-app/jest.config.ts @@ -16,7 +16,7 @@ const config: JestConfigWithTsJest = { }, resetMocks: true, /* Sometimes turbo slows down test execution across many tasks: */ - testTimeout: 20000, + testTimeout: 60_000, moduleNameMapper: { "^.+\\.(css|svg|png)$": "identity-obj-proxy", }, diff --git a/package.json b/package.json index 6338f2e26..04bba3939 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "octokit": "^4.0.2", "prismjs": "^1.29.0", "ts-prune": "^0.10.3", - "turbo": "^2.9.17" + "turbo": "^2.10.3" }, "dependenciesMeta": { "@central-icons-react/round-filled-radius-3-stroke-1.5": { diff --git a/packages/lightspark-sdk/src/tests/uma-utils.test.ts b/packages/lightspark-sdk/src/tests/uma-utils.test.ts index 7df066731..d24906e89 100644 --- a/packages/lightspark-sdk/src/tests/uma-utils.test.ts +++ b/packages/lightspark-sdk/src/tests/uma-utils.test.ts @@ -1,18 +1,17 @@ import { beforeEach, describe, expect, jest, test } from "@jest/globals"; import LightsparkClient from "../client.js"; -import { getCredentialsFromEnvOrThrow } from "../env.js"; import { AccountTokenAuthProvider } from "../index.js"; import { TESTS_TIMEOUT } from "./integration/constants.js"; -const { apiTokenClientId, apiTokenClientSecret, baseUrl } = - getCredentialsFromEnvOrThrow(); - const accountAuthProvider = new AccountTokenAuthProvider( - apiTokenClientId, - apiTokenClientSecret, + "test-client-id", + "test-client-secret", ); -const lightsparkClient = new LightsparkClient(accountAuthProvider, baseUrl); +const lightsparkClient = new LightsparkClient( + accountAuthProvider, + "api.example.invalid", +); describe("UmaUtils", () => { beforeEach(() => { diff --git a/packages/lightspark-sdk/turbo.json b/packages/lightspark-sdk/turbo.json index 6e7e8b0eb..e87d79156 100644 --- a/packages/lightspark-sdk/turbo.json +++ b/packages/lightspark-sdk/turbo.json @@ -6,6 +6,9 @@ }, "build:watch": { "with": ["@lightsparkdev/core#build:watch"] + }, + "test": { + "dependsOn": ["build", "^build", "gql-codegen"] } } } diff --git a/packages/vite/index.js b/packages/vite/index.js index acc65ba40..e0b61a58b 100644 --- a/packages/vite/index.js +++ b/packages/vite/index.js @@ -7,11 +7,27 @@ import { fileURLToPath } from "url"; import { defineConfig } from "vite"; import svgr from "vite-plugin-svgr"; -const currentCommit = childProcess - .execSync("git rev-parse HEAD") - .toString() - .trim() - .substr(0, 8); +const currentCommitPlaceholder = "__LSCM__"; +const currentCommitRuntimeKey = "__LIGHTSPARK_CURRENT_COMMIT__"; + +function getCurrentCommit() { + if (process.env.LIGHTSPARK_FRONTEND_COMMIT_PLACEHOLDER === "1") { + return currentCommitPlaceholder; + } + + try { + return childProcess.execSync("git rev-parse HEAD", { + encoding: "utf8", + }); + } catch { + return currentCommitPlaceholder; + } +} + +const currentCommit = getCurrentCommit().trim().substr(0, 8); +const currentCommitExpression = `(globalThis.${currentCommitRuntimeKey} || ${JSON.stringify( + currentCommit, +)})`; const basename = process.env.VITE_BASENAME || "/"; const packageDir = path.dirname(fileURLToPath(import.meta.url)); @@ -318,14 +334,29 @@ export const buildConfig = ({ return defineConfig({ base, define: { - __CURRENT_COMMIT__: `"${currentCommit}"`, + __CURRENT_COMMIT__: currentCommitExpression, __BASENAME__: `"${basename}"`, }, plugins: [ { name: "html-transform", transformIndexHtml(html) { - return html.replace(/__CURRENT_COMMIT__/g, currentCommit); + const htmlWithCommit = html.replace( + /__CURRENT_COMMIT__/g, + currentCommit, + ); + const commitRuntimeScript = ``; + + if (htmlWithCommit.includes(commitRuntimeScript)) { + return htmlWithCommit; + } + + return htmlWithCommit.replace( + "", + `${commitRuntimeScript}\n `, + ); }, }, { diff --git a/turbo.json b/turbo.json index 8cefe6c1b..cd88d3448 100644 --- a/turbo.json +++ b/turbo.json @@ -1,8 +1,25 @@ { "$schema": "https://turbo.build/schema.json", + "globalDependencies": [ + ".yarn/releases/**", + ".yarnrc.yml", + ".prettierignore", + "apps/examples/settings.json", + "apps/private/settings.json" + ], + "globalEnv": ["TURBO_EXTERNAL_INPUTS_HASH"], "tasks": { "build": { "dependsOn": ["^build"], + "env": [ + "BACKEND_DOMAIN", + "SIFT_PROD_BEACON_KEY", + "LIGHTSPARK_FRONTEND_COMMIT_PLACEHOLDER", + "VITE_BASENAME", + "VITE_CLIENT_ID", + "VITE_CLIENT_SECRET", + "VITE_PUBLIC_IP" + ], "outputs": ["dist/**", "build/**"] }, "build:watch": { @@ -15,6 +32,7 @@ "dependsOn": ["^build"] }, "build-sb": { + "dependsOn": ["^build"], "env": ["ORIGIN_STORYBOOK_BASE_PATH", "STORYBOOK_DISABLE_TELEMETRY"], "outputs": ["storybook-static/**"] }, @@ -65,12 +83,36 @@ "persistent": true }, "test": { + "env": [ + "BITCOIN_NETWORK", + "LIGHTSPARK_API_TOKEN_CLIENT_ID", + "LIGHTSPARK_API_TOKEN_CLIENT_SECRET", + "LIGHTSPARK_BASE_URL", + "LIGHTSPARK_EXAMPLE_BASE_URL", + "LIGHTSPARK_LNURL_NODE_UUID", + "LIGHTSPARK_LNURL_USERNAME", + "LIGHTSPARK_SDK_ENDPOINT", + "LIGHTSPARK_TEST_NODE_PASSWORD", + "LIGHTSPARK_UMA_COMPLIANCE_PROVIDER", + "LIGHTSPARK_UMA_NODE_ID", + "LIGHTSPARK_UMA_OSK_NODE_SIGNING_KEY_PASSWORD", + "LIGHTSPARK_UMA_RECEIVER_USER_EMAIL", + "LIGHTSPARK_UMA_RECEIVER_USER_NAME", + "LIGHTSPARK_UMA_RECEIVER_USER_PASSWORD", + "LIGHTSPARK_UMA_REMOTE_SIGNING_NODE_MASTER_SEED", + "LIGHTSPARK_UMA_VASP_DOMAIN", + "RK_MASTER_SEED_HEX", + "RK_WEBHOOK_SECRET", + "UMA_VASP_ENDPOINT" + ], "dependsOn": ["^build", "gql-codegen"] }, "test:ui": { + "cache": false, "dependsOn": ["^build"] }, "test:integration": { + "cache": false, "dependsOn": ["^build"] }, "types": { From 3f0b58c5c41f850535df199e4363f361ac932b45 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Tue, 7 Jul 2026 23:43:14 +0000 Subject: [PATCH 102/133] CI update lock file for PR --- yarn.lock | 58 +++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/yarn.lock b/yarn.lock index 81359b869..a504a1836 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5782,44 +5782,44 @@ __metadata: languageName: node linkType: hard -"@turbo/darwin-64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/darwin-64@npm:2.9.17" +"@turbo/darwin-64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/darwin-64@npm:2.10.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@turbo/darwin-arm64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/darwin-arm64@npm:2.9.17" +"@turbo/darwin-arm64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/darwin-arm64@npm:2.10.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@turbo/linux-64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/linux-64@npm:2.9.17" +"@turbo/linux-64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/linux-64@npm:2.10.3" conditions: os=linux & cpu=x64 languageName: node linkType: hard -"@turbo/linux-arm64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/linux-arm64@npm:2.9.17" +"@turbo/linux-arm64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/linux-arm64@npm:2.10.3" conditions: os=linux & cpu=arm64 languageName: node linkType: hard -"@turbo/windows-64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/windows-64@npm:2.9.17" +"@turbo/windows-64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/windows-64@npm:2.10.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@turbo/windows-arm64@npm:2.9.17": - version: 2.9.17 - resolution: "@turbo/windows-arm64@npm:2.9.17" +"@turbo/windows-arm64@npm:2.10.3": + version: 2.10.3 + resolution: "@turbo/windows-arm64@npm:2.10.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -13171,7 +13171,7 @@ __metadata: octokit: "npm:^4.0.2" prismjs: "npm:^1.29.0" ts-prune: "npm:^0.10.3" - turbo: "npm:^2.9.17" + turbo: "npm:^2.10.3" dependenciesMeta: "@central-icons-react/round-filled-radius-3-stroke-1.5": built: false @@ -18609,16 +18609,16 @@ __metadata: languageName: node linkType: hard -"turbo@npm:^2.9.17": - version: 2.9.17 - resolution: "turbo@npm:2.9.17" +"turbo@npm:^2.10.3": + version: 2.10.3 + resolution: "turbo@npm:2.10.3" dependencies: - "@turbo/darwin-64": "npm:2.9.17" - "@turbo/darwin-arm64": "npm:2.9.17" - "@turbo/linux-64": "npm:2.9.17" - "@turbo/linux-arm64": "npm:2.9.17" - "@turbo/windows-64": "npm:2.9.17" - "@turbo/windows-arm64": "npm:2.9.17" + "@turbo/darwin-64": "npm:2.10.3" + "@turbo/darwin-arm64": "npm:2.10.3" + "@turbo/linux-64": "npm:2.10.3" + "@turbo/linux-arm64": "npm:2.10.3" + "@turbo/windows-64": "npm:2.10.3" + "@turbo/windows-arm64": "npm:2.10.3" dependenciesMeta: "@turbo/darwin-64": optional: true @@ -18634,7 +18634,7 @@ __metadata: optional: true bin: turbo: bin/turbo - checksum: 10/14fff894c7ea1f4d859c4903e61712fe5c3af7b10310b21e0811d0351c4d63c874bdb296db4c23915db478b45fbe471d7f0cea4dc33011ee9e0467a355f3e9d1 + checksum: 10/47823f1a64f4cff46f9ee2366960b56d5c25214a0a21bb0da662debe77d98c41cc24ddf6157c7e31cb32358c02410bbe799d552a2e2405e69ae689e3d303396a languageName: node linkType: hard From 40ab90fd3fe6ec4ab01b1adfe6fa3a21fa8fe2df Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Wed, 8 Jul 2026 12:02:36 -0700 Subject: [PATCH 103/133] origin: add ring variant to Loader (#29996) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Reason Origin's `Loader` only ships the 3-dot pulse, which is sized and weighted for inline/button contexts. The uma-nage transfer status badge (stacked follow-up PR) needs a compact circular spinner that reads as "in progress" at small sizes. The Figma Origin Loader component set now has a `Style=Ring` option; this implements it as a variant rather than a new component. Figma: [Loader component set (`Style=Ring`)](https://www.figma.com/design/3JvbUyTqbbPL8cCpwSX0j4/Origin-design-system?node-id=7217-14) ## Overview - Adds `variant?: "dots" | "ring"` to `Loader` (default `"dots"`, so Button loading and all existing consumers are unchanged). `LoaderVariant` is exported alongside `LoaderProps`. - The ring matches the Figma `Style=Ring` spec: circular track stroked with `--border-secondary`, rotating quarter-arc indicator on `--stroke-primary`, 2px stroke (`--stroke-lg`), round caps, 24x24 reference geometry. - Optional `size` prop (ring only) scales the whole svg — strokes scale proportionally like `CentralIcon`, so a 12px ring renders a ~1px stroke. Rotation is `0.5s linear infinite` and respects `prefers-reduced-motion`. - Accessibility contract preserved: `label` → `role="status"` / `aria-label` + visually hidden text; the svg is `aria-hidden`. - Tests split per the OTPField convention: static attribute contracts in `Loader.unit.test.tsx` (vitest), browser-dependent behavior in a new Playwright CT suite (`Loader.test.tsx` + `Loader.test-stories.tsx`) covering rendered geometry, computed token strokes, rotation animation, reduced motion, and axe scans for both variants. - `Ring` / `RingSmall` Storybook stories plus a patch changeset. Intended consumer: the uma-nage transfer status badge (stacked follow-up PR — not touched here). ## Test Plan - [x] `yarn workspace @lightsparkdev/origin test:unit` — 515 passed (9 Loader unit tests) - [x] Loader Playwright CT suite — 8 passed (geometry at 24px/12px, token strokes, rotation, reduced motion, axe on both variants, accessible name) - [x] `yarn workspace @lightsparkdev/origin types` — clean - [x] `yarn workspace @lightsparkdev/origin lint` — eslint + stylelint, no new findings (2 pre-existing warnings in DatePicker/Sidebar) - [x] `yarn workspace @lightsparkdev/origin format` — clean - [x] Visual check of `Ring` / `RingSmall` stories in Storybook — QA'd locally on port 6006 Made with [Cursor](https://cursor.com) GitOrigin-RevId: d5b072f466611641686b34dc1a1e84c9af3a8323 --- .../src/components/Loader/Loader.module.scss | 49 ++++++ .../src/components/Loader/Loader.stories.tsx | 23 +++ .../components/Loader/Loader.test-stories.tsx | 19 +++ .../src/components/Loader/Loader.test.tsx | 154 ++++++++++++++++++ .../origin/src/components/Loader/Loader.tsx | 46 +++++- .../components/Loader/Loader.unit.test.tsx | 68 ++++++++ .../origin/src/components/Loader/index.ts | 2 +- packages/origin/src/index.ts | 2 +- 8 files changed, 355 insertions(+), 8 deletions(-) create mode 100644 packages/origin/src/components/Loader/Loader.test-stories.tsx create mode 100644 packages/origin/src/components/Loader/Loader.test.tsx create mode 100644 packages/origin/src/components/Loader/Loader.unit.test.tsx diff --git a/packages/origin/src/components/Loader/Loader.module.scss b/packages/origin/src/components/Loader/Loader.module.scss index c976603b0..dde9c20d1 100644 --- a/packages/origin/src/components/Loader/Loader.module.scss +++ b/packages/origin/src/components/Loader/Loader.module.scss @@ -1,5 +1,8 @@ .loader { display: flex; +} + +.dots { gap: 2px; padding: 0 var(--spacing-4xs); } @@ -22,6 +25,52 @@ } } +.ring { + align-items: center; + justify-content: center; +} + +.ringSvg { + animation: ring-rotate 0.5s linear infinite; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } +} + +.ringTrack { + stroke: var(--border-secondary); + stroke-width: var(--stroke-lg); + + // Reduced motion: the track becomes a static full ring in the indicator + // color at lowered opacity, mirroring Progress's indeterminate treatment. + @media (prefers-reduced-motion: reduce) { + stroke: var(--stroke-primary); + opacity: 0.3; + } +} + +.ringIndicator { + stroke: var(--stroke-primary); + stroke-width: var(--stroke-lg); + stroke-linecap: round; + + // Reduced motion: hide the frozen quarter-arc; the track carries the + // static state. + @media (prefers-reduced-motion: reduce) { + opacity: 0; + } +} + +@keyframes ring-rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + .srOnly { position: absolute; width: 1px; diff --git a/packages/origin/src/components/Loader/Loader.stories.tsx b/packages/origin/src/components/Loader/Loader.stories.tsx index 7b4e76b37..f11c843c7 100644 --- a/packages/origin/src/components/Loader/Loader.stories.tsx +++ b/packages/origin/src/components/Loader/Loader.stories.tsx @@ -12,6 +12,14 @@ const meta = { label: { control: "text", }, + variant: { + control: "radio", + options: ["dots", "ring"], + }, + size: { + control: "number", + if: { arg: "variant", eq: "ring" }, + }, }, } satisfies Meta; @@ -24,6 +32,21 @@ export const Default: Story = { }, }; +export const Ring: Story = { + args: { + label: "Loading", + variant: "ring", + }, +}; + +export const RingSmall: Story = { + args: { + label: "Loading", + variant: "ring", + size: 12, + }, +}; + export const WithSurroundingContent: Story = { render: () => (
diff --git a/packages/origin/src/components/Loader/Loader.test-stories.tsx b/packages/origin/src/components/Loader/Loader.test-stories.tsx new file mode 100644 index 000000000..c97ea463e --- /dev/null +++ b/packages/origin/src/components/Loader/Loader.test-stories.tsx @@ -0,0 +1,19 @@ +"use client"; + +import { Loader } from "./Loader"; + +export function DefaultLoader() { + return ; +} + +export function RingLoader() { + return ; +} + +export function RingSmallLoader() { + return ; +} + +export function RingCustomLabel() { + return ; +} diff --git a/packages/origin/src/components/Loader/Loader.test.tsx b/packages/origin/src/components/Loader/Loader.test.tsx new file mode 100644 index 000000000..c34ea621d --- /dev/null +++ b/packages/origin/src/components/Loader/Loader.test.tsx @@ -0,0 +1,154 @@ +/** + * Loader Playwright CT tests. + * + * Covers behavior that needs a real browser: rendered geometry, computed + * token styling, the rotation animation and reduced-motion handling, and + * axe scans. + * + * Static attribute contracts (variant markup, svg attributes, aria-label + * plumbing) live in Loader.unit.test.tsx. + */ + +import { test, expect } from "@playwright/experimental-ct-react"; +import AxeBuilder from "@axe-core/playwright"; +import { + DefaultLoader, + RingLoader, + RingSmallLoader, + RingCustomLabel, +} from "./Loader.test-stories"; + +const axeConfig = { + rules: { + "landmark-one-main": { enabled: false }, + "page-has-heading-one": { enabled: false }, + region: { enabled: false }, + }, +}; + +test.describe("Loader", () => { + test("dots variant has no accessibility violations", async ({ + mount, + page, + }) => { + await mount(); + const results = await new AxeBuilder({ page }).options(axeConfig).analyze(); + expect(results.violations).toEqual([]); + }); + + test("ring variant has no accessibility violations", async ({ + mount, + page, + }) => { + await mount(); + const results = await new AxeBuilder({ page }).options(axeConfig).analyze(); + expect(results.violations).toEqual([]); + }); + + test("ring resolves its accessible name from the label", async ({ + mount, + page, + }) => { + await mount(); + const loader = page.getByRole("status"); + await expect(loader).toHaveAccessibleName("Settling"); + }); + + // Size tests emulate reduced motion: boundingBox on a rotating square + // reports the rotated bounds (up to size * sqrt(2) at 45 degrees). + test("ring renders at the 24px reference size by default", async ({ + mount, + page, + }) => { + await page.emulateMedia({ reducedMotion: "reduce" }); + await mount(); + const box = await page.locator("svg").boundingBox(); + expect(box?.width).toBe(24); + expect(box?.height).toBe(24); + }); + + test("ring scales to a custom size", async ({ mount, page }) => { + await page.emulateMedia({ reducedMotion: "reduce" }); + await mount(); + const box = await page.locator("svg").boundingBox(); + expect(box?.width).toBe(12); + expect(box?.height).toBe(12); + }); + + test("track and indicator resolve token strokes", async ({ mount, page }) => { + await mount(); + + const track = page.locator("circle"); + const indicator = page.locator("path"); + + const trackStyle = await track.evaluate((el) => { + const style = getComputedStyle(el); + return { stroke: style.stroke, strokeWidth: style.strokeWidth }; + }); + const indicatorStyle = await indicator.evaluate((el) => { + const style = getComputedStyle(el); + return { + stroke: style.stroke, + strokeWidth: style.strokeWidth, + strokeLinecap: style.strokeLinecap, + }; + }); + + // Tokens must resolve to real paint values, not fall back to `none`. + expect(trackStyle.stroke).not.toBe("none"); + expect(indicatorStyle.stroke).not.toBe("none"); + expect(indicatorStyle.stroke).not.toBe(trackStyle.stroke); + // Both strokes derive from --stroke-lg; compare against the token's + // resolved value rather than hard-coding it. + const strokeToken = await page.evaluate(() => + getComputedStyle(document.documentElement) + .getPropertyValue("--stroke-lg") + .trim(), + ); + expect(strokeToken).not.toBe(""); + expect(trackStyle.strokeWidth).toBe(strokeToken); + expect(indicatorStyle.strokeWidth).toBe(strokeToken); + expect(indicatorStyle.strokeLinecap).toBe("round"); + }); + + test("ring rotates continuously", async ({ mount, page }) => { + await mount(); + + const svg = page.locator("svg"); + const animation = await svg.evaluate((el) => { + const style = getComputedStyle(el); + return { + name: style.animationName, + duration: style.animationDuration, + iterationCount: style.animationIterationCount, + }; + }); + + expect(animation.name).not.toBe("none"); + expect(animation.duration).toBe("0.5s"); + expect(animation.iterationCount).toBe("infinite"); + }); + + test("ring respects reduced motion preference", async ({ mount, page }) => { + await page.emulateMedia({ reducedMotion: "reduce" }); + await mount(); + + const animationName = await page + .locator("svg") + .evaluate((el) => getComputedStyle(el).animationName); + + expect(animationName).toBe("none"); + + // The frozen quarter-arc is hidden; the track renders a static full + // ring in the indicator color at lowered opacity. + const indicatorOpacity = await page + .locator("path") + .evaluate((el) => getComputedStyle(el).opacity); + const trackOpacity = await page + .locator("circle") + .evaluate((el) => getComputedStyle(el).opacity); + + expect(indicatorOpacity).toBe("0"); + expect(trackOpacity).toBe("0.3"); + }); +}); diff --git a/packages/origin/src/components/Loader/Loader.tsx b/packages/origin/src/components/Loader/Loader.tsx index 2e0344f2d..fdcf9f7b9 100644 --- a/packages/origin/src/components/Loader/Loader.tsx +++ b/packages/origin/src/components/Loader/Loader.tsx @@ -1,32 +1,66 @@ /** * Loader Component * - * A simple 3-dot loading indicator with pulse animation. + * Loading indicator with two visual variants: + * - "dots": 3-dot pulse animation (default) + * - "ring": circular track with a rotating quarter-arc indicator + * * Pure CSS animation - no Base UI needed. */ "use client"; import * as React from "react"; +import clsx from "clsx"; import styles from "./Loader.module.scss"; +export type LoaderVariant = "dots" | "ring"; + export interface LoaderProps { /** Additional CSS class */ className?: string; /** Accessible label for screen readers */ label?: string; + /** Visual style of the loader */ + variant?: LoaderVariant; + /** + * Ring diameter in pixels (ring variant only). The 2px stroke scales + * proportionally with size, matching CentralIcon behavior. + */ + size?: number; } -export function Loader({ className, label = "Loading" }: LoaderProps) { +export function Loader({ + className, + label = "Loading", + variant = "dots", + size = 24, +}: LoaderProps) { return (
-
-
-
+ {variant === "ring" ? ( + + ) : ( + <> +
+
+
+ + )} {label}
); diff --git a/packages/origin/src/components/Loader/Loader.unit.test.tsx b/packages/origin/src/components/Loader/Loader.unit.test.tsx new file mode 100644 index 000000000..8b22911ca --- /dev/null +++ b/packages/origin/src/components/Loader/Loader.unit.test.tsx @@ -0,0 +1,68 @@ +/** + * Loader Unit Tests (Vitest + @testing-library/react) + */ + +import { describe, it, expect } from "vitest"; +import { render, screen } from "@testing-library/react"; +import * as React from "react"; +import { Loader } from "./Loader"; + +describe("Loader", () => { + it("renders with role=status and default label", () => { + render(); + const loader = screen.getByRole("status"); + expect(loader).toHaveAttribute("aria-label", "Loading"); + }); + + it("applies a custom label", () => { + render(); + const loader = screen.getByRole("status"); + expect(loader).toHaveAttribute("aria-label", "Transfer processing"); + expect(loader).toHaveTextContent("Transfer processing"); + }); + + it("renders three dots by default", () => { + const { container } = render(); + expect(container.querySelectorAll("div[style]")).toHaveLength(3); + expect(container.querySelector("svg")).toBeNull(); + }); + + it("applies a custom className", () => { + render(); + expect(screen.getByRole("status")).toHaveClass("custom-class"); + }); + + describe("ring variant", () => { + it("renders an svg ring instead of dots", () => { + const { container } = render(); + const svg = container.querySelector("svg"); + expect(svg).not.toBeNull(); + expect(svg).toHaveAttribute("aria-hidden", "true"); + expect(container.querySelectorAll("circle")).toHaveLength(1); + expect(container.querySelectorAll("path")).toHaveLength(1); + expect(container.querySelectorAll("div[style]")).toHaveLength(0); + }); + + it("defaults to 24px with a 24x24 viewBox", () => { + const { container } = render(); + const svg = container.querySelector("svg"); + expect(svg).toHaveAttribute("width", "24"); + expect(svg).toHaveAttribute("height", "24"); + expect(svg).toHaveAttribute("viewBox", "0 0 24 24"); + }); + + it("scales to a custom size while keeping the reference viewBox", () => { + const { container } = render(); + const svg = container.querySelector("svg"); + expect(svg).toHaveAttribute("width", "12"); + expect(svg).toHaveAttribute("height", "12"); + expect(svg).toHaveAttribute("viewBox", "0 0 24 24"); + }); + + it("keeps the accessibility contract", () => { + render(); + const loader = screen.getByRole("status"); + expect(loader).toHaveAttribute("aria-label", "Settling"); + }); + }); +}); diff --git a/packages/origin/src/components/Loader/index.ts b/packages/origin/src/components/Loader/index.ts index 84e5f3687..33cd5f46b 100644 --- a/packages/origin/src/components/Loader/index.ts +++ b/packages/origin/src/components/Loader/index.ts @@ -1,2 +1,2 @@ export { Loader } from "./Loader"; -export type { LoaderProps } from "./Loader"; +export type { LoaderProps, LoaderVariant } from "./Loader"; diff --git a/packages/origin/src/index.ts b/packages/origin/src/index.ts index 976c68d79..3f65a6c09 100644 --- a/packages/origin/src/index.ts +++ b/packages/origin/src/index.ts @@ -244,7 +244,7 @@ export { Logo } from "./components/Logo"; export type { LogoProps } from "./components/Logo"; export { Loader } from "./components/Loader"; -export type { LoaderProps } from "./components/Loader"; +export type { LoaderProps, LoaderVariant } from "./components/Loader"; export { LoadMore, From b75ac8bb3b6b3131b255ed8a86a7013c4180a3d6 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 9 Jul 2026 09:28:35 -0700 Subject: [PATCH 104/133] [origin] Add PhoneInput.LockedCountry static leading cap (#30094) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Reason Locked-country phone contexts (e.g. KES mobile money flows) need a locked, non-interactive country cap on the phone input — the country is fixed by the product, so a country selector is wrong UX. This adds `PhoneInput.LockedCountry`, a static "leading cap" part (flag + dial code, no chevron, no Select machinery) matching the Figma `_Trigger` `Locked` variant spec. Origin stays data-agnostic: consumers supply the flag and dial code. Product-side country-selection logic (which country to lock and when) lands separately in Nage. > Note: this part was originally named `PinnedCountry`; it was renamed to `LockedCountry` to align terminology with the Figma spec's `Locked` axis and Nage's `countrySelection` `mode: "locked"`. The branch name keeps the old `pinned` wording. ## Overview - `PhoneInput.LockedCountry`: static, non-focusable `div` cap rendered in place of the country Select trigger — no combobox semantics, skipped in tab order. - Locked-specific padding/border-separator styles matching the Figma spec; root keeps the 36px height. - Story, Playwright CT tests (axe, focus order, layout/computed styles), Vitest unit tests (DOM shape/semantics), and a patch changeset. ## Storybook preview - PhoneInput / Locked: https://dev.dev.sparkinfra.net/app/origin-storybook-pr-30094/?path=/story/components-phoneinput--locked ## Test Plan - `yarn test:unit` in `js/packages/origin` — 519/519 passing (includes new LockedCountry unit tests). - `yarn test:ct PhoneInput` — 21/21 passing (axe on locked variant, no-combobox/Tab focus-order check, locked padding + border separator, 36px height). - `yarn types` and `yarn lint` clean. Made with [Cursor](https://cursor.com) GitOrigin-RevId: bc565498475fdf16c6958bc3c94654861ff74f64 --- .../PhoneInput/PhoneInput.module.scss | 27 ++++++-- .../PhoneInput/PhoneInput.stories.tsx | 29 +++++++++ .../PhoneInput/PhoneInput.test-stories.tsx | 23 +++++++ .../components/PhoneInput/PhoneInput.test.tsx | 65 +++++++++++++++++++ .../PhoneInput/PhoneInput.unit.test.tsx | 60 +++++++++++++++++ .../origin/src/components/PhoneInput/index.ts | 1 + .../src/components/PhoneInput/parts.tsx | 24 +++++++ 7 files changed, 225 insertions(+), 4 deletions(-) diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.module.scss b/packages/origin/src/components/PhoneInput/PhoneInput.module.scss index a805896fb..cc17e344a 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.module.scss +++ b/packages/origin/src/components/PhoneInput/PhoneInput.module.scss @@ -42,22 +42,41 @@ display: contents; } -.trigger { - @include button-reset; +// Shared layout for the leading country cap (interactive trigger and locked +// static variant). Right padding differs: the trigger reserves a tighter +// 4px next to its 20px chevron slot; the locked cap has no chevron and +// closes at 12px. +@mixin country-cap { display: flex; align-items: center; - gap: 0; height: 100%; padding-left: var(--spacing-xs); - padding-right: var(--spacing-3xs); border-right: var(--stroke-sm) solid var(--border-primary); flex-shrink: 0; +} + +.trigger { + @include button-reset; + @include country-cap; + gap: 0; + padding-right: var(--spacing-3xs); &[data-disabled] { cursor: not-allowed; } } +// LockedCountry - static cap, no chevron, no interaction states. Carries the +// value typography itself since there is no CountryValue wrapper inside. +.locked { + @include country-cap; + gap: var(--spacing-2xs); + padding-right: var(--spacing-sm); + @include input; + color: var(--text-primary); + white-space: nowrap; +} + .value { display: flex; align-items: center; diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx index cdbdef6d2..635ad5744 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.stories.tsx @@ -166,6 +166,35 @@ export const LongCountryList: StoryObj = { ), }; +// Locked country: static leading cap, no select, no chevron +function LockedExample() { + const country = exampleCountries[0]; + const [phoneNumber, setPhoneNumber] = React.useState(""); + + return ( +
+ + + + + + {country.dialCode} + + + setPhoneNumber(e.target.value)} + placeholder="Enter phone" + /> + +
+ ); +} + +export const Locked: StoryObj = { + render: () => , +}; + // Controlled example with form function ControlledExample() { const [selectedCountry, setSelectedCountry] = React.useState( diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx index 68cd23c9a..85ed983ad 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.test-stories.tsx @@ -219,3 +219,26 @@ export function WithPhoneNumber() { export function InvalidFocused() { return ; } + +// Locked country: static leading cap in place of the country select +export function Locked() { + const country = mockCountries[0]; + const [phoneNumber, setPhoneNumber] = React.useState(""); + + return ( + + + + + + {country.dialCode} + + + setPhoneNumber(e.target.value)} + placeholder="Enter phone" + /> + + ); +} diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx index deb374bfa..1d9910bbb 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.test.tsx @@ -8,6 +8,7 @@ import { CustomPlaceholder, LongCountryList, WithPhoneNumber, + Locked, } from "./PhoneInput.test-stories"; const axeConfig = { @@ -272,4 +273,68 @@ test.describe("PhoneInput", () => { expect(borderRight).toBe("1px"); }); + + test("locked country has no accessibility violations", async ({ + mount, + page, + }) => { + await mount(); + const results = await new AxeBuilder({ page }).options(axeConfig).analyze(); + expect(results.violations).toEqual([]); + }); + + test("locked country renders a static cap with no select semantics", async ({ + mount, + page, + }) => { + await mount(); + + // No combobox anywhere in the DOM + await expect(page.getByRole("combobox")).toHaveCount(0); + + const locked = page.locator("[data-phone-input-locked]"); + await expect(locked).toBeVisible(); + + // Dial code is real, visible content + await expect(locked.getByText("+1")).toBeVisible(); + + // Tab from the page moves focus straight to the phone input, skipping + // the locked cap + await page.keyboard.press("Tab"); + const focused = await page.evaluate( + () => document.activeElement?.getAttribute("placeholder") ?? null, + ); + expect(focused).toBe("Enter phone"); + }); + + test("locked country has the locked padding and border separator", async ({ + mount, + page, + }) => { + await mount(); + + const locked = page.locator("[data-phone-input-locked]"); + const box = await locked.evaluate((el) => { + const s = getComputedStyle(el); + return { + paddingLeft: s.paddingLeft, + paddingRight: s.paddingRight, + borderRightWidth: s.borderRightWidth, + gap: s.gap, + }; + }); + + expect(box.paddingLeft).toBe("8px"); + expect(box.paddingRight).toBe("12px"); + expect(box.borderRightWidth).toBe("1px"); + expect(box.gap).toBe("6px"); + }); + + test("locked phone input keeps 36px height", async ({ mount, page }) => { + await mount(); + + const root = page.locator("[data-phone-input-root]"); + const box = await root.boundingBox(); + expect(box?.height).toBe(36); + }); }); diff --git a/packages/origin/src/components/PhoneInput/PhoneInput.unit.test.tsx b/packages/origin/src/components/PhoneInput/PhoneInput.unit.test.tsx index 22853850c..1d3d8aa16 100644 --- a/packages/origin/src/components/PhoneInput/PhoneInput.unit.test.tsx +++ b/packages/origin/src/components/PhoneInput/PhoneInput.unit.test.tsx @@ -146,6 +146,66 @@ describe("PhoneInput state propagation", () => { }); }); +describe("PhoneInput locked country", () => { + function renderLocked() { + const utils = render( + + + + +1 + + + , + ); + + const locked = utils.container.querySelector( + "[data-phone-input-locked]", + ); + if (!locked) { + throw new Error("Locked country cap is missing"); + } + + return { ...utils, locked }; + } + + it("renders a static element with no select semantics", () => { + const { locked, queryByRole } = renderLocked(); + + expect(queryByRole("combobox")).toBeNull(); + expect(locked.tagName).toBe("DIV"); + expect(locked.getAttribute("aria-haspopup")).toBeNull(); + expect(locked.tabIndex).toBe(-1); + }); + + it("keeps the dial code as real, non-hidden content", () => { + const { locked, getByText } = renderLocked(); + + expect(locked.getAttribute("aria-hidden")).toBeNull(); + expect(getByText("+1")).toBeTruthy(); + }); + + it("does not render the country Select's hidden serialization input", () => { + const { container } = renderLocked(); + + expect(container.querySelector('input[aria-hidden="true"]')).toBeNull(); + }); + + it("forwards native div props and refs", () => { + const ref = React.createRef(); + render( + + + +44 + + + , + ); + + expect(ref.current).not.toBeNull(); + expect(ref.current?.getAttribute("data-testid")).toBe("locked-cap"); + }); +}); + describe("PhoneInput form serialization", () => { it("does not leak the phone input's field name onto the country Select's hidden input", () => { const { form, container, entries } = renderPhoneForm(); diff --git a/packages/origin/src/components/PhoneInput/index.ts b/packages/origin/src/components/PhoneInput/index.ts index 71372d73a..def83a1f5 100644 --- a/packages/origin/src/components/PhoneInput/index.ts +++ b/packages/origin/src/components/PhoneInput/index.ts @@ -13,5 +13,6 @@ export type { CountryItemProps as PhoneInputCountryItemProps, CountryItemTextProps as PhoneInputCountryItemTextProps, CountryItemIndicatorProps as PhoneInputCountryItemIndicatorProps, + LockedCountryProps as PhoneInputLockedCountryProps, InputProps as PhoneInputInputProps, } from "./parts"; diff --git a/packages/origin/src/components/PhoneInput/parts.tsx b/packages/origin/src/components/PhoneInput/parts.tsx index cb5a0afb9..a7f89e4bf 100644 --- a/packages/origin/src/components/PhoneInput/parts.tsx +++ b/packages/origin/src/components/PhoneInput/parts.tsx @@ -309,6 +309,30 @@ export const CountryItemIndicator = React.forwardRef< ); }); +// LockedCountry - static leading cap rendered in place of CountrySelect when +// the country cannot be changed. Not a select: no combobox in the DOM, not +// focusable, no popup. The flag/dial-code content is real text content and +// stays visible to assistive technology. +// Unlike CountrySelect, this part serializes nothing into form data; consumers +// that need the locked country in native form submissions should add their own +// hidden input. +export interface LockedCountryProps + extends React.HTMLAttributes {} + +export const LockedCountry = React.forwardRef< + HTMLDivElement, + LockedCountryProps +>(function LockedCountry({ className, ...props }, ref) { + return ( +
+ ); +}); + // Input - the phone number input (uses BaseInput for Field integration) export interface InputProps extends Omit {} From 35f62ef3413d8b3f2d1b0dd4827dcec4028bb9e0 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Thu, 9 Jul 2026 12:13:44 -0700 Subject: [PATCH 105/133] [gha] Speed up public JS Copybara sync (#30096) ## Why The `copy-public-js` job spends most of its time initializing Copybara even when a push contains no files that can sync to `lightsparkdev/js-sdk`. Recent runs show this is usually a no-op path, so the workflow should cheaply skip those runs while keeping the skip criteria tied to the Copybara config. ## Changes - Download the pinned official Copybara release from GitHub instead of the Lightspark CDN, with SHA256 verification. - Use the latest preinstalled Java available on the GitHub runner, preferring Java 25 with Java 21 fallback. - Add a preflight helper that parses `origin_files` from `js/copy.bara.sky` and checks the pushed git range for eligible file changes. - Run Copybara with shallow origin/destination fetches first, then retry the full fetch path if the shallow run cannot complete. ## Validation - `ruby -e 'require "yaml"; YAML.load_file(".github/workflows/js.yaml"); puts "yaml ok"'` - Embedded workflow `run:` scripts passed `bash -n`. - `python3 -m py_compile scripts/gha/copybara_eligible_changes.py` - `git diff --check -- .github/workflows/js.yaml js/copy.bara.sky scripts/gha/copybara_eligible_changes.py` - `java -jar /tmp/copybara-latest.jar validate --validate-starlark STRICT js/copy.bara.sky` - Negative helper check on the current private-only range returned no eligible files. - Positive helper check on recent public JS commit `d5b072f...` returned the public `js/packages/origin/**` files and ignored the excluded changeset. - Pre-commit hook passed, including JS install and format. Known existing caveat: `actionlint` still reports pre-existing issues in `.github/workflows/js.yaml` unrelated to this Copybara job, including merge-group path filtering, custom runner labels, and older shellcheck findings outside the changed block. GitOrigin-RevId: ff830574cefab41d26f8e951156f45e4bd8a1999 --- copy.bara.sky | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/copy.bara.sky b/copy.bara.sky index b0aa1d0c8..a7f124051 100644 --- a/copy.bara.sky +++ b/copy.bara.sky @@ -1,6 +1,7 @@ -# Copybara is run by CI automatically. To run manually locally download and install copybara, then run: +# Copybara is run by CI automatically. To validate manually, download the pinned +# Copybara release from .github/workflows/js.yaml, then run: # $ cd -# $ ../copybara/bazel-bin/java/com/google/copybara/copybara copy.bara.sky js-sdk-push +# $ java -jar /path/to/copybara.jar validate js/copy.bara.sky core.workflow( name="webdev-push-to-js-sdk", From 9eb63ea32afab93134cb1b7fec119364475961dc Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Thu, 9 Jul 2026 12:56:01 -0700 Subject: [PATCH 106/133] [gql] Generate private typenames per app (#30082) ## Summary - generate `tn` typename constants from each consuming app schema instead of sharing runtime typenames from `@lightsparkdev/gql` - move the node/type guard helpers into site and ops so they reference app-local generated typenames - keep app codegen cache-safe by declaring `@lightsparkdev/gql` as the generator package dependency and hashing the shared `generate-typenames.mjs` script in each app `gql-codegen` task - move the node password modal into site and remove the remaining private-ui dependency on site-only gql/store code - remove unused private gql outputs/fragments/schema JSONs and trim `@lightsparkdev/gql` to introspection/tooling scripts - keep generated ops Ent query literals stable by printing generated GraphQL documents before writing them ## Validation - `yarn install --immutable` - `yarn turbo run gql-codegen --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge --filter=@lightsparkdev/private-ui` - `yarn turbo run gql-codegen --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge` - `yarn run --top-level turbo run build:deps --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge` - `yarn turbo run types --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge --filter=@lightsparkdev/private-ui` - `yarn turbo run lint --filter=@lightsparkdev/site --filter=@lightsparkdev/ops --filter=@lightsparkdev/uma-bridge --filter=@lightsparkdev/private-ui` - `node packages/private/gql/scripts/generate-typenames.mjs --schema --output /tmp/typenames.tsx` rejects the missing `--schema` value as expected - `yarn workspace @lightsparkdev/site test src/uma-nage/billing/GridBilling.test.tsx src/uma-nage/billing/GridBillingInvoiceDetails.test.tsx src/uma-nage/components/CommandCenter.test.tsx src/uma-nage/customers/customerDetailsPresentation.test.ts` - `yarn playwright test playwright/tests/10-payments.spec.ts --list` - `git diff --check && git diff --cached --check` ## Notes - Full local Playwright was not run because the local suite expects the full backend test environment; the payment spec list check passed, and Corey manually verified the node password modal on mainnet after the site-local move. GitOrigin-RevId: e90fbadc215286b09f579b5de0c01cf57ecc23ee --- turbo.json | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/turbo.json b/turbo.json index cd88d3448..27c7d7645 100644 --- a/turbo.json +++ b/turbo.json @@ -7,7 +7,12 @@ "apps/examples/settings.json", "apps/private/settings.json" ], - "globalEnv": ["TURBO_EXTERNAL_INPUTS_HASH"], + "globalEnv": [ + /* CI sets this to a hash of workflow/action files that affect Turbo + execution. It is an extra global cache-key input, not a replacement for + task-specific file inputs such as schemas, scripts, or config files. */ + "TURBO_EXTERNAL_INPUTS_HASH" + ], "tasks": { "build": { "dependsOn": ["^build"], @@ -57,7 +62,10 @@ "dependsOn": ["gql-codegen"] }, "gql-codegen": { - /* Always run codegen since it depends on files external to the workspace: */ + /* Keep the default uncached because codegen tasks vary by workspace and + often read files outside the workspace. Audited workspaces can opt back + into caching with `extends: false`, explicit external inputs, and exact + generated outputs. */ "cache": false }, "lint": { From 76923f97110fda65cad71dcb59db7d74be98de71 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Thu, 9 Jul 2026 22:15:43 -0700 Subject: [PATCH 107/133] [origin] add label slot to Item title row (#30176) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Adds a `label` slot to Origin's `Item` component, rendered inline after the title in the title row (per the Origin Figma spec, node 7269-385 — intended for badges like "Coming soon" or "Beta"). - New `label?: React.ReactNode` prop on `Item`, rendered in the title row after the title text - Styles in `Item.module.scss` for inline alignment and spacing - Storybook story, Playwright CT test stories + tests, and a patch changeset included ## Stacking PR #30043 stacks on this — its badge commit consumes the new `label` prop. That branch will be rebased to drop the duplicated origin commit once this merges. ## Verification - `tsc --noEmit` clean in `js/packages/origin` - Item Playwright CT suite: 15/15 passing Made with [Cursor](https://cursor.com) Co-authored-by: Cursor GitOrigin-RevId: 32444a221e2d4dea5a23924b6fc799e8c520b82d --- .../origin/src/components/Item/Item.module.scss | 14 ++++++++++++++ .../origin/src/components/Item/Item.stories.tsx | 9 +++++++++ .../src/components/Item/Item.test-stories.tsx | 11 +++++++++++ packages/origin/src/components/Item/Item.test.tsx | 15 +++++++++++++++ packages/origin/src/components/Item/Item.tsx | 7 ++++++- 5 files changed, 55 insertions(+), 1 deletion(-) diff --git a/packages/origin/src/components/Item/Item.module.scss b/packages/origin/src/components/Item/Item.module.scss index 17346b8e2..c931096f2 100644 --- a/packages/origin/src/components/Item/Item.module.scss +++ b/packages/origin/src/components/Item/Item.module.scss @@ -59,6 +59,14 @@ min-width: 0; } +.titleRow { + display: flex; + align-items: center; + gap: var(--spacing-3xs); + width: 100%; + min-width: 0; +} + .title { @include label; color: var(--text-primary); @@ -67,6 +75,12 @@ white-space: nowrap; } +.label { + display: flex; + align-items: center; + flex-shrink: 0; +} + .description { @include body; color: var(--text-secondary); diff --git a/packages/origin/src/components/Item/Item.stories.tsx b/packages/origin/src/components/Item/Item.stories.tsx index 76351d251..166136896 100644 --- a/packages/origin/src/components/Item/Item.stories.tsx +++ b/packages/origin/src/components/Item/Item.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import * as React from "react"; import { Item } from "./Item"; +import { Badge } from "@/components/Badge"; import { CentralIcon } from "@/components/Icon"; import { Switch } from "@/components/Switch"; @@ -29,6 +30,14 @@ export const Default: Story = { }, }; +export const WithLabel: Story = { + args: { + title: "Jane Doe", + description: "jane@example.com", + label: Admin, + }, +}; + export const WithLeadingIcon: Story = { args: { title: "Account", diff --git a/packages/origin/src/components/Item/Item.test-stories.tsx b/packages/origin/src/components/Item/Item.test-stories.tsx index fe4e63579..190a053e5 100644 --- a/packages/origin/src/components/Item/Item.test-stories.tsx +++ b/packages/origin/src/components/Item/Item.test-stories.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Item } from "./Item"; +import { Badge } from "@/components/Badge"; import { CentralIcon } from "@/components/Icon"; // Basic rendering @@ -13,6 +14,16 @@ export function ItemWithDescription() { return ; } +export function ItemWithLabel() { + return ( + Admin} + /> + ); +} + // Slots export function ItemWithLeading() { return ( diff --git a/packages/origin/src/components/Item/Item.test.tsx b/packages/origin/src/components/Item/Item.test.tsx index e93dba4bb..672f5f8c1 100644 --- a/packages/origin/src/components/Item/Item.test.tsx +++ b/packages/origin/src/components/Item/Item.test.tsx @@ -2,6 +2,7 @@ import { test, expect } from "@playwright/experimental-ct-react"; import { BasicItem, ItemWithDescription, + ItemWithLabel, ItemWithLeading, ItemWithTrailing, ItemWithBothSlots, @@ -26,6 +27,20 @@ test.describe("Item", () => { await expect(page.getByText("Dark mode")).toBeVisible(); await expect(page.getByText("Use system setting")).toBeVisible(); }); + + test("renders label inline with the title", async ({ mount, page }) => { + await mount(); + await expect(page.getByText("Jane Doe")).toBeVisible(); + await expect(page.getByText("Admin")).toBeVisible(); + + const title = page.getByText("Jane Doe"); + const label = page.getByText("Admin"); + const titleBox = await title.boundingBox(); + const labelBox = await label.boundingBox(); + // Label sits on the same row, after the title. + expect(labelBox!.x).toBeGreaterThan(titleBox!.x + titleBox!.width); + expect(labelBox!.y).toBeLessThan(titleBox!.y + titleBox!.height); + }); }); test.describe("Slots", () => { diff --git a/packages/origin/src/components/Item/Item.tsx b/packages/origin/src/components/Item/Item.tsx index c29b1244a..5f270f360 100644 --- a/packages/origin/src/components/Item/Item.tsx +++ b/packages/origin/src/components/Item/Item.tsx @@ -7,6 +7,7 @@ import styles from "./Item.module.scss"; export interface ItemProps extends Omit, "title"> { title: string; + label?: React.ReactNode; description?: string; leading?: React.ReactNode; trailing?: React.ReactNode; @@ -21,6 +22,7 @@ export const Item = React.forwardRef( function Item(props, forwardedRef) { const { title, + label, description, leading, trailing, @@ -66,7 +68,10 @@ export const Item = React.forwardRef(
{leading &&
{leading}
}
- {title} +
+ {title} + {label && {label}} +
{description && ( {description} )} From d6a4b57a0f5a5c2c63e4e60ad175dce1863ac556 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Fri, 10 Jul 2026 11:03:12 -0700 Subject: [PATCH 108/133] [gha] Partially fetch the Copybara origin (#30198) ## Reason Real public-JS Copybara runs still spend about 100 seconds initializing the webdev origin, even after non-public changes were taught to skip the job. The pinned Copybara release supports partial origin fetches, which directly avoid hydrating unrelated monorepo blobs. ## Overview Enable `partial_fetch` only for the webdev-to-js-sdk origin. The reverse workflow still fetches the whole repository because its `origin_files` glob is `**`, which Copybara does not support with partial fetches. ## Test Plan - Pinned Copybara v20260706 strict config validation passes. - The Copybara eligibility helper still recognizes `js/copy.bara.sky`. - Fresh-output-root no-op dry run: 55.44s baseline, 15.67s with partial fetch (~72% faster), with both returning Copybara's expected no-change status. - Remote-branch eligible-change dry run completed successfully in 24.74s, transformed the config commit, created a local destination commit, and skipped the remote push under `--dry-run`. GitOrigin-RevId: 398a2855b3856e7c50944e82e6529d841c2e961c --- copy.bara.sky | 1 + 1 file changed, 1 insertion(+) diff --git a/copy.bara.sky b/copy.bara.sky index a7f124051..f34b4a890 100644 --- a/copy.bara.sky +++ b/copy.bara.sky @@ -8,6 +8,7 @@ core.workflow( origin=git.github_origin( url="https://github.com/lightsparkdev/webdev.git", ref="main", + partial_fetch=True, ), destination=git.github_destination( url="https://github.com/lightsparkdev/js-sdk.git", From 0ebb8821c69b5133c66c08904a06558a44241444 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Mon, 13 Jul 2026 15:15:59 -0700 Subject: [PATCH 109/133] [origin] pass single props object to useRender in Pagination (#30182) Pagination was passing `useRender` a props array force-cast to `Record`, bypassing Base UI's public contract. This applies the same fix as Breadcrumb in #30178: each call now passes a single merged object (className joined via clsx, defaults spread before element props), with no casts and no behavior change. Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: c504ae51ccfa777924b930a3c89bc6a8cf38801a --- .../src/components/Pagination/Pagination.tsx | 97 +++++++++---------- 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/packages/origin/src/components/Pagination/Pagination.tsx b/packages/origin/src/components/Pagination/Pagination.tsx index f530a1d56..04d3abda2 100644 --- a/packages/origin/src/components/Pagination/Pagination.tsx +++ b/packages/origin/src/components/Pagination/Pagination.tsx @@ -143,11 +143,12 @@ const PaginationRoot = React.forwardRef( lastPage: (v) => (v === true ? { "data-last-page": "" } : null), page: (v) => ({ "data-page": String(v) }), }, - props: [ - { "aria-label": "Pagination" }, - elementProps, - { className: clsx(styles.root, className), children }, - ] as unknown as Record, + props: { + "aria-label": "Pagination", + ...elementProps, + className: clsx(styles.root, className), + children, + }, }); return ( @@ -176,10 +177,11 @@ const PaginationLabel = React.forwardRef( defaultTagName: "span", render, ref: forwardedRef, - props: [ - elementProps, - { className: clsx(styles.label, className), children }, - ] as unknown as Record, + props: { + ...elementProps, + className: clsx(styles.label, className), + children, + }, }); }, ); @@ -244,10 +246,11 @@ const PaginationRange = React.forwardRef( render, ref: forwardedRef, enabled: canRender, - props: [ - elementProps, - { className: clsx(styles.range, className), children: content }, - ] as unknown as Record, + props: { + ...elementProps, + className: clsx(styles.range, className), + children: content, + }, }); if (!canRender) { @@ -276,11 +279,13 @@ const PaginationNavigation = React.forwardRef< defaultTagName: "div", render, ref: forwardedRef, - props: [ - { role: "group", "aria-label": "Page navigation" }, - elementProps, - { className: clsx(styles.navigation, className), children }, - ] as unknown as Record, + props: { + role: "group", + "aria-label": "Page navigation", + ...elementProps, + className: clsx(styles.navigation, className), + children, + }, }); }); @@ -318,22 +323,18 @@ const PaginationPrevious = React.forwardRef< render, ref: forwardedRef, state: { disabled: isDisabled }, - props: [ - { - type: "button", - "aria-label": "Previous page", - "aria-disabled": isDisabled || undefined, - disabled: isDisabled, - onClick: handleClick, - }, - elementProps, - { - className: clsx(styles.button, className), - children: children ?? ( - - ), - }, - ] as unknown as Record, + props: { + type: "button", + "aria-label": "Previous page", + "aria-disabled": isDisabled || undefined, + disabled: isDisabled, + onClick: handleClick, + ...elementProps, + className: clsx(styles.button, className), + children: children ?? ( + + ), + }, }); }); @@ -368,22 +369,18 @@ const PaginationNext = React.forwardRef( render, ref: forwardedRef, state: { disabled: isDisabled }, - props: [ - { - type: "button", - "aria-label": "Next page", - "aria-disabled": isDisabled || undefined, - disabled: isDisabled, - onClick: handleClick, - }, - elementProps, - { - className: clsx(styles.button, className), - children: children ?? ( - - ), - }, - ] as unknown as Record, + props: { + type: "button", + "aria-label": "Next page", + "aria-disabled": isDisabled || undefined, + disabled: isDisabled, + onClick: handleClick, + ...elementProps, + className: clsx(styles.button, className), + children: children ?? ( + + ), + }, }); }, ); From 00f729478ba59c694a359bea76b5990f91d08e65 Mon Sep 17 00:00:00 2001 From: Jay Mantri Date: Mon, 13 Jul 2026 15:16:09 -0700 Subject: [PATCH 110/133] [origin] support render prop on Breadcrumb.Link (#30178) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - Adds a `render` prop to `Breadcrumb.Link`, implemented with Base UI's `useRender` (`@base-ui/react/use-render`), so consumers can pass router-aware link components — e.g. `render={}` — instead of hand-rolling `useHref` + click interception. - Default tag stays `a`; props merge per Base UI semantics (classNames join, event handlers compose, refs merge). `href` remains required when no `render` element is provided. - Adds a Storybook story, a Playwright CT case, and Vitest unit tests covering render replacement, className merging, event-handler composition, and ref merging, plus a patch changeset. The NAGE settings branch (`ajay/nage-settings-origin`) will consume this for the settings breadcrumb. Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor GitOrigin-RevId: d4d57aa0b0bfb3d93aa307f4d68197f0503b97a0 --- .../Breadcrumb/Breadcrumb.stories.tsx | 18 ++++ .../Breadcrumb/Breadcrumb.test-stories.tsx | 21 ++++ .../components/Breadcrumb/Breadcrumb.test.tsx | 15 +++ .../Breadcrumb/Breadcrumb.unit.test.tsx | 99 ++++++++++++++++++- .../src/components/Breadcrumb/parts.tsx | 29 +++--- 5 files changed, 168 insertions(+), 14 deletions(-) diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/origin/src/components/Breadcrumb/Breadcrumb.stories.tsx index efb6185a4..02192a4be 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -94,6 +94,24 @@ export const WithCollapsedItems: Story = { ), }; +export const LinkRenderProp: Story = { + render: () => ( + + + + {/* Stand-in for a router-aware link, e.g. render={} */} + }> + Home + + + + Current Page + + + + ), +}; + export const CustomSeparator: Story = { render: () => ( diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.test-stories.tsx b/packages/origin/src/components/Breadcrumb/Breadcrumb.test-stories.tsx index 88a772e87..6d4a1a819 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.test-stories.tsx +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.test-stories.tsx @@ -153,6 +153,27 @@ export function LinkPropForwarding() { ); } +// Link render prop: custom element replaces the default anchor +export function LinkRenderProp() { + return ( + + + + } + > + Custom Link + + + + Current + + + + ); +} + // Page conformance: prop forwarding export function PagePropForwarding() { return ( diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx index fe23f843a..048bb9930 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -9,6 +9,7 @@ import { StyleForwardingBreadcrumb, ClassNameBreadcrumb, LinkPropForwarding, + LinkRenderProp, PagePropForwarding, } from "./Breadcrumb.test-stories"; import { resolveTokenColor } from "@test-utils/resolveTokenColor"; @@ -176,6 +177,20 @@ test.describe("Breadcrumb.Link conformance", () => { const link = page.locator('[data-testid="test-link"]'); await expect(link).toHaveAttribute("lang", "de"); }); + + test("render prop replaces the default anchor with merged props", async ({ + mount, + page, + }) => { + await mount(); + const link = page.locator('[data-testid="test-render-link"]'); + await expect(link).toBeVisible(); + await expect(link).toHaveAttribute("href", "/custom"); + await expect(link).toHaveAttribute("data-router-link", ""); + await expect(link).toHaveText("Custom Link"); + // Breadcrumb link styling class remains applied + await expect(link).toHaveClass(/link/); + }); }); test.describe("Breadcrumb.Page conformance", () => { diff --git a/packages/origin/src/components/Breadcrumb/Breadcrumb.unit.test.tsx b/packages/origin/src/components/Breadcrumb/Breadcrumb.unit.test.tsx index fc5e54897..05844a11d 100644 --- a/packages/origin/src/components/Breadcrumb/Breadcrumb.unit.test.tsx +++ b/packages/origin/src/components/Breadcrumb/Breadcrumb.unit.test.tsx @@ -7,8 +7,8 @@ * For real browser testing (accessibility tree, keyboard), see Breadcrumb.test.tsx */ -import { describe, it, expect } from "vitest"; -import { render, screen } from "@testing-library/react"; +import { describe, it, expect, vi } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/react"; import * as React from "react"; import { Breadcrumb } from "./"; @@ -107,6 +107,101 @@ describe("Breadcrumb.Link conformance", () => { expect(element).toHaveClass("custom-link"); }); }); + + describe("render prop", () => { + it("renders the provided element instead of the default anchor", () => { + render( + + + + } + > + Home + + + + , + ); + const element = screen.getByTestId("render-link"); + expect(element.tagName).toBe("A"); + expect(element).toHaveAttribute("href", "/from-render"); + expect(element).toHaveAttribute("data-router-link"); + expect(element).toHaveTextContent("Home"); + }); + + it("merges className from both the component and the render element", () => { + render( + + + + } + > + Home + + + + , + ); + const element = screen.getByTestId("render-link"); + expect(element).toHaveClass("outer-class"); + expect(element).toHaveClass("render-class"); + }); + + it("composes event handlers from both the component and the render element", () => { + const outerClick = vi.fn((event: React.MouseEvent) => + event.preventDefault(), + ); + const renderClick = vi.fn((event: React.MouseEvent) => + event.preventDefault(), + ); + render( + + + + } + > + Home + + + + , + ); + fireEvent.click(screen.getByTestId("render-link")); + expect(outerClick).toHaveBeenCalledTimes(1); + expect(renderClick).toHaveBeenCalledTimes(1); + }); + + it("merges refs onto the rendered element", () => { + const outerRef = React.createRef(); + const renderRef = React.createRef(); + render( + + + + } + > + Home + + + + , + ); + const element = screen.getByTestId("render-link"); + expect(outerRef.current).toBe(element); + expect(renderRef.current).toBe(element); + }); + }); }); describe("Breadcrumb.Page conformance", () => { diff --git a/packages/origin/src/components/Breadcrumb/parts.tsx b/packages/origin/src/components/Breadcrumb/parts.tsx index 318bb2746..b150a1b95 100644 --- a/packages/origin/src/components/Breadcrumb/parts.tsx +++ b/packages/origin/src/components/Breadcrumb/parts.tsx @@ -1,6 +1,7 @@ "use client"; import * as React from "react"; +import { useRender } from "@base-ui/react/use-render"; import clsx from "clsx"; import { CentralIcon } from "../Icon"; import styles from "./Breadcrumb.module.scss"; @@ -119,24 +120,28 @@ if (process.env.NODE_ENV !== "production") { export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> { - href: string; + /** + * Replaces the default `a` element, e.g. with a router-aware link + * component. Props are merged per Base UI `useRender` semantics. + */ + render?: useRender.RenderProp | undefined; } export const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, BreadcrumbLinkProps >(function BreadcrumbLink(props, forwardedRef) { - const { className, children, ...elementProps } = props; - - return ( - - {children} - - ); + const { className, render, ...elementProps } = props; + + return useRender({ + defaultTagName: "a", + render, + ref: forwardedRef, + props: { + ...elementProps, + className: clsx(styles.link, className), + }, + }); }); if (process.env.NODE_ENV !== "production") { From 7ac5d2cd6dd9507db247f38fb575a2514c15d02a Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 13 Jul 2026 17:01:44 -0700 Subject: [PATCH 111/133] [core] Preserve custom error serializer receivers (#30291) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - invoke custom error `toJSON` methods with their owning object as the receiver - add regression coverage for serializers that read instance state - add a patch changeset for `@lightsparkdev/core` ## Why Marker SDK errors expose a receiver-dependent `toJSON` method. Calling it unbound masked a handled Marker configuration error with an uncaught TypeError, causing Nage Playwright setup to fail and blocking 68 dependent tests. ## Validation - `yarn workspace @lightsparkdev/core test` — 70 passed - core format, lint, and build passed - filtered site production build passed - full local UI hermetic rerun: Nage setup passed and previously blocked Nage suites ran; 110 passed, 3 failed, 3 skipped, 10 serial dependents did not run - remaining UI failures are unrelated: Stripe redirect landed on dashboard, RSK API-token delete control timeout, and Nage command-center shortcut timeout - `bolt-codex-review` — no P0/P1/P2 findings ## Local hook note The repository-wide pre-commit format hook was bypassed after package checks passed because unrelated ops GraphQL generation fails at `ent-queries.tsx:35456` with a pre-existing syntax error. Requested by @coreymartin Slack thread: https://lightsparkgroup.slack.com/archives/D0BF4GR03PA/p1783969354352799 --- 🤖 [magnetic-summit](https://zeus.dev.dev.sparkinfra.net/#/arc?id=magnetic-summit)[(#1)](https://zeus.dev.dev.sparkinfra.net/#/instance?id=magnetic-summit) | [Feedback](https://zeus.dev.dev.sparkinfra.net/feedback) Original PR: https://github.com/lightsparkdev/webdev/pull/30279 GitOrigin-RevId: c10c39f5afbc9c24319982fa7c9c25f55ef2f250 --- packages/core/src/utils/errors.ts | 5 +++-- packages/core/src/utils/tests/errors.test.ts | 20 ++++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 packages/core/src/utils/tests/errors.test.ts diff --git a/packages/core/src/utils/errors.ts b/packages/core/src/utils/errors.ts index c1cd8e4d2..b0937e084 100644 --- a/packages/core/src/utils/errors.ts +++ b/packages/core/src/utils/errors.ts @@ -63,10 +63,11 @@ export function errorToJSON( /* Objects can add standard toJSON method to determine JSON.stringify output, https://mzl.la/3Gks9zu: */ if (isObject(err) && "toJSON" in err && typeof err.toJSON === "function") { const toJSON = err.toJSON as () => unknown; + const json = toJSON.call(err); if (stringifyObjects === true) { - return objectToJSON(toJSON()); + return objectToJSON(json); } - return toJSON() as JSONType; + return json as JSONType; } if ( diff --git a/packages/core/src/utils/tests/errors.test.ts b/packages/core/src/utils/tests/errors.test.ts new file mode 100644 index 000000000..223bffe56 --- /dev/null +++ b/packages/core/src/utils/tests/errors.test.ts @@ -0,0 +1,20 @@ +// Copyright ©, 2026-present, Lightspark Group, Inc. - All Rights Reserved + +import { errorToJSON } from "../errors.js"; + +describe("errorToJSON", () => { + it("preserves the receiver for custom toJSON methods", () => { + class SerializableError extends Error { + toJSON() { + return { name: this.name, message: this.message }; + } + } + + const error = new SerializableError("Marker failed"); + + expect(errorToJSON(error)).toEqual({ + name: "Error", + message: "Marker failed", + }); + }); +}); From 70e447a2d5b36ba94bd6aa62cca60f0d9de290c8 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Tue, 14 Jul 2026 15:49:57 -0700 Subject: [PATCH 112/133] [gha] Reuse shared builds across UI previews (#30263) ## Reason PR previews use a unique `VITE_BASENAME` for each pull request. Declaring frontend environment variables on the root `build` task, together with Turbo's Vite framework inference, made that PR-specific value part of shared package and GraphQL codegen hashes. This prevented otherwise identical work from being restored from the GitHub-backed Turbo cache across previews. ## Overview - Scope output-affecting frontend environment variables to the app builds that consume them. - Disable framework inference for the preview Turbo command now that its environment inputs are explicit. - Keep the preview path in each final app build hash while allowing shared dependencies and codegen tasks to retain stable hashes. ## Test Plan - `yarn install --immutable` - Prettier check for all changed Turbo JSON and workflow files - `git diff --check` - Focused `site`, `ops`, and `uma-bridge` Turbo build: 14/14 tasks succeeded - Identical preview-path rerun: 14/14 tasks cached in 171ms - Different preview path: 11/14 tasks cached; only the three final app builds reran - Pre-commit JS formatting hook: 28/28 tasks succeeded GitOrigin-RevId: 20466a07062183e1b8f0dbb74afd5ffcc4bf1b21 --- apps/examples/oauth-app/turbo.json | 13 +++++++++++++ apps/examples/ui-test-app/turbo.json | 8 ++++++++ turbo.json | 9 --------- 3 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 apps/examples/oauth-app/turbo.json create mode 100644 apps/examples/ui-test-app/turbo.json diff --git a/apps/examples/oauth-app/turbo.json b/apps/examples/oauth-app/turbo.json new file mode 100644 index 000000000..3d342f958 --- /dev/null +++ b/apps/examples/oauth-app/turbo.json @@ -0,0 +1,13 @@ +{ + "extends": ["//"], + "tasks": { + "build": { + "env": [ + "LIGHTSPARK_FRONTEND_COMMIT_PLACEHOLDER", + "VITE_BASENAME", + "VITE_CLIENT_ID", + "VITE_CLIENT_SECRET" + ] + } + } +} diff --git a/apps/examples/ui-test-app/turbo.json b/apps/examples/ui-test-app/turbo.json new file mode 100644 index 000000000..c3d035dd4 --- /dev/null +++ b/apps/examples/ui-test-app/turbo.json @@ -0,0 +1,8 @@ +{ + "extends": ["//"], + "tasks": { + "build": { + "env": ["LIGHTSPARK_FRONTEND_COMMIT_PLACEHOLDER", "VITE_BASENAME"] + } + } +} diff --git a/turbo.json b/turbo.json index 27c7d7645..285af11eb 100644 --- a/turbo.json +++ b/turbo.json @@ -16,15 +16,6 @@ "tasks": { "build": { "dependsOn": ["^build"], - "env": [ - "BACKEND_DOMAIN", - "SIFT_PROD_BEACON_KEY", - "LIGHTSPARK_FRONTEND_COMMIT_PLACEHOLDER", - "VITE_BASENAME", - "VITE_CLIENT_ID", - "VITE_CLIENT_SECRET", - "VITE_PUBLIC_IP" - ], "outputs": ["dist/**", "build/**"] }, "build:watch": { From b15e1c344e7e983324ebbb01fdeb52ea552144c0 Mon Sep 17 00:00:00 2001 From: Jeremy Klein Date: Wed, 15 Jul 2026 09:05:06 -0700 Subject: [PATCH 113/133] feat(striga): local e2e harness for the Grid switch (#30015) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Reason We need a way to exercise the real Grid REST API against a `StrigaGridSwitch` platform locally — driving quotes, deposits, withdrawals, and onboarding — to validate the switch end-to-end during development. There was no local harness for this. ## Overview Adds a local, **sandbox-only** e2e harness for the Striga Grid switch under `sparkcore/scripts/striga_harness/`, plus its web UI: - **`seed.py`** — seeds a local SQLite DB into a fully-configured Striga Grid platform: grid switch, `EntGridStrigaPlatformConfig` (Striga creds), Grid API token, a customer linked to a funded sandbox user, and EUR/BTC/USDC internal accounts. Writes `.grid-creds.json`. - **`proxy.py`** — stdlib HTTP proxy on `:8787`. Serves the built UI, injects HTTP Basic auth from `.grid-creds.json`, forwards `/grid/*` to the local server (CORS bypass), and serves `/harness/creds`. - **`ngrok.py`** — prints the Striga webhook URL for the platform. - **UI** (`js/apps/examples/striga-grid-harness/`) — a Vite + React app built on the Origin design system (Card/Field/Input/Textarea/Button/Select/Switch/Table/Badge/Alert). List/create customers, poll internal-account balances, create + execute quotes, sandbox-fund deposits, transfer-out withdrawals, onboarding (KYC link, email/phone verification), and a full request/response log. Builds to `dist/`, which `proxy.py` serves. Dev-only tooling; not wired into CI. `harness.config.json` and `.grid-creds.json` are gitignored (sandbox secrets / per-run creds). ## Test Plan Seeded a local platform against the Striga sandbox and drove flows through the UI: - Listed + selected the seeded customer; internal-account balances render. - **Sandbox fund** → EUR balance moved 10000 → 15000. - **Live EUR→BTC quote** (real sandbox rate ~54,612 EUR/BTC) → **execute** → `COMPLETED`; EUR 15000→10000, BTC 0→90,226 sats. - **Create customer** creates the Striga user (phone + address accepted); the immediately-following wallet fetch surfaces the known pre-KYC wallet-provisioning gap tracked in AT-5682 (out of scope here). Lefthook pre-commit (ruff / ty / pylint + `yarn format`) passes; `yarn workspace @lightsparkdev/striga-grid-harness build` (tsc + vite) passes. --------- Co-authored-by: Claude Opus 4.8 GitOrigin-RevId: d492f2b53afd2ed9ed5f60aba62a0b47d8a50384 --- apps/examples/settings.json | 3 + apps/examples/striga-grid-harness/index.html | 12 + .../examples/striga-grid-harness/package.json | 25 + .../public/fonts/SuisseIntl-Bold.woff2 | Bin 0 -> 64896 bytes .../public/fonts/SuisseIntl-Book.woff2 | Bin 0 -> 65220 bytes .../public/fonts/SuisseIntl-Medium.woff2 | Bin 0 -> 65944 bytes .../public/fonts/SuisseIntl-Regular.woff2 | Bin 0 -> 61844 bytes .../public/fonts/SuisseIntl-Semibold.woff2 | Bin 0 -> 66512 bytes .../fonts/SuisseIntlMono-Regular-WebXL.woff2 | Bin 0 -> 17284 bytes apps/examples/striga-grid-harness/src/App.tsx | 957 ++++++++++++++++++ apps/examples/striga-grid-harness/src/api.ts | 111 ++ .../striga-grid-harness/src/declarations.d.ts | 15 + .../striga-grid-harness/src/index.css | 12 + .../examples/striga-grid-harness/src/main.tsx | 15 + .../striga-grid-harness/tsconfig.json | 16 + .../striga-grid-harness/vite.config.ts | 87 ++ 16 files changed, 1253 insertions(+) create mode 100644 apps/examples/striga-grid-harness/index.html create mode 100644 apps/examples/striga-grid-harness/package.json create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Bold.woff2 create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Book.woff2 create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Medium.woff2 create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Regular.woff2 create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Semibold.woff2 create mode 100644 apps/examples/striga-grid-harness/public/fonts/SuisseIntlMono-Regular-WebXL.woff2 create mode 100644 apps/examples/striga-grid-harness/src/App.tsx create mode 100644 apps/examples/striga-grid-harness/src/api.ts create mode 100644 apps/examples/striga-grid-harness/src/declarations.d.ts create mode 100644 apps/examples/striga-grid-harness/src/index.css create mode 100644 apps/examples/striga-grid-harness/src/main.tsx create mode 100644 apps/examples/striga-grid-harness/tsconfig.json create mode 100644 apps/examples/striga-grid-harness/vite.config.ts diff --git a/apps/examples/settings.json b/apps/examples/settings.json index 6706cef57..d2e20696e 100644 --- a/apps/examples/settings.json +++ b/apps/examples/settings.json @@ -19,5 +19,8 @@ }, "gridKycDemo": { "port": 3107 + }, + "strigaGridHarness": { + "port": 3108 } } diff --git a/apps/examples/striga-grid-harness/index.html b/apps/examples/striga-grid-harness/index.html new file mode 100644 index 000000000..2685f8bc1 --- /dev/null +++ b/apps/examples/striga-grid-harness/index.html @@ -0,0 +1,12 @@ + + + + + + Striga Grid Harness + + +
+ + + diff --git a/apps/examples/striga-grid-harness/package.json b/apps/examples/striga-grid-harness/package.json new file mode 100644 index 000000000..e29688562 --- /dev/null +++ b/apps/examples/striga-grid-harness/package.json @@ -0,0 +1,25 @@ +{ + "name": "@lightsparkdev/striga-grid-harness", + "private": true, + "version": "0.0.1", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "start": "vite", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@lightsparkdev/origin": "*", + "react": "^19.2.6", + "react-dom": "^19.2.6" + }, + "devDependencies": { + "@types/react": "^19.2.15", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.2.0", + "typescript": "^5.6.2", + "vite": "^8.0.14" + } +} diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Bold.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..9d92dc46a9809b2b20193668c0f98359924751c7 GIT binary patch literal 64896 zcmV)JK)b(pPew8T0RR910R4af5C8xG0}7-70R15V0RR9100000000000000000000 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

N#)(>j!lqgBU+y#QfO z@yIq*^-qf19gW}_eeFV|XqR}uX1}KDYu_~a3pU@!xII&Q#V8*4bHx85`aRa+eg2@e_!I zmA;qc`S78LdqUxaVlV-S^1=kq(+`XHL)aTcmcuha>YG75!Ti1JZu_(M2i&B#TDOq> zlWIeb0o@!L`~-hMv?g7yH5hK`;;vrrrSFw0NZh*}hr2L%YN#{0&@L6G)&_i6e5zU} zQgy$iD(cHCDgaRU-2RO}ZL7~?ezSe`U+eS--`S-&qVK3q6C!t$0nXXLrv;gfd8zfO z_VWTyp}t!H_PD+F;kh8Ib=qLrRf!r_of*%lOT8;c=ka2SQmxb_5RBg2^}7rdjlh*KcppI5diXsV3x0Hz zKI#j*V1B?dE6WYj0qCmrCokS#*gsGnEbJeD{^U=Qch~QnC{Nb!fJbuW`f8@Xm!cB4 zRckaNoZ)I2g)39p`te3}AI=siu*l)B`G*u`BC5B;fjfsNXOk#_>@wv4gx}@^{Oy@^ z@aq2YuTOOB-o1I}1k_9!BlbfKfUf=iZSeyptDvKuituc4B=`-}9x{li6 zj@mjj|Nid2(p*!Y?0(XWtX=ss*g$;G8T6)XT?X!#ZFD{E%9H`a_HsuF#;s(vTdb@$ zx2nB*R;5(^eXBOBh1EWV*?djw+9xxxb5atDtnmAB&9y zI&wC^68@}?fymR>lXU~vpY6cqRJpM|G1QG0y2iBHDX&*C(?AQ7JjE8e$o`>RmhDMU zv2MRq`s!vFk$`Ve=1-&X1qODspQbQQOKcNOjkd{YsZp6^IGXazac}YanF^iP2Wl8} zrN-w~=zzMV#O&i2Yi^w1^n{wIz^~$Rv3nHs6$g?q|2q-Noe1 zimk+ZLIrmDXq^*5$vpRJ>7@%1Bs{%-Z{s7u2n_RhXzz{Gohvr!*<1b0p!t8;K8nA& z@n|NLKnAJ5&Ma^IVbi&So?_X^BL4`pwtC%=t#v~Q`XlMESm!Er#G5$}Mn*TSLq(q( zEi^m4&R(dH*okK0H|(8H*X4$rvJMXrQhi#l)oW4v=-yr56*lMQp8C2GZ{X~E785H! zkCEKhjBKcjB$gX|jw*h#=z)rd>fRJ3$C8Qe`?eOJx}L7TJQ+?Dz>ki)xSvb~av_q- zA;OtY?zp_PoOZrkHh!I8TKd=(p(QMEz8&c=eRO9WF#FaRyssk}Z%A)R@>Xt}-+Y{4 z&#d{pZy4wG?N{DM-6O2(>^*mgy7N51J3bo!hrMLW-#=I*<7R~U|4b2cUds1^E_@!O zsui#>q*;;CzId2`o%ZiYY}0?Ti6)UnLUrhcZWu8+?dI4RBL*Zb?~IJ#%V zLAgR99Kv}6z`5<2VFss{teaR&$~XCn~NU~DhC%oyrz6-FYadP$6=-=Wp8+N`y1eaRJoouI?_v1 z%R2E|r-sMyeHpLt=uMiYA%;oagEvPCoN}kVJ`6asme2OiC*vJN>@opcxuB{xG_xa6(QXgf2WEZEW&yg} zA+5CIt;bDRL#tsRs#mAa4~ZkvmegdG%w$$eSS)auP0LFd_-Gn0o3~c;x$YoSfYBFy z)~DFAqI_=yQxmC&oe%$sb3*{TTB-&-@nA<|_TH~N!wd*y84B1__oiOBy)|i$X9qnm zxvMWHuT-v*`mPZ8MS#g`H)+^w+zgv0H4bzn(`MS6Yq41>K)BL3q;I!Tf%3qMfx#E_ z5`$NKvLaIomKBCiACN$lc59S<8jyy}bT-%Fb7KGqjLQ%RSpD4`hkG}-T(Qjd#*s4o zHFrnAtGfjmL5lyIJW7|0pW4BWYd$Z*+!gJ69UK5E&qS0udZ=-BJ*foVzKG^4k)#Uq zwZ5r{l4?;M``6!cMK|yVIm6fvnbgI^)o3WaVO zgys;Df}w-RM~SjiKF$-zLW+;u)v1{re;SDv1Ou5S*o>de!zZ8(=I!M~H`?E9P1Y>z zI0oep1jo-dJX(udYP<{uiD#AAC~bvSi=9l%?h?d)3}7=%Z5%0H<7S|Un4V)PjJeB@ z+)y3NhwRJBEBWXN%i#wcQmX&e20V7r4pfp$fG5 zDF+#lsQZ547qNWW;N|bpjEAi&sq5sn4Yv^U7&*{f-^6Vx0RBq7`c-lTySh|XyZ_@@ z2$`FcQbNF=Fo|wJZScOU)&UjuPZA)#zfEWr$V0_Xn@sFAjG4VJ7~d+q5-WoB`1qc; zXEqA;#qZjB>9>C|FWM!FxH%YUOG7XG39Fy!9_SuBCkZS~D3-lSBDGqb$9Q}lmlZS_ z$a6|zUZYXcw_dW~3%ZHHt73DwAXjkS{zuW>O`kM9~qtHgNnzHgGn z{Mxz_VkgbEA9Z9!#HGR(RkUg43bWH^ya-X)Ki!5cVtBsfUrPZOZDe^22i=;;UiVfj z&Q0u!*qu022Kltf2aa2N?{d;r+(@xwJCf~$?I|9nY)OSUs#BRo?z;JoGIk@D^I*}v zScJN^^#|SY?Lf3~QzXf*ytJ(5QMLro}Q|WIb2typPIMTw`)&!vOkTY?<@_6@52?&G(uvCEDdgR;^>2Fq-h zzZk@K{J!F>?4!9Kq$qR=hQP%Y$pdfeN9gkXB2?6s*hpQ?s@jPPqMKylwiIcLcQTOO zaDXK&8~yeNZ_n3%QIuHhQl4<9!7>CQ@TLvi@>CvKDIr&MAclwyJ&e$um-g4z$OVzg zuH5J|X(hYigCwyy(#qG=1Yq$cfu3hqovBWNGA+FcHi|hM4%=>eI|T5*N*%*zOO#SB znNOsYk&FL9-y3gt`h*5U2`Z%V7O_g(E|Ya=UFxxMwZ|KCw<5v>_ln}{O$RauPyEBu zy!54O_}%tU`BT_%8Hkq(;t7db-7FEs>*>X^|GD&s`h>2cA*1OgXG_hXDhg)xsg@sMnFl z@eJ8ps5NqHzgXU7HC6>GO1HKskMn`B=6fpBnob`O%=C|?`i(`^z3I&JM)CxEGF@Q> z?W`$!(GTrQ%S=nCdi!Dm4gyGN zpV*8$tr7pz{;yg<%)6}1K^%=p!}~g|aP&GJ!Rf=mM^kInOFh?VS*>o)z_J8Eq{!=3 zLEEzOGM@e@v@cQ@ZCBg(pmpOgPf*VlsCVDdoS7YtL&qv$-b+nkYwM*|!esdZqX}T& zK!1m{p`Qy`iD8$qI%>tZ|`f1ixg(ep=*qf)3D)~u~V`^>#6SQ|DhwmaAy&|xe$;anZq z#B=bKr}Ous9$gK!C5S&@i)LmTTe|4maOF_T1@7rAWM(&$187{;Wph{c=@)kPw-j7B z9?%DRj+ot>HJ^IkMvs~XJWo@H_W-ENcu2R7xJ!P%Py7%p>P-;;a2?6PtCtFzHzw-^ zH(*hPY*A1W=-DX>mz;@_W9+21QtcKixul_;fAWD-E|~(u=bF(z6Hev^`Tm=TmdiAcxr|UL(LbP3je?n!dk?%73wK5I7`z zxZ%<4l9SoN;b%e9a;_7!x;9sVk#?{s;ZTPfjUDkf3m$rzmJ0QvVZV!U-k4pdj zIvOU#<(%f-U!r)VdVRm9CcDsM&n8E_#s#;?`d=@*Zac$T3YNMfyD&P`nHfu9FQY|- zbK|}G78i}LtM}5PKi=Wn+_tlgD3Sg#Yvm74Xd%V|teTxtOllkn{>6sX$;rK}`PoR0 zQfE#h_Vx|5ZoRS#v-~0{rF+4nv9q>LR=fzR%zpJ|*Q~@7?+bH_kFML3)suXI-Tye; zpeijhtrMjt91hi}6St{SZ`~I#p5j0Mn+AWL+GD`EZy)A2)OaraSK=$x1$kA}>kCP}-%~2z67MdbrBY7&$m$jWv&xh*on5#kG zt9MkF7oh%*_PLwrW+`P29Xzc-gE-Q16HUP&NqnI!7z}t|F>y9dpfb zTf=<&kfKSS9bc)sk3EuMQFG9){Ni!jbASJ2T zAVYa*L`vSg?ce)Fz>;;=hAIn6lrpuKG92ODd24Rp?In^PdECHSKzTwFMtP$D5(gZJ zSEoiQc~-K|=zvGYd%H98vN&CvMeRs;XI!iLN^5U!=v7)!`+(Wy+)2>X5(qA@Y27ED zvzxtZ=*2K_++AFLReYkPslN%GWi4=JH#kog!yecD>oc;6DYw*bqmo0XmSjgoK@FAV zyE3S$lfU-wPiNMM!?~mtUQNyqes>OcF8aJAea8>kbf{WPGLh&ctDB}GJc-$iOp-pZ z=MJ2yxojM;4Cdp+Qw9CgTYT7?K#q~ZLp3{5JsTDcRa;C$6XjV&*-zIk=oVxpJc%X) zytHrxh}3m;ch6}M^0FDc+pRyPQ@E1c`V*R~$B} zt!)*O@l_u>4taj@>eVJbu&X9Egk^pa8SY(d+v0J(ws#Zp*taI0o@Z;T0GGNZAOvDf zV{e_6IdFEcFuT^9u9h}e=x!z#Q+!hM9zrd1c>;^cY)ZsqF^kb`{E9)kt-R(pOWLhf zL!Zvufu{IsUo=rVEi_xMDUBQfh!1QCC9+*-JR|{SCCq6(RFCksnW46eIfaU%BX*a5X&~E#Di4 zUQ4%Q_smH7@;;^)h)$I~w`_VY*Z^aAcv6a4ueG$HNRO>2eoetJlCxqy<==09aeH0# zyEpiK8&E~Bp=oT@T;C*E)P#BCVuHOSfM&cAZ67wi*$uL^W5lLG^^e;Z-Gwdn?F{d8 zb2Sa{&q}03$|jNQqIAZb-dyOUI?=2yuWwrWwTZjQ z^g;3aI~JQ}y7dR#8Ug>RBa@u^VQ9j`NmtC}b0v-ANzbm+%<&JhGbU#WSFO>D2=0N{hjdhK~l0O z{1N|CB1HBputF-^+l9m3*22eXwy)u45WndZgJSZkKEAkdgNda05%)h5Q!vnbr$f^J z1mPG*bfem{A2MozbJ%h8ri>J%<=s6BfC9wHKKL=sbh<>D@YV1|_ z{)rNy;R*tpSIaZojN2zYr=wn~DtC#%;$`W}_a78nR~~R{Z*wdzG#BjJZ33Xv-%TdI ztRJScuQgJ|Z+RQU%hI$j??2T8Uoz6LFWzdQH|b#hKC2!ZeRmmZzBLoNN}0I3X7D!2 zA+;{zid*^)=gK=zBkSrm`l{GT|MFkWs#@El{K49K%}@v>k8Iv%)+a-meOtK=ZybB= ze3qI&+9fD&68lt&8eQxmnUrOR^t8GotkPj?47rOCZ+@($;sLA{2!&*TY|~EY4Sq4c zhLgZ{o5i)gB}+QJY}@at#4f6Cqtfg8V`F2mms65VsGB!750PNBc3XCo zUKmGK*tGjv&vEx{*m9|H#%CL{w5jlb3Z(bX@it>qK^;9L(t0RI{}j=T8`SKF>g{Tq z2h-GVk|poQ6Z(h4^R;o^ZQpw@j$Cc{Gk>9{ zzN2{UTEKVkk|R9O`nz-ZOd{v;5(K_iOVz|(%lJ1^a#WEyhmz2!nv9(EQ(=(PViXEf z(A5);BGD*c;K-d@MqI6tFx*g9=MKGd`^%>zm1d`Z5FRlZzvHK9jL>(jTM2>t52nd6 z7wjuPerBMZyHDEg8KyJB3DSdE+yN-R!tiUXU6UV>6kJ90?)97b6M)a7UY=c`;Hnd6 zB+|uC4%`59+d8VcTkpkv#0L6-uXls5lxPS=W%W;ehORh zxGkG6Ks!HD_)2#;+>)FG{=l8!j46fU7LO4O|91D~&Io%;N;=NtyaAOP(4UIms}J$Lh;rnL6`6hCXr z!XlP@m0^5_UO)ieo+ts@wgj;xt{qqcHQT+S+T;>q0cg?~M+r8}I!Ze7l3IX5iAze( z54cX3Rvj(@)jFc~RMi5!iaULOXg}NepyLb}8=&Is-w6P{<7WO;F86r!E~xFe5w3$D z{M3q3oZ$vdeV8739RvWly)a2~!HD>V)B)iJd`6xX2Z$~71U&)P^=3L3ByqeQHY z{>%>k|Fh)@8g7)NIldF{9^o!e1oo?L>7ggE*NAe(4SgC*pn_D)Tc1i@|a+ufETAI;s5DFLs z4AH1}sG5^Zb8wzXpGk;Q4G(Kw8&u>OWnZ3;iI9W z8}m0XFbsZ|*FwL{md}5`!2J)OppCTeqW^;fln_VWe z+f|_5L3lb9^O8ep#XC5Q9IGkQ_Mr;a^s-lsP{4YW$4FDWX@qusd~eOBDEB3Fz^w^dd6&P z=Jm3h3Z99VT@VHjcW&lSc?$LhxUYdX(WsfTK}*lc`@&`;PjAvn zgFj%AooewOq6%47+{ZZkN>;6C68Y=P3jq2gVuDy5ubw5XY^`dY+Ug_EVG`BEakb7} zi8X2a7#rkC_I}S^9oFcs1j(#PO{VKb{3m% z(+U>bMz3JA==L~P1A5H?yM_&3G(hrCoy&0c{RNQ1?5B`eI>@3>L;TL1+-fRx9o{@( z=c<(knMP2BY>i~c1%NFMLw3z$<{p&|i>EGU4r5Lr?lc>3H>`eYiQG_xBz#y*G0{b=g{nIt9sEC3d3+ zVN1Phb{F~Q-vR)h=W=Eagv;B3utf`q;1QqN2Ch5^%2a_Kjyl~P=`v3JiENqHkZaUs=&tCQ<|CA@c_ax=F1ZdGP z@GJG2@9A1YQ{x{6IAE?MT_0k@&o<7#jO(xt8KLTKeJmp{Gb=wMM(>8Hf~Hw(o9l_+ z-qC}l|4jZ_$MEMt=gZDF+xP%*d#H9Hn=f{f@`x zMqxV)Pa66jk0^@LcWEys2ej(5$N{*Q$?$0m%7n7QwRNl(x}FrBU*~D}b`_3pl0LpL zhSCs6_!|Wiz7v&eg4I>Sh!mDqqCyaKB^Ml<}0*|gbxJ^9bDnr zFyDy2L+^Pu!edu^Iz1Iz(OYAzcUbOtOrw-f0@aNcy+tAUw&4`r#V$5Itk=t*9By_u zTsf}zoBp`5TO44(i6sWSWB~a4y`@*!xl??XWs+lx>GK6rhJKMg{V5(!{Kf-R(H{MZ zKK+6#GKj=!fOase%}zKuTResW&1`evZ{1=l zkhN*)n=XFqT-yB1d*{;6H3GZ3xIIO0Z=3Q5ycgC6!xMp&n6k@*$jfqmJHHcHV-8p_ z337jHfPlB=zBcJLJK(l&q?pwv0F=v4Zo5ZIeA><1ug{JFz~Zfj50r0+P6kdyheUS< z?uY;bjT@bPH#+C?zR&vtzmW!!rJEeQF;guHJN>}sDJ_-DlQdu0HG&kvVajQ78S|XcKNf>mM^k?`IeEx$Bj`8D@CmTg-TXM5e1hDwaBH8=DOb>~G=(^5A zD!llDNkP;s+bw=0D2`5h#18y>FR@~O@7m1}~EB}SSw1&kAu0~Ue zsCg}~S{2N$0MfBum*7`LbJa`puTzG_I%`$SeN`*$MbQ0HAP?im# zepwqpnp_Zlo$0V=ELW{0EG-XKf&A+(3rsltf=PbVG}|qHlkAeGWx(N+x1($H$FYbC zVAw%xb9LnBO&`QhAK?5?U(Na!0@WIoJ|LhCwp5`%7NJ3Zb|s+y+YP0haJ53de!SbY zTeTqJpCGrq>!c{e3Iv^0G0Ti-h0KU9tLeo*Z-aanS)f_hTQJj1F zaBo|w4gMzIn>^kwg1EC!;`-WT8F%JK{&vxF?kDUMj&^6bN$x(wqA#_>-&#W<6mTRm z{r8F(Tm1o3{i}va?p|0?I#>1O0TN|Tt&(c9%f*u_ri-@#IhR#Bg)S}o@2(P&i>$8; zZ(CLTe>&-ch)^YTNsSc@T#Lc<+>6UmiSI);f>C%+lq6TSGJ%`vVw4SI+K)3t8N~rz z@Tu2fs$i!q>StdxHt}#(#a|;)Js70Ko()T4*xp=ic*>9g}i)q#q$#(ErW=q&_?{ujChP|^oH}9!7tU-DtoXz+x%aXe6%nA#vfS~W#9T*E2 z{dr&K$A+-cWY8zP`(ZKxI}Otjaspe&plc%^kKeGrKW@VnkAvO-Q4@^s0YLi&Y{JL$ z1#nEx$DC~kSxV@f9|Ulgi)XZ$ktNz&sXOmQurcI8z-#B^N*};Jr_?1Kx z$FV8z7@GDL6y1PF;f~X$zssI^Z+Sfr$Zp(3r&4|N^#bQO>fVD-CIWTGXYQ~4;67?W z`vL_}7ZH~Q@!=w93k*JXa;@anXZl9VyT5$@wQKQx%*=HYwnE9GzV6O2e+#r=eIN4R63Ia)W`%C z9SOgyuMpl+N}&MGv3F8ls&7f@_i3Nh+&>2H*pfFVr+7Tvlk0$T?sjWThezcl;T(99 zQY62H9oah}aT$8Zpc@2rZF7P&0bv(-`P!`tf$X;(q}yxcM<5f zQ0tBbhj1LVQkjwp!15(+EM?4M(zcHA?2Y42@lL)#dbBH}*wMz~`vB8jA@j)&Sv;|R zCv;y{$oTevyMY2~Z{-*xG8WldOTg>NOt~Y;blQ`;8%z?x@Rt?Q%90r(6CB$D`GOPn z0-1Bc0nb0SnBqa9T$EZ>UJc;SX58&bzlT8IRlOj0-cu~ZrQ^6tg(5XA1sa#Mvy?Hj zS=}aPIobjD8iPIn|V6~!xgZPFH z_7E6^>0;>6zgqsnE!<{hyd2&QXrldR%DcA!8b35NJTx>2gp5ogF{h>AwY31^VF&`U z&zice0p!{5{ntDDRM)rq?)>yXzYP4bp$Z zuGZweXhXT0&^v4t)sDh zm!dYgskUwd?icOvstF`5h2oJ5s``uzq3r7(j}&_@S`|Nq;V2h5Nh*tcm4JT+US5X> z%B>H;G{lD2e8@JoKgkrMz&5eG&lwn++BP>6o)_Eb!T*l;x$()o@g>l+r`^Qui#*Ps29s90hvIUh&V;9FT zqI$h0RPiDl{vzuAPAt!v?=gk$G4BH~PFdzdD^Yh6v@x^A=dEt6AjF(xCNqM}xD$A7 zJC)ZHi%XS&Kim_Kjpb{sO3LKPD&%~yY#zKCyLm=;JRYV4K%cGMehp$Bo~Yg9{5krt zcEa5}0@&>}w2lG@ZfzZUbZVL(00u4$8z}(B% zOF8NCvm3(Rbj85pq^-c{GFvQ8LB%b*woDV^Jf`Lxy5bSL>PNxP9xZ*tnvyDY#9`-A zH6}D2sVvd;H;>*5&pl^XgJGV9AfmvdJ==ShQ38w8Vm7)2s6C4V71Q%1_7s(PBT+1I zxI#KAQEMV`OukU$1H?5{nYFpGC-bG8XFkyEeNJ(4@+4RV=%5##Hq10|G#`S%cb1x< zTCdaccJgCp5v5;SWA4ny2+S69Kb8P-;#Cau66%yKY7}JzjAh z11T%r=5Q#m#U9ijeDtu*_D%BS*9D2Z6n-0#p9y=px?P z&-d*4l3fSWy=#6eO#QzPI;f|WsDdsb3sU?ic01VL+~1#q=eXG*=;jP0Y#&*`+96r* zky{^ZbYi;LV!n^DH{bmgvw~I#1o&m|j%%*Zb%x^N_`Cf|m$JX`c|#ZAi#^9@FWa$v zru!<^G5F$=DE4rL2hhJ)>ORDIob-5A0Tl@C#k&t79&>vvhwzx?W7RR#LE@XZH^Bp9 zS=D4S#m2Rb^z9PQH2KoH3-6%~u`duWR98{HwuX^_lD+t;!9fnxJ~1fg zfXcu=>ai3Uu=4^MYw_YlOg+}XGcFe^`_vxkP(qV)IWUQ}ralss2d>eN9zM~j%45`w zjLNAs1XqHbuTpyK1vxUb{oMYKFmiU&Z2T50-9Dyx@t6GQ`JqE*|-;ZnWVVBHUF@2ie&ew={WGm-0B|%)qq0jp;SLyS*dKUx%fkTJQFXx%A3$DdXQ8@(Ox#!VN_CjR+ts`E=sy;Xo@Mntj&g1(f~+9iStp9N9I57Mcp zp;6|ze}Wwb+Eu3GqSeO9k!(u`(Q32*mW=2XTo)y?s#z;mvc8PnEAM@c$^0Sv+zi_KXO2;Uh!h?@m)p1Fbm1P_Q-O|Qw^`S0#i z&Tf!{Fs_PxvfMjFA_ugc$uvxq;sTftnlEAvNQzm01TEn9Dy=vLzP_o;a&7hm&;M@Mt#BQFmN>-hCxFd4g;6TnVd;O zoB}IHSTZ85k!fsFE``x{Dmnj&>Wri5t0)Au#x~_HWZFMI1Lf(73n?Q5b;fqd+q zyFr@U%D`p1FOlG>D6*3Edkw3w!=feV1m=51eSj2Msk07jICE~*> z)>$QrtcL;{>=_I;9s?ka`H>oi%%2LcJpMxH;cta*@Fa0?8H(7TNua9`#-#XX`i~vr zD)x#xQt%h(rhhNd@DQlU@c6Om@RLb*xFyjBdu7quP9^8RwKjlkY-4*z&P4mGxU1?* zew4kG>3vU}48xg}dq#_(l!tfaTG!e!xzxqpl%4 z_2wF!{MLBw&Mb4d1l=Iza(BB!o>7WL#_q?`U5WRs)ZRxLza3$5FySBeDg%Y-Tk{{q zWDz5|b}ZNATbwJ=yQ<1~9xU?$*ztQmeMJ~P8WB+fPt&(@@VwAJw?qXUBtT@mN}XL= z#;m4Kw-Uvt9|V{^an3_S7J zB3(vWUB{{w1MKZ0X`rN-jmC#3IRYxK-drZs;+yFhPjVIh4e3~@$@ax0=jhL;^tc)s z>JM~i0CXLmV@nJ5pzBDdP#*Ol2g?@Ez4+%@0ewe$J*$ugP@*9o(FnJOrZ&xRCps0E z<6XrsYL6&!=+aEzl_uwe)6F(qSJdD62(Ydd5V%0bG8TdC; zinPr3YL|65&s|?dJF6z&+%!hAp4jk6V$0VwO{{n!G3VCAf{DbMqZ2c}=x{ps%f%K6iq%9i{(@MW#|ov(=EE55WDe{^J6`(ms9L+f&prEPQh=&f>4 z{u`Go1)cv^SIqMVTMc@X)uOHuUs<V z|6G;T-oGmAJ=@r(fys=%{y7u+`J}}?Qc~-Ls>8iJJRhAZJ)|Qc;b+{@kNmpfU zR%T}+>Bq1%TSo@g>7&`04B3$pU9d3dAZ6H$*R%i>KiBE#U@~OM5y(@ZNJ2F=)KW)@ zGW9gjNE6Mp&`LYn(}89iCqa@FX)lXbAx0=srb3k(bs9ADxUkXz<)0v3(j$E` zAVV@DV=^IAYgVICXrNsUt-lpW+iH`xYA^L3vNBga4whQV#Wt4P@I-z8WAy0B+e@_e zgVmq^q3->o3a{NU?Y-4;sek;XQg?iN@hgAUvi!71Rnc~%k@^$#+7HSCHu`lj)i z0#xe?A5EDbAOLE8d@8=4>M`n>_jDu#loVCc&i@Gr%?tqs@K4WSU(Yq%Oj8P3nF=S3 zu6@FIN_PGl1_N|N+oNJTUff@6xEfxvk9_4>a00XW;+#Xzk>Qu@qjSKQ9Afnt^7gdE zsE#W2YDrXkDak&(!MK~ji9167@g&ongpw5;4MW!n^l2@{RpTM{RWihHmb1N`8o)-3 zVL#U0|x%~5W_f( zPg?i;4x#vQFYU)esAFpUsuW8db~7A|0l7XW4rGN2qcQD7V5h(h2I$Ccs~|&=tEWKK zz2j=;tQXFKTR@lb9I=nZ$iJ%-Au*^1b0vTuJO?NF#6DuM8q)uQqEi4_Q4_hM!e}&0 zPe*PTazzC+Zm&*EC|tuhxQ_hn3g+2+dp*~XtW1TI#yR$p2)%LZh^6w&~G0;9iPSoI;T_fl8E!nH1rP`hbeIL(0)dNkaL}#_? z7S+^UgnR~}r=JrOcxJxT_<1v^SH&9D`2BT^2p()cTk22~nN7XoT~0GRd2k99i*H#~ z-Ccxq2Bs${JvRYQ$d?7)P(hVUd(yg)_c(Lk0~2zWN{9F&CT5+;h6R|J>>gsC6qb=k z1MM-O)8~RZIZdN7Ek0OP(_MrN29_sC)dXHyw0%?kWvRy84(`D|Yg)u3qOf#dPj2S` zg>Y|0N{`v0I4K@Ux(o`d#(F9`t8ik}4;U(zFQ%mgDWSB6Y4D1a zDjH{Z9XKEIMuU=u-ka#Rl7scOmpm=xl}1Za74TUl|0-49(eX|>eRWBElk%?bhK;1i zpY~e5lIYd1Vs_KtWrh4*P^QX27-hfn>}Ip{X;xeLExdBX|8ww;VBu{M`s{<}uw)er zD?FZEkI(PJu_S`fabiw~nl+gu=(pS<&Wq$;6tohfb&q`(Y+G za6(;u8Eo+nXq$eso3q<4gYY!p|XysH3eAAG|t;NIh=E6>S)|{k82zX*B*iy z;A7di{h6HoSPq-dfE+|FiZpX^fqSQ$3?QtrG3wNe(~{}wm!Aela2ZAQ_|6Pe>KGSt|DkN zyf)x)zL(^4cl~T3Z_uE4nK|#B29D7(W+kO%9|~u7`twdpQL#IqDw*JH;=uK5g=Vi? znHcK{`QCYe&pIIrz;8c0`1~)fa(dtt{Hn_`yZ)dLJw-h%V9P$1uF@GgcvcP`uOP3g zo{ij@Ug$~XLKY?u3NnYe^Aoe}a3z%Tc+vzZ6f`-sV*Pvxy(2dSD<)awZe7u?GW&gq z_mbW|2FU0FS%{lef+uk3Nj%AAlI*&XS<$yd_u_XG;!Ev(c+FexxrS3PeIGew7|(3V zz12--BM!8aQo2EIWkxP@agDc4rr15%U>|Nh@In#5y0Ve4%-)?#xl|JleT-U+h}Sq# zx{@_0H5*rOa9kdu*K@JDpBzWtlI_+P8WxHc_zi*3U0aZZTDenb*Lqb8oe>en6J7fT+3WRZri;(C zSDCBvR}i~cbJy*kS4I5~T!PZiA|3k7S>5(Nc|PFw3eLb9PJcOfwd7a4JoCKq^jnt& z)$2m|S~mH7PdTNgy8hn{kmu1F=b?CHgSdcC2J zi_AE2+t;8=$mjblrEX$VBsJ#;?4v;(L7UhahAMM)$z$nB|>`nmB0U+7jbqNulj85M}Ihs=0pRFmXK~K$wb1f`W+FBYV3|IC@lU2 ztuU(v`-okj9lE;L$bf%!TX((~H!g2o;V?Hnr&S{6ocE8LxQb(`(`rRG;Ry+dO3UkH z=l;2~b?2h?WLHENm)}*QZp-IJa-Fsn(^Y5yJ1!wr4!u8aL~-cZar3q2^fOZwtK(SQ zMgb{CEF^V?jWoo;%Z7_kMeIP9QfDiUHRPpJz%pE}YJGm%3Gqe5G?Of>&_JIuxp*35wJT86?@EWWrE z(PGJMTLFpVzYG9~04<+AF_B#|@V|5jG7o|;zC3sP?b~j@T3m;9wC<}D00I6&z4_}< zT2AgexaIue0N=mI#1*mAoqihNLNzhQJK_)6@g#YF>fy-Rjdir~j~ngDIMA92aN288IouYX zWI5fi9>N(vr;Z})q~5=aJBB|P_H=O{Dx4$6gAP!H@@u3`K*NnZVWi0*MIAwjdpA`Q zg(KE~a_j$V9F2sV?dgfI%8#Rx@%=u9_)(2V|1#Mzwm929mH1s6z&IvjUlQqtW54auJ9FMCdc7Hk){p-V`fXj{H`W1 zMtFD*_!J)rVa1vk7hCqo7<_MZP7~oE@a~T5obbdn_2?VIy)U8j9Yq3^>d5*>e}lwdnv$HuB2;> z#dYV5UwM$xO<-8b`U>qjiQUQ?9S^Cv=@W^s*&yZ0U0t4?;Jz}<>JAL8@v(WO*GT(u zS8uWA3o5L9P2@C9($V-}uFB6lAstaeDtrv%*ID%&iMwqI=0)J$(zO-t^^P?NA)d_j z?dDR>{Ah$3p19f{CCr$)&Q~;<2VdwNth_@G+Q{YE4_+dv--e^%PFPZ`$7^Y%x4qF^ z%i*)Ft>L>wswBq7_w5ph5~MJHe2$53hoyFMllnOkW6A5J-_?otmb@*x4ay7G{k~q5 zcuw7;I!Yn>75aklZyROe_)-T3pUeh7N;4~#YF+I<3t$@2p`b`+loGSMzcSh2si$LH z9E%*39sl#Vx^c--^D36tvE^x>NBv|dz!TrD3qIidk?-RAQ_CyY`ZTd#TTv2s7}N#G zo+jh^If8Ek-F8XASa;C3><;*`^L8kRV2|#mH%#L0O8K<0jq1;c&$)hTGiBTf-HY)w zdXd=V7U$+5xf-4SBpI)xm@IQmWkjGu0%bJUOwufNZ@ZpLI8oO;KWxXY;5Np?)+BeR zuCcWftQW$1VHkIZnIp*In4p;kk)l*!EIwm@hu98eumA7RmiZWH7mK%D+*kn5c8xhn zYA1H1Lm&{t`ZN7ikUxV2E4j?G;QkyurU`XYJRchfbDL!0q|iF>@~pU#y08H3A^_MX z`7Jyadm$34h<+BkNp4{LVn1~9=Fo!U2OVEUq^T+T2N6c3QZQprCJ*?h3oFb9+Vq2u|Tk! z#jYlL+0%0#d65^};H0rL5*X|k;S;=Ppt$o}2&cks6EFm+)Opx+n7_eED_kR15P@$< z8ktJ3b-P}WWavau&n$$@Bfd1@k%HKT#qgrfk%%QW74b_YtR$7?>ARmZdpg|a-Okh^ zSXc+w;)dKV*kY`lkSeIXh-A5Uc4TL+kLLI_f?dm2HT6gwaQM{L_z;Zi`I$QlT-^w` zFO*>vVj}YET(}8a+|?> znvfYZEg_7WWwdU#M(+VqB#gCe5oU2Ep|rPa0*rC^yq2b9DLSG}2j8==)9!1uS)Nu* zP~8~K`b3!K&tUM`&=wRsJ?bZWocDy}07q|f<4GXNHky&nj~TLKm8C13 zct}OFDblbc&gA;cx@x;`?h^gW<1D9e!##^8Uf3+6#Bu%qf3lVNwOJJ>@w8Yu@vd`P zxN>JQ{JyKF{;k5h^aY%LYFMoJoWXiGoAhYY+Z*6%Wz@%K>J)H2kc3 z`|aFL@|8DKDP@aGN97xYLl6-I_Kg9}>^-NtRp0*qG^nh8gi9zX1;`OUuka%0L1G5| zIZe5*>Lew(2^R2!JDl*E#^hWKZ&Pxkzsam&+z? zO_wQ*YW0aAfQI+;KP3n>958%jJJS^QVsG|kExWLa)vU)?w2Ts8RYg@h-$FLA3+q^i zZxQ>lH!E1l7|U33mWAYN*_{@d+_8Ho=A*hcNmiI_tg>9yoh%6(o2TA|z1S09yH-AQ z_;mAn7P6tHtZziOy4R+wP1)TzEAE*j`yO;dbGpouy)9kAa@~~7oszwe zvbO5#(z451t)itvYgcCL+G5xf>*FqYaj%X}uIs(;nU`uKV}90O?n|38hZ@4FP}Dzl zgCq8-yEJ!FV|eGa^mn4{F7)8x%~rF4aTbQ`70v97d!hTb$Pry7GH>FfrS;R;8Ogg= Z^V!fZuG6LX{@R*vRd;;WsOR4r0sv&0;_3hZ literal 0 HcmV?d00001 diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Book.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Book.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..b43587ca4f22493f43ec8ea54f27bfd48c681903 GIT binary patch literal 65220 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

`kVFVqx!E$v_0$Z8Sj{M{R-u>-9FqG@ukR^ zgZH&@WCFe-lF^gC8Uje}*q^enPy#}8Pt}nwmh?e!kV39JUYKm?lVgaC0DI99?stEWMVuVn$P5= zPHVLsac7vDrLV8X%62str_dP2!E^~Gj9PU9!daAOg=J?d=1J1hiWVJjFv5eC6eX>? z5uy8#J<~q=Lbyxf&5>5F%5kCkPv%DS^j-@|u6S^GH~+?dleK~3pR7^QVy<|{qoq&! z)eNg$o|)(qrD9d`Le7?vewNmqR;JVFslQ|5)e_EB!Ux?m&NqwO`+dQnYe7gU7>*#G!6jd^~sS;o_)Yw@NAZU*?q#)QI&_1@O#Ezc73{mSD(?CxuGAV`oS$Y0A>Ym=pq-Z=oMmNrH~ z&5>b#WqH=?)^@aqH1%gOikc$j&3I!rIQfo5gkCYb&K6_=Z_eQ0!2FZP0frO63$U4g zgtP->l#q^fmm~+~RPO3ccCt!!Abi`dz`5zO9(mIdRb{y0EfZ3y% zTXIcA^by{QdsDzfel6bich?hLIm~Q{&}4foBz9H&%CrGV>u_2B7@9u(kAN7A;XD=oRd|159ay zN%BRN3bC{%K*I1GKORQO52cv+XFH1LO6Z2@Q3sAK6jg%TkqRqKrOKnAem*B>mVBsg zmas}3>Vkr({e0BW@kKt#8=@ z#Lg49OGR-QB!{kgzE#3V`C{qb?X7Z#_=RaU5aT1`Z_>10=Al+j zS;XrN&k8=HyIkj{^B*u9W^)ftcEYorXwIP)5$itz=$&r(ofG+~q}tNO_H{D3dAlCI z=M5%0t<-KDUyrumyn5XgH!MwwWjpY)vXWP|m(5mrGH44$MQFmS%KrX^AoR0Ji;<(l z53kJFmU2_bhmFbPSV6X0%sfWa?vd4}wGtx*gE*lMpNM+m zEZfHb`<-ZFl9;T?&o8*d^Rg7~eB08$Px2iqLeZky4j&%>wyKN1yd-R6+AxP@2|V+Y z(dKDw9@+V8Jt&51oz3u{0?zsR4%vs$U%a`Qsc1IzMhe);Qnrg&9( zol*T?iEvBqCtV&-K3w`yzn}f`LJ}We7*^OtGmjQG-~JcA?Cv*c-$zb=vv&P&*Y^L{ z-Q&!UqyDpNli4;{_u`_FYb?A(y;u7!MNCUe#}@}Jf;|WGoJLNjDKz0fD3wF`!OWI{ zjz4a^YQ%OHygLCcZn(P8^n`B9X9s)f-$Js5LwTBV*NHu+A?re!RV%bBVzvx9M6Y(o zgFX+vBGN5A4m)cz8AT8htQhlS-i>_i=+!!BzGji zZxZtNwr-tqZ$rtt^WaHNWK*fk*)fu|S$}eoOU4v35#A~1I|Kn_*6efC#_e|H0NI>g zC4=E1<)JcNDGMui?2*-y{{z!2BjZgoZ9*pf5Z+VprZ4@42;d1)g?8B+JTDBK&%?}v zfMeT4oV6 z{{FpkqGyZ6+teq3+}@$H#**KNketbT>P!jaQZ{kY}73bdh>p z;RA7D(QKT174x4jWo~z5cmUQ@#$0tAQj9p&;hL&nu!BKRJ*nz-WxFfyCl3ia>IJ^+vjoI#wo@;R!I%;Hx0mVsJ$zAcL*ZkO?Vl?h^Pe|$-TrKJ zcK)3(KH6N9XnE`itd84B(+JYMijectJ{9n)6s-dj$nw;Dms(*&x|wu zCbAxY@1qp^HU3{4NU|UQJeYXt(3;^BE`H-0-Doh*`r0C>eR(t9*j8DsV$!PdE`IpO znh|k<&)wGYN}o@ce)9)Y+HSI;nr#9hu>%I@?iukL=U$6^>TPAMu`mhb^_q_N`PX+M z3pbHn{w*IzuVo}*grS5 zr$_|zo!4ez;EsYx}E9rBB- zwT&eQoz&x(UhRB%&=`1HQ40L26jw(ic9LD51>zf4v5;IMWF4)f?Y+_Q2DXYZIr8fe zagNJ&%t*l$DJ!wLxzxMnAF6Q|fN707L@8?3U)i5`kkhdd$$c|y4<+Ce3v1FR*rrTW zU#sBY%xGJeB6K?eh#dGF>PClU)jNR2F4I*qwri~hM#}b?l~Ir99im-1>XKlxe3Hqt zltT&=IF%40urPzUuo+_47wOyZI5Gbwg>3OBXZ_Jl-;NXCe_js0xp_Z+K6Uxoy)nFf z;k=*D5|?hm#%Hba^C)$#b{M+^wC76(HN+%ws<<&Vc%r-aRnOyCf3_F! zaepTh&{mGw;5rDEms_f!O%v-In@5w*P$s~{M_go8Lh8br1w}Tz5F9*e1V+OUSoEXA zlAUFy1eZ=wplPAHd#uTa1}BlvYWy;Lx*1!q-yZPl=Ik>p{iRD-o4Qi^0oD>}c-t2r zO3T_k+3`bt(U9I|V~+$`5qXyj*mgnwM))B6kTS$>zcp1l^_Aq<1gW$JHXw$5CrQKX z331`v37^x+g?<<(remEKp?w#PCBgG)g^xCWME-R&53lzpXqb&kCz?A;-qnl@c!3(I z(=X}l+$M>-<+hp$ADv7nNdmsNGelDn%VHd^KWvOE8DEiPoO`!Mj<~X@GZ8x!P5hdW zi^iR08tV%ix){9lHsz3+chJnDFVy2?!e5e-!UVOp`XEj6i;Hm8Pxw>HXOv*SUetrtx0FesZ zjIi+>98!&h=Jp$YIz0M;>LMd$7v9>T-beKx=Sd`?C*Zs$_yWcyiT)eiH(k5tnaQVd zKD|%WhicwAm0R$?>5&uC+*ThM5(Nivp0V(vfOpw>?}=2-m~e*T#=iMF-`&}6G-k;5 zMbmZdDHVX{X$b3Bm&VIh^pf_eDZm!cU|;UYxFOKOl?A)$ED{r*H4hzh5!@U>cIt4{ zu^QH%g5_xlYOlKM>jX@$0JPms%OQs#d=Y)5PY-ch{2ycu+M$8lO)fy1?9hz+a3Zmu zo)96=hPg1;a*3KGM3Vy=Cb~V*89hXG*lfpsyPYEYre8JpFWG z6=~03w&ZxmO6|L&xv1^)=j6Vkmd4{5V3MF-`66>ljO=(~ixW!!d5)a=Nu?!01|^+! zUN-PlHWrWUDd+`};6~``<7bF0NG8}LuRc`s?)K{nk>mO**N;xIHI31%={A&|;|7VX z_fq^kg-QndOm$UOv$q^X^%VJOjI_mQZDPP@R!qh_Z}xxHj32Bm;ZH8jZ9vt`X5VM_ zn(mHRF%1db4{n-HI(0c5%OF0c=)6`aE9$oTd+1m;Tc0CJKDbXrBr>MIwKN4_gj8j722zIgre4+-pA5m>k>$MRt;=F ziI`$a+Q`U0#>?Qfc>jl`@bObbtSvedjjiSL6zt8`b%7-%l2u&&(}}%yf%kp zuM`mDa8$F_er{mRMWz*5WExTpe4kkJpvW@gyPFL+Y;=^6 z!QW&a2JSaS7V6ukZAM?0q()uhj1`LF%KC@|7LXLTJ98U>=&CIRb+rh zK%|W}12Q8=uTxZXGT{&V_s^(pvU;tO119GeeIet4Ni_*S<1O zq7SCYwWFjCf}+68ZGGDzP;g6dBF=sKu=sM}RRLC-cq{K#d_C`fkz*Fq&yMR_@r_Vt zK%Bl7Q_ym1+yp97F*e-lON|;2P*AU|B%g!24VF5YQ5reBWnU!0? z8#pc42`1*~+ejAuqXJ~UZRCEUx&x^mrO$7>*Sx9LtLuclMrqs+6$e8)DM0pTlq0j| zLRMdG9TjX>WFMLt0cCoH0)44E;)lEjd>_ORm`#B076Ux;g3KB!EAwY2d!;V%>uD(b zGCZ@7zbDPMt=|kC6O*;WtCxCc=Lh1%mNIoG7n^V4)!1>f^QchFR+A?L;3_Lze0bq< zbfuLt_0}Fv!Xq5#FwKk@Cvs3#QdDzU1z5=KK$5j;Qg)IUzH6p>5F;Gaz-EAtX&HSd ziZ9sk_QrBMdfw9Qc(_F0lOMag3*f7H9`7!zM}XZoArxZdu5oxL+pH9L>T(-Bri>-x zOlV(mO%RLO)}pk;=IMF`ZA5u#Xs&e6^_;o&ec#~a%4zD&$N%c4uN0D|Te;IFh(U@L z!RF+Re?D^=FkxJ*c@XWMaU#V6301427ia}srJ3nNMByT!oY<8d4kDX(tzKDw>Z8qj z>zAcQLdE;;zr@rhF|{%mAeyid6G?zRB&$jVmXomxSBWP-3N1cLWZl|g7oSz+rnWlR zdFLxXIGC(h>V{rjzZ`_Oea#xrYG6b^J}FfcQZ;UJQv>tb*c8$QTRah`0fB(BXjd93 zxKZHhF93gG=h})rQDVyc{x&s_LEvTIaS+5nnb&d^*Py^_!g@DOg>lp(d0%qjR!}ip=O^3=~~W5Y|Rc0>e8ty zs}k7p6XjDMZ|AT7#BHhWOGmKfN2YcQ{2A43&&dGFf~C#7aVeGx!^?%`onPF}5(ip4 zJid)PyjGLzi;GqTIjV|mi6y|h?y|1a`vBHub;{*|<{y|LG7LX$U8&tcFq5Dh-|_wg z4f2j>B(e$}`;`UZuvXRSSfRRZXdz(FWK$P?cnUT%rbKwvyxgv64KJ!yvT47R8lSk` z^dee0wbvbF>c~lUAW=fy!!mZcsIEPFWP&v66RwSzG7PF9tdTI4OmL2|=~R_x2h2_6 zT&3W)yXLW>q&h1iUZP*vP4^2_cEG~)rc+K5)PUo@swR2~9z4&SV^U+`vtd2!Mqhw0 zxqa8~MAJ~u3vWkvA71pHH!3kT?eUE$EWh7O6ou@aLa|@!$#p&sraw! zFR3mvgT^TyrjP8DGH+CL{pw1Ypt)2L3~Twf#5CDLY~Q#`C7p8xR8B=`lZ>jfx10q3R; zq~1KhQdsCoJcFNqKpc@fO2`PUrF43-K?{>Vg~SmZh?-^$67Fk-J8eljRZ~JHo(MU& z0gAeF2vI z^gftNEGC15_k=`4as2F3PK_+`?$Xu>)^%|HPR5qj3u3(~%o8`WR+#91m5G zWQ=8X$%ITO_xZR-w;*+WAH{?7{NWB=wKJI=QA^mx79j2v`BtrsZIpN58*Z_TvVZF}qC=YChDSr{s`fME^m7W1<%a09i%)HWi*qRBUtoFCIzIB$5a81u8e({B~tn6o# zK3H7`Q3d^WKL()sl0QRsW(GBr@}4XIh2~#cd@RcVWq{S%j5ll4y!CcgLCv5vwY(HA z2vg5U3q-BWnLD@sZP3hXBL|_U)#&6;Ku#|7F<@ZQw zK-#aai8SWzpP8Yhl$vrR6%>Au)T3!Z(Fg!C#%L$p5s^EZIEFX0Q2SISb*zgn?}fsj z9Q+gu`CUXCOV)j8@)r3A%hW=)cCyj50MoxVnku|b@pbX9R~2n4Af+ghNnf*=RI$zO zl1Q4l({egdAHE{l#%3X+DNQaDSz!D~G0RkV*K`U7g^x<%6c(^C1$Y4smN-gY$n)ZF zLruj@W16l~)=MZ73Uf^v0j7~Xn?n!8Qxv7@%kTJ#c+Z17m z$IZnbhp;^%e;#k0Ul8Nvcc@(_=epQtG0HBrDLG*+o~N>U*|cdh^5`zrZP1`$)l|o? zr$kG=ou&*^VI*ZNMPixAm@=44SxBisMK+f9ok5bA56xbn$vqbLVUI1Lh&={uj&v!qkjvEFd}R2?#Yq`cg}i;a6}&K5r>s-f zDeK@xl*e&3I24{c(LKCEGx!aK-2nMQZecYh6igVJl|93QHkZMgndqv`)$wot6h~{Y zpw?MS=`ejc`k`WIEgML5#GEa2DgAw5IC-RQ&P_d(G@J-z<_Ld{r2B$rKhI{}nwr{1 z>o4LiOvE|n<8(cA8g_R+qoxY^9~q37^R5%|yk-`A!4kcI!{$!UE$y0Mb>08}7>mTH zS(PG~(KNH?a|og!N3f_Ei?Whyi9{lid{q+|7AlUECk!&yY3t1O7sl5v+eF?UkICk- zQKau2OR4P!4I4sJC2YigC06R~>HjzNo?nMiIGU1N`LX~&7{+GigfXY)h3Qo|JKf`) z2I;AQsfr7)7FNPiFKLPnCm>&CCW(^RRDIS0&t-OU*9@{WyirySk@1^6c*VhlV%DtY zX~7%Z9z$sIq1fR}L_G5RToaxPB$tpr1VMBO(KHN~9<1TqMnJSgJ4f=z*VG54l)qdC zFGuB7%k!GC;v958!l*Mi3=14K+UmK3hZoc=*p2F$_@)!2!|L82@Bc~4m@4FPn)G@F z2~Ww9a^sOz}_1|ei(Vco;^I1~)CGL0RbJ9Qs765k};TY#g?rh8l4Sy|W~F!DxS z{C*hB01BfiiD`wEThj{yz`~G9yQae!z}f^xv&+CiRX5w4WhmxY6TKCUIq%e;e+u_g1H2NK#vRgsO#%_r@;Wol854@}7xFq(Aq4?qW zr~&^_xjt3WgpTf(+gfAnf-B*7FU~5g9UC`Qr8#k{O*;E&4k8NjflE~NtatbP?mB;6 zt@XmWkkpz;vJ$CHvS-$TW8t*D66vaDn~*&U|KNY|`^EHSYk$f+2l8<)vt3shz842! zaN!uA_TyIVDb~W-Y#s%-E(O%OUf3zZId>-_PSdlHjGAb&64oZ!tE~f3klURfUCT@| zr8ad6@Dko9!?=0}vO7?p0h+x0jhkFc^I8VRcUf%oX!q)*nM>sxRUT$zL-A6*jfKU>!gp`#7XQ z(D#6PV08qI46^RpdTLkM!5F*C3*k1DVpzay;(4U3%FV~GQm@h#BoZRljB{aBz3oN7 zuKqm&SqO|iNm5|^?=PJ(JI;g@^Pak>nlK*wrud8aT1Y>5Uv$Q~%(-+FRnj|w$|Qpw zTHAb;BvUI49@rY-wT)6O`=~Z9IXXL6-}%{6>bOSL@wAs)ooG@z{~%Nzs2rPhnM^@C z!s8*4O*_vS4O9kP!a$`1Mj({rP<)YyoTO#uD!ZMmC}eEW^AQf@JlMOlXHuu$?C>Wr zgj0QCE+i8sNcN06aOCtwy|tF7R-#>Z(r)fbtC6s;KvRkb$BUV9w~HW)YMPQ|Qh>t+Z(W>y#+Sy1S&7szvj8(3lLWZISKSEP4rI8{8o%D&Dr zZ<%d`LMZvLfY-$JNS>d28z22M2e{f_Q^yYOLy{TL%0WP-GQfM{Itm`;iespcz7)t) zEs7+&C~DI!8`_E-8w&D~*d!u*ye@r^jLbBvaE&}6+-qxpd-pro?yP)Q=ey5#4=}6$ zeY^e`KnyC;kYOW6jT!$I#&A5rjEwfcpB+sQNwC>88i&K-=zZk|9y5jh@Uasf+=xEp zMwnZBdZ!pjEj3M?(pjG8h%kKSD6WY@Bo~>pJf{`&m2VmA_yxg4!D9?_aQN468cxO$*R|v(R+l5T9vG$WtK$C!bmhzI&&Ed z=3;W5CX{&ntB8d`oLAlJGM8K5(QQu*JDOAs3ElOJW)Kk%Hi*+vI5vat?JIB zJC90A?Mm)Ud<5qk|CvLYf#n+=zwbQF#c;=yj|fcVTqpm!)HO}BnJmZ&i_?uPS+-);nspmCi>+J6 zN*oR&yktZ`L!>q^MX4B0xeAr4it4X>-8+X|6T-_6Z`Tz70GjR|!FgPtSS^5O_~l!2 zSr6yyEYn{uvV3=i-rg?oi`1n_y?UPvt41&)*r>XZ28(40Zju*?72mJfl)Q~QZAhbG zgGR_o+{QHeQg-JvdvjlbR{h3*Fs8>2|1fI&5(yNE5J{)6`5H@V3JEp&xUSZdSX*CL zNdip-l}!X0ja-8fk(n_CeBIUca70OqOe3mm54SELHZAjUHzU1HFIDN(gnq%(W#z+W zPnv7B6sMH{f5_KO0bZ^?r8zCVa&~%J096=Ux@ZG z%rY+fXBxD!WK!zlxU)`t%41B%JS@#6ZyGmw#!;SqDW22&b{*P&(?2--!{P|xyWaBY zTPKc0yAxOz3DL#j$`@wn^u?YawveecST#l@&(i1#e`=Q z`xVByDd|}y=UKPDj4gK1oN3cZKF8?CB0A-4#lp&ERxEk0UR&HcqmBC{4(ma%`fZaiP(^B1OXyz>UDpYXBx#HT(>Km3Lt{p4rA_|5%(ic{-|DH#VPR>_2X=3B`wjvBZw)4dDKh{TfU{2 zy_f?M>ehknd6E{4MZC^Q5w%q{+t^UUm!|t#@2qnjGuVxlnOg;Q$~`&oJzY4Nuk3uE zx4EU|gB6;-*W#QYnvfk?K~XZ>bhBe^N@fefM^!u_;7g)A>dl=5^e-K~Y1} zhV3^*2=1qy387@~^etgFBt_dars}ok@Ku)~d?Bm}iaTbvo>SrlUHKQY9_zRE2 zjHjDGH4#HZ+GeO&P*!P8q;P6z&5zQ)dikQ#%}ng(yd85jHkwN>&LdbMRo~0{yA3WU zo;9@EaCLFPLZQOf17qmM;l^Vo;3neur>{x0IGS3SHg{+)$@9gW5TRze2b!k*%)ohC zK-G39A2~_|rJ$}2r^hJ5j&dN45Hd`)uz=r4h0C3lT+O&r?n!)ge$P7nz#1#|ryF9WERk~%c?CiRS~(x!cT{>``p!H*&cNTxlh-v>KCgcijB(gYWa2< zf~M2l;_{dm+Fy76T@YOet+qI9E`3ca1>#(K9C-!m>Y#Yr_Y3xb{?l`jeBYMtC~VZv zW%2U%x_^EPKXDe5lMqg0WhpkY94oYH&AJVnw)VfloC>X`IqvlFkZvzz{8c7Y>-i+w z&dA@RNK-K~R6?{VI=v#r*rp9v(m(mWd! z4k4XR!`2K3cO^38NA6G@asjnu8fZ3BZKBd7B-F)!1hEsfJN|8YX!hdvp-!d$T$40Y z4@c=-7B6qFZ($*0qY^ru^<>MMe-G$ndgS^@k4yljXyz1kdqouI=jtB?u|DN;%2j2) z)Vk~I;V(2(+Dpmh6D#ERc0YuMTI@C44uCs;_PB-3v~r8dmb}fMSZyU>E3h&`O1HAi z<^+PeSwSDU;0sSfE@-`V+2d+&K6hL^z@-~TQ);Udg9XJ62|C$YSgR3xm2?|(+{774 z#L>N(d-S(|)6LUV(n}y_M+GbOM$y181G0l^1A8n((&2bo;KK-l^o@NY6Q>5j3u@sP>hmrXw}gv0!wenp9loITwO(O$OS z-rmr{!-$tHq)Ld1vZPTbOxGFPi2#IP1jTTIq-ciactMmDN~_T`|9I?G6MVTEn7vM~ z5iRJ)f404==mf1HdZaID6T0P*-&n2rwL7rEd*aRk!c(18a`Y0$4m`7q4VX2 z4U%pI#FDKUX+M+R^VdgucbG+cgt*V5b%{Ms&`v$bbJhy#`k>j}=4WaA*%liu)momm zGC4syA)T%}LwEK(oP15ETWa0w=kskWsoSHFIx4@m;@hd0b#Z(7_10c(9Z|~W?~;kp3rNtwPEy_(3(ujyWzD*O6~-4Ok&mfnAu?-L{Ae`;?HSSU@Pd8SM-$PbZh z=$I`eyJc>qheM%Rgh+}kX_+Eho}|uZOxmh;)h$LEWpsNCm$U#ax$5zh!$eP-h$Wer zjF_VJL8w!JdQ63Brki1=S!SDKZu;i=ExdDI)n*i7WkWjf>g9LGZC-H= z%3cl8Cc^<|hy*JJ7Wc!918i|_SpMNT(Kg5bX9~UEweQ{jEQpgRaUF%ovlaUUKnO-q z3@1p6W>}6FL`k8<@&Bs-dvV|3>O0*EBYWEY7|X}Zck$b9D=x5D5kEi)jfT~#U7Xhz zxz92aH=QTpQ;Xvgf|q8P-1?qD1MRyi14}dFGZrK5GL**@&s@yHj+jkWgw3AqYRlQJ zmbQ`ErtGZ*A}#w?kQE^oG}91X`v^;7P@08htMb?Mp0`=^`569Ope=lD>vh}r5If5! z-y43X^gE+XV>c16FD!A-z_d3({oUWu!2- zVsxb^HfZoGyb^vHv#xGV4AxRcL~QSlZ<{EZ+%cVnTusBma}{+SijdjC9;3xQPW)X6y0ICUPz+U`8=M1Db`d1hqWTPEwk+EX}A0P-Q zXBJqJT!*m`iDDvTiX)eX5g(%+)TUj|S2Nq%-?z^Fjr2D2H`S(BU)DGeaZp1Q1r3U9 zAOa!mBNJn|>OR)w*Yjvg43ph)tDXRM;>d|3J9c_ghZpJcF*#U$G6d6RxiL!u zCC4Vgsz+@7hHZ0ff5xt-?7qdmGcxW0DF!zHfc-3G!CEHV?Z;)nR~iBl!g+`yo~Wn9 zz%QL76N;gvx6CIcGUT9@%U2aL)nKT?HVVZvlxoUtS(%uWj;Yi?O2aI|8f@6IV;{~P zE+urn*jW$$)lf$}xOpNfB2C|yf;uQ{fZ|#xX^PTDLDWfQos@qm-Jl|;G|B}6E(bAy zIVlMs1-weTW2tq0oh8)c|95X_purj&ZnEa4o2je07V2rKgZew}rrB!OJ1}q)CWHh2 zg$EIUM~ER}@DvHsouNdtb95MXjS2H^v0~jl4jg;Hjb~_$_<@ihAsCRTr?4P#;&7pt z)Zjsyv~kj0L-A-m5>9>qqHR<$fM- zj?;Ff)0F9_Ws5MVwsMK8Wn%UHQyNY>Sm>gIlPD`ZR0Z`terj_lMb`a9r}$c)gd%Zi zPJm#;nARks!`@+$mXS@l2t39|pcaam>V6ja3r*C)G$(XK;;7{3pk^zvbRBBzBlc$i zAXH(50HQKVgkQWZ6gR#y+!#$htIuyo+gy$6r+p87+&+7Lp8 z2~QEENFr0HG&+OHVsp4WzCb8Si7r>3{Qd%cp|wb{5~UEzl(#GBp?g(DewrLZv#{Q7-$tx~ zJe?Bn{g=sxGG#jjyL?0rwetv_>H{p~jEaG2Tu7xNlF@5C?hYx&f) zzZIFjbey?tHr-1}OZs7Ut>HqXje?1BAifGKw%YzsM+YIu=h!ElGin8;pFWd0m91SN zxmE4nwyvW->(v6Y+ z52>-BCT&x$vd|1}HMN!1Y?2+;fg`8n`YsAxK4sL6$(nq{{HL#97;is(^Vjl!z1^s9 zFaMnscmL<{`WpD^Hma_It2?{8v#WdK`Z&9K{uTFA*TMfT$COsWDqq5lFg79K)8f#c z(dp=l9{m{HV>qNXY^E(C+p+T$yJgRQ9Hc+<{GwZgr~rgu1jTTIq-ciactMmD%JhYP z2_ME+sekPA6F>XKuYU8pKm6%0fBVP3{wx09*d72A5X5Y6vfvC>1A)TetZeKY2&8?S zYEftmmJ8Q*_g6RBn7RTmTp)~ySSlmrjtV8Ia-!7EF0_WxyCp2-6qF$F=mv9rEg7Pw zp{1jTF)%VQv#_#paB^|;@bd8s2&TTZFf1Y}CN7cs*PNu3v;i4|h721qDr?NR36s{E zGHu4JIrA1QrgdxKl4a{{u+b))ZL!t1|BtdnzxS4^MR#^@dySaF;Jm|yZ-Z|9gXmjWDOREsLYZiNCA=FzJClHJFV6V1foKg28|ZD`5}Th65KKd;|y)A@&FfQe?Q z`x*L^nELYu1u$F?;W{GXNXZC!94VBf%83%{5eOnhi58QHYn0+8NR%X5%J@bG0nHm$ zj;|R0666NYvZHT?KnMpBF$rmst({A*go2WaTB$PSG_)#Is-jb^My)#a8Z>IsoLXKU zEuaSLP{0XULTl_b-a!b`_y(v+FnM<1@JW~#Nn{F@MrSZtYz~*l7YIcuSxjZ}?qaF@ zP|ek&yV+{jySKe-^tA_Qv10P+49+|6mv_+-)?nSR2it}NZcW)gL4e0H1QIO#AgC=`SA&1@ksHgG3@a;<8f#5XGFgC9k1{I+kAfTJHJ2tqs8X1AecFZh=dlJU>?F@g_k#x zd=-NgQ7Oa(E1eS9Gj0(_9<9foPeHf}E*y6eW#K8Oe0&vDfWN}Z2~<%H!5V7>>8V=4 zYpWf+jyllPRS$T*^@8cO`oSA$5SHF*7`%~2VCmgPku}yB@+O)<(qxn1O*KWhKTU%- z+Z=ccEr7SwGO|`$0dKWckiKsdysfrj>9=-a>5ul&^tWU1PCEtDmXP3GbP3*7S7^HK z8cC>7;N5gfxV!GDj_z+#MpZ~62qmOIs*F@PR6#Zns#fW!UPGu|Csn_J(6~_w7iU}Z zW~r7fdRn&<+O|ow?;vz05W060sObbomJ}yPikIh*pokzZ*P*B+!1r;gKm`pk>IkPv zcyyT@Ruas$8>cP=d>dR~&lV=%`#@sEwzwcX6UIZ+%$NXTicADKB_@HGGLu10gW14H zd)m@C$8<)`cw%YY{anI+vYkE2$Wv1+U5_%17}JchtQa3YFcQ%qLc+p;NhBd9B}9WN zjwY>mx)^~h5ksgNsube&CyQ*mQ$v?wq{1O~u?uy(*^R08uqV@uHI^ABn7~XYIFVUS zb_#P$Hko-&Gllu4I+KMiZ~@C)7!Xa*nB0xI-t{aVr=4%G^p!*#zCj?iOma^$p0$LUWrr*uhkYS%QUbxU*ll8we0 zh&+xW7{$R;41rtKOj9z7poY*0J-Q788xk`qo>`a{D>dR6@>^%4pp6AGbVW${2v-$2w)Up;E= zghCjELCAyxF|fFl3}7k+jIs(*9heZ^QUAdSQtBGi>>ZP-})G^K`#9+coi6h${ zBgn%fWCELRwB4Cuj4{kI&c4jHztSvpu%1QV5eF~EB>GavIi3|xqE?%P*L+_bycPVU1{1<4B{y zl3a({(}7M55)nr{Nt83gqWB#5@epVX&CGO7x6*IO8HM}J;1k*mF;u5oKH{oKeQ6j< zI~|13XbiDto8w&bp;a#;xUzJOlQutONYee_c>j#_|ptD$lu07l%%8xWMr_; zCIl?@G+{S6BE4M8nxR}+BSN8~8blqgCR81-cI>@~9Zy1t1VV~8zG71ZZ@ZCfLqNsk z06rC=5C~DgACzUUth9a6o(&Qr3dG^@5Yixpo(*$)#^aIyO@gpt=LOdJ|036Vgvw)H zko1x-m3{3$V;Z~J{oLGUe#77M&VDQNCkwxO&-Y98US}-R2i>qjpAEoP5ILf!;>+#q zbY4v3|C|OkK~KZeMW9}Uw>uNj28(n#`WE2z^#@MhwEt!A1)%5`$od^jf5O*07)Ibf zBVaQJ%rgbivj}pBz%f8xgxLFx`1>Ep_vL&C_4s)j3y2IA!67_1guZ^HzX4>wbx3@J zlhi-`N+6B4e1>E&G@Z_f+UCs%k`95ZB6#Y9vom1!g0~NXE0Em)(M>>iAaHCrE*I|O zgNq$dVkgwth3NZ$`1=TRmLNSC$PNyYLjY??WM+rd91tE3xqT1+mSHObuz%f1d_9PL zy$F7N2z?U+5k!n54p$6!Jf1|n$@tR=WMF0^$Z7tm-TfXxJoYZfv*{E+q)Myzt#(s^pToY9GZcmyq z877I#!S7BjBgQaYQ)70CTMax~6eBo7;ynpy;2UT}Mby1`11PQ*X|Q*CB;Qp$%Ivj#x!FVz7zH$e_!}7{tg#N`j9GQyeSvf2oA%VlRB` z_{NI^e|+i1UM0O(a8xV0g!J8pL4r4yXT(%g=rYuTF^Gkb2)$*3Us2gZl`v%N=PFV7 zv5`nv@r7A96~&}lkxf+6oCRmU2DB-p?-GXG=X)T5+`oV{E$5Ve#zRTr&2FHiA8lp` zmlAJ?Scu{g#WTs2=&ZGr@%}|jI7Sh-aBBm3Z4lR0keqW7Efq5Am>_~6iWi?5?~$Yx zG3~I9>+TwO4X_P7L}rW;87YtNhG?yjv%y1)CLm02^J+d%A5dS;mYod;RU^6Dq)J9Z4F~W_*Fyw6gBBHZFBPPa*&gKAs7Ma+n1Dl zL|STxW%x22cbnJ?mzn1H!nmPVp}ZFAY>NC@cHBZrH8`m_WFRr0|!ADEO z8|u&0WFa$Jw`s2Ku%7DB0BWssTGmi)=xOWgXQ@7r?)o79L`b)_2tkB!7+#d1muMX+ z1#K5{P;ywI?3F6if4Yz*?IIc3HJ$319I$r`S1D$7OdhoIhH5^#jOMqYK(4k?BvnoZ zj&7t*6w99v8i8D0QgL?W$jxN0wE@;9{7@vj`Ut#5F7-kXA{>UdmY|nt-EG8w*oF-h zM3F>EYBCpcq|hjnBcsZ-S_LLkHUCc+_CXvjN>MrUPF00m$Y&+rcMPIAMlZ*l9M*-P z=AFLsvFdPs8w!Mc8*x>up*y>fSm_SaUge-xQraD&5k3(V%aIwzvcO~>NUu>EyG8Lr z{(VtY#J{YnxVl5JgddE@*wgCjN3U}EpsYF@z+?|HC8s!aLQ_4B8)Xy|Ggz6%mSb2M z$mWw+nMvR38hMnlq#RKutIk8IOlA+WSsBg_$1~Z=lT0vaM7_9mYGL&2hwLl9%9N50 z92>eYQ}@fjs;dzd@IJwOH7>w;7$!E#1;ObA9S-3|yj7U#@+_sz&V-F#eZYgAH@?21wx^SUkfej3Wz0AS}rYL zWyI1NnvfGxLg7@2D~aJ%OxooEDJ-P107apQujQexKrw+5sf3o7;&%d1Mr$-_>IgZZ zpq(m_BQg90+qJf1MvY7(FEVa2Faxt2NRf4DGDghkFaut;3l9wg!;M79xS6paW5hZ% zhJn2lc-A56D1@@6S|ev-ZA@`eyrp1EF-ElptTkOBv?wIS6$Ken9Mh+>;tfTu5TaU< zg8~4M@Dnz#YX(n z#oYJQd=T6E)QEtoA^ewv55nEQsYCIlm^)4rhnm)?7{q}m(gt%h*3i`P(c)uY@|AD* z>+jf)e#bsRivh3|{Nw+f0k0J`goBRp2GP_-~B6qr@`!Qqe?hm%8cNVG&aM2ExSkR-<8;Hmij=dE|&79h-;1rsf0S6OhQ-IX(V5+@WP@fTnOcr zKyuQ=Pd+D!dMd=Eq!EmXp;S|On5maneF&kVBkMJ)5e(aN=fL(RvHpABs9z@sncMrgI1Yx z6`6uzP{%)1VN!_Zp;x*Fi%wT9)kVrUB{wl-Xag<~~OP&H_;VU((+c-L7% z!cbZ$qP)ZMshF2k960T^xh;}wwQwz>woi3dk*r#@+9IfiQ7lHbomKPKt7DZ_+pXf; zWs_Blc389r)&5pb`yHY;k_fL?Co6*j_!`v6pPwL})*00+T9hUPgNIE9^sub_5MTl? zC#oU2npKOCl9Q4fFeoXlR9Hre9i)xUxM;EA%7jrvS{!yniH#Qv(@nmBgD~fuuQaJw zOGZIPA#~5TKpLnf%B$X#-c2c8N;4^qn^L!w&Vs-&2p<){EzRO>n|ZV5SINWd>eG3Lf}_!<&u6WndPT1yfX<^%J zjm^{?=qc$z=s`$G*;3K#q9><^q_=^Do`N2PeUL6-L!G0u>Df`zE1{>RqSr-csjP!= znrmwcD<+iMM{dQC6{S{`5-U?`yA`=skge#p($rh8(}6>yCM!zulp@$i(aQUuQ)}31 z$O?Z0#`GCr1P(?+A)XJ6U222AH8Pm4I}8MUb=F{m@Dt5lnVvSkO|nHu+uI~=0%(r$ z`pU-cY8C=U8uP?S)Mx;l)9qh@6I=tg0PAH$Lklr7lxQqF z3^=O?v5pNVp1wGX6Cw&lh5}`3wCFM7wG_wB_%|@{-cNvY!1urv;10k7*zy%CQ)x$y zdJ%0p^@tlXDrLsP3pTyr)5D(HV3ao#LHTtp7XQjDy>N@D3QV zch{kI2M!N@0-n=THzqU~1}#hnBBe3aQ?*XWgmpRw+i%+`=O?*4t`xHbTloxT=C-G1 z8B-3}qT1Yxzf@+6Rw>`QsxEsgeiN!lRaS*adHL5@BPyiG+R8_4$3Z~anp+aCtM^;r z9zbiHZ8LVUsCEq*`mnY&?c24Z&t%{j-JVF7uqEBLen*>-6hjXK44Uqs`UAfcN!v)F zf(X^#4y7BFwZ~6et6n1~H!r`SFr}~Fx_x1T4x9R;rK3cT9Zw+=-P2FP{61#V9tTJFiG-MYBgxa zhW}7uq9Y3D75BG`giFall_5ty!X?XBrOl98n~vOsg-#?CTDOmk2O>?45erUyMMzPg zTDxI$wj8?+8(jejuh#9O;DgCfXUvi_Kao-us?lM@ylp4$!a+9-*;dn}V0#dtSAk+=C{eH5xFvg#&;fk` zhQzD+b$@%*6lnXwhMORr3W5Tk1=K)}cewT21{ns!_X(`fW#+HX*@v@a^(r3!5 zzb><+5E^KL?RU%tyKM2FA`-cUP!2@#8?kn_KQ+JW|FE`0`d4y()gpFmxz3%B3=H@FNecA+tUt-7<9SzH6Jkt zknJs<)mU-;)|J%=9x$QD)xneGO;mduxl*O^zONw{JR#d!m}BbUJr#9I)&y%P#IRwf zI5$;S+EMW3^a1LysNJz-imJn|0j89<+TN**QLFBo+%Yh>`)6G%EsH!uhv@V4AYIcF z^c?-FIsjM6xtl4$<~a5DL0!EyiOZrQE|MZGvLY`fMNyPRRm{LoeFL`bAn5=f)ujEQ zG3cflVF(h$(;iY4#Fp#IZ7y_f+}jLqk%TG%T`F) z$zBd}l#`t0B9vU^2DQ@(L=$iQM)^pHMa?6}ME&0F$LH7g&u`q}p!$uW3XmfJSr9kq zN+O<^&<}C-9p3j5sqqU;aojh5nHqsZh1I9<=!ZFIvm9b(YHujUi(?tgo+d^QL!>r>NIK7rO%KtQ|2vO zw;i(sN6y$mxeo>-i6WZn9-YbR&okn{I|QljFN_)bnOpPBf`eX1LsJK8eUPq8)HZmC8I!+ zmJ1gy9uBjp5%8f^>dy<~OH%{^;AhqC1$f~T>asth3z}1GvCR&jm0xjXRg#$H%2i{Z|j#FO~IuHLsRm# z90%myALim^wCS2EC|75h-cw=PTk#)0fQ|INoQft`S{HR5!sTCinE%0SKtKD{@BS?Q zejbQ)<+r(59+iZmD%A+#gR&VHs2~PYwK+-fwOI-K=}_);D1SPXLmkSa4&_pZ^2t?dvMz2&r7!-@kn*gCHoTFIZfxV5 z2>%qg86YhCQkPxzM|@&%$#R+D%5|bLucnL)s+l`NYTI5Py2_~#oP&T7{G&}Ra8D6P znVu<9dC!GpsbhI+QkxZ7Ir^P_33B%pV;GA17z17TbeN}-P3Z(Kb|eVU1)tK=JsoyP zAUby&aJ4#3qNX%2u@p!vZ!t^cq@_`uu^cw%Esxtj_ZN>}oaU zC+2o4T?|2DjU%p+u~Uu(y0OSG*4U3944G&WNhO==*&uW-`c)ooot_RK;e+!7uK-`TH$Q zlsE-Sl&e;+S-WoihK-xCV8w-sx$bRUQC*pGqGf1&GK6Y??U)pL7Zt7g27+}UqNDd3j1cxOVG%L z2SOFVTJ%tgbHQjqFfluYc`rhYkK(0}mZsDl(nnKEot(>ZRQM>oGr<3lz zWco7MzDus3_VWE5S`$|a>sJY<9#zUGkjhD=ddiU=(WxDFhJ5EbR{F!h}i=CR3w#f6BC38^@MLwC0whz*sGJ1USe^MpK%uqnQkw zLL>*18B~qlIpHasx8*2A4(d$Doxp@jrbh1`gP5|az5sv-OA0~-Havm>004j_c1j5; z8Zo_nH2@GXiBM6%Q*vR$O-HCO;?8U8<=>40KqL_=uo-QHZFf5{u}$)tH6Rb)RSc=f zN8U965tay56WB~*Z5#l^?4B=mSyu=;avP4IN+b_&U)R25??}`!jtPlSH9>*dOjo5+ zsZ?F=IFU48hYUA%rTkm)X3j#f{U9dMU zL`jsw&q_`O>VnaC8)Iq0A1-Dr@Gv6y{ zXGeG3?VcLlH*Ujl5sr_?6uOl%Vmm;wJ)qbwP}>2`_xa&;sPeK(2mKE3{W*uFZAA5{@W<6>CY;lHVtBGhL3W0zq z$)ps9WC)Z7CX<ct*kXenIEm?1)84a4OvuuOSdh}VbYPU_g_1a;lUE{v(*LkPbZ}QHwM?Kza zVRyUtD0Fp(cf1$N7A69pkT~fiG6|BvRMcr*bTZJHSlBo?Wy|Fg5E8bH9+g$qHMMn7 zXe^#ccCJFr<*DTR?7CpaYR@_~0Lz?bv_6p}0d9E)0KkL@Hvk|2XaHc9*IpY>VE(t} z|1Ka;Kfb@nc>@3*`(^-4sN4<1|G07hVA!T$fc^h#%O5rlpnC&=nifLDAR6?!@Q|Y> zc%NF=mLkilqUrYf*TvDD=)v#(InQ^2%iPXux&E^<7@WohAKSZ~$m+FY;#05)+s~6| zjIEsv%&=qzM|hy3L2IcaNm!2Dc^hb~+19lsGAXmDw7Pz)cAaZCE)rS}RZ^Q`%4k9x z`jmQToDS2?G>pd3bczCoIjn#~3>9?n2qKV$Sy+bOkPk&r3YAa;P0-4y7-w(TewM@v zI4NKAXFS6DqyHxHH!1a92bZq~YPc3_drVwXT0vD^{g&-I^^C%<4u^mO%F3_bpfS_t zZ5lCV!sO}u>?!xy)12$H|=>}+EPTBl{eaMe>*?w6S;9;-F$s#egIfidz=HAcT5wS*j`Uz zdltXU6|Zb{>)7#~-Ob(Iqdj|?t5I2g-uxJToZBAx$uup3onceglgjQVpojtusiu#p zo5tu6U8bQl`iY(i5Fl8>Zbb<#oP^$Cg-`+;Amy6xn_PX(?QK5{q01;xyB3~BeGM-=h2XHwbKLDS70pQaG zfKPt7%-UlD4(O}4kF%zD=c=MqzUYc|nGG(nSgnk1C4cTzq zZ>P>6ox5-uLrihU)8qL1kTzZVNa@sHvQ+5?W@&A^i!7?>imI>F7bu@xQLPX(!wW^w zSC?R&!gY()V=$I;3rL193)%gYo4MND)#s@(Zw+~A%13MdTJqDJ zubx767ow|RlO-7|-f%G{N;F!W@e(YTYqMh8_N(x>DhE~i??ib{rc3qNHNT|gWM-sT zPAS}xBm1NtD?o2yc0yGB(>LF%(rYw$XU9@r@-gp3q2KTay)> zf`Y8%XQ?O~#n~#!PHFZEvsT$J6*;TURaGu(a`UGYQze@%-Arlb%QRPpg|e(yXs>d+ zmD#G~%U(L>(C~5=*Ml!;dHWHNW59@by7{O5QqzJdVKg9o1i!LBEB0a7mxT?*LUr{a z4AciO0}}%i6LR6kRe&IYMvNI1E>eV5>(*@Aw&m8nyFeHW2EiCE<1#Pjaw^k@Om10NCGL+}m3FDzSTpyY=J0uTr&ARvHcs|?l9Z(C$hM9z^jCmy_b^5Mr< zuuvhQ#flLxQG!Cnij*pYP@zht8g*(lXws-fn^qmVbn4Nk*MK2|X3d+kXxWlIljfW2 z(2@U6oH=#r3d(iFFp?f+{(%t`zTp@C5fI+tgP>giL+pgW{BViz+%ry__AVl?%22}$ z*Qv%v-bN;px~imA+nH7iFfkZj;5RcSE+Hw^69p!iW)>8clvVnDR>U$^oXehkn**H3v`_8t%fjm)K}5uF<>O~9$zl-f z(MABETmnG5xQvvmUnO__YSv``0x-t^4xq4A_s1h}A)=@{_0QPHZhY>4p}z5K;+`KE zuHPUx^u7OeqVhvzEurVi^8KTB6kUZ078xOXK48=q10%R@#MY06F5DwRY|6<&>Iwm7 zo_)l{X2w|yJ?UWh>gAqS7?htc72IsaWH_!Wet}0$zr@|kh_ANcjuXw<^zDde@&F-N zVAc5B2QYUDNVMyy%PX5eSW<8m@I0(kY%chg2KuVbW8DQiW|SIHr!4ohP{LUiG-UjC zQ%kjm$=B(*0a$e<(mhelMzcT$rL;D%P`Nx}2uQf9EkEZUS?y5Bn%$(Qlr-dUN^Tg5 zc=JR>PQZa#`61Y&qooSoH$M7~f+2w?A&8APkkVD+-asA@V0B)GE-!%%$G);1BJWGG zH*u;| zFxaJ68~&{Bu5W$zTiyI*FgKcNb|tz{gl4u`C?wR7%5tq|=g8a$ISFT&y)9#~AL=X} zX|vMVPy9^fs;-=T1vn5cRpcKf^J`f)T)DJsg8Ct6lkx}X;W0x;RqI@nM#r#3JUN5@M4EbC`u zb4T&zCsn2OTD7wpRxgd2zO6)Oi@a8KKguX2@%j}cebyH{9SVT5(%O4`DbZXW8@8V8 zm1lVP%dPFtO`{P&;S^uDM6Q6;<52 zmKZRvb7ka~6r_SOLF>K;YzrGMM5%I?_mz!C+w*`We!1r?r3|)B#Tt|iJD}^k&E}q5 zB03mZ(dh(9L4X;H3DgCOGIkVEWbBbCOgFW-#wZ=-MyI>YCf0cU3v_EIRwDEY%*cjZ zuS=rqM5HF^=Si%k)vB4TMGUc0d}agk?T$*j3Q*tZ&$&wUC|xpkQ25jM5f*Y%;na-L z^{7(AB}T#mNx*=Prgu2T*j)79g_^TNYAB=M)u*wkioe#@I(Ag$Z;!CBQAnYTMj|?U zPDzGpM5A*+kTUUzu8c82wp^g zImByGNHeQghCCN~wS}-9UdY%r!`qvwmpghhfQguN;7zNJZmSn#YQd$E zs^~5F8H0lPs58hi$~akskI*kTFH%#x09zBUWQ@f`t832x*#moz9sLCAp4BGxnsYxp zQANN#Cl2>)QAQeC)_=mMVscJsbhoSjwv<*&z#Rq5G4CNw=erg#Un8=6S5w*!rtx!e z7(=XSBaK38DowS-fgEih9rUq85`;v z((xI0-M?Gm#bC6+xh;-)Z1iT58EVL7&m1>q8IfFrltp{$?VRxd3MABrZrFo#oFbFp zB6>kSa=)Qgu@Z$i1}$bsLBhk)F5Ud(5`mSCz&1*1=h=o7W!%+W3b6gw}0$+;?7Hv=Hr z-DqNH)}IR6a?ntLEE#I4)eWu^o=pVfLBbQ_$o8LJ*H_Dw4+6S+m?G@@J0sNEU-RsV zRdK8HSd;9h{9QcO|Bl&xG z1SkoM*8}-w-r2^m;;8ymlx1$Bbg$mhuX0p$NMwuFx0=nE^8^5lSB(gEytNJ;xcMy>bv(ip^CAl3~Z?3HI6*j_6|KZ(uGtQ3Wc zS;)8no3&w%GcUPvfOXa!u>Bg&%!l2hdg_TcYohd$e-Ca-IRp5UK`v);icLPAwdnp> z;YBg^odT*;6Jo2M6Mo9P1qlbFQ%*@fS%f_}#hpCOffm%#R%(l2j9SHzC=ZS_u?BwV z>Nm@W)}$zvI?I8F1V#53t6o+FVAD!vxn`wVdy~QzLTM{Bs4=c zI)p^+x#M$<1MT7kYq5aJ=Zul?Qk?Ir8zQ&;Zp8Ox(9)Y3Cvg^JQtUtxZ}@w|s? zvFJ=usI+@d3%LfzRcOkUIrfpH*Au2fBP(b5rfCw3m2e@)XJQAGY==PH z{dz;8Ivyg$bM_wYKq;PYh+sBMqQV1d-a;M-c?VM*K(VOa1xe9R#yE9~N~u&%x_~(? z1(`zUyRrk-i#;uhzYefX>9A*Mdm?piIHg%&`E3oaDgfL0weCxcIw(0#2^Gmn+B!j@ zNEpcm#uc63zU9K8Rq~+6t^|4?7Bt%HO6M4R*BXl@r~_v1Y&Z*P#+gE{2-e4uUGc3p zy9taQP9OFmjv|`zUi4n>S>MhR<+K^5IZBev_^u<830@%0Zk-k^TMf*hgfn)o?Vfi*1g~ zFxNiEy9CbBdXx}VU!|fhKlKnPKv34pWocy+jOSOOP|42kMJAAUD0c0W52L#RjiVRl z4P`ghHGq=6pXJLow*`#u`oqL`6Yu(v_IVoulR7bl^VZasAxw+!`_(J@LO+qG8z&0g zind9ie2}!#dGWI8X6Wk?1l}V7zI81M_RVq92`$ojqWVIwPZ*C zryejGzSbM$v>bN}?b2{?U~gb~(0um!uJ|ot^3^!XPtx?xlkeVk29{Wi2P}W26K0l` zlbOw<)!|Bzm$+&8T5{UWciQb9yqz+G++uB{ece01mMpO_6m_7+Y`;|W>@#)yN@#xd zC;(sN+T`p4P-qF^_~t;*EYNu^Nlx3)<o%wA59#fdm?T?;=W<3M>o-Bo)=~b*Ih^ zn9KG&$-8?dpVlu)W5#17@MArGPHbA1^^v2oaA4$MI{0IttR8PAiMHA;5}PFgd+Tjg z<4t^e(e1_U6S7GM3f$&T+bd*D{3#cgY9s!b0xDnN9CM?Ht(Z2j4WX`@D_`7vPo>Hl zn@#R52A591^e)^3NsN2Io};>)pPXhJrwy}5omkEKVLGw<7;4{X4X34YJ4lAg`7=A+ z^N})dc-!)$vXdP?`)>@n`LP>QvLeBiqTks!i7t8VO0;nY40M*~rqzJ%`)EsK2f z9z9>_)5DIlsf2Xu|!+@8&` z>NU4}ULGL(&j1nq*CVB==lrq1^6(M9rx(R<=<<7?MPq^2%Tck0(+W=Ywh|MH z)9mtLwY|`d4m4Pe7o~q!jcS4IV_wET;{eCxI;#q)fhG-pB;*XXFPm0txm}ENBYkn| zcn3UIqG@P{fX>fR(xkkhmq*7>CC?p!0@!&^3Lku2!`Ej&iB(pS*=^lI59f1b@I|N_ zDipu*8l;^{E|!=|w)WN}7hS!m_3`QYKq$Ips3B*j?Xv2~_@XiRZss?GlI`dv1fMk%} zrF|<}{RBCWP44Mi95E}vBesnTumUG3Tr5Gu1@0B4%ZE@)M*+QR+oz1((YMlRv3HX2 zap-k5fo7><(RQf0awuLgs@zB~fW}WL22!<4H`jDmHHj}cO{)toWj>ATu8q%zD}bX%@n2$?oOt(rG!Yli*{>$QdAA9C z!_J$W4|ZjjNV%9!?@1HX#G75q2cZO+Vxl$KfOUeP)_pYMx)VYxWTu0ogCOeLwuMhz zDA>^>9KJq8pO*T^s_k96@T{$sLXDMrs-;HHF&}b^2Etboc|x~BsAxF?s|`+qjc;g$ zA_JgSg(b`b+Yjj^hHifgk07JOLWJt;?elYgLxG6hUaI5yKq^s%Yd3d4P=m#8Qg%6K0V)99t1<&FMn zuYMD!*&aI#G?M#-J>xXUeW0rTbEvhnk}_3W&*$=WR4qtOm+G(3 zkc0R7#}-gHj8J>q7tmQHX*x7IvUDS${{`f>uT8Zd5>a z0SXi?Ah58C)`gg-qO7KbgwDNvp1za9EzWMa+#NI*Bl$BypCf=3(R_ojxk_RwbKjCwv6j2 zjLM#orBq}fw(DMnv8SmNX-T}28hn|C%1?nIX3Q*B#vIk)XMyJbHH^dAII>xySRfRq zSWDTT=aPc4!j*yzJ(nxwWKv_)YMy*QxAD4SddNR3kR{?uh|e!`N8KolpfUI1sP!u? z-BEHV%jI+%(e9vC+s56!aD3h+*o)_p@yD67@O=-l~i$pYe zu3wQ?<&}x_0|JbbLoY0=O6ZUSj-HlWAhQCkoHW2q(uV(z3D!zOszKCvZx~JPjwXJ# zo*-OMMgfaEZqZzE_Eyki{@YD_^S}JhLOTB^K31@Qv3vg=$Vvcqj|PQ6LagB!IM^PT z&@{YmuQ(@8e(Eo+o^eJ{aJcy_?c2czH^hvz3M7~I8_tyr|GoMrrpj4cgEpVB)qO)o z5!J&rScjWSH#Mr-3^*IV>2&9J_nF3SHId!S0fJP61Uz2=dx4b>35n6T3n!o>OE1>k zCUFW`!;y7EEY@Va@MiI|vrv7W^Hcmc+M%KGpWX18J+_$A){miURX0uf^pjC)Vtw(cI zo1f7n6)iNH-2wW)7sVTFfv>Lka^2lW2vyxm#9d2KP}`C8dD+-4H5PaQq(uAKUY!`B zThA6u~bGNJC zmaybnt)%f{Q=q}-IdM0+jTqKCq#ZsuWFU}%>21c^121-UMcOb*9s1X0;Ow&Zcxx2kh; z^V}~;8Dv~hAAQIlQL`1e)8-Fi?)C=bt%8hlH*qQvMS@JmIjnU#V8>Z#qkc|%j! zoQInWuyaUf=DHXeQ~%AgH1WCl4S?nlZo90_-Mu^WR!ok)v*Y;)m9(pUn&Z+mHR=6w!Ns2K%xu#&7}}?$hKIxYrSl3d{~oI zjPG_A6sj*TkhM^M`ep-oI8V;QZ-4hkBjLdEw-8xI0M?aO^@f<8-(b@_S6>(b6YYUB z4;3%+P$^{sMTDF*Ja2Cl)uF65sp#z83ReE^esKa=cEU=0~lE4Bp%LS#i0*tkjxxeb~KHCjqT@DQRo5uboCJR zV|xehJUn{jp+SupW$*6gZ%=96XUxFElwN0+>pJA=w)ci0=Mq|0>&|&Kl7Y2oex?FW zK?wj;-lk*Lm3#YP$Wz(taoSR#18}iKwdK%~#S8X<>KoZxfAfrL=`Ns?Te!j5Mwk{JGB)$Q zsHaGXJHpzX)IHejV-&2V$(Rc`SW3k&tL0YMD-kcd_`r|=XQWP`2)h9KU9!3uhc{B_4vwrQ!Gx{!)H`H|nMll&CPBC>@|mXhRYS(Y>m&wh$j%=# zKOtdAEzsss!nXQfc}7!!n;;+!0SRlqIB#ix|08v0HMhqmDXTJG`R1|H_ADZxEGo+v@Ga@kVul%%(v&^`jQ>%BpHiNTLD|SzNTQHmJsW#Y9WW7BcWkXrJL71pbMLFpVw?HlDK`?4I zkdiVM9B1uH$ycp*PJen{8IP>o8@*2>!hlkohrZU9BZBd$83rOFw|+E$%bZ)8g$ zEtXTo+$-qC!LInfyR-C-mHhFFco^4$^A9!bpweT|JPTMXJOdSju*NFU8DidhD!OJo6Hu6?hUf8yfhLzw= zK5n!r@fIU1>>8<-u9xrm)X6kb*;Xtz$wYs1T{vgQxMI!9m$bw4?*cV-lVtv#{kLkd zKbWu;TH#D;-y8Ja^-0Tz6XnC`EEIIWgoWZ4)|~rx8DxKUo%Yk zfU)(R^xK(RUx!vHCyr0AYVW243&g9Ns$Ol5JftEV^8EMz%L%|U*l5e9-%PLZF41g8x=bw9@l6-<4-r*t2~W)w-vSK3RajZ`MmNXVG6w~$n>7`Vb6W}( zmL-{cw9;I$29>+)^0-1g@Arxp6EI{QumPUoo7_>{pk2Bnt&pw^a`)mqzNlBwUuEGl z2E1OzfQ8pzCGY~C;e+w!g%RnGrW*#p3j&1RX}9o^_pU01N#Mxn>7{AxO^Jd z@!g3^ZN)D_z0)k7WG>(pF2-TFOH*}!w~ANuNIYN`@C>@(LB?cABoC^7EQJC5vi!Qf zc|(PEVF}ch0|wO~=$P$7p-)`ODG~>FBfR}?U-{Lep8DWGr=3AT_VOLH!8G({Y*@E9Mn+FL}rU1_K3-HJX z4#ThceK>PpKuvSonWHtT*`|f{;nvD)aN$qZD$aU%WwYs9uFuXi zxI8hOUjiMx`=IY>_Ipj5fUfBl#m3|Qw@`O(jIdUIFUtGgTFLDMEvMYb^KMriou(J+ zEU_iFe#4G-tFp=pjYMbByX8E-lZRAzZF@s>iCHFKnk?+TCWdN~Z1+`YEAB5&t0T6l zYRY>8{std5ekG+PzN!G5m(O0`J-JifPLyvOKdd_~W5g5v=HdR^LE*pC$ITa9DyaMa zGJG}r>S9Mmi+)oNqscUL*YdW_$sNf60-yLK+oZhZfs*)a{xgXgoy-=c z%Cdul6LWB3zv3ZxW6`+do49T%gQ97rqTnK{pC2kyreXP_*C$^{BTAW6_(QL3uEObg+;!@ z86uOX<;rQdo72+@xy;%6aI8D+19y=uFbqi2mG+?53v7{`GL}v*SB02(ogv7U;ZiEl zAH$Vum$MTXP?_d|*m!0fm`=M~x-c?3!;&;24@c$Z)nwRka{Ipfvi9IGD_@qqUv6U&}5RDNUPCa=UxQZ^g@PL+S~be#D`%%I{gKE-`Amf z{sZcR3>}qbL*c?tt&v9A-H!wR^hU{wyXM-+yN#qX0k>Cn)m)T|z$$=pi0 zc%pw~vnrFfDGaumms%v&=_;V1Zk1Ifl6f^)qc|?oW06^=);=axqzj1 zh&1+5nIgG3Sc+uoHNBc1ik>f~>olD`0+jW(+>F_GhX5qPSJt1~%W&U?Xh&cR7UA)n zk?a`Cyj5sMT71;8`Q|=^G%uwny+q zuwAn?7AWAR2CgQmCe*2VUkRjnm;#w&lw~xIvSbbcljfm4?O&%Ns5Q}9uF;9PFqzC{ z#4wjpCUaqWKWtR-xJCtx7!_QeQ3b-Os4Wml5~{NMIuwuizAc(IGJ$7xuNu{K7euNN z)UwAW5%bP;1gO#u!&ZHi$8`b@JlYyioS&#toU6^Ev2_9Yxmqbdzs}5Q>)SOk&LoFR zj!(Gg&1cPYQI(l{*v9L2E1mB6Tquo&^@EC$3c#V#)Ms^$tu|sie)K+31J8&Z9dm1& zYJR9~d~DRQa+rBFS60!*-Md= zRo`Z-ZznwUE`aAKMV!Rdd|=lA(x&=C{p2VNa*8gfE8rhauyg9-L2$b?^`RiDicH57 zJ~ZeI;XmVQ_Ey&elJpJ4Y66#d9dS3oH^{g5w%j~Sz8TD0x?YyH|uJe1fM|0LzW_+Fx)F0vu<_2p{qG*gFIPG$RY6uTJS zp~g*Z#)l6F`C3Hc5Jl)xJqo~xjfESRxgKHpwo3|lS(&av^V_2#qnSkUmJ#vCk8XE6 zd!!h%depgUd2u9+Pdf5qpT7F41QfNnYsG&natm^~^%whU(Q*+u`j2C^&X?X8W6NAu z#5u3k+Rm>pE;)7Ln@5Xn&57oQgm{1@&=0HcdF`p2DjT0RVH1-9HrW3vdmjC~w!(RC zbD`3Va`7fhE~XUE`F)~=7z|g?o~Ub`YEYR7FO$F1KJWKPYG)+QZCOZ(dnW_gI^$)I8{C@rUoWj z(mnXv_C0Ek_DyGOS@mMv)hRoZ;aCT1;c>Z>qZ7Tr9ZYp?yFIw}-A{3M=wT^`hBbY^ zyVNPGxV*d1*dhVOeO(i*u$n))$1k@Uly2=A?`&x`B014O&vrd?t&l}k6ds3Ys)}|k zBZ_sZ9};xjlMNSH5_Ra5wak`nq;R{XLY_YH9`$e~#5KJ%!J0@`K@N*U6Y^&RI5iWj z+uk%o4V>DrY${=HahJh+bySlntCB9d-Ll0rs^VH`8$o-z^|7poDTLh12}Ko-P(0=g z$yK_P*Q-l&nzz`Q1mqt3y7nx;qf@n!^468(+*n279q6@zOTMT~dPidesE0eQ?ya}Y z`h|zH)C5}ZC8Q`&#C*quG~@a znkbqZ&&^H^+LiXfkSD*&@ul%Tv^;%;sbl!&NQ}(S8BDLV6?hLq=OS3t#WOr<#VJW6 za%&Vg0YeYRp99ZdUHHtd#DmMj?P#BbGwqyWZD_ToXAwJcpAc}pVP&37U_KUmp2G8; z*7cm%M>lLc47e)4B?RdjgfMa$9|5=OOg~?}=l>cand)H%ku=1SH>4Y zlM3TvHqD`R?fahh)3YKu){s~n@8PN&S-jRf@wk6O-S>4(!0;l?-T8282|PFatw7Zkgvb;@-%mu9hcDwnMmX(xQ4>SC|PlD!LR`fDxAWHEz2 ziRwHhJI#_=$F%ZAd6m$u+B=axMU7^Yu!=&+J!t@&?vjU>h0;Sy!%**N*&Y<2A6*U} zR@sC%@CB&_yP3Irq4}5(o3D$ImHv5Oc|_F*^LSiIhkiunl0)}<5#NlHqded+{3@%z z*vZ#p4ShbJA-o0eTNd|*o2s872%cfsaJB)5;jT=Q1&D3Aq}`a?bK47DjkDRggOjjH z6C@1lF?l$z$?ZJI6*V|~yM39gNfw#8%bJr|JQ0MdC)IQmO#M8D7~j;_E+QHuAgaAa2i*3O0j&!7uf+dKLC_!`uy zt6I85CBqQEnd76OPupJb8#s*ILvla_mVW4L+IPQ9(Ldau>IXbShC!!|W8^;d z`d_tH4?oxdbu=^yUeVr=#TL${j@H`PG@rK5l-Pmy&&1Y8SgU`P$bPY|;kN(Fhbvj4 z?n#4}(*zuTHD+bX%`V5A2M-r;&Q)q0H*XRsY#U-d*-ERnN;hD$`ljbf#?zu``A}Wf zX->IRf2FJ|3+1j3F^kfN1-$d+j{wgH6y2AVeVw_uN%aCRF|L#>`2CW3krawVg!B9Y z{1gRm!nYrU>2L5@5ghe0V%vTF9~xelSLIDa*y?`a34XEFf?qH7^Lq)QMZ4ByFj8%$ zjWLsBm!xrtKkjDwDteo?)wX1}90hM4`fFLp&OE2Pz@tlbe%YjPg}zMx_AsH+*Q0)R zK586Oez#R=HCdEN|BMQLlB}=oq;yhk6xRZ&)N_Du$fW%^wdMXdLBtcHe4|`qJ_D9!UF=4hMR-(O%P&Z{= z3~5xL$P}7xnlX|xQGu2AqlG&YSFHB-09Az2+)t-cQr3ES5 zCVw{x)0N*R4~wrN%nsHs=_mIm`pw(=wOKiNwAQYvl9uKd6h~KmptZF3!C0}ink!bf zBRN_ccr97~cAP033?MmG{U7JE{7;E%xz?&{0`WC#CASt(mP19%z44r>#Zw8WdNTX0 z4BT8c=nRC|$-AH%>k%#-d{lF1%DS}$4OKArXL6dGJh_9DeyCalOvDXN-yY6ou3EB- zaWI(b&roY%t~{VseHLy%138z|`Ipu+$nqcgJ@51%rvy0%nnLk+$z8z$mBsu1-kSK= z`&z|ZrTL_8thAV^MAhu=ij(i_IvG`00OHIc@do2_8!mC@x$UrX2NxclK`n=IQ-yX@ zpOzX*+t{lG5af|RxposneUp9WqutIAZ1s0;d*D+}f2ez|s=3Ms$X6mKM^R^HUet#f z%5`omA;_VOSUKVGXxFZls`b-K_2!bW2X-u6pVuBRy?Jj6$LI1mJqiliLorEQE+3$y zzKC=;P(?N!ekBkk=BtAp(#_7+w6T}PTe8ejzVjuO(sY21O8Nep2dm*Pjm}ukOkBU+-W)VeRN=+*3#!G9do-lQj5W7xA|u zxw04{I}#*`z~3oE*rXGo&5K-_*cj_p$_Ki1)>2f3>4YlbDp{Qjxa{-;1pHSKJcI`f zsLZAhzN%;TtXAIs_CfpqAJFEZH$Hm{P~tVsi*OFaZ1!6aD)ZzO2Lv!^|TOG5tXMas zRvvPZ!-u=0iLq+z7JIy-iYf~8K}g@sR#Yv>??v36aWMC@QF(h3KmOkdq8D7A{bNPm z-vb+X8(uuH=!Znx>7JZDsoGD;`9=lC14*R!q(^hOc6F)Ye)a<>GYjLAD1QWVn?mTy z`>~2u|GE@tn8ukhJch}yvE19fL2#=|O@XDRY!z=w;MSDbf=g^U8a(KmIzJ0n;NdoE ziP(+BI|Bn=Zj#t|JU3*pJyzO3=Z_q*BopekJyGrfos3ob#tGxzamZ-v@}NfN)83dr zk&hj1?#hvBzZj#E{`Kr83tGh)=3ggkbqOm^!I*ZQz7jc5RzlgTpSq-7)aMSugk6x|k$&Lk zsxrW&;ZL!gwfST2d{4I5NP+Z*BxSm~=NgX4U7o&h6F0ds**94(!iD8%0fjSt!?Yd- zzSZcf{2wPZ2itAAX>T-LKaZxx82^hfJ^K+zSxUmBfqsfo9HB@YkW%V-f2XuzgycB5|g;hSXZSl}(2%#A2(}mJ6=L z3ls*@eQXe6Y4n7`!*(s_n+(r$cB@0gF2bi#QvkB4xc{w%i$C3z*>~}$xtY}$lN*n` zd#S!vbvRLV-EUw>tSp8}t^`>k3sZ!48IR-oC`9ek>E+=R9hRqw8c!Lff^0KLecd3gI?u3&vPK+(O5*N8U@8ew6>RhbKpG;2rGbP{->3O)$ z-=CV0VwrLsy-Us>U))dPKty9;-_+QOb_6Rf#uB6%3rdR_6rpxDJJ>ELE;ed{Mn5*5 z?o=kUDV++=kIS5J-XxZccJ>Hw2`Pg!I1bw%gO&35h9=G^s$9_ zc+F3mw{Ju95fOFGzj&%f;bK$r7e8|;@EXJh;H65X{I#)S9!6eTYKH+YKjsBTRyrge zXfSk;19B{8yK1!ECD>$va;e#3(I%(L+yN6D&qT(xY(W?BmjC8D5cX|tUkD7J;*hh?W)ywRSW^3!0eW#-r{906>>KJ zN?#n~2Q)ZD{zWK)xZur))7Q#b=!o>T{h*zV-k z3;fnKImwRJ3@Wwt_#axk((F2fL1E$D$yB7VITktNGp$8}{GLu^dZWeTZyy<*v$02X z;a;sRR?z&UIsk}r%f-C!UnAQvOtr1N^W{$JJ{ai*_KM9`rl;Zn%8$q>1kK@|*mr+> zwEH0z#Mrl-AO*SQP))`CP^)Xk6W8+Te)9bk+i~17oaqy2`n3Vhz#6T62x}Us4>@GT z@)IasO)RK%%0D3I8ELR8mjf%aTbB768$-k!Pk28szBx8TCc5z7HFu{W*WzKlG89cj z8nPTbGgoR|KY4O3`RLE_yHeS`bGX3SSa~G)i2p|LgoK8cccUgTJnyt{JpNbkG_JqP z6!-eMu}YA~N`1Zv#V6GFEyOM}EGa&!;--RI7(T=stGuZ)v-{C}k78Tpy_=M;1k!^B zv!nLEHnXu6tD)jiq;{q5Sf>-^vk3&`m9JdT&Q$+w3N3K|6UpbSr{yoPx8pLVVsxOt zv%YJvBe5|h52B3&Y_~1xjRaD|q~f5>T)9JB5kwx$NxASFj`HThFHjLbU@4!xm+U4Q zkGJH*h&0?OUNeB$!SZC%;E#-{`BIb{57lxi#?}qMl<^}E0OV_ub+bQ(JhaSl+RggN z1?OLWG=7b~G<)Xn&NSM=F2*BwE)ZO7nh*%`a0PP2S|Y} zQ{i=6WVTOm5TN$;w*0k{hNd~gam>}8-beL>ooAyb6gwA+L-~dIpRa|A1gjxtr$D6F zeOI6Mf46KyNaOpG`pf*vF_Nl?HRCmMU5g!ul zqxfP7=%wuhO{)VQ%IY15i!C|A)gY7IR)Fa~-fkas&UP<Hc|5n zweZk^-6hvVRjVUPmbZG@GAvLNgm5me`yu`-1nwgFV_RowfVB&&#yhkllbAD5 z94?3lV|F@zfI9p1&KGgf@*Y@tG&wyMwuy9&J@UQ+9TnNjj$wDhZgV{~-<&F|u3LC} zC_YGYEZNniAvm$&Y0UM=S*lJ4oykg&Oyk!+z{JW)@aSlkXm&VCWy!-Lfwl6}SIWSV zfll^as8VzZ2W;fF{Yrt#INnFzt`mzSl2B3zsZ*q2s9mM7DEKWDj3g^4gB%T|XX}!i z;XBxBErTBu^d*<^A#KBG17IIUayl@Re)*a?jX=W$osX@KNQ;?Fiw$j~8a0vGjeeVg z10w%KBOQt|g*GmgqE$&}>mv=a4AgO;JMtZ>pU=W#C-{B*RF%3mgf*q>08NiKS6!H8 zPmpxbL39gKFUo8lg|e~|)dinYwCYfLqw}T!(56kD(3zQl+EBna>(bub(!&ka4;Qn! z^8qOpJhi3y*fL39QV4fCYMg;syBIMeA_7I_q$Bs{!A17{Ncopwe>a-|l1W$KX}!E~P%HTPo>Gh#+N5DoVmuXzjGp;SvI>3L;F{iIyl-t1z)e zYORomqQ8>^>5!#ii2?M!M3R-I5XIvXMa7H6R>`2)tXI+#Tmm$J{9tT{4GQ|;d~afj z9*pYuCgnl?U`*rca5Xre3jLQ z7M<(csI7A=;7&x@C*&qIdQmn3A->FHVag|ek~n*3FUbBz=Bw?^9p4ue7~Rccm?Kb` zD{??oC%jQu1^>X9+0mfYh(_W{#5XiqkV5C#VA5Sza_ji9N)Xdo==1zKp_5k}weu!Y zi5!vZ#A*E2S`n)|j;g!9x)!t+G?>@no{cjaRhkaUVKAEHChi?hzfnkD?ldWb{TX%5 z*H1P#R)lw6K8tpt(x2+~qwsKDfJSb7*n7ZqvQX_ZYaaHV8c9F zR0Rto3BC$=uQc@d!ds&=>5I4qMuubAplsJVc3o-<`4-MJE7mKD4djU_B~TI__>+#G z!`^ncYr^8zTNy*R12M&=7($jA5s`vMMC?p3H`HRK)lfQ3V_9`oSm8jIg+gXJ1c7OB zoI6U2Z?Qu~l6r4N0Hy^Qdq4SL268t1?$~53+|xlcCUQ$-+uXl}gxRFux~y@JcVZ2( zGi>zLOYgtx(phWkwhB;`+^aC_8jLM{wa8TGkE7q>fOqX|tYGgWc7N5Z#ey%utm2kx zaT$h4n;I~fHgtOiHY~CmdCURJJv72xu}+cRxp7RkfpM48`~Tt<#a+<*^L|`sjg4sK zqiS;RH1%LBYtSNa@XqMPqU4tS4QgQC3wMV$AET(BhJw|jdTmb!ibKc)k%%rFc?5Ap zr|Y{Hqv@c%4zMeM%yno@3V9YQl-1MGr%PX!6k2^yHMmo zCdVTscewS|IjOH)A?~9XoKx^8E-~-tN-qw1KP9)G7J~E@X?Lwt_O>>v4ru+)2 zIJPAOp4YODLz!TKp&Y0-jjN)B@t86y5}x)Avj-JGmx8l&;4iGXD_IF>lP6e_z( z>yMjmg!+8iZLYeeE9=!yNQd^THXoL z+z#$Uo;ox!3FXcBjXQ|erg-Or@tj0B)So9SNel<3@6FHJut8YC_Y8A0CRSQhJpw$D zr|A>dj2uGlVC_~+!s0D9w+K;r1pT*ftO$m-Tb+5?LdDs0gEWx2yZ{H{O@B}}L81EI zj?&_IsTz(F>{#*E`#KD!Q|u`1^Xlgw9o6%LUrF=Lu++XkJ&a^iKA&nq9McKhbZRDv zArBa~e-4_@)Z0Z2;)`x=CC;_Km$g_^Bpgjm#)L$Y{;ivmHQnpMcBh(Aoe#Mx2=EWL z`meyoE-oGJgq3|FZc^<<%k>UU7NndCrif`CDM4dg#ma)e_daIz6UbPW zi6*D)b1@yM=yoeDb-+q<3v&Bbq8ZNWvy3bhR1&;(&V!Lp<<5ZZKOWNgt+%_rgsDH~ zmlJ*j^@{zEha4zzQuC(_llXt9jj$1Wpr9r!vK+X3UG5lZ5E zINR^3i_cYv1NOnL^x>zx=ewiNVwLQ~wfoFL&A`c@69?X@@|t+4Ln*cmD;EoT2K8Wv zo1fT;>Hv7N(r}9ZaL^oZ&J@wFz5BS60`MwW3=u*wW_+`RXFAUJi6(}7tXea=xJh&cVig5&EXbtb_qkR z*^Ig-<|>%J*m&-vKkbx($&_^8h%Zw6t9a(o!!M!NqSsPyJKbZpP>C8V6>9slB3|ZI z_k4|I;b`DYl(qH9K)0Jzva}{DrcYKt_99_dZK&s5+xnzqynSa)-)%9~CAF5ew6f0> ztQx*bMNmUM^K!5ZvVF;PdVA#p*VKOEhn1|WI_hG5>`I57BU92F-gXcF>>bBSHT|jM z7M5)uUu#z$M9S}=seCqk93J8JB~BRn_lkqsc2G5#s$ij#a7RBVSge>%uSQ{nL=pFY~KF8T6i`AgV^wv?bV7kfM zFYyt)g9eFkDESUe#GCgPMDMsYbE%Ux78_RLY?Wm1t@-cc-yZqLVtEG*q_KU)(pN*G9zD-$?r+p+o@hX& zn4_#)qc#4Iy5yl5b?XMKeJv} z{X`eut;xLbx;igWSL%nXr=DVhSG=St8nszzEh=qu7uv{V?Vau+@1~Q2d%!~Sk68G>( zVZ z++q_k)aRb^lGlu26R8^3{=Q?KGHo79%(MF?W@#+`OX@JeS4M=Q1~q9DE*CSh{}t;+}k^ z=Pg&eTp3u)v03SsOFq7#` z*CoK?uVAXRlpnXKeKD=j{7( z%Gr2r*BI?xnViC0CP-=c;qTx=bY+p&VvDi&aZJ#%mC}5Q7OvUQHdbwgO7ayKxaHWVhQa3%*Mv76 z`K@BXQP<_62*_NgfcRnU&AU!i8>X>Zq?ggSaSam#`*($R+d9VD1`MWw<(;#nQZD{v z+piqNhie@5DcC(Pnv5JbTOvGKm9JnuSayC8HUh=AiY#{1)dV-|LRpa){9Z)fR`Bo> zW-F(Zo2o8^&F9jIC67jb4{K=HOp`(A#KV@0kzgx}PSH&i<^J9RI3Jk@zTN4`*IK$8 zBZj4+FA?VNktceJ?aJaLPU|QP1P0}+OU&Dkf&2kyrNnm6Xuo zY@0Av=2zYjksDd$+p~K=QaD8Qe#3Qr0kI9JH6j-;F#+VlsLsP_J;{Oh3Le~O;6qMv2(2X@=Dq-iApSe4ZI#4h4Py)$yI3$SF z>KgkT@M}N)5^_Jc<@LR(-9T|?Yy&Eqvr$BMU5KyOngh-BH#maICcfB6 z{R7_GkS*^Hn%7w{9!wwZaV9ghJP{uzy<;-~Qd43Re1mMTM`ckkiTc;@KaSM4g2R{r z6&xQIV6tH%YL>G|npaK!vaD%t87!)?AfH(}^x*&8bUjDH`}M{94uO}cnGQZk)(700 zkTH?~?+3%JnokCHP+kMwbU~O^`)U75`m4$q_%f+X_Dd1eH;_)VSQopS?o_mwFJ;ldXsDe_57>B9r znAa_tszm|p(_O##^h=w406p#NTH56MxeM6ym@#I^V8__ezf3w<BoBo46 zn6L-noq*FHPv#?IFZX^74hICvksU9O0uXNWs=G;XyZFmMaHGhjdv74f_nwPHej2{t zWy?i@_nHD!B$A3sWh6zZ-z5Uh6DcbJBAy9ngs))N2dc2%=!^*bJFM0HzW0|H5{b}R z91&UFwo$gqkQK{gO3a_MbuMUtc=a6DgtV_4v zD`pnWIPAPJhnPXWFdyWOlT_UlvqH*F`yn~$-v3QA+TOs{;tCqQc|My%Jv=A01$S^V zcjhtS`5BFq8?FN@+xL-+hkHhb$P?;`A@a!)Z#X2>M!_F9EJhX$O2ZxDohk79GbBv1 z@xs7`EnyNa#1}xGO|-}m?vX~P2MWEa*tS^u20~kKXg%p$dbWh2G#qj!B4qZdpeHvt z?k_c}=dT3zwl(93H*HNPciD{!w!*p9`5W{rBgQr>ch8RItmL*)bgKkZO~2EaSsaP= zZ`Rh3HhDuQS>OVK-4~UNi?=zl#5)AVM5|@n@9-T?o_HGqM>FQyNTYAfD`1&UdbV>D zow2nbj|1tV9s5hA2ol<~-sDJMUvki^#XG7ZI48j;Pa zTDx}V66VKfYhzL{U>XM5OJLNWs?C zTQ0JK!ulmaBqCVStLSTOp<(&2qq>lyw@Z6jsayAOV>yY|07Z0yW__5seqGUDrH@P& z+PFBC0dTstH&suHTjej?KQ3=sTv`Otzkf@;+uE`;{)`LbhHu#_uT&~>Mj2AY3{;FH zJYw>pF;F(6uI9cuYSl@GqYdmkk**ykHp0V1Bsin)gZmyJ7Yz3_B7;4kd0B~mRSAxI zbRsoorufM$TLxzDCAQ_A`4RcJV$Ve<*f<`d99Bz2Qc0-aoTY)Almd8S*@?KzoFIQnOHJ zJbRlm>H9FP0n|DjufO5g#tW#YyUKW74mZ4_$QO9Lb;ox?t4_xwARla#1vih;G(99W zjZQ*^rqR?rG@V9L`=IIx#|d4>2!z|_vkOq!Ia(ZGBh{B&_{PCD&Yk2QL!f?BnY%+v z{r{Ux3cXk^!UUKdhuZop)aKnzRU2xky+Cc}=yL2G@lkj7Y6OB_HAo~18ljrkfa5NF zgvlJmcP!Zwv!Lvb;OnB~mc5Od>Dj^dgpw4R`v=9DH3N8E$1S7EW4LHMjoF{j>caPR z^5jFempdpKDO)DP_ST)8uYWcGyF$CEV1UF=l@BGUZO?tlXXNs^4zW;Tk8@t(#Mx5C zW4b)Mx-28F`nvs+%^hMAHC%-vFvwHq+x5=;pVT$q{rz6XI@m+{>7A*!fqS7%o1e}Q z%~_11nE}0~&>CVrQxGY3MhCW^THo~Q>}J(?q9e$ew4GD(wSnRp3vB^l!@GD#lYgu2Y9w=ebsCzxj&8|HWP|#l5^@UMLT-Pi#h1{A)>PN!Jc>;HfEU7sZ4f8N zy883N)D9H>!mXa3RhB)qm9}Lov8}^c18P-gNV{meNd3PYUw271FKhm3+X(3(?I7u( z3iR9^glaRBvwYKr4HFJCQ&bo!skJPtgAN5C`i8|5gH4PnfgxF($X)7HVFIxsN|I}%9GFK#ZecAlFdB>%))^cZCEs%6P>K!Fk#d>03$xm_QauxB>ym2qTQ5B|P)>Kuy5luetABj(E#~vAEzJzv+9!`W^a7;4Kz@ z((z?!)%+l>Fj^JOn}DA8L+=`FnOHXnSm()Q6RLG5esHJ{KS(N!^hDJA$Dc-?j;F?- zM4pU;dd{;Q{)LW_UUPjBs9j^-(qFixs-vJvX#d2sIQW3s8Soa7#EC6O-J4` znpwZTad%biW}@jhDT<1-;$A;o=?f0kau_ziUgiWfq6D!JB^1$lM3_X10s>HR&lZ~G zx`7Ok<1`3_*8cmb z-dM9{S52`)_i~i4CvOZ=)HQ=|spGWP{|sd7I>HXS_5*jTc4e&2c#OIjlDj8pRn^;T z>+)+Od7B&YCn0p(>-LQxFJi4O=1LD~_iT`Zbr$qwC7ZN0uwe2JitJ2{Ti!656~Dc4 zS2m-cBoTU>!zIuC=R_#kU2o-Cfys-h9H$w!noMxQwIwYL81F8V>yiNaqHN70>0@Sn z57tLsPbRG&L2gOfT2r$Xhu8v&H?86lV7@6^`!h)}Weq@((lAqXrQGFkyD;yg>aMf+ zR@0%S{ujX6AlMGSfiPiDtpr@zT%3{gY9+n0dVL*!TEu(SrDHej+V&}C^Zy`+dNw@O z5su?wDPoTd>IOmFpVR;)ob9K(0CPDzp$NrF#bu_-1tmg zc=-%Pd^c=aQ7*8>dj%T0!_?N?-;e9zEy?*%odV7= zIWw=BW#Q>NvC2MQLH9Rg0)d18?-S~m!2o_x#H)eS|9s-)#=#;5|2~AnTy53A?2;X4 ztADyKF?FBq6v%BL#R`WLXq0>Yg|I(WQ~j)6iusSc5h+t~<$l1~tJJBt{6o$5g1TeP zqD_PT^|v%Myf|`w*nfYvv{@a!XQsisu}o!U#4=wD?j4}fNDqL)UZu|)uTnt%bTj#Y zH@MEl0>-y5bs{aTW9yj~dT)6juwGA4U_NZ!{W8llPB` zFgQV$m?eB(G!&W%q3m!JY+o2M4|G?Q%hCkMAmfNld8oa>&4aa`Nh)F=mWU(5;k7yh zQJ4iB%HQ@neqCR+!^7avbySX0BL~?noMOlRlHpp(^wG4>4+nMOTYu~j!@gIRhlQ@Z@H1cWo?2CZC*>EsHdPAbQ=)T6_S z-@>%kvD}!}NmVKn0%;tD<;hVowz=`}Si0L1lt_yWnjo8P25%ZHE*!U?k7whbi93{I zmVgb@S20vx1%u)F>aCxJ!V((?XgXb*CNi=p6!RB92YVO_#5=*z`eBQN%dyB|m08Z= znk5KJqUKX+YNkY@W74QPKA?mv40?3T6mp|hE{#>VFj`joMJQ$&%ZX_nRHd??kJegc z$q|WROXHz&dKr?WC~c7CNP-3H?2_wJC5)tKa4!?^WA5pt<(wJ}q^adraM7F3KRE^E z1;Um!ItD6sy3;kGS{0W4zr-Loz~OYeTn<3pAhIExivlV)8)b7lge#Wmx`ZDAXL3}-EJ$$gAY}@EfD0} zWgNqn3Wcsdj;u{v#SPk8L<)_N#ZdEj#ntTrhkD-~L1S$e^Y(C0`E6^&34uz`3!J#? zkm>*`WO_x~;of8M)(yk8nOQ_Wb5Ic9FhX%%kH^Q!o`ykjpV4PASONgDzbWW#H%Hqb z8n|PB<)Z_Gu+Q%uKNZ|*Y1gx|5Zt!Q1vV{aw$#yZld9C#ztDq`!a(g`)uV!gnr}_CWQR>^`o$OSHbO2!7j#N-0d}TMW zJ#3-S(Z`gwsjIsJccda(W7K>m<*k^e&1Pg>fld z`fdntUrm7ME;E?lpV*%qflG>VG(td<>z5$CO)Avur7FMfi@1#z?xmW)vkNTjZmh%< zgK4n>>KDs0*tYH4F0?PHwYq0-8~@?(#(&crKP-cK&NB$*5T8&sfwnoUNIR0CwLaX4 z8!vW~>?Xa$A{I%48He~GGthmXo9R?*yP<~NJssZ;{K<~*y{JRcbXK$8W9Y%R2XOe` zdz-ZN4q+p)p{)wMGv~dXzWAT=HL_9VeR_AM3lw+eSlaGy!}WYy8q9o5=Rw!ljC#Mc z0pF&^6E`*YR(bPU-k35#(F=YQv6-;Sd-<+M4}@Q$EBywI%QWhh;}Zrc#Cq9iV>w#c zflsxyPUAaf!JaueL=!w~O1yfX5p6PQBHd%)@-!tMk+k3NexJ6PVU}sMW*MV7JMzPB zcZna-pm?aY6~cGC%Cz6#T-M}V+Kl?WD)|q9_wW)0IKpb)cdy0!b?fMmAJaI^rNGRW zjW^DrQ+Ry3t!<`qoB_9|o!R4&2pgSFw;+h(Q0rF*Gh8_Cur9IEM8N5HVkzZD;58SM z#DHfmDMTROX@&=k%xP+@Q(0#=)buFu#akgO2wG&NSfD%EDOPZkmh&s#(i9g6nquAN zUvl2_+p42dwu2!8Yz`a*x5U zsVPC2dIc5YMG~9rrF}KM+wva-#@u1{(D^u#-lfxHE|K`5ZbXRZQK?*fN0z}D1Ait= z>8Eaas;nN3#_H9u?80NFn3m?&V?6%R)2=&U+m!X;MJ4K{Gos{Ej+`fiT_PX0hq5g8nt ze58=MQJH^WZ@T_cSO^bDdkp){|7B~=KB`K3)N&HTY3+`7U2nZ+32j~IV|nuH(Oq@V zv@fdlGGq~%Y;{?8r(o_rwpX4%+E&t*L;gBsYo2~wFU!8MEfDelA(;999%#ughS=Gv z;#ODkaj>iUHgtx@ws1rej1L(zlIF`c6^oLRZG18f<8WCP`h=dF)9CUt!XCUhC*oDJ zPcvmqyVb6cDGt>CRoeo-m?J-T6U}ExAF&>FFC}325Kmh|z}#GUum^sPw8AT8fY2Nx z*wg(|*h}>AmvArTG8h*A>yfVmv$@et%JoG=pUmgY?9*&5N)97o;K!AA)RrC;j?g`d z7n8rqDy4k>@I*IgoRglpxH0~k^z6lh@nA5XB2A0O%u=sOjiXOan;_qvX2%|o{7uI9 zZS8@HjJB>>WLKliJ3_VAl{(s7%H}s_eP4}if3O>U+W0PR-zd6UuXrj_6QJ&We*{<* z8W2&8w^XAY%8m{zw1Pjt@1XRSD+BjLGG8`!-vn`K#`T> z`UwR>;XlQGOicLPO(2MT?$+r@XV2uL_UuVb>D0RQ1Q2yZ`}l);)g#(nDN6yF~DZA;RYcadBXC;Xwgj)qhgQ1Mtu`XysDc}!v)yNk+9+;`SJBg0yt5ctO2R78L?43kt1t@L(ZK@$t zMVnx_2*!oB%ei$*fK&IgG&DKIH^ReI*a@*HDwxav+NQU5qPP}H|7mbK`+yHa&lf^w z^&RKh`r5$lk8oTp?@oHr9$MXWfaFcr2}DY>IuFufXlj~o01*Jh(Okt)L8W3bYPfTw ziP5=UO24FtaL6w7%Vc+h6$QZ|z1wS~7eGp1jogRp`HkQY@C-la>2aHVz}HUw#Q>5< zPghh)l+Ba{fi_#Ko)zVa8r0ez4Nwm6nIq?t>vJDVG4|?|gQuZV(xO7Gj@7zB6?Cbbl`I+ApRD>c< zkJi$2>xGh06cocn$s-+@QcjT-)zpQdSxv7yl+GXg<2!Ntn9q@VZiAu=&3Lt1h^&~| zQF^jv#ngqNS!#B0&)qYZ67&goDycit<63@IcbeC-vTj}fkAi4ZZ3S5veYcb=dQWYY z71h**Q?uGWZ!`bsSc`XVAM-iBB&*b3YP2-cH4_X2O4M3PwbW2AqCc{Y#qFvlv`1VI zS9VxWO~{I=3#aB#tykUn*h|E>sMJ0|?U>;eQOu+|?y%<_8j%&%)T~#XHeS!6f>>57 zdUcg91VT)KRYXZPStzPOYyG^<{0j%Nf9q49`_k9G9luw8%+Em&9E*}{vQSim_Rh7p2B3hW?Cnn_WO2Kk-WJa5&H zj&1Yz!E1i7d^vwTGq+zB{_-ZT2scHJkQCLBG5lSVi~01H=Cuc1%_@VpX|bhNT5UsX zbN(h|dPLj?ZkSOG1T6df7apndz@Kx-wej}N+WCxa+OOWes{B>^8i!HGXsO0^WAqj*NQO5R}tG6_+W1V9D3A*oSZ8Dq?wJ(_+ zliOTQ?0uQP=JYsvU{jP#ifYYZA!`eNR3(VAwoUNe6*KILWJ;*p9aD?v|NKXkWRpSr z?CDwY-XYTilWOeU*zA4L&$ep?bR-5xXhm~eU9XDoIZYU3b`FfEK%@)1!{zPYvpeO} zXXqO!lvLmOdX&`6^ZA=H&dSy)S{6+nPWl**4a@0@y+6bnbcCJp3O-Dp_9Qq-6MGEv z^@p8KwFDu)H$Nix0q!^?P9N*_$02%q< zy5cZM&u2iv4vNxGM5~&-wG|A~qlT2W8aLVkW#Sq)CivYOuNdTxCh&k8f2$bi;}hU$ zm~o1_sU7piEB?i5C%ny-0|5YSK_=WBrrV>7w(wy2Zbt%jbqnKD;&ue7bGh9Vcq#4( z3tZJ)?Uc8_a&;=918C?StelaG=nzifu`pw(ZflQwCn{&StJ;%vS~U}E&(K-4uRTYX zm5dTyK@pl)+!$S*f&d8b+sZO<^qoKmyYFFQXo+#aZwCd-4~@PPl_th8c}Qr92^Ibj z=A8c=ZW%nH?~$060C!*pErFAl`;UKy8AmYP@xR1Xpl&Jwszhafd)I*h(RhJ>=cR|c zzwTcP+;c4GI%F;?$~pYTXuvGTf?;^+Q;EC7$qS##J)y;F5XDti+)X7NoYlmNsh>!Q zj|9m{Ca?GVMLp(Z9;@g>-NB3AA>xR1NKT`Mu9Ny!tmV3^)N2889+UN|pQqT+aF#g2hU z%F3wb?3BBjbLlI1p@NgzeNwQGmhVqeAu8BGNKL-hJqaqd>v29Kd1O=zc7o0pT#Dk{ zcc*V%%}C|qpjXDF3C3l~Q5c6#rgH)D%o3ZZA}Kv!>5<$B}XX3z!SMFlgk z(3@iALc@1wb7pFj--ux}IDM3JDdvMi3%cNrMxxOvnr80$2{+tOh)B?@ZDNw>P9AiJ zw$w}R#?#>~30&FQGwCI`%=ObVbt%hT{extdCM8d#jG=OfLG`eenFq*AHIW^^#hlyN z1m%|iNxGb|e^o|fD7nH)VqDBh%tVtiszz|jY*hCgMO4$ah9i^lm*tGVnrQgLPI20O zhp3yn0JS|0Ivc^ncHYw>bPhrDN}uY#{uG}XE`u+r9BMS+z$uKU5Yy>b(t2&4nbz)! zv)r3Z#YM&-WNE=dmv;Qc&vGPZ{Ew}k%bMrq?W7GZ}0M+b9;NSOFT7rL{$zmvb96o7<$N_xr*I z_UEtZ%Tiq*^SCl4rnlOWTj#LF4UQs-g}L>HR%&xsHVb|CBuBO?#A^)GM&v{C- zf~uh2%!l7tU=QyLIR2g0Js0Tf|7fOrwboz1`}?7hf6-{q4bK1Yk3sy?&vE=-!sPrX z{@U=AC+X!y9q_cU?T`R+k`Jqt%a>~ zJvo0f^#pjrwWu}XHv@~oaX8J@_IG3^I_jayCS*9pm8pfJ-(yWIEq$F+N?xDAKBUb? zfm+l%h1A$1pwbq?0@`-3Yd8ANK>6zHyf;U-33bJ(vhd6 zGI?8z&>bG}Cssjqa10cgRXXgVu_slEsR5!O4(b&M@%VS8O$4kcGYtT*c^zdh?r(+& zP|;3&16yu@cgEUB#)KeeC>M%J>OwKAh3eoKD4x&a3B+mEV8PlB5x^G#HO2Xi4+Mr2LW6K;0h$Ke$k8WL1pAs0%Ia*a|t8hZ<-@@|$M8-3Y~ z>?HIU9w7J2U~)Qc`yGoA`g~I%v;eCh$9Nj-F1kV)Bt4%d643t|ym9$SnQdW#%XoQ3~j+-f2k3U7BQ=TeJu~5;TWz{L-Ky528mHGh>+#5uBR?>yAdJE&5z!d zn%p`Tka&YTVK_7ocOZwfSg{J4hdYpa(}i*d{MlxJ!SFXs=@oSHwpMLgfY0!TQNd6M zZ>$~t$pI}&884Muv^zAyva7rg-IQAW;h6F2;N@1GdJ^8niy_h)3TqlGNORrPiNCfy zL?*Q-jEg+c@EmP^g=yKaj5;7>kKL1xE#s>U;f@oH4v&!ZW2zB1R^+%)|1X!J&EctY zDC$2BZPyw*s+*I;OV4@LvuFGXy!jlpO8Hqy#4FY5+UZ8f{ks zvF0!jpaL_%Noyr$IIs2V06&^%BpA|eZB-f$UDUx0aFCCBLsr!M3}&%L?;7~)#&qSL zhAu}z{Hgp|qRdC?p<8M+iLY`I^4PO=kHsYe5?Uq$a>g>ynGwB>HwnE@V+p-2uQ+r) zr6(NQ>;f*j|E)7xL|p8mQQLmjnV@!ViLI$iL#a>n$v|flB9@f&imup*0z6F1?yE1j z2@F7=j3?W-7as{6_7Y|wA&9>=LLymroh#dxPqfa_kMp;Qm_GGk|GXv5b5ct zFzXCrZ{y;bDS^K`rsaMHul7Nb&^F4gSxeqPV=Z%swl;reL1J#3j9*`UtjQYy(Sa&lO#Cv8ETD@%Xe{7k2K_`47I;vC&V? zdj^GGbAYPckyYDV$2PtvgJ|R^Rh|*G?%c%he`7-Atn_X#Ic8g!dCV{aP#aIwhh?ZA-hX2Isspf^W~NFsK!5LKWS$^_WV&aJiwzf6B??cTYm8$?AG-_ zPO|430(vG_7krA)8pX^0HNA>#6Mp~rg16Q$C_VaN-I3a0UU<~i$sC_toRCuF=4VVI zzfykfN%0xzpItZVOP|jFYuprK&USFw3p&Xpy!{2!BKDkrXYxDr!c+U(zMxUSHR1F+ z=l1_UfV0T(EuL0=_t<^o=v7VMq^`e}eIwY4+a0-;1Qzf7K>UbL;;Q1B46!pFI{Oyi3G5CRe zj&C=;xQaax_3o!oMQWRdk2oviqH)Nf<%WLr~>tkDXb@EM}kAX><9uKmX8d2(hO ziH{{`{n+4}Ur*D0ay#OO&XgCAmCGeZp4Sf*2Y7Vd{Lb^ej`-)SPxo;Zq3WR$3f_9u zNtI+jUQfE`$wxj#j8gLzQg5~PIX>WfdhH^GhP05OSxT0cfS%lg^r_C{d-w4@0grVi zeE$HzG}F)BM{7%*wU@0Ai2TN-=!phDFnlL_fG1C)NI)x`j2=zFKN&HpeKc+I8e&!& zaKcg$v7)OM5JPmXZgwT7omXQkgG60%oc`E<(@p|Be@cwXC&zXWAWH1%IBA+8o;N22 ze=ENW0+0Z&eR<_N5=;DzV+`8|@X061W-mXp$G4vQ(qd^|Fa-n<03d)rE>yeP>_JR? zG~~nM$|Xxu&mT9`(dn(gY?t3ZquE852#ozT>STFlUo^}llFtRXwpHgas37}G|k z{~*0(Vq@SVx@^UsH5MxPxI~BRsGw7LQ99k@Sh4~>l0leJq>0+`j4XqXZ#{V!N(5s7 zbHK$j6M=cmPE7hZI@y$)Mbgw0T1;?8TaIgbUTXGzA>CTAC}a~YuvXY=2_~2FyS`XY zX9gKXEe6O_BUf#GUlTUUVt2VOBSK2vsOtte*R#4DKuwcID3|+zl_L;a&p_5yE2tFJ zl=^OkI=G<6>Y6VXztdmM4x%Av)>_E}zI6m*6om#u0dT7_9KidqQ zv}Wjg(V|NAD830u2cMa)^{D#DT3)5Iz05C+9<_aHV1wCqHOwkqrJe@OQ&wz7&57=p zU-H#_O!=YaF)c}#Vjga`9G3(XfcRrOiIpc5k7f{2`xI_UV>Yk!(1^_zg7v&occ)Ll zSxC0^%PuPbf7Q4>9GC!U@A7Ubc8jl+F9HC~Dm3Q09y8KTZGY*S8{P4MMqT4cONPlu z|KHE@7ataY8XW2hFa_tM*MW&OzjZh`cfU_qO|KUsyi0UoF1V{*qvkg2eB)cZtp?s! z8=_fSFCCE9`U=#5JmoWPh_8|*x?upJHvd;QkiUYlLv_yioAm^Y8J*~|lC^=K0l>d| zeO4C==wWTS?ZbHkv$e>Rlr`Uu2T$m6R|uF%i|dtH0q z#5(^G)V&XdBbcQj0v{Z$wN(ZoX=GeTHi``{dHPtVuAQ3#0bXRkPXE!#kBu?#7Hr@h zn1G~ITq3y%QXF@i6p5=sbsO1XMN~f93mYtGqD9FS!-7o3^$OXdCI4#UK>6%?3EwVnOzO~TrocXwR4(8X)ZK%KY63CSxu8?QpQYai&a#seqDOG0xi-Ow!3i)pMOi{ zf7SfuH{Go>o3&vCyyPJtrEK!+-bSDqIUmm|@5?i!*dsy@QRvXs$yVc-nm;wql?E>< zTFf#>i&`Z&GJ;)$=e4OctX*0gD7!QLzVFq|RqnE|R}@{*WUuHegXKOE0s{KyLU%eC zLO{z$ldZmk2G9U0kI`E}aH`xGx_-YdjG8tqbQxdqNz|N`z zo9%Z}w69T-$rZUtY-+7`Y^t#sUsZQP+)(5nw8x|BUIyVc6;;KLoS$M-w3Zle&swS6#a5b{nd)Fwtuxvb|Cp+%@0r93$#(?*mhV4vI;`Sh>!0 zWZ2ZzL=~Tz^5$u4MPPti|5I&j1{5HN{IB|P-J}m=3EUIN=MV{*t;vL zd;WjXhQD0ZN@PdmR)szIJP8h%=^`3Vb-lnT;Decvc;%V?j%<#MSvC&e9jPp=E=(q; z9%fUJTF6})-BK!!l`p&HWtp}AQKuNS`j`6)xU2qyv>d?SfGdD60Tcl22QW2w`45## zxPZoK#Cz)Rl@P#4K7w#isYZG#1{)4AWdQazLy4VIL=eY~ax}`ch{tq7Bp`8BB(j{F zB8f;AqcTS-!}5-FWhK7HV5a+D3IWEy=g%gD`~&~o_&$C^Pbi{EHj_m`@~8r&sjjIF z*~!=v31m-;Z~{j0(e4mRo~rExc-b^#vUFLl_BXX;w@L?z8#Tu)zSxnxZFSgcoFDS7c{^kDBtHs` z%;67Ps`XTdT;Q_0;4~dm%|@y?#+h4h%0{J?gRR-tKH1#;M^A__%V`jRa(2vx8y!t{ zZ+2!lKf^e0n_+P|xGE8t*;G?G1=5&or@N`!@b0VbcdQ0y076rR)gyMjMumz7)4O1u lQ5$S>zJ}3T>S1i}^T{{Ted#rw3zyf2zNoseAw0GK003f8m&E`8 literal 0 HcmV?d00001 diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Medium.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Medium.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..6089a9f6e07c105c87ad0a6ee87f412904608108 GIT binary patch literal 65944 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�(k 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 literal 0 HcmV?d00001 diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Regular.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..afdcff9790385942a0535854e62ce0cbd4ed15fd GIT binary patch literal 61844 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

0p|INYHq&6N8M=(cFD!Q~;2|P< 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%0DL=%ABs{CQl^jtw%~-J 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 literal 0 HcmV?d00001 diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Semibold.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntl-Semibold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..42a2556f17d0da41db1d3e68c439e772e6ce275e GIT binary patch literal 66512 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 z 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 literal 0 HcmV?d00001 diff --git a/apps/examples/striga-grid-harness/public/fonts/SuisseIntlMono-Regular-WebXL.woff2 b/apps/examples/striga-grid-harness/public/fonts/SuisseIntlMono-Regular-WebXL.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..894e802874713916136ee28874493f60c60687fd GIT binary patch literal 17284 zcmV)3K+C^(Pew8T0RR9107HZT5dZ)H0Jb;)07D`G0szGT00000000000000000000 z0000Si9QsAAO>I-mpTBC3Z^Pb~bk;j2xpOXFm|0g9KGB)6j@&Be;Wgtj0 zC6{H&s0%p^XRSmg)Xj7#r(?%@jX4N`=@IhjS zFcLSqWn^zBm#E0ysG2DzUyamEG5Pwosb&=$fs3PMg)1n3w?9kgbRW>1wkmRNt#9d1 zBOZLL1d$HuF#5QREx%}IrknH=v}AyEB>QprS9Lq^McR9<&8P{rLa7o?Du(+)tk(c0(LZu7TW5vCJ?^D)R-#sjl1z< z;6&tLBty!?31qUjn zSdXIp7FhB6r5|bZ8}<4QvES&A_P@1gO=m)^BW#qUf~u=A0opM1`ra@e zk4^&pOFj9e3je~ysg?2O2j*E~{zM$o2HhR+R~{0PEGkg`f4WcK8|mB5y_)@%Pns5h zIvx;sSNo$)wDE*t)JkoLp=b;R0Lb&--;2+0j%Q{8KEAY5*jpcOAgw4ys5eZ=1DNsh zztLCv1h(Vu0TY~XQ_2>l5Qdmo5a6`g+%JfcDA#2TDPtWw8l_WAIvm>KaE1&71VrY4 zuFM8XkOGivg(FZkw!-C4CfmT$PfE#RQk%oI~3MSwC%DJf=3INP#gPz16L_?|zZ z&idO^d)A$|_kT-Gsz0lZ!*WVGywX?>FxhDYhcNH%jO5YmcwLkt%jHUw>*WYS}7<2JUA$ThlP?bm={2EHBIsVo$N0&aRnqrgs+Siei)PPR&FQP(l7bUd;2$M2AZ$8hKrOSVGt23B0)rK_s{k6 zxBS_&v;&+u*4Qn{Mv%YCGokx?S3PqkB0zo{KMBGN3Vae@*khR-BIe#yF)irx};72o@h=3fM5V%@@1xai9(@W7{RY+I5$do;d6BzU_O;e2c8G z)<)a+o~z5$UVLo7qfWUHzwWnEYP8b;Z_b;CGjINrH1G=snL zq)his@WPv<$z{6eEo5a}KkuH5$94w5xvn2~K?akcork*{kYRhX`^n&H_q1H289G<{ z_)Zpcs$1I|t!{m58f{hU8bKq?{bH#1C`X5gX+v-+P-=hoRuW13_{6Sf&|G_(kNh~$ z;ug=mt~!|vqV{9lI!*Xwpb8xOdR3W}H>%SCOgD!#nwBm>>2Pkp+F?8 zSR#^&WfCK4=CWgKq>#507H<6vvB%cGOesl77?=Z3m)>FCO7UORi=ICtx^?(*K%>%q0hYEKf+QZF_6TDwYR z5iN&YcmgU#^ekb>SPG7crx9A6I2lY5i_E5QXst^hJw8Lg%#bxiY%xc|mGWeKxu7e0 zWgdiCin>aymT08e%Gyq@R~Ud%*-olvwy3R|+_d$sbLgE0moaZsg=PlA z;hPF_CT!0|7Gg_DuB5HCtTwiCJ4No5&4bDjIw5DA7t**=H|EZ}N3TDHm-JRXI=`m& zv;NND|2ekK*W#i8)bSM|Ywsfi0Q?|}0GEc*KQPZP&}%pqjm}`Q*c>5T+_DMfQ4FL+ zsWRojAShtqdzuUh1q}lW2akY=qykwb3Mv{p1|}9Z4lbT5d;&ruV$~$1YSfaEQ&3V- z)6mkF+J)=SjRl-dAtVV&B|tWJZuQjKvZcCOq73g*l2i(-y7fk9n)^48t-qI#<@1VD;` zk_{3t#8ATwHp*zgNE1ymA#{Ds(WjpJn=PuD4c2SI_yB;WWG4DfzBsQ6UVDOc&1(68 z5AF~Q-#E=XYW3``*}>USZ>qQDz2$v@sLHFdYO21vu3mG$o9AfVHwd>VZaLhFP2QBv zx_O^Bk~dM{+y}mz#>ptRtpT!4q6~TSKnAD4DPFfr@YcOIz0VO=SyfckR=umLS3u*4 zbQyd#O(wzXfd-=iz~|r3djLLtzxS>UpB}~5a=?(y3M|s#@ zE_RlWT@_$YMb1?0RE5|V$hk^ftlarZeHFx|z%EqgN-&p$x*EdQ!HtEI4(Voi*TcFN z#*J{sL%SWxohsao>|PY#ROx3EgUs`{s@@ESFrtw!w|D+C(gUaH%3GDK|Y(6%b4}MMRkL10^ zyZY)KL#4sy>_?Nyl~?ki3@+V@;M=PFpRS4A48B#v1nG`%Vh)dmC8a4pt1 zp$Wd)_!rFBzrbPXMo<-8pEqYFR7hFIXet8Bt)F?z^9mQ$B*q{KP6@wHL>D!o(JazJ z*v#(CGAYqy4&*eIFd-25-upmjlMC27udg6|86jW}qTsVZ60T+vnoA4hCIu)$HD(c8 z+MR8NNQ(*v0H`mtw`(nHnqC2Ak%jhZ2Y~DZ_~JI;`(*&wHN6`5K#6U@L~EYXtjbSb zk&UKGS#l?pY^CIHq{_vB%R4I(QEa(rx`vB1=txp~zNQHaaGEkrAXv}U&bufZBo|x0 z3Q_gP64u*HcZivx$*w4=WO@<_gkaZZv?+=i46T$>ECvdldw51WQt3R+0PWh~#yVZ? z=tx0jC}@K%TLxi zRuvAmA|EZsAs4;tYPr%n(bScZHg0A^_m1bxJVJ891>4TN*e+6Aie&3$LVREt}7W=*~ zIQQM*OnAMu*0@kAwi6r?FP`WI9bbDB%eG!6gP`fPs7gTyr7SYYT~U^8z#zh?yf<4_C+I@-6MrA`w0bLz8`X1UYA zmRgH^W5K`7hv^}gJqo`_>qy}T0`g)yKGu#dG&t;>7DV`!8QCFp6OV$IXb=KqTJQoQ z4BB#DIu9%dPu8KDun_X5K>}Luyx`|-n0f$O)U%}Z;ty$DR`;P&?>KH zkwh6m4#UMaOi&^Bz5ccp_B?QzA_}nDq@aG;iL-=UWTO2}8X0>u`olC&Urc&ilo7dl_7b%e*4C`Aq zZ`JkG4L&-@opMKDlDFVq4yS8on?!BiyIPMb^|3s%bT~iu35MHje^$#LYU{V|4l#UK zb~kdDc4}pJ*W2B9=x~eP*{it1WwelO9)CwsW&jZCGHRX+C3RQOcj(^#0aAuJGi)>w ziHIqrW1b#5hJ|PBj#;d}Y%|AZbpKfmEWdYpj2cf_C(W@rX1M)4h~%;lHot8{<B_9=nEvyx~$w4oEQcBkGs**xwL7&{gkQ z-h2Hx+cTe*5fS#jZg5mEBBQ2KXy*4j*0z*<1kMwH9MAv^HL_oI44$!BqjuY^pA0f| zEzr=LOcxQlk^+aJnN4zfZl`<%!~Le)8av$XIJWdrKjt+OYlEU?^YA|HnY2WkOxq(& zi=#{jU}8b8z?OCx5bNqDt2M3)J$&JG24j2?jH6Egk}At?|TljHDl z+$~&mXvI3yTn%6?sAh@7#t*@}6A3PCG?|PJU_0q*Se99K-aks(U-192JQ^t@42TC+ zp~{rRru-1?*(MpAiD0>fwbD*o!6yhPz+*B|fSwXfcH3um_Yh#=i?iyg#5Ftj{QSHN z&Y);U1l0_Xms*Yj8S3PXB&I@vwvW%bEDx06(6w^5{*5}KZe2fasu^d{2bHaa1^ zHyuCjU{}KuvpKbX*Dqy7dD+CK$6wZy6)YV(vNNL#9Bv%}(~dxh5!B}aFHsF;o>)S4 z4`q=foE$`p!p7rk46&jpVEo35SdHYsGPuZFYUv<$^mFvW>IZPFso zP6njOYnsUjot*%OXWE+8y1be}uyaBR9yu}$~qLvZL&&v|pJdURmlQ7wG5@$=J!zL8Jx|=h&KU$<_#@3rb0ejpFRz zG(mxae^fKAp?@f^w9d(m_a7q9MPE@dy+D9*4xI%fc6?7Lgk23F{7-p5L6p%V$n7wl zH2KUHK8PSc^X9~1I6dX@iJ$XYR7Bp&nfT6qNI@p2{ad$Z-52pACPl-3Vso&}ngZOF zhCo?G%O)8Vjl5YpnU9<}X^FbsM5D=5T7GFc0K%jRa{7)KZ>1OcG3G;1aP63?_N?#3 z00S;=cXD!1NZ03K`)_*++UaUw5QguwItPyB8yuGP8G>|)xFiQ&%qX!Hl+$T?Ls!iu z5ZRA{_4Qq|!!Ni&&jB<%6GK>!PT2Wrns##ibMv zgT`?Yg(-nnn5A2}GcT_|+qq|G4m@!{ZV?m>(dCGY4Up3TXK^v}<`T<}YqDmkm#rN`Q5CEGpU2O#Uj z@g2YlC5rFr?In?X{jS5Nu%EK~tb|XS#->3R9tb^8Rhq3id z#u&l#a0FqrtXowzB2rD{=Vem?cwpJ=oI{ps+h;dYry&>FxonH+8W@9=hXJm>oC}9k zv*;6qMFo__ttk+_q%tdYt_YL~2o+H2e4iHjAl`9{F);gXTuK}MQ5^pooh*BQV!2h= z?P-#Hq_Dfis}`rTSuR;zq621+%KHJ6ih-hbZ!rp-WpYE`Odyn8y0Q`e%)OYnuu zHnZaAohTVF>BG!pn2_-Z@^=!PUiD8FU>VyCDT|5nMT{v}#-JQ*NFfoc|{KS`G zpGL;j1Z4UR1?q0UU)MsMl{;5HxGXH?%kEzG@a71U@`Z6NKy`eayaz|p(IhS|4Q;k< z+aH=BPkibWcm|P=PDEhMdpOlydRPdglC+HaZB~p{GDdO6N~N5}f_-{e4bbnd!|9j! z9=OH&C-6)xXAEuZ7q08|BXZ1X$)32bXzWL>Rv+bug-g||G}p?gV$^~Tnr2b9h|7+i zSCO&_(f>x!NJpRRCh^xwlDp-uyVbjHEnCg> zPAMb#-oQ)A?}xUuG|DCNh^H(Y9RvF%1o!1mwPm_*D%C@qc+h4y55|G6d7O`+bz!`1 z;JT_qqBLhq#)%i^njZ+vK14xiu=_qKc8~d?z$B1t6%h>1!RlBQoY?(Y4>yBl@C^i- zz+E2@1bUTle97lrSj=-;8xaH3-^{7gY8+f4-@Y~0c6lDty)Fdg`%Z!Ox>TrZ-Pj+d ze%D886tk9DI#%uuOfma6kK!41`fneSSkyjVpu;o&g8%Npk5QmrzkH}rsI%I81p007 zAdu7Ek+fAAQGdaRcRUhx{dr6cV5^0v98x}dSY#5&9q%{Xi*R%EAk%uWnjH3aH4$yM z=MVbubCH8OtR~Oy0qiDFZUhl=KL~NPK#ccq3HeX8$Im^99i<0*?2q2Nh~;c-laGt} zYVzc@8O0d+<0s<3-N9HPb=q6fa~;QlNV>fzszbbJoR zyvBn1+9hz8I7o+Zb(x_FI<@Wdyvc8V1WhN!{*6#oC zadAJ?yXx&;jVfkysG=He={U$ma;Bb!m53DrRy9M6NPhZj+V)#InWt67?0aO^YHlaH zDyEiTY1PwJ>gm;pj(_ql9fVf6iA*Y&b@%+&fUBbs&u72Hp}#5phbnVM)adS&gRkkc zU2sr}{raxn8gpfoC9=A?rrnpHR2jKwIrl-qzp$3SCO*q3Wj~~z7ZpD5`q4ivUGi^D zI)#jbOwgf+0ac)sZkyt*%%}gdwMSKxxXL?n^L>^Lx(%yi)C#7D zQ!_hM{3h#jt6#IEFWk|X<5wx{(wM#1}J(6h)Co4?L<#P1&4TF`my`QBJu=mPZg5fO2!Z$1`==Jj^D2?t!|4;H) z*HqSPYW$eX-0q%zPmMOe8r!%yNF>w`G+}W~1NA!=P@YnC;6#42PpD=&@De%B$LHXE zGF6~LFlW{$yG+QHvd%`8k!wWRU+ozil=IB?^nVr=Z|V};F8cn=So6dPYrkc8%TgI{ zDOYj7$_+n;Rgh`aAPseP>rM!_!lvfeBde-bteU?9xsaV(&!QwdoRG1KD{eS%f!=MY zt#uppdY9oGt;?eRQfL;- zGO}!HRsIUm+*u#LX+o@!O;t7=6EcdH+2fsZj&kyw-J@xW+h-0>Br0oIzI*x3XvSSj zu2$oD>G}Pf`=uLfew1-H`bBmE)%;Uj_)fW8b!9C&CRW>sY=Ms_^Wvt-YY=S$hlR-@I*KOt4Ta0dH3^}vp<>8l zV=Q(iJH-l7qQYpS_Bo`G5LwRtxS^cB`~tcPC&Pkkre4A_YnR27to3Eg^~vwk$!+)U zv`2NZ^fkJxKtZlh@p*(g;$yBuDJIzzTo0K2UC6g)ctEDEGAwf~7Rfm>p^_n3Y?j{x zb-&&dQ$z)_7;4yAhg+nG#;W8@8}3JnZzyWf8iY8jd*u>kX-lQyDFvt2x@Ds8TIyM? z7Jfq^7lws#x0OY}Y6E>~UVw``MT?r6iacjz0p2_?ChADP@3&u<`lUbG{qHO1q!0VU z*G+ztJ}goVdps9B9*RL;LB}3_4%Z36yZ!(7=(7BOxR?q}LLe`U^I>(gu}YnsGqY$) zgN3h6*3rkVh4m19cs9v}aP5KgMgM2m&-@RUfq7E;#~F?Nt!xW=DatJjn?(9r*gIe6 zu~&orRp)v${hc>qFTdznUzHFj8nD9-M|l;ogg})|A43|flpeoh^`b?NHGaQi?eOri5K+>S z1jxvyxRol3%MLmLk~qQPv5+q(On7>0HI26V)>DE={@@Z%=EN=psm<+L>zKBjc4jn| z!E3;&P#R~+^f=Az^ZQ91?4z)P{@V_ZeNde&G|(tExl7~wa8%h=+V@jEVeHu!3T4Za zF@j^VOCU!vkqRo4sF!hEFgC?ju3*zlt`O_i+i)oKUtbS`b?ggm;TN?~@8fkmF2O42 z`;a_AJyumi_7FppbV0KQF5R>gjSxvou3124P~S~|iT`GQSnyu@i>h49uOlUy8(+(< z%ikM*(^fuBXsIV@RY8nU2kCb0l~B{keXjRi$%pBL_{-rcLs*yYclIh=1KM<$XRx+6 zYV&7aaZg$Q-=_IG1E{uA;K z)8>UQ7MkzP7rnCoodkdnPtL!$a*3;W_J%i#mK8^l^zssDP=gR-v zOC>*xB@0sKLLHOAc;r9lVYQ#jLllzoq8Uu-j3;4unCC({u@&Y8EW=)QXTeycPzB{9 zNd`80#TmGo-*om&(#VlAEJTqO)2L9^-6PUk2n?x_lK_l?v0&EODzGUkKx$Mi(Wt6f zgA_!-rho~@G@-gNN__nsrIdrxr^=07Zn-I?N5PL3Xw_j4NqNNrrwct~sR5m+kzfhUx?2w$i+vGEk^QYmg|gdIQIXELId3$7i4ONjPGW*555u63Yf2g5*{GK@&1_e*R)S#8$_C zN4_{{sNKa3!n~pz<0PVY#>I;(4!e;UwhUD&LKoPRS>}6oSkV4<4j*h>nM9+LE5Sy- z(u-8-Da{(C7sFswtVYR*^jW^Dn=~k4SP?5K3HT>?Hkeh=a@bVx4XT?J(kXckLf4P{ zPojI#t?g1S)f3nh(IPae=AM-cp^1i|gGMBJ4kuU_Fw3LfL!VpU)!iL3Y7Kobv_ytu zlr~2c7U2(y3GoOix7S1N zPBU|OL*y9Ln--1yw)d=9{?d9MwBDl18E9hV=4G41r&!}>;&Z5yMvJDOXWeO?KRlE5pmcOEec8`@if)If z|Gon?K=1yo25+bA`FU9hmYIP!Qg-3@hVSz-dH2J6@w+HSJj2ZLwx*d5CUBq)eOEl) z%)C?~usY{%(K|V6NT^KZM@V=KhW3MKR^-KgpniAsW$Yl@_ z5rzO4kL~NSf1t%EQF2`Uz`Hxwr5qQD+^`xi8`PlYx)?6Jg~rz-qGACe!q-_DWzOy< zzakD>1?yC?-u?y{*1H~Efzk4g%XdY)N|D7k!qpiQZe&=l{8l=RqVrkkM?AR^7>bYXFGfq^!J|H0@|*-q2Ws<=tVPQ1QQ3pko&XuixQJe@Zy%2HPnPrpQsRtP2ZrWCh~bW*KH@3&9+`HU|l>O)_p1SC%?Nm_oGqRp5@D; z9g`3Lpw>GLdb3^0f4QgU;4(P=sz7ipaeP*_f?uP!mYbz};MhtfHl4=92KPTKDS!39 zbS5{Ei+l_dGiS(>$_b^Q&%nqN6#&EI&M^gF7MJOwd}k`4b=5NJaT*mK1sy%88dOid zgovOjeKh=I;N6}knkjc*Ep)umjY4Z?#L=k4bj>nwClfj(W*G*%`JW9IvkWMO2Dgm6 z$2SKzKc_*i^|^E0`qEV{ky*f#Hct!7uGUhkW0t8?IY=Y|@oB!kz-j~(k8#H_BsvXJ zUFw&jHoyoyN{!K`(Li%sdXT99m$=K&n5BDXq49~h4X&|v0;Gt^*EKCSzL#Mv%0}`7 z657oZN07B@PaQP?3mEDYY%*isBn2iPXJq*2H$c48V|`ySjW7CM7*AwAh2I6fU-0GA zg7S7y;pQBZo!yr?j;dcC6cW18rSwNFC8aMH`<{Lxi2di|ykB@v5Umpcf0So+;c)X< zoH@3$sd{#0-;e`|bPO%3Bri%o%|5_6-B1a8kloGUjMOOCv42Ukg2^rPjaiachk@NF z9^E%(?`|Bg{g-iO+u2M+Sv7e0ASXyCNVZh-j&Rw^MxMgDh4l=;9WRtupKxS0Ue#%F zW_2cJ2u<3E!DrLUX=V6_c+5N`!iL|pU*eNo$mp|4D6(`Nc`j9^5CRMoy+BdvNNm400DD5ee7X%_NJ2$7^l!Hx-k7?Hu}>3udW~PANcVrKV!o@;rb*t9lh5u zG4v=6xw}=?_-lmAn&EkeyLH$JcR!4O$u(3(Nfj$s^0x z{uI;VWqAbh1F8#r`1~472(6C%N@A#}G<#_(Q(atfWL9N)Mc*`cj@j!6DX_!-N(h}< zmtpWovUmS}l}s4Jm1K-Op?~<^jq3)wM5?CML6cG^p+{~Dl7y+j74u}+xI|q?63waU9vrAQ;V@D6L?{C&?T1X zbAZ9ts7?fOYbqUu`^3xpLa{;NkGmi%5y42cTKZifKZ!yYJu|DYtEaul?~!JjO3y%v z^x}+SDKI|(ItQkb;~5TcyqHcHQYbx1Dl30pHy4URI5T|4p1Nsc?R*m-NvND4c_v`B9LsBkCcpf-5;Q3D6IX|D++f(VXJ>AXRe@#D@-$S)f95*?tNI~ z)yg~n1Rb-Dvs)Afw!atpwMJ6^s;)G6h1i@t?tsnyx2=q6oBW3ni?0;6A86Ph zBgKi;`SCFBZExV{nKG<=Lwb(mm}hXxClrQ)O0|Ph8R~4nOpnki!dCZdW{+RXOk*%7 z=`016Y$%S4#l;D-NkL=kS;Q&P2&s+9#5G2v_!MC~woeL!FettZLoeoB)Op)oZ6E&feU+#kF18H13mKlN;W*s$i|nnw+}Olrg0 zM{6(g@#GGSclGf_&bY%Y#IkbYkyroeDwOcTBLynp3g9hNLHOq!fH(Z)p86UQu-#e_fAlsns6YBA7 zk%7RIt`dNcqR=VgAa*Tu;W6CNx_m#p0lN0P1*m{@?*!wu*US~R3`_8O6E^yhd)Dp% zp7S(nt`l{|?#LRh5SuDk=QWIBt83aj|D*Xq#yYQ$J=NLsL|vS@y`;7T***KD!Tstu6Q_)F zI8h2Q(<)#Wc2cAtoeY^Dg1Tq*$Ar!bv6c{T5ACCq@}Rjsima-5M&IJr!JJ};E4)Jy zO9d2+lWN`hb^lUi*K;BHIXNePxMXgQS07d2${||Ww0Q(P;QlPyfT_=*npfIj!LNS% zD)3d@7=PREjas_Rix>+IAO0LaVjNM2(|tcpK`U2NDXX1Kn3lPYMw`LZmaIyLEj*b= z=5={Xeu_lQRo1HTJM8!pIrF(>Tg)BDZ|3kWv%jmm1cVQVsXikm<}Nmkbwg2?LEAj4 z{11|qNV1SfH6)@{UpxXTSzBDZwgfZ+p0~C1b&__Ifq;=;NI(C% zr&RbbUKLiBsBmyr;--4e+tD(ot<#@-C7)zaXP|x5lANo#uz3(}Nh;-zev*k+Qq^=q z`r_RspxwpA>&#>w7~+&v2DO{yzww_kFM5RB8|6rjp{FO@jbumE66P7pLlM5(O= z4nTu2hZqd*ayo1Crn(DSW5@450G5Zo#)6q;-MbM*?e)4)c9|qOkAuNEROY;5fZWe` z?T&MK?gC>fz8sm0!h>6ETMOdk-pzzJ_S8Rz;6&+*NcTYzSixA7aZ;hEMGRT2^hc2H zfuhAz@lt|@(r1t!K;=2Dq+qA2|3{oO_OT+}o#33>Atw^TUQ?voqX@+cNlN#QtFn~; zjJ&YjGCI#JZvnikC0wCNMJ;D^g37;3`J|2!oue^yEc^7#3){edzBIu32CdoEwalzfR#ibkW>FX+S>7Z)JDobB+z3oyj-1~vROXsp03ZLb zNA!$(Is_vnD@!JORFQvDy=>gp#eT8>|B?G<#nKZ5*)=Tr2hgBw^P1e+Rhy{l(RrZA z{x2m<2tLwn^6bB}M6DrK^k0m?1zjg8S-7xE1j_bAIpnO4O1agprlh##FhG4JU~Hu? ztOP3pj8XbDRl}ugh6LF`qasw+aVEUas%Qz@Ni#Yv3D2?1zl;ZkxC0!>(~Lt|t>Vh5F3sw0cUuiQM6u zP4Qv>vryCu;M|!k)0j9Q8cENo&noxUOyu3R42Q>fCEKweg1c&Y=(tS(H75Pddqe08 zOK8y|Cv7SJ`hpL?2x!Sr{!O|&UjGG$*WVUt`(;(&o0+kxC;+$ykk2e=qQfoBa; zz6ZdV%44GD6!MP-c5-^aycTYsQ}`h%w0}`Pdx)*s2a?lwn^z5-qja#t6P&{@wQS{= z`%v_4hOyk0Jne!vEdQNxxURzPgIBg3>#q;~F*(1>aN!U4KfHM9(=^=O%>s15|7YN2 z*X0DqBpZ-h28K05{Fu;!Q7xLky%6D#ckrV8Afzp#WY2p$ox}G2F}U$;O`=w$h>w zJcnF}XpBkwNels3!hm5`rvO}KT!tZ*OEAz1o_hGH2Cn@i%#(faproDbNy9@ST;UsN zdqN1n!+3M30G>F;dNktUz@!<~A(6OislI#a3i<9E5B%4k;018AUdjXokCzK7DbVUT zcs(!~+PI(fGXdNqa6X=Ojm(3NhSlP{5YP=q1U!X$JB$Zt2k_9Ucqw28wO>jRF2#P} zJNWe?01p8XH&Ib-)FR8sagP)<)sP$oT7|<}q5^nw4-|>wQW;q)X>osh4-#D1(o#R=qoBxH*km|h9FnRLL5^R7kw$G<;fDcu?lwlg*=?CBk z1-P^G`A*y10JV)2=YV{g(^Q+usOW6+4YKr>CFXa&dah;}M6+ZDFo z;CtX1qGET-jvv)8UCxXczGlT2PK|517LML-=s}bi_45>t{?ZWN_Gau=Zh$>cZT<-4 z`-Zfg>TYn~{+gp&3sgK|E#TWVfcxsb*Xl+bqp8-R;~1eQbM*v^!g z&}argLK1#=X_$+gm&3%Rz+wT8o&baE`VfPL6oee*-J)K`F7B(AZHnyeJsF%X8QWv~ zNET*ra9_S>)q)PjIp{t+clNrC%Y(c0iEd(M?7jpuel~^fsPjaM)`j?Y}1+WlC?t{B|Fw+{utNitU862gZ5246p zHH-kF)KV%U?^t$L25T*~F@<#?MQ&mMFu^CGR0M}u5(vSY19sq>>I5|JnU)=Ak7t$G zl=CO9g-@EMr5xLnL5lK%?84m?Zc+&B9KZ`9Lb=Nwg@eSvILd+y6S{xYCp@P$0FZzr zUeYoUv?RXm%OcHaqwOXkg>0s^5JLiZ4u698UI1{&rhG%XVh6e7E_7wAE^M6Oj6qHd zgC!uWj0v}SZe%q^+F)pTgB<^jxbZigDRgdBf*@L>jio0>(J5sW&_v}0#4qHSQ_IOrfj)g}tTfw<=0@nEmH2DPs z*B=d}ps$sTxf!tWGU8j(6rJ!0J1w(&t8ug!rnm`gV!VJ?p6 z7}*Z*-5^0zXK$oj@SDU?`v{_?j~p5Q9TJ-r>xxbbuRwAt=tN6t?A< zHHpnRsdi24;W|~?#rYyZB4Z!87@|vwI32YCl~QBX%N63-j?x zj&vFuBTN8uy(@`4MPdoU;BdS$ZNyCA30jXf4V?y9^3Vr&rp`*HoPx@vDpoLxZ0E4; zjAU)GIWIfmuJ`_I&qmB3gzHM_mBq$bDp4WwH#DfmnL_D=lve4|LNpSk^O=e)T7+IBmNMuKQtccAM{DJKa0X$EoXy~AT;XzY@AsjTk0Pub>wJ6vI^88vwb0hsR0+m)K%eFYsmX0~FQk zTLb8`z6}%uG!&8K>e7xCVo)_@LOiX|RIXqbPcTez8=D#6is4hjiva}?c*2<~a+jQ< zOj5cu)d(Ih7|KRX52Ccg9YiTwDo|7Mo1rlC6H&}^^I%Klgq%=08x-{zlOv3ACc8_r z=E6m`Q8u;Ot*Uh3WOPe-y=o)$HCaJNlF64cI-2M_%$%j|5sP#}B{M@Jw91yNvzL`2 z54j)MX0o={a;77r2N|(_T`cl_TIj3O)rGcPq!Ve?9?esp^8LBbfhZd?28_cDgJjGn zvVx3Z{-(}L=Jz)U&#h9+1GqCtB(R(q_Mg-7Pby+z)AaSPfQEXFObMlmIp=4b_7E@VW7vXs@! z^~b|!nNAe==wR+To5fc&$vHMibZ%tuiN#T}nGXzk5({vw(`5;YqHv4u8rHCK;~rM* zE)Fadb5H$v-xNH$1mu8a>PHsiYx{u@_{ky;(T?~awzb(6)M0{7Ga=p zmaRG{9*;nOhM5YB+9>>+^tmqF$Hx6NEl3#68SojQZ=qyJqy}%9=Y+#5Q*x-mcUh7d zx)8f`{O!ld6E=@8_V()B&(yNdfvVrdOfKYLH#h^x0Hxuu3UP6rBy6mdd?+o8V#G>8 zPl!kXpL5dig?CnN-*}by3yA7YLLQbUA< z?3HLTr)(8cy!Mckg=I~92#M`@2@jvLJZelWm7p}-G;LN>-p}0A?##m1J-hx*XCWBw z@DN3eJClm1mF}zbEv<(6aLG#PkaGouI7R*y;H;=DjgKo_2ErFO6;d>Yk`G*(!fQ*j z+PFc8gsd46Y3UfR1ZgozMd%iD!zhY&&NDF_4oAds7YpFj*TT+%9jHYJKBQz+P3fD) zG6hTIto)2@?d>4Y`ZFR+4LlG1+{v~)@4kMSdbk#Za9XN$t1~f-0VYP7_Gq2e#_!e9 zE)^6+g6uc|W%pZzB6KRS)$c3?fpnWYSdY%ENM02h2im5*$}o^Pp$rRJ2NzL7lcXA^ zC}_>(22%I}c#whhL(`~(?gObj zy1oeba&S?QU9>5=Kapg4ry%S)rotf}w?Q9;P-$NNL4M;-uiZ6JN$4*F1@r)%=sd@& z4zunkI`jMR|8?MN<)iS-Ig5OU8}t=cvw_1IrQUca?Ett!F0Vq1VD2`uE=n#Fde&FV z*dO)?t>#}u^SBWwM-%&xtL$2G2WGmVQ#6GNRmMlvl@_2hsJDLvd~m6x)FNo@lnGTc zdz&iwn4ZOq7&;Gzn&|X2&V)~%IMHUB&B+Lw7LSZPBOs9t;q6Ma5hF7PS=V%0FccAX z;=tKoAOQM(%G`%jtMfm<(b`=BI5PO_lykqIcBFrsk85Y+0N4-!K!E>d`-^cvj8a8iGy$(cJk2J7COL?{4jJ6w?c{`7nN~#o2F`TO39RFGs)IflXZD$3WuV=Ja`8;_ntuVB(8G|qjpCwzv$N! z^WMiR@A3XcP38jZ^{qBY7|VHo*XCIY5i#emyxbNX=Ja8yldfP*?ZG5B){+&V_TAr> z5Q1u3a?mwYn|d&bHEt<|=6)@i+g(zKq1M(qnQXJhkLb5jjBUY9O2HZ_cim2(x=S?F z+C}YxHcd;co-DbkRkJclmnPtT3jVc!_0Vh;^Hu2D^d7F2^}DERty#NhLsMPcrn%Xq zC1mq#@>#f)C1=$o-w)4Am$7_~)8T{}aCy2lqHZ;4%Bjp}K5()j!)NjmM%j5-9i=Rw zGM21z?(yt?v3zE6HFCjS@!oY$JJL#NyRj#8)$EqCz8~p$lP%^V17xA5CTeEFm!gdh zkX$Xx@9{YG2Ux4{Q^qRBZB%4IA3&6$P6`t)Q8ZU@&2n{)Sl3`lcTJrwcP(Cja9i9E ze^mxuu3O)%pPWsgW2=?dp;NDvW{sM3vl{==!k9`JoN*q+{aHL1PBS#?+Was^onD<1 zlA>Y~Q7h^E?Rn`SLJMQWi}hiSfvSRL=2loH}%hBTkTTAijzG0}wm&T2MABL>YR zlK{nPGT{k-Rkx^SZRnDn(xmH(Fz;T7DBq^*`iIF(>(?1vrAmNTZ$A4E4l=+|N&KnG z!VD==Z8F+jLk7z-$viWgfIt(GY=q}t7-Wo$Uc+TSn{2*UUV3f1MfN#uueM@VXz#p) zGtT+S1s7fNT+&sSU9pcn?kB^XmiCL0f3$CXZ&+8&TD5C4#a6vc)hVURG~K3~;e{T3 zdi9%Wz~`okH_L1RPy?_0i5~jF{wA@q*l~o=%NYG%x zLxc^D_O9`YY<03A2q2#XKxtVk8%1 zAJkMc^J#6XojwuY+1`&(aPRvRjXUm+OcGPvqoFrhBmgT&24FG+uGiacDCzPTbH~nDaFvp-R^03 z`sxQP$h|e)PF`BU$wcxbfP8t%#7K_M``XDGde=0Uo+tgS=&z!MjVS3pU^q$y#|7SE z1Xj;SS2QtJU9v3|t76qW(&C2aR%>J}70*9wCA`qrf=~m9$SsxlauXBLr8pnND3u`R z&fGum*IF_F<=LPhPm#8!Xg5lA-AY+5TC!#WjW0E*HGpo#8(aM+nF)Q;3R7hIGd0|K z2TNC49?RI7UE8)nyKd!p-2hIiTk4+u`Jf%;$Zg!~I&S0!qHpbb=>m7dG59=z-z@O| zXXy(`o`MYEPaZSXVZ2RP)C49D$ALzwRuzR`QyaW|3(#jAZ~#`IlC`X5BO9l28qmPb z(}6DD!(I$cY@*4yj$@D zPI-DxdBMwb#c$7j)luIPz38BW0zFuKh9`XHKIId>J@4Wp{gm+efWz69!;p%&Vw1Pa z_Dk;S)KY-ggiYhjhD}g5({}); + const [credsError, setCredsError] = useState(null); + + const [customerIds, setCustomerIds] = useState([]); + const [activeCustomer, setActiveCustomer] = useState(""); + + const [createBody, setCreateBody] = useState(""); + const [quoteSource, setQuoteSource] = useState(""); + const [quoteBody, setQuoteBody] = useState(""); + const [quoteId, setQuoteId] = useState(null); + const [fundAccount, setFundAccount] = useState(""); + const [fundBody, setFundBody] = useState(""); + const [transferBody, setTransferBody] = useState(""); + const [confirmCode, setConfirmCode] = useState("123456"); + + const [accounts, setAccounts] = useState(null); + const [stateNote, setStateNote] = useState(""); + const [poll, setPoll] = useState(false); + + const [log, setLog] = useState([]); + + const appendLog = useCallback((entry: LogEntry) => { + setLog((prev) => [entry, ...prev]); + }, []); + + const call = useCallback( + (method: HttpMethod, path: string, body?: unknown) => + callGrid(method, path, body, appendLog), + [appendLog], + ); + + // Keep a ref to the active customer so the polling interval always reads the + // latest value without re-subscribing on every change. + const activeCustomerRef = useRef(activeCustomer); + activeCustomerRef.current = activeCustomer; + + const addCustomerId = useCallback((id: string) => { + setCustomerIds((prev) => (prev.includes(id) ? prev : [...prev, id])); + setActiveCustomer(id); + }, []); + + /* ---- State panel ---- */ + const refreshState = useCallback( + async (cidArg?: string) => { + const cid = cidArg ?? activeCustomerRef.current; + if (!cid) { + setAccounts(null); + setStateNote("no active customer"); + return; + } + const r = await call( + "GET", + "/grid/rc/customers/internal-accounts?customerId=" + + encodeURIComponent(cid), + ); + setAccounts(parseAccounts(r.json)); + setStateNote(`updated ${nowTs()} · customer ${cid}`); + }, + [call], + ); + + /* ---- Bootstrap ---- */ + useEffect(() => { + void (async () => { + let loaded: HarnessCreds = {}; + try { + loaded = await loadCreds(); + } catch (err) { + setCredsError(err instanceof Error ? err.message : String(err)); + } + setCreds(loaded); + if (loaded.customer_id) { + setCustomerIds([loaded.customer_id]); + setActiveCustomer(loaded.customer_id); + } + prefill(loaded, { + setCreateBody, + setQuoteSource, + setQuoteBody, + setFundAccount, + setFundBody, + setTransferBody, + }); + if (loaded.customer_id) void refreshState(loaded.customer_id); + })(); + // Run once on mount. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + /* ---- Polling ---- */ + useEffect(() => { + if (!poll) return; + void refreshState(); + const t = setInterval(() => void refreshState(), POLL_INTERVAL_MS); + return () => clearInterval(t); + }, [poll, refreshState]); + + /* ---- Actions ---- */ + const listCustomers = useCallback(async () => { + const r = await call("GET", "/grid/rc/customers"); + if (r.json) { + for (const id of extractCustomerIds(r.json)) addCustomerId(id); + // Restore selection to the creds customer if present. + if (creds.customer_id) setActiveCustomer(creds.customer_id); + } + }, [call, addCustomerId, creds.customer_id]); + + const createCustomer = useCallback(async () => { + const r = await call>( + "POST", + "/grid/rc/customers", + parseJsonField(createBody), + ); + const j = r.json; + const id = j && (j.id || j.customerId || j.customer_id); + if (id) addCustomerId(id); + void refreshState(); + }, [call, createBody, addCustomerId, refreshState]); + + const createQuote = useCallback(async () => { + const r = await call>( + "POST", + "/grid/rc/quotes", + parseJsonField(quoteBody), + ); + const j = r.json; + const id = j && (j.id || j.quoteId || j.quote_id); + if (id) setQuoteId(id); + }, [call, quoteBody]); + + const executeQuote = useCallback(async () => { + if (!quoteId) return; + await call( + "POST", + `/grid/rc/quotes/${encodeURIComponent(quoteId)}/execute`, + ); + void refreshState(); + }, [call, quoteId, refreshState]); + + const sandboxFund = useCallback(async () => { + const acct = fundAccount.trim(); + if (!acct) return; + await call( + "POST", + `/grid/rc/sandbox/internal-accounts/${encodeURIComponent(acct)}/fund`, + parseJsonField(fundBody), + ); + void refreshState(); + }, [call, fundAccount, fundBody, refreshState]); + + const transferOut = useCallback(async () => { + await call("POST", "/grid/rc/transfer-out", parseJsonField(transferBody)); + void refreshState(); + }, [call, transferBody, refreshState]); + + const custPath = useCallback( + (suffix: string) => + `/grid/rc/customers/${encodeURIComponent(activeCustomer)}${suffix}`, + [activeCustomer], + ); + + const onboardingActions = useMemo( + () => ({ + kycLink: () => void call("POST", custPath("/kyc-link")), + verifyEmail: () => void call("POST", custPath("/verify-email")), + confirmEmail: () => + void call("POST", custPath("/verify-email/confirm"), { + code: confirmCode.trim(), + }), + verifyPhone: () => void call("POST", custPath("/verify-phone")), + confirmPhone: () => + void call("POST", custPath("/verify-phone/confirm"), { + code: confirmCode.trim(), + }), + }), + [call, custPath, confirmCode], + ); + + return ( + + + Striga Grid Harness + + + + + + + + + {credsError && ( + + )} + + + {/* LEFT: flows */} + + + + + + + Active customer (used by other panels) + + + + + Create individual customer — POST /grid/rc/customers + +