@lifi/widget 1.11.3 → 1.12.1

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/AppDrawer.style.js

@@ -39,8 +39,12 @@ export const DrawerButton = styled(Button, {
         ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
         : '0px'} * -1), 0, 0)`,
     transition: theme.transitions.create(['transform'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
+        duration: open
+            ? theme.transitions.duration.enteringScreen
+            : theme.transitions.duration.leavingScreen,
+        easing: open
+            ? theme.transitions.easing.easeOut
+            : theme.transitions.easing.sharp,
     }),
     zIndex: 1500,
     '&:hover': {

package/AppProvider.d.ts

@@ -5,3 +5,7 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+    disabled?: boolean;
+}>;

package/AppProvider.js

@@ -12,11 +12,14 @@ import { WalletProvider } from './providers/WalletProvider';
 import { WidgetProvider } from './providers/WidgetProvider';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
-    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) }) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: _jsx(WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) })) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
     return _jsx(Router, { children: children });
 };
+export const TelemetryProvider = ({ children, disabled }) => {
+    useTelemetry(disabled);
+    return children;
+};

package/components/Header/Header.js

@@ -9,10 +9,13 @@ const stickyHeaderRoutes = [
     navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.swapRoutes,
+    navigationRoutes.swapExecution,
+    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/NotFound.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block as BlockIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {
@@ -10,5 +11,5 @@ export const NotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: t('tooltip.notFound.title') })), _jsx(Typography, { children: t('tooltip.notFound.text') })] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(BlockIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
 };

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

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/Step/Step.js

@@ -13,7 +13,10 @@ export const Step = ({ step, fromToken, toToken }) => {
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
-                return t('swap.stepSwapAndBridge');
+                if (step.includedSteps.some((step) => step.type === 'cross')) {
+                    return t('swap.stepSwapAndBridge');
+                }
+                return t('swap.stepSwap');
             case 'swap':
                 return t('swap.stepSwap');
             case 'cross':

package/components/Step/StepProcess.style.d.ts

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/StepActions/StepActions.js

@@ -21,7 +21,9 @@ import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepAction
 export const StepActions = (_a) => {
     var _b;
     var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
-    const StepDetailsLabel = step.type === 'cross' || step.type === 'lifi'
+    const StepDetailsLabel = step.type === 'cross' ||
+        (step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross'))
         ? CrossStepDetailsLabel
         : SwapStepDetailsLabel;
     const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
@@ -33,7 +35,7 @@ export const StepActions = (_a) => {
                 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'
+    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: "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: 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 })] })))] })));
 };

package/components/SwapButton/SwapButton.js

@@ -29,7 +29,10 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     const [chainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey('from')],
     });
-    const isCurrentChainMatch = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) === account.chainId;
+    // Allow switching chain only if execution is not started
+    const switchChainAllowed = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
+        currentRoute &&
+        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
@@ -39,7 +42,7 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
                 navigate(navigationRoutes.selectWallet);
             }
         }
-        else if (!isCurrentChainMatch) {
+        else if (switchChainAllowed) {
             yield switchChain(chainId);
             // check that the current route exists in the up to date route list
         }
@@ -49,9 +52,12 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (!isCurrentChainMatch) {
+            if (switchChainAllowed) {
                 return t(`button.switchChain`);
             }
+            if (!currentRoute) {
+                return t(`button.swap`);
+            }
             return text || t(`button.reviewSwap`);
         }
         return t(`button.connectWallet`);
@@ -59,5 +65,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) &&
-            isCurrentChainMatch, fullWidth: true }, { children: getButtonText() })));
+            currentRoute &&
+            !switchChainAllowed, fullWidth: true }, { children: getButtonText() })));
 };

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

@@ -17,7 +17,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
 } & Omit<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/SwapInput/SwapInput.style.d.ts

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/components/SwapInput/SwapInputAdornment.style.d.ts

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

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/SwapRouteCard.style.js

@@ -1,3 +1,4 @@
+import { getContrastTextColor } from '@lifi/widget/utils';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 export const Label = styled(Typography, {
@@ -11,7 +12,9 @@ export const Label = styled(Typography, {
             ? theme.palette.grey[500]
             : theme.palette.grey[600],
     borderRadius: theme.shape.borderRadiusSecondary,
-    color: active ? theme.palette.common.white : theme.palette.text.secondary,
+    color: active
+        ? getContrastTextColor(theme, theme.palette.primary.main)
+        : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,
     lineHeight: 1,

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/components/TokenList/TokenList.js

@@ -17,7 +17,8 @@ export const TokenList = ({ formType, height, onClick, }) => {
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const [searchTokensFilter] = useDebouncedWatch([SwapFormKey.SearchTokensFilter], 250);
-    const { tokens, isLoading, isBalanceLoading } = useTokenBalances(selectedChainId);
+    const { tokens: tokensWithoutBalance, tokensWithBalance, isLoading, isBalanceLoading, } = useTokenBalances(selectedChainId);
+    const tokens = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokensWithoutBalance;
     const chainTokens = useMemo(() => {
         var _a;
         let chainTokens = tokens !== null && tokens !== void 0 ? tokens : [];

package/components/TokenList/TokenList.style.d.ts

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & 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;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -29,4 +29,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/config/lifi.d.ts

@@ -1,3 +1,3 @@
 import LIFI, { ConfigUpdate } from '@lifi/sdk';
 export declare const LiFi: LIFI;
-export declare const updateLiFiConfig: (configUpdate?: ConfigUpdate) => void;
+export declare const updateLiFiConfig: (configUpdate: ConfigUpdate) => void;

package/config/lifi.js

@@ -1,11 +1,5 @@
 import LIFI from '@lifi/sdk';
-const defaultConfig = {
-// apiUrl: env.LIFI_API_URL,
-// defaultRouteOptions: {
-//   integrator: 'li.fi',
-// },
-};
-export const LiFi = new LIFI(defaultConfig);
+export const LiFi = new LIFI();
 export const updateLiFiConfig = (configUpdate) => {
-    LiFi.setConfig(Object.assign(Object.assign({}, defaultConfig), configUpdate));
+    LiFi.setConfig(configUpdate);
 };

package/config/theme.js

@@ -31,12 +31,15 @@ const shape = {
 };
 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, _v;
+    const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
+    const primaryLightColor = lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
+    const primaryDarkColor = darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
-                main: (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main,
-                light: lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5),
-                dark: darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2),
+                main: primaryMainColor,
+                light: primaryLightColor,
+                dark: primaryDarkColor,
             }, secondary: {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: lighten((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
@@ -85,18 +88,18 @@ export const createTheme = (mode, theme = {}) => {
                 styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
                     ? {
                         outlined: {
-                            color: palette.primary.light,
-                            borderColor: palette.primary.light,
+                            color: primaryLightColor,
+                            borderColor: primaryLightColor,
                             '&:hover': {
-                                backgroundColor: alpha(palette.primary.light, 0.08),
-                                borderColor: palette.primary.light,
+                                backgroundColor: alpha(primaryLightColor, 0.08),
+                                borderColor: primaryLightColor,
                             },
                         },
                         text: {
-                            color: palette.primary.light,
+                            color: primaryLightColor,
                             '&:hover': {
-                                backgroundColor: alpha(palette.primary.light, 0.08),
-                                borderColor: palette.primary.light,
+                                backgroundColor: alpha(primaryLightColor, 0.08),
+                                borderColor: primaryLightColor,
                             },
                         },
                     }
@@ -117,7 +120,7 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }, contained: {
                         '&:hover': {
-                            color: getContrastRatio(palette.primary.main, dark.text.primary) >= 3
+                            color: getContrastRatio(dark.text.primary, primaryMainColor) >= 3
                                 ? dark.text.primary
                                 : light.text.primary,
                         },

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useGasSufficiency.js

@@ -15,12 +15,16 @@ export const useGasSufficiency = (route) => {
         ],
     });
     const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
-    const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
-    const { tokens: toChainTokenBalances } = useTokenBalances(toChainId);
     const { getChainById } = useChains();
+    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokensWithBalance: toChainTokenBalances } = useTokenBalances(toChainId);
     const insufficientGas = useMemo(() => {
         var _a;
-        if (!account.isActive || !route || !fromAmount) {
+        if (!account.isActive ||
+            !route ||
+            !fromAmount ||
+            !fromChainTokenBalances ||
+            !toChainTokenBalances) {
             return [];
         }
         const tokenBalancesByChain = {
@@ -78,7 +82,10 @@ export const useGasSufficiency = (route) => {
     ]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
-        if (!account.isActive || !fromToken || !fromAmount) {
+        if (!account.isActive ||
+            !fromToken ||
+            !fromAmount ||
+            !fromChainTokenBalances) {
             return false;
         }
         const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);

package/hooks/useRouteExecution.js

@@ -20,21 +20,23 @@ export const useRouteExecution = (routeId) => {
     const routeExecution = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
-        console.log('Route updated.', updatedRoute);
-        updateRoute(deepClone(updatedRoute));
+        const clonedUpdatedRoute = deepClone(updatedRoute);
+        console.log('Route updated.', clonedUpdatedRoute);
+        updateRoute(clonedUpdatedRoute);
     };
-    const switchChainHook = useCallback((requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
+    const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
             return account.signer;
         }
-        if ((yield account.signer.getChainId()) !== requiredChainId) {
+        const currentChainId = yield account.signer.getChainId();
+        if (currentChainId !== requiredChainId) {
             const switched = yield switchChain(requiredChainId);
             if (!switched) {
                 throw new Error('Chain was not switched.');
             }
         }
         return account.signer;
-    }), [account.isActive, account.signer, switchChain]);
+    });
     const executeRouteMutation = useMutation(() => {
         if (!account.signer) {
             throw Error('Account signer not found.');
@@ -112,26 +114,29 @@ export const useRouteExecution = (routeId) => {
         deleteRoute(routeId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [routeId]);
+    // Resume route execution after page reload
     useEffect(() => {
-        // check if route is eligible for automatic resuming
-        const isDone = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-        const isFailed = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-        const alreadyStarted = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.some((step) => step.execution);
-        if (!isDone &&
-            !isFailed &&
-            alreadyStarted &&
-            account.signer &&
+        // Check if route is eligible for automatic resuming
+        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+            account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
             resumeRoute();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [account.isActive]);
+    useEffect(() => {
         return () => {
-            if (routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) {
-                LiFi.moveExecutionToBackground(routeExecution.route);
+            var _a;
+            const route = (_a = useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            if (!route || !isActiveRoute(route)) {
+                return;
             }
+            LiFi.moveExecutionToBackground(route);
+            console.log('Move route execution to background.', routeId);
+            resumedAfterMount.current = false;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account.signer]);
+    }, [routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,
@@ -140,3 +145,12 @@ export const useRouteExecution = (routeId) => {
         status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
     };
 };
+const isActiveRoute = (route) => {
+    if (!route) {
+        return false;
+    }
+    const allDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+    const alreadyStarted = route.steps.some((step) => step.execution);
+    return !allDone && !isFailed && alreadyStarted;
+};

package/hooks/useSwapRoutes.js

@@ -40,7 +40,7 @@ export const useSwapRoutes = () => {
     // Boolean(account.address) &&
     !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
-        Boolean(fromTokenAddress) &&
+        Boolean(token === null || token === void 0 ? void 0 : token.address) &&
         Boolean(toTokenAddress) &&
         !isNaN(fromTokenAmount) &&
         Number(fromTokenAmount) > 0 &&
@@ -49,7 +49,7 @@ export const useSwapRoutes = () => {
         'routes',
         account.address,
         fromChainId,
-        fromTokenAddress,
+        token === null || token === void 0 ? void 0 : token.address,
         fromTokenAmount,
         toChainId,
         toTokenAddress,

package/hooks/useTokenBalance.js

@@ -17,7 +17,7 @@ export const useTokenBalance = (chainId, tokenAddress) => {
     const { account } = useWallet();
     const queryClient = useQueryClient();
     const { token } = useToken(chainId, tokenAddress);
-    const { data: tokenWithBalance, isLoading, isFetching, refetch, } = useQuery(['token', account.address, chainId, tokenAddress], ({ queryKey: [, address] }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: tokenWithBalance, isLoading, isFetching, refetch, } = useQuery(['token-balance', account.address, chainId, tokenAddress], ({ queryKey: [, address] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!address || !token) {
             return null;
         }

package/hooks/useTokenBalances.d.ts

@@ -1,7 +1,9 @@
 import { TokenAmount } from '@lifi/sdk';
 export declare const useTokenBalances: (selectedChainId: number) => {
-    tokens: TokenAmount[] | undefined;
+    tokens: import("@lifi/sdk").Token[] | undefined;
+    tokensWithBalance: TokenAmount[] | undefined;
     isLoading: boolean;
     isBalanceLoading: boolean;
-    updateBalances: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[], unknown>>;
+    isBalanceFetched: boolean;
+    updateBalances: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TokenAmount[] | undefined, unknown>>;
 };

package/hooks/useTokenBalances.js

@@ -8,21 +8,31 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
 import { formatTokenAmount } from '../utils';
-import { useChains } from './useChains';
 import { useTokens } from './useTokens';
+const defaultRefetchInterval = 60000;
+const minRefetchInterval = 1000;
 export const useTokenBalances = (selectedChainId) => {
     const { account } = useWallet();
-    const { chains, isLoading: isChainsLoading } = useChains();
     const { tokens, isLoading } = useTokens(selectedChainId);
-    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens) && Boolean(chains);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [_, chainId, account] }) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!account || !tokens) {
-            return [];
+    const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
+    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens);
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, isFetched: isBalanceFetched, refetch, } = useQuery(['token-balances', selectedChainId, account.address], ({ queryKey: [, , accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!accountAddress || !tokens) {
+            return;
+        }
+        const tokenBalances = yield LiFi.getTokenBalances(accountAddress, tokens);
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
+            // TODO: fix and remove backplane
+            setRefetchInterval((interval) => interval === defaultRefetchInterval
+                ? minRefetchInterval
+                : interval * 2);
+            return;
         }
-        const tokenBalances = yield LiFi.getTokenBalances(account, tokens);
         const formatedTokens = (tokenBalances.length === 0 ? tokens : tokenBalances).map((token) => {
             token.amount = formatTokenAmount(token.amount);
             return token;
@@ -40,13 +50,15 @@ export const useTokenBalances = (selectedChainId) => {
     }), {
         enabled: isBalanceLoadingEnabled,
         refetchIntervalInBackground: true,
-        refetchInterval: 60000,
-        staleTime: 60000,
+        refetchInterval,
+        staleTime: refetchInterval,
     });
     return {
-        tokens: tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : tokens,
-        isLoading: isLoading || isChainsLoading,
+        tokens,
+        tokensWithBalance,
+        isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
+        isBalanceFetched,
         updateBalances: refetch,
     };
 };

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,16 +79,19 @@
     },
     "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": {
       "title": {
         "insufficientGas": "Insufficient gas",
-        "deleteSwap": "Delete this swap?"
+        "deleteSwap": "Delete this swap?",
+        "deleteSwapHistory": "Delete swap history?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
@@ -161,7 +165,7 @@
   },
   "tooltip": {
     "notFound": {
-      "title": "Sorry 🥲",
+      "title": "404",
       "text": "We couldn't find this page."
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."

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,15 +83,18 @@ export declare const resources: {
                 info: {
                     title: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                     message: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                 };
                 warning: {
                     title: {
                         insufficientGas: string;
                         deleteSwap: string;
+                        deleteSwapHistory: string;
                     };
                     message: {
                         insufficientFunds: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.3",
+  "version": "1.12.1",
   "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",
@@ -37,26 +37,26 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/sdk": "^1.0.2",
-    "@lifi/wallet-management": "^1.1.2",
+    "@lifi/sdk": "^1.1.3",
+    "@lifi/wallet-management": "^1.1.3",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.92",
-    "@mui/material": "^5.9.2",
-    "@sentry/integrations": "^7.7.0",
-    "@sentry/react": "^7.7.0",
-    "@sentry/tracing": "^7.7.0",
+    "@mui/lab": "^5.0.0-alpha.93",
+    "@mui/material": "^5.9.3",
+    "@sentry/integrations": "^7.9.0",
+    "@sentry/react": "^7.9.0",
+    "@sentry/tracing": "^7.9.0",
     "@tanstack/react-query": "^4.0.10",
     "big.js": "^6.2.1",
-    "i18next": "^21.8.14",
+    "i18next": "^21.8.16",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.33.1",
-    "react-i18next": "^11.18.1",
+    "react-hook-form": "^7.34.0",
+    "react-i18next": "^11.18.3",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",

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/MainPage/SwapRoutes.style.d.ts

@@ -8,4 +8,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     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 | "children" | "sx" | "ref" | "direction" | ("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") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SelectWalletPage/SelectWalletPage.style.d.ts

@@ -17,7 +17,7 @@ export declare const WalletListItemButton: import("@emotion/styled").StyledCompo
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & 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;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -29,7 +29,7 @@ export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,7 +2,7 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "standard" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

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/SwapHistoryPage/SwapHistoryPage.js

@@ -1,14 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, Stack } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useSetHeaderAction } from '../../components/Header';
 import { useWallet } from '../../providers/WalletProvider';
+import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';
 import { SwapHistoryItem } from './SwapHistoryItem';
 export const SwapHistoryPage = () => {
+    const { t } = useTranslation();
     const { account } = useWallet();
     const swaps = useSwapHistory(account.address);
+    const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
+    const setHeaderAction = useSetHeaderAction();
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [setHeaderAction, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }
-    return (_jsx(Container, { children: _jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })) }));
+    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

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)))) })));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -8,4 +8,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     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 | "children" | "sx" | "ref" | "direction" | ("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") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/providers/WalletProvider/WalletProvider.d.ts

@@ -1,4 +1,14 @@
+import { Signer } from 'ethers';
 import { FC, PropsWithChildren } from 'react';
+import { WidgetWalletManagement } from '../../types';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;
-export declare const WalletProvider: FC<PropsWithChildren<{}>>;
+export declare const WalletProvider: FC<PropsWithChildren<{
+    walletManagement?: WidgetWalletManagement;
+}>>;
+export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
+    address: string | undefined;
+    isActive: boolean;
+    signer: Signer | undefined;
+    chainId: number | undefined;
+}>;

package/providers/WalletProvider/WalletProvider.js

@@ -8,9 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLifiWalletManagement, } from '@lifi/wallet-management';
+import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { useWidgetConfig } from '../WidgetProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -24,65 +23,57 @@ const initialContext = {
 };
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
-export const WalletProvider = ({ children }) => {
-    const config = useWidgetConfig();
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLifiWalletManagement();
+export const WalletProvider = ({ children, walletManagement }) => {
+    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
-            const signer = yield config.walletManagement.connect();
+        if (walletManagement) {
+            const signer = yield walletManagement.connect();
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [config.walletManagement, walletManagementConnect]);
+    }), [walletManagement, walletManagementConnect]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
-            yield config.walletManagement.disconnect();
+        if (walletManagement) {
+            yield walletManagement.disconnect();
             setAccount({});
             return;
         }
         yield walletManagementDisconnect();
-    }), [config.walletManagement, walletManagementDisconnect]);
+    }), [walletManagement, walletManagementDisconnect]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if ((_a = config.walletManagement) === null || _a === void 0 ? void 0 : _a.switchChain) {
-            const signer = yield config.walletManagement.switchChain(chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.switchChain) {
+            const signer = yield walletManagement.switchChain(chainId);
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
+            return true;
         }
         return walletSwitchChain(chainId);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        if ((_b = config.walletManagement) === null || _b === void 0 ? void 0 : _b.addChain) {
-            return config.walletManagement.addChain(chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.addChain) {
+            return walletManagement.addChain(chainId);
         }
         return walletAddChain(chainId);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-        if ((_c = config.walletManagement) === null || _c === void 0 ? void 0 : _c.addToken) {
-            return config.walletManagement.addToken(token, chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.addToken) {
+            return walletManagement.addToken(token, chainId);
         }
         return switchChainAndAddToken(chainId, token);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (config.walletManagement) {
-                const account = yield extractAccountFromSigner(config.walletManagement.signer);
-                setAccount(account);
-            }
-            else {
-                const account = yield extractAccountFromSigner(signer);
-                setAccount(account);
-            }
+            var _a;
+            const account = yield extractAccountFromSigner((_a = walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer) !== null && _a !== void 0 ? _a : signer);
+            setAccount(account);
         });
         updateAccount();
-    }, [signer, config.walletManagement]);
+    }, [signer, walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,
@@ -93,7 +84,7 @@ export const WalletProvider = ({ children }) => {
     }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
-const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
+export const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
     return ({
         address: (yield (signer === null || signer === void 0 ? void 0 : signer.getAddress())) || undefined,
         isActive: (signer && !!(yield signer.getAddress()) === null) || !!signer,

package/providers/WidgetProvider/WidgetProvider.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId, getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useEffect, useMemo } from 'react';
 import { updateLiFiConfig } from '../../config/lifi';
+import { useWallet } from '../WalletProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };
@@ -23,13 +24,15 @@ const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "integrator"]);
+    const { account } = useWallet();
     const value = useMemo(() => {
+        var _a;
         try {
             return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
                     ? fromChain
                     : typeof fromChain === 'string'
                         ? getChainByKey(fromChain.toLowerCase()).id
-                        : ChainId.ETH, toChain: typeof toChain === 'number'
+                        : (_a = account.chainId) !== null && _a !== void 0 ? _a : ChainId.ETH, toChain: typeof toChain === 'number'
                     ? toChain
                     : typeof toChain === 'string'
                         ? getChainByKey(toChain.toLowerCase()).id
@@ -39,7 +42,7 @@ export const WidgetProvider = (_a) => {
             console.warn(e);
             return config;
         }
-    }, [config, fromChain, fromToken, toChain, toToken]);
+    }, [account.chainId, config, fromChain, fromToken, toChain, toToken]);
     useEffect(() => {
         updateLiFiConfig({
             defaultRouteOptions: {

package/stores/route/types.d.ts

@@ -5,6 +5,7 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
+    deleteRoutes: () => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {

package/stores/route/useRouteStore.js

@@ -35,18 +35,6 @@ export const useRouteStore = create()(persist(immer((set) => ({
         }
     }),
     restartRoute: (routeId) => set((state) => {
-        var _a;
-        (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.route.steps.forEach((step) => {
-            var _a, _b;
-            const stepHasFailed = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED';
-            // check if the step has been cancelled which is a "failed" state
-            const stepHasBeenCancelled = (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.some((process) => process.status === 'CANCELLED');
-            if (step.execution && (stepHasFailed || stepHasBeenCancelled)) {
-                step.execution.status = 'RESUME';
-                // remove last (failed) process
-                step.execution.process.pop();
-            }
-        });
         state.routes[routeId].status = 'loading';
     }),
     deleteRoute: (routeId) => set((state) => {
@@ -54,6 +42,9 @@ export const useRouteStore = create()(persist(immer((set) => ({
             delete state.routes[routeId];
         }
     }),
+    deleteRoutes: () => set((state) => {
+        state.routes = {};
+    }),
 })), {
     name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),

package/types/widget.d.ts

@@ -5,7 +5,7 @@ import { Signer } from 'ethers';
 import { CSSProperties } from 'react';
 export declare type Appearance = PaletteMode | 'auto';
 export declare type ThemeConfig = {
-    palette?: PaletteOptions;
+    palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
     shape?: Shape;
     typography?: TypographyOptions;
 };

package/utils/colors.d.ts

@@ -1,2 +1,3 @@
 import { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
+export declare const getContrastTextColor: (theme: Theme, background?: string) => string;

package/utils/colors.js

@@ -1,3 +1,8 @@
+import { getContrastRatio } from '@mui/material/styles';
+import { dark, light } from '@mui/material/styles/createPalette';
 export const getContrastAlphaColor = (theme, alpha) => theme.palette.mode === 'light'
     ? `rgb(0 0 0 / ${alpha})`
     : `rgb(255 255 255 / ${alpha})`;
+export const getContrastTextColor = (theme, background) => getContrastRatio(dark.text.primary, background !== null && background !== void 0 ? background : theme.palette.primary.main) >= 3
+    ? dark.text.primary
+    : light.text.primary;