@lifi/widget 3.7.0 → 3.8.0-beta.0

package/components/AmountInput/AmountInputStartAdornment.tsx

@@ -1,26 +0,0 @@
-import { useChain } from '../../hooks/useChain.js';
-import { useToken } from '../../hooks/useToken.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { AvatarBadgedDefault } from '../Avatar/Avatar.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-
-export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
-  formType,
-}) => {
-  const [chainId, tokenAddress] = useFieldValues(
-    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} />
-  ) : (
-    <AvatarBadgedDefault />
-  );
-};

package/components/AmountInput/PriceFormHelperText.tsx

@@ -1,82 +0,0 @@
-import type { TokenAmount } from '@lifi/sdk';
-import { FormHelperText, Skeleton, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
-
-export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
-  const [chainId, tokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType),
-  );
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-
-  return (
-    <PriceFormHelperTextBase
-      formType={formType}
-      isLoading={isLoading}
-      tokenAddress={tokenAddress}
-      token={token}
-    />
-  );
-};
-
-export const PriceFormHelperTextBase: React.FC<
-  FormTypeProps & {
-    isLoading?: boolean;
-    tokenAddress?: string;
-    token?: TokenAmount;
-  }
-> = ({ formType, isLoading, tokenAddress, token }) => {
-  const { t } = useTranslation();
-  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
-
-  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
-
-  return (
-    <FormHelperText
-      component="div"
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        margin: 0,
-        marginLeft: 2,
-        marginTop: 0.75,
-      }}
-    >
-      <Typography
-        color="text.secondary"
-        fontWeight={500}
-        fontSize={12}
-        lineHeight={1}
-        flex={1}
-        sx={{
-          wordBreak: 'break-word',
-          overflowWrap: 'break-word',
-        }}
-      >
-        {t(`format.currency`, {
-          value: fromAmountTokenPrice,
-        })}
-      </Typography>
-      {isLoading && tokenAddress ? (
-        <Skeleton variant="text" width={48} height={12} />
-      ) : token?.amount ? (
-        <Typography
-          fontWeight={500}
-          fontSize={12}
-          color="text.secondary"
-          lineHeight={1}
-          pl={0.25}
-        >
-          {`/ ${t(`format.number`, {
-            value: formatTokenAmount(token.amount, token.decimals),
-          })}`}
-        </Typography>
-      ) : null}
-    </FormHelperText>
-  );
-};

package/components/AppContainer.tsx

@@ -1,141 +0,0 @@
-import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-import { defaultMaxHeight } from '../config/constants.js';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import { useHeaderHeight } from '../stores/header/useHeaderStore.js';
-import type { WidgetVariant } from '../types/widget.js';
-import { ElementId, createElementId } from '../utils/elements.js';
-
-// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
-//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
-//  A Number of other components and hooks work with height values that are often set on or derived from these elements
-//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
-//    - useTokenListHeight
-//    - useSetContentHeight
-//  Also check any code that is using the methods from elements.ts utils file
-
-export const AppExpandedContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'start',
-  flex: 1,
-  height:
-    variant === 'drawer'
-      ? 'none'
-      : theme.container?.display === 'flex'
-        ? '100%'
-        : theme.container?.maxHeight
-          ? 'auto'
-          : theme.container?.height || 'auto',
-}));
-
-export const RelativeContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => {
-  const container = { ...theme.container };
-
-  if (variant === 'drawer') {
-    container.height = '100%';
-  }
-
-  return {
-    position: 'relative',
-    boxSizing: 'content-box',
-    width: '100%',
-    minWidth: theme.breakpoints.values.xs,
-    maxWidth: theme.breakpoints.values.sm,
-    background: theme.palette.background.default,
-    overflow: 'auto',
-    flex: 1,
-    zIndex: 0,
-    ...container,
-    maxHeight:
-      variant === 'drawer'
-        ? 'none'
-        : theme.container?.display === 'flex' && !theme.container?.height
-          ? '100%'
-          : theme.container?.maxHeight
-            ? theme.container?.maxHeight
-            : theme.container?.height || defaultMaxHeight,
-  };
-});
-
-interface CssBaselineContainerProps {
-  variant?: WidgetVariant;
-  paddingTopAdjustment: number;
-  elementId: string;
-}
-
-const CssBaselineContainer = styled(ScopedCssBaseline, {
-  shouldForwardProp: (prop) =>
-    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
-})<CssBaselineContainerProps>(
-  ({ theme, variant, paddingTopAdjustment, elementId }) => ({
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    overflowX: 'clip',
-    margin: 0,
-    width: '100%',
-    maxHeight:
-      variant === 'drawer' || theme.container?.display === 'flex'
-        ? 'none'
-        : theme.container?.maxHeight
-          ? theme.container?.maxHeight
-          : theme.container?.height || defaultMaxHeight,
-    overflowY: 'auto',
-    height: theme.container?.display === 'flex' ? 'auto' : '100%',
-    paddingTop: paddingTopAdjustment,
-    // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
-    [`&:has(.full-page-container)`]: {
-      height: theme.container?.maxHeight
-        ? theme.container?.maxHeight
-        : theme.container?.height || defaultMaxHeight,
-    },
-  }),
-);
-
-export const FlexContainer = styled(Container)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-}));
-
-export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
-  // const ref = useRef<HTMLDivElement>(null);
-  const { variant, elementId, theme } = useWidgetConfig();
-  const { headerHeight } = useHeaderHeight();
-  const positionFixedAdjustment =
-    theme?.header?.position === 'fixed' ? headerHeight : 0;
-
-  return (
-    <RelativeContainer
-      variant={variant}
-      id={createElementId(ElementId.RelativeContainer, elementId)}
-    >
-      <CssBaselineContainer
-        id={createElementId(ElementId.ScrollableContainer, elementId)}
-        variant={variant}
-        enableColorScheme
-        paddingTopAdjustment={positionFixedAdjustment}
-        elementId={elementId}
-        // ref={ref}
-      >
-        <FlexContainer disableGutters>{children}</FlexContainer>
-      </CssBaselineContainer>
-      {/* <ScrollToLocation elementRef={ref} /> */}
-    </RelativeContainer>
-  );
-};
-
-// export const ScrollToLocation: React.FC<{
-//   elementRef: RefObject<HTMLElement>;
-// }> = ({ elementRef }) => {
-//   const { pathname } = useLocation();
-//   useLayoutEffect(() => {
-//     elementRef.current?.scrollTo(0, 0);
-//   }, [elementRef, pathname]);
-//   return null;
-// };

package/components/Avatar/AccountAvatar.tsx

@@ -1,61 +0,0 @@
-import { getConnectorIcon } from '@lifi/wallet-management';
-import { Wallet } from '@mui/icons-material';
-import { Badge } from '@mui/material';
-import type { Account } from '../../hooks/useAccount.js';
-import { useChain } from '../../hooks/useChain.js';
-import type { ToAddress } from '../../types/widget.js';
-import { SmallAvatar } from '../SmallAvatar.js';
-import {
-  AvatarDefault,
-  AvatarDefaultBadge,
-  AvatarMasked,
-} from './Avatar.style.js';
-
-interface AccountAvatarProps {
-  chainId?: number;
-  account?: Account;
-  toAddress?: ToAddress;
-  empty?: boolean;
-}
-
-export const AccountAvatar = ({
-  chainId,
-  account,
-  empty,
-  toAddress,
-}: AccountAvatarProps) => {
-  const { chain } = useChain(chainId);
-
-  const avatar = empty ? (
-    <AvatarDefault />
-  ) : account?.connector || toAddress?.logoURI ? (
-    <AvatarMasked
-      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}
-      alt={toAddress?.name || account?.connector?.name}
-    >
-      {(toAddress?.name || account?.connector?.name)?.[0]}
-    </AvatarMasked>
-  ) : (
-    <AvatarDefault>
-      <Wallet sx={{ fontSize: 20 }} />
-    </AvatarDefault>
-  );
-
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={
-        chain ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name}>
-            {chain.name[0]}
-          </SmallAvatar>
-        ) : (
-          <AvatarDefaultBadge />
-        )
-      }
-    >
-      {avatar}
-    </Badge>
-  );
-};

package/components/Avatar/Avatar.style.tsx

@@ -1,59 +0,0 @@
-import type { CSSObject } from '@mui/material';
-import {
-  AvatarGroup,
-  Box,
-  Avatar as MuiAvatar,
-  Skeleton,
-  avatarClasses,
-  badgeClasses,
-  styled,
-} from '@mui/material';
-import { avatarMask16 } from './utils.js';
-
-export const AvatarMasked = styled(MuiAvatar)(({ theme }) => ({
-  mask: avatarMask16,
-}));
-
-export const AvatarSkeleton = styled(Skeleton)(({ theme }) => ({
-  mask: avatarMask16,
-}));
-
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-  [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
-    marginLeft: theme.spacing(-1),
-    boxSizing: 'border-box',
-  },
-  [`& .${badgeClasses.root}:last-child`]: {
-    marginLeft: theme.spacing(1),
-  },
-}));
-
-export const AvatarDefault = styled(Box)(({ theme }) => {
-  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject;
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    background:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    borderRadius: '50%',
-    height: root?.height,
-    width: root?.width,
-    color: theme.palette.text.secondary,
-    mask: avatarMask16,
-  };
-});
-
-export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
-  return {
-    background:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    borderRadius: '50%',
-    height: 16,
-    width: 16,
-  };
-});

package/components/Avatar/Avatar.tsx

@@ -1,38 +0,0 @@
-import type { SxProps, Theme } from '@mui/material';
-import { Badge } from '@mui/material';
-import { SmallAvatarSkeleton } from '../SmallAvatar.js';
-import {
-  AvatarDefault,
-  AvatarDefaultBadge,
-  AvatarSkeleton,
-} from './Avatar.style.js';
-
-export const AvatarBadgedDefault: React.FC<{
-  sx?: SxProps<Theme>;
-}> = ({ sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefaultBadge />}
-      sx={sx}
-    >
-      <AvatarDefault />
-    </Badge>
-  );
-};
-
-export const AvatarBadgedSkeleton: React.FC<{
-  sx?: SxProps<Theme>;
-}> = ({ sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<SmallAvatarSkeleton />}
-      sx={sx}
-    >
-      <AvatarSkeleton width={40} height={40} variant="circular" />
-    </Badge>
-  );
-};

package/components/Avatar/TokenAvatar.tsx

@@ -1,77 +0,0 @@
-import type { Chain, StaticToken } from '@lifi/sdk';
-import type { SxProps, Theme } from '@mui/material';
-import { Badge } from '@mui/material';
-import { useChain } from '../../hooks/useChain.js';
-import { useToken } from '../../hooks/useToken.js';
-import { SmallAvatar } from '../SmallAvatar.js';
-import { AvatarBadgedSkeleton } from './Avatar.js';
-import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js';
-
-export const TokenAvatar: React.FC<{
-  token?: StaticToken;
-  chain?: Chain;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, chain, isLoading, sx }) => {
-  if (!chain || !token?.logoURI) {
-    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />;
-  }
-  return (
-    <TokenAvatarBase
-      token={token}
-      chain={chain}
-      isLoading={isLoading}
-      sx={sx}
-    />
-  );
-};
-
-export const TokenAvatarFallback: React.FC<{
-  token?: StaticToken;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, isLoading, sx }) => {
-  const { chain } = useChain(token?.chainId);
-  const { token: chainToken, isLoading: isLoadingToken } = useToken(
-    token?.chainId,
-    token?.address,
-  );
-  return (
-    <TokenAvatarBase
-      token={chainToken ?? token}
-      isLoading={isLoading || isLoadingToken}
-      chain={chain}
-      sx={sx}
-    />
-  );
-};
-
-export const TokenAvatarBase: React.FC<{
-  token?: StaticToken;
-  chain?: Chain;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, chain, isLoading, sx }) => {
-  return isLoading ? (
-    <AvatarBadgedSkeleton />
-  ) : (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={
-        chain ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name}>
-            {chain.name[0]}
-          </SmallAvatar>
-        ) : (
-          <AvatarDefaultBadge />
-        )
-      }
-      sx={sx}
-    >
-      <AvatarMasked src={token?.logoURI} alt={token?.symbol}>
-        {token?.symbol?.[0]}
-      </AvatarMasked>
-    </Badge>
-  );
-};

package/components/Avatar/utils.ts

@@ -1,11 +0,0 @@
-/**
- * Avatar mask for 16px badge
- */
-export const avatarMask16 =
-  'radial-gradient(circle 10.5px at calc(100% - 5.5px) calc(100% - 5.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat';
-
-/**
- * Avatar mask for 12px badge
- */
-export const avatarMask12 =
-  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat';

package/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,56 +0,0 @@
-import { LoadingButton } from '@mui/lab';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useChain } from '../../hooks/useChain.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import type { BaseTransactionButtonProps } from './types.js';
-
-export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
-  onClick,
-  text,
-  disabled,
-  loading,
-}) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { walletConfig } = useWidgetConfig();
-  const [fromChainId] = useFieldValues('fromChain');
-  const { chain } = useChain(fromChainId);
-  const { account } = useAccount({ chainType: chain?.chainType });
-
-  const handleClick = async () => {
-    if (account.isConnected) {
-      onClick?.();
-    } else if (walletConfig?.onConnect) {
-      walletConfig.onConnect();
-    } 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={account.isConnected && disabled}
-      loading={loading}
-      loadingPosition="center"
-      fullWidth
-    >
-      {getButtonText()}
-    </LoadingButton>
-  );
-};

package/components/BaseTransactionButton/types.ts

@@ -1,6 +0,0 @@
-export interface BaseTransactionButtonProps {
-  onClick?(): void;
-  text?: string;
-  disabled?: boolean;
-  loading?: boolean;
-}

package/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/useScrollableContainer.js';
-import { modalProps, paperProps, slotProps } from '../Dialog.js';
-import type { BottomSheetBase, BottomSheetProps } from './types.js';
-
-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}
-        slotProps={slotProps}
-        disableAutoFocus
-      >
-        {children}
-      </Drawer>
-    );
-  },
-);

package/components/BottomSheet/types.ts

@@ -1,13 +0,0 @@
-import type { DrawerProps } from '@mui/material';
-import type { RefObject } from 'react';
-
-export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
-  elementRef?: RefObject<HTMLDivElement>;
-  onClose?(): void;
-};
-
-export interface BottomSheetBase {
-  isOpen(): void;
-  open(): void;
-  close(): void;
-}

package/components/ButtonTertiary.tsx

@@ -1,19 +0,0 @@
-import { LoadingButton, loadingButtonClasses } from '@mui/lab';
-import { styled } from '@mui/material';
-import { getContrastAlphaColor } from '../utils/colors.js';
-
-export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  height: 40,
-  fontSize: 14,
-  backgroundColor: getContrastAlphaColor(theme, 0.04),
-  '&:hover, &:active': {
-    backgroundColor: getContrastAlphaColor(theme, 0.08),
-  },
-  [`&.${loadingButtonClasses.loading}:disabled`]: {
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
-  },
-  [`.${loadingButtonClasses.loadingIndicator}`]: {
-    color: theme.palette.text.primary,
-  },
-}));