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

package/src/components/AmountInput/AmountInput.tsx

@@ -1,126 +0,0 @@
-import type { Token } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import type { ChangeEvent, ReactNode } from 'react';
-import { useLayoutEffect, useRef } from 'react';
-import { useController, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper, useWidgetConfig } from '../../providers';
-import { DisabledUI } from '../../types';
-import { fitInputText, formatInputAmount } from '../../utils';
-import { Card, CardTitle } from '../Card';
-import {
-  FormControl,
-  Input,
-  maxInputFontSize,
-  minInputFontSize,
-} from './AmountInput.style';
-import { AmountInputEndAdornment } from './AmountInputEndAdornment';
-import { AmountInputStartAdornment } from './AmountInputStartAdornment';
-import { FormPriceHelperText } from './FormPriceHelperText';
-
-export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
-  formType,
-  ...props
-}) => {
-  const { disabledUI } = useWidgetConfig();
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
-  const { token } = useToken(chainId, tokenAddress);
-  const disabled = disabledUI?.includes(DisabledUI.FromAmount);
-  return (
-    <AmountInputBase
-      formType={formType}
-      token={token}
-      startAdornment={<AmountInputStartAdornment formType={formType} />}
-      endAdornment={
-        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
-      }
-      bottomAdornment={<FormPriceHelperText formType={formType} />}
-      disabled={disabled}
-      {...props}
-    />
-  );
-};
-
-export const AmountInputBase: React.FC<
-  FormTypeProps &
-    BoxProps & {
-      token?: Token;
-      startAdornment?: ReactNode;
-      endAdornment?: ReactNode;
-      bottomAdornment?: ReactNode;
-      disabled?: boolean;
-    }
-> = ({
-  formType,
-  token,
-  startAdornment,
-  endAdornment,
-  bottomAdornment,
-  disabled,
-  ...props
-}) => {
-  const { t } = useTranslation();
-  const amountKey = FormKeyHelper.getAmountKey(formType);
-  const {
-    field: { onChange, onBlur, value },
-  } = useController({
-    name: amountKey,
-  });
-  const ref = useRef<HTMLInputElement>(null);
-
-  const handleChange = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { value } = event.target;
-    const formattedAmount = formatInputAmount(value, token?.decimals, true);
-    onChange(formattedAmount);
-  };
-
-  const handleBlur = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { value } = event.target;
-    const formattedAmount = formatInputAmount(value, token?.decimals);
-    onChange(formattedAmount);
-    onBlur();
-  };
-
-  useLayoutEffect(() => {
-    if (ref.current) {
-      fitInputText(maxInputFontSize, minInputFontSize, ref.current);
-    }
-  }, [value, ref]);
-
-  return (
-    <Card {...props}>
-      <CardTitle>{t('main.fromAmount')}</CardTitle>
-      <FormControl fullWidth>
-        <Input
-          inputRef={ref}
-          size="small"
-          autoComplete="off"
-          placeholder="0"
-          startAdornment={startAdornment}
-          endAdornment={endAdornment}
-          inputProps={{
-            inputMode: 'decimal',
-          }}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          value={value}
-          name={amountKey}
-          disabled={disabled}
-          required
-        />
-        {bottomAdornment}
-      </FormControl>
-    </Card>
-  );
-};

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -1,9 +0,0 @@
-import { Button as MuiButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const Button = styled(MuiButton)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1, 0.625, 1),
-  lineHeight: 1.0715,
-  fontSize: '0.875rem',
-  minWidth: 'unset',
-}));

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,69 +0,0 @@
-import { InputAdornment, Skeleton } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import {
-  useAvailableChains,
-  useGasRecommendation,
-  useTokenAddressBalance,
-} from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { Button } from './AmountInputAdornment.style';
-
-export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
-  const { t } = useTranslation();
-  const { setValue } = useFormContext();
-  const { getChainById } = useAvailableChains();
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
-
-  // We get gas recommendations for the source chain to make sure that after pressing the Max button
-  // the user will have enough funds remaining to cover gas costs
-  const { data } = useGasRecommendation(chainId);
-
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-
-  const handleMax = () => {
-    const chain = getChainById(chainId);
-    let maxAmount = token?.amount;
-    if (
-      chain?.nativeToken.address === tokenAddress &&
-      data?.available &&
-      data?.recommended
-    ) {
-      const tokenAmount = token?.amount ?? 0n;
-      const recommendedAmount = BigInt(data.recommended.amount) / 2n;
-      if (tokenAmount > recommendedAmount) {
-        maxAmount = tokenAmount - recommendedAmount;
-      }
-    }
-
-    setValue(
-      FormKeyHelper.getAmountKey(formType),
-      maxAmount && token ? formatUnits(maxAmount, token.decimals) : '',
-      {
-        shouldTouch: true,
-      },
-    );
-  };
-
-  return (
-    <InputAdornment position="end">
-      {isLoading && tokenAddress ? (
-        <Skeleton
-          variant="rectangular"
-          width={46}
-          height={24}
-          sx={{ borderRadius: 0.5 }}
-        />
-      ) : formType === 'from' && token?.amount ? (
-        <Button onClick={handleMax}>{t('button.max')}</Button>
-      ) : null}
-    </InputAdornment>
-  );
-};

package/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -1,26 +0,0 @@
-import { useWatch } from 'react-hook-form';
-import { useChain, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-
-export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
-  formType,
-}) => {
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
-
-  const { chain } = useChain(chainId);
-  const { token } = useToken(chainId, tokenAddress);
-  const isSelected = !!(chain && token);
-
-  return isSelected ? (
-    <TokenAvatar token={token} chain={chain} sx={{ marginLeft: 2 }} />
-  ) : (
-    <TokenAvatarDefault sx={{ marginLeft: 2 }} />
-  );
-};

package/src/components/AmountInput/FormPriceHelperText.tsx

@@ -1,87 +0,0 @@
-import type { TokenAmount } from '@lifi/sdk';
-import { FormHelperText, Skeleton, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
-
-export const FormPriceHelperText: React.FC<FormTypeProps> = ({ formType }) => {
-  const [chainId, tokenAddress] = useWatch({
-    name: [
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType),
-    ],
-  });
-
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-
-  return (
-    <FormPriceHelperTextBase
-      formType={formType}
-      isLoading={isLoading}
-      tokenAddress={tokenAddress}
-      token={token}
-    />
-  );
-};
-
-export const FormPriceHelperTextBase: React.FC<
-  FormTypeProps & {
-    isLoading?: boolean;
-    tokenAddress?: string;
-    token?: TokenAmount;
-  }
-> = ({ formType, isLoading, tokenAddress, token }) => {
-  const { t } = useTranslation();
-  const amount = useWatch({
-    name: FormKeyHelper.getAmountKey(formType),
-  });
-
-  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
-
-  return (
-    <FormHelperText
-      component="div"
-      sx={{ display: 'flex', justifyContent: 'space-between', margin: 0 }}
-    >
-      <Typography
-        color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
-        fontWeight={400}
-        fontSize={12}
-        marginLeft={8}
-        lineHeight={1.3334}
-        flex={1}
-        sx={{
-          wordBreak: 'break-word',
-          overflowWrap: 'break-word',
-        }}
-      >
-        {t(`format.currency`, {
-          value: fromAmountTokenPrice,
-        })}
-      </Typography>
-      {isLoading && tokenAddress ? (
-        <Skeleton
-          variant="text"
-          width={48}
-          height={16}
-          sx={{ borderRadius: 0.25 }}
-        />
-      ) : token?.amount ? (
-        <Typography
-          fontWeight={400}
-          fontSize={12}
-          color="text.secondary"
-          lineHeight={1.3334}
-          pl={0.25}
-        >
-          {`/ ${t(`format.number`, {
-            value: formatTokenAmount(token.amount, token.decimals),
-          })}`}
-        </Typography>
-      ) : null}
-    </FormHelperText>
-  );
-};

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,52 +0,0 @@
-import { LoadingButton } from '@mui/lab';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { navigationRoutes } from '../../utils';
-import type { BaseTransactionButtonProps } from './types';
-
-export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
-  onClick,
-  text,
-  disabled,
-  loading,
-}) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { walletManagement } = useWidgetConfig();
-  const { account } = useAccount();
-
-  const handleClick = async () => {
-    if (account.isConnected) {
-      onClick?.();
-    } else if (walletManagement) {
-      await walletManagement.connect();
-    } else {
-      navigate(navigationRoutes.selectWallet);
-    }
-  };
-
-  const getButtonText = () => {
-    if (account.isConnected) {
-      if (text) {
-        return text;
-      }
-    }
-    return t(`button.connectWallet`);
-  };
-
-  return (
-    <LoadingButton
-      variant="contained"
-      color="primary"
-      onClick={handleClick}
-      disabled={disabled}
-      loading={loading}
-      loadingPosition="center"
-      fullWidth
-    >
-      {getButtonText()}
-    </LoadingButton>
-  );
-};

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,54 +0,0 @@
-import { Drawer } from '@mui/material';
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import { useGetScrollableContainer } from '../../hooks';
-import { backdropProps, modalProps, paperProps } from '../Dialog';
-import type { BottomSheetBase, BottomSheetProps } from './types';
-
-export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open, onClose }, ref) => {
-    const getContainer = useGetScrollableContainer();
-    const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(open);
-
-    const close = useCallback(() => {
-      setDrawerOpen(false);
-      openRef.current = false;
-      onClose?.();
-    }, [onClose]);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-          setDrawerOpen(true);
-          openRef.current = true;
-        },
-        close,
-      }),
-      [close],
-    );
-
-    return (
-      <Drawer
-        container={getContainer}
-        ref={elementRef}
-        anchor="bottom"
-        open={drawerOpen}
-        onClose={close}
-        ModalProps={modalProps}
-        PaperProps={paperProps}
-        BackdropProps={backdropProps}
-        disableAutoFocus
-      >
-        {children}
-      </Drawer>
-    );
-  },
-);

package/src/components/Card/CardHeader.tsx

@@ -1,21 +0,0 @@
-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/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/Card/index.ts

@@ -1,5 +0,0 @@
-export * from './Card';
-export * from './CardHeader';
-export * from './CardIconButton';
-export * from './CardLabel';
-export * from './CardTitle';

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

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