@lifi/widget 3.0.0-alpha.1 → 3.0.0-alpha.11

package/components/TokenList/TokenList.style.tsx

@@ -0,0 +1,60 @@
+import type { IconButtonProps, LinkProps } from '@mui/material';
+import {
+  IconButton as MuiIconButton,
+  ListItem as MuiListItem,
+} from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { alpha, styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
+
+export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  width: '100%',
+}));
+
+export const ListItem = styled(MuiListItem)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: 64,
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: theme.spacing(0, 1.5),
+  [`.${listItemSecondaryActionClasses.root}`]: {
+    right: theme.spacing(3),
+  },
+  [`& .${listItemTextClasses.primary}`]: {
+    height: 22,
+  },
+  [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+}));
+
+export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
+  ({ theme }) => ({
+    lineHeight: 1,
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    padding: theme.spacing(0.375, 0.375),
+    marginLeft: theme.spacing(0.25),
+    color: 'inherit',
+    backgroundColor: 'unset',
+    minWidth: 'unset',
+    borderRadius: '50%',
+    '&:hover': {
+      backgroundColor:
+        theme.palette.mode === 'light'
+          ? alpha(theme.palette.common.black, 0.04)
+          : alpha(theme.palette.common.white, 0.08),
+    },
+    svg: {
+      fontSize: '0.875rem',
+    },
+  }),
+);

package/components/TokenList/TokenList.tsx

@@ -0,0 +1,95 @@
+import { Box } from '@mui/material';
+import type { FC } from 'react';
+import { useRef } from 'react';
+import {
+  useAccount,
+  useChain,
+  useDebouncedWatch,
+  useTokenBalances,
+  useTokenSearch,
+} from '../../hooks';
+import type { TokenAmount } from '../../types';
+import { TokenNotFound } from './TokenNotFound';
+import { VirtualizedTokenList } from './VirtualizedTokenList';
+import type { TokenListProps } from './types';
+import { useTokenSelect } from './useTokenSelect';
+import { useFieldValues, FormKeyHelper } from '../../stores';
+
+export const TokenList: FC<TokenListProps> = ({
+  formType,
+  height,
+  onClick,
+}) => {
+  const parentRef = useRef<HTMLUListElement | null>(null);
+  const { account } = useAccount();
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+  const [tokenSearchFilter]: string[] = useDebouncedWatch(
+    ['tokenSearchFilter'],
+    320,
+  );
+
+  const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
+
+  const {
+    tokens: chainTokens,
+    tokensWithBalance,
+    isLoading: isTokensLoading,
+    isBalanceLoading,
+    featuredTokens,
+  } = useTokenBalances(selectedChainId);
+
+  let filteredTokens = (tokensWithBalance ??
+    chainTokens ??
+    []) as TokenAmount[];
+  const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
+  filteredTokens = tokenSearchFilter
+    ? filteredTokens.filter(
+        (token) =>
+          token.name.toUpperCase().includes(searchFilter) ||
+          token.symbol.toUpperCase().includes(searchFilter) ||
+          token.address.toUpperCase().includes(searchFilter),
+      )
+    : filteredTokens;
+
+  const tokenSearchEnabled =
+    !isTokensLoading &&
+    !filteredTokens.length &&
+    !!tokenSearchFilter &&
+    !!selectedChainId;
+
+  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
+    useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
+
+  const isLoading =
+    isTokensLoading ||
+    isChainLoading ||
+    (tokenSearchEnabled && isSearchedTokenLoading);
+
+  const tokens = filteredTokens.length
+    ? filteredTokens
+    : searchedToken
+      ? [searchedToken]
+      : filteredTokens;
+
+  const handleTokenClick = useTokenSelect(formType, onClick);
+
+  return (
+    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+      {!tokens.length && !isLoading ? (
+        <TokenNotFound formType={formType} />
+      ) : null}
+      <VirtualizedTokenList
+        tokens={tokens}
+        featuredTokensLength={featuredTokens?.length}
+        scrollElementRef={parentRef}
+        chainId={selectedChainId}
+        chain={chain}
+        isLoading={isLoading}
+        isBalanceLoading={isBalanceLoading}
+        showBalance={account.isConnected}
+        showFeatured={!tokenSearchFilter}
+        onClick={handleTokenClick}
+      />
+    </Box>
+  );
+};

package/components/TokenList/TokenNotFound.tsx

@@ -0,0 +1,39 @@
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useAvailableChains } from '../../hooks';
+import type { FormTypeProps } from '../../stores';
+import { useFieldValues, FormKeyHelper } from '../../stores';
+
+export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
+  const { t } = useTranslation();
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+  const { getChainById } = useAvailableChains();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        flex: 1,
+        padding: 3,
+      }}
+    >
+      <Typography fontSize={48} lineHeight={1}>
+        <SearchOffIcon fontSize="inherit" />
+      </Typography>
+      <Typography
+        fontSize={14}
+        color="text.secondary"
+        textAlign="center"
+        mt={2}
+        px={2}
+      >
+        {t('info.message.emptyTokenList', {
+          chainName: getChainById(selectedChainId)?.name,
+        })}
+      </Typography>
+    </Box>
+  );
+};

package/components/TokenList/index.ts

@@ -0,0 +1,2 @@
+export * from './TokenList';
+export * from './useTokenSelect';

package/components/TokenList/types.ts

@@ -0,0 +1,46 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import type { MutableRefObject } from 'react';
+import type { FormType } from '../../stores';
+import type { TokenAmount } from '../../types';
+
+export interface TokenListProps {
+  formType: FormType;
+  height: number;
+  onClick?(): void;
+}
+
+export interface VirtualizedTokenListProps {
+  tokens: TokenAmount[];
+  featuredTokensLength?: number;
+  scrollElementRef: MutableRefObject<HTMLElement | null>;
+  isLoading: boolean;
+  isBalanceLoading: boolean;
+  chainId: number;
+  chain?: ExtendedChain;
+  showBalance?: boolean;
+  showFeatured?: boolean;
+  onClick(tokenAddress: string): void;
+}
+
+export interface TokenListItemBaseProps {
+  onClick?(tokenAddress: string): void;
+  size: number;
+  start: number;
+}
+
+export interface TokenListItemProps extends TokenListItemBaseProps {
+  showBalance?: boolean;
+  token: TokenAmount;
+  chain?: ExtendedChain;
+  isBalanceLoading?: boolean;
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+}
+
+export interface TokenListItemButtonProps {
+  onClick?(): void;
+  showBalance?: boolean;
+  token: TokenAmount;
+  chain?: ExtendedChain;
+  isBalanceLoading?: boolean;
+}

package/components/TokenList/useTokenSelect.ts

@@ -0,0 +1,69 @@
+import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
+import { useCallback } from 'react';
+import type { FormType } from '../../stores';
+import { useWidgetConfig } from '../../providers';
+import {
+  useFieldActions,
+  useFieldController,
+  FormKeyHelper,
+} from '../../stores';
+
+export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
+  const tokenKey = FormKeyHelper.getTokenKey(formType);
+  const { onChange, onBlur } = useFieldController({ name: tokenKey });
+  const { setFieldValue, getFieldValues } = useFieldActions();
+  const { subvariant } = useWidgetConfig();
+  const emitter = useWidgetEvents();
+
+  return useCallback(
+    (tokenAddress: string, chainId?: number) => {
+      onChange(tokenAddress);
+      onBlur();
+      const selectedChainId =
+        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
+      // Set chain again to trigger URL builder update
+      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+        isDirty: true,
+        isTouched: true,
+      });
+      setFieldValue(FormKeyHelper.getAmountKey(formType), '');
+      const oppositeFormType = formType === 'from' ? 'to' : 'from';
+      const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues(
+        FormKeyHelper.getTokenKey(oppositeFormType),
+        FormKeyHelper.getChainKey(oppositeFormType),
+      );
+      if (
+        selectedOppositeToken === tokenAddress &&
+        selectedOppositeChainId === selectedChainId &&
+        subvariant !== 'nft'
+      ) {
+        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
+          isDirty: true,
+          isTouched: true,
+        });
+      }
+
+      const eventToEmit =
+        formType === 'from'
+          ? WidgetEvent.SourceChainTokenSelected
+          : WidgetEvent.DestinationChainTokenSelected;
+
+      emitter.emit(eventToEmit, {
+        chainId: selectedChainId,
+        tokenAddress,
+      });
+
+      onClick?.();
+    },
+    [
+      emitter,
+      formType,
+      getFieldValues,
+      onBlur,
+      onChange,
+      onClick,
+      setFieldValue,
+      subvariant,
+    ],
+  );
+};

package/config/theme.ts

@@ -0,0 +1,305 @@
+import { loadingButtonClasses } from '@mui/lab/LoadingButton';
+import type {} from '@mui/lab/themeAugmentation';
+import type { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+import { touchRippleClasses } from '@mui/material/ButtonBase';
+import { dialogActionsClasses } from '@mui/material/DialogActions';
+import { common } from '@mui/material/colors';
+import {
+  alpha,
+  createTheme as createMuiTheme,
+  css,
+  darken,
+  getContrastRatio,
+  keyframes,
+  lighten,
+} from '@mui/material/styles';
+import type { ThemeConfig } from '../types';
+
+// https://mui.com/customization/palette/
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    '@supports (font-variation-settings: normal)': React.CSSProperties;
+  }
+  interface TypographyVariantsOptions {
+    '@supports (font-variation-settings: normal)'?: React.CSSProperties;
+  }
+  interface Shape {
+    borderRadius: number;
+    borderRadiusSecondary: number;
+  }
+  interface Theme {
+    shape: Shape;
+  }
+  interface ThemeOptions {
+    shape?: Partial<Shape>;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    '@supports (font-variation-settings: normal)': true;
+  }
+}
+
+const palette = {
+  primary: {
+    main: '#3F49E1',
+    light: lighten('#3F49E1', 0.5),
+    dark: darken('#3F49E1', 0.2),
+  },
+  secondary: {
+    main: '#F5B5FF',
+    light: lighten('#F5B5FF', 0.5),
+    dark: darken('#F5B5FF', 0.2),
+  },
+  success: {
+    main: '#0AA65B',
+  },
+  warning: {
+    main: '#FFCC00',
+  },
+  error: {
+    main: '#E5452F',
+  },
+  info: {
+    main: '#297EFF',
+  },
+};
+
+const paletteLight = {
+  text: {
+    primary: '#000000',
+    secondary: '#747474',
+  },
+};
+
+const paletteDark = {
+  background: {
+    paper: '#212121',
+  },
+};
+
+const shape = {
+  borderRadius: 12,
+  borderRadiusSecondary: 8,
+};
+
+const enterKeyframe = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
+
+export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
+  const primaryMainColor =
+    (theme.palette?.primary as SimplePaletteColorOptions)?.main ??
+    palette.primary.main;
+  const primaryLightColor = lighten(
+    (theme.palette?.primary as SimplePaletteColorOptions)?.main ??
+      palette.primary.main,
+    0.5,
+  );
+  const primaryDarkColor = darken(
+    (theme.palette?.primary as SimplePaletteColorOptions)?.main ??
+      palette.primary.main,
+    0.2,
+  );
+  const contrastButtonColor =
+    getContrastRatio(common.white, primaryMainColor) >= 3
+      ? common.white
+      : common.black;
+  const contrastTextButtonColor =
+    getContrastRatio(common.white, alpha(primaryMainColor, 0.08)) >= 3
+      ? common.white
+      : common.black;
+  return createMuiTheme({
+    typography: {
+      fontFamily: 'Inter var, Inter, sans-serif',
+      ...theme.typography,
+    },
+    palette: {
+      mode,
+      ...palette,
+      ...(mode === 'light' ? paletteLight : paletteDark),
+      ...theme.palette,
+      primary: {
+        main: primaryMainColor,
+        light: primaryLightColor,
+        dark: primaryDarkColor,
+      },
+      secondary: {
+        main:
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+          palette.secondary.main,
+        light: lighten(
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+            palette.secondary.main,
+          0.5,
+        ),
+        dark: darken(
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+            palette.secondary.main,
+          0.2,
+        ),
+      },
+    },
+    shape: {
+      ...shape,
+      ...theme.shape,
+    },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 392,
+        md: 900,
+        lg: 1200,
+        xl: 1536,
+      },
+    },
+    components: {
+      MuiScopedCssBaseline: {
+        styleOverrides: {
+          root: {
+            fontFamily: 'Inter, sans-serif',
+            ...theme.typography,
+            '@supports (font-variation-settings: normal)': {
+              fontFamily: 'Inter var, sans-serif',
+              ...theme.typography,
+            },
+          },
+        },
+      },
+      MuiButtonBase: {
+        styleOverrides: {
+          // This `css()` function invokes keyframes. `styled-components` only supports keyframes
+          // in string templates. Do not convert these styles in JS object as it will break.
+          root: css`
+            &
+              .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {
+              opacity: 0.1;
+              animation-name: ${enterKeyframe};
+            }
+          `,
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true,
+        },
+        styleOverrides: {
+          root: {
+            borderRadius:
+              theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary,
+            textTransform: 'none',
+            fontSize: '1rem',
+            [`&.Mui-disabled, &.Mui-disabled:hover`]: {
+              color:
+                mode === 'light'
+                  ? alpha(common.black, 0.56)
+                  : alpha(common.white, 0.56),
+              cursor: 'not-allowed',
+              pointerEvents: 'auto',
+            },
+            [`&.${loadingButtonClasses.loading}.Mui-disabled`]: {
+              backgroundColor: primaryMainColor,
+              color: contrastButtonColor,
+              cursor: 'auto',
+              pointerEvents: 'auto',
+            },
+            [`.${loadingButtonClasses.loadingIndicator}`]: {
+              color: contrastButtonColor,
+            },
+            [`&.${loadingButtonClasses.root}.${loadingButtonClasses.loading}`]:
+              {
+                color: 'transparent',
+              },
+          },
+          text: {
+            backgroundColor:
+              mode === 'light'
+                ? alpha(primaryMainColor, 0.08)
+                : alpha(primaryMainColor, 0.42),
+            '&:hover': {
+              backgroundColor:
+                mode === 'light'
+                  ? alpha(primaryMainColor, 0.12)
+                  : alpha(primaryMainColor, 0.56),
+            },
+            color:
+              mode === 'light' ? primaryMainColor : contrastTextButtonColor,
+          },
+          contained: {
+            '&:hover': {
+              color: contrastButtonColor,
+            },
+          },
+          sizeMedium: {
+            padding: '10px 14px',
+            [`.${dialogActionsClasses.root} &`]: {
+              padding: '6px 12px',
+            },
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: 'inherit',
+            '&:hover': {
+              color: 'inherit',
+            },
+          },
+        },
+      },
+      MuiAvatar: {
+        styleOverrides: {
+          root: {
+            height: 32,
+            width: 32,
+          },
+        },
+        ...theme.components?.MuiAvatar,
+      },
+      MuiListItemAvatar: {
+        styleOverrides: {
+          root: {
+            minWidth: 48,
+          },
+        },
+      },
+      MuiListItemText: {
+        styleOverrides: {
+          primary: ({ theme }) => ({
+            fontWeight: '500',
+            fontSize: '1.125rem',
+            lineHeight: '1.2778',
+            color: theme.palette.text.primary,
+          }),
+          secondary: ({ theme }) => ({
+            fontWeight: '400',
+            fontSize: '0.75rem',
+            color: theme.palette.text.secondary,
+          }),
+        },
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: ({ theme }) => ({
+            backgroundColor: 'rgb(0 0 0 / 64%)',
+            backdropFilter: 'blur(3px)',
+            fontSize: '0.75rem',
+            padding: theme.spacing(1, 1.5),
+          }),
+          arrow: {
+            color: 'rgb(0 0 0 / 64%)',
+          },
+        },
+      },
+    },
+  });
+};

package/config/version.ts

@@ -0,0 +1,2 @@
+export const name = '@lifi/widget';
+export const version = '3.0.0-alpha.11';

package/hooks/index.ts

@@ -0,0 +1,33 @@
+export * from './useAccount';
+export * from './useAvailableChains';
+export * from './useChain';
+export * from './useChains';
+export * from './useContentHeight';
+export * from './useDebouncedWatch';
+export * from './useDefaultElementId';
+export * from './useExpandableVariant';
+export * from './useFeaturedTokens';
+export * from './useFromTokenSufficiency';
+export * from './useGasRecommendation';
+export * from './useGasRefuel';
+export * from './useGasSufficiency';
+export * from './useInitializer';
+export * from './useLanguages';
+export * from './useNavigateBack';
+export * from './useProcessMessage';
+export * from './useRequiredToAddress';
+export * from './useRouteExecution';
+export * from './useRoutes';
+export * from './useScrollableContainer';
+export * from './useSettingMonitor';
+export * from './useSwapOnly';
+export * from './useToken';
+export * from './useTokenAddressBalance';
+export * from './useTokenBalance';
+export * from './useTokenBalances';
+export * from './useTokenSearch';
+export * from './useTokens';
+export * from './useTools';
+export * from './useTransactionDetails';
+export * from './useTransactionHistory';
+export * from './useWidgetEvents';

package/hooks/useDebouncedWatch.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+import type { FormFieldNames } from '../stores';
+import { useFieldValues } from '../stores';
+
+export const useDebouncedWatch = (name: FormFieldNames[], delay: number) => {
+  const watchedValue = useFieldValues(...name);
+  const [debouncedValue, setDebouncedValue] = useState(watchedValue);
+  const debouncedValueRef = useRef<any>();
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      const hasWatchedValue = watchedValue.some(
+        (value: FormFieldNames) => value,
+      );
+      if (hasWatchedValue) {
+        const handler = setTimeout(() => {
+          setDebouncedValue(watchedValue);
+        }, delay);
+        return () => clearTimeout(handler);
+      }
+      debouncedValueRef.current = watchedValue;
+      setDebouncedValue(watchedValue);
+      return undefined;
+    }
+    isMounted.current = true;
+    return undefined;
+  }, [delay, watchedValue]);
+
+  return debouncedValue;
+};

package/hooks/useExpandableVariant.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useWidgetConfig } from '../providers';
+
+const defaultExpandableWidth = 852;
+
+export const useExpandableVariant = () => {
+  const { variant, useRecommendedRoute } = useWidgetConfig();
+  const expandableAllowed = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.up(defaultExpandableWidth),
+  );
+  return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
+};