@layerswap/widget 1.0.6 → 1.1.0

package/dist/esm/components/Pages/Swap/Form/FeeDetails/index.js

@@ -13,29 +13,28 @@ import ExchangeGasIcon from '../../../../../components/Icons/ExchangeGasIcon';
 import useSWRNftBalance from '../../../../../lib/nft/useSWRNftBalance';
 import NumberFlow from '@number-flow/react';
 import { resolveTokenUsdPrice } from '../../../../../helpers/tokenHelper';
-import { useSelectedAccount } from '../../../../../context/balanceAccounts';
+import { useSelectedAccount } from '../../../../../context/swapAccounts';
 import { CupIcon } from '../../../../../components/Icons/CupIcon';
 import { DetailedEstimates } from './SwapQuote/DetailedEstimates';
-export default function QuoteDetails({ swapValues: values, quote: quoteData, isQuoteLoading }) {
+export default function QuoteDetails({ swapValues: values, quote, isQuoteLoading, reward, variant = 'extended', triggerClassnames }) {
     const { toAsset, fromAsset: fromCurrency, destination_address } = values || {};
     const [isAccordionOpen, setIsAccordionOpen] = useState(false);
-    return (_jsx(_Fragment, { children: quoteData &&
-            _jsx(Accordion, { type: 'single', collapsible: true, className: 'w-full', value: isAccordionOpen ? 'quote' : '', onValueChange: (value) => { setIsAccordionOpen(value === 'quote'); }, children: _jsxs(AccordionItem, { value: 'quote', className: 'bg-secondary-500 rounded-2xl', children: [_jsxs(AccordionTrigger, { className: clsx('p-3.5 pr-5 w-full rounded-2xl flex items-center justify-between transition-colors duration-200 hover:bg-secondary-400', {
+    return (_jsx(_Fragment, { children: quote &&
+            _jsx(Accordion, { type: 'single', collapsible: true, className: 'w-full', value: isAccordionOpen ? 'quote' : '', onValueChange: (value) => { setIsAccordionOpen(value === 'quote'); }, children: _jsxs(AccordionItem, { value: 'quote', className: 'bg-secondary-500 rounded-2xl', children: [_jsxs(AccordionTrigger, { className: clsx('p-3.5 pr-5 w-full rounded-2xl flex items-center justify-between transition-colors duration-200 hover:bg-secondary-400 mt-3', triggerClassnames, {
                                 'bg-secondary-500': !isAccordionOpen,
                                 'bg-secondary-400': isAccordionOpen,
                                 'animate-pulse-strong': isQuoteLoading && !isAccordionOpen
                             }), children: [(isAccordionOpen) ?
                                     _jsx("p", { className: 'text-sm', children: "Details" })
                                     :
-                                        _jsx(DetailsButton, { quote: quoteData, isQuoteLoading: isQuoteLoading, swapValues: values, destination: values.to, destinationAddress: destination_address }), _jsx(ChevronDown, { className: 'h-3.5 w-3.5 text-secondary-text' })] }), _jsx(AccordionContent, { className: 'rounded-2xl', children: _jsx(ResizablePanel, { children: (quoteData || isQuoteLoading) && fromCurrency && toAsset &&
-                                    _jsx(DetailedEstimates, { swapValues: values, quote: quoteData }) }) })] }) }) }));
+                                        _jsx(DetailsButton, { quote: quote, isQuoteLoading: isQuoteLoading, swapValues: values, destination: values.to, destinationAddress: destination_address, reward: reward }), _jsx(ChevronDown, { className: 'h-3.5 w-3.5 text-secondary-text' })] }), _jsx(AccordionContent, { className: 'rounded-2xl', children: _jsx(ResizablePanel, { children: (quote || isQuoteLoading) && fromCurrency && toAsset &&
+                                    _jsx(DetailedEstimates, { swapValues: values, quote: quote, variant: variant, reward: reward }) }) })] }) }) }));
 }
-export const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
-    const { quote, reward } = quoteData || {};
+export const DetailsButton = ({ quote, reward, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
     const isCEX = !!values.fromExchange;
     const sourceAccountNetwork = !isCEX ? values.from : undefined;
     const selectedSourceAccount = useSelectedAccount("from", sourceAccountNetwork?.name);
-    const { wallets } = useWallet(quoteData?.quote?.source_network, 'withdrawal');
+    const { wallets } = useWallet(quote?.source_network, 'withdrawal');
     const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
     const { gasData: gasData } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromAsset, values.amount, wallet);
     const gasTokenPriceInUsd = resolveTokenUsdPrice(gasData?.token, quote);

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SwapDataProvider } from "../../../../context/swap";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { NetworkExchangeTabs, Tabs, TabsContent } from "./NetworkExchangeTabs";
 import NetworkForm from "./NetworkForm";
 import ExchangeForm from "./ExchangeForm";
@@ -15,15 +15,39 @@ import useSWR from "swr";
 import AppSettings from "../../../../lib/AppSettings";
 import clsx from "clsx";
 export default function Form() {
-    const { from, appName, defaultTab: defaultTabQueryParam } = useInitialSettings();
+    const { from, appName, defaultTab: defaultTabQueryParam, theme: themeName } = useInitialSettings();
     const { sourceExchanges } = useSettingsState();
     const defaultTab = useMemo(() => {
         return defaultTabResolver({ from, sourceExchanges, defaultTabQueryParam });
     }, [from, sourceExchanges]);
+    const [showBanner, setShowBanner] = useState(false);
+    // useEffect(() => {
+    //     if (typeof window === "undefined") return;
+    //     const sessionCountKey = "exchange_banner_session_count";
+    //     const closedKey = "exchange_banner_closed";
+    //     const seenKey = "exchange_banner_seen";
+    //     if (sessionStorage.getItem(closedKey) === "1") return;
+    //     if (!sessionStorage.getItem(seenKey)) {
+    //         sessionStorage.setItem(seenKey, "1");
+    //         const next =
+    //             (parseInt(localStorage.getItem(sessionCountKey) || "0") || 0) + 1;
+    //         localStorage.setItem(sessionCountKey, String(next));
+    //         if (next <= 3) setShowBanner(true);
+    //     } else {
+    //         const count = parseInt(localStorage.getItem(sessionCountKey) || "0") || 0;
+    //         if (count <= 3) setShowBanner(true);
+    //     }
+    // }, []);
+    const dismissBanner = () => {
+        setShowBanner(false);
+        if (typeof window !== "undefined") {
+            sessionStorage.setItem("exchange_banner_closed", "1");
+        }
+    };
     const layerswapApiClient = new LayerSwapApiClient();
     const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
     const partner = appName && partnerData?.data?.client_id?.toLowerCase() === appName?.toLowerCase() ? partnerData?.data : undefined;
-    return _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx("div", { className: clsx("hidden sm:block", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion !== true }), children: _jsx(NetworkExchangeTabs, {}) }), _jsx(TabsContent, { value: "cross-chain", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "cross-chain", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(NetworkForm, { partner: partner }) }) }) }) }) }), _jsx(TabsContent, { value: "exchange", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "exchange", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, { partner: partner }) }) }) }) }) })] });
+    return _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx("div", { className: clsx("hidden sm:block", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion !== true }), children: _jsx(NetworkExchangeTabs, {}) }), _jsx(TabsContent, { value: "cross-chain", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "cross-chain", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(NetworkForm, { partner: partner }) }) }) }) }) }), _jsx(TabsContent, { value: "exchange", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "exchange", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, { partner: partner, showBanner: showBanner, dismissBanner: dismissBanner }) }) }) }) }) })] });
 }
 const defaultTabResolver = ({ from, sourceExchanges, defaultTabQueryParam }) => {
     if (defaultTabQueryParam) {

package/dist/esm/components/Pages/Swap/Form/FormWrapper.js

@@ -14,9 +14,9 @@ import VaulDrawer from "../../../../components/Modal/vaulModal";
 import { addressFormat } from "../../../../lib/address/formatter";
 import AddressNote from "../../../../components/Input/Address/AddressNote";
 import { useBalance } from "../../../../lib/balances/useBalance";
-import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../context/swapAccounts";
 import SwapDetails from "../Withdraw/SwapDetails";
-import { useSwapCreateCallback, useSwapModalStateChangeCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 export default function FormWrapper({ children, type, partner }) {
     const formikRef = useRef(null);
     const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
@@ -29,8 +29,7 @@ export default function FormWrapper({ children, type, partner }) {
     const [walletWihdrawDone, setWalletWihdrawDone] = useState(false);
     const selectedSourceAccount = useSelectedAccount("from", swapBasicData?.source_network?.name);
     const { mutate: mutateBalances } = useBalance(selectedSourceAccount?.address, sourceNetworkWithTokens);
-    const triggerSwapModalStateChangeCallback = useSwapModalStateChangeCallback();
-    const triggerSwapCreateCallback = useSwapCreateCallback();
+    const { onSwapModalStateChange } = useCallbacks();
     const { getConfirmation } = useAsyncModal();
     const initialSettings = useInitialSettings();
     const { destination_address: destinationAddressFromQuery } = initialSettings;
@@ -48,7 +47,7 @@ export default function FormWrapper({ children, type, partner }) {
             destinationAddressFromQuery &&
             (addressFormat(destinationAddressFromQuery?.toString(), to) === addressFormat(destination_address, to)) &&
             !isAddressFromQueryConfirmed) {
-            const provider = to && getProvider(to, 'autofil');
+            const provider = to && getProvider(to, 'autofill');
             const isDestAddressConnected = destination_address && provider?.connectedWallets?.some((wallet) => addressFormat(wallet.address, to) === addressFormat(destination_address, to));
             const confirmed = !isDestAddressConnected ? await getConfirmation({
                 content: _jsx(AddressNote, { partner: partner, values: values }),
@@ -71,7 +70,6 @@ export default function FormWrapper({ children, type, partner }) {
                 partner,
                 createSwap: async (...props) => {
                     const response = await createSwap(...props);
-                    triggerSwapCreateCallback(response);
                     return response;
                 },
                 setShowSwapModal: handleShowSwapModal,
@@ -87,7 +85,7 @@ export default function FormWrapper({ children, type, partner }) {
         : generateSwapInitialValues(settings, initialSettings, type);
     const handleShowSwapModal = useCallback((value) => {
         setSwapModalOpen(value);
-        triggerSwapModalStateChangeCallback(value);
+        onSwapModalStateChange(value);
         if (!value) {
             if (walletWihdrawDone) {
                 mutateBalances();
@@ -100,7 +98,7 @@ export default function FormWrapper({ children, type, partner }) {
         setWalletWihdrawDone(true);
     }, []);
     return _jsx(_Fragment, { children: _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, onSubmit: handleSubmit, children: _jsxs(_Fragment, { children: [_jsx(VaulDrawer, { show: showConnectNetworkModal, setShow: setShowConnectNetworkModal, header: `${networkToConnect?.DisplayName} connect`, modalId: "showNetwork", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: networkToConnect &&
-                                _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "expandContainerHeight" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner }) }) }), children] }) }) });
+                                _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "expandContainerHeight" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner, onCancelWithdrawal: () => handleShowSwapModal(false) }) }) }), children] }) }) });
 }
 const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, createSwap, setNetworkToConnect, setShowConnectNetworkModal, setSwapId, setSubmitedFormValues }) => {
     setSubmitedFormValues(values);

package/dist/esm/components/Pages/Swap/Form/NetworkForm.js

@@ -18,12 +18,12 @@ import { transformFormValuesToQuoteArgs, useQuoteData } from "../../../../hooks/
 import { useValidationContext } from "../../../../context/validationContext";
 import { useSwapDataState } from "../../../../context/swap";
 import ReserveGasNote from "../../../../components/Pages/Swap/Form/SecondaryComponents/ReserveGasNote";
-import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../context/swapAccounts";
 import QuoteDetails from "./FeeDetails";
 import DepositMethodComponent from "./FeeDetails/DepositMethod";
 import RefuelToggle from "./FeeDetails/Refuel";
 import RefuelModal from "./FeeDetails/RefuelModal";
-import { useFormChangeCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 const NetworkForm = ({ partner }) => {
     const [openRefuelModal, setOpenRefuelModal] = useState(false);
     const { values, setValues, isSubmitting, setFieldValue, } = useFormikContext();
@@ -40,10 +40,10 @@ const NetworkForm = ({ partner }) => {
     const initialSettings = useInitialSettings();
     const isValid = !formValidation.message;
     const error = formValidation.message;
-    const triggerFormChangeCallback = useFormChangeCallback();
+    const { onFormChange } = useCallbacks();
     useEffect(() => {
-        triggerFormChangeCallback(values);
-    }, [values, triggerFormChangeCallback]);
+        onFormChange(values);
+    }, [values, onFormChange]);
     useEffect(() => {
         if (!source || !toAsset || !toAsset.refuel) {
             setFieldValue('refuel', false, true);
@@ -54,22 +54,12 @@ const NetworkForm = ({ partner }) => {
             setFieldValue('amount', (nativeTokenBalance?.amount - networkGas).toString(), true);
     }, [setFieldValue]);
     const shouldConnectWallet = (source && source?.deposit_methods?.includes('wallet') && depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!source && !wallets.length && depositMethod !== 'deposit_address');
-    // useEffect(() => {
-    //     if (wallets?.length) {
-    //         const allWalletAddresses = wallets.flatMap(w => w.addresses).filter(Boolean);
-    //         posthog.setPersonProperties({
-    //             accounts: allWalletAddresses,
-    //         });
-    //     }
-    // }, [wallets]);
-    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "w-full flex flex-col justify-between flex-1 gap-3", children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-2 w-full leading-4', children: [!(initialSettings?.hideFrom && values?.from) && _jsx(SourcePicker, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, fee: quote }), !initialSettings?.hideFrom && !initialSettings?.hideTo &&
-                                            _jsx(ValueSwapperButton, { values: values, setValues: setValues, providers: providers, query: initialSettings }), !(initialSettings?.hideTo && values?.to) && _jsx(DestinationPicker, { isFeeLoading: isQuoteLoading, fee: quote, partner: partner })] }), Number(values.amount) > 0 ?
-                                    _jsx(ReserveGasNote, { maxAllowedAmount: minAllowedAmount, minAllowedAmount: maxAllowedAmount, onSubmit: handleReserveGas })
-                                    : null, (values.toAsset?.refuel && !initialSettings.hideRefuel) ?
-                                    _jsx(RefuelToggle, { quote: quote, onButtonClick: () => setOpenRefuelModal(true), minAllowedAmount: minAllowedAmount })
-                                    : null, routeValidation.message
-                                    ? _jsx(ValidationError, {})
-                                    : null, _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: shouldConnectWallet, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) }), _jsx(RefuelModal, { openModal: openRefuelModal, setOpenModal: setOpenRefuelModal, fee: quote })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "w-full flex flex-col justify-between flex-1", children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-2 w-full leading-4', children: [!(initialSettings?.hideFrom && values?.from) && _jsx(SourcePicker, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, fee: quote }), !initialSettings?.hideFrom && !initialSettings?.hideTo &&
+                                            _jsx(ValueSwapperButton, { values: values, setValues: setValues, providers: providers, query: initialSettings }), !(initialSettings?.hideTo && values?.to) && _jsx(DestinationPicker, { isFeeLoading: isQuoteLoading, fee: quote, partner: partner })] }), _jsxs("div", { children: [Number(values.amount) > 0 &&
+                                            _jsx(ReserveGasNote, { maxAllowedAmount: maxAllowedAmount, minAllowedAmount: minAllowedAmount, onSubmit: handleReserveGas }), values.toAsset?.refuel && !initialSettings.hideRefuel &&
+                                            _jsx(RefuelToggle, { quote: quote, onButtonClick: () => setOpenRefuelModal(true), minAllowedAmount: minAllowedAmount }), routeValidation.message
+                                            ? _jsx("div", { className: "mt-3", children: _jsx(ValidationError, {}) })
+                                            : null, _jsx(QuoteDetails, { swapValues: values, quote: quote?.quote, reward: quote?.reward, isQuoteLoading: isQuoteLoading })] })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: shouldConnectWallet, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) }), _jsx(RefuelModal, { openModal: openRefuelModal, setOpenModal: setOpenRefuelModal, fee: quote })] })] }));
 };
 const ValueSwapperButton = ({ values, setValues, providers, query }) => {
     const [animate, cycle] = useCycle({ rotateX: 0 }, { rotateX: 180 });

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

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

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

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

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

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

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

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

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

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

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

@@ -26,7 +26,7 @@ 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-sm whitespace-nowrap", children: [truncateDecimals(Number(requestedAmount), sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", quote: swapQuote }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
                     _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: 'flex items-center gap-3 text-sm', children: [_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-lg p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }), _jsx("p", { children: "Refuel" })] }), _jsxs("div", { className: "flex flex-col items-end", children: [_jsxs("p", { className: "text-primary-text text-sm", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", refuelAmountInUsd] })] })] })
                     :
                         _jsx(_Fragment, {})] }) }));

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

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