@0xsquid/ui 2.8.2-xrpl-beta.0 → 2.8.2

package/dist/cjs/index.js

@@ -20831,8 +20831,8 @@ function QrCode({ matrix, size: renderedSize, imageUrl }) {
                     } }) }))] }));
 }
 
-function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerText, title, }) {
-    return (jsxRuntime.jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxRuntime.jsxs(ModalContent, { addGap: true, children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx("div", { className: "tw-flex tw-aspect-square tw-size-[22.5rem] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-grey-900 tw-p-squid-m tw-shadow-elevation-light-1", children: qrData ? (jsxRuntime.jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsxRuntime.jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs", children: jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-grey-500", children: footerText }) })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose })] }));
+function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerContent, title, isError, }) {
+    return (jsxRuntime.jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxRuntime.jsxs(ModalContent, { addGap: true, className: "tw-pb-squid-s", children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx("div", { className: "tw-flex tw-aspect-square tw-size-[22.5rem] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-grey-900 tw-p-squid-m tw-shadow-elevation-light-1", children: isError ? (jsxRuntime.jsx(SwapErrorIcon, {})) : qrData ? (jsxRuntime.jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsxRuntime.jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-text-center tw-text-grey-500", children: footerContent })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose })] }));
 }
 
 const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
@@ -20841,7 +20841,7 @@ const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletI
                                         (walletIconUrl ? (jsxRuntime.jsx(Image$1, { className: "!tw-h-6 !tw-w-6 !tw-rounded-lg", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-text-grey-900 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(WalletIcon, { size: "18" }) }))), jsxRuntime.jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsxRuntime.jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
 };
 function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const isFetching = isFetchingProp || isLoading;
     const [forcedAmount, setForcedAmount] = React$1.useState(amount);
     const prevRef = React$1.useRef({
@@ -20851,8 +20851,10 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
     });
     // Save previous amount between renders for transition animation.
     React$1.useEffect(() => {
-        if (direction === "from")
+        if (direction === "from") {
+            setForcedAmount(amount);
             return;
+        }
         const { amount: prevAmount, chain: prevChain, token: prevToken, } = prevRef.current;
         const currentChain = JSON.stringify(chain);
         const currentToken = JSON.stringify(token);
@@ -20866,11 +20868,9 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
         }
         setForcedAmount(prevRef.current.amount);
     }, [amount, chain, token]);
-    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
-                    (walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) ||
-                    (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _a !== void 0 ? _a : true }), 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 })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
-                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
-                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
+    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (_b = (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) !== null && _a !== void 0 ? _a : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _b !== void 0 ? _b : (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_c = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _c !== void 0 ? _c : true }), 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 })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                    decimals: (_d = token === null || token === void 0 ? void 0 : token.decimals) !== null && _d !== void 0 ? _d : 18,
+                    symbol: (_e = token === null || token === void 0 ? void 0 : token.symbol) !== null && _e !== void 0 ? _e : "",
                     price: tokenPrice,
                 }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);

package/dist/cjs/types/components/layout/QrCodeModal.d.ts

@@ -1,11 +1,13 @@
+/// <reference types="react" />
 interface QrCodeModalProps {
     qrData: boolean[][] | undefined;
     imageUrl?: string;
     handleClose: () => void;
     handleGoBack?: () => void;
     isModalOpen: boolean | undefined;
-    footerText: string;
+    footerContent: React.ReactNode;
     title: string;
+    isError?: boolean;
 }
-export declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerText, title, }: QrCodeModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerContent, title, isError, }: QrCodeModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/stories/layout/QrCodeModal.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const QrData: Story;
 export declare const Loading: Story;
+export declare const Error: Story;
 export declare const GoBackButton: Story;

package/dist/esm/index.js

@@ -20811,8 +20811,8 @@ function QrCode({ matrix, size: renderedSize, imageUrl }) {
                     } }) }))] }));
 }
 
-function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerText, title, }) {
-    return (jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxs(ModalContent, { addGap: true, children: [jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), jsx("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsx("div", { className: "tw-flex tw-aspect-square tw-size-[22.5rem] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-grey-900 tw-p-squid-m tw-shadow-elevation-light-1", children: qrData ? (jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), jsx("footer", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs", children: jsx(CaptionText, { className: "tw-text-center tw-text-grey-500", children: footerText }) })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose })] }));
+function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerContent, title, isError, }) {
+    return (jsxs(Modal, { onBackdropClick: handleClose, isOpen: isModalOpen, children: [jsxs(ModalContent, { addGap: true, className: "tw-pb-squid-s", children: [jsx(NavigationBar, { displayBackButton: !!handleGoBack, onBackButtonClick: handleGoBack, subtitle: title, transparent: true }), jsx("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsx("div", { className: "tw-flex tw-aspect-square tw-size-[22.5rem] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-grey-900 tw-p-squid-m tw-shadow-elevation-light-1", children: isError ? (jsx(SwapErrorIcon, {})) : qrData ? (jsx(QrCode, { matrix: qrData, size: 320, imageUrl: imageUrl })) : (jsx(Loader, { className: "tw-text-grey-300", size: "32", strokeWidth: "3" })) }) }), jsx("footer", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-text-center tw-text-grey-500", children: footerContent })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel", onClick: handleClose })] }));
 }
 
 const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
@@ -20821,7 +20821,7 @@ const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletI
                                         (walletIconUrl ? (jsx(Image$1, { className: "!tw-h-6 !tw-w-6 !tw-rounded-lg", src: walletIconUrl })) : (jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-text-grey-900 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsx(WalletIcon, { size: "18" }) }))), jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) })) }));
 };
 function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const isFetching = isFetchingProp || isLoading;
     const [forcedAmount, setForcedAmount] = useState(amount);
     const prevRef = useRef({
@@ -20831,8 +20831,10 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
     });
     // Save previous amount between renders for transition animation.
     useEffect(() => {
-        if (direction === "from")
+        if (direction === "from") {
+            setForcedAmount(amount);
             return;
+        }
         const { amount: prevAmount, chain: prevChain, token: prevToken, } = prevRef.current;
         const currentChain = JSON.stringify(chain);
         const currentToken = JSON.stringify(token);
@@ -20846,11 +20848,9 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
         }
         setForcedAmount(prevRef.current.amount);
     }, [amount, chain, token]);
-    return (jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
-                    (walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) ||
-                    (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _a !== void 0 ? _a : true }), 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 })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
-                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
-                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
+    return (jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, label: (_b = (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) !== null && _a !== void 0 ? _a : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _b !== void 0 ? _b : (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_c = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _c !== void 0 ? _c : true }), 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 })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                    decimals: (_d = token === null || token === void 0 ? void 0 : token.decimals) !== null && _d !== void 0 ? _d : 18,
+                    symbol: (_e = token === null || token === void 0 ? void 0 : token.symbol) !== null && _e !== void 0 ? _e : "",
                     price: tokenPrice,
                 }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);

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

@@ -1,11 +1,13 @@
+/// <reference types="react" />
 interface QrCodeModalProps {
     qrData: boolean[][] | undefined;
     imageUrl?: string;
     handleClose: () => void;
     handleGoBack?: () => void;
     isModalOpen: boolean | undefined;
-    footerText: string;
+    footerContent: React.ReactNode;
     title: string;
+    isError?: boolean;
 }
-export declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerText, title, }: QrCodeModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerContent, title, isError, }: QrCodeModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/stories/layout/QrCodeModal.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const QrData: Story;
 export declare const Loading: Story;
+export declare const Error: Story;
 export declare const GoBackButton: Story;

package/dist/index.d.ts

@@ -1251,10 +1251,11 @@ interface QrCodeModalProps {
     handleClose: () => void;
     handleGoBack?: () => void;
     isModalOpen: boolean | undefined;
-    footerText: string;
+    footerContent: React.ReactNode;
     title: string;
+    isError?: boolean;
 }
-declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerText, title, }: QrCodeModalProps): react_jsx_runtime.JSX.Element;
+declare function QrCodeModal({ qrData, imageUrl, handleClose, handleGoBack, isModalOpen, footerContent, title, isError, }: QrCodeModalProps): react_jsx_runtime.JSX.Element;
 
 interface AddressHeaderProps {
     direction: SwapDirection;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "2.8.2-xrpl-beta.0",
+  "version": "2.8.2",
   "author": "",
   "license": "MIT",
   "resolutions": {