@lifi/widget 2.5.1 → 2.6.1

package/components/Token/Token.style.d.ts

@@ -6,7 +6,7 @@ export declare const TextSecondaryContainer: import("@emotion/styled").StyledCom
 }, {}, {}>;
 export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "className" | "style" | "classes" | "children" | "sx" | "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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     connected?: boolean | undefined;
     dot?: boolean | undefined;
 }, {}, {}>;

package/config/theme.js

@@ -2,7 +2,7 @@ import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { touchRippleClasses } from '@mui/material/ButtonBase';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { common } from '@mui/material/colors';
-import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, keyframes, lighten, } from '@mui/material/styles';
+import { alpha, createTheme as createMuiTheme, css, darken, getContrastRatio, keyframes, lighten, } from '@mui/material/styles';
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -117,15 +117,15 @@ export const createTheme = (mode, theme = {}) => {
             },
             MuiButtonBase: {
                 styleOverrides: {
-                    root: {
-                        [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
-                            animationName: `${enterKeyframe}`,
-                        },
-                        [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
-                            opacity: 0.1,
-                            animationName: `${enterKeyframe}`,
-                        },
-                    },
+                    // This `css()` function invokes keyframes. `styled-components` only supports keyframes
+                    // in string templates. Do not convert these styles in JS object as it will break.
+                    root: css `
+            &
+              .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {
+              opacity: 0.1;
+              animation-name: ${enterKeyframe};
+            }
+          `,
                 },
             },
             MuiButton: {

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useNavigateBack.js

@@ -3,7 +3,9 @@ import { useNavigate } from 'react-router-dom';
 export const useNavigateBack = () => {
     const navigate = useNavigate();
     const navigateBack = useCallback(() => {
+        // TODO: find a better router with nested memory routers support
         // https://github.com/remix-run/react-router/pull/9112
+        // https://github.com/remix-run/react-router/discussions/9601
         //
         // if (window.history.length > 2) {
         navigate(-1);

package/i18n/de.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Routenpriorität",
     "showDestinationWallet": "Ziel Wallet anzeigen",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "resetSettings": "Sie verwenden benutzerdefinierte Einstellungen, die die Anzahl der verfügbaren Routen begrenzen."
   },
   "wallet": {
     "extensionNotFound": "Bitte stellen Sie sicher, dass nur die Browsererweiterung {{name}} aktiv ist, bevor Sie dieses Wallet auswählen."

package/i18n/fr.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Priorité de l'itinéraire",
     "showDestinationWallet": "Afficher le portefeuille de destination",
-    "slippage": "Effet de glissement"
+    "slippage": "Effet de glissement",
+    "resetSettings": "Vous utilisez des paramètres personnalisés limitant le nombre de routes disponibles."
   },
   "wallet": {
     "extensionNotFound": "Veuillez vous assurer que seule l'extension de navigateur {{name}} est active avant de choisir ce portefeuille."

package/i18n/zh.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "路由优先级",
     "showDestinationWallet": "显示收款钱包",
-    "slippage": "滑点"
+    "slippage": "滑点",
+    "resetSettings": "您正在使用自定义设置过滤可用路由。"
   },
   "wallet": {
     "extensionNotFound": "在选择钱包之前，请确保只有{{name}} 浏览器的扩展应用处于激活状态。"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -43,13 +43,13 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.4.1",
-    "@lifi/wallet-management": "^2.3.6",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/lab": "^5.0.0-alpha.146",
-    "@mui/material": "^5.14.11",
-    "@tanstack/react-query": "^4.35.7",
-    "@tanstack/react-virtual": "^3.0.0-beta.61",
+    "@lifi/sdk": "^2.4.3",
+    "@lifi/wallet-management": "^2.3.7",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/lab": "^5.0.0-alpha.148",
+    "@mui/material": "^5.14.13",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-virtual": "^3.0.0-beta.65",
     "big.js": "^6.2.1",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -63,7 +63,7 @@
     "react-router-dom": "^6.16.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "zustand": "^4.4.2"
+    "zustand": "^4.4.3"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/MainPage/ReviewButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
 import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useSetExecutableRoute, useSplitSubvariantStore } from '../../stores';
@@ -54,5 +54,5 @@ export const ReviewButton = () => {
             }
         }
     };
-    return (_jsx(DefaultTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+    return (_jsx(BaseTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
 };

package/pages/TransactionPage/StartTransactionButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
 import { useFromTokenSufficiency, useGasSufficiency, useRoutes, } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
@@ -9,7 +9,7 @@ export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
     const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
     const { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = useFromTokenSufficiency(route);
     const shouldDisableButton = !isMultisigSigner && (insufficientFromToken || !!insufficientGas?.length);
-    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
+    return (_jsx(BaseTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 export const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);

package/pages/TransactionPage/TransactionPage.js

@@ -49,6 +49,13 @@ export const TransactionPage = () => {
                 : t(`header.${transactionType.toLowerCase()}`));
         }
     }, [headerStoreContext, route, status, subvariant, t]);
+    useEffect(() => {
+        if (status === RouteExecutionStatus.Idle) {
+            emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
+        }
+        // We want to emit event only when the page is mounted
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     if (!route) {
         return null;
     }

package/pages/TransactionPage/types.d.ts

@@ -1,6 +1,6 @@
 import type { Route } from '@lifi/sdk';
-import type { DefaultTransactionButtonProps } from '../../components/DefaultTransactionButton';
-export interface StartTransactionButtonProps extends DefaultTransactionButtonProps {
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
+export interface StartTransactionButtonProps extends BaseTransactionButtonProps {
     route?: Route;
     insurableRouteId: string;
 }