@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
49 lines • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 { SettingsButton } from './SettingsButton.js';
import { SplitNavigationTabs } from './SplitNavigationTabs.js';
import { TransactionHistoryButton } from './TransactionHistoryButton.js';
export const NavigationHeader = () => {
const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } = useWidgetConfig();
const { navigateBack } = useNavigateBack();
const { account } = useAccount();
const [element, title] = useHeaderStore((state) => [
state.element,
state.title,
]);
const { pathname } = useLocation();
const cleanedPathname = pathname.endsWith('/')
? pathname.slice(0, -1)
: pathname;
const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
const hasPath = navigationRoutesValues.includes(path);
// Show tabs when split is undefined (default tabs) or an object with defaultTab
// Hide tabs when split is a string ('bridge' or 'swap' - single mode)
const showSplitOptions = subvariant === 'split' &&
!hasPath &&
typeof subvariantOptions?.split !== 'string';
return (_jsxs(HeaderAppBar, { elevation: 0, sx: { paddingTop: 1, paddingBottom: 0.5 }, children: [backButtonRoutes.includes(path) ? (_jsx(BackButton, { onClick: () => navigateBack(
// From transaction details page, navigate to home page
path === navigationRoutes.transactionDetails
? navigationRoutes.home
: undefined) })) : null, showSplitOptions ? (_jsx(Box, { sx: { flex: 1, marginRight: 1 }, children: _jsx(SplitNavigationTabs, {}) })) : (_jsx(Typography, { align: hasPath ? 'center' : 'left', noWrap: defaultUI?.navigationHeaderTitleNoWrap ?? true, sx: {
fontSize: hasPath ? 18 : 24,
fontWeight: '700',
flex: 1,
}, children: title })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(HeaderControlsContainer, { children: [account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (_jsx(TransactionHistoryButton, {})), _jsx(SettingsButton, {}), variant === 'drawer' &&
!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (_jsx(CloseDrawerButton, { header: "navigation" })) : null] }) }), _jsx(Route, { path: "*", element: element || (_jsx(Box, { sx: {
width: 28,
height: 40,
} })) })] })] }));
};
//# sourceMappingURL=NavigationHeader.js.map