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

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -0,0 +1,98 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+
+export const ActiveTransactionItem: React.FC<{
+  routeId: string;
+  dense?: boolean;
+}> = ({ routeId, dense }) => {
+  const navigate = useNavigate();
+  const { route, status } = useRouteExecution({
+    routeId,
+    executeInBackground: true,
+  });
+
+  const lastActiveStep = route?.steps.findLast((step) => step.execution);
+  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
+
+  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
+
+  if (!route || !lastActiveStep) {
+    return null;
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } });
+  };
+
+  const getStatusComponent = () => {
+    switch (lastActiveProcess?.status) {
+      case 'ACTION_REQUIRED':
+        return <InfoRoundedIcon color="info" fontSize="small" />;
+      case 'FAILED':
+        return <ErrorRoundedIcon color="error" fontSize="small" />;
+      default:
+        return (
+          <Typography fontSize={14} fontWeight={500}>
+            <StepTimer step={lastActiveStep} hideInProgress />
+          </Typography>
+        );
+    }
+  };
+
+  const ListItemComponent = dense ? ListItem : ListItemButton;
+
+  return (
+    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
+      <ListItemAvatar>
+        <TokenAvatarGroup total={2}>
+          <TokenAvatar token={route.fromToken} />
+          <TokenAvatar token={route.toToken} />
+        </TokenAvatarGroup>
+      </ListItemAvatar>
+      <ListItemText
+        sx={{ margin: 0 }}
+        disableTypography
+        primary={
+          <Typography
+            fontWeight={500}
+            lineHeight={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: 2,
+              height: 16,
+            }}
+          >
+            {route.fromToken.symbol}
+            <ArrowForwardIcon sx={{ paddingX: 0.5 }} />
+            {route.toToken.symbol}
+          </Typography>
+        }
+        secondary={
+          status !== RouteExecutionStatus.Done ? (
+            <Typography
+              fontWeight={400}
+              fontSize={12}
+              color="text.secondary"
+              lineHeight={1}
+              mt={0.75}
+              ml={2}
+            >
+              {title}
+            </Typography>
+          ) : null
+        }
+      />
+      {getStatusComponent()}
+    </ListItemComponent>
+  );
+};

package/src/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -0,0 +1,39 @@
+import {
+  Button,
+  ListItem as MuiListItem,
+  ListItemButton as MuiListItemButton,
+} from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+  },
+}));
+
+export const ListItem = styled(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+  padding: theme.spacing(0, 1.5),
+  [`.${listItemSecondaryActionClasses.root}`]: {
+    right: theme.spacing(3),
+  },
+  '&:hover': {
+    cursor: 'pointer',
+  },
+}));
+
+export const ShowAllButton = styled(Button)(({ theme }) => ({
+  background: 'none',
+  '&:hover': {
+    background: 'none',
+  },
+  padding: theme.spacing(0.75, 2),
+  fontSize: '0.875rem',
+}));

package/src/components/ActiveTransactions/ActiveTransactions.tsx

@@ -0,0 +1,43 @@
+import type { BoxProps } from '@mui/material';
+import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks';
+import { useExecutingRoutesIds } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ActiveTransactionItem } from './ActiveTransactionItem';
+import { ShowAllButton } from './ActiveTransactions.style';
+
+export const ActiveTransactions: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { account } = useAccount();
+  const executingRoutes = useExecutingRoutesIds(account.address);
+
+  if (!executingRoutes?.length) {
+    return null;
+  }
+
+  const handleShowAll = () => {
+    navigate(navigationRoutes.activeTransactions);
+  };
+
+  const hasShowAll = executingRoutes?.length > 2;
+
+  return (
+    <Card variant="selected" selectionColor="secondary" {...props}>
+      <CardTitle>{t('header.activeTransactions')}</CardTitle>
+      <Stack spacing={1.5} pt={1.5} pb={hasShowAll ? 0 : 2}>
+        {executingRoutes.slice(0, 2).map((routeId) => (
+          <ActiveTransactionItem key={routeId} routeId={routeId} dense />
+        ))}
+      </Stack>
+      {hasShowAll ? (
+        <ShowAllButton disableRipple fullWidth onClick={handleShowAll}>
+          {t('button.showAll')}
+        </ShowAllButton>
+      ) : null}
+    </Card>
+  );
+};

package/src/components/AmountInput/AmountInput.style.tsx

@@ -0,0 +1,35 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+
+export const maxInputFontSize = 24;
+export const minInputFontSize = 14;
+
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+  padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  boxShadow: 'none',
+  // padding: theme.spacing(2, 2, 2, 0),
+  [`.${inputBaseClasses.input}`]: {
+    height: 32,
+    padding: theme.spacing(0, 0, 0, 2),
+  },
+  '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+    {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  '& input[type="number"]': {
+    MozAppearance: 'textfield',
+  },
+  [`&.${inputBaseClasses.disabled}`]: {
+    color: 'inherit',
+  },
+  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+    WebkitTextFillColor: 'unset',
+  },
+}));

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,126 @@
+import type { Token } from '@lifi/sdk';
+import type { BoxProps } from '@mui/material';
+import type { ChangeEvent, ReactNode } from 'react';
+import { useLayoutEffect, useRef } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
+import { fitInputText, formatInputAmount } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import {
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInput.style';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment';
+import { FormPriceHelperText } from './FormPriceHelperText';
+
+export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
+  formType,
+  ...props
+}) => {
+  const { disabledUI } = useWidgetConfig();
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+    ],
+  });
+  const { token } = useToken(chainId, tokenAddress);
+  const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      startAdornment={<AmountInputStartAdornment formType={formType} />}
+      endAdornment={
+        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
+      }
+      bottomAdornment={<FormPriceHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};
+
+export const AmountInputBase: React.FC<
+  FormTypeProps &
+    BoxProps & {
+      token?: Token;
+      startAdornment?: ReactNode;
+      endAdornment?: ReactNode;
+      bottomAdornment?: ReactNode;
+      disabled?: boolean;
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  endAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const amountKey = FormKeyHelper.getAmountKey(formType);
+  const {
+    field: { onChange, onBlur, value },
+  } = useController({
+    name: amountKey,
+  });
+  const ref = useRef<HTMLInputElement>(null);
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    const formattedAmount = formatInputAmount(value, token?.decimals, true);
+    onChange(formattedAmount);
+  };
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    const formattedAmount = formatInputAmount(value, token?.decimals);
+    onChange(formattedAmount);
+    onBlur();
+  };
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+    }
+  }, [value, ref]);
+
+  return (
+    <Card {...props}>
+      <CardTitle>{t('main.fromAmount')}</CardTitle>
+      <FormControl fullWidth>
+        <Input
+          inputRef={ref}
+          size="small"
+          autoComplete="off"
+          placeholder="0"
+          startAdornment={startAdornment}
+          endAdornment={endAdornment}
+          inputProps={{
+            inputMode: 'decimal',
+          }}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={value}
+          name={amountKey}
+          disabled={disabled}
+          required
+        />
+        {bottomAdornment}
+      </FormControl>
+    </Card>
+  );
+};

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -0,0 +1,9 @@
+import { Button as MuiButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Button = styled(MuiButton)(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.625, 1),
+  lineHeight: 1.0715,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
+}));

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -0,0 +1,69 @@
+import { InputAdornment, Skeleton } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import {
+  useAvailableChains,
+  useGasRecommendation,
+  useTokenAddressBalance,
+} from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { Button } from './AmountInputAdornment.style';
+
+export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
+  const { t } = useTranslation();
+  const { setValue } = useFormContext();
+  const { getChainById } = useAvailableChains();
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+    ],
+  });
+
+  // We get gas recommendations for the source chain to make sure that after pressing the Max button
+  // the user will have enough funds remaining to cover gas costs
+  const { data } = useGasRecommendation(chainId);
+
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+
+  const handleMax = () => {
+    const chain = getChainById(chainId);
+    let maxAmount = token?.amount;
+    if (
+      chain?.nativeToken.address === tokenAddress &&
+      data?.available &&
+      data?.recommended
+    ) {
+      const tokenAmount = token?.amount ?? 0n;
+      const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+      if (tokenAmount > recommendedAmount) {
+        maxAmount = tokenAmount - recommendedAmount;
+      }
+    }
+
+    setValue(
+      FormKeyHelper.getAmountKey(formType),
+      maxAmount && token ? formatUnits(maxAmount, token.decimals) : '',
+      {
+        shouldTouch: true,
+      },
+    );
+  };
+
+  return (
+    <InputAdornment position="end">
+      {isLoading && tokenAddress ? (
+        <Skeleton
+          variant="rectangular"
+          width={46}
+          height={24}
+          sx={{ borderRadius: 0.5 }}
+        />
+      ) : formType === 'from' && token?.amount ? (
+        <Button onClick={handleMax}>{t('button.max')}</Button>
+      ) : null}
+    </InputAdornment>
+  );
+};

package/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -0,0 +1,26 @@
+import { useWatch } from 'react-hook-form';
+import { useChain, useToken } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+
+export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      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} sx={{ marginLeft: 2 }} />
+  ) : (
+    <TokenAvatarDefault sx={{ marginLeft: 2 }} />
+  );
+};

package/src/components/AmountInput/FormPriceHelperText.tsx

@@ -0,0 +1,87 @@
+import type { TokenAmount } from '@lifi/sdk';
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useTokenAddressBalance } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
+
+export const FormPriceHelperText: React.FC<FormTypeProps> = ({ formType }) => {
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+    ],
+  });
+
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+
+  return (
+    <FormPriceHelperTextBase
+      formType={formType}
+      isLoading={isLoading}
+      tokenAddress={tokenAddress}
+      token={token}
+    />
+  );
+};
+
+export const FormPriceHelperTextBase: React.FC<
+  FormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+  }
+> = ({ formType, isLoading, tokenAddress, token }) => {
+  const { t } = useTranslation();
+  const amount = useWatch({
+    name: FormKeyHelper.getAmountKey(formType),
+  });
+
+  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+
+  return (
+    <FormHelperText
+      component="div"
+      sx={{ display: 'flex', justifyContent: 'space-between', margin: 0 }}
+    >
+      <Typography
+        color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
+        fontWeight={400}
+        fontSize={12}
+        marginLeft={8}
+        lineHeight={1.3334}
+        flex={1}
+        sx={{
+          wordBreak: 'break-word',
+          overflowWrap: 'break-word',
+        }}
+      >
+        {t(`format.currency`, {
+          value: fromAmountTokenPrice,
+        })}
+      </Typography>
+      {isLoading && tokenAddress ? (
+        <Skeleton
+          variant="text"
+          width={48}
+          height={16}
+          sx={{ borderRadius: 0.25 }}
+        />
+      ) : token?.amount ? (
+        <Typography
+          fontWeight={400}
+          fontSize={12}
+          color="text.secondary"
+          lineHeight={1.3334}
+          pl={0.25}
+        >
+          {`/ ${t(`format.number`, {
+            value: formatTokenAmount(token.amount, token.decimals),
+          })}`}
+        </Typography>
+      ) : null}
+    </FormHelperText>
+  );
+};

package/src/components/AppContainer.tsx

@@ -0,0 +1,85 @@
+import { Box, Container, ScopedCssBaseline } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import type { PropsWithChildren } from 'react';
+import { useWidgetConfig } from '../providers';
+import type { WidgetVariant } from '../types';
+import { ElementId, createElementId } from '../utils';
+
+export const maxHeight = 680;
+
+export const AppExpandedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ variant }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'start',
+  flex: 1,
+  height: variant === 'drawer' ? 'none' : maxHeight,
+}));
+
+const RelativeContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
+  position: 'relative',
+  boxSizing: 'content-box',
+  width: '100%',
+  minWidth: 360,
+  maxWidth: 392,
+  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
+  background: theme.palette.background.default,
+  overflow: 'auto',
+  flex: 1,
+  zIndex: 0,
+}));
+
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ variant }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  overflowX: 'clip',
+  margin: 0,
+  width: '100%',
+  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
+  overflowY: 'auto',
+  height: '100%',
+}));
+
+export const FlexContainer = styled(Container)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+  // const ref = useRef<HTMLDivElement>(null);
+  const { containerStyle, variant, elementId } = useWidgetConfig();
+  return (
+    <RelativeContainer
+      sx={containerStyle}
+      variant={variant}
+      id={createElementId(ElementId.RelativeContainer, elementId)}
+    >
+      <CssBaselineContainer
+        id={createElementId(ElementId.ScrollableContainer, elementId)}
+        variant={variant}
+        enableColorScheme
+        // 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/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -0,0 +1,52 @@
+import { LoadingButton } from '@mui/lab';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import type { BaseTransactionButtonProps } from './types';
+
+export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
+  onClick,
+  text,
+  disabled,
+  loading,
+}) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { walletManagement } = useWidgetConfig();
+  const { account } = useAccount();
+
+  const handleClick = async () => {
+    if (account.isConnected) {
+      onClick?.();
+    } else if (walletManagement) {
+      await walletManagement.connect();
+    } 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={disabled}
+      loading={loading}
+      loadingPosition="center"
+      fullWidth
+    >
+      {getButtonText()}
+    </LoadingButton>
+  );
+};

package/src/components/BaseTransactionButton/types.ts

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