@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/src/components/Card/CardLabel.tsx

@@ -1,52 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, lighten, styled } from '@mui/material/styles';
-
-export const CardLabel = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
-  backgroundColor:
-    type === 'active'
-      ? theme.palette.mode === 'light'
-        ? theme.palette.secondary.main
-        : alpha(theme.palette.secondary.main, 0.32)
-      : type?.includes('insurance')
-        ? alpha(
-            theme.palette.success.main,
-            theme.palette.mode === 'light' ? 0.12 : 0.24,
-          )
-        : theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 0.16),
-  borderRadius: theme.shape.borderRadius,
-  color: type?.includes('insurance')
-    ? lighten(
-        theme.palette.success.main,
-        theme.palette.mode === 'light' ? 0 : 0.24,
-      )
-    : theme.palette.text.primary,
-  padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 24,
-  minWidth: 24,
-  userSelect: 'none',
-  fontSize: '1rem',
-  marginRight: theme.spacing(1),
-}));
-
-export const CardLabelTypography = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'icon' }>(({ theme, type }) => ({
-  padding:
-    type === 'icon'
-      ? theme.spacing(0.75, 0, 0.75, 0.75)
-      : theme.spacing(0.75, 1.5),
-  fontSize: 12,
-  lineHeight: 1,
-  fontWeight: '600',
-  textTransform: 'lowercase',
-  '&::first-letter': {
-    textTransform: 'uppercase',
-  },
-}));

package/src/components/Card/CardTitle.tsx

@@ -1,16 +0,0 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const CardTitle = styled(Typography, {
-  shouldForwardProp: (prop) => !['required'].includes(prop as string),
-})<{ required?: boolean }>(({ theme, required }) => ({
-  fontSize: '0.875rem',
-  lineHeight: '1.286',
-  letterSpacing: '0.01071em',
-  fontWeight: 700,
-  padding: theme.spacing(1.75, 2, 0, 2),
-  '&:after': {
-    content: required ? '" *"' : 'none',
-    color: theme.palette.error.main,
-  },
-}));

package/src/components/ChainSelect/ChainSelect.style.tsx

@@ -1,18 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { Card } from '../../components/Card';
-
-export const ChainCard = styled(Card)({
-  display: 'grid',
-  placeItems: 'center',
-  minWidth: 52,
-  height: 56,
-});
-
-export const ChainContainer = styled(Box)(({ theme }) => ({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
-  gridAutoRows: '56px',
-  justifyContent: 'space-between',
-  gap: theme.spacing(1.5),
-}));

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { EVMChain } from '@lifi/sdk';
-import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
-import { useEffect } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ChainCard, ChainContainer } from './ChainSelect.style';
-import { useChainSelect } from './useChainSelect';
-
-export const ChainSelect = ({ formType }: FormTypeProps) => {
-  const navigate = useNavigate();
-  const {
-    chainOrder,
-    chains,
-    getChains,
-    isLoading,
-    setChainOrder,
-    setCurrentChain,
-  } = useChainSelect(formType);
-  const [chainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
-
-  useEffect(() => {
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-      setChainOrder(chainId);
-    }
-  }, [chainId, chainOrder, setChainOrder]);
-
-  const showAllChains = () => {
-    navigate(navigationRoutes[`${formType}Chain`]);
-  };
-
-  const chainsToHide = (chains?.length ?? 0) - maxChainToOrder;
-
-  return (
-    <ChainContainer>
-      {isLoading
-        ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (
-            <Skeleton
-              key={index}
-              variant="rectangular"
-              width={56}
-              height={56}
-              sx={{ borderRadius: 1 }}
-            />
-          ))
-        : getChains().map((chain: EVMChain) => (
-            <Tooltip
-              key={chain.id}
-              title={chain.name}
-              placement="top"
-              enterDelay={400}
-              arrow
-            >
-              <ChainCard
-                onClick={() => setCurrentChain(chain.id)}
-                variant={chainId === chain.id ? 'selected' : 'default'}
-              >
-                <Avatar
-                  src={chain.logoURI}
-                  alt={chain.key}
-                  sx={{ width: 40, height: 40 }}
-                >
-                  {chain.name[0]}
-                </Avatar>
-              </ChainCard>
-            </Tooltip>
-          ))}
-      {chainsToHide > 0 ? (
-        <ChainCard onClick={showAllChains}>
-          <Box
-            sx={{
-              width: 40,
-              height: 40,
-              display: 'grid',
-              placeItems: 'center',
-            }}
-          >
-            <Typography fontWeight={500}>+{chainsToHide}</Typography>
-          </Box>
-        </ChainCard>
-      ) : null}
-    </ChainContainer>
-  );
-};

package/src/components/ChainSelect/useChainSelect.ts

@@ -1,77 +0,0 @@
-import type { EVMChain } from '@lifi/sdk';
-import { useController, useFormContext } from 'react-hook-form';
-import { useChains, useSwapOnly } from '../../hooks';
-import type { FormType } from '../../providers';
-import { FormKey, FormKeyHelper, useWidgetConfig } from '../../providers';
-import { useChainOrder } from '../../stores';
-import { RequiredUI } from '../../types';
-
-export const useChainSelect = (formType: FormType) => {
-  const { requiredUI } = useWidgetConfig();
-  const chainKey = FormKeyHelper.getChainKey(formType);
-  const {
-    field: { onChange, onBlur },
-  } = useController({ name: chainKey });
-  const { setValue, getValues } = useFormContext();
-  const { chains, isLoading, getChainById } = useChains();
-  const [chainOrder, setChainOrder] = useChainOrder();
-  const swapOnly = useSwapOnly();
-
-  const getChains = () => {
-    if (!chains) {
-      return [];
-    }
-    const selectedChains = chainOrder
-      .map((chainId) => chains.find((chain) => chain.id === chainId))
-      .filter(Boolean) as EVMChain[];
-
-    return selectedChains;
-  };
-
-  const setCurrentChain = (chainId: number) => {
-    onChange(chainId);
-    onBlur();
-    if (swapOnly) {
-      setValue(FormKeyHelper.getChainKey('to'), chainId, {
-        shouldTouch: true,
-      });
-    }
-    setValue(FormKeyHelper.getTokenKey(formType), '');
-    setValue(FormKeyHelper.getAmountKey(formType), '');
-    setValue(FormKey.TokenSearchFilter, '');
-
-    const [fromChainId, toChainId] = getValues([
-      FormKey.FromChain,
-      FormKey.ToChain,
-    ]);
-
-    const fromChain = getChainById(fromChainId);
-    const toChain = getChainById(toChainId);
-
-    const differentChainType =
-      fromChain && toChain && fromChain.chainType !== toChain.chainType;
-
-    const requiredToAddress =
-      requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
-
-    // toAddress field is required (always visible) when bridging between
-    // two ecosystems (fromChain and toChain have different chain types).
-    // We clean up toAddress on every chain change if toAddress is not required.
-    // This is used when we switch between different chain ecosystems (chain types) and
-    // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
-    // but it keeps toAddress value set for the previous chain pair.
-    if (!requiredToAddress) {
-      setValue(FormKey.ToAddress, '');
-    }
-    setChainOrder(chainId);
-  };
-
-  return {
-    chainOrder,
-    chains,
-    getChains,
-    isLoading,
-    setChainOrder,
-    setCurrentChain,
-  };
-};

package/src/components/ContractComponent/ContractComponent.tsx

@@ -1,14 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-import { Card } from '../Card';
-
-export const ContractComponent: React.FC<PropsWithChildren<BoxProps>> = ({
-  children,
-  ...props
-}) => {
-  if (!children) {
-    return null;
-  }
-
-  return <Card {...props}>{children}</Card>;
-};

package/src/components/Dialog.tsx

@@ -1,50 +0,0 @@
-import type { DialogProps, Theme } from '@mui/material';
-import { Dialog as MuiDialog } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-import { useGetScrollableContainer } from '../hooks';
-
-export const modalProps = {
-  sx: {
-    position: 'absolute',
-    overflow: 'hidden',
-  },
-};
-
-export const paperProps = {
-  sx: (theme: Theme) => ({
-    position: 'absolute',
-    backgroundImage: 'none',
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius,
-  }),
-};
-
-export const slotProps = {
-  backdrop: {
-    sx: {
-      position: 'absolute',
-      backgroundColor: 'rgb(0 0 0 / 32%)',
-      backdropFilter: 'blur(3px)',
-    },
-  },
-};
-
-export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
-  children,
-  open,
-  onClose,
-}) => {
-  const getContainer = useGetScrollableContainer();
-  return (
-    <MuiDialog
-      container={getContainer}
-      open={open}
-      onClose={onClose}
-      sx={modalProps.sx}
-      PaperProps={paperProps}
-      slotProps={slotProps}
-    >
-      {children}
-    </MuiDialog>
-  );
-};

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/GasMessage.tsx

@@ -1,34 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import { Box, Collapse } from '@mui/material';
-import { useFromTokenSufficiency, useGasSufficiency } from '../../hooks';
-import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
-import { GasSufficiencyMessage } from './GasSufficiencyMessage';
-
-interface GasMessageProps extends BoxProps {
-  route?: Route;
-}
-
-export const GasMessage: React.FC<GasMessageProps> = ({ route, ...props }) => {
-  const { insufficientGas } = useGasSufficiency(route);
-  const { insufficientFromToken } = useFromTokenSufficiency(route);
-
-  const validInsufficientGas = insufficientGas?.length;
-
-  return (
-    <Collapse
-      timeout={225}
-      in={Boolean(insufficientFromToken || validInsufficientGas)}
-      unmountOnExit
-      mountOnEnter
-    >
-      <Box {...props}>
-        {insufficientFromToken ? (
-          <FundsSufficiencyMessage />
-        ) : validInsufficientGas ? (
-          <GasSufficiencyMessage insufficientGas={insufficientGas} />
-        ) : null}
-      </Box>
-    </Collapse>
-  );
-};

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>
-  );
-};