fix: update step types

packages/widget/src/components/PoweredBy/PoweredBy.style.ts

@@ -1,11 +1,15 @@
+import type { StyledComponent } from '@emotion/styled';
+import type { LinkProps } from '@mui/material';
 import { Link as MuiLink } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const Link = styled(MuiLink)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  border: 'none',
-  ':hover': {
-    color: theme.palette.primary.main,
-  },
-}));
+export const Link: StyledComponent<LinkProps> = styled(MuiLink)(
+  ({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    ':hover': {
+      color: theme.palette.primary.main,
+    },
+  }),
+);

packages/widget/src/components/Step/DestinationWalletAddress.tsx

@@ -1,4 +1,4 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
 import WalletIcon from '@mui/icons-material/Wallet';
 import { Box, Link, Typography } from '@mui/material';
@@ -7,7 +7,7 @@ import { CircularIcon } from './CircularProgress.style';
 import { LinkButton } from './StepProcess.style';
 
 export const DestinationWalletAddress: React.FC<{
-  step: Step;
+  step: LifiStep;
   toAddress: string;
   toAddressLink: string;
 }> = ({ step, toAddress, toAddressLink }) => {

packages/widget/src/components/Step/GasStepProcess.tsx

@@ -1,11 +1,11 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 import EvStationIcon from '@mui/icons-material/EvStation';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
 
 export const GasStepProcess: React.FC<{
-  step: Step;
+  step: LifiStep;
 }> = ({ step }) => {
   const { t } = useTranslation();
   const isDone = step.execution?.status === 'DONE';

packages/widget/src/components/Step/Step.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import type { Step as StepType, TokenAmount } from '@lifi/sdk';
+import type { LifiStep, TokenAmount } from '@lifi/sdk';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
@@ -13,7 +13,7 @@ import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
 
 export const Step: React.FC<{
-  step: StepType;
+  step: LifiStep;
   fromToken?: TokenAmount;
   toToken?: TokenAmount;
   toAddress?: string;
@@ -41,10 +41,6 @@ export const Step: React.FC<{
           return t('swap.stepBridge');
         }
         return t('swap.stepSwap');
-      case 'swap':
-        return t('swap.stepSwap');
-      case 'cross':
-        return t('swap.stepBridge');
       default:
         return t('swap.stepSwap');
     }

packages/widget/src/components/Step/StepProcess.style.tsx

@@ -1,9 +1,10 @@
+import type { StyledComponent } from '@emotion/styled';
 import type { IconButtonProps, LinkProps } from '@mui/material';
 import { IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const LinkButton = styled(IconButton)<IconButtonProps & LinkProps>(
-  ({ theme }) => ({
-    padding: theme.spacing(0.5),
-  }),
-);
+export const LinkButton: StyledComponent<IconButtonProps & LinkProps> = styled(
+  IconButton,
+)<IconButtonProps & LinkProps>(({ theme }) => ({
+  padding: theme.spacing(0.5),
+}));

packages/widget/src/components/Step/StepProcess.tsx

@@ -1,12 +1,12 @@
-import type { Process, Step } from '@lifi/sdk';
+import type { LifiStep, Process } from '@lifi/sdk';
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
 import { LinkButton } from './StepProcess.style';
 
 export const StepProcess: React.FC<{
-  step: Step;
+  step: LifiStep;
   process: Process;
 }> = ({ step, process }) => {
   const { title, message } = useProcessMessage(step, process);

packages/widget/src/components/Step/StepTimer.tsx

@@ -1,18 +1,18 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTimer } from 'react-timer-hook';
 
-const getExpiryTimestamp = (step: Step) =>
+const getExpiryTimestamp = (step: LifiStep) =>
   new Date(
     (step.execution?.process[0]?.startedAt ?? Date.now()) +
       step.estimate.executionDuration * 1000,
   );
 
-export const StepTimer: React.FC<{ step: Step; hideInProgress?: boolean }> = ({
-  step,
-  hideInProgress,
-}) => {
+export const StepTimer: React.FC<{
+  step: LifiStep;
+  hideInProgress?: boolean;
+}> = ({ step, hideInProgress }) => {
   const { t } = useTranslation();
   const [isExpired, setExpired] = useState(false);
   const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);

packages/widget/src/components/StepActions/StepActions.tsx

@@ -46,7 +46,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 
   const customStep =
     variant === 'nft'
-      ? (step as LifiStep).includedSteps?.find((step) => step.type === 'custom')
+      ? step.includedSteps?.find((step) => step.type === 'custom')
       : undefined;
 
   const hasCollapsedSteps =
@@ -107,12 +107,12 @@ export const StepActions: React.FC<StepActionsProps> = ({
 };
 
 export const IncludedSteps: React.FC<{
-  step: Step;
+  step: LifiStep;
   variant?: WidgetVariant;
 }> = ({ step, variant }) => {
   // eslint-disable-next-line react/no-unstable-nested-components
   const StepIconComponent = ({ icon }: StepIconProps) => {
-    const tool = (step as LifiStep).includedSteps?.[Number(icon) - 1];
+    const tool = step.includedSteps?.[Number(icon) - 1];
 
     return tool ? (
       <SmallAvatar
@@ -129,12 +129,11 @@ export const IncludedSteps: React.FC<{
   const StepDetailsLabel =
     step.tool === 'custom' && variant === 'nft'
       ? CustomStepDetailsLabel
-      : step.type === 'cross' ||
-        (step.type === 'lifi' &&
-          step.includedSteps.some((step) => step.type === 'cross'))
+      : step.type === 'lifi' &&
+        step.includedSteps.some((step) => step.type === 'cross')
       ? CrossStepDetailsLabel
       : SwapStepDetailsLabel;
-  return (step as LifiStep).includedSteps.length > 1 ? (
+  return step.includedSteps.length > 1 ? (
     <Box mt={1.5}>
       <Stepper
         orientation="vertical"
@@ -146,7 +145,7 @@ export const IncludedSteps: React.FC<{
             <StepLabel StepIconComponent={StepIconComponent}>
               {step.type === 'custom' && variant === 'nft' ? (
                 <CustomStepDetailsLabel step={step} variant={variant} />
-              ) : step.type === 'cross' || step.type === 'lifi' ? (
+              ) : step.type === 'cross' ? (
                 <CrossStepDetailsLabel step={step} />
               ) : step.type === 'protocol' ? (
                 <ProtocolStepDetailsLabel step={step} />
@@ -164,10 +163,10 @@ export const IncludedSteps: React.FC<{
   ) : (
     <Box ml={6}>
       <StepDetailsLabel
-        step={step}
+        step={step as unknown as Step}
         variant={variant === 'nft' ? variant : undefined}
       />
-      <StepDetailsContent step={step} variant={variant} />
+      <StepDetailsContent step={step as unknown as Step} variant={variant} />
     </Box>
   );
 };

packages/widget/src/components/StepActions/types.ts

@@ -1,9 +1,9 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { WidgetVariant } from '../../types';
 
 export interface StepActionsProps extends BoxProps {
-  step: Step;
+  step: LifiStep;
   dense?: boolean;
 }
 

packages/widget/src/components/Token/Token.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import type { Step, TokenAmount } from '@lifi/sdk';
+import type { LifiStep, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { Box, Skeleton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { TextSecondary, TextSecondaryContainer } from './Token.style';
 interface TokenProps {
   token?: TokenAmount;
   connected?: boolean;
-  step?: Step;
+  step?: LifiStep;
   disableDescription?: boolean;
   isLoading?: boolean;
 }

packages/widget/src/hooks/useProcessMessage.ts

@@ -1,10 +1,10 @@
 import type {
   EVMChain,
+  LifiStep,
   Process,
   ProcessType,
   Status,
   StatusMessage,
-  Step,
   Substatus,
 } from '@lifi/sdk';
 import { LifiErrorCode } from '@lifi/sdk';
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 
-export const useProcessMessage = (step?: Step, process?: Process) => {
+export const useProcessMessage = (step?: LifiStep, process?: Process) => {
   const { t } = useTranslation();
   const { getChainById } = useChains();
   if (!step || !process) {
@@ -87,7 +87,7 @@ const processSubstatusMessages: Record<
 export function getProcessMessage(
   t: TFunction,
   getChainById: (chainId: number) => EVMChain | undefined,
-  step: Step,
+  step: LifiStep,
   process: Process,
 ): {
   title?: string;

packages/widget/src/hooks/useSwapRoutes.ts

@@ -1,5 +1,5 @@
 import { isAddress } from '@ethersproject/address';
-import type { LifiStep, Route, RoutesResponse, Token } from '@lifi/sdk';
+import type { Route, RoutesResponse, Token } from '@lifi/sdk';
 import { LifiErrorCode } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
@@ -187,7 +187,7 @@ export const useSwapRoutes = ({
             toToken: toToken!,
             toAddress: toAddress,
             gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
-            steps: [contractCallQuote as LifiStep],
+            steps: [contractCallQuote],
             insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
           };
 

packages/widget/src/pages/MainPage/MainPage.tsx

@@ -26,14 +26,12 @@ export const MainPage: React.FC = () => {
       <SelectChainAndToken mt={1} mx={3} mb={2} />
       {!nft ? <SwapInput formType="from" mx={3} mb={2} /> : null}
       {!expandable ? <SwapRoutes mx={3} mb={2} /> : null}
+      <SendToWallet mx={3} mb={2} />
       <GasRefuelMessage mx={3} mb={2} />
       <MainGasMessage mx={3} mb={2} />
-      <Box mx={3} mb={1}>
-        <SendToWallet mb={2} />
-        <Box sx={{ display: 'flex' }}>
-          <MainSwapButton />
-          <SendToWalletButton />
-        </Box>
+      <Box display="flex" mx={3} mb={1}>
+        <MainSwapButton />
+        <SendToWalletButton />
       </Box>
     </FormContainer>
   );