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

package/components/StepActions/StepFeeBreakdown.tsx

@@ -0,0 +1,107 @@
+import type { LiFiStepExtended } from '@lifi/sdk';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { Box, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { getStepFeeCostsBreakdown } from '../../utils';
+
+export const StepFeeBreakdown: React.FC<{
+  step: LiFiStepExtended;
+}> = ({ step }) => {
+  const { t } = useTranslation();
+
+  let fees = 0;
+  const feeComponents: ReactNode[] = [];
+  const isDone = step.execution?.status === 'DONE';
+
+  const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts;
+  const feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts;
+
+  if (gasCosts) {
+    const { token, amount, amountUSD } = getStepFeeCostsBreakdown(gasCosts);
+    const formattedGasAmount = token
+      ? parseFloat(formatUnits(amount, token.decimals))?.toFixed(9)
+      : 0;
+    fees += amountUSD;
+    feeComponents.push(
+      <Box ml={7} key="network">
+        <Typography
+          fontSize={12}
+          lineHeight={2}
+          color="text.secondary"
+          fontWeight="500"
+        >
+          {isDone
+            ? t('main.fees.networkPaid')
+            : t('main.fees.networkEstimated')}
+        </Typography>
+        <Typography
+          fontSize={12}
+          lineHeight={1}
+          fontWeight="500"
+          color="text.secondary"
+        >
+          {t(`format.currency`, { value: amountUSD })} ({formattedGasAmount}{' '}
+          {token.symbol})
+        </Typography>
+      </Box>,
+    );
+  }
+
+  if (feeCosts) {
+    const filteredfeeCosts = feeCosts?.filter((fee) => !fee.included);
+    if (filteredfeeCosts?.length) {
+      const { token, amount, amountUSD } =
+        getStepFeeCostsBreakdown(filteredfeeCosts);
+      const formattedFeeAmount = token
+        ? parseFloat(formatUnits(amount, token.decimals))?.toFixed(9)
+        : 0;
+      fees += amountUSD;
+      feeComponents.push(
+        <Box mt={feeComponents.length ? 0.5 : 0} ml={7} key="bridge">
+          <Typography
+            fontSize={12}
+            lineHeight={2}
+            color="text.secondary"
+            fontWeight="500"
+          >
+            {isDone
+              ? t('main.fees.providerPaid')
+              : t('main.fees.providerEstimated')}
+          </Typography>
+          <Typography
+            fontSize={12}
+            lineHeight={1}
+            fontWeight="500"
+            color="text.secondary"
+          >
+            {t(`format.currency`, { value: amountUSD })} ({formattedFeeAmount}{' '}
+            {token.symbol})
+          </Typography>
+        </Box>,
+      );
+    }
+  }
+
+  return (
+    <Box mt={1.5}>
+      <Box display="flex" alignItems="center">
+        <Typography ml={1} mr={3} height={24} color="text.secondary">
+          <MonetizationOnIcon />
+        </Typography>
+        <Typography
+          fontSize={16}
+          color="text.primary"
+          fontWeight="600"
+          lineHeight={1.125}
+        >
+          {t(`format.currency`, {
+            value: fees,
+          })}
+        </Typography>
+      </Box>
+      {feeComponents}
+    </Box>
+  );
+};

package/components/StepActions/StepFees.tsx

@@ -0,0 +1,44 @@
+import type { LiFiStepExtended } from '@lifi/sdk';
+import type { TypographyProps } from '@mui/material';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { getStepFeeCostsBreakdown } from '../../utils';
+
+export const StepFees: React.FC<
+  TypographyProps & {
+    step: LiFiStepExtended;
+  }
+> = ({ step, ...other }) => {
+  const { t } = useTranslation();
+
+  const isDone = step.execution?.status === 'DONE';
+  const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts;
+  const feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts;
+  let fees = 0;
+
+  if (gasCosts) {
+    const { amountUSD } = getStepFeeCostsBreakdown(gasCosts);
+    fees += amountUSD;
+  }
+
+  if (feeCosts) {
+    const filteredfeeCosts = feeCosts?.filter((fee) => !fee.included);
+    if (filteredfeeCosts?.length) {
+      const { amountUSD } = getStepFeeCostsBreakdown(filteredfeeCosts);
+      fees += amountUSD;
+    }
+  }
+
+  return (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="text.secondary"
+      lineHeight={1.3334}
+      {...other}
+    >
+      {t(`format.currency`, { value: fees })}{' '}
+      {isDone ? t('main.fees.paid') : t('main.fees.estimated')}
+    </Typography>
+  );
+};

package/components/Token/Token.style.tsx

@@ -1,46 +1,30 @@
 import { Box, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 
-export const TextSecondaryContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'connected',
-})<{ connected?: boolean }>(({ theme, connected }) => ({
-  borderLeftWidth: connected ? 2 : 0,
-  borderLeftStyle: 'solid',
-  borderColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  margin: connected
-    ? theme.spacing(0.5, 0, 0, 1.875)
-    : theme.spacing(0, 0, 0, 6),
-  padding: connected
-    ? theme.spacing(0, 0, 0, 3.875)
-    : theme.spacing(0, 0, 0, 0),
+export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   flexWrap: 'wrap',
+  flex: 1,
 }));
 
 export const TextSecondary = styled(Typography, {
-  shouldForwardProp: (prop: string) => !['connected', 'dot'].includes(prop),
-})<{ connected?: boolean; dot?: boolean }>(({ theme, connected, dot }) => ({
+  shouldForwardProp: (prop: string) => !['dot'].includes(prop),
+})<{ dot?: boolean }>(({ theme, dot }) => ({
   fontSize: 12,
   lineHeight: 1,
   fontWeight: 500,
   color: dot
     ? alpha(theme.palette.text.secondary, 0.56)
     : theme.palette.text.secondary,
-  marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 
 export const TokenDivider = styled(Box)(({ theme }) => ({
-  height: 12,
+  height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
   borderColor:
     theme.palette.mode === 'light'
       ? theme.palette.grey[300]
       : theme.palette.grey[800],
-  margin: theme.spacing(0, 0, 0, 3.875),
-  padding: theme.spacing(0, 0, 0, 3.875),
 }));

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

@@ -2,18 +2,17 @@ import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useRef } from 'react';
 import {
-  useAccount,
   useChain,
   useDebouncedWatch,
   useTokenBalances,
   useTokenSearch,
 } from '../../hooks';
+import { FormKeyHelper, useFieldValues } from '../../stores';
 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,
@@ -21,11 +20,10 @@ export const TokenList: FC<TokenListProps> = ({
   onClick,
 }) => {
   const parentRef = useRef<HTMLUListElement | null>(null);
-  const { account } = useAccount();
   const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    ['tokenSearchFilter'],
     320,
+    'tokenSearchFilter',
   );
 
   const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
@@ -86,7 +84,6 @@ export const TokenList: FC<TokenListProps> = ({
         chain={chain}
         isLoading={isLoading}
         isBalanceLoading={isBalanceLoading}
-        showBalance={account.isConnected}
         showFeatured={!tokenSearchFilter}
         onClick={handleTokenClick}
       />