@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.5

package/src/components/TokenList/TokenNotFound.tsx

@@ -1,42 +0,0 @@
-import SearchOffIcon from '@mui/icons-material/SearchOff';
-import { Box, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-
-export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
-  const { t } = useTranslation();
-  const [selectedChainId] = useWatch({
-    name: [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/src/components/TokenList/VirtualizedTokenList.tsx

@@ -1,121 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,305 +0,0 @@
-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/src/config/version.ts

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

package/src/hooks/useAccount.ts

@@ -1,86 +0,0 @@
-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();
-    }
-  };
-};