@lifi/widget 1.10.2 → 1.11.0

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -6,7 +6,7 @@ export declare const IconButton: import("@emotion/styled").StyledComponent<{
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -1,5 +1,5 @@
 import { IconButton as MuiIconButton } from '@mui/material';
-import { darken, styled } from '@mui/material/styles';
+import { darken, lighten, styled } from '@mui/material/styles';
 export const IconButton = styled(MuiIconButton)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     border: `1px solid`,
@@ -9,6 +9,8 @@ export const IconButton = styled(MuiIconButton)(({ theme }) => ({
     zIndex: 1200,
     padding: theme.spacing(0.5),
     '&:hover': {
-        backgroundColor: darken(theme.palette.background.paper, 0.04),
+        backgroundColor: theme.palette.mode === 'light'
+            ? darken(theme.palette.background.paper, 0.02)
+            : lighten(theme.palette.background.paper, 0.02),
     },
 }));

package/components/SelectTokenButton/SelectTokenButton.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import { Avatar, Skeleton } from '@mui/material';
+import { Skeleton } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { routes } from '../../utils/routes';
-import { CardTitle } from '../Card';
-import { CardContainer } from '../Card/CardContainer';
-import { Card, SelectTokenCardHeader } from './SelectTokenButton.style';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { TokenAvatar } from '../TokenAvatar';
+import { SelectTokenCardHeader } from './SelectTokenButton.style';
 export const SelectTokenButton = ({ formType, compact }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -22,8 +22,10 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const { chain, isLoading: isChainLoading } = useChain(chainId);
     const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
     const handleClick = () => {
-        navigate(formType === 'from' ? routes.fromToken : routes.toToken);
+        navigate(formType === 'from'
+            ? navigationRoutes.fromToken
+            : navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
-    return (_jsx(CardContainer, Object.assign({ flex: 1 }, { children: _jsxs(Card, Object.assign({ onClick: handleClick, elevation: 0 }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) : null, action: !compact ? _jsx(KeyboardArrowRightIcon, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })) })));
+    return (_jsxs(Card, Object.assign({ flex: 1, onClick: handleClick }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? _jsx(TokenAvatar, { token: token }) : null, action: !compact ? _jsx(KeyboardArrowRightIcon, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })));
 };

package/components/SelectTokenButton/SelectTokenButton.style.d.ts

@@ -1,28 +1,21 @@
 /// <reference types="react" />
-export declare const Card: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes"> & {
-    classes?: Partial<import("@mui/material").CardClasses> | undefined;
-    raised?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").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 | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "variant" | "square" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComponent<{
     action?: import("react").ReactNode;
     avatar?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
+    classes?: Partial<import("@mui/material/CardHeader").CardHeaderClasses> | undefined;
     disableTypography?: boolean | undefined;
     subheader?: import("react").ReactNode;
     subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
     title?: import("react").ReactNode;
     titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | 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 | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected?: boolean | undefined;
     compact?: boolean | undefined;
 }, {}, {}>;

package/components/SelectTokenButton/SelectTokenButton.style.js

@@ -1,13 +1,6 @@
-import { Card as MuiCard } from '@mui/material';
 import { cardHeaderClasses } from '@mui/material/CardHeader';
 import { styled } from '@mui/material/styles';
 import { CardHeader } from '../Card';
-export const Card = styled(MuiCard)(({ theme }) => ({
-    borderRadius: 0,
-    '&:hover': {
-        cursor: 'pointer',
-    },
-}));
 export const SelectTokenCardHeader = styled(CardHeader, {
     shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
 })(({ theme, selected, compact }) => ({

package/components/SmallAvatar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const SmallAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "square" | "circular" | "rounded" | 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" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SmallAvatar.js

@@ -0,0 +1,8 @@
+import { Avatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+    border: `2px solid ${theme.palette.background.paper}`,
+}));

package/components/Step/Step.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Step as StepType, TokenAmount } from '@lifi/sdk';
+export declare const Step: React.FC<{
+    step: StepType;
+    fromToken?: TokenAmount;
+    toToken?: TokenAmount;
+}>;

package/{pages/SwapPage/StepItem.js → components/Step/Step.js}

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { CardContainer, CardTitle } from '../../components/Card';
+import { Card, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
-import { StepToken } from '../../components/StepToken';
-import { ExecutionItem } from './ExecutionItem';
+import { Token } from '../../components/Token';
+import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
-export const StepItem = ({ step, fromToken, toToken }) => {
+export const Step = ({ step, fromToken, toToken }) => {
     var _a, _b;
     const { t } = useTranslation();
     const stepHasError = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
@@ -22,8 +22,8 @@ export const StepItem = ({ step, fromToken, toToken }) => {
                 return t('swap.stepSwap');
         }
     };
-    return (_jsxs(CardContainer, Object.assign({ isError: stepHasError }, { children: [_jsxs(Box, Object.assign({ sx: {
+    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(StepToken, { 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(ExecutionItem, { step: step, process: process }, index))), toToken ? _jsx(StepToken, { 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 }), (_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] }))] })));
 };

package/{pages/SwapPage/ExecutionItem.d.ts → components/Step/StepProcess.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Process, Step } from '@lifi/sdk';
-export declare const ExecutionItem: React.FC<{
+export declare const StepProcess: React.FC<{
     step: Step;
     process: Process;
 }>;

package/{pages/SwapPage/ExecutionItem.js → components/Step/StepProcess.js}

@@ -4,9 +4,9 @@ import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
-import { LinkButton } from './ExecutionItem.style';
+import { LinkButton } from './StepProcess.style';
 import { getProcessMessage } from './utils';
-export const ExecutionItem = ({ step, process }) => {
+export const StepProcess = ({ step, process }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
     const { title, message } = getProcessMessage(t, getChainById, step, process);

package/{pages/SwapPage/ExecutionItem.style.d.ts → components/Step/StepProcess.style.d.ts}

@@ -6,7 +6,7 @@ export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/components/Step/index.d.ts

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

package/components/Step/index.js

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

package/components/Step/utils.d.ts

@@ -0,0 +1,6 @@
+import { EVMChain, Process, Step } from '@lifi/sdk';
+import { TFunction } from 'react-i18next';
+export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+    title?: string;
+    message?: string;
+};

package/components/Step/utils.js

@@ -0,0 +1,89 @@
+import { LifiErrorCode, MetaMaskProviderErrorCode, } from '@lifi/sdk';
+import { formatTokenAmount } from '../../utils';
+const formatProcessMessage = (initialMessage, args = {}) => {
+    return Object.keys(args).reduce((message, key) => {
+        return message.replace(`{${key}}`, args[key]);
+    }, initialMessage);
+};
+const processMessages = {
+    TOKEN_ALLOWANCE: {
+        STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
+        DONE: (t) => t(`swap.process.tokenAllowance.done`),
+    },
+    SWITCH_CHAIN: {
+        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        DONE: (t) => t(`swap.process.switchChain.done`),
+    },
+    SWAP: {
+        STARTED: (t) => t(`swap.process.swap.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
+        PENDING: (t) => t(`swap.process.swap.pending`),
+        DONE: (t) => t(`swap.process.swap.done`),
+    },
+    CROSS_CHAIN: {
+        STARTED: (t) => t(`swap.process.crossChain.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
+        PENDING: (t) => t(`swap.process.crossChain.pending`),
+        DONE: (t) => t(`swap.process.crossChain.done`),
+    },
+    RECEIVING_CHAIN: {
+        PENDING: (t) => t(`swap.process.receivingChain.pending`),
+        DONE: (t) => t(`swap.process.receivingChain.done`),
+    },
+    TRANSACTION: {},
+};
+export function getProcessMessage(t, getChainById, step, process) {
+    var _a, _b, _c, _d;
+    if (process.error && process.status === 'FAILED') {
+        const getTransactionNotSentMessage = () => {
+            var _a, _b;
+            return t(`swap.error.message.transactionNotSent`, {
+                amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+                tokenSymbol: step.action.fromToken.symbol,
+                chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+            });
+        };
+        let title = '';
+        let message = '';
+        switch (process.error.code) {
+            case LifiErrorCode.ChainSwitchError:
+                title = t(`swap.error.title.chainSwitch`);
+                message = getTransactionNotSentMessage();
+                break;
+            case LifiErrorCode.TransactionFailed:
+                title = t(`swap.error.title.transactionFailed`);
+                message = t(`swap.error.message.transactionFailed`);
+                break;
+            case LifiErrorCode.TransactionUnderpriced:
+                title = t(`swap.error.title.transactionUnderpriced`);
+                message = getTransactionNotSentMessage();
+                break;
+            case LifiErrorCode.TransactionUnprepared:
+                title = t(`swap.error.title.transactionUnprepared`);
+                message = getTransactionNotSentMessage();
+                break;
+            case LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageTooLarge`);
+                message = t(`swap.error.message.slippageTooLarge`);
+                break;
+            case MetaMaskProviderErrorCode.userRejectedRequest:
+                title = t(`swap.error.title.userRejectedSignatureRequest`);
+                message = t(`swap.error.message.signatureRequired`, {
+                    amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+                    tokenSymbol: step.action.fromToken.symbol,
+                    chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+                });
+                break;
+            default:
+                title = t(`swap.error.title.unknown`);
+                if (process.txLink) {
+                    message = t(`swap.error.message.transactionFailed`);
+                }
+                break;
+        }
+        return { title, message };
+    }
+    const title = (_d = (_c = processMessages[process.type])[process.status]) === null || _d === void 0 ? void 0 : _d.call(_c, t);
+    return { title };
+}

package/components/StepActions/StepActions.js

@@ -11,12 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
-import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
+import { Box, Step as MuiStep, Stepper, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
-import { formatTokenAmount } from '../../utils/format';
-import { LiFiLogo } from '../LiFiLogo';
-import { StepAvatar, StepConnector, StepContent, StepIcon, StepLabel, } from './StepActions.style';
+import { ReactComponent as LiFiToolLogo } from '../../icons/LiFiToolLogo.svg';
+import { formatTokenAmount } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export const StepActions = (_a) => {
     var _b;
     var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
@@ -24,12 +25,21 @@ export const StepActions = (_a) => {
         ? CrossStepDetailsLabel
         : SwapStepDetailsLabel;
     const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
-    return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: step.type === 'lifi' ? 'square' : 'circular', src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const StepIconComponent = ({ icon }) => {
+        var _a;
+        const tool = (_a = step.includedSteps) === null || _a === void 0 ? void 0 : _a[Number(icon) - 1];
+        return tool ? (_jsx(SmallAvatar, Object.assign({ src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
+                boxSizing: 'content-box',
+            } }, { children: tool.toolDetails.name[0] }))) : null;
+    };
+    return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: step.type === 'lifi' ? 'square' : 'circular', src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIcon }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
+                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
 };
 export const StepDetailsContent = ({ step }) => {
-    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount(step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
+    var _a, _b;
+    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;

package/components/StepActions/StepActions.style.js

@@ -30,8 +30,8 @@ export const StepLabel = styled(MuiStepLabel, {
 })(({ theme }) => ({
     padding: 0,
     [`.${stepLabelClasses.iconContainer}`]: {
-        paddingLeft: theme.spacing(1.25),
-        paddingRight: theme.spacing(3.25),
+        paddingLeft: theme.spacing(0.75),
+        paddingRight: theme.spacing(2.75),
     },
     [`&.${stepLabelClasses.disabled}`]: {
         cursor: 'inherit',

package/components/StepDivider/index.d.ts

@@ -0,0 +1 @@
+export * from './StepDivider';

package/components/StepDivider/index.js

@@ -0,0 +1 @@
+export * from './StepDivider';

package/components/SwapButton/SwapButton.js

@@ -12,20 +12,20 @@ import { ChainId } from '@lifi/sdk';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useHasSufficientBalance } from '../../hooks';
+import { useChains, useGasSufficiency } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { Button } from './SwapButton.style';
-export const SwapButton = ({ onClick, text, loading, }) => {
+export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     var _a;
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
     const { account, switchChain, connect: walletConnect } = useWallet();
-    const { hasGasOnStartChain, hasGasOnCrossChain, hasSufficientBalance } = useHasSufficientBalance();
+    const { insufficientFunds, insufficientGas } = useGasSufficiency(currentRoute);
     const [chainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey('from')],
     });
@@ -36,7 +36,7 @@ export const SwapButton = ({ onClick, text, loading, }) => {
                 yield walletConnect();
             }
             else {
-                navigate(routes.selectWallet);
+                navigate(navigationRoutes.selectWallet);
             }
         }
         else if (!isCurrentChainMatch) {
@@ -52,15 +52,12 @@ export const SwapButton = ({ onClick, text, loading, }) => {
             if (!isCurrentChainMatch) {
                 return t(`button.switchChain`);
             }
-            return text || t(`button.swap`);
+            return text || t(`button.reviewSwap`);
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
+    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
         // loading={isLoading || isFetching}
-        disabled: (!hasSufficientBalance ||
-            !hasGasOnStartChain ||
-            !hasGasOnCrossChain ||
-            loading) &&
-            isCurrentChainMatch }, { children: getButtonText() })));
+        disabled: (insufficientFunds || !!insufficientGas.length || loading) &&
+            isCurrentChainMatch, fullWidth: true }, { children: getButtonText() })));
 };

package/components/SwapButton/SwapButton.style.d.ts

@@ -24,7 +24,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;

package/components/SwapButton/SwapButton.style.js

@@ -1,12 +1,8 @@
 import { LoadingButton } from '@mui/lab';
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils/colors';
+import { getContrastAlphaColor } from '../../utils';
 export const Button = styled(LoadingButton)(({ theme }) => ({
-    textTransform: 'none',
-    borderRadius: theme.shape.borderRadiusSecondary,
-    padding: theme.spacing(1.25, 2),
-    fontSize: '1rem',
     [`&.${loadingButtonClasses.loading}`]: {
         color: 'transparent',
     },

package/components/SwapButton/types.d.ts

@@ -1,5 +1,7 @@
+import { Route } from '@lifi/sdk';
 export interface SwapButtonProps {
     onClick?(): void;
+    currentRoute?: Route;
     text?: string;
     loading?: boolean;
 }

package/components/SwapInProgress/SwapInProgress.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowForward as ArrowForwardIcon, KeyboardArrowRight as KeyboardArrowRightIcon, } from '@mui/icons-material';
-import { AvatarGroup, Box, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useWallet } from '../../providers/WalletProvider';
 import { useExecutingRoutes } from '../../stores';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { CardTitle } from '../Card';
-import { Card, RouteAvatar, RouteCard } from './SwapInProgress.style';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ProgressCard, RouteCard } from './SwapInProgress.style';
 export const SwapInProgress = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const executingRoutes = useExecutingRoutes();
+    const { account } = useWallet();
+    const executingRoutes = useExecutingRoutes(account.address);
     const handleCardClick = useCallback((routeId) => {
-        navigate(routes.swap, { state: { routeId } });
+        navigate(navigationRoutes.swap, { state: { routeId } });
     }, [navigate]);
     if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
         return null;
     }
-    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.inProgress') }), _jsx(Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => (_jsx(RouteCard, { onClick: () => handleCardClick(route.id), avatar: _jsxs(AvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(RouteAvatar, Object.assign({ src: route.fromToken.logoURI, alt: route.fromToken.symbol }, { children: route.fromToken.symbol[0] })), _jsx(RouteAvatar, Object.assign({ src: route.toToken.logoURI, alt: route.toToken.symbol }, { children: route.toToken.symbol[0] }))] })), action: _jsx(KeyboardArrowRightIcon, {}), title: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
+    return (_jsxs(ProgressCard, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.inProgress') }), _jsx(Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => (_jsx(RouteCard, { onClick: () => handleCardClick(route.id), avatar: _jsxs(TokenAvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] })), action: _jsx(KeyboardArrowRightIcon, {}), title: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
 };