@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/components/Card/Card.tsx

@@ -0,0 +1,83 @@
+import type { BoxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
+import type { MouseEventHandler } from 'react';
+
+type CardVariant = 'default' | 'selected' | 'error';
+
+export type CardProps = {
+  variant?: CardVariant;
+  selectionColor?: 'primary' | 'secondary';
+  indented?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  pointerEvents?: 'auto' | 'none';
+} & BoxProps;
+
+const getBackgroundColor = (
+  theme: Theme,
+  variant?: CardVariant,
+  selectionColor?: 'primary' | 'secondary',
+) =>
+  variant === 'selected'
+    ? selectionColor === 'primary'
+      ? theme.palette.mode === 'light'
+        ? alpha(theme.palette.primary.main, 0.04)
+        : alpha(theme.palette.primary.main, 0.42)
+      : alpha(
+          theme.palette.secondary.main,
+          theme.palette.mode === 'light' ? 0.08 : 0.12,
+        )
+    : theme.palette.background.paper;
+
+export const Card = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
+      prop as string,
+    ),
+})<CardProps>(({
+  theme,
+  variant,
+  selectionColor = 'primary',
+  indented,
+  pointerEvents,
+  onClick,
+}) => {
+  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+  const backgroundHoverColor = onClick
+    ? theme.palette.mode === 'light'
+      ? darken(backgroundColor, 0.02)
+      : lighten(backgroundColor, 0.02)
+    : backgroundColor;
+  return {
+    backgroundColor,
+    border: `1px solid`,
+    borderColor:
+      variant === 'error'
+        ? theme.palette.error.main
+        : variant === 'selected'
+          ? selectionColor === 'primary'
+            ? theme.palette.primary.main
+            : alpha(theme.palette.secondary.main, 0.48)
+          : theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    padding: indented ? theme.spacing(2) : 0,
+    boxSizing: 'border-box',
+    '&:hover': {
+      cursor: onClick ? 'pointer' : 'default',
+      backgroundColor: backgroundHoverColor,
+    },
+    [`&:hover .${badgeClasses.badge} > div`]: {
+      borderColor: backgroundHoverColor,
+    },
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
+    pointerEvents,
+  };
+});

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,21 @@
+import { CardHeader as MuiCardHeader } from '@mui/material';
+import { cardHeaderClasses } from '@mui/material/CardHeader';
+import { styled } from '@mui/material/styles';
+
+export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
+  [`.${cardHeaderClasses.action}`]: {
+    marginTop: -2,
+    alignSelf: 'center',
+  },
+  [`.${cardHeaderClasses.title}`]: {
+    fontWeight: '500',
+    fontSize: '1.125rem',
+    lineHeight: '1.2778',
+    color: theme.palette.text.primary,
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    fontWeight: '400',
+    fontSize: '0.75rem',
+    color: theme.palette.text.secondary,
+  },
+}));

package/src/components/Card/CardIconButton.tsx

@@ -0,0 +1,16 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
+  const backgroundColor =
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white;
+  return {
+    padding: theme.spacing(0.5),
+    backgroundColor: alpha(backgroundColor, 0.04),
+    '&:hover': {
+      backgroundColor: alpha(backgroundColor, 0.08),
+    },
+  };
+});

package/src/components/Card/CardLabel.tsx

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,92 @@
+/* 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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,48 @@
+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 backdropProps = {
+  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}
+      BackdropProps={backdropProps}
+    >
+      {children}
+    </MuiDialog>
+  );
+};

package/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,67 @@
+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

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