@lifi/widget 2.9.4 → 3.0.0-alpha.1

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;
+}

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,54 @@
+import { Drawer } from '@mui/material';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { useGetScrollableContainer } from '../../hooks';
+import { backdropProps, modalProps, paperProps } from '../Dialog';
+import type { BottomSheetBase, BottomSheetProps } from './types';
+
+export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
+  ({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = useGetScrollableContainer();
+    const openRef = useRef(open);
+    const [drawerOpen, setDrawerOpen] = useState(open);
+
+    const close = useCallback(() => {
+      setDrawerOpen(false);
+      openRef.current = false;
+      onClose?.();
+    }, [onClose]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        isOpen: () => openRef.current,
+        open: () => {
+          setDrawerOpen(true);
+          openRef.current = true;
+        },
+        close,
+      }),
+      [close],
+    );
+
+    return (
+      <Drawer
+        container={getContainer}
+        ref={elementRef}
+        anchor="bottom"
+        open={drawerOpen}
+        onClose={close}
+        ModalProps={modalProps}
+        PaperProps={paperProps}
+        BackdropProps={backdropProps}
+        disableAutoFocus
+      >
+        {children}
+      </Drawer>
+    );
+  },
+);

package/src/components/BottomSheet/types.ts

@@ -0,0 +1,13 @@
+import type { DrawerProps } from '@mui/material';
+import type { RefObject } from 'react';
+
+export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
+  elementRef?: RefObject<HTMLDivElement>;
+  onClose?(): void;
+};
+
+export interface BottomSheetBase {
+  isOpen(): void;
+  open(): void;
+  close(): void;
+}