@0xsquid/ui 0.16.2 → 0.17.1-beta.0

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

@@ -0,0 +1,10 @@
+import { ComponentProps, ReactNode } from 'react';
+import { FeesActionProps, TransactionActionProps } from '../../lists/TransactionAction';
+interface TransactionViewLayoutProps extends ComponentProps<'div'> {
+    header: ReactNode;
+    properties: ReactNode;
+    actions: TransactionActionProps[];
+    fees: FeesActionProps;
+}
+export declare function TransactionViewLayout({ header, properties, actions, fees, ...props }: TransactionViewLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export * from './BaseTransactionViewProps';
+export * from './BuyNFTTransactionView';
+export * from './InteractionTransactionView';
+export * from './SwapTransactionView';
+export * from './TransactionView';
+export * from './TransactionViewLayout';

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

@@ -1 +1,7 @@
-export { SwapProgressView } from './SwapProgressView';
+export * from './TransactionView/BaseTransactionViewProps';
+export * from './TransactionView/BridgeTransactionView';
+export * from './TransactionView/BuyNFTTransactionView';
+export * from './TransactionView/InteractionTransactionView';
+export * from './TransactionView/SwapTransactionView';
+export * from './TransactionView/TransactionView';
+export * from './TransactionView/TransactionViewLayout';

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

@@ -14,5 +14,11 @@ interface DebouncedFunction<F extends AnyFunction> {
     cancel: () => void;
 }
 export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
-export declare const formatTime: (elapsedTime: number) => string;
+export declare const formatDuration: (elapsedTime: number) => string;
+export declare const formatTime: (timestampSeconds: number) => string;
+export declare const formatRelativeDate: (timestampSeconds: number) => string;
+export declare function capitalize(text: string): string;
+type Falsy = false | null | undefined | 0 | '';
+export declare function truthy<T>(value: T): value is Exclude<T, Falsy>;
+export declare function truncateHash(hash: string): string;
 export {};

package/dist/cjs/types/hooks/useRect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useOnResize(ref: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
+export declare function useRect(ref: React.RefObject<HTMLElement>): DOMRectReadOnly;

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import '../styles/compiled-tailwind.css';
 import { ThemeType } from '../types/components';
 import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {

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

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

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

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

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

@@ -6,4 +6,3 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const StrokeThin: Story;
 export declare const StrokeThick: Story;
-export declare const InvertColors: Story;

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

@@ -3,4 +3,6 @@ import { LoadingSkeleton } from '../../components/badges/LoadingSkeleton';
 declare const meta: Meta<typeof LoadingSkeleton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Loading: Story;
+export declare const Content: Story;
+export declare const CustomSize: Story;

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TransactionState } from '../../components/badges/TransactionState';
+declare const meta: Meta<typeof TransactionState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Success: Story;
+export declare const SuccessCompact: Story;
+export declare const Fail: Story;
+export declare const FailCompact: Story;
+export declare const Processing: Story;
+export declare const ProcessingCompact: Story;
+export declare const Waiting: Story;
+export declare const WaitingCompact: Story;
+export declare const Incomplete: Story;
+export declare const IncompleteCompact: Story;

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

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

package/dist/cjs/types/stories/buttons/FilterButton.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FilterButton } from '../../components/buttons/FilterButton';
+declare const meta: Meta<typeof FilterButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Active: Story;

package/dist/cjs/types/stories/controls/Input.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithoutIcon: Story;
 export declare const WithActionButton: Story;
 export declare const Error: Story;
+export declare const FocusAfter3Seconds: Story;

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

@@ -0,0 +1,223 @@
+export declare const transactionActions: {
+    success: {
+        type: "success";
+        props: {
+            status: "success";
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    receive_tokens: {
+        type: "receive_tokens";
+        props: {
+            status: "executed";
+            amount: string;
+            token: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            chain: {
+                logoURI: string;
+                name: string;
+            };
+            wallet: {
+                imageURI: string;
+                address: string;
+                url: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    receive_nft: {
+        type: "receive_nft";
+        props: {
+            status: "executed";
+            nft: {
+                imageURI: string;
+                name: string;
+            };
+            chain: {
+                logoURI: string;
+                name: string;
+            };
+            wallet: {
+                imageURI: string;
+                address: string;
+                url: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    approve: {
+        type: "approve";
+        props: {
+            status: "executed";
+            profile: {
+                imageURI: string;
+                label: string;
+            };
+            chain: {
+                logoURI: string;
+                name: string;
+            };
+            wallet: {
+                imageURI: string;
+                address: string;
+                url: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    send_tokens: {
+        type: "send_tokens";
+        props: {
+            status: "executed";
+            amount: string;
+            token: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            chain: {
+                logoURI: string;
+                name: string;
+            };
+            wallet: {
+                imageURI: string;
+                address: string;
+                url: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    swap: {
+        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;
+        };
+    };
+    wrap: {
+        type: "wrap";
+        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;
+        };
+    };
+    bridge: {
+        type: "bridge";
+        props: {
+            status: "executed";
+            token: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            chain: {
+                logoURI: string;
+                name: string;
+            };
+            provider: {
+                logoURI: string;
+                name: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    stake: {
+        type: "stake";
+        props: {
+            status: "executed";
+            token: {
+                logoURI: string;
+                bgColor: string;
+                symbol: string;
+            };
+            provider: {
+                logoURI: string;
+                name: string;
+            };
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    start: {
+        type: "start";
+        props: {
+            status: "executed";
+            timestamp: number;
+            hash: string;
+            url: string;
+        };
+    };
+    fees: {
+        type: "fees";
+        props: {
+            status: "executed";
+            total: {
+                label: string;
+                usd: string;
+                eth: string;
+            };
+            lines: {
+                label: string;
+                usd: string;
+                eth: string;
+            }[];
+        };
+    };
+    incomplete: {
+        type: "incomplete";
+        props: {
+            status: "executed";
+            nextStatus: "executed";
+            message: string;
+            buttons: import("react/jsx-runtime").JSX.Element;
+        };
+    };
+};

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

@@ -0,0 +1,52 @@
+export declare const tokens: {
+    eth: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    weth: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    usdc: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+};
+export declare const chains: {
+    ethereum: {
+        logoURI: string;
+        name: string;
+    };
+    optimism: {
+        logoURI: string;
+        name: string;
+    };
+};
+export declare const providers: {
+    axelar: {
+        logoURI: string;
+        name: string;
+    };
+};
+export declare const wallets: {
+    punk: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+};
+export declare const nfts: {
+    parallelLives: {
+        name: string;
+        imageURI: string;
+        collection: {
+            name: string;
+            imageURI: string;
+        };
+        tokenID: string;
+        nftType: string;
+    };
+};

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

@@ -0,0 +1,49 @@
+import { TransactionData } from '../../types/data';
+export declare const rawTransactionData: TransactionData;
+export declare const ethereumChainData: {
+    axelarChainName: string;
+    networkIdentifier: string;
+    chainType: string;
+    rpc: string;
+    networkName: string;
+    chainId: string;
+    nativeCurrency: {
+        name: string;
+        symbol: string;
+        decimals: number;
+        icon: string;
+    };
+    swapAmountForGas: string;
+    sameChainSwapsSupported: boolean;
+    chainIconURI: string;
+    blockExplorerUrls: string[];
+    chainNativeContracts: {
+        wrappedNativeToken: string;
+        ensRegistry: string;
+        multicall: string;
+        usdcToken: string;
+    };
+    bridges: {
+        axelar: {
+            gateway: string;
+            itsService: string;
+        };
+        cctp: {
+            cctpDomain: number;
+            tokenMessenger: string;
+            messageTransmitter: string;
+        };
+    };
+    squidContracts: {
+        squidRouter: string;
+        defaultCrosschainToken: string;
+        squidMulticall: string;
+        squidFeeCollector: string;
+    };
+    compliance: {
+        trmIdentifier: string;
+    };
+    estimatedRouteDuration: number;
+    estimatedBoostRouteDuration: number;
+    enableBoostByDefault: boolean;
+};

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

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

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HashLink } from '../../components/layout/HashLink';
+declare const meta: Meta<typeof HashLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ShowTx: Story;
+export declare const ShowCopyButton: Story;
+export declare const WithUrl: Story;
+export declare const WithChildren: Story;
+export declare const AllProps: Story;

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

@@ -3,7 +3,8 @@ import { SwapConfiguration } from '../../components/layout/SwapConfiguration';
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
+export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantAccent: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

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

@@ -3,4 +3,7 @@ import { TokenPair } from '../../components/layout/TokenPair';
 declare const meta: Meta<typeof TokenPair>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalSmall: Story;
+export declare const Vertical: Story;
+export declare const VerticalSmall: Story;

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

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

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TransactionHeader, TransactionHeaderProps } from '../../components/layout/TransactionHeader/TransactionHeader';
+declare const meta: Meta<typeof TransactionHeader>;
+export default meta;
+type Story = StoryObj<TransactionHeaderProps>;
+export declare const Swap: Story;
+export declare const BuyNFT: Story;
+export declare const Interaction: Story;
+export declare const Bridge: Story;
+export declare const Profile: Story;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TransactionProperties, TransactionPropertiesProps } from '../../components/layout/TransactionProperties';
+declare const meta: Meta<typeof TransactionProperties>;
+export default meta;
+type Story = StoryObj<TransactionPropertiesProps>;
+export declare const Swap: Story;
+export declare const BuyNFT: Story;
+export declare const Interaction: Story;
+export declare const Bridge: Story;

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

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

package/dist/cjs/types/stories/{lists/SwapDetailListItem.stories.d.ts → layout/Transfer.stories.d.ts}

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { SwapDetailListItem } from '../../components/lists/SwapDetailListItem';
-declare const meta: Meta<typeof SwapDetailListItem>;
+import { Transfer } from '../../components/layout/Transfer';
+declare const meta: Meta<typeof Transfer>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const WithDetail: Story;
 export declare const Loading: Story;

package/dist/cjs/types/stories/lists/ListItem.stories.d.ts

@@ -19,6 +19,7 @@ export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const SubtitleLoading: Story;
+export declare const CustomSubtitleLoading: Story;
 export declare const ImageAndBadgeLoading: Story;
 export declare const Small: Story;
 export declare const SmallInteractive: Story;

package/dist/cjs/types/stories/lists/PropertyListItem.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PropertyListItem } from '../../components/lists/PropertyListItem';
+declare const meta: Meta<typeof PropertyListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TextDetail: Story;
+export declare const CustomDetail: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TransactionAction, TransactionActionProps } from '../../components/lists/TransactionAction';
+declare const meta: Meta<typeof TransactionAction>;
+export default meta;
+type Story = StoryObj<TransactionActionProps>;
+export declare const SuccessSuccess: Story;
+export declare const SuccessFailed: Story;
+export declare const SuccessPending: Story;
+export declare const SuccessWaiting: Story;
+export declare const RecieveTokens: Story;
+export declare const RecieveNFT: Story;
+export declare const Approve: Story;
+export declare const SendTokens: Story;
+export declare const Swap: Story;
+export declare const Wrap: Story;
+export declare const Bridge: Story;
+export declare const Stake: Story;
+export declare const StartSuccess: Story;
+export declare const StartFail: Story;
+export declare const NotStarted: Story;
+export declare const Fees: Story;
+export declare const FeesTotal: Story;
+export declare const Incomplete: Story;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TransactionItem } from '../../components/lists/TransactionItem';
+declare const meta: Meta<typeof TransactionItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Swap: Story;
+export declare const NFT: Story;
+export declare const Bridge: Story;
+export declare const Approve: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TransactionView, TransactionViewProps } from '../../components/views/TransactionView';
+declare const meta: Meta<typeof TransactionView>;
+export default meta;
+type Story = StoryObj<TransactionViewProps>;
+export declare const Swap: Story;
+export declare const BuyNFT: Story;
+export declare const Interaction: Story;
+export declare const Bridge: Story;