@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.5

package/_cjs/components/GasMessage/GasMessage.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../../hooks");
+const FundsSufficiencyMessage_1 = require("./FundsSufficiencyMessage");
+const GasSufficiencyMessage_1 = require("./GasSufficiencyMessage");
+const GasMessage = ({ route, ...props }) => {
+    const { insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
+    const { insufficientFromToken } = (0, hooks_1.useFromTokenSufficiency)(route);
+    const validInsufficientGas = insufficientGas?.length;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFromToken || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFromToken ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : validInsufficientGas ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+};
+exports.GasMessage = GasMessage;

package/_cjs/components/GasMessage/GasMessage.style.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoMessageSwitch = exports.InfoMessageCardTitle = exports.InfoMessageCard = exports.WarningMessageCardTitle = exports.WarningMessageCard = void 0;
+const material_1 = require("@mui/material");
+const Switch_1 = require("@mui/material/Switch");
+const styles_1 = require("@mui/material/styles");
+const Switch_2 = require("../Switch");
+const utils_1 = require("../../utils");
+const MessageCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    position: 'relative',
+    whiteSpace: 'pre-line',
+}));
+exports.WarningMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
+    backgroundColor: (0, utils_1.getWarningBackgroundColor)(theme),
+}));
+exports.WarningMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? (0, styles_1.darken)(theme.palette.warning.main, 0.36)
+        : (0, styles_1.alpha)(theme.palette.warning.main, 1),
+}));
+exports.InfoMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
+    backgroundColor: (0, utils_1.getInfoBackgroundColor)(theme),
+}));
+exports.InfoMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? theme.palette.info.main
+        : (0, styles_1.lighten)(theme.palette.info.main, 0.24),
+}));
+exports.InfoMessageSwitch = (0, styles_1.styled)(Switch_2.Switch)(({ theme }) => ({
+    [`.${Switch_1.switchClasses.switchBase}`]: {
+        [`&.${Switch_1.switchClasses.checked}`]: {
+            [`& + .${Switch_1.switchClasses.track}`]: {
+                backgroundColor: theme.palette.mode === 'light'
+                    ? theme.palette.info.main
+                    : (0, styles_1.alpha)(theme.palette.info.main, 0.84),
+            },
+        },
+        [`&.Mui-focusVisible .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.mode === 'light'
+                ? theme.palette.info.main
+                : (0, styles_1.alpha)(theme.palette.info.main, 0.84),
+        },
+    },
+}));

package/_cjs/components/GasMessage/GasRefuelMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasRefuelMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const GasMessage_style_1 = require("./GasMessage.style");
+const GasRefuelMessage = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, chain, isLoading: isRefuelLoading } = (0, hooks_1.useGasRefuel)();
+    const onChange = (_, checked) => {
+        setValue('enabledAutoRefuel', checked);
+    };
+    const showGasRefuelMessage = chain && enabled && !isRefuelLoading;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showGasRefuelMessage, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCard, { ...props, children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCardTitle, { display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
+                                        marginRight: 1,
+                                    } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`info.title.autoRefuel`) })] }), (0, jsx_runtime_1.jsx)(GasMessage_style_1.InfoMessageSwitch, { checked: enabledAutoRefuel, onChange: onChange })] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabledAutoRefuel, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, children: t(`info.message.autoRefuel`, {
+                            chainName: chain?.name,
+                        }) }) })] }) }));
+};
+exports.GasRefuelMessage = GasRefuelMessage;

package/_cjs/components/GasMessage/GasSufficiencyMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasSufficiencyMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
+const GasMessage_style_1 = require("./GasMessage.style");
+const GasSufficiencyMessage = ({ insufficientGas, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCardTitle, { display: "flex", alignItems: "center", px: 2, pt: 2, children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
+                            marginRight: 1,
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography
+            // eslint-disable-next-line react/no-array-index-key
+            , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`main.tokenOnChainAmount`, {
+                    amount: (0, viem_1.formatUnits)(item.insufficientAmount ?? 0n, item.token.decimals),
+                    tokenSymbol: item.token.symbol,
+                    chainName: item.chain?.name,
+                }) }, index)))] }));
+};
+exports.GasSufficiencyMessage = GasSufficiencyMessage;

package/_cjs/components/GasMessage/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GasMessage"), exports);
+__exportStar(require("./GasRefuelMessage"), exports);

package/_cjs/components/Header/Header.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.HeaderContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const Header_style_1 = require("./Header.style");
+const NavigationHeader_1 = require("./NavigationHeader");
+const WalletHeader_1 = require("./WalletHeader");
+const HeaderContainer = ({ children }) => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const elementId = (0, hooks_1.useDefaultElementId)();
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, { id: (0, utils_1.createElementId)(utils_1.ElementId.Header, elementId), sticky: utils_1.stickyHeaderRoutes.some((route) => pathname.includes(route)), children: children }));
+};
+exports.HeaderContainer = HeaderContainer;
+const Header = () => {
+    const { walletManagement, subvariant, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(exports.HeaderContainer, { children: [!walletManagement &&
+                subvariant !== 'split' &&
+                !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {})) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
+};
+exports.Header = Header;

package/_cjs/components/Header/Header.style.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitTabs = exports.HeaderControlsContainer = exports.DrawerWalletContainer = exports.WalletButton = exports.Container = exports.HeaderAppBar = void 0;
+const material_1 = require("@mui/material");
+const Button_1 = require("@mui/material/Button");
+const styles_1 = require("@mui/material/styles");
+const Tabs_1 = require("../Tabs");
+exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    color: theme.palette.text.primary,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    minHeight: 40,
+    padding: theme.spacing(0, 3, 0, 3),
+    ':first-of-type': {
+        paddingTop: theme.spacing(1.5),
+        paddingBottom: theme.spacing(0.5),
+    },
+}));
+exports.Container = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'sticky',
+})(({ theme, sticky }) => ({
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+}));
+exports.WalletButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    backgroundColor: 'transparent',
+    padding: theme.spacing(1, 1.5),
+    maxHeight: 40,
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    borderRadius: theme.shape.borderRadius * 2,
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
+    [`.${Button_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
+    [`.${Button_1.buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
+    [`&:hover .${material_1.badgeClasses.badge} > div`]: {
+        borderColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
+}));
+exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyItems: 'start',
+    '& > button': {
+        marginLeft: '-0.5rem',
+    },
+}));
+exports.HeaderControlsContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(0.5),
+}));
+exports.SplitTabs = (0, styles_1.styled)(Tabs_1.Tabs)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.paper
+        : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
+}));

package/_cjs/components/Header/NavigationHeader.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 material_1 = require("@mui/material");
+const IconButton_1 = require("@mui/material/IconButton");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+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 Header_style_1 = require("./Header.style");
+const NavigationTabs_1 = require("./NavigationTabs");
+const SettingsButton_1 = require("./SettingsButton");
+const WalletHeader_1 = require("./WalletHeader");
+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)(IconButton_1.default, { 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 { 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('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
+    const hasPath = utils_1.navigationRoutesValues.includes(path);
+    const splitSubvariant = subvariant === 'split' && !hasPath;
+    const handleHeaderTitle = () => {
+        switch (path) {
+            case utils_1.navigationRoutes.selectWallet:
+                return t(`header.selectWallet`);
+            case utils_1.navigationRoutes.settings:
+                return t(`header.settings`);
+            case utils_1.navigationRoutes.bridges:
+                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: {
+                if (subvariant === 'nft') {
+                    return t(`header.payWith`);
+                }
+                return t(`header.from`);
+            }
+            case utils_1.navigationRoutes.toToken:
+                return t(`header.to`);
+            case utils_1.navigationRoutes.fromChain:
+            case utils_1.navigationRoutes.toChain:
+            case utils_1.navigationRoutes.toTokenNative:
+                return t(`header.selectChain`);
+            case utils_1.navigationRoutes.routes:
+                return t(`header.youGet`);
+            case utils_1.navigationRoutes.activeTransactions:
+                return t(`header.activeTransactions`);
+            case utils_1.navigationRoutes.transactionExecution: {
+                if (subvariant === 'nft') {
+                    return t(`header.purchase`);
+                }
+                return t(`header.exchange`);
+            }
+            case utils_1.navigationRoutes.transactionDetails: {
+                if (subvariant === 'nft') {
+                    return t(`header.purchaseDetails`);
+                }
+                return t(`header.transactionDetails`);
+            }
+            default: {
+                switch (subvariant) {
+                    case 'nft':
+                        return t(`header.checkout`);
+                    case 'refuel':
+                        return t(`header.gas`);
+                    default:
+                        return t(`header.exchange`);
+                }
+            }
+        }
+    };
+    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)(IconButton_1.default, { 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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+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 Tabs_1 = require("../Tabs");
+const NavigationTabs = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [state, setState] = (0, stores_1.useSplitSubvariantStore)((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const handleChange = (_, value) => {
+        setValue(providers_1.FormKey.FromAmount, '');
+        setValue(providers_1.FormKey.FromToken, '');
+        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)(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.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 Settings_1 = require("@mui/icons-material/Settings");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+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 variant = isRouteSettingsWithWarnings
+        ? 'warning'
+        : isCustomRouteSettings
+            ? 'info'
+            : undefined;
+    const tooltipMessage = variant
+        ? 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), variant: variant, children: variant ? ((0, jsx_runtime_1.jsx)(SettingsButton_style_1.SettingsIconBadge, { variant: "dot", color: variant, 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.js

@@ -0,0 +1,44 @@
+"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 IconButton_1 = require("@mui/material/IconButton");
+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)(IconButton_1.default, {
+    shouldForwardProp: (props) => props !== 'variant',
+})(({ theme, variant }) => {
+    const variantStyles = {
+        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,
+        ...variantStyles[variant ?? 'default'],
+    };
+});

package/_cjs/components/Header/WalletHeader.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletMenuButton = exports.WalletHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const Wallet_1 = require("@mui/icons-material/Wallet");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+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, hooks_1.useAccount)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    if (variant === 'drawer') {
+        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.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 navigate = (0, react_router_dom_1.useNavigate)();
+    const connect = async () => {
+        if (walletManagement) {
+            await walletManagement.connect();
+            return;
+        }
+        navigate(utils_1.navigationRoutes.selectWallet);
+    };
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: variant !== 'drawer' && subvariant !== 'split' ? ((0, jsx_runtime_1.jsx)(Wallet_1.default, {})) : undefined, startIcon: variant === 'drawer' || subvariant === 'split' ? ((0, jsx_runtime_1.jsx)(Wallet_1.default, { sx: { marginLeft: -0.25 } })) : undefined, onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: subvariant === 'split' ? 0 : -1.25,
+            marginLeft: subvariant === 'split' ? -1.25 : 0,
+        }, children: t(`button.connectWallet`) }));
+};
+const ConnectedButton = ({ account }) => {
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    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 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.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.js

@@ -0,0 +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 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.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/Header/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Header"), exports);

package/_cjs/components/Initializer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Initializer = void 0;
+const hooks_1 = require("../hooks");
+const Initializer = () => {
+    (0, hooks_1.useInitializer)();
+    return null;
+};
+exports.Initializer = Initializer;

package/_cjs/components/Input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const styles_1 = require("@mui/material/styles");
+exports.Input = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    paddingRight: theme.spacing(2),
+    [`.${InputBase_1.inputBaseClasses.input}`]: {
+        padding: theme.spacing(1.5, 1, 1.5, 2),
+        height: '2.875em',
+        boxSizing: 'inherit',
+    },
+}));