@lifi/widget 3.7.0 → 3.8.0-beta.1

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,157 +0,0 @@
-import { CloseRounded } from '@mui/icons-material';
-import { Box, Collapse } from '@mui/material';
-import { useEffect, useRef, type MouseEventHandler } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
-import { DisabledUI, HiddenUI } from '../../types/widget.js';
-import {
-  defaultChainIdsByType,
-  getChainTypeFromAddress,
-} from '../../utils/chainType.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { AccountAvatar } from '../Avatar/AccountAvatar.js';
-import type { CardProps } from '../Card/Card.js';
-import { Card } from '../Card/Card.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CardTitle } from '../Card/CardTitle.js';
-import { SendToWalletCardHeader } from './SendToWallet.style.js';
-
-export const SendToWalletButton: React.FC<CardProps> = (props) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig();
-  const { showSendToWallet } = useSendToWalletStore();
-  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
-    'toAddress',
-    'toChain',
-    'toToken',
-  );
-  const { setFieldValue } = useFieldActions();
-  const { selectedBookmark } = useBookmarks();
-  const { setSelectedBookmark } = useBookmarkActions();
-  const { accounts } = useAccount();
-  const { requiredToAddress } = useToAddressRequirements();
-  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-
-  const address = toAddressFieldValue
-    ? shortenAddress(toAddressFieldValue)
-    : t('sendToWallet.enterAddress', {
-        context: 'short',
-      });
-
-  const matchingConnectedAccount = accounts.find(
-    (account) => account.address === toAddressFieldValue,
-  );
-
-  const chainType = !matchingConnectedAccount
-    ? selectedBookmark?.chainType ||
-      (toAddressFieldValue
-        ? getChainTypeFromAddress(toAddressFieldValue)
-        : undefined)
-    : undefined;
-
-  const chainId =
-    toChainId && toTokenAddress
-      ? toChainId
-      : matchingConnectedAccount
-        ? matchingConnectedAccount.chainId
-        : chainType
-          ? defaultChainIdsByType[chainType]
-          : undefined;
-
-  const isConnectedAccount =
-    selectedBookmark?.isConnectedAccount &&
-    matchingConnectedAccount?.isConnected;
-  const connectedAccountName = matchingConnectedAccount?.connector?.name;
-  const bookmarkName = selectedBookmark?.name;
-
-  const headerTitle = isConnectedAccount
-    ? connectedAccountName || address
-    : bookmarkName || connectedAccountName || address;
-
-  const headerSubheader =
-    isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
-
-  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress;
-
-  const handleOnClick = () => {
-    navigate(
-      toAddresses?.length
-        ? navigationRoutes.configuredWallets
-        : navigationRoutes.sendToWallet,
-    );
-  };
-
-  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation();
-    setFieldValue('toAddress', '', { isTouched: true });
-    setSelectedBookmark();
-  };
-
-  // The collapse opens instantly on first page load/component mount when there is an address to display
-  // After which it needs an animated transition for open and closing.
-  // collapseTransitionTime is used specify the transition time for opening and closing
-  const collapseTransitionTime = useRef(0);
-
-  useEffect(() => {
-    // timeout is needed here to push the collapseTransitionTime update to the back of the event loop
-    // so that it doesn't fired too quickly
-    setTimeout(() => {
-      collapseTransitionTime.current = 225;
-    }, 0);
-  }, [collapseTransitionTime]);
-
-  const isOpenCollapse =
-    requiredToAddress || (showSendToWallet && !hiddenToAddress);
-
-  return (
-    <Collapse
-      timeout={collapseTransitionTime.current}
-      in={isOpenCollapse}
-      mountOnEnter
-      unmountOnExit
-    >
-      <Card
-        role="button"
-        onClick={disabledForChanges ? undefined : handleOnClick}
-        sx={{ width: '100%', ...props.sx }}
-      >
-        <CardTitle required={requiredToAddress}>
-          {t('header.sendToWallet')}
-        </CardTitle>
-        <Box display="flex" justifyContent="center" alignItems="center">
-          <SendToWalletCardHeader
-            avatar={
-              <AccountAvatar
-                chainId={chainId}
-                account={matchingConnectedAccount}
-                toAddress={toAddress}
-                empty={!toAddressFieldValue}
-              />
-            }
-            title={headerTitle}
-            subheader={headerSubheader}
-            selected={!!toAddressFieldValue || disabledToAddress}
-            action={
-              !!toAddressFieldValue && !disabledForChanges ? (
-                <CardIconButton onClick={clearSelectedBookmark} size="small">
-                  <CloseRounded fontSize="inherit" />
-                </CardIconButton>
-              ) : null
-            }
-          />
-        </Box>
-      </Card>
-    </Collapse>
-  );
-};

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,58 +0,0 @@
-import { Wallet } from '@mui/icons-material';
-import { Button, Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
-import { WidgetEvent } from '../../types/events.js';
-import { DisabledUI, HiddenUI } from '../../types/widget.js';
-
-export const SendToWalletExpandButton: React.FC = () => {
-  const { t } = useTranslation();
-  const { disabledUI, hiddenUI } = useWidgetConfig();
-  const { setFieldValue } = useFieldActions();
-  const { setSelectedBookmark } = useBookmarkActions();
-  const emitter = useWidgetEvents();
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore();
-  const [toAddressFieldValue] = useFieldValues('toAddress');
-  const { requiredToAddress } = useToAddressRequirements();
-
-  if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-    return null;
-  }
-
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setFieldValue('toAddress', '', { isTouched: true });
-      setSelectedBookmark();
-    }
-    setSendToWallet(!showSendToWallet);
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet,
-    );
-  };
-
-  const buttonVariant =
-    showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text';
-
-  return (
-    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
-      <Button
-        variant={buttonVariant}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          width: 48,
-          height: 48,
-        }}
-      >
-        <Wallet />
-      </Button>
-    </Tooltip>
-  );
-};

package/components/SettingsListItemButton.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material';
-import { ListItemButton as ListItemButtonBase } from './ListItemButton.js';
-
-export const SettingsListItemButton = styled(ListItemButtonBase)(
-  ({ theme }) => ({
-    paddingRight: theme.spacing(1),
-  }),
-);

package/components/Skeleton/WidgetSkeleton.style.tsx

@@ -1,83 +0,0 @@
-import { Box, Button, Card as MuiCard, styled } from '@mui/material';
-import { InputCard } from '../../components/Card/InputCard.js';
-
-export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  color: theme.palette?.text.primary,
-  paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
-}));
-
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  padding: theme.spacing(1, 0, 1, 1.5),
-  gap: theme.spacing(1),
-}));
-
-export const SkeletonCardRow = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(2),
-  alignItems: 'center',
-  marginTop: theme.spacing(1.5),
-}));
-
-export const SkeletonAmountContainer = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  height: 40,
-  overflowY: 'hidden',
-});
-
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}));
-
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}));
-
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(1.5),
-  alignItems: 'center',
-}));
-
-export const SkeletonReviewButton = styled(Button)({
-  height: 48,
-  pointerEvents: 'none',
-});
-export const SkeletonSendToWalletButton = styled(Button)({
-  height: 48,
-  minWidth: 48,
-  width: 48,
-  pointerEvents: 'none',
-});
-
-export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexGrow: 1,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  paddingBottom: theme.spacing(2),
-  paddingLeft: theme.spacing(3),
-  paddingRight: theme.spacing(3),
-}));
-
-export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: theme.palette.background.default,
-    backdropFilter: 'blur(12px)',
-    position: 'relative',
-    top: 0,
-    zIndex: 1200,
-    gap: theme.spacing(0.5),
-    padding: theme.spacing(1.5, 3, 1.5, 3),
-    overflow: 'auto',
-  };
-});

package/components/Skeleton/WidgetSkeleton.tsx

@@ -1,137 +0,0 @@
-import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
-import { useMemo } from 'react';
-import { createTheme } from '../../themes/createTheme.js';
-import type { WidgetConfigPartialProps } from '../../types/widget.js';
-import {
-  AppExpandedContainer,
-  FlexContainer,
-  RelativeContainer,
-} from '../AppContainer.js';
-import {
-  SkeletonAmountContainer,
-  SkeletonCard,
-  SkeletonCardRow,
-  SkeletonHeaderAppBar,
-  SkeletonHeaderContainer,
-  SkeletonInputCard,
-  SkeletonPoweredByContainer,
-  SkeletonReviewButton,
-  SkeletonReviewButtonContainer,
-  SkeletonSendToWalletButton,
-  SkeletonWalletMenuButtonContainer,
-} from './WidgetSkeleton.style.js';
-
-const SkeletonIcon = () => (
-  <Skeleton width={24} height={24} variant="rounded" />
-);
-const SkeletonWalletMenuButton = () => (
-  <SkeletonWalletMenuButtonContainer>
-    <Skeleton width={98} height={19} variant="text" />
-    <SkeletonIcon />
-  </SkeletonWalletMenuButtonContainer>
-);
-
-interface SkeletonSelectCardProps {
-  titleWidth?: number;
-  placeholderWidth?: number;
-}
-const SkeletonSelectCard = ({
-  titleWidth = 36,
-  placeholderWidth = 195,
-}: SkeletonSelectCardProps) => (
-  <SkeletonCard elevation={0}>
-    <Skeleton width={titleWidth} height={22} variant="text" />
-    <SkeletonCardRow>
-      <Skeleton width={40} height={40} variant="circular" />
-      <Skeleton width={placeholderWidth} height={27} variant="text" />
-    </SkeletonCardRow>
-  </SkeletonCard>
-);
-
-const SkeletonYouPayCard = () => (
-  <SkeletonInputCard elevation={0}>
-    <Skeleton width={55} height={22} variant="text" />
-    <SkeletonCardRow>
-      <Skeleton width={40} height={40} variant="circular" />
-      <SkeletonAmountContainer>
-        <Skeleton
-          width={48}
-          height={37}
-          variant="text"
-          sx={{ marginTop: -0.75 }}
-        />
-        <Skeleton width={48} height={12} variant="text" />
-      </SkeletonAmountContainer>
-    </SkeletonCardRow>
-  </SkeletonInputCard>
-);
-
-export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
-  const appearance = config?.appearance;
-  const hiddenUI = config?.hiddenUI || [];
-  const requiredUI = config?.requiredUI || [];
-  const configTheme = config?.theme;
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const appearanceMode =
-    !appearance || appearance === 'auto'
-      ? prefersDarkMode
-        ? 'dark'
-        : 'light'
-      : appearance;
-
-  const theme = useMemo(
-    () => createTheme(appearanceMode, configTheme),
-    [appearanceMode, configTheme],
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <AppExpandedContainer>
-        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
-          <SkeletonHeaderContainer>
-            {!hiddenUI.includes('walletMenu') ? (
-              <SkeletonHeaderAppBar>
-                <SkeletonWalletMenuButton />
-              </SkeletonHeaderAppBar>
-            ) : null}
-            <SkeletonHeaderAppBar
-              sx={{ justifyContent: 'space-between', height: 40 }}
-            >
-              <Skeleton width={126} height={34} variant="text" />
-              <SkeletonIcon />
-            </SkeletonHeaderAppBar>
-          </SkeletonHeaderContainer>
-
-          <FlexContainer
-            sx={{
-              gap: 2,
-              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
-            }}
-          >
-            <SkeletonSelectCard />
-            <SkeletonSelectCard />
-            <SkeletonYouPayCard />
-            {requiredUI.includes('toAddress') ? (
-              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />
-            ) : null}
-            <SkeletonReviewButtonContainer>
-              <SkeletonReviewButton variant="contained" fullWidth>
-                &nbsp;
-              </SkeletonReviewButton>
-              {!requiredUI.includes('toAddress') ? (
-                <SkeletonSendToWalletButton variant="text" fullWidth>
-                  &nbsp;
-                </SkeletonSendToWalletButton>
-              ) : null}
-            </SkeletonReviewButtonContainer>
-          </FlexContainer>
-          {!hiddenUI.includes('poweredBy') ? (
-            <SkeletonPoweredByContainer>
-              <Skeleton width={96} height={18} variant="text" />
-            </SkeletonPoweredByContainer>
-          ) : null}
-        </RelativeContainer>
-      </AppExpandedContainer>
-    </ThemeProvider>
-  );
-};

package/components/SmallAvatar.tsx

@@ -1,25 +0,0 @@
-import { Avatar, Box, Skeleton, styled } from '@mui/material';
-
-export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  width: 16,
-  height: 16,
-}));
-
-export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
-  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/components/Step/CircularProgress.style.tsx

@@ -1,86 +0,0 @@
-import type { ProcessStatus, Substatus } from '@lifi/sdk';
-import type { Theme } from '@mui/material';
-import {
-  Box,
-  CircularProgress as MuiCircularProgress,
-  alpha,
-  circularProgressClasses,
-  keyframes,
-  styled,
-} from '@mui/material';
-
-const getStatusColor = (
-  theme: Theme,
-  status?: ProcessStatus,
-  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?: ProcessStatus; 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!)
-      ? 3
-      : 0,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    width: 40,
-    height: 40,
-    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;
-  .${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/components/Step/CircularProgress.tsx

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

package/components/Step/DestinationWalletAddress.tsx

@@ -1,53 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import { LinkRounded, Wallet } from '@mui/icons-material';
-import { Box, Link, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CircularIcon } from './CircularProgress.style.js';
-
-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' : undefined}>
-          <Wallet
-            color={isDone ? 'success' : 'inherit'}
-            sx={{
-              position: 'absolute',
-              fontSize: '1.25rem',
-            }}
-          />
-        </CircularIcon>
-        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
-          {isDone
-            ? t('main.sentToAddress', {
-                address: toAddress,
-              })
-            : t('main.sendToAddress', {
-                address: toAddress,
-              })}
-        </Typography>
-        <CardIconButton
-          size="medium"
-          LinkComponent={Link}
-          href={toAddressLink}
-          target="_blank"
-          rel="nofollow noreferrer"
-        >
-          <LinkRounded />
-        </CardIconButton>
-      </Box>
-    </Box>
-  );
-};