@lifi/widget 3.7.0 → 3.8.0-beta.1

package/components/Card/Card.tsx

@@ -1,54 +0,0 @@
-import type { CardProps as MuiCardProps } from '@mui/material';
-import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material';
-
-export interface CardProps extends MuiCardProps {
-  type?: 'default' | 'selected' | 'error';
-  selectionColor?: 'primary' | 'secondary';
-  indented?: boolean;
-}
-
-export const Card = styled(MuiCard, {
-  shouldForwardProp: (prop) =>
-    !['type', 'indented', 'selectionColor'].includes(prop as string),
-})<CardProps>(({ theme, indented, selectionColor, type }) => {
-  return {
-    padding: indented ? theme.spacing(2) : 0,
-    ...(type === 'selected' &&
-      selectionColor === 'primary' && {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? lighten(theme.palette.primary.main, 0.95)
-            : darken(theme.palette.primary.main, 0.65),
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: theme.palette.primary.main,
-        '&:hover': {
-          backgroundColor:
-            theme.palette.mode === 'light'
-              ? lighten(theme.palette.primary.main, 0.9)
-              : darken(theme.palette.primary.main, 0.6),
-        },
-      }),
-    ...(type === 'selected' &&
-      selectionColor === 'secondary' && {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? lighten(theme.palette.secondary.main, 0.85)
-            : darken(theme.palette.secondary.main, 0.76),
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: alpha(theme.palette.secondary.main, 0.2),
-        '&:hover': {
-          backgroundColor:
-            theme.palette.mode === 'light'
-              ? lighten(theme.palette.secondary.main, 0.8)
-              : darken(theme.palette.secondary.main, 0.72),
-        },
-      }),
-    ...(type === 'error' && {
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: theme.palette.error.main,
-    }),
-  };
-});

package/components/Card/CardButton.style.tsx

@@ -1,35 +0,0 @@
-import { Box, ButtonBase, Typography, styled } from '@mui/material';
-
-export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
-  background: 'none',
-  color: 'inherit',
-  border: 'none',
-  font: 'inherit',
-  cursor: 'pointer',
-  outline: 'inherit',
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(2),
-  borderRadius: theme.shape.borderRadius,
-}));
-
-export const CardRowContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(2),
-}));
-
-export const CardValue = styled(Typography)({
-  lineHeight: '1.25',
-  fontWeight: 500,
-});
-
-export const CardTitleContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(1.5),
-}));

package/components/Card/CardButton.tsx

@@ -1,26 +0,0 @@
-import type { MouseEventHandler, PropsWithChildren } from 'react';
-import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js';
-import { Card } from './Card.js';
-import {
-  CardRowButton,
-  CardTitleContainer,
-  CardValue,
-} from './CardButton.style.js';
-
-interface SettingCardButtonProps extends SettingCardTitle {
-  onClick: MouseEventHandler;
-}
-
-export const CardButton: React.FC<
-  PropsWithChildren<SettingCardButtonProps>
-> = ({ onClick, icon, title, children }) => (
-  <Card>
-    <CardRowButton onClick={onClick} disableRipple>
-      <CardTitleContainer>
-        {icon}
-        <CardValue>{title}</CardValue>
-      </CardTitleContainer>
-      {children}
-    </CardRowButton>
-  </Card>
-);

package/components/Card/CardHeader.tsx

@@ -1,26 +0,0 @@
-import {
-  CardHeader as MuiCardHeader,
-  cardHeaderClasses,
-  styled,
-} from '@mui/material';
-
-export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
-  [`.${cardHeaderClasses.action}`]: {
-    marginTop: -2,
-    alignSelf: 'center',
-  },
-  [`.${cardHeaderClasses.title}`]: {
-    fontWeight: 600,
-    fontSize: 18,
-    lineHeight: 1.3334,
-    color: theme.palette.text.primary,
-    textAlign: 'left',
-  },
-  [`.${cardHeaderClasses.subheader}`]: {
-    fontWeight: 500,
-    fontSize: 12,
-    lineHeight: 1.3334,
-    color: theme.palette.text.secondary,
-    textAlign: 'left',
-  },
-}));

package/components/Card/CardIconButton.tsx

@@ -1,16 +0,0 @@
-import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
-import { getContrastAlphaColor } from '../../utils/colors.js';
-
-export const CardIconButton = styled(MuiIconButton)<
-  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
->(({ theme }) => {
-  return {
-    padding: theme.spacing(0.5),
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
-    '&:hover': {
-      backgroundColor: getContrastAlphaColor(theme, 0.08),
-    },
-    fontSize: '1rem',
-  };
-});

package/components/Card/CardLabel.tsx

@@ -1,56 +0,0 @@
-import { Box, Typography, getContrastRatio, styled } from '@mui/material';
-import { blend } from '../../utils/colors.js';
-
-export const CardLabel = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' }>(({ theme, type }) => {
-  const backgroundColor =
-    type === 'active'
-      ? theme.palette.mode === 'light'
-        ? theme.palette.secondary.main
-        : blend(
-            theme.palette.background.paper,
-            theme.palette.secondary.main,
-            0.8,
-          )
-      : theme.palette.mode === 'light'
-        ? blend(
-            theme.palette.background.paper,
-            theme.palette.common.black,
-            0.12,
-          )
-        : blend(
-            theme.palette.background.paper,
-            theme.palette.common.white,
-            0.16,
-          );
-  return {
-    backgroundColor,
-    borderRadius: theme.shape.borderRadius,
-    color:
-      getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-    padding: 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',
-}));

package/components/Card/CardTitle.tsx

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

package/components/Card/InputCard.tsx

@@ -1,7 +0,0 @@
-import { styled } from '@mui/material';
-import { Card } from './Card.js';
-
-export const InputCard = styled(Card, {
-  name: 'MuiInputCard',
-  slot: 'root',
-})({});

package/components/ChainSelect/ChainSelect.style.tsx

@@ -1,17 +0,0 @@
-import { Box, styled } from '@mui/material';
-import { Card } from '../../components/Card/Card.js';
-
-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/components/ChainSelect/ChainSelect.tsx

@@ -1,100 +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 { useNavigate } from 'react-router-dom';
-import {
-  maxChainsToOrder,
-  maxChainsToShow,
-} from '../../stores/chains/createChainOrderStore.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { ChainCard, ChainContainer } from './ChainSelect.style.js';
-import { useChainSelect } from './useChainSelect.js';
-
-export const ChainSelect = ({ formType }: FormTypeProps) => {
-  const navigate = useNavigate();
-  const {
-    chainOrder,
-    chains,
-    getChains,
-    isLoading,
-    setChainOrder,
-    setCurrentChain,
-  } = useChainSelect(formType);
-
-  const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
-
-  useEffect(() => {
-    if (chainId) {
-      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, formType);
-      }
-    }
-  }, [chainId, chainOrder, formType, setChainOrder]);
-
-  const showAllChains = () => {
-    navigate(navigationRoutes[`${formType}Chain`]);
-  };
-
-  // We check if we can accommodate all the chains on the grid
-  // If there are more than 10 chains we show the number of hidden chains as the last one tile
-  const chainsToHide =
-    chains?.length === maxChainsToShow
-      ? 0
-      : (chains?.length ?? 0) - maxChainsToOrder;
-
-  // When there is less than 10 chains we don't care about the order
-  const chainsToShow = chainsToHide > 0 ? getChains() : chains;
-
-  return (
-    <ChainContainer>
-      {isLoading
-        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
-            <Skeleton
-              key={index}
-              variant="rectangular"
-              width={56}
-              height={56}
-              sx={{ borderRadius: 1 }}
-            />
-          ))
-        : chainsToShow?.map((chain: EVMChain) => (
-            <Tooltip key={chain.id} title={chain.name} enterNextDelay={100}>
-              <ChainCard
-                component="button"
-                onClick={() => setCurrentChain(chain.id)}
-                type={chainId === chain.id ? 'selected' : 'default'}
-                selectionColor="primary"
-              >
-                <Avatar
-                  src={chain.logoURI}
-                  alt={chain.key}
-                  sx={{ width: 40, height: 40 }}
-                >
-                  {chain.name[0]}
-                </Avatar>
-              </ChainCard>
-            </Tooltip>
-          ))}
-      {chainsToHide > 0 ? (
-        <ChainCard component="button" onClick={showAllChains}>
-          <Box
-            sx={{
-              width: 40,
-              height: 40,
-              display: 'grid',
-              placeItems: 'center',
-            }}
-          >
-            <Typography fontWeight={500}>+{chainsToHide}</Typography>
-          </Box>
-        </ChainCard>
-      ) : null}
-    </ChainContainer>
-  );
-};

package/components/ChainSelect/useChainSelect.ts

@@ -1,66 +0,0 @@
-import type { EVMChain } from '@lifi/sdk';
-import { useChains } from '../../hooks/useChains.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useToAddressReset } from '../../hooks/useToAddressReset.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useChainOrder } from '../../stores/chains/useChainOrder.js';
-import type { FormType } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldController } from '../../stores/form/useFieldController.js';
-import type { DisabledUI } from '../../types/widget.js';
-
-export const useChainSelect = (formType: FormType) => {
-  const { disabledUI } = useWidgetConfig();
-  const chainKey = FormKeyHelper.getChainKey(formType);
-  const { onChange } = useFieldController({ name: chainKey });
-  const { setFieldValue, getFieldValues } = useFieldActions();
-  const { chains, isLoading, getChainById } = useChains(formType);
-  const [chainOrder, setChainOrder] = useChainOrder(formType);
-  const swapOnly = useSwapOnly();
-  const { tryResetToAddress } = useToAddressReset();
-
-  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);
-    if (swapOnly) {
-      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
-        isTouched: true,
-      });
-    }
-    const tokenKey = FormKeyHelper.getTokenKey(formType);
-    if (!disabledUI?.includes(tokenKey as DisabledUI)) {
-      setFieldValue(tokenKey, '');
-    }
-    const amountKey = FormKeyHelper.getAmountKey(formType);
-    if (!disabledUI?.includes(amountKey as DisabledUI)) {
-      setFieldValue(amountKey, '');
-    }
-    setFieldValue('tokenSearchFilter', '');
-
-    const [toChainId] = getFieldValues('toChain');
-    const toChain = getChainById(toChainId);
-    if (toChain) {
-      tryResetToAddress(toChain);
-    }
-    setChainOrder(chainId, formType);
-  };
-
-  return {
-    chainOrder,
-    chains,
-    getChains,
-    isLoading,
-    setChainOrder,
-    setCurrentChain,
-  };
-};

package/components/ContractComponent/ContractComponent.tsx

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

package/components/ContractComponent/ItemPrice.tsx

@@ -1,33 +0,0 @@
-import type { ContractCall } from '@lifi/sdk';
-import { useEffect } from 'react';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import type { TokenAmount } from '../../types/token.js';
-import { Token } from '../Token/Token.js';
-
-export interface ItemPriceProps {
-  token: TokenAmount;
-  contractCalls?: ContractCall[];
-}
-
-export const ItemPrice: React.FC<ItemPriceProps> = ({
-  token,
-  contractCalls,
-}) => {
-  const { setFieldValue } = useFieldActions();
-
-  useEffect(() => {
-    if (token) {
-      setFieldValue('toChain', token.chainId, { isTouched: true });
-      setFieldValue('toToken', token.address, { isTouched: true });
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      });
-    }
-    if (contractCalls) {
-      setFieldValue('contractCalls', contractCalls, {
-        isTouched: true,
-      });
-    }
-  }, [contractCalls, setFieldValue, token]);
-  return <Token token={token} p={2} />;
-};

package/components/ContractComponent/NFT/NFT.style.ts

@@ -1,8 +0,0 @@
-import { Avatar, styled } from '@mui/material';
-
-export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  width: 96,
-  height: 96,
-  borderRadius: theme.shape.borderRadius,
-}));

package/components/ContractComponent/NFT/NFT.tsx

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useFieldActions } from '../../../stores/form/useFieldActions.js';
-import { NFTBase } from './NFTBase.js';
-import type { NFTProps } from './types.js';
-
-export const NFT: React.FC<NFTProps> = ({
-  imageUrl,
-  isLoading,
-  collectionName,
-  assetName,
-  owner,
-  token,
-  contractCall,
-}) => {
-  const { setFieldValue } = useFieldActions();
-
-  useEffect(() => {
-    if (token) {
-      setFieldValue('toChain', token.chainId, { isTouched: true });
-      setFieldValue('toToken', token.address, { isTouched: true });
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      });
-    }
-    if (contractCall) {
-      setFieldValue('contractCalls', [contractCall], {
-        isTouched: true,
-      });
-    }
-  }, [contractCall, setFieldValue, token]);
-  return (
-    <NFTBase
-      isLoading={isLoading}
-      imageUrl={imageUrl}
-      collectionName={collectionName}
-      assetName={assetName}
-      owner={owner}
-      token={token}
-    />
-  );
-};

package/components/ContractComponent/NFT/NFTBase.tsx

@@ -1,64 +0,0 @@
-import { Box, Link, Skeleton, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Token } from '../../Token/Token.js';
-import { PreviewAvatar } from './NFT.style.js';
-import type { NFTProps } from './types.js';
-
-export const NFTBase: React.FC<NFTProps> = ({
-  imageUrl,
-  isLoading,
-  collectionName,
-  assetName,
-  owner,
-  token,
-}) => {
-  const { t } = useTranslation();
-  return (
-    <Box p={2}>
-      <Box display="flex">
-        {isLoading ? (
-          <Skeleton
-            width={96}
-            height={96}
-            variant="rectangular"
-            sx={{ borderRadius: 1 }}
-          />
-        ) : (
-          <PreviewAvatar src={imageUrl} />
-        )}
-        <Box ml={2}>
-          {isLoading ? (
-            <Skeleton width={144} height={21} variant="text" />
-          ) : (
-            <Typography fontSize={14} color="text.secondary">
-              {collectionName}
-            </Typography>
-          )}
-          {isLoading ? (
-            <Skeleton width={112} height={27} variant="text" />
-          ) : (
-            <Typography fontSize={18} fontWeight={600}>
-              {assetName}
-            </Typography>
-          )}
-          {isLoading ? (
-            <Skeleton width={128} height={21} variant="text" />
-          ) : owner ? (
-            <Typography fontSize={14} color="text.secondary">
-              {t('main.ownedBy')}{' '}
-              <Link
-                href={owner.url}
-                target="_blank"
-                underline="none"
-                color="primary"
-              >
-                {owner.name}
-              </Link>
-            </Typography>
-          ) : null}
-        </Box>
-      </Box>
-      <Token token={token} isLoading={isLoading} mt={2} />
-    </Box>
-  );
-};

package/components/ContractComponent/NFT/types.ts

@@ -1,19 +0,0 @@
-import type { ContractCall, TokenAmount } from '@lifi/sdk';
-
-export interface NFTBaseProps {
-  imageUrl?: string;
-  collectionName?: string;
-  assetName?: string;
-  isLoading?: boolean;
-  owner?: NFTOwner;
-  token: TokenAmount;
-}
-
-export interface NFTProps extends NFTBaseProps {
-  contractCall?: ContractCall;
-}
-
-export interface NFTOwner {
-  name?: string;
-  url?: string;
-}

package/components/Dialog.tsx

@@ -1,51 +0,0 @@
-import type { DialogProps, PaperProps, Theme } from '@mui/material';
-import { Dialog as MuiDialog } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
-
-export const modalProps = {
-  sx: {
-    position: 'absolute',
-    overflow: 'hidden',
-  },
-};
-
-export const paperProps: Partial<PaperProps> = {
-  sx: (theme: Theme) => ({
-    position: 'absolute',
-    backgroundImage: 'none',
-    backgroundColor: theme.palette.background.default,
-    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>
-  );
-};