@0xsquid/ui 3.0.2 → 3.1.0

package/dist/cjs/types/components/badges/Drip.d.ts

@@ -0,0 +1,13 @@
+interface DripProps {
+    direction?: "horizontal" | "vertical";
+    to: {
+        logoURI: string;
+        bgColor: string;
+    };
+    from: {
+        logoURI: string;
+        bgColor: string;
+    };
+}
+export declare const Drip: ({ direction, from, to }: DripProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/badges/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./BadgeImage";
+export * from "./Drip";
 export * from "./IconLabel";
 export * from "./Image";
 export * from "./ImageGroup";

package/dist/cjs/types/components/buttons/index.d.ts

@@ -8,4 +8,3 @@ export * from "./FeeButton";
 export * from "./FilterButton";
 export * from "./IconButton";
 export * from "./SettingsButton";
-export * from "./SettingsButton";

package/dist/cjs/types/components/feedback/LoadingSkeleton.d.ts

@@ -11,8 +11,9 @@ export declare function LoadingSkeleton({ className, height, isLoading: isLoadin
 interface LoadingTextProps extends ComponentProps<"span"> {
     width?: string | [string, string];
     isLoading?: boolean;
+    showGradient?: boolean;
 }
-export declare function TextSkeleton({ className, width, children, isLoading, ...props }: LoadingTextProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function TextSkeleton({ className, width, children, isLoading, showGradient, ...props }: LoadingTextProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 interface LoadingBlockProps extends ComponentProps<"div"> {
     isLoading?: boolean;
 }

package/dist/cjs/types/components/icons/Arrow.d.ts

@@ -40,6 +40,9 @@ export declare function ArrowLeftIcon({ className, size, }: {
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowRightUpCircleFilledIcon({ className, }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightDownCircleIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowOutOfBoxIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronGrabberVerticalIcon({ size, className, }: {

package/dist/cjs/types/components/icons/Generic.d.ts

@@ -2,6 +2,10 @@ export declare function GhostIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function GhostCircleIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SettingsSliderIcon({ size, className, }: {
     size?: string;
     className?: string;

package/dist/cjs/types/components/icons/ThumbsUp.d.ts

@@ -1,3 +1,4 @@
-export declare function ThumbsUp({ fill }: {
+export declare function ThumbsUp({ size, fill, }: {
+    size?: string;
     fill?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/layout/AnimationWrapper.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import { Player } from "@lottiefiles/react-lottie-player";
-interface Props extends React.ComponentProps<typeof Player> {
+import { type LottieComponentProps } from "lottie-react";
+interface Props extends Omit<LottieComponentProps, "src"> {
+    style?: React.CSSProperties;
+    autoplay?: boolean;
+    loop?: boolean;
+    src: unknown;
 }
-export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimationWrapper: ({ src, ...playerProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare function AnimationCard({ children }: {
     children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/layout/Card.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CardProps {
+    children: React.ReactNode;
+    variant: "transparent";
+    className?: string;
+}
+export declare const Card: ({ variant, className, children, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/layout/Collapse.d.ts

@@ -8,5 +8,7 @@ interface CollapseProps extends ComponentProps<"div"> {
 export declare function Collapse({ collapsed, collapsedHeight, children, className, duration, contentsClassName, ...props }: CollapseProps): import("react/jsx-runtime").JSX.Element;
 interface SizeTransitionProps extends ComponentProps<"div"> {
 }
-export declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SizeTransition({ children, className, disableInitialAnimation, ...props }: SizeTransitionProps & {
+    disableInitialAnimation?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,15 @@
-import { ReactNode } from "react";
-import { ActionStatus } from "../../../types/components";
-interface TransactionHeaderLayoutProps {
-    isLoading?: boolean;
+import { type ReactNode } from "react";
+import { type ActionStatus } from "../../../types/components";
+interface BaseTransactionHeaderLayoutProps {
     status?: ActionStatus;
     title?: string;
-    image?: ReactNode;
+    media?: ReactNode;
     children?: ReactNode;
 }
-export declare function TransactionHeaderLayout({ isLoading, status, title, image, children, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
+type TransactionHeaderLayoutProps = (BaseTransactionHeaderLayoutProps & {
+    isLoading: true;
+}) | (Required<BaseTransactionHeaderLayoutProps> & {
+    isLoading?: false;
+});
+export declare function TransactionHeaderLayout({ isLoading, status, title, media, children, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/TransactionProperties/TransactionProperties.d.ts

@@ -1,13 +1,9 @@
 import { ComponentProps } from "react";
-import BridgeProperties from "./BridgeProperties";
-import { BuyNFTProperties } from "./BuyNFTProperties";
-import { InteractionProperties } from "./InteractionProperties";
-import { SwapProperties } from "./SwapProperties";
 declare const propertiesComponentsMap: {
-    readonly swap: typeof SwapProperties;
-    readonly buy_nft: typeof BuyNFTProperties;
-    readonly interaction: typeof InteractionProperties;
-    readonly bridge: typeof BridgeProperties;
+    readonly swap: any;
+    readonly buy_nft: any;
+    readonly interaction: any;
+    readonly bridge: any;
 };
 type TransactionPropertiesComponents = typeof propertiesComponentsMap;
 export type TransactionPropertiesType = keyof TransactionPropertiesComponents;

package/dist/cjs/types/components/layout/index.d.ts

@@ -2,6 +2,7 @@ export * from "./AnimationWrapper";
 export * from "./Announcement";
 export * from "./AppContainer";
 export * from "./Breadcrumb";
+export * from "./Card";
 export * from "./Collapse";
 export * from "./CollapsibleMenu";
 export * from "./DescriptionBlocks";
@@ -27,19 +28,8 @@ export * from "./Toast";
 export * from "./TokenDetailsView";
 export * from "./TokenPair";
 export * from "./TransactionFilters";
-export * from "./TransactionHeader/BridgeHeader";
-export * from "./TransactionHeader/BuyNFTHeader";
-export * from "./TransactionHeader/InteractionHeader";
-export * from "./TransactionHeader/ProfileHeader";
-export * from "./TransactionHeader/SwapHeader";
-export * from "./TransactionHeader/TransactionHeader";
 export * from "./TransactionHeader/TransactionHeaderLayout";
-export * from "./TransactionProperties/BridgeProperties";
-export * from "./TransactionProperties/BuyNFTProperties";
-export * from "./TransactionProperties/InteractionProperties";
 export * from "./TransactionProperties/PropertiesLayout";
-export * from "./TransactionProperties/SwapProperties";
-export * from "./TransactionProperties/TransactionProperties";
 export * from "./TransactionSearch";
 export * from "./Transfer";
 export * from "./TxProgressViewHeader";

package/dist/cjs/types/components/lists/TransactionAction/FeesAction.d.ts

@@ -1,5 +1,5 @@
-import { ActionStatus } from "../../../types/components";
-import { BaseActionProps } from "./BaseActionProps";
+import { type ActionStatus } from "../../../types/components";
+import { type BaseActionProps } from "./BaseActionProps";
 export interface FeesActionProps extends BaseActionProps {
     total: FeesRowProps;
     lines?: FeesRowProps[];

package/dist/cjs/types/components/lists/TransactionItem.d.ts

@@ -1,29 +1,44 @@
-import { type ReactNode } from "react";
-import { type ActionStatus } from "../../types/components";
-type TransactionItemVariant = "compact" | "full";
-interface TransactionItemType {
-    icon?: ReactNode;
-    name: string;
+import { type ActionStatus } from "../../types";
+import { type TransactionType } from "../../types/components";
+interface Token {
+    symbol: string;
+    bgColor: string;
+    logoURI: string;
 }
-interface TransactionItemProps {
-    className?: string;
-    isLoading?: boolean;
-    status?: ActionStatus;
-    image?: ReactNode;
-    type?: TransactionItemType;
-    hash?: string;
-    fromChain?: {
+interface NFT {
+    imageUrl: string;
+}
+interface BaseTransactionItemProps {
+    status: ActionStatus;
+    type: TransactionType;
+    hash: string;
+    toToken: Token;
+    fromToken: Token;
+    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;
+}
+interface BridgeTransactionProps extends BaseTransactionItemProps {
+    type: "bridge";
 }
-export declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): import("react/jsx-runtime").JSX.Element;
+export type TransactionItemProps = SwapTransactionProps | BuyNFTTransactionProps | BridgeTransactionProps;
+export declare const TransactionItem: (props: TransactionItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/TransactionItemSkeleton.d.ts

@@ -0,0 +1 @@
+export declare const TransactionItemSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/lists/index.d.ts

@@ -28,3 +28,4 @@ export * from "./TransactionAction/SwapAction";
 export * from "./TransactionAction/TransactionAction";
 export * from "./TransactionAction/WrapAction";
 export * from "./TransactionItem";
+export * from "./TransactionItemSkeleton";

package/dist/cjs/types/components/views/TransactionNotFoundView.d.ts

@@ -0,0 +1 @@
+export declare const TransactionNotFoundView: () => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/views/TransactionView/BaseTransactionViewProps.d.ts

@@ -1,10 +1,30 @@
-import { ActionStatus } from "../../../types/components";
-import { FeesActionProps, TransactionActionProps } from "../../lists/TransactionAction";
+import { type ActionStatus } from "../../../types/components";
+import { type FeesActionProps, type TransactionActionProps } from "../../lists/TransactionAction";
+export interface Token {
+    symbol: string;
+    bgColor: string;
+    logoURI: string;
+}
+export interface NFT {
+    imageUrl: string;
+    name: string;
+    imageURI: string;
+    collection: {
+        name: string;
+        imageURI: string;
+    };
+    tokenID: string;
+    nftType: string;
+}
+export interface Collection {
+    image: string;
+    name: string;
+}
 export interface BaseTransactionViewProps {
     title?: string;
     hash: string;
     status: ActionStatus;
     url?: string;
-    actions: TransactionActionProps[];
+    actions?: TransactionActionProps[];
     fees: FeesActionProps;
 }

package/dist/cjs/types/components/views/TransactionView/BridgeTransactionView.d.ts

@@ -1,5 +1,5 @@
-import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
-interface BridgeTransactionViewProps extends BaseTransactionViewProps {
+import { type BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
     amount: string;
     token: {
         logoURI: string;
@@ -9,14 +9,21 @@ interface BridgeTransactionViewProps extends BaseTransactionViewProps {
     fromChain: {
         logoURI: string;
         name: string;
+        bgColor: string;
     };
     toChain: {
         logoURI: string;
         name: string;
+        bgColor: string;
     };
     address: string;
     boosted?: boolean;
     timeToComplete: string;
 }
-export declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseBridgeTransactionViewProps> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+export declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/BuyNFTTransactionView.d.ts

@@ -1,11 +1,5 @@
-import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
-interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
-    title: string;
-    imageURI: string;
-    collection: {
-        imageURI: string;
-        name: string;
-    };
+import { type BaseTransactionViewProps, type NFT } from "./BaseTransactionViewProps";
+interface BaseBuyNFTTransactionViewProps extends BaseTransactionViewProps {
     price: string;
     token: {
         logoURI: string;
@@ -26,9 +20,13 @@ interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
     fromAddress: string;
     toAddress: string;
     boosted?: boolean;
-    tokenId: string;
-    nftType: string;
+    nft: NFT;
     timeToComplete: string;
 }
-export declare function BuyNFTTransactionView({ title, hash, status, url, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, actions, fees, }: BuyNFTTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+type BuyNFTTransactionViewProps = (BaseBuyNFTTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseBuyNFTTransactionViewProps> & {
+    isLoading: true;
+});
+export declare function BuyNFTTransactionView({ title, hash, status, url, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, nft, actions, fees, isLoading, }: BuyNFTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/InteractionTransactionView.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
-interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
-    image?: ReactNode;
+import { type ReactNode } from "react";
+import { type BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface BaseInteractionTransactionViewProps extends BaseTransactionViewProps {
+    image: ReactNode;
     chain: {
         logoURI: string;
         name: string;
@@ -10,5 +10,10 @@ interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
     boosted?: boolean;
     timeToComplete: string;
 }
-export declare function InteractionTransactionView({ title, hash, status, url, image, chain, address, boosted, timeToComplete, actions, fees, }: InteractionTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+type InteractionTransactionViewProps = (BaseInteractionTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<BaseInteractionTransactionViewProps> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+export declare function InteractionTransactionView({ title, hash, status, url, chain, address, boosted, timeToComplete, actions, fees, isLoading, }: InteractionTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/SwapTransactionView.d.ts

@@ -1,5 +1,5 @@
-import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
-interface SwapTransactionViewProps extends BaseTransactionViewProps {
+import type { BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface BaseSwapTransactionViewProps extends BaseTransactionViewProps {
     fromAmount: string;
     fromToken: {
         logoURI: string;
@@ -26,5 +26,10 @@ interface SwapTransactionViewProps extends BaseTransactionViewProps {
     boosted?: boolean;
     timeToComplete: string;
 }
-export declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
+    isLoading?: false;
+}) | (Partial<Omit<BaseSwapTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
+    isLoading: true;
+});
+export declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/TransactionView.d.ts

@@ -1,4 +1,5 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import { type TransactionType } from "../../../types/components";
 import { BridgeTransactionView } from "./BridgeTransactionView";
 import { BuyNFTTransactionView } from "./BuyNFTTransactionView";
 import { InteractionTransactionView } from "./InteractionTransactionView";
@@ -10,12 +11,16 @@ declare const componentMap: {
     readonly bridge: typeof BridgeTransactionView;
 };
 type TransactionViewComponents = typeof componentMap;
-export type TransactionViewType = keyof TransactionViewComponents;
 export 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];
-export declare function TransactionView({ type, props }: TransactionViewProps): import("react/jsx-runtime").JSX.Element;
+}[TransactionType];
+export declare function TransactionView({ type, isLoading, data, }: TransactionViewProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/cjs/types/components/views/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./DepositAddressView";
 export * from "./SwapProgressView";
 export * from "./TransactionView";
+export * from "./TransactionNotFoundView";

package/dist/cjs/types/core/utils.d.ts

@@ -88,4 +88,5 @@ export declare function hashStringToIndex(str: string, max: number): number;
 export declare function formatCSSValue(value: string | number): string;
 export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
 export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
+export declare const formatHash: (hash: string) => string;
 export {};

package/dist/cjs/types/stories/badges/Drip.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Drip } from "../../components/badges/Drip";
+declare const meta: Meta<typeof Drip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;

package/dist/cjs/types/stories/data/actions.d.ts

@@ -21,6 +21,7 @@ export declare const transactionActions: {
             chain: {
                 logoURI: string;
                 name: string;
+                bgColor: string;
             };
             wallet: {
                 imageURI: string;
@@ -43,6 +44,7 @@ export declare const transactionActions: {
             chain: {
                 logoURI: string;
                 name: string;
+                bgColor: string;
             };
             wallet: {
                 imageURI: string;
@@ -65,6 +67,7 @@ export declare const transactionActions: {
             chain: {
                 logoURI: string;
                 name: string;
+                bgColor: string;
             };
             wallet: {
                 imageURI: string;
@@ -89,6 +92,7 @@ export declare const transactionActions: {
             chain: {
                 logoURI: string;
                 name: string;
+                bgColor: string;
             };
             wallet: {
                 imageURI: string;
@@ -158,6 +162,7 @@ export declare const transactionActions: {
             chain: {
                 logoURI: string;
                 name: string;
+                bgColor: string;
             };
             provider: {
                 logoURI: string;

package/dist/cjs/types/stories/data/network.d.ts

@@ -19,10 +19,12 @@ export declare const chains: {
     ethereum: {
         logoURI: string;
         name: string;
+        bgColor: string;
     };
     optimism: {
         logoURI: string;
         name: string;
+        bgColor: string;
     };
 };
 export declare const providers: {

package/dist/cjs/types/stories/layout/Card.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Card } from "../../components/layout/Card";
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;