@agg-build/ui 4.7.4 → 4.9.0

package/dist/types/paper-trading/paper-trading-onboarding.d.ts

@@ -0,0 +1,16 @@
+import type { PaperOnboardingModalClassNames } from "./paper-onboarding-modal.types";
+export type PaperTradingOnboardingProps = {
+    classNames?: PaperOnboardingModalClassNames;
+};
+/**
+ * Drop-in paper-trading intro. Renders nothing in a live app, and nothing for
+ * a user who has already seen it — mount it once, high in the tree, and forget
+ * about it.
+ *
+ * Pairs `usePaperOnboarding` (when to show) with `PaperOnboardingModal` (what
+ * to show). Use the modal directly if you need to drive visibility yourself.
+ */
+export declare const PaperTradingOnboarding: {
+    ({ classNames, }: PaperTradingOnboardingProps): JSX.Element | null;
+    displayName: string;
+};

package/dist/types/primitives/header/header.types.d.mts

@@ -24,6 +24,22 @@ export type HeaderProps = {
     logo?: ReactNode | HeaderLogoProps;
     /** Link destination applied to the logo when rendered as a link. */
     logoHref?: string;
+    /**
+     * Content rendered immediately after the logo, inside the brand group.
+     * Intended for a small status marker that belongs to the app rather than to
+     * the user — e.g. the paper-trading pill, which sits beside the logo on
+     * mobile where there is no balance chip to host it.
+     *
+     * Supplying this also opts the header into the brand-group gap and the
+     * tighter 16px mobile inset the accessory layout is drawn against (Figma
+     * 4772:34179). A header without one keeps the 24px inset and no gap, so
+     * every existing integration is unaffected.
+     *
+     * Pass it conditionally, not unconditionally with a self-hiding child: the
+     * header reacts to the prop being present, and cannot see that the element
+     * you handed it chose to render `null`.
+     */
+    brandAccessory?: ReactNode;
     /** Click handler for the logo area when no link navigation is used. */
     onLogoClick?: () => void;
     /** Fully custom search element rendered in the center section. */

package/dist/types/primitives/header/header.types.d.ts

@@ -24,6 +24,22 @@ export type HeaderProps = {
     logo?: ReactNode | HeaderLogoProps;
     /** Link destination applied to the logo when rendered as a link. */
     logoHref?: string;
+    /**
+     * Content rendered immediately after the logo, inside the brand group.
+     * Intended for a small status marker that belongs to the app rather than to
+     * the user — e.g. the paper-trading pill, which sits beside the logo on
+     * mobile where there is no balance chip to host it.
+     *
+     * Supplying this also opts the header into the brand-group gap and the
+     * tighter 16px mobile inset the accessory layout is drawn against (Figma
+     * 4772:34179). A header without one keeps the 24px inset and no gap, so
+     * every existing integration is unaffected.
+     *
+     * Pass it conditionally, not unconditionally with a self-hiding child: the
+     * header reacts to the prop being present, and cannot see that the element
+     * you handed it chose to render `null`.
+     */
+    brandAccessory?: ReactNode;
     /** Click handler for the logo area when no link navigation is used. */
     onLogoClick?: () => void;
     /** Fully custom search element rendered in the center section. */

package/dist/types/primitives/header/index.d.mts

@@ -3,6 +3,6 @@ import type { HeaderProps } from "./header.types";
 export type { HeaderClassNames, HeaderLogoProps, HeaderProps } from "./header.types";
 /** Renders the top header with logo, search slot, and right-side action content. */
 export declare const Header: {
-    ({ logo, logoHref, onLogoClick, search, searchProps, actions, classNames, sticky, "aria-label": ariaLabel, }: HeaderProps): JSX.Element;
+    ({ logo, logoHref, brandAccessory, onLogoClick, search, searchProps, actions, classNames, sticky, "aria-label": ariaLabel, }: HeaderProps): JSX.Element;
     displayName: string;
 };

package/dist/types/primitives/header/index.d.ts

@@ -3,6 +3,6 @@ import type { HeaderProps } from "./header.types";
 export type { HeaderClassNames, HeaderLogoProps, HeaderProps } from "./header.types";
 /** Renders the top header with logo, search slot, and right-side action content. */
 export declare const Header: {
-    ({ logo, logoHref, onLogoClick, search, searchProps, actions, classNames, sticky, "aria-label": ariaLabel, }: HeaderProps): JSX.Element;
+    ({ logo, logoHref, brandAccessory, onLogoClick, search, searchProps, actions, classNames, sticky, "aria-label": ariaLabel, }: HeaderProps): JSX.Element;
     displayName: string;
 };

package/dist/types/primitives/icon/registry.d.mts

@@ -193,6 +193,26 @@ export declare const iconRegistry: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;
     };
+    readonly "paper-buying-power": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-earnings": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-markets": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-funds": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-performance": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
     readonly minus: ({ title, className, ...props }: import("./types").IconSvgProps) => JSX.Element;
     readonly pencil: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;

package/dist/types/primitives/icon/registry.d.ts

@@ -193,6 +193,26 @@ export declare const iconRegistry: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;
     };
+    readonly "paper-buying-power": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-earnings": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-markets": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-funds": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
+    readonly "paper-onboarding-performance": {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
     readonly minus: ({ title, className, ...props }: import("./types").IconSvgProps) => JSX.Element;
     readonly pencil: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;

package/dist/types/primitives/icon/svg/paper-buying-power.d.mts

@@ -0,0 +1,11 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Wallet glyph for the Paper Buying Power card.
+ *
+ * Exported from Figma (node 4772:31116) — path data verbatim; the hard-coded
+ * fill was swapped for `currentColor` so it inherits surrounding text colour.
+ */
+export declare const PaperBuyingPowerIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-buying-power.d.ts

@@ -0,0 +1,11 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Wallet glyph for the Paper Buying Power card.
+ *
+ * Exported from Figma (node 4772:31116) — path data verbatim; the hard-coded
+ * fill was swapped for `currentColor` so it inherits surrounding text colour.
+ */
+export declare const PaperBuyingPowerIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-earnings.d.mts

@@ -0,0 +1,11 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Coins glyph for the Paper Earnings card.
+ *
+ * Exported from Figma (node 4772:31116) — path data verbatim; the hard-coded
+ * fill was swapped for `currentColor` so it inherits surrounding text colour.
+ */
+export declare const PaperEarningsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-earnings.d.ts

@@ -0,0 +1,11 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Coins glyph for the Paper Earnings card.
+ *
+ * Exported from Figma (node 4772:31116) — path data verbatim; the hard-coded
+ * fill was swapped for `currentColor` so it inherits surrounding text colour.
+ */
+export declare const PaperEarningsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-funds.d.mts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 2 of the paper-trading intro: simulated funds, zero risk.
+ *
+ * Exported from Figma (`money-wings 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingFundsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-funds.d.ts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 2 of the paper-trading intro: simulated funds, zero risk.
+ *
+ * Exported from Figma (`money-wings 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingFundsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-markets.d.mts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 1 of the paper-trading intro: live markets and real prices.
+ *
+ * Exported from Figma (`assessment 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingMarketsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-markets.d.ts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 1 of the paper-trading intro: live markets and real prices.
+ *
+ * Exported from Figma (`assessment 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingMarketsIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-performance.d.mts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 3 of the paper-trading intro: track your performance.
+ *
+ * Exported from Figma (`chart-line-up 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingPerformanceIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/paper-onboarding-performance.d.ts

@@ -0,0 +1,12 @@
+import type { IconSvgProps } from "../types";
+/**
+ * Step 3 of the paper-trading intro: track your performance.
+ *
+ * Exported from Figma (`chart-line-up 1`, node 4772:31182) — path data is verbatim
+ * from the export; only the hard-coded fill was swapped for `currentColor` so
+ * the icon inherits the surrounding text colour like every other icon here.
+ */
+export declare const PaperOnboardingPerformanceIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/modal/modal.types.d.mts

@@ -15,6 +15,12 @@ export interface ModalContainerClassNames {
     container?: string;
     overlay?: string;
     content?: string;
+    /**
+     * The flex wrapper that positions the surface. Modals default to a
+     * full-bleed bottom sheet below `md`; override this to opt out — e.g. a
+     * design that keeps a centred, inset card at every breakpoint.
+     */
+    center?: string;
 }
 export interface ModalContainerProps {
     /** Modal sections rendered inside the container shell. */

package/dist/types/primitives/modal/modal.types.d.ts

@@ -15,6 +15,12 @@ export interface ModalContainerClassNames {
     container?: string;
     overlay?: string;
     content?: string;
+    /**
+     * The flex wrapper that positions the surface. Modals default to a
+     * full-bleed bottom sheet below `md`; override this to opt out — e.g. a
+     * design that keeps a centred, inset card at every breakpoint.
+     */
+    center?: string;
 }
 export interface ModalContainerProps {
     /** Modal sections rendered inside the container shell. */

package/dist/types/trading/index.d.mts

@@ -7,3 +7,4 @@ export * from "./fund-kalshi-modal";
 export * from "./trading-context";
 export * from "./use-claim-winnings";
 export * from "./use-resolved-market-claim";
+export * from "../kyc/shared-kyc";

package/dist/types/trading/index.d.ts

@@ -7,3 +7,4 @@ export * from "./fund-kalshi-modal";
 export * from "./trading-context";
 export * from "./use-claim-winnings";
 export * from "./use-resolved-market-claim";
+export * from "../kyc/shared-kyc";

package/dist/types/trading/place-order/index.d.mts

@@ -8,6 +8,6 @@ export type { PlaceOrderExecutionViewProps } from "./index.place-order.execution
 export type { ExecutionOrderGroup, ExecutionStep, ExecutionStepKind, ExecutionStepStatus, } from "./index.place-order.execution-steps";
 export type { PlaceOrderClassNames, PlaceOrderExecutionSummary, PlaceOrderResolvedClaimSummary, PlaceOrderTradingLabels, } from "./index.place-order.types";
 export declare const PlaceOrder: {
-    ({ className, classNames, eventTradingState, executionMode, isLoading, isPrimaryActionDisabled, isPrimaryActionLoading, isQuotePanelActive, chainBalancesOverride, onAmountChange, onClose, onConnectKalshi, onOutcomeChange, onPrimaryAction, onBeforePrimaryAction, onTabChange, onSuccess, onError, onExecutionStateChange, resolvedClaim, showResolvingState, midpointsResult, }: PlaceOrderProps): JSX.Element;
+    ({ className, classNames, eventTradingState, executionMode, isLoading, isPrimaryActionDisabled, isPrimaryActionLoading, isQuotePanelActive, chainBalancesOverride, onAmountChange, onClose, onConnectKalshi, sharedKyc, onOutcomeChange, onPrimaryAction, onBeforePrimaryAction, onTabChange, onSuccess, onError, onExecutionStateChange, resolvedClaim, showResolvingState, midpointsResult, }: PlaceOrderProps): JSX.Element;
     displayName: string;
 };

package/dist/types/trading/place-order/index.d.ts

@@ -8,6 +8,6 @@ export type { PlaceOrderExecutionViewProps } from "./index.place-order.execution
 export type { ExecutionOrderGroup, ExecutionStep, ExecutionStepKind, ExecutionStepStatus, } from "./index.place-order.execution-steps";
 export type { PlaceOrderClassNames, PlaceOrderExecutionSummary, PlaceOrderResolvedClaimSummary, PlaceOrderTradingLabels, } from "./index.place-order.types";
 export declare const PlaceOrder: {
-    ({ className, classNames, eventTradingState, executionMode, isLoading, isPrimaryActionDisabled, isPrimaryActionLoading, isQuotePanelActive, chainBalancesOverride, onAmountChange, onClose, onConnectKalshi, onOutcomeChange, onPrimaryAction, onBeforePrimaryAction, onTabChange, onSuccess, onError, onExecutionStateChange, resolvedClaim, showResolvingState, midpointsResult, }: PlaceOrderProps): JSX.Element;
+    ({ className, classNames, eventTradingState, executionMode, isLoading, isPrimaryActionDisabled, isPrimaryActionLoading, isQuotePanelActive, chainBalancesOverride, onAmountChange, onClose, onConnectKalshi, sharedKyc, onOutcomeChange, onPrimaryAction, onBeforePrimaryAction, onTabChange, onSuccess, onError, onExecutionStateChange, resolvedClaim, showResolvingState, midpointsResult, }: PlaceOrderProps): JSX.Element;
     displayName: string;
 };

package/dist/types/trading/place-order/index.place-order.types.d.mts

@@ -1,6 +1,7 @@
 import type { AggUiLabels, DagStepProgress, EventTradingState, UseMidpointsResult, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
 import type { ExecutionMode, PlaceLimitOrderParams, SmartRouteResponse } from "@agg-build/sdk";
 import type { KalshiCredentials } from "../../onboarding/onboarding-modal.types";
+import type { SharedKycIntegration } from "../../kyc/shared-kyc";
 import type { PlaceOrderRoutingRow, PlaceOrderStatus, PlaceOrderTab, TradingVenue } from "../types";
 import type { ExecutionOrderGroup } from "./index.place-order.execution-steps";
 export type PlaceOrderProps = {
@@ -36,6 +37,11 @@ export type PlaceOrderProps = {
      * When omitted, PlaceOrder stores credentials through AggClient.
      */
     onConnectKalshi?: (credentials: KalshiCredentials) => Promise<void>;
+    /**
+     * Optional app-scoped shared KYC integration. Omit until backend-authoritative
+     * status and initiation are available; omission preserves existing execution.
+     */
+    sharedKyc?: SharedKycIntegration;
     /**
      * Called when the primary action is triggered, in place of the internal
      * quote execution. When provided, the component delegates the fill entirely
@@ -134,6 +140,8 @@ export type PlaceOrderRouteCard = {
     rows?: PlaceOrderRoutingRow[];
     value: string;
     venue?: TradingVenue;
+    /** Whether any venue in this selectable route requires shared KYC. */
+    requiresSharedKyc?: boolean;
     /** Whether the venue is unavailable in the user's region (geo-blocked). */
     isUnavailable?: boolean;
 };

package/dist/types/trading/place-order/index.place-order.types.d.ts

@@ -1,6 +1,7 @@
 import type { AggUiLabels, DagStepProgress, EventTradingState, UseMidpointsResult, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
 import type { ExecutionMode, PlaceLimitOrderParams, SmartRouteResponse } from "@agg-build/sdk";
 import type { KalshiCredentials } from "../../onboarding/onboarding-modal.types";
+import type { SharedKycIntegration } from "../../kyc/shared-kyc";
 import type { PlaceOrderRoutingRow, PlaceOrderStatus, PlaceOrderTab, TradingVenue } from "../types";
 import type { ExecutionOrderGroup } from "./index.place-order.execution-steps";
 export type PlaceOrderProps = {
@@ -36,6 +37,11 @@ export type PlaceOrderProps = {
      * When omitted, PlaceOrder stores credentials through AggClient.
      */
     onConnectKalshi?: (credentials: KalshiCredentials) => Promise<void>;
+    /**
+     * Optional app-scoped shared KYC integration. Omit until backend-authoritative
+     * status and initiation are available; omission preserves existing execution.
+     */
+    sharedKyc?: SharedKycIntegration;
     /**
      * Called when the primary action is triggered, in place of the internal
      * quote execution. When provided, the component delegates the fill entirely
@@ -134,6 +140,8 @@ export type PlaceOrderRouteCard = {
     rows?: PlaceOrderRoutingRow[];
     value: string;
     venue?: TradingVenue;
+    /** Whether any venue in this selectable route requires shared KYC. */
+    requiresSharedKyc?: boolean;
     /** Whether the venue is unavailable in the user's region (geo-blocked). */
     isUnavailable?: boolean;
 };

package/dist/types/trading/types.d.mts

@@ -41,6 +41,8 @@ export interface PlaceOrderRoutingRow {
     label: string;
     priceLabel: string;
     resultLabel?: string;
+    /** Whether this venue requires the app-scoped shared identity verification. */
+    requiresSharedKyc?: boolean;
 }
 export interface PlaceOrderRouting {
     tone: PlaceOrderRoutingTone;

package/dist/types/trading/types.d.ts

@@ -41,6 +41,8 @@ export interface PlaceOrderRoutingRow {
     label: string;
     priceLabel: string;
     resultLabel?: string;
+    /** Whether this venue requires the app-scoped shared identity verification. */
+    requiresSharedKyc?: boolean;
 }
 export interface PlaceOrderRouting {
     tone: PlaceOrderRoutingTone;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agg-build/ui",
-  "version": "4.7.4",
+  "version": "4.9.0",
   "description": "Pre-built React component library for the AGG prediction market aggregator. Tailwind-based, themeable, with primitives, event surfaces, trading flows, full pages, and modals.",
   "sideEffects": false,
   "license": "MIT",
@@ -100,8 +100,8 @@
     "liveline": "^0.0.7",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@agg-build/hooks": "^4.7.4",
-    "@agg-build/sdk": "^4.7.4"
+    "@agg-build/hooks": "^4.9.0",
+    "@agg-build/sdk": "^4.9.0"
   },
   "dependencies": {
     "@number-flow/react": "^0.6.0",