@layerswap/widget 1.0.5 → 1.1.0

package/dist/esm/components/Pages/Swap/Form/SecondaryComponents/ReserveGasNote.js

@@ -4,7 +4,7 @@ import { useFormikContext } from "formik";
 import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
 import { useBalance } from "../../../../../lib/balances/useBalance";
 import useSWRGas from "../../../../../lib/gases/useSWRGas";
-import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../../context/swapAccounts";
 const ReserveGasNote = ({ onSubmit, minAllowedAmount, maxAllowedAmount }) => {
     const { values, } = useFormikContext();
     const selectedSourceAccount = useSelectedAccount("from", values.from?.name);
@@ -13,14 +13,16 @@ const ReserveGasNote = ({ onSubmit, minAllowedAmount, maxAllowedAmount }) => {
     const nativeTokenBalance = balances?.find(b => b.token == values?.from?.token?.symbol);
     const mightBeOutOfGas = !!(nativeTokenBalance?.amount && !!(gasData && nativeTokenBalance?.isNativeCurrency && (Number(values.amount)
         + gasData.gas) > nativeTokenBalance.amount
-        && minAllowedAmount
+        && minAllowedAmount && maxAllowedAmount && values.amount
+        && values.fromAsset?.symbol === values.from?.token?.symbol
         && nativeTokenBalance.amount > minAllowedAmount
+        && !(Number(values.amount) > nativeTokenBalance.amount)
         && !(maxAllowedAmount && (nativeTokenBalance.amount > (maxAllowedAmount + gasData.gas)))));
     const gasToReserveFormatted = mightBeOutOfGas ? truncateDecimals(gasData.gas, values?.fromAsset?.precision) : '';
     return (_jsx(_Fragment, { children: mightBeOutOfGas && gasToReserveFormatted ?
-            ((Number(nativeTokenBalance.amount) < Number(gasData)) ?
-                _jsx(WarningMessage, { messageType: "warning", children: _jsx("div", { className: "font-normal text-primary-text", children: "You don't have enough funds to cover gas fees." }) })
-                :
-                    _jsx(WarningMessage, { messageType: "warning", children: _jsxs("div", { className: "font-normal text-primary-text", children: [_jsx("div", { children: "You might not be able to complete the transaction." }), _jsxs("div", { onClick: () => onSubmit(nativeTokenBalance, gasData.gas), className: "cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-primary-text", children: [_jsx("span", { children: "Reserve" }), " ", _jsx("span", { children: gasToReserveFormatted }), " ", _jsx("span", { children: values?.fromAsset?.symbol }), " ", _jsx("span", { children: "for gas." })] })] }) })) : null }));
+            (_jsx("div", { className: "mt-3", children: (Number(nativeTokenBalance.amount) < Number(gasData.gas)) ?
+                    _jsx(WarningMessage, { messageType: "warning", children: _jsx("div", { className: "font-normal text-primary-text", children: "You don't have enough funds to cover gas fees." }) })
+                    :
+                        _jsx(WarningMessage, { messageType: "warning", children: _jsxs("div", { className: "font-normal text-primary-text", children: [_jsx("div", { children: "You might not be able to complete the transaction." }), _jsxs("div", { onClick: () => onSubmit(nativeTokenBalance, gasData.gas), className: "cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-primary-text", children: [_jsx("span", { children: "Reserve" }), " ", _jsx("span", { children: gasToReserveFormatted }), " ", _jsx("span", { children: nativeTokenBalance?.token }), " ", _jsx("span", { children: "for gas." })] })] }) }) })) : null }));
 };
 export default ReserveGasNote;

package/dist/esm/components/Pages/Swap/Form/SecondaryComponents/validationError/ErrorDisplay.js

@@ -13,5 +13,5 @@ export const defaultErrors = {
 };
 export const ErrorDisplay = (props) => {
     const { message, details } = { ...defaultErrors[props?.errorName || ''], ...props };
-    return (_jsx("div", { className: "px-2 py-3 rounded-2xl bg-secondary-400", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0", children: details?.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary-text font-medium leading-4 text-base mt-0.5", children: details?.title }), message ? _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: message }) : null] })] }) }));
+    return (_jsx("div", { className: "px-2 py-3 rounded-2xl bg-secondary-400", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0 p-0.5", children: details?.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary-text font-medium leading-4 text-base mt-0.5", children: details?.title }), message ? _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: message }) : null] })] }) }));
 };

package/dist/esm/components/Pages/Swap/Withdraw/Failed.js

@@ -1,20 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useSwapDataState } from '../../../../context/swap';
 import { useIntercom } from 'react-use-intercom';
 import { SwapStatus } from '../../../../Models/SwapStatus';
 import QuestionIcon from '../../../../components/Icons/Question';
-// import { posthog } from 'posthog-js';
+import { ErrorHandler } from '../../../../lib/ErrorHandler';
 const Failed = () => {
     const { swapDetails } = useSwapDataState();
     const { boot, show, update } = useIntercom();
     const updateWithProps = () => update({ customAttributes: { swapId: swapDetails?.id } });
-    // useEffect(() => {
-    //     posthog.capture('Swap failed', {
-    //         swapId: swapDetails?.id ?? null,
-    //         path: typeof window !== 'undefined' ? window.location.pathname : undefined,
-    //     });
-    // }, []);
+    useEffect(() => {
+        const error = new Error(`Swap failed: ${swapDetails?.id}`);
+        ErrorHandler({
+            type: "SwapFailed",
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            cause: error.cause
+        });
+    }, [swapDetails?.id]);
     const startIntercom = useCallback(() => {
         boot();
         show();

package/dist/esm/components/Pages/Swap/Withdraw/ManualWithdraw.js

@@ -23,11 +23,15 @@ import { truncateDecimals } from '../../../../components/utils/RoundDecimals';
 import { addressFormat } from '../../../../lib/address/formatter';
 import { isValidAddress } from '../../../../lib/address/validator';
 import { ExtendedAddress } from '../../../../components/Input/Address/AddressPicker/AddressWithIcon';
-const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel, partner, type }) => {
+import QuoteDetails from '../Form/FeeDetails';
+const ManualWithdraw = ({ swapBasicData, depositActions, refuel, partner, type, quote, isQuoteLoading }) => {
     const { wallets } = useWallet();
     const { createSwap, setSwapId } = useSwapDataUpdate();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const [newNetwork, setNewNetwork] = useState(null);
+    const [selectedFrom, setSelectedFrom] = useState({
+        network: swapBasicData?.source_network ?? null,
+        token: swapBasicData?.source_token ?? null,
+    });
     const [loading, setLoading] = useState(false);
     const { getConfirmation } = useAsyncModal();
     const [showQR, setShowQR] = useState(false);
@@ -43,8 +47,23 @@ const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel, partner,
             copy(depositAddress);
         }
     };
+    const swapValues = useMemo(() => {
+        const fromNetwork = (selectedFrom.network ?? swapBasicData?.source_network);
+        const fromToken = selectedFrom.token ?? swapBasicData?.source_token;
+        return {
+            amount: swapBasicData?.requested_amount?.toString(),
+            from: fromNetwork,
+            to: swapBasicData?.destination_network,
+            fromAsset: fromToken,
+            toAsset: swapBasicData?.destination_token,
+            refuel: !!refuel,
+            destination_address: swapBasicData?.destination_address,
+            fromExchange: swapBasicData?.source_exchange,
+            depositMethod: 'deposit_address',
+        };
+    }, [selectedFrom.network, selectedFrom.token, swapBasicData, refuel]);
     const handleClick = async (network, token) => {
-        const swapValues = {
+        const nextSwapValues = {
             amount: swapBasicData?.requested_amount?.toString(),
             from: network,
             to: swapBasicData?.destination_network,
@@ -58,17 +77,17 @@ const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel, partner,
         try {
             setLoading(true);
             await handleLimitsUpdate({
-                swapValues,
+                swapValues: nextSwapValues,
                 network,
                 token,
                 getConfirmation
             });
-            const swapData = await createSwap(swapValues, initialSettings);
-            setNewNetwork(network);
+            const swapData = await createSwap(nextSwapValues, initialSettings);
             const swapId = swapData?.swap?.id;
             if (!swapId)
                 throw new Error('Swap ID is undefined');
             setSwapId(swapId);
+            setSelectedFrom({ network, token });
             setIsPopoverOpen(false);
         }
         catch (e) {
@@ -84,15 +103,15 @@ const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel, partner,
         toAsset: swapBasicData?.destination_token?.symbol
     }), [swapBasicData]);
     const { networks: withdrawalNetworks, isLoading: exchangeSourceNetworksLoading } = useExchangeNetworks(exchangeNetworkParams);
-    const requestAmount = (_jsxs("span", { className: 'inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg', children: [_jsx("span", { children: truncateDecimals(swapBasicData?.requested_amount, swapBasicData?.source_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.source_token?.symbol }), _jsx(CopyButton, { toCopy: swapBasicData?.requested_amount, iconClassName: 'text-secondary-text' })] }));
+    const requestAmount = (_jsxs("span", { className: 'inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg', children: [_jsx("span", { children: truncateDecimals(Number(swapBasicData?.requested_amount), swapBasicData?.source_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.source_token?.symbol }), _jsx(CopyButton, { toCopy: swapBasicData?.requested_amount, iconClassName: 'text-secondary-text' })] }));
     const destinationNetwork = (_jsxs("span", { className: 'flex items-center gap-1', children: [destinationLogo && _jsx(ImageWithFallback, { src: destinationLogo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-md object-contain" }), swapBasicData?.destination_network?.display_name] }));
-    const sourceNetworkPopover = (_jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: "inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg", children: [_jsx(ImageWithFallback, { src: newNetwork?.logo || swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: newNetwork?.display_name || swapBasicData?.source_network?.display_name }), _jsx("span", { className: "pointer-events-none text-shadow-primary-text-tertiary", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-secondary-text", "aria-hidden": "true" }) })] }) }), _jsx(PopoverContent, { side: 'top', className: "bg-secondary-300! space-y-1 p-1! rounded-lg!", children: _jsx(CommandWrapper, { children: _jsx(CommandList, { children: withdrawalNetworks?.map((item) => {
+    const sourceNetworkPopover = (_jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: "inline-flex items-center gap-1 px-1.5 mx-1 bg-secondary-300 rounded-lg", children: [_jsx(ImageWithFallback, { src: selectedFrom.network?.logo ?? swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: selectedFrom.network?.display_name ?? swapBasicData?.source_network?.display_name }), _jsx("span", { className: "pointer-events-none text-shadow-primary-text-tertiary", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-secondary-text", "aria-hidden": "true" }) })] }) }), _jsx(PopoverContent, { side: 'top', className: "bg-secondary-300! space-y-1 p-1! rounded-lg!", children: _jsx(CommandWrapper, { children: _jsx(CommandList, { children: withdrawalNetworks?.map((item) => {
                             return (_jsx(CommandItem, { className: 'hover:bg-secondary-100 rounded-md p-1! cursor-pointer', value: item.network.name, onSelect: () => handleClick(item.network, item.token), children: _jsx("div", { className: `flex items-center justify-between w-full overflow-hidden`, children: _jsxs("div", { className: `gap-2 relative flex items-center w-full space-y-1`, children: [_jsx("div", { className: `h-6 w-6 shrink-0 mb-0!`, children: item.network.logo && (_jsx(ImageWithFallback, { src: item.network.logo, alt: "Project Logo", height: "24", width: "24", loading: "eager", className: "rounded-md object-contain" })) }), _jsx("div", { className: "flex justify-between w-full items-center", children: _jsx("span", { className: "flex items-center pb-0.5 text-sm font-medium text-primary-text pr-20", children: item.network.display_name }) })] }) }) }, item.network.name));
                         }) }) }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsx("div", { className: 'flex flex-col flex-1 h-full min-h-0 w-full space-y-3', children: (loading || exchangeSourceNetworksLoading) ? (_jsxs(_Fragment, { children: [_jsx(SkeletonStep, { number: 1 }), _jsx(SkeletonStep, { number: 2 }), _jsx(SkeletonStep, { number: 3 })] })) : (_jsxs(_Fragment, { children: [_jsx(Step, { number: 1, label: _jsxs("div", { className: "flex items-center justify-between gap-2 relative", children: [_jsx("span", { children: "Copy the deposit address" }), _jsx("div", { className: "relative", children: _jsxs(Popover, { open: showQR, onOpenChange: setShowQR, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "relative", children: _jsx(QRIcon, { className: "bg-secondary-300 p-1 rounded-lg cursor-pointer hover:opacity-80 fill-primary-text text-primary-text" }) }) }), _jsx(PopoverContent, { side: "left", align: "start", className: "bg-secondary-300 p-2 rounded-xl z-50", children: _jsx("div", { className: "bg-white p-2 rounded-xl shadow-lg", children: _jsx(QRCodeSVG, { className: "rounded-lg", value: depositAddress || '', includeMargin: true, size: 160, level: "H" }) }) })] }) })] }), value: _jsx("span", { className: "cursor-pointer hover:underline min-h-[20px] block", children: depositAddress ? (_jsxs("span", { className: 'flex items-center gap-1', children: [shortenAddress(depositAddress), _jsx(CopyButton, { toCopy: depositAddress || '', className: 'flex' })] })) : (_jsx("span", { className: "inline-block w-28 bg-secondary-400 h-[20px] rounded animate-pulse" })) }) }), _jsx(Step, { number: 2, label: _jsxs("span", { children: [_jsxs("span", { className: 'inline-flex items-center', children: [_jsx("span", { children: "Send" }), requestAmount] }), _jsx("span", { children: "via" }), swapBasicData?.source_exchange ? (_jsx("span", { className: "inline-flex items-center align-bottom", children: sourceNetworkPopover })) : (_jsxs("span", { className: "inline-flex items-center gap-1 mx-1 h-6 align-bottom", children: [_jsx(ImageWithFallback, { src: swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: swapBasicData?.source_network?.display_name })] })), _jsx("span", { children: "to the deposit address" })] }) }), _jsx(Step, { number: 3, label: _jsxs("span", { className: 'flex items-center gap-1', children: [_jsx("span", { children: "Receive" }), " ", _jsx("span", { children: truncateDecimals(quote?.receive_amount ?? 0, swapBasicData?.destination_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.destination_token?.symbol }), " ", _jsx("span", { children: "at" }), " ", _jsx("span", { children: destinationNetwork })] }), value: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-1", children: [WalletIcon ? (_jsx(WalletIcon, { className: "w-4 h-4 p-0.5 bg-white rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "h-4 w-4 rounded-md object-contain", src: partner.logo, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: swapBasicData.destination_address, size: 36, rounded: "4px" })), ((swapBasicData?.destination_network && isValidAddress(swapBasicData?.destination_address, swapBasicData?.destination_network)) ?
+    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsx("div", { className: 'flex flex-col flex-1 h-full min-h-0 w-full space-y-3', children: (loading || exchangeSourceNetworksLoading) ? (_jsxs(_Fragment, { children: [_jsx(SkeletonStep, { number: 1 }), _jsx(SkeletonStep, { number: 2 }), _jsx(SkeletonStep, { number: 3 })] })) : (_jsxs(_Fragment, { children: [_jsx(Step, { number: 1, label: _jsxs("div", { className: "flex items-center justify-between gap-2 relative", children: [_jsx("span", { children: "Copy the deposit address" }), _jsx("div", { className: "relative", children: _jsxs(Popover, { open: showQR, onOpenChange: setShowQR, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "relative", children: _jsx(QRIcon, { className: "bg-secondary-300 p-1 rounded-lg cursor-pointer hover:opacity-80 fill-primary-text text-primary-text" }) }) }), _jsx(PopoverContent, { side: "left", align: "start", className: "bg-secondary-300 p-2 rounded-xl z-50", children: _jsx("div", { className: "bg-white p-2 rounded-xl shadow-lg", children: _jsx(QRCodeSVG, { className: "rounded-lg", value: depositAddress || '', includeMargin: true, size: 160, level: "H" }) }) })] }) })] }), value: _jsx("span", { className: "cursor-pointer hover:underline min-h-5 block", children: depositAddress ? (_jsxs("span", { className: 'flex items-center gap-1', children: [shortenAddress(depositAddress), _jsx(CopyButton, { toCopy: depositAddress || '', className: 'flex' })] })) : (_jsx("span", { className: "inline-block w-28 bg-secondary-400 h-5 rounded animate-pulse" })) }) }), _jsx(Step, { number: 2, label: _jsxs("span", { children: [_jsxs("span", { className: 'inline-flex items-center', children: [_jsx("span", { children: "Send" }), requestAmount] }), _jsx("span", { children: "via" }), swapBasicData?.source_exchange ? (_jsx("span", { className: "inline-flex items-center align-bottom max-sm:mt-1", children: sourceNetworkPopover })) : (_jsxs("span", { className: "inline-flex items-center gap-1 mx-1 h-6 align-bottom", children: [_jsx(ImageWithFallback, { src: swapBasicData?.source_network?.logo, alt: "Project Logo", height: "16", width: "16", loading: "eager", className: "rounded-sm object-contain" }), _jsx("span", { children: swapBasicData?.source_network?.display_name })] })), _jsx("span", { children: "to the deposit address" })] }) }), _jsx(Step, { number: 3, label: _jsxs("span", { className: 'flex items-center gap-1', children: [_jsx("span", { children: "Receive" }), " ", _jsx("span", { children: truncateDecimals(quote?.receive_amount ?? 0, swapBasicData?.destination_token?.precision) }), " ", _jsx("span", { children: swapBasicData?.destination_token?.symbol }), " ", _jsx("span", { children: "at" }), " ", _jsx("span", { children: destinationNetwork })] }), value: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-1", children: [WalletIcon ? (_jsx(WalletIcon, { className: "w-4 h-4 bg-secondary-700 rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "h-4 w-4 rounded-md object-contain", src: partner.logo, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: swapBasicData.destination_address, size: 36, rounded: "4px" })), ((swapBasicData?.destination_network && isValidAddress(swapBasicData?.destination_address, swapBasicData?.destination_network)) ?
                                             _jsx("div", { className: "text-sm group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(swapBasicData?.destination_address, swapBasicData?.destination_network), network: swapBasicData?.destination_network, shouldShowChevron: false }) })
                                             :
-                                                _jsx("p", { className: "text-sm text-secondary-text", children: shortenAddress(swapBasicData?.destination_address) }))] }) })] })) }) }), _jsx(Widget.Footer, { sticky: type == 'widget', children: _jsx(SubmitButton, { onClick: handleCopy, children: copied ? 'Copied!' : 'Copy deposit address' }) })] }));
+                                                _jsx("p", { className: "text-sm text-secondary-text", children: shortenAddress(swapBasicData?.destination_address) }))] }) }), _jsx(QuoteDetails, { swapValues: swapValues, quote: quote, isQuoteLoading: isQuoteLoading, triggerClassnames: 'mt-0!' })] })) }) }), _jsx(Widget.Footer, { sticky: type == 'widget', children: _jsx(SubmitButton, { onClick: handleCopy, children: copied ? 'Copied!' : 'Copy deposit address' }) })] }));
 };
 const Step = ({ number, label, value }) => (_jsxs("div", { className: "flex items-start space-x-3 bg-secondary-500 p-3 rounded-xl", children: [_jsx("div", { className: "w-6 h-6 rounded-md bg-secondary-400 text-primary-text flex items-center justify-center text-base font-normal leading-6", children: number }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-normal text-base leading-6", children: label }), _jsx("div", { className: "text-sm text-secondary-text", children: value })] })] }));
 const SkeletonStep = ({ number }) => (_jsxs("div", { className: "flex items-start space-x-3 bg-secondary-500 p-3 rounded-lg animate-pulse", children: [_jsx("div", { className: "w-6 h-6 rounded-md bg-secondary-400 text-primary-text flex items-center justify-center text-base font-normal leading-6", children: number }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsx("div", { className: "h-5 bg-secondary-300 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-secondary-300 rounded w-1/2" })] })] }));

package/dist/esm/components/Pages/Swap/Withdraw/NotFound.js

@@ -1,19 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useIntercom } from "react-use-intercom";
 import { Home } from "lucide-react";
-import { useBackClickCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 import MessageComponent from "../../../../components/Common/MessageComponent";
 import NotFoundIcon from "../../../../components/Icons/NotFoundIcon";
+import { ErrorHandler } from "../../../../lib/ErrorHandler";
 const NotFound = ({ swapId }) => {
     const { boot, show, update } = useIntercom();
     const updateWithProps = () => update({ customAttributes: { swapId: swapId } });
-    const triggerBackClickCallback = useBackClickCallback();
+    const { onBackClick } = useCallbacks();
+    useEffect(() => {
+        const error = new Error(`Swap not found: ${swapId}`);
+        ErrorHandler({
+            type: "NotFound",
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            cause: error.cause
+        });
+    }, [swapId]);
     const startIntercom = useCallback(() => {
         boot();
         show();
         updateWithProps();
     }, [boot, show, updateWithProps]);
-    return _jsxs(MessageComponent, { children: [_jsxs(MessageComponent.Content, { center: true, children: [_jsxs(MessageComponent.Header, { className: "mb-3", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20", children: _jsx(NotFoundIcon, {}) }), _jsx("h1", { className: "text-center text-2xl font-semibold text-primary-text", children: "Swap not found" })] }), _jsx(MessageComponent.Description, { children: _jsxs("p", { className: "mx-auto text-center text-base font-normal leading-5 text-secondary-text px-9", children: [_jsx("span", { children: "We couldn't find a swap with this link. If you believe there's an issue, please" }), _jsx("button", { type: "button", onClick: startIntercom, className: "mx-1 underline decoration-gray-400 underline-offset-2 hover:decoration-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#0f1420] focus:ring-gray-400 rounded", children: _jsx("span", { children: "contact our support" }) }), _jsx("span", { children: "and we'll help you fix it." })] }) })] }), _jsx(MessageComponent.Buttons, { children: _jsx("div", { className: "flex w-full text-primary-text text-base space-x-2", children: _jsxs("button", { onClick: triggerBackClickCallback, type: "button", className: "w-full inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-300 px-5 py-4 text-base font-semibold leading-6 hover:bg-secondary-400 focus:outline-none transition", children: [_jsx(Home, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("span", { children: "Back to app" })] }) }) })] });
+    return _jsxs(MessageComponent, { children: [_jsxs(MessageComponent.Content, { center: true, children: [_jsxs(MessageComponent.Header, { className: "mb-3", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20", children: _jsx(NotFoundIcon, {}) }), _jsx("h1", { className: "text-center text-2xl font-semibold text-primary-text", children: "Swap not found" })] }), _jsx(MessageComponent.Description, { children: _jsxs("p", { className: "mx-auto text-center text-base font-normal leading-5 text-secondary-text px-9", children: [_jsx("span", { children: "We couldn't find a swap with this link. If you believe there's an issue, please" }), _jsx("button", { type: "button", onClick: startIntercom, className: "mx-1 underline decoration-gray-400 underline-offset-2 hover:decoration-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#0f1420] focus:ring-gray-400 rounded", children: _jsx("span", { children: "contact our support" }) }), _jsx("span", { children: "and we'll help you fix it." })] }) })] }), _jsx(MessageComponent.Buttons, { children: _jsx("div", { className: "flex w-full text-primary-text text-base space-x-2", children: _jsxs("button", { onClick: onBackClick, type: "button", className: "w-full inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-300 px-5 py-4 text-base font-semibold leading-6 hover:bg-secondary-400 focus:outline-none transition", children: [_jsx(Home, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("span", { children: "Back to app" })] }) }) })] });
 };
 export default NotFound;

package/dist/esm/components/Pages/Swap/Withdraw/Processing/Processing.js

@@ -16,12 +16,13 @@ import { useSwapTransactionStore } from '../../../../../stores/swapTransactionSt
 import CountdownTimer from '../../../../../components/Common/CountDownTimer';
 import useSWR from 'swr';
 import { useIntercom } from 'react-use-intercom';
-import logError from '../../../../../lib/logError';
-// import { posthog } from 'posthog-js';
 import Steps from './StepsComponent';
+import { useCallbacks } from '../../../../../context/callbackProvider';
+import { ErrorHandler } from '../../../../../lib/ErrorHandler';
 const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
-    const { boot, show, update, showNewMessages } = useIntercom();
+    const { boot, show, update } = useIntercom();
     const { setSwapTransaction, swapTransactions } = useSwapTransactionStore();
+    const { onSwapStatusChange } = useCallbacks();
     const { source_network, destination_network, destination_token, } = swapBasicData;
     const { fail_reason } = swapDetails;
     const updateWithProps = () => update({ customAttributes: { swapId: swapDetails.id } });
@@ -42,17 +43,6 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
     const { data: inputTxStatusData } = useSWR((transactionHash && swapInputTransaction?.status !== BackendTransactionStatus.Completed) ? [source_network?.name, transactionHash] : null, ([network, tx_id]) => apiClient.GetTransactionStatus(network, tx_id), { dedupingInterval: 6000 });
     const inputTxStatus = swapInputTransaction ? swapInputTransaction.status : inputTxStatusData?.data?.status.toLowerCase();
     const loggedNotDetectedTxAt = useRef(null);
-    const handleSupportClick = useCallback(() => {
-        const transactionHash = swapInputTransaction?.transaction_hash || storedWalletTransaction?.hash;
-        const message = `Hi! My transaction (Swap ID: ${swapDetails.id}) has been processing for longer than expected. ${transactionHash ? `Transaction hash: ${transactionHash}` : ''} Could you please help me check the status?`;
-        boot();
-        update({
-            customAttributes: {
-                swapId: swapDetails.id,
-            }
-        });
-        showNewMessages(message);
-    }, [boot, show, update, swapDetails.id, swapInputTransaction, storedWalletTransaction]);
     useEffect(() => {
         if (inputTxStatus === TransactionStatus.Completed || inputTxStatus === TransactionStatus.Pending) {
             if (swapDetails?.transactions?.find(t => t.type === TransactionType.Input) || !swapDetails) {
@@ -60,7 +50,14 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
             }
             if (Date.now() - (loggedNotDetectedTxAt.current || storedWalletTransaction.timestamp) > 60000) {
                 loggedNotDetectedTxAt.current = Date.now();
-                logError(`Transaction not detected in ${source_network.name}. Tx hash: \`${transactionHash}\`. Tx status: ${inputTxStatus}. Swap id: \`${swapDetails.id}\`. ${source_network.display_name} explorer: ${source_network?.transaction_explorer_template?.replace("{0}", transactionHash)} . LS explorer: https://layerswap.io/explorer/${storedWalletTransaction?.hash} `);
+                const error = new Error(`Transaction not detected in ${source_network.name}. Tx hash: \`${transactionHash}\`. Tx status: ${inputTxStatus}. Swap id: \`${swapDetails.id}\`. ${source_network.display_name} explorer: ${source_network?.transaction_explorer_template?.replace("{0}", transactionHash)} . LS explorer: https://layerswap.io/explorer/${storedWalletTransaction?.hash} `);
+                ErrorHandler({
+                    type: "TransactionNotDetected",
+                    message: error.message,
+                    name: error.name,
+                    stack: error.stack,
+                    cause: error.cause
+                });
             }
         }
     }, [swapDetails, storedWalletTransaction, source_network]);
@@ -71,33 +68,31 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
     useEffect(() => {
         if (inputTxStatus === TransactionStatus.Failed) {
             const err = new Error("Transaction failed");
-            const renderingError = new Error(`Swap:${swapDetails?.id} transaction:${transactionHash} failed`);
-            renderingError.name = `TransactionFailed`;
-            renderingError.cause = err;
-            // posthog.capture('$exception', {
-            //     name: renderingError.name,
-            //     message: renderingError.message,
-            //     $layerswap_exception_type: "Transaction Error",
-            //     stack: renderingError.stack,
-            //     cause: renderingError.cause,
-            //     where: 'TransactionError',
-            //     severity: 'error',
-            // });
+            const error = new Error(`Swap:${swapDetails?.id} transaction:${transactionHash} failed`);
+            error.name = `TransactionFailed`;
+            error.cause = err;
+            ErrorHandler({
+                type: "TransactionFailed",
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                cause: error.cause
+            });
         }
     }, [inputTxStatus, transactionHash, swapDetails?.id]);
-    // useEffect(() => {
-    //     if (
-    //         swapDetails?.status === SwapStatus.Completed ||
-    //         swapDetails?.status === SwapStatus.Failed ||
-    //         swapDetails?.status === SwapStatus.Expired ||
-    //         swapDetails?.status === SwapStatus.LsTransferPending
-    //     ) {
-    //         posthog?.capture(`${swapDetails?.status}`, {
-    //             swap_id: swapDetails?.id,
-    //             status: swapDetails?.status,
-    //         })
-    //     }
-    // }, [swapDetails?.status, swapDetails?.id])
+    useEffect(() => {
+        const status = swapDetails?.status;
+        if (status === SwapStatus.Completed ||
+            status === SwapStatus.Failed ||
+            status === SwapStatus.Expired ||
+            status === SwapStatus.LsTransferPending) {
+            onSwapStatusChange({
+                type: status,
+                swapId: swapDetails?.id,
+                path: 'Processing',
+            });
+        }
+    }, [swapDetails?.status, swapDetails?.id]);
     const truncatedRefuelAmount = refuel && truncateDecimals(refuel.amount, refuel.token?.precision);
     const progressStatuses = getProgressStatuses(swapDetails, refuel, inputTxStatusData?.data?.status.toLowerCase());
     const stepStatuses = progressStatuses.stepStatuses;
@@ -237,7 +232,7 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
     let currentSteps = allSteps.filter((s) => s.status && s.status != ProgressStatus.Removed);
     let stepsProgressPercentage = currentSteps.filter(x => x.status == ProgressStatus.Complete).length / currentSteps.length * 100;
     const swapStatus = swapDetails.status;
-    return (_jsx(Widget.Content, { children: _jsxs("div", { className: `w-full min-h-[410px] h-full space-y-3 flex flex-col justify-between text-primary-text`, children: [_jsx(SwapSummary, {}), _jsxs("div", { className: "bg-secondary-500 font-normal px-3 pt-6 pb-3 rounded-2xl space-y-4 flex flex-col w-full relative z-10 divide-y-2 divide-secondary-300 divide-dashed", children: [_jsx("div", { className: 'pb-4', children: _jsxs("div", { className: 'flex flex-col gap-2 items-center', children: [_jsxs("div", { className: 'flex items-center', children: [swapStatus === SwapStatus.PendingRefund && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-primary/20", children: _jsx(Undo2, { className: "h-7 w-7 text-primary", "aria-hidden": "true" }) })), swapStatus === SwapStatus.Refunded && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center", children: _jsx(CircleCheck, { className: "h-10 w-10 text-primary", strokeWidth: 2, "aria-hidden": "true" }) })), swapStatus !== SwapStatus.PendingRefund && swapStatus !== SwapStatus.Refunded && (_jsx(Gauge, { value: stepsProgressPercentage, size: "small", showCheckmark: swapStatus === SwapStatus.Completed }))] }), _jsxs("div", { className: "flex-col text-center ", children: [_jsx("span", { className: "font-medium text-primary-text", children: progressStatuses.generalStatus.title }), progressStatuses.generalStatus.subTitle &&
+    return (_jsx(Widget.Content, { fitContent: true, children: _jsxs("div", { className: `w-full min-h-[410px] h-full space-y-3 flex flex-col justify-between text-primary-text`, children: [_jsx(SwapSummary, {}), _jsxs("div", { className: "bg-secondary-500 font-normal px-3 pt-6 pb-3 rounded-2xl space-y-4 flex flex-col w-full relative z-10 divide-y-2 divide-secondary-300 divide-dashed", children: [_jsx("div", { className: 'pb-4', children: _jsxs("div", { className: 'flex flex-col gap-2 items-center', children: [_jsxs("div", { className: 'flex items-center', children: [swapStatus === SwapStatus.PendingRefund && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-primary/20", children: _jsx(Undo2, { className: "h-7 w-7 text-primary", "aria-hidden": "true" }) })), swapStatus === SwapStatus.Refunded && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center", children: _jsx(CircleCheck, { className: "h-10 w-10 text-primary", strokeWidth: 2, "aria-hidden": "true" }) })), swapStatus !== SwapStatus.PendingRefund && swapStatus !== SwapStatus.Refunded && (_jsx(Gauge, { value: stepsProgressPercentage, size: "small", showCheckmark: swapStatus === SwapStatus.Completed }))] }), _jsxs("div", { className: "flex-col text-center ", children: [_jsx("span", { className: "font-medium text-primary-text", children: progressStatuses.generalStatus.title }), progressStatuses.generalStatus.subTitle &&
                                                 _jsx("span", { className: "text-sm block text-secondary-text", children: progressStatuses.generalStatus.subTitle }), swapOutputTransaction?.status != BackendTransactionStatus.Completed && (swapStatus !== SwapStatus.Cancelled && swapStatus !== SwapStatus.Expired && swapStatus !== SwapStatus.Failed && swapStatus !== SwapStatus.PendingRefund && swapStatus !== SwapStatus.Refunded) &&
                                                 _jsx("span", { className: 'text-sm block space-x-1 text-secondary-text', children: _jsx("span", { children: countDownTimer }) })] })] }) }), _jsxs("div", { className: 'pt-4', children: [swapStatus != SwapStatus.Cancelled && swapStatus != SwapStatus.Expired && currentSteps.find(x => x.status != null) &&
                                     _jsx("div", { className: 'flex flex-col justify-center space-y-4', children: _jsx(Steps, { steps: currentSteps }) }), ([SwapStatus.Expired, SwapStatus.Cancelled, SwapStatus.UserTransferDelayed].includes(swapStatus)) &&

package/dist/esm/components/Pages/Swap/Withdraw/Summary/Summary.js

@@ -10,7 +10,7 @@ import NumberFlow from "@number-flow/react";
 import clsx from "clsx";
 import { PriceImpact } from "../../../../../components/Input/Amount/PriceImpact";
 const Summary = (props) => {
-    const { swap, quote, receiveAmount, quoteIsLoading } = props;
+    const { swap, quote, receiveAmount } = props;
     const { refuel, quote: swapQuote } = quote;
     const { source_token: sourceCurrency, destination_token: destinationCurrency, source_network: from, destination_network: to, requested_amount: requestedAmount, destination_address: destinationAddress, source_exchange: sourceExchange } = swap;
     const { hideFrom, hideTo, account, appName, } = useInitialSettings();
@@ -19,14 +19,14 @@ const Summary = (props) => {
     const partner = partnerData?.data;
     const source = (hideFrom && partner && account) ? partner : from;
     const destination = (hideTo && partner && account) ? partner : to;
-    const requestedAmountInUsd = requestedAmount && (sourceCurrency?.price_in_usd * requestedAmount).toFixed(2);
+    const requestedAmountInUsd = requestedAmount && (sourceCurrency?.price_in_usd * Number(requestedAmount)).toFixed(2);
     const receiveAmountInUsd = receiveAmount ? (destinationCurrency?.price_in_usd * receiveAmount).toFixed(2) : undefined;
     const nativeCurrency = refuel?.token;
     const truncatedRefuelAmount = nativeCurrency && !!refuel ?
         truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
     const refuelAmountInUsd = nativeCurrency && ((nativeCurrency?.price_in_usd || 1) * (Number(truncatedRefuelAmount) || 0)).toFixed(2);
     return (_jsx("div", { className: "bg-secondary-500 rounded-2xl px-3 py-4 w-full relative z-10 space-y-4", children: _jsxs("div", { className: "font-normal flex flex-col w-full relative z-10 space-y-3", children: [_jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: sourceExchange || source, token: sourceCurrency }), _jsxs("div", { className: "flex flex-col col-start-7 col-span-4 items-end", children: [requestedAmount &&
-                                    _jsxs("p", { className: "text-primary-text text-sm", children: [truncateDecimals(requestedAmount, sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", bridgeFee: swapQuote?.blockchain_fee, destinationTokenPriceUsd: swapQuote?.destination_token?.price_in_usd, receiveAmount: swapQuote?.receive_amount, requestedAmount: swapQuote?.requested_amount, serviceFee: swapQuote?.service_fee, sourceTokenPriceUsd: swapQuote?.source_token?.price_in_usd }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
+                                    _jsxs("p", { className: "text-primary-text text-sm whitespace-nowrap", children: [truncateDecimals(Number(requestedAmount), sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", quote: swapQuote }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
                     _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: 'flex items-center gap-3 text-sm', children: [_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-lg p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }), _jsx("p", { children: "Refuel" })] }), _jsxs("div", { className: "flex flex-col items-end", children: [_jsxs("p", { className: "text-primary-text text-sm", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", refuelAmountInUsd] })] })] })
                     :
                         _jsx(_Fragment, {})] }) }));

package/dist/esm/components/Pages/Swap/Withdraw/Summary/index.js

@@ -5,7 +5,7 @@ import { TransactionType } from "../../../../../lib/apiClients/layerSwapApiClien
 import { shortenEmail } from "../../../../../components/utils/ShortenAddress";
 import KnownInternalNames from "../../../../../lib/knownIds";
 import { useInitialSettings } from "../../../../../context/settings";
-import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../../context/swapAccounts";
 const SwapSummary = () => {
     const { hideFrom, account, } = useInitialSettings();
     const { swapBasicData, swapDetails, quote, refuel, quoteIsLoading } = useSwapDataState();
@@ -18,7 +18,7 @@ const SwapSummary = () => {
     const swapOutputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Output);
     const requested_amount = (swapInputTransaction?.amount ?? swapBasicData.requested_amount) || undefined;
     const receiveAmount = quote?.receive_amount;
-    const calculatedReceiveAmount = swapOutputTransaction?.amount ?? receiveAmount;
+    const calculatedReceiveAmount = swapOutputTransaction?.amount ? swapOutputTransaction?.amount : receiveAmount;
     let sourceAccountAddress = "";
     if (hideFrom && account) {
         sourceAccountAddress = account;
@@ -41,7 +41,7 @@ const SwapSummary = () => {
     const swapData = {
         swap: {
             ...swapBasicData,
-            requested_amount: requested_amount
+            requested_amount: requested_amount?.toString()
         },
         quote: {
             quote: quote,

package/dist/esm/components/Pages/Swap/Withdraw/SwapDetails.js

@@ -9,8 +9,10 @@ import { SwapStatus } from '../../../../Models/SwapStatus';
 import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
 import SubmitButton from '../../../../components/Buttons/submitButton';
 import ManualWithdraw from './ManualWithdraw';
-const SwapDetails = ({ type, onWalletWithdrawalSuccess, partner }) => {
-    const { swapDetails, swapBasicData, quote, refuel, depositActionsResponse } = useSwapDataState();
+import { useCallbacks } from "../../../../context/callbackProvider";
+const SwapDetails = ({ type, onWalletWithdrawalSuccess, onCancelWithdrawal, partner }) => {
+    const { swapDetails, swapBasicData, refuel, depositActionsResponse, quote, quoteIsLoading } = useSwapDataState();
+    const { onBackClick } = useCallbacks();
     const swapStatus = swapDetails?.status || SwapStatus.UserTransferPending;
     const storedWalletTransactions = useSwapTransactionStore();
     const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
@@ -20,18 +22,18 @@ const SwapDetails = ({ type, onWalletWithdrawalSuccess, partner }) => {
     }, [swapDetails?.id, storedWalletTransactions]);
     if (!swapBasicData)
         return _jsx(_Fragment, { children: _jsx("div", { className: "w-full h-[430px]", children: _jsx("div", { className: "animate-pulse flex space-x-4", children: _jsxs("div", { className: "flex-1 space-y-6 py-1", children: [_jsx("div", { className: "h-32 bg-secondary-700 rounded-lg" }), _jsx("div", { className: "h-40 bg-secondary-700 rounded-lg" }), _jsx("div", { className: "h-12 bg-secondary-700 rounded-lg" })] }) }) }) });
-    return (_jsx(Container, { type: type, children: ((swapStatus === SwapStatus.UserTransferPending
+    return (_jsx(Container, { type: type, goBack: onBackClick, children: ((swapStatus === SwapStatus.UserTransferPending
             && !(swapInputTransaction || storedWalletTransaction))) ?
             (swapBasicData?.use_deposit_address === true
-                ? _jsx(ManualWithdraw, { swapBasicData: swapBasicData, quote: quote, depositActions: depositActionsResponse, refuel: refuel, partner: partner, type: type })
-                : _jsx(Withdraw, { type: type, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, partner: partner }))
+                ? _jsx(ManualWithdraw, { swapBasicData: swapBasicData, depositActions: depositActionsResponse, refuel: refuel, partner: partner, type: type, quote: quote, isQuoteLoading: quoteIsLoading })
+                : _jsx(Withdraw, { type: type, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, onCancelWithdrawal: onCancelWithdrawal, partner: partner }))
             :
                 _jsxs("div", { className: 'space-y-3 w-full h-full', children: [_jsx(Processing, {}), storedWalletTransaction?.status == BackendTransactionStatus.Failed &&
                             _jsx(SubmitButton, { isDisabled: false, isSubmitting: false, onClick: removeStoredTransaction, children: "Try again" })] }) }));
 };
-const Container = ({ type, children }) => {
+const Container = ({ type, children, goBack }) => {
     if (type === "widget")
-        return _jsx(Widget, { children: _jsx(_Fragment, { children: children }) });
+        return _jsx(Widget, { goBack: goBack, children: _jsx(_Fragment, { children: children }) });
     else
         return _jsx("div", { className: "w-full flex flex-col justify-between h-full space-y-3 text-secondary-text", children: children });
 };

package/dist/esm/components/Pages/Swap/Withdraw/Wallet/Common/actionMessage.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ActionMessages, ActionMessageType } from "../../messages/TransactionMessages";
+import { ErrorHandler } from "../../../../../../lib/ErrorHandler";
+export const ActionMessage = ({ error, isLoading }) => {
+    useEffect(() => {
+        if (error && (error?.name === ActionMessageType.UnexpectedErrorMessage
+            || !Object.values(ActionMessageType).includes(error.name))) {
+            ErrorHandler({
+                type: "SwapWithdrawalError",
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                cause: error.cause
+            });
+        }
+    }, [error]);
+    if (isLoading) {
+        return _jsx(ActionMessages.ConfirmActionMessage, {});
+    }
+    else if (error?.name === ActionMessageType.TransactionRejected) {
+        return _jsx(ActionMessages.TransactionRejectedMessage, {});
+    }
+    else if (error?.name === ActionMessageType.TransactionFailed) {
+        return _jsx(ActionMessages.TransactionFailedMessage, {});
+    }
+    else if (error?.name === ActionMessageType.InsufficientFunds) {
+        return _jsx(ActionMessages.InsufficientFundsMessage, {});
+    }
+    else if (error?.name === ActionMessageType.WaletMismatch) {
+        return _jsx(ActionMessages.WaletMismatchMessage, { address: error?.message });
+    }
+    else if (error?.name === ActionMessageType.DifferentAccountsNotAllowedError) {
+        return _jsx(ActionMessages.DifferentAccountsNotAllowedError, { network: error?.message });
+    }
+    else if (error) {
+        if (!error.message)
+            return _jsx(ActionMessages.UnexpectedErrorMessage, { message: 'Something went wrong' });
+        return _jsx(ActionMessages.UnexpectedErrorMessage, { message: error.message });
+    }
+    else
+        return _jsx(_Fragment, {});
+};