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

package/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/components/AmountInput/index.ts

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

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

@@ -0,0 +1,52 @@
+import LoadingButton from '@mui/lab/LoadingButton';
+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/components/BaseTransactionButton/index.ts

@@ -0,0 +1,2 @@
+export { BaseTransactionButton } from './BaseTransactionButton';
+export * from './types';

package/components/BaseTransactionButton/types.ts

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

package/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 { modalProps, paperProps, slotProps } 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}
+        slotProps={slotProps}
+        disableAutoFocus
+      >
+        {children}
+      </Drawer>
+    );
+  },
+);

package/components/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export * from './BottomSheet';
+export * from './types';

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

package/components/Card/Card.tsx

@@ -0,0 +1,83 @@
+import type { BoxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
+import type { MouseEventHandler } from 'react';
+
+type CardVariant = 'default' | 'selected' | 'error';
+
+export type CardProps = {
+  variant?: CardVariant;
+  selectionColor?: 'primary' | 'secondary';
+  indented?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  pointerEvents?: 'auto' | 'none';
+} & BoxProps;
+
+const getBackgroundColor = (
+  theme: Theme,
+  variant?: CardVariant,
+  selectionColor?: 'primary' | 'secondary',
+) =>
+  variant === 'selected'
+    ? selectionColor === 'primary'
+      ? theme.palette.mode === 'light'
+        ? alpha(theme.palette.primary.main, 0.04)
+        : alpha(theme.palette.primary.main, 0.42)
+      : alpha(
+          theme.palette.secondary.main,
+          theme.palette.mode === 'light' ? 0.08 : 0.12,
+        )
+    : theme.palette.background.paper;
+
+export const Card = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
+      prop as string,
+    ),
+})<CardProps>(({
+  theme,
+  variant,
+  selectionColor = 'primary',
+  indented,
+  pointerEvents,
+  onClick,
+}) => {
+  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+  const backgroundHoverColor = onClick
+    ? theme.palette.mode === 'light'
+      ? darken(backgroundColor, 0.02)
+      : lighten(backgroundColor, 0.02)
+    : backgroundColor;
+  return {
+    backgroundColor,
+    border: `1px solid`,
+    borderColor:
+      variant === 'error'
+        ? theme.palette.error.main
+        : variant === 'selected'
+          ? selectionColor === 'primary'
+            ? theme.palette.primary.main
+            : alpha(theme.palette.secondary.main, 0.48)
+          : theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    padding: indented ? theme.spacing(2) : 0,
+    boxSizing: 'border-box',
+    '&:hover': {
+      cursor: onClick ? 'pointer' : 'default',
+      backgroundColor: backgroundHoverColor,
+    },
+    [`&:hover .${badgeClasses.badge} > div`]: {
+      borderColor: backgroundHoverColor,
+    },
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
+    pointerEvents,
+  };
+});

package/components/Card/CardHeader.tsx

@@ -0,0 +1,21 @@
+import { CardHeader as MuiCardHeader } from '@mui/material';
+import { cardHeaderClasses } from '@mui/material/CardHeader';
+import { styled } from '@mui/material/styles';
+
+export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
+  [`.${cardHeaderClasses.action}`]: {
+    marginTop: -2,
+    alignSelf: 'center',
+  },
+  [`.${cardHeaderClasses.title}`]: {
+    fontWeight: '500',
+    fontSize: '1.125rem',
+    lineHeight: '1.2778',
+    color: theme.palette.text.primary,
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    fontWeight: '400',
+    fontSize: '0.75rem',
+    color: theme.palette.text.secondary,
+  },
+}));

package/components/Card/CardIconButton.tsx

@@ -0,0 +1,16 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
+  const backgroundColor =
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white;
+  return {
+    padding: theme.spacing(0.5),
+    backgroundColor: alpha(backgroundColor, 0.04),
+    '&:hover': {
+      backgroundColor: alpha(backgroundColor, 0.08),
+    },
+  };
+});

package/components/Card/CardLabel.tsx

@@ -0,0 +1,52 @@
+import { Box, Typography } from '@mui/material';
+import { alpha, lighten, styled } from '@mui/material/styles';
+
+export const CardLabel = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
+  backgroundColor:
+    type === 'active'
+      ? theme.palette.mode === 'light'
+        ? theme.palette.secondary.main
+        : alpha(theme.palette.secondary.main, 0.32)
+      : type?.includes('insurance')
+        ? alpha(
+            theme.palette.success.main,
+            theme.palette.mode === 'light' ? 0.12 : 0.24,
+          )
+        : theme.palette.mode === 'light'
+          ? alpha(theme.palette.common.black, 0.12)
+          : alpha(theme.palette.common.white, 0.16),
+  borderRadius: theme.shape.borderRadius,
+  color: type?.includes('insurance')
+    ? lighten(
+        theme.palette.success.main,
+        theme.palette.mode === 'light' ? 0 : 0.24,
+      )
+    : theme.palette.text.primary,
+  padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 24,
+  minWidth: 24,
+  userSelect: 'none',
+  fontSize: '1rem',
+  marginRight: theme.spacing(1),
+}));
+
+export const CardLabelTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'icon' }>(({ theme, type }) => ({
+  padding:
+    type === 'icon'
+      ? theme.spacing(0.75, 0, 0.75, 0.75)
+      : theme.spacing(0.75, 1.5),
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: '600',
+  textTransform: 'lowercase',
+  '&::first-letter': {
+    textTransform: 'uppercase',
+  },
+}));

package/components/Card/CardTitle.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const CardTitle = styled(Typography, {
+  shouldForwardProp: (prop) => !['required'].includes(prop as string),
+})<{ required?: boolean }>(({ theme, required }) => ({
+  fontSize: '0.875rem',
+  lineHeight: '1.286',
+  letterSpacing: '0.01071em',
+  fontWeight: 700,
+  padding: theme.spacing(1.75, 2, 0, 2),
+  '&:after': {
+    content: required ? '" *"' : 'none',
+    color: theme.palette.error.main,
+  },
+}));

package/components/Card/index.ts

@@ -0,0 +1,5 @@
+export * from './Card';
+export * from './CardHeader';
+export * from './CardIconButton';
+export * from './CardLabel';
+export * from './CardTitle';

package/components/ChainSelect/ChainSelect.style.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Card } from '../../components/Card';
+
+export const ChainCard = styled(Card)({
+  display: 'grid',
+  placeItems: 'center',
+  minWidth: 52,
+  height: 56,
+});
+
+export const ChainContainer = styled(Box)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+  gridAutoRows: '56px',
+  justifyContent: 'space-between',
+  gap: theme.spacing(1.5),
+}));

package/components/ChainSelect/ChainSelect.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable react/no-array-index-key */
+import type { EVMChain } from '@lifi/sdk';
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { maxChainToOrder } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { ChainCard, ChainContainer } from './ChainSelect.style';
+import { useChainSelect } from './useChainSelect';
+
+export const ChainSelect = ({ formType }: FormTypeProps) => {
+  const navigate = useNavigate();
+  const {
+    chainOrder,
+    chains,
+    getChains,
+    isLoading,
+    setChainOrder,
+    setCurrentChain,
+  } = useChainSelect(formType);
+  const [chainId] = useWatch({
+    name: [FormKeyHelper.getChainKey(formType)],
+  });
+
+  useEffect(() => {
+    const hasChainInOrderedList = chainOrder.includes(chainId);
+    // If we don't have a chain in the ordered chain list we should add it.
+    if (!hasChainInOrderedList) {
+      setChainOrder(chainId);
+    }
+  }, [chainId, chainOrder, setChainOrder]);
+
+  const showAllChains = () => {
+    navigate(navigationRoutes[`${formType}Chain`]);
+  };
+
+  const chainsToHide = (chains?.length ?? 0) - maxChainToOrder;
+
+  return (
+    <ChainContainer>
+      {isLoading
+        ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              variant="rectangular"
+              width={56}
+              height={56}
+              sx={{ borderRadius: 1 }}
+            />
+          ))
+        : getChains().map((chain: EVMChain) => (
+            <Tooltip
+              key={chain.id}
+              title={chain.name}
+              placement="top"
+              enterDelay={400}
+              arrow
+            >
+              <ChainCard
+                onClick={() => setCurrentChain(chain.id)}
+                variant={chainId === chain.id ? 'selected' : 'default'}
+              >
+                <Avatar
+                  src={chain.logoURI}
+                  alt={chain.key}
+                  sx={{ width: 40, height: 40 }}
+                >
+                  {chain.name[0]}
+                </Avatar>
+              </ChainCard>
+            </Tooltip>
+          ))}
+      {chainsToHide > 0 ? (
+        <ChainCard onClick={showAllChains}>
+          <Box
+            sx={{
+              width: 40,
+              height: 40,
+              display: 'grid',
+              placeItems: 'center',
+            }}
+          >
+            <Typography fontWeight={500}>+{chainsToHide}</Typography>
+          </Box>
+        </ChainCard>
+      ) : null}
+    </ChainContainer>
+  );
+};

package/components/ChainSelect/index.ts

@@ -0,0 +1,2 @@
+export * from './ChainSelect';
+export * from './useChainSelect';