@lifi/widget 3.7.0 → 3.8.0-beta.0

package/src/components/GasMessage/GasSufficiencyMessage.tsx

@@ -0,0 +1,43 @@
+import { EvStation } from '@mui/icons-material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { AlertMessage } from '../AlertMessage/AlertMessage.js'
+
+interface GasSufficiencyMessageProps {
+  insufficientGas?: GasSufficiency[]
+}
+
+export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
+  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>
+  )
+}

package/src/components/Header/BackButton.tsx

@@ -0,0 +1,17 @@
+import { ArrowBack } from '@mui/icons-material'
+import type { IconButtonProps } from '@mui/material'
+import { IconButton, useTheme } from '@mui/material'
+
+export const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme()
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'start' : false}
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -0,0 +1,30 @@
+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'
+
+interface CloseDrawerButtonProps {
+  header?: 'navigation' | 'wallet'
+}
+
+export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
+  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
+}

package/src/components/Header/DisconnectIconButton.tsx

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

package/src/components/Header/Header.style.ts

@@ -0,0 +1,100 @@
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  buttonClasses,
+  styled,
+} from '@mui/material'
+import type { WidgetSubvariant } from '../../types/widget.js'
+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',
+})<{ sticky?: boolean }>(({ 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?: WidgetSubvariant }>(({ 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,
+}))

package/src/components/Header/Header.tsx

@@ -0,0 +1,59 @@
+import type { FC, PropsWithChildren } from 'react'
+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: FC<PropsWithChildren> = ({ children }) => {
+  const { pathname } = useLocation()
+  const elementId = useDefaultElementId()
+  const headerRef = useRef<HTMLDivElement>(null)
+  const { setHeaderHeight } = useSetHeaderHeight()
+
+  useLayoutEffect(() => {
+    const handleHeaderResize = () => {
+      const height = headerRef.current?.getBoundingClientRect().height
+
+      if (height) {
+        setHeaderHeight(height)
+      }
+    }
+
+    let resizeObserver: 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: FC = () => {
+  return (
+    <HeaderContainer>
+      <WalletHeader />
+      <NavigationHeader />
+    </HeaderContainer>
+  )
+}

package/src/components/Header/NavigationHeader.tsx

@@ -0,0 +1,80 @@
+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: React.FC = () => {
+  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}
+    </>
+  )
+}

package/src/components/Header/NavigationTabs.tsx

@@ -0,0 +1,35 @@
+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 = (_: React.SyntheticEvent, value: number) => {
+    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>
+  )
+}

package/src/components/Header/SettingsButton.style.tsx

@@ -0,0 +1,50 @@
+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%)',
+  },
+}))
+
+interface SettingsIconButtonProps {
+  variant?: 'info' | 'warning'
+}
+
+export const SettingsIconButton = styled(IconButton, {
+  shouldForwardProp: (props) => props !== 'variant',
+})<SettingsIconButtonProps>(({ 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
+  }
+})

package/src/components/Header/SettingsButton.tsx

@@ -0,0 +1,46 @@
+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>
+  )
+}

package/src/components/Header/TransactionHistoryButton.tsx

@@ -0,0 +1,21 @@
+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>
+  )
+}

package/src/components/Header/WalletHeader.tsx

@@ -0,0 +1,166 @@
+import type { Account } from '@lifi/wallet-management'
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@lifi/wallet-management'
+import { ExpandMore, Wallet } from '@mui/icons-material'
+import { Avatar, Badge } from '@mui/material'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { CloseDrawerButton } from './CloseDrawerButton.js'
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletAvatar,
+  WalletButton,
+} from './Header.style.js'
+import { WalletMenu } from './WalletMenu.js'
+import { WalletMenuContainer } from './WalletMenu.style.js'
+
+export const WalletHeader: React.FC = () => {
+  const { subvariant, hiddenUI } = useWidgetConfig()
+  const { hasExternalProvider } = useHasExternalWalletProvider()
+  return !hasExternalProvider &&
+    subvariant !== 'split' &&
+    !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
+      <WalletMenuButton />
+    </HeaderAppBar>
+  ) : null
+}
+
+export const SplitWalletMenuButton: React.FC = () => {
+  const { hiddenUI } = useWidgetConfig()
+  const { hasExternalProvider } = useHasExternalWalletProvider()
+  return !hasExternalProvider && !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+    <WalletMenuButton />
+  ) : null
+}
+
+export const WalletMenuButton: React.FC = () => {
+  const { account } = useAccount()
+  const { variant, hiddenUI } = useWidgetConfig()
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {account.isConnected ? (
+          <ConnectedButton account={account} />
+        ) : (
+          <ConnectButton />
+        )}
+        {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+          <CloseDrawerButton header="wallet" />
+        ) : null}
+      </DrawerWalletContainer>
+    )
+  }
+  return account.isConnected ? (
+    <ConnectedButton account={account} />
+  ) : (
+    <ConnectButton />
+  )
+}
+
+const ConnectButton = () => {
+  const { t } = useTranslation()
+  const { walletConfig, subvariant, variant } = useWidgetConfig()
+  const { openWalletMenu } = useWalletMenu()
+  const connect = async () => {
+    if (walletConfig?.onConnect) {
+      walletConfig.onConnect()
+      return
+    }
+    openWalletMenu()
+  }
+
+  return (
+    <WalletButton
+      subvariant={subvariant}
+      endIcon={
+        variant !== 'drawer' && subvariant !== 'split' ? <Wallet /> : undefined
+      }
+      startIcon={
+        variant === 'drawer' || subvariant === 'split' ? (
+          <Wallet sx={{ marginLeft: -0.25 }} />
+        ) : undefined
+      }
+      onClick={connect}
+    >
+      {t('button.connectWallet')}
+    </WalletButton>
+  )
+}
+
+const ConnectedButton = ({ account }: { account: Account }) => {
+  const { subvariant } = useWidgetConfig()
+  const { chain } = useChain(account.chainId)
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const walletAddress = shortenAddress(account.address)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <WalletButton
+        subvariant={subvariant}
+        endIcon={<ExpandMore />}
+        startIcon={
+          chain?.logoURI ? (
+            <Badge
+              overlap="circular"
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              badgeContent={
+                <SmallAvatar
+                  src={chain?.logoURI}
+                  alt={chain?.name}
+                  sx={{ width: 12, height: 12 }}
+                >
+                  {chain?.name[0]}
+                </SmallAvatar>
+              }
+            >
+              <WalletAvatar
+                src={getConnectorIcon(account.connector)}
+                alt={account.connector?.name}
+              >
+                {account.connector?.name[0]}
+              </WalletAvatar>
+            </Badge>
+          ) : (
+            <Avatar
+              src={getConnectorIcon(account.connector)}
+              alt={account.connector?.name}
+              sx={{ width: 24, height: 24 }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
+          )
+        }
+        onClick={handleClick}
+      >
+        {walletAddress}
+      </WalletButton>
+      <WalletMenuContainer
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <WalletMenu onClose={handleClose} />
+      </WalletMenuContainer>
+    </>
+  )
+}