@lifi/widget 3.7.0-beta.10 → 3.7.0-beta.12

package/dist/esm/components/GasMessage/GasRefuelMessage.jsx

@@ -0,0 +1,35 @@
+import { EvStation } from '@mui/icons-material';
+import { Box, Collapse, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useGasRefuel } from '../../hooks/useGasRefuel.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+import { InfoMessageSwitch } from './GasMessage.style.js';
+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 (<Collapse timeout={225} in={showGasRefuelMessage} unmountOnExit mountOnEnter>
+      <AlertMessage icon={<EvStation />} title={<Box display="flex" alignItems="center" justifyContent="space-between" flexGrow={1}>
+            <Typography variant="body2" fontWeight={700}>
+              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}
+            </Typography>
+            <InfoMessageSwitch checked={enabledAutoRefuel} onChange={onChange}/>
+          </Box>} {...props}>
+        <Collapse timeout={225} in={enabledAutoRefuel} unmountOnExit mountOnEnter>
+          <Typography variant="body2" px={2} pt={1}>
+            {t('info.message.autoRefuel', {
+            chainName: chain?.name,
+        })}
+          </Typography>
+        </Collapse>
+      </AlertMessage>
+    </Collapse>);
+};
+//# sourceMappingURL=GasRefuelMessage.jsx.map

package/dist/esm/components/GasMessage/GasRefuelMessage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasRefuelMessage.jsx","sourceRoot":"","sources":["../../../../src/components/GasMessage/GasRefuelMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAA;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAuB,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAC5D,MAAM,EAAE,iBAAiB,EAAE,GAAG,WAAW,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEhE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,YAAY,EAAE,CAAA;IAErE,MAAM,QAAQ,GAAG,CAAC,CAAgC,EAAE,OAAgB,EAAE,EAAE;QACtE,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,KAAK,IAAI,OAAO,IAAI,CAAC,eAAe,CAAA;IAEjE,OAAO,CACL,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,GAAG,CAAC,CACb,EAAE,CAAC,CAAC,oBAAoB,CAAC,CACzB,aAAa,CACb,YAAY,CAEZ;MAAA,CAAC,YAAY,CACX,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC,CACpB,KAAK,CAAC,CACJ,CAAC,GAAG,CACF,OAAO,CAAC,MAAM,CACd,UAAU,CAAC,QAAQ,CACnB,cAAc,CAAC,eAAe,CAC9B,QAAQ,CAAC,CAAC,CAAC,CAAC,CAEZ;YAAA,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAC1C;cAAA,CAAC,CAAC,CAAC,uBAAuB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC,CAC/D;YAAA,EAAE,UAAU,CACZ;YAAA,CAAC,iBAAiB,CAChB,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAEvB;UAAA,EAAE,GAAG,CACP,CAAC,CACD,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,GAAG,CAAC,CACb,EAAE,CAAC,CAAC,iBAAiB,CAAC,CACtB,aAAa,CACb,YAAY,CAEZ;UAAA,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACvC;YAAA,CAAC,CAAC,CAAC,yBAAyB,EAAE;YAC5B,SAAS,EAAE,KAAK,EAAE,IAAI;SACvB,CAAC,CACJ;UAAA,EAAE,UAAU,CACd;QAAA,EAAE,QAAQ,CACZ;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/GasMessage/GasSufficiencyMessage.d.ts

@@ -0,0 +1,6 @@
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js';
+interface GasSufficiencyMessageProps {
+    insufficientGas?: GasSufficiency[];
+}
+export declare const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps>;
+export {};

package/dist/esm/components/GasMessage/GasSufficiencyMessage.jsx

@@ -0,0 +1,23 @@
+import { EvStation } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+export const GasSufficiencyMessage = ({ insufficientGas, }) => {
+    const { t } = useTranslation();
+    return (<AlertMessage severity="warning" icon={<EvStation />} title={<Typography variant="body2" fontWeight={700}>
+          {t('warning.title.insufficientGas')}
+        </Typography>}>
+      <Typography variant="body2" px={2} pt={1}>
+        {t('warning.message.insufficientGas')}
+      </Typography>
+      {insufficientGas?.map((item, index) => (<Typography key={index} variant="body2" px={2} pt={0.5}>
+          {t('main.tokenOnChainAmount', {
+                amount: formatUnits(item.insufficientAmount ?? 0n, item.token.decimals),
+                tokenSymbol: item.token.symbol,
+                chainName: item.chain?.name,
+            })}
+        </Typography>))}
+    </AlertMessage>);
+};
+//# sourceMappingURL=GasSufficiencyMessage.jsx.map

package/dist/esm/components/GasMessage/GasSufficiencyMessage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasSufficiencyMessage.jsx","sourceRoot":"","sources":["../../../../src/components/GasMessage/GasSufficiencyMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAM9D,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,CAAC,YAAY,CACX,QAAQ,CAAC,SAAS,CAClB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC,CACpB,KAAK,CAAC,CACJ,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAC1C;UAAA,CAAC,CAAC,CAAC,+BAA+B,CAAC,CACrC;QAAA,EAAE,UAAU,CACd,CAAC,CAED;MAAA,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACvC;QAAA,CAAC,CAAC,CAAC,iCAAiC,CAAC,CACvC;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CACrD;UAAA,CAAC,CAAC,CAAC,yBAAyB,EAAE;gBAC5B,MAAM,EAAE,WAAW,CACjB,IAAI,CAAC,kBAAkB,IAAI,EAAE,EAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,CACpB;gBACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;gBAC9B,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI;aAC5B,CAAC,CACJ;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CACJ;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/BackButton.d.ts

@@ -0,0 +1,2 @@
+import type { IconButtonProps } from '@mui/material';
+export declare const BackButton: React.FC<IconButtonProps>;

package/dist/esm/components/Header/BackButton.jsx

@@ -0,0 +1,9 @@
+import { ArrowBack } from '@mui/icons-material';
+import { IconButton, useTheme } from '@mui/material';
+export const BackButton = ({ onClick }) => {
+    const theme = useTheme();
+    return (<IconButton size="medium" edge={theme?.navigation?.edge ? 'start' : false} onClick={onClick}>
+      <ArrowBack />
+    </IconButton>);
+};
+//# sourceMappingURL=BackButton.jsx.map

package/dist/esm/components/Header/BackButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.jsx","sourceRoot":"","sources":["../../../../src/components/Header/BackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEpD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,QAAQ,CACb,IAAI,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAChD,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;MAAA,CAAC,SAAS,CAAC,AAAD,EACZ;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/CloseDrawerButton.d.ts

@@ -0,0 +1,5 @@
+interface CloseDrawerButtonProps {
+    header?: 'navigation' | 'wallet';
+}
+export declare const CloseDrawerButton: ({ header }: CloseDrawerButtonProps) => import("react").JSX.Element | null;
+export {};

package/dist/esm/components/Header/CloseDrawerButton.jsx

@@ -0,0 +1,20 @@
+import { CloseRounded } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useDrawer } from '../../AppDrawerContext.js';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+export const CloseDrawerButton = ({ header }) => {
+    const { t } = useTranslation();
+    const { subvariant } = useWidgetConfig();
+    const { closeDrawer } = useDrawer();
+    const { hasExternalProvider } = useHasExternalWalletProvider();
+    const showInNavigationHeader = header === 'navigation' && (hasExternalProvider || subvariant === 'split');
+    const showInWalletHeader = header === 'wallet' && subvariant !== 'split';
+    return showInNavigationHeader || showInWalletHeader ? (<Tooltip title={t('button.close')}>
+      <IconButton size="medium" onClick={closeDrawer}>
+        <CloseRounded />
+      </IconButton>
+    </Tooltip>) : null;
+};
+//# sourceMappingURL=CloseDrawerButton.jsx.map

package/dist/esm/components/Header/CloseDrawerButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseDrawerButton.jsx","sourceRoot":"","sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,gEAAgE,CAAA;AAC7G,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAMlF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAA0B,EAAE,EAAE;IACtE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAA;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAA;IACnC,MAAM,EAAE,mBAAmB,EAAE,GAAG,4BAA4B,EAAE,CAAA;IAE9D,MAAM,sBAAsB,GAC1B,MAAM,KAAK,YAAY,IAAI,CAAC,mBAAmB,IAAI,UAAU,KAAK,OAAO,CAAC,CAAA;IAE5E,MAAM,kBAAkB,GAAG,MAAM,KAAK,QAAQ,IAAI,UAAU,KAAK,OAAO,CAAA;IAExE,OAAO,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpD,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAChC;MAAA,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAC7C;QAAA,CAAC,YAAY,CAAC,AAAD,EACf;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,OAAO,CAAC,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/dist/esm/components/Header/DisconnectIconButton.d.ts

@@ -0,0 +1,4 @@
+import { type Account } from '@lifi/wallet-management';
+export declare const DisconnectIconButton: ({ account }: {
+    account: Account;
+}) => import("react").JSX.Element;

package/dist/esm/components/Header/DisconnectIconButton.jsx

@@ -0,0 +1,13 @@
+import { useAccountDisconnect } from '@lifi/wallet-management';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+export const DisconnectIconButton = ({ account }) => {
+    const disconnect = useAccountDisconnect();
+    return (<IconButton size="medium" onClick={async (e) => {
+            e.stopPropagation();
+            await disconnect(account);
+        }}>
+      <PowerSettingsNewRounded />
+    </IconButton>);
+};
+//# sourceMappingURL=DisconnectIconButton.jsx.map

package/dist/esm/components/Header/DisconnectIconButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisconnectIconButton.jsx","sourceRoot":"","sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE;IACxE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAA;IACzC,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,MAAM,UAAU,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC,CAAC,CAEF;MAAA,CAAC,uBAAuB,CAAC,AAAD,EAC1B;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/Header.d.ts

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

package/dist/esm/components/Header/Header.jsx

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
+import { Container } from './Header.style.js';
+import { NavigationHeader } from './NavigationHeader.js';
+import { WalletHeader } from './WalletHeader.js';
+export const HeaderContainer = ({ children }) => {
+    const { pathname } = useLocation();
+    const elementId = useDefaultElementId();
+    const headerRef = useRef(null);
+    const { setHeaderHeight } = useSetHeaderHeight();
+    useLayoutEffect(() => {
+        const handleHeaderResize = () => {
+            const height = headerRef.current?.getBoundingClientRect().height;
+            if (height) {
+                setHeaderHeight(height);
+            }
+        };
+        let resizeObserver;
+        if (headerRef.current) {
+            resizeObserver = new ResizeObserver(handleHeaderResize);
+            resizeObserver.observe(headerRef.current);
+        }
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [setHeaderHeight]);
+    return (<Container id={createElementId(ElementId.Header, elementId)} sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))} ref={headerRef}>
+      {children}
+    </Container>);
+};
+export const Header = () => {
+    return (<HeaderContainer>
+      <WalletHeader />
+      <NavigationHeader />
+    </HeaderContainer>);
+};
+//# sourceMappingURL=Header.jsx.map

package/dist/esm/components/Header/Header.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.jsx","sourceRoot":"","sources":["../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAA;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,MAAM,CAAA;YAEhE,IAAI,MAAM,EAAE,CAAC;gBACX,eAAe,CAAC,MAAM,CAAC,CAAA;YACzB,CAAC;QACH,CAAC,CAAA;QAED,IAAI,cAA8B,CAAA;QAElC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAA;YACvD,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE,CAAC;gBACnB,cAAc,CAAC,UAAU,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CACjD,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CACrE,GAAG,CAAC,CAAC,SAAS,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAO,GAAG,EAAE;IAC7B,OAAO,CACL,CAAC,eAAe,CACd;MAAA,CAAC,YAAY,CAAC,AAAD,EACb;MAAA,CAAC,gBAAgB,CAAC,AAAD,EACnB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/Header.style.d.ts

@@ -0,0 +1,23 @@
+import type { WidgetSubvariant } from '../../types/widget.js';
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<import("@mui/material").AppBarOwnProps & Omit<import("@mui/material").PaperOwnProps, "color" | "position" | "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, "color" | "position" | "children" | "sx" | "style" | "className" | "elevation" | "classes" | "variant" | "square" | "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?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    sticky?: boolean;
+}, {}, {}>;
+export declare const WalletButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "href" | "disabled" | "action" | "size" | "classes" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    subvariant?: WidgetSubvariant;
+}, {}, {}>;
+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?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HeaderControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "style" | "className" | "alt" | "src" | "sizes" | "srcSet" | "classes" | "variant" | "imgProps" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/Header/Header.style.js

@@ -0,0 +1,86 @@
+import { AppBar, Avatar, Box, Button, buttonClasses, styled, } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
+import { avatarMask12 } from '../Avatar/utils.js';
+export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    color: theme.palette.text.primary,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+}));
+export const Container = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'sticky',
+})(({ theme, sticky }) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.default,
+        backdropFilter: 'blur(12px)',
+        position: sticky ? 'sticky' : 'relative',
+        top: 0,
+        zIndex: 1200,
+        gap: theme.spacing(0.5),
+        padding: theme.spacing(1.5, 3, 1.5, 3),
+        overflow: 'auto',
+        ...theme.header,
+        ...(theme.header?.position === 'fixed'
+            ? {
+                minWidth: theme.breakpoints.values.xs,
+                maxWidth: theme.breakpoints.values.sm,
+                width: '100%',
+            }
+            : {}),
+    };
+});
+export const WalletButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'subvariant',
+})(({ subvariant, 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: getContrastAlphaColor(theme, 0.04),
+    },
+    [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
+    [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
+    ...(theme.navigation.edge && {
+        marginRight: subvariant === 'split' ? 0 : theme.spacing(-1.25),
+        marginLeft: subvariant === 'split' ? theme.spacing(-1) : 0,
+    }),
+}));
+export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    ...(theme.navigation.edge && {
+        '& button:first-of-type': {
+            marginLeft: theme.spacing(-1),
+        },
+        '& button:last-of-type': {
+            marginRight: theme.spacing(-1.25),
+        },
+    }),
+}));
+export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(0.5),
+    ...(theme.navigation.edge && {
+        '& button:last-of-type': {
+            marginRight: theme.spacing(-1.25),
+        },
+    }),
+}));
+export const WalletAvatar = styled(Avatar)(() => ({
+    mask: avatarMask12,
+    width: 24,
+    height: 24,
+}));
+//# sourceMappingURL=Header.style.js.map

package/dist/esm/components/Header/Header.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.style.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.style.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Header/NavigationHeader.d.ts

@@ -0,0 +1 @@
+export declare const NavigationHeader: React.FC;

package/dist/esm/components/Header/NavigationHeader.jsx

@@ -0,0 +1,50 @@
+import { useAccount } from '@lifi/wallet-management';
+import { Box, Typography } from '@mui/material';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
+import { HiddenUI } from '../../types/widget.js';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils/navigationRoutes.js';
+import { BackButton } from './BackButton.js';
+import { CloseDrawerButton } from './CloseDrawerButton.js';
+import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js';
+import { NavigationTabs } from './NavigationTabs.js';
+import { SettingsButton } from './SettingsButton.js';
+import { TransactionHistoryButton } from './TransactionHistoryButton.js';
+import { SplitWalletMenuButton } from './WalletHeader.js';
+export const NavigationHeader = () => {
+    const { subvariant, hiddenUI, variant } = useWidgetConfig();
+    const { navigateBack } = useNavigateBack();
+    const { account } = useAccount();
+    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;
+    return (<>
+      <HeaderAppBar elevation={0}>
+        {backButtonRoutes.includes(path) ? (<BackButton onClick={navigateBack}/>) : null}
+        {splitSubvariant ? (<Box flex={1}>
+            <SplitWalletMenuButton />
+          </Box>) : (<Typography fontSize={hasPath ? 18 : 24} align={hasPath ? 'center' : 'left'} fontWeight="700" flex={1} noWrap>
+            {title}
+          </Typography>)}
+        <Routes>
+          <Route path={navigationRoutes.home} element={<HeaderControlsContainer>
+                {account.isConnected &&
+                !hiddenUI?.includes(HiddenUI.History) ? (<TransactionHistoryButton />) : null}
+                <SettingsButton />
+                {variant === 'drawer' &&
+                !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (<CloseDrawerButton header="navigation"/>) : null}
+              </HeaderControlsContainer>}/>
+          <Route path="*" element={element || <Box width={28} height={40}/>}/>
+        </Routes>
+      </HeaderAppBar>
+      {splitSubvariant ? <NavigationTabs /> : null}
+    </>);
+};
+//# sourceMappingURL=NavigationHeader.jsx.map

package/dist/esm/components/Header/NavigationHeader.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHeader.jsx","sourceRoot":"","sources":["../../../../src/components/Header/NavigationHeader.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Header/NavigationTabs.d.ts

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

package/dist/esm/components/Header/NavigationTabs.jsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
+import { Tab, Tabs } from '../Tabs/Tabs.style.js';
+import { HeaderAppBar } from './Header.style.js';
+export const NavigationTabs = () => {
+    const { t } = useTranslation();
+    const [state, setState] = useSplitSubvariantStore((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setFieldValue } = useFieldActions();
+    const handleChange = (_, value) => {
+        setFieldValue('fromAmount', '');
+        setFieldValue('fromToken', '');
+        setFieldValue('toToken', '');
+        setState(value === 0 ? 'swap' : 'bridge');
+    };
+    return (<HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
+      <Tabs value={state === 'swap' ? 0 : 1} onChange={handleChange} aria-label="tabs" indicatorColor="primary">
+        <Tab label={t('header.swap')} disableRipple/>
+        <Tab label={t('header.bridge')} disableRipple/>
+      </Tabs>
+    </HeaderAppBar>);
+};
+//# sourceMappingURL=NavigationTabs.jsx.map

package/dist/esm/components/Header/NavigationTabs.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationTabs.jsx","sourceRoot":"","sources":["../../../../src/components/Header/NavigationTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAA;AAC1F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QAC3D,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,QAAQ;KACf,CAAC,CAAA;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAuB,EAAE,KAAa,EAAE,EAAE;QAC9D,aAAa,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;QAC/B,aAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAC9B,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAC5B,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,OAAO,CACL,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,CACpE;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAChC,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,UAAU,CAAC,MAAM,CACjB,cAAc,CAAC,SAAS,CAExB;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAC3C;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAC/C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/SettingsButton.d.ts

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

package/dist/esm/components/Header/SettingsButton.jsx

@@ -0,0 +1,28 @@
+import { Settings } from '@mui/icons-material';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { SettingsIconBadge, SettingsIconButton, } from './SettingsButton.style.js';
+export const SettingsButton = () => {
+    const { t } = useTranslation();
+    const { navigate } = useNavigateBack();
+    const { isCustomRouteSettings, isRouteSettingsWithWarnings } = useSettingMonitor();
+    const variant = isRouteSettingsWithWarnings
+        ? 'warning'
+        : isCustomRouteSettings
+            ? 'info'
+            : undefined;
+    const tooltipMessage = variant
+        ? t('tooltip.settingsModified')
+        : t('header.settings');
+    return (<Tooltip title={tooltipMessage}>
+      <SettingsIconButton size="medium" onClick={() => navigate(navigationRoutes.settings)} variant={variant}>
+        {variant ? (<SettingsIconBadge variant="dot" color={variant}>
+            <Settings />
+          </SettingsIconBadge>) : (<Settings />)}
+      </SettingsIconButton>
+    </Tooltip>);
+};
+//# sourceMappingURL=SettingsButton.jsx.map

package/dist/esm/components/Header/SettingsButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsButton.jsx","sourceRoot":"","sources":["../../../../src/components/Header/SettingsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,2BAA2B,CAAA;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAA;IAEtC,MAAM,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,GAC1D,iBAAiB,EAAE,CAAA;IAErB,MAAM,OAAO,GAAG,2BAA2B;QACzC,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,qBAAqB;YACrB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,cAAc,GAAG,OAAO;QAC5B,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC;QAC/B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;IAExB,OAAO,CACL,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAC7B;MAAA,CAAC,kBAAkB,CACjB,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CACnD,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAC9C;YAAA,CAAC,QAAQ,CAAC,AAAD,EACX;UAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC,CAAC,CAAC,CACF,CAAC,QAAQ,CAAC,AAAD,EAAG,CACb,CACH;MAAA,EAAE,kBAAkB,CACtB;IAAA,EAAE,OAAO,CAAC,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/SettingsButton.style.d.ts

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

package/dist/esm/components/Header/SettingsButton.style.jsx

@@ -0,0 +1,36 @@
+import { IconButton, Badge as MuiBadge, badgeClasses, darken, styled, } from '@mui/material';
+import { getInfoBackgroundColor, getWarningBackgroundColor, } from '../../utils/colors.js';
+export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.25),
+    [`.${badgeClasses.badge}`]: {
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        transform: 'translate(70%, -70%)',
+    },
+}));
+export const SettingsIconButton = styled(IconButton, {
+    shouldForwardProp: (props) => props !== 'variant',
+})(({ theme, variant }) => {
+    switch (variant) {
+        case 'info':
+            return {
+                backgroundColor: getInfoBackgroundColor(theme),
+                '&:hover': {
+                    backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+                },
+            };
+        case 'warning':
+            return {
+                backgroundColor: getWarningBackgroundColor(theme),
+                '&:hover': {
+                    backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+                },
+            };
+        default:
+            break;
+    }
+});
+//# sourceMappingURL=SettingsButton.style.jsx.map

package/dist/esm/components/Header/SettingsButton.style.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsButton.style.jsx","sourceRoot":"","sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,IAAI,QAAQ,EACjB,YAAY,EACZ,MAAM,EACN,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IACxB,CAAC,IAAI,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE;QAC1B,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAC,CAAA;AAMH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,EAAE;IACnD,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS;CAClD,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACjD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,MAAM;YACT,OAAO;gBACL,eAAe,EAAE,sBAAsB,CAAC,KAAK,CAAC;gBAC9C,SAAS,EAAE;oBACT,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;iBAC5D;aACF,CAAA;QACH,KAAK,SAAS;YACZ,OAAO;gBACL,eAAe,EAAE,yBAAyB,CAAC,KAAK,CAAC;gBACjD,SAAS,EAAE;oBACT,eAAe,EAAE,MAAM,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;iBAC/D;aACF,CAAA;QACH;YACE,MAAK;IACT,CAAC;AACH,CAAC,CAAC,CAAA"}

package/dist/esm/components/Header/TransactionHistoryButton.d.ts

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

package/dist/esm/components/Header/TransactionHistoryButton.jsx

@@ -0,0 +1,15 @@
+import { ReceiptLong } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+export const TransactionHistoryButton = () => {
+    const { t } = useTranslation();
+    const { navigate } = useNavigateBack();
+    return (<Tooltip title={t('header.transactionHistory')}>
+      <IconButton size="medium" onClick={() => navigate(navigationRoutes.transactionHistory)}>
+        <ReceiptLong />
+      </IconButton>
+    </Tooltip>);
+};
+//# sourceMappingURL=TransactionHistoryButton.jsx.map

package/dist/esm/components/Header/TransactionHistoryButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryButton.jsx","sourceRoot":"","sources":["../../../../src/components/Header/TransactionHistoryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAElE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAA;IAEtC,OAAO,CACL,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAC7C;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAE7D;QAAA,CAAC,WAAW,CAAC,AAAD,EACd;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,OAAO,CAAC,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/WalletHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const WalletHeader: React.FC;
+export declare const SplitWalletMenuButton: React.FC;
+export declare const WalletMenuButton: React.FC;