@lifi/widget 3.0.0-alpha.10 → 3.0.0-alpha.12

package/components/Token/Token.tsx

@@ -1,31 +1,32 @@
 /* eslint-disable react/no-array-index-key */
 import type { LiFiStep, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import { Box, Skeleton } from '@mui/material';
+import { Box, Grow, Skeleton } from '@mui/material';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
 import { formatTokenAmount, formatTokenPrice } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
-import { TokenAvatar } from '../TokenAvatar';
+import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
 
 interface TokenProps {
   token: TokenAmount;
-  connected?: boolean;
   step?: LiFiStep;
+  stepVisible?: boolean;
   disableDescription?: boolean;
   isLoading?: boolean;
 }
 
-export const Token: React.FC<TokenProps & BoxProps> = ({ token, ...other }) => {
+export const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {
   if (!token.priceUSD || !token.logoURI) {
     return <TokenFallback token={token} {...other} />;
   }
   return <TokenBase token={token} {...other} />;
 };
 
-export const TokenFallback: React.FC<TokenProps & BoxProps> = ({
+export const TokenFallback: FC<TokenProps & BoxProps> = ({
   token,
   isLoading,
   ...other
@@ -44,33 +45,52 @@ export const TokenFallback: React.FC<TokenProps & BoxProps> = ({
   );
 };
 
-export const TokenBase: React.FC<TokenProps & BoxProps> = ({
+export const TokenBase: FC<TokenProps & BoxProps> = ({
   token,
-  connected,
   step,
+  stepVisible,
   disableDescription,
   isLoading,
   ...other
 }) => {
   const { t } = useTranslation();
   const { chain } = useChain(token?.chainId);
+
+  if (isLoading) {
+    return (
+      <TokenSkeleton
+        token={token}
+        step={step}
+        disableDescription={disableDescription}
+      />
+    );
+  }
+
   const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);
   const formattedTokenPrice = formatTokenPrice(
     formattedTokenAmount,
     token.priceUSD,
   );
+
+  const tokenOnChain = !disableDescription ? (
+    <TextSecondary>
+      {t(`main.tokenOnChain`, {
+        tokenSymbol: token.symbol,
+        chainName: chain?.name,
+      })}
+    </TextSecondary>
+  ) : null;
+
   return (
-    <Box flex={1} {...other}>
-      <Box display="flex" flex={1} alignItems="center">
-        <TokenAvatar
-          token={token}
-          chain={chain}
-          isLoading={isLoading}
-          sx={{ marginRight: 2 }}
-        />
-        {isLoading ? (
-          <Skeleton width={112} height={32} variant="text" />
-        ) : (
+    <Box flex={1} display="flex" alignItems="center" {...other}>
+      <TokenAvatar
+        token={token}
+        chain={chain}
+        isLoading={isLoading}
+        sx={{ marginRight: 2 }}
+      />
+      <Box flex={1}>
+        <Box mb={0.5} height={24} display="flex" alignItems="center">
           <TextFitter
             height={30}
             textStyle={{
@@ -81,63 +101,113 @@ export const TokenBase: React.FC<TokenProps & BoxProps> = ({
               value: formattedTokenAmount,
             })}
           </TextFitter>
-        )}
-      </Box>
-      <TextSecondaryContainer connected={connected} component="span">
-        {isLoading ? (
-          <Skeleton
-            width={48}
-            height={12}
-            variant="rounded"
-            sx={{ marginTop: 0.5 }}
-          />
-        ) : (
-          <TextSecondary connected={connected}>
+        </Box>
+        <TextSecondaryContainer component="span">
+          <TextSecondary>
             {t(`format.currency`, {
               value: formattedTokenPrice,
             })}
           </TextSecondary>
-        )}
-        {!disableDescription ? (
-          <TextSecondary connected={connected} px={0.5} dot>
-            &#x2022;
-          </TextSecondary>
-        ) : null}
-        {!step && !disableDescription ? (
-          isLoading ? (
+          {!disableDescription ? (
+            <TextSecondary px={0.5} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {step ? (
+            <TokenStep
+              step={step}
+              stepVisible={stepVisible}
+              disableDescription={disableDescription}
+            >
+              {tokenOnChain}
+            </TokenStep>
+          ) : (
+            tokenOnChain
+          )}
+        </TextSecondaryContainer>
+      </Box>
+    </Box>
+  );
+};
+
+const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
+  step,
+  stepVisible,
+  disableDescription,
+  children,
+}) => {
+  return (
+    <Box flex={1} position="relative" overflow="hidden" height={16}>
+      <Grow
+        in={!stepVisible && !disableDescription}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box display="flex" alignItems="center" height={16}>
+          {children as ReactElement}
+        </Box>
+      </Grow>
+      <Grow
+        in={stepVisible}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box display="flex" alignItems="center" height={16}>
+          <Box mr={0.75} height={16}>
+            <SmallAvatar
+              src={step?.toolDetails.logoURI}
+              alt={step?.toolDetails.name}
+              sx={{
+                width: 16,
+                height: 16,
+                border: 0,
+              }}
+            >
+              {step?.toolDetails.name[0]}
+            </SmallAvatar>
+          </Box>
+          <TextSecondary>{step?.toolDetails.name}</TextSecondary>
+        </Box>
+      </Grow>
+    </Box>
+  );
+};
+
+export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
+  step,
+  disableDescription,
+  ...other
+}) => {
+  return (
+    <Box flex={1} {...other}>
+      <Box display="flex" flex={1} alignItems="center">
+        <TokenAvatarSkeleton sx={{ marginRight: 2 }} />
+        <Box flex={1}>
+          <Skeleton width={112} height={24} variant="text" />
+          <TextSecondaryContainer component="span">
             <Skeleton
-              width={96}
+              width={48}
               height={12}
               variant="rounded"
               sx={{ marginTop: 0.5 }}
             />
-          ) : (
-            <TextSecondary connected={connected}>
-              {t(`main.tokenOnChain`, {
-                tokenSymbol: token.symbol,
-                chainName: chain?.name,
-              })}
-            </TextSecondary>
-          )
-        ) : null}
-        {step ? (
-          <Box display="flex" alignItems="flex-end" height={12} mt={0.5}>
-            <Box pr={0.75}>
-              <SmallAvatar
-                src={step.toolDetails.logoURI}
-                alt={step.toolDetails.name}
-                sx={{
-                  border: 0,
-                  marginBottom: -0.25,
-                }}
-              >
-                {step.toolDetails.name[0]}
-              </SmallAvatar>
-            </Box>
-            <TextSecondary connected>{step.toolDetails.name}</TextSecondary>
-          </Box>
-        ) : null}
-      </TextSecondaryContainer>
+            {!step && !disableDescription ? (
+              <Skeleton
+                width={96}
+                height={12}
+                variant="rounded"
+                sx={{ marginTop: 0.5, marginLeft: 1.5 }}
+              />
+            ) : null}
+          </TextSecondaryContainer>
+        </Box>
+      </Box>
     </Box>
   );
 };

package/components/TokenAvatar/TokenAvatar.style.tsx

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@mui/material';
 import { AvatarGroup, Box } from '@mui/material';
 import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
@@ -13,19 +14,29 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   },
 }));
 
-export const AvatarDefault = styled(Box)(({ theme }) => ({
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  borderRadius: '50%',
-}));
+export const AvatarDefault = styled(Box)(({ theme }) => {
+  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject;
+  return {
+    background:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    borderRadius: '50%',
+    height: root?.height,
+    width: root?.width,
+  };
+});
 
-export const AvatarDefaultBadge = styled(Box)(({ theme }) => ({
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  border: `2px solid ${theme.palette.background.paper}`,
-  borderRadius: '50%',
-}));
+export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
+  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject;
+  return {
+    background:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    border: `2px solid ${theme.palette.background.paper}`,
+    borderRadius: '50%',
+    height: ((root?.height ?? 40) as number) / 2,
+    width: ((root?.width ?? 40) as number) / 2,
+  };
+});

package/components/TokenAvatar/TokenAvatar.tsx

@@ -31,28 +31,26 @@ export const TokenAvatarBase: React.FC<{
   isLoading?: boolean;
   sx?: SxProps<Theme>;
 }> = ({ token, chain, isLoading, sx }) => {
-  return (
+  return isLoading ? (
+    <TokenAvatarSkeleton />
+  ) : (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       badgeContent={
-        chain && !isLoading ? (
+        chain ? (
           <SmallAvatar src={chain.logoURI} alt={chain.name}>
             {chain.name[0]}
           </SmallAvatar>
         ) : (
-          <SmallAvatarSkeleton />
+          <AvatarDefaultBadge />
         )
       }
       sx={sx}
     >
-      {isLoading ? (
-        <Skeleton width={32} height={32} variant="circular" />
-      ) : (
-        <Avatar src={token?.logoURI} alt={token?.symbol}>
-          {token?.symbol?.[0]}
-        </Avatar>
-      )}
+      <Avatar src={token?.logoURI} alt={token?.symbol}>
+        {token?.symbol?.[0]}
+      </Avatar>
     </Badge>
   );
 };
@@ -83,10 +81,25 @@ export const TokenAvatarDefault: React.FC<{
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefaultBadge width={16} height={16} />}
+      badgeContent={<AvatarDefaultBadge />}
+      sx={sx}
+    >
+      <AvatarDefault />
+    </Badge>
+  );
+};
+
+export const TokenAvatarSkeleton: React.FC<{
+  sx?: SxProps<Theme>;
+}> = ({ sx }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<SmallAvatarSkeleton />}
       sx={sx}
     >
-      <AvatarDefault width={32} height={32} />
+      <Skeleton width={40} height={40} variant="circular" />
     </Badge>
   );
 };

package/components/TokenList/TokenList.style.tsx

@@ -26,10 +26,12 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
   [`.${listItemSecondaryActionClasses.root}`]: {
     right: theme.spacing(3),
   },
-  [`& .${listItemTextClasses.primary}`]: {
-    height: 22,
+  [`& .${listItemTextClasses.secondary}`]: {
+    fontSize: 12,
+    fontWeight: 500,
   },
   [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
+    lineHeight: 1.3334,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
@@ -39,10 +41,10 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
 export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
   ({ theme }) => ({
     lineHeight: 1,
-    fontSize: '0.75rem',
+    fontSize: 12,
     fontWeight: 400,
     padding: theme.spacing(0.375, 0.375),
-    marginLeft: theme.spacing(0.25),
+    margin: theme.spacing(0, 0, 0, 0.25),
     color: 'inherit',
     backgroundColor: 'unset',
     minWidth: 'unset',
@@ -54,7 +56,7 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
           : alpha(theme.palette.common.white, 0.08),
     },
     svg: {
-      fontSize: '0.875rem',
+      fontSize: 14,
     },
   }),
 );

package/components/TokenList/TokenList.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useRef } from 'react';
-import { useWatch } from 'react-hook-form';
 import {
   useAccount,
   useChain,
@@ -9,12 +8,12 @@ import {
   useTokenBalances,
   useTokenSearch,
 } from '../../hooks';
-import { FormKey, FormKeyHelper } from '../../providers';
 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,
@@ -23,11 +22,9 @@ export const TokenList: FC<TokenListProps> = ({
 }) => {
   const parentRef = useRef<HTMLUListElement | null>(null);
   const { account } = useAccount();
-  const [selectedChainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    [FormKey.TokenSearchFilter],
+    ['tokenSearchFilter'],
     320,
   );
 

package/components/TokenList/TokenListItem.tsx

@@ -9,7 +9,7 @@ import {
   Slide,
   Typography,
 } from '@mui/material';
-import { useRef, useState } from 'react';
+import { MouseEventHandler, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
 import {
@@ -31,7 +31,10 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
   startAdornment,
   endAdornment,
 }) => {
-  const handleClick = () => onClick?.(token.address);
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation();
+    onClick?.(token.address);
+  };
   return (
     <ListItem
       disablePadding
@@ -155,7 +158,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             ) : null}
             {tokenPrice ? (
               <Typography
-                fontWeight={400}
+                fontWeight={500}
                 fontSize={12}
                 color="text.secondary"
                 data-price={token.priceUSD}
@@ -182,14 +185,14 @@ export const TokenListItemSkeleton = () => {
       <ListItemAvatar>
         <Skeleton
           variant="circular"
-          width={32}
-          height={32}
+          width={40}
+          height={40}
           sx={{ marginLeft: 1.5, marginRight: 2 }}
         />
       </ListItemAvatar>
       <ListItemText
-        primary={<Skeleton variant="text" width={48} height={20} />}
-        secondary={<Skeleton variant="text" width={96} height={20} />}
+        primary={<Skeleton variant="text" width={56} height={24} />}
+        secondary={<Skeleton variant="text" width={96} height={16} />}
       />
     </ListItem>
   );
@@ -205,7 +208,7 @@ export const TokenAmountSkeleton: React.FC = () => {
       }}
     >
       <Skeleton variant="text" width={56} height={24} />
-      <Skeleton variant="text" width={48} height={18} />
+      <Skeleton variant="text" width={48} height={16} />
     </Box>
   );
 };

package/components/TokenList/TokenNotFound.tsx

@@ -1,16 +1,13 @@
 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';
+import type { FormTypeProps } from '../../stores';
+import { useFieldValues, FormKeyHelper } from '../../stores';
 
 export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
-  const [selectedChainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const { getChainById } = useAvailableChains();
   return (
     <Box

package/components/TokenList/types.ts

@@ -1,6 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk';
-import type { MutableRefObject } from 'react';
-import type { FormType } from '../../providers';
+import type { MouseEventHandler, MutableRefObject } from 'react';
+import type { FormType } from '../../stores';
 import type { TokenAmount } from '../../types';
 
 export interface TokenListProps {
@@ -38,7 +38,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 }
 
 export interface TokenListItemButtonProps {
-  onClick?(): void;
+  onClick?: MouseEventHandler<HTMLDivElement>;
   showBalance?: boolean;
   token: TokenAmount;
   chain?: ExtendedChain;

package/components/TokenList/useTokenSelect.ts

@@ -1,15 +1,17 @@
 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';
+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 {
-    field: { onChange, onBlur },
-  } = useController({ name: tokenKey });
-  const { setValue, getValues } = useFormContext();
+  const { onChange, onBlur } = useFieldController({ name: tokenKey });
+  const { setFieldValue, getFieldValues } = useFieldActions();
   const { subvariant } = useWidgetConfig();
   const emitter = useWidgetEvents();
 
@@ -18,26 +20,26 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       onChange(tokenAddress);
       onBlur();
       const selectedChainId =
-        chainId ?? getValues(FormKeyHelper.getChainKey(formType));
+        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
       // Set chain again to trigger URL builder update
-      setValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
-        shouldDirty: true,
-        shouldTouch: true,
+      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+        isDirty: true,
+        isTouched: true,
       });
-      setValue(FormKeyHelper.getAmountKey(formType), '');
+      setFieldValue(FormKeyHelper.getAmountKey(formType), '');
       const oppositeFormType = formType === 'from' ? 'to' : 'from';
-      const [selectedOppositeToken, selectedOppositeChainId] = getValues([
+      const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues(
         FormKeyHelper.getTokenKey(oppositeFormType),
         FormKeyHelper.getChainKey(oppositeFormType),
-      ]);
+      );
       if (
         selectedOppositeToken === tokenAddress &&
         selectedOppositeChainId === selectedChainId &&
         subvariant !== 'nft'
       ) {
-        setValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
-          shouldDirty: true,
-          shouldTouch: true,
+        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
+          isDirty: true,
+          isTouched: true,
         });
       }
 
@@ -56,11 +58,11 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
     [
       emitter,
       formType,
-      getValues,
+      getFieldValues,
       onBlur,
       onChange,
       onClick,
-      setValue,
+      setFieldValue,
       subvariant,
     ],
   );

package/config/theme.ts

@@ -259,19 +259,12 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
       MuiAvatar: {
         styleOverrides: {
           root: {
-            height: 32,
-            width: 32,
+            height: 40,
+            width: 40,
           },
         },
         ...theme.components?.MuiAvatar,
       },
-      MuiListItemAvatar: {
-        styleOverrides: {
-          root: {
-            minWidth: 48,
-          },
-        },
-      },
       MuiListItemText: {
         styleOverrides: {
           primary: ({ theme }) => ({

package/config/version.ts

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