@0xsquid/ui 3.0.2 → 3.1.0

package/dist/index.d.ts

@@ -2,7 +2,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, ComponentProps, ChangeEvent } from 'react';
-import { Player } from '@lottiefiles/react-lottie-player';
+import { LottieComponentProps } from 'lottie-react';
 import * as motion_react from 'motion/react';
 import { motion } from 'motion/react';
 import { Config } from 'tailwindcss';
@@ -40,6 +40,7 @@ declare enum SwapState {
 type ThemeType = "light" | "dark";
 type ActionStatus = "pending" | "waiting" | "ongoing" | "executed" | "success" | "error" | "warning";
 type TransactionStateVariant = "full" | "compact" | "small";
+type TransactionType = "swap" | "buy_nft" | "interaction" | "bridge";
 type TokenPairVariant = "horizontal" | "vertical";
 type TokenPairSize = "small" | "medium";
 type ImageSize = "small" | "medium" | "large" | "xlarge" | "xxlarge";
@@ -77,6 +78,19 @@ interface BadgeImageProps {
 }
 declare function BadgeImage({ image, badge, extraMarginForBadge, className, }: BadgeImageProps): false | react_jsx_runtime.JSX.Element;
 
+interface DripProps {
+    direction?: "horizontal" | "vertical";
+    to: {
+        logoURI: string;
+        bgColor: string;
+    };
+    from: {
+        logoURI: string;
+        bgColor: string;
+    };
+}
+declare const Drip: ({ direction, from, to }: DripProps) => react_jsx_runtime.JSX.Element;
+
 interface IconLabelProps {
     src?: string;
     children?: ReactNode;
@@ -104,8 +118,9 @@ declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp,
 interface LoadingTextProps$1 extends ComponentProps<"span"> {
     width?: string | [string, string];
     isLoading?: boolean;
+    showGradient?: boolean;
 }
-declare function TextSkeleton({ className, width, children, isLoading, ...props }: LoadingTextProps$1): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function TextSkeleton({ className, width, children, isLoading, showGradient, ...props }: LoadingTextProps$1): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 interface LoadingBlockProps extends ComponentProps<"div"> {
     isLoading?: boolean;
 }
@@ -180,7 +195,7 @@ declare enum UserInputType {
     USD = 1
 }
 interface UseNumericInputOptions {
-    token: Pick<Token$3, "decimals" | "price">;
+    token: Pick<Token$4, "decimals" | "price">;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
     formatIfVerySmall: {
@@ -224,13 +239,13 @@ interface TooltipProps {
 }
 declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
 
-interface Token$3 {
+interface Token$4 {
     price: number;
     symbol: string;
     decimals: number;
 }
 interface NumericInputProps {
-    token: Token$3;
+    token: Token$4;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
     formatIfVerySmall?: {
@@ -429,6 +444,9 @@ declare function ArrowLeftIcon({ className, size, }: {
     size?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function ArrowRightUpCircleIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowRightUpCircleFilledIcon({ className, }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function ArrowRightDownCircleIcon(): react_jsx_runtime.JSX.Element;
 declare function ArrowOutOfBoxIcon(): react_jsx_runtime.JSX.Element;
 declare function ChevronGrabberVerticalIcon({ size, className, }: {
@@ -636,6 +654,10 @@ declare function GhostIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function GhostCircleIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function SettingsSliderIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -930,7 +952,8 @@ declare function TagIcon({ size }: {
 }): react_jsx_runtime.JSX.Element;
 declare function TagIconFilled(): react_jsx_runtime.JSX.Element;
 
-declare function ThumbsUp({ fill }: {
+declare function ThumbsUp({ size, fill, }: {
+    size?: string;
     fill?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -984,9 +1007,13 @@ declare function CrossedOutSunSolidIcon({ size, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-interface Props extends React.ComponentProps<typeof Player> {
+interface Props extends Omit<LottieComponentProps, "src"> {
+    style?: React.CSSProperties;
+    autoplay?: boolean;
+    loop?: boolean;
+    src: unknown;
 }
-declare const AnimationWrapper: (playerProps: Props) => react_jsx_runtime.JSX.Element;
+declare const AnimationWrapper: ({ src, ...playerProps }: Props) => react_jsx_runtime.JSX.Element;
 declare function AnimationCard({ children }: {
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -1013,6 +1040,13 @@ declare function Breadcrumb({ children, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface CardProps {
+    children: React.ReactNode;
+    variant: "transparent";
+    className?: string;
+}
+declare const Card: ({ variant, className, children, }: CardProps) => react_jsx_runtime.JSX.Element;
+
 interface CollapseProps extends ComponentProps<"div"> {
     collapsed: boolean;
     collapsedHeight?: number;
@@ -1022,7 +1056,9 @@ interface CollapseProps extends ComponentProps<"div"> {
 declare function Collapse({ collapsed, collapsedHeight, children, className, duration, contentsClassName, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
 interface SizeTransitionProps extends ComponentProps<"div"> {
 }
-declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): react_jsx_runtime.JSX.Element;
+declare function SizeTransition({ children, className, disableInitialAnimation, ...props }: SizeTransitionProps & {
+    disableInitialAnimation?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleMenuProps {
     menuRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -1324,7 +1360,7 @@ interface ToastProps {
 }
 declare function Toast({ headerContent, actionsContent, description, chipLabel, title, }: ToastProps): react_jsx_runtime.JSX.Element;
 
-interface Token$2 {
+interface Token$3 {
     address: string;
     name: string;
     symbol: string;
@@ -1340,7 +1376,7 @@ type Timeframe = "1H" | "1D" | "1W" | "1Y";
 interface TokenDetailsViewProps {
     isOpen: boolean;
     onClose: () => void;
-    token: Token$2;
+    token: Token$3;
     chain: Chain;
     tokenPrice: string;
     priceChange: string | number;
@@ -1402,151 +1438,18 @@ interface TransactionFiltersProps {
 }
 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 {
-    isLoading?: boolean;
+interface BaseTransactionHeaderLayoutProps {
     status?: ActionStatus;
     title?: string;
-    image?: ReactNode;
+    media?: ReactNode;
     children?: ReactNode;
 }
-declare function TransactionHeaderLayout({ isLoading, 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 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;
+type TransactionHeaderLayoutProps = (BaseTransactionHeaderLayoutProps & {
+    isLoading: true;
+}) | (Required<BaseTransactionHeaderLayoutProps> & {
+    isLoading?: false;
+});
+declare function TransactionHeaderLayout({ isLoading, status, title, media, children, }: TransactionHeaderLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface PropertiesLayoutProps {
     children?: ReactNode;
@@ -1554,51 +1457,6 @@ interface PropertiesLayoutProps {
 }
 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;
@@ -2196,32 +2054,49 @@ declare function TransactionAction({ type, props }: TransactionActionProps): rea
 
 declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
 
-type TransactionItemVariant = "compact" | "full";
-interface TransactionItemType {
-    icon?: ReactNode;
-    name: string;
+interface Token$2 {
+    symbol: string;
+    bgColor: string;
+    logoURI: string;
 }
-interface TransactionItemProps {
-    className?: string;
-    isLoading?: boolean;
-    status?: ActionStatus;
-    image?: ReactNode;
-    type?: TransactionItemType;
-    hash?: string;
-    fromChain?: {
+interface NFT$1 {
+    imageUrl: string;
+}
+interface BaseTransactionItemProps {
+    status: ActionStatus;
+    type: TransactionType;
+    hash: string;
+    toToken: Token$2;
+    fromToken: Token$2;
+    fromChain: {
         logoURI: string;
         name: string;
     };
-    toChain?: {
+    toChain: {
         logoURI: string;
         name: string;
     };
-    fromAmount?: string;
-    toAmount?: string;
-    timestamp?: number;
-    variant?: TransactionItemVariant;
+    fromAmount: string;
+    toAmount: string;
+    timestamp: number;
+}
+interface SwapTransactionProps extends BaseTransactionItemProps {
+    type: "swap";
+}
+interface BuyNFTTransactionProps extends Omit<BaseTransactionItemProps, "toToken"> {
+    type: "buy_nft";
+    toToken: {
+        symbol: string;
+    };
+    nft: NFT$1;
+}
+interface BridgeTransactionProps extends BaseTransactionItemProps {
+    type: "bridge";
 }
-declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
+type TransactionItemProps = SwapTransactionProps | BuyNFTTransactionProps | BridgeTransactionProps;
+declare const TransactionItem: (props: TransactionItemProps) => react_jsx_runtime.JSX.Element;
+
+declare const TransactionItemSkeleton: () => react_jsx_runtime.JSX.Element;
 
 type TabSize = "small" | "large";
 interface TabsProps {
@@ -2336,22 +2211,31 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
     isSendTransaction?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
+interface NFT {
+    imageUrl: string;
+    name: string;
+    imageURI: string;
+    collection: {
+        name: string;
+        imageURI: string;
+    };
+    tokenID: string;
+    nftType: string;
+}
+interface Collection {
+    image: string;
+    name: string;
+}
 interface BaseTransactionViewProps {
     title?: string;
     hash: string;
     status: ActionStatus;
     url?: string;
-    actions: TransactionActionProps[];
+    actions?: TransactionActionProps[];
     fees: FeesActionProps;
 }
 
-interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
-    title: string;
-    imageURI: string;
-    collection: {
-        imageURI: string;
-        name: string;
-    };
+interface BaseBuyNFTTransactionViewProps extends BaseTransactionViewProps {
     price: string;
     token: {
         logoURI: string;
@@ -2372,14 +2256,18 @@ interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
     fromAddress: string;
     toAddress: string;
     boosted?: boolean;
-    tokenId: string;
-    nftType: string;
+    nft: NFT;
     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;
+type BuyNFTTransactionViewProps = (BaseBuyNFTTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseBuyNFTTransactionViewProps> & {
+    isLoading: true;
+});
+declare function BuyNFTTransactionView({ title, hash, status, url, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, nft, actions, fees, isLoading, }: BuyNFTTransactionViewProps): react_jsx_runtime.JSX.Element;
 
-interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
-    image?: ReactNode;
+interface BaseInteractionTransactionViewProps extends BaseTransactionViewProps {
+    image: ReactNode;
     chain: {
         logoURI: string;
         name: string;
@@ -2388,9 +2276,14 @@ interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
     boosted?: boolean;
     timeToComplete: string;
 }
-declare function InteractionTransactionView({ title, hash, status, url, image, chain, address, boosted, timeToComplete, actions, fees, }: InteractionTTransactionViewProps): react_jsx_runtime.JSX.Element;
+type InteractionTransactionViewProps = (BaseInteractionTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseInteractionTransactionViewProps> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+declare function InteractionTransactionView({ title, hash, status, url, chain, address, boosted, timeToComplete, actions, fees, isLoading, }: InteractionTransactionViewProps): react_jsx_runtime.JSX.Element;
 
-interface SwapTransactionViewProps extends BaseTransactionViewProps {
+interface BaseSwapTransactionViewProps extends BaseTransactionViewProps {
     fromAmount: string;
     fromToken: {
         logoURI: string;
@@ -2417,9 +2310,14 @@ interface SwapTransactionViewProps extends BaseTransactionViewProps {
     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;
+type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<Omit<BaseSwapTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }: SwapTransactionViewProps): react_jsx_runtime.JSX.Element;
 
-interface BridgeTransactionViewProps extends BaseTransactionViewProps {
+interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
     amount: string;
     token: {
         logoURI: string;
@@ -2429,16 +2327,23 @@ interface BridgeTransactionViewProps extends BaseTransactionViewProps {
     fromChain: {
         logoURI: string;
         name: string;
+        bgColor: string;
     };
     toChain: {
         logoURI: string;
         name: string;
+        bgColor: 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;
+type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseBridgeTransactionViewProps> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }: BridgeTransactionViewProps): react_jsx_runtime.JSX.Element;
 
 declare const componentMap: {
     readonly swap: typeof SwapTransactionView;
@@ -2447,14 +2352,18 @@ declare const componentMap: {
     readonly bridge: typeof BridgeTransactionView;
 };
 type TransactionViewComponents = typeof componentMap;
-type TransactionViewType = keyof TransactionViewComponents;
 type TransactionViewProps = {
-    [Type in TransactionViewType]: {
+    [Type in TransactionType]: {
         type: Type;
-        props: ComponentProps<TransactionViewComponents[Type]>;
+        isLoading?: false;
+        data: ComponentProps<TransactionViewComponents[Type]>;
+    } | {
+        type: Type;
+        isLoading: true;
+        data?: Partial<ComponentProps<TransactionViewComponents[Type]>>;
     };
-}[TransactionViewType];
-declare function TransactionView({ type, props }: TransactionViewProps): react_jsx_runtime.JSX.Element;
+}[TransactionType];
+declare function TransactionView({ type, isLoading, data, }: TransactionViewProps): react_jsx_runtime.JSX.Element | null;
 
 interface TransactionViewLayoutProps extends ComponentProps<"div"> {
     isLoading?: boolean;
@@ -2465,6 +2374,8 @@ interface TransactionViewLayoutProps extends ComponentProps<"div"> {
 }
 declare function TransactionViewLayout({ isLoading, header, properties, actions, fees, ...props }: TransactionViewLayoutProps): react_jsx_runtime.JSX.Element;
 
+declare const TransactionNotFoundView: () => react_jsx_runtime.JSX.Element;
+
 interface ThemeProviderProps extends React.ComponentProps<"div"> {
     theme?: Theme;
     children?: React.ReactNode;
@@ -16624,4 +16535,4 @@ declare const transactionRejectedAnimation: {
     markers: never[];
 };
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, type AllOrNone, AnimateNumber, AnimationCard, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, BoostBadge, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, LoadingText, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, type NumericInputProps, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type Props$1 as Props, type PublicTheme, PunkIcon, QrCode, QrCodeIcon, QrCodeModal, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, type Token$3 as Token, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, 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, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, type AllOrNone, AnimateNumber, AnimationCard, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleFilledIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, BoostBadge, BorderedContainer, Breadcrumb, BridgeAction, BrokenHeartIcon, BubblesIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, Card, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, type Collection, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, Drip, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostCircleIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, LoadingText, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, type NFT, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, type NumericInputProps, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type Props$1 as Props, type PublicTheme, PunkIcon, QrCode, QrCodeIcon, QrCodeModal, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapIcon, SwapInputsIcon, SwapProgressView, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, type SwapTransactionViewProps, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeaderLayout, TransactionItem, type TransactionItemProps, TransactionItemSkeleton, TransactionNotFoundView, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "author": "",
   "license": "MIT",
   "resolutions": {
@@ -29,12 +29,12 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@lottiefiles/react-lottie-player": "3.5.0",
     "bignumber.js": "9.1.2",
     "clsx": "2.1.1",
     "color": "4.2.3",
     "date-fns": "^3.6.0",
     "deepmerge": "4.3.1",
+    "lottie-react": "^2.4.1",
     "motion": "^12.12.1",
     "react-day-picker": "^8.10.1",
     "react-device-detect": "2.2.3",
@@ -58,7 +58,6 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "rollup-plugin-copy": "^3.5.0",
     "@storybook/addon-essentials": "^8.0.1",
     "@storybook/addon-interactions": "^8.0.1",
     "@storybook/addon-links": "^8.0.1",
@@ -88,6 +87,7 @@
     "prettier-plugin-tailwindcss": "0.5.12",
     "release-it": "17.2.1",
     "rollup": "^4.17.2",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "4.0.2",

package/dist/cjs/types/components/layout/TransactionHeader/BridgeHeader.d.ts

@@ -1,11 +0,0 @@
-import { type ActionStatus } from "../../../types/components";
-interface BridgeHeaderProps {
-    tokenLogoURI: string;
-    chainLogoURI: string;
-    title?: string;
-    hash: string;
-    url?: string;
-    status: ActionStatus;
-}
-export declare function BridgeHeader({ tokenLogoURI, chainLogoURI, title, hash, url, status, }: BridgeHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};