@layerswap/widget 1.0.5 → 1.1.0

package/dist/esm/Models/LayerSwapSettings.js

@@ -1,3 +1,2 @@
 export class LayerSwapSettings {
 }
-;

package/dist/esm/Models/Theme.js

@@ -3,7 +3,6 @@ export const THEME_COLORS = {
         buttonTextColor: '255, 255, 255',
         tertiary: '140, 152, 192',
         logo: '255, 255, 255',
-        footerLogo: 'none',
         primary: {
             DEFAULT: '46, 236, 255',
             '100': '209, 251, 255',
@@ -35,7 +34,6 @@ export const THEME_COLORS = {
         tertiary: '134, 134, 134',
         buttonTextColor: '17, 17, 17',
         logo: '255, 0, 147',
-        footerLogo: 'none',
         primary: {
             DEFAULT: '228, 37, 117',
             '100': '246, 182, 209',
@@ -67,7 +65,6 @@ export const THEME_COLORS = {
         tertiary: '118, 128, 147',
         buttonTextColor: '228, 229, 240',
         logo: '255, 0, 147',
-        footerLogo: 'none',
         borderRadius: 'medium',
         warning: {
             Foreground: '255, 201, 74',
@@ -112,7 +109,6 @@ export const THEME_COLORS = {
         tertiary: "110, 80, 140",
         buttonTextColor: "255, 240, 200",
         logo: '255, 0, 147',
-        footerLogo: "none",
         warning: {
             Foreground: "255, 180, 70",
             Background: "45, 30, 10",
@@ -156,7 +152,6 @@ export const THEME_COLORS = {
         tertiary: '134, 134, 134',
         buttonTextColor: '15, 15, 15',
         logo: '15, 15, 15',
-        footerLogo: 'none',
         primary: {
             DEFAULT: '51, 144, 236',
             '100': '246, 182, 209',
@@ -188,9 +183,45 @@ export const THEME_COLORS = {
         tertiary: '182, 182, 182',
         buttonTextColor: '19, 19, 19',
         logo: '187, 187, 187',
-        headerLogo: 'none',
-        footerLogo: 'block',
-        footerLogoHeight: '20px',
+        primary: {
+            DEFAULT: '243, 243, 243',
+            '100': '255, 255, 255',
+            '200': '255, 255, 255',
+            '300': '255, 255, 255',
+            '400': '255, 255, 255',
+            '500': '243, 243, 243',
+            '600': '215, 215, 215',
+            '700': '187, 187, 187',
+            '800': '159, 159, 159',
+            '900': '131, 131, 131',
+            'text': '243, 243, 243',
+        },
+        secondary: {
+            DEFAULT: '37, 37, 37',
+            '100': '119, 119, 119',
+            '200': '98, 98, 98',
+            '300': '78, 78, 78',
+            '400': '57, 57, 57',
+            '500': '37, 37, 37',
+            '600': '13, 13, 13',
+            '700': '13, 13, 13',
+            '800': '13, 13, 13',
+            '900': '0, 0, 0',
+            'text': '182, 182, 182',
+        },
+    },
+    "immutablePlay": {
+        tertiary: '182, 182, 182',
+        buttonTextColor: '19, 19, 19',
+        logo: '187, 187, 187',
+        header: {
+            hideMenu: true,
+            hideTabs: true,
+            hideWallets: true,
+        },
+        cardBackgroundStyle: {
+            backgroundColor: 'transparent',
+        },
         primary: {
             DEFAULT: '243, 243, 243',
             '100': '255, 255, 255',

package/dist/esm/components/Buttons/copyButton.js

@@ -1,18 +1,20 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { classNames } from '../utils/classNames';
 import useCopyClipboard from '../../hooks/useCopyClipboard';
 import { useState } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../shadcn/tooltip';
 import CopyIcon from '../Icons/CopyIcon';
-const CopyButton = ({ className, toCopy, children, iconSize, iconClassName }) => {
+const CopyButton = ({ className, toCopy, children, iconSize, iconClassName, disabled = false, }) => {
     const [isCopied, setCopied] = useCopyClipboard();
     const [isTooltipOpen, setTooltipOpen] = useState(false);
     const handleCopyClick = () => {
+        if (disabled)
+            return;
         setCopied(toCopy);
         setTooltipOpen(true);
     };
-    return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className), onClick: handleCopyClick, children: isCopied ? (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
+    return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className, "flex items-center gap-1", "cursor-pointer", disabled && "opacity-50 cursor-not-allowed pointer-events-none"), onClick: handleCopyClick, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: isCopied ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs(_Fragment, { children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
 };
 export default CopyButton;

package/dist/esm/components/Buttons/submitButton.js

@@ -13,9 +13,10 @@ const SubmitButton = ({ isDisabled, isSubmitting, icon, children, type, onClick,
     return (_jsxs("button", { disabled: isDisabled || isSubmitting, type: type, onClick: onClick, style: style, className: clsx('enabled:active:animate-press-down text-primary focus:outline-none focus:ring-0 items-center space-x-1 disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative w-full flex justify-center font-medium rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out', {
             className,
             'text-primary-buttonTextColor bg-primary-500': buttonStyle === 'filled',
+            'text-primary-text bg-secondary-300 hover:bg-secondary-400': buttonStyle === 'secondary',
             'py-4 px-4': size === 'large',
             'py-3 px-2 md:px-3': size === 'medium',
-            'py-1.5 px-1.5': size === 'small',
+            'py-2.5 px-2.5 text-sm': size === 'small',
         }), children: [_jsxs("span", { className: `${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`, children: [(!isDisabled && !isSubmitting) && icon, isSubmitting ?
                         _jsx(SpinIcon, { className: "animate-spin h-5 w-5" })
                         : null] }), _jsx("span", { className: `grow ${text_align === 'left' ? 'text-left' : 'text-center'}`, children: children })] }));

package/dist/esm/components/ColorSchema.js

@@ -85,20 +85,13 @@ const ColorSchema = ({ themeData }) => {
                     --ls-colors-secondary-900: ${mergedTheme.secondary?.[900]};
                     --ls-colors-secondary-text: ${mergedTheme.secondary?.text};
 
-                    --ls-color-warning-foreground: ${mergedTheme.warning?.Foreground};
+                    --ls-colors-warning-foreground: ${mergedTheme.warning?.Foreground};
                     --ls-colors-warning-background: ${mergedTheme.warning?.Background};
-                    --ls-color-error-foreground: ${mergedTheme.error?.Foreground};
+                    --ls-colors-error-foreground: ${mergedTheme.error?.Foreground};
                     --ls-colors-error-background: ${mergedTheme.error?.Background};
-                    --ls-color-success-foreground: ${mergedTheme.success?.Foreground};
+                    --ls-colors-success-foreground: ${mergedTheme.success?.Foreground};
                     --ls-colors-success-background: ${mergedTheme.success?.Background};
                 }
-                .headerLogo {
-                    display: ${mergedTheme.headerLogo};
-                }
-                .footerLogo {
-                    display: ${mergedTheme.footerLogo};
-                    height: ${mergedTheme.footerLogoHeight};
-                }
             ` }) }));
 };
 export default ColorSchema;

package/dist/esm/components/Common/ConnectWalletButton.js

@@ -7,16 +7,22 @@ import { classNames } from "../../components/utils/classNames";
 const ConnectWalletButton = ({ provider, onConnect, descriptionText, ...rest }) => {
     const [isLoading, setIsLoading] = useState(false);
     const { connect } = useConnectModal();
+    const isProviderReady = typeof provider?.ready === 'boolean' ? provider.ready : true;
     const handleConnect = async () => {
+        if (!isProviderReady)
+            return;
         setIsLoading(true);
         const result = await connect(provider);
         if (onConnect && result)
             onConnect(result);
         setIsLoading(false);
     };
-    return _jsx("button", { ...rest, type: "button", onClick: handleConnect, className: classNames(`py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${isLoading && 'cursor-progress opacity-80'}`, rest.className), children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider?.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: descriptionText ?? 'Connect your wallet to browse and select from your addresses' }), _jsx("div", { className: "bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold", children: isLoading ?
-                                _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })
+    return _jsx("button", { ...rest, type: "button", onClick: handleConnect, disabled: !isProviderReady || rest.disabled, className: classNames(`py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${(isLoading || !isProviderReady) && 'cursor-progress opacity-80'} disabled:opacity-50 disabled:cursor-not-allowed`, rest.className), children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider?.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: descriptionText ?? 'Connect your wallet to browse and select from your addresses' }), _jsx("div", { className: "bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold", children: !isProviderReady ?
+                                _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Initializing..." })] })
                                 :
-                                    _jsx(_Fragment, { children: "Connect Now" }) })] })] }) });
+                                    isLoading ?
+                                        _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })
+                                        :
+                                            _jsx(_Fragment, { children: "Connect Now" }) })] })] }) });
 };
 export default ConnectWalletButton;

package/dist/esm/components/Common/CountDownTimer.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { SwapStatus } from "../../Models/SwapStatus";
 import { TransactionType } from "../../lib/apiClients/layerSwapApiClient";
-// import posthog from "posthog-js";
 const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
     const [elapsedTimer, setElapsedTimer] = useState(0);
     const [thresholdElapsed, setThresholdElapsed] = useState(false);
@@ -33,20 +32,6 @@ const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
         return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
     };
     const formatted = formatTime(elapsedTimer);
-    if (thresholdElapsed && swapDetails.status !== SwapStatus.Completed) {
-        const renderingError = new Error("Transaction is taking longer than expected");
-        renderingError.name = `LongTransactionError`;
-        renderingError.cause = renderingError;
-        // posthog.capture('$exception', {
-        //     name: renderingError.name,
-        //     message: renderingError.message,
-        //     $layerswap_exception_type: "Long Transaction Error",
-        //     stack: renderingError.stack,
-        //     cause: renderingError.cause,
-        //     where: 'longTransactionError',
-        //     severity: 'error',
-        // });
-    }
     return (_jsx("div", { className: 'flex items-center justify-center space-x-1', children: swapDetails.status === SwapStatus.Completed ? ("") : (_jsxs("div", { className: 'text-secondary-text flex items-center', children: [_jsx("span", { children: "Elapsed time:" }), _jsx("span", { className: 'text-primary-text ml-0.5', children: formatted })] })) }));
 };
 export default CountdownTimer;

package/dist/esm/components/Common/WarningMessage.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertOctagon, Scroll } from "lucide-react";
+import { Scroll } from "lucide-react";
+import InfoIcon from "../../components/Icons/InfoIcon";
+import { ICON_CLASSES_WARNING } from "../../components/Pages/Swap/Form/SecondaryComponents/validationError/constants";
 function constructIcons(messageType) {
     let iconStyle;
     switch (messageType) {
         case 'warning':
-            iconStyle = _jsx(AlertOctagon, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });
+            iconStyle = _jsx(InfoIcon, { className: ICON_CLASSES_WARNING });
             break;
         case 'informing':
             iconStyle = _jsx(Scroll, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });

package/dist/esm/components/Common/guideLink.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import SecondaryButton from "../Buttons/secondaryButton";
-import { DocIframe } from "./docInIframe";
-import Modal from "../Modal/modal";
 export default function GuideLink({ userGuideUrl, text, button, buttonClassNames }) {
     const [showGuide, setShowGuide] = useState(false);
-    return (_jsxs(_Fragment, { children: [button ?
-                _jsx(SecondaryButton, { onClick: () => setShowGuide(true), className: buttonClassNames, children: button })
-                :
-                    _jsxs("span", { className: 'text-primary cursor-pointer hover:text-primary-400', onClick: () => setShowGuide(true), children: ["\u00A0", _jsx("span", { children: text })] }), _jsx(Modal, { className: "bg-[#181c1f]", height: "full", header: text || button, show: showGuide, setShow: setShowGuide, modalId: "guide", children: _jsx(DocIframe, { onConfirm: () => setShowGuide(false), URl: userGuideUrl }) })] }));
+    return (_jsx(_Fragment, { children: button ?
+            _jsx(SecondaryButton, { onClick: () => setShowGuide(true), className: buttonClassNames, children: button })
+            :
+                _jsxs("a", { target: "_blank", href: userGuideUrl, className: 'text-primary cursor-pointer hover:text-primary-400', children: ["\u00A0", _jsx("span", { children: text })] }) }));
 }

package/dist/esm/components/ErrorFallback.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useIntercom } from "react-use-intercom";
 import { Home, RotateCcw } from "lucide-react";
-// import posthog from "posthog-js";
 import MessageComponent from "./Common/MessageComponent";
 import NotFoundIcon from "./Icons/NotFoundIcon";
 import SubmitButton from "./Buttons/submitButton";
+import { ErrorHandler } from "../lib/ErrorHandler";
 export default function ErrorFallback({ error, resetErrorBoundary }) {
     const { boot, show } = useIntercom();
-    // useEffect(() => {
-    //     posthog.capture('$exception', {
-    //         name: error?.name,
-    //         $layerswap_exception_type: "Error Fallback",
-    //         message: error?.message,
-    //         where: 'ErrorFallback',
-    //         severity: 'error',
-    //     });
-    // }, [])
+    useEffect(() => {
+        ErrorHandler({
+            type: "ErrorFallback",
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            cause: error.cause
+        });
+    }, [error]);
     const startIntercom = useCallback(() => {
         boot();
         show();

package/dist/esm/components/HeaderWithMenu.js

@@ -13,7 +13,7 @@ function HeaderWithMenu({ goBack, contextualMenu }) {
         LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['testnet'];
     const headerConfigs = AppSettings.ThemeData?.header;
     return (_jsxs("div", { className: "items-center justify-between sm:flex sm:items-center grid grid-cols-5 w-full sm:grid-cols-none sm:grid-none mt-2 pb-2 px-4", children: [_jsx("div", { className: "self-center col-start-1 md:col-start-2 md:col-span-3 justify-self-start md:justify-self-center flex items-center gap-2", children: goBack ?
-                    _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2 inline-flex", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) })
+                    _jsx("div", { className: "ml-0", children: _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }) })
                     :
                         headerConfigs?.hideTabs ? null :
                             AppSettings.ThemeData?.enableWideVersion == true ?

package/dist/esm/components/Icons/Wallets/Xverse.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Xverse = (props) => _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "300", height: "300", viewBox: "0 0 300 300", fill: "none", ...props, children: [_jsx("rect", { width: "300", height: "300", fill: "#0F0F0F" }), _jsx("path", { d: "M266 265.11V221.791C266 220.073 265.329 218.435 264.132 217.218L82.9028 32.8997C81.7061 31.6825 80.0952 31 78.4064 31H35.8141C33.7113 31 32 32.7405 32 34.8791V75.1258C32 76.8435 32.6711 78.4815 33.8679 79.6987L98.9197 145.859C100.407 147.372 100.407 149.829 98.9197 151.342L33.1185 218.264C32.4027 218.992 32 219.982 32 221.006V265.11C32 267.246 33.7113 268.989 35.8141 268.989H106.984C109.087 268.989 110.798 267.246 110.798 265.11V239.127C110.798 238.103 111.201 237.114 111.917 236.386L147.216 200.484C148.704 198.971 151.12 198.971 152.608 200.484L218.107 267.1C219.303 268.317 220.914 269 222.603 269H262.175C264.278 269 265.989 267.258 265.989 265.121L266 265.11Z", fill: "white" }), _jsx("path", { d: "M170.853 88.6326H206.533C208.648 88.6326 210.372 90.3964 210.372 92.5611V129.062C210.372 132.567 214.515 134.32 216.933 131.834L265.879 81.6807C266.595 80.9475 267 79.9512 267 78.9089V34.9857C267 32.8211 265.285 31.0573 263.159 31.0573L219.586 31C218.568 31 217.594 31.4123 216.866 32.1453L168.132 81.9211C165.714 84.395 167.427 88.6326 170.842 88.6326H170.853Z", fill: "#EE7A30" })] });
+export default Xverse;

package/dist/esm/components/Icons/Wallets/index.js

@@ -22,3 +22,4 @@ export { default as BraavosIcon } from "./Braavos";
 export { default as ArgentXIcon } from "./ArgentX";
 export { default as FueletIcon } from "./Fuelet";
 export { default as KeplrIcon } from "./Keplr";
+export { default as XverseIcon } from "./Xverse";

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

@@ -10,7 +10,7 @@ import AddressBook from "./AddressBook";
 import AddressButton from "./AddressButton";
 import { useInitialSettings } from "../../../../context/settings";
 import ConnectedWallets from "./ConnectedWallets";
-import { useSelectedAccount, useUpdateBalanceAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount, useSelectSwapAccount } from "../../../../context/swapAccounts";
 import VaulDrawer from "../../../../components/Modal/vaulModal";
 export var AddressGroup;
 (function (AddressGroup) {
@@ -22,14 +22,15 @@ export var 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 { destination_address, to: destination, toExchange } = values;
+    const selectDestinationAccount = useSelectSwapAccount("to");
+    const { provider, unAvailableWallets } = useWallet(destination, 'autofill');
     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();
+    // Get manually added address from context (shared across all AddressPicker instances)
+    const manualAddressFromContext = defaultAccount?.id === 'manually_added' ? defaultAccount.address : undefined;
     useEffect(() => {
         if (destination_address && destination && !isValidAddress(destination_address, destination)) {
             updateDestAddress('');
@@ -42,10 +43,11 @@ const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAdd
             address_book,
             destination,
             wallets: connectedWallets,
-            newAddress,
-            addressFromQuery: initialSettings.destination_address
+            manualAddressFromContext,
+            addressFromQuery: initialSettings.destination_address,
+            destination_address
         });
-    }, [address_book, destination, connectedWallets, newAddress, initialSettings.destination_address, connectedWalletskey]);
+    }, [address_book, destination, connectedWallets, manualAddressFromContext, initialSettings.destination_address, connectedWalletskey]);
     const destinationAddressItem = destination && destination_address ?
         groupedAddresses?.find(a => a.address.toLowerCase() === destination_address.toLowerCase())
         : undefined;
@@ -102,13 +104,13 @@ const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAdd
     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(VaulDrawer, { header: 'Send To', show: showAddressModal, setShow: setShowAddressModal, modalId: "address", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx("div", { className: 'w-full flex flex-col justify-between h-full text-primary-text min-h-[200px]', 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
+                                    _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, 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, }) => {
+const resolveAddressGroups = ({ address_book, destination, wallets, manualAddressFromContext, addressFromQuery, destination_address, }) => {
     if (!destination)
         return;
     const filteredAddressBook = address_book?.filter(a => a.networks?.some(n => destination?.name === n) && isValidAddress(a.address, destination)) || [];
@@ -125,8 +127,9 @@ const resolveAddressGroups = ({ address_book, destination, wallets, newAddress,
     if (recentlyUsedAddresses.length > 0) {
         addresses = [...addresses, ...recentlyUsedAddresses];
     }
-    if (newAddress?.address && newAddress.networkType === destination?.type) {
-        addresses.push({ address: newAddress.address, group: AddressGroup.ManualAdded });
+    // Include manually added address from context (shared across all instances)
+    if (manualAddressFromContext && isValidAddress(manualAddressFromContext, destination)) {
+        addresses.push({ address: manualAddressFromContext, group: AddressGroup.ManualAdded });
     }
     const uniqueAddresses = addresses.filter((a, index, self) => self.findIndex(t => addressFormat(t.address, destination) === addressFormat(a.address, destination)) === index);
     return uniqueAddresses;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { truncateDecimals } from "../../../components/utils/RoundDecimals";
-import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../context/swapAccounts";
 import { useBalance } from "../../../lib/balances/useBalance";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 import InfoIcon from "../../../components/Icons/InfoIcon";
@@ -18,7 +18,7 @@ const Balance = ({ values, direction }) => {
     return _jsx("div", { className: "min-w-4/5  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" })] })
+                _jsx(NetworkIssue, { network: network })
                 : (network && token && truncatedBalance) ?
                     ((Number(tokenBalance?.amount) >= 0 && Number(tokenBalance?.amount) < Number(values.amount) && values.depositMethod === 'wallet' && direction == 'from') ?
                         _jsx(InsufficientBalance, { balance: truncatedBalance })
@@ -26,6 +26,12 @@ const Balance = ({ values, direction }) => {
                             _jsx("span", { children: truncatedBalance }))
                     : null });
 };
+const NetworkIssue = ({ network }) => {
+    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: "Network issue" })] }) }), _jsx(TooltipContent, { className: "!bg-secondary-400 !border-0 !p-3 !rounded-xl", children: _jsxs("div", { className: "flex items-center gap-2 justify-center max-w-[300px]", children: [_jsx("div", { className: "w-4 h-4", children: _jsx(InfoIcon, { className: 'w-4 h-4 text-warning-foreground' }) }), _jsx("p", { className: "text-sm", children: _jsxs("span", { children: [_jsx("span", { children: "We are currently unable to retrieve balance information for " }), _jsx("span", { children: network?.display_name ?
+                                            _jsx("span", { children: network?.display_name })
+                                            :
+                                                _jsx("span", { children: "the network" }) })] }) })] }) })] });
+};
 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" })] }) })] });
 };

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NumberFlow from "@number-flow/react";
+import clsx from "clsx";
+export const ExchangeReceiveAmount = ({ 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;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full flex min-w-0 font-normal border-0 text-xl text-primary-text relative truncate items-baseline flex-row", children: [_jsx("div", { className: "flex items-center justify-start relative w-fit", children: _jsxs("div", { className: clsx("w-full flex items-center py-[3px] pr-2", { "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 } }), _jsx("span", { className: "ml-1", children: destination_token?.symbol })] }) }), _jsx("div", { className: "flex items-baseline space-x-2 mt-1.5", children: _jsx("span", { className: "text-sm leading-4 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 }) }) })] }) }));
+};

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

@@ -4,7 +4,7 @@ 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 { useSelectedAccount } from "../../../context/swapAccounts";
 import { useBalance } from "../../../lib/balances/useBalance";
 import useWallet from "../../../hooks/useWallet";
 const MinMax = (props) => {

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

@@ -3,45 +3,12 @@ import { useMemo } from "react";
 import { Triangle } from "lucide-react";
 import { Tooltip, TooltipArrow, 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)
+import { resolvePriceImpactValues } from "../../../lib/fees";
+export const PriceImpact = ({ quote, className }) => {
+    const priceImpactValues = useMemo(() => quote ? resolvePriceImpactValues(quote) : undefined, [quote]);
+    if (priceImpactValues === 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-card", 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) })] })] })] }), _jsx(TooltipArrow, { className: "!bg-secondary-500 !fill-secondary-500" })] })] }) }));
+    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, { "text-warning-foreground hover:text-warning-foreground/80": priceImpactValues.highMarketPriceImpact }), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3 h-3 stroke-1 fill-current transition-transform ${priceImpactValues.priceImpact !== undefined && priceImpactValues.priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpactValues.priceImpact || 0).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-card", children: [_jsxs("p", { className: clsx("text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: [priceImpactValues.highMarketPriceImpact ? (priceImpactValues.criticalMarketPriceImpact ? _jsx("span", { children: "Critical price impact:" }) : _jsx("span", { children: "High price impact:" })) : _jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpactValues.priceImpact) }), _jsx("span", { className: clsx("text-secondary-text text-xs font-normal", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: priceImpactValues.priceImpactPercentage ? `(${priceImpactValues.priceImpactPercentage < 0 ? "-" : "+"}${Math.abs(priceImpactValues.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(priceImpactValues.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: priceImpactValues.bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.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: priceImpactValues.layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.layerswapFees)).toFixed(2) })] })] })] }), _jsx(TooltipArrow, { className: "bg-secondary-500! fill-secondary-500!" })] })] }) }));
 };
 const formatCurrency = (value, decimals = 2) => {
     if (value === undefined || isNaN(value))

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import NumberFlow from "@number-flow/react";
 import clsx from "clsx";
 import { PriceImpact } from "./PriceImpact";
-export const ReceiveAmount = ({ source_token, destination_token, fee, isFeeLoading }) => {
+export const ReceiveAmount = ({ 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 pt-2 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 h-5", 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 })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 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 h-5", 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", quote: quote })] })] }) }));
 };

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

@@ -38,10 +38,10 @@ const AmountField = forwardRef(function AmountField({ usdPosition = "bottom", ac
     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] pt-2 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 => {
+            }), 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! group-[.exchange-amount-field]:pt-2! 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",
+                    } }), _jsx("div", { className: clsx("usd-suffix text-base group-[.exchange-amount-field]:text-sm leading-5 font-medium text-secondary-text pointer-events-none", {
+                        "absolute bottom-[11px]": usdPosition === "right",
                         "h-5": usdPosition !== "right",
                         "text-secondary-text/45": !!actionValueInUsd
                     }, "group-hover:block"), ref: suffixRef, children: `${actionValueInUsd ?? requestedAmountInUsd ?? '$0'}` })] }) }));

package/dist/esm/components/Input/DestinationPicker.js

@@ -11,12 +11,12 @@ import { useSwapDataState } from "../../context/swap";
 const DestinationPicker = (props) => {
     const { partner } = props;
     const { values } = useFormikContext();
-    const { fromAsset: fromCurrency, toAsset: toCurrency } = values;
+    const { toAsset: toCurrency } = values;
     const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
     const { swapId } = useSwapDataState();
     const quoteRefreshInterval = !!swapId ? 0 : undefined;
     const { quote, isQuoteLoading } = useQuoteData(quoteArgs, quoteRefreshInterval);
-    return _jsxs("div", { className: "flex flex-col w-full bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px]", children: [_jsxs("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: [_jsx("label", { htmlFor: "To", className: "block col-span-4 font-normal text-secondary-text text-base leading-5 w-30", children: "Receive at" }), _jsx("div", { className: "col-span-5 justify-self-end", children: _jsx(Address, { partner: partner, children: ({ destination, addressItem, connectedWallet, partner }) => _jsx(DestinationWalletPicker, { destination: destination, addressItem: addressItem, connectedWallet: connectedWallet, partner: partner }) }) })] }), _jsx("div", { className: "items-center space-y-2", children: _jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2 w-full max-w-full", children: [_jsx("div", { className: "min-w-0 overflow-hidden", children: _jsx(ReceiveAmount, { source_token: fromCurrency, destination_token: toCurrency, fee: quote, isFeeLoading: isQuoteLoading }) }), _jsx("div", { className: "justify-self-end self-start", children: _jsx(RoutePicker, { direction: "to" }) })] }) })] });
+    return _jsxs("div", { className: "flex flex-col w-full bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px]", children: [_jsxs("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: [_jsx("label", { htmlFor: "To", className: "block col-span-4 font-normal text-secondary-text text-base leading-5 w-30", children: "Receive at" }), _jsx("div", { className: "col-span-5 justify-self-end", children: _jsx(Address, { partner: partner, children: ({ destination, addressItem, connectedWallet, partner }) => _jsx(DestinationWalletPicker, { destination: destination, addressItem: addressItem, connectedWallet: connectedWallet, partner: partner }) }) })] }), _jsx("div", { className: "items-center space-y-2", children: _jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2 w-full max-w-full", children: [_jsx("div", { className: "min-w-0 overflow-hidden", children: _jsx(ReceiveAmount, { destination_token: toCurrency, fee: quote, isFeeLoading: isQuoteLoading }) }), _jsx("div", { className: "justify-self-end self-start", children: _jsx(RoutePicker, { direction: "to" }) })] }) })] });
 };
 export const SecondDestinationWalletPicker = () => {
     return _jsxs("div", { className: " justify-center w-full pl-3 pr-2 py-2 bg-secondary-400 items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 ", children: [_jsx(PlusIcon, { className: "stroke-1" }), " ", _jsx("span", { children: "Destination Address" })] });

package/dist/esm/components/Input/NumericInput.js

@@ -4,12 +4,15 @@ import { forwardRef } from "react";
 import { classNames } from '../utils/classNames';
 import { isScientific } from "../utils/RoundDecimals";
 // Use with Formik
-const NumericInput = forwardRef(function NumericInput({ label, tempValue, disabled, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
+const NumericInput = forwardRef(function NumericInput({ label, disabled, tempValue, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
     const { handleChange } = useFormikContext();
     const [field] = useField(name);
-    const formattedTempValue = isScientific(tempValue)
-        ? tempValue?.toFixed(precision ?? 0).replace(/\.?0+$/, '')
-        : tempValue?.toString();
+    const formattedTempValue = tempValue ? isScientific(tempValue)
+        ? (!isNaN(Number(tempValue))
+            ? Number(tempValue).toFixed(precision ?? 0).replace(/\.?0+$/, '')
+            : '')
+        : tempValue?.toString()
+        : '';
     return _jsxs("div", { children: [label &&
                 _jsx("label", { htmlFor: name, className: "block font-semibold text-secondary-text text-sm mb-1.5 w-full", children: label }), _jsxs("div", { className: "flex relative w-full", children: [Number(tempValue) > 0 &&
                         _jsx("span", { className: classNames('py-2 flex text-secondary-text/45 items-center h-12 leading-4 bg-secondary-700 min-w-0 rounded-lg font-semibold border-0 ', className), ref: ref, children: _jsx("span", { children: formattedTempValue }) }), !tempValue &&