@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/components/RouteCard/utils.ts

@@ -0,0 +1,91 @@
+import type { Route, Token } from '@lifi/sdk';
+
+export const getGasCostsBreakdown = (route: Route) => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedGasCosts, step) => {
+        if (step.estimate.gasCosts?.length) {
+          const { token } = step.estimate.gasCosts[0];
+          const gasCostAmount = step.estimate.gasCosts.reduce(
+            (amount, gasCost) => amount + BigInt(gasCost.amount || 0),
+            0n,
+          );
+          const gasCostAmountUSD = step.estimate.gasCosts.reduce(
+            (amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'),
+            0,
+          );
+          const groupedGasCost = groupedGasCosts[token.chainId];
+          const amount = groupedGasCost
+            ? groupedGasCost.amount + gasCostAmount
+            : gasCostAmount;
+          const amountUSD = groupedGasCost
+            ? groupedGasCost.amountUSD + gasCostAmountUSD
+            : gasCostAmountUSD;
+          groupedGasCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedGasCosts;
+        }
+        return groupedGasCosts;
+      },
+      {} as Record<
+        number,
+        {
+          amount: bigint;
+          amountUSD: number;
+          token: Token;
+        }
+      >,
+    ),
+  );
+};
+
+export const getFeeCostsBreakdown = (route: Route, included?: boolean) => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+          feeCosts = feeCosts?.filter(
+            (feeCost) => feeCost.included === included,
+          );
+        }
+        if (feeCosts?.length) {
+          const { token } = feeCosts[0];
+          const feeCostAmount = feeCosts.reduce(
+            (amount, feeCost) => amount + BigInt(feeCost.amount || 0),
+            0n,
+          );
+          const feeCostAmountUSD = feeCosts.reduce(
+            (amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'),
+            0,
+          );
+          const groupedFeeCost = groupedFeeCosts[token.chainId];
+          const amount = groupedFeeCost
+            ? groupedFeeCost.amount + feeCostAmount
+            : feeCostAmount;
+          const amountUSD = groupedFeeCost
+            ? groupedFeeCost.amountUSD + feeCostAmountUSD
+            : feeCostAmountUSD;
+          groupedFeeCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+      },
+      {} as Record<
+        number,
+        {
+          amount: bigint;
+          amountUSD: number;
+          token: Token;
+        }
+      >,
+    ),
+  );
+};

package/src/components/Routes/Routes.tsx

@@ -0,0 +1,82 @@
+import type { BoxProps } from '@mui/material';
+import { Box, Button, Collapse } from '@mui/material';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+
+export const Routes: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { subvariant, useRecommendedRoute } = useWidgetConfig();
+  const { isValid, isValidating } = useFormState();
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes();
+
+  const currentRoute = routes?.[0];
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null;
+  }
+
+  const handleCardClick = () => {
+    navigate(navigationRoutes.routes);
+  };
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching;
+  const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute;
+  const showAll =
+    !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
+
+  return (
+    <Card {...props}>
+      <CardTitle>
+        {subvariant === 'nft' ? t('main.fromAmount') : t('header.youGet')}
+      </CardTitle>
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+      <Box p={2}>
+        {isLoading ? (
+          <RouteCardSkeleton variant="cardless" />
+        ) : !currentRoute ? (
+          <RouteNotFoundCard />
+        ) : (
+          <RouteCard route={currentRoute} variant="cardless" active />
+        )}
+
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
+          <Box mt={2}>
+            <Button
+              onClick={handleCardClick}
+              disabled={isValidating || !isValid}
+              fullWidth
+            >
+              {t('button.showAll')}
+            </Button>
+          </Box>
+        </Collapse>
+      </Box>
+    </Card>
+  );
+};

package/src/components/Routes/RoutesExpanded.style.ts

@@ -0,0 +1,39 @@
+import { Box, ScopedCssBaseline } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { maxHeight } from '../AppContainer';
+
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+  height: maxHeight,
+  zIndex: 0,
+}));
+
+export const ScrollableContainer = styled(Box)({
+  overflowY: 'auto',
+  height: '100%',
+  width: '100%',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto',
+  width: 436,
+  maxHeight,
+  marginLeft: theme.spacing(3),
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+export const Header = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  backdropFilter: 'blur(12px)',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(1.5, 3),
+  position: 'sticky',
+  top: 0,
+  zIndex: 1200,
+}));

package/src/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/src/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/src/components/SelectChainAndToken.tsx

@@ -0,0 +1,65 @@
+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

@@ -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/src/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/src/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/src/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>
+  );
+};