@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

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

@@ -0,0 +1,89 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useEffect, useRef } from "react";
+import { useInitialSettings } from "../../../../../../context/settings";
+import useWallet from "../../../../../../hooks/useWallet";
+const depositMethods = [
+    {
+        id: 'wallet',
+        display_name: 'Wallet'
+    },
+    {
+        id: 'deposit_address',
+        display_name: 'Deposit address'
+    }
+];
+const DepositMethodComponent = () => {
+    const { values, setFieldValue, } = useFormikContext();
+    const { depositMethod: defaultDepositMethod, hideDepositMethod } = useInitialSettings();
+    const { from, depositMethod, fromExchange, fromAsset } = values;
+    const { provider } = useWallet(from, 'withdrawal');
+    const name = 'depositMethod';
+    const menuItems = from && GenerateDepositMethodMenuItems(from, depositMethods, provider);
+    const defaultMethod = menuItems?.find(i => i.id === defaultDepositMethod);
+    const menuItemsRef = useRef();
+    menuItemsRef.current = menuItems;
+    useEffect(() => {
+        const first = menuItemsRef.current?.[0]?.id;
+        if (fromExchange) {
+            setFieldValue(name, 'deposit_address', true);
+            return;
+        }
+        else if (defaultMethod) {
+            setFieldValue(name, defaultMethod?.id, true);
+            return;
+        }
+        else if (!(menuItems?.find(i => i.id === depositMethod))) {
+            setFieldValue(name, first, true);
+            return;
+        }
+    }, [from, fromExchange, fromAsset]);
+    const hasOptions = Number(menuItems?.length) > 1 && !fromExchange;
+    if (!hasOptions || (defaultMethod && hideDepositMethod))
+        return null;
+    return (_jsx(_Fragment, {})
+    // <div className="relative w-full mb-1">
+    //     <Popover open={showModal} onOpenChange={setShowModal}>
+    //         <PopoverTrigger className="font-semibold text-secondary-text text-xs flex items-center space-x-1 p-2">
+    //             <span> Transfer via </span> <span>{selectedMethod?.toLowerCase()}</span> <motion.div
+    //                 animate={showModal ? "open" : "closed"}
+    //                 variants={variants}
+    //             >
+    //                 <ChevronDown className="w-4 h-4" />
+    //             </motion.div>
+    //         </PopoverTrigger>
+    //         <PopoverContent className='ml-2 mt-1 space-y-1 text-sm p-2 max-w border-none rounded-xl bg-secondary-800 max-w-72 md:max-w-96' align="start">
+    //             <DepositMethod
+    //                 onselect={handleSelect}
+    //                 value="wallet"
+    //                 icon={<WalletIcon
+    //                     strokeWidth={2} className="w-6 h-6" />}
+    //                 description="Connect your wallet and transfer instantly"
+    //                 title="Wallet"
+    //                 selectedValue={depositMethod}
+    //             />
+    //             <DepositMethod
+    //                 onselect={handleSelect}
+    //                 value="deposit_address"
+    //                 icon={<AlignLeft strokeWidth={2} className="w-6 h-6" />}
+    //                 description="Manually transfer to a Deposit Address generated specifically for you"
+    //                 title="Deposit address"
+    //                 selectedValue={depositMethod}
+    //             />
+    //         </PopoverContent>
+    //     </Popover>
+    // </div>
+    );
+};
+const DepositMethod = ({ icon, title, description, selectedValue, value, onselect }) => {
+    const selected = selectedValue === value;
+    return (_jsx("div", { className: `p-3 ${selected ? 'text-primary-text bg-secondary-600' : 'text-secondary-text'} flex rounded-lg cursor-pointer hover:bg-secondary-500`, onClick: () => onselect(value), children: _jsxs("div", { className: "grid grid-cols-9 gap-2 md:gap-0 w-full", children: [_jsx("div", { children: icon }), _jsxs("div", { className: " col-span-8   flex", children: [_jsxs("div", { className: "w-full", children: [_jsx("div", { className: `font-semibold text-base`, children: title }), _jsx("div", { className: "text-secondary-text text-xs", children: description })] }), selected &&
+                            _jsx("div", { className: "flex items-center justify-center", children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }) })] })] }) }));
+};
+function GenerateDepositMethodMenuItems(network, depositMethods, walletProvider) {
+    if (!walletProvider) {
+        return depositMethods.filter(m => m.id === 'deposit_address');
+    }
+    return depositMethods.filter(m => network?.deposit_methods?.some(dm => dm === m.id));
+}
+export default DepositMethodComponent;

package/dist/components/Pages/Swap/Form/FeeDetails/DetailedEstimates.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { QuoteComponentProps } from ".";
+export declare const DetailedEstimates: FC<QuoteComponentProps>;

package/dist/components/Pages/Swap/Form/FeeDetails/DetailedEstimates.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AverageCompletionTime from "../../../../../components/Common/AverageCompletionTime";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../../../../components/shadcn/tooltip";
+import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
+import useSWRGas from "../../../../../lib/gases/useSWRGas";
+import useWallet from "../../../../../hooks/useWallet";
+import GasIcon from '../../../../../components/Icons/GasIcon';
+import Clock from '../../../../../components/Icons/Clock';
+import FeeIcon from "../../../../../components/Icons/FeeIcon";
+import LayerSwapApiClient from '../../../../../lib/apiClients/layerSwapApiClient';
+import useSWRNftBalance from "../../../../../lib/nft/useSWRNftBalance";
+import useSWR from "swr";
+import { resolveTokenUsdPrice } from "../../../../../helpers/tokenHelper";
+import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+import { CupIcon } from "../../../../../components/Icons/CupIcon";
+export const DetailedEstimates = ({ quote: quoteData, isQuoteLoading, destination, destinationAddress, swapValues: values }) => {
+    const { quote, reward } = quoteData || {};
+    const { from, fromAsset, fromExchange } = values;
+    const isCEX = !!fromExchange;
+    const { provider } = useWallet(!isCEX ? values.from : undefined, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { gasData, isGasLoading } = useSWRGas(selectedSourceAccount?.address, from, fromAsset);
+    const shouldCheckNFT = reward?.campaign_type === "for_nft_holders" && reward?.nft_contract_address;
+    const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress || '', destination, reward?.nft_contract_address || '');
+    const apiClient = new LayerSwapApiClient();
+    const { data: campaignsData } = useSWR('/campaigns', apiClient.fetcher);
+    const now = new Date().getTime();
+    const campaign = campaignsData
+        ?.data
+        ?.find(c => c?.network.name === destination?.name
+        && new Date(c?.end_date).getTime() - now > 0);
+    const displayLsFee = quote?.total_fee !== undefined ? truncateDecimals(quote.total_fee, fromAsset?.decimals) : undefined;
+    const currencyName = fromAsset?.symbol || "";
+    const lsFeeAmountInUsd = quote?.total_fee_in_usd;
+    const gasTokenPriceInUsd = resolveTokenUsdPrice(gasData?.token, quote);
+    const gasFeeInUsd = (gasData && gasTokenPriceInUsd) ? gasData.gas * gasTokenPriceInUsd : null;
+    const displayLsFeeInUsd = lsFeeAmountInUsd ? (lsFeeAmountInUsd < 0.01 ? '<$0.01' : `$${lsFeeAmountInUsd?.toFixed(2)}`) : null;
+    const displayGasFeeInUsd = gasFeeInUsd ? (gasFeeInUsd < 0.01 ? '<$0.01' : `$${gasFeeInUsd?.toFixed(2)}`) : null;
+    return _jsx("div", { className: "flex flex-col w-full divide-y divide-secondary-400 px-3 pt-1", children: detailsElements.map((item) => {
+            const showElement = item.showCondition ? item.showCondition({ gasFeeInUsd, shouldCheckNFT, isLoading, error, nftBalance, campaign, reward, destinationAddress }) : true;
+            if (!showElement)
+                return null;
+            return (_jsxs("div", { className: "flex items-center w-full justify-between gap-1 py-3 px-2 text-sm", children: [_jsxs("div", { className: "inline-flex items-center text-left text-secondary-text gap-1 pr-4", children: [_jsx("div", { className: "w-5", children: _jsx(item.icon, { className: "text-secondary-text" }) }), _jsx("label", { children: item.name })] }), _jsx("div", { className: "text-right text-primary-text", children: item.content({ gas: gasData?.gas, currencyName, nativeCurrencyName: gasData?.token?.symbol, displayGasFeeInUsd, quote, displayLsFee, displayLsFeeInUsd, isGasLoading, isQuoteLoading, reward }) })] }, item.name));
+        }) });
+};
+const LoadingBar = () => (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-xs animate-pulse' }));
+const RewardIcon = () => (_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }));
+const detailsElements = [
+    {
+        name: 'Gas Fee',
+        icon: GasIcon,
+        showCondition: (props) => { return props.gasFeeInUsd !== null && props.gasFeeInUsd !== undefined; },
+        content: ({ gas, nativeCurrencyName, displayGasFeeInUsd, isGasLoading }) => {
+            return isGasLoading ? (_jsx(LoadingBar, {})) : _jsx("div", { children: _jsxs(Tooltip, { delayDuration: 100, children: [_jsx(TooltipTrigger, { asChild: true, children: gas !== undefined && (_jsx("span", { className: "text-sm ml-1 font-small", children: displayGasFeeInUsd })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-secondary-300 !text-primart-text", children: [_jsxs("span", { children: [gas || '-', " "] }), _jsx("span", { children: gas ? nativeCurrencyName : '' })] })] }) });
+        }
+    },
+    {
+        name: 'Layerswap Fee',
+        icon: FeeIcon,
+        content: ({ displayLsFeeInUsd, displayLsFee, currencyName, isQuoteLoading }) => {
+            return isQuoteLoading ? (_jsx(LoadingBar, {})) : _jsx("div", { children: _jsxs(Tooltip, { delayDuration: 100, children: [_jsx(TooltipTrigger, { asChild: true, children: displayLsFeeInUsd !== undefined && (_jsx("span", { className: "text-sm ml-1 font-small", children: displayLsFeeInUsd })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-secondary-300 !text-primart-text", children: [_jsxs("span", { children: [displayLsFee || '-', " "] }), _jsx("span", { children: displayLsFee ? currencyName : '' })] })] }) });
+        }
+    },
+    {
+        name: 'Estimated time',
+        icon: Clock,
+        content: ({ quote }) => {
+            return quote && quote.avg_completion_time !== '00:00:00' ?
+                _jsx("div", { children: _jsx(AverageCompletionTime, { avgCompletionTime: quote.avg_completion_time }) })
+                : (_jsx(LoadingBar, {}));
+        }
+    },
+    {
+        name: 'Reward',
+        icon: RewardIcon,
+        showCondition: (props) => {
+            const { campaign, reward, destinationAddress, shouldCheckNFT, isLoading, error, nftBalance } = props || {};
+            if (!campaign || !reward || !destinationAddress)
+                return false;
+            if (shouldCheckNFT && (isLoading || error || nftBalance === undefined || nftBalance <= 0))
+                return false;
+            return true;
+        },
+        content: ({ reward }) => {
+            return !reward ? (_jsx(LoadingBar, {})) : _jsx("div", { children: _jsxs(Tooltip, { delayDuration: 100, children: [_jsx(TooltipTrigger, { asChild: true, children: reward?.amount_in_usd !== undefined && (_jsxs("span", { className: "text-sm ml-1 font-small", children: ["$", reward.amount_in_usd.toFixed(2)] })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-secondary-300 !text-primart-text", children: [_jsxs("span", { children: [reward?.amount || '-', " "] }), _jsx("span", { children: reward?.amount ? reward.token.symbol : '' })] })] }) });
+        }
+    }
+];

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

@@ -1,12 +1,10 @@
 import { FC } from "react";
 import { Token } from "../../../../../Models/Network";
-import { Quote } from "../../../../../lib/layerSwapApiClient";
+import { Quote } from "../../../../../lib/apiClients/layerSwapApiClient";
 type WillReceiveProps = {
     destination_token: Token | undefined;
     source_token: Token | undefined;
-    refuel: boolean;
     fee: Quote | undefined;
-    onButtonClick: () => void;
     isFeeLoading: boolean;
 };
 export declare const ReceiveAmounts: FC<WillReceiveProps>;

package/dist/components/Pages/Swap/Form/FeeDetails/ReceiveAmounts.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
+import { resolveTokenUsdPrice } from "../../../../../helpers/tokenHelper";
+export const ReceiveAmounts = ({ source_token, destination_token, fee, isFeeLoading }) => {
+    const receive_amount = fee?.quote.receive_amount;
+    const parsedReceiveAmount = truncateDecimals(receive_amount ?? 0, destination_token?.precision);
+    const receiveTokenPriceInUsd = resolveTokenUsdPrice(destination_token, fee?.quote);
+    const receiveAmountInUsd = receive_amount && receiveTokenPriceInUsd ? (receive_amount * receiveTokenPriceInUsd).toFixed(2) : undefined;
+    return _jsx("div", { className: "w-full h-full mt-3", children: _jsxs("div", { className: "flex flex-col justify-between w-full px-2 pb-2", children: [_jsx("span", { className: "block font-normal text-secondary-text text-base leading-5", children: "You will receive" }), isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-xs animate-pulse self-center' })) :
+                    _jsx("div", { className: "flex", children: source_token && destination_token && Number(parsedReceiveAmount) > 0 ?
+                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("p", { className: "text-primary-text text-base leading-5 mt-2.5 font-medium", children: [_jsx(_Fragment, { children: parsedReceiveAmount }), "\u00A0", _jsx("span", { children: destination_token?.symbol }), receiveAmountInUsd !== undefined && Number(receiveAmountInUsd) > 0 &&
+                                            _jsxs("span", { className: "text-secondary-text text-sm font-medium ml-2", children: ["$", receiveAmountInUsd] })] }) })
+                            : '-' })] }) });
+};

package/dist/components/Pages/Swap/Form/FeeDetails/Refuel.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { useQuoteData } from "../../../../../hooks/useFee";
+type RefuelProps = {
+    onButtonClick: () => void;
+    quote: ReturnType<typeof useQuoteData>['quote'];
+    minAllowedAmount: ReturnType<typeof useQuoteData>['minAllowedAmount'];
+};
+declare const RefuelToggle: FC<RefuelProps>;
+export default RefuelToggle;

package/dist/components/Pages/Swap/Form/FeeDetails/Refuel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useEffect, useRef } from "react";
+import { Info } from "lucide-react";
+import clsx from "clsx";
+import { useBalance } from "../../../../../lib/balances/useBalance";
+import { isValidAddress } from "../../../../../lib/address/validator";
+import ToggleButton from "../../../../../components/Buttons/toggleButton";
+const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
+    const { values, setFieldValue } = useFormikContext();
+    const { toAsset: toCurrency, to, destination_address, refuel, amount } = values;
+    const { balances } = useBalance(destination_address, to);
+    const destinationNativeBalance = destination_address && balances?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name));
+    const needRefuel = toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to) && destinationNativeBalance && destinationNativeBalance?.amount == 0;
+    const previouslySelectedDestination = useRef(to);
+    useEffect(() => {
+        if (to && previouslySelectedDestination.current !== to && !!refuel) {
+            setFieldValue('refuel', false);
+        }
+        previouslySelectedDestination.current = to;
+    }, [to, destination_address, toCurrency]);
+    const handleConfirmToggleChange = (value) => {
+        setFieldValue('refuel', value);
+    };
+    const showRefuel = needRefuel && (quote || Number(amount) === Number(minAllowedAmount) || refuel);
+    return (showRefuel &&
+        _jsx("div", { className: clsx("gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 border border-transparent transition-colors duration-200 rounded-2xl", {
+                "!border-primary": needRefuel && !refuel
+            }), children: _jsxs("div", { className: "flex justify-between w-full text-secondary-text ", children: [_jsxs("button", { className: "space-y-1 mt-1 mb-0.5", type: "button", onClick: () => onButtonClick(), children: [_jsxs("div", { className: "flex items-center text-base space-x-1", children: [_jsx("p", { className: "leading-4", children: "Refuel" }), _jsx("div", { className: "p-0.5", children: _jsx(Info, { className: "h-3 w-3 text-secondary-text hover:text-primary-text", "aria-hidden": "true", strokeWidth: 2.5 }) })] }), needRefuel && !refuel &&
+                                _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You need gas on" }), " ", _jsx("span", { children: to.display_name })] }), refuel && quote &&
+                                _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get " }), quote?.refuel ? _jsxs("span", { children: ["~$", quote.refuel.amount_in_usd] }) : _jsx("span", { className: "w-5 h-3 rounded animate-pulse bg-secondary-200 text-transparent", children: "token" }), " ", _jsx("span", { children: "in" }), " ", _jsx("span", { children: to?.display_name }), " ", _jsx("span", { children: "for gas fees" })] }), refuel && !quote &&
+                                _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get" }), " ", _jsx("span", { children: toCurrency.refuel?.token.symbol }), " ", _jsx("span", { children: "for gas fees" })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) }));
+};
+export default RefuelToggle;

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

@@ -1,7 +1,9 @@
 import { Dispatch, FC, SetStateAction } from 'react';
+import { useQuoteData } from '../../../../../hooks/useFee';
 type RefuelModalProps = {
     openModal: boolean;
     setOpenModal: Dispatch<SetStateAction<boolean>>;
+    fee: ReturnType<typeof useQuoteData>['quote'];
 };
 declare const RefuelModal: FC<RefuelModalProps>;
 export default RefuelModal;

package/dist/components/Pages/Swap/Form/FeeDetails/RefuelModal.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Modal from '../../../../../components/Modal/modal';
+import { roundDecimals, truncateDecimals } from '../../../../../components/utils/RoundDecimals';
+import { useFormikContext } from 'formik';
+import { useBalance } from '../../../../../lib/balances/useBalance';
+import GasIcon from '../../../../../components/Icons/GasIcon';
+const RefuelModal = ({ openModal, setOpenModal, fee }) => {
+    const { values, } = useFormikContext();
+    const { to, toAsset: toCurrency, refuel, destination_address } = values || {};
+    const nativeAsset = to?.token;
+    const { balances } = useBalance(destination_address, to);
+    const destNativeTokenBalance = balances?.find(b => b.token === nativeAsset?.symbol && b.network === to?.name);
+    return (_jsx(Modal, { height: "fit", show: openModal, setShow: setOpenModal, modalId: "refuel", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center space-y-3", children: [_jsx("div", { className: "relative z-10 flex items-center justify-center rounded-xl p-3 bg-secondary-500", children: _jsx(GasIcon, { className: "h-[52px] w-[52px] text-primary-200", "aria-hidden": "true" }) }), _jsx("p", { className: "text-2xl", children: "About Refuel" }), _jsx("p", { className: "text-secondary-text max-w-sm", children: fee && refuel ?
+                        _jsx(_Fragment, { children: _jsxs("span", { children: [_jsx("span", { children: "We'll convert" }), " ", _jsxs("span", { children: ["$", fee?.refuel?.amount_in_usd] }), " ", _jsx("span", { children: "of your transfer into" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "so you can start using your funds on the destination chain immediately." })] }) })
+                        :
+                            _jsx(_Fragment, { children: _jsxs("span", { children: [_jsx("span", { children: "We'll convert a small portion of your transfer into" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "so you can start using your funds on the destination chain immediately." })] }) }) }), (refuel || destNativeTokenBalance?.amount) ?
+                    _jsxs("div", { className: "flex flex-col space-y-2 w-full bg-secondary-700 overflow-hidden ", children: [destNativeTokenBalance?.amount ?
+                                _jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 rounded-xl", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: "Current balance" }) }), _jsx("p", { className: 'text-end', children: _jsxs("span", { children: [truncateDecimals(destNativeTokenBalance.amount, nativeAsset?.precision), " ", nativeAsset?.symbol] }) })] }) })
+                                :
+                                    null, (toCurrency?.refuel && nativeAsset) ?
+                                _jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 rounded-xl", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: "You will receive" }), _jsx("p", { children: _jsxs("span", { children: [roundDecimals(toCurrency.refuel?.amount, nativeAsset.precision), " ", nativeAsset?.symbol] }) })] }) })
+                                :
+                                    null] }) : null] }) }));
+};
+export default RefuelModal;

package/dist/components/Pages/Swap/Form/FeeDetails/index.d.ts

@@ -0,0 +1,15 @@
+import { Quote } from '../../../../../lib/apiClients/layerSwapApiClient';
+import { Network } from '../../../../../Models/Network';
+import { SwapFormValues } from '../SwapFormValues';
+export interface SwapValues extends Omit<SwapFormValues, 'from' | 'to'> {
+    from?: Network;
+    to?: Network;
+}
+export interface QuoteComponentProps {
+    quote: Quote | undefined;
+    isQuoteLoading?: boolean;
+    swapValues: SwapValues;
+    destination?: Network;
+    destinationAddress?: string;
+}
+export default function QuoteDetails({ swapValues: values, quote: quoteData, isQuoteLoading }: QuoteComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DetailedEstimates } from './DetailedEstimates';
+import ResizablePanel from '../../../../../components/Common/ResizablePanel';
+import { useState } from 'react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../../components/shadcn/accordion';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import AverageCompletionTime from '../../../../../components/Common/AverageCompletionTime';
+import useSWRGas from "../../../../../lib/gases/useSWRGas";
+import useWallet from "../../../../../hooks/useWallet";
+import GasIcon from '../../../../../components/Icons/GasIcon';
+import Clock from '../../../../../components/Icons/Clock';
+import ExchangeGasIcon from '../../../../../components/Icons/ExchangeGasIcon';
+import useSWRNftBalance from '../../../../../lib/nft/useSWRNftBalance';
+import NumberFlow from '@number-flow/react';
+import { resolveTokenUsdPrice } from '../../../../../helpers/tokenHelper';
+import { useSelectedAccount } from '../../../../../context/balanceAccounts';
+import { CupIcon } from '../../../../../components/Icons/CupIcon';
+export default function QuoteDetails({ swapValues: values, quote: quoteData, isQuoteLoading }) {
+    const { toAsset, fromAsset: fromCurrency, destination_address } = values || {};
+    const [isAccordionOpen, setIsAccordionOpen] = useState(false);
+    return (_jsx(_Fragment, { children: quoteData &&
+            _jsx(Accordion, { type: 'single', collapsible: true, className: 'w-full', value: isAccordionOpen ? 'quote' : '', onValueChange: (value) => { setIsAccordionOpen(value === 'quote'); }, children: _jsxs(AccordionItem, { value: 'quote', className: 'bg-secondary-500 rounded-2xl', children: [_jsxs(AccordionTrigger, { className: clsx('p-3.5 pr-5 w-full rounded-2xl flex items-center justify-between transition-colors duration-200 hover:bg-secondary-400', {
+                                'bg-secondary-500': !isAccordionOpen,
+                                'bg-secondary-400': isAccordionOpen,
+                                'animate-pulse-strong': isQuoteLoading && !isAccordionOpen
+                            }), children: [(isAccordionOpen) ?
+                                    _jsx("p", { className: 'text-sm', children: "Details" })
+                                    :
+                                        _jsx(DetailsButton, { quote: quoteData, isQuoteLoading: isQuoteLoading, swapValues: values, destination: values.to, destinationAddress: destination_address }), _jsx(ChevronDown, { className: 'h-3.5 w-3.5 text-secondary-text' })] }), _jsx(AccordionContent, { className: 'rounded-2xl', children: _jsx(ResizablePanel, { children: (quoteData || isQuoteLoading) && fromCurrency && toAsset &&
+                                    _jsx(DetailedEstimates, { quote: quoteData, isQuoteLoading: isQuoteLoading, destination: values.to, swapValues: values, destinationAddress: destination_address }) }) })] }) }) }));
+}
+const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
+    const { quote, reward } = quoteData || {};
+    const isCEX = !!values.fromExchange;
+    const { provider } = useWallet(!isCEX ? values.from : undefined, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { gasData: gasData } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromAsset);
+    const gasTokenPriceInUsd = resolveTokenUsdPrice(gasData?.token, quote);
+    const gasFeeInUsd = (gasData && gasTokenPriceInUsd) ? gasData.gas * gasTokenPriceInUsd : null;
+    const averageCompletionTime = quote?.avg_completion_time;
+    const shouldCheckNFT = reward?.campaign_type === "for_nft_holders" && reward?.nft_contract_address;
+    const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress || '', destination, reward?.nft_contract_address || '');
+    return (_jsxs("div", { className: 'flex items-center space-x-4', children: [gasFeeInUsd &&
+                _jsxs("div", { className: clsx("inline-flex items-center gap-1", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: !values.fromExchange ?
+                                _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, format: { style: 'currency', currency: 'USD' }, prefix: gasFeeInUsd < 0.01 ? '<' : undefined }), _jsx("div", { className: "ml-3 w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }), averageCompletionTime &&
+                _jsx(_Fragment, { children: _jsxs("div", { className: clsx("text-right inline-flex items-center gap-1 text-sm", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: _jsx(Clock, { className: 'h-4 w-4 text-secondary-text' }) }), _jsx(AverageCompletionTime, { className: "text-primary-text", avgCompletionTime: quote.avg_completion_time })] }) }), reward &&
+                (!shouldCheckNFT || (!isLoading && !error && nftBalance !== undefined && nftBalance > 0)) &&
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1 pr-4', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, format: { style: 'currency', currency: 'USD' }, prefix: reward?.amount_in_usd < 0.01 ? '<' : undefined })] })] })] }));
+};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SwapDataProvider } from "../../../../context/swap";
+import { useMemo } from "react";
+import { NetworkExchangeTabs, Tabs, TabsContent } from "./NetworkExchangeTabs";
+import NetworkForm from "./NetworkForm";
+import ExchangeForm from "./ExchangeForm";
+import { BalanceAccountsProvider } from "../../../../context/balanceAccounts";
+import FormWrapper from "./FormWrapper";
+import { Widget } from "../../../../components/Widget/Index";
+import { ValidationProvider } from "../../../../context/validationContext";
+import { useInitialSettings } from "../../../../context/settings";
+import { useSettingsState } from "../../../../context/settings";
+export default function Form({ formValues }) {
+    const { from } = useInitialSettings();
+    const { sourceExchanges } = useSettingsState();
+    const defaultTab = useMemo(() => {
+        return defaultTabResolver({ from, sourceExchanges });
+    }, [from, sourceExchanges]);
+    return _jsx(BalanceAccountsProvider, { children: _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx("div", { className: "hidden sm:block", children: _jsx(NetworkExchangeTabs, {}) }), _jsx(TabsContent, { value: "cross-chain", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "cross-chain", children: _jsx(Widget, { contextualMenu: _jsx("div", { className: "block sm:hidden", children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(NetworkForm, {}) }) }) }) }) }), _jsx(TabsContent, { value: "exchange", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "exchange", children: _jsx(Widget, { contextualMenu: _jsx("div", { className: "block sm:hidden", children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, {}) }) }) }) }) })] }) });
+}
+const defaultTabResolver = ({ from, sourceExchanges }) => {
+    if (from) {
+        const isCex = sourceExchanges.some(exchange => exchange.name === from);
+        if (isCex) {
+            return "exchange";
+        }
+    }
+    return "cross-chain";
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+export default function FormWrapper({ children, type }: {
+    children?: React.ReactNode;
+    type: 'cross-chain' | 'exchange';
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Formik } from "formik";
+import { useCallback, useRef, useState } from "react";
+import { useSettingsState } from "../../../../context/settings";
+import { useSwapDataState, useSwapDataUpdate } from "../../../../context/swap";
+import ConnectNetwork from "../../../../components/Pages/Swap/Form/SecondaryComponents/ConnectNetwork";
+import toast from "react-hot-toast";
+import { generateSwapInitialValues, generateSwapInitialValuesFromSwap } from "../../../../lib/generateSwapInitialValues";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import Modal from "../../../../components/Modal/modal";
+import useSWR from "swr";
+import { LSAPIKnownErrorCode } from "../../../../Models/ApiError";
+import { useInitialSettings } from "../../../../context/settings";
+import useWallet from "../../../../hooks/useWallet";
+import { useAsyncModal } from "../../../../context/asyncModal";
+import VaulDrawer from "../../../../components/Modal/vaulModal";
+import { addressFormat } from "../../../../lib/address/formatter";
+import AddressNote from "../../../../components/Input/Address/AddressNote";
+import { useBalance } from "../../../../lib/balances/useBalance";
+import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import SwapDetails from "../Withdraw/SwapDetails";
+import { useSwapCreateCallback, useSwapModalStateChangeCallback } from "../../../../context/callbackProvider";
+export default function FormWrapper({ children, type }) {
+    const formikRef = useRef(null);
+    const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
+    const [isAddressFromQueryConfirmed, setIsAddressFromQueryConfirmed] = useState(false);
+    const [networkToConnect, setNetworkToConnect] = useState();
+    const settings = useSettingsState();
+    const { swapBasicData, swapDetails, swapModalOpen } = useSwapDataState();
+    const sourceNetworkWithTokens = settings.networks.find(n => n.name === swapBasicData?.source_network.name);
+    const { getProvider } = useWallet(sourceNetworkWithTokens, "withdrawal");
+    const [walletWihdrawDone, setWalletWihdrawDone] = useState(false);
+    const { provider } = useWallet(swapBasicData?.source_network, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { mutate: mutateBalances } = useBalance(selectedSourceAccount?.address, sourceNetworkWithTokens);
+    const triggerSwapModalStateChangeCallback = useSwapModalStateChangeCallback();
+    const triggerSwapCreateCallback = useSwapCreateCallback();
+    const { getConfirmation } = useAsyncModal();
+    const initialSettings = useInitialSettings();
+    const { appName, destination_address: destinationAddressFromQuery } = initialSettings;
+    const { createSwap, setSwapId, setSubmitedFormValues, setSwapModalOpen } = useSwapDataUpdate();
+    const layerswapApiClient = new LayerSwapApiClient();
+    const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
+    const partner = appName && partnerData?.data?.client_id?.toLowerCase() === appName?.toLowerCase() ? partnerData?.data : undefined;
+    const handleSubmit = useCallback(async (values) => {
+        const { destination_address, to } = values;
+        setWalletWihdrawDone(false);
+        if (!walletWihdrawDone) {
+            setWalletWihdrawDone(false);
+        }
+        if (to &&
+            destination_address &&
+            destinationAddressFromQuery &&
+            (addressFormat(destinationAddressFromQuery?.toString(), to) === addressFormat(destination_address, to)) &&
+            !isAddressFromQueryConfirmed) {
+            const provider = to && getProvider(to, 'autofil');
+            const isDestAddressConnected = destination_address && provider?.connectedWallets?.some((wallet) => addressFormat(wallet.address, to) === addressFormat(destination_address, to));
+            const confirmed = !isDestAddressConnected ? await getConfirmation({
+                content: _jsx(AddressNote, { partner: partner, values: values }),
+                submitText: 'Confirm address',
+                dismissText: 'Cancel address'
+            }) : true;
+            if (confirmed) {
+                setIsAddressFromQueryConfirmed(true);
+            }
+            else if (!confirmed) {
+                return;
+            }
+        }
+        try {
+            await handleCreateSwap({
+                setSwapId,
+                values,
+                setSubmitedFormValues,
+                query: initialSettings,
+                partner,
+                createSwap: async (...props) => {
+                    const response = await createSwap(...props);
+                    triggerSwapCreateCallback(response);
+                    return response;
+                },
+                setShowSwapModal: handleShowSwapModal,
+                setNetworkToConnect,
+                setShowConnectNetworkModal,
+            });
+        }
+        catch (error) {
+            toast.error(error?.message);
+        }
+    }, [createSwap, initialSettings, partner, swapBasicData, getProvider, settings]);
+    const initialValues = swapBasicData ? generateSwapInitialValuesFromSwap(swapBasicData, swapBasicData.refuel, settings, type)
+        : generateSwapInitialValues(settings, initialSettings, type);
+    const handleShowSwapModal = useCallback((value) => {
+        setSwapModalOpen(value);
+        triggerSwapModalStateChangeCallback(value);
+        if (!value) {
+            if (walletWihdrawDone) {
+                mutateBalances();
+                setWalletWihdrawDone(false);
+                formikRef?.current?.setFieldValue('amount', 0, true);
+            }
+        }
+    }, [swapDetails, walletWihdrawDone, mutateBalances]);
+    const handleWalletWithdrawalSuccess = useCallback(() => {
+        setWalletWihdrawDone(true);
+    }, []);
+    return _jsx(_Fragment, { children: _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, onSubmit: handleSubmit, children: _jsxs(_Fragment, { children: [_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(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "openwithdrawalmodal" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess }) }) }), children] }) }) });
+}
+const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, createSwap, setNetworkToConnect, setShowConnectNetworkModal, setSwapId, setSubmitedFormValues }) => {
+    setSubmitedFormValues(values);
+    if (values.depositMethod == 'wallet') {
+        setSwapId(undefined);
+        setShowSwapModal(true);
+        return;
+    }
+    try {
+        const swap = await createSwap(values, query, partner);
+        setSwapId(swap.swap.id);
+        setShowSwapModal(true);
+    }
+    catch (error) {
+        const data = error?.response?.data?.error;
+        if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
+            throw new Error("You can't transfer to that address. Please double check.");
+        }
+        else if (data?.code === LSAPIKnownErrorCode.INVALID_ADDRESS_ERROR) {
+            throw new 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 (data.metadata.AvailableTransactionAmount) {
+                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromAsset?.symbol} or retry in ${remainingTime}.`);
+            }
+            else {
+                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please retry in ${remainingTime}.`);
+            }
+        }
+        else {
+            throw new Error(data?.message || error?.message);
+        }
+    }
+};

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

@@ -0,0 +1,24 @@
+import { FC, ReactNode, SVGProps } from 'react';
+interface TabsProps {
+    defaultValue: string;
+    children: ReactNode;
+}
+export declare const Tabs: FC<TabsProps>;
+interface TabsListProps {
+    children: ReactNode;
+}
+export declare const TabsList: FC<TabsListProps>;
+interface TabsTriggerProps {
+    value: string;
+    Icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+    label: string;
+    isHovered?: boolean;
+}
+export declare const TabsTrigger: FC<TabsTriggerProps>;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+export declare const TabsContent: FC<TabsContentProps>;
+export declare const NetworkExchangeTabs: () => import("react/jsx-runtime").JSX.Element;
+export {};