@lifi/widget 1.11.1 → 1.11.4

package/components/Header/Header.js

@@ -9,10 +9,12 @@ const stickyHeaderRoutes = [
     navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.swapRoutes,
+    navigationRoutes.swapHistory,
+    navigationRoutes.swapDetails,
 ];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
-    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.includes(pathname) }, { children: children })));
+    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 export const Header = () => {
     const { walletManagement } = useWidgetConfig();

package/components/SwapButton/SwapButton.js

@@ -52,6 +52,9 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
             if (!isCurrentChainMatch) {
                 return t(`button.switchChain`);
             }
+            if (!currentRoute) {
+                return t(`button.swap`);
+            }
             return text || t(`button.reviewSwap`);
         }
         return t(`button.connectWallet`);
@@ -59,5 +62,6 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
         // loading={isLoading || isFetching}
         disabled: (insufficientFunds || !!insufficientGas.length || loading) &&
+            currentRoute &&
             isCurrentChainMatch, fullWidth: true }, { children: getButtonText() })));
 };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -32,7 +32,7 @@ export const SwapRouteCard = (_a) => {
                 : null, _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
                                         .map((step) => step.estimate.executionDuration)
-                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] })));
+                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
 };

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -20,9 +20,9 @@ export const SwapRouteCardSkeleton = (_a) => {
                         } }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }) }))] })), _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 27 }), _jsx(Skeleton, { variant: "text", width: 52, height: 18 })] }), _jsxs(Box, Object.assign({ sx: {
+                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 20 }), _jsx(Skeleton, { variant: "text", width: 52, height: 16 })] }), _jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             alignItems: 'flex-end',
                             flexDirection: 'column',
-                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 27 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] }))] }))] })));
+                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 16 })] }))] }))] })));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -13,15 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Route as RouteIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Card } from '../Card';
 export const SwapRouteNotFoundCard = (_a) => {
     var { dense } = _a, other = __rest(_a, ["dense"]);
     const { t } = useTranslation();
-    return (_jsx(Card, Object.assign({ dense: dense, indented: true }, other, { children: _jsxs(Box, Object.assign({ sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                flex: 1,
-            }, py: 1.375 }, { children: [_jsx(RouteIcon, { fontSize: "large" }), _jsx(Typography, Object.assign({ fontSize: 16, fontWeight: "500", mt: 2 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 1 }, { children: t('swap.info.message.routeNotFound') }))] })) })));
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            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') }))] })));
 };

package/config/theme.js

@@ -1,5 +1,6 @@
 import { dialogActionsClasses } from '@mui/material/DialogActions';
-import { alpha, createTheme as createMuiTheme, darken, lighten, } from '@mui/material/styles';
+import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
+import { dark, light } from '@mui/material/styles/createPalette';
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -24,8 +25,12 @@ const palette = {
         main: '#297EFF',
     },
 };
+const shape = {
+    borderRadius: 12,
+    borderRadiusSecondary: 6,
+};
 export const createTheme = (mode, theme = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
@@ -57,7 +62,7 @@ export const createTheme = (mode, theme = {}) => {
                     paper: '#212121',
                 },
             })),
-        shape: Object.assign({ borderRadius: 12, borderRadiusSecondary: 6 }, theme.shape),
+        shape: Object.assign(Object.assign({}, shape), theme.shape),
         breakpoints: {
             values: {
                 xs: 0,
@@ -96,26 +101,35 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }
                     : {})), { root: {
-                        borderRadius: (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary,
+                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
                         textTransform: 'none',
                         fontSize: '1rem',
                         padding: '10px 16px',
                         [`.${dialogActionsClasses.root} &`]: {
                             padding: '6px 12px',
                         },
-                        '&.Mui-disabled': {
+                        '&.Mui-disabled, &.Mui-disabled:hover': {
                             color: mode === 'light'
                                 ? 'rgb(0 0 0 / 70%)'
                                 : 'rgb(255 255 255 / 70%)',
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                    }, contained: {
+                        '&:hover': {
+                            color: getContrastRatio(palette.primary.main, dark.text.primary) >= 3
+                                ? dark.text.primary
+                                : light.text.primary,
+                        },
                     } }),
             },
             MuiIconButton: {
                 styleOverrides: {
                     root: {
                         color: 'inherit',
+                        '&:hover': {
+                            color: 'inherit',
+                        },
                     },
                 },
             },

package/config/version.d.ts

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

package/config/version.js

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

package/i18n/en/translation.json

@@ -14,6 +14,7 @@
   "button": {
     "connectWallet": "Connect wallet",
     "switchChain": "Switch chain",
+    "swap": "Swap",
     "reviewSwap": "Review swap",
     "startSwap": "Start swap",
     "restartSwap": "Restart swap",
@@ -78,10 +79,12 @@
     },
     "info": {
       "title": {
-        "routeNotFound": "No routes available"
+        "routeNotFound": "No routes available",
+        "emptySwapHistory": "No recent swaps"
       },
       "message": {
-        "routeNotFound": "Try another token combination."
+        "routeNotFound": "Try another token combination.",
+        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data."
       }
     },
     "warning": {

package/i18n/index.d.ts

@@ -17,6 +17,7 @@ export declare const resources: {
             button: {
                 connectWallet: string;
                 switchChain: string;
+                swap: string;
                 reviewSwap: string;
                 startSwap: string;
                 restartSwap: string;
@@ -82,9 +83,11 @@ export declare const resources: {
                 info: {
                     title: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                     message: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                 };
                 warning: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.1",
+  "version": "1.11.4",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",

package/pages/MainPage/SwapRoutes.js

@@ -23,8 +23,8 @@ export const SwapRoutes = (props) => {
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
-    const routeNotFound = !currentRoute && isFetched;
-    return (_jsxs(_Fragment, { children: [_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+    const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                             position: 'absolute',
                             top: 8,
                             right: 8,
@@ -32,5 +32,5 @@ export const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
+                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
 };

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -10,5 +10,5 @@ export const SwapHistoryEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(HistoryIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: "No recent swaps" })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: "Swap history is only stored locally and will be deleted if you clear your browser data." }))] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(HistoryIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
 };

package/pages/SwapPage/SwapPage.js

@@ -41,5 +41,5 @@ export const SwapPage = () => {
                 return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : null, status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -28,8 +28,8 @@ export const SwapRoutesPage = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime, setHeaderAction]);
-    const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && isFetched;
-    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching;
+    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };