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

package/src/components/SelectChainAndToken.tsx

@@ -1,65 +0,0 @@
-import type { BoxProps, Theme } from '@mui/material';
-import { Box, useMediaQuery } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { ReverseTokensButton } from '../components/ReverseTokensButton';
-import { SelectTokenButton } from '../components/SelectTokenButton';
-import { FormKey, useWidgetConfig } from '../providers';
-import { DisabledUI, HiddenUI } from '../types';
-
-export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const prefersNarrowView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm'),
-  );
-  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
-  const [fromChain, toChain, fromToken, toToken] = useWatch({
-    name: [
-      FormKey.FromChain,
-      FormKey.ToChain,
-      FormKey.FromToken,
-      FormKey.ToToken,
-    ],
-  });
-
-  const hiddenReverse =
-    subvariant === 'refuel' ||
-    disabledUI?.includes(DisabledUI.FromToken) ||
-    disabledUI?.includes(DisabledUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.ToToken);
-
-  const hiddenToToken =
-    subvariant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
-
-  const isCompact =
-    fromChain &&
-    toChain &&
-    fromToken &&
-    toToken &&
-    !prefersNarrowView &&
-    !hiddenToToken;
-
-  return (
-    <Box
-      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
-      {...props}
-    >
-      <SelectTokenButton formType="from" compact={isCompact} />
-      {!hiddenToToken ? (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          m={!hiddenReverse ? -1.125 : 1}
-        >
-          {!hiddenReverse ? (
-            <ReverseTokensButton vertical={!isCompact} />
-          ) : null}
-        </Box>
-      ) : null}
-      {!hiddenToToken ? (
-        <SelectTokenButton formType="to" compact={isCompact} />
-      ) : null}
-    </Box>
-  );
-};

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,35 +0,0 @@
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
-import { CardHeader } from '../Card';
-
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    height: 64,
-    [`.${cardHeaderClasses.title}`]: {
-      color: selected
-        ? theme.palette.text.primary
-        : theme.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 92 : 256,
-      fontWeight: selected ? 500 : 400,
-      fontSize: compact && !selected ? '1rem' : '1.125rem',
-      [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 92 : 256,
-      [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
-      },
-    },
-  }),
-);

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -1,80 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useChain, useSwapOnly, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper, useWidgetConfig } from '../../providers';
-import { navigationRoutes } from '../../utils';
-import { Card, CardTitle } from '../Card';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-import { SelectTokenCardHeader } from './SelectTokenButton.style';
-
-export const SelectTokenButton: React.FC<
-  FormTypeProps & {
-    compact: boolean;
-  }
-> = ({ formType, compact }) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { disabledUI, subvariant } = useWidgetConfig();
-  const swapOnly = useSwapOnly();
-  const tokenKey = FormKeyHelper.getTokenKey(formType);
-  const [chainId, tokenAddress] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType), tokenKey],
-  });
-  const { chain, isLoading: isChainLoading } = useChain(chainId);
-  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
-
-  const handleClick = () => {
-    navigate(
-      formType === 'from'
-        ? navigationRoutes.fromToken
-        : subvariant === 'refuel'
-          ? navigationRoutes.toTokenNative
-          : navigationRoutes.toToken,
-    );
-  };
-
-  const isSelected = !!(chain && token);
-  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-  const defaultPlaceholder =
-    formType === 'to' && subvariant === 'refuel'
-      ? t('main.selectChain')
-      : formType === 'to' && swapOnly
-        ? t('main.selectToken')
-        : t('main.selectChainAndToken');
-  const cardTitle: string =
-    formType === 'from' && subvariant === 'nft'
-      ? t(`header.payWith`)
-      : t(`main.${formType}`);
-  return (
-    <Card flex={1} onClick={onClick}>
-      <CardTitle>{cardTitle}</CardTitle>
-      {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
-        <SelectTokenCardHeader
-          avatar={<Skeleton variant="circular" width={32} height={32} />}
-          title={<Skeleton variant="text" width={64} height={24} />}
-          subheader={<Skeleton variant="text" width={64} height={16} />}
-          compact={compact}
-        />
-      ) : (
-        <SelectTokenCardHeader
-          avatar={
-            isSelected ? (
-              <TokenAvatar token={token} chain={chain} />
-            ) : (
-              <TokenAvatarDefault />
-            )
-          }
-          title={isSelected ? token.symbol : defaultPlaceholder}
-          subheader={
-            isSelected ? t(`main.onChain`, { chainName: chain.name }) : null
-          }
-          selected={isSelected}
-          compact={compact}
-        />
-      )}
-    </Card>
-  );
-};

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -1,20 +0,0 @@
-import { FormControl as MuiFormControl, InputBase } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { styled } from '@mui/material/styles';
-
-export const FormControl = styled(MuiFormControl)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 1.5, 0),
-}));
-
-export const Input = styled(InputBase)(({ theme }) => ({
-  [`.${inputBaseClasses.input}`]: {
-    height: 32,
-    padding: theme.spacing(0, 0, 0, 2),
-  },
-  [`&.${inputBaseClasses.disabled}`]: {
-    color: 'inherit',
-  },
-  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
-    WebkitTextFillColor: 'unset',
-  },
-}));

package/src/components/SendToWallet/SendToWallet.tsx

@@ -1,124 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import { Collapse, FormHelperText } from '@mui/material';
-import { getEnsAddress } from '@wagmi/core';
-import { forwardRef, useEffect, useRef } from 'react';
-import { useController, useFormContext, useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { isAddress } from 'viem';
-import { normalize } from 'viem/ens';
-import { useConfig } from 'wagmi';
-import { useAccount, useRequiredToAddress } from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI } from '../../types';
-import { isSVMAddress } from '../../utils';
-import { Card, CardTitle } from '../Card';
-import { FormControl, Input } from './SendToWallet.style';
-
-export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
-  const { t } = useTranslation();
-  const { trigger, getValues, setValue, clearErrors } = useFormContext();
-  const { account } = useAccount();
-  const config = useConfig();
-  const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
-  const { showSendToWallet, showSendToWalletDirty } = useSendToWalletStore();
-  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-  const requiredToAddress = useRequiredToAddress();
-  const requiredToAddressRef = useRef(requiredToAddress);
-
-  // We want to show toAddress field if it is set via widget configuration and not hidden
-  const showInstantly =
-    Boolean(
-      !showSendToWalletDirty &&
-        showDestinationWallet &&
-        toAddress &&
-        !hiddenToAddress,
-    ) || requiredToAddress;
-
-  const {
-    field: { onChange, onBlur, name, value },
-  } = useController({
-    name: FormKey.ToAddress,
-    rules: {
-      required:
-        requiredToAddress && (t('error.title.walletAddressRequired') as string),
-      onChange: (e) => {
-        setValue(FormKey.ToAddress, e.target.value.trim());
-      },
-      validate: async (value: string) => {
-        try {
-          if (!value || isAddress(value) || isSVMAddress(value)) {
-            return true;
-          }
-          const address = await getEnsAddress(config, {
-            chainId: getValues(FormKey.ToChain),
-            name: normalize(value),
-          });
-          return Boolean(address);
-        } catch (error) {
-          return t('error.title.walletEnsAddressInvalid') as string;
-        }
-      },
-      onBlur: () => trigger(FormKey.ToAddress),
-    },
-  });
-
-  useEffect(() => {
-    const value = getValues(FormKey.ToAddress);
-    if (value) {
-      trigger(FormKey.ToAddress);
-      // Trigger validation if we change requiredToAddress in the runtime
-    } else if (requiredToAddressRef.current !== requiredToAddress) {
-      requiredToAddressRef.current = requiredToAddress;
-      trigger(FormKey.ToAddress).then(() => clearErrors(FormKey.ToAddress));
-    }
-  }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
-
-  if (hiddenToAddress && !requiredToAddress) {
-    return null;
-  }
-
-  return (
-    <Collapse
-      timeout={showInstantly ? 0 : 225}
-      in={showSendToWallet || showInstantly}
-      mountOnEnter
-      unmountOnExit
-    >
-      <Card {...props} ref={ref}>
-        <CardTitle required={requiredToAddress}>
-          {t('main.sendToWallet')}
-        </CardTitle>
-        <FormControl fullWidth sx={{ paddingTop: '6px', paddingBottom: '5px' }}>
-          <Input
-            size="small"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={onChange}
-            onBlur={onBlur}
-            name={name}
-            value={value}
-            placeholder={t('main.walletAddressOrEns') as string}
-            disabled={Boolean(toAddress && disabledToAddress)}
-          />
-          <SendToWalletFormHelperText />
-        </FormControl>
-      </Card>
-    </Collapse>
-  );
-});
-
-export const SendToWalletFormHelperText: React.FC = () => {
-  const { errors } = useFormState();
-
-  return (
-    <FormHelperText error={!!errors.toAddress}>
-      {errors.toAddress?.message as string}
-    </FormHelperText>
-  );
-};

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,58 +0,0 @@
-import WalletIcon from '@mui/icons-material/Wallet';
-import { Button, Tooltip } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
-
-export const SendToWalletButton: React.FC = () => {
-  const { t } = useTranslation();
-  const { setValue } = useFormContext();
-  const emitter = useWidgetEvents();
-  const { disabledUI, hiddenUI } = useWidgetConfig();
-  const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
-  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-
-  const requiredToAddress = useRequiredToAddress();
-
-  if (
-    !showDestinationWallet ||
-    hiddenUI?.includes(HiddenUI.ToAddress) ||
-    requiredToAddress
-  ) {
-    return null;
-  }
-
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setValue(FormKey.ToAddress, '', { shouldTouch: true });
-    }
-    toggleSendToWallet();
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet,
-    );
-  };
-
-  return (
-    <Tooltip
-      title={t('main.sendToWallet')}
-      placement="bottom-end"
-      enterDelay={400}
-      arrow
-    >
-      <Button
-        variant={showSendToWallet ? 'contained' : 'text'}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          marginLeft: 1,
-        }}
-      >
-        <WalletIcon />
-      </Button>
-    </Tooltip>
-  );
-};

package/src/components/SendToWallet/index.ts

@@ -1,2 +0,0 @@
-export * from './SendToWallet';
-export * from './SendToWalletButton';

package/src/components/SmallAvatar.tsx

@@ -1,28 +0,0 @@
-import { Avatar, Box, Skeleton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  width: 16,
-  height: 16,
-  border: `2px solid ${theme.palette.background.paper}`,
-}));
-
-export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
-  border: `2px solid ${theme.palette.background.paper}`,
-  width: 16,
-  height: 16,
-}));
-
-export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  borderRadius: '50%',
-}));
-
-export const SmallAvatarSkeleton = () => {
-  return (
-    <SmallAvatarSkeletonContainer>
-      <SmallAvatarSkeletonBase variant="circular" />
-    </SmallAvatarSkeletonContainer>
-  );
-};

package/src/components/Step/CircularProgress.style.tsx

@@ -1,82 +0,0 @@
-import type { Status, Substatus } from '@lifi/sdk';
-import type { Theme } from '@mui/material';
-import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
-import { circularProgressClasses } from '@mui/material/CircularProgress';
-import { alpha, keyframes, styled } from '@mui/material/styles';
-
-const getStatusColor = (
-  theme: Theme,
-  status: Status,
-  substatus?: Substatus,
-) => {
-  switch (status) {
-    case 'ACTION_REQUIRED':
-      return alpha(theme.palette.info.main, 0.12);
-    case 'DONE':
-      if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return alpha(theme.palette.warning.main, 0.48);
-      }
-      return alpha(theme.palette.success.main, 0.12);
-    case 'FAILED':
-      return alpha(theme.palette.error.main, 0.12);
-    default:
-      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
-  }
-};
-
-export const CircularIcon = styled(Box, {
-  shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
-})<{ status: Status; substatus?: Substatus }>(
-  ({ theme, status, substatus }) => ({
-    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
-      ? getStatusColor(theme, status, substatus)
-      : theme.palette.background.paper,
-    borderStyle: 'solid',
-    borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
-      ? 2
-      : 0,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    width: 32,
-    height: 32,
-    borderRadius: '50%',
-  }),
-);
-
-const circleAnimation = keyframes`
-  0% {
-    stroke-dashoffset: 129;
-    transform: rotate(0);
-  }
-  50% {
-    stroke-dashoffset: 56;
-    transform: rotate(45deg);
-  };
-  100% {
-    stroke-dashoffset: 129;
-    transform: rotate(360deg);
-  }
-`;
-
-// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
-export const CircularProgressPending = styled(MuiCircularProgress)`
-  color: ${({ theme }) =>
-    theme.palette.mode === 'light'
-      ? theme.palette.primary.main
-      : theme.palette.primary.light};
-  animation-duration: 3s;
-  position: absolute;
-  left: -2px;
-  .${circularProgressClasses.circle} {
-    animation-duration: 2s;
-    animation-timing-function: linear;
-    animation-name: ${circleAnimation};
-    stroke-dasharray: 129;
-    stroke-dashoffset: 129;
-    stroke-linecap: round;
-    transform-origin: 100% 100%;
-  }
-`;

package/src/components/Step/CircularProgress.tsx

@@ -1,56 +0,0 @@
-import type { Process } from '@lifi/sdk';
-import DoneIcon from '@mui/icons-material/Done';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { darken } from '@mui/material/styles';
-import {
-  CircularIcon,
-  CircularProgressPending,
-} from './CircularProgress.style';
-
-export function CircularProgress({ process }: { process: Process }) {
-  return (
-    <CircularIcon status={process.status} substatus={process.substatus}>
-      {process.status === 'STARTED' || process.status === 'PENDING' ? (
-        <CircularProgressPending size={32} thickness={3} />
-      ) : null}
-      {process.status === 'ACTION_REQUIRED' ? (
-        <InfoRoundedIcon
-          color="info"
-          sx={{
-            position: 'absolute',
-            fontSize: '1rem',
-          }}
-        />
-      ) : null}
-      {process.status === 'DONE' &&
-      (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
-        <WarningRoundedIcon
-          sx={(theme) => ({
-            position: 'absolute',
-            fontSize: '1rem',
-            color: darken(theme.palette.warning.main, 0.32),
-          })}
-        />
-      ) : process.status === 'DONE' ? (
-        <DoneIcon
-          color="success"
-          sx={{
-            position: 'absolute',
-            fontSize: '1rem',
-          }}
-        />
-      ) : null}
-      {process.status === 'FAILED' ? (
-        <ErrorRoundedIcon
-          color="error"
-          sx={{
-            position: 'absolute',
-            fontSize: '1rem',
-          }}
-        />
-      ) : null}
-    </CircularIcon>
-  );
-}

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,55 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
-import WalletIcon from '@mui/icons-material/Wallet';
-import { Box, Link, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CircularIcon } from './CircularProgress.style';
-import { LinkButton } from './StepProcess.style';
-
-export const DestinationWalletAddress: React.FC<{
-  step: LiFiStepExtended;
-  toAddress: string;
-  toAddressLink: string;
-}> = ({ step, toAddress, toAddressLink }) => {
-  const { t } = useTranslation();
-  const isDone = step.execution?.status === 'DONE';
-  return (
-    <Box px={2} py={1}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <CircularIcon status={isDone ? 'DONE' : 'NOT_STARTED'}>
-          <WalletIcon
-            color={isDone ? 'success' : 'inherit'}
-            sx={{
-              position: 'absolute',
-              fontSize: '1rem',
-            }}
-          />
-        </CircularIcon>
-        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
-          {isDone
-            ? t('main.sentToAddress', {
-                address: toAddress,
-              })
-            : t('main.sendToAddress', {
-                address: toAddress,
-              })}
-        </Typography>
-        <LinkButton
-          size="small"
-          edge="end"
-          LinkComponent={Link}
-          href={toAddressLink}
-          target="_blank"
-          rel="nofollow noreferrer"
-        >
-          <LinkRoundedIcon />
-        </LinkButton>
-      </Box>
-    </Box>
-  );
-};

package/src/components/Step/GasStepProcess.tsx

@@ -1,45 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import EvStationIcon from '@mui/icons-material/EvStation';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CircularIcon } from './CircularProgress.style';
-
-export const GasStepProcess: React.FC<{
-  step: LiFiStepExtended;
-}> = ({ step }) => {
-  const { t } = useTranslation();
-  const isDone = step.execution?.status === 'DONE';
-  return (
-    <Box px={2} py={1}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <CircularIcon status={isDone ? 'DONE' : 'NOT_STARTED'}>
-          <EvStationIcon
-            color={isDone ? 'success' : 'inherit'}
-            sx={{
-              position: 'absolute',
-              fontSize: '1rem',
-            }}
-          />
-        </CircularIcon>
-        <Typography ml={2} flex={1} fontSize={14} fontWeight={400}>
-          {t('format.currency', {
-            value:
-              (step.execution?.gasAmountUSD ||
-                step.estimate.gasCosts?.reduce(
-                  (amount, gasCost) =>
-                    amount + parseFloat(gasCost.amountUSD || '0'),
-                  0,
-                )) ??
-              0,
-          })}{' '}
-          {isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')}
-        </Typography>
-      </Box>
-    </Box>
-  );
-};