@lifi/widget 2.0.0-beta.1 → 2.0.0-beta.10

package/cjs/i18n/zh.json

@@ -12,6 +12,7 @@
     "done": "已完成",
     "getGas": "开始兑换燃气费",
     "hide": "隐藏",
+    "learnMore": "了解更多",
     "lifiSwap": "LI.FI兑换",
     "light": "浅色主题",
     "max": "最大",
@@ -29,6 +30,7 @@
     "startSwap": "开始兑换",
     "swap": "兑换",
     "tryAgain": "重试",
+    "viewCoverage": "查看我们的覆盖范围",
     "viewOnExplorer": "在区块链浏览器上查看"
   },
   "format": {
@@ -104,14 +106,22 @@
     "gasFeeEstimated": "预估燃气费",
     "gasFeePaid": "已支付燃气费",
     "inProgress": "进行中",
+    "insurance": {
+      "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
+      "insure": "为跨链代币提供100%的保障",
+      "insured": "您已经对100%的跨链代币投保:",
+      "slippageError": "目标链代币的滑点错误"
+    },
     "info": {
       "message": {
+        "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
         "emptyActiveSwaps": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
         "emptySwapHistory": "兑换记录只存储在本地，如果你清除浏览器数据，他们将被删除。",
         "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
         "routeNotFound": "试试另一个代币组合。"
       },
       "title": {
+        "autoRefuel": "获得燃气费",
         "emptyActiveSwaps": "没有正在进行的兑换",
         "emptySwapHistory": "没有兑换记录",
         "routeNotFound": "没有可用的路由"
@@ -154,6 +164,7 @@
     "quotedAmount": "报价金额",
     "rateChange": "波动率",
     "receiving": "接收",
+    "refuelStepDetails": "通过 {{tool}} 获取燃气费",
     "routes": "你会收到",
     "selectChain": "网络",
     "selectChainAndToken": "选择链和代币",
@@ -162,6 +173,7 @@
     "sendToWallet": "发送到另外的钱包",
     "sentToAddress": "发送到{{address}}",
     "stepBridge": "跨链",
+    "stepDetails": "通过 LI.FI {{tool}}",
     "stepSwap": "兑换",
     "stepSwapAndBridge": "兑换和跨链",
     "success": {
@@ -180,11 +192,13 @@
     "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
     "swapping": "兑换中",
     "tags": {
-      "ALTERNATIVE": "可用",
-      "CHEAPEST": "便宜",
-      "FASTEST": "快捷",
-      "RECOMMENDED": "推荐",
-      "SAFEST": "安全"
+      "cheapest": "便宜的",
+      "fastest": "快速的",
+      "insurable": "可保性",
+      "insurance": "保险",
+      "insured": "受保的",
+      "recommended": "建议的",
+      "safest": "最佳/安全"
     },
     "to": "到",
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
@@ -197,8 +211,8 @@
         "deleteActiveSwaps": "正在进行的兑换记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
         "deleteSwapHistory": "兑换记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
         "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
-        "insufficientFunds": "你没有足够的资金来执行这笔兑换。",
-        "insufficientGas": "你至少需要：",
+        "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+        "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
         "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
         "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
       },
@@ -207,13 +221,14 @@
         "deleteSwap": "确定要删除这个兑换记录？",
         "deleteSwapHistory": "确定要清空兑换记录？",
         "highValueLoss": "大额资金损失",
-        "insufficientGas": "燃料费不足",
+        "insufficientGas": "燃气费不足",
         "rateChanged": "兑换比例变动",
         "resetSettings": "确定要恢复默认设置吗?"
       }
     }
   },
   "tooltip": {
+    "additionalProviderFee": "跨链和交易所的手续费。",
     "estimatedNetworkFee": "预估网络手续费。",
     "estimatedTime": "预计兑换的执行时间（分钟）。",
     "notFound": {

package/cjs/icons/InsuraceLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/cjs/icons/LiFiFullLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/cjs/icons/LiFiLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/cjs/icons/LiFiToolLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/cjs/index.d.ts

@@ -6,4 +6,4 @@ export * from './config/version';
 export { useWidgetEvents, widgetEvents } from './hooks';
 export { useWallet } from './providers/WalletProvider';
 export * from './types';
-export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
+export declare const LiFiWidget: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -15,9 +15,11 @@ const SelectTokenPage = ({ formType }) => {
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
     const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
+    const swapOnly = (0, hooks_1.useSwapOnly)();
     (0, react_1.useLayoutEffect)(() => {
         setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
+    const hideChainSelect = swapOnly && formType === 'to';
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [!hideChainSelect ? (0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: !hideChainSelect ? 2 : 0, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

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

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

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

package/cjs/pages/SettingsPage/LanguageSelect.js

@@ -27,7 +27,7 @@ const LanguageSelect = () => {
     if (filteredLanguages.length <= 1) {
         return null;
     }
-    const value = filteredLanguages.includes(language || i18n.resolvedLanguage)
+    const value = filteredLanguages.includes(language || i18n.resolvedLanguage || '')
         ? language || i18n.resolvedLanguage
         : languages?.default || languages?.allow?.[0];
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { mb: 2, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDown_1.default, dense: true, children: filteredLanguages.map((lng) => {

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

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

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

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

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

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -10,16 +10,20 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
+const ContractComponent_1 = require("../../components/ContractComponent");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state?.routeId], store.deleteRoute], shallow_1.shallow);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -53,9 +57,9 @@ const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), variant === 'nft' ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -47,7 +47,7 @@ const ExchangeRateBottomSheetContent = ({ data, 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, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -23,6 +23,7 @@ const StatusBottomSheet = ({ status, route, }) => {
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { variant, contractComponent, contractCompactComponent } = (0, providers_1.useWidgetConfig)();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
         amount: route.steps.at(-1)?.execution?.toAmount ??
@@ -33,6 +34,7 @@ const StatusBottomSheet = ({ status, route, }) => {
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(providers_1.SwapFormKey.FromAmount, '');
+        setValue(providers_1.SwapFormKey.ToAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
@@ -71,13 +73,16 @@ const StatusBottomSheet = ({ status, route, }) => {
     let handlePrimaryButton = handleDone;
     switch (status) {
         case stores_1.RouteExecutionStatus.Done: {
-            title = t('swap.success.title.swapSuccessful');
+            title =
+                variant === 'nft'
+                    ? t('swap.success.title.purchaseSuccessful')
+                    : t('swap.success.title.swapSuccessful');
             if (token) {
                 primaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                    amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             handlePrimaryButton = handleDone;
@@ -91,10 +96,10 @@ const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                    amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             handlePrimaryButton = handlePartialDone;
@@ -108,10 +113,10 @@ const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                    amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             break;
@@ -142,8 +147,9 @@ const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(Done_1.default, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
-                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error" })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage }), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+    const showContractComponent = variant === 'nft' && (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [!showContractComponent ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(Done_1.default, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
+                                (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error" })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent || contractComponent) : ((0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === stores_1.RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/cjs/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -2,7 +2,7 @@
 import type { Theme } from '@mui/material';
 import { RouteExecutionStatus } from '../../stores';
 type StatusColor = RouteExecutionStatus | 'warning';
-export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+export declare const CenterContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;

package/cjs/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconCircle = exports.IconContainer = void 0;
+exports.IconCircle = exports.CenterContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const stores_1 = require("../../stores");
@@ -18,7 +18,7 @@ const getStatusColor = (status, theme) => {
             return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
     }
 };
-exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+exports.CenterContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     display: 'grid',
     placeItems: 'center',
     position: 'relative',

package/cjs/pages/SwapPage/SwapPage.js

@@ -8,20 +8,25 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
+const ContractComponent_1 = require("../../components/ContractComponent");
 const GasMessage_1 = require("../../components/GasMessage");
 const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const events_1 = require("../../types/events");
+const utils_1 = require("../../utils");
 const ExchangeRateBottomSheet_1 = require("./ExchangeRateBottomSheet");
 const StartSwapButton_1 = require("./StartSwapButton");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
+const utils_2 = require("./utils");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const emitter = (0, hooks_1.useWidgetEvents)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { variant, insurance } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
@@ -29,21 +34,32 @@ const SwapPage = () => {
     const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
     const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
         routeId: routeId,
-        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
+        onAcceptExchangeRateUpdate,
     });
-    const handleExecuteRoute = (0, react_1.useCallback)(() => {
+    const tokenValueLossThresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
+    const handleExecuteRoute = () => {
         if (tokenValueBottomSheetRef.current?.isOpen()) {
+            if (route) {
+                emitter.emit(events_1.WidgetEvent.RouteHighValueLoss, {
+                    fromAmountUsd: route.fromAmountUSD,
+                    gasCostUSD: route.gasCostUSD,
+                    toAmountUSD: route.toAmountUSD,
+                    valueLoss: (0, utils_2.calcValueLoss)(route),
+                });
+            }
             tokenValueBottomSheetRef.current?.close();
         }
         executeRoute();
         setValue(providers_1.SwapFormKey.FromAmount, '');
-    }, [executeRoute, setValue]);
+    };
     const handleSwapClick = async () => {
         if (status === stores_1.RouteExecutionStatus.Idle) {
-            const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
-            if (thresholdExceeded) {
+            if (tokenValueLossThresholdExceeded && variant !== 'nft') {
                 tokenValueBottomSheetRef.current?.open();
             }
             else {
@@ -61,9 +77,14 @@ const SwapPage = () => {
     const getSwapButtonText = () => {
         switch (status) {
             case stores_1.RouteExecutionStatus.Idle:
-                return variant !== 'refuel'
-                    ? t(`button.startSwap`)
-                    : t(`button.startGasSwap`);
+                switch (variant) {
+                    case 'nft':
+                        return t('button.buyNow');
+                    case 'refuel':
+                        return t('button.startGasSwap');
+                    default:
+                        return t('button.startSwap');
+                }
             case stores_1.RouteExecutionStatus.Failed:
                 return t('button.tryAgain');
             default:
@@ -81,10 +102,10 @@ const SwapPage = () => {
     const insuranceCoverageId = route?.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
-    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), variant === 'nft' ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2 }) : null, route && insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
                 status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route && tokenValueLossThresholdExceeded && variant !== 'nft' ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -4,12 +4,12 @@ exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const BottomSheet_1 = require("../../components/BottomSheet");
 const hooks_1 = require("../../hooks");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+const utils_1 = require("./utils");
 exports.TokenValueBottomSheet = (0, react_1.forwardRef)(({ route, onContinue, onCancel }, ref) => {
     const handleCancel = () => {
         ref.current?.close();
@@ -21,23 +21,18 @@ 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, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { 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)
-                                .round(2, big_js_1.default.roundUp)
-                                .toString(), "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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.jsx)(material_1.Typography, { fontWeight: 600, children: (0, utils_1.calcValueLoss)(route) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };
 const getTokenValueLossThreshold = (route) => {
     if (!route) {
         return false;
     }
-    const fromAmountUSD = (0, big_js_1.default)(route?.fromAmountUSD || 0);
-    const toAmountUSD = (0, big_js_1.default)(route?.toAmountUSD || 0);
-    const gasCostUSD = (0, big_js_1.default)(route?.gasCostUSD || 0);
-    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
+    const fromAmountUSD = Number(route.fromAmountUSD || 0);
+    const toAmountUSD = Number(route.toAmountUSD || 0);
+    const gasCostUSD = Number(route.gasCostUSD || 0);
+    if (!fromAmountUSD && !toAmountUSD) {
         return false;
     }
-    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
+    return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
 };
 exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/pages/SwapPage/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const calcValueLoss: (route: Route) => string;

package/cjs/pages/SwapPage/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcValueLoss = void 0;
+const calcValueLoss = (route) => {
+    return `${((Number(route.toAmountUSD || 0) /
+        (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
+        1) *
+        100).toFixed(2)}%`;
+};
+exports.calcValueLoss = calcValueLoss;

package/cjs/providers/I18nProvider/I18nProvider.js

@@ -11,7 +11,7 @@ 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 { languageResources, languages, disableLanguageDetector } = (0, WidgetProvider_1.useWidgetConfig)();
     const { language } = (0, stores_1.useSettings)(['language']);
     const i18n = (0, react_1.useMemo)(() => {
         let resources = Object.keys(supportedLanguages)
@@ -50,12 +50,12 @@ const I18nProvider = ({ children, }) => {
                 caches: [],
             },
         });
-        if (!language && !languages?.default && !disableI18n) {
+        if (!language && !languages?.default && !disableLanguageDetector) {
             i18n = i18n.use(i18next_browser_languagedetector_1.default);
         }
         i18n.use(react_i18next_1.initReactI18next).init();
         return i18n;
-    }, [disableI18n, language, languageResources, languages]);
+    }, [disableLanguageDetector, language, languageResources, languages]);
     return (0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n, children: children });
 };
 exports.I18nProvider = I18nProvider;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -4,6 +4,7 @@ exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const version_1 = require("../../config/version");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;
 const SDKContext = (0, react_1.createContext)(null);
@@ -27,6 +28,7 @@ const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new sdk_1.LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version_1.version,
                 ...config,
             });
         }

package/cjs/providers/SwapFormProvider/FormUpdater.js

@@ -26,6 +26,7 @@ const FormUpdater = ({ defaultValues }) => {
         const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
         const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.FromChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
             if (isFromAmountTouched) {
@@ -33,6 +34,7 @@ const FormUpdater = ({ defaultValues }) => {
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.ToChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
         }
@@ -43,6 +45,7 @@ const FormUpdater = ({ defaultValues }) => {
         fromChain,
         getFieldState,
         getValues,
+        resetField,
         setValue,
         toChain,
     ]);