@stridge/kit 0.1.0-alpha.5 → 0.1.0-alpha.51

package/dist/flows/deposit/orchestrator/types.d.ts

@@ -9,6 +9,35 @@ import { FailureInfo } from "../../../shared/orchestrator/types.js";
  * (transfer-crypto → process).
  */
 type DepositMethod = "wallet" | "transfer";
+/**
+ * Host-supplied disable lever for a single payment method on the deposit-method picker. The host
+ * decides eligibility — the kit ships no per-host inference (embedded vs. external wallet,
+ * region, KYC tier, …). When `disabled` is true the tile stays in the picker (preserves
+ * discoverability), renders natively disabled, can't be selected, and shows `disabledHint` as
+ * the inline meta line below the title (also folded into the tile's accessible name so screen
+ * readers convey the reason).
+ */
+interface DepositMethodConfig {
+  /** When true, the method is rendered disabled and can't be selected. */
+  disabled?: boolean;
+  /**
+   * Plain-text reason shown inline as the tile's meta line — replaces the address+balance
+   * reading on the wallet tile and the `"No limit · Instant"` reading on the transfer tile so
+   * the explanation is unmissable and the auto-derived signals (which can read misleadingly,
+   * e.g. an embedded wallet's $0.00) are suppressed. Also folded into the tile's accessible
+   * name so screen readers convey it alongside the title. Ignored when `disabled` is falsy.
+   */
+  disabledHint?: string;
+}
+/**
+ * Per-method host configuration for the deposit picker. Omitting a method (or the whole object)
+ * keeps default behavior; supply `{ disabled: true, disabledHint: "…" }` to mark an option as
+ * unavailable for the current user.
+ */
+interface DepositMethodsConfig {
+  wallet?: DepositMethodConfig;
+  transfer?: DepositMethodConfig;
+}
 /**
  * Confirm-deposit phase sub-union. Drives the confirm-deposit widget's hero / footer chrome.
  * Phase data is pure navigation; the actual quote payload comes from the driver's `quote` entity.
@@ -47,6 +76,31 @@ type RetryTargetSpec = {
    */
   kind: "fresh";
 };
+/**
+ * Where `BACK` lands when the user exits the activity surface. Encoded once at `OPEN_HISTORY`
+ * time so the back chevron can restore each pre-commit source state lossless — same precedent
+ * as {@link RetryTargetSpec}, just for the history-exit path instead of the error-retry path.
+ *
+ * The discriminant `kind` mirrors the source-state name. The remaining fields carry exactly the
+ * ctx slots needed to rebuild that state (method, asset, inner backTarget).
+ */
+type HistoryBackTarget = {
+  kind: "deposit";
+  backTarget: "closed";
+} | {
+  kind: "assetPicker";
+  method: "wallet";
+  backTarget: "closed" | "deposit";
+} | {
+  kind: "amountEntry";
+  method: "wallet";
+  asset: BalanceItemPayload;
+  backTarget: "closed" | "assetPicker";
+} | {
+  kind: "transferCrypto";
+  method: "transfer";
+  backTarget: "closed" | "deposit";
+};
 /**
  * State machine state nodes. Per-state discriminated ctx narrows what is available — illegal
  * states (e.g. `confirmDeposit` without an asset) are unrepresentable.
@@ -115,6 +169,27 @@ type DepositState = {
     failure?: FailureInfo; /** Source-chain tx hash when the error followed a successful broadcast. */
     tx?: TxRef;
   };
+} | {
+  /**
+   * Activity history list — reachable from any pre-commit state via the header icon.
+   * `backTarget` snapshots the source state at `OPEN_HISTORY` time so the back chevron
+   * can restore it lossless.
+   */
+  name: "historyList";
+  ctx: {
+    backTarget: HistoryBackTarget;
+  };
+} | {
+  /**
+   * Activity history per-settlement detail — reached from `historyList` via
+   * `SELECT_SETTLEMENT`. Carries the selected row's id and the same `backTarget` so
+   * `BACK` collapses to `historyList` first, then to the original source step.
+   */
+  name: "historyDetail";
+  ctx: {
+    settlementId: string;
+    backTarget: HistoryBackTarget;
+  };
 };
 type DepositStateName = DepositState["name"];
 /**
@@ -205,6 +280,22 @@ type GatewayEvent = {
    */
   type: "RESUME_TO_ERROR";
   tx?: TxRef;
+} | {
+  /**
+   * User tapped the header history icon. Legal from every pre-commit state
+   * (`deposit | assetPicker | amountEntry | transferCrypto`); ignored elsewhere. The
+   * reducer snapshots the source state into a {@link HistoryBackTarget} so the back
+   * chevron can restore it lossless.
+   */
+  type: "OPEN_HISTORY";
+} | {
+  /**
+   * User tapped a row in the activity list. Legal only from `historyList`; transitions
+   * to `historyDetail` carrying the selected `settlementId` and the same `backTarget`,
+   * so a later `BACK` from the list step restores the original source state.
+   */
+  type: "SELECT_SETTLEMENT";
+  settlementId: string;
 };
 /**
  * Public open-input variant accepted by `useDeposit().open()`. Hosts pass the small ID-based
@@ -261,6 +352,17 @@ interface DepositActions {
   resumeToSuccess(method: DepositMethod, tx: TxRef): void;
   /** Banner-driven jump into the error widget. */
   resumeToError(tx?: TxRef): void;
+  /**
+   * Header-icon entry into the activity surface. Legal from every pre-commit state; ignored
+   * elsewhere. Snapshots the current state into a {@link HistoryBackTarget} so `back()` can
+   * restore it lossless.
+   */
+  openHistory(): void;
+  /**
+   * Open the detail view for a settlement listed on the activity surface. Legal only from
+   * `historyList`; transitions the FSM to `historyDetail`.
+   */
+  selectSettlement(settlementId: string): void;
 }
 //#endregion
-export { ConfirmDepositPhase, DepositActions, DepositController, DepositMethod, DepositState, DepositStateName, GatewayEvent, OpenInput, ResolvedOpenInput, RetryTargetSpec };
+export { ConfirmDepositPhase, DepositActions, DepositController, DepositMethod, DepositMethodConfig, DepositMethodsConfig, DepositState, DepositStateName, GatewayEvent, OpenInput, ResolvedOpenInput, RetryTargetSpec };

package/dist/flows/deposit/orchestrator/useDeposit.d.ts

@@ -31,5 +31,49 @@ import { DepositController } from "./types.js";
  * ```
  */
 declare function useDeposit(): DepositController;
+/**
+ * Non-throwing variant of {@link useDeposit} — returns `null` when called outside a
+ * `<KitProvider deposit={…} />`. Lets hosts mount `<StridgeProvider />` conditionally
+ * (e.g. only after a wallet is connected) without descendants crashing the moment they render
+ * before the provider exists.
+ *
+ * @example
+ * ```tsx
+ * const deposit = useOptionalDeposit();
+ * return (
+ *     <button onClick={() => deposit?.open()} disabled={!deposit}>
+ *         Deposit
+ *     </button>
+ * );
+ * ```
+ */
+declare function useOptionalDeposit(): DepositController | null;
+/**
+ * Headless prefetch handle for the deposit driver. Returns a stable function that arms the
+ * driver — kicks off the deferred `gateway/start` + `supportedAssets` + initial `balance/onchain`
+ * bootstrap. Calling it before the user opens the dialog warms the cache so the subsequent
+ * `useDeposit().open()` lands on populated data without a perceptible loading window.
+ *
+ * The function is fire-and-forget: returns `void`. To observe bootstrap state, read
+ * `useDepositSnapshot().target.status` directly — the snapshot is the single source of truth.
+ *
+ * The most common use is hover-to-warm:
+ *
+ * ```tsx
+ * const deposit = useDeposit();
+ * const prefetchDeposit = usePrefetchDeposit();
+ * <button onMouseEnter={prefetchDeposit} onClick={() => deposit.open()}>Deposit</button>;
+ * ```
+ *
+ * Headless balance widgets that need data on render call this in an effect:
+ *
+ * ```tsx
+ * const prefetchDeposit = usePrefetchDeposit();
+ * useEffect(() => { prefetchDeposit(); }, [prefetchDeposit]);
+ * ```
+ *
+ * Idempotent — subsequent calls are no-ops while the driver is already armed.
+ */
+declare function usePrefetchDeposit(): () => void;
 //#endregion
-export { useDeposit };
+export { useDeposit, useOptionalDeposit, usePrefetchDeposit };

package/dist/flows/deposit/orchestrator/useDeposit.js

@@ -1 +1 @@
-"use client";import{useControllerContext as e}from"./controller.js";function t(){return e().controller}export{t as useDeposit};
+"use client";import{useDepositDriverInstance as e}from"../driver/context.js";import{useControllerContext as t,useOptionalControllerContext as n}from"./controller.js";import{useCallback as r}from"react";function i(){return t().controller}function a(){return n()?.controller??null}function o(){let t=e();return r(()=>{t.arm()},[t])}export{i as useDeposit,a as useOptionalDeposit,o as usePrefetchDeposit};

package/dist/flows/deposit/widgets/activity-history/DepositHistoryDetail.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/activity-history/DepositHistoryDetail.d.ts
+interface DepositHistoryDetailOwnProps {
+  /**
+   * Optional custom composition forwarded to the underlying `<ActivityHistoryDetail>`
+   * compound. Defaults to mounting all three per-kind parts; each gates internally on the
+   * resolved payload's `kind`.
+   */
+  children?: ReactNode;
+}
+/**
+ * Orchestrated activity-history detail wrapper for the deposit dialog. Mounts the cross-flow
+ * `<ActivityHistoryDetail>` compound and exposes per-kind parts (`Processing`, `Succeeded`,
+ * `Failed`) as namespace members. Renders `null` while the FSM is not on `historyDetail`.
+ */
+declare function DepositHistoryDetail({
+  children
+}: DepositHistoryDetailOwnProps): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace DepositHistoryDetail {
+  type Props = DepositHistoryDetailOwnProps;
+  const Processing: ({
+    children
+  }: {
+    children?: ReactNode;
+  }) => _$react_jsx_runtime0.JSX.Element | null;
+  const Succeeded: ({
+    children
+  }: {
+    children?: ReactNode;
+  }) => _$react_jsx_runtime0.JSX.Element | null;
+  const Failed: ({
+    children
+  }: {
+    children?: ReactNode;
+  }) => _$react_jsx_runtime0.JSX.Element | null;
+}
+//#endregion
+export { DepositHistoryDetail };

package/dist/flows/deposit/widgets/activity-history/DepositHistoryDetail.js

@@ -0,0 +1 @@
+"use client";import{ActivityHistorySourceProvider as e}from"../../../../shared/widgets/activity-history/compound/context.js";import{ActivityHistoryDetail as t}from"../../../../shared/widgets/activity-history/compound/ActivityHistoryDetail.js";import"../../../../activity-history/compound/index.js";import{useDepositActivityHistorySource as n}from"./useDepositActivityHistorySource.js";import{jsx as r}from"react/jsx-runtime";function i({children:i}){let{sourceValue:a,step:o}=n();return o!==`historyDetail`||!a?null:r(e,{value:a,children:r(t,{children:i})})}(function(e){e.Processing=t.Processing,e.Succeeded=t.Succeeded,e.Failed=t.Failed})(i||={});export{i as DepositHistoryDetail};

package/dist/flows/deposit/widgets/activity-history/DepositHistoryList.d.ts

@@ -0,0 +1,38 @@
+import { ActivityHistoryEmpty } from "../../../../shared/widgets/activity-history/compound/components/Empty.js";
+import { ActivityHistoryErrorView } from "../../../../shared/widgets/activity-history/compound/components/ErrorView.js";
+import { ActivityHistoryHeader, ActivityHistoryListHeader } from "../../../../shared/widgets/activity-history/compound/components/HistoryHeader.js";
+import { ActivityHistoryList } from "../../../../shared/widgets/activity-history/compound/components/List.js";
+import { ActivityHistoryRow } from "../../../../shared/widgets/activity-history/compound/components/Row.js";
+import { ComponentProps, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/activity-history/DepositHistoryList.d.ts
+interface DepositHistoryListOwnProps {
+  /**
+   * Optional custom composition forwarded to the underlying `<ActivityHistory>` compound.
+   * Defaults to the compound's `<Header /> + <List />` shape.
+   */
+  children?: ReactNode;
+}
+/**
+ * Orchestrated activity-history list wrapper for the deposit dialog. Bridges the deposit
+ * flow's snapshot + actions + FSM state into the cross-flow `<ActivityHistory>` compound's
+ * source value. Renders `null` while the FSM is not on `historyList` — the dialog's step
+ * router only matches the active step, but the no-op guard keeps the component safe to mount
+ * in custom dialog compositions that skip the step router.
+ */
+declare function DepositHistoryList({
+  children,
+  ...props
+}: ComponentProps<"div"> & DepositHistoryListOwnProps): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace DepositHistoryList {
+  type Props = ComponentProps<"div"> & DepositHistoryListOwnProps;
+  const Header: typeof ActivityHistoryHeader;
+  const ListHeader: typeof ActivityHistoryListHeader;
+  const List: typeof ActivityHistoryList;
+  const Row: typeof ActivityHistoryRow;
+  const Empty: typeof ActivityHistoryEmpty;
+  const ErrorView: typeof ActivityHistoryErrorView;
+}
+//#endregion
+export { DepositHistoryList };

package/dist/flows/deposit/widgets/activity-history/DepositHistoryList.js

@@ -0,0 +1 @@
+"use client";import{ActivityHistorySourceProvider as e}from"../../../../shared/widgets/activity-history/compound/context.js";import{ActivityHistory as t}from"../../../../shared/widgets/activity-history/compound/ActivityHistory.js";import"../../../../activity-history/compound/index.js";import{useDepositActivityHistorySource as n}from"./useDepositActivityHistorySource.js";import{jsx as r}from"react/jsx-runtime";function i({children:i,...a}){let{sourceValue:o,step:s}=n();return s!==`historyList`||!o?null:r(e,{value:o,children:r(t,{...a,children:i})})}(function(e){e.Header=t.Header,e.ListHeader=t.ListHeader,e.List=t.List,e.Row=t.Row,e.Empty=t.Empty,e.ErrorView=t.ErrorView})(i||={});export{i as DepositHistoryList};

package/dist/flows/deposit/widgets/activity-history/index.d.ts

@@ -0,0 +1,2 @@
+import { DepositHistoryDetail } from "./DepositHistoryDetail.js";
+import { DepositHistoryList } from "./DepositHistoryList.js";

package/dist/flows/deposit/widgets/activity-history/index.js

@@ -0,0 +1 @@
+import"./DepositHistoryDetail.js";import"./DepositHistoryList.js";

package/dist/flows/deposit/widgets/activity-history/useDepositActivityHistorySource.js

@@ -0,0 +1 @@
+"use client";import{useDepositDriverInstance as e,useDepositSnapshot as t}from"../../driver/context.js";import{useLingui as n}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as r,useDepositEffectiveState as i}from"../../orchestrator/controller.js";import{defaultBlockExplorers as a}from"../../../../shared/utils/explorers.js";import{useCallback as o,useMemo as s}from"react";function c(){let c=t(),l=r(),u=e(),d=i(),{i18n:f}=n(),p=o(e=>{u.refreshHistory?.(e)},[u]),m=d.name===`historyList`||d.name===`historyDetail`,h=d.name===`historyDetail`?d.ctx.settlementId:void 0;return{sourceValue:s(()=>{if(!m)return null;let e=c.wallet,t=e.status===`ready`||e.status===`stale`?e.payload.address.value:`0x0000000000000000000000000000000000000000`,n=c.brand,r=n.status===`ready`||n.status===`stale`?n.payload.name:void 0,i={i18n:f,sourceWallet:{name:`Wallet`,address:t},explorers:a(),...r?{brandName:r}:{}};return{entity:c.history,refresh:p,selectSettlement:l.selectSettlement,back:l.back,...h===void 0?{}:{settlementId:h},settlementContext:i}},[c,l,m,h,f,p]),settlementId:h,step:d.name===`historyList`?`historyList`:d.name===`historyDetail`?`historyDetail`:`other`}}export{c as useDepositActivityHistorySource};

package/dist/flows/deposit/widgets/amount-entry/AmountEntry.d.ts

@@ -1,5 +1,12 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { AmountEntryBodyProps } from "../../../../shared/widgets/amount-entry/compound/types.js";
+import { AmountEntryFlow } from "../../../../shared/widgets/amount-entry/compound/components/Flow.js";
+import { AmountEntryFooter } from "../../../../shared/widgets/amount-entry/compound/components/Footer.js";
+import { AmountEntryHeader } from "../../../../shared/widgets/amount-entry/compound/components/Header.js";
+import { AmountEntryHero } from "../../../../shared/widgets/amount-entry/compound/components/Hero/Hero.js";
+import { AmountEntryNotice } from "../../../../shared/widgets/amount-entry/compound/components/Notice.js";
+import { AmountEntryPills } from "../../../../shared/widgets/amount-entry/compound/components/Pills.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/amount-entry/AmountEntry.d.ts
@@ -14,11 +21,24 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * minimum-deposit USD floor from the driver's `target` entity. Renders nothing on any other
  * FSM state.
  *
- * Honors `target.payload.minDepositUsd.value`: when the entered amount is below it, the footer
+ * Honors `target.payload.minAmountUsd.value`: when the entered amount is below it, the footer
  * CTA flips to "Update order" and clicking auto-snaps the amount up to the floor. The widget
  * also prefills the entry to the floor on first render so the user starts at a valid amount.
  */
-declare function AmountEntry(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface AmountEntryOwnProps {
+  /**
+   * Optional custom composition. Defaults to `<Header />` + `<Body><Hero /><Pills /><Flow />`
+   * + validation-notice slot `</Body>` + `<Footer />`. Pass children to interleave your own
+   * elements between compound parts. Note — the default composition embeds a runtime-driven
+   * `<NoticeSlot />` that surfaces validation hints (min / max / insufficient-balance); custom
+   * children replace it entirely.
+   */
+  children?: ReactNode;
+}
+declare function AmountEntry({
+  children,
+  ...props
+}: ComponentProps<"div"> & AmountEntryOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function AmountEntryDialog({
   open,
   defaultOpen,
@@ -27,9 +47,16 @@ declare function AmountEntryDialog({
   ...rootProps
 }: AmountEntry.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace AmountEntry {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & AmountEntryOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & AmountEntryOwnProps;
   const Dialog: typeof AmountEntryDialog;
+  const Header: typeof AmountEntryHeader;
+  const Body: (props: AmountEntryBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Hero: typeof AmountEntryHero;
+  const Pills: typeof AmountEntryPills;
+  const Flow: typeof AmountEntryFlow;
+  const Footer: typeof AmountEntryFooter;
+  const Notice: typeof AmountEntryNotice;
 }
 //#endregion
 export { AmountEntry };

package/dist/flows/deposit/widgets/amount-entry/AmountEntry.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{Trans as n}from"../../../../shared/i18n/Trans.js";import{useLingui as r}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as i,useDepositEffectiveState as a}from"../../orchestrator/controller.js";import{formatTokenAmount as o}from"../../../../shared/format/formatTokenAmount.js";import{DialogShell as s}from"../../../../shared/dialog/DialogShell.js";import{text as c}from"../../../../shared/ui/Text/Text.js";import"../../../../shared/ui/Text/index.js";import{AmountEntry as l}from"../../../../shared/widgets/amount-entry/compound/AmountEntry.js";import"../../../../shared/widgets/amount-entry/compound/index.js";import{toAssetDescriptor as u}from"../../../../shared/widgets/asset-descriptor.js";import{useEffect as d,useMemo as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function v(s){let v=e(),y=a(),{confirmAmount:b,back:x}=i(),{_:S}=r(),C=t(),w=v.target,T=w.status===`ready`||w.status===`stale`?w.payload:void 0,E=y.name===`amountEntry`?y.ctx.asset:void 0,D=E?.amountUsd?.value??0,O=T?.minDepositUsd?.value,k=T?.minDepositUsd?.formatted,A=E?.priceUsd,[j,M]=m(O??null),[N,P]=m(),F=p(void 0),I=E?`${E.eip155Id??``}:${E.address??``}`:void 0;d(()=>{I&&F.current!==I&&(F.current=I,typeof O==`number`&&(M(O),P(void 0)))},[I,O]);let L=e=>{P(e);let t=e===`max`?1:Number.parseInt(e,10)/100;Number.isFinite(t)&&M(D*t)},R=e=>{M(e),P(void 0)},z=f(()=>typeof O!=`number`||O<=0?!1:j===null||j<O,[j,O]),B=f(()=>typeof D!=`number`||D<=0?!1:j!==null&&j>D,[j,D]),V=()=>{if(B){M(D),P(`max`);return}if(z&&typeof O==`number`){M(O),P(void 0);return}j!==null&&b(A&&A>0?j/A:j)};if(y.name!==`amountEntry`||!E||!T)return null;let H=y.ctx.backTarget===`closed`?void 0:x,U=u(E)??{symbol:E.symbol},W=u(T)??{symbol:T.symbol},G=`${o((j??0)/1,C,{maxDecimals:5})} ${T.symbol}`,K=B?S({id:`9cCjMJ`,message:`Deposit max balance`}):z&&k?S({id:`bOZXx5`,message:`Update order`}):void 0;return g(l,{...s,amount:j,sendToken:U,receiveToken:W,max:D,...O===void 0?{}:{min:O},onAmountChange:R,...H?{onBack:H}:{},subLineAmount:G,presets:_,...N===void 0?{}:{activePreset:N},onPresetSelect:L,...K===void 0?{}:{footerLabel:K},onContinue:V,children:[h(l.Header,{}),g(l.Body,{children:[h(l.Hero,{}),h(l.Pills,{}),B?h(c.p,{size:`sm`,color:`subdued`,className:`AmountEntry__noticeStyles.root x2b8uid x1vvogim`,"data-style-src":`@stridge/kit:src/flows/deposit/widgets/amount-entry/AmountEntry.tsx:16`,children:h(n,{id:`znqB4T`,message:`Insufficient balance`})}):null,h(l.Flow,{}),!B&&z&&k?h(c.p,{size:`sm`,color:`subdued`,className:`AmountEntry__noticeStyles.root x2b8uid x1vvogim`,"data-style-src":`@stridge/kit:src/flows/deposit/widgets/amount-entry/AmountEntry.tsx:16`,children:h(n,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:k}})}):null]}),h(l.Footer,{})]})}function y({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return h(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:h(v,{...i})})}(function(e){e.Dialog=y})(v||={});export{v as AmountEntry};
+"use client";import{useDepositDriverInstance as e,useDepositSnapshot as t}from"../../driver/context.js";import{useKitI18n as n}from"../../../../shared/i18n/useKitI18n.js";import{Trans as r}from"../../../../shared/i18n/Trans.js";import{useLingui as i}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as a,useDepositEffectiveState as o}from"../../orchestrator/controller.js";import{formatTokenAmount as ee}from"../../../../shared/format/formatTokenAmount.js";import{useKitEmitter as te}from"../../../../events/emit/useKitEmitter.js";import"../../../../events/emit/index.js";import{DialogShell as s}from"../../../../shared/dialog/DialogShell.js";import{ActivityTrigger as c}from"../../../../shared/widgets/activity-history/ActivityTrigger.js";import"../../../../shared/widgets/activity-history/index.js";import{AmountEntry as l}from"../../../../shared/widgets/amount-entry/compound/AmountEntry.js";import"../../../../shared/widgets/amount-entry/compound/index.js";import{toAssetDescriptor as u}from"../../../../shared/widgets/asset-descriptor.js";import{effectiveMaxUsd as d,resolveFooterIntent as f}from"./footerIntent.js";import{useEffect as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function b({children:r,...s}){let b=t(),C=o(),{confirmAmount:w,back:T,openHistory:E}=a(),D=typeof e().refreshHistory==`function`,{_:O}=i(),k=n(),A=b.target,j=A.status===`ready`||A.status===`stale`?A.payload:void 0,M=C.name===`amountEntry`?C.ctx.asset:void 0,N=M?.amountUsd?.value??0,P=j?.minAmountUsd?.value,F=j?.minAmountUsd?.formatted,I=j?.maxAmountUsd?.value,L=j?.maxAmountUsd?.formatted,R=d(N,I),z=M?.priceUsd,[B,V]=h(P??null),[H,U]=h(),W=te(),G=e=>{W({type:`deposit.amount.changed`,flow:`deposit`,tier:`ui`,payload:{raw:e===null?``:String(e),numeric:e}})},K=m(void 0),q=M?`${M.eip155Id??``}:${M.address??``}`:void 0;p(()=>{q&&K.current!==q&&(K.current=q,typeof P==`number`&&(V(P),U(void 0)))},[q,P]);let J=e=>{U(e);let t=e===`max`?1:Number.parseInt(e,10)/100;if(Number.isFinite(t)){let n=R*t;V(n),G(n),e===`max`&&W({type:`deposit.max.clicked`,flow:`deposit`,tier:`ui`,payload:{}})}},Y=e=>{V(e),U(void 0),G(e)},X=f({amount:B,...P===void 0?{}:{minAmountUsd:P},...I===void 0?{}:{maxAmountUsd:I},walletBalanceUsd:N}),Z=()=>{if(X===`aboveBalance`||X===`aboveCap`){V(R),U(`max`);return}if(X===`belowMin`&&typeof P==`number`){V(P),U(void 0);return}B!==null&&w(z&&z>0?B/z:B)};if(C.name!==`amountEntry`||!M||!j)return null;let Q=C.ctx.backTarget===`closed`?void 0:T,ne=u(M)??{symbol:M.symbol},re=u(j)??{symbol:j.symbol},ie=`${ee((B??0)/1,k,{maxDecimals:5})} ${j.symbol}`,$=x(X,{updateOrder:O({id:`bOZXx5`,message:`Update order`}),depositMax:O({id:`9cCjMJ`,message:`Deposit max balance`})}),ae=S(X,L,F);return _(l,{...s,amount:B,sendToken:ne,receiveToken:re,max:R,...P===void 0?{}:{min:P},onAmountChange:Y,...Q?{onBack:Q}:{},subLineAmount:ie,presets:y,...H===void 0?{}:{activePreset:H},onPresetSelect:J,...$===void 0?{}:{footerLabel:$},onContinue:Z,notice:ae,...D?{headerTrailing:_(c,{onOpen:E})}:{},children:r??v(g,{children:[_(l.Header,{}),v(l.Body,{children:[_(l.Hero,{}),_(l.Pills,{}),_(l.Flow,{}),_(l.Notice,{})]}),_(l.Footer,{})]})})}function x(e,t){if(e===`aboveCap`||e===`belowMin`)return t.updateOrder;if(e===`aboveBalance`)return t.depositMax}function S(e,t,n){if(e===`aboveCap`&&t)return _(r,{id:`-I_tc5`,message:`Max {formattedCap}`,values:{formattedCap:t}});if(e===`aboveBalance`)return _(r,{id:`znqB4T`,message:`Insufficient balance`});if(e===`belowMin`&&n)return _(r,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:n}})}function C({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return _(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:_(b,{...i})})}(function(e){e.Dialog=C,e.Header=l.Header,e.Body=l.Body,e.Hero=l.Hero,e.Pills=l.Pills,e.Flow=l.Flow,e.Footer=l.Footer,e.Notice=l.Notice})(b||={});export{b as AmountEntry};

package/dist/flows/deposit/widgets/amount-entry/footerIntent.js

@@ -0,0 +1 @@
+function e(e){let{amount:r,minAmountUsd:i,maxAmountUsd:a,walletBalanceUsd:o}=e,s=t(o,a);return r!==null&&s>0&&r>s?n(o,a)?`aboveCap`:`aboveBalance`:typeof i==`number`&&i>0&&(r===null||r<i)?`belowMin`:`ready`}function t(e,t){return typeof t==`number`&&t>0?Math.min(e,t):e}function n(e,t){return typeof t==`number`&&t>0&&t<=e}export{t as effectiveMaxUsd,e as resolveFooterIntent};

package/dist/flows/deposit/widgets/asset-picker/AssetPicker.d.ts

@@ -1,5 +1,9 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { AssetPickerBodyProps } from "../../../../shared/widgets/asset-picker/compound/types.js";
+import { AssetPickerFooter } from "../../../../shared/widgets/asset-picker/compound/components/Footer.js";
+import { AssetPickerHeader } from "../../../../shared/widgets/asset-picker/compound/components/Header.js";
+import { AssetPickerList } from "../../../../shared/widgets/asset-picker/compound/components/List.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/asset-picker/AssetPicker.d.ts
@@ -8,7 +12,17 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * entity and the destination header title from `target`. Owns the selected-id state locally and
  * routes the footer Continue through orchestrator's `confirmAsset`.
  */
-declare function AssetPicker(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface AssetPickerOwnProps {
+  /**
+   * Optional custom composition. Defaults to `<Header />` + `<Body><List /></Body>` + `<Footer />`.
+   * Pass children to interleave your own elements between compound parts.
+   */
+  children?: ReactNode;
+}
+declare function AssetPicker({
+  children,
+  ...props
+}: ComponentProps<"div"> & AssetPickerOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function AssetPickerDialog({
   open,
   defaultOpen,
@@ -17,9 +31,13 @@ declare function AssetPickerDialog({
   ...rootProps
 }: AssetPicker.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace AssetPicker {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & AssetPickerOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & AssetPickerOwnProps;
   const Dialog: typeof AssetPickerDialog;
+  const Header: typeof AssetPickerHeader;
+  const Body: (props: AssetPickerBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const List: typeof AssetPickerList;
+  const Footer: typeof AssetPickerFooter;
 }
 //#endregion
 export { AssetPicker };

package/dist/flows/deposit/widgets/asset-picker/AssetPicker.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useDepositActions as t,useDepositEffectiveState as n}from"../../orchestrator/controller.js";import{DialogShell as r}from"../../../../shared/dialog/DialogShell.js";import{AssetPicker as i}from"../../../../shared/widgets/asset-picker/compound/AssetPicker.js";import"../../../../shared/widgets/asset-picker/compound/index.js";import{useMemo as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(r){let l=e(),f=n(),{confirmAsset:p,back:m}=t(),[h,g]=o(void 0),_=l.balances,v=_.status===`ready`||_.status===`stale`?_.payload:[],y=a(()=>v.map(u),[v]),b=a(()=>(e=>e!==void 0&&y.some(t=>t.id===e&&!t.disabled))(h)?h:y.find(e=>!e.disabled)?.id,[h,y]),x=l.target,S=x.status===`ready`||x.status===`stale`?x.payload:void 0;if(f.name!==`assetPicker`)return null;let C=f.ctx.backTarget===`closed`?void 0:m,w=()=>{if(!b)return;let e=v.find(e=>d(e)===b);e&&p(e)};return c(i,{...r,...S?{token:{symbol:S.symbol}}:{},...b?{selectedId:b}:{},onSelect:g,assets:y,...C?{onBack:C}:{},onContinue:w,children:[s(i.Header,{}),s(i.Body,{children:s(i.List,{})}),s(i.Footer,{})]})}function u(e){let t=d(e),n=`${e.amount.formatted} ${e.symbol}`,r=e.amountUsd?.formatted??`—`;return{id:t,symbol:e.symbol,chain:e.networkName,balance:e.amount.value,balanceFormatted:n,fiatFormatted:r,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.address?{contractAddress:e.address}:{},isNative:e.isNative,...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{},...e.chainLogoUrl?{chainLogoUrl:e.chainLogoUrl}:{},decimals:e.decimals,...e.priceUsd===void 0?{}:{priceUsd:e.priceUsd},...e.lowBalance?{lowBalance:!0}:{},...e.disabled?{disabled:!0}:{}}}function d(e){return e.eip155Id?`${e.eip155Id}:${e.address||`native`}`:e.symbol.toLowerCase()}function f({open:e,defaultOpen:t,onOpenChange:n,trigger:i,...a}){return s(r,{open:e,defaultOpen:t,onOpenChange:n,trigger:i,children:s(l,{...a})})}(function(e){e.Dialog=f})(l||={});export{l as AssetPicker};
+"use client";import{useDepositDriverInstance as e,useDepositSnapshot as t}from"../../driver/context.js";import{useDepositActions as n,useDepositEffectiveState as r}from"../../orchestrator/controller.js";import{DialogShell as i}from"../../../../shared/dialog/DialogShell.js";import{ActivityTrigger as a}from"../../../../shared/widgets/activity-history/ActivityTrigger.js";import"../../../../shared/widgets/activity-history/index.js";import{AssetPicker as o}from"../../../../shared/widgets/asset-picker/compound/AssetPicker.js";import"../../../../shared/widgets/asset-picker/compound/index.js";import{useMemo as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=d(l,{children:[u(o.Header,{}),u(o.Body,{children:u(o.List,{})}),u(o.Footer,{})]});function p({children:i,...l}){let d=t(),p=r(),{confirmAsset:g,back:_,openHistory:v}=n(),y=typeof e().refreshHistory==`function`,[b,x]=c(void 0),S=d.balances,C=S.status===`ready`||S.status===`stale`?S.payload:[],w=s(()=>C.map(m),[C]),T=s(()=>(e=>e!==void 0&&w.some(t=>t.id===e&&!t.disabled))(b)?b:w.find(e=>!e.disabled)?.id,[b,w]),E=d.target,D=E.status===`ready`||E.status===`stale`?E.payload:void 0;if(p.name!==`assetPicker`)return null;let O=p.ctx.backTarget===`closed`?void 0:_,k=()=>{if(!T)return;let e=C.find(e=>h(e)===T);e&&g(e)};return u(o,{...l,...D?{token:{symbol:D.symbol}}:{},...T?{selectedId:T}:{},onSelect:x,assets:w,...O?{onBack:O}:{},onContinue:k,...y?{headerTrailing:u(a,{onOpen:v})}:{},children:i??f})}function m(e){let t=h(e),n=`${e.amount.formatted} ${e.symbol}`,r=e.amountUsd?.formatted??`—`;return{id:t,symbol:e.symbol,chain:e.networkName,balance:e.amount.value,balanceFormatted:n,fiatFormatted:r,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.address?{contractAddress:e.address}:{},isNative:e.isNative,...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{},...e.chainLogoUrl?{chainLogoUrl:e.chainLogoUrl}:{},decimals:e.decimals,...e.priceUsd===void 0?{}:{priceUsd:e.priceUsd},...e.lowBalance?{lowBalance:!0}:{},...e.disabled?{disabled:!0}:{}}}function h(e){return e.eip155Id?`${e.eip155Id}:${e.address||`native`}`:e.symbol.toLowerCase()}function g({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...a}){return u(i,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:u(p,{...a})})}(function(e){e.Dialog=g,e.Header=o.Header,e.Body=o.Body,e.List=o.List,e.Footer=o.Footer})(p||={});export{p as AssetPicker};

package/dist/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.d.ts

@@ -1,8 +1,25 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { ConfirmTransferBodyProps } from "../../../../shared/widgets/confirm-transfer/compound/types.js";
+import { ConfirmTransferAmounts } from "../../../../shared/widgets/confirm-transfer/compound/components/Amounts.js";
+import { ConfirmTransferBreakdown } from "../../../../shared/widgets/confirm-transfer/compound/components/Breakdown.js";
+import { ConfirmTransferDisclaimer } from "../../../../shared/widgets/confirm-transfer/compound/components/Disclaimer.js";
+import { ConfirmTransferFooter } from "../../../../shared/widgets/confirm-transfer/compound/components/Footer.js";
+import { ConfirmTransferHeader } from "../../../../shared/widgets/confirm-transfer/compound/components/Header.js";
+import { ConfirmTransferHero } from "../../../../shared/widgets/confirm-transfer/compound/components/Hero.js";
+import { ConfirmTransferMeta } from "../../../../shared/widgets/confirm-transfer/compound/components/Meta.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.d.ts
+interface ConfirmDepositOwnProps {
+  /**
+   * Optional custom composition. When omitted, the canonical default composition renders —
+   * `<Header />` + `<Body>` containing `<Hero />` `<Meta />` `<Amounts />` `<Breakdown />`
+   * `<Disclaimer />` + `<Footer />`. Pass children to interleave your own elements between
+   * compound parts, drop parts you don't want, or replace the composition entirely.
+   */
+  children?: ReactNode;
+}
 /**
  * Orchestrated `ConfirmDeposit` widget. Reads the driver's `quote` entity for the transfer
  * payload + breakdown + hero amount, the driver's `brand` entity for the title brand, the FSM's
@@ -14,7 +31,10 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * USD figure (`amount × asset.priceUsd`) so the user doesn't see `$0` flash before the
  * round-trip completes.
  */
-declare function ConfirmDeposit(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+declare function ConfirmDeposit({
+  children,
+  ...props
+}: ComponentProps<"div"> & ConfirmDepositOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function ConfirmDepositDialog({
   open,
   defaultOpen,
@@ -23,9 +43,22 @@ declare function ConfirmDepositDialog({
   ...rootProps
 }: ConfirmDeposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace ConfirmDeposit {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & ConfirmDepositOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & ConfirmDepositOwnProps;
   const Dialog: typeof ConfirmDepositDialog;
+  /**
+   * Compound sub-parts exposed off the orchestrated widget so consumers can compose without
+   * importing the headless compound separately. Identity-equal to the parts on
+   * {@link ConfirmTransfer} from `@stridge/kit/deposit/compound`.
+   */
+  const Header: typeof ConfirmTransferHeader;
+  const Body: (props: ConfirmTransferBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Hero: typeof ConfirmTransferHero;
+  const Meta: typeof ConfirmTransferMeta;
+  const Amounts: typeof ConfirmTransferAmounts;
+  const Breakdown: typeof ConfirmTransferBreakdown;
+  const Disclaimer: typeof ConfirmTransferDisclaimer;
+  const Footer: typeof ConfirmTransferFooter;
 }
 //#endregion
 export { ConfirmDeposit };

package/dist/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{useLingui as n}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as r,useDepositEffectiveState as i,useDepositState as a}from"../../orchestrator/controller.js";import{formatDurationCoarse as o}from"../../../../shared/format/formatDurationCoarse.js";import{formatUsd as s}from"../../../../shared/format/formatUsd.js";import{DialogShell as c}from"../../../../shared/dialog/DialogShell.js";import{ConfirmTransfer as l}from"../../../../shared/widgets/confirm-transfer/compound/ConfirmTransfer.js";import"../../../../shared/widgets/confirm-transfer/compound/index.js";import{useQuoteCountdown as u}from"../../../../shared/quote/useQuoteCountdown.js";import"../../../../shared/quote/index.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(o){let c=e(),p=i(),g=a(),{confirmDeposit:v,back:y}=r(),{_:b}=n(),x=t(),S=c.quote,C=p.name===`confirmDeposit`?p.ctx.phase:void 0,w=c.target,T=c.wallet,E=g.name===`confirmDeposit`&&g.ctx.phase.kind===`ready`,D=u({expiresAt:C?.kind===`ready`?C.quoteExpiresAt:void 0,enabled:E});if(!C)return null;let O=C.kind===`loading`||C.kind===`regenerating`,k=h(c,w,T,x),A=_(c,{routeLabel:b({id:`rT8e1f`,message:`Route`}),networkCostLabel:b({id:`bZnukT`,message:`Network cost`}),priceImpactLabel:b({id:`kH6wUX`,message:`Price impact`}),maxSlippageLabel:b({id:`SZRUQ4`,message:`Max slippage`})}),j=`$0.00`;if(S.status===`ready`||S.status===`stale`)j=S.payload.heroAmountUsd.formatted;else if(g.name===`confirmDeposit`){let e=g.ctx.asset,t=g.ctx.amount,n=e?.priceUsd;j=s(typeof n==`number`&&Number.isFinite(n)&&n>0?t*n:t,x)}let M=S.status===`ready`||S.status===`stale`?S.payload.quoteTotalSeconds:30,N=D,P=m(C),F=C.kind===`failed`?C.failure:void 0,I=C.kind===`regenerating`?C.notice:void 0,L=w.status===`ready`||w.status===`stale`?w.payload:void 0,R=c.brand.status===`ready`||c.brand.status===`stale`?c.brand.payload:void 0,z=L&&R?.name?b({id:`zbtijb`,message:`Deposit {0} to {1}`,values:{0:L.symbol,1:R.name}}):void 0;return f(l,{...o,transfer:k,breakdown:A,heroAmountUsd:j,loading:O,phase:P,...I?{notice:I}:{},...F?{error:{message:F.reason,...F.code?{code:F.code}:{}}}:{},...N===void 0?{}:{quoteSeconds:N},quoteTotalSeconds:M,...z?{headerTitle:z}:{},onBack:y,onConfirm:v,children:[d(l.Header,{}),f(l.Body,{children:[d(l.Hero,{}),d(l.Meta,{}),d(l.Amounts,{}),d(l.Breakdown,{}),d(l.Disclaimer,{})]}),d(l.Footer,{})]})}function m(e){switch(e.kind){case`loading`:return`loading`;case`ready`:return`ready`;case`regenerating`:return`regenerating`;case`submitting`:return`submitting`;case`failed`:return`error`}}function h(e,t,n,r){let i=e.quote,a=i.status===`ready`||i.status===`stale`?i.payload:void 0,s=t.status===`ready`||t.status===`stale`?t.payload:void 0,c=n.status===`ready`||n.status===`stale`?n.payload:void 0,l=e.brand.status===`ready`||e.brand.status===`stale`?e.brand.payload:void 0,u=a?.sendAsset,d=a?.receiveAsset??s,f=l?.name?`${l.name} Account`:`Account`,p=a?.etaSeconds===void 0?`—`:o(a.etaSeconds*1e3,r);return{sourceLabel:c?`Wallet (${c.address.formatted})`:`Wallet`,destinationLabel:f,eta:p,sendAmount:a?a.sendAmount.formatted:`0`,sendToken:u?g(u):{symbol:`—`},receiveAmount:a?a.receiveAmount.formatted:`0`,receiveToken:d?g(d):{symbol:s?.symbol??`—`}}}function g(e){return{symbol:e.symbol,...e.chainId===void 0?{}:{chainId:e.chainId},...e.address?{address:e.address}:{},...e.isNative===void 0?{}:{isNative:e.isNative},...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{}}}function _(e,t){let n=e.quote,r=n.status===`ready`||n.status===`stale`?n.payload:void 0;if(!r?.breakdown)return{};let i=r.breakdown,a={};return i.selectedRoute&&(a.selectedRoute={label:t.routeLabel,value:i.selectedRoute.label}),i.networkCost&&(a.networkCost={label:t.networkCostLabel,valueUsd:i.networkCost.formatted}),i.priceImpact&&(a.priceImpact={label:t.priceImpactLabel,valuePercent:i.priceImpact.formatted}),i.maxSlippage&&(a.maxSlippage={label:t.maxSlippageLabel,valuePercent:i.maxSlippage.value.formatted,auto:i.maxSlippage.auto}),a}function v({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return d(c,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:d(p,{...i})})}(function(e){e.Dialog=v})(p||={});export{p as ConfirmDeposit};
+"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{useLingui as n}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as r,useDepositEffectiveState as i,useDepositState as a}from"../../orchestrator/controller.js";import{formatDurationCoarse as o}from"../../../../shared/format/formatDurationCoarse.js";import{formatUsd as s}from"../../../../shared/format/formatUsd.js";import{useKitEmitter as c}from"../../../../events/emit/useKitEmitter.js";import"../../../../events/emit/index.js";import{DialogShell as l}from"../../../../shared/dialog/DialogShell.js";import{ConfirmTransfer as u}from"../../../../shared/widgets/confirm-transfer/compound/ConfirmTransfer.js";import"../../../../shared/widgets/confirm-transfer/compound/index.js";import{useQuoteCountdown as d}from"../../../../shared/quote/useQuoteCountdown.js";import"../../../../shared/quote/index.js";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";const h=m(f,{children:[p(u.Header,{}),m(u.Body,{children:[p(u.Hero,{}),p(u.Meta,{}),p(u.Amounts,{}),p(u.Breakdown,{}),p(u.Disclaimer,{})]}),p(u.Footer,{})]});function g({children:o,...l}){let f=e(),m=i(),g=a(),{confirmDeposit:y,back:x}=r(),{_:S}=n(),C=t(),w=c(),T=()=>{w({type:`deposit.confirm.clicked`,flow:`deposit`,tier:`ui`,payload:{}}),y()},E=f.quote,D=m.name===`confirmDeposit`?m.ctx.phase:void 0,O=f.target,k=f.wallet,A=g.name===`confirmDeposit`&&g.ctx.phase.kind===`ready`,j=d({expiresAt:D?.kind===`ready`?D.quoteExpiresAt:void 0,enabled:A});if(!D)return null;let M=D.kind===`loading`||D.kind===`regenerating`,N=v(f,O,k,C),P=b(f,{routeLabel:S({id:`rT8e1f`,message:`Route`}),networkCostLabel:S({id:`bZnukT`,message:`Network cost`}),priceImpactLabel:S({id:`kH6wUX`,message:`Price impact`}),maxSlippageLabel:S({id:`SZRUQ4`,message:`Max slippage`})}),F=`$0.00`;if(E.status===`ready`||E.status===`stale`)F=E.payload.heroAmountUsd.formatted;else if(g.name===`confirmDeposit`){let e=g.ctx.asset,t=g.ctx.amount,n=e?.priceUsd;F=s(typeof n==`number`&&Number.isFinite(n)&&n>0?t*n:t,C)}let I=E.status===`ready`||E.status===`stale`?E.payload.quoteTotalSeconds:30,L=j,R=_(D),z=D.kind===`failed`?D.failure:void 0,B=D.kind===`regenerating`?D.notice:void 0,V=O.status===`ready`||O.status===`stale`?O.payload:void 0,H=f.brand.status===`ready`||f.brand.status===`stale`?f.brand.payload:void 0,U=V&&H?.name?S({id:`zbtijb`,message:`Deposit {0} to {1}`,values:{0:V.symbol,1:H.name}}):void 0;return p(u,{...l,transfer:N,breakdown:P,heroAmountUsd:F,loading:M,phase:R,...B?{notice:B}:{},...z?{error:{message:z.reason,...z.code?{code:z.code}:{}}}:{},...L===void 0?{}:{quoteSeconds:L},quoteTotalSeconds:I,...U?{headerTitle:U}:{},onBack:x,onConfirm:T,children:o??h})}function _(e){switch(e.kind){case`loading`:return`loading`;case`ready`:return`ready`;case`regenerating`:return`regenerating`;case`submitting`:return`submitting`;case`failed`:return`error`}}function v(e,t,n,r){let i=e.quote,a=i.status===`ready`||i.status===`stale`?i.payload:void 0,s=t.status===`ready`||t.status===`stale`?t.payload:void 0,c=n.status===`ready`||n.status===`stale`?n.payload:void 0,l=e.brand.status===`ready`||e.brand.status===`stale`?e.brand.payload:void 0,u=a?.sendAsset,d=a?.receiveAsset??s,f=l?.name?`${l.name} Account`:`Account`,p=a?.etaSeconds===void 0?`—`:o(a.etaSeconds*1e3,r);return{sourceLabel:c?`Wallet (${c.address.formatted})`:`Wallet`,destinationLabel:f,eta:p,sendAmount:a?a.sendAmount.formatted:`0`,sendToken:u?y(u):{symbol:`—`},receiveAmount:a?a.receiveAmount.formatted:`0`,receiveToken:d?y(d):{symbol:s?.symbol??`—`}}}function y(e){return{symbol:e.symbol,...e.chainId===void 0?{}:{chainId:e.chainId},...e.address?{address:e.address}:{},...e.isNative===void 0?{}:{isNative:e.isNative},...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{}}}function b(e,t){let n=e.quote,r=n.status===`ready`||n.status===`stale`?n.payload:void 0;if(!r?.breakdown)return{};let i=r.breakdown,a={};return i.selectedRoute&&(a.selectedRoute={label:t.routeLabel,value:i.selectedRoute.label}),i.networkCost&&(a.networkCost={label:t.networkCostLabel,valueUsd:i.networkCost.formatted}),i.priceImpact&&(a.priceImpact={label:t.priceImpactLabel,valuePercent:i.priceImpact.formatted}),i.maxSlippage&&(a.maxSlippage={label:t.maxSlippageLabel,valuePercent:i.maxSlippage.value.formatted,auto:i.maxSlippage.auto}),a}function x({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return p(l,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:p(g,{...i})})}(function(e){e.Dialog=x,e.Header=u.Header,e.Body=u.Body,e.Hero=u.Hero,e.Meta=u.Meta,e.Amounts=u.Amounts,e.Breakdown=u.Breakdown,e.Disclaimer=u.Disclaimer,e.Footer=u.Footer})(g||={});export{g as ConfirmDeposit};

package/dist/flows/deposit/widgets/deposit/Deposit.d.ts

@@ -1,5 +1,11 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { DepositBodyProps } from "./compound/types.js";
+import { DepositHeader } from "./compound/components/Header.js";
+import { DepositMethod } from "./compound/components/Method.js";
+import { DepositMethods } from "./compound/components/Methods.js";
+import { DepositSteps } from "./compound/components/Steps.js";
+import { Deposit as Deposit$1 } from "./compound/Deposit.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/deposit/Deposit.d.ts
@@ -13,7 +19,19 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * bar while `wallet.balanceTotalUsd` resolves, and the Transfer Crypto tile's chain stack is
  * driven by whatever rows the driver has surfaced so far.
  */
-declare function Deposit(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface DepositOwnProps {
+  /**
+   * Optional custom composition. When omitted, the canonical default composition renders —
+   * `<Header />` + `<Body>` containing `<Methods />`. Pass children to interleave your own
+   * elements between compound parts, drop parts you don't want, or replace the composition
+   * entirely.
+   */
+  children?: ReactNode;
+}
+declare function Deposit({
+  children,
+  ...props
+}: ComponentProps<"div"> & DepositOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function DepositDialog({
   open,
   defaultOpen,
@@ -22,9 +40,20 @@ declare function DepositDialog({
   ...rootProps
 }: Deposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Deposit {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & DepositOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & DepositOwnProps;
   const Dialog: typeof DepositDialog;
+  /**
+   * Compound sub-parts aliased on the orchestrated widget so consumers can compose without
+   * importing the headless compound separately. Identity-equal to the parts on the compound
+   * exported from `@stridge/kit/deposit/compound`.
+   */
+  const Header: typeof DepositHeader;
+  const Body: (props: DepositBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Methods: typeof DepositMethods;
+  const Method: typeof DepositMethod;
+  const Steps: typeof DepositSteps;
+  const Step: typeof Deposit$1.Step;
 }
 //#endregion
 export { Deposit };

package/dist/flows/deposit/widgets/deposit/Deposit.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useLingui as t}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as n,useDepositEffectiveState as r}from"../../orchestrator/controller.js";import{QrCodeIcon as i}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as a}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as o}from"../../../../shared/dialog/DialogShell.js";import{Image as s}from"../../../../shared/ui/Image/Image.js";import{Skeleton as c}from"../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../shared/ui/Skeleton/index.js";import{TokenLogo as l}from"../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../shared/ui/TokenLogo/index.js";import"../../../../ui/index.js";import{Deposit as u}from"./compound/Deposit.js";import"./compound/index.js";import{useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={width:18,height:18,"aria-hidden":!0};function h(o){let s=e(),l=r().name,{selectMethod:h}=n(),{_}=t(),v=s.wallet,y=v.status===`ready`||v.status===`stale`?v.payload:void 0,b=s.brand,x=b.status===`ready`||b.status===`stale`?b.payload:void 0,S=s.addresses,C=S.status===`ready`||S.status===`stale`?S.payload:[],w=s.balances.status===`error`,T=!!s.brand,E=x?.name?_({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:x.name}}):void 0,D=d(()=>g(C),[C]),O=d(()=>{let e=[{id:`wallet`,title:_({id:`sb9Y58`,message:`Wallet`}),icon:f(a,{...m}),...y?{titleAdornment:y.address.formatted}:{},meta:y?.balanceTotalUsd?.formatted?y.balanceTotalUsd.formatted:w?void 0:f(c,{width:56,height:12}),recommended:!0,onSelect:()=>h(`wallet`)}];return T&&e.push({id:`transfer`,title:_({id:`3dqPLT`,message:`Transfer Crypto`}),icon:f(i,{...m}),meta:[_({id:`qtoOYG`,message:`No limit`}),_({id:`D79cZK`,message:`Instant`})],...D?{trailing:D}:{},onSelect:()=>h(`transfer`)}),e},[y,w,T,D,h,_]);return l===`deposit`?p(u,{...o,...E?{title:E}:{},methods:O,children:[f(u.Header,{}),f(u.Body,{children:f(u.Methods,{})})]}):null}function g(e){if(e.length!==0)return f(s.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>f(l,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function _({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return f(o,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:f(h,{...i})})}(function(e){e.Dialog=_})(h||={});export{h as Deposit};
+"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useLingui as t}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as n,useDepositEffectiveState as r,useDepositMethodsConfig as i}from"../../orchestrator/controller.js";import{QrCodeIcon as a}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as o}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as s}from"../../../../shared/dialog/DialogShell.js";import{Image as c}from"../../../../shared/ui/Image/Image.js";import{Skeleton as l}from"../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../shared/ui/Skeleton/index.js";import{TokenLogo as u}from"../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../shared/ui/TokenLogo/index.js";import"../../../../ui/index.js";import{Deposit as d}from"./compound/Deposit.js";import"./compound/index.js";import{useMemo as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";const g={width:18,height:18,"aria-hidden":!0},_=h(p,{children:[m(d.Header,{}),m(d.Body,{children:m(d.Methods,{})})]});function v({children:s,...c}){let u=e(),p=r().name,{selectMethod:h}=n(),v=i(),{_:b}=t(),x=u.wallet,S=x.status===`ready`||x.status===`stale`?x.payload:void 0,C=S!==void 0,w=u.brand,T=w.status===`ready`||w.status===`stale`?w.payload:void 0,E=u.addresses,D=E.status===`ready`||E.status===`stale`?E.payload:[],O=u.balances.status===`error`,k=!S?.balanceTotalUsd?.formatted&&!O,A=!!u.brand,j=T?.name?b({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:T.name}}):void 0,M=f(()=>y(D),[D]),N=v?.wallet,P=v?.transfer,F=f(()=>{let e=!C||k,t=N?.disabled??!1,n=e||t,r=t?N?.disabledHint:void 0,i=(()=>{if(t)return r;if(!C)return b({id:`5AApJw`,message:`Connect a wallet to continue`});if(S?.balanceTotalUsd?.formatted)return S.balanceTotalUsd.formatted;if(!O)return m(l,{width:56,height:12})})(),s=[{id:`wallet`,title:b({id:`sb9Y58`,message:`Wallet`}),icon:m(o,{...g}),...S&&!t?{titleAdornment:S.address.formatted}:{},...i===void 0?{}:{meta:i},recommended:!0,disabled:n,onSelect:n?void 0:()=>h(`wallet`)}];if(A){let e=P?.disabled??!1,t=e?P?.disabledHint:void 0,n=e?t:[b({id:`qtoOYG`,message:`No limit`}),b({id:`D79cZK`,message:`Instant`})];s.push({id:`transfer`,title:b({id:`3dqPLT`,message:`Transfer Crypto`}),icon:m(a,{...g}),...n===void 0?{}:{meta:n},...M?{trailing:M}:{},disabled:e,onSelect:e?void 0:()=>h(`transfer`)})}return s},[S,O,k,C,A,M,N,P,h,b]);return p===`deposit`?m(d,{...c,...j?{title:j}:{},methods:F,children:s??_}):null}function y(e){if(e.length!==0)return m(c.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>m(u,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function b({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return m(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:m(v,{...i})})}(function(e){e.Dialog=b,e.Header=d.Header,e.Body=d.Body,e.Methods=d.Methods,e.Method=d.Method,e.Steps=d.Steps,e.Step=d.Step})(v||={});export{v as Deposit};