@lifi/widget 1.25.1 → 1.26.0

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowForward as ArrowForwardIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { ArrowForward as ArrowForwardIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon } from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useProcessMessage, useRouteExecution } from '../../hooks';
@@ -11,7 +11,10 @@ import { ListItem, ListItemButton } from './ActiveSwaps.style';
 export const ActiveSwapItem = ({ routeId, dense }) => {
     var _a;
     const navigate = useNavigate();
-    const { route, status } = useRouteExecution(routeId, true);
+    const { route, status } = useRouteExecution({
+        routeId,
+        executeInBackground: true,
+    });
     // TODO: replace with ES2023 findLast
     const lastActiveStep = route === null || route === void 0 ? void 0 : route.steps.slice().reverse().find((step) => step.execution);
     const lastActiveProcess = (_a = lastActiveStep === null || lastActiveStep === void 0 ? void 0 : lastActiveStep.execution) === null || _a === void 0 ? void 0 : _a.process.at(-1);
@@ -27,7 +30,7 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
             case 'ACTION_REQUIRED':
                 return _jsx(InfoIcon, { color: "info", fontSize: "small" });
             case 'FAILED':
-                return _jsx(WarningIcon, { color: "error", fontSize: "small" });
+                return _jsx(ErrorIcon, { color: "error", fontSize: "small" });
             default:
                 return (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
         }

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningAmber as WarningIcon } from '@mui/icons-material';
+import { WarningAmberRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Collapse, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';

package/components/Header/NavigationHeader.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowBack as ArrowBackIcon, History as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
+import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon } from '@mui/icons-material';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {

package/components/Header/WalletHeader.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, PowerSettingsNew as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material';
+import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
 import { Avatar, MenuItem } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -6,7 +6,7 @@ export const IconButton = styled(MuiIconButton)(({ theme }) => ({
     borderColor: theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[800],
-    zIndex: 1200,
+    zIndex: 1100,
     padding: theme.spacing(0.5),
     '&:hover': {
         backgroundColor: theme.palette.mode === 'light'

package/components/Step/CircularProgress.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Status } from '@lifi/sdk';
-export declare function CircularProgress({ status }: {
-    status: Status;
+import type { Process } from '@lifi/sdk';
+export declare function CircularProgress({ process }: {
+    process: Process;
 }): JSX.Element;

package/components/Step/CircularProgress.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon } from '@mui/icons-material';
-import { Box } from '@mui/material';
-import { CircularProgress as CircularProgressStyled, CircularProgressPending } from './CircularProgress.style';
-export function CircularProgress({ status }) {
-    return (_jsxs(Box, Object.assign({ sx: {
-            display: 'grid',
-            position: 'relative',
-            placeItems: 'center',
-        } }, { children: [_jsx(CircularProgressStyled, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
+import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon } from '@mui/icons-material';
+import { darken } from '@mui/material/styles';
+import { CircularIcon, CircularProgressPending } from './CircularProgress.style';
+export function CircularProgress({ process }) {
+    return (_jsxs(CircularIcon, Object.assign({ status: process.status, substatus: process.substatus }, { children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
+                } })) : null, process.status === 'DONE' &&
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (_jsx(WarningIcon, { sx: (theme) => ({
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, status === 'FAILED' ? (_jsx(WarningIcon, { color: "error", sx: {
+                    color: darken(theme.palette.warning.main, 0.32),
+                }) })) : process.status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'FAILED' ? (_jsx(ErrorIcon, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null] })));

package/components/Step/CircularProgress.style.d.ts

@@ -1,6 +1,15 @@
-import type { Status } from '@lifi/sdk';
-import type { Theme } from '@mui/material';
-export declare const CircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme> & {
+/// <reference types="react" />
+import type { Status, Substatus } from '@lifi/sdk';
+import { Theme } from '@mui/material';
+export declare const CircularIcon: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: Status;
+    substatus?: Substatus | undefined;
 }, {}, {}>;
 export declare const CircularProgressPending: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/components/Step/CircularProgress.style.js

@@ -1,6 +1,6 @@
-import { CircularProgress as MuiCircularProgress } from '@mui/material';
+import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
 import { circularProgressClasses } from '@mui/material/CircularProgress';
-import { keyframes, styled } from '@mui/material/styles';
+import { alpha, keyframes, styled } from '@mui/material/styles';
 const circleAnimation = keyframes({
     '0%': {
         strokeDashoffset: 129,
@@ -15,22 +15,38 @@ const circleAnimation = keyframes({
         transform: 'rotate(360deg)',
     },
 });
-const getStatusColor = (status, theme) => {
+const getStatusColor = (theme, status, substatus) => {
     switch (status) {
         case 'ACTION_REQUIRED':
-            return theme.palette.info.main;
+            return alpha(theme.palette.info.main, 0.12);
         case 'DONE':
-            return theme.palette.success.main;
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return alpha(theme.palette.warning.main, 0.48);
+            }
+            return alpha(theme.palette.success.main, 0.12);
         case 'FAILED':
-            return theme.palette.error.main;
+            return alpha(theme.palette.error.main, 0.12);
         default:
             return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
     }
 };
-export const CircularProgress = styled(MuiCircularProgress, {
-    shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => ({
-    color: getStatusColor(status, theme),
+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)
+        ? 2
+        : 0,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
 }));
 export const CircularProgressPending = styled(MuiCircularProgress)(({ theme }) => ({
     color: theme.palette.mode === 'light'
@@ -38,7 +54,7 @@ export const CircularProgressPending = styled(MuiCircularProgress)(({ theme }) =
         : theme.palette.primary.light,
     animationDuration: '3s',
     position: 'absolute',
-    left: 0,
+    left: '-2px',
     [`.${circularProgressClasses.circle}`]: {
         animationDuration: '2s',
         animationTimingFunction: 'linear',

package/components/Step/DestinationWalletAddress.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Step } from '@lifi/sdk';
+export declare const DestinationWalletAddress: React.FC<{
+    step: Step;
+    toAddress: string;
+    toAddressLink: string;
+}>;

package/components/Step/DestinationWalletAddress.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinkRounded as LinkIcon, WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+import { LinkButton } from './StepProcess.style';
+export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    var _a;
+    const { t } = useTranslation();
+    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
+    return (_jsx(Box, Object.assign({ px: 2, py: 1 }, { children: _jsxs(Box, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+            } }, { children: [_jsx(CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: _jsx(WalletOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: isDone
+                        ? t('swap.sentToAddress', {
+                            address: toAddress,
+                        })
+                        : t('swap.sendToAddress', {
+                            address: toAddress,
+                        }) })), _jsx(Box, Object.assign({ ml: 2, sx: {
+                        display: 'flex',
+                        flex: 1,
+                        justifyContent: 'flex-end',
+                    } }, { children: _jsx(LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))] })) })));
+};

package/components/Step/GasStepProcess.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Step } from '@lifi/sdk';
+export declare const GasStepProcess: React.FC<{
+    step: Step;
+}>;

package/components/Step/GasStepProcess.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EvStationOutlined as EvStationIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+export const GasStepProcess = ({ step }) => {
+    var _a, _b, _c, _d;
+    const { t } = useTranslation();
+    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
+    return (_jsx(Box, Object.assign({ px: 2, py: 1 }, { children: _jsxs(Box, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+            } }, { children: [_jsx(CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) })), _jsxs(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: [t('format.currency', {
+                            value: (_d = (((_b = step.execution) === null || _b === void 0 ? void 0 : _b.gasAmountUSD) ||
+                                ((_c = step.estimate.gasCosts) === null || _c === void 0 ? void 0 : _c.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)))) !== null && _d !== void 0 ? _d : 0,
+                        }), ' ', isDone ? t('swap.gasFeePaid') : t('swap.gasFeeEstimated')] }))] })) })));
+};

package/components/Step/Step.d.ts

@@ -4,4 +4,5 @@ export declare const Step: React.FC<{
     step: StepType;
     fromToken?: TokenAmount;
     toToken?: TokenAmount;
+    toAddress?: string;
 }>;

package/components/Step/Step.js

@@ -4,19 +4,27 @@ import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
+import { useChains } from '../../hooks';
+import { shortenWalletAddress } from '../../utils';
+import { DestinationWalletAddress } from './DestinationWalletAddress';
+import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
-export const Step = ({ step, fromToken, toToken }) => {
-    var _a, _b;
+export const Step = ({ step, fromToken, toToken, toAddress }) => {
+    var _a, _b, _c;
     const { t } = useTranslation();
+    const { getChainById } = useChains();
     const stepHasError = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
-                if (step.includedSteps.some((step) => step.type === 'cross')) {
-                    return t('swap.stepSwapAndBridge');
+                if (step.includedSteps.every((step) => step.type === 'cross')) {
+                    return t('swap.stepBridge');
                 }
-                return t('swap.stepSwap');
+                if (step.includedSteps.every((step) => step.type === 'swap')) {
+                    return t('swap.stepSwap');
+                }
+                return t('swap.stepSwapAndBridge');
             case 'swap':
                 return t('swap.stepSwap');
             case 'cross':
@@ -25,8 +33,12 @@ export const Step = ({ step, fromToken, toToken }) => {
                 return t('swap.stepSwap');
         }
     };
+    const formattedToAddress = shortenWalletAddress(toAddress);
+    const toAddressLink = toAddress
+        ? `${(_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.metamask.blockExplorerUrls[0]}address/${toAddress}`
+        : undefined;
     return (_jsxs(Card, Object.assign({ variant: stepHasError ? 'error' : 'default' }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
-                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: _jsx(StepTimer, { step: step }) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: _jsx(StepTimer, { step: step }) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_c = step.execution) === null || _c === void 0 ? void 0 : _c.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), _jsx(GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? (_jsx(DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
 };

package/components/Step/StepList.d.ts

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

package/components/Step/StepList.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { StepDivider } from '../../components/StepDivider';
+import { Step } from './Step';
+export const getStepList = (route) => route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
+    var _a, _b, _c, _d, _e;
+    const lastIndex = steps.length - 1;
+    const fromToken = index === 0
+        ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+    const toToken = index === lastIndex
+        ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
+        ? route.toAddress
+        : undefined;
+    return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+});

package/components/Step/StepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link as LinkIcon } from '@mui/icons-material';
+import { LinkRounded as LinkIcon } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
@@ -9,7 +9,7 @@ export const StepProcess = ({ step, process }) => {
     return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
+                } }, { children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',

package/components/Step/index.d.ts

@@ -1 +1,2 @@
 export * from './Step';
+export * from './StepList';

package/components/Step/index.js

@@ -1 +1,2 @@
 export * from './Step';
+export * from './StepList';

package/components/SwapButton/SwapButton.js

@@ -48,5 +48,5 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, en
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, loading: enableLoading && (loading || isGasSufficiencyLoading), loadingPosition: "center", fullWidth: true, ref: ref }, { children: getButtonText() })));
+    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, loading: enableLoading && (loading || isGasSufficiencyLoading), loadingPosition: "center", fullWidth: true, ref: ref }, { children: getButtonText() })));
 });

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -10,5 +10,5 @@ export const SwapRouteNotFoundCard = () => {
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 2.375 }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(RouteIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
+        }, py: 1.625 }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(RouteIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
 };

package/config/sentry.js

@@ -27,7 +27,7 @@ export const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, functio
                     levels: ['error'],
                 }),
             ],
-            sampleRate: 1,
+            sampleRate: 0.25,
             tracesSampleRate: 0.2,
             enabled,
             environment: process.env.NODE_ENV,

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.25.1";
+export declare const version = "1.26.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.25.1';
+export const version = '1.26.0';

package/hooks/useChains.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
+import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig } from '../providers';
 import { useChainOrderStore } from '../stores';
 export const useChains = () => {
     const { disabledChains, chains } = useWidgetConfig();
@@ -33,7 +33,10 @@ export const useChains = () => {
             setValue(SwapFormKey.ToChain, chainOrder[0]);
         }
         return { availableChains, filteredChains };
-    }));
+    }), {
+        refetchInterval: 180000,
+        staleTime: 180000,
+    });
     const getChainById = useCallback((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {

package/hooks/useProcessMessage.js

@@ -10,7 +10,7 @@ export const useProcessMessage = (step, process) => {
     }
     return getProcessMessage(t, getChainById, step, process);
 };
-const processMessages = {
+const processStatusMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
         PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
@@ -38,8 +38,34 @@ const processMessages = {
     },
     TRANSACTION: {},
 };
+const processSubstatusMessages = {
+    PENDING: {
+    // BRIDGE_NOT_AVAILABLE: 'Bridge communication is temporarily unavailable.',
+    // CHAIN_NOT_AVAILABLE: 'RPC communication is temporarily unavailable.',
+    // REFUND_IN_PROGRESS:
+    //   "The refund has been requested and it's being processed",
+    // WAIT_DESTINATION_TRANSACTION:
+    //   'The bridge off-chain logic is being executed. Wait for the transaction to appear on the destination chain.',
+    // WAIT_SOURCE_CONFIRMATIONS:
+    //   'The bridge deposit has been received. The bridge is waiting for more confirmations to start the off-chain logic.',
+    },
+    DONE: {
+        // COMPLETED: 'The transfer is complete.',
+        PARTIAL: (t) => t(`swap.process.receivingChain.partial`),
+        REFUNDED: (t) => t(`swap.process.receivingChain.partial`),
+    },
+    FAILED: {
+    // TODO: should be moved to failed status
+    // NOT_PROCESSABLE_REFUND_NEEDED:
+    //   'The transfer cannot be completed successfully. A refund operation is required.',
+    // UNKNOWN_ERROR:
+    //   'An unexpected error occurred. Please seek assistance in the LI.FI discord server.',
+    },
+    INVALID: {},
+    NOT_FOUND: {},
+};
 export function getProcessMessage(t, getChainById, step, process) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (process.error && process.status === 'FAILED') {
         const getTransactionNotSentMessage = () => {
             var _a, _b;
@@ -52,10 +78,18 @@ export function getProcessMessage(t, getChainById, step, process) {
         let title = '';
         let message = '';
         switch (process.error.code) {
+            case LifiErrorCode.BalanceError:
+                title = t(`swap.error.title.balanceIsTooLow`);
+                message = getTransactionNotSentMessage();
+                break;
             case LifiErrorCode.ChainSwitchError:
                 title = t(`swap.error.title.chainSwitch`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.GasLimitError:
+                title = t(`swap.error.title.gasLimitIsTooLow`);
+                message = getTransactionNotSentMessage();
+                break;
             case LifiErrorCode.TransactionFailed:
                 title = t(`swap.error.title.transactionFailed`);
                 message = t(`swap.error.message.transactionFailed`);
@@ -68,9 +102,13 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.transactionUnprepared`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.TransactionCanceled:
+                title = t(`swap.error.title.transactionCanceled`);
+                message = getTransactionNotSentMessage();
+                break;
             case LifiErrorCode.SlippageError:
-                title = t(`swap.error.title.slippageTooLarge`);
-                message = t(`swap.error.message.slippageTooLarge`);
+                title = t(`swap.error.title.slippageNotMet`);
+                message = t(`swap.error.message.slippageThreshold`);
                 break;
             case LifiErrorCode.TransactionRejected:
                 title = t(`swap.error.title.transactionRejected`);
@@ -80,15 +118,19 @@ export function getProcessMessage(t, getChainById, step, process) {
                     chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
                 });
                 break;
+            case LifiErrorCode.ProviderUnavailable:
             default:
                 title = t(`swap.error.title.unknown`);
                 if (process.txLink) {
                     message = t(`swap.error.message.transactionFailed`);
                 }
+                else {
+                    message = t(`swap.error.message.unknown`);
+                }
                 break;
         }
         return { title, message };
     }
-    const title = (_d = (_c = processMessages[process.type]) === null || _c === void 0 ? void 0 : _c[process.status]) === null || _d === void 0 ? void 0 : _d.call(_c, t);
+    const title = (_e = (_d = (_c = processSubstatusMessages[process.status]) === null || _c === void 0 ? void 0 : _c[process.substatus]) === null || _d === void 0 ? void 0 : _d.call(_c, t)) !== null && _e !== void 0 ? _e : (_g = (_f = processStatusMessages[process.type]) === null || _f === void 0 ? void 0 : _f[process.status]) === null || _g === void 0 ? void 0 : _g.call(_f, t);
     return { title };
 }

package/hooks/useRouteExecution.d.ts

@@ -1,8 +1,14 @@
-import type { Route } from '@lifi/sdk';
-export declare const useRouteExecution: (routeId: string, executeInBackground?: boolean) => {
+import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+interface RouteExecutionProps {
+    routeId: string;
+    executeInBackground?: boolean;
+    onAcceptExchangeRateUpdate?(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
+}
+export declare const useRouteExecution: ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }: RouteExecutionProps) => {
     executeRoute: () => void;
     restartRoute: () => void;
     deleteRoute: () => void;
     route: Route | undefined;
     status: import("../stores").RouteExecutionStatus | undefined;
 };
+export {};

package/hooks/useRouteExecution.js

@@ -11,11 +11,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
-import { getUpdatedProcess, isRouteActive, isRouteDone, isRouteFailed, useRouteExecutionStore, } from '../stores';
+import { getUpdatedProcess, isRouteActive, isRouteDone, isRouteFailed, useRouteExecutionStore } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
-export const useRouteExecution = (routeId, executeInBackground) => {
+export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
     const lifi = useLiFi();
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
@@ -60,6 +60,13 @@ export const useRouteExecution = (routeId, executeInBackground) => {
         }
         return account.signer;
     });
+    const acceptExchangeRateUpdateHook = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onAcceptExchangeRateUpdate) {
+            return false;
+        }
+        const accepted = yield new Promise((resolve) => onAcceptExchangeRateUpdate(resolve, params));
+        return accepted;
+    });
     const executeRouteMutation = useMutation(() => {
         if (!account.signer) {
             throw Error('Account signer not found.');
@@ -70,6 +77,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
+            acceptExchangeRateUpdateHook,
             infiniteApproval: false,
             executeInBackground,
         });
@@ -91,6 +99,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
         return lifi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
+            acceptExchangeRateUpdateHook,
             infiniteApproval: false,
             executeInBackground,
         });
@@ -101,8 +110,8 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     });
     const executeRoute = useCallback(() => {
         executeRouteMutation.mutateAsync(undefined, {
-            onError: () => {
-                console.warn('Execution failed!', routeId);
+            onError: (error) => {
+                console.warn('Execution failed!', routeId, error);
                 // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
@@ -113,8 +122,8 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     }, [executeRouteMutation, routeId]);
     const resumeRoute = useCallback((route) => {
         resumeRouteMutation.mutateAsync(route, {
-            onError: () => {
-                console.warn('Resumed execution failed.', routeId);
+            onError: (error) => {
+                console.warn('Resumed execution failed.', routeId, error);
             },
             onSuccess: (route) => {
                 console.log('Resumed execution successful.', route);