@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Widget } from '../../../../components/Widget/Index';
+import { useSwapDataState } from '../../../../context/swap';
+import Withdraw from './Withdraw';
+import Processing from './Processing';
+import { BackendTransactionStatus, TransactionType } from '../../../../lib/apiClients/layerSwapApiClient';
+import { SwapStatus } from '../../../../Models/SwapStatus';
+import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
+import SubmitButton from '../../../../components/Buttons/submitButton';
+import ManualWithdraw from './ManualWithdraw';
+const SwapDetails = ({ type, onWalletWithdrawalSuccess }) => {
+    const { swapDetails, swapBasicData, quote, refuel, depositActionsResponse } = useSwapDataState();
+    const swapStatus = swapDetails?.status || SwapStatus.UserTransferPending;
+    const storedWalletTransactions = useSwapTransactionStore();
+    const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
+    const storedWalletTransaction = storedWalletTransactions.swapTransactions?.[swapDetails?.id || ''];
+    const removeStoredTransaction = useCallback(() => {
+        useSwapTransactionStore.getState().removeSwapTransaction(swapDetails?.id || '');
+    }, [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
+            && !(swapInputTransaction || storedWalletTransaction))) ?
+            (swapBasicData?.use_deposit_address === true
+                ? _jsx(ManualWithdraw, { swapBasicData: swapBasicData, quote: quote, depositActions: depositActionsResponse, refuel: refuel })
+                : _jsx(Withdraw, { type: type, onWalletWithdrawalSuccess: onWalletWithdrawalSuccess }))
+            :
+                _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 }) => {
+    if (type === "widget")
+        return _jsx(Widget, { 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 });
+};
+export default SwapDetails;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SwapQuoteComp from '../Form/FeeDetails/SwapQuote';
+import { ErrorDisplay } from '../Form/SecondaryComponents/validationError/ErrorDisplay';
+export const SwapQuoteDetails = ({ swapBasicData: swapData, quote, refuel, quoteIsLoading, quoteError }) => {
+    const { source_network, destination_network, use_deposit_address, destination_token, requested_amount, source_token, destination_address } = swapData || {};
+    if (quoteError)
+        return _jsx(ErrorDisplay, { errorName: 'quoteError' });
+    if (!quote)
+        return _jsx("div", { className: 'h-[150px] w-full rounded-xl bg-secondary-500 animate-pulse' });
+    const values = {
+        amount: requested_amount?.toString(),
+        from: source_network,
+        to: destination_network,
+        fromAsset: source_token,
+        toAsset: destination_token,
+        depositMethod: use_deposit_address ? 'deposit_address' : 'wallet',
+        destination_address,
+    };
+    return _jsx(SwapQuoteComp, { quote: { quote, refuel }, swapValues: values, isQuoteLoading: quoteIsLoading });
+};

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

@@ -0,0 +1,180 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import WalletIcon from "../../../../../../components/Icons/WalletIcon";
+import SubmitButton from "../../../../../../components/Buttons/submitButton";
+import useWallet from "../../../../../../hooks/useWallet";
+import { useSwapDataState, useSwapDataUpdate } from "../../../../../../context/swap";
+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 { useSwapTransactionStore } from "../../../../../../stores/swapTransactionStore";
+import { 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";
+export const ConnectWalletButton = ({ ...props }) => {
+    const { swapBasicData } = useSwapDataState();
+    const { source_network } = swapBasicData || {};
+    const [loading, setLoading] = useState(false);
+    const { provider } = useWallet(source_network, 'withdrawal');
+    const { connect } = useConnectModal();
+    const clickHandler = useCallback(async () => {
+        try {
+            setLoading(true);
+            if (!provider)
+                throw new Error(`No provider from ${source_network?.name}`);
+            await connect(provider);
+        }
+        catch (e) {
+            toast.error(e.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [provider]);
+    return _jsx(ButtonWrapper, { onClick: props.onClick ?? clickHandler, icon: loading ? _jsx(Loader2, { className: "h-6 w-6 animate-spin" }) : (props.icon ?? _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" })), isDisabled: loading || props.isDisabled, isSubmitting: loading || props.isSubmitting, ...props, children: "Send from wallet" });
+};
+export const ChangeNetworkMessage = ({ data, network }) => {
+    if (data.isPending) {
+        return _jsx(WalletMessage, { status: "pending", header: 'Network switch required', details: "Confirm switching the network with your wallet" });
+    }
+    else if (data.isError) {
+        return _jsx(WalletMessage, { status: "error", header: 'Network switch failed', details: `Please try again or switch your wallet network manually to ${network}` });
+    }
+};
+export const ChangeNetworkButton = (props) => {
+    const { chainId, network } = props;
+    const [error, setError] = useState(null);
+    const [isPending, setIsPending] = useState(false);
+    const selectedSourceAccount = useSelectedAccount("from", network?.name);
+    const { wallets } = useWallet(network, 'withdrawal');
+    const clickHandler = useCallback(async () => {
+        try {
+            setIsPending(true);
+            const selectedWallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+            if (!selectedWallet)
+                throw new Error(`No selectedWallet for ${network?.name}`);
+            if (!selectedSourceAccount)
+                throw new Error(`No selectedSourceAccount for ${network?.name}`);
+            if (!selectedSourceAccount.provider.switchChain)
+                throw new Error(`No switchChain from ${network?.name}`);
+            return await selectedSourceAccount.provider.switchChain(selectedWallet, chainId);
+        }
+        catch (e) {
+            setError(e);
+        }
+        finally {
+            setIsPending(false);
+        }
+    }, [selectedSourceAccount, chainId]);
+    return _jsxs(_Fragment, { children: [_jsx(ChangeNetworkMessage, { data: {
+                    isPending: isPending,
+                    isError: !!error,
+                    error
+                }, network: network.display_name }), !isPending &&
+                _jsx(ButtonWrapper, { onClick: clickHandler, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" }), children: error ? _jsx("span", { children: "Try again" })
+                        : _jsx("span", { children: "Switch network" }) })] });
+};
+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();
+    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 handleClick = async () => {
+        try {
+            const selectedWallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+            if (!selectedSourceAccount) {
+                throw new Error('Selected source account is undefined');
+            }
+            if (!selectedWallet?.isActive) {
+                throw new Error('Wallet is not active');
+            }
+            setLoading(true);
+            setActionStateText("Preparing");
+            setSwapId(undefined);
+            const swapValues = {
+                amount: swapData.requested_amount.toString(),
+                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');
+            }
+            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 (!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 hash = await onClick(transferProps);
+            if (hash) {
+                onWalletWithdrawalSuccess?.();
+                setSwapTransaction(swapId, BackendTransactionStatus.Pending, hash);
+                triggerSwapCreateCallback(newSwapData);
+            }
+        }
+        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',
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    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' }));
+};

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

@@ -0,0 +1,155 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { WithdrawalProvider } from "../../../../../context/withdrawalContext";
+import useWallet from "../../../../../hooks/useWallet";
+import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+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";
+import { posthog } from "posthog-js";
+export const WalletTransferAction = ({ swapData, swapId, refuel, onWalletWithdrawalSuccess }) => {
+    const { source_network } = swapData;
+    const { provider, wallets } = useWallet(source_network, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
+    useEffect(() => {
+        const selectedWallet = wallets.find(w => w.id === selectedSourceAccount?.id && w.withdrawalSupportedNetworks?.includes(source_network?.name));
+        if (selectedSourceAccount && selectedWallet) {
+            provider?.switchAccount(selectedWallet, selectedSourceAccount.address);
+        }
+    }, [selectedSourceAccount?.address, source_network?.name]);
+    return _jsx(_Fragment, { children: swapData &&
+            _jsx(WithdrawalProvider, { onWalletWithdrawalSuccess: onWalletWithdrawalSuccess, children: _jsx(WalletWithdrawal, { swapId: swapId, swapBasicData: swapData, refuel: refuel }) }) });
+};
+export const WalletWithdrawal = ({ swapBasicData, refuel, swapId }) => {
+    const { source_network, destination_network, destination_address } = swapBasicData;
+    const selectedSourceAccount = useSelectedAccount("from", swapBasicData.source_network.name);
+    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 [savedTransactionHash, setSavedTransactionHash] = useState();
+    useEffect(() => {
+        if (!swapId)
+            return;
+        try {
+            const data = JSON.parse(localStorage.getItem('swapTransactions') || "{}");
+            const hash = data?.[swapId]?.hash;
+            if (hash)
+                setSavedTransactionHash(hash);
+        }
+        catch (e) {
+            //TODO log to logger
+            console.error(e.message);
+        }
+    }, [swapId]);
+    if (provider?.multiStepHandlers) {
+        const MultiStepHandler = provider.multiStepHandlers.find(handler => handler.supportedNetworks.includes(source_network?.name))?.component;
+        if (MultiStepHandler) {
+            return _jsx(MultiStepHandler, { swapId: swapId, swapBasicData: swapBasicData, refuel: refuel, onTransferComplete: (hash) => {
+                    setSavedTransactionHash(hash);
+                } });
+        }
+    }
+    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 });
+    }
+    if (!wallet) {
+        return _jsx(ConnectWalletButton, {});
+    }
+    else if (wallet.chainId && wallet.chainId !== networkChainId && source_network) {
+        return _jsx(ChangeNetworkButton, { chainId: networkChainId, network: source_network });
+    }
+    else {
+        return _jsx(TransferTokenButton, { swapData: swapBasicData, refuel: refuel, chainId: networkChainId, savedTransactionHash: savedTransactionHash });
+    }
+};
+const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }) => {
+    const [buttonClicked, setButtonClicked] = useState(false);
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const selectedSourceAccount = useSelectedAccount("from", swapData.source_network.name);
+    const { networks } = useSettingsState();
+    const networkWithTokens = networks.find(n => n.name === swapData.source_network.name);
+    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 }) => {
+        setButtonClicked(true);
+        setError(undefined);
+        setLoading(true);
+        try {
+            if (!depositAddress)
+                throw new Error('Missing deposit address');
+            if (amount == undefined)
+                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;
+            }
+        }
+        catch (e) {
+            setLoading(false);
+            setError(e);
+            throw e;
+        }
+    }, [provider, chainId, selectedSourceAccount?.address]);
+    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(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.UexpectedErrorMessage, { message: error.message });
+    }
+    else
+        return _jsx(_Fragment, {});
+};

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

@@ -0,0 +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 })] }) }) });
+};
+export default WalletTransferButton;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import WalletIcon from '../../../../components/Icons/WalletIcon';
+import useWallet from '../../../../hooks/useWallet';
+import AddressWithIcon from '../../../../components/Input/Address/AddressPicker/AddressWithIcon';
+import { AddressGroup } from '../../../../components/Input/Address/AddressPicker';
+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 { useBalance } from '../../../../lib/balances/useBalance';
+const WalletTransferContent = ({ openModal, setOpenModal, swapData }) => {
+    const { networks } = useSettingsState();
+    const { source_token, source_network: swap_source_network } = swapData;
+    const source_network = swap_source_network && networks.find(n => n.name === swap_source_network?.name);
+    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 changeWallet = async (props) => {
+        selectSourceAccount({
+            id: props.walletId,
+            address: props.address,
+            providerName: props.providerName
+        });
+        setOpenModal(false);
+    };
+    const { balances } = useBalance(selectedSourceAccount?.address, source_network);
+    const { wallets } = useWallet(source_network, 'withdrawal');
+    const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+    const walletBalance = source_network && balances?.find(b => b?.network === source_network?.name && b?.token === source_token?.symbol);
+    const walletBalanceAmount = walletBalance?.amount && truncateDecimals(walletBalance?.amount, source_token?.precision);
+    let accountAddress = "";
+    if (selectedSourceAccount) {
+        accountAddress = selectedSourceAccount.address || "";
+    }
+    if (!accountAddress) {
+        return _jsx(_Fragment, { children: _jsx("div", { className: 'flex justify-center', children: _jsx(WalletIcon, { className: 'w-12 text-secondary-800/70' }) }) });
+    }
+    return _jsxs(_Fragment, { children: [_jsx("div", { className: "grid content-end", children: selectedSourceAccount &&
+                    source_network &&
+                    _jsxs("div", { className: "group/addressItem flex rounded-lg justify-between space-x-3 items-center shadow-xs mt-1.5 text-primary-text bg-secondary-500 disabled:cursor-not-allowed h-12 leading-4 font-medium w-full py-7", children: [_jsx(AddressWithIcon, { addressItem: { address: accountAddress, group: AddressGroup.ConnectedWallet, wallet: wallet }, network: source_network, onDisconnect: () => wallet?.disconnect && wallet?.disconnect() }), _jsxs("div", { className: "flex flex-col col-start-8 col-span-3 items-end font-normal text-secondary-text text-xs", children: [_jsx("p", { children: "Balance" }), _jsxs("p", { className: 'flex items-center gap-1', children: [_jsx("span", { children: truncateDecimals(Number(walletBalanceAmount), walletBalance?.decimals) }), " ", _jsx("span", { children: walletBalance?.token })] })] })] }) }), source_network &&
+                source_token &&
+                provider &&
+                availableWallets &&
+                _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Send from`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsx(WalletsList, { network: source_network, token: source_token, onSelect: changeWallet, selectable: true, wallets: availableWallets, provider: provider }) }) })] });
+};
+export default WalletTransferContent;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSwapDataState } from '../../../../context/swap';
+import KnownInternalNames from '../../../../lib/knownIds';
+import SwapSummary from './Summary';
+import External from './External';
+import { useInitialSettings } from '../../../../context/settings';
+import { Widget } from '../../../../components/Widget/Index';
+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 { ErrorDisplay } from '../../../../components/Pages/Swap/Form/SecondaryComponents/validationError/ErrorDisplay';
+const Withdraw = ({ type, onWalletWithdrawalSuccess }) => {
+    const { swapBasicData, swapDetails, quote, refuel, quoteIsLoading, quoteError } = useSwapDataState();
+    const { appName, signature } = useInitialSettings();
+    const sourceIsImmutableX = swapBasicData?.source_network.name?.toUpperCase() === KnownInternalNames.Networks.ImmutableXMainnet?.toUpperCase()
+        || swapBasicData?.source_network.name === KnownInternalNames.Networks.ImmutableXGoerli?.toUpperCase();
+    const isImtblMarketplace = (signature && appName === "imxMarketplace" && sourceIsImmutableX);
+    const { networks } = useSettingsState();
+    const source_network = swapBasicData?.source_network && networks.find(n => n.name === swapBasicData?.source_network?.name);
+    const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
+    const { balances } = useBalance(selectedSourceAccount?.address, source_network);
+    const walletBalance = source_network && balances?.find(b => b?.network === source_network?.name && b?.token === swapBasicData?.source_token?.symbol);
+    const walletBalanceAmount = walletBalance?.amount;
+    let withdraw = {};
+    const showInsufficientBalanceWarning = swapBasicData?.use_deposit_address === false
+        && swapBasicData?.requested_amount
+        && Number(swapBasicData?.requested_amount)
+        && 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 })
+        };
+    }
+    if (isImtblMarketplace) {
+        withdraw = {
+            content: _jsx(External, {})
+        };
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsx("div", { className: "w-full flex flex-col justify-between  text-secondary-text", children: _jsxs("div", { className: 'grid grid-cols-1 gap-3 ', children: [_jsx(SwapSummary, {}), _jsx(SwapQuoteDetails, { swapBasicData: swapBasicData, quote: quote, refuel: refuel, quoteIsLoading: quoteIsLoading, quoteError: quoteError }), withdraw?.content] }) }) }), withdraw?.footer &&
+                _jsx(Widget.Footer, { sticky: type == 'widget', children: withdraw?.footer })] }));
+};
+export default Withdraw;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+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";
+const Comp = () => {
+    const { swapBasicData, swapApiError, swapId } = useSwapDataState();
+    const { mutateSwap } = useSwapDataUpdate();
+    useEffect(() => {
+        mutateSwap();
+    }, []);
+    if (!swapBasicData)
+        return _jsx(Widget, { 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, {}) }) }));
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import FailIcon from "../../../../Icons/FailIcon";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../../../components/shadcn/accordion";
+const WalletMessage = ({ header, details, status, showInModal }) => {
+    return _jsxs("div", { className: "flex text-center space-x-2", children: [_jsx("div", { className: 'relative -mt-0.5', children: status === "error" ?
+                    _jsx(FailIcon, { className: "relative top-0 left-0 w-6 h-6 md:w-7 md:h-7" })
+                    :
+                        _jsxs(_Fragment, { children: [_jsx("div", { className: 'absolute top-1 left-1 w-4 h-4 md:w-5 md:h-5 opacity-40 bg bg-primary rounded-full animate-ping' }), _jsx("div", { className: 'absolute top-2 left-2 w-2 h-2 md:w-3 md:h-3 opacity-40 bg bg-primary rounded-full animate-ping' }), _jsx("div", { className: 'relative top-0 left-0 w-6 h-6 md:w-7 md:h-7 scale-50 bg bg-primary rounded-full ' })] }) }), showInModal ? (_jsx("div", { className: "text-left space-y-1 w-full max-w-2xl", children: _jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: "wallet-message", children: [_jsxs(AccordionTrigger, { className: "flex justify-between w-full items-center", children: [_jsx("p", { className: "text-md font-semibold self-center text-primary-text", children: header }), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-primary-text transition-transform duration-200 data-[state=open]:rotate-180" })] }), _jsx(AccordionContent, { children: _jsx("div", { className: "text-left space-y-1", children: _jsx("p", { className: "text-sm text-secondary-text wrap-anywhere whitespace-pre-wrap", children: details }) }) })] }) }) })) : (_jsxs("div", { className: "text-left space-y-1", children: [_jsx("p", { className: "text-md font-semibold self-center text-primary-text", children: header }), _jsx("p", { className: `text-sm text-secondary-text ${details.length > 200 ? "break-words" : ""}`, children: details })] }))] });
+};
+export default WalletMessage;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import WalletMessage from "./Message";
+import shortenAddress from "../../../../../components/utils/ShortenAddress";
+const ConfirmTransactionMessage = () => {
+    return _jsx(WalletMessage, { status: "pending", header: 'Confirm in wallet', details: 'Please confirm the transaction in your wallet' });
+};
+const TransactionInProgressMessage = () => {
+    return _jsx(WalletMessage, { status: "pending", header: 'Transaction in progress', details: 'Waiting for your transaction to be published' });
+};
+const InsufficientFundsMessage = () => {
+    return _jsx(WalletMessage, { status: "error", header: 'Insufficient funds', details: 'The balance of the connected wallet is not enough' });
+};
+const TransactionRejectedMessage = () => {
+    return _jsx(WalletMessage, { status: "error", header: 'Transaction rejected', details: `You've rejected the transaction in your wallet. Click “Try again” to open the prompt again.` });
+};
+const DifferentAccountsNotAllowedError = ({ network }) => {
+    return _jsx(WalletMessage, { status: "error", header: 'Action needed', details: `Transfers between ${network} and other chains are only allowed within the same account. Please make sure you're using the same address on both source and destination.` });
+};
+const TransactionFailedMessage = () => {
+    return _jsx(WalletMessage, { status: "error", header: 'Transaction failed', details: `Transfer failed or terminated` });
+};
+const WaletMismatchMessage = ({ address }) => {
+    return _jsx(WalletMessage, { status: "error", header: 'Account mismatch', details: `Select ${shortenAddress(address)} in your wallet, then try again` });
+};
+const SwapErrorMessage = ({ message }) => {
+    return _jsx(WalletMessage, { status: "error", header: 'API error', details: message });
+};
+const UexpectedErrorMessage = ({ message }) => {
+    return _jsx(WalletMessage, { status: "error", header: 'Unexpected error', details: message, showInModal: true });
+};
+const ActionMessages = {
+    ConfirmTransactionMessage,
+    TransactionInProgressMessage,
+    InsufficientFundsMessage,
+    TransactionRejectedMessage,
+    WaletMismatchMessage,
+    TransactionFailedMessage,
+    SwapErrorMessage,
+    UexpectedErrorMessage,
+    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["UexpectedErrorMessage"] = "UexpectedErrorMessage";
+    TransactionMessageType["DifferentAccountsNotAllowedError"] = "DifferentAccountsNotAllowedError";
+})(TransactionMessageType || (TransactionMessageType = {}));
+export default ActionMessages;

package/dist/esm/components/Pages/SwapHistory/Header.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import HeaderWithMenu from "../../../components/HeaderWithMenu";
+import { motion } from "framer-motion";
+const Header = ({ onBackClick }) => {
+    const [height, setHeight] = useState(0);
+    const ref = useRef(null);
+    useEffect(() => {
+        setHeight(Number(ref?.current?.clientHeight));
+    }, []);
+    const handleAnimationEnd = (variant) => {
+        if (variant == "center") {
+            setHeight(Number(ref?.current?.clientHeight));
+        }
+    };
+    return _jsxs(_Fragment, { children: [_jsx(motion.div, { onAnimationComplete: handleAnimationEnd, ref: ref, transition: {
+                    duration: 0.15,
+                }, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base        
+        max-sm:fixed
+        max-sm:inset-x-0
+        max-sm:top-0 
+        max-sm:z-30
+        max-sm:bg-secondary-700 
+        max-sm:shadow-widget-footer 
+        max-sm:w-full`, children: _jsx(HeaderWithMenu, { goBack: onBackClick }) }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base        
+          max-sm:inset-x-0
+          max-sm:bottom-0 
+          max-sm:p-4 max-sm:w-full invisible sm:hidden` })] });
+};
+const variants = {
+    enter: () => {
+        return ({
+            opacity: 0,
+            y: '-100%',
+        });
+    },
+    center: () => {
+        return ({
+            opacity: 1,
+            y: 0,
+        });
+    },
+    exit: () => {
+        return ({
+            y: '-100%',
+            zIndex: 0,
+            opacity: 0,
+        });
+    },
+};
+export default Header;