@0xsquid/ui 3.1.0 → 3.2.1

package/dist/cjs/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/cjs/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/cjs/types/components/icons/Arrow.d.ts

@@ -49,6 +49,11 @@ export declare function ChevronGrabberVerticalIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SquareArrowTopRightIcon({ className, size, strokeWidth, }: {
+    className?: string;
+    size?: string;
+    strokeWidth?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SquareArrowTopRight2Icon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 export declare function Timeline({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Timeline {
     var ArrowDown: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type LottieComponentProps } from "lottie-react";
-interface Props extends Omit<LottieComponentProps, "src"> {
+interface Props extends Omit<LottieComponentProps, "src" | "animationData"> {
     style?: React.CSSProperties;
     autoplay?: boolean;
     loop?: boolean;

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

@@ -7,7 +7,7 @@ interface HashLinkProps {
     url?: string;
     className?: string;
     formattedHash?: string;
-    copyIconSize?: string;
+    size?: "default" | "small";
 }
-export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, copyIconSize, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, size, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,6 @@
-import { ComponentProps } from "react";
-export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    size?: "default" | "small" | "large";
+}
+export declare function PipeSeparator({ className, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/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/cjs/types/components/lists/TransactionAction/FeesAction.d.ts

@@ -18,12 +18,13 @@ interface FeesLinesProps {
     lines?: FeesRowProps[];
     showTimeline?: boolean;
 }
-export declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeesLines({ status, lines }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
 interface FeesRowProps {
     label: string;
     amount: number | string;
     symbol: string;
     usd: number | string;
     collapsed?: boolean;
+    className?: string;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { BaseActionProps } from "./BaseActionProps";
+import { type BaseActionProps } from "./BaseActionProps";
 interface SuccessActionProps extends BaseActionProps {
     description?: string;
     timestamp?: number;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 import { ApproveAction } from "./ApproveAction";
 import { BridgeAction } from "./BridgeAction";
 import { FeesAction } from "./FeesAction";

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

@@ -10,7 +10,7 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, isBridgeTransaction, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -31,5 +31,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     refundTokenSymbol?: string;
     addGasLink?: string;
     isSendTransaction?: boolean;
+    isBridgeTransaction?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
 import { type BaseTransactionViewProps } from "./BaseTransactionViewProps";
 interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
-    amount: string;
-    token: {
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    toToken: {
         logoURI: string;
         bgColor: string;
         symbol: string;
@@ -19,11 +23,15 @@ interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
     address: string;
     boosted?: boolean;
     timeToComplete: string;
+    fromLink?: string;
+    toLink?: string;
+    fromAmount: string;
+    toAmount: string;
 }
 type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
     isLoading?: false;
-}) | (Partial<BaseBridgeTransactionViewProps> & BaseTransactionViewProps & {
+}) | (Partial<Omit<BaseBridgeTransactionViewProps, keyof BaseTransactionViewProps>> & 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 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 {};

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

@@ -20,16 +20,18 @@ interface BaseSwapTransactionViewProps extends BaseTransactionViewProps {
         logoURI: string;
         name: string;
     };
+    fromLink?: string;
+    toLink?: string;
     fromAddress: string;
     toAddress: string;
     exchangeRate: string;
     boosted?: boolean;
     timeToComplete: string;
 }
-export type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
+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 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 {};

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

@@ -15,11 +15,11 @@ export type TransactionViewProps = {
     [Type in TransactionType]: {
         type: Type;
         isLoading?: false;
-        data: ComponentProps<TransactionViewComponents[Type]>;
+        data: Omit<Partial<ComponentProps<TransactionViewComponents[Type]>>, "isLoading">;
     } | {
         type: Type;
         isLoading: true;
-        data?: Partial<ComponentProps<TransactionViewComponents[Type]>>;
+        data?: Omit<Partial<ComponentProps<TransactionViewComponents[Type]>>, "isLoading">;
     };
 }[TransactionType];
 export declare function TransactionView({ type, isLoading, data, }: TransactionViewProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/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/cjs/types/stories/views/SwapProgressView.stories.d.ts

@@ -16,3 +16,4 @@ export declare const NeedsGas: Story;
 export declare const PartialSuccess: Story;
 export declare const Progress: Story;
 export declare const SendTransaction: Story;
+export declare const BridgeTransaction: Story;

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

@@ -34,8 +34,9 @@ export declare const Swap: {
             };
             fromAddress: string;
             toAddress: string;
+            fromLink: string;
+            toLink: string;
             exchangeRate: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";
@@ -214,7 +215,6 @@ export declare const BuyNFT: {
             };
             fromAddress: string;
             toAddress: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";
@@ -349,7 +349,6 @@ export declare const Interaction: {
             hash: string;
             status: string;
             url: string;
-            boosted: boolean;
             chain: {
                 logoURI: string;
                 name: string;
@@ -490,12 +489,20 @@ export declare const Bridge: {
             hash: string;
             url: string;
             status: string;
-            amount: string;
-            token: {
+            fromAmount: string;
+            toAmount: string;
+            toToken: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            fromToken: {
                 logoURI: string;
                 bgColor: string;
                 symbol: string;
             };
+            fromLink: string;
+            toLink: string;
             fromChain: {
                 logoURI: string;
                 name: string;
@@ -507,7 +514,6 @@ export declare const Bridge: {
                 bgColor: string;
             };
             address: string;
-            boosted: boolean;
             timeToComplete: string;
             actions: ({
                 type: "success";

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

@@ -29,7 +29,7 @@ export declare enum SwapState {
 }
 export type DetailsToolbarState = "full" | "loading" | "empty" | "error";
 export type ThemeType = "light" | "dark";
-export type ActionStatus = "pending" | "waiting" | "ongoing" | "executed" | "success" | "error" | "warning";
+export type ActionStatus = "pending" | "waiting" | "ongoing" | "executed" | "success" | "error" | "warning" | "refunded" | "troubleshoot";
 export type InputMode = "token" | "price";
 export type TransactionStateVariant = "full" | "compact" | "small";
 export type TransactionType = "swap" | "buy_nft" | "interaction" | "bridge";