@0xsquid/ui 0.19.5 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/cjs/index.js +365 -286
  2. package/dist/cjs/types/components/buttons/AssetsButton.d.ts +3 -1
  3. package/dist/cjs/types/components/buttons/BoostButton.d.ts +1 -3
  4. package/dist/cjs/types/components/buttons/FeeButton.d.ts +3 -1
  5. package/dist/cjs/types/components/controls/NumericInput.d.ts +10 -2
  6. package/dist/cjs/types/components/controls/Tooltip.d.ts +1 -1
  7. package/dist/cjs/types/components/layout/Boost.d.ts +3 -3
  8. package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +18 -14
  9. package/dist/cjs/types/components/layout/NavigationBar.d.ts +2 -0
  10. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +21 -7
  11. package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
  12. package/dist/cjs/types/stories/buttons/FeeButton.stories.d.ts +1 -0
  13. package/dist/cjs/types/stories/layout/Boost.stories.d.ts +1 -0
  14. package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts +4 -1
  15. package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
  16. package/dist/esm/index.js +365 -286
  17. package/dist/esm/types/components/buttons/AssetsButton.d.ts +3 -1
  18. package/dist/esm/types/components/buttons/BoostButton.d.ts +1 -3
  19. package/dist/esm/types/components/buttons/FeeButton.d.ts +3 -1
  20. package/dist/esm/types/components/controls/NumericInput.d.ts +10 -2
  21. package/dist/esm/types/components/controls/Tooltip.d.ts +1 -1
  22. package/dist/esm/types/components/layout/Boost.d.ts +3 -3
  23. package/dist/esm/types/components/layout/DetailsToolbar.d.ts +18 -14
  24. package/dist/esm/types/components/layout/NavigationBar.d.ts +2 -0
  25. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +21 -7
  26. package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
  27. package/dist/esm/types/stories/buttons/FeeButton.stories.d.ts +1 -0
  28. package/dist/esm/types/stories/layout/Boost.stories.d.ts +1 -0
  29. package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts +4 -1
  30. package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
  31. package/dist/index.d.ts +125 -102
  32. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
1
  import { AssetsButtonVariant } from '../../types/components';
2
+ import { TooltipProps } from '../controls';
2
3
  interface AssetsButtonProps {
3
4
  token?: {
4
5
  iconUrl: string;
@@ -13,6 +14,7 @@ interface AssetsButtonProps {
13
14
  onClick?: () => void;
14
15
  variant?: AssetsButtonVariant;
15
16
  isLoading?: boolean;
17
+ tooltip?: Omit<TooltipProps, 'children'>;
16
18
  }
17
- export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
19
+ export declare function AssetsButton({ chain, token, onClick, variant, isLoading, tooltip, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
18
20
  export {};
@@ -3,9 +3,7 @@ import { BoostMode } from '../../types/components';
3
3
  interface BoostButtonProps {
4
4
  boostMode: BoostMode;
5
5
  canToggleBoostMode?: boolean;
6
- boostDisabledMessage?: string;
7
- tooltipDisplayDelayMs?: number;
8
6
  boostIndicatorRef: React.RefObject<HTMLDivElement>;
9
7
  }
10
- export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function BoostButton({ boostMode, canToggleBoostMode, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
11
9
  export {};
@@ -1,7 +1,9 @@
1
1
  /// <reference types="react" />
2
+ import { TooltipProps } from '../controls';
2
3
  interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
3
4
  feeInUsd?: string;
4
5
  chipLabel?: string;
6
+ tooltip?: Omit<TooltipProps, 'children'>;
5
7
  }
6
- export declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function FeeButton({ feeInUsd, chipLabel, className, tooltip, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
7
9
  export {};
@@ -1,4 +1,5 @@
1
1
  import { SwapDirection } from '../../types/components';
2
+ import { TooltipProps } from './Tooltip';
2
3
  interface Token {
3
4
  price: number;
4
5
  symbol: string;
@@ -21,9 +22,16 @@ interface NumericInputProps {
21
22
  priceImpactPercentage?: string;
22
23
  criticalPriceImpactPercentage?: number;
23
24
  direction?: SwapDirection;
24
- amountUsd?: string;
25
+ inputModeButton?: {
26
+ usdModeTooltip?: Omit<TooltipProps, 'children'>;
27
+ tokenModeTooltip?: Omit<TooltipProps, 'children'>;
28
+ amountUsd?: string;
29
+ };
25
30
  maxUsdDecimals?: number;
26
31
  isInteractive?: boolean;
32
+ balanceButton?: {
33
+ tooltip?: Omit<TooltipProps, 'children'>;
34
+ };
27
35
  }
28
- export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
36
+ export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
29
37
  export {};
@@ -3,7 +3,7 @@ export type TooltipWidth = 'max' | 'container';
3
3
  export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
4
4
  export interface TooltipProps {
5
5
  children: React.ReactNode;
6
- tooltipContent: React.ReactNode;
6
+ tooltipContent?: React.ReactNode;
7
7
  threshold?: TooltipThreshold;
8
8
  tooltipWidth?: TooltipWidth;
9
9
  containerClassName?: string;
@@ -1,13 +1,13 @@
1
1
  import { BoostMode } from '../../types/components';
2
+ import { TooltipProps } from '../controls';
2
3
  interface BoostProps {
3
4
  boostMode: BoostMode;
4
5
  onToggleBoostMode?: ({ boostMode }: {
5
6
  boostMode: BoostMode;
6
7
  }) => void;
7
8
  estimatedTime: string;
8
- boostDisabledMessage?: string;
9
9
  canToggleBoostMode?: boolean;
10
- boostTooltipDisplayDelayMs?: number;
10
+ tooltip?: Omit<TooltipProps, 'children'>;
11
11
  }
12
- export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode, tooltip, }: BoostProps): import("react/jsx-runtime").JSX.Element;
13
13
  export {};
@@ -1,28 +1,32 @@
1
1
  import { BoostMode } from '../../types/components';
2
+ import { TooltipProps } from '../controls';
2
3
  interface DetailsToolbarProps {
3
4
  errorMessage?: string;
4
- boostMode?: BoostMode;
5
- onToggleBoostMode?: ({ boostMode }: {
6
- boostMode: BoostMode;
7
- }) => void;
8
- onInvertSwapButtonClick?: () => void;
9
- onFeeButtonClick?: () => void;
10
5
  flipButton?: {
11
- disabledMessage: string;
12
- isDisabled: boolean;
13
- tooltipDisplayDelayMs: number;
6
+ onClick?: () => void;
7
+ tooltip?: Omit<TooltipProps, 'children'>;
8
+ isDisabled?: boolean;
9
+ };
10
+ feeButton?: {
11
+ feeInUsd: string;
12
+ tooltip?: Omit<TooltipProps, 'children'>;
13
+ onClick: () => void;
14
14
  };
15
- feeInUsd?: string;
16
15
  estimatedTime?: string;
17
- canToggleBoostMode?: boolean;
18
- boostDisabledMessage?: string;
19
16
  isLoading?: boolean;
20
17
  isEmpty?: boolean;
21
18
  helpButton?: {
22
19
  label: string;
23
20
  onClick: () => void;
24
21
  };
25
- boostTooltipDisplayDelayMs?: number;
22
+ boostButton?: {
23
+ tooltip?: Omit<TooltipProps, 'children'>;
24
+ onClick?: ({ boostMode }: {
25
+ boostMode: BoostMode;
26
+ }) => void;
27
+ canToggleBoostMode?: boolean;
28
+ boostMode?: BoostMode;
29
+ };
26
30
  }
27
- export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, flipButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
31
+ export declare function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
28
32
  export {};
@@ -1,8 +1,10 @@
1
1
  /// <reference types="react" />
2
+ import { TooltipProps } from '../controls';
2
3
  type ActionButton = {
3
4
  labelOrIcon: string | React.ReactNode;
4
5
  onClick?: () => void;
5
6
  id: React.Key;
7
+ tooltip?: Omit<TooltipProps, 'children'>;
6
8
  };
7
9
  interface NavigationBarProps {
8
10
  title?: string;
@@ -1,10 +1,10 @@
1
1
  import { AssetsButtonVariant, SwapDirection } from '../../types/components';
2
+ import { TooltipProps } from '../controls';
2
3
  interface SwapConfigurationProps {
3
4
  direction: SwapDirection;
4
5
  priceImpactPercentage?: string;
5
6
  amount?: string;
6
7
  forcedAmount?: string;
7
- amountUsd?: string;
8
8
  tokenPrice?: number;
9
9
  balance?: string;
10
10
  isFetching?: boolean;
@@ -19,19 +19,33 @@ interface SwapConfigurationProps {
19
19
  textColor: string;
20
20
  decimals: number;
21
21
  };
22
- address?: string;
23
22
  onAmountChange?: (amount: string) => void;
24
- onWalletButtonClick?: () => void;
25
- onAssetsButtonClick?: () => void;
26
23
  error?: {
27
24
  message: string;
28
25
  };
29
26
  criticalPriceImpactPercentage?: number;
30
- emptyAddressLabel?: string;
31
- assetsButtonVariant?: AssetsButtonVariant;
32
27
  maxUsdDecimals?: number;
33
28
  isInputInteractive?: boolean;
34
29
  isLoading?: boolean;
30
+ inputModeButton?: {
31
+ usdModeTooltip?: Omit<TooltipProps, 'children'>;
32
+ tokenModeTooltip?: Omit<TooltipProps, 'children'>;
33
+ amountUsd?: string;
34
+ };
35
+ balanceButton?: {
36
+ tooltip?: Omit<TooltipProps, 'children'>;
37
+ };
38
+ assetsButton?: {
39
+ tooltip?: Omit<TooltipProps, 'children'>;
40
+ onClick?: () => void;
41
+ variant?: AssetsButtonVariant;
42
+ };
43
+ walletButton?: {
44
+ tooltip?: Omit<TooltipProps, 'children'>;
45
+ onClick?: () => void;
46
+ address?: string;
47
+ emptyAddressLabel?: string;
48
+ };
35
49
  }
36
- export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
50
+ export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
37
51
  export {};
@@ -12,3 +12,4 @@ export declare const TokenOnly: Story;
12
12
  export declare const ChainAndTokenLightText: Story;
13
13
  export declare const ChainAndTokenDarkText: Story;
14
14
  export declare const LongTokenSymbol: Story;
15
+ export declare const Tooltip: Story;
@@ -4,3 +4,4 @@ declare const meta: Meta<typeof FeeButton>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Default: Story;
7
+ export declare const Tooltip: Story;
@@ -5,6 +5,7 @@ export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Normal: Story;
7
7
  export declare const Boosted: Story;
8
+ export declare const Tooltip: Story;
8
9
  export declare const NormalDisabled: Story;
9
10
  export declare const BoostedDisabled: Story;
10
11
  export declare const DisabledWithDelayedTooltip: Story;
@@ -9,6 +9,9 @@ export declare const Empty: Story;
9
9
  export declare const EmptyLoading: Story;
10
10
  export declare const Error: Story;
11
11
  export declare const ErrorHelpButton: Story;
12
- export declare const BoostDisabled: Story;
12
+ export declare const BoostButtonWithTooltip: Story;
13
+ export declare const BoostDisabledWithTooltip: Story;
13
14
  export declare const BoostDisabledWithDelayedTooltip: Story;
15
+ export declare const FlipButtonWithTooltip: Story;
14
16
  export declare const FlipButtonDisabled: Story;
17
+ export declare const FeeButtonTooltip: Story;
@@ -23,3 +23,4 @@ export declare const ToDirection: Story;
23
23
  export declare const FromAddressEmpty: Story;
24
24
  export declare const ToAddressEmpty: Story;
25
25
  export declare const Error: Story;
26
+ export declare const WithTooltips: Story;