@layerswap/widget 1.0.6 → 1.1.1

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);
@@ -45,8 +44,8 @@ export const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: va
     const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress || '', destination, reward?.nft_contract_address || '');
     return (_jsxs("div", { className: 'flex items-center gap-1 space-x-3', children: [gasFeeInUsd ?
                 _jsxs(_Fragment, { children: [_jsxs("div", { className: clsx("inline-flex items-center gap-1", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: !values.fromExchange ?
-                                        _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, format: { style: 'currency', currency: 'USD' }, prefix: gasFeeInUsd < 0.01 ? '<' : undefined })] }), _jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }) : null, averageCompletionTime ?
+                                        _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, prefix: gasFeeInUsd < 0.01 ? '<$' : '$' })] }), _jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }) : null, averageCompletionTime ?
                 _jsx(_Fragment, { children: _jsxs("div", { className: clsx("text-right inline-flex items-center gap-1 text-sm", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: _jsx(Clock, { className: 'h-4 w-4 text-secondary-text' }) }), _jsx(AverageCompletionTime, { className: "text-primary-text", avgCompletionTime: quote.avg_completion_time })] }) }) : null, (reward &&
                 (!shouldCheckNFT || (!isLoading && !error && nftBalance !== undefined && nftBalance > 0))) ?
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, format: { style: 'currency', currency: 'USD' }, prefix: reward?.amount_in_usd < 0.01 ? '<' : undefined })] })] }) : null] }));
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, prefix: reward?.amount_in_usd < 0.01 ? '<$' : '$' })] })] }) : null] }));
 };

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

@@ -12,15 +12,18 @@ import useWallet from "../../../../hooks/useWallet";
 import { useAsyncModal } from "../../../../context/asyncModal";
 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";
+import ContractAddressNote from "../../../../components/Input/Address/ContractAddressNote";
+import { useContractAddressStore } from "../../../../stores/contractAddressStore";
+import UrlAddressNote from "../../../../components/Input/Address/UrlAddressNote";
 export default function FormWrapper({ children, type, partner }) {
     const formikRef = useRef(null);
     const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
     const [isAddressFromQueryConfirmed, setIsAddressFromQueryConfirmed] = useState(false);
+    const dontShowContractWarningRef = useRef(false);
     const [networkToConnect, setNetworkToConnect] = useState();
     const settings = useSettingsState();
     const { swapBasicData, swapDetails, swapModalOpen } = useSwapDataState();
@@ -29,13 +32,13 @@ 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;
     const { createSwap, setSwapId, setSubmitedFormValues, setSwapModalOpen } = useSwapDataUpdate();
     const { setSwapError } = useSwapDataState();
+    const { setConfirmed, isConfirmed, checkContractStatus } = useContractAddressStore();
     const handleSubmit = useCallback(async (values) => {
         setSwapError && setSwapError('');
         const { destination_address, to } = values;
@@ -48,10 +51,10 @@ 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 }),
+                content: _jsx(UrlAddressNote, { partner: partner, values: values }),
                 submitText: 'Confirm address',
                 dismissText: 'Cancel address'
             }) : true;
@@ -62,6 +65,29 @@ export default function FormWrapper({ children, type, partner }) {
                 return;
             }
         }
+        if (destination_address && values.from && values.to && values.to.type === 'evm') {
+            const alreadyConfirmed = isConfirmed(destination_address, values.to.name);
+            if (!alreadyConfirmed) {
+                const { isContractInAnyNetwork, destinationIsContract } = await checkContractStatus(destination_address, values.from, values.to);
+                if (isContractInAnyNetwork && !destinationIsContract) {
+                    dontShowContractWarningRef.current = false;
+                    const handleDontShowAgainChange = (checked) => {
+                        dontShowContractWarningRef.current = checked;
+                    };
+                    const confirmed = await getConfirmation({
+                        content: _jsx(ContractAddressNote, { values: values, onDontShowAgainChange: handleDontShowAgainChange }),
+                        submitText: 'Confirm',
+                        dismissText: 'Cancel'
+                    });
+                    if (confirmed && dontShowContractWarningRef.current) {
+                        setConfirmed(destination_address, values.to.name);
+                    }
+                    else if (!confirmed) {
+                        return;
+                    }
+                }
+            }
+        }
         try {
             await handleCreateSwap({
                 setSwapId,
@@ -71,7 +97,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 +112,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 +125,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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Form, useFormikContext } from "formik";
-import ValidationError from "../../../../components/Pages/Swap/Form/SecondaryComponents/validationError";
+import ValidationError from "./SecondaryComponents/validationError";
+import ContractAddressValidationCache from "./SecondaryComponents/validationError/ContractAddressValidationCache";
 import useWallet from "../../../../hooks/useWallet";
 import SourcePicker from "../../../../components/Input/SourcePicker";
 import DestinationPicker from "../../../../components/Input/DestinationPicker";
@@ -18,12 +19,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 +41,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 +55,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) }), 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 }), _jsx(ContractAddressValidationCache, { source_network: source, destination_network: destination, destination_address: values.destination_address })] })] }));
 };
 const ValueSwapperButton = ({ values, setValues, providers, query }) => {
     const [animate, cycle] = useCycle({ rotateX: 0 }, { rotateX: 180 });

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

@@ -12,6 +12,6 @@ const FormButton = ({ shouldConnectWallet, values, disabled, error, isSubmitting
     if (values?.to && !values?.destination_address && !error) {
         return (_jsx(Address, { partner: partner, children: () => (_jsx(SubmitButton, { type: "button", className: "w-full", children: _jsx("span", { className: "grow text-center", children: "Enter destination address" }) })) }));
     }
-    return (_jsx(SubmitButton, { className: "plausible-event-name=Swap+initiated", type: "submit", isDisabled: disabled, isSubmitting: isSubmitting, children: actionDisplayName }));
+    return (_jsx(SubmitButton, { type: "submit", isDisabled: disabled, isSubmitting: isSubmitting, children: actionDisplayName }));
 };
 export default FormButton;

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

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

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useContractAddressStore } from '../../../../../../stores/contractAddressStore';
+const ContractAddressValidationCache = ({ source_network, destination_network, destination_address }) => {
+    const { isContractInNetwork, } = useContractAddressStore();
+    useEffect(() => {
+        //perform check for source network
+        if (destination_address && source_network && source_network.type === 'evm') {
+            isContractInNetwork(destination_address, source_network.name);
+        }
+    }, [destination_address, source_network?.name, isContractInNetwork]);
+    useEffect(() => {
+        //perform check for destination network
+        if (destination_address && destination_network && destination_network.type === 'evm') {
+            isContractInNetwork(destination_address, destination_network.name);
+        }
+    }, [destination_address, destination_network?.name, isContractInNetwork]);
+    return null;
+};
+export default ContractAddressValidationCache;

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;