@lifi/widget 1.21.0 → 1.22.0

package/pages/SelectChainPage/SelectChainPage.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
-export declare const SelectChainPage: React.FC<Partial<SwapFormTypeProps>>;
+export declare const SelectChainPage: React.FC<SwapFormTypeProps>;

package/pages/SelectChainPage/SelectChainPage.js

@@ -9,15 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
-import { useLocation } from 'react-router-dom';
 import { useChainSelect } from '../../components/ChainSelect';
 import { useNavigateBack } from '../../hooks';
 import { ListItemButton, ListItemText } from './SelectChainPage.style';
-export const SelectChainPage = ({ formType, }) => {
+export const SelectChainPage = ({ formType }) => {
     const { navigateBack } = useNavigateBack();
-    const { state } = useLocation();
-    const formTypeState = (state === null || state === void 0 ? void 0 : state.formType) || formType;
-    const { chains, setCurrentChain } = useChainSelect(formTypeState);
+    const { chains, setCurrentChain } = useChainSelect(formType);
     const handleClick = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
         setCurrentChain(chainId);
         navigateBack();

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SelectNativeTokenPage: React.FC<SwapFormTypeProps>;

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, List, ListItemAvatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TokenAvatar } from '../../components/TokenAvatar';
+import { useTokenSelect } from '../../components/TokenList';
+import { useChains, useNavigateBack } from '../../hooks';
+import { ListItemButton, ListItemText } from './SelectNativeTokenPage.style';
+export const SelectNativeTokenPage = ({ formType, }) => {
+    const { t } = useTranslation();
+    const { navigateBack } = useNavigateBack();
+    const { chains } = useChains();
+    const selectToken = useTokenSelect(formType, navigateBack);
+    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }), chain.id))) })) })));
+};

package/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/pages/SelectNativeTokenPage/SelectNativeTokenPage.style.js

@@ -0,0 +1,17 @@
+import { ListItemButton as MuiListItemButton, ListItemText as MuiListItemText, } from '@mui/material';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));
+export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/pages/SelectNativeTokenPage/index.d.ts

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

package/pages/SelectNativeTokenPage/index.js

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

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/AdvancedPreferences.d.ts

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

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?: "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/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/LanguageSelect.d.ts

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

package/pages/SettingsPage/LanguageSelect.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { FormControl, MenuItem } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { useWidgetConfig } from '../../providers';
+import { useSettings, useSettingsStore } from '../../stores';
+export const LanguageSelect = () => {
+    var _a;
+    const { t } = useTranslation();
+    const { languages, disableI18n } = useWidgetConfig();
+    const { i18n } = useTranslation();
+    const setValue = useSettingsStore((state) => state.setValue);
+    const { language } = 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 (_jsxs(Card, Object.assign({ mb: 2 }, { children: [_jsx(CardTitle, { children: t(`language.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDownIcon, dense: true }, { children: filteredLanguages.map((lng) => {
+                        return (_jsx(MenuItem, Object.assign({ value: lng }, { children: t('language.name', { lng }) }), lng));
+                    }) })) }))] })));
+};

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/SettingsPage.js

@@ -3,9 +3,10 @@ import { Box, Container } from '@mui/material';
 import { AdvancedPreferences } from './AdvancedPreferences';
 import { ColorSchemeButtonGroup } from './ColorSchemeButtonGroup';
 import { GasPriceSelect } from './GasPriceSelect';
+import { LanguageSelect } from './LanguageSelect';
 import { RoutePrioritySelect } from './RoutePrioritySelect';
 import { ShowDestinationWallet } from './ShowDestinationWallet';
 import { SlippageInput } from './SlippageInput';
 export const SettingsPage = () => {
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(ShowDestinationWallet, {}), _jsx(AdvancedPreferences, {})] })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(LanguageSelect, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(ShowDestinationWallet, {}), _jsx(AdvancedPreferences, {})] })));
 };

package/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.js

@@ -2,11 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
+import { useWidgetConfig } from '../../providers';
 import { useSettings, useSettingsStore } from '../../stores';
+import { DisabledUI } from '../../types';
 export const ShowDestinationWallet = () => {
     const { t } = useTranslation();
+    const { disabledUI } = useWidgetConfig();
     const setValue = useSettingsStore((state) => state.setValue);
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress)) {
+        return null;
+    }
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);
     };

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -24,7 +24,7 @@ import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
     var _a, _b;
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
@@ -50,7 +50,9 @@ export const SwapDetailsPage = () => {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pb: 1 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), _jsx(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: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(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 (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1

package/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -7,7 +7,7 @@ import { Token, TokenDivider } from '../../components/Token';
 import { navigationRoutes } from '../../utils';
 export const SwapHistoryItem = ({ route }) => {
     var _a, _b, _c, _d, _e;
-    const { t } = useTranslation();
+    const { i18n } = useTranslation();
     const navigate = useNavigate();
     const handleClick = () => {
         navigate(navigationRoutes.swapDetails, {
@@ -19,5 +19,7 @@ export const SwapHistoryItem = ({ route }) => {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pt: 1.75, px: 2 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(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: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(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 })] }))] })));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -43,8 +43,8 @@ export 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,
@@ -76,5 +76,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(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] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

package/pages/SwapPage/TokenValueBottomSheet.js

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

package/providers/I18nProvider/I18nProvider.d.ts

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

package/providers/I18nProvider/I18nProvider.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { useMemo } from 'react';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import * as supportedLanguages from '../../i18n';
+import { useSettings } from '../../stores';
+import { deepMerge } from '../../utils';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+export const I18nProvider = ({ children, }) => {
+    const { languageResources, languages, disableI18n } = useWidgetConfig();
+    const { language } = useSettings(['language']);
+    const i18n = useMemo(() => {
+        var _a, _b;
+        let resources = Object.keys(supportedLanguages)
+            .filter((lng) => isItemAllowed(lng, languages))
+            .reduce((resources, lng) => {
+            resources[lng] = {
+                translation: (languageResources === null || languageResources === void 0 ? void 0 : languageResources[lng])
+                    ? 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.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(LanguageDetector);
+        }
+        i18n.use(initReactI18next).init();
+        return i18n;
+    }, [disableI18n, language, languageResources, languages]);
+    return _jsx(I18nextProvider, Object.assign({ i18n: i18n }, { children: children }));
+};

package/providers/I18nProvider/index.d.ts

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

package/providers/I18nProvider/index.js

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

package/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/providers/I18nProvider/types.js

@@ -0,0 +1 @@
+export {};

package/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/providers/WidgetProvider/utils.js

@@ -1,9 +1,9 @@
-export const isItemAllowed = (chainId, chains, 
+export 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)));
 };

package/providers/index.d.ts

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

package/providers/index.js

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

package/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/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;