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

package/components/Step/CircularProgress.tsx

@@ -13,14 +13,14 @@ export function CircularProgress({ process }: { process: Process }) {
   return (
     <CircularIcon status={process.status} substatus={process.substatus}>
       {process.status === 'STARTED' || process.status === 'PENDING' ? (
-        <CircularProgressPending size={32} thickness={3} />
+        <CircularProgressPending size={40} />
       ) : null}
       {process.status === 'ACTION_REQUIRED' ? (
         <InfoRoundedIcon
           color="info"
           sx={{
             position: 'absolute',
-            fontSize: '1rem',
+            fontSize: '1.5rem',
           }}
         />
       ) : null}
@@ -29,7 +29,7 @@ export function CircularProgress({ process }: { process: Process }) {
         <WarningRoundedIcon
           sx={(theme) => ({
             position: 'absolute',
-            fontSize: '1rem',
+            fontSize: '1.5rem',
             color: darken(theme.palette.warning.main, 0.32),
           })}
         />
@@ -38,7 +38,7 @@ export function CircularProgress({ process }: { process: Process }) {
           color="success"
           sx={{
             position: 'absolute',
-            fontSize: '1rem',
+            fontSize: '1.5rem',
           }}
         />
       ) : null}
@@ -47,7 +47,7 @@ export function CircularProgress({ process }: { process: Process }) {
           color="error"
           sx={{
             position: 'absolute',
-            fontSize: '1rem',
+            fontSize: '1.5rem',
           }}
         />
       ) : null}

package/components/Step/DestinationWalletAddress.tsx

@@ -26,7 +26,7 @@ export const DestinationWalletAddress: React.FC<{
             color={isDone ? 'success' : 'inherit'}
             sx={{
               position: 'absolute',
-              fontSize: '1rem',
+              fontSize: '1.25rem',
             }}
           />
         </CircularIcon>
@@ -40,8 +40,7 @@ export const DestinationWalletAddress: React.FC<{
               })}
         </Typography>
         <LinkButton
-          size="small"
-          edge="end"
+          size="medium"
           LinkComponent={Link}
           href={toAddressLink}
           target="_blank"

package/components/Step/Step.tsx

@@ -9,7 +9,6 @@ import { useAvailableChains } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { shortenAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
-import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
 
@@ -81,7 +80,6 @@ export const Step: React.FC<{
         {step.execution?.process.map((process, index) => (
           <StepProcess key={index} step={step} process={process} />
         ))}
-        <GasStepProcess step={step} />
         {formattedToAddress && toAddressLink ? (
           <DestinationWalletAddress
             step={step}

package/components/Step/StepProcess.tsx

@@ -29,8 +29,7 @@ export const StepProcess: React.FC<{
         </Typography>
         {process.txLink ? (
           <LinkButton
-            size="small"
-            edge="end"
+            size="medium"
             LinkComponent={Link}
             href={process.txLink}
             target="_blank"
@@ -42,7 +41,7 @@ export const StepProcess: React.FC<{
       </Box>
       {message ? (
         <Typography
-          ml={6}
+          ml={7}
           fontSize={14}
           fontWeight={500}
           color="text.secondary"

package/components/Step/StepTimer.tsx

@@ -13,7 +13,7 @@ export const StepTimer: React.FC<{
   step: LiFiStepExtended;
   hideInProgress?: boolean;
 }> = ({ step, hideInProgress }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [isExpired, setExpired] = useState(false);
   const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
   const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
@@ -52,13 +52,11 @@ export const StepTimer: React.FC<{
   ]);
 
   if (!isExecutionStarted) {
-    return (
-      <>
-        {t('main.estimatedTime', {
-          value: Math.ceil(step.estimate.executionDuration / 60),
-        })}
-      </>
-    );
+    return new Intl.NumberFormat(i18n.language, {
+      style: 'unit',
+      unit: 'minute',
+      unitDisplay: 'narrow',
+    }).format(Math.ceil(step.estimate.executionDuration / 60));
   }
 
   const isTimerExpired = isExpired || (!minutes && !seconds);
@@ -71,10 +69,7 @@ export const StepTimer: React.FC<{
     return null;
   }
 
-  return isTimerExpired ? (
-    <>{t('main.inProgress')}</>
-  ) : (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</>
-  );
+  return isTimerExpired
+    ? t('main.inProgress')
+    : `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
 };

package/components/StepActions/StepActions.style.tsx

@@ -1,11 +1,11 @@
 import {
   Avatar,
+  Box,
   StepConnector as MuiStepConnector,
-  StepContent as MuiStepContent,
   StepLabel as MuiStepLabel,
+  Typography,
 } from '@mui/material';
 import { stepConnectorClasses } from '@mui/material/StepConnector';
-import { stepContentClasses } from '@mui/material/StepContent';
 import { stepLabelClasses } from '@mui/material/StepLabel';
 import { styled } from '@mui/material/styles';
 
@@ -27,7 +27,7 @@ export const StepConnector = styled(MuiStepConnector, {
   shouldForwardProp: (prop) =>
     !['active', 'completed', 'error'].includes(prop as string),
 })(({ theme }) => ({
-  marginLeft: theme.spacing(1.875),
+  marginLeft: theme.spacing(2.375),
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
@@ -43,30 +43,41 @@ export const StepLabel = styled(MuiStepLabel, {
     !['active', 'completed', 'error', 'disabled'].includes(prop as string),
 })(({ theme }) => ({
   padding: 0,
+  alignItems: 'flex-start',
   [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(0.75),
-    paddingRight: theme.spacing(2.75),
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(3),
+  },
+  [`.${stepLabelClasses.labelContainer}`]: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
   },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'inherit',
   },
 }));
 
-export const StepContent = styled(MuiStepContent, {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
-})(({ theme }) => ({
-  borderLeft: `2px solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-  marginLeft: theme.spacing(1.875),
-  paddingLeft: theme.spacing(3.875),
-  [`&.${stepContentClasses.last}`]: {
-    borderLeft: 'none',
-    paddingLeft: theme.spacing(4.1875),
-  },
+export const StepLabelTypography = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.325,
+  color: theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0),
+}));
+
+export const StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !['last'].includes(prop as string),
+})<{ last: boolean }>(({ theme, last }) => ({
+  borderLeft: last
+    ? 'none'
+    : `2px solid ${
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[800]
+      }`,
+  margin: theme.spacing(0, 0, 0, 2.375),
+  paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),
 }));
 
 export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({

package/components/StepActions/StepActions.tsx

@@ -1,4 +1,4 @@
-import type { LiFiStep, Step, StepExtended } from '@lifi/sdk';
+import type { LiFiStep, StepExtended } from '@lifi/sdk';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -27,7 +27,10 @@ import {
   StepConnector,
   StepContent,
   StepLabel,
+  StepLabelTypography,
 } from './StepActions.style';
+import { StepFeeBreakdown } from './StepFeeBreakdown';
+import { StepFees } from './StepFees';
 import type { StepActionsProps, StepDetailsLabelProps } from './types';
 
 export const StepActions: React.FC<StepActionsProps> = ({
@@ -44,8 +47,6 @@ export const StepActions: React.FC<StepActionsProps> = ({
     setCardExpanded((expanded) => !expanded);
   };
 
-  const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-
   // FIXME: step transaction request overrides step tool details, but not included step tool details
   const toolDetails =
     subvariant === 'nft'
@@ -70,20 +71,31 @@ export const StepActions: React.FC<StepActionsProps> = ({
             {toolDetails.name[0]}
           </StepAvatar>
         </Badge>
-        <Typography ml={2} fontSize={18} fontWeight="500" flex={1}>
-          {t(`main.stepDetails`, {
-            tool: toolDetails.name,
-          })}
-        </Typography>
-        {hasCollapsedSteps ? (
+        <Box flex={1}>
+          <Typography fontSize={18} fontWeight="500" lineHeight={1.3334} ml={2}>
+            {t(`main.stepDetails`, {
+              tool: toolDetails.name,
+            })}
+          </Typography>
+          <Collapse
+            timeout={225}
+            in={dense && !cardExpanded}
+            mountOnEnter
+            unmountOnExit
+          >
+            <StepFees ml={2} step={step} />
+          </Collapse>
+        </Box>
+        {dense ? (
           <CardIconButton onClick={handleExpand} size="small">
             {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
           </CardIconButton>
         ) : null}
       </Box>
-      {hasCollapsedSteps ? (
+      {dense ? (
         <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
           <IncludedSteps step={step} subvariant={subvariant} />
+          <StepFeeBreakdown step={step} />
         </Collapse>
       ) : (
         <IncludedSteps step={step} subvariant={subvariant} />
@@ -99,7 +111,6 @@ export const IncludedSteps: React.FC<{
   // eslint-disable-next-line react/no-unstable-nested-components
   const StepIconComponent = ({ icon }: StepIconProps) => {
     const tool = step.includedSteps?.[Number(icon) - 1];
-
     return tool ? (
       <SmallAvatar
         src={tool.toolDetails.logoURI}
@@ -112,21 +123,14 @@ export const IncludedSteps: React.FC<{
       </SmallAvatar>
     ) : null;
   };
-  const StepDetailsLabel =
-    step.tool === 'custom' && subvariant === 'nft'
-      ? CustomStepDetailsLabel
-      : step.type === 'lifi' &&
-          step.includedSteps.some((step) => step.type === 'cross')
-        ? CrossStepDetailsLabel
-        : SwapStepDetailsLabel;
-  return step.includedSteps.length > 1 ? (
-    <Box mt={1.5}>
+  return (
+    <Box mt={1}>
       <Stepper
         orientation="vertical"
         connector={<StepConnector />}
         activeStep={-1}
       >
-        {step.includedSteps.map((step, i) => (
+        {step.includedSteps.map((step, i, includedSteps) => (
           <MuiStep key={step.id} expanded>
             <StepLabel StepIconComponent={StepIconComponent}>
               {step.type === 'custom' && subvariant === 'nft' ? (
@@ -139,24 +143,13 @@ export const IncludedSteps: React.FC<{
                 <SwapStepDetailsLabel step={step} />
               )}
             </StepLabel>
-            <StepContent>
+            <StepContent last={i === includedSteps.length - 1}>
               <StepDetailsContent step={step} subvariant={subvariant} />
             </StepContent>
           </MuiStep>
         ))}
       </Stepper>
     </Box>
-  ) : (
-    <Box ml={6}>
-      <StepDetailsLabel
-        step={step as unknown as Step}
-        subvariant={subvariant === 'nft' ? subvariant : undefined}
-      />
-      <StepDetailsContent
-        step={step as unknown as Step}
-        subvariant={subvariant}
-      />
-    </Box>
   );
 };
 
@@ -195,18 +188,29 @@ export const StepDetailsContent: React.FC<{
   return (
     <Typography
       fontSize={12}
+      lineHeight={1}
       fontWeight="500"
       color="text.secondary"
       alignItems="center"
       display="flex"
     >
+      {!showToAmount ? (
+        <>
+          {formatUnits(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals,
+          )}{' '}
+          {step.action.fromToken.symbol}
+          {' - '}
+        </>
+      ) : null}
       {t('format.number', {
         value: fromAmount,
       })}{' '}
       {step.action.fromToken.symbol}
       {showToAmount ? (
         <>
-          <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5 }} />
+          <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
           {t('format.number', {
             value: formatTokenAmount(
               BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
@@ -215,7 +219,12 @@ export const StepDetailsContent: React.FC<{
           })}{' '}
           {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
         </>
-      ) : null}
+      ) : (
+        ` (${t('format.currency', {
+          value:
+            parseFloat(fromAmount) * parseFloat(step.action.fromToken.priceUSD),
+        })})`
+      )}
     </Typography>
   );
 };
@@ -240,11 +249,11 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
       : step.toolDetails;
 
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <StepLabelTypography>
       {t(`main.${subvariant}StepDetails`, {
         tool: toolDetails.name,
       })}
-    </Typography>
+    </StepLabelTypography>
   );
 };
 
@@ -254,13 +263,13 @@ export const CrossStepDetailsLabel: React.FC<
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <StepLabelTypography>
       {t('main.crossStepDetails', {
         from: getChainById(step.action.fromChainId)?.name,
         to: getChainById(step.action.toChainId)?.name,
         tool: step.toolDetails.name,
       })}
-    </Typography>
+    </StepLabelTypography>
   );
 };
 
@@ -270,12 +279,12 @@ export const SwapStepDetailsLabel: React.FC<
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <StepLabelTypography>
       {t('main.swapStepDetails', {
         chain: getChainById(step.action.fromChainId)?.name,
         tool: step.toolDetails.name,
       })}
-    </Typography>
+    </StepLabelTypography>
   );
 };
 
@@ -284,12 +293,12 @@ export const ProtocolStepDetailsLabel: React.FC<
 > = ({ step }) => {
   const { t } = useTranslation();
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <StepLabelTypography>
       {step.toolDetails.key === 'lifuelProtocol'
         ? t('main.refuelStepDetails', {
             tool: step.toolDetails.name,
           })
         : step.toolDetails.name}
-    </Typography>
+    </StepLabelTypography>
   );
 };

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 mt={0.5} 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={0.5} 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),
 }));