@0xsquid/ui 0.17.0 → 0.17.1-beta.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { ReactNode, ComponentProps } from 'react';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -13,31 +13,6 @@ interface BadgeImageProps {
 type BadgeSize = 'sm' | 'md';
 declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
-declare function LoadingSkeleton({ className, height, width, }: {
-    className?: string;
-    height?: string;
-    width?: string;
-}): react_jsx_runtime.JSX.Element;
-
-interface UsdAmountProps {
-    usdAmount: string;
-}
-declare function UsdAmount({ usdAmount }: UsdAmountProps): react_jsx_runtime.JSX.Element;
-
-interface AddressButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    label: string;
-    imageUrl?: string;
-    badgeUrl?: string;
-    isLoading?: boolean;
-}
-declare function AddressButton({ label, imageUrl, badgeUrl, isLoading, ...props }: AddressButtonProps): react_jsx_runtime.JSX.Element;
-
-interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    label: string;
-    disabled?: boolean;
-}
-declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
-
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@@ -45,7 +20,7 @@ type ButtonSize = 'md' | 'lg';
 type SwapDirection = 'from' | 'to';
 type BoostMode = 'normal' | 'boost';
 type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
-type SwapStepDescriptionBlock = {
+type DescriptionBlock = {
     type: 'string';
     value: string;
 } | {
@@ -54,9 +29,9 @@ type SwapStepDescriptionBlock = {
     rounded?: boolean;
 };
 type SwapStep = {
-    descriptionBlocks: SwapStepDescriptionBlock[];
+    descriptionBlocks: DescriptionBlock[];
     link?: string;
-    status: SwapStepItemStatus;
+    status: ActionStatus;
 };
 declare enum SwapState {
     CONFIRM = 0,
@@ -69,8 +44,80 @@ declare enum SwapState {
     NEEDS_GAS = 7
 }
 type ThemeType = 'light' | 'dark';
-type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+type ActionStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+type TransactionStateVariant = 'full' | 'compact';
+type TokenPairVariant = 'horizontal' | 'vertical';
+type TokenPairSize = 'small' | 'medium';
+type ImageIconVariant = 'square' | 'round' | 'proportional';
+type ImageIconSize = 'small' | 'medium' | 'large' | 'xlarge';
+type ChainTypeFilter = 'source' | 'destination';
+type StatusFilter = 'success' | 'ongoing' | 'error';
 type AssetsButtonVariant = 'primary' | 'accent';
+type PropertyListItemSize = 'small' | 'large';
+
+interface IconLabelProps {
+    isLoading?: boolean;
+    src?: string;
+    children?: ReactNode;
+    variant?: ImageIconVariant;
+}
+declare function IconLabel({ src, children, variant }: IconLabelProps): react_jsx_runtime.JSX.Element;
+
+interface ImageIconProps {
+    src?: string;
+    variant?: ImageIconVariant;
+    size?: ImageIconSize;
+    className?: string;
+}
+declare function ImageIcon({ src, variant, size, className: propsClassName, }: ImageIconProps): react_jsx_runtime.JSX.Element;
+
+declare const LoadingProvider: React$1.Provider<boolean | null>;
+interface LoadingSkeletonProps {
+    className?: string;
+    height?: string;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    width?: string;
+}
+declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | null | undefined;
+
+declare const statusBgClassMap: Record<ActionStatus, string>;
+declare const statusTextClassMap: Record<ActionStatus, string>;
+declare const statusColorClassMap: {
+    bg: Record<ActionStatus, string>;
+    text: Record<ActionStatus, string>;
+};
+interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    status: ActionStatus;
+    variant?: TransactionStateVariant;
+    icon?: ReactNode;
+}
+declare function TransactionState({ status, variant, icon, ...props }: TransactionStateProps): react_jsx_runtime.JSX.Element;
+
+interface UsdAmountProps {
+    usdAmount: string;
+}
+declare function UsdAmount({ usdAmount }: UsdAmountProps): react_jsx_runtime.JSX.Element;
+
+interface WalletLinkProps {
+    imageURI: string;
+    address: string;
+}
+declare function WalletLink({ imageURI, address }: WalletLinkProps): react_jsx_runtime.JSX.Element;
+
+interface AddressButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    label: string;
+    imageUrl?: string;
+    badgeUrl?: string;
+    isLoading?: boolean;
+}
+declare function AddressButton({ label, imageUrl, badgeUrl, isLoading, ...props }: AddressButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    label: string;
+    disabled?: boolean;
+}
+declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
 
 interface AssetsButtonProps {
     tokenImageUrl?: string;
@@ -115,6 +162,12 @@ interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): react_jsx_runtime.JSX.Element;
 
+interface FilterButtonProps {
+    selected: boolean;
+    numApplied?: number;
+}
+declare function FilterButton({ selected, numApplied }: FilterButtonProps): react_jsx_runtime.JSX.Element;
+
 interface SettingsButtonProps {
     label: string;
     isSelected?: boolean;
@@ -138,13 +191,13 @@ type InputActionButtonProps = {
     label?: string;
 };
 
-interface Token$1 {
+interface Token {
     price: number;
     symbol: string;
     decimals: number;
 }
 interface NumericInputProps {
-    token: Token$1;
+    token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
     maxDecimals?: {
@@ -201,6 +254,13 @@ interface TooltipProps {
 }
 declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
+interface Props {
+    lottieJsonFile: object;
+    animReplacement?: JSX.Element;
+    hideAnimations?: boolean;
+}
+declare const AnimationWrapper: ({ lottieJsonFile, animReplacement, hideAnimations, }: Props) => react_jsx_runtime.JSX.Element;
+
 interface BoostProps {
     boostMode: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -213,6 +273,27 @@ interface BoostProps {
 }
 declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): react_jsx_runtime.JSX.Element;
 
+declare function Breadcrumb({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface CollapseProps extends ComponentProps<'div'> {
+    collapsed: boolean;
+    collapsedHeight?: number;
+    duration?: number;
+}
+declare function Collapse({ collapsed, collapsedHeight, children, className, duration, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
+interface SizeTransitionProps extends ComponentProps<'div'> {
+}
+declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): react_jsx_runtime.JSX.Element;
+
+interface DescriptionBlocksProps extends ComponentProps<'div'> {
+    blocks: DescriptionBlock[] | string;
+}
+declare function DescriptionBlocks({ className, blocks: blocksProp, ...props }: DescriptionBlocksProps): react_jsx_runtime.JSX.Element;
+declare function Inline({ className, children, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
 interface DetailsToolbarProps {
     errorMessage?: string;
     boostMode?: BoostMode;
@@ -296,6 +377,15 @@ interface MenuItemProps {
 }
 declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
+interface PropertyListItemProps extends ComponentProps<'li'> {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    detail?: React.ReactNode;
+    isLoading?: boolean;
+    variant?: PropertyListItemSize;
+}
+declare function PropertyListItem({ label, detail, icon, isLoading, className, variant, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
+
 interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
@@ -346,23 +436,313 @@ interface SettingsItemProps {
 }
 declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
-interface SwapDetailListItemProps {
-    label: string;
-    icon: React.ReactNode;
-    detail?: React.ReactNode;
-    isLoading?: boolean;
-}
-declare function SwapDetailListItem({ label, detail, icon, isLoading, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
-
 interface SwapStepItemProps {
-    descriptionBlocks: SwapStepDescriptionBlock[];
+    descriptionBlocks: DescriptionBlock[];
     showStepSeparator?: boolean;
     link?: string;
-    status?: SwapStepItemStatus;
+    status?: ActionStatus;
 }
 declare const STEP_ITEM_HEIGHT = 52;
 declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
 
+interface ActionLayoutProps {
+    lineCap?: ReactNode;
+    status?: ActionStatus;
+    showTimeline?: boolean;
+    statusIcon?: ReactNode;
+    nextStatus?: ActionStatus;
+    description?: ReactNode;
+    title?: string;
+    icon?: ReactNode;
+    children?: ReactNode;
+    showBody?: boolean;
+}
+declare function ActionLayout({ lineCap, status, showTimeline, showBody, nextStatus, statusIcon, description, title, icon, children, }: ActionLayoutProps): react_jsx_runtime.JSX.Element;
+interface ActionPropertiesProps {
+    timestamp?: number;
+    hash?: string;
+    url?: string;
+}
+declare function ActionProperties({ timestamp, hash, url, }: ActionPropertiesProps): react_jsx_runtime.JSX.Element;
+declare const ActionLineOutRow: ({ status }: {
+    status?: ActionStatus;
+}) => react_jsx_runtime.JSX.Element;
+declare const ActionStatusRow: ({ children, status, icon, }: {
+    children?: ReactNode;
+    status: ActionStatus;
+    icon?: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare function ActionRow({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function ActionWrapper({ children, status, className, }: {
+    children?: ReactNode;
+    status?: ActionStatus;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface TimestampProps {
+    time: number;
+}
+declare function Timestamp({ time }: TimestampProps): react_jsx_runtime.JSX.Element;
+
+interface BaseActionProps {
+    status: ActionStatus;
+    /** if set, renders a line upwards to the next item in the status color */
+    nextStatus?: ActionStatus;
+    /** should we render a line down to the previous item? (default true) */
+    showTimeline?: boolean;
+    /** if false, fades out everything but the status line (for collapsed timeline state) */
+    showBody?: boolean;
+}
+
+interface ApproveActionProps extends BaseActionProps {
+    profile: {
+        imageURI: string;
+        label: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }: ApproveActionProps): react_jsx_runtime.JSX.Element;
+
+interface BridgeActionProps extends BaseActionProps {
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    provider: {
+        logoURI: string;
+        name: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }: BridgeActionProps): react_jsx_runtime.JSX.Element;
+
+interface FeesActionProps extends BaseActionProps {
+    total: FeesRowProps;
+    lines?: FeesRowProps[];
+}
+declare function FeesAction({ status, nextStatus, showTimeline, total, lines, }: FeesActionProps): react_jsx_runtime.JSX.Element;
+interface FeesTotalProps {
+    status: ActionStatus;
+    nextStatus?: ActionStatus;
+    total: FeesRowProps;
+    showTimeline?: boolean;
+    collapsed?: boolean;
+}
+declare function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }: FeesTotalProps): react_jsx_runtime.JSX.Element;
+interface FeesLinesProps {
+    status: ActionStatus;
+    lines?: FeesRowProps[];
+    showTimeline?: boolean;
+}
+declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): react_jsx_runtime.JSX.Element;
+interface FeesRowProps {
+    label: string;
+    usd: string;
+    eth: string;
+    collapsed?: boolean;
+}
+
+interface IncompleteActionProps extends BaseActionProps {
+    message: string;
+    buttons: ReactNode;
+}
+declare function IncompleteAction({ status, nextStatus, message, buttons, }: IncompleteActionProps): react_jsx_runtime.JSX.Element;
+
+interface ReceiveNFTActionProps extends BaseActionProps {
+    nft: {
+        imageURI: string;
+        name: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }: ReceiveNFTActionProps): react_jsx_runtime.JSX.Element;
+
+interface ReceiveTokensActionProps extends BaseActionProps {
+    amount: string;
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: ReceiveTokensActionProps): react_jsx_runtime.JSX.Element;
+
+interface SendTokensActionProps extends BaseActionProps {
+    amount: string;
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: SendTokensActionProps): react_jsx_runtime.JSX.Element;
+
+interface StakeActionProps extends BaseActionProps {
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    provider: {
+        logoURI: string;
+        name: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }: StakeActionProps): react_jsx_runtime.JSX.Element;
+
+interface StartActionProps extends BaseActionProps {
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function StartAction({ status, nextStatus, showTimeline, showBody, timestamp, hash, url, }: StartActionProps): react_jsx_runtime.JSX.Element;
+
+interface SuccessActionProps extends BaseActionProps {
+    description?: string;
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function SuccessAction({ nextStatus, status, description, showTimeline, showBody, timestamp, hash, url, }: SuccessActionProps): react_jsx_runtime.JSX.Element;
+
+interface SwapActionProps extends BaseActionProps {
+    fromToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    toToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    provider: {
+        logoURI: string;
+        name: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: SwapActionProps): react_jsx_runtime.JSX.Element;
+
+interface WrapActionProps extends BaseActionProps {
+    fromToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    toToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    provider: {
+        logoURI: string;
+        name: string;
+    };
+    timestamp: number;
+    hash: string;
+    url: string;
+}
+declare function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: WrapActionProps): react_jsx_runtime.JSX.Element;
+
+declare const actionComponentMap: {
+    readonly success: typeof SuccessAction;
+    readonly receive_tokens: typeof ReceiveTokensAction;
+    readonly receive_nft: typeof ReceiveNFTAction;
+    readonly approve: typeof ApproveAction;
+    readonly send_tokens: typeof SendTokensAction;
+    readonly swap: typeof SwapAction;
+    readonly bridge: typeof BridgeAction;
+    readonly wrap: typeof WrapAction;
+    readonly stake: typeof StakeAction;
+    readonly start: typeof StartAction;
+    readonly fees: typeof FeesAction;
+    readonly incomplete: typeof IncompleteAction;
+};
+type TransactionActionComponents = typeof actionComponentMap;
+type TransactionActionType = keyof TransactionActionComponents;
+type TransactionActionProps = {
+    [Type in TransactionActionType]: {
+        type: Type;
+        props: ComponentProps<TransactionActionComponents[Type]>;
+    };
+}[TransactionActionType];
+declare function TransactionAction({ type, props }: TransactionActionProps): react_jsx_runtime.JSX.Element;
+
+declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
+
+interface TransactionItemProps {
+    isLoading?: boolean;
+    status?: ActionStatus;
+    image?: ReactNode;
+    type?: {
+        icon?: ReactNode;
+        name: string;
+    };
+    hash?: string;
+    fromChain?: {
+        logoURI: string;
+        name: string;
+    };
+    toChain?: {
+        logoURI: string;
+        name: string;
+    };
+    fromAmount?: string;
+    toAmount?: string;
+    timestamp?: string;
+}
+declare function TransactionItem({ isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
+
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
@@ -379,6 +759,21 @@ type ErrorMessageProps = {
 };
 declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): react_jsx_runtime.JSX.Element;
 
+interface ExploreLayoutProps {
+    navigation?: ReactNode;
+    children?: ReactNode;
+}
+declare function ExploreLayout({ navigation, children }: ExploreLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface HashLinkProps {
+    showTx?: boolean;
+    hash: string;
+    children?: ReactNode;
+    showCopyButton?: boolean;
+    url?: string;
+}
+declare function HashLink({ showTx, hash, showCopyButton, url, children, }: HashLinkProps): react_jsx_runtime.JSX.Element;
+
 interface InfoBoxProps {
     title: string;
     description: string;
@@ -386,6 +781,12 @@ interface InfoBoxProps {
 }
 declare function InfoBox({ title, description, icon }: InfoBoxProps): react_jsx_runtime.JSX.Element;
 
+interface JoinProps {
+    children?: ReactNode;
+    glue: () => ReactNode;
+}
+declare function Join({ children, glue }: JoinProps): react_jsx_runtime.JSX.Element[] | null | undefined;
+
 type Rounded = 'sm' | 'lg';
 interface MenuProps extends React__default.ComponentProps<'div'> {
     containerClassName?: string;
@@ -497,22 +898,254 @@ declare const SwapStepsCollapsed: React$1.ForwardRefExoticComponent<SwapStepsCol
 
 interface TokenPairProps {
     firstToken: {
-        imageUrl: string;
+        logoURI: string;
         bgColor: string;
     };
     secondToken: {
-        imageUrl: string;
+        logoURI: string;
+        bgColor: string;
+    };
+    variant?: TokenPairVariant;
+    size?: TokenPairSize;
+}
+declare function TokenPair({ firstToken, secondToken, variant, size, }: TokenPairProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionFiltersProps {
+    chainType: ChainTypeFilter;
+    setChainType: (chainType: ChainTypeFilter) => void;
+    chain: string | null;
+    setChain: (chain: string | null) => void;
+    fromDate: Date | null;
+    setFromDate: (fromDate: Date | null) => void;
+    toDate: Date | null;
+    setToDate: (toDate: Date | null) => void;
+    status: StatusFilter[];
+    setStatus: (status: StatusFilter[]) => void;
+    chains: {
+        name: string;
+        logoURI: string;
+    }[];
+}
+declare function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }: TransactionFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface BridgeHeaderProps {
+    tokenLogoURI: string;
+    chainLogoURI: string;
+    title?: string;
+    hash: string;
+    url?: string;
+    status: ActionStatus;
+}
+declare function BridgeHeader({ tokenLogoURI, chainLogoURI, title, hash, url, status, }: BridgeHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface BuyNFTHeaderProps {
+    imageUrl: string;
+    title?: string;
+    hash: string;
+    url?: string;
+    status: ActionStatus;
+}
+declare function BuyNFTHeader({ imageUrl, title, hash, url, status, }: BuyNFTHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface InteractionHeaderProps {
+    title?: string;
+    image?: ReactNode;
+    hash: string;
+    url?: string;
+    status: ActionStatus;
+}
+declare function InteractionHeader({ title, image, hash, url, status, }: InteractionHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileHeaderProps {
+    imageUrl: string;
+    title: string;
+    wallet: {
+        imageURI: string;
+        address: string;
+    };
+    amount: string;
+}
+declare function ProfileHeader({ imageUrl, title, wallet, amount, }: ProfileHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface SwapHeaderProps {
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+    };
+    toToken: {
+        logoURI: string;
+        bgColor: string;
+    };
+    title?: string;
+    hash: string;
+    url?: string;
+    status: ActionStatus;
+}
+declare function SwapHeader({ fromToken, toToken, title, hash, url, status, }: SwapHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare const headerComponentsMap: {
+    readonly swap: typeof SwapHeader;
+    readonly buy_nft: typeof BuyNFTHeader;
+    readonly interaction: typeof InteractionHeader;
+    readonly bridge: typeof BridgeHeader;
+    readonly profile: typeof ProfileHeader;
+};
+type TransactionHeaderComponents = typeof headerComponentsMap;
+type TransactionHeaderType = keyof TransactionHeaderComponents;
+type TransactionHeaderProps = {
+    [Type in TransactionHeaderType]: {
+        type: Type;
+        props: ComponentProps<TransactionHeaderComponents[Type]>;
+    };
+}[TransactionHeaderType];
+declare function TransactionHeader({ type, props }: TransactionHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionHeaderLayoutProps {
+    status?: ActionStatus;
+    title: string;
+    image?: ReactNode;
+    children?: ReactNode;
+}
+declare function TransactionHeaderLayout({ status, title, image, children, }: TransactionHeaderLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface BridgePropertiesProps {
+    amount: string;
+    token: {
+        logoURI: string;
         bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted, timeToComplete, }: BridgePropertiesProps): react_jsx_runtime.JSX.Element;
+
+interface BuyNFTPropertiesProps {
+    title: string;
+    imageURI: string;
+    collection: {
+        imageURI: string;
+        name: string;
+    };
+    price: string;
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    marketplace: {
+        logoURI: string;
+        name: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
     };
+    fromAddress: string;
+    toAddress: string;
+    boosted?: boolean;
+    timeToComplete: string;
+    tokenId: string;
+    nftType: string;
 }
-declare function TokenPair({ firstToken, secondToken }: TokenPairProps): react_jsx_runtime.JSX.Element;
+declare function BuyNFTProperties({ title, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, }: BuyNFTPropertiesProps): react_jsx_runtime.JSX.Element;
+
+interface InteractionPropertiesProps {
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function InteractionProperties({ chain, wallet, boosted, timeToComplete, }: InteractionPropertiesProps): react_jsx_runtime.JSX.Element;
+
+interface PropertiesLayoutProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function PropertiesLayout({ children, className, }: PropertiesLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface SwapPropertiesProps {
+    fromAmount: string;
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    toAmount: string;
+    toToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    fromAddress: string;
+    toAddress: string;
+    exchangeRate: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function SwapProperties({ fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, }: SwapPropertiesProps): react_jsx_runtime.JSX.Element;
+
+declare const propertiesComponentsMap: {
+    readonly swap: typeof SwapProperties;
+    readonly buy_nft: typeof BuyNFTProperties;
+    readonly interaction: typeof InteractionProperties;
+    readonly bridge: typeof BridgeProperties;
+};
+type TransactionPropertiesComponents = typeof propertiesComponentsMap;
+type TransactionPropertiesType = keyof TransactionPropertiesComponents;
+type TransactionPropertiesProps = {
+    [Type in TransactionPropertiesType]: {
+        type: Type;
+        props: ComponentProps<TransactionPropertiesComponents[Type]>;
+    };
+}[TransactionPropertiesType];
+declare function TransactionProperties({ type, props, }: TransactionPropertiesProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionSearchProps {
+    query: string;
+    setQuery: (query: string) => void;
+    children?: ReactNode;
+}
+declare function TransactionSearch({ query, setQuery, children, }: TransactionSearchProps): react_jsx_runtime.JSX.Element;
+
+interface FromToProps {
+    isLoading?: boolean;
+    from?: ReactNode;
+    to?: ReactNode;
+    className?: string;
+}
+declare function Transfer({ isLoading, from, to, className }: FromToProps): react_jsx_runtime.JSX.Element;
 
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
-    children: string | undefined;
+    children: ReactNode;
     size: TextSize;
     bold?: boolean;
+    tight?: boolean;
 }
-declare function BodyText({ size, children, bold, ...props }: BodyTextProps): react_jsx_runtime.JSX.Element;
+declare function BodyText({ size, children, bold, tight, ...props }: BodyTextProps): react_jsx_runtime.JSX.Element;
 
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
     bold?: boolean;
@@ -523,38 +1156,137 @@ interface HeadingTextProps {
     children: string;
     size: TextSize;
     bold?: boolean;
+    className?: string;
 }
-declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
+declare function HeadingText({ children, bold, size, className, }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
-type ChainData = {
-    networkName: string;
-    logoUrl: string;
-    bgColor: string;
-};
-type Token = {
-    symbol: string;
-    logoUrl: string;
-    bgColor: string;
-};
-declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
-    steps: SwapStep[];
-    handleClose?: () => void;
-    handleComplete?: () => void;
-    isOpen?: boolean;
-    socialLink?: string;
-    supportLink?: string;
-    fromToken: Token;
-    toToken: Token;
+interface BaseTransactionViewProps {
+    title?: string;
+    hash: string;
+    status: ActionStatus;
+    url?: string;
+    actions: TransactionActionProps[];
+    fees: FeesActionProps;
+}
+
+interface BridgeTransactionViewProps extends BaseTransactionViewProps {
+    amount: string;
+    token: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    address: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }: BridgeTransactionViewProps): react_jsx_runtime.JSX.Element;
+
+interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
+    title: string;
+    imageURI: string;
+    collection: {
+        imageURI: string;
+        name: string;
+    };
+    price: string;
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    marketplace: {
+        logoURI: string;
+        name: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    fromAddress: string;
+    toAddress: string;
+    boosted?: boolean;
+    tokenId: string;
+    nftType: string;
+    timeToComplete: string;
+}
+declare function BuyNFTTransactionView({ title, hash, status, url, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, actions, fees, }: BuyNFTTTransactionViewProps): react_jsx_runtime.JSX.Element;
+
+interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
+    image?: ReactNode;
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    address: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function InteractionTransactionView({ title, hash, status, url, image, chain, address, boosted, timeToComplete, actions, fees, }: InteractionTTransactionViewProps): react_jsx_runtime.JSX.Element;
+
+interface SwapTransactionViewProps extends BaseTransactionViewProps {
     fromAmount: string;
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
     toAmount: string;
-    fromChain: ChainData;
-    toChain: ChainData;
-    fromAddressFormatted: string;
-    toAddressFormatted: string;
-    swapState: SwapState;
-    estimatedTimeToComplete?: string;
-    footerButton?: SwapStepsCollapsedFooterButton;
-}): react_jsx_runtime.JSX.Element;
+    toToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    fromAddress: string;
+    toAddress: string;
+    exchangeRate: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, }: SwapTransactionViewProps): react_jsx_runtime.JSX.Element;
+
+declare const componentMap: {
+    readonly swap: typeof SwapTransactionView;
+    readonly buy_nft: typeof BuyNFTTransactionView;
+    readonly interaction: typeof InteractionTransactionView;
+    readonly bridge: typeof BridgeTransactionView;
+};
+type TransactionViewComponents = typeof componentMap;
+type TransactionViewType = keyof TransactionViewComponents;
+type TransactionViewProps = {
+    [Type in TransactionViewType]: {
+        type: Type;
+        props: ComponentProps<TransactionViewComponents[Type]>;
+    };
+}[TransactionViewType];
+declare function TransactionView({ type, props }: TransactionViewProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionViewLayoutProps extends ComponentProps<'div'> {
+    header: ReactNode;
+    properties: ReactNode;
+    actions: TransactionActionProps[];
+    fees: FeesActionProps;
+}
+declare function TransactionViewLayout({ header, properties, actions, fees, ...props }: TransactionViewLayoutProps): react_jsx_runtime.JSX.Element;
 
 type SquidTheme = {
     'content-100': string;
@@ -589,4 +1321,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, type HistoryItemStatus, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, STEP_ITEM_HEIGHT, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, ApproveAction, ArrowButton, AssetsButton, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, ExploreLayout, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, ListItem, LoadingProvider, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapHeader, type SwapHeaderProps, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, type ThemeType, Timestamp, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu };