@layerswap/widget 1.0.6 → 1.1.0

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 } = 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) : undefined, [quote]);
+    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,82 @@ 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) : 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);
+            if (!depositActions?.length) {
+                throw new Error('No deposit actions');
             }
-            setActionStateText("Opening Wallet");
-            setSwapId(swapId);
-            const depositAction = newSwapData?.deposit_actions && newSwapData?.deposit_actions[0];
-            if (!depositAction) {
-                throw new Error('No deposit action');
+            if (!swapData) {
+                throw new Error('No swap data');
             }
-            if (!depositAction.call_data) {
-                throw new Error('No deposit action call 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,
+                    });
+                }
             }
         }
         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
+            });
         }
         finally {
             setLoading(false);
@@ -176,5 +197,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-white 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-white 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
+];

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

@@ -2,13 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useState } from "react";
 import { WithdrawalProvider } from "../../../../../context/withdrawalContext";
 import useWallet from "../../../../../hooks/useWallet";
-import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../../context/swapAccounts";
 import { ChangeNetworkButton, ConnectWalletButton, SendTransactionButton } from "./Common/buttons";
-import TransactionMessages, { TransactionMessageType } from "../messages/TransactionMessages";
 import { useInitialSettings, useSettingsState } from "../../../../../context/settings";
 import WalletIcon from "../../../../../components/Icons/WalletIcon";
 import { useBalance } from "../../../../../lib/balances/useBalance";
-export const WalletTransferAction = ({ swapData, swapId, refuel, onWalletWithdrawalSuccess }) => {
+import { ActionMessage } from "./Common/actionMessage";
+import { ActionMessages } from "../messages/TransactionMessages";
+import { useTransfer } from "../../../../../hooks/useTransfer";
+export const WalletTransferAction = ({ swapData, swapId, refuel, onWalletWithdrawalSuccess, onCancelWithdrawal }) => {
     const { source_network } = swapData;
     const { provider, wallets } = useWallet(source_network, "withdrawal");
     const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
@@ -19,7 +21,7 @@ export const WalletTransferAction = ({ swapData, swapId, refuel, onWalletWithdra
         }
     }, [selectedSourceAccount?.address, source_network?.name]);
     return _jsx(_Fragment, { children: swapData &&
-            _jsx(WithdrawalProvider, { onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, children: _jsx(WalletWithdrawal, { swapId: swapId, swapBasicData: swapData, refuel: refuel }) }) });
+            _jsx(WithdrawalProvider, { onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, onCancelWithdrawal: onCancelWithdrawal, children: _jsx(WalletWithdrawal, { swapId: swapId, swapBasicData: swapData, refuel: refuel }) }) });
 };
 export const WalletWithdrawal = ({ swapBasicData, refuel, swapId }) => {
     const { source_network, destination_network, destination_address } = swapBasicData;
@@ -27,7 +29,7 @@ export const WalletWithdrawal = ({ swapBasicData, refuel, swapId }) => {
     const { wallets, provider } = useWallet(source_network, "withdrawal");
     const { sameAccountNetwork } = useInitialSettings();
     const wallet = wallets.find(w => w.id === selectedSourceAccount?.id && w.withdrawalSupportedNetworks?.includes(source_network?.name));
-    const networkChainId = Number(source_network?.chain_id) ?? undefined;
+    const networkChainId = source_network?.chain_id ?? undefined;
     const [savedTransactionHash, setSavedTransactionHash] = useState();
     useEffect(() => {
         if (!swapId)
@@ -54,16 +56,16 @@ export const WalletWithdrawal = ({ swapBasicData, refuel, swapId }) => {
     if ((source_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase() || destination_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase())
         && (selectedSourceAccount?.address && destination_address && selectedSourceAccount?.address.toLowerCase() !== destination_address?.toLowerCase())) {
         const network = source_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase() ? source_network : destination_network;
-        return _jsx(TransactionMessages.DifferentAccountsNotAllowedError, { network: network?.display_name });
+        return _jsx(ActionMessages.DifferentAccountsNotAllowedError, { network: network?.display_name });
     }
     if (!wallet) {
         return _jsx(ConnectWalletButton, {});
     }
-    else if (wallet.chainId && wallet.chainId !== networkChainId && source_network) {
-        return _jsx(ChangeNetworkButton, { chainId: networkChainId, network: source_network });
+    else if (wallet.chainId && wallet.chainId != networkChainId && source_network) {
+        return _jsx(ChangeNetworkButton, { chainId: Number(networkChainId), network: source_network });
     }
     else {
-        return _jsx(TransferTokenButton, { swapData: swapBasicData, refuel: refuel, chainId: networkChainId, savedTransactionHash: savedTransactionHash });
+        return _jsx(TransferTokenButton, { swapData: swapBasicData, refuel: refuel, chainId: Number(networkChainId), savedTransactionHash: savedTransactionHash });
     }
 };
 const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }) => {
@@ -76,7 +78,8 @@ const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }
     const { provider, wallets } = useWallet(swapData.source_network, "withdrawal");
     const { balances } = useBalance(selectedSourceAccount?.address, networkWithTokens);
     const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
-    const clickHandler = useCallback(async ({ amount, callData, depositAddress }) => {
+    const { executeTransfer } = useTransfer();
+    const clickHandler = useCallback(async ({ amount, callData, depositAddress, swapId }) => {
         setButtonClicked(true);
         setError(undefined);
         setLoading(true);
@@ -87,22 +90,47 @@ const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }
                 throw new Error('Missing amount');
             if (!wallet)
                 throw new Error('No selected account');
-            if (!provider?.transfer)
-                throw new Error('No provider transfer');
-            const tx = await provider.transfer({
-                token: swapData.source_token,
-                amount,
-                depositAddress,
-                callData,
-                selectedWallet: wallet,
-                network: swapData.source_network,
-                balances: balances,
-                userDestinationAddress: swapData.destination_address,
-            });
-            if (!tx)
-                throw new Error('No transaction');
-            if (tx) {
-                return tx;
+            try {
+                const tx = await executeTransfer({
+                    token: swapData.source_token,
+                    amount,
+                    depositAddress,
+                    callData,
+                    selectedWallet: wallet,
+                    network: swapData.source_network,
+                    balances: balances,
+                    userDestinationAddress: swapData.destination_address,
+                    swapId,
+                }, wallet);
+                if (!tx)
+                    throw new Error('No transaction');
+                if (tx) {
+                    return tx;
+                }
+            }
+            catch (e) {
+                if (typeof e === 'string' && e?.includes('No transfer provider found for network:')) {
+                    if (!provider?.transfer)
+                        throw new Error('No provider transfer');
+                    const tx = await provider.transfer({
+                        token: swapData.source_token,
+                        amount,
+                        depositAddress,
+                        callData,
+                        selectedWallet: wallet,
+                        network: swapData.source_network,
+                        balances: balances,
+                        userDestinationAddress: swapData.destination_address,
+                    }, wallet);
+                    if (!tx)
+                        throw new Error('No transaction');
+                    if (tx) {
+                        return tx;
+                    }
+                }
+                else {
+                    throw e;
+                }
             }
         }
         catch (e) {
@@ -110,45 +138,8 @@ const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }
             setError(e);
             throw e;
         }
-    }, [provider, chainId, selectedSourceAccount?.address]);
+    }, [executeTransfer, chainId, selectedSourceAccount?.address, wallet, swapData, balances]);
     return _jsxs("div", { className: "w-full space-y-3 flex flex-col justify-between h-full text-primary-text", children: [buttonClicked &&
-                _jsx(TransactionMessage, { error: error, isLoading: loading }), !loading &&
+                _jsx(ActionMessage, { error: error, isLoading: loading }), !loading &&
                 _jsx(SendTransactionButton, { onClick: clickHandler, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" }), error: !!error && buttonClicked, swapData: swapData, refuel: refuel })] });
 };
-const TransactionMessage = ({ error, isLoading }) => {
-    if (isLoading) {
-        return _jsx(TransactionMessages.ConfirmTransactionMessage, {});
-    }
-    else if (error.name === TransactionMessageType.TransactionRejected) {
-        return _jsx(TransactionMessages.TransactionRejectedMessage, {});
-    }
-    else if (error.name === TransactionMessageType.TransactionFailed) {
-        return _jsx(TransactionMessages.TransactionFailedMessage, {});
-    }
-    else if (error.name === TransactionMessageType.InsufficientFunds) {
-        return _jsx(TransactionMessages.InsufficientFundsMessage, {});
-    }
-    else if (error.name === TransactionMessageType.WaletMismatch) {
-        return _jsx(TransactionMessages.WaletMismatchMessage, { address: error.message });
-    }
-    else if (error.name === TransactionMessageType.DifferentAccountsNotAllowedError) {
-        return _jsx(TransactionMessages.DifferentAccountsNotAllowedError, { network: error.message });
-    }
-    else if (error) {
-        const swapWithdrawalError = new Error(error.message);
-        swapWithdrawalError.name = `SwapWithdrawalError`;
-        swapWithdrawalError.cause = error;
-        // posthog.captureException('$exception', {
-        //     name: swapWithdrawalError.name,
-        //     message: swapWithdrawalError.message,
-        //     $layerswap_exception_type: "Swap Withdrawal Error",
-        //     stack: swapWithdrawalError.stack,
-        //     cause: swapWithdrawalError.cause,
-        //     where: 'swapWithdrawalError',
-        //     severity: 'error',
-        // });
-        return _jsx(TransactionMessages.UnexpectedErrorMessage, { message: error.message });
-    }
-    else
-        return _jsx(_Fragment, {});
-};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { WalletTransferAction } from './Wallet';
-const WalletTransferButton = ({ swapBasicData: swapData, swapId, refuel, balanceWarning, onWalletWithdrawalSuccess }) => {
-    return _jsx(_Fragment, { children: _jsx("div", { className: 'rounded-2xl bg-secondary-500 divide-y divide-secondary-300 p-3', children: _jsxs("div", { className: 'flex flex-col gap-2.5', children: [balanceWarning, _jsx(WalletTransferAction, { swapData: swapData, swapId: swapId, refuel: refuel, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess })] }) }) });
+const WalletTransferButton = ({ swapBasicData: swapData, swapId, refuel, balanceWarning, onWalletWithdrawalSuccess, onCancelWithdrawal }) => {
+    return _jsx(_Fragment, { children: _jsx("div", { className: 'rounded-2xl bg-secondary-500 divide-y divide-secondary-300 p-3', children: _jsxs("div", { className: 'flex flex-col gap-2.5', children: [balanceWarning, _jsx(WalletTransferAction, { swapData: swapData, swapId: swapId, refuel: refuel, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, onCancelWithdrawal: onCancelWithdrawal })] }) }) });
 };
 export default WalletTransferButton;

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

@@ -7,7 +7,7 @@ import { truncateDecimals } from '../../../../components/utils/RoundDecimals';
 import VaulDrawer from '../../../../components/Modal/vaulModal';
 import { useSettingsState } from '../../../../context/settings';
 import WalletsList from '../../../../components/Wallet/WalletComponents/WalletsList';
-import { useSelectedAccount, useUpdateBalanceAccount } from '../../../../context/balanceAccounts';
+import { useSelectedAccount, useSelectSwapAccount } from '../../../../context/swapAccounts';
 import { useBalance } from '../../../../lib/balances/useBalance';
 const WalletTransferContent = ({ openModal, setOpenModal, swapData }) => {
     const { networks } = useSettingsState();
@@ -16,7 +16,7 @@ const WalletTransferContent = ({ openModal, setOpenModal, swapData }) => {
     const { provider } = useWallet(source_network, 'withdrawal');
     const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
     const availableWallets = provider?.connectedWallets?.filter(c => !c.isNotAvailable) || [];
-    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const selectSourceAccount = useSelectSwapAccount("from");
     const changeWallet = async (props) => {
         selectSourceAccount({
             id: props.walletId,

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

@@ -9,9 +9,9 @@ import { SwapQuoteDetails } from './SwapQuoteDetails';
 import WalletTransferButton from './WalletTransferButton';
 import { useBalance } from '../../../../lib/balances/useBalance';
 import { useSettingsState } from '../../../../context/settings';
-import { useSelectedAccount } from '../../../../context/balanceAccounts';
+import { useSelectedAccount } from '../../../../context/swapAccounts';
 import { ErrorDisplay } from '../../../../components/Pages/Swap/Form/SecondaryComponents/validationError/ErrorDisplay';
-const Withdraw = ({ type, onWalletWithdrawalSuccess, partner }) => {
+const Withdraw = ({ type, onWalletWithdrawalSuccess, onCancelWithdrawal, partner }) => {
     const { swapBasicData, swapDetails, quote, refuel, quoteIsLoading, quoteError } = useSwapDataState();
     const { appName, signature } = useInitialSettings();
     const sourceIsImmutableX = swapBasicData?.source_network.name?.toUpperCase() === KnownInternalNames.Networks.ImmutableXMainnet?.toUpperCase()
@@ -30,7 +30,7 @@ const Withdraw = ({ type, onWalletWithdrawalSuccess, partner }) => {
         && Number(walletBalanceAmount) < Number(swapBasicData?.requested_amount);
     if (swapBasicData?.use_deposit_address === false) {
         withdraw = {
-            footer: _jsx(WalletTransferButton, { swapBasicData: swapBasicData, swapId: swapDetails?.id, refuel: !!refuel, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, balanceWarning: showInsufficientBalanceWarning ? _jsx(ErrorDisplay, { errorName: 'insufficientFunds' }) : null })
+            footer: _jsx(WalletTransferButton, { swapBasicData: swapBasicData, swapId: swapDetails?.id, refuel: !!refuel, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, balanceWarning: showInsufficientBalanceWarning ? _jsx(ErrorDisplay, { errorName: 'insufficientFunds' }) : null, onCancelWithdrawal: onCancelWithdrawal })
         };
     }
     if (isImtblMarketplace) {

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

@@ -5,18 +5,19 @@ import { Widget } from "../../../Widget/Index";
 import { SwapDataProvider, useSwapDataState, useSwapDataUpdate } from "../../../../context/swap";
 import NotFound from "./NotFound";
 import SwapDetails from "./SwapDetails";
-import { LayerswapProvider } from "../../../../context/LayerswapProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 const Comp = () => {
     const { swapBasicData, swapApiError, swapId } = useSwapDataState();
     const { mutateSwap } = useSwapDataUpdate();
+    const { onBackClick } = useCallbacks();
     useEffect(() => {
         mutateSwap();
     }, []);
     if (!swapBasicData)
-        return _jsx(Widget, { children: _jsx("div", { className: `rounded-lg w-full overflow-hidden relative h-[548px]`, children: swapApiError &&
+        return _jsx(Widget, { goBack: onBackClick, children: _jsx("div", { className: `rounded-lg w-full overflow-hidden relative h-[548px]`, children: swapApiError &&
                     _jsx(NotFound, { swapId: swapId }) }) });
     return (_jsx(SwapDetails, { type: "widget" }));
 };
-export const SwapWithdrawal = (props) => {
-    return (_jsx(LayerswapProvider, { ...props, children: _jsx(SwapDataProvider, { children: _jsx(Comp, {}) }) }));
+export const SwapWithdrawal = () => {
+    return (_jsx(SwapDataProvider, { children: _jsx(Comp, {}) }));
 };

package/dist/esm/components/Pages/Swap/Withdraw/messages/TransactionMessages.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import WalletMessage from "./Message";
 import shortenAddress from "../../../../../components/utils/ShortenAddress";
-const ConfirmTransactionMessage = () => {
+const ConfirmActionMessage = () => {
     return _jsx(WalletMessage, { status: "pending", header: 'Confirm in wallet', details: 'Please confirm the transaction in your wallet' });
 };
 const TransactionInProgressMessage = () => {
@@ -28,8 +28,8 @@ const SwapErrorMessage = ({ message }) => {
 const UnexpectedErrorMessage = ({ message }) => {
     return _jsx(WalletMessage, { status: "error", header: 'Unexpected error', details: message, showInModal: true });
 };
-const ActionMessages = {
-    ConfirmTransactionMessage,
+export const ActionMessages = {
+    ConfirmActionMessage,
     TransactionInProgressMessage,
     InsufficientFundsMessage,
     TransactionRejectedMessage,
@@ -39,15 +39,14 @@ const ActionMessages = {
     UnexpectedErrorMessage,
     DifferentAccountsNotAllowedError
 };
-export var TransactionMessageType;
-(function (TransactionMessageType) {
-    TransactionMessageType["ConfirmTransaction"] = "ConfirmTransaction";
-    TransactionMessageType["TransactionInProgress"] = "TransactionInProgress";
-    TransactionMessageType["InsufficientFunds"] = "InsufficientFunds";
-    TransactionMessageType["TransactionRejected"] = "TransactionRejected";
-    TransactionMessageType["WaletMismatch"] = "WaletMismatch";
-    TransactionMessageType["TransactionFailed"] = "TransactionFailed";
-    TransactionMessageType["UnexpectedErrorMessage"] = "UnexpectedErrorMessage";
-    TransactionMessageType["DifferentAccountsNotAllowedError"] = "DifferentAccountsNotAllowedError";
-})(TransactionMessageType || (TransactionMessageType = {}));
-export default ActionMessages;
+export var ActionMessageType;
+(function (ActionMessageType) {
+    ActionMessageType["ConfirmTransaction"] = "ConfirmTransaction";
+    ActionMessageType["TransactionInProgress"] = "TransactionInProgress";
+    ActionMessageType["InsufficientFunds"] = "InsufficientFunds";
+    ActionMessageType["TransactionRejected"] = "TransactionRejected";
+    ActionMessageType["WaletMismatch"] = "WaletMismatch";
+    ActionMessageType["TransactionFailed"] = "TransactionFailed";
+    ActionMessageType["UnexpectedErrorMessage"] = "UnexpectedErrorMessage";
+    ActionMessageType["DifferentAccountsNotAllowedError"] = "DifferentAccountsNotAllowedError";
+})(ActionMessageType || (ActionMessageType = {}));