@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/FeeBreakdownTooltip.tsx

@@ -0,0 +1,68 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import type { TFunction } from 'i18next'
+import type { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { FeesBreakdown } from '../utils/fees.js'
+import { formatTokenAmount } from '../utils/format.js'
+
+interface FeeBreakdownTooltipProps {
+  gasCosts?: FeesBreakdown[]
+  feeCosts?: FeesBreakdown[]
+  gasless?: boolean
+  children: ReactElement<any, any>
+}
+
+export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
+  gasCosts,
+  feeCosts,
+  gasless,
+  children,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      title={
+        <Box>
+          {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}
+          {gasCosts?.length && !gasless ? (
+            <Box>
+              {t('main.fees.network')}
+              {getFeeBreakdownTypography(gasCosts, t)}
+            </Box>
+          ) : null}
+          {feeCosts?.length && !gasless ? (
+            <Box
+              sx={{
+                mt: 0.5,
+              }}
+            >
+              {t('main.fees.provider')}
+              {getFeeBreakdownTypography(feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      }
+      sx={{ cursor: 'help' }}
+    >
+      {children}
+    </Tooltip>
+  )
+}
+
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
+  fees.map((fee, index) => (
+    <Typography
+      color="inherit"
+      key={`${fee.token.address}${index}`}
+      sx={{
+        fontSize: 12,
+        fontWeight: '500',
+      }}
+    >
+      {t('format.currency', { value: fee.amountUSD })} (
+      {t('format.tokenAmount', {
+        value: formatTokenAmount(fee.amount, fee.token.decimals),
+      })}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ))

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

@@ -0,0 +1,67 @@
+import {
+  Badge,
+  Box,
+  CircularProgress as MuiCircularProgress,
+  IconButton as MuiIconButton,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(
+  Badge
+)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    padding: 0,
+    minWidth: 16,
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    backgroundColor: theme.vars.palette.background.paper,
+    boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,
+    top: -2,
+    left: 10,
+  },
+}))
+
+export const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(() => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}))
+
+export const ActivitiesIconButton: React.FC<
+  React.ComponentProps<typeof MuiIconButton> & { active?: boolean }
+> = styled(MuiIconButton, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>({
+  variants: [
+    {
+      props: { active: true },
+      style: ({ theme }) => ({
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+          '&:hover': {
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
+          },
+        }),
+      }),
+    },
+  ],
+})
+
+export const ProgressTrack: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)(({ theme }) => ({
+  position: 'absolute',
+  color: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.grey[800],
+  }),
+}))

package/src/components/Header/ActivitiesButton.tsx

@@ -0,0 +1,59 @@
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import HistoryIcon from '@mui/icons-material/History'
+import { Tooltip } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'
+import {
+  ActivitiesIconButton,
+  ErrorBadge,
+  IconContainer,
+  ProgressTrack,
+} from './ActivitiesButton.style.js'
+
+export const ActivitiesButton = (): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const indicator = useRouteExecutionIndicator()
+
+  return (
+    <Tooltip title={t('header.activities')}>
+      <ActivitiesIconButton
+        active={indicator.active || indicator.failed}
+        size="medium"
+        onClick={() => navigate({ to: navigationRoutes.activities })}
+        disableRipple={indicator.active || indicator.failed}
+      >
+        <ErrorBadge
+          invisible={!indicator.failed}
+          badgeContent={
+            <ErrorRounded color="error" sx={{ width: 20, height: 20 }} />
+          }
+          overlap="circular"
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <IconContainer>
+            {(indicator.active || indicator.failed) && (
+              <ProgressTrack
+                variant="determinate"
+                value={100}
+                size={40}
+                thickness={3}
+              />
+            )}
+            {indicator.active && (
+              <CircularProgressPending
+                size={40}
+                sx={{ position: 'absolute', top: -8, left: -8 }}
+              />
+            )}
+            <HistoryIcon />
+          </IconContainer>
+        </ErrorBadge>
+      </ActivitiesIconButton>
+    </Tooltip>
+  )
+}

package/src/components/Header/BackButton.tsx

@@ -0,0 +1,29 @@
+import ArrowBack from '@mui/icons-material/ArrowBack'
+import { IconButton, useTheme } from '@mui/material'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+
+export const BackButton: React.FC = () => {
+  const theme = useTheme()
+  const navigateBack = useNavigateBack()
+  const [backAction, executeBackAction] = useHeaderStore((state) => [
+    state.backAction,
+    state.executeBackAction,
+  ])
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'start' : false}
+      onClick={() => {
+        if (backAction) {
+          executeBackAction()
+        } else {
+          navigateBack()
+        }
+      }}
+    >
+      <ArrowBack />
+    </IconButton>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -0,0 +1,35 @@
+import CloseRounded from '@mui/icons-material/CloseRounded'
+import { IconButton, Tooltip } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDrawer } from '../../AppDrawerContext.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+
+interface CloseDrawerButtonProps {
+  header?: 'navigation' | 'wallet'
+}
+
+export const CloseDrawerButton = ({
+  header,
+}: CloseDrawerButtonProps): JSX.Element | null => {
+  const { t } = useTranslation()
+  const { closeDrawer } = useDrawer()
+  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
+
+  const showInNavigationHeader =
+    header === 'navigation' && useExternalWalletProvidersOnly
+
+  const showInWalletHeader = header === 'wallet'
+
+  return showInNavigationHeader || showInWalletHeader ? (
+    <Tooltip title={t('button.close')}>
+      <IconButton
+        size="medium"
+        data-testid="widget-close-drawer-button"
+        onClick={closeDrawer}
+      >
+        <CloseRounded />
+      </IconButton>
+    </Tooltip>
+  ) : null
+}

package/src/components/Header/DisconnectIconButton.tsx

@@ -0,0 +1,24 @@
+import { useAccountDisconnect } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
+import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
+
+export const DisconnectIconButton = ({
+  account,
+}: {
+  account: Account
+}): JSX.Element => {
+  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,126 @@
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  buttonClasses,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+import { getAvatarMask } from '../Avatar/utils.js'
+
+export const HeaderAppBar: React.FC<
+  React.ComponentProps<typeof AppBar> & { sticky?: boolean }
+> = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'transparent',
+  }),
+  color: theme.vars.palette.text.primary,
+  flexDirection: 'row',
+  alignItems: 'center',
+  position: 'relative',
+}))
+
+export const Container: React.FC<
+  React.ComponentProps<typeof Box> & { sticky?: boolean }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'sticky',
+})<{ sticky?: boolean }>(({ theme, sticky }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.vars.palette.background.default,
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 0, 3),
+    overflow: 'auto',
+    borderRadius: theme.container?.borderRadius ?? 0,
+    ...theme.header,
+    ...(theme.header?.position === 'fixed'
+      ? {
+          minWidth: theme.breakpoints.values.xs,
+          maxWidth: theme.breakpoints.values.sm,
+          width: '100%',
+        }
+      : {}),
+  }
+})
+
+export const WalletButton: React.FC<
+  React.ComponentProps<typeof Button> & { withOffset?: boolean }
+> = styled(Button, {
+  shouldForwardProp: (prop) => prop !== 'withOffset',
+})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({
+  color: theme.vars.palette.text.primary,
+  padding: theme.spacing(1, 1.5),
+  maxHeight: 40,
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+  backgroundColor: 'transparent',
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'transparent',
+    '&:hover': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    },
+  }),
+  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
+  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
+  ...(theme.navigation.edge && {
+    marginRight: withOffset ? theme.spacing(-1.25) : 0,
+  }),
+}))
+
+export const DrawerWalletContainer: React.FC<
+  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
+> = 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: React.FC<
+  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
+> = 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: React.FC<
+  React.ComponentProps<typeof Avatar> & {
+    avatarSize?: number
+    badgeSize?: number
+  }
+> = styled(Avatar, {
+  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
+})<{ avatarSize?: number; badgeSize?: number }>(
+  ({ avatarSize = 24, badgeSize = 12 }) => ({
+    mask: getAvatarMask(badgeSize),
+    width: avatarSize,
+    height: avatarSize,
+  })
+)

package/src/components/Header/Header.tsx

@@ -0,0 +1,59 @@
+import { useLocation } from '@tanstack/react-router'
+import type { FC, PropsWithChildren } from 'react'
+import { useLayoutEffect, useRef } from 'react'
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
+import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'
+import { createElementId, ElementId } 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'
+
+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,77 @@
+import { useAccount } from '@lifi/wallet-management'
+import { Box, Typography } from '@mui/material'
+import { useLocation } from '@tanstack/react-router'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import {
+  backButtonRoutes,
+  navigationRoutes,
+  navigationRoutesValues,
+} from '../../utils/navigationRoutes.js'
+import { ActivitiesButton } from './ActivitiesButton.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'
+
+export const NavigationHeader: React.FC = () => {
+  const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig()
+  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 =
+    mode === 'split' && !hasPath && typeof modeOptions?.split !== 'string'
+
+  return (
+    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
+      {backButtonRoutes.includes(path) ? <BackButton /> : null}
+      {showSplitOptions ? (
+        <Box sx={{ flex: 1, marginRight: 1 }}>
+          <SplitNavigationTabs />
+        </Box>
+      ) : (
+        <Typography
+          align={hasPath ? 'center' : 'left'}
+          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}
+          sx={{
+            fontSize: hasPath ? 18 : 24,
+            fontWeight: '700',
+            flex: 1,
+          }}
+        >
+          {title}
+        </Typography>
+      )}
+      {pathname === navigationRoutes.home ? (
+        <HeaderControlsContainer>
+          {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}
+          <SettingsButton />
+          {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (
+            <CloseDrawerButton header="navigation" />
+          ) : null}
+        </HeaderControlsContainer>
+      ) : (
+        element || (
+          <Box
+            sx={{
+              width: 28,
+              height: 40,
+            }}
+          />
+        )
+      )}
+    </HeaderAppBar>
+  )
+}

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

@@ -0,0 +1,62 @@
+import {
+  badgeClasses,
+  IconButton,
+  Badge as MuiBadge,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const SettingsIconBadge: React.FC<
+  React.ComponentProps<typeof MuiBadge>
+> = 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: React.FC<
+  React.ComponentProps<typeof IconButton> & SettingsIconButtonProps
+> = styled(IconButton, {
+  shouldForwardProp: (props) => props !== 'variant',
+})<SettingsIconButtonProps>(({ theme, variant }) => {
+  switch (variant) {
+    case 'info':
+      return {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+          '&:hover': {
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
+          },
+        }),
+      }
+    case 'warning':
+      return {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+          '&:hover': {
+            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,
+          },
+        }),
+      }
+    default:
+      return {}
+  }
+})

package/src/components/Header/SettingsButton.tsx

@@ -0,0 +1,47 @@
+import Settings from '@mui/icons-material/Settings'
+import { Tooltip } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import {
+  SettingsIconBadge,
+  SettingsIconButton,
+} from './SettingsButton.style.js'
+
+export const SettingsButton = (): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  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({ to: navigationRoutes.settings })}
+        variant={variant}
+      >
+        {variant ? (
+          <SettingsIconBadge variant="dot" color={variant}>
+            <Settings />
+          </SettingsIconBadge>
+        ) : (
+          <Settings />
+        )}
+      </SettingsIconButton>
+    </Tooltip>
+  )
+}

package/src/components/Header/SplitNavigationTabs.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
+import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
+
+export const SplitNavigationTabs = (): JSX.Element => {
+  const { t } = useTranslation()
+  const [state, setState] = useSplitModeStore((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 (
+    <NavigationTabs
+      value={state === 'swap' ? 0 : 1}
+      onChange={handleChange}
+      aria-label="tabs"
+    >
+      <NavigationTab label={t('header.swap')} disableRipple />
+      <NavigationTab label={t('header.bridge')} disableRipple />
+    </NavigationTabs>
+  )
+}