@lifi/widget 3.7.0-beta.6 → 3.7.0-beta.8

package/dist/_esm/components/Skeleton/WidgetSkeleton.style.jsx

@@ -0,0 +1,74 @@
+import { Box, Button, Card as MuiCard, styled } from '@mui/material';
+import { InputCard } from '../../components/Card/InputCard.js';
+export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    color: theme.palette?.text.primary,
+    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
+}));
+export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1, 0, 1, 1.5),
+    gap: theme.spacing(1),
+}));
+export const SkeletonCardRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    marginTop: theme.spacing(1.5),
+}));
+export const SkeletonAmountContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: 40,
+    overflowY: 'hidden',
+});
+export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 2),
+}));
+export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 2),
+}));
+export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    alignItems: 'center',
+}));
+export const SkeletonReviewButton = styled(Button)({
+    height: 48,
+    pointerEvents: 'none',
+});
+export const SkeletonSendToWalletButton = styled(Button)({
+    height: 48,
+    minWidth: 48,
+    width: 48,
+    pointerEvents: 'none',
+});
+export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+}));
+export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.default,
+        backdropFilter: 'blur(12px)',
+        position: 'relative',
+        top: 0,
+        zIndex: 1200,
+        gap: theme.spacing(0.5),
+        padding: theme.spacing(1.5, 3, 1.5, 3),
+        overflow: 'auto',
+    };
+});
+//# sourceMappingURL=WidgetSkeleton.style.jsx.map

package/dist/_esm/components/Skeleton/WidgetSkeleton.style.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSkeleton.style.jsx","sourceRoot":"","sources":["../../../components/Skeleton/WidgetSkeleton.style.tsx"],"names":[],"mappings":"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"}

package/dist/_esm/components/Step/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import type { Process } from '@lifi/sdk';
+export declare function CircularProgress({ process }: {
+    process: Process;
+}): import("react").JSX.Element;

package/dist/_esm/components/Step/CircularProgress.jsx

@@ -0,0 +1,26 @@
+import { Done, ErrorRounded, InfoRounded, WarningRounded, } from '@mui/icons-material';
+import { darken } from '@mui/material';
+import { CircularIcon, CircularProgressPending, } from './CircularProgress.style.js';
+export function CircularProgress({ process }) {
+    return (<CircularIcon status={process.status} substatus={process.substatus}>
+      {process.status === 'STARTED' || process.status === 'PENDING' ? (<CircularProgressPending size={40}/>) : null}
+      {process.status === 'ACTION_REQUIRED' ? (<InfoRounded color="info" sx={{
+                position: 'absolute',
+                fontSize: '1.5rem',
+            }}/>) : null}
+      {process.status === 'DONE' &&
+            (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (<WarningRounded sx={(theme) => ({
+                position: 'absolute',
+                fontSize: '1.5rem',
+                color: darken(theme.palette.warning.main, 0.32),
+            })}/>) : process.status === 'DONE' ? (<Done color="success" sx={{
+                position: 'absolute',
+                fontSize: '1.5rem',
+            }}/>) : null}
+      {process.status === 'FAILED' ? (<ErrorRounded color="error" sx={{
+                position: 'absolute',
+                fontSize: '1.5rem',
+            }}/>) : null}
+    </CircularIcon>);
+}
+//# sourceMappingURL=CircularProgress.jsx.map

package/dist/_esm/components/Step/CircularProgress.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.jsx","sourceRoot":"","sources":["../../../components/Step/CircularProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,cAAc,GACf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EACL,YAAY,EACZ,uBAAuB,GACxB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,EAAwB;IAChE,OAAO,CACL,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CACjE;MAAA,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9D,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CACtC,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,OAAO,CAAC,MAAM,KAAK,iBAAiB,CAAC,CAAC,CAAC,CACtC,CAAC,WAAW,CACV,KAAK,CAAC,MAAM,CACZ,EAAE,CAAC,CAAC;gBACF,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;aACnB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM;YAC1B,CAAC,OAAO,CAAC,SAAS,KAAK,SAAS,IAAI,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CACtE,CAAC,cAAc,CACb,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACd,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;aAChD,CAAC,CAAC,EACH,CACH,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,IAAI,CACH,KAAK,CAAC,SAAS,CACf,EAAE,CAAC,CAAC;gBACF,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;aACnB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,CAAC,YAAY,CACX,KAAK,CAAC,OAAO,CACb,EAAE,CAAC,CAAC;gBACF,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;aACnB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC"}

package/dist/_esm/components/Step/CircularProgress.style.jsx

@@ -0,0 +1,67 @@
+import { Box, CircularProgress as MuiCircularProgress, alpha, circularProgressClasses, keyframes, styled, } from '@mui/material';
+const getStatusColor = (theme, status, substatus) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return alpha(theme.palette.info.main, 0.12);
+        case 'DONE':
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return alpha(theme.palette.warning.main, 0.48);
+            }
+            return alpha(theme.palette.success.main, 0.12);
+        case 'FAILED':
+            return alpha(theme.palette.error.main, 0.12);
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+export const CircularIcon = styled(Box, {
+    shouldForwardProp: (prop) => !['status', 'substatus'].includes(prop),
+})(({ theme, status, substatus }) => ({
+    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? getStatusColor(theme, status, substatus)
+        : theme.palette.background.paper,
+    borderStyle: 'solid',
+    borderColor: getStatusColor(theme, status, substatus),
+    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? 3
+        : 0,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    width: 40,
+    height: 40,
+    borderRadius: '50%',
+}));
+const circleAnimation = keyframes `
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+export const CircularProgressPending = styled(MuiCircularProgress) `
+  color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.primary.main
+    : theme.palette.primary.light};
+  animation-duration: 3s;
+  position: absolute;
+  .${circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`;
+//# sourceMappingURL=CircularProgress.style.jsx.map

package/dist/_esm/components/Step/CircularProgress.style.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.style.jsx","sourceRoot":"","sources":["../../../components/Step/CircularProgress.style.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,GAAG,EACH,gBAAgB,IAAI,mBAAmB,EACvC,KAAK,EACL,uBAAuB,EACvB,SAAS,EACT,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,MAAM,cAAc,GAAG,CACrB,KAAY,EACZ,MAAsB,EACtB,SAAqB,EACrB,EAAE;IACF,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,iBAAiB;YACpB,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAC7C,KAAK,MAAM;YACT,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBACxD,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAChD,CAAC;YACD,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAChD,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAC9C;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IACzE,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IACtC,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC7E,CAAC,CACA,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,eAAe,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAO,CAAC;QACtE,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;QAC1C,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAClC,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;IACrD,WAAW,EAAE,CAAC,CAAC,iBAAiB,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAO,CAAC;QACnE,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,KAAK;CACpB,CAAC,CACH,CAAA;AAED,MAAM,eAAe,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAahC,CAAA;AAED,0FAA0F;AAC1F,kFAAkF;AAClF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAA;WACvD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;IAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;;;KAG9B,uBAAuB,CAAC,MAAM;;;sBAGb,eAAe;;;;;;CAMpC,CAAA"}

package/dist/_esm/components/Step/DestinationWalletAddress.jsx

@@ -0,0 +1,35 @@
+import { LinkRounded, Wallet } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CardIconButton } from '../Card/CardIconButton.js';
+import { CircularIcon } from './CircularProgress.style.js';
+export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    const { t } = useTranslation();
+    const isDone = step.execution?.status === 'DONE';
+    return (<Box px={2} py={1}>
+      <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+        }}>
+        <CircularIcon status={isDone ? 'DONE' : undefined}>
+          <Wallet color={isDone ? 'success' : 'inherit'} sx={{
+            position: 'absolute',
+            fontSize: '1.25rem',
+        }}/>
+        </CircularIcon>
+        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
+          {isDone
+            ? t('main.sentToAddress', {
+                address: toAddress,
+            })
+            : t('main.sendToAddress', {
+                address: toAddress,
+            })}
+        </Typography>
+        <CardIconButton size="medium" LinkComponent={Link} href={toAddressLink} target="_blank" rel="nofollow noreferrer">
+          <LinkRounded />
+        </CardIconButton>
+      </Box>
+    </Box>);
+};
+//# sourceMappingURL=DestinationWalletAddress.jsx.map

package/dist/_esm/components/Step/DestinationWalletAddress.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationWalletAddress.jsx","sourceRoot":"","sources":["../../../components/Step/DestinationWalletAddress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE1D,MAAM,CAAC,MAAM,wBAAwB,GAIhC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE;IAC1C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAChB;MAAA,CAAC,GAAG,CACF,EAAE,CAAC,CAAC;YACF,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB,CAAC,CAEF;QAAA,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAChD;UAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACtC,EAAE,CAAC,CAAC;YACF,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,SAAS;SACpB,CAAC,EAEN;QAAA,EAAE,YAAY,CACd;QAAA,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CACxD;UAAA,CAAC,MAAM;YACL,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB,CAAC;YACJ,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB,CAAC,CACR;QAAA,EAAE,UAAU,CACZ;QAAA,CAAC,cAAc,CACb,IAAI,CAAC,QAAQ,CACb,aAAa,CAAC,CAAC,IAAI,CAAC,CACpB,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,MAAM,CAAC,QAAQ,CACf,GAAG,CAAC,qBAAqB,CAEzB;UAAA,CAAC,WAAW,CAAC,AAAD,EACd;QAAA,EAAE,cAAc,CAClB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/_esm/components/Step/Step.jsx

@@ -0,0 +1,74 @@
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../../components/Card/Card.js';
+import { CardTitle } from '../../components/Card/CardTitle.js';
+import { StepActions } from '../../components/StepActions/StepActions.js';
+import { Token } from '../../components/Token/Token.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { DestinationWalletAddress } from './DestinationWalletAddress.js';
+import { StepProcess } from './StepProcess.js';
+import { StepTimer } from './StepTimer.js';
+export const Step = ({ step, fromToken, toToken, impactToken, toAddress }) => {
+    const { t } = useTranslation();
+    const { subvariant, subvariantOptions } = useWidgetConfig();
+    const { getAddressLink } = useExplorer();
+    const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
+    const getCardTitle = () => {
+        switch (step.type) {
+            case 'lifi': {
+                const hasBridgeStep = step.includedSteps.some((step) => step.type === 'cross');
+                const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
+                if (hasBridgeStep && hasSwapStep) {
+                    return subvariant === 'custom'
+                        ? subvariantOptions?.custom === 'deposit'
+                            ? t('main.stepBridgeAndDeposit')
+                            : t('main.stepBridgeAndBuy')
+                        : t('main.stepSwapAndBridge');
+                }
+                if (hasBridgeStep) {
+                    return subvariant === 'custom'
+                        ? subvariantOptions?.custom === 'deposit'
+                            ? t('main.stepBridgeAndDeposit')
+                            : t('main.stepBridgeAndBuy')
+                        : t('main.stepBridge');
+                }
+                return subvariant === 'custom'
+                    ? subvariantOptions?.custom === 'deposit'
+                        ? t('main.stepSwapAndDeposit')
+                        : t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+            }
+            default:
+                return subvariant === 'custom'
+                    ? subvariantOptions?.custom === 'deposit'
+                        ? t('main.stepSwapAndDeposit')
+                        : t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+        }
+    };
+    const formattedToAddress = shortenAddress(toAddress);
+    const toAddressLink = toAddress
+        ? getAddressLink(toAddress, step.action.toChainId)
+        : undefined;
+    return (<Card type={stepHasError ? 'error' : 'default'}>
+      <Box sx={{
+            display: 'flex',
+            flex: 1,
+        }}>
+        <CardTitle flex={1}>{getCardTitle()}</CardTitle>
+        <CardTitle sx={{ fontWeight: 600 }}>
+          <StepTimer step={step}/>
+        </CardTitle>
+      </Box>
+      <Box py={1}>
+        {fromToken ? <Token token={fromToken} px={2} py={1}/> : null}
+        <StepActions step={step} px={2} py={1} dense/>
+        {step.execution?.process.map((process, index) => (<StepProcess key={index} step={step} process={process}/>))}
+        {formattedToAddress && toAddressLink ? (<DestinationWalletAddress step={step} toAddress={formattedToAddress} toAddressLink={toAddressLink}/>) : null}
+        {toToken ? (<Token token={toToken} impactToken={impactToken} enableImpactTokenTooltip px={2} py={1}/>) : null}
+      </Box>
+    </Card>);
+};
+//# sourceMappingURL=Step.jsx.map

package/dist/_esm/components/Step/Step.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.jsx","sourceRoot":"","sources":["../../../components/Step/Step.tsx"],"names":[],"mappings":"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"}

package/dist/_esm/components/Step/StepList.d.ts

@@ -0,0 +1,3 @@
+import type { RouteExtended } from '@lifi/sdk';
+import type { WidgetSubvariant } from '../../types/widget.js';
+export declare const getStepList: (route?: RouteExtended, subvariant?: WidgetSubvariant) => import("react").JSX.Element[] | undefined;

package/dist/_esm/components/Step/StepList.jsx

@@ -0,0 +1,36 @@
+import { Fragment } from 'react';
+import { StepDivider } from '../../components/StepDivider/StepDivider.js';
+import { Step } from './Step.js';
+export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
+    const lastIndex = steps.length - 1;
+    const fromToken = index === 0
+        ? {
+            ...step.action.fromToken,
+            amount: BigInt(step.action.fromAmount),
+        }
+        : undefined;
+    let toToken;
+    let impactToken;
+    if (index === lastIndex) {
+        toToken = {
+            ...(step.execution?.toToken ?? step.action.toToken),
+            amount: step.execution?.toAmount
+                ? BigInt(step.execution.toAmount)
+                : subvariant === 'custom'
+                    ? BigInt(route.toAmount)
+                    : BigInt(step.estimate.toAmount),
+        };
+        impactToken = {
+            ...steps[0].action.fromToken,
+            amount: BigInt(steps[0].action.fromAmount),
+        };
+    }
+    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
+        ? route.toAddress
+        : undefined;
+    return (<Fragment key={step.id}>
+        <Step step={step} fromToken={fromToken} toToken={toToken} impactToken={impactToken} toAddress={toAddress}/>
+        {steps.length > 1 && index !== steps.length - 1 ? (<StepDivider />) : null}
+      </Fragment>);
+});
+//# sourceMappingURL=StepList.jsx.map

package/dist/_esm/components/Step/StepList.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepList.jsx","sourceRoot":"","sources":["../../../components/Step/StepList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AAEzE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,KAAqB,EACrB,UAA6B,EAC7B,EAAE,CACF,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACtC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAClC,MAAM,SAAS,GACb,KAAK,KAAK,CAAC;QACT,CAAC,CAAC;YACE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;YACxB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;SACvC;QACH,CAAC,CAAC,SAAS,CAAA;IACf,IAAI,OAAgC,CAAA;IACpC,IAAI,WAAoC,CAAA;IACxC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,GAAG;YACR,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;YACnD,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ;gBAC9B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;gBACjC,CAAC,CAAC,UAAU,KAAK,QAAQ;oBACvB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACxB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACrC,CAAA;QACD,WAAW,GAAG;YACZ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS;YAC5B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;SAC3C,CAAA;IACH,CAAC;IACD,MAAM,SAAS,GACb,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,SAAS;QAC1D,CAAC,CAAC,KAAK,CAAC,SAAS;QACjB,CAAC,CAAC,SAAS,CAAA;IACf,OAAO,CACL,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACrB;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,EAEvB;QAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChD,CAAC,WAAW,CAAC,AAAD,EAAG,CAChB,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,QAAQ,CAAC,CACZ,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/_esm/components/Step/StepProcess.jsx

@@ -0,0 +1,36 @@
+import { OpenInNewRounded } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
+import { useExplorer } from '../../hooks/useExplorer.js';
+import { useProcessMessage } from '../../hooks/useProcessMessage.js';
+import { CardIconButton } from '../Card/CardIconButton.js';
+import { CircularProgress } from './CircularProgress.js';
+export const StepProcess = ({ step, process }) => {
+    const { title, message } = useProcessMessage(step, process);
+    const { getTransactionLink } = useExplorer();
+    return (<Box px={2} py={1}>
+      <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+        }}>
+        <CircularProgress process={process}/>
+        <Typography mx={2} flex={1} fontSize={14} fontWeight={process.error ? 600 : 400}>
+          {title}
+        </Typography>
+        {process.txHash || process.txLink ? (<CardIconButton size="small" LinkComponent={Link} href={process.txHash
+                ? getTransactionLink({
+                    txHash: process.txHash,
+                    chain: process.chainId,
+                })
+                : getTransactionLink({
+                    txLink: process.txLink,
+                    chain: process.chainId,
+                })} target="_blank" rel="nofollow noreferrer">
+            <OpenInNewRounded fontSize="inherit"/>
+          </CardIconButton>) : null}
+      </Box>
+      {message ? (<Typography ml={7} fontSize={14} fontWeight={500} color="text.secondary">
+          {message}
+        </Typography>) : null}
+    </Box>);
+};
+//# sourceMappingURL=StepProcess.jsx.map

package/dist/_esm/components/Step/StepProcess.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProcess.jsx","sourceRoot":"","sources":["../../../components/Step/StepProcess.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,MAAM,WAAW,GAGnB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACzB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IAC3D,MAAM,EAAE,kBAAkB,EAAE,GAAG,WAAW,EAAE,CAAA;IAE5C,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAChB;MAAA,CAAC,GAAG,CACF,EAAE,CAAC,CAAC;YACF,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB,CAAC,CAEF;QAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EACnC;QAAA,CAAC,UAAU,CACT,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,IAAI,CAAC,CAAC,CAAC,CAAC,CACR,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb,UAAU,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAEtC;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,UAAU,CACZ;QAAA,CAAC,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAClC,CAAC,cAAc,CACb,IAAI,CAAC,OAAO,CACZ,aAAa,CAAC,CAAC,IAAI,CAAC,CACpB,IAAI,CAAC,CACH,OAAO,CAAC,MAAM;gBACZ,CAAC,CAAC,kBAAkB,CAAC;oBACjB,MAAM,EAAE,OAAO,CAAC,MAAM;oBACtB,KAAK,EAAE,OAAO,CAAC,OAAO;iBACvB,CAAC;gBACJ,CAAC,CAAC,kBAAkB,CAAC;oBACjB,MAAM,EAAE,OAAO,CAAC,MAAO;oBACvB,KAAK,EAAE,OAAO,CAAC,OAAO;iBACvB,CACP,CAAC,CACD,MAAM,CAAC,QAAQ,CACf,GAAG,CAAC,qBAAqB,CAEzB;YAAA,CAAC,gBAAgB,CAAC,QAAQ,CAAC,SAAS,EACtC;UAAA,EAAE,cAAc,CAAC,CAClB,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,UAAU,CACT,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb,UAAU,CAAC,CAAC,GAAG,CAAC,CAChB,KAAK,CAAC,gBAAgB,CAEtB;UAAA,CAAC,OAAO,CACV;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/_esm/components/Step/StepTimer.jsx

@@ -0,0 +1,90 @@
+import { AccessTimeFilled } from '@mui/icons-material';
+import { Box, Tooltip } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTimer } from '../../hooks/timer/useTimer.js';
+import { IconTypography } from '../IconTypography.js';
+const getExecutionProcess = (step) => step.execution?.process.findLast((process) => process.type === 'SWAP' ||
+    process.type === 'CROSS_CHAIN' ||
+    process.type === 'RECEIVING_CHAIN');
+const getExpiryTimestamp = (step) => new Date((getExecutionProcess(step)?.startedAt ?? Date.now()) +
+    step.estimate.executionDuration * 1000);
+export const StepTimer = ({ step, hideInProgress }) => {
+    const { t, i18n } = useTranslation();
+    const [isExpired, setExpired] = useState(false);
+    const [isExecutionStarted, setExecutionStarted] = useState(() => !!getExecutionProcess(step));
+    const [expiryTimestamp, setExpiryTimestamp] = useState(() => getExpiryTimestamp(step));
+    const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
+        autoStart: false,
+        expiryTimestamp,
+        onExpire: () => setExpired(true),
+    });
+    useEffect(() => {
+        const executionProcess = getExecutionProcess(step);
+        if (!executionProcess) {
+            return;
+        }
+        const shouldRestart = executionProcess.status === 'FAILED';
+        const shouldPause = executionProcess.status === 'ACTION_REQUIRED';
+        const shouldStart = executionProcess.status === 'STARTED' ||
+            executionProcess.status === 'PENDING';
+        const shouldResume = executionProcess.status === 'PENDING';
+        if (isExecutionStarted && shouldRestart) {
+            setExecutionStarted(false);
+            setExpired(false);
+            return;
+        }
+        if (isExecutionStarted && isExpired) {
+            return;
+        }
+        if (!isExecutionStarted && shouldStart) {
+            const expiryTimestamp = getExpiryTimestamp(step);
+            setExecutionStarted(true);
+            setExpired(false);
+            setExpiryTimestamp(expiryTimestamp);
+            restart(expiryTimestamp);
+            return;
+        }
+        if (isRunning && shouldPause) {
+            pause();
+        }
+        else if (!isRunning && shouldResume) {
+            resume();
+        }
+    }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step]);
+    if (!isExecutionStarted) {
+        const showSeconds = step.estimate.executionDuration < 60;
+        const duration = showSeconds
+            ? Math.floor(step.estimate.executionDuration)
+            : Math.floor(step.estimate.executionDuration / 60);
+        return (<Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
+        <Box component="span" display="flex" alignItems="center">
+          <IconTypography component="span" mr={0.5} fontSize={16}>
+            <AccessTimeFilled fontSize="inherit"/>
+          </IconTypography>
+          <Box component="span">
+            {duration.toLocaleString(i18n.language, {
+                style: 'unit',
+                unit: showSeconds ? 'second' : 'minute',
+                unitDisplay: 'narrow',
+            })}
+          </Box>
+        </Box>
+      </Tooltip>);
+    }
+    const isTimerExpired = isExpired || (!minutes && !seconds);
+    if (step.execution?.status === 'DONE' ||
+        step.execution?.status === 'FAILED' ||
+        (isTimerExpired && hideInProgress)) {
+        return null;
+    }
+    return isTimerExpired ? (t('main.inProgress')) : (<Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
+      <Box component="span" display="flex" alignItems="center">
+        <IconTypography component="span" mr={0.5} fontSize={16}>
+          <AccessTimeFilled fontSize="inherit"/>
+        </IconTypography>
+        <Box component="span" sx={{ fontVariantNumeric: 'tabular-nums', cursor: 'help' }}>{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</Box>
+      </Box>
+    </Tooltip>);
+};
+//# sourceMappingURL=StepTimer.jsx.map

package/dist/_esm/components/Step/StepTimer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTimer.jsx","sourceRoot":"","sources":["../../../components/Step/StepTimer.tsx"],"names":[],"mappings":"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"}