@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.
- package/dist/cjs/index.js +365 -286
- package/dist/cjs/types/components/buttons/AssetsButton.d.ts +3 -1
- package/dist/cjs/types/components/buttons/BoostButton.d.ts +1 -3
- package/dist/cjs/types/components/buttons/FeeButton.d.ts +3 -1
- package/dist/cjs/types/components/controls/NumericInput.d.ts +10 -2
- package/dist/cjs/types/components/controls/Tooltip.d.ts +1 -1
- package/dist/cjs/types/components/layout/Boost.d.ts +3 -3
- package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +18 -14
- package/dist/cjs/types/components/layout/NavigationBar.d.ts +2 -0
- package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +21 -7
- package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
- package/dist/cjs/types/stories/buttons/FeeButton.stories.d.ts +1 -0
- package/dist/cjs/types/stories/layout/Boost.stories.d.ts +1 -0
- package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts +4 -1
- package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
- package/dist/esm/index.js +365 -286
- package/dist/esm/types/components/buttons/AssetsButton.d.ts +3 -1
- package/dist/esm/types/components/buttons/BoostButton.d.ts +1 -3
- package/dist/esm/types/components/buttons/FeeButton.d.ts +3 -1
- package/dist/esm/types/components/controls/NumericInput.d.ts +10 -2
- package/dist/esm/types/components/controls/Tooltip.d.ts +1 -1
- package/dist/esm/types/components/layout/Boost.d.ts +3 -3
- package/dist/esm/types/components/layout/DetailsToolbar.d.ts +18 -14
- package/dist/esm/types/components/layout/NavigationBar.d.ts +2 -0
- package/dist/esm/types/components/layout/SwapConfiguration.d.ts +21 -7
- package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts +1 -0
- package/dist/esm/types/stories/buttons/FeeButton.stories.d.ts +1 -0
- package/dist/esm/types/stories/layout/Boost.stories.d.ts +1 -0
- package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts +4 -1
- package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +1 -0
- package/dist/index.d.ts +125 -102
- 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,
|
|
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
|
-
|
|
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,
|
|
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
|
|
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
|
-
|
|
10
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
11
11
|
}
|
|
12
|
-
export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime,
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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 {};
|
|
@@ -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
|
|
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;
|