@0xsquid/ui 0.20.0 → 0.20.1
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 +7 -7
- package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +1 -0
- package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
- package/dist/esm/index.js +7 -7
- package/dist/esm/types/components/layout/SwapConfiguration.d.ts +1 -0
- package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -18085,13 +18085,13 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
|
|
|
18085
18085
|
const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
|
|
18086
18086
|
const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
|
|
18087
18087
|
const isFetching = isFetchingProp || isLoading;
|
|
18088
|
-
return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }),
|
|
18089
|
-
|
|
18090
|
-
|
|
18091
|
-
|
|
18092
|
-
|
|
18093
|
-
|
|
18094
|
-
|
|
18088
|
+
return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18089
|
+
? 'tw-text-grey-300'
|
|
18090
|
+
: 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18091
|
+
? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
|
|
18092
|
+
: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18093
|
+
? 'tw-text-grey-600'
|
|
18094
|
+
: 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
|
|
18095
18095
|
decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
|
|
18096
18096
|
symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
|
|
18097
18097
|
price: tokenPrice,
|
|
@@ -45,6 +45,7 @@ interface SwapConfigurationProps {
|
|
|
45
45
|
onClick?: () => void;
|
|
46
46
|
address?: string;
|
|
47
47
|
emptyAddressLabel?: string;
|
|
48
|
+
disabled?: boolean;
|
|
48
49
|
};
|
|
49
50
|
}
|
|
50
51
|
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;
|
|
@@ -24,3 +24,5 @@ export declare const FromAddressEmpty: Story;
|
|
|
24
24
|
export declare const ToAddressEmpty: Story;
|
|
25
25
|
export declare const Error: Story;
|
|
26
26
|
export declare const WithTooltips: Story;
|
|
27
|
+
export declare const WithoutSourceConnectLabels: Story;
|
|
28
|
+
export declare const WithoutDestConnectLabels: Story;
|
package/dist/esm/index.js
CHANGED
|
@@ -18065,13 +18065,13 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
|
|
|
18065
18065
|
const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
|
|
18066
18066
|
const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
|
|
18067
18067
|
const isFetching = isFetchingProp || isLoading;
|
|
18068
|
-
return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }),
|
|
18069
|
-
|
|
18070
|
-
|
|
18071
|
-
|
|
18072
|
-
|
|
18073
|
-
|
|
18074
|
-
|
|
18068
|
+
return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18069
|
+
? 'tw-text-grey-300'
|
|
18070
|
+
: 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18071
|
+
? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
|
|
18072
|
+
: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
|
|
18073
|
+
? 'tw-text-grey-600'
|
|
18074
|
+
: 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
|
|
18075
18075
|
decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
|
|
18076
18076
|
symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
|
|
18077
18077
|
price: tokenPrice,
|
|
@@ -45,6 +45,7 @@ interface SwapConfigurationProps {
|
|
|
45
45
|
onClick?: () => void;
|
|
46
46
|
address?: string;
|
|
47
47
|
emptyAddressLabel?: string;
|
|
48
|
+
disabled?: boolean;
|
|
48
49
|
};
|
|
49
50
|
}
|
|
50
51
|
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;
|
|
@@ -24,3 +24,5 @@ export declare const FromAddressEmpty: Story;
|
|
|
24
24
|
export declare const ToAddressEmpty: Story;
|
|
25
25
|
export declare const Error: Story;
|
|
26
26
|
export declare const WithTooltips: Story;
|
|
27
|
+
export declare const WithoutSourceConnectLabels: Story;
|
|
28
|
+
export declare const WithoutDestConnectLabels: Story;
|
package/dist/index.d.ts
CHANGED
|
@@ -1442,6 +1442,7 @@ interface SwapConfigurationProps {
|
|
|
1442
1442
|
onClick?: () => void;
|
|
1443
1443
|
address?: string;
|
|
1444
1444
|
emptyAddressLabel?: string;
|
|
1445
|
+
disabled?: boolean;
|
|
1445
1446
|
};
|
|
1446
1447
|
}
|
|
1447
1448
|
declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
|