@0xsquid/ui 0.17.0 → 0.17.1-beta.1

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;

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

@@ -5,7 +5,7 @@ export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
 export type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
-export type SwapStepDescriptionBlock = {
+export type DescriptionBlock = {
     type: 'string';
     value: string;
 } | {
@@ -14,9 +14,9 @@ export type SwapStepDescriptionBlock = {
     rounded?: boolean;
 };
 export type SwapStep = {
-    descriptionBlocks: SwapStepDescriptionBlock[];
+    descriptionBlocks: DescriptionBlock[];
     link?: string;
-    status: SwapStepItemStatus;
+    status: ActionStatus;
 };
 export declare enum SwapState {
     CONFIRM = 0,
@@ -30,6 +30,14 @@ export declare enum SwapState {
 }
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
-export type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+export type ActionStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
 export type InputMode = 'token' | 'price';
+export type TransactionStateVariant = 'full' | 'compact';
+export type TokenPairVariant = 'horizontal' | 'vertical';
+export type TokenPairSize = 'small' | 'medium';
+export type ImageIconVariant = 'square' | 'round' | 'proportional';
+export type ImageIconSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type ChainTypeFilter = 'source' | 'destination';
+export type StatusFilter = 'success' | 'ongoing' | 'error';
 export type AssetsButtonVariant = 'primary' | 'accent';
+export type PropertyListItemSize = 'small' | 'large';