@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,26 +0,0 @@
-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 (
-    <WarningMessageCard display="flex">
-      <WarningMessageCardTitle>
-        <WarningRoundedIcon
-          sx={{
-            marginTop: 2,
-            marginLeft: 2,
-          }}
-        />
-      </WarningMessageCardTitle>
-      <Typography variant="body2" px={2} pb={2} pt={2}>
-        {t(`warning.message.insufficientFunds`)}
-      </Typography>
-    </WarningMessageCard>
-  );
-};

package/src/components/GasMessage/GasMessage.style.ts

@@ -1,52 +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';
-import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
-
-const MessageCard = styled(Box)(({ theme }) => ({
-  borderRadius: theme.shape.borderRadius,
-  position: 'relative',
-  whiteSpace: 'pre-line',
-}));
-
-export const WarningMessageCard = styled(MessageCard)(({ theme }) => ({
-  backgroundColor: getWarningBackgroundColor(theme),
-}));
-
-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: getInfoBackgroundColor(theme),
-}));
-
-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/src/components/GasMessage/GasRefuelMessage.tsx

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

package/src/components/GasMessage/GasSufficiencyMessage.tsx

@@ -1,55 +0,0 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import type { GasSufficiency } from '../../hooks';
-import {
-  WarningMessageCard,
-  WarningMessageCardTitle,
-} from './GasMessage.style';
-
-interface GasSufficiencyMessageProps {
-  insufficientGas?: GasSufficiency[];
-}
-
-export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
-  insufficientGas,
-}) => {
-  const { t } = useTranslation();
-  return (
-    <WarningMessageCard>
-      <WarningMessageCardTitle display="flex" alignItems="center" px={2} pt={2}>
-        <EvStationIcon
-          sx={{
-            marginRight: 1,
-          }}
-        />
-        <Typography variant="body2" fontWeight={700}>
-          {t(`warning.title.insufficientGas`)}
-        </Typography>
-      </WarningMessageCardTitle>
-      <Typography variant="body2" px={2} pt={1}>
-        {t(`warning.message.insufficientGas`)}
-      </Typography>
-      {insufficientGas?.map((item, index) => (
-        <Typography
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          variant="body2"
-          px={2}
-          pb={insufficientGas?.length - 1 === index ? 2 : 0}
-          pt={0.5}
-        >
-          {t(`main.tokenOnChainAmount`, {
-            amount: formatUnits(
-              item.insufficientAmount ?? 0n,
-              item.token.decimals,
-            ),
-            tokenSymbol: item.token.symbol,
-            chainName: item.chain?.name,
-          })}
-        </Typography>
-      ))}
-    </WarningMessageCard>
-  );
-};

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

@@ -1,78 +0,0 @@
-import { AppBar, Box, Button, badgeClasses } from '@mui/material';
-import { buttonClasses } from '@mui/material/Button';
-import { alpha, styled } from '@mui/material/styles';
-import { Tabs } from '../Tabs';
-
-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',
-})<{ sticky?: boolean }>(({ 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',
-  },
-  [`&:hover .${badgeClasses.badge} > div`]: {
-    borderColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.04)
-        : alpha(theme.palette.common.white, 0.08),
-  },
-}));
-
-export const DrawerWalletContainer = styled(Box)(() => ({
-  width: '100%',
-  display: 'flex',
-  justifyItems: 'start',
-
-  '& > button': {
-    marginLeft: '-0.5rem',
-  },
-}));
-
-export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(0.5),
-}));
-
-export const SplitTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark'
-      ? theme.palette.background.paper
-      : alpha(theme.palette.common.black, 0.04),
-}));

package/src/components/Header/Header.tsx

@@ -1,36 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-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: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const { pathname } = useLocation();
-  const elementId = useDefaultElementId();
-  return (
-    <Container
-      id={createElementId(ElementId.Header, elementId)}
-      sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
-    >
-      {children}
-    </Container>
-  );
-};
-
-export const Header: FC = () => {
-  const { walletManagement, subvariant, hiddenUI } = useWidgetConfig();
-  return (
-    <HeaderContainer>
-      {!walletManagement &&
-      subvariant !== 'split' &&
-      !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
-        <WalletHeader />
-      ) : null}
-      <NavigationHeader />
-    </HeaderContainer>
-  );
-};

package/src/components/Header/NavigationHeader.tsx

@@ -1,155 +0,0 @@
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Box, IconButton, Tooltip, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Route, Routes, useLocation } from 'react-router-dom';
-import { useAccount, useNavigateBack } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useHeaderStore } from '../../stores';
-import { HiddenUI } from '../../types';
-import {
-  backButtonRoutes,
-  navigationRoutes,
-  navigationRoutesValues,
-} from '../../utils';
-import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
-import { NavigationTabs } from './NavigationTabs';
-import { WalletMenuButton } from './WalletHeader';
-import { SettingsButton } from './SettingsButton';
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-
-export const TransactionHistoryButton = () => {
-  const { t } = useTranslation();
-  const { navigate } = useNavigateBack();
-
-  return (
-    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
-      <IconButton
-        size="medium"
-        edge="start"
-        onClick={() => navigate(navigationRoutes.transactionHistory)}
-      >
-        <ReceiptLongIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};
-export const NavigationHeader: React.FC = () => {
-  const { t } = useTranslation();
-  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;
-
-  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.languages:
-        return t(`language.title`);
-      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 (
-    <>
-      <HeaderAppBar elevation={0}>
-        {backButtonRoutes.includes(path) ? (
-          <IconButton size="medium" edge="start" onClick={navigateBack}>
-            <ArrowBackIcon />
-          </IconButton>
-        ) : null}
-        {splitSubvariant ? (
-          <Box flex={1}>
-            {!hiddenUI?.includes(HiddenUI.WalletMenu) ? (
-              <WalletMenuButton />
-            ) : null}
-          </Box>
-        ) : (
-          <Typography
-            fontSize={hasPath ? 18 : 24}
-            align={hasPath ? 'center' : 'left'}
-            fontWeight="700"
-            flex={1}
-            noWrap
-          >
-            {title || handleHeaderTitle()}
-          </Typography>
-        )}
-        <Routes>
-          <Route
-            path={navigationRoutes.home}
-            element={
-              <HeaderControlsContainer
-                paddingRight={
-                  variant === 'drawer' && subvariant === 'split' ? 5 : 0
-                }
-              >
-                {account.isConnected &&
-                !hiddenUI?.includes(HiddenUI.History) ? (
-                  <TransactionHistoryButton />
-                ) : null}
-                <SettingsButton />
-              </HeaderControlsContainer>
-            }
-          />
-          <Route path="*" element={element || <Box width={28} height={40} />} />
-        </Routes>
-      </HeaderAppBar>
-      {splitSubvariant ? <NavigationTabs /> : null}
-    </>
-  );
-};

package/src/components/Header/NavigationTabs.tsx

@@ -1,35 +0,0 @@
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { FormKey } from '../../providers';
-import { useSplitSubvariantStore } from '../../stores';
-import { HeaderAppBar, SplitTabs } from './Header.style';
-import { Tab } from '../Tabs';
-
-export const NavigationTabs = () => {
-  const { t } = useTranslation();
-  const [state, setState] = useSplitSubvariantStore((state) => [
-    state.state,
-    state.setState,
-  ]);
-  const { setValue } = useFormContext();
-  const handleChange = (_: React.SyntheticEvent, value: number) => {
-    setValue(FormKey.FromAmount, '');
-    setValue(FormKey.FromToken, '');
-    setValue(FormKey.ToToken, '');
-    setState(value === 0 ? 'swap' : 'bridge');
-  };
-
-  return (
-    <HeaderAppBar elevation={0} sx={{ py: 1 }}>
-      <SplitTabs
-        value={state === 'swap' ? 0 : 1}
-        onChange={handleChange}
-        aria-label="tabs"
-        indicatorColor="primary"
-      >
-        <Tab label={t('header.swap')} disableRipple />
-        <Tab label={t('header.bridge')} disableRipple />
-      </SplitTabs>
-    </HeaderAppBar>
-  );
-};

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

@@ -1,47 +0,0 @@
-import { IconButton, Badge as MuiBadge } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { darken, styled } from '@mui/material/styles';
-import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
-
-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 {
-  notification?: 'info' | 'warning';
-}
-
-export const SettingsIconButton = styled(IconButton, {
-  shouldForwardProp: (props) => props !== 'notification',
-})<SettingsIconButtonProps>(({ theme, notification }) => {
-  const notificationStyles = {
-    info: {
-      backgroundColor: getInfoBackgroundColor(theme),
-      '&:hover': {
-        backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
-      },
-    },
-    warning: {
-      backgroundColor: getWarningBackgroundColor(theme),
-      '&:hover': {
-        backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
-      },
-    },
-    default: {
-      marginRight: theme.spacing(-1.25),
-    },
-  };
-
-  return {
-    borderRadius: 20,
-    ...notificationStyles[notification ?? 'default'],
-  };
-});

package/src/components/Header/SettingsButton.tsx

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