@0xsquid/ui 3.2.1 → 3.2.2-beta.1.0

package/dist/esm/types/components/controls/DatePicker.d.ts

@@ -0,0 +1,9 @@
+interface DatePickerProps {
+    date?: Date;
+    highlightDate?: Date;
+    setDate: (date: Date) => void;
+    hoveredDate?: Date;
+    setHoveredDate?: (date?: Date) => void;
+}
+export declare const DatePicker: ({ date, highlightDate, setDate, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -31,6 +31,10 @@ export declare function ChevronLargeRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronRightIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronRightSmallIcon({ className, size, }: {
     className?: string;
     size?: string;

package/dist/esm/types/components/icons/Clock.d.ts

@@ -18,3 +18,7 @@ export declare function TimeFliesIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TimeFliesSolidIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/NotAllowed.d.ts

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

package/dist/esm/types/components/icons/Tick.d.ts

@@ -1,3 +1,7 @@
 export declare function Tick({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TickLarge({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/TransactionFilters/ChainsFilter.d.ts

@@ -0,0 +1,15 @@
+import { type ChainTypeFilter } from "../../../types/components";
+export interface ChainData {
+    iconURI: string;
+    id: string;
+    name: string;
+}
+interface ChainsFilterProps {
+    chainType: ChainTypeFilter;
+    setChainType: (chainType: ChainTypeFilter) => void;
+    chain?: ChainData;
+    handleChain: (chain?: ChainData) => void;
+    chains: ChainData[];
+}
+export declare function ChainsFilter({ chainType, setChainType, chain, handleChain, chains, }: ChainsFilterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/TransactionFilters/DateFilters.d.ts

@@ -0,0 +1,8 @@
+interface DateFilterProps {
+    fromDate?: Date;
+    toDate?: Date;
+    setFromDate: (value?: Date) => void;
+    setToDate: (value?: Date) => void;
+}
+export declare function DateFilters({ fromDate, setFromDate, toDate, setToDate, }: DateFilterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/TransactionFilters/FilterSection.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface FilterSectionProps {
+    title: string;
+    children: React.ReactNode;
+    collapsed: boolean;
+    handleExpand: () => void;
+    handleCollapse: () => void;
+}
+export declare function FilterSection({ title, children, collapsed, handleCollapse, handleExpand, }: FilterSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/layout/TransactionFilters/StatusFilter.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface StatusFiltersProps {
+    status?: string;
+    statuses?: Array<{
+        label: string;
+        value: string;
+        icon: React.ReactNode;
+    }>;
+    handleStatus: (status?: string) => void;
+}
+export declare function StatusFilters({ handleStatus, status, statuses, }: StatusFiltersProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/types/components/layout/TransactionFilters/TransactionFilters.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import "react-day-picker/dist/style.css";
+import { type ChainTypeFilter } from "../../../types/components";
+import { type ChainData } from "./ChainsFilter";
+interface TransactionFiltersProps {
+    chainType: ChainTypeFilter;
+    setChainType: (chainType: ChainTypeFilter) => void;
+    chain?: ChainData;
+    handleChain: (chain?: ChainData) => void;
+    fromDate?: Date;
+    handleFromDate: (fromDate?: Date) => void;
+    toDate?: Date;
+    handleToDate: (toDate?: Date) => void;
+    status?: string;
+    statuses?: Array<{
+        label: string;
+        value: string;
+        icon: React.ReactNode;
+    }>;
+    handleStatus: (status?: string) => void;
+    chains: ChainData[];
+}
+export declare function TransactionFilters({ chainType, setChainType, chain, handleChain, fromDate, handleFromDate, toDate, handleToDate, status, statuses, handleStatus, chains, }: TransactionFiltersProps): import("react/jsx-runtime").JSX.Element;
+interface CheckboxProps {
+    checked: boolean;
+    className?: string;
+}
+export declare function Checkbox({ checked, className }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -27,7 +27,7 @@ export * from "./SwapStepsCollapsed";
 export * from "./Toast";
 export * from "./TokenDetailsView";
 export * from "./TokenPair";
-export * from "./TransactionFilters";
+export * from "./TransactionFilters/TransactionFilters";
 export * from "./TransactionHeader/TransactionHeaderLayout";
 export * from "./TransactionProperties/PropertiesLayout";
 export * from "./TransactionSearch";

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

@@ -25,6 +25,7 @@ interface BaseTransactionItemProps {
     fromAmount: string;
     toAmount: string;
     timestamp: number;
+    timeToComplete: string;
 }
 interface SwapTransactionProps extends BaseTransactionItemProps {
     type: "swap";

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

@@ -27,4 +27,6 @@ export interface BaseTransactionViewProps {
     url?: string;
     actions?: TransactionActionProps[];
     fees: FeesActionProps;
+    timeToComplete: string;
+    timestamp: number;
 }

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

@@ -20,7 +20,8 @@ interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
         name: string;
         bgColor: string;
     };
-    address: string;
+    fromAddress: string;
+    toAddress: string;
     boosted?: boolean;
     timeToComplete: string;
     fromLink?: string;
@@ -33,5 +34,5 @@ type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
 }) | (Partial<Omit<BaseBridgeTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-export declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -28,5 +28,5 @@ type BuyNFTTransactionViewProps = (BaseBuyNFTTransactionViewProps & {
 }) | (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 declare function BuyNFTTransactionView({ title, hash, status, url, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, timestamp, nft, actions, fees, isLoading, }: BuyNFTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,5 +15,5 @@ type InteractionTransactionViewProps = (BaseInteractionTransactionViewProps & {
 }) | (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 declare function InteractionTransactionView({ title, hash, status, url, chain, address, timeToComplete, timestamp, actions, fees, isLoading, }: InteractionTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/views/TransactionView/Properties/TimeToCompleteProperty.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    timeToComplete: string;
+}
+export declare const TimeToCompleteProperty: ({ timeToComplete }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -18,7 +18,7 @@ export declare function debounce<F extends AnyFunction>(func: F, delay: number):
 export declare const formatDuration: (elapsedTime: number) => string;
 export declare function formatCountdown(seconds: number): string;
 export declare const formatTime: (timestampSeconds: number) => string;
-export declare const formatRelativeTime: (timestampSeconds: number) => string;
+export declare const formatRelativeTime: (timestamp: number) => string;
 export declare const formatRelativeDate: (timestampSeconds: number) => string;
 export declare function capitalize(text: string): string;
 type Falsy = false | null | undefined | 0 | "";

package/dist/esm/types/hooks/useTimer.d.ts

@@ -1,4 +1,5 @@
-export declare const useTimer: ({ immediateStart, }: {
+export declare const useTimer: ({ startTime: _startTime, immediateStart, }: {
+    startTime?: number;
     immediateStart?: boolean;
 }) => {
     timer: string;

package/dist/esm/types/stories/layout/TransactionFilters.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react/*";
+import { type Meta, type StoryObj } from "@storybook/react/*";
 declare function TransactionFiltersWithState(): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof TransactionFiltersWithState>;
 export default meta;

package/dist/esm/types/stories/lists/TransactionItem.stories.d.ts

@@ -30,6 +30,7 @@ export declare const Swap: {
             symbol: string;
         };
         timestamp: number;
+        timeToComplete: string;
     };
 };
 export declare const SwapOngoing: {
@@ -60,6 +61,34 @@ export declare const SwapOngoing: {
             symbol: string;
         };
         timestamp: number;
+        timeToComplete: string;
+    };
+};
+export declare const SwapOngoingMissingToToken: {
+    args: {
+        toToken: undefined;
+        status: string;
+        type: string;
+        hash: string;
+        fromChain: {
+            logoURI: string;
+            name: string;
+            bgColor: string;
+        };
+        toChain: {
+            logoURI: string;
+            name: string;
+            bgColor: string;
+        };
+        fromAmount: string;
+        fromToken: {
+            logoURI: string;
+            bgColor: string;
+            symbol: string;
+        };
+        toAmount: string;
+        timestamp: number;
+        timeToComplete: string;
     };
 };
 export declare const SwapError: {
@@ -90,6 +119,7 @@ export declare const SwapError: {
             symbol: string;
         };
         timestamp: number;
+        timeToComplete: string;
     };
 };
 export declare const SwapIncomplete: {
@@ -120,6 +150,7 @@ export declare const SwapIncomplete: {
             symbol: string;
         };
         timestamp: number;
+        timeToComplete: string;
     };
 };
 export declare const BuyNft: {

package/dist/esm/types/stories/views/TransactionView.stories.d.ts

@@ -165,6 +165,165 @@ export declare const Swap: {
         };
     };
 };
+export declare const SwapMissingToToken: {
+    args: {
+        type: string;
+        data: {
+            toToken: undefined;
+            title: string;
+            hash: string;
+            status: string;
+            url: string;
+            fromAmount: string;
+            toAmount: string;
+            fromToken: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            fromChain: {
+                logoURI: string;
+                name: string;
+                bgColor: string;
+            };
+            toChain: {
+                logoURI: string;
+                name: string;
+                bgColor: string;
+            };
+            fromAddress: string;
+            toAddress: string;
+            fromLink: string;
+            toLink: string;
+            exchangeRate: string;
+            timeToComplete: string;
+            actions: ({
+                type: "success";
+                props: {
+                    status: "success";
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "receive_tokens";
+                props: {
+                    status: "executed";
+                    amount: string;
+                    token: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    wallet: {
+                        imageURI: string;
+                        address: string;
+                        url: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "send_tokens";
+                props: {
+                    status: "executed";
+                    amount: string;
+                    token: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    wallet: {
+                        imageURI: string;
+                        address: string;
+                        url: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "swap";
+                props: {
+                    status: "executed";
+                    fromToken: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    toToken: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    provider: {
+                        logoURI: string;
+                        name: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "bridge";
+                props: {
+                    status: "executed";
+                    token: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    provider: {
+                        logoURI: string;
+                        name: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "start";
+                props: {
+                    status: "executed";
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            })[];
+            fees: {
+                status: "executed";
+                total: {
+                    label: string;
+                    usd: number;
+                    amount: number;
+                    symbol: string;
+                };
+                lines: {
+                    label: string;
+                    usd: number;
+                    amount: number;
+                    symbol: string;
+                }[];
+            };
+        };
+    };
+};
 export declare const BuyNFT: {
     args: {
         type: string;
@@ -513,7 +672,164 @@ export declare const Bridge: {
                 name: string;
                 bgColor: string;
             };
-            address: string;
+            fromAddress: string;
+            toAddress: string;
+            timeToComplete: string;
+            actions: ({
+                type: "success";
+                props: {
+                    status: "success";
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "receive_nft";
+                props: {
+                    status: "executed";
+                    nft: {
+                        imageURI: string;
+                        name: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    wallet: {
+                        imageURI: string;
+                        address: string;
+                        url: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "send_tokens";
+                props: {
+                    status: "executed";
+                    amount: string;
+                    token: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    wallet: {
+                        imageURI: string;
+                        address: string;
+                        url: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "swap";
+                props: {
+                    status: "executed";
+                    fromToken: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    toToken: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    provider: {
+                        logoURI: string;
+                        name: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "bridge";
+                props: {
+                    status: "executed";
+                    token: {
+                        logoURI: string;
+                        bgColor: string;
+                        symbol: string;
+                    };
+                    chain: {
+                        logoURI: string;
+                        name: string;
+                        bgColor: string;
+                    };
+                    provider: {
+                        logoURI: string;
+                        name: string;
+                    };
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            } | {
+                type: "start";
+                props: {
+                    status: "executed";
+                    timestamp: number;
+                    hash: string;
+                    url: string;
+                };
+            })[];
+            fees: {
+                status: "executed";
+                total: {
+                    label: string;
+                    usd: number;
+                    amount: number;
+                    symbol: string;
+                };
+                lines: {
+                    label: string;
+                    usd: number;
+                    amount: number;
+                    symbol: string;
+                }[];
+            };
+        };
+    };
+};
+export declare const BridgeMissingToToken: {
+    args: {
+        type: string;
+        data: {
+            toToken: undefined;
+            title: string;
+            hash: string;
+            url: string;
+            status: string;
+            fromAmount: string;
+            toAmount: string;
+            fromToken: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            fromLink: string;
+            toLink: string;
+            fromChain: {
+                logoURI: string;
+                name: string;
+                bgColor: string;
+            };
+            toChain: {
+                logoURI: string;
+                name: string;
+                bgColor: string;
+            };
+            fromAddress: string;
+            toAddress: string;
             timeToComplete: string;
             actions: ({
                 type: "success";