@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Input/Address/AddressPicker/AddressButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddressButton = ({ openAddressModal, children }) => {
+    return _jsx("button", { type: "button", className: "w-full outline-hidden", onClick: openAddressModal, children: children });
+};
+export default AddressButton;

package/dist/esm/components/Input/Address/AddressPicker/AddressWithIcon.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { AddressGroup } from ".";
+import AddressIcon from "../../../../components/Common/AddressIcon";
+import shortenAddress from "../../../../components/utils/ShortenAddress";
+import { History, Copy, Check, ChevronDown, WalletIcon, Pencil, Link2, SquareArrowOutUpRight, Unplug, Info } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../components/shadcn/popover";
+import useCopyClipboard from "../../../../hooks/useCopyClipboard";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../components/shadcn/tooltip";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
+import clsx from "clsx";
+const AddressWithIcon = ({ addressItem, partner, network, balance, onDisconnect }) => {
+    const difference_in_days = addressItem?.date ? Math.round(Math.abs(((new Date()).getTime() - new Date(addressItem.date).getTime()) / (1000 * 3600 * 24))) : undefined;
+    const maxWalletNameWidth = calculateMaxWidth(String(balance?.amount));
+    const descriptions = [
+        {
+            group: AddressGroup.RecentlyUsed,
+            text: (difference_in_days === 0 ?
+                _jsx("p", { children: "Used today" })
+                :
+                    (difference_in_days && difference_in_days > 1 ?
+                        _jsxs("p", { children: [_jsx("span", { children: "Used" }), " ", difference_in_days, " ", _jsx("span", { children: "days ago" })] })
+                        : _jsx("p", { children: "Used yesterday" }))),
+            icon: History
+        },
+        {
+            group: AddressGroup.ManualAdded,
+            text: _jsx("p", { children: "Added Manually" }),
+            icon: Pencil
+        },
+        {
+            group: AddressGroup.ConnectedWallet,
+            text: _jsx("p", { className: `${maxWalletNameWidth} text-ellipsis sm:max-w-full text-nowrap overflow-hidden text-[10px]`, children: addressItem.wallet?.displayName || 'Connected wallet' }),
+            icon: addressItem.wallet?.icon || WalletIcon
+        },
+        {
+            group: AddressGroup.FromQuery,
+            text: _jsxs("p", { children: [_jsx("span", { children: "Autofilled" }), " ", _jsx("span", { children: partner ? `by ${partner.display_name}` : 'from URL' })] }),
+            icon: Link2
+        }
+    ];
+    const itemDescription = descriptions.find(d => d.group === addressItem.group);
+    return (_jsxs("div", { className: "w-full flex items-center justify-between", children: [_jsx("div", { className: "flex bg-secondary-400 text-primary-text items-center justify-center rounded-md h-8 overflow-hidden w-8", children: (partner?.is_wallet && addressItem.group === AddressGroup.FromQuery) ? (partner?.logo && (_jsx(ImageWithFallback, { alt: "Partner logo", className: "rounded-md object-contain", src: partner.logo, width: "36", height: "36" }))) : (_jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: addressItem.address, size: 36 })) }), _jsxs("div", { className: "flex flex-col items-start grow min-w-0 ml-3 text-sm", children: [_jsx("div", { className: "flex w-full min-w-0", children: _jsx(ExtendedAddress, { address: addressItem.address, network: network, showDetails: addressItem.wallet ? true : false, title: addressItem.wallet?.displayName?.split("-")[0], description: addressItem.wallet?.providerName, logo: addressItem.wallet?.icon }) }), _jsx("div", { className: "text-secondary-text w-full min-w-0", children: _jsxs("div", { className: "flex items-center gap-1 text-xs", children: [itemDescription?.icon && (_jsx(itemDescription.icon, { className: "rounded-sm shrink-0 h-3.5 w-3.5" })), itemDescription?.text] }) })] }), balance && (_jsx("div", { className: "shrink-0 text-sm text-secondary-text text-right ml-3", children: balance.amount != undefined && !isNaN(balance.amount) ?
+                    _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: balance.isLoading ?
+                            _jsx("div", { className: 'h-[14px] w-20 inline-flex bg-gray-500 rounded-xs animate-pulse' })
+                            :
+                                _jsxs(_Fragment, { children: [_jsx("span", { children: balance.amount.toLocaleString() }), " ", _jsx("span", { children: balance.symbol })] }) })
+                    :
+                        _jsx(_Fragment, {}) }))] }));
+};
+const calculateMaxWidth = (balance) => {
+    const symbolCount = balance?.length || 0;
+    if (symbolCount <= 6) {
+        return '';
+    }
+    else if (symbolCount <= 12) {
+        return 'max-w-[100px] mr-1';
+    }
+    else {
+        return 'max-w-[50px]';
+    }
+};
+export const ExtendedAddress = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true }) => {
+    const [isCopied, setCopied] = useCopyClipboard();
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    // Resolver for action buttons
+    const getActionButtons = () => {
+        const buttons = [
+            {
+                title: 'Copy',
+                Icon: isCopied ? Check : Copy,
+                onClick: (e) => { e.stopPropagation(); setCopied(address); }
+            },
+            ...(network ? [{
+                    title: 'View',
+                    Icon: SquareArrowOutUpRight,
+                    href: network.account_explorer_template?.replace('{0}', address)
+                }] : []),
+            ...(onDisconnect ? [{
+                    title: 'Disconnect',
+                    Icon: Unplug,
+                    iconClassNames: 'text-red-400',
+                    onClick: (e) => { e.stopPropagation(); setPopoverOpen(false); onDisconnect(); }
+                }] : [])
+        ];
+        const showTitles = buttons.length <= 2;
+        return { buttons, showTitles };
+    };
+    const { buttons, showTitles } = getActionButtons();
+    return (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(Popover, { open: isPopoverOpen, onOpenChange: () => setPopoverOpen(!isPopoverOpen), modal: true, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children ??
+                                        _jsxs("div", { className: "group-hover/addressItem:underline hover:text-secondary-text transition duration-200 no-underline flex gap-1 items-center cursor-pointer", children: [_jsx("p", { className: `${isForCurrency ? "text-xs self-end" : "text-sm"} block font-medium`, children: shortenAddress(address) }), shouldShowChevron ?
+                                                    _jsx(ChevronDown, { className: "invisible group-hover/addressItem:visible h-4 w-4" })
+                                                    : null] }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: isForCurrency ? "View token details" : "View address details" }) })] }) }) }), _jsxs(PopoverContent, { className: "w-auto p-3 min-w-72 flex flex-col gap-3 items-stretch !rounded-2xl !bg-secondary-500", side: "top", avoidCollisions: true, collisionPadding: 8, sticky: "always", children: [showDetails && (title || description) && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3", children: [Logo ?
+                                            typeof Logo == 'string' ? (_jsx(ImageWithFallback, { src: Logo, alt: title || "Token logo", height: "40", width: "40", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain flex-shrink-0 h-10 w-10" })) : (_jsx(Logo, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })) : (_jsx(Info, { className: "w-10 h-10 text-secondary-text flex-shrink-0" })), _jsxs("div", { className: "flex-1 font-medium", children: [title && _jsx("h3", { className: "text-base leading-5 text-primary-text", children: title }), description && _jsx("p", { className: "text-sm leading-[18px] text-secondary-text", children: description })] })] }), _jsx("hr", { className: "border rounded-full border-secondary-400 mt-2" })] })), _jsxs("p", { className: "text-secondary-text text-sm leading-5 font-mono break-all text-left", children: [_jsx("span", { className: "text-primary-text font-medium", children: address.slice(0, 4) }), _jsx("span", { children: address.slice(4, -4) }), _jsx("span", { className: "text-primary-text font-medium", children: address.slice(-4) })] }), _jsx("div", { className: "flex gap-3", children: buttons.map((button) => (_jsx(ActionButton, { showTitle: showTitles, ...button }, button.title))) })] })] }) }));
+};
+const ActionButton = ({ title, Icon, onClick, href, iconClassNames, showTitle = true }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { className: clsx("h-3 w-3", iconClassNames) }), showTitle && _jsx("p", { className: "text-xs whitespace-nowrap", children: title })] }));
+    const buttonClasses = "cursor-pointer text-secondary-text hover:text-primary-text px-2.5 py-2 bg-secondary-300 hover:bg-secondary-400 rounded-lg transition-all duration-200 flex items-center gap-1 flex-1 justify-center";
+    const renderButton = () => {
+        if (href) {
+            return (_jsx("a", { href: href, target: "_blank", className: buttonClasses, rel: "noopener noreferrer", children: children }));
+        }
+        return (_jsx("div", { onClick: onClick, className: buttonClasses, children: children }));
+    };
+    if (showTitle) {
+        return renderButton();
+    }
+    return (_jsxs(Tooltip, { disableHoverableContent: true, open: showTooltip, onOpenChange: setShowTooltip, children: [_jsx(TooltipTrigger, { asChild: true, children: renderButton() }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { children: title }) }, title)] }, title));
+};
+export default AddressWithIcon;

package/dist/esm/components/Input/Address/AddressPicker/ConnectedWallets.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import ResizablePanel from "../../../../components/Common/ResizablePanel";
+import WalletIcon from "../../../../components/Icons/WalletIcon";
+import { WalletItem } from "../../../../components/Wallet/WalletComponents/WalletsList";
+import { useConnectModal } from "../../../../components/Wallet/WalletModal";
+const ConnectedWallets = ({ provider, notCompatibleWallets, onClick, onConnect, destination, destination_address }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [showIncompatibleWallets, setShowIncompatibleWallets] = useState(false);
+    const { connect } = useConnectModal();
+    const connectedWallets = provider.connectedWallets?.filter(wallet => !wallet.isNotAvailable);
+    const handleConnect = async () => {
+        setIsLoading(true);
+        const result = await connect(provider);
+        if (onConnect && result)
+            onConnect(result);
+        setIsLoading(false);
+    };
+    return (notCompatibleWallets?.length || connectedWallets?.length) ? _jsxs("div", { className: "flex flex-col gap-2", children: [connectedWallets && connectedWallets?.length > 0 &&
+                _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-sm font-medium text-secondary-text flex items-center space-x-1", children: [_jsx(WalletIcon, { className: "h-4 w-4 stroke-2", "aria-hidden": "true" }), _jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Connected" }), " ", _jsx("span", { children: connectedWallets.length > 1 ? 'Wallets' : 'Wallet' })] })] }), _jsxs("button", { type: "button", onClick: handleConnect, disabled: isLoading, className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: [isLoading ?
+                                            _jsx(RefreshCw, { className: "h-3 w-auto animate-spin" })
+                                            :
+                                                _jsx(Plus, { className: "h-3 w-auto" }), _jsx("p", { children: "Connect new" })] })] }), connectedWallets.map((wallet, index) => {
+                            return _jsx(WalletItem, { account: wallet, selectable: true, network: destination, onWalletSelect: onClick, selectedAddress: destination_address }, `${index}${wallet.providerName}`);
+                        })] }), notCompatibleWallets.length > 0 &&
+                (notCompatibleWallets.length > 1 ? (_jsx(ResizablePanel, { children: _jsxs("div", { className: "flex flex-col gap-2 pl-2", children: [_jsxs("button", { onClick: () => setShowIncompatibleWallets(!showIncompatibleWallets), disabled: isLoading, type: "button", className: "flex items-center justify-between w-full", children: [_jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Not compatible with" }), " ", _jsx("span", { children: destination.display_name })] }), _jsx("div", { className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: isLoading ? (_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" })) : (_jsxs("div", { className: "space-x-1 flex", children: [notCompatibleWallets?.map((wallet) => (_jsx("div", { className: "inline-flex items-center relative", children: _jsx(wallet.icon, { className: "w-4 h-4 rounded-xs bg-secondary-800" }) }, wallet.address))), _jsx(ChevronDown, { className: `h-5 w-auto ${showIncompatibleWallets ? 'rotate-180' : ''} transition-all duration-200` })] })) })] }), showIncompatibleWallets &&
+                                notCompatibleWallets.map((wallet, index) => (_jsx("div", { className: "group/addressItem w-full rounded-md hover:bg-secondary-700! transition duration-200 opacity-50 cursor-not-allowed", children: _jsx(WalletItem, { account: wallet, selectable: true, network: destination, selectedAddress: undefined, isCompatible: false }) }, `${index}${wallet.address}`)))] }) })) : (_jsxs("div", { className: "relative group/notCompatible w-full rounded-md transition duration-200 opacity-50 cursor-not-allowed", children: [_jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 w-max px-2 py-0.5 text-secondary-text font-medium text-sm rounded-md transition-opacity duration-200 bg-secondary-500 group-hover/notCompatible:opacity-100 opacity-0 max-w-[150px] break-words sm:max-w-none sm:whitespace-nowrap z-20", children: ["Not compatible with ", destination.display_name] }), _jsx("div", { className: "w-full z-10", children: _jsx(WalletItem, { account: notCompatibleWallets[0], selectable: true, network: destination, selectedAddress: undefined, isCompatible: false }) })] })))] })
+        : null;
+};
+export default ConnectedWallets;

package/dist/esm/components/Input/Address/AddressPicker/ManualAddressInput.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Pencil } from "lucide-react";
+import { isValidAddress } from "../../../../lib/address/validator";
+import FilledX from "../../../../components/Icons/FilledX";
+import { AddressGroup } from ".";
+import { addressFormat } from "../../../../lib/address/formatter";
+import AddressWithIcon from "./AddressWithIcon";
+const ManualAddressInput = ({ manualAddress, setManualAddress, setNewAddress, values, name, inputReference, setFieldValue, close, addresses, connectedWallet, partner }) => {
+    const { to: destination } = values || {};
+    const [isFocused, setIsFocused] = useState(false);
+    const placeholder = "Enter address";
+    const handleRemoveNewDepositeAddress = useCallback(async () => {
+        setManualAddress('');
+    }, [setManualAddress]);
+    const handleInputChange = useCallback((e) => {
+        setManualAddress(e.target.value);
+    }, []);
+    const handleSaveNewAddress = () => {
+        if (isValidAddress(manualAddress, destination) && destination) {
+            if (destination) {
+                setNewAddress({ address: manualAddress, networkType: destination.type });
+            }
+            setManualAddress("");
+        }
+        else if (!destination) {
+            setFieldValue('destination_address', manualAddress);
+        }
+        close();
+    };
+    let errorMessage = '';
+    if (manualAddress && !isValidAddress(manualAddress, destination) && values.to?.display_name) {
+        errorMessage = `Enter a valid ${values.to?.display_name} address`;
+    }
+    const addressFromList = destination && addresses?.find(a => addressFormat(a.address, destination) === addressFormat(manualAddress, destination));
+    return (_jsx("div", { className: "text-left", children: _jsxs("div", { className: "flex flex-wrap flex-col md:flex-row items-center", children: [_jsxs("div", { className: "relative flex grow rounded-lg shadow-xs focus-within:ring-0 focus-within:ring-primary focus-within:border-primary w-full lg:w-fit", children: [_jsx("input", { onChange: handleInputChange, value: manualAddress, placeholder: placeholder, autoCorrect: "off", type: "text", name: name, id: name, ref: inputReference, tabIndex: 0, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    handleSaveNewAddress();
+                                }
+                            }, className: 'pr-12 disabled:cursor-not-allowed grow h-12 border border-secondary-800 focus:border-primary leading-4 placeholder:text-primary-text-tertiary/80 focus:placeholder:text-left placeholder:font-normal focus:placeholder:pl-0 placeholder:pl-8 block font-semibold w-full !bg-secondary-500 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-hidden' }), !isFocused && !manualAddress &&
+                            _jsx(Pencil, { className: "h-5 w-5 text-primary-text-tertiary absolute inset-y-0 top-[calc(50%-10px)] left-4" }), manualAddress &&
+                            _jsx("button", { type: "button", className: "absolute top-[calc(50%-10px)] right-4 hover:bg-secondary-400", onClick: handleRemoveNewDepositeAddress, children: _jsx(FilledX, { className: "h-5 w-5" }) })] }), errorMessage &&
+                    _jsx("div", { className: "basis-full w-full text-start text-xs text-primary", children: errorMessage }), manualAddress && !errorMessage &&
+                    _jsx("div", { onClick: handleSaveNewAddress, className: `group/addressItem text-left min-h-12 cursor-pointer space-x-2 bg-secondary-600 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-secondary-700 transition duration-200 p-3 hover:shadow-xl mt-3`, children: _jsx(AddressWithIcon, { addressItem: addressFromList || { address: manualAddress, group: AddressGroup.ManualAdded }, partner: partner, network: destination }) })] }) }));
+};
+export default ManualAddressInput;

package/dist/esm/components/Input/Address/AddressPicker/index.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isValidAddress } from "../../../../lib/address/validator";
+import useWallet from "../../../../hooks/useWallet";
+import { addressFormat } from "../../../../lib/address/formatter";
+import ManualAddressInput from "./ManualAddressInput";
+import Modal from "../../../../components/Modal/modal";
+import ConnectWalletButton from "../../../../components/Common/ConnectWalletButton";
+import AddressBook from "./AddressBook";
+import AddressButton from "./AddressButton";
+import { useInitialSettings } from "../../../../context/settings";
+import ConnectedWallets from "./ConnectedWallets";
+import { useSelectedAccount, useUpdateBalanceAccount } from "../../../../context/balanceAccounts";
+export var AddressGroup;
+(function (AddressGroup) {
+    AddressGroup["ConnectedWallet"] = "Connected wallet";
+    AddressGroup["ManualAdded"] = "Added Manually";
+    AddressGroup["RecentlyUsed"] = "Recently used";
+    AddressGroup["FromQuery"] = "Partner";
+})(AddressGroup || (AddressGroup = {}));
+const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAddressModal, name, canFocus, close, address_book, partner, children }, ref) {
+    const { values, setFieldValue } = useFormikContext();
+    const initialSettings = useInitialSettings();
+    const { destination_address, to: destination } = values;
+    const selectDestinationAccount = useUpdateBalanceAccount("to");
+    const { provider, unAvailableWallets } = useWallet(destination, 'autofil');
+    const connectedWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
+    const defaultAccount = useSelectedAccount("to", values.to?.name);
+    const connectedWalletskey = connectedWallets?.map(w => w.addresses.join('')).join('');
+    const [manualAddress, setManualAddress] = useState('');
+    const [newAddress, setNewAddress] = useState();
+    useEffect(() => {
+        if (destination_address && destination && !isValidAddress(destination_address, destination)) {
+            updateDestAddress('');
+            setManualAddress('');
+        }
+    }, [destination, destination_address]);
+    const inputReference = useRef(null);
+    const groupedAddresses = useMemo(() => {
+        return resolveAddressGroups({
+            address_book,
+            destination,
+            wallets: connectedWallets,
+            newAddress,
+            addressFromQuery: initialSettings.destination_address
+        });
+    }, [address_book, destination, connectedWallets, newAddress, initialSettings.destination_address, connectedWalletskey]);
+    const destinationAddressItem = destination && destination_address ?
+        groupedAddresses?.find(a => a.address.toLowerCase() === destination_address.toLowerCase())
+        : undefined;
+    const addressBookAddresses = groupedAddresses?.filter(a => a.group !== AddressGroup.ConnectedWallet);
+    const connectedWallet = (destination && destination_address) ? connectedWallets?.find(w => w.addresses?.find(a => addressFormat(a, destination) === addressFormat(destination_address, destination))) : undefined;
+    const handleSelectAddress = useCallback((address) => {
+        const selected = destination && groupedAddresses?.find(a => addressFormat(a.address, destination) === addressFormat(address, destination));
+        const formattedAddress = selected?.address;
+        updateDestAddress(formattedAddress);
+        close();
+    }, [close, setFieldValue, groupedAddresses]);
+    const onConnect = (wallet) => {
+        setFieldValue('destination_address', wallet.address);
+        selectDestinationAccount({
+            address: wallet.address,
+            id: wallet.id,
+            providerName: wallet.providerName
+        });
+        close();
+    };
+    useEffect(() => {
+        if (destinationAddressItem && !defaultAccount?.address && destinationAddressItem?.group == AddressGroup.ConnectedWallet) {
+            updateDestAddress(undefined);
+            return;
+        }
+        if (destination_address?.toLowerCase() !== defaultAccount?.address?.toLowerCase() && (!destinationAddressItem || destinationAddressItem?.group === AddressGroup.ConnectedWallet)) {
+            updateDestAddress(defaultAccount?.address);
+            setShowAddressModal(false);
+        }
+    }, [defaultAccount?.address, destinationAddressItem]);
+    const updateDestAddress = useCallback((address) => {
+        const wallet = destination && connectedWallets?.find(w => w.addresses?.find(a => addressFormat(a, destination) === addressFormat(address || '', destination)));
+        setFieldValue('destination_address', address);
+        if (destination && address && provider) {
+            if (wallet)
+                selectDestinationAccount({
+                    address: address,
+                    id: wallet.id,
+                    providerName: wallet.providerName
+                });
+            else
+                selectDestinationAccount({
+                    address: address || "",
+                    id: 'manually_added',
+                    providerName: provider.name,
+                });
+        }
+    }, [destination, connectedWallets, provider, selectDestinationAccount]);
+    useEffect(() => {
+        if (canFocus) {
+            inputReference?.current?.focus();
+        }
+    }, [canFocus]);
+    return (_jsxs(_Fragment, { children: [_jsx(AddressButton, { addressItem: destinationAddressItem, openAddressModal: () => setShowAddressModal(true), connectedWallet: connectedWallet, partner: partner, destination: destination, children: children({ destination, addressItem: destinationAddressItem, connectedWallet: connectedWallet, partner }) }), _jsx(Modal, { header: 'Send To', height: "80%", show: showAddressModal, setShow: setShowAddressModal, modalId: "address", children: _jsx("div", { className: 'w-full flex flex-col justify-between h-full text-primary-text', children: _jsxs("div", { className: 'flex flex-col self-center grow w-full space-y-5 h-full', children: [destination
+                                && provider
+                                && !connectedWallets.length &&
+                                _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, setNewAddress: (props) => { setNewAddress(props); updateDestAddress(props?.address); }, values: values, partner: partner, name: name, inputReference: inputReference, setFieldValue: setFieldValue, close: close, addresses: groupedAddresses, connectedWallet: connectedWallet }), destination
+                                && provider
+                                && !manualAddress &&
+                                _jsx(ConnectedWallets, { provider: provider, notCompatibleWallets: unAvailableWallets, onClick: (props) => handleSelectAddress(props.address), onConnect: onConnect, destination: destination, destination_address: destination_address }), addressBookAddresses && addressBookAddresses?.length > 0 && !manualAddress && destination &&
+                                _jsx(AddressBook, { addressBook: addressBookAddresses, onSelectAddress: handleSelectAddress, destination: destination, destination_address: destination_address, partner: partner })] }) }) })] }));
+});
+const resolveAddressGroups = ({ address_book, destination, wallets, newAddress, addressFromQuery, }) => {
+    if (!destination)
+        return;
+    const filteredAddressBook = address_book?.filter(a => a.networks?.some(n => destination?.name === n) && isValidAddress(a.address, destination)) || [];
+    const recentlyUsedAddresses = filteredAddressBook.map(ra => ({ address: ra.address, date: ra.date, group: AddressGroup.RecentlyUsed, networkType: destination.type }));
+    let addresses = [];
+    wallets?.forEach(wallet => {
+        if (wallet?.addresses?.length) {
+            addresses.push(...(wallet.addresses.map(a => ({ address: a, group: AddressGroup.ConnectedWallet, wallet })) || []));
+        }
+    });
+    if (addressFromQuery && isValidAddress(addressFromQuery, destination)) {
+        addresses.push({ address: addressFromQuery, group: AddressGroup.FromQuery });
+    }
+    if (recentlyUsedAddresses.length > 0) {
+        addresses = [...addresses, ...recentlyUsedAddresses];
+    }
+    if (newAddress?.address && newAddress.networkType === destination?.type) {
+        addresses.push({ address: newAddress.address, group: AddressGroup.ManualAdded });
+    }
+    const uniqueAddresses = addresses.filter((a, index, self) => self.findIndex(t => addressFormat(t.address, destination) === addressFormat(a.address, destination)) === index);
+    return uniqueAddresses;
+};
+export default AddressPicker;

package/dist/esm/components/Input/Address/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import AddressPicker from "./AddressPicker";
+const Address = ({ partner, children }) => {
+    const [showAddressModal, setShowAddressModal] = useState(false);
+    return (_jsx(AddressPicker, { showAddressModal: showAddressModal, setShowAddressModal: setShowAddressModal, close: () => setShowAddressModal(false), name: "destination_address", partner: partner, children: children }));
+};
+export default Address;

package/dist/esm/components/Input/Amount/Balance.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateDecimals } from "../../../components/utils/RoundDecimals";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import InfoIcon from "../../../components/Icons/InfoIcon";
+const Balance = ({ values, direction }) => {
+    const { to, fromAsset: fromCurrency, toAsset: toCurrency, from, destination_address } = values;
+    const selectedSourceAccount = useSelectedAccount("from", from?.name);
+    const token = direction === 'from' ? fromCurrency : toCurrency;
+    const network = direction === 'from' ? from : to;
+    const address = direction === 'from' ? selectedSourceAccount?.address : destination_address;
+    const { balances, isLoading } = useBalance(address, network, { refreshInterval: 20000 });
+    const tokenBalance = balances?.find(b => b?.network === network?.name && b?.token === token?.symbol);
+    const truncatedBalance = tokenBalance?.amount !== undefined ? truncateDecimals(tokenBalance?.amount, token?.precision) : '';
+    if (!isLoading && !(network && token && tokenBalance))
+        return null;
+    return _jsx("div", { className: "min-w-4/5 -top-[1px] p-1 mx-2 relative rounded-b-lg text-center bg-secondary-400 py-0.5 text-xs text-secondary-text leading-[18px] font-normal", children: isLoading ?
+            _jsx("div", { className: 'h-[10px] w-fit px-4 inline-flex bg-gray-500 rounded-xs animate-pulse' })
+            : !truncatedBalance ?
+                _jsxs("div", { className: "flex items-center justify-center gap-1 text-orange-400", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("span", { children: "Network issue" })] })
+                : (network && token && truncatedBalance) ?
+                    ((Number(tokenBalance?.amount) >= 0 && Number(tokenBalance?.amount) < Number(values.amount) && values.depositMethod === 'wallet' && direction == 'from') ?
+                        _jsx(InsufficientBalance, { balance: truncatedBalance })
+                        :
+                            _jsx("span", { children: truncatedBalance }))
+                    : null });
+};
+const InsufficientBalance = ({ balance }) => {
+    return _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1 text-warning-foreground justify-center", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("p", { children: balance })] }) }), _jsx(TooltipContent, { className: "!bg-secondary-400 !border-0 !p-3 !rounded-xl", children: _jsxs("div", { className: "flex items-center gap-2 justify-center", children: [_jsx(InfoIcon, { className: 'w-4 h-4 text-warning-foreground' }), _jsx("p", { className: "text-sm", children: "Insufficient balance" })] }) })] });
+};
+export default Balance;

package/dist/esm/components/Input/Amount/MinMax.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import useSWRGas from "../../../lib/gases/useSWRGas";
+import { useMemo } from "react";
+import { resolveMaxAllowedAmount } from "./helpers";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
+import useWallet from "../../../hooks/useWallet";
+const MinMax = (props) => {
+    const { setFieldValue, values } = useFormikContext();
+    const { fromCurrency, from, limitsMinAmount, limitsMaxAmount, onActionHover, depositMethod } = props;
+    const selectedSourceAccount = useSelectedAccount("from", from?.name);
+    const { wallets } = useWallet(from, 'withdrawal');
+    const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+    const { gasData } = useSWRGas(selectedSourceAccount?.address, from, fromCurrency, values.amount, wallet);
+    const { balances, mutate: mutateBalances } = useBalance(selectedSourceAccount?.address, from);
+    const walletBalance = useMemo(() => {
+        return selectedSourceAccount?.address ? balances?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol) : undefined;
+    }, [selectedSourceAccount?.address, balances, from?.name, fromCurrency?.symbol]);
+    const gasAmount = gasData?.gas || 0;
+    const native_currency = gasData?.token || from?.token;
+    const shouldPayGasWithTheToken = (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
+    let maxAllowedAmount = useMemo(() => {
+        return resolveMaxAllowedAmount({ fromCurrency, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod });
+    }, [fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod]);
+    const handleSetValue = (value) => {
+        mutateBalances();
+        setFieldValue('amount', value, true);
+        onActionHover(undefined);
+    };
+    const handleSetMinAmount = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!limitsMinAmount)
+            throw new Error("Wallet balance is not available");
+        handleSetValue(limitsMinAmount.toString());
+    };
+    const handleSetHalfAmount = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!walletBalance?.amount)
+            throw new Error("Wallet balance is not available");
+        handleSetValue((walletBalance?.amount / 2).toString());
+    };
+    const handleSetMaxAmount = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!maxAllowedAmount)
+            throw new Error("Max amount is not available");
+        handleSetValue(maxAllowedAmount.toString());
+    };
+    const halfOfBalance = (walletBalance?.amount || 0) / 2;
+    const showMaxTooltip = !!(depositMethod === 'wallet' && walletBalance?.amount && shouldPayGasWithTheToken && (!limitsMaxAmount || walletBalance.amount < limitsMaxAmount));
+    return (_jsxs("div", { className: "flex gap-1.5 group text-xs leading-4", onMouseLeave: () => onActionHover(undefined), children: [Number(limitsMinAmount) > 0 ?
+                _jsx(ActionButton, { label: "Min", onMouseEnter: () => onActionHover(limitsMinAmount), onClick: handleSetMinAmount, disabled: !limitsMinAmount })
+                :
+                    null, (depositMethod === 'wallet' && halfOfBalance > 0 && (halfOfBalance < (maxAllowedAmount || Infinity))) ?
+                _jsx(ActionButton, { label: "50%", onMouseEnter: () => onActionHover(halfOfBalance), onClick: handleSetHalfAmount })
+                :
+                    null, Number(maxAllowedAmount) > 0 ?
+                _jsxs(Tooltip, { disableHoverableContent: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(ActionButton, { label: "Max", onMouseEnter: () => onActionHover(maxAllowedAmount), disabled: !maxAllowedAmount, onClick: handleSetMaxAmount }) }) }), showMaxTooltip ? _jsx(TooltipContent, { className: "pointer-events-none w-80 grow p-2 !border-none !bg-secondary-300 text-xs rounded-xl", side: "top", align: "start", alignOffset: -10, children: _jsx("p", { children: "Max is calculated based on your balance minus gas fee for the transaction" }) }) : null] })
+                :
+                    null] }));
+};
+export default MinMax;
+const ActionButton = ({ label, onClick, onMouseEnter, disabled }) => {
+    return (_jsx("button", { onMouseEnter: onMouseEnter, onClick: onClick, typeof: "button", type: "button", disabled: disabled, className: "px-1.5 py-0.5 rounded-md duration-200 break-keep transition bg-secondary-300 hover:bg-secondary-200 text-secondary-text hover:text-primary-buttonTextColor cursor-pointer enabled:active:animate-press-down", children: label }));
+};

package/dist/esm/components/Input/Amount/PriceImpact.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Triangle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import clsx from 'clsx';
+export const PriceImpact = ({ receiveAmount, requestedAmount, sourceTokenPriceUsd, destinationTokenPriceUsd, serviceFee, bridgeFee, className, }) => {
+    const toAmountUSD = useMemo(() => {
+        if (!receiveAmount || !destinationTokenPriceUsd)
+            return undefined;
+        return receiveAmount * destinationTokenPriceUsd;
+    }, [receiveAmount, destinationTokenPriceUsd]);
+    const fromAmountUSD = useMemo(() => {
+        if (!requestedAmount || !sourceTokenPriceUsd)
+            return undefined;
+        return requestedAmount * sourceTokenPriceUsd;
+    }, [requestedAmount, sourceTokenPriceUsd]);
+    const priceImpact = useMemo(() => {
+        if (fromAmountUSD === undefined || toAmountUSD === undefined)
+            return undefined;
+        return (toAmountUSD - fromAmountUSD);
+    }, [fromAmountUSD, toAmountUSD]);
+    const layerswapFees = useMemo(() => {
+        if (serviceFee == null || sourceTokenPriceUsd == null)
+            return undefined;
+        return (serviceFee * sourceTokenPriceUsd);
+    }, [serviceFee, sourceTokenPriceUsd]);
+    const bridgeExpenses = useMemo(() => {
+        if (bridgeFee == null || sourceTokenPriceUsd == null)
+            return undefined;
+        return (bridgeFee * sourceTokenPriceUsd);
+    }, [bridgeFee, sourceTokenPriceUsd]);
+    const marketImpact = useMemo(() => {
+        if (priceImpact === undefined || layerswapFees === undefined || bridgeExpenses === undefined)
+            return undefined;
+        return (priceImpact + Number(layerswapFees) + Number(bridgeExpenses));
+    }, [priceImpact, layerswapFees, bridgeExpenses]);
+    const priceImpactPercentage = useMemo(() => {
+        if (fromAmountUSD === undefined || toAmountUSD === undefined)
+            return undefined;
+        return Number((((toAmountUSD - fromAmountUSD) / fromAmountUSD) * 100).toFixed(2));
+    }, [fromAmountUSD, toAmountUSD]);
+    if (priceImpact === undefined)
+        return null;
+    return (_jsx(_Fragment, { children: _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: clsx("flex text-secondary-text items-center cursor-default hover:text-primary-text", className), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3.5 h-3.5 stroke-1 fill-current transition-transform ${priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpact).toFixed(2)] }), _jsx("span", { children: ")" })] }) }) }), _jsxs(TooltipContent, { arrowClasses: "!bg-secondary-500 !fill-secondary-500", side: "top", align: "center", className: "!bg-secondary-500 !border-secondary-500 !text-secondary-text text-xs font-normal rounded-xl !p-4 shadow-2xl", children: [_jsxs("p", { className: "text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", children: [_jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpact) }), _jsx("span", { className: "text-secondary-text text-xs font-normal", children: priceImpactPercentage ? `(${priceImpact < 0 ? "-" : "+"}${Math.abs(priceImpactPercentage)}%)` : "" })] }), _jsx("p", { children: "This is the difference in total USD value" }), _jsx("p", { children: "between the assets you send and the assets you receive." }), _jsxs("ul", { className: "mt-3 space-y-2 ", children: [_jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Market impact" }), _jsx("span", { className: "text-primary-text", children: _jsx("span", { children: formatCurrency(marketImpact) }) })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Bridge expenses" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(bridgeExpenses)).toFixed(2) })] })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Layerswap fees" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(layerswapFees)).toFixed(2) })] })] })] })] })] }) }));
+};
+const formatCurrency = (value, decimals = 2) => {
+    if (value === undefined || isNaN(value))
+        return "";
+    const rounded = Number(value.toFixed(decimals));
+    // If rounded value is effectively zero, show "$0.00" (no minus sign)
+    // Math.pow(10, -decimals) defines the smallest meaningful value at the precision
+    const epsilon = Math.pow(10, -decimals);
+    if (Math.abs(rounded) < epsilon) {
+        return `$${(0).toFixed(decimals)}`;
+    }
+    return `${rounded < 0 ? "-$" : "+$"}${Math.abs(rounded).toFixed(decimals)}`;
+};

package/dist/esm/components/Input/Amount/ReceiveAmount.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NumberFlow from "@number-flow/react";
+import clsx from "clsx";
+import { PriceImpact } from "./PriceImpact";
+export const ReceiveAmount = ({ source_token, destination_token, fee, isFeeLoading }) => {
+    const receive_amount = fee?.quote.receive_amount;
+    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;
+    const quote = fee?.quote;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text w-full relative truncate", children: [_jsx("div", { className: "flex items-center justify-start w-full relative", children: _jsx("div", { className: clsx("w-full flex items-center py-[3px] pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", bridgeFee: quote?.blockchain_fee, destinationTokenPriceUsd: quote?.destination_token?.price_in_usd, receiveAmount: quote?.receive_amount, requestedAmount: quote?.requested_amount, serviceFee: quote?.service_fee, sourceTokenPriceUsd: quote?.source_token?.price_in_usd })] })] }) }));
+};

package/dist/esm/components/Input/Amount/helpers.js

@@ -0,0 +1,10 @@
+export const resolveMaxAllowedAmount = (props) => {
+    const { limitsMaxAmount, walletBalance, gasAmount, fromCurrency, native_currency, depositMethod } = props;
+    if (!walletBalance || !walletBalance.amount || (limitsMaxAmount && walletBalance.amount > limitsMaxAmount) || depositMethod !== 'wallet')
+        return limitsMaxAmount;
+    const shouldPayGasWithTheToken = (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
+    const payableAmount = walletBalance.amount - gasAmount;
+    if (!shouldPayGasWithTheToken)
+        return walletBalance.amount;
+    return Number(payableAmount.toFixed(fromCurrency?.decimals));
+};

package/dist/esm/components/Input/Amount/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import NumericInput from "../NumericInput";
+import { formatUsd } from "../../../components/utils/formatUsdAmount";
+import clsx from "clsx";
+import { resolveTokenUsdPrice } from "../../../helpers/tokenHelper";
+const AmountField = forwardRef(function AmountField({ usdPosition = "bottom", actionValue, fee, className }, ref) {
+    const { values, handleChange } = useFormikContext();
+    const { fromAsset: fromCurrency, amount, toAsset: toCurrency, fromExchange } = values || {};
+    const name = "amount";
+    const amountRef = useRef(ref);
+    const suffixRef = useRef(null);
+    const sourceCurrencyPriceInUsd = resolveTokenUsdPrice(fromCurrency, fee?.quote);
+    const requestedAmountInUsd = useMemo(() => {
+        const amountNumber = Number(amount);
+        if (isNaN(amountNumber) || amountNumber <= 0 || !sourceCurrencyPriceInUsd)
+            return undefined;
+        return formatUsd(sourceCurrencyPriceInUsd * amountNumber);
+    }, [amount, sourceCurrencyPriceInUsd]);
+    const actionValueInUsd = useMemo(() => {
+        const amountNumber = Number(actionValue);
+        if (isNaN(amountNumber) || amountNumber <= 0 || !sourceCurrencyPriceInUsd)
+            return undefined;
+        return formatUsd(sourceCurrencyPriceInUsd * amountNumber);
+    }, [actionValue, sourceCurrencyPriceInUsd]);
+    useEffect(() => {
+        const input = amountRef.current;
+        const suffix = suffixRef.current;
+        if (!input || !suffix)
+            return;
+        const font = getFontFromElement(input);
+        const width = getTextWidth(actionValue?.toString() || amount || "0", font);
+        suffix.style.left = `${width + 16}px`;
+    }, [amount, requestedAmountInUsd, actionValue]);
+    const placeholder = '0';
+    const step = 1 / Math.pow(10, fromCurrency?.precision || 1);
+    const disabled = Boolean(fromExchange && !toCurrency);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: clsx("flex flex-col bg-secondary-500 space-y-0.5 relative w-full group", className, {
+                'focus-within:[&_.usd-suffix]:invisible': usdPosition === "right"
+            }), children: [_jsx(NumericInput, { disabled: disabled, placeholder: placeholder, step: isNaN(step) ? 0.01 : step, name: name, ref: amountRef, precision: fromCurrency?.precision, tempValue: actionValue, className: "w-full text-[28px] leading-[34px] rounded-xl text-primary-text focus:outline-none focus:border-none focus:ring-0 duration-300 ease-in-out !bg-secondary-500 !font-normal group-[.exchange-amount-field]:px-2.5 group-[.exchange-amount-field]:pb-2 group-[.exchange-amount-field]:pr-2 group-[.exchange-amount-field]:bg-secondary-300! pl-0", onChange: e => {
+                        /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
+                    } }), _jsx("div", { className: clsx("usd-suffix text-base leading-5 font-medium text-secondary-text pointer-events-none", {
+                        "absolute bottom-3": usdPosition === "right",
+                        "h-5": usdPosition !== "right",
+                        "text-secondary-text/45": !!actionValueInUsd
+                    }, "group-hover:block"), ref: suffixRef, children: `${actionValueInUsd ?? requestedAmountInUsd ?? '$0'}` })] }) }));
+});
+export default AmountField;
+function getTextWidth(text = '', font) {
+    if (typeof document === "undefined")
+        return 0;
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context)
+        return 0;
+    context.font = font;
+    return context.measureText(text).width;
+}
+function getFontFromElement(el) {
+    if (!el)
+        return '28px sans-serif';
+    const style = window.getComputedStyle(el);
+    return `${style.fontSize} ${style.fontFamily}`;
+}