@lifi/widget 1.25.0 → 1.26.0

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -14,7 +14,10 @@ const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
 const ActiveSwapItem = ({ routeId, dense }) => {
     var _a;
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { route, status } = (0, hooks_1.useRouteExecution)(routeId, true);
+    const { route, status } = (0, hooks_1.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);
@@ -28,9 +31,9 @@ const ActiveSwapItem = ({ routeId, dense }) => {
     const getStatusComponent = () => {
         switch (lastActiveProcess === null || lastActiveProcess === void 0 ? void 0 : lastActiveProcess.status) {
             case 'ACTION_REQUIRED':
-                return (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "info", fontSize: "small" });
+                return (0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", fontSize: "small" });
             case 'FAILED':
-                return (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", fontSize: "small" });
+                return (0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", fontSize: "small" });
             default:
                 return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
         }

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -25,7 +25,7 @@ const GasSufficiencyMessage = (_a) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const recommendedRoute = (0, stores_1.useRecommendedRouteStore)((state) => state.recommendedRoute);
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route !== null && route !== void 0 ? route : recommendedRoute);
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: Boolean(insufficientFunds || (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)), unmountOnExit: true, mountOnEnter: true, appear: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: Boolean(insufficientFunds || (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)), unmountOnExit: true, mountOnEnter: true, appear: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmberRounded, { sx: {
                             marginTop: 2,
                             marginLeft: 2,
                         } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds

package/cjs/components/Header/NavigationHeader.js

@@ -51,7 +51,7 @@ const NavigationHeader = () => {
                 return variant !== 'refuel' ? t(`header.swap`) : t(`header.gas`);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
                                             marginRight: -1.25,
                                         } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
 };

package/cjs/components/Header/WalletHeader.js

@@ -66,5 +66,5 @@ const ConnectedButton = () => {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, Object.assign({ endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain === null || chain === void 0 ? void 0 : chain.logoURI, alt: chain === null || chain === void 0 ? void 0 : chain.key, sx: { width: 24, height: 24 } }, { children: chain === null || chain === void 0 ? void 0 : chain.name[0] })), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick }, { children: walletAddress })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNew, {}), t(`button.disconnectWallet`)] }))] }))] }));
+                }, onClick: handleClick }, { children: walletAddress })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), t(`button.disconnectWallet`)] }))] }))] }));
 };

package/cjs/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -9,7 +9,7 @@ exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ 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/cjs/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/cjs/components/Step/CircularProgress.js

@@ -3,20 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircularProgress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
 const CircularProgress_style_1 = require("./CircularProgress.style");
-function CircularProgress({ status }) {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
-            display: 'grid',
-            position: 'relative',
-            placeItems: 'center',
-        } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgress, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "info", sx: {
+function CircularProgress({ process }) {
+    return ((0, jsx_runtime_1.jsxs)(CircularProgress_style_1.CircularIcon, Object.assign({ status: process.status, substatus: process.substatus }, { children: [process.status === 'STARTED' || process.status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, status === 'DONE' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: {
+                } })) : null, process.status === 'DONE' &&
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { sx: (theme) => ({
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: {
+                    color: (0, styles_1.darken)(theme.palette.warning.main, 0.32),
+                }) })) : process.status === 'DONE' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null] })));

package/cjs/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/cjs/components/Step/CircularProgress.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgressPending = exports.CircularProgress = void 0;
+exports.CircularProgressPending = exports.CircularIcon = void 0;
 const material_1 = require("@mui/material");
 const CircularProgress_1 = require("@mui/material/CircularProgress");
 const styles_1 = require("@mui/material/styles");
@@ -18,22 +18,38 @@ const circleAnimation = (0, styles_1.keyframes)({
         transform: 'rotate(360deg)',
     },
 });
-const getStatusColor = (status, theme) => {
+const getStatusColor = (theme, status, substatus) => {
     switch (status) {
         case 'ACTION_REQUIRED':
-            return theme.palette.info.main;
+            return (0, styles_1.alpha)(theme.palette.info.main, 0.12);
         case 'DONE':
-            return theme.palette.success.main;
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return (0, styles_1.alpha)(theme.palette.warning.main, 0.48);
+            }
+            return (0, styles_1.alpha)(theme.palette.success.main, 0.12);
         case 'FAILED':
-            return theme.palette.error.main;
+            return (0, styles_1.alpha)(theme.palette.error.main, 0.12);
         default:
             return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
     }
 };
-exports.CircularProgress = (0, styles_1.styled)(material_1.CircularProgress, {
-    shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => ({
-    color: getStatusColor(status, theme),
+exports.CircularIcon = (0, styles_1.styled)(material_1.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%',
 }));
 exports.CircularProgressPending = (0, styles_1.styled)(material_1.CircularProgress)(({ theme }) => ({
     color: theme.palette.mode === 'light'
@@ -41,7 +57,7 @@ exports.CircularProgressPending = (0, styles_1.styled)(material_1.CircularProgre
         : theme.palette.primary.light,
     animationDuration: '3s',
     position: 'absolute',
-    left: 0,
+    left: '-2px',
     [`.${CircularProgress_1.circularProgressClasses.circle}`]: {
         animationDuration: '2s',
         animationTimingFunction: 'linear',

package/cjs/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/cjs/components/Step/DestinationWalletAddress.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DestinationWalletAddress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const CircularProgress_style_1 = require("./CircularProgress.style");
+const StepProcess_style_1 = require("./StepProcess.style");
+const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+            } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: 400 }, { children: isDone
+                        ? t('swap.sentToAddress', {
+                            address: toAddress,
+                        })
+                        : t('swap.sendToAddress', {
+                            address: toAddress,
+                        }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
+                        display: 'flex',
+                        flex: 1,
+                        justifyContent: 'flex-end',
+                    } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) })) }))] })) })));
+};
+exports.DestinationWalletAddress = DestinationWalletAddress;

package/cjs/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/cjs/components/Step/GasStepProcess.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasStepProcess = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const CircularProgress_style_1 = require("./CircularProgress.style");
+const GasStepProcess = ({ step }) => {
+    var _a, _b, _c, _d;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isDone = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+            } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, Object.assign({ status: isDone ? 'DONE' : 'NOT_STARTED' }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.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')] }))] })) })));
+};
+exports.GasStepProcess = GasStepProcess;

package/cjs/components/Step/Step.d.ts

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

package/cjs/components/Step/Step.js

@@ -7,19 +7,27 @@ const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
 const StepActions_1 = require("../../components/StepActions");
 const Token_1 = require("../../components/Token");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const DestinationWalletAddress_1 = require("./DestinationWalletAddress");
+const GasStepProcess_1 = require("./GasStepProcess");
 const StepProcess_1 = require("./StepProcess");
 const StepTimer_1 = require("./StepTimer");
-const Step = ({ step, fromToken, toToken }) => {
-    var _a, _b;
+const Step = ({ step, fromToken, toToken, toAddress }) => {
+    var _a, _b, _c;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.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':
@@ -28,9 +36,13 @@ const Step = ({ step, fromToken, toToken }) => {
                 return t('swap.stepSwap');
         }
     };
+    const formattedToAddress = (0, utils_1.shortenWalletAddress)(toAddress);
+    const toAddressLink = toAddress
+        ? `${(_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.metamask.blockExplorerUrls[0]}address/${toAddress}`
+        : undefined;
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: stepHasError ? 'error' : 'default' }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
-                } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+                } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), (_c = step.execution) === null || _c === void 0 ? void 0 : _c.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), (0, jsx_runtime_1.jsx)(GasStepProcess_1.GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? ((0, jsx_runtime_1.jsx)(DestinationWalletAddress_1.DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
 };
 exports.Step = Step;

package/cjs/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/cjs/components/Step/StepList.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStepList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const StepDivider_1 = require("../../components/StepDivider");
+const Step_1 = require("./Step");
+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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+});
+exports.getStepList = getStepList;

package/cjs/components/Step/StepProcess.js

@@ -12,10 +12,10 @@ const StepProcess = ({ step, process }) => {
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { status: process.status }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
+                } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Link, {}) })) }))) : null] })), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+                        } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) })) }))) : null] })), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
 };
 exports.StepProcess = StepProcess;

package/cjs/components/Step/index.d.ts

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

package/cjs/components/Step/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Step"), exports);
+__exportStar(require("./StepList"), exports);

package/cjs/components/SwapButton/SwapButton.js

@@ -51,5 +51,5 @@ exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, dis
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(lab_1.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 ((0, jsx_runtime_1.jsx)(lab_1.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/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -13,6 +13,6 @@ const SwapRouteNotFoundCard = () => {
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 2.375 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
+        }, py: 1.625 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
 };
 exports.SwapRouteNotFoundCard = SwapRouteNotFoundCard;

package/cjs/components/TokenList/useTokenSelect.js

@@ -12,6 +12,12 @@ const useTokenSelect = (formType, onClick) => {
         onChange(tokenAddress);
         onBlur();
         const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(providers_1.SwapFormKeyHelper.getChainKey(formType));
+        // Set chain again to trigger URL builder update
+        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldDirty: true,
+            shouldTouch: true,
+        });
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
@@ -24,12 +30,6 @@ const useTokenSelect = (formType, onClick) => {
                 shouldTouch: true,
             });
         }
-        // Set chain again to trigger URL builder update
-        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldDirty: true,
-            shouldTouch: true,
-        });
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onBlur, onChange, onClick, setValue]);
 };

package/cjs/config/sentry.js

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

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.25.0';
+exports.version = '1.26.0';

package/cjs/hooks/useChains.js

@@ -36,7 +36,10 @@ const useChains = () => {
             setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
         }
         return { availableChains, filteredChains };
-    }));
+    }), {
+        refetchInterval: 180000,
+        staleTime: 180000,
+    });
     const getChainById = (0, react_1.useCallback)((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {

package/cjs/hooks/useProcessMessage.js

@@ -14,7 +14,7 @@ const useProcessMessage = (step, process) => {
     return getProcessMessage(t, getChainById, step, process);
 };
 exports.useProcessMessage = useProcessMessage;
-const processMessages = {
+const processStatusMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
         PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
@@ -42,8 +42,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: {},
+};
 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;
@@ -56,10 +82,18 @@ function getProcessMessage(t, getChainById, step, process) {
         let title = '';
         let message = '';
         switch (process.error.code) {
+            case sdk_1.LifiErrorCode.BalanceError:
+                title = t(`swap.error.title.balanceIsTooLow`);
+                message = getTransactionNotSentMessage();
+                break;
             case sdk_1.LifiErrorCode.ChainSwitchError:
                 title = t(`swap.error.title.chainSwitch`);
                 message = getTransactionNotSentMessage();
                 break;
+            case sdk_1.LifiErrorCode.GasLimitError:
+                title = t(`swap.error.title.gasLimitIsTooLow`);
+                message = getTransactionNotSentMessage();
+                break;
             case sdk_1.LifiErrorCode.TransactionFailed:
                 title = t(`swap.error.title.transactionFailed`);
                 message = t(`swap.error.message.transactionFailed`);
@@ -72,9 +106,13 @@ function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.transactionUnprepared`);
                 message = getTransactionNotSentMessage();
                 break;
+            case sdk_1.LifiErrorCode.TransactionCanceled:
+                title = t(`swap.error.title.transactionCanceled`);
+                message = getTransactionNotSentMessage();
+                break;
             case sdk_1.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 sdk_1.LifiErrorCode.TransactionRejected:
                 title = t(`swap.error.title.transactionRejected`);
@@ -84,16 +122,20 @@ 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 sdk_1.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 };
 }
 exports.getProcessMessage = getProcessMessage;

package/cjs/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 {};