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

package/dist/esm/types/components/badges/TransactionState.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { ActionStatus, TransactionStateVariant } from "../../types/components";
+import { type ReactNode } from "react";
+import { type ActionStatus, type TransactionStateVariant } from "../../types/components";
 export declare const statusTextClassMap: Record<ActionStatus, string>;
 interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
     status: ActionStatus;

package/dist/esm/types/components/buttons/TokenOnlyButton.d.ts

@@ -0,0 +1,18 @@
+import { type AssetsButtonVariant } from "../../types/components";
+import { type TooltipProps } from "../controls";
+interface TokenOnlyButtonProps {
+    token?: {
+        iconUrl: string;
+        fallbackIconUrl?: string;
+        symbol: string;
+        bgColor: string;
+        textColor: string;
+    };
+    onClick?: () => void;
+    variant?: AssetsButtonVariant;
+    isLoading?: boolean;
+    tooltip?: Omit<TooltipProps, "children">;
+    emptyTokenLabel?: string;
+}
+export declare function TokenOnlyButton({ token, onClick, variant, isLoading, tooltip, emptyTokenLabel, }: TokenOnlyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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/SwapConfiguration.d.ts

@@ -67,6 +67,7 @@ interface SwapConfigurationProps {
     fullHeight?: boolean;
     debounceInput?: boolean;
     showWalletButtonHeader?: boolean;
+    hideChainSelector?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, hideChainSelector, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/buttons/TokenOnlyButton.stories.d.ts

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenOnlyButton } from "../../components/buttons/TokenOnlyButton";
+declare const meta: Meta<typeof TokenOnlyButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PrimaryVariantLoading: Story;
+export declare const AccentVariantLoading: Story;
+export declare const PrimaryVariantEmpty: Story;
+export declare const AccentVariantEmpty: Story;
+export declare const TokenWithLightText: Story;
+export declare const TokenWithDarkText: Story;
+export declare const AvaxToken: Story;
+export declare const LongTokenSymbol: Story;
+export declare const Tooltip: Story;
+export declare const BrokenTokenImage: Story;
+export declare const BrokenTokenImageWithFallback: Story;
+export declare const BrokenTokenImageAndBrokenFallback: Story;
+export declare const AccentVariantWithToken: Story;

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: {