@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/components/Routes/RoutesExpanded.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable react/no-array-index-key */
+import type { Route } from '@lifi/sdk';
+import { Collapse, Grow, Stack, Typography } from '@mui/material';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useMatch, useNavigate } from 'react-router-dom';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+import {
+  CollapseContainer,
+  Container,
+  Header,
+  ScrollableContainer,
+} from './RoutesExpanded.style';
+
+const timeout = { enter: 225, exit: 225, appear: 0 };
+
+export const RoutesExpanded = () => {
+  const element = useMatch('/');
+  return (
+    <CollapseContainer>
+      <Collapse timeout={timeout} in={!!element} orientation="horizontal">
+        <Grow timeout={timeout} in={!!element} mountOnEnter unmountOnExit>
+          <div>
+            <RoutesExpandedElement />
+          </div>
+        </Grow>
+      </Collapse>
+    </CollapseContainer>
+  );
+};
+
+export const RoutesExpandedElement = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const setExecutableRoute = useSetExecutableRoute();
+  const { subvariant, containerStyle } = useWidgetConfig();
+  const { isValid, isValidating } = useFormState();
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes();
+
+  const currentRoute = routes?.[0];
+
+  const handleRouteClick = (route: Route) => {
+    if (isValid && !isValidating) {
+      setExecutableRoute(route);
+      navigate(navigationRoutes.transactionExecution, {
+        state: { routeId: route.id },
+      });
+    }
+  };
+
+  const expanded = Boolean(
+    currentRoute || isLoading || isFetching || isFetched,
+  );
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
+
+  return (
+    <Collapse timeout={timeout.enter} in={expanded} orientation="horizontal">
+      <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
+        <Container sx={containerStyle} enableColorScheme>
+          <ScrollableContainer>
+            <Header>
+              <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
+                {subvariant === 'nft'
+                  ? t('main.fromAmount')
+                  : t('header.youGet')}
+              </Typography>
+              <ProgressToNextUpdate
+                updatedAt={dataUpdatedAt || new Date().getTime()}
+                timeToUpdate={refetchTime}
+                isLoading={isFetching}
+                onClick={() => refetch()}
+                sx={{ marginRight: -1 }}
+              />
+            </Header>
+            <Stack
+              direction="column"
+              spacing={2}
+              flex={1}
+              paddingX={3}
+              paddingBottom={3}
+            >
+              {routeNotFound ? (
+                <RouteNotFoundCard />
+              ) : isLoading || (isFetching && !routes?.length) ? (
+                Array.from({ length: 3 }).map((_, index) => (
+                  <RouteCardSkeleton key={index} />
+                ))
+              ) : (
+                routes?.map((route: Route, index: number) => (
+                  <RouteCard
+                    key={route.id}
+                    route={route}
+                    onClick={() => handleRouteClick(route)}
+                    active={index === 0}
+                    expanded={routes?.length <= 2}
+                  />
+                ))
+              )}
+            </Stack>
+          </ScrollableContainer>
+        </Container>
+      </Grow>
+    </Collapse>
+  );
+};

package/components/Routes/index.ts

@@ -0,0 +1,2 @@
+export * from './Routes';
+export * from './RoutesExpanded';

package/components/Select.tsx

@@ -0,0 +1,30 @@
+import { Select as MuiSelect } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { selectClasses } from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+
+export const Select = styled(MuiSelect, {
+  shouldForwardProp: (prop) => prop !== 'dense',
+})<{ dense?: boolean }>(({ theme, dense }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.white
+      : theme.palette.background.paper,
+  [`.${inputBaseClasses.input}`]: {
+    padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`.${selectClasses.icon}`]: {
+    right: 10,
+    color: theme.palette.text.primary,
+  },
+  [`.${listItemIconClasses.root}`]: {
+    minWidth: 38,
+  },
+  [`.${outlinedInputClasses.notchedOutline}`]: {
+    display: 'none',
+  },
+}));

package/components/SelectChainAndToken.tsx

@@ -0,0 +1,66 @@
+import type { BoxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+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/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -0,0 +1,35 @@
+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/components/SelectTokenButton/SelectTokenButton.tsx

@@ -0,0 +1,80 @@
+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/components/SelectTokenButton/index.ts

@@ -0,0 +1 @@
+export * from './SelectTokenButton';

package/components/SendToWallet/SendToWallet.style.tsx

@@ -0,0 +1,20 @@
+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/components/SendToWallet/SendToWallet.tsx

@@ -0,0 +1,124 @@
+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/components/SendToWallet/SendToWalletButton.tsx

@@ -0,0 +1,59 @@
+import WalletIcon from '@mui/icons-material/Wallet';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+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/components/SendToWallet/index.ts

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

package/components/SettingsListItemButton.tsx

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

package/components/SmallAvatar.tsx

@@ -0,0 +1,28 @@
+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/components/Step/CircularProgress.style.tsx

@@ -0,0 +1,82 @@
+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%;
+  }
+`;