@funkit/connect 9.15.1 → 9.16.0

package/dist/components/Dialog/Dialog.d.ts

@@ -19,11 +19,21 @@ interface DialogProps {
     testId?: string;
     /** Whether to use the fanatics bottom sheet style on mobile */
     isFanaticsBottomSheet?: boolean;
+    /**
+     * Optional CSS `background` painted as a *translucent overlay* on top of
+     * the modal's regular `modalBackground`. Rendered as an absolutely-
+     * positioned sibling inside the modal outer; the underlying
+     * `modalBackground` still shows through wherever the overlay's layers are
+     * transparent. Use a stack of `linear-gradient(...)` with `rgba(..., 0)`
+     * stops (no opaque base) so the overlay reads correctly in both light
+     * and dark themes.
+     */
+    backgroundOverlay?: string;
 }
 /**
  * Dialog components (title, content, bottom bar) must be rendered as direct children of Dialog for correct scrolling behavior
  */
-export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withTransition, testId, isFanaticsBottomSheet, }: DialogProps): React.ReactPortal | null;
+export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withTransition, testId, isFanaticsBottomSheet, backgroundOverlay, }: DialogProps): React.ReactPortal | null;
 export declare namespace Dialog {
     var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, className, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, className, id, paddingTop, withTopDivider, withBottomDivider, withoutBottomPadding, withoutSidePadding, extraContentTopPadding, withChildScrollArea, ...boxProps }: DialogContentProps) => React.JSX.Element;

package/dist/components/Dropdown/BaseActiveDropdownItem.d.ts

@@ -15,9 +15,15 @@ export interface BaseActiveDropdownItemProps {
     arrowColor?: BoxProps['color'];
     background?: BoxProps['background'];
     labelStyle?: React.CSSProperties;
+    /**
+     * Render the dropdown caret in a tight 8×8 wrapper instead of the default
+     * 16×16. Only affects the caret icon — not paddings, fonts, or hit area on
+     * the active item itself.
+     */
+    compactIcon?: boolean;
 }
 /**
  * Represents the component used to open the dropdown, usually displayed all the time.
  */
-declare function BaseActiveDropdownItem({ iconComponent, label, isOpened, onClick, horizontalIconGap, alwaysVisibleLabel, tagComponent, tagPosition, size, color, arrowColor, background, labelStyle, }: BaseActiveDropdownItemProps): React.JSX.Element;
+declare function BaseActiveDropdownItem({ iconComponent, label, isOpened, onClick, horizontalIconGap, alwaysVisibleLabel, tagComponent, tagPosition, size, color, arrowColor, background, labelStyle, compactIcon, }: BaseActiveDropdownItemProps): React.JSX.Element;
 export default BaseActiveDropdownItem;

package/dist/components/Dropdown/BaseDropdown.d.ts

@@ -11,7 +11,7 @@ export declare const HORIZONTAL_ICON_GAP = "4";
 export declare const HORIZONTAL_OUTER_PADDING_X = "12";
 export interface BaseDropdownProps<T = string, G extends string = never> {
     value: string;
-    activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background' | 'labelStyle'>>;
+    activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background' | 'labelStyle' | 'compactIcon'>>;
     /**
      * List of groups to show and the corresponding labels, in the expected order.
      *

package/dist/components/FunCheckoutHistory/AddTokenToWalletButton.css.d.ts

@@ -0,0 +1 @@
+export declare const innerButton: string;

package/dist/components/FunCheckoutHistory/AddTokenToWalletButton.d.ts

@@ -0,0 +1,47 @@
+import React, { type ReactNode } from 'react';
+import type { AddToWalletToken } from '../../providers/FunkitCheckoutContext';
+export type AddTokenToWalletBannerStatus = 'idle' | 'pending' | 'success' | 'error';
+interface AddTokenToWalletBannerProps {
+    status: AddTokenToWalletBannerStatus;
+    /** Localized prompt for the left side, e.g. "Add aUSDT to your balance". */
+    prompt: string;
+    /** Localized button label, e.g. "Add to Wallet" / "Added". */
+    actionLabel: string;
+    /**
+     * Localized full-intent aria-label for the button — "Add {symbol} to wallet"
+     * / "{symbol} added to wallet". Decoupled from the visible label so screen
+     * readers still get the per-token intent even though the button itself is
+     * a static "Add to Wallet".
+     */
+    ariaLabel: string;
+    /** Localized error copy shown below the banner when status === 'error'. */
+    errorMessage: string;
+    /**
+     * Icon for the connected wallet (idle/error states only). Resolved by
+     * `usePaymentMethodIcon(PaymentMethod.ACCOUNT_BALANCE, 16)` in the smart
+     * wrapper so it mirrors the wallet glyph the rest of the SDK uses; pending
+     * / success states substitute a spinner / check.
+     */
+    walletIcon: ReactNode;
+    /** Called when the user clicks; only fires when `status` allows it. */
+    onClick?: () => void;
+}
+/**
+ * Presentational banner-with-CTA — no hooks, no wagmi, no gating. The
+ * `AddTokenToWalletButton` smart component below wires this up to
+ * `useAddTokenToWallet`; the story renders the banner directly.
+ */
+export declare function AddTokenToWalletBanner({ status, prompt, actionLabel, ariaLabel, errorMessage, walletIcon, onClick, }: AddTokenToWalletBannerProps): React.JSX.Element;
+interface AddTokenToWalletButtonProps {
+    /** Parents pass `config.addToWalletToken`, gating on its presence. */
+    addToWalletToken: AddToWalletToken;
+}
+/**
+ * Hidden for non-EVM chains and native tokens — EIP-747's `type: 'ERC20'`
+ * doesn't model either. `addToWalletToken` is supplied by the customer flow
+ * (e.g. an Aave aToken receipt that differs from the checkout's destination
+ * token); rendered from `FunDirectExecutionHistoryDetail` (the wallet-
+ * executed success screen).
+ */
+export declare function AddTokenToWalletButton({ addToWalletToken, }: AddTokenToWalletButtonProps): React.JSX.Element | null;
+export {};

package/dist/components/FunCheckoutHistory/FunDirectExecutionHistoryDetail.d.ts

@@ -1,6 +1,6 @@
 import type { DirectExecution } from '@funkit/api-base';
 import React from 'react';
-import type { MergedMultiStepDirectExecution } from '../../hooks/queries/useRecentDeposits';
+import type { MergedMultiStepDirectExecution } from '../../domains/checkoutNotifications';
 import type { TextConfigStatus, TextConfigSteps } from '../TransactionStatus/TransactionStatus';
 import type { FunDirectExecutionStatusProps } from './FunDirectExecutionStatus';
 export declare function FunDirectExecutionHistoryDetail({ bottomBarId, directExecution, isActiveCheckout, onClose, onAnimationComplete, showCheckoutStatus, customTextConfigStatus, customTextConfigSteps, dangerousCustomDelayedAutoTriggerCutoff, disableAutoUpdate, hideYouReceive, }: {

package/dist/components/FunOptionBox/FunOptionBox.css.d.ts

@@ -1 +1 @@
-export declare const funOptionBoxStyle: Record<"baseStyle" | "compactListStyle" | "defaultBorder" | "defaultModeNotActiveBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "activeBackground" | "uninteractiveBackground", string>;
+export declare const funOptionBoxStyle: Record<"activeBackground" | "baseStyle" | "compactListStyle" | "defaultBorder" | "defaultModeNotActiveBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "uninteractiveBackground", string>;

package/dist/components/FunTransactionSummary/DestinationYieldRows.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { FunkitCheckoutConfig } from '../../providers/FunkitCheckoutContext/types';
+/**
+ * Renders integrator-provided destination yield metadata (Supply APY /
+ * Collateralization) as rows. Driven by the customer-agnostic
+ * `destinationYieldInfo` checkout-config field — the SDK never fetches these;
+ * the integrator resolves and threads them in (e.g. Aave's
+ * `createAaveSupplyCheckoutConfig`).
+ *
+ * Owns its leading `FunTxSummaryDivider` so it can be appended inside the
+ * payment method summary box, and returns `null` when no value is present so
+ * no orphan divider appears.
+ */
+export declare function DestinationYieldRows({ yieldInfo, }: {
+    yieldInfo: FunkitCheckoutConfig['destinationYieldInfo'];
+}): React.JSX.Element | null;

package/dist/components/FunTransactionSummary/PaymentMethodSummary.d.ts

@@ -1,12 +1,18 @@
 import type { FunAddress } from '@funkit/api-base';
 import React from 'react';
 import type { PaymentMethodInfo } from '../../domains/paymentMethods';
+import type { FunkitCheckoutConfig } from '../../providers/FunkitCheckoutContext/types';
 interface PaymentMethodSummaryProps {
     paymentMethodInfo: PaymentMethodInfo;
     customRecipient: FunAddress | undefined;
     isLoading: boolean;
     estimatedTimeText: string;
     isWithdrawal?: boolean;
+    /**
+     * Integrator-provided yield metadata for the destination. When present, it's
+     * rendered as Supply APY / Collateralization rows after the Estimated Time row.
+     */
+    destinationYieldInfo?: FunkitCheckoutConfig['destinationYieldInfo'];
 }
-export declare function PaymentMethodSummary({ paymentMethodInfo, customRecipient, estimatedTimeText, isLoading, isWithdrawal, }: PaymentMethodSummaryProps): React.JSX.Element;
+export declare function PaymentMethodSummary({ paymentMethodInfo, customRecipient, estimatedTimeText, isLoading, isWithdrawal, destinationYieldInfo, }: PaymentMethodSummaryProps): React.JSX.Element;
 export {};

package/dist/components/Icons/CaretDownIcon.d.ts

@@ -4,6 +4,11 @@ export declare const CaretDownIcon: () => React.JSX.Element;
 interface AnimatedCaretDownIconProps {
     expanded?: boolean;
     color?: BoxProps['color'];
+    /**
+     * Drop the 16×16 outer wrapper and render the chevron in a tight 8×8 box.
+     * Use when the parent already provides the hit area / spacing.
+     */
+    compact?: boolean;
 }
-export declare const AnimatedCaretDownIcon: ({ expanded, color, }: AnimatedCaretDownIconProps) => React.JSX.Element;
+export declare const AnimatedCaretDownIcon: ({ expanded, color, compact, }: AnimatedCaretDownIconProps) => React.JSX.Element;
 export {};

package/dist/components/ModalErrorState/ModalErrorState.d.ts

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from 'react';
+import { type BoxProps } from '../Box/Box';
+interface ModalErrorStateProps {
+    /** Icon rendered inside a 32×32 circular `offBackground` container. Defaults to a filled InfoIcon. */
+    icon?: ReactNode;
+    /** Body content — plain text or a `<Trans>` block with link interpolation. Defaults to `common.pleaseTryAgainLater`. */
+    children?: ReactNode;
+    /** Minimum height for the centered content region. */
+    minHeight: number;
+    /** Optional bottom padding on the outer container. */
+    paddingBottom?: BoxProps['paddingBottom'];
+    paddingTop?: BoxProps['paddingTop'];
+    /** Optional style for the container. */
+    style?: React.CSSProperties;
+}
+/**
+ * Centered icon + body message used inside modal steps when a content
+ * region is empty or has errored — full-flow alternative to the smaller
+ * `FunMessage` card. Vertically centers the icon and body within
+ * `minHeight`.
+ *
+ */
+export declare function ModalErrorState({ icon, children, minHeight, paddingBottom, paddingTop, style, }: ModalErrorStateProps): React.JSX.Element;
+export {};

package/dist/consts/funkit.d.ts

@@ -25,7 +25,3 @@ export interface FunkitUserInfo extends FunkitUserInfoBase {
     address: Address;
 }
 export declare const PLACEHOLDER_FUNKIT_USER_INFO: FunkitUserInfo;
-export declare enum DepositTokenSymbol {
-    USDC = "USDC",
-    ETH = "ETH"
-}