@gearbox-protocol/ui-kit 3.14.0-next.13 → 3.14.0-next.14

package/dist/types/components/composites/tx-preview/confirm/dialog/TransactionConfirmDialogView.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { TransactionExecutionStepLabelKey, TransactionExecutionStepView } from '../stepper';
+import { TransactionExecutionStepView } from '../stepper';
 export interface TransactionConfirmDialogViewProps {
     readonly open: boolean;
     readonly onClose: () => void;
@@ -10,6 +10,6 @@ export interface TransactionConfirmDialogViewProps {
     readonly previewErrorTitle?: string;
     readonly execution: React.ReactNode;
     readonly steps: ReadonlyArray<TransactionExecutionStepView>;
-    readonly renderStepLabel: (labelKey: TransactionExecutionStepLabelKey) => React.ReactNode;
+    readonly renderStepLabel: (step: TransactionExecutionStepView) => React.ReactNode;
 }
 export declare function TransactionConfirmDialogView({ open, onClose, title, preview, previewLoading, previewError, previewErrorTitle, execution, steps, renderStepLabel, }: TransactionConfirmDialogViewProps): React.ReactElement | null;

package/dist/types/components/composites/tx-preview/confirm/dialog/constants.d.ts

@@ -2,3 +2,6 @@ export declare class TransactionConfirmDialogTest {
     static root: string;
     static execution: string;
 }
+/** Mobile-first: full width on mobile, fixed 560px from md up. */
+export declare const transactionConfirmDialogShellVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type TransactionConfirmAuthPhase = "agreement" | "awaiting_signature" | "blocked" | "ready";

package/dist/types/components/composites/tx-preview/confirm/index.d.ts

@@ -2,3 +2,4 @@ export * from './dialog';
 export * from './hooks';
 export * from './preview';
 export * from './stepper';
+export * from './summary';

package/dist/types/components/composites/tx-preview/confirm/stepper/HorizontalTransactionStepper.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { TransactionExecutionStepLabelKey, TransactionExecutionStepView } from './computeTransactionExecutionSteps';
+import { TransactionExecutionStepView } from './computeTransactionExecutionSteps';
 export interface HorizontalTransactionStepperProps {
     readonly steps: ReadonlyArray<TransactionExecutionStepView>;
-    readonly renderLabel: (labelKey: TransactionExecutionStepLabelKey) => React.ReactNode;
+    readonly renderLabel: (step: TransactionExecutionStepView) => React.ReactNode;
 }
 export declare function HorizontalTransactionStepper({ steps, renderLabel, }: HorizontalTransactionStepperProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/stepper/computeTransactionExecutionSteps.d.ts

@@ -1,20 +1,27 @@
-export type TransactionExecutionStepId = "connect" | "network" | "approve" | "execute";
+export type TransactionExecutionStepId = "approve" | "auth" | "execute";
+export type TransactionExecutionPrerequisiteStepId = Exclude<TransactionExecutionStepId, "execute">;
 export type StepStatus = "completed" | "active" | "upcoming";
-export type TransactionExecutionStepLabelKey = "connect" | "network" | "approve" | "approveBatch" | "execute";
+export type TransactionExecutionStepLabelKey = "approve" | "approveBatch" | "auth" | "execute";
+export interface TransactionExecutionStepRequirements {
+    readonly approve: boolean;
+    readonly auth: boolean;
+}
 export interface TransactionExecutionStepInput {
-    isConnected: boolean;
     isCorrectChain: boolean;
     isAuthReady: boolean;
     needsApproval: boolean;
     isApprovalPending: boolean;
     allowWalletBatching: boolean;
     isExecuting?: boolean;
+    /** Prerequisite steps completed in this confirm session; kept visible until reset. */
+    completedStepsInSession?: ReadonlyArray<TransactionExecutionPrerequisiteStepId>;
 }
 export interface TransactionExecutionStepView {
     id: TransactionExecutionStepId;
     labelKey: TransactionExecutionStepLabelKey;
     status: StepStatus;
 }
+export declare function getTransactionExecutionStepRequirements(input: Pick<TransactionExecutionStepInput, "needsApproval" | "allowWalletBatching" | "isAuthReady" | "isApprovalPending">): TransactionExecutionStepRequirements;
 export declare function computeTransactionExecutionSteps(input: TransactionExecutionStepInput): {
     steps: TransactionExecutionStepView[];
     activeStepId: TransactionExecutionStepId;

package/dist/types/components/composites/tx-preview/confirm/stepper/index.d.ts

@@ -1,3 +1,4 @@
 export * from './computeTransactionExecutionSteps';
 export * from './constants';
 export * from './HorizontalTransactionStepper';
+export * from './useCompletedStepsInSession';

package/dist/types/components/composites/tx-preview/confirm/stepper/useCompletedStepsInSession.d.ts

@@ -0,0 +1,14 @@
+import { TransactionExecutionPrerequisiteStepId } from './computeTransactionExecutionSteps';
+export interface UseCompletedStepsInSessionInput {
+    /** When false, session memory is cleared (e.g. confirm modal closed). */
+    readonly sessionActive: boolean;
+    readonly needsApproval: boolean;
+    readonly isApprovalPending?: boolean;
+    readonly allowWalletBatching: boolean;
+    readonly isAuthReady: boolean;
+}
+/**
+ * Tracks prerequisite steps that were required and later completed during a confirm
+ * session. Completed steps stay in the stepper until {@link sessionActive} resets.
+ */
+export declare function useCompletedStepsInSession({ sessionActive, needsApproval, isApprovalPending, allowWalletBatching, isAuthReady, }: UseCompletedStepsInSessionInput): ReadonlyArray<TransactionExecutionPrerequisiteStepId>;

package/dist/types/components/composites/tx-preview/confirm/summary/PoolOperationConfirmSummary.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { Address } from 'viem';
+export interface PoolOperationConfirmSummaryProps {
+    readonly primaryLabel: React.ReactNode;
+    readonly primaryAmount: string;
+    readonly primaryTokenSymbol: string;
+    readonly receiveLabel: React.ReactNode;
+    readonly receiveAmount: string;
+    readonly receiveTokenSymbol: string;
+    readonly apyLabel?: React.ReactNode;
+    readonly apy?: React.ReactNode;
+    readonly apyLoading?: boolean;
+    readonly curatorLabel: React.ReactNode;
+    readonly curatorName: string;
+    readonly poolLabel: React.ReactNode;
+    readonly poolAddress: Address;
+}
+export declare function PoolOperationConfirmSummary({ primaryLabel, primaryAmount, primaryTokenSymbol, receiveLabel, receiveAmount, receiveTokenSymbol, apyLabel, apy, apyLoading, curatorLabel, curatorName, poolLabel, poolAddress, }: PoolOperationConfirmSummaryProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/summary/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class PoolOperationConfirmSummaryTest {
+    static root: string;
+}

package/dist/types/components/composites/tx-preview/confirm/summary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './PoolOperationConfirmSummary';

package/dist/types/components/legal-agreement/index.d.ts

@@ -1 +1,5 @@
-export { type AppName, BlockedRegionDialog, type BlockedRegionDialogProps, createGearboxAppConfig, createLegalAgreementConfig, createPermissionlessInterfaceConfig, createPermissionlessSafeConfig, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogLinks, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementAwaitingPanel, type LegalAgreementAwaitingPanelProps, LegalAgreementAwaitingPanelTest, } from './legal-agreement-awaiting-panel';
+export { BlockedRegionDialog, type BlockedRegionDialogProps, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementLink, type LegalAgreementLinkProps, } from './legal-agreement-link';
+export { LegalAgreementPanel, type LegalAgreementPanelProps, LegalAgreementPanelTest, } from './legal-agreement-panel';
+export { type LegalAgreementThemeVariantProps, type LegalAgreementVisualTheme, legalAgreementAwaitingDescriptionVariants, legalAgreementAwaitingRootVariants, legalAgreementAwaitingTitleVariants, legalAgreementLinkVariants, legalAgreementPanelCheckboxLabelVariants, legalAgreementPanelCheckboxListTitleVariants, legalAgreementPanelCheckboxListVariants, legalAgreementPanelCheckboxRowVariants, legalAgreementPanelNotificationVariants, legalAgreementPanelRootVariants, legalAgreementPanelV2BannerVariants, } from './legal-agreement-theme';

package/dist/types/components/legal-agreement/legal-agreement-awaiting-panel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementAwaitingPanelTest {
+    static root: string;
+}
+export interface LegalAgreementAwaitingPanelProps {
+    readonly waitingForSignatureText?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementAwaitingPanel({ waitingForSignatureText, theme, }: LegalAgreementAwaitingPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-dialog.d.ts

@@ -1,13 +1,9 @@
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
 import * as React from "react";
 export interface LegalAgreementCheckboxItem {
     id: string;
     content: React.ReactNode;
 }
-export interface LegalAgreementDialogLinks {
-    termsOfService: string;
-    privacyNotice: string;
-    riskDisclosure: string;
-}
 export interface LegalAgreementDialogConfig {
     /**
      * Product/service name (e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App")
@@ -41,6 +37,15 @@ export interface LegalAgreementDialogConfig {
      * Defaults to "Please sign the message in your wallet to agree to the Terms of Service."
      */
     waitingForSignatureText?: string;
+    /**
+     * Notice shown when terms are updated (hasV2Signature is true).
+     * Host app supplies legal copy; ui-kit only renders layout.
+     */
+    updatedTermsNoticeText?: React.ReactNode;
+    /**
+     * Optional heading above checkbox list (e.g. warranty section title).
+     */
+    checkboxListTitle?: React.ReactNode;
 }
 export interface LegalAgreementDialogProps {
     open: boolean;
@@ -50,6 +55,7 @@ export interface LegalAgreementDialogProps {
     hasV2Signature?: boolean;
     isAwaitingSignature?: boolean;
     config: LegalAgreementDialogConfig;
+    theme?: LegalAgreementVisualTheme;
 }
 /**
  * LegalAgreementDialog — dialog component for legal agreement signing.
@@ -77,59 +83,20 @@ export interface LegalAgreementDialogProps {
  * Note: Displays checkboxes for user agreement and handles signing flow.
  * Shows waiting state during signature process.
  *
- * Example usage with helper function:
+ * Example usage — host app supplies config (legal copy is app-owned):
  * ```tsx
- * import { LegalAgreementDialog, createLegalAgreementConfig } from '@gearbox-protocol/ui-kit';
+ * import { LegalAgreementDialog, LegalAgreementLink } from '@gearbox-protocol/ui-kit';
  *
- * const links = {
- *   termsOfService: 'https://gearbox.fi/terms',
- *   privacyNotice: 'https://gearbox.fi/privacy',
- *   riskDisclosure: 'https://gearbox.fi/risks',
+ * const config = {
+ *   productName: 'My App',
+ *   notificationText: <>…your legal copy with <LegalAgreementLink href="…">ToS</LegalAgreementLink>…</>,
+ *   checkboxItems: [{ id: 'consent', content: <>…</> }],
  * };
  *
- * // You can use any app name. For "Permissionless Interface" and "Permissionless Safe"
- * // it uses simplified consent flow. For other names (e.g., "Gearbox App") it uses
- * // extended consent flow with additional checkboxes.
- * const config = createLegalAgreementConfig("Permissionless Interface", links);
- *
- * <LegalAgreementDialog
- *   open={isOpen}
- *   onClose={handleClose}
- *   onSign={handleSign}
- *   isSigning={isSigning}
- *   config={config}
- * />
+ * <LegalAgreementDialog open={isOpen} onClose={handleClose} onSign={handleSign} isSigning={isSigning} config={config} />
  * ```
  */
-export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
-export type AppName = string;
-/**
- * Creates configuration for legal agreement dialog based on app name.
- * @param appName - Name of the application (any string, e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App", etc.)
- * @param links - URLs for legal documents
- * @param options - Optional configuration overrides
- */
-export declare function createLegalAgreementConfig(appName: AppName, links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Interface", links, options) instead
- */
-export declare function createPermissionlessInterfaceConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Safe", links, options) instead
- */
-export declare function createPermissionlessSafeConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Gearbox App", links, options) instead
- */
-export declare function createGearboxAppConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
+export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, theme, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
 export interface BlockedRegionDialogProps {
     open: boolean;
     onClose: () => void;

package/dist/types/components/legal-agreement/legal-agreement-link.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export interface LegalAgreementLinkProps {
+    readonly href: string;
+    readonly children: React.ReactNode;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+/**
+ * Styled external link for legal agreement copy supplied by the host app.
+ */
+export declare function LegalAgreementLink({ href, children, theme, }: LegalAgreementLinkProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-panel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementPanelTest {
+    static root: string;
+}
+export interface LegalAgreementPanelProps {
+    readonly config: LegalAgreementDialogConfig;
+    readonly checkedItems: Readonly<Record<string, boolean>>;
+    readonly onCheckedChange: (id: string) => void;
+    readonly hasV2Signature?: boolean;
+    readonly showTitle?: boolean;
+    readonly checkboxIdPrefix?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementPanel({ config, checkedItems, onCheckedChange, hasV2Signature, showTitle, checkboxIdPrefix, theme, }: LegalAgreementPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-theme.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+export type LegalAgreementVisualTheme = "default" | "gearboxV3";
+export declare const legalAgreementPanelRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelNotificationVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListVariants: (props?: ({
+    readonly theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxRowVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxLabelVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelV2BannerVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingDescriptionVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementLinkVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LegalAgreementThemeVariantProps = VariantProps<typeof legalAgreementPanelRootVariants>;

package/dist/types/components/legal-agreement/legal-agreement.stories-config.d.ts

@@ -0,0 +1,11 @@
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare function createStoryPermissionlessLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryExtendedLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryRwaLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+/** Storybook-only sample config (single-checkbox flow). Not exported from ui-kit. */
+export declare const storyPermissionlessLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only sample config (three-checkbox flow). Not exported from ui-kit. */
+export declare const storyExtendedLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only RWA sample config. Not exported from ui-kit. */
+export declare const storyRwaLegalConfig: LegalAgreementDialogConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.13",
+  "version": "3.14.0-next.14",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",