@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Pages/SwapPages/Form/Form.js

@@ -1,138 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Form, useFormikContext } from "formik";
-import { useCallback, useEffect } from "react";
-import NetworkFormField from "../../../Input/NetworkFormField";
-import { motion, useCycle } from "framer-motion";
-import { ArrowUpDown } from 'lucide-react';
-import { Widget } from "../../../Widget/Index";
-import { classNames } from "../../../utils/classNames";
-import { useQueryState } from "../../../../context/query";
-import FeeDetailsComponent from "./FeeDetails";
-import { useFee } from "../../../../context/feeContext";
-import AmountField from "../../../Input/Amount";
-import ResizablePanel from "../../../Common/ResizablePanel";
-import CEXNetworkFormField from "../../../Input/CEXNetworkFormField";
-import ValidationError from "./SecondaryComponents/ValidationError";
-import { useValidationContext } from "../../../../context/validationErrorContext";
-import { useSwapDataState, useSwapDataUpdate } from "../../../../context/swap";
-import useWallet from "../../../../hooks/useWallet";
-import { useSettingsState } from "../../../../context/settings";
-import FormButton from "./SecondaryComponents/FormButton";
-import ReserveGasNote from "./SecondaryComponents/ReserveGasNote";
-const SwapForm = ({ partner }) => {
-    const { values, setValues, errors, isValid, isSubmitting, setFieldValue } = useFormikContext();
-    const { to: destination, fromCurrency, toCurrency, from: source, fromExchange, toExchange, currencyGroup, } = values;
-    const { selectedSourceAccount } = useSwapDataState();
-    const { setSelectedSourceAccount } = useSwapDataUpdate();
-    const { providers, wallets } = useWallet();
-    const { minAllowedAmount, valuesChanger } = useFee();
-    const toAsset = values.toCurrency;
-    const fromAsset = values.fromCurrency;
-    const { validationMessage } = useValidationContext();
-    const query = useQueryState();
-    let valuesSwapperDisabled = false;
-    const actionDisplayName = query?.actionButtonText || "Swap now";
-    useEffect(() => {
-        valuesChanger(values);
-    }, [values]);
-    useEffect(() => {
-        if (!source || !toAsset || !toAsset.refuel) {
-            setFieldValue('refuel', false, true);
-        }
-    }, [toAsset, destination, source, fromAsset, currencyGroup]);
-    useEffect(() => {
-        (async () => {
-            (await import("../../../Input/Address")).default;
-        })();
-    }, [destination]);
-    useEffect(() => {
-        if (values.refuel && minAllowedAmount && (Number(values.amount) < minAllowedAmount)) {
-            setFieldValue('amount', minAllowedAmount);
-        }
-    }, [values.refuel, destination, minAllowedAmount]);
-    const [animate, cycle] = useCycle({ rotate: 0 }, { rotate: 180 });
-    const { sourceExchanges, destinationExchanges, destinationRoutes, sourceRoutes } = useSettingsState();
-    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(() => {
-        let newFromExchange;
-        let newToExchange;
-        let newFromExchangeToken;
-        let newToExchangeToken;
-        if (toExchange) {
-            newFromExchange = sourceExchanges?.find(e => e.name === toExchange?.name);
-            newFromExchangeToken = newFromExchange?.token_groups.find(t => t.symbol === fromCurrency?.symbol);
-        }
-        if (fromExchange) {
-            newToExchange = destinationExchanges?.find(e => e.name === fromExchange?.name);
-            newToExchangeToken = newToExchange?.token_groups.find(t => t.symbol === toCurrency?.symbol);
-        }
-        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 && !toExchange)
-            ? 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 && !toExchange) ? 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?.wallet.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,
-            fromCurrency: newFromToken,
-            toCurrency: newToToken,
-            toExchange: newToExchange,
-            fromExchange: newFromExchange,
-            currencyGroup: (fromExchange || toExchange) ? (fromExchange ? newToExchangeToken : newFromExchangeToken) : undefined,
-            destination_address: (toExchange || fromExchange) ? undefined : values.destination_address,
-            depositMethod: undefined
-        };
-        if (changeDestinationAddress) {
-            newVales.destination_address = selectedSourceAccount?.address;
-        }
-        setValues(newVales, true);
-        const changeSourceAddress = newFrom && values.depositMethod === 'wallet' && destinationProvider && (oldSourceWalletIsNotCompatible || changeDestinationAddress);
-        if (changeSourceAddress && values.destination_address) {
-            const sourceAvailableWallet = destinationProvider?.connectedWallets?.find(w => w.withdrawalSupportedNetworks?.some(n => n.toLowerCase() === newFrom.name.toLowerCase()) && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase()));
-            if (sourceAvailableWallet) {
-                setSelectedSourceAccount({
-                    wallet: sourceAvailableWallet,
-                    address: values.destination_address
-                });
-            }
-            else {
-                setSelectedSourceAccount(undefined);
-            }
-        }
-    }, [values, sourceRoutes, destinationRoutes, sourceCanBeSwapped, destinationExchanges, selectedSourceAccount]);
-    const handleReserveGas = useCallback((walletBalance, networkGas) => {
-        if (walletBalance && networkGas)
-            setFieldValue('amount', walletBalance?.amount - networkGas);
-    }, [values.amount]);
-    const sourceWalletNetwork = values.fromExchange ? undefined : values.from;
-    const shouldConnectWallet = (sourceWalletNetwork && values.from?.deposit_methods?.includes('wallet') && values.depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!values.from && !values.fromExchange && !wallets.length && values.depositMethod !== 'deposit_address' && !(!values.from && values.to));
-    return _jsx(Widget, { className: "sm:min-h-[450px] h-full", children: _jsxs(Form, { className: `h-full grow flex flex-col justify-between space-y-3 ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`, children: [_jsxs(Widget.Content, { children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full mb-3.5 leading-4 bg-secondary-700 rounded-xl', children: [!(query?.hideFrom && values?.from) && _jsx("div", { className: "flex flex-col w-full", children: _jsx(NetworkFormField, { direction: "from", label: "From", className: "rounded-t-lg pt-2.5", partner: partner }) }), !query?.hideFrom && !query?.hideTo &&
-                                    _jsx("button", { type: "button", "aria-label": "Reverse the source and destination", disabled: valuesSwapperDisabled, onClick: valuesSwapper, className: `hover:text-primary absolute right-[calc(50%-16px)] top-[122px] z-10 border-2 border-secondary-700 bg-secondary-600 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-500 rounded-lg disabled:opacity-30") }) }) }), !(query?.hideTo && values?.to) && _jsx("div", { className: "flex flex-col w-full", children: _jsx(NetworkFormField, { direction: "to", label: "To", className: "rounded-b-lg", partner: partner }) })] }), (((fromExchange && destination) || (toExchange && source)) && currencyGroup) ?
-                            _jsx("div", { className: "mb-6 leading-4", children: _jsx(ResizablePanel, { children: _jsx(CEXNetworkFormField, { direction: fromExchange ? 'from' : 'to', partner: partner }) }) })
-                            : _jsx(_Fragment, {}), _jsx("div", { className: "mb-6 leading-4", children: _jsx(AmountField, {}) }), _jsxs("div", { className: "w-full", children: [validationMessage ?
-                                    _jsx(ValidationError, {})
-                                    :
-                                        _jsx(FeeDetailsComponent, { values: values }), values.amount &&
-                                    _jsx(ReserveGasNote, { onSubmit: (walletBalance, networkGas) => handleReserveGas(walletBalance, networkGas) })] })] }), _jsx(Widget.Footer, { children: _jsx(FormButton, { shouldConnectWallet: shouldConnectWallet, values: values, isValid: isValid, errors: errors, isSubmitting: isSubmitting, actionDisplayName: actionDisplayName, partner: partner }) })] }) });
-};
-export default SwapForm;

package/dist/components/Pages/SwapPages/Form/FormWrapper.js

@@ -1,175 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Formik } from "formik";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useSettingsState } from "../../../../context/settings";
-import { useSwapDataState, useSwapDataUpdate } from "../../../../context/swap";
-import toast from "react-hot-toast";
-import MainStepValidation from "../../../../lib/mainStepValidator";
-import { generateSwapInitialValues, generateSwapInitialValuesFromSwap } from "../../../../lib/generateSwapInitialValues";
-import LayerSwapApiClient from "../../../../lib/layerSwapApiClient";
-import Modal from "../../../Modal/modal";
-import SwapForm from "./Form";
-import useSWR from "swr";
-import { UserType, useAuthDataUpdate } from "../../../../context/authContext";
-import { LSAPIKnownErrorCode } from "../../../../Models/ApiError";
-import { useQueryState } from "../../../../context/query";
-import TokenService from "../../../../lib/TokenService";
-import LayerSwapAuthApiClient from "../../../../lib/userAuthApiClient";
-import { ChevronRight } from "lucide-react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useFee } from "../../../../context/feeContext";
-import ResizablePanel from "../../../Common/ResizablePanel";
-import useWallet from "../../../../hooks/useWallet";
-import { DepositMethodProvider } from "../../../../context/depositMethodContext";
-import AddressNote from "../../../Input/Address/AddressNote";
-import { addressFormat } from "../../../../lib/address/formatter";
-import { AddressGroup } from "../../../Input/Address/AddressPicker";
-import { useAddressesStore } from "../../../../stores/addressesStore";
-import { useAsyncModal } from "../../../../context/asyncModal";
-import { ValidationProvider } from "../../../../context/validationErrorContext";
-import ConnectNetwork from "./SecondaryComponents/ConnectNetwork";
-import SwapDetails from "../Withdraw/SwapDetails";
-export default function Form({ formValues }) {
-    const formikRef = useRef(null);
-    const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
-    const [showSwapModal, setShowSwapModal] = useState(false);
-    const [isAddressFromQueryConfirmed, setIsAddressFromQueryConfirmed] = useState(false);
-    const [networkToConnect, setNetworkToConnect] = useState();
-    const { updateAuthData, setUserType } = useAuthDataUpdate();
-    const { getProvider } = useWallet();
-    const addresses = useAddressesStore(state => state.addresses);
-    const { getConfirmation } = useAsyncModal();
-    const settings = useSettingsState();
-    const query = useQueryState();
-    const { createSwap, setSwapId } = useSwapDataUpdate();
-    const layerswapApiClient = new LayerSwapApiClient();
-    const { data: partnerData } = useSWR(query?.appName && `/internal/apps?name=${query?.appName}`, layerswapApiClient.fetcher);
-    const partner = query?.appName && partnerData?.data?.client_id?.toLowerCase() === query?.appName?.toLowerCase() ? partnerData?.data : undefined;
-    const { swapResponse, selectedSourceAccount } = useSwapDataState();
-    const { swap } = swapResponse || {};
-    const { minAllowedAmount, maxAllowedAmount, updatePolling: pollFee, mutateLimits } = useFee();
-    const handleSubmit = useCallback(async (values) => {
-        const { destination_address, to } = values;
-        if (to &&
-            destination_address &&
-            (query.destAddress) &&
-            (addressFormat(query.destAddress?.toString(), to) === addressFormat(destination_address, to)) &&
-            !(addresses.find(a => addressFormat(a.address, to) === addressFormat(destination_address, to) && a.group !== AddressGroup.FromQuery)) && !isAddressFromQueryConfirmed) {
-            const confirmed = await getConfirmation({
-                content: _jsx(AddressNote, { partner: partner, values: values }),
-                submitText: 'Confirm address',
-                dismissText: 'Cancel address'
-            });
-            if (confirmed) {
-                setIsAddressFromQueryConfirmed(true);
-            }
-            else if (!confirmed) {
-                return;
-            }
-        }
-        try {
-            const accessToken = TokenService.getAuthData()?.access_token;
-            if (!accessToken) {
-                try {
-                    var apiClient = new LayerSwapAuthApiClient();
-                    const res = await apiClient.guestConnectAsync();
-                    updateAuthData(res);
-                    setUserType(UserType.GuestUser);
-                }
-                catch (error) {
-                    toast.error(error.response?.data?.error || error.message);
-                    return;
-                }
-            }
-            const swapId = await createSwap(values, query, partner);
-            setSwapId(swapId);
-            pollFee(false);
-            // setSwapPath(swapId, router)
-            setShowSwapModal(true);
-        }
-        catch (error) {
-            mutateLimits();
-            const data = error?.response?.data?.error;
-            if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
-                toast.error("You can't transfer to that address. Please double check.");
-            }
-            else if (data?.code === LSAPIKnownErrorCode.INVALID_ADDRESS_ERROR) {
-                toast.error(`Enter a valid ${values.to?.display_name} address`);
-            }
-            else if (data?.code === LSAPIKnownErrorCode.UNACTIVATED_ADDRESS_ERROR && values.to) {
-                setNetworkToConnect({
-                    DisplayName: values.to.display_name,
-                    AppURL: data.metadata.ActivationUrl
-                });
-                setShowConnectNetworkModal(true);
-            }
-            else if (data?.code === LSAPIKnownErrorCode.NETWORK_CURRENCY_DAILY_LIMIT_REACHED) {
-                const time = data.metadata.RemainingLimitPeriod?.split(':');
-                const hours = Number(time[0]);
-                const minutes = Number(time[1]);
-                const remainingTime = `${hours > 0 ? `${hours.toFixed()} ${(hours > 1 ? 'hours' : 'hour')}` : ''} ${minutes > 0 ? `${minutes.toFixed()} ${(minutes > 1 ? 'minutes' : 'minute')}` : ''}`;
-                if (minAllowedAmount && data.metadata.AvailableTransactionAmount > minAllowedAmount) {
-                    toast.error(`Daily limit of ${values.fromCurrency?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromCurrency?.symbol} or retry in ${remainingTime}.`);
-                }
-                else {
-                    toast.error(`Daily limit of ${values.fromCurrency?.symbol} transfers from ${values.from?.display_name} is reached. Please retry in ${remainingTime}.`);
-                }
-            }
-            else {
-                toast.error(data?.message || error?.message);
-            }
-        }
-    }, [createSwap, query, partner, updateAuthData, setUserType, swap, getProvider]);
-    const destAddress = query?.destAddress;
-    const isPartnerAddress = partner && destAddress;
-    const isPartnerWallet = isPartnerAddress && partner?.is_wallet;
-    const initialValues = formValues ?? (swapResponse ? generateSwapInitialValuesFromSwap(swapResponse, settings)
-        : generateSwapInitialValues(settings, query));
-    useEffect(() => {
-        formikRef.current?.validateForm();
-    }, [minAllowedAmount, maxAllowedAmount, selectedSourceAccount]);
-    const handleShowSwapModal = useCallback((value) => {
-        pollFee(!value);
-        setShowSwapModal(value);
-        //TODO: implement
-        // value && swap?.id ? setSwapPath(swap?.id, router) : removeSwapPath(router)
-    }, [
-        // router, 
-        swap
-    ]);
-    const validator = useMemo(() => MainStepValidation({ minAllowedAmount, maxAllowedAmount, sourceAddress: selectedSourceAccount?.address, sameAccountNetwork: query.sameAccountNetwork }), [minAllowedAmount, maxAllowedAmount, selectedSourceAccount, query.sameAccountNetwork]);
-    return _jsxs(DepositMethodProvider, { canRedirect: true, onRedirect: () => handleShowSwapModal(false), children: [_jsx("div", { className: "rounded-r-lg cursor-pointer absolute z-10 md:mt-3 border-l-0", children: _jsx(AnimatePresence, { mode: 'wait', children: swap &&
-                        !showSwapModal &&
-                        _jsx(PendingSwap, { onClick: () => handleShowSwapModal(true) }, "pendingSwap") }) }), _jsx(Modal, { height: "fit", show: showConnectNetworkModal, setShow: setShowConnectNetworkModal, header: `${networkToConnect?.DisplayName} connect`, modalId: "showNetwork", children: networkToConnect &&
-                    _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }), _jsx(Modal, { height: 'fit', show: showSwapModal, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", children: _jsx(ResizablePanel, { children: _jsx(SwapDetails, { type: "contained" }) }) }), _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, validate: validator, onSubmit: handleSubmit, children: _jsx(ValidationProvider, { children: _jsx(SwapForm, { partner: partner }) }) })] });
-}
-const textMotion = {
-    rest: {
-        color: "grey",
-        x: 0,
-        transition: {
-            duration: 0.4,
-            type: "tween",
-            ease: "easeIn"
-        }
-    },
-    hover: {
-        color: "blue",
-        x: 30,
-        transition: {
-            duration: 0.4,
-            type: "tween",
-            ease: "easeOut"
-        }
-    }
-};
-const PendingSwap = ({ onClick }) => {
-    const { swapResponse } = useSwapDataState();
-    const { swap } = swapResponse || {};
-    const { destination_exchange, source_exchange, source_network, destination_network } = swap || {};
-    if (!swap)
-        return _jsx(_Fragment, {});
-    return _jsx(motion.div, { initial: { y: 10, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -10, opacity: 0 }, transition: { duration: 0.2 }, children: _jsx(motion.div, { onClick: onClick, initial: "rest", whileHover: "hover", animate: "rest", className: "relative bg-secondary-600 rounded-r-lg", children: _jsx(motion.div, { variants: textMotion, className: "flex items-center bg-secondary-600 rounded-r-lg", children: _jsxs("div", { className: "text-primary-text flex px-3 p-2 items-center space-x-2", children: [_jsx("div", { className: "flex-shrink-0 h-5 w-5 relative", children: source_exchange ? _jsx("img", { src: source_exchange.logo, alt: "From Logo", height: "60", width: "60", className: "rounded-md object-contain" }) : source_network ?
-                                _jsx("img", { src: source_network.logo, alt: "From Logo", height: "60", width: "60", className: "rounded-md object-contain" }) : null }), _jsx(ChevronRight, { className: "block h-4 w-4 mx-1" }), _jsx("div", { className: "flex-shrink-0 h-5 w-5 relative block", children: destination_exchange ? _jsx("img", { src: destination_exchange.logo, alt: "To Logo", height: "60", width: "60", className: "rounded-md object-contain" }) : destination_network ?
-                                _jsx("img", { src: destination_network.logo, alt: "To Logo", height: "60", width: "60", className: "rounded-md object-contain" }) : null })] }) }) }) });
-};

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/FormButton.d.ts

@@ -1,10 +0,0 @@
-declare const FormButton: ({ shouldConnectWallet, values, isValid, errors, isSubmitting, actionDisplayName, partner }: {
-    shouldConnectWallet: any;
-    values: any;
-    isValid: any;
-    errors: any;
-    isSubmitting: any;
-    actionDisplayName: any;
-    partner: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FormButton;

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/FormButton.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormSourceWalletButton } from "../../../../Input/SourceWalletPicker";
-import { PlusIcon } from "lucide-react";
-import SwapButton from "../../../../Buttons/swapButton";
-import Address from "../../../../Input/Address";
-// const Address = dynamic(() => import("../../../../Input/Address"), {
-//     loading: () => <></>,
-// });
-const FormButton = ({ shouldConnectWallet, values, isValid, errors, isSubmitting, actionDisplayName, partner }) => {
-    if (shouldConnectWallet) {
-        return _jsx(FormSourceWalletButton, {});
-    }
-    if (values?.to && !values?.destination_address) {
-        return (_jsx("div", { children: _jsx(Address, { partner: partner, children: () => (_jsxs("div", { className: "border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out bg-primary text-primary-actionButtonText py-3 px-2 md:px-3", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(PlusIcon, { className: "stroke-1" }) }), _jsx("span", { className: "grow text-center", children: "Enter destination address" })] })) }) }));
-    }
-    return (_jsx(SwapButton, { className: "plausible-event-name=Swap+initiated", type: "submit", isDisabled: !isValid, isSubmitting: isSubmitting, children: ActionText(errors, actionDisplayName) }));
-};
-function ActionText(errors, actionDisplayName) {
-    return errors.from?.toString()
-        || errors.to?.toString()
-        || errors.fromCurrency
-        || errors.toCurrency
-        || errors.currencyGroup
-        || errors.amount
-        || (actionDisplayName);
-}
-export default FormButton;

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/ReserveGasNote.d.ts

@@ -1,5 +0,0 @@
-import { Balance } from "../../../../../Models/Balance";
-declare const ReserveGasNote: ({ onSubmit }: {
-    onSubmit: (walletBalance: Balance, networkGas: number) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ReserveGasNote;

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

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import WarningMessage from "../../../../Common/WarningMessage";
-import { useFormikContext } from "formik";
-import { truncateDecimals } from "../../../../utils/RoundDecimals";
-import { useFee } from "../../../../../context/feeContext";
-import useSWRBalance from "../../../../../lib/balances/useSWRBalance";
-import useSWRGas from "../../../../../lib/gases/useSWRGas";
-import { useSwapDataState } from "../../../../../context/swap";
-const ReserveGasNote = ({ onSubmit }) => {
-    const { values, } = useFormikContext();
-    const { minAllowedAmount, maxAllowedAmount } = useFee();
-    const { selectedSourceAccount } = useSwapDataState();
-    const { balance } = useSWRBalance(selectedSourceAccount?.address, values.from);
-    const { gas: networkGas } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromCurrency);
-    const walletBalance = selectedSourceAccount && balance?.find(b => b?.network === values?.from?.name && b?.token === values?.fromCurrency?.symbol);
-    const mightBeOutOfGas = !!(networkGas && walletBalance?.isNativeCurrency && (Number(values.amount)
-        + networkGas) > walletBalance.amount
-        && minAllowedAmount
-        && walletBalance.amount > minAllowedAmount
-        && !(maxAllowedAmount && (walletBalance.amount > (maxAllowedAmount + networkGas))));
-    const gasToReserveFormatted = mightBeOutOfGas ? truncateDecimals(networkGas, values?.fromCurrency?.precision) : '';
-    return (_jsx(_Fragment, { children: mightBeOutOfGas && gasToReserveFormatted &&
-            ((Number(walletBalance.amount) < Number(networkGas)) ?
-                _jsx(WarningMessage, { messageType: "warning", className: "mt-4", children: _jsx("div", { className: "font-normal text-primary-text", children: "You don't have enough funds to cover gas fees." }) })
-                :
-                    _jsx(WarningMessage, { messageType: "warning", className: "mt-4", 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(walletBalance, networkGas), 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?.fromCurrency?.symbol }), " ", _jsx("span", { children: "for gas." })] })] }) })) }));
-};
-export default ReserveGasNote;

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/ValidationError.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useValidationContext } from '../../../../../context/validationErrorContext';
-const ValidationError = () => {
-    const { validationDetails, validationMessage } = useValidationContext();
-    if (!validationMessage)
-        return null;
-    return (_jsxs("div", { className: `p-2.5 my-2.5 relative rounded-md bg-secondary-700 border-l-8 ${validationDetails.type === "warning" ? "border-orange-400" : "border-red-400"}`, children: [_jsxs("div", { className: 'flex items-center', children: [validationDetails.icon, _jsx("p", { className: 'text-primary-text font-medium ml-1', children: validationDetails.title })] }), _jsx("p", { className: "text-secondary-text ml-5 mt-1 text-sm", children: validationMessage })] }));
-};
-export default ValidationError;

package/dist/components/Pages/SwapPages/Form/Select/Command/CommandSelectWrapper.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import CommandSelect from './commandSelect';
-export default function CommandSelectWrapper({ setValue, value, disabled, placeholder, searchHint, values, valueGrouper, isLoading, modalHeight, modalContent, header, valueDetails }) {
-    const [showModal, setShowModal] = useState(false);
-    function openModal() {
-        setShowModal(true);
-    }
-    const handleSelect = useCallback((item) => {
-        setValue(item);
-        setShowModal(false);
-    }, [setValue]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center relative", children: _jsxs("button", { type: "button", onClick: openModal, disabled: disabled, className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 font-semibold", children: [_jsxs("span", { className: 'flex grow text-left items-center text-xs md:text-base', children: [value?.imgSrc && _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "flex-shrink-0 h-6 w-6 relative", children: _jsx("img", { src: value.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", fetchPriority: 'high', className: "rounded-md object-contain" }) }) }), value ?
-                                    _jsx("span", { className: "ml-3 flex font-medium flex-auto space-x-1 text-primary-buttonTextColor items-center", children: valueDetails || value.name })
-                                    :
-                                        _jsx("span", { className: "block font-medium text-primary-text-placeholder flex-auto items-center", children: placeholder })] }), _jsx("span", { className: "ml-3 right-0 flex items-center pr-2 pointer-events-none  text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }), _jsx(CommandSelect, { setShow: setShowModal, setValue: handleSelect, show: showModal, value: value, searchHint: searchHint, valueGrouper: valueGrouper, values: values, isLoading: isLoading, modalHeight: modalHeight, modalContent: modalContent, header: header })] }));
-}

package/dist/components/Pages/SwapPages/Form/Select/Command/commandSelect.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandWrapper } from '../../../../../shadcn/command';
-import React, { useCallback } from "react";
-import useWindowDimensions from '../../../../../../hooks/useWindowDimensions';
-import SelectItem from '../Shared/SelectItem';
-import SpinIcon from '../../../../../Icons/spinIcon';
-import VaulDrawer from '../../../../../Modal/vaulModal';
-export class SelectMenuItemGroup {
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper, isLoading, modalHeight = 'full', modalContent, header }) {
-    const { isDesktop, isMobileWithPortal, windowSize } = useWindowDimensions();
-    let groups = valueGrouper(values);
-    const handleSelectValue = useCallback((item) => {
-        setValue(item);
-        setShow(false);
-    }, [setValue, setShow]);
-    const inputRef = React.useRef(null);
-    return (_jsx(VaulDrawer, { header: header, show: show, setShow: setShow, modalId: 'comandSelect', onAnimationEnd: () => { isDesktop && show && inputRef.current?.focus(); }, children: _jsx(VaulDrawer.Snap, { id: 'item-1', style: { height: isMobileWithPortal && windowSize.height ? `${(windowSize.height * 0.8).toFixed()}px` : '' }, fullheight: isDesktop, children: _jsxs(CommandWrapper, { children: [searchHint &&
-                        _jsx(CommandInput, { ref: inputRef, placeholder: searchHint }), modalContent, !isLoading ?
-                        _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), groups.filter(g => g.items?.length > 0).map((group) => {
-                                    return (_jsx(CommandGroup, { heading: group.name, children: group.items.map(item => {
-                                            return (_jsx(CommandItem, { value: item.name, onSelect: () => handleSelectValue(item), children: _jsx(SelectItem, { item: item }) }, item.id));
-                                        }) }, group.name));
-                                })] })
-                        :
-                            _jsx("div", { className: 'flex justify-center h-full items-center', children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) })] }) }) }));
-}

package/dist/components/Pages/SwapPages/Form/Select/Popover/PopoverSelectWrapper.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../../../shadcn/popover';
-import PopoverSelect from './PopoverSelect';
-export default function PopoverSelectWrapper({ setValue, value, values, placeholder, disabled, }) {
-    const [showModal, setShowModal] = useState(false);
-    const handleSelect = useCallback((item) => {
-        setValue(item);
-        setShowModal(false);
-    }, [setValue]);
-    if (!values?.length)
-        return _jsx(Placeholder, { placeholder: placeholder });
-    return (_jsxs(Popover, { open: showModal, onOpenChange: () => !disabled && setShowModal(!showModal), children: [_jsx(PopoverTrigger, { asChild: true, children: value ?
-                    _jsx("div", { className: "border-secondary-500 rounded-lg border focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 font-semibold align-sub", children: _jsxs("button", { type: 'button', className: 'w-full py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between', children: [_jsxs("span", { className: "flex items-center text-xs md:text-base", children: [_jsx("div", { className: "flex-shrink-0 h-6 w-6 relative", children: value.imgSrc && _jsx("img", { src: value.imgSrc, alt: "Project Logo", fetchPriority: 'high', height: "40", width: "40", className: "rounded-md object-contain" }) }), _jsx("span", { className: "text-primary-buttonTextColor ml-3 block", children: value.name })] }), _jsx("span", { className: "ml-1 flex items-center pointer-events-none text-primary-buttonTextColor", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) })
-                    :
-                        _jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsxs("button", { type: 'button', className: 'w-full py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between', children: [_jsx("div", { className: "disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold", children: _jsx("span", { className: "flex grow text-left items-center", children: _jsx("span", { className: "block text-xs md:text-base font-medium text-primary-text-placeholder flex-auto items-center", children: placeholder }) }) }), _jsx("span", { className: "ml-1 flex items-center pointer-events-none text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }) }), _jsx(PopoverContent, { className: "w-fit", children: _jsx(PopoverSelect, { setValue: handleSelect, value: value, values: values }) })] }));
-}
-const Placeholder = ({ placeholder }) => {
-    return (_jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsx("div", { className: "disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold", children: _jsx("span", { className: "flex grow text-left items-center", children: _jsx("span", { className: "block text-xs md:text-base font-medium text-primary-text-placeholder flex-auto items-center", children: placeholder }) }) }) }));
-};
-const LockedAsset = ({ value }) => {
-    return (_jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsx("div", { className: 'w-full border-transparent bg-transparent font-semibold rounded-md', children: _jsxs("span", { className: "flex items-center text-xs md:text-base", children: [_jsx("div", { className: "flex-shrink-0 h-6 w-6 relative", children: value?.imgSrc && _jsx("img", { src: value?.imgSrc, alt: "Project Logo", fetchPriority: 'high', height: "40", width: "40", className: "rounded-md object-contain" }) }), _jsx("span", { className: "ml-3 block truncate text-primary-text", children: value?.name })] }) }) }));
-};

package/dist/components/Pages/SwapPages/Form/Select/Shared/SelectItem.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SelectItem({ item }) {
-    return (_jsx("div", { className: `${item?.displayName ? "px-3" : "px-1.5"} flex items-center justify-between gap-3 w-full overflow-hidden`, children: _jsxs("div", { className: `${item?.displayName ? "gap-2.5" : "gap-3"} relative flex items-center  pl-1 w-full`, children: [!item?.displayName &&
-                    _jsx("div", { className: "flex-shrink-0", children: _jsx("div", { children: item.leftIcon }) }), _jsx("div", { className: `${item?.displayName ? "h-9 w-9" : "h-6 w-6"} flex-shrink-0 relative`, children: item.imgSrc && (_jsx("img", { src: item.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" })) }), _jsxs("div", { className: "flex justify-between w-full items-center", children: [_jsx("span", { className: "flex items-center pb-0.5", children: item.displayName ? item.displayName : item.name }), item.badge && _jsx("span", { className: "ml-2", children: item.badge }), _jsx("span", { className: "ml-auto pl-2", children: item.details })] })] }) }));
-}

package/dist/components/Pages/SwapPages/Withdraw/Coinbase/Authorize.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-type Props = {
-    onAuthorized: () => void;
-    onDoNotConnect: () => void;
-    stickyFooter: boolean;
-    hideHeader?: boolean;
-};
-declare const Authorize: FC<Props>;
-export default Authorize;

package/dist/components/Pages/SwapPages/Withdraw/Coinbase/Authorize.js

@@ -1,91 +0,0 @@
-import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSwapDataState } from '../../../../../context/swap';
-import { useInterval } from '../../../../../hooks/useInterval';
-import { CalculateMinimalAuthorizeAmount } from '../../../../../lib/fees';
-import { parseJwt } from '../../../../../lib/jwtParser';
-import TokenService from '../../../../../lib/TokenService';
-import SubmitButton from '../../../../Buttons/submitButton';
-import Carousel, { CarouselItem } from './Carousel';
-import { FirstScreen, FourthScreen, LastScreen, SecondScreen, ThirdScreen } from './ConnectGuideScreens';
-import { ArrowLeft } from 'lucide-react';
-import IconButton from '../../../../Buttons/iconButton';
-import { motion } from 'framer-motion';
-import { useCoinbaseStore } from './CoinbaseStore';
-import { Widget } from '../../../../Widget/Index';
-const Authorize = ({ onAuthorized, hideHeader }) => {
-    const { swapResponse } = useSwapDataState();
-    const { swap } = swapResponse || {};
-    const { source_exchange: exchange } = swap || {};
-    let alreadyFamiliar = useCoinbaseStore((state) => state.alreadyFamiliar);
-    let toggleAlreadyFamiliar = useCoinbaseStore((state) => state.toggleAlreadyFamiliar);
-    const [carouselFinished, setCarouselFinished] = useState(alreadyFamiliar);
-    const [authWindow, setAuthWindow] = useState();
-    const [firstScreen, setFirstScreen] = useState(true);
-    const carouselRef = useRef(null);
-    const exchange_internal_name = exchange?.name;
-    const exchange_name = exchange?.display_name;
-    const currency = swap?.source_token;
-    const coinbaseOauthProvider = exchange?.metadata.o_auth;
-    const { authorize_url } = coinbaseOauthProvider || {};
-    const minimalAuthorizeAmount = currency?.price_in_usd ?
-        CalculateMinimalAuthorizeAmount(currency?.price_in_usd, Number(swap?.requested_amount)) : null;
-    const checkShouldStartPolling = useCallback(() => {
-        let authWindowHref = "";
-        try {
-            authWindowHref = authWindow?.location?.href;
-        }
-        catch (e) {
-            //throws error when accessing href TODO research safe way
-        }
-        if (authWindowHref && authWindowHref?.indexOf(window.location.origin) !== -1) {
-            authWindow?.close();
-            onAuthorized();
-        }
-    }, [authWindow]);
-    useInterval(checkShouldStartPolling, authWindow && !authWindow.closed ? 1000 : null);
-    const handleConnect = useCallback(() => {
-        try {
-            if (!swap)
-                return;
-            if (!carouselFinished && !alreadyFamiliar) {
-                carouselRef?.current?.next();
-                return;
-            }
-            const access_token = TokenService.getAuthData()?.access_token;
-            if (!access_token) {
-                //TODO handle not authenticated
-                return;
-            }
-            const { sub } = parseJwt(access_token) || {};
-            const encoded = btoa(JSON.stringify({ SwapId: swap?.id, UserId: Number(sub), RedirectUrl: `${window.location.origin}/salon` }));
-            // const authWindow = OpenLink({ link: authorize_url + encoded, query: router.query, swapId: swap.id })
-            setAuthWindow(authWindow);
-        }
-        catch (e) {
-            toast.error(e.message);
-        }
-    }, [carouselFinished, alreadyFamiliar, swap?.id, authorize_url]);
-    const handlePrev = useCallback(() => {
-        carouselRef?.current?.prev();
-        return;
-    }, []);
-    const onCarouselLast = (value) => {
-        setCarouselFinished(value);
-    };
-    const handleToggleChange = (e) => {
-        if (e.target.checked) {
-            carouselRef?.current?.goToLast();
-        }
-        else {
-            carouselRef?.current?.goToFirst();
-        }
-        toggleAlreadyFamiliar();
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs(Widget.Content, { children: [!hideHeader ?
-                        _jsxs("h3", { className: 'md:mb-4 pt-2 text-lg sm:text-xl text-left font-roboto text-primary-text font-semibold', children: ["Please connect your ", exchange_name, " account"] })
-                        : _jsx(_Fragment, {}), _jsx("div", { className: "w-full flex flex-col self-center h-[100%]", children: swap && _jsxs(Carousel, { onLast: onCarouselLast, onFirst: setFirstScreen, ref: carouselRef, starAtLast: alreadyFamiliar, children: [_jsx(CarouselItem, { width: 100, children: _jsx(FirstScreen, { exchange_name: exchange_name }) }), _jsx(CarouselItem, { width: 100, children: _jsx(SecondScreen, {}) }), _jsx(CarouselItem, { width: 100, children: _jsx(ThirdScreen, { minimalAuthorizeAmount: minimalAuthorizeAmount }) }), _jsx(CarouselItem, { width: 100, children: _jsx(FourthScreen, { minimalAuthorizeAmount: minimalAuthorizeAmount }) }), _jsx(CarouselItem, { width: 100, children: _jsx(LastScreen, { number: !alreadyFamiliar, minimalAuthorizeAmount: Number(minimalAuthorizeAmount) }) })] }) })] }), _jsx(Widget.Footer, { sticky: true, children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center mb-3", children: [_jsx("input", { name: "alreadyFamiliar", id: 'alreadyFamiliar', type: "checkbox", className: "h-4 w-4 bg-secondary-600 cursor-pointer rounded border-secondary-400 text-priamry", onChange: handleToggleChange, checked: alreadyFamiliar }), _jsx("label", { htmlFor: "alreadyFamiliar", className: "ml-2 cursor-pointer block text-sm text-primary-text", children: "I'm already familiar with the process." })] }), _jsxs("div", { className: 'flex items-center', children: [(!firstScreen && !alreadyFamiliar) &&
-                                    _jsx(motion.div, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5 }, children: _jsx(IconButton, { onClick: handlePrev, className: 'mr-4 py-3 px-3', icon: _jsx(ArrowLeft, { strokeWidth: "3" }) }) }), _jsx(SubmitButton, { isDisabled: false, isSubmitting: false, onClick: handleConnect, children: carouselFinished ? "Connect" : "Next" })] }), _jsx("div", { className: "pt-2 font-normal text-xs text-secondary-text", children: _jsxs("p", { className: "block font-lighter text-left", children: [_jsx("span", { children: "Even after authorization Layerswap can't initiate a withdrawal without your explicit confirmation.\u00A0" }), _jsx("a", { target: '_blank', href: 'https://docs.layerswap.io/user-docs/connect-a-coinbase-account/', className: 'text-primary-text underline hover:no-underline decoration-white cursor-pointer', children: "Learn more" })] }) })] }) })] }));
-};
-export default Authorize;