@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChainContainer = exports.ChainCard = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Card_1 = require("../../components/Card");
-exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
-    display: 'grid',
-    placeItems: 'center',
-    minWidth: 52,
-    height: 56,
-});
-exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
-    gridAutoRows: '56px',
-    justifyContent: 'space-between',
-    gap: theme.spacing(1.5),
-}));

package/cjs/components/ChainSelect/index.js

@@ -1,18 +0,0 @@
-"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("./ChainSelect"), exports);
-__exportStar(require("./useChainSelect"), exports);

package/cjs/components/ChainSelect/useChainSelect.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChainSelect = void 0;
-const react_hook_form_1 = require("react-hook-form");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const useChainSelect = (formType) => {
-    const chainKey = providers_1.FormKeyHelper.getChainKey(formType);
-    const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: chainKey });
-    const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { chains, isLoading } = (0, hooks_1.useChains)();
-    const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
-    const swapOnly = (0, hooks_1.useSwapOnly)();
-    const getChains = () => {
-        if (!chains) {
-            return [];
-        }
-        const selectedChains = chainOrder
-            .map((chainId) => chains.find((chain) => chain.id === chainId))
-            .filter(Boolean);
-        return selectedChains;
-    };
-    const setCurrentChain = (chainId) => {
-        onChange(chainId);
-        onBlur();
-        if (swapOnly) {
-            setValue(providers_1.FormKeyHelper.getChainKey('to'), chainId, {
-                shouldTouch: true,
-            });
-        }
-        setValue(providers_1.FormKeyHelper.getTokenKey(formType), '');
-        setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
-        setValue(providers_1.FormKey.TokenSearchFilter, '');
-        setChainOrder(chainId);
-    };
-    return {
-        chainOrder,
-        chains,
-        getChains,
-        isLoading,
-        setChainOrder,
-        setCurrentChain,
-    };
-};
-exports.useChainSelect = useChainSelect;

package/cjs/components/ContractComponent/ContractComponent.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContractComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Card_1 = require("../Card");
-const ContractComponent = ({ children, ...props }) => {
-    if (!children) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(Card_1.Card, { ...props, children: children });
-};
-exports.ContractComponent = ContractComponent;

package/cjs/components/ContractComponent/index.js

@@ -1,17 +0,0 @@
-"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("./ContractComponent"), exports);

package/cjs/components/Dialog.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = exports.backdropProps = exports.paperProps = exports.modalProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const hooks_1 = require("../hooks");
-exports.modalProps = {
-    sx: {
-        position: 'absolute',
-        overflow: 'hidden',
-    },
-};
-exports.paperProps = {
-    sx: (theme) => ({
-        position: 'absolute',
-        backgroundImage: 'none',
-        borderTopLeftRadius: theme.shape.borderRadius,
-        borderTopRightRadius: theme.shape.borderRadius,
-    }),
-};
-exports.backdropProps = {
-    sx: {
-        position: 'absolute',
-        backgroundColor: 'rgb(0 0 0 / 32%)',
-        backdropFilter: 'blur(3px)',
-    },
-};
-const Dialog = ({ children, open, onClose, }) => {
-    const getContainer = (0, hooks_1.useGetScrollableContainer)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { container: getContainer, open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps, children: children }));
-};
-exports.Dialog = Dialog;

package/cjs/components/GasMessage/FundsSufficiencyMessage.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FundsSufficiencyMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
-const material_1 = require("@mui/material");
-const react_i18next_1 = require("react-i18next");
-const GasMessage_style_1 = require("./GasMessage.style");
-const FundsSufficiencyMessage = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { display: "flex", children: [(0, jsx_runtime_1.jsx)(GasMessage_style_1.WarningMessageCardTitle, { children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { sx: {
-                        marginTop: 2,
-                        marginLeft: 2,
-                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`warning.message.insufficientFunds`) })] }));
-};
-exports.FundsSufficiencyMessage = FundsSufficiencyMessage;

package/cjs/components/GasMessage/GasMessage.js

@@ -1,15 +0,0 @@
-"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

@@ -1,48 +0,0 @@
-"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 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: theme.palette.mode === 'light'
-        ? (0, styles_1.alpha)(theme.palette.warning.main, 0.32)
-        : (0, styles_1.alpha)(theme.palette.warning.main, 0.16),
-}));
-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: theme.palette.mode === 'light'
-        ? (0, styles_1.alpha)(theme.palette.info.main, 0.12)
-        : (0, styles_1.alpha)(theme.palette.info.main, 0.16),
-}));
-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

@@ -1,26 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-"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 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: item.insufficientAmount?.toString(),
-                    tokenSymbol: item.token.symbol,
-                    chainName: item.chain?.name,
-                }) }, index)))] }));
-};
-exports.GasSufficiencyMessage = GasSufficiencyMessage;

package/cjs/components/GasMessage/index.js

@@ -1,18 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<import("@mui/material").AppBarOwnProps & Omit<import("@mui/material").PaperOwnProps, "classes" | "color" | "position"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "color" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    sticky?: boolean | undefined;
-}, {}, {}>;
-export declare const WalletButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & 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" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const DrawerWalletContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-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',
-    },
-}));
-exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(() => ({
-    width: '100%',
-    display: 'flex',
-    justifyItems: 'start',
-    '& > button': {
-        marginLeft: '-0.5rem',
-    },
-}));

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const NavigationHeader: React.FC;

package/cjs/components/Header/NavigationHeader.js

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationHeader = 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");
-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 WalletHeader_1 = require("./WalletHeader");
-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 { 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.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)(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] }));
-};
-exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/NavigationTabs.js

@@ -1,26 +0,0 @@
-"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 NavigationTabs_style_1 = require("./NavigationTabs.style");
-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)(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 })] }) }));
-};
-exports.NavigationTabs = NavigationTabs;

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { StyledComponent } from '@emotion/styled';
-import type { TabsProps } from '@mui/material';
-export declare const NavbarTabs: StyledComponent<TabsProps>;
-export declare const NavbarTab: StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "label" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: import("react").ElementType<any> | undefined;
-}, {}, {}>;

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

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarTab = exports.NavbarTabs = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.NavbarTabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.background.paper
-        : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
-    borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
-    padding: theme.spacing(0.5),
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    height: 56,
-    [`.${material_1.tabsClasses.flexContainer}`]: {
-        alignItems: 'center',
-    },
-    [`.${material_1.tabsClasses.scroller}`]: {
-        overflow: 'initial !important',
-    },
-    [`.${material_1.tabsClasses.indicator}`]: {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        height: 48,
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.background.default
-            : theme.palette.common.white,
-        borderRadius: theme.shape.borderRadiusSecondary,
-        boxShadow: `0px 2px 4px ${(0, styles_1.alpha)(theme.palette.common.black, 0.04)}`,
-    },
-}));
-exports.NavbarTab = (0, styles_1.styled)(material_1.Tab, {
-    shouldForwardProp: (prop) => prop !== 'isDarkMode',
-})(({ theme }) => ({
-    zIndex: 1,
-    display: 'flex',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-    textTransform: 'none',
-    height: 48,
-    minHeight: 48,
-    fontSize: '1rem',
-    fontWeight: 700,
-    color: theme.palette.mode === 'dark'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-    textDecoration: 'none',
-    [`&.${material_1.tabClasses.selected}`]: {
-        color: theme.palette.mode === 'dark'
-            ? theme.palette.common.white
-            : theme.palette.common.black,
-        backgroundColor: 'transparent',
-    },
-    [`.${material_1.tabClasses.iconWrapper}`]: {
-        margin: theme.spacing(0, 1, 0, 0),
-    },
-}));