@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useState } from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import useWindowDimensions from '../../../../hooks/useWindowDimensions';
+import NetworkTabIcon from '../../../../components/Icons/NetworkTabIcon';
+import ExchangeTabIcon from '../../../../components/Icons/ExchangeTabIcon';
+const TabsContext = createContext(undefined);
+export const Tabs = ({ defaultValue, children }) => {
+    const [activeId, setActiveId] = useState(defaultValue);
+    return (_jsx(TabsContext.Provider, { value: { activeId, setActiveId }, children: children }));
+};
+export const TabsList = ({ children }) => {
+    const { isDesktop } = useWindowDimensions();
+    const [hovered, setHovered] = useState(false);
+    const hoveredOnDesktop = isDesktop && hovered;
+    return (_jsx("div", { className: "relative", children: _jsx(motion.div, { onHoverStart: () => setHovered(true), onHoverEnd: () => setHovered(false), animate: { width: hoveredOnDesktop ? 180 : 48 }, className: "sm:absolute right-full top-24 overflow-hidden rounded-l-xl max-sm:right-19 max-sm:z-20 max-sm:top-[9px] max-sm:w-fit! max-sm:rounded-lg", transition: { type: 'spring', bounce: 0.2, duration: 0.6 }, children: _jsx("div", { className: "flex flex-col bg-secondary-500 h-full p-1.5 sm:p-2 w-full space-y-2 max-sm:flex-row max-sm:space-y-0 max-sm:space-x-2", children: React.Children.map(children, child => React.isValidElement(child)
+                    ? React.cloneElement(child, { isHovered: hoveredOnDesktop })
+                    : child) }) }) }));
+};
+export const TabsTrigger = ({ value, isHovered, label, Icon }) => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('TabsTrigger must be used within <Tabs>');
+    const isActive = ctx.activeId === value;
+    return (_jsxs("button", { type: "button", onClick: () => ctx.setActiveId(value), className: clsx('w-full flex items-center justify-start !p-1 hover:bg-secondary-100 text-secondary-text hover:text-primary-text overflow-hidden rounded-md max-sm:justify-center max-sm:px-0 gap-1.5', { 'bg-secondary-300 !text-primary-text': isActive }), children: [_jsx("div", { className: "h-6 w-6 max-sm:h-5 max-sm:w-5", children: _jsx(Icon, { className: 'h-6 w-6 max-sm:h-5 max-sm:w-5' }) }), isHovered && _jsx("span", { className: "text-sm whitespace-nowrap", children: label })] }));
+};
+export const TabsContent = ({ value, children }) => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('TabsContent must be used within <Tabs>');
+    return _jsx(_Fragment, { children: value === ctx.activeId && (_jsx("div", { className: "transition-all duration-200", children: children })) });
+};
+export const NetworkExchangeTabs = () => {
+    return _jsxs(TabsList, { children: [_jsx(TabsTrigger, { label: "Swap", Icon: NetworkTabIcon, value: "cross-chain" }), _jsx(TabsTrigger, { label: "Deposit from CEX", Icon: ExchangeTabIcon, value: "exchange" })] });
+};

package/dist/components/Pages/{SwapPages/Form/Form.d.ts → Swap/Form/NetworkForm.d.ts}

@@ -3,5 +3,5 @@ import { Partner } from "../../../../Models/Partner";
 type Props = {
     partner?: Partner;
 };
-declare const SwapForm: FC<Props>;
-export default SwapForm;
+declare const NetworkForm: FC<Props>;
+export default NetworkForm;

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

@@ -0,0 +1,134 @@
+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 { updateForm, 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 { useBalance } from "../../../../lib/balances/useBalance";
+import { InsufficientBalanceWarning } from "./SecondaryComponents/validationError/insufficientBalance";
+import { useFormChangeCallback } from "../../../../context/callbackProvider";
+const NetworkForm = ({ partner }) => {
+    const [openRefuelModal, setOpenRefuelModal] = useState(false);
+    const { values, setValues, isSubmitting, setFieldValue, } = useFormikContext();
+    const { to: destination, from: source, amount, depositMethod } = values;
+    const { provider } = useWallet(source, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { providers, wallets } = useWallet();
+    const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
+    const { swapId, swapModalOpen } = 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 { balances } = useBalance(selectedSourceAccount?.address, source);
+    const walletBalance = source && balances?.find(b => b?.network === source?.name && b?.token === fromAsset?.symbol);
+    const walletBalanceAmount = walletBalance?.amount;
+    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)
+            updateForm({
+                formDataKey: 'amount',
+                formDataValue: (nativeTokenBalance?.amount - networkGas).toString(),
+                setFieldValue
+            });
+    }, [setFieldValue]);
+    const shouldConnectWallet = (source && source?.deposit_methods?.includes('wallet') && depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!source && !wallets.length && depositMethod !== 'deposit_address');
+    const showInsufficientBalanceWarning = !!(values.depositMethod === 'wallet'
+        && !routeValidation.message
+        && !swapModalOpen
+        && Number(amount) > 0
+        && Number(walletBalanceAmount) < Number(amount));
+    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full", children: [_jsx(Widget.Content, { children: _jsx("div", { className: "w-full flex flex-col justify-between", children: _jsx("div", { 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(Widget.Footer, { children: [_jsxs("div", { className: "space-y-3", children: [_jsx(_Fragment, { children: showInsufficientBalanceWarning &&
+                                            _jsx(InsufficientBalanceWarning, {}) }), Number(values.amount) > 0 &&
+                                        _jsx(ReserveGasNote, { maxAllowedAmount: minAllowedAmount, minAllowedAmount: maxAllowedAmount, onSubmit: handleReserveGas }), values.toAsset?.refuel && !initialSettings.hideRefuel &&
+                                        _jsx(RefuelToggle, { quote: quote, onButtonClick: () => setOpenRefuelModal(true), minAllowedAmount: minAllowedAmount }), routeValidation.message
+                                        ? _jsx(ValidationError, {})
+                                        : _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }), _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 { provider } = useWallet(source, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.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?.wallet.withdrawalSupportedNetworks?.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/components/Pages/Swap/Form/SecondaryComponents/FormButton.d.ts

@@ -0,0 +1,12 @@
+import { SwapFormValues } from "../SwapFormValues";
+import { Partner } from "../../../../../Models/Partner";
+type Props = {
+    shouldConnectWallet: boolean;
+    values: SwapFormValues;
+    disabled: boolean;
+    error: string;
+    isSubmitting: boolean;
+    partner: Partner | undefined;
+};
+declare const FormButton: ({ shouldConnectWallet, values, disabled, error, isSubmitting, partner, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default FormButton;

package/dist/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) {
+        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/components/Pages/Swap/Form/SecondaryComponents/ReserveGasNote.d.ts

@@ -0,0 +1,9 @@
+import { TokenBalance } from "../../../../../Models/Balance";
+import { useQuoteData } from "../../../../../hooks/useFee";
+type Props = {
+    onSubmit: (nativeTokenBalance: TokenBalance, networkGas: number) => void;
+    minAllowedAmount: ReturnType<typeof useQuoteData>['minAllowedAmount'];
+    maxAllowedAmount: ReturnType<typeof useQuoteData>['maxAllowedAmount'];
+};
+declare const ReserveGasNote: ({ onSubmit, minAllowedAmount, maxAllowedAmount }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ReserveGasNote;

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

@@ -0,0 +1,28 @@
+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 useWallet from "../../../../../hooks/useWallet";
+import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+const ReserveGasNote = ({ onSubmit, minAllowedAmount, maxAllowedAmount }) => {
+    const { values, } = useFormikContext();
+    const { provider } = useWallet(values.from, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { balances } = useBalance(selectedSourceAccount?.address, values.from);
+    const { gasData } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromAsset);
+    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/components/Pages/Swap/Form/SecondaryComponents/validationError/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useValidationContext } from '../../../../../../context/validationContext';
+const ValidationError = () => {
+    const { routeValidation } = useValidationContext();
+    if (!routeValidation.message)
+        return null;
+    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: routeValidation.details.icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-white font-medium leading-3.5 text-base", children: routeValidation.details.title }), _jsx("p", { className: "text-secondary-text text-sm leading-[18px]", children: routeValidation.message })] })] }) }));
+};
+export default ValidationError;

package/dist/components/Pages/Swap/Form/SecondaryComponents/validationError/insufficientBalance.d.ts

@@ -0,0 +1 @@
+export declare function InsufficientBalanceWarning(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Pages/Swap/Form/SecondaryComponents/validationError/insufficientBalance.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import InfoIcon from "../../../../../Icons/InfoIcon";
+export function InsufficientBalanceWarning() {
+    return (_jsxs("div", { className: "p-2 rounded-xl bg-secondary-400 flex flex-row", children: [_jsx("div", { className: 'grow', children: _jsx(InfoIcon, { className: 'w-6 h-6 p-0.5 text-warning-foreground' }) }), _jsxs("div", { className: 'px-2', children: [_jsx("p", { className: 'text-white font-semibold text-base', children: "Insufficient Balance" }), _jsx("p", { className: "text-secondary-text mt-1 text-sm", children: "You don't have enough balance to complete this transaction, this might cause the transaction to fail please try to enter a smaller amount." })] })] }));
+}

package/dist/components/Pages/{SwapPages → Swap}/Form/SwapFormValues.d.ts

@@ -1,25 +1,21 @@
-import { RouteNetwork, RouteToken } from "../../../../Models/Network";
-import { Exchange, ExchangeToken } from "../../../../Models/Exchange";
+import { NetworkRoute, NetworkRouteToken } from "../../../../Models/Network";
+import { Exchange } from "../../../../Models/Exchange";
 export type SwapFormValues = {
     amount?: string;
     destination_address?: string;
-    fromCurrency?: RouteToken & {
+    fromAsset?: NetworkRouteToken & {
         manuallySet?: boolean;
     };
-    toCurrency?: RouteToken & {
+    toAsset?: NetworkRouteToken & {
         manuallySet?: boolean;
     };
     refuel?: boolean;
-    from?: RouteNetwork;
-    to?: RouteNetwork;
+    from?: NetworkRoute;
+    to?: NetworkRoute;
     fromExchange?: Exchange;
     toExchange?: Exchange;
-    currencyGroup?: ExchangeToken & {
-        manuallySet?: boolean;
-    };
     depositMethod?: 'wallet' | 'deposit_address';
     validatingSource?: boolean;
     validatingDestination?: boolean;
-    validatingCurrencyGroup?: boolean;
 };
 export type SwapDirection = "from" | "to";

package/dist/components/Pages/{SwapPages → Swap}/Form/index.js

@@ -1,13 +1,10 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
-import { SwapDataProvider } from '../../../../context/swap';
 import { TimerProvider } from '../../../../context/timerContext';
-import SwapForm from "./FormWrapper";
+import SwapForm from "./Form";
 import { SWRConfig, mutate } from 'swr';
-import { FeeProvider } from '../../../../context/feeContext';
-import { useSettingsState } from '../../../../context/settings';
 import AppSettings from '../../../../lib/AppSettings';
+import { useSettingsState } from '../../../../context/settings';
 export const Swap = (props) => {
     const { formValues, featuredNetwork } = props;
     const settings = useSettingsState();
@@ -27,7 +24,7 @@ export const Swap = (props) => {
         }
         return updatedFormValues;
     }, [formValues, featuredNetwork]);
-    return (_jsx("div", { className: "text-primary-text", children: _jsx(SWRConfig, { value: { use: [updatePendingCount] }, children: _jsx(SwapDataProvider, { children: _jsx(TimerProvider, { children: _jsx(FeeProvider, { children: _jsx(SwapForm, { formValues: overriddenFormValues }) }) }) }) }) }));
+    return (_jsx("div", { className: "text-primary-text", children: _jsx(SWRConfig, { value: { use: [updatePendingCount] }, children: _jsx(TimerProvider, { children: _jsx(SwapForm, { formValues: overriddenFormValues }) }) }) }));
 };
 const swapsStatuses = {};
 function updatePendingCount(useSWRNext) {

package/dist/components/Pages/Swap/Form/updateForm.d.ts

@@ -0,0 +1,12 @@
+import { FormikHelpers } from "formik";
+import { SwapFormValues } from "./SwapFormValues";
+export declare function updateForm<K extends keyof SwapFormValues>({ formDataKey, formDataValue, shouldValidate, setFieldValue }: {
+    formDataKey: K;
+    formDataValue: SwapFormValues[K];
+    shouldValidate?: boolean;
+    setFieldValue: FormikHelpers<SwapFormValues>['setFieldValue'];
+}): Promise<void>;
+/**
+ * Bulk‐update Formik with `setValues(...)` without updating URL queries.
+ */
+export declare function updateFormBulk(values: Partial<SwapFormValues>, shouldValidate: boolean | undefined, setValues: FormikHelpers<SwapFormValues>["setValues"]): Promise<void>;

package/dist/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/components/Pages/{SwapPages → Swap}/Withdraw/Failed.js

@@ -2,32 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback } from 'react';
 import { useSwapDataState } from '../../../../context/swap';
 import { useIntercom } from 'react-use-intercom';
-import { useAuthState } from '../../../../context/authContext';
 import { SwapStatus } from '../../../../Models/SwapStatus';
-import QuestionIcon from '../../../Icons/Question';
+import QuestionIcon from '../../../../components/Icons/Question';
 const Failed = () => {
-    const { swapResponse } = useSwapDataState();
-    const { swap } = swapResponse || {};
-    const { email, userId } = useAuthState();
+    const { swapDetails } = useSwapDataState();
     const { boot, show, update } = useIntercom();
-    const updateWithProps = () => update({ userId, customAttributes: { swapId: swap?.id, email: email } });
+    const updateWithProps = () => update({ customAttributes: { swapId: swapDetails?.id } });
     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: [swap?.status == SwapStatus.Cancelled &&
-                            _jsx(Canceled, { onGetHelp: startIntercom, swap: swap }), swap?.status == SwapStatus.Expired &&
-                            _jsx(Expired, { onGetHelp: startIntercom, swap: swap }), swap?.status == SwapStatus.UserTransferDelayed &&
+    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("a", { className: 'underline hover:cursor-pointer', onClick: () => onGetHelp(), children: "please contact our support." })] })] }));
+    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-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed ml-1 underline hover:no-underline cursor-pointer', 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" })] })] }));
+    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("a", { className: 'underline hover:cursor-pointer', onClick: () => onGetHelp(), children: " please contact our support." })] })] }) }));
+    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/components/Pages/Swap/Withdraw/ManualWithdraw.d.ts

@@ -0,0 +1,10 @@
+import { DepositAction, Refuel, SwapBasicData, SwapQuote } from '../../../../lib/apiClients/layerSwapApiClient';
+import { FC } from 'react';
+interface Props {
+    swapBasicData: SwapBasicData;
+    quote: SwapQuote | undefined;
+    depositActions: DepositAction[] | undefined;
+    refuel?: Refuel | undefined;
+}
+declare const ManualWithdraw: FC<Props>;
+export default ManualWithdraw;

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

@@ -0,0 +1,92 @@
+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';
+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: swapBasicData?.requested_amount }), " ", _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("div", { className: "rounded-lg space-y-3 text-white", children: [_jsx(_Fragment, { 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: "using the deposit address" })] }) }), _jsx(Step, { number: 3, label: _jsxs("span", { className: 'flex items-center gap-1', children: [_jsx("span", { children: "Receive" }), " ", _jsx("span", { children: quote?.receive_amount }), " ", _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(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/components/Pages/Swap/Withdraw/NotFound.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+declare const NotFound: FC<{
+    swapId?: string | undefined;
+}>;
+export default NotFound;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } 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";
+const NotFound = ({ swapId }) => {
+    const { boot, show, update } = useIntercom();
+    const updateWithProps = () => update({ customAttributes: { swapId: swapId } });
+    const triggerBackClickCallback = useBackClickCallback();
+    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;

package/dist/components/Pages/Swap/Withdraw/Processing/Processing.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SwapBasicData, SwapDetails, SwapQuote, Refuel } from '../../../../../lib/apiClients/layerSwapApiClient';
+type Props = {
+    swapBasicData: SwapBasicData;
+    swapDetails: SwapDetails;
+    quote: SwapQuote | undefined;
+    refuel: Refuel | undefined;
+};
+declare const Processing: FC<Props>;
+export default Processing;