@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/cjs/components/Header/NavigationHeader.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationHeader = void 0;
+exports.NavigationHeader = exports.TransactionHistoryButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ArrowBack_1 = require("@mui/icons-material/ArrowBack");
-const ReceiptLong_1 = require("@mui/icons-material/ReceiptLong");
-const Settings_1 = require("@mui/icons-material/Settings");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
@@ -16,11 +14,19 @@ const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const NavigationTabs_1 = require("./NavigationTabs");
 const WalletHeader_1 = require("./WalletHeader");
+const SettingsButton_1 = require("./SettingsButton");
+const ReceiptLong_1 = require("@mui/icons-material/ReceiptLong");
+const TransactionHistoryButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { navigate } = (0, hooks_1.useNavigateBack)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.transactionHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) }));
+};
+exports.TransactionHistoryButton = TransactionHistoryButton;
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { subvariant, hiddenUI, variant } = (0, providers_1.useWidgetConfig)();
-    const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { account } = (0, providers_1.useWallet)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { account } = (0, hooks_1.useAccount)();
     const { element, title } = (0, stores_1.useHeaderStore)((state) => state);
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const cleanedPathname = pathname.endsWith('/')
@@ -39,6 +45,8 @@ const NavigationHeader = () => {
                 return t(`settings.enabledBridges`);
             case utils_1.navigationRoutes.exchanges:
                 return t(`settings.enabledExchanges`);
+            case utils_1.navigationRoutes.languages:
+                return t(`language.title`);
             case utils_1.navigationRoutes.transactionHistory:
                 return t(`header.transactionHistory`);
             case utils_1.navigationRoutes.fromToken: {
@@ -81,8 +89,7 @@ const NavigationHeader = () => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(material_1.Box, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.transactionHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
-                                                    marginRight: -1.25,
-                                                }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(Header_style_1.HeaderControlsContainer, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isConnected &&
+                                            !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(exports.TransactionHistoryButton, {})) : null, (0, jsx_runtime_1.jsx)(SettingsButton_1.SettingsButton, {})] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/NavigationTabs.js

@@ -7,7 +7,7 @@ const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const Header_style_1 = require("./Header.style");
-const NavigationTabs_style_1 = require("./NavigationTabs.style");
+const Tabs_1 = require("../Tabs");
 const NavigationTabs = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [state, setState] = (0, stores_1.useSplitSubvariantStore)((state) => [
@@ -21,6 +21,6 @@ const NavigationTabs = () => {
         setValue(providers_1.FormKey.ToToken, '');
         setState(value === 0 ? 'swap' : 'bridge');
     };
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: (0, jsx_runtime_1.jsxs)(NavigationTabs_style_1.NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [(0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.swap'), disableRipple: true }), (0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: (0, jsx_runtime_1.jsxs)(Header_style_1.SplitTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t('header.swap'), disableRipple: true }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t('header.bridge'), disableRipple: true })] }) }));
 };
 exports.NavigationTabs = NavigationTabs;

package/cjs/components/Header/SettingsButton.d.ts

@@ -0,0 +1 @@
+export declare const SettingsButton: () => import("react/jsx-runtime").JSX.Element;

package/cjs/components/Header/SettingsButton.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_i18next_1 = require("react-i18next");
+const material_1 = require("@mui/material");
+const Settings_1 = require("@mui/icons-material/Settings");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const SettingsButton_style_1 = require("./SettingsButton.style");
+const SettingsButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { navigate } = (0, hooks_1.useNavigateBack)();
+    const { isCustomRouteSettings, isRouteSettingsWithWarnings } = (0, hooks_1.useSettingMonitor)();
+    const notification = isRouteSettingsWithWarnings
+        ? 'warning'
+        : isCustomRouteSettings
+            ? 'info'
+            : undefined;
+    const tooltipMessage = notification
+        ? t(`tooltip.settingsModified`)
+        : t(`header.settings`);
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: tooltipMessage, enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(SettingsButton_style_1.SettingsIconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), notification: notification, children: notification ? ((0, jsx_runtime_1.jsx)(SettingsButton_style_1.SettingsIconBadge, { variant: "dot", color: notification, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) })) : ((0, jsx_runtime_1.jsx)(Settings_1.default, {})) }) }));
+};
+exports.SettingsButton = SettingsButton;

package/cjs/components/Header/SettingsButton.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const SettingsIconBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "color" | "variant" | "max" | "components" | "componentsProps" | "slots" | "slotProps" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+interface SettingsIconButtonProps {
+    notification?: 'info' | 'warning';
+}
+export declare const SettingsIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SettingsIconButtonProps, {}, {}>;
+export {};

package/cjs/components/Header/SettingsButton.style.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsIconButton = exports.SettingsIconBadge = void 0;
+const material_1 = require("@mui/material");
+const Badge_1 = require("@mui/material/Badge");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.SettingsIconBadge = (0, styles_1.styled)(material_1.Badge)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.25),
+    [`.${Badge_1.badgeClasses.badge}`]: {
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        transform: 'translate(70%, -70%)',
+    },
+}));
+exports.SettingsIconButton = (0, styles_1.styled)(material_1.IconButton, {
+    shouldForwardProp: (props) => props !== 'notification',
+})(({ theme, notification }) => {
+    const notificationStyles = {
+        info: {
+            backgroundColor: (0, utils_1.getInfoBackgroundColor)(theme),
+            '&:hover': {
+                backgroundColor: (0, styles_1.darken)((0, utils_1.getInfoBackgroundColor)(theme), 0.2),
+            },
+        },
+        warning: {
+            backgroundColor: (0, utils_1.getWarningBackgroundColor)(theme),
+            '&:hover': {
+                backgroundColor: (0, styles_1.darken)((0, utils_1.getWarningBackgroundColor)(theme), 0.2),
+            },
+        },
+        default: {
+            marginRight: theme.spacing(-1.25),
+        },
+    };
+    return {
+        borderRadius: 20,
+        ...notificationStyles[notification ?? 'default'],
+    };
+});

package/cjs/components/Header/WalletHeader.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WalletMenuButton = exports.WalletHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
 const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
-const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
-const PowerSettingsNewRounded_1 = require("@mui/icons-material/PowerSettingsNewRounded");
 const Wallet_1 = require("@mui/icons-material/Wallet");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -14,30 +11,31 @@ const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
+const SmallAvatar_1 = require("../SmallAvatar");
 const Header_style_1 = require("./Header.style");
 const WalletMenu_1 = require("./WalletMenu");
+const WalletMenu_style_1 = require("./WalletMenu.style");
 const WalletHeader = () => {
     return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(exports.WalletMenuButton, {}) }));
 };
 exports.WalletHeader = WalletHeader;
 const WalletMenuButton = () => {
-    const { account } = (0, providers_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const { variant } = (0, providers_1.useWidgetConfig)();
     if (variant === 'drawer') {
-        return ((0, jsx_runtime_1.jsx)(Header_style_1.DrawerWalletContainer, { children: account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}) }));
+        return ((0, jsx_runtime_1.jsx)(Header_style_1.DrawerWalletContainer, { children: account.isConnected ? ((0, jsx_runtime_1.jsx)(ConnectedButton, { account: account })) : ((0, jsx_runtime_1.jsx)(ConnectButton, {})) }));
     }
-    return account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {});
+    return account.isConnected ? ((0, jsx_runtime_1.jsx)(ConnectedButton, { account: account })) : ((0, jsx_runtime_1.jsx)(ConnectButton, {}));
 };
 exports.WalletMenuButton = WalletMenuButton;
 const ConnectButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { walletManagement, subvariant, variant } = (0, providers_1.useWidgetConfig)();
-    const { connect: connectWallet } = (0, providers_1.useWallet)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const connect = async () => {
         if (walletManagement) {
-            await connectWallet();
+            await walletManagement.connect();
             return;
         }
         navigate(utils_1.navigationRoutes.selectWallet);
@@ -47,31 +45,20 @@ const ConnectButton = () => {
             marginLeft: subvariant === 'split' ? -1.25 : 0,
         }, children: t(`button.connectWallet`) }));
 };
-const ConnectedButton = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
+const ConnectedButton = ({ account }) => {
     const { subvariant } = (0, providers_1.useWidgetConfig)();
-    const { account, disconnect } = (0, providers_1.useWallet)();
-    const walletAddress = (0, utils_1.shortenAddress)(account.address);
     const { chain } = (0, hooks_1.useChain)(account.chainId);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const walletAddress = (0, utils_1.shortenAddress)(account.address);
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
         setAnchorEl(null);
     };
-    const handleDisconnect = () => {
-        disconnect();
-        handleClose();
-    };
-    const handleCopyAddress = async () => {
-        await navigator.clipboard.writeText(account.address ?? '');
-        handleClose();
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
+    const avatar = ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: account.connector?.icon, alt: account.connector?.name, sx: { width: 24, height: 24 }, children: account.connector?.name[0] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), startIcon: chain?.logoURI ? ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: chain?.logoURI, alt: chain?.name, children: chain?.name[0] }), children: avatar })) : (avatar), sx: {
                     marginRight: subvariant === 'split' ? 0 : -1.25,
                     marginLeft: subvariant === 'split' ? -1 : 0,
-                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}), sx: {
-                            marginTop: 1,
-                        }, children: t(`button.disconnect`) })] })] }));
+                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsx)(WalletMenu_style_1.WalletMenuContainer, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: (0, jsx_runtime_1.jsx)(WalletMenu_1.WalletMenu, { onClose: handleClose }) })] }));
 };

package/cjs/components/Header/WalletMenu.d.ts

@@ -1 +1,3 @@
-export declare const WalletMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletMenu: ({ onClose }: {
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/cjs/components/Header/WalletMenu.js

@@ -1,28 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WalletMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
+const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
+const PowerSettingsNewRounded_1 = require("@mui/icons-material/PowerSettingsNewRounded");
 const material_1 = require("@mui/material");
-const Menu_1 = require("@mui/material/Menu");
-const MenuItem_1 = require("@mui/material/MenuItem");
-const styles_1 = require("@mui/material/styles");
-const SvgIcon_1 = require("@mui/material/SvgIcon");
-exports.WalletMenu = (0, styles_1.styled)(material_1.Menu)(({ theme }) => ({
-    [`& .${Menu_1.menuClasses.paper}`]: {
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.text.primary,
-        boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
-        padding: theme.spacing(2),
-        [`& .${Menu_1.menuClasses.list}`]: {
-            padding: 0,
-        },
-        [`& .${MenuItem_1.menuItemClasses.root}`]: {
-            borderRadius: theme.shape.borderRadiusSecondary,
-            padding: theme.spacing(1, 2, 1, 1),
-            [`& .${SvgIcon_1.svgIconClasses.root}`]: {
-                fontSize: 20,
-                color: theme.palette.text.primary,
-                marginRight: theme.spacing(1.5),
-            },
-        },
-    },
-}));
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const wagmi_1 = require("wagmi");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const SmallAvatar_1 = require("../SmallAvatar");
+const WalletMenu = ({ onClose }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { accounts } = (0, hooks_1.useAccount)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
+    const connect = async () => {
+        navigate(utils_1.navigationRoutes.selectWallet);
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", children: accounts
+                    .filter((account) => account.isConnected)
+                    .map((account) => {
+                    const chain = getChainById(account.chainId);
+                    const walletAddress = (0, utils_1.shortenAddress)(account.address);
+                    const handleCopyAddress = async () => {
+                        await navigator.clipboard.writeText(account.address ?? '');
+                        onClose();
+                    };
+                    const avatar = ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: account.connector?.icon, alt: account.connector?.name, sx: {
+                            width: 32,
+                            height: 32,
+                            marginRight: chain?.logoURI ? 0 : 1.5,
+                        }, children: account.connector?.name[0] }));
+                    return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, display: "flex", alignItems: "center", children: [chain?.logoURI ? ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: chain?.logoURI, alt: chain?.name, children: chain?.name[0] }), sx: { marginRight: 1.5 }, children: avatar })) : (avatar), walletAddress] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 1, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: handleCopyAddress, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", component: "a", onClick: onClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}) }), account.chainType === sdk_1.ChainType.EVM ? ((0, jsx_runtime_1.jsx)(EVMDisconnectIconButton, { connector: account.connector })) : account.chainType === sdk_1.ChainType.SVM ? ((0, jsx_runtime_1.jsx)(SVMDisconnectIconButton, {})) : null] })] }, account.address));
+                }) }), !pathname.includes(utils_1.navigationRoutes.selectWallet) ? ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: connect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}), sx: {
+                    marginTop: 1,
+                }, children: accounts.filter((account) => account.isConnected).length > 1
+                    ? t(`button.changeWallet`)
+                    : t(`button.connectWallet`) })) : null] }));
+};
+exports.WalletMenu = WalletMenu;
+const EVMDisconnectIconButton = ({ connector }) => {
+    const { disconnect } = (0, wagmi_1.useDisconnect)();
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: (e) => {
+            e.stopPropagation();
+            disconnect({ connector });
+        }, children: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}) }));
+};
+const SVMDisconnectIconButton = () => {
+    const { disconnect } = (0, wallet_adapter_react_1.useWallet)();
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: (e) => {
+            e.stopPropagation();
+            disconnect();
+        }, children: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}) }));
+};

package/cjs/components/Header/WalletMenu.style.d.ts

@@ -0,0 +1 @@
+export declare const WalletMenuContainer: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Header/WalletMenu.style.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletMenuContainer = void 0;
+const material_1 = require("@mui/material");
+const Menu_1 = require("@mui/material/Menu");
+const MenuItem_1 = require("@mui/material/MenuItem");
+const styles_1 = require("@mui/material/styles");
+const SvgIcon_1 = require("@mui/material/SvgIcon");
+exports.WalletMenuContainer = (0, styles_1.styled)(material_1.Menu)(({ theme }) => ({
+    [`& .${Menu_1.menuClasses.paper}`]: {
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.text.primary,
+        boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+        padding: theme.spacing(2),
+        [`& .${Menu_1.menuClasses.list}`]: {
+            padding: 0,
+        },
+        [`& .${MenuItem_1.menuItemClasses.root}`]: {
+            borderRadius: theme.shape.borderRadiusSecondary,
+            padding: theme.spacing(1, 2, 1, 1),
+            [`& .${SvgIcon_1.svgIconClasses.root}`]: {
+                fontSize: 20,
+                color: theme.palette.text.primary,
+            },
+        },
+    },
+}));

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -25,6 +25,6 @@ const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) =>
     if (!insuredRoute) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { ...props, status: status, insuredAmount: (0, utils_1.formatTokenAmount)(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { ...props, status: status, insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(insuredRoute.toAmountMin), insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
 };
 exports.InsuranceCollapsed = InsuranceCollapsed;

package/cjs/components/NFT/NFT.js

@@ -12,7 +12,9 @@ const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, con
         if (token) {
             setValue(providers_1.FormKey.ToChain, token.chainId, { shouldTouch: true });
             setValue(providers_1.FormKey.ToToken, token.address, { shouldTouch: true });
-            setValue(providers_1.FormKey.ToAmount, token.amount, { shouldTouch: true });
+            setValue(providers_1.FormKey.ToAmount, token.amount?.toString(), {
+                shouldTouch: true,
+            });
         }
         if (contract) {
             setValue(providers_1.FormKey.ToContractAddress, contract.address, {

package/cjs/components/NFT/types.d.ts

@@ -6,7 +6,7 @@ export interface NFTBaseProps {
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;
-    token?: TokenAmount;
+    token: TokenAmount;
 }
 export interface NFTProps extends NFTBaseProps {
     contract?: WidgetContract;

package/cjs/components/PoweredBy/PoweredBy.js

@@ -13,7 +13,8 @@ const PoweredBy = () => {
     const { hiddenUI } = (0, providers_1.useWidgetConfig)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     if (pathname.includes(utils_1.navigationRoutes.fromToken) ||
-        pathname.includes(utils_1.navigationRoutes.toToken)) {
+        pathname.includes(utils_1.navigationRoutes.toToken) ||
+        pathname.includes(utils_1.navigationRoutes.transactionHistory)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 1, pb: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {

package/cjs/components/RouteCard/RouteCard.js

@@ -24,10 +24,10 @@ const RouteCard = ({ route, active, variant = 'default', expanded, ...other }) =
         setCardExpanded((expanded) => !expanded);
     };
     const token = subvariant === 'nft'
-        ? { ...route.fromToken, amount: route.fromAmount }
-        : { ...route.toToken, amount: route.toAmount };
+        ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+        : { ...route.toToken, amount: BigInt(route.toAmount) };
     const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : react_1.Fragment;
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsx)(InsuranceTooltip, { insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsx)(InsuranceTooltip, { insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
                                 ? 'insurance-icon'
                                 : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`main.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(RecommendedTagTooltip, { children: (0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`main.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(RouteCardEssentials_1.RouteCardEssentials, { route: route })] }));
     return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));

package/cjs/components/RouteCard/RouteCardEssentials.js

@@ -8,6 +8,7 @@ const Layers_1 = require("@mui/icons-material/Layers");
 const MonetizationOn_1 = require("@mui/icons-material/MonetizationOn");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
 const RouteCard_style_1 = require("./RouteCard.style");
 const utils_1 = require("./utils");
 const RouteCardEssentials = ({ route, dense, }) => {
@@ -18,7 +19,7 @@ const RouteCardEssentials = ({ route, dense, }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
     const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat((0, viem_1.formatUnits)(gas.amount, gas.token.decimals))?.toFixed(9), ' ', gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat((0, viem_1.formatUnits)(fee.amount, fee.token.decimals))?.toFixed(9), ' ', fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(RouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('main.estimatedTime', {
                                 value: executionTimeMinutes,

package/cjs/components/RouteCard/utils.d.ts

@@ -1,12 +1,11 @@
 import type { Route, Token } from '@lifi/sdk';
-import Big from 'big.js';
 export declare const getGasCostsBreakdown: (route: Route) => {
-    amount: Big;
+    amount: bigint;
     amountUSD: number;
     token: Token;
 }[];
 export declare const getFeeCostsBreakdown: (route: Route, included?: boolean) => {
-    amount: Big;
+    amount: bigint;
     amountUSD: number;
     token: Token;
 }[];

package/cjs/components/RouteCard/utils.js

@@ -1,18 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFeeCostsBreakdown = exports.getGasCostsBreakdown = void 0;
-const big_js_1 = require("big.js");
 const getGasCostsBreakdown = (route) => {
     return Object.values(route.steps.reduce((groupedGasCosts, step) => {
         if (step.estimate.gasCosts?.length) {
             const { token } = step.estimate.gasCosts[0];
-            const gasCostAmount = step.estimate.gasCosts
-                .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
-                .div(10 ** token.decimals);
+            const gasCostAmount = step.estimate.gasCosts.reduce((amount, gasCost) => amount + BigInt(gasCost.amount || 0), 0n);
             const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
             const groupedGasCost = groupedGasCosts[token.chainId];
             const amount = groupedGasCost
-                ? groupedGasCost.amount.plus(gasCostAmount)
+                ? groupedGasCost.amount + gasCostAmount
                 : gasCostAmount;
             const amountUSD = groupedGasCost
                 ? groupedGasCost.amountUSD + gasCostAmountUSD
@@ -36,13 +33,11 @@ const getFeeCostsBreakdown = (route, included) => {
         }
         if (feeCosts?.length) {
             const { token } = feeCosts[0];
-            const feeCostAmount = feeCosts
-                .reduce((amount, feeCost) => amount.plus((0, big_js_1.default)(feeCost.amount || 0)), (0, big_js_1.default)(0))
-                .div(10 ** token.decimals);
+            const feeCostAmount = feeCosts.reduce((amount, feeCost) => amount + BigInt(feeCost.amount || 0), 0n);
             const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
             const groupedFeeCost = groupedFeeCosts[token.chainId];
             const amount = groupedFeeCost
-                ? groupedFeeCost.amount.plus(feeCostAmount)
+                ? groupedFeeCost.amount + feeCostAmount
                 : feeCostAmount;
             const amountUSD = groupedFeeCost
                 ? groupedFeeCost.amountUSD + feeCostAmountUSD

package/cjs/components/SendToWallet/SendToWallet.js

@@ -2,27 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SendToWalletFormHelperText = exports.SendToWallet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const address_1 = require("@ethersproject/address");
 const material_1 = require("@mui/material");
+const core_1 = require("@wagmi/core");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
+const ens_1 = require("viem/ens");
+const wagmi_1 = require("wagmi");
+const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const types_1 = require("../../types");
+const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { trigger, getValues, setValue, clearErrors } = (0, react_hook_form_1.useFormContext)();
-    const { account } = (0, providers_1.useWallet)();
-    const { disabledUI, hiddenUI, requiredUI, toAddress } = (0, providers_1.useWidgetConfig)();
-    const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
+    const { account } = (0, hooks_1.useAccount)();
+    const config = (0, wagmi_1.useConfig)();
+    const { disabledUI, hiddenUI, toAddress } = (0, providers_1.useWidgetConfig)();
+    const { showSendToWallet, showSendToWalletDirty } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     const hiddenToAddress = hiddenUI?.includes(types_1.HiddenUI.ToAddress);
     const disabledToAddress = disabledUI?.includes(types_1.DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI?.includes(types_1.RequiredUI.ToAddress);
+    const requiredToAddress = (0, hooks_1.useRequiredToAddress)();
     const requiredToAddressRef = (0, react_1.useRef)(requiredToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
+    const showInstantly = Boolean(!showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
     const { field: { onChange, onBlur, name, value }, } = (0, react_hook_form_1.useController)({
         name: providers_1.FormKey.ToAddress,
         rules: {
@@ -32,30 +43,22 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
             },
             validate: async (value) => {
                 try {
-                    if (!value) {
+                    if (!value || (0, viem_1.isAddress)(value) || (0, utils_1.isSVMAddress)(value)) {
                         return true;
                     }
-                    const address = await account.signer?.provider?.resolveName(value);
-                    return ((0, address_1.isAddress)(address || value) ||
-                        t('error.title.walletAddressInvalid'));
+                    const address = await (0, core_1.getEnsAddress)(config, {
+                        chainId: getValues(providers_1.FormKey.ToChain),
+                        name: (0, ens_1.normalize)(value),
+                    });
+                    return Boolean(address);
                 }
-                catch {
+                catch (error) {
                     return t('error.title.walletEnsAddressInvalid');
                 }
             },
             onBlur: () => trigger(providers_1.FormKey.ToAddress),
         },
     });
-    // We want to show toAddress field if it is set via widget configuration and not hidden
-    const showInstantly = Boolean(!showSendToWalletDirty &&
-        showDestinationWallet &&
-        toAddress &&
-        !hiddenToAddress) || requiredToAddress;
-    (0, react_1.useEffect)(() => {
-        if (showInstantly) {
-            setSendToWallet(true);
-        }
-    }, [showInstantly, setSendToWallet]);
     (0, react_1.useEffect)(() => {
         const value = getValues(providers_1.FormKey.ToAddress);
         if (value) {
@@ -67,7 +70,7 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
             trigger(providers_1.FormKey.ToAddress).then(() => clearErrors(providers_1.FormKey.ToAddress));
         }
     }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
-    if (hiddenToAddress) {
+    if (hiddenToAddress && !requiredToAddress) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { required: requiredToAddress, children: t('main.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('main.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] })] }) }));