@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/components/ChainSelect/useChainSelect.js

@@ -1,42 +0,0 @@
-import { useController, useFormContext } from 'react-hook-form';
-import { useChains, useSwapOnly } from '../../hooks';
-import { FormKey, FormKeyHelper } from '../../providers';
-import { useChainOrder } from '../../stores';
-export const useChainSelect = (formType) => {
-    const chainKey = FormKeyHelper.getChainKey(formType);
-    const { field: { onChange, onBlur }, } = useController({ name: chainKey });
-    const { setValue } = useFormContext();
-    const { chains, isLoading } = useChains();
-    const [chainOrder, setChainOrder] = useChainOrder();
-    const swapOnly = 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(FormKeyHelper.getChainKey('to'), chainId, {
-                shouldTouch: true,
-            });
-        }
-        setValue(FormKeyHelper.getTokenKey(formType), '');
-        setValue(FormKeyHelper.getAmountKey(formType), '');
-        setValue(FormKey.TokenSearchFilter, '');
-        setChainOrder(chainId);
-    };
-    return {
-        chainOrder,
-        chains,
-        getChains,
-        isLoading,
-        setChainOrder,
-        setCurrentChain,
-    };
-};

package/components/ContractComponent/ContractComponent.d.ts

@@ -1,3 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-export declare const ContractComponent: React.FC<PropsWithChildren<BoxProps>>;

package/components/ContractComponent/ContractComponent.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '../Card';
-export const ContractComponent = ({ children, ...props }) => {
-    if (!children) {
-        return null;
-    }
-    return _jsx(Card, { ...props, children: children });
-};

package/components/ContractComponent/index.js

@@ -1 +0,0 @@
-export * from './ContractComponent';

package/components/Dialog.d.ts

@@ -1,24 +0,0 @@
-import type { DialogProps, Theme } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-export declare const modalProps: {
-    sx: {
-        position: string;
-        overflow: string;
-    };
-};
-export declare const paperProps: {
-    sx: (theme: Theme) => {
-        position: string;
-        backgroundImage: string;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-    };
-};
-export declare const backdropProps: {
-    sx: {
-        position: string;
-        backgroundColor: string;
-        backdropFilter: string;
-    };
-};
-export declare const Dialog: React.FC<PropsWithChildren<DialogProps>>;

package/components/Dialog.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Dialog as MuiDialog } from '@mui/material';
-import { useGetScrollableContainer } from '../hooks';
-export const modalProps = {
-    sx: {
-        position: 'absolute',
-        overflow: 'hidden',
-    },
-};
-export const paperProps = {
-    sx: (theme) => ({
-        position: 'absolute',
-        backgroundImage: 'none',
-        borderTopLeftRadius: theme.shape.borderRadius,
-        borderTopRightRadius: theme.shape.borderRadius,
-    }),
-};
-export const backdropProps = {
-    sx: {
-        position: 'absolute',
-        backgroundColor: 'rgb(0 0 0 / 32%)',
-        backdropFilter: 'blur(3px)',
-    },
-};
-export const Dialog = ({ children, open, onClose, }) => {
-    const getContainer = useGetScrollableContainer();
-    return (_jsx(MuiDialog, { container: getContainer, open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps, children: children }));
-};

package/components/GasMessage/FundsSufficiencyMessage.d.ts

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

package/components/GasMessage/FundsSufficiencyMessage.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { WarningMessageCard, WarningMessageCardTitle, } from './GasMessage.style';
-export const FundsSufficiencyMessage = () => {
-    const { t } = useTranslation();
-    return (_jsxs(WarningMessageCard, { display: "flex", children: [_jsx(WarningMessageCardTitle, { children: _jsx(WarningRoundedIcon, { sx: {
-                        marginTop: 2,
-                        marginLeft: 2,
-                    } }) }), _jsx(Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`warning.message.insufficientFunds`) })] }));
-};

package/components/GasMessage/GasMessage.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { Route } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-interface GasMessageProps extends BoxProps {
-    route?: Route;
-}
-export declare const GasMessage: React.FC<GasMessageProps>;
-export {};

package/components/GasMessage/GasMessage.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Collapse } from '@mui/material';
-import { useFromTokenSufficiency, useGasSufficiency } from '../../hooks';
-import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
-import { GasSufficiencyMessage } from './GasSufficiencyMessage';
-export const GasMessage = ({ route, ...props }) => {
-    const { insufficientGas } = useGasSufficiency(route);
-    const { insufficientFromToken } = useFromTokenSufficiency(route);
-    const validInsufficientGas = insufficientGas?.length;
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFromToken || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFromToken ? (_jsx(FundsSufficiencyMessage, {})) : validInsufficientGas ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
-};

package/components/GasMessage/GasMessage.style.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-export declare const WarningMessageCard: 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>, {}, {}>;
-export declare const WarningMessageCardTitle: 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>, {}, {}>;
-export declare const InfoMessageCard: 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>, {}, {}>;
-export declare const InfoMessageCardTitle: 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>, {}, {}>;
-export declare const InfoMessageSwitch: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/GasMessage/GasMessage.style.js

@@ -1,45 +0,0 @@
-import { Box } from '@mui/material';
-import { switchClasses } from '@mui/material/Switch';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
-import { Switch } from '../Switch';
-const MessageCard = styled(Box)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
-    position: 'relative',
-    whiteSpace: 'pre-line',
-}));
-export const WarningMessageCard = styled(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? alpha(theme.palette.warning.main, 0.32)
-        : alpha(theme.palette.warning.main, 0.16),
-}));
-export const WarningMessageCardTitle = styled(Box)(({ theme }) => ({
-    color: theme.palette.mode === 'light'
-        ? darken(theme.palette.warning.main, 0.36)
-        : alpha(theme.palette.warning.main, 1),
-}));
-export const InfoMessageCard = styled(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? alpha(theme.palette.info.main, 0.12)
-        : alpha(theme.palette.info.main, 0.16),
-}));
-export const InfoMessageCardTitle = styled(Box)(({ theme }) => ({
-    color: theme.palette.mode === 'light'
-        ? theme.palette.info.main
-        : lighten(theme.palette.info.main, 0.24),
-}));
-export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
-    [`.${switchClasses.switchBase}`]: {
-        [`&.${switchClasses.checked}`]: {
-            [`& + .${switchClasses.track}`]: {
-                backgroundColor: theme.palette.mode === 'light'
-                    ? theme.palette.info.main
-                    : alpha(theme.palette.info.main, 0.84),
-            },
-        },
-        [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-            color: theme.palette.mode === 'light'
-                ? theme.palette.info.main
-                : alpha(theme.palette.info.main, 0.84),
-        },
-    },
-}));

package/components/GasMessage/GasRefuelMessage.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { BoxProps } from '@mui/material';
-export declare const GasRefuelMessage: React.FC<BoxProps>;

package/components/GasMessage/GasRefuelMessage.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import EvStationIcon from '@mui/icons-material/EvStation';
-import { Box, Collapse, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useGasRefuel } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { InfoMessageCard, InfoMessageCardTitle, InfoMessageSwitch, } from './GasMessage.style';
-export const GasRefuelMessage = (props) => {
-    const { t } = useTranslation();
-    const setValue = useSettingsStore((state) => state.setValue);
-    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-    const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel();
-    const onChange = (_, checked) => {
-        setValue('enabledAutoRefuel', checked);
-    };
-    const showGasRefuelMessage = chain && enabled && !isRefuelLoading;
-    return (_jsx(Collapse, { timeout: 225, in: showGasRefuelMessage, unmountOnExit: true, mountOnEnter: true, children: _jsxs(InfoMessageCard, { ...props, children: [_jsxs(InfoMessageCardTitle, { display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(EvStationIcon, { sx: {
-                                        marginRight: 1,
-                                    } }), _jsx(Typography, { variant: "body2", fontWeight: 700, children: t(`info.title.autoRefuel`) })] }), _jsx(InfoMessageSwitch, { checked: enabledAutoRefuel, onChange: onChange })] }), _jsx(Collapse, { timeout: 225, in: enabledAutoRefuel, unmountOnExit: true, mountOnEnter: true, children: _jsx(Typography, { variant: "body2", px: 2, pb: 2, children: t(`info.message.autoRefuel`, {
-                            chainName: chain?.name,
-                        }) }) })] }) }));
-};

package/components/GasMessage/GasSufficiencyMessage.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { GasSufficiency } from '../../hooks';
-interface GasSufficiencyMessageProps {
-    insufficientGas?: GasSufficiency[];
-}
-export declare const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps>;
-export {};

package/components/GasMessage/GasSufficiencyMessage.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import EvStationIcon from '@mui/icons-material/EvStation';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { WarningMessageCard, WarningMessageCardTitle, } from './GasMessage.style';
-export const GasSufficiencyMessage = ({ insufficientGas, }) => {
-    const { t } = useTranslation();
-    return (_jsxs(WarningMessageCard, { children: [_jsxs(WarningMessageCardTitle, { display: "flex", alignItems: "center", px: 2, pt: 2, children: [_jsx(EvStationIcon, { sx: {
-                            marginRight: 1,
-                        } }), _jsx(Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), _jsx(Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => (_jsx(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)))] }));
-};

package/components/GasMessage/index.js

@@ -1,2 +0,0 @@
-export * from './GasMessage';
-export * from './GasRefuelMessage';

package/components/Header/Header.d.ts

@@ -1,3 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-export declare const HeaderContainer: FC<PropsWithChildren<{}>>;
-export declare const Header: FC;

package/components/Header/Header.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLocation } from 'react-router-dom';
-import { useDefaultElementId } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
-import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
-import { Container } from './Header.style';
-import { NavigationHeader } from './NavigationHeader';
-import { WalletHeader } from './WalletHeader';
-export const HeaderContainer = ({ children }) => {
-    const { pathname } = useLocation();
-    const elementId = useDefaultElementId();
-    return (_jsx(Container, { id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)), children: children }));
-};
-export const Header = () => {
-    const { walletManagement, subvariant, hiddenUI } = useWidgetConfig();
-    return (_jsxs(HeaderContainer, { children: [!walletManagement &&
-                subvariant !== 'split' &&
-                !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletHeader, {})) : null, _jsx(NavigationHeader, {})] }));
-};

package/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/components/Header/Header.style.js

@@ -1,53 +0,0 @@
-import { AppBar, Box, Button } from '@mui/material';
-import { buttonClasses } from '@mui/material/Button';
-import { alpha, styled } from '@mui/material/styles';
-export const HeaderAppBar = styled(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),
-    },
-}));
-export const Container = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'sticky',
-})(({ theme, sticky }) => ({
-    backgroundColor: theme.palette.background.default,
-    backdropFilter: 'blur(12px)',
-    position: sticky ? 'sticky' : 'relative',
-    top: 0,
-    zIndex: 1200,
-}));
-export const WalletButton = styled(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'
-            ? alpha(theme.palette.common.black, 0.04)
-            : alpha(theme.palette.common.white, 0.08),
-    },
-    [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
-        fontSize: '24px',
-    },
-    [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
-        fontSize: '24px',
-    },
-}));
-export const DrawerWalletContainer = styled(Box)(() => ({
-    width: '100%',
-    display: 'flex',
-    justifyItems: 'start',
-    '& > button': {
-        marginLeft: '-0.5rem',
-    },
-}));

package/components/Header/NavigationHeader.d.ts

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

package/components/Header/NavigationHeader.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { Box, IconButton, Tooltip, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Route, Routes, useLocation } from 'react-router-dom';
-import { useNavigateBack } from '../../hooks';
-import { useWallet, useWidgetConfig } from '../../providers';
-import { useHeaderStore } from '../../stores';
-import { HiddenUI } from '../../types';
-import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
-import { HeaderAppBar } from './Header.style';
-import { NavigationTabs } from './NavigationTabs';
-import { WalletMenuButton } from './WalletHeader';
-export const NavigationHeader = () => {
-    const { t } = useTranslation();
-    const { subvariant, hiddenUI, variant } = useWidgetConfig();
-    const { navigate, navigateBack } = useNavigateBack();
-    const { account } = useWallet();
-    const { element, title } = useHeaderStore((state) => state);
-    const { pathname } = useLocation();
-    const cleanedPathname = pathname.endsWith('/')
-        ? pathname.slice(0, -1)
-        : pathname;
-    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
-    const hasPath = navigationRoutesValues.includes(path);
-    const splitSubvariant = subvariant === 'split' && !hasPath;
-    const handleHeaderTitle = () => {
-        switch (path) {
-            case navigationRoutes.selectWallet:
-                return t(`header.selectWallet`);
-            case navigationRoutes.settings:
-                return t(`header.settings`);
-            case navigationRoutes.bridges:
-                return t(`settings.enabledBridges`);
-            case navigationRoutes.exchanges:
-                return t(`settings.enabledExchanges`);
-            case navigationRoutes.transactionHistory:
-                return t(`header.transactionHistory`);
-            case navigationRoutes.fromToken: {
-                if (subvariant === 'nft') {
-                    return t(`header.payWith`);
-                }
-                return t(`header.from`);
-            }
-            case navigationRoutes.toToken:
-                return t(`header.to`);
-            case navigationRoutes.fromChain:
-            case navigationRoutes.toChain:
-            case navigationRoutes.toTokenNative:
-                return t(`header.selectChain`);
-            case navigationRoutes.routes:
-                return t(`header.youGet`);
-            case navigationRoutes.activeTransactions:
-                return t(`header.activeTransactions`);
-            case navigationRoutes.transactionExecution: {
-                if (subvariant === 'nft') {
-                    return t(`header.purchase`);
-                }
-                return t(`header.exchange`);
-            }
-            case 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 (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(Box, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
-                                                    marginRight: -1.25,
-                                                }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
-};

package/components/Header/NavigationTabs.d.ts

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

package/components/Header/NavigationTabs.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { FormKey } from '../../providers';
-import { useSplitSubvariantStore } from '../../stores';
-import { HeaderAppBar } from './Header.style';
-import { NavbarTab, NavbarTabs } from './NavigationTabs.style';
-export const NavigationTabs = () => {
-    const { t } = useTranslation();
-    const [state, setState] = useSplitSubvariantStore((state) => [
-        state.state,
-        state.setState,
-    ]);
-    const { setValue } = useFormContext();
-    const handleChange = (_, value) => {
-        setValue(FormKey.FromAmount, '');
-        setValue(FormKey.FromToken, '');
-        setValue(FormKey.ToToken, '');
-        setState(value === 0 ? 'swap' : 'bridge');
-    };
-    return (_jsx(HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: _jsxs(NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [_jsx(NavbarTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));
-};

package/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/components/Header/NavigationTabs.style.js

@@ -1,58 +0,0 @@
-import { Tab, Tabs, tabClasses, tabsClasses } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-export const NavbarTabs = styled(Tabs)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.background.paper
-        : 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,
-    [`.${tabsClasses.flexContainer}`]: {
-        alignItems: 'center',
-    },
-    [`.${tabsClasses.scroller}`]: {
-        overflow: 'initial !important',
-    },
-    [`.${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 ${alpha(theme.palette.common.black, 0.04)}`,
-    },
-}));
-export const NavbarTab = styled(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',
-    [`&.${tabClasses.selected}`]: {
-        color: theme.palette.mode === 'dark'
-            ? theme.palette.common.white
-            : theme.palette.common.black,
-        backgroundColor: 'transparent',
-    },
-    [`.${tabClasses.iconWrapper}`]: {
-        margin: theme.spacing(0, 1, 0, 0),
-    },
-}));

package/components/Header/WalletHeader.d.ts

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