@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

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

@@ -0,0 +1,119 @@
+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 useWallet from "../../../../hooks/useWallet";
+import SourcePicker from "../../../../components/Input/SourcePicker";
+import DestinationPicker from "../../../../components/Input/DestinationPicker";
+import { useInitialSettings } from "../../../../context/settings";
+import { Widget } from "../../../../components/Widget/Index";
+import { motion, useCycle } from "framer-motion";
+import { useSettingsState } from "../../../../context/settings";
+import { swapInProgress } from "../../../../components/utils/swapUtils";
+import { ArrowUpDown } from "lucide-react";
+import { classNames } from "../../../../components/utils/classNames";
+import FormButton from "./SecondaryComponents/FormButton";
+import { updateFormBulk } from "./updateForm";
+import { transformFormValuesToQuoteArgs, useQuoteData } from "../../../../hooks/useFee";
+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 QuoteDetails from "./FeeDetails";
+import DepositMethodComponent from "./FeeDetails/DepositMethod";
+import RefuelToggle from "./FeeDetails/Refuel";
+import RefuelModal from "./FeeDetails/RefuelModal";
+import { useFormChangeCallback } from "../../../../context/callbackProvider";
+const NetworkForm = ({ partner }) => {
+    const [openRefuelModal, setOpenRefuelModal] = useState(false);
+    const { values, setValues, isSubmitting, setFieldValue, } = useFormikContext();
+    const { to: destination, from: source, depositMethod } = values;
+    const selectedSourceAccount = useSelectedAccount("from", source?.name);
+    const { providers, wallets } = useWallet();
+    const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
+    const { swapId } = useSwapDataState();
+    const quoteRefreshInterval = !!swapId ? 0 : undefined;
+    const { minAllowedAmount, maxAllowedAmount, isQuoteLoading, quote } = useQuoteData(quoteArgs, quoteRefreshInterval);
+    const toAsset = values.toAsset;
+    const fromAsset = values.fromAsset;
+    const { formValidation, routeValidation } = useValidationContext();
+    const initialSettings = useInitialSettings();
+    const isValid = !formValidation.message;
+    const error = formValidation.message;
+    const triggerFormChangeCallback = useFormChangeCallback();
+    useEffect(() => {
+        triggerFormChangeCallback(values);
+    }, [values, triggerFormChangeCallback]);
+    useEffect(() => {
+        if (!source || !toAsset || !toAsset.refuel) {
+            setFieldValue('refuel', false, true);
+        }
+    }, [toAsset, destination, source, fromAsset]);
+    const handleReserveGas = useCallback((nativeTokenBalance, networkGas) => {
+        if (nativeTokenBalance.amount && networkGas)
+            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');
+    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, { 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 });
+    let valuesSwapperDisabled = false;
+    const { sourceRoutes, destinationRoutes, } = useSettingsState();
+    const { to: destination, fromAsset: fromCurrency, toAsset: toCurrency, from: source, } = values;
+    const selectedSourceAccount = useSelectedAccount("from", source?.name);
+    const sourceCanBeSwapped = !source ? true : (destinationRoutes?.some(l => l.name === source?.name && l.tokens.some(t => t.symbol === fromCurrency?.symbol && t.status === 'active')) ?? false);
+    const destinationCanBeSwapped = !destination ? true : (sourceRoutes?.some(l => l.name === destination?.name && l.tokens.some(t => t.symbol === toCurrency?.symbol && t.status === 'active')) ?? false);
+    if (query.lockTo || query.lockFrom || query.hideTo || query.hideFrom) {
+        valuesSwapperDisabled = true;
+    }
+    if (!sourceCanBeSwapped || !destinationCanBeSwapped) {
+        valuesSwapperDisabled = true;
+    }
+    else if (!source && !destination) {
+        valuesSwapperDisabled = true;
+    }
+    const valuesSwapper = useCallback(async () => {
+        swapInProgress.current = true;
+        const newFrom = sourceRoutes?.find(l => l.name === destination?.name);
+        const newTo = destinationRoutes?.find(l => l.name === source?.name);
+        const newFromToken = newFrom?.tokens.find(t => t.symbol === toCurrency?.symbol);
+        const newToToken = newTo?.tokens.find(t => t.symbol === fromCurrency?.symbol);
+        const destinationProvider = destination
+            ? providers.find(p => p.autofillSupportedNetworks?.includes(destination?.name) && p.connectedWallets?.some(w => !w.isNotAvailable && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase())))
+            : undefined;
+        const newDestinationProvider = newTo ? providers.find(p => p.autofillSupportedNetworks?.includes(newTo.name) && p.connectedWallets?.some(w => !w.isNotAvailable && w.addresses.some(a => a.toLowerCase() === selectedSourceAccount?.address?.toLowerCase())))
+            : undefined;
+        const oldDestinationWallet = newDestinationProvider?.connectedWallets?.find(w => w.autofillSupportedNetworks?.some(n => n.toLowerCase() === newTo?.name.toLowerCase()) && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase()));
+        const oldDestinationWalletIsNotCompatible = destinationProvider && (destinationProvider?.name !== newDestinationProvider?.name || !(newTo && oldDestinationWallet?.autofillSupportedNetworks?.some(n => n.toLowerCase() === newTo?.name.toLowerCase())));
+        const destinationWalletIsAvailable = newTo ? newDestinationProvider?.connectedWallets?.some(w => w.autofillSupportedNetworks?.some(n => n.toLowerCase() === newTo.name.toLowerCase()) && w.addresses.some(a => a.toLowerCase() === selectedSourceAccount?.address?.toLowerCase())) : undefined;
+        const oldSourceWalletIsNotCompatible = destinationProvider && (selectedSourceAccount?.providerName !== destinationProvider?.name || !(newFrom && selectedSourceAccount?.walletWithdrawalSupportedNetworks?.some(n => n.toLowerCase() === newFrom.name.toLowerCase())));
+        const changeDestinationAddress = newTo && (oldDestinationWalletIsNotCompatible || oldSourceWalletIsNotCompatible) && destinationWalletIsAvailable;
+        const newVales = {
+            ...values,
+            from: newFrom,
+            to: newTo,
+            fromAsset: newFromToken,
+            toAsset: newToToken,
+            destination_address: values.destination_address,
+            depositMethod: undefined
+        };
+        if (changeDestinationAddress) {
+            newVales.destination_address = selectedSourceAccount?.address;
+        }
+        else {
+            newVales.destination_address = oldDestinationWalletIsNotCompatible ? undefined : values.destination_address;
+        }
+        await updateFormBulk(newVales, true, setValues);
+        swapInProgress.current = false;
+    }, [values, sourceRoutes, destinationRoutes, sourceCanBeSwapped, selectedSourceAccount]);
+    return (_jsx("button", { type: "button", "aria-label": "Reverse the source and destination", disabled: valuesSwapperDisabled, onClick: valuesSwapper, className: "hover:text-primary-text text-secondary-text absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded-lg disabled:cursor-not-allowed disabled:text-secondary-text duration-200 transition disabled:pointer-events-none", children: _jsx(motion.div, { animate: animate, transition: { duration: 0.3 }, onTap: () => !valuesSwapperDisabled && cycle(), children: _jsx(ArrowUpDown, { className: classNames(valuesSwapperDisabled && 'opacity-50', "w-7 h-auto p-1 bg-secondary-300 hover:bg-secondary-200 rounded-lg disabled:opacity-30") }) }) }));
+};
+export default NetworkForm;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SubmitButton from '../../../../Buttons/submitButton';
+import { Link } from 'lucide-react';
+const ConnectNetwork = ({ NetworkDisplayName, AppURL }) => {
+    const connectButtonIcon = _jsx(Link, { className: 'h-5 w-5' });
+    return (_jsx("div", { className: "relative inset-0 flex flex-col overflow-y-auto styled-scroll", children: _jsxs("div", { className: "relative min-h-full items-center justify-center pt-0 text-center", children: [_jsx("h3", { className: 'mb-4 pt-2 text-xl text-center md:text-left font-roboto text-secondary-text font-semibold', children: _jsxs("p", { className: 'mb-10 pt-2 text-base text-center md:text-left font-roboto text-pink-primary-300 font-light', children: [NetworkDisplayName, " account with the provided address does not exist. To create one, go to ", NetworkDisplayName, " and connect your wallet."] }) }), _jsx("div", { className: "mt-3 sm:mt-6 text-primary-text text-sm", children: _jsx(SubmitButton, { icon: connectButtonIcon, isDisabled: false, isSubmitting: false, onClick: () => window.open(AppURL, '_blank'), children: "Connect" }) })] }) }));
+};
+export default ConnectNetwork;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormSourceWalletButton } from "../../../../Input/SourceWalletPicker";
+import SubmitButton from "../../../../Buttons/submitButton";
+import { useInitialSettings } from "../../../../../context/settings";
+import Address from "../../../../Input/Address";
+const FormButton = ({ shouldConnectWallet, values, disabled, error, isSubmitting, partner, }) => {
+    const initialSettings = useInitialSettings();
+    const actionDisplayName = error || initialSettings?.actionButtonText || "Next";
+    if (shouldConnectWallet && (!error || !values.to || !values.amount)) {
+        return _jsx(FormSourceWalletButton, {});
+    }
+    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 }));
+};
+export default FormButton;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import WarningMessage from "../../../../../components/Common/WarningMessage";
+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";
+const ReserveGasNote = ({ onSubmit, minAllowedAmount, maxAllowedAmount }) => {
+    const { values, } = useFormikContext();
+    const selectedSourceAccount = useSelectedAccount("from", values.from?.name);
+    const { balances } = useBalance(selectedSourceAccount?.address, values.from);
+    const { gasData } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromAsset, values.amount);
+    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
+        && nativeTokenBalance.amount > minAllowedAmount
+        && !(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 }));
+};
+export default ReserveGasNote;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RouteOff } from 'lucide-react';
+import { ICON_CLASSES_WARNING } from './constants';
+import InfoIcon from "../../../../../../components/Icons/InfoIcon";
+export const defaultErrors = {
+    "insufficientFunds": {
+        details: { title: "Insufficient Balance", type: 'warning', icon: _jsx(InfoIcon, { className: ICON_CLASSES_WARNING }) }
+    },
+    "quoteError": {
+        message: "Unable to retrieve quote",
+        details: { title: "Unable to retrieve quote", type: 'warning', icon: _jsx(RouteOff, { className: ICON_CLASSES_WARNING }) }
+    }
+};
+export const ErrorDisplay = (props) => {
+    const { message, details } = { ...defaultErrors[props?.errorName || ''], ...props };
+    return (_jsx("div", { className: "px-2 py-3 rounded-2xl bg-secondary-400", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0", children: details?.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-white font-medium leading-4 text-base mt-0.5", children: details?.title }), message ? _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: message }) : null] })] }) }));
+};

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

@@ -0,0 +1 @@
+export const ICON_CLASSES_WARNING = 'w-5 h-5 text-warning-foreground';

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useValidationContext } from '../../../../../../context/validationContext';
+import { ErrorDisplay } from './ErrorDisplay';
+const ValidationError = () => {
+    const { routeValidation } = useValidationContext();
+    if (!routeValidation.message)
+        return null;
+    return (_jsx(ErrorDisplay, { ...routeValidation }));
+};
+export default ValidationError;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import SwapForm from "./Form";
+import { SWRConfig, mutate } from 'swr';
+import AppSettings from '../../../../lib/AppSettings';
+import { useSettingsState } from '../../../../context/settings';
+export const Swap = (props) => {
+    const { formValues, featuredNetwork } = props;
+    const settings = useSettingsState();
+    AppSettings.FeaturedNetwork = featuredNetwork;
+    const overriddenFormValues = useMemo(() => {
+        const updatedFormValues = { ...formValues };
+        if (featuredNetwork) {
+            if (featuredNetwork.initialDirection === 'from') {
+                const from = settings?.sourceRoutes?.find(network => network.name === featuredNetwork.network);
+                updatedFormValues.from = from;
+            }
+            else if (featuredNetwork.initialDirection === 'to') {
+                const to = settings?.destinationRoutes?.find(network => network.name === featuredNetwork.network);
+                updatedFormValues.to = to;
+            }
+            return updatedFormValues;
+        }
+        return updatedFormValues;
+    }, [formValues, featuredNetwork]);
+    return (_jsx("div", { className: "text-primary-text", children: _jsx(SWRConfig, { value: { use: [updatePendingCount] }, children: _jsx(SwapForm, { formValues: overriddenFormValues }) }) }));
+};
+const swapsStatuses = {};
+function updatePendingCount(useSWRNext) {
+    return (key, fetcher, config) => {
+        const swr = useSWRNext(key, fetcher, config);
+        useEffect(() => {
+            const swapKeyPattern = /^\/swaps\/[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/;
+            // Update ref if data is not undefined.
+            const swap = swr.data?.data;
+            if (swapKeyPattern.test(key) && swap) {
+                const status = swap.status;
+                if (swapsStatuses[swap.id] !== status) {
+                    mutate('/internal/swaps/count');
+                }
+                swapsStatuses[swap.id] = status;
+            }
+        }, [swr.data, key]);
+        return useSWRNext(key, fetcher, config);
+    };
+}

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

@@ -0,0 +1,11 @@
+export async function updateForm({ formDataKey, formDataValue, shouldValidate, setFieldValue }) {
+    // Update the form field value only
+    await setFieldValue(formDataKey, formDataValue, shouldValidate);
+}
+/**
+ * Bulk‐update Formik with `setValues(...)` without updating URL queries.
+ */
+export async function updateFormBulk(values, shouldValidate = false, setValues) {
+    // Update the form only
+    await setValues(values, shouldValidate);
+}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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,
+        });
+    }, []);
+    const startIntercom = useCallback(() => {
+        boot();
+        show();
+        updateWithProps();
+    }, [boot, show, updateWithProps]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/20", children: _jsx(QuestionIcon, { className: "h-7 w-7 text-primary", "aria-hidden": "true" }) }), _jsx("label", { className: "block text-sm md:text-base text-primary-text font-medium", children: "What's happening?" })] }), _jsxs("div", { className: 'mt-4 text-xs md:text-sm text-primary-text', children: [swapDetails?.status == SwapStatus.Cancelled &&
+                            _jsx(Canceled, { onGetHelp: startIntercom }), swapDetails?.status == SwapStatus.Expired &&
+                            _jsx(Expired, { onGetHelp: startIntercom }), swapDetails?.status == SwapStatus.UserTransferDelayed &&
+                            _jsx(Delay, {})] })] }) }));
+};
+const Expired = ({ onGetHelp }) => {
+    return (_jsxs("div", { children: [_jsx("span", { className: 'text-md text-left text-xs md:text-sm text-primary-text', children: "The transfer wasn't completed during the allocated timeframe." }), _jsxs("span", { className: 'text-secondary-text', children: [_jsx("span", { children: " If you've already sent crypto for this swap, your funds are safe, " }), _jsx("span", { className: 'underline hover:cursor-pointer', onClick: () => onGetHelp(), children: "please contact our support." })] })] }));
+};
+const Delay = () => {
+    return (_jsxs("div", { children: [_jsxs("p", { className: 'text-md ', children: [_jsx("span", { children: "This usually means that the exchange needs additional verification." }), _jsx("a", { target: '_blank', href: "https://docs.layerswap.io/user-docs/why-is-coinbase-transfer-taking-so-long/", className: 'disabled:text-primary-text/40 disabled:bg-primary-900 disabled:cursor-not-allowed ml-1 underline hover:no-underline cursor-pointer', rel: "noopener noreferrer", children: "Learn More" })] }), _jsxs("ul", { className: "list-inside list-decimal font-light space-y-1 mt-2 text-left text-primary-text ", children: [_jsx("li", { children: "Check your email for details from Coinbase" }), _jsx("li", { children: "Check your Coinbase account's transfer history" })] })] }));
+};
+const Canceled = ({ onGetHelp }) => {
+    return (_jsx("div", { children: _jsxs("p", { className: 'text-md text-left text-primary-text', children: [_jsx("span", { children: "The transaction was cancelled by your request." }), _jsxs("span", { className: 'text-secondary-text', children: [_jsx("span", { children: " If you've already sent crypto for this swap, your funds are safe," }), _jsx("span", { className: 'underline hover:cursor-pointer', onClick: () => onGetHelp(), children: " please contact our support." })] })] }) }));
+};
+export default Failed;

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import AddressIcon from '../../../../components/Common/AddressIcon';
+import CopyButton from '../../../../components/Buttons/copyButton';
+import { ImageWithFallback } from '../../../../components/Common/ImageWithFallback';
+import QRIcon from '../../../../components/Icons/QRIcon';
+import shortenAddress from '../../../../components/utils/ShortenAddress';
+import useCopyClipboard from '../../../../hooks/useCopyClipboard';
+import useWallet from '../../../../hooks/useWallet';
+import { QRCodeSVG } from 'qrcode.react';
+import { useMemo } from 'react';
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/shadcn/popover";
+import useExchangeNetworks from '../../../../hooks/useExchangeNetworks';
+import { ChevronDown } from 'lucide-react';
+import { CommandItem, CommandList, CommandWrapper } from '../../../../components/shadcn/command';
+import { useInitialSettings } from '../../../../context/settings';
+import { useSwapDataUpdate } from '../../../../context/swap';
+import { useAsyncModal } from '../../../../context/asyncModal';
+import { handleLimitsUpdate } from './QuoteUpdate';
+import SubmitButton from '../../../../components/Buttons/submitButton';
+import { Widget } from '../../../../components/Widget/Index';
+import { truncateDecimals } from '../../../../components/utils/RoundDecimals';
+const ManualWithdraw = ({ swapBasicData, quote, depositActions, refuel }) => {
+    const { wallets } = useWallet();
+    const { createSwap, setSwapId } = useSwapDataUpdate();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [newNetwork, setNewNetwork] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const { getConfirmation } = useAsyncModal();
+    const [showQR, setShowQR] = useState(false);
+    const destinationLogo = swapBasicData?.destination_network?.logo;
+    const [copied, copy] = useCopyClipboard();
+    const initialSettings = useInitialSettings();
+    const depositAddress = depositActions?.find(da => true)?.to_address;
+    const WalletIcon = wallets.find(wallet => wallet.address.toLowerCase() == swapBasicData?.destination_address?.toLowerCase())?.icon;
+    const handleCopy = () => {
+        if (depositAddress) {
+            copy(depositAddress);
+        }
+    };
+    const handleClick = async (network, token) => {
+        const swapValues = {
+            amount: swapBasicData?.requested_amount?.toString(),
+            from: network,
+            to: swapBasicData?.destination_network,
+            fromAsset: token,
+            toAsset: swapBasicData?.destination_token,
+            refuel: !!refuel,
+            destination_address: swapBasicData?.destination_address,
+            fromExchange: swapBasicData?.source_exchange,
+            depositMethod: 'deposit_address',
+        };
+        try {
+            setLoading(true);
+            await handleLimitsUpdate({
+                swapValues,
+                network,
+                token,
+                getConfirmation
+            });
+            const swapData = await createSwap(swapValues, initialSettings);
+            setNewNetwork(network);
+            const swapId = swapData?.swap?.id;
+            if (!swapId)
+                throw new Error('Swap ID is undefined');
+            setSwapId(swapId);
+            setIsPopoverOpen(false);
+        }
+        catch (e) {
+            console.error('Swap creation error:', e);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const exchangeNetworkParams = useMemo(() => ({
+        fromExchange: swapBasicData?.source_exchange?.name,
+        to: swapBasicData?.destination_network?.name,
+        toAsset: swapBasicData?.destination_token?.symbol
+    }), [swapBasicData]);
+    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(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) => {
+                            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" }) }) }), _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-[20px] block", children: depositAddress ? shortenAddress(depositAddress) : _jsx("span", { className: "inline-block w-28 bg-secondary-400 h-[20px] 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-2", children: [WalletIcon ?
+                                            _jsx(WalletIcon, { className: "w-4 h-4 p-0.5 bg-white rounded-sm" })
+                                            :
+                                                _jsx(AddressIcon, { className: "h-4 w-4", address: swapBasicData.destination_address, size: 36, rounded: '4px' }), shortenAddress(swapBasicData.destination_address)] }) })] })) }) }), _jsx(Widget.Footer, { 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" })] })] }));
+export default ManualWithdraw;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useIntercom } from "react-use-intercom";
+import { Home } from "lucide-react";
+import { useBackClickCallback } from "../../../../context/callbackProvider";
+import MessageComponent from "../../../../components/Common/MessageComponent";
+import NotFoundIcon from "../../../../components/Icons/NotFoundIcon";
+import posthog from "posthog-js";
+const NotFound = ({ swapId }) => {
+    const { boot, show, update } = useIntercom();
+    const updateWithProps = () => update({ customAttributes: { swapId: swapId } });
+    const triggerBackClickCallback = useBackClickCallback();
+    useEffect(() => {
+        posthog.capture('Swap not found', {
+            swapId: swapId ?? null,
+            path: typeof window !== 'undefined' ? window.location.pathname : undefined,
+        });
+    }, []);
+    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-white", 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" })] }) }) })] });
+};
+export default NotFound;