@lifi/widget 1.21.0 → 1.22.1

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectNativeTokenPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const TokenAvatar_1 = require("../../components/TokenAvatar");
+const TokenList_1 = require("../../components/TokenList");
+const hooks_1 = require("../../hooks");
+const SelectNativeTokenPage_style_1 = require("./SelectNativeTokenPage.style");
+const SelectNativeTokenPage = ({ formType, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { chains } = (0, hooks_1.useChains)();
+    const selectToken = (0, TokenList_1.useTokenSelect)(formType, navigateBack);
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(SelectNativeTokenPage_style_1.ListItemButton, Object.assign({ onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(SelectNativeTokenPage_style_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }), chain.id))) })) })));
+};
+exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    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" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.style.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemText = exports.ListItemButton = void 0;
+const material_1 = require("@mui/material");
+const ListItemText_1 = require("@mui/material/ListItemText");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+    },
+}));
+exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+    [`.${ListItemText_1.listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/cjs/pages/SelectNativeTokenPage/index.d.ts

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

package/cjs/pages/SelectNativeTokenPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SelectNativeTokenPage"), exports);

package/cjs/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?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "standard" | undefined;
+    color?: "error" | "success" | "warning" | "primary" | "secondary" | "info" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/cjs/pages/SettingsPage/LanguageSelect.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LanguageSelect: React.FC;

package/cjs/pages/SettingsPage/LanguageSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../../components/Card");
+const Select_1 = require("../../components/Select");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const LanguageSelect = () => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { languages, disableI18n } = (0, providers_1.useWidgetConfig)();
+    const { i18n } = (0, react_i18next_1.useTranslation)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { language } = (0, stores_1.useSettings)(['language']);
+    if (disableI18n) {
+        return null;
+    }
+    const handleChangeLanguage = (event) => {
+        const language = event.target.value;
+        setValue('language', language);
+        i18n.changeLanguage(language);
+    };
+    const filteredLanguages = Object.keys(i18n.store.data).sort();
+    if (filteredLanguages.length <= 1) {
+        return null;
+    }
+    const value = filteredLanguages.includes(language || i18n.resolvedLanguage)
+        ? language || i18n.resolvedLanguage
+        : (languages === null || languages === void 0 ? void 0 : languages.default) || ((_a = languages === null || languages === void 0 ? void 0 : languages.allow) === null || _a === void 0 ? void 0 : _a[0]);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: filteredLanguages.map((lng) => {
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: lng }, { children: t('language.name', { lng }) }), lng));
+                    }) })) }))] })));
+};
+exports.LanguageSelect = LanguageSelect;

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -6,10 +6,11 @@ const material_1 = require("@mui/material");
 const AdvancedPreferences_1 = require("./AdvancedPreferences");
 const ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
 const GasPriceSelect_1 = require("./GasPriceSelect");
+const LanguageSelect_1 = require("./LanguageSelect");
 const RoutePrioritySelect_1 = require("./RoutePrioritySelect");
 const ShowDestinationWallet_1 = require("./ShowDestinationWallet");
 const SlippageInput_1 = require("./SlippageInput");
 const SettingsPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(LanguageSelect_1.LanguageSelect, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
 };
 exports.SettingsPage = SettingsPage;

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ShowDestinationWallet: () => JSX.Element;
+export declare const ShowDestinationWallet: () => JSX.Element | null;

package/cjs/pages/SettingsPage/ShowDestinationWallet.js

@@ -5,11 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const Switch_1 = require("../../components/Switch");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const types_1 = require("../../types");
 const ShowDestinationWallet = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress)) {
+        return null;
+    }
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);
     };

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -27,7 +27,7 @@ const stores_1 = require("../../stores");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
     var _a, _b;
-    const { t } = (0, react_i18next_1.useTranslation)();
+    const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
@@ -53,7 +53,9 @@ const SwapDetailsPage = () => {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
+                }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
                 var _a, _b;
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -10,7 +10,7 @@ const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
 const SwapHistoryItem = ({ route }) => {
     var _a, _b, _c, _d, _e;
-    const { t } = (0, react_i18next_1.useTranslation)();
+    const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
         navigate(utils_1.navigationRoutes.swapDetails, {
@@ -22,6 +22,8 @@ const SwapHistoryItem = ({ route }) => {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
+                }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
 };
 exports.SwapHistoryItem = SwapHistoryItem;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -46,8 +46,8 @@ const StatusBottomSheet = ({ status, route, }) => {
     let message;
     switch (status) {
         case 'success':
-            title = t('swap.success.title.fundsReceived');
-            message = t('swap.success.message.fundsReceived', {
+            title = t('swap.success.title.swapSuccessful');
+            message = t('swap.success.message.swapSuccessful', {
                 amount: token === null || token === void 0 ? void 0 : token.amount,
                 tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
                 chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
@@ -79,6 +79,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/SwapPage.js

@@ -31,9 +31,7 @@ const SwapPage = () => {
     const { state } = (0, react_router_dom_1.useLocation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
-    const { setValue,
-    // formState: { isValid, isValidating },
-     } = (0, react_hook_form_1.useFormContext)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
     const handleExecuteRoute = (0, react_1.useCallback)(() => {
         var _a, _b;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -22,7 +22,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.fromAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.gasCostUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.toAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)(route.toAmountUSD || 0)
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('format.currency', { value: route.fromAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('format.currency', { value: route.gasCostUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('format.currency', { value: route.toAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)(route.toAmountUSD || 0)
                                 .div((0, big_js_1.default)(route.fromAmountUSD || 0).plus((0, big_js_1.default)(route.gasCostUSD || 0)))
                                 .minus(1)
                                 .mul(100)

package/cjs/providers/I18nProvider/I18nProvider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const I18nProvider: React.FC<React.PropsWithChildren>;

package/cjs/providers/I18nProvider/I18nProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.I18nProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const i18next_1 = require("i18next");
+const i18next_browser_languagedetector_1 = require("i18next-browser-languagedetector");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const supportedLanguages = require("../../i18n");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const WidgetProvider_1 = require("../WidgetProvider");
+const I18nProvider = ({ children, }) => {
+    const { languageResources, languages, disableI18n } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { language } = (0, stores_1.useSettings)(['language']);
+    const i18n = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        let resources = Object.keys(supportedLanguages)
+            .filter((lng) => (0, WidgetProvider_1.isItemAllowed)(lng, languages))
+            .reduce((resources, lng) => {
+            resources[lng] = {
+                translation: (languageResources === null || languageResources === void 0 ? void 0 : languageResources[lng])
+                    ? (0, utils_1.deepMerge)(supportedLanguages[lng], languageResources[lng])
+                    : supportedLanguages[lng],
+            };
+            return resources;
+        }, {});
+        if (languageResources) {
+            resources = Object.keys(languageResources).reduce((resources, lng) => {
+                if (!resources[lng]) {
+                    resources[lng] = {
+                        translation: languageResources[lng],
+                    };
+                }
+                return resources;
+            }, resources);
+        }
+        let i18n = i18next_1.default.createInstance({
+            lng: (languages === null || languages === void 0 ? void 0 : languages.default) || language,
+            fallbackLng: resources.en
+                ? 'en'
+                : (languages === null || languages === void 0 ? void 0 : languages.default) ||
+                    ((_a = languages === null || languages === void 0 ? void 0 : languages.allow) === null || _a === void 0 ? void 0 : _a[0]) ||
+                    ((_b = Object.keys(resources)) === null || _b === void 0 ? void 0 : _b[0]),
+            lowerCaseLng: true,
+            interpolation: {
+                escapeValue: false,
+            },
+            resources,
+            detection: {
+                caches: [],
+            },
+        });
+        if (!language && !(languages === null || languages === void 0 ? void 0 : languages.default) && !disableI18n) {
+            i18n = i18n.use(i18next_browser_languagedetector_1.default);
+        }
+        i18n.use(react_i18next_1.initReactI18next).init();
+        return i18n;
+    }, [disableI18n, language, languageResources, languages]);
+    return (0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, Object.assign({ i18n: i18n }, { children: children }));
+};
+exports.I18nProvider = I18nProvider;

package/cjs/providers/I18nProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './I18nProvider';
+export * from './types';

package/cjs/providers/I18nProvider/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./I18nProvider"), exports);
+__exportStar(require("./types"), exports);

package/cjs/providers/I18nProvider/types.d.ts

@@ -0,0 +1,16 @@
+import type * as languages from '../../i18n';
+export declare type PartialResource<T> = T extends object ? {
+    [P in keyof T]?: PartialResource<T[P]>;
+} : T;
+export declare type LanguageKey = keyof typeof languages;
+export declare type LanguageResources = {
+    [language in LanguageKey]?: PartialResource<typeof languages.en>;
+} | {
+    [language: string]: PartialResource<typeof languages.en>;
+};
+export declare type LanguageTranslationResource = {
+    [namespace in 'translation']: PartialResource<typeof languages.en>;
+};
+export declare type LanguageTranslationResources = {
+    [language: string]: LanguageTranslationResource;
+};

package/cjs/providers/I18nProvider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/providers/WidgetProvider/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const isItemAllowed: <T>(chainId: T, chains?: {
+export declare const isItemAllowed: <T>(itemId: T, items?: {
     allow?: T[] | undefined;
     deny?: T[] | undefined;
 } | undefined, disabledChains?: T[] | undefined) => boolean;

package/cjs/providers/WidgetProvider/utils.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isItemAllowed = void 0;
-const isItemAllowed = (chainId, chains, 
+const isItemAllowed = (itemId, items, 
 /** @deprecated Remove in the next major release */
 disabledChains) => {
     var _a, _b;
-    if ((_a = chains === null || chains === void 0 ? void 0 : chains.allow) === null || _a === void 0 ? void 0 : _a.length) {
-        return chains.allow.includes(chainId);
+    if ((_a = items === null || items === void 0 ? void 0 : items.allow) === null || _a === void 0 ? void 0 : _a.length) {
+        return items.allow.includes(itemId);
     }
-    return !((disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chainId)) || ((_b = chains === null || chains === void 0 ? void 0 : chains.deny) === null || _b === void 0 ? void 0 : _b.includes(chainId)));
+    return !((disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(itemId)) || ((_b = items === null || items === void 0 ? void 0 : items.deny) === null || _b === void 0 ? void 0 : _b.includes(itemId)));
 };
 exports.isItemAllowed = isItemAllowed;

package/cjs/providers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './I18nProvider';
 export * from './SDKProvider';
 export * from './SwapFormProvider';
 export * from './TelemetryProvider';

package/cjs/providers/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./I18nProvider"), exports);
 __exportStar(require("./SDKProvider"), exports);
 __exportStar(require("./SwapFormProvider"), exports);
 __exportStar(require("./TelemetryProvider"), exports);

package/cjs/stores/settings/types.d.ts

@@ -8,6 +8,7 @@ export interface SettingsState {
     advancedPreferences: boolean;
     appearance: Appearance;
     gasPrice: string;
+    language?: string;
     routePriority: Order;
     showDestinationWallet: boolean;
     slippage: string;

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -10,6 +10,7 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             advancedPreferences: boolean;
             appearance: import("../..").Appearance;
             gasPrice: string;
+            language?: string | undefined;
             routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
             showDestinationWallet: boolean;
             slippage: string;
@@ -29,6 +30,7 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             advancedPreferences: boolean;
             appearance: import("../..").Appearance;
             gasPrice: string;
+            language?: string | undefined;
             routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
             showDestinationWallet: boolean;
             slippage: string;

package/cjs/types/widget.d.ts

@@ -3,7 +3,15 @@ import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
 import type { CSSProperties, RefObject } from 'react';
-export declare type WidgetVariant = 'default' | 'expandable' | 'drawer';
+import type { LanguageKey, LanguageResources } from '../providers';
+export declare type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
+export declare enum DisabledUI {
+    FromToken = "fromToken",
+    ToToken = "toToken",
+    FromAmount = "fromAmount",
+    ToAddress = "toAddress"
+}
+export declare type DisabledUIType = `${DisabledUI}`;
 export declare type Appearance = PaletteMode | 'auto';
 export declare type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
@@ -25,17 +33,15 @@ export interface WidgetConfig {
     toToken?: string;
     toAddress?: string;
     fromAmount?: number | string;
+    integrator?: string;
+    variant?: WidgetVariant;
     appearance?: Appearance;
     theme?: ThemeConfig;
     containerStyle?: CSSProperties;
     disableAppearance?: boolean;
     disableTelemetry?: boolean;
-    /** @deprecated Use chains.deny instead */
-    disabledChains?: number[];
-    /** @deprecated Use tokens.featured instead */
-    featuredTokens?: Token[];
-    integrator?: string;
-    variant?: WidgetVariant;
+    disabledUI?: DisabledUIType[];
+    useRecommendedRoute?: boolean;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
     buildSwapUrl?: boolean;
@@ -56,6 +62,17 @@ export interface WidgetConfig {
         allow?: Token[];
         deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
     };
+    languages?: {
+        default?: LanguageKey;
+        allow?: LanguageKey[];
+        deny?: LanguageKey[];
+    };
+    languageResources?: LanguageResources;
+    disableI18n?: boolean;
+    /** @deprecated Use chains.deny instead */
+    disabledChains?: number[];
+    /** @deprecated Use tokens.featured instead */
+    featuredTokens?: Token[];
 }
 export declare type WidgetProps = {
     elementRef?: RefObject<HTMLDivElement>;

package/cjs/types/widget.js

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledUI = void 0;
+var DisabledUI;
+(function (DisabledUI) {
+    DisabledUI["FromToken"] = "fromToken";
+    DisabledUI["ToToken"] = "toToken";
+    DisabledUI["FromAmount"] = "fromAmount";
+    DisabledUI["ToAddress"] = "toAddress";
+})(DisabledUI = exports.DisabledUI || (exports.DisabledUI = {}));

package/cjs/utils/deepMerge.d.ts

@@ -0,0 +1 @@
+export declare const deepMerge: (...objects: any[]) => any;

package/cjs/utils/deepMerge.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deepMerge = void 0;
+const isObject = (obj) => obj && typeof obj === 'object';
+const deepMerge = (...objects) => {
+    return objects.reduce((prev, obj) => {
+        for (const key in obj) {
+            if (isObject(prev[key]) && isObject(obj[key])) {
+                prev[key] = (0, exports.deepMerge)(prev[key], obj[key]);
+            }
+            else {
+                prev[key] = obj[key];
+            }
+        }
+        return prev;
+    }, {});
+};
+exports.deepMerge = deepMerge;

package/cjs/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './colors';
 export * from './deepClone';
+export * from './deepMerge';
 export * from './elements';
 export * from './format';
 export * from './input';

package/cjs/utils/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./colors"), exports);
 __exportStar(require("./deepClone"), exports);
+__exportStar(require("./deepMerge"), exports);
 __exportStar(require("./elements"), exports);
 __exportStar(require("./format"), exports);
 __exportStar(require("./input"), exports);

package/cjs/utils/input.js

@@ -14,7 +14,9 @@ const fitInputText = (maxFontSize, minFontSize, element) => {
         mid = (high + low) >> 1;
         const fontSize = `${mid + 1}px`;
         element.style.fontSize = fontSize;
-        if (element.scrollWidth <= element.clientWidth) {
+        // scrollWidth has different rounding than clientWidth, remove 1px for consistency
+        const scrollWidth = element.scrollWidth - 1;
+        if (scrollWidth <= element.clientWidth) {
             size = mid;
             low = mid + 1;
         }

package/cjs/utils/navigationRoutes.d.ts

@@ -1,16 +1,17 @@
 export declare const navigationRoutes: {
     home: string;
+    activeSwaps: string;
+    fromChain: string;
+    fromToken: string;
     selectWallet: string;
     settings: string;
-    fromToken: string;
-    toToken: string;
-    fromChain: string;
-    toChain: string;
-    swapRoutes: string;
+    swapDetails: string;
     swapExecution: string;
     swapHistory: string;
-    activeSwaps: string;
-    swapDetails: string;
+    swapRoutes: string;
+    toChain: string;
+    toToken: string;
+    toTokenNative: string;
 };
 export declare const navigationRoutesValues: string[];
 export declare const stickyHeaderRoutes: string[];