@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/components/Pages/SwapHistory/SwapDetailsComponent.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { SwapResponse } from '../../../lib/layerSwapApiClient';
-type Props = {
-    swapResponse: SwapResponse;
-};
-declare const SwapDetails: FC<Props>;
-export default SwapDetails;

package/dist/components/Pages/SwapHistory/SwapDetailsComponent.js

@@ -1,114 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import LayerSwapApiClient, { TransactionType } from '../../../lib/layerSwapApiClient';
-import shortenAddress, { shortenEmail } from '../../utils/ShortenAddress';
-import CopyButton from '../../Buttons/copyButton';
-import StatusIcon from './StatusIcons';
-import { ArrowRight, ExternalLink, Fuel, Info, RefreshCw } from 'lucide-react';
-import isGuid from '../../utils/isGuid';
-import KnownInternalNames from '../../../lib/knownIds';
-import { useQueryState } from '../../../context/query';
-import useSWR from 'swr';
-import { isValidAddress } from '../../../lib/address/validator';
-import { ExtendedAddress } from '../../Input/Address/AddressPicker/AddressWithIcon';
-import { addressFormat } from '../../../lib/address/formatter';
-import { truncateDecimals } from '../../utils/RoundDecimals';
-import calculateDatesDifference from '../../../lib/calculateDatesDifference';
-import { SwapStatus } from '../../../Models/SwapStatus';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../shadcn/accordion';
-import VaulDrawer from '../../Modal/vaulModal';
-import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover';
-const SwapDetails = ({ swapResponse }) => {
-    const [open, setOpen] = useState(false);
-    const { swap, refuel, quote } = swapResponse;
-    const { source_token, destination_token, destination_address, source_network, destination_network, source_exchange, destination_exchange, requested_amount } = swap;
-    const { hideFrom, hideTo, account, appName } = useQueryState();
-    const layerswapApiClient = new LayerSwapApiClient();
-    const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
-    const partner = partnerData?.data;
-    const input_tx_explorer_template = source_network?.transaction_explorer_template;
-    const output_tx_explorer_template = destination_network?.transaction_explorer_template;
-    const swapInputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Input);
-    const swapOutputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Output);
-    const source = (hideFrom && partner && account) ? partner : source_network;
-    const destination = (hideTo && partner && account) ? partner : destination_network;
-    const receive_amount = swapOutputTransaction?.amount ?? quote?.receive_amount;
-    const receiveAmountInUsd = receive_amount ? (destination_token?.price_in_usd * receive_amount).toFixed(2) : undefined;
-    const requestedAmountInUsd = requested_amount && (source_token?.price_in_usd * requested_amount).toFixed(2);
-    const inputTransactionFee = swapInputTransaction?.fee_amount;
-    const inputTransactionFeeInUsd = inputTransactionFee && swapInputTransaction?.fee_token && (swapInputTransaction?.fee_token?.price_in_usd * inputTransactionFee);
-    const displayInputFeeInUsd = inputTransactionFeeInUsd ? (inputTransactionFeeInUsd < 0.01 ? '<$0.01' : `$${inputTransactionFeeInUsd?.toFixed(2)}`) : null;
-    const calculatedFeeAmountInUsd = inputTransactionFeeInUsd ? inputTransactionFeeInUsd + quote?.total_fee_in_usd : quote?.total_fee_in_usd;
-    const displayCalculatedFeeAmountInUsd = calculatedFeeAmountInUsd ? (calculatedFeeAmountInUsd < 0.01 ? '<$0.01' : `$${calculatedFeeAmountInUsd?.toFixed(2)}`) : null;
-    const displayLayerswapFeeInUsd = quote?.total_fee_in_usd ? (quote?.total_fee_in_usd < 0.01 ? '<$0.01' : `$${quote?.total_fee_in_usd?.toFixed(2)}`) : null;
-    const nativeCurrency = refuel?.token;
-    const truncatedRefuelAmount = nativeCurrency && !!refuel ?
-        truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
-    let sourceAccountAddress = undefined;
-    if (hideFrom && account) {
-        sourceAccountAddress = account;
-    }
-    else if (swapInputTransaction?.from) {
-        sourceAccountAddress = swapInputTransaction?.from;
-    }
-    else if (source_network?.name === KnownInternalNames.Exchanges.Coinbase && swap?.exchange_account_connected) {
-        sourceAccountAddress = shortenEmail(swap?.exchange_account_name, 10);
-    }
-    else if (source_exchange) {
-        sourceAccountAddress = "Exchange";
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs(VaulDrawer.Snap, { id: 'item-1', className: 'pb-3 space-y-3', children: [_jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: _jsxs("div", { className: `font-normal flex flex-col w-full relative ${(source_exchange || destination_exchange) ? 'space-y-2' : 'space-y-4'}`, children: [_jsxs("div", { className: 'space-y-1', children: [_jsx("p", { className: 'text-xs font-normal text-secondary-text pl-1', children: "From" }), _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: source_exchange?.logo || source.logo, alt: source_exchange?.display_name || source.display_name, width: 32, height: 32, className: "rounded-md w-11 h-11" }), _jsxs("div", { children: [_jsx("p", { className: "text-secondary-text text-base", children: source_exchange ? source_exchange?.display_name : source?.display_name }), sourceAccountAddress &&
-                                                                    (source_exchange ?
-                                                                        _jsx("p", { className: "text-xs text-secondary-text", children: "Exchange" })
-                                                                        : sourceAccountAddress ?
-                                                                            isValidAddress(sourceAccountAddress, source_network) ?
-                                                                                _jsx("div", { className: "group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(sourceAccountAddress, source_network), network: source_network, addressClassNames: 'text-xs' }) })
-                                                                                :
-                                                                                    _jsx("p", { className: "text-xs text-secondary-text", children: sourceAccountAddress })
-                                                                            :
-                                                                                null)] })] }), _jsxs("div", { className: "flex flex-col items-end", children: [(swapInputTransaction?.amount || requested_amount) &&
-                                                            _jsxs("p", { className: "text-primary-text text-base font-semibold", children: [truncateDecimals(swapInputTransaction?.amount || requested_amount, source_token.precision), " ", source_token.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", swapInputTransaction?.usd_value || requestedAmountInUsd] })] })] })] }), (source_exchange || destination_exchange) &&
-                                    _jsxs("div", { className: 'flex flex-row space-x-2', children: [_jsxs("div", { className: 'flex flex-col gap-1 justify-start items-center w-fit ml-2.5', children: [_jsx("div", { className: "w-0.5 h-2.5 bg-[#d9d9d9] rounded-xs" }), _jsx("img", { src: source_exchange ? source_network?.logo : destination_network?.logo, alt: source_exchange ? source_network?.display_name : destination_network?.display_name, width: 24, height: 24, className: "rounded-md w-6 h-6" }), _jsx("div", { className: "w-0.5 h-2.5 bg-[#d9d9d9] rounded-xs" })] }), _jsx("span", { className: 'text-secondary-text text-sm self-center', children: source_exchange ? source_network?.display_name : destination_network?.display_name })] }), _jsxs("div", { className: 'space-y-1', children: [_jsx("p", { className: 'text-xs font-normal text-secondary-text pl-1', children: "To" }), _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: destination_exchange?.logo || destination.logo, alt: destination_exchange?.display_name || destination.display_name, width: 32, height: 32, className: "rounded-md w-11 h-11" }), _jsxs("div", { className: "group/addressItem text-sm text-secondary-text", children: [_jsx("p", { className: "text-secondary-text text-base", children: destination_exchange ? destination_exchange?.display_name : destination?.display_name }), destination_exchange ?
-                                                                    _jsx("p", { className: "text-xs text-secondary-text", children: "Exchange" })
-                                                                    :
-                                                                        _jsx(ExtendedAddress, { address: addressFormat(destination_address, destination_network), network: destination_network, addressClassNames: 'text-xs' })] })] }), receive_amount != undefined ?
-                                                    _jsxs("div", { className: "flex flex-col justify-end", children: [_jsxs("p", { className: "text-primary-text text-base font-semibold", children: [truncateDecimals(receive_amount, destination_token.precision), " ", destination_token.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", receiveAmountInUsd] })] })
-                                                    :
-                                                        _jsx(_Fragment, { children: "-" })] })] }), refuel && _jsx("div", { className: ' bg-secondary-700 rounded-xl py-1.5', children: _jsxs("div", { className: "flex justify-between items-center text-sm font-normal", children: [_jsxs("div", { className: 'inline-flex items-center text-primary-text gap-2', children: [_jsx(Fuel, { className: 'h-4 w-4' }), _jsx("p", { className: "text-left", children: "Refuel" })] }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onClick: () => setOpen(!open), children: _jsx("div", { className: "flex flex-col items-end cursor-pointer", children: _jsxs("div", { className: "flex items-center gap-1 text-primary-buttonTextColor", children: [_jsx(Info, { className: "h-3.5 w-3.5" }), _jsxs("p", { className: "text-primary-text text-sm font-normal", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] })] }) }) }), _jsx(PopoverContent, { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), side: "top", className: "w-auto", align: 'end', alignOffset: -20, children: _jsxs("div", { className: "flex flex-col gap-2 justify-start text-sm font-normal", children: [_jsx("p", { className: "text-secondary-text", children: "Conversion rate" }), _jsxs("div", { className: "inline-flex gap-2 items-center text-primary-text", children: [_jsxs("p", { children: [quote.refuel_in_source, " ", source_token.symbol] }), _jsx(ArrowRight, { className: "h-4 w-4" }), _jsxs("p", { children: [refuel.amount, " ", refuel.token.symbol] })] })] }) })] })] }) })] }) }), _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: (inputTransactionFeeInUsd && !source_exchange) ?
-                            _jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: "item-1", children: [_jsx(AccordionTrigger, { className: 'w-full', children: _jsxs("div", { className: "flex justify-between items-baseline text-sm w-full mr-1", children: [_jsx("span", { className: "text-left", children: "Fees" }), _jsx("span", { className: 'font-semibold text-primary-text', children: displayCalculatedFeeAmountInUsd })] }) }), _jsx(AccordionContent, { children: _jsxs("div", { className: 'flex flex-col gap-3 mt-4', children: [_jsxs("div", { className: "flex justify-between items-baseline text-sm", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Layerswap Fee" }), _jsxs("div", { className: "flex flex-col items-end justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [swapResponse?.quote.total_fee?.toFixed(source_token?.precision), " ", source_token?.symbol] }), _jsx("p", { className: "text-secondary-text text-xs flex justify-end", children: displayLayerswapFeeInUsd })] })] }), _jsxs("div", { className: "flex justify-between items-baseline text-sm", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Gas Fee" }), _jsxs("div", { className: "flex flex-col items-end justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [inputTransactionFee?.toFixed(swapInputTransaction?.fee_token?.precision), " ", swapInputTransaction?.fee_token?.symbol] }), _jsx("p", { className: "text-secondary-text text-xs flex justify-end", children: displayInputFeeInUsd })] })] })] }) })] }) })
-                            :
-                                _jsxs("div", { className: "flex justify-between items-baseline text-sm w-full", children: [_jsx("p", { className: "text-left", children: "Fees" }), _jsxs("div", { className: "flex flex-col justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [swapResponse?.quote.total_fee?.toFixed(source_token?.precision), " ", source_token?.symbol] }), _jsxs("p", { className: "text-secondary-text text-xs flex justify-end", children: ["$", quote.total_fee_in_usd] })] })] }) }), _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-center text-sm text-primary-text", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Swap Id" }), _jsx(CopyButton, { toCopy: swap?.id, iconClassName: 'order-2 ml-1', children: shortenAddress(swap?.id) })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Date & Time" }), _jsx("span", { className: 'text-primary-text', children: (new Date(swap.created_date)).toLocaleString() })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Completion Time" }), _jsx("span", { className: 'text-primary-text', children: (swapInputTransaction?.timestamp && swapOutputTransaction?.timestamp) ?
-                                                calculateDatesDifference(swapInputTransaction?.timestamp, swapOutputTransaction?.timestamp)
-                                                :
-                                                    '-' })] }), _jsxs("div", { className: "flex justify-between p items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Status " }), _jsx("span", { className: "text-primary-text", children: _jsx(StatusIcon, { swap: swap }) })] })] }) })] }), _jsx(VaulDrawer.Snap, { className: 'pb-3', id: 'item-2', children: _jsxs("div", { className: 'flex flex-col justify-between w-full h-full gap-3', children: [_jsx("div", { className: 'space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl text-primary-text', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Source transaction" }), swapInputTransaction?.transaction_hash ?
-                                                    _jsxs("a", { target: "_blank", href: input_tx_explorer_template?.replace("{0}", swapInputTransaction.transaction_hash), className: 'flex items-center space-x-1', children: [_jsx("span", { children: shortenAddress(swapInputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] })
-                                                    :
-                                                        _jsx("span", { children: "-" })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Destination transaction" }), swapOutputTransaction?.transaction_hash ?
-                                                    ((swapOutputTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(swapOutputTransaction?.transaction_hash))) ?
-                                                        _jsx("span", { children: _jsx(CopyButton, { toCopy: swapOutputTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(swapOutputTransaction.transaction_hash) }) })
-                                                        :
-                                                            _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", swapOutputTransaction.transaction_hash), className: 'flex items-center space-x-1', children: [_jsx("span", { children: shortenAddress(swapOutputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
-                                                    :
-                                                        _jsx("span", { children: "-" })] })] }) }) }), swap.status === SwapStatus.Completed &&
-                            _jsxs("button", { type: 'button', 
-                                // onClick={() => router.push({
-                                //     pathname: `/`,
-                                //     query: {
-                                //         amount: requested_amount,
-                                //         destAddress: destination_address,
-                                //         from: source_network?.name,
-                                //         to: destination_network?.name,
-                                //         fromAsset: source_token.symbol,
-                                //         toAsset: destination_token.symbol,
-                                //         ...resolvePersistantQueryParams(router.query),
-                                //     }
-                                // }, undefined, { shallow: false })}
-                                className: 'w-full inline-flex items-center gap-2 justify-center py-2.5 px-3 text-xl font-semibold bg-primary-text-placeholder hover:opacity-90 duration-200 active:opacity-80 transition-opacity rounded-lg text-secondary-950', children: [_jsx(RefreshCw, { className: 'h-6 w-6' }), _jsx("p", { children: "Repeat Swap" })] }), (swap.status !== SwapStatus.Completed && swap.status !== SwapStatus.Expired && swap.status !== SwapStatus.Failed) &&
-                            _jsx("button", { type: 'button', 
-                                // onClick={() => router.push({
-                                //     pathname: `/swap/${swap.id}`,
-                                //     query: resolvePersistantQueryParams(router.query),
-                                // }, undefined, { shallow: false })}
-                                className: 'w-full inline-flex items-center gap-2 justify-center py-2.5 px-3 text-xl font-semibold bg-primary hover:opacity-90 duration-200 active:opacity-80 transition-opacity rounded-lg text-primary-text', children: _jsx("p", { children: swap.status == SwapStatus.LsTransferPending ? "View Swap" : "Complete Swap" }) })] }) })] }));
-};
-export default SwapDetails;

package/dist/components/Pages/SwapHistory/index.d.ts

@@ -1,3 +0,0 @@
-import { LayerswapContextProps } from "../../../context/LayerswapProvider";
-import { FC } from "react";
-export declare const TransactionsHistory: FC<LayerswapContextProps>;

package/dist/components/Pages/SwapHistory/index.js

@@ -1,9 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Content from "./History";
-import Header from "./Header";
-import { LayerswapProvider } from "../../../context/LayerswapProvider";
-import { SwapDataProvider } from "../../../context/swap";
-export const TransactionsHistory = ({ settings, themeData, apiKey }) => {
-    return (_jsx(LayerswapProvider, { apiKey: apiKey, integrator: "experimental", settings: settings, themeData: themeData, children: _jsx(SwapDataProvider, { children: _jsxs("div", { id: "widget", className: 'bg-secondary-900 sm:shadow-card sm:relative rounded-lg w-full text-primary-text overflow-y-auto sm:overflow-hidden max-h-screen h-full sm:h-[650px]', children: [_jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 pb-4", children: [_jsx(Header, {}), _jsx("div", { className: "px-6 h-full overflow-y-auto styled-scroll max-h-[80vh]", id: 'virtualListContainer', children: _jsx(Content, {}) })] }), _jsx("div", { id: "widget_root" })] }) }) }));
-};

package/dist/components/Pages/SwapPages/Form/FeeDetails/Campaign.d.ts

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { QuoteReward } from "../../../../../lib/layerSwapApiClient";
-import { Network } from "../../../../../Models/Network";
-type CampaignProps = {
-    destination: Network;
-    reward: QuoteReward | undefined;
-    destinationAddress?: string;
-};
-declare const Comp: FC<CampaignProps>;
-export default Comp;

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

@@ -1,31 +0,0 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useSWR from "swr";
-import FeeDetails from "./FeeDetailsComponent";
-import LayerSwapApiClient from "../../../../../lib/layerSwapApiClient";
-import useSWRNftBalance from "../../../../../lib/nft/useSWRNftBalance";
-import ClickTooltip from "../../../../Common/ClickTooltip";
-const Comp = ({ destination, reward, destinationAddress }) => {
-    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);
-    if (!campaign || !reward || !destinationAddress)
-        return _jsx(_Fragment, {});
-    return _jsx(CampaignDisplay, { campaign: campaign, reward: reward, destinationAddress: destinationAddress, destination: destination });
-};
-const CampaignDisplay = ({ campaign, reward, destinationAddress, destination }) => {
-    const token = campaign.token;
-    const shouldCheckNFT = reward.campaign_type === "for_nft_holders" && reward.nft_contract_address;
-    const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress, destination, reward.nft_contract_address || '');
-    if (shouldCheckNFT && (isLoading || error || nftBalance <= 0)) {
-        return null;
-    }
-    return _jsx(FeeDetails.Item, { children: _jsxs("div", { className: 'w-full flex items-center justify-between rounded-b-lg bg-secondary-700 relative text-right', children: [_jsxs("div", { className: 'flex items-center text-primary-buttonTextColor', children: [_jsxs("p", { children: [token?.symbol, " reward"] }), _jsx(ClickTooltip, { text: _jsx("span", { className: "!text-start", children: reward.campaign_type === "for_nft_holders"
-                                    ? "The amount of reward that you'll earn as an NFT holder."
-                                    : "The amount of reward that you'll earn." }) })] }), _jsxs("div", { className: "flex items-center space-x-1 text-secondary-text", children: [_jsx("p", { children: reward.amount }), _jsx("div", { className: "h-5 w-5 relative", children: _jsx("img", { src: token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { children: token?.symbol })] })] }) });
-};
-export default Comp;

package/dist/components/Pages/SwapPages/Form/FeeDetails/DepositMethod/index.d.ts

@@ -1,3 +0,0 @@
-import { FC } from "react";
-declare const DepositMethodComponent: FC;
-export default DepositMethodComponent;

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

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFormikContext } from "formik";
-import { useCallback, useEffect, useRef } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../../../shadcn/popover";
-import WalletIcon from "../../../../../Icons/WalletIcon";
-import { AlignLeft, ChevronDown } from "lucide-react";
-import { motion } from "framer-motion";
-import { useDepositMethod } from "../../../../../../context/depositMethodContext";
-import { useQueryState } from "../../../../../../context/query";
-import KnownInternalNames from "../../../../../../lib/knownIds";
-const variants = {
-    open: { rotate: 180 },
-    closed: { rotate: 0 },
-};
-const depositMethods = [
-    {
-        id: 'wallet',
-        display_name: 'Wallet'
-    },
-    {
-        id: 'deposit_address',
-        display_name: 'Deposit address'
-    }
-];
-const DepositMethodComponent = () => {
-    const { values, setFieldValue, } = useFormikContext();
-    const { setShowModal, showModal } = useDepositMethod();
-    const { depositMethod: defaultDepositMethod, hideDepositMethod, appName } = useQueryState();
-    const { from, depositMethod, fromExchange } = values;
-    const name = 'depositMethod';
-    const menuItems = from && GenerateDepositMethodMenuItems(from, depositMethods, appName);
-    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, appName, fromExchange]);
-    const handleSelect = useCallback((item) => {
-        setFieldValue(name, item, true);
-        setShowModal(false);
-    }, [name, depositMethod, menuItems]);
-    const selectedMethod = menuItems?.find(i => i.id === depositMethod)?.display_name;
-    const hasOptions = Number(menuItems?.length) > 1 && !fromExchange;
-    if (!hasOptions || (defaultMethod && hideDepositMethod))
-        return null;
-    return (_jsx("div", { className: "relative w-full mb-1", children: _jsxs(Popover, { open: showModal, onOpenChange: setShowModal, children: [_jsxs(PopoverTrigger, { className: "font-semibold text-secondary-text text-xs flex items-center space-x-1 p-2", children: [_jsx("span", { children: " Transfer via " }), " ", _jsx("span", { children: selectedMethod?.toLowerCase() }), " ", _jsx(motion.div, { animate: showModal ? "open" : "closed", variants: variants, children: _jsx(ChevronDown, { className: " w-4 h-4 " }) })] }), _jsxs(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", children: [_jsx(DepositMethod, { onselect: handleSelect, value: "wallet", icon: _jsx(WalletIcon, { strokeWidth: 2, className: "w-6 h-6" }), description: "Connect your wallet and transfer instantly", title: "Wallet", selectedValue: depositMethod }), _jsx(DepositMethod, { onselect: handleSelect, value: "deposit_address", icon: _jsx(AlignLeft, { strokeWidth: 2, className: "w-6 h-6" }), description: "Manually transfer to a Deposit Address generated specifically for you", title: "Deposit address", selectedValue: depositMethod })] })] }) }));
-};
-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, appName) {
-    const sourceIsArbitrumOne = network.name?.toUpperCase() === KnownInternalNames.Networks.ArbitrumMainnet?.toUpperCase()
-        || network.name === KnownInternalNames.Networks.ArbitrumGoerli?.toUpperCase();
-    const sourceIsSynquoteArbitrumOne = appName === "ea7df14a1597407f9f755f05e25bab42" && sourceIsArbitrumOne;
-    if (sourceIsSynquoteArbitrumOne) {
-        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/SwapPages/Form/FeeDetails/DetailedEstimates.d.ts

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

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

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useFormikContext } from "formik";
-import { useFee } from "../../../../../context/feeContext";
-import AverageCompletionTime from "../../../../Common/AverageCompletionTime";
-import { truncateDecimals } from "../../../../utils/RoundDecimals";
-const DetailedEstimates = () => {
-    const { values } = useFormikContext();
-    const { fromCurrency } = values;
-    const { fee, isFeeLoading } = useFee();
-    const feeDiscount = fee?.quote?.fee_discount || 0;
-    const feeDiscountInUsd = feeDiscount * (fee?.quote.source_token?.price_in_usd || 0);
-    const fee_amount = fee?.quote.total_fee && fee.quote.total_fee - feeDiscount;
-    const fullFeeAmount = fee?.quote.total_fee || 0;
-    const fullParsedFeeAmount = fullFeeAmount && parseFloat(Number(fullFeeAmount).toFixed(fromCurrency?.precision));
-    const parsedFee = fee && truncateDecimals(Number(fee_amount), fromCurrency?.precision);
-    const currencyName = fromCurrency?.symbol || " ";
-    const feeAmountInUsd = fee?.quote.total_fee_in_usd && (fee?.quote.total_fee_in_usd - feeDiscountInUsd);
-    const displayFeeInUsd = feeAmountInUsd ? (feeAmountInUsd < 0.01 ? '<$0.01' : `$${feeAmountInUsd?.toFixed(2)}`) : null;
-    return _jsxs("div", { className: "flex flex-col w-full gap-2", children: [fee && fee.quote.avg_completion_time !== '00:00:00' ?
-                _jsx("div", { className: "flex justify-between w-full items-center", children: _jsxs("div", { className: "flex items-baseline w-full justify-between gap-1", children: [_jsx("label", { className: "inline-flex items-center text-left text-primary-buttonTextColor", children: "Estimated time" }), _jsx("div", { className: "text-right text-secondary-text", children: _jsx(AverageCompletionTime, { avgCompletionTime: fee.quote.avg_completion_time }) })] }) })
-                :
-                    _jsx(_Fragment, {}), _jsx("div", { className: "flex justify-between w-full items-center", children: _jsxs("div", { className: "flex items-baseline w-full justify-between gap-1", children: [_jsx("label", { className: "inline-flex items-center text-left text-primary-buttonTextColor", children: "Fee" }), _jsx("div", { className: "text-right text-secondary-text ", children: isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-sm animate-pulse' })) : (_jsxs("div", { children: [feeDiscount > 0 ?
-                                        _jsxs("span", { className: "ml-1", children: [_jsxs("span", { className: "line-through", children: [_jsx("span", { children: fullParsedFeeAmount || '-' }), " ", _jsx("span", { children: fee_amount == 0 ? currencyName : '' })] }), _jsxs("span", { className: "ml-1", children: [_jsx("span", { children: fee_amount && fee_amount > 0 ? parsedFee : 'Free' }), " ", _jsx("span", { children: fee_amount && fee_amount > 0 ? currencyName : '' })] })] })
-                                        :
-                                            _jsxs("span", { children: [parsedFee || '-', " "] }), _jsx("span", { children: (parsedFee && !feeDiscount) ? currencyName : '' }), displayFeeInUsd !== undefined && fee_amount ? (_jsxs("span", { className: "text-xs ml-1 font-medium", children: ["(", displayFeeInUsd, ")"] }))
-                                        : null] })) })] }) })] });
-};
-export default DetailedEstimates;

package/dist/components/Pages/SwapPages/Form/FeeDetails/FeeDetailsComponent.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-declare const FeeDetails: {
-    ({ children }: {
-        children: ReactNode;
-    }): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, icon }: FeeDetailsItemProps) => import("react/jsx-runtime").JSX.Element;
-};
-type FeeDetailsItemProps = {
-    children: ReactNode;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    icon?: JSX.Element;
-};
-export default FeeDetails;

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FeeDetails = ({ children }) => {
-    return _jsx("div", { className: "flex flex-col divide-y-2 divide-secondary-900 rounded-lg bg-secondary-700 overflow-hidden text-sm", children: children });
-};
-const Item = (function Item({ children, icon }) {
-    return (_jsxs("div", { className: `gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3`, children: [icon &&
-                _jsx("div", { children: icon }), children] }));
-});
-FeeDetails.Item = Item;
-export default FeeDetails;

package/dist/components/Pages/SwapPages/Form/FeeDetails/ReceiveAmounts.d.ts

@@ -1,13 +0,0 @@
-import { FC } from "react";
-import { Token } from "../../../../../Models/Network";
-import { Quote } from "../../../../../lib/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>;
-export {};

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowRight, Fuel } from "lucide-react";
-import { roundDecimals } from "../../../../utils/RoundDecimals";
-//TODO: remove destination_token prop
-export const ReceiveAmounts = ({ source_token, destination_token, refuel, fee, onButtonClick, isFeeLoading }) => {
-    const receive_amount = fee?.quote.receive_amount;
-    const parsedReceiveAmount = parseFloat(receive_amount?.toFixed(destination_token?.precision) || "");
-    const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
-    return _jsxs("div", { className: "w-full h-full", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { className: "md:font-semibold text-sm text-primary-buttonTextColor leading-8 md:leading-8 flex-1", children: "You will receive" }), isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-sm animate-pulse self-center' })) :
-                        _jsx("div", { className: "text-sm md:text-base flex flex-col items-end", children: source_token && destination_token && parsedReceiveAmount > 0 ?
-                                _jsx("div", { className: "font-semibold md:font-bold text-right leading-8", children: _jsx("div", { className: "flex items-center justify-end", children: _jsxs("p", { children: [_jsx(_Fragment, { children: parsedReceiveAmount }), "\u00A0", _jsx("span", { children: destination_token?.symbol }), receiveAmountInUsd !== undefined && Number(receiveAmountInUsd) > 0 &&
-                                                    _jsxs("span", { className: "text-secondary-text text-xs font-medium ml-1 block md:inline-block", children: ["($", receiveAmountInUsd, ")"] })] }) }) })
-                                : '-' })] }), refuel && fee?.refuel?.amount ?
-                _jsxs("p", { onClick: () => onButtonClick(), className: 'flex cursor-pointer justify-end rounded-md gap-1 items-center text-xs text-primary-buttonTextColor leading-8 md:leading-none font-semibold', children: [_jsxs("span", { children: [(fee?.quote?.refuel_in_source && source_token) ? roundDecimals(fee?.quote?.refuel_in_source, source_token?.precision) : '-', " ", source_token?.symbol] }), _jsx("span", { children: _jsx(ArrowRight, { className: "h-3 w-3" }) }), " ", _jsxs("span", { children: [fee?.refuel?.amount, " ", fee?.refuel?.token?.symbol] }), " ", _jsx("span", { className: "bg-primary/20 p-1 rounded-md", children: _jsx(Fuel, { className: "h-3 w-3 text-primary" }) })] })
-                :
-                    _jsx(_Fragment, {})] });
-};

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

@@ -1,6 +0,0 @@
-import { FC } from "react";
-type RefuelProps = {
-    onButtonClick: () => void;
-};
-declare const RefuelToggle: FC<RefuelProps>;
-export default RefuelToggle;

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

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ToggleButton from "../../../../Buttons/toggleButton";
-import { useFormikContext } from "formik";
-import { useEffect, useRef } from "react";
-import { Info } from "lucide-react";
-import { isValidAddress } from "../../../../../lib/address/validator";
-import ResizablePanel from "../../../../Common/ResizablePanel";
-import useSWRBalance from "../../../../../lib/balances/useSWRBalance";
-const RefuelToggle = ({ onButtonClick }) => {
-    const { values, setFieldValue } = useFormikContext();
-    const { toCurrency, to, destination_address, refuel } = values;
-    const { balance } = useSWRBalance(destination_address, to);
-    const destinationNativeBalance = destination_address && balance?.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 && !refuel;
-    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);
-    };
-    return (_jsx(ResizablePanel, { children: _jsx("div", { className: `gap-4 flex relative items-center outline-none w-full text-primary-text px-3.5 py-2.5 border border-transparent transition-colors duration-200 rounded-t-lg ${needRefuel && ' !border-primary'}`, children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("button", { type: "button", onClick: () => onButtonClick(), children: [_jsxs("div", { className: "font- flex items-center text-sm", children: [_jsx("p", { className: "text-primary-buttonTextColor", children: "Refuel" }), _jsx(Info, { className: "h-3.5 text-secondary-text hover:text-primary-buttonTextColor", "aria-hidden": "true", strokeWidth: 2.5 })] }), needRefuel &&
-                                _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "You need gas on" }), " ", _jsx("span", { children: to.display_name })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) }) }));
-};
-export default RefuelToggle;

package/dist/components/Pages/SwapPages/Form/FeeDetails/RefuelModal.d.ts

@@ -1,7 +0,0 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-type RefuelModalProps = {
-    openModal: boolean;
-    setOpenModal: Dispatch<SetStateAction<boolean>>;
-};
-declare const RefuelModal: FC<RefuelModalProps>;
-export default RefuelModal;

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

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fuel } from 'lucide-react';
-import { roundDecimals, truncateDecimals } from '../../../../utils/RoundDecimals';
-import SubmitButton from '../../../../Buttons/submitButton';
-import SecondaryButton from '../../../../Buttons/secondaryButton';
-import { useFormikContext } from 'formik';
-import { useFee } from '../../../../../context/feeContext';
-import useSWRBalance from '../../../../../lib/balances/useSWRBalance';
-import VaulDrawer from '../../../../Modal/vaulModal';
-const RefuelModal = ({ openModal, setOpenModal }) => {
-    const { values, setFieldValue } = useFormikContext();
-    const { to, toCurrency, refuel, destination_address } = values || {};
-    const { fee } = useFee();
-    const nativeAsset = to?.token;
-    const token_usd_price = fee?.quote?.destination_network?.token?.price_in_usd || nativeAsset?.price_in_usd;
-    const { balance } = useSWRBalance(destination_address, to);
-    const destNativeTokenBalance = balance?.find(b => b.token === nativeAsset?.symbol && b.network === to?.name);
-    const amountInUsd = (destNativeTokenBalance && token_usd_price) ? (destNativeTokenBalance.amount * token_usd_price).toFixed(2) : undefined;
-    const closeModal = () => {
-        setOpenModal(false);
-    };
-    const enabldeRefuel = () => {
-        setFieldValue('refuel', true);
-        setOpenModal(false);
-    };
-    return (_jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, modalId: "refuel", children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "relative z-10 flex h-28 w-28 items-center justify-center rounded-xl p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-16 w-16 text-primary", "aria-hidden": "true" }) }), _jsxs("div", { className: "text-center max-w-72", children: [_jsx("p", { className: "text-2xl", children: "About Refuel" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "You can get a small amount of" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "that can be used for covering gas fees on" }), " ", _jsxs("span", { children: [to?.display_name, "."] })] })] }), (values.refuel || destNativeTokenBalance) &&
-                        _jsxs("div", { className: "flex flex-col divide-y-2 divide-secondary-900 w-full rounded-lg bg-secondary-700 overflow-hidden", children: [destNativeTokenBalance &&
-                                    _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: "Your current balance" }) }), _jsxs("p", { className: 'text-end', children: [_jsxs("span", { children: [truncateDecimals(destNativeTokenBalance.amount, nativeAsset?.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", amountInUsd, ")"] })] })] }) }), toCurrency?.refuel && nativeAsset &&
-                                    _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: "You will receive" }), _jsxs("p", { children: [_jsxs("span", { children: [roundDecimals(toCurrency.refuel?.amount, nativeAsset.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", toCurrency.refuel?.amount_in_usd, ")"] })] })] }) })] }), _jsxs("div", { className: 'flex flex-col gap-3 w-full h-full', children: [!refuel &&
-                                _jsx(SubmitButton, { type: "button", onClick: enabldeRefuel, children: "Enable Refuel" }), _jsx(SecondaryButton, { type: "button", className: 'h-full w-full py-3', onClick: closeModal, children: "Close" })] })] }) }) }));
-};
-export default RefuelModal;

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

@@ -1,4 +0,0 @@
-import { SwapFormValues } from '../SwapFormValues';
-export default function FeeDetailsComponent({ values }: {
-    values: SwapFormValues;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReceiveAmounts } from './ReceiveAmounts';
-import DetailedEstimates from './DetailedEstimates';
-import FeeDetails from './FeeDetailsComponent';
-import { useState } from 'react';
-import DepositMethod from './DepositMethod';
-import Campaign from './Campaign';
-import { useFee } from '../../../../../context/feeContext';
-import { useQueryState } from '../../../../../context/query';
-import ResizablePanel from '../../../../Common/ResizablePanel';
-import RefuelToggle from './Refuel';
-import RefuelModal from './RefuelModal';
-// const RefuelModal = dynamic(() => import("./RefuelModal"), {
-//     loading: () => <></>,
-// });
-// const RefuelToggle = dynamic(() => import("./Refuel"), {
-//     loading: () => <></>,
-// });
-export default function FeeDetailsComponent({ values }) {
-    const { toCurrency, to, refuel, toExchange, from, fromCurrency, amount, destination_address } = values || {};
-    const { fee, isFeeLoading } = useFee();
-    const query = useQueryState();
-    const [openRefuelModal, setOpenRefuelModal] = useState(false);
-    return (_jsxs("span", { className: amount ? 'visible' : 'hidden', children: [_jsxs(ResizablePanel, { children: [from && to && toCurrency && fromCurrency &&
-                        _jsx(DepositMethod, {}), _jsxs(FeeDetails, { children: [toCurrency?.refuel && !query.hideRefuel && !toExchange &&
-                                _jsx(RefuelToggle, { onButtonClick: () => setOpenRefuelModal(true) }), (fee || isFeeLoading) && fromCurrency && toCurrency &&
-                                _jsx(FeeDetails.Item, { children: _jsx(DetailedEstimates, {}) }), values.to &&
-                                values.toCurrency &&
-                                destination_address &&
-                                _jsx(Campaign, { destination: values.to, reward: fee?.reward, destinationAddress: destination_address }), _jsx(FeeDetails.Item, { children: _jsx(ReceiveAmounts, { source_token: fromCurrency, destination_token: toCurrency, refuel: !!refuel, fee: fee, onButtonClick: () => setOpenRefuelModal(true), isFeeLoading: isFeeLoading }) })] })] }), _jsx(RefuelModal, { openModal: openRefuelModal, setOpenModal: setOpenRefuelModal })] }));
-}

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

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