@layerswap/widget 1.0.6 → 1.1.1

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,35 @@ 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,
+                swapId: swapDetails?.id,
+                transactionHash: transactionHash,
+                fromAddress: swapInputTransaction?.from,
+                toAddress: swapBasicData?.destination_address
+            });
         }
     }, [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;
@@ -110,7 +109,7 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
             },
             current: {
                 name: 'Processing your deposit',
-                description: _jsxs("div", { className: 'flex space-x-1', children: [_jsx("div", { className: 'flex items-center space-x-1', children: _jsx(LinkWithIcon, { name: 'View in explorer', url: input_tx_explorer?.replace("{0}", transactionHash) }) }), _jsx("div", { children: _jsx("span", { children: swapInputTransaction && swapInputTransaction?.confirmations && (_jsxs("div", { children: [_jsx("span", { className: 'whitespace-nowrap', children: "| Confirmations" }), _jsxs("span", { className: "text-primary-text ml-1", children: [_jsx("span", { children: swapInputTransaction?.confirmations >= swapInputTransaction?.max_confirmations
+                description: _jsxs("div", { className: 'flex space-x-1', children: [_jsx("div", { className: 'flex items-center space-x-1', children: _jsx(LinkWithIcon, { name: 'View in explorer', url: input_tx_explorer?.replace("{0}", transactionHash) }) }), _jsx("div", { children: _jsx("span", { children: swapInputTransaction && swapInputTransaction?.confirmations > 0 && (_jsxs("div", { children: [_jsx("span", { className: 'whitespace-nowrap', children: "| Confirmations " }), _jsxs("span", { className: "text-primary-text ml-1", children: [_jsx("span", { children: swapInputTransaction?.confirmations >= swapInputTransaction?.max_confirmations
                                                         ? swapInputTransaction?.max_confirmations
                                                         : swapInputTransaction?.confirmations }), _jsx("span", { children: "/" }), swapInputTransaction?.max_confirmations] })] })) }) })] })
             },
@@ -147,7 +146,7 @@ const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
             },
             complete: {
                 name: `${swapOutputTransaction?.amount && truncateDecimals(swapOutputTransaction?.amount, destination_token.decimals)} ${destination_token.symbol} was sent to your address`,
-                description: swapOutputTransaction ? _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: 'flex items-center space-x-1', children: [_jsx("span", { children: "Transaction: " }), _jsx(LinkWithIcon, { name: 'View in explorer', url: output_tx_explorer?.replace("{0}", swapOutputTransaction.transaction_hash) })] }) }) : null,
+                description: swapOutputTransaction?.amount ? _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: 'flex items-center space-x-1', children: [_jsx("span", { children: "Transaction: " }), _jsx(LinkWithIcon, { name: 'View in explorer', url: output_tx_explorer?.replace("{0}", swapOutputTransaction.transaction_hash) })] }) }) : null,
             },
             failed: {
                 name: (swapDetails.status === SwapStatus.PendingRefund || swapDetails.status === SwapStatus.Refunded)
@@ -237,7 +236,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)) &&
@@ -269,8 +268,8 @@ const getProgressStatuses = (swapDetails, refuel, inputTxStatusFromApi) => {
         subtitle = null;
     }
     let input_transfer = transactionStatusToProgressStatus(swapInputTxStatus) || '';
-    let output_transfer = swapOutputTransaction?.transaction_hash ? ProgressStatus.Complete : inputIsCompleted ? ProgressStatus.Current : ProgressStatus.Upcoming;
-    let refuel_transfer = swapRefuelTransaction?.transaction_hash ? ProgressStatus.Complete : !!refuel ? ProgressStatus.Upcoming : ProgressStatus.Removed;
+    let output_transfer = (swapOutputTransaction?.transaction_hash && swapOutputTransaction?.amount) ? ProgressStatus.Complete : inputIsCompleted ? ProgressStatus.Current : ProgressStatus.Upcoming;
+    let refuel_transfer = (swapRefuelTransaction?.transaction_hash && swapRefuelTransaction?.amount) ? ProgressStatus.Complete : !!refuel ? ProgressStatus.Upcoming : ProgressStatus.Removed;
     let refund_status = ProgressStatus.Removed;
     if (swapStatus === SwapStatus.PendingRefund || swapStatus === SwapStatus.Refunded) {
         // For refund cases: 1) Deposit Confirmed 2) Processing Failed 3) Refund Pending/Completed

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

@@ -7,7 +7,6 @@ import useSWR from 'swr';
 import { useInitialSettings } from "../../../../../context/settings";
 import { ImageWithFallback } from "../../../../../components/Common/ImageWithFallback";
 import NumberFlow from "@number-flow/react";
-import clsx from "clsx";
 import { PriceImpact } from "../../../../../components/Input/Amount/PriceImpact";
 const Summary = (props) => {
     const { swap, quote, receiveAmount } = props;
@@ -26,12 +25,12 @@ const Summary = (props) => {
         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 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", 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-xl leading-6 font-normal whitespace-nowrap", children: [truncateDecimals(Number(requestedAmount), sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm leading-5 flex font-medium justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd || 0), prefix: "$", 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 h-[44px]", children: [_jsx("p", { className: "text-primary-text text-xl font-normal 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 font-medium", children: [_jsx(PriceImpact, { className: "text-sm", quote: swapQuote, refuel: refuel }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd || 0), prefix: "$", 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, {})] }) }));
 };
 const RouteTokenPair = ({ route, token }) => {
-    return (_jsxs("div", { className: "flex grow gap-4 text-left items-center md:text-base relative col-span-6 align-center", children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0 mb-1.5", children: [_jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "28", width: "28", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }), _jsx(ImageWithFallback, { src: route.logo, alt: "Route Logo", height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "absolute -right-1.5 -bottom-1.5 object-contain rounded-md border-1 border-secondary-300" })] }), _jsxs("div", { className: "flex flex-col font-medium text-primary-text overflow-hidden", children: [_jsx("span", { className: "leading-4 text-sm p-[1.75px]", children: token.symbol }), _jsx("div", { className: "flex items-center gap-1 leading-3 text-sm sm:text-base", children: _jsx("p", { className: "text-secondary-text text-sm truncate whitespace-nowrap p-[1.75px]", children: route.display_name }) })] })] }));
+    return (_jsxs("div", { className: "flex grow gap-4 text-left items-center md:text-base relative col-span-6 align-center", children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0 h-8 w-8", children: [_jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "28", width: "28", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }), _jsx("div", { className: "absolute -right-0.5 -bottom-0.5 rounded border border-secondary-500 bg-secondary-400 overflow-hidden", children: _jsx(ImageWithFallback, { src: route.logo, alt: "Route Logo", height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "object-contain" }) })] }), _jsxs("div", { className: "text-primary-text overflow-hidden", children: [_jsx("p", { className: "text-xl leading-6 font-normal", children: token.symbol }), _jsx("p", { className: "text-secondary-text text-sm truncate whitespace-nowrap font-medium leading-5", children: route.display_name })] })] }));
 };
 export default Summary;

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;

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, {});
+};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import WalletIcon from "../../../../../../components/Icons/WalletIcon";
 import SubmitButton from "../../../../../../components/Buttons/submitButton";
 import useWallet from "../../../../../../hooks/useWallet";
@@ -8,15 +8,19 @@ import toast from "react-hot-toast";
 import { Loader2 } from "lucide-react";
 import WalletMessage from "../../messages/Message";
 import { useConnectModal } from "../../../../../../components/Wallet/WalletModal";
-import { useInitialSettings } from "../../../../../../context/settings";
+import { useInitialSettings, useSettingsState } from "../../../../../../context/settings";
 import { useSwapTransactionStore } from "../../../../../../stores/swapTransactionStore";
-import { BackendTransactionStatus } from "../../../../../../lib/apiClients/layerSwapApiClient";
+import LayerSwapApiClient, { BackendTransactionStatus } from "../../../../../../lib/apiClients/layerSwapApiClient";
 import sleep from "../../../../../../lib/wallets/utils/sleep";
 import { isDiffByPercent } from "../../../../../../components/utils/numbers";
-// import posthog from "posthog-js";
 import { useWalletWithdrawalState } from "../../../../../../context/withdrawalContext";
-import { useSelectedAccount } from "../../../../../../context/balanceAccounts";
-import { useSwapCreateCallback } from "../../../../../../context/callbackProvider";
+import { useSelectedAccount } from "../../../../../../context/swapAccounts";
+import { ErrorHandler } from "../../../../../../lib/ErrorHandler";
+import { resolvePriceImpactValues } from "../../../../../../lib/fees";
+import InfoIcon from "../../../../../../components/Icons/InfoIcon";
+import { addressFormat } from "../../../../../../lib/address/formatter";
+import { useBalance } from "../../../../../../lib/balances/useBalance";
+import KnownInternalNames from "../../../../../../lib/knownIds";
 export const ConnectWalletButton = ({ ...props }) => {
     const { swapBasicData } = useSwapDataState();
     const { source_network } = swapBasicData || {};
@@ -83,20 +87,26 @@ export const ChangeNetworkButton = (props) => {
 export const ButtonWrapper = ({ ...props }) => {
     return _jsx(SubmitButton, { text_align: 'center', buttonStyle: 'filled', size: "medium", type: "button", className: "text-primary-text text-base", ...props, children: props.children });
 };
-export const SendTransactionButton = ({ error, onClick, swapData, refuel, ...props }) => {
-    const [actionStateText, setActionStateText] = useState();
-    const [loading, setLoading] = useState(false);
-    const { quote, quoteIsLoading, quoteError } = useSwapDataState();
+export const SendTransactionButton = ({ error, clearError, onClick, swapData: swapBasicData, refuel, ...props }) => {
+    const { quote, quoteIsLoading, quoteError, swapId, swapDetails, depositActionsResponse, refuel: refuelData } = useSwapDataState();
+    const { onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, onCancelWithdrawal } = useWalletWithdrawalState();
     const { createSwap, setSwapId, setQuoteLoading } = useSwapDataUpdate();
     const { setSwapTransaction } = useSwapTransactionStore();
     const initialSettings = useInitialSettings();
-    const triggerSwapCreateCallback = useSwapCreateCallback();
-    const { onWalletWithdrawalSuccess: onWalletWithdrawalSuccess } = useWalletWithdrawalState();
-    const selectedSourceAccount = useSelectedAccount("from", swapData.source_network?.name);
-    const { wallets } = useWallet(swapData.source_network, 'withdrawal');
+    const layerswapApiClient = new LayerSwapApiClient();
+    const selectedSourceAccount = useSelectedAccount("from", swapBasicData.source_network?.name);
+    const { networks } = useSettingsState();
+    const networkWithTokens = swapBasicData.source_network && networks.find(n => n.name === swapBasicData.source_network?.name);
+    const { balances } = useBalance(selectedSourceAccount?.address, networkWithTokens);
+    const { wallets } = useWallet(swapBasicData.source_network, 'withdrawal');
+    const [actionStateText, setActionStateText] = useState();
+    const [loading, setLoading] = useState(false);
+    const [showCriticalMarketPriceImpactButtons, setShowCriticalMarketPriceImpactButtons] = useState(false);
+    const priceImpactValues = useMemo(() => quote ? resolvePriceImpactValues(quote, refuel ? refuelData : undefined) : undefined, [quote, refuel]);
+    const criticalMarketPriceImpact = useMemo(() => priceImpactValues?.criticalMarketPriceImpact, [priceImpactValues]);
     const handleClick = async () => {
         try {
-            const selectedWallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+            const selectedWallet = selectedSourceAccount && wallets.find(w => w.addresses.some(a => addressFormat(a, swapBasicData.source_network) === addressFormat(selectedSourceAccount?.address, swapBasicData.source_network)));
             if (!selectedSourceAccount) {
                 throw new Error('Selected source account is undefined');
             }
@@ -104,71 +114,89 @@ export const SendTransactionButton = ({ error, onClick, swapData, refuel, ...pro
                 throw new Error('Wallet is not active');
             }
             setLoading(true);
-            setActionStateText("Preparing");
-            setSwapId(undefined);
-            const swapValues = {
-                amount: swapData.requested_amount,
-                from: swapData.source_network,
-                to: swapData.destination_network,
-                fromAsset: swapData.source_token,
-                toAsset: swapData.destination_token,
-                refuel: refuel,
-                destination_address: swapData.destination_address,
-                depositMethod: 'wallet',
-            };
-            const newSwapData = await createSwap(swapValues, initialSettings);
-            const swapId = newSwapData?.swap?.id;
-            if (!swapId) {
-                throw new Error('Swap ID is undefined');
+            clearError?.();
+            let swapData = swapDetails;
+            let depositActions = depositActionsResponse;
+            if (!swapId || !swapDetails) {
+                setActionStateText("Preparing");
+                setSwapId(undefined);
+                const swapValues = {
+                    amount: swapBasicData.requested_amount.toString(),
+                    from: swapBasicData.source_network,
+                    to: swapBasicData.destination_network,
+                    fromAsset: swapBasicData.source_token,
+                    toAsset: swapBasicData.destination_token,
+                    refuel: refuel,
+                    destination_address: swapBasicData.destination_address,
+                    depositMethod: 'wallet',
+                };
+                const newSwapData = await createSwap(swapValues, initialSettings);
+                const newSwapId = newSwapData?.swap?.id;
+                if (!newSwapId) {
+                    throw new Error('Swap ID is undefined');
+                }
+                setSwapId(newSwapId);
+                const priceImpactValues = newSwapData.quote ? resolvePriceImpactValues(newSwapData.quote, newSwapData.refuel) : undefined;
+                if (priceImpactValues?.criticalMarketPriceImpact) {
+                    setShowCriticalMarketPriceImpactButtons(true);
+                    return;
+                }
+                if (isDiffByPercent(quote?.receive_amount, newSwapData.quote.receive_amount, 2)) {
+                    setActionStateText("Updating quotes");
+                    setQuoteLoading(true);
+                    await sleep(3500);
+                    setQuoteLoading(false);
+                }
+                swapData = newSwapData.swap;
+                depositActions = newSwapData.deposit_actions;
             }
-            if (isDiffByPercent(quote?.receive_amount, newSwapData.quote.receive_amount, 2)) {
-                setActionStateText("Updating quotes");
-                setQuoteLoading(true);
-                await sleep(3500);
-                setQuoteLoading(false);
-            }
-            setActionStateText("Opening Wallet");
-            setSwapId(swapId);
-            const depositAction = newSwapData?.deposit_actions && newSwapData?.deposit_actions[0];
-            if (!depositAction) {
-                throw new Error('No deposit action');
+            if (!depositActions?.length) {
+                throw new Error('No deposit actions');
             }
-            if (!depositAction.call_data) {
-                throw new Error('No deposit action call data');
+            if (!swapData) {
+                throw new Error('No swap data');
             }
-            const transferProps = {
-                network: swapData.source_network,
-                token: swapData.source_token,
-                selectedWallet: selectedWallet,
-                amount: depositAction?.amount,
-                callData: depositAction?.call_data,
-                depositAddress: depositAction?.to_address,
-                sequenceNumber: newSwapData.swap?.metadata.sequence_number,
-                swapId: swapId,
-                userDestinationAddress: newSwapData.swap?.destination_address
-            };
+            const transferProps = resolveTransactionData(swapData, swapBasicData, depositActions, balances, selectedWallet);
+            setActionStateText("Opening Wallet");
             const hash = await onClick(transferProps);
             if (hash) {
                 onWalletWithdrawalSuccess?.();
-                setSwapTransaction(swapId, BackendTransactionStatus.Pending, hash);
-                triggerSwapCreateCallback(newSwapData);
+                setSwapTransaction(swapData.id, BackendTransactionStatus.Pending, hash);
+                try {
+                    await layerswapApiClient.SwapCatchup(swapData.id, hash);
+                }
+                catch (e) {
+                    console.error('Error in SwapCatchup:', e);
+                    const swapWithdrawalError = new Error(e);
+                    swapWithdrawalError.name = `SwapCatchupError`;
+                    swapWithdrawalError.cause = e;
+                    ErrorHandler({
+                        type: 'SwapWithdrawalError',
+                        message: swapWithdrawalError.message,
+                        name: swapWithdrawalError.name,
+                        stack: swapWithdrawalError.stack,
+                        cause: swapWithdrawalError.cause,
+                        swapId: swapData.id,
+                        transactionHash: hash,
+                        fromAddress: selectedSourceAccount?.address,
+                        toAddress: swapBasicData?.destination_address
+                    });
+                }
             }
         }
         catch (e) {
             setSwapId(undefined);
-            console.log('Error in SendTransactionButton:', e);
-            const swapWithdrawalError = new Error(e);
-            swapWithdrawalError.name = `SwapWithdrawalError`;
-            swapWithdrawalError.cause = e;
-            // posthog.capture('$exception', {
-            //     name: swapWithdrawalError.name,
-            //     cause: swapWithdrawalError.cause,
-            //     message: swapWithdrawalError.message,
-            //     $layerswap_exception_type: "Swap Withdrawal Error",
-            //     stack: swapWithdrawalError.stack,
-            //     where: 'TransactionError',
-            //     severity: 'error',
-            // });
+            const error = e;
+            ErrorHandler({
+                type: 'SwapWithdrawalError',
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                cause: error.cause,
+                swapId: swapId,
+                fromAddress: selectedSourceAccount?.address,
+                toAddress: swapBasicData?.destination_address
+            });
         }
         finally {
             setLoading(false);
@@ -176,5 +204,31 @@ export const SendTransactionButton = ({ error, onClick, swapData, refuel, ...pro
     };
     if (quoteIsLoading || loading)
         return (_jsx(ButtonWrapper, { ...props, isSubmitting: true, isDisabled: true, children: actionStateText || "Preparing" }));
-    return (_jsx(ButtonWrapper, { ...props, isSubmitting: props.isSubmitting || loading || quoteIsLoading, onClick: handleClick, isDisabled: quoteIsLoading || !!quoteError, children: error ? 'Try again' : 'Swap now' }));
+    if (showCriticalMarketPriceImpactButtons) {
+        return (_jsxs(_Fragment, { children: [quote && priceImpactValues && _jsx("div", { className: "py-1", children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "shrink-0", children: _jsx(InfoIcon, { className: "w-5 h-5 text-warning-foreground" }) }), _jsxs("div", { className: "flex flex-col gap-1.5 pr-4", children: [_jsx("p", { className: "text-primary-text font-semibold leading-4 text-base mt-0.5", children: "Critical receiving amount" }), _jsxs("p", { className: "text-priamry-text text-base font-normal leading-[18px]", children: [_jsx("span", { children: "By continuing, you agree to receive as low as " }), _jsxs("span", { className: "text-warning-foreground text-nowrap", children: [quote.min_receive_amount, " ", quote.destination_token?.symbol, " ($ ", priceImpactValues.minReceiveAmountUSD, ")"] })] })] })] }) }), _jsx(ButtonWrapper, { ...props, onClick: handleClick, buttonStyle: "secondary", size: "small", isSubmitting: false, isDisabled: false, children: "Continue anyway" }), _jsx(ButtonWrapper, { ...props, size: "small", onClick: () => onCancelWithdrawal?.(), isSubmitting: false, isDisabled: false, children: "Cancel & try another route" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [!!(!swapId && criticalMarketPriceImpact && quote?.destination_token && priceImpactValues && !error) && _jsx("div", { className: "py-1", children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "shrink-0", children: _jsx(InfoIcon, { className: "w-5 h-5 text-warning-foreground" }) }), _jsxs("div", { className: "flex flex-col gap-1.5 pr-4", children: [_jsx("p", { className: "text-primary-text font-medium leading-4 text-base mt-0.5", children: "Critical receiving amount" }), _jsxs("p", { className: "text-secondary-text text-sm leading-[18px]", children: [_jsx("span", { children: "The \u201Creceive at least\u201D amount is affected by high price impact. You will receive at least " }), _jsxs("span", { children: [quote.min_receive_amount, " ", quote.destination_token?.symbol, " ($ ", priceImpactValues.minReceiveAmountUSD, ") "] })] })] })] }) }), _jsx(ButtonWrapper, { ...props, isSubmitting: props.isSubmitting || loading || quoteIsLoading, onClick: handleClick, isDisabled: quoteIsLoading || !!quoteError, children: error ? 'Try again' : 'Swap now' })] }));
+};
+const resolveTransactionData = (swapDetails, swapBasicData, deposit_actions, balances, selectedWallet) => {
+    const depositAction = deposit_actions?.find(action => action.type === 'transfer'
+        || ExceptionNetworks.includes(swapBasicData.source_network?.name) && action.type === 'manual_transfer');
+    if (!depositAction) {
+        throw new Error('No deposit action found');
+    }
+    return {
+        amount: depositAction.amount,
+        callData: depositAction.call_data,
+        depositAddress: depositAction.to_address,
+        sequenceNumber: swapDetails.metadata.sequence_number,
+        swapId: swapDetails.id,
+        userDestinationAddress: swapBasicData.destination_address,
+        balances: balances,
+        network: swapBasicData.source_network,
+        token: swapBasicData.source_token,
+        selectedWallet: selectedWallet,
+    };
 };
+const ExceptionNetworks = [
+    KnownInternalNames.Networks.ImmutableXMainnet,
+    KnownInternalNames.Networks.ImmutableXSepolia
+];