@lifi/widget 1.25.1 → 1.26.1

package/pages/SwapPage/SwapPage.js

@@ -10,27 +10,32 @@ 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 { Delete as DeleteIcon } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
-import { Fragment, useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
-import { Step } from '../../components/Step';
-import { StepDivider } from '../../components/StepDivider';
+import { getStepList } from '../../components/Step';
 import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
-import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
+import { getTokenValueLossThreshold, TokenValueBottomSheet } from './TokenValueBottomSheet';
 export const SwapPage = () => {
+    var _a;
     const { t } = useTranslation();
     const { state } = useLocation();
     const { navigateBack } = useNavigateBack();
     const tokenValueBottomSheetRef = useRef(null);
+    const exchangeRateBottomSheetRef = useRef(null);
     const { setValue } = useFormContext();
-    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
+    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
+        routeId: state === null || state === void 0 ? void 0 : state.routeId,
+        onAcceptExchangeRateUpdate: (_a = exchangeRateBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open,
+    });
     const handleExecuteRoute = useCallback(() => {
         var _a, _b;
         if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
@@ -40,11 +45,11 @@ export const SwapPage = () => {
         setValue(SwapFormKey.FromAmount, '');
     }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _b;
         if (status === RouteExecutionStatus.Idle) {
             const thresholdExceeded = getTokenValueLossThreshold(route);
             if (thresholdExceeded) {
-                (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+                (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.open();
             }
             else {
                 handleExecuteRoute();
@@ -63,23 +68,16 @@ export const SwapPage = () => {
             case RouteExecutionStatus.Idle:
                 return t('button.startSwap');
             case RouteExecutionStatus.Failed:
-                return t('button.restartSwap');
+                return t('button.tryAgain');
             default:
                 return '';
         }
     };
-    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
-                var _a, _b, _c, _d, _e;
-                const fromToken = index === 0
-                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
-                const toToken = index === steps.length - 1
-                    ? 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;
-                return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === RouteExecutionStatus.Idle ||
+    return (_jsxs(Container, { children: [getStepList(route), status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
                                 // disable={status === 'idle' && (isValidating || !isValid)}
                                 enableLoading: true }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));
+                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }) : null] }));
 };

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Warning as WarningIcon } from '@mui/icons-material';
+import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
+    const handleCancel = useCallback(() => {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    };
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+    }, []);
+    return (_jsx(BottomSheet, Object.assign({ ref: ref, onClose: handleCancel }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = useTranslation();
@@ -23,7 +23,8 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
                                 .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
                                 .minus(1)
                                 .mul(100)
-                                .toFixed(1), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+                                .round(2, Big.roundUp)
+                                .toString(), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
 };
 export const getTokenValueLossThreshold = (route) => {
     if (!route) {