@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -0,0 +1,121 @@
+import { List, Typography } from '@mui/material';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
+import type { VirtualizedTokenListProps } from './types';
+
+export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
+  tokens,
+  featuredTokensLength,
+  scrollElementRef,
+  chainId,
+  chain,
+  isLoading,
+  isBalanceLoading,
+  showBalance,
+  showFeatured,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+
+  const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
+  const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
+  const tokensLastIndex = tokens.length - 1;
+
+  const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
+    count: tokens.length,
+    overscan: 10,
+    paddingEnd: 12,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: (index) => {
+      // heigth of TokenListItem
+      let size = 64;
+      if (!hasFeaturedTokens) {
+        return size;
+      }
+      if (index === 0 && tokens[index]?.featured) {
+        // height of startAdornment
+        size += 24;
+      }
+      if (
+        index === featuredTokensLastIndex &&
+        index !== tokensLastIndex &&
+        tokens[index]?.featured
+      ) {
+        // height of endAdornment
+        size += 32;
+      }
+      return size;
+    },
+    getItemKey: (index) => `${tokens[index].address}-${index}`,
+  });
+
+  useEffect(() => {
+    // Scroll to the top of the list when switching the chains
+    if (getVirtualItems().length) {
+      scrollToIndex(0, { align: 'start' });
+    }
+  }, [scrollToIndex, chainId, getVirtualItems]);
+
+  if (isLoading) {
+    return (
+      <List disablePadding>
+        {Array.from({ length: 3 }).map((_, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <TokenListItemSkeleton key={index} />
+        ))}
+      </List>
+    );
+  }
+
+  return (
+    <List style={{ height: getTotalSize() }} disablePadding>
+      {getVirtualItems().map((item) => {
+        const token = tokens[item.index];
+        return (
+          <TokenListItem
+            key={item.key}
+            onClick={onClick}
+            size={item.size}
+            start={item.start}
+            token={token}
+            chain={chain}
+            isBalanceLoading={isBalanceLoading}
+            showBalance={showBalance}
+            startAdornment={
+              hasFeaturedTokens && token.featured && item.index === 0 ? (
+                <Typography
+                  fontSize={14}
+                  fontWeight={600}
+                  lineHeight={1}
+                  px={2}
+                  pb={1.25}
+                >
+                  {t('main.featuredTokens')}
+                </Typography>
+              ) : null
+            }
+            endAdornment={
+              hasFeaturedTokens &&
+              token.featured &&
+              item.index === featuredTokensLastIndex &&
+              item.index !== tokensLastIndex ? (
+                <Typography
+                  fontSize={14}
+                  fontWeight={600}
+                  lineHeight={1}
+                  px={2}
+                  py={1.25}
+                >
+                  {t('main.otherTokens')}
+                </Typography>
+              ) : null
+            }
+          />
+        );
+      })}
+    </List>
+  );
+};

package/src/components/TokenList/types.ts

@@ -0,0 +1,46 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import type { MutableRefObject } from 'react';
+import type { FormType } from '../../providers';
+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/src/components/TokenList/useTokenSelect.ts

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

package/src/config/queryClient.ts

@@ -0,0 +1,22 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      enabled: true,
+      staleTime: 3_600_000,
+      refetchInterval: false,
+      refetchIntervalInBackground: false,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+      refetchOnMount: true,
+      retryOnMount: true,
+      // suspense: true,
+    },
+    mutations: {
+      onError: (error) => {
+        //
+      },
+    },
+  },
+});

package/src/config/theme.ts

@@ -0,0 +1,313 @@
+import { loadingButtonClasses } from '@mui/lab/LoadingButton';
+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 Palette {
+//     appBar: Palette['primary'];
+//   }
+//   interface PaletteOptions {
+//     appBar?: PaletteOptions['primary'];
+//   }
+// }
+
+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/src/config/version.ts

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

package/src/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/src/hooks/useAccount.ts

@@ -0,0 +1,86 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import type { Chain } from 'viem';
+import type { Connector } from 'wagmi';
+import { useDisconnect, useAccount as useWagmiAccount } from 'wagmi';
+
+export interface AccountBase {
+  address?: string;
+  addresses?: readonly string[];
+  chain?: Chain;
+  chainId?: number;
+  chainType?: ChainType;
+  isConnected: boolean;
+  isConnecting: boolean;
+  isDisconnected: boolean;
+  isReconnecting: boolean;
+  status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
+}
+
+export interface EVMAccount extends AccountBase {
+  chainType: ChainType.EVM;
+  connector?: Connector;
+}
+
+export interface SVMAccount extends AccountBase {
+  chainType: ChainType.SVM;
+  connector?: WalletAdapter;
+}
+
+export type Account = EVMAccount | SVMAccount;
+
+export interface AccountResult {
+  account: Account;
+  accounts: Account[];
+}
+
+export const useAccount = (): AccountResult => {
+  const account = useWagmiAccount();
+  const { wallet } = useWallet();
+
+  return useMemo(() => {
+    const svm: Account = wallet?.adapter.publicKey
+      ? {
+          address: wallet?.adapter.publicKey.toString(),
+          chainId: ChainId.SOL,
+          chainType: ChainType.SVM,
+          connector: wallet?.adapter,
+          isConnected: Boolean(wallet?.adapter.publicKey),
+          isConnecting: false,
+          isReconnecting: false,
+          isDisconnected: !wallet,
+          status: 'connected',
+        }
+      : {
+          chainType: ChainType.SVM,
+          isConnected: false,
+          isConnecting: false,
+          isReconnecting: false,
+          isDisconnected: true,
+          status: 'disconnected',
+        };
+    const evm: Account = { ...account, chainType: ChainType.EVM };
+
+    return {
+      account: account.isConnected ? evm : svm,
+      accounts: [evm, svm],
+    };
+  }, [account, wallet]);
+};
+
+export const useAccountDisconnect = () => {
+  const account = useWagmiAccount();
+  const { disconnect: wagmiDisconnect } = useDisconnect();
+  const { wallet, disconnect } = useWallet();
+
+  return () => {
+    if (account.isConnected) {
+      wagmiDisconnect();
+    }
+    if (wallet) {
+      disconnect();
+    }
+  };
+};