@0xsquid/ui 0.13.1 → 0.13.3

package/dist/esm/types/assets/animations/index.d.ts

@@ -0,0 +1,11 @@
+export declare const checkMarkInfo: any;
+export declare const checkMarkSuccess: any;
+export declare const checkMarkError: any;
+export declare const loadingDots: any;
+export declare const transactionPendingAnimation: any;
+export declare const transactionProcessinganimation: any;
+export declare const transactionFailureAnimation: any;
+export declare const transactionSuccessAnimation: any;
+export declare const transactionHalfSuccessAnimation: any;
+export declare const transactionErrorPauseAnimation: any;
+export declare const transactionRejectedAnimation: any;

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

@@ -6,6 +6,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     icon?: React.ReactNode;
     isError?: boolean;
     onPasteButtonClick?: () => void;
+    containerClassName?: string;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,3 +4,4 @@ export * from './controls';
 export * from './layout';
 export * from './lists';
 export * from './typography';
+export * from './views';

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    lottieJsonFile: object;
+    animReplacement?: JSX.Element;
+    hideAnimations?: boolean;
+}
+export declare const AnimationWrapper: ({ lottieJsonFile, animReplacement, hideAnimations, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 type ModalContentBorderType = 'border' | 'outline';
-export declare function ModalContent({ children, addGap, paddingY, borderType, }: {
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     addGap?: boolean;
     paddingY?: boolean;
     borderType?: ModalContentBorderType;
-}): import("react/jsx-runtime").JSX.Element;
+    className?: string;
+}
+export declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function ModalContentDivider(): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,9 @@
 import { SwapStep } from '../../types/components';
-export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }: {
+interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;
-}): import("react/jsx-runtime").JSX.Element;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }: SwapStepsCollapsedProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export declare const StepsControls: ({ totalSteps, stepsState, }: {
+    totalSteps: number;
+    stepsState: [number, React.Dispatch<React.SetStateAction<number>>];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,36 @@
-type SwapProgressState = 'confirm' | 'progress' | 'completed' | 'error' | 'partialSuccess' | 'confirmationTooLong' | 'confirmationRejected';
-export declare function SwapProgressView({ state }: {
-    state: SwapProgressState;
+import { SwapStep, TransactionStatus } from '../../types/components';
+type ChainData = {
+    networkName: string;
+    logoUrl: string;
+    bgColor: string;
+};
+type Token = {
+    symbol: string;
+    logoUrl: string;
+    bgColor: string;
+};
+export declare function SwapProgressView({ steps, currentStepIndex, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
+    steps: SwapStep[];
+    currentStepIndex: number;
+    handleClose?: () => void;
+    isOpen?: boolean;
+    socialLink?: string;
+    supportLink?: string;
+    fromToken: Token;
+    toToken: Token;
+    fromAmount: string;
+    toAmount: string;
+    fromChain: ChainData;
+    toChain: ChainData;
+    fromAddressFormatted: string;
+    toAddressFormatted: string;
+    txStatus: TransactionStatus;
 }): import("react/jsx-runtime").JSX.Element;
+interface Props {
+    rawSteps: SwapStep[];
+    txStatus?: TransactionStatus;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare const TrackTransactionView: ({ txStatus, rawSteps, onOpen, onClose, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -0,0 +1 @@
+export { SwapProgressView } from './SwapProgressView';

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

@@ -1,4 +1,16 @@
 export declare const CSS_VARS: {
     MOVE_WITH_SPRING_BOUNCE_DURATION: string;
     DISPLAY_DELAYED_DURATION: string;
+    SLIDE_TO_BOTTOM_DURATION: string;
+    SLIDE_TO_TOP_DURATION: string;
+    FADE_IN_DURATION: string;
+    FADE_OUT_DURATION: string;
+    SCALE_AND_FADE_UP_DURATION: string;
+    SCALE_AND_FADE_DOWN_DURATION: string;
+    TRANSLATE_TOP_OR_BOTTOM: string;
+};
+export declare const ANIMATION_DURATIONS: {
+    SHOW_ROUTE_STEPS: number;
+    HIDE_ROUTE_STEPS: number;
+    CHANGE_SWAP_STEP: number;
 };

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

@@ -0,0 +1,7 @@
+export declare const useTimer: ({ immediateStart, }: {
+    immediateStart?: boolean;
+}) => {
+    timer: string;
+    stopTimer: () => void;
+    startTimer: () => void;
+};

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

@@ -3,10 +3,4 @@ import { SwapProgressView } from '../../components/views/SwapProgressView';
 declare const meta: Meta<typeof SwapProgressView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Confirm: Story;
-export declare const Progress: Story;
-export declare const Completed: Story;
-export declare const Failed: Story;
-export declare const ConfirmationTooLong: Story;
-export declare const ConfirmationRejected: Story;
-export declare const PartialSuccess: Story;
+export declare const Default: Story;

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

@@ -13,7 +13,21 @@ export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     link?: string;
+    status: TransactionStatus;
 };
+export type SwapProgressState = 'confirm' | 'progress' | 'completed' | 'error' | 'partialSuccess' | 'confirmationTooLong' | 'confirmationRejected' | 'needsGas';
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
+export declare enum TransactionStatus {
+    SUCCESS = "success",
+    NEEDS_GAS = "needs_gas",
+    ONGOING = "ongoing",
+    PARTIAL_SUCCESS = "partial_success",
+    NOT_FOUND = "not_found",
+    INITIAL_LOADING = "initialLoading",
+    ERROR = "error",
+    WARNING = "warning",
+    PENDING = "pending",
+    REJECTED = "rejected"
+}

package/dist/index.css

@@ -984,6 +984,11 @@ video {
   height: 680px;
 }
 
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .tw-h-full {
   height: 100%;
 }
@@ -1012,6 +1017,10 @@ video {
   height: 3.75rem;
 }
 
+.\!tw-max-h-\[470px\] {
+  max-height: 470px !important;
+}
+
 .tw-max-h-\[120px\] {
   max-height: 120px;
 }
@@ -1044,8 +1053,9 @@ video {
   max-height: 80px;
 }
 
-.tw-max-h-button {
-  max-height: 3.75rem;
+.tw-max-h-fit {
+  max-height: -moz-fit-content;
+  max-height: fit-content;
 }
 
 .tw-max-h-list-item-small {
@@ -1145,6 +1155,10 @@ video {
   width: 144px;
 }
 
+.tw-w-\[150px\] {
+  width: 150px;
+}
+
 .tw-w-\[180px\] {
   width: 180px;
 }
@@ -1429,7 +1443,7 @@ video {
 }
 
 .tw-animate-fade-in {
-  animation: tw-fade-in 0.2s ease-out both;
+  animation: tw-fade-in var(--squid-animation-fade-in-duration, 0s) ease-out both;
 }
 
 @keyframes tw-fade-out {
@@ -1443,7 +1457,7 @@ video {
 }
 
 .tw-animate-fade-out {
-  animation: tw-fade-out 0.2s ease-out both;
+  animation: tw-fade-out var(--squid-animation-fade-out-duration, 0s) ease-out both;
 }
 
 @keyframes tw-hide {
@@ -1494,36 +1508,68 @@ video {
   animation: tw-move-loading-cover-to-right 1.4s linear infinite;
 }
 
+@keyframes tw-scale-and-fade-down {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+.tw-animate-scale-and-fade-down {
+  animation: tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+}
+
+@keyframes tw-scale-and-fade-up {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.tw-animate-scale-and-fade-up {
+  animation: tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+}
+
 @keyframes tw-slide-to-bottom {
   0% {
-    transform: translateY(0);
+    height: 100%;
     opacity: 1;
   }
 
   100% {
-    transform: translateY(120px);
+    height: 60px;
     opacity: 0;
   }
 }
 
 .tw-animate-slide-to-bottom {
-  animation: tw-slide-to-bottom 0.2s ease-out both;
+  animation: tw-slide-to-bottom var(--squid-animation-slide-to-bottom-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
 }
 
 @keyframes tw-slide-to-top {
   0% {
-    transform: translateY(120px);
+    height: 60px;
     opacity: 0;
   }
 
   100% {
-    transform: translateY(0);
+    height: 100%;
     opacity: 1;
   }
 }
 
 .tw-animate-slide-to-top {
-  animation: tw-slide-to-top 0.35s ease-out both;
+  animation: tw-slide-to-top var(--squid-animation-slide-to-top-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
 }
 
 @keyframes tw-translate-to-bottom {
@@ -1532,12 +1578,12 @@ video {
   }
 
   100% {
-    transform: translateY(58.5px);
+    transform: translateY(100%);
   }
 }
 
 .tw-animate-translate-to-bottom {
-  animation: tw-translate-to-bottom 0.4s ease-in-out both;
+  animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s) cubic-bezier(.165,.84,.44,1) both;
 }
 
 @keyframes tw-translate-to-top {
@@ -1546,12 +1592,12 @@ video {
   }
 
   100% {
-    transform: translateY(-58.5px);
+    transform: translateY(-100%);
   }
 }
 
 .tw-animate-translate-to-top {
-  animation: tw-translate-to-top 0.4s ease-in-out both;
+  animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s) cubic-bezier(.165,.84,.44,1) both;
 }
 
 .tw-cursor-help {
@@ -1847,11 +1893,6 @@ video {
   background-color: var(--squid-theme-royal-400) !important;
 }
 
-.tw-bg-blue-950 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
-}
-
 .tw-bg-grey-100 {
   background-color: var(--squid-theme-grey-100);
 }
@@ -2428,6 +2469,10 @@ video {
   color: var(--squid-theme-grey-300);
 }
 
+.tw-text-grey-400 {
+  color: var(--squid-theme-grey-400);
+}
+
 .tw-text-grey-500 {
   color: var(--squid-theme-grey-500);
 }
@@ -2485,6 +2530,10 @@ video {
   opacity: 0;
 }
 
+.tw-opacity-100 {
+  opacity: 1;
+}
+
 .tw-opacity-33 {
   opacity: 0.33;
 }
@@ -2673,6 +2722,20 @@ input[type='number'] {
   outline-color: var(--squid-theme-status-negative);
 }
 
+/* Change animation stroke color based on theme type */
+
+.tw-group[data-squid-theme-type='dark'] #squid-lottie-animation #keystroke {
+  stroke: var(--squid-theme-grey-100) !important;
+}
+
+.tw-group[data-squid-theme-type='light'] #squid-lottie-animation #keystroke {
+  stroke: var(--squid-theme-grey-900) !important;
+}
+
+#squid-lottie-animation #keyfill {
+  fill: var(--squid-theme-royal-500) !important;
+}
+
 .placeholder\:tw-text-grey-600::-moz-placeholder {
   color: var(--squid-theme-grey-600);
 }
@@ -2740,10 +2803,6 @@ input[type='number'] {
   outline-offset: 2px;
 }
 
-.disabled\:tw-opacity-60:disabled {
-  opacity: 0.6;
-}
-
 .tw-group\/base-button:hover .group-hover\/base-button\:tw-block {
   display: block;
 }

package/dist/index.d.ts

@@ -61,9 +61,22 @@ type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     link?: string;
+    status: TransactionStatus;
 };
 type ThemeType = 'light' | 'dark';
 type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
+declare enum TransactionStatus {
+    SUCCESS = "success",
+    NEEDS_GAS = "needs_gas",
+    ONGOING = "ongoing",
+    PARTIAL_SUCCESS = "partial_success",
+    NOT_FOUND = "not_found",
+    INITIAL_LOADING = "initialLoading",
+    ERROR = "error",
+    WARNING = "warning",
+    PENDING = "pending",
+    REJECTED = "rejected"
+}
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -112,8 +125,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     icon?: React.ReactNode;
     isError?: boolean;
     onPasteButtonClick?: () => void;
+    containerClassName?: string;
 }
-declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
     onParsedValueChanged: (value: string) => void;
@@ -357,12 +371,14 @@ interface ModalProps {
 declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
 type ModalContentBorderType = 'border' | 'outline';
-declare function ModalContent({ children, addGap, paddingY, borderType, }: {
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     addGap?: boolean;
     paddingY?: boolean;
     borderType?: ModalContentBorderType;
-}): react_jsx_runtime.JSX.Element;
+    className?: string;
+}
+declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
 declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
 
 type ActionButton = {
@@ -428,10 +444,13 @@ interface SwapProgressViewHeaderProps {
 }
 declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
 
-declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }: {
+interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;
-}): react_jsx_runtime.JSX.Element;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }: SwapStepsCollapsedProps): react_jsx_runtime.JSX.Element;
 
 interface TokenPairProps {
     firstToken: {
@@ -464,6 +483,34 @@ interface HeadingTextProps {
 }
 declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
+type ChainData = {
+    networkName: string;
+    logoUrl: string;
+    bgColor: string;
+};
+type Token = {
+    symbol: string;
+    logoUrl: string;
+    bgColor: string;
+};
+declare function SwapProgressView({ steps, currentStepIndex, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
+    steps: SwapStep[];
+    currentStepIndex: number;
+    handleClose?: () => void;
+    isOpen?: boolean;
+    socialLink?: string;
+    supportLink?: string;
+    fromToken: Token;
+    toToken: Token;
+    fromAmount: string;
+    toAmount: string;
+    fromChain: ChainData;
+    toChain: ChainData;
+    fromAddressFormatted: string;
+    toAddressFormatted: string;
+    txStatus: TransactionStatus;
+}): react_jsx_runtime.JSX.Element;
+
 type SquidTheme = {
     'content-100': string;
     'content-200': string;
@@ -503,4 +550,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

@@ -5,9 +5,12 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "author": "",
   "license": "MIT",
+  "resolutions": {
+    "string-width": "4.2.3"
+  },
   "scripts": {
     "storybook": "concurrently 'yarn:watch:*'",
     "watch:storybook": "storybook dev -p 6006",
@@ -24,6 +27,7 @@
     "copy-fonts": "cp -r src/styles/fonts dist/fonts"
   },
   "dependencies": {
+    "@lottiefiles/react-lottie-player": "3.5.0",
     "clsx": "2.1.0",
     "color": "4.2.3",
     "tailwind-merge": "2.3.0"
@@ -42,6 +46,7 @@
     "@chromatic-com/storybook": "^1.2.22",
     "@release-it/conventional-changelog": "github:release-it/conventional-changelog",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-essentials": "^8.0.1",

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

@@ -1,2 +0,0 @@
-export declare function SwapProgressAnimation(): import("react/jsx-runtime").JSX.Element;
-export declare function SwapCompletedAnimation(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-export declare function SwapProgressAnimation(): import("react/jsx-runtime").JSX.Element;
-export declare function SwapCompletedAnimation(): import("react/jsx-runtime").JSX.Element;