@lifi/widget 2.0.0-beta.11 → 2.0.0-beta.13

package/cjs/i18n/vi.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "Tự động",
+    "buy": "Mua",
+    "buyNow": "Mua ngay bây giờ",
     "cancel": "Huỷ bỏ",
     "connectWallet": "Kết nối ví",
     "contactSupport": "Liên hệ hỗ trợ",
@@ -12,6 +14,7 @@
     "done": "Hoàn thành",
     "getGas": "Thiết lập gas",
     "hide": "Ẩn",
+    "learnMore": "Xem thêm",
     "lifiSwap": "LI.FI Swap",
     "light": "Sáng",
     "max": "Tối đa",
@@ -22,6 +25,7 @@
     "resetSettings": "Đặt lại cài đặt",
     "restartSwap": "Thiết lập lại",
     "reviewGasSwap": "Xem lại gas swap",
+    "reviewPurchase": "Đánh giá thanh toán",
     "reviewSwap": "Xem lại Swap",
     "seeDetails": "Xem chi tiết",
     "showAll": "Hiển thị tất cả",
@@ -29,6 +33,7 @@
     "startSwap": "Bắt đầu Swap",
     "swap": "Swap",
     "tryAgain": "Thử lại",
+    "viewCoverage": "Xem phạm vi bảo hiểm",
     "viewOnExplorer": "Xem tại Explorer"
   },
   "format": {
@@ -37,10 +42,14 @@
   },
   "header": {
     "activeSwaps": "Active swaps",
+    "bridge": "Bridge",
     "checkout": "Thanh toán",
     "from": "Swap từ",
     "gas": "Gas",
     "gasSwap": "Gas swap",
+    "payWith": "Thanh toán bằng",
+    "purchase": "Thanh toán",
+    "purchaseDetails": "Thông tin chi tiết",
     "routes": "Kết quả",
     "selectChain": "Chọn chain",
     "selectWallet": "Chọn ví",
@@ -73,6 +82,8 @@
     "currentAmount": "Số lượng hiện tại",
     "error": {
       "message": {
+        "allowanceRequired": "Chuyển số lượng {{tokenSymbol}} vượt quá mức cho phép hiện tại của bạn. Vui lòng tăng mức độ cho phép sử dụng token và thử lại.",
+        "insufficientFunds": "Bạn không có đủ gas để chi trả cho chi phí giao dịch.",
         "slippageThreshold": "Độ trượt giá lớn hơn ngưỡng xác định. Vui lòng yêu cầu một tuyến đường mới để nhận báo giá mới.",
         "transactionFailed": "Vui lòng kiểm tra block explorer để biết thêm thông tin.",
         "transactionNotSent": "Giao dịch chưa được gửi. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} tại {{chainName}} vẫn còn trong ví của bạn.",
@@ -80,10 +91,12 @@
         "unknown": "Vui lòng thử lại hoặc liên hệ hỗ trợ."
       },
       "title": {
+        "allowanceRequired": "Sự cho phép không đủ",
         "balanceIsTooLow": "Số dư quá thấp",
         "chainSwitch": "Yêu cầu đổi chain",
         "failed": "Việc Swap thất bại",
         "gasLimitIsTooLow": "Giới hạn gas quá thấp",
+        "insufficientFunds": "Không đủ tài sản",
         "slippageNotMet": "Điều kiện trượt giá không được đáp ứng",
         "transactionCanceled": "Giao dịch bị huỷ",
         "transactionFailed": "Giao dịch không thành công",
@@ -104,6 +117,12 @@
     "gasFeeEstimated": "phí Gas ước tính",
     "gasFeePaid": "phí Gas đã trả",
     "inProgress": "đang xử lý",
+    "insurance": {
+      "bridgeExploits": "Cầu trục trặc, bị hack hoặc bị khai thác",
+      "insure": "Bảo hiểm <strong>{{amount, number(maximumFractionDigits: 9)}}{{tokenSymbol}}</strong> trong quá trình vận chuyển.",
+      "insured": "Bạn đã bảo hiểm <strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> trong quá trình vận chuyển:",
+      "slippageError": "Lỗi trượt giá đối với token nhận được"
+    },
     "info": {
       "message": {
         "autoRefuel": "Gas trên {{chainName}} chain của bạn đang thấp. Để tiếp tục, bạn nên có thêm gas để hoàn thành việc swap.",
@@ -123,7 +142,6 @@
     "onChain": "tại {{chainName}}",
     "otherTokens": "Token khác",
     "ownedBy": "Được sở hữu bởi",
-    "payWith": "Trả bằng",
     "process": {
       "crossChain": {
         "actionRequired": "Vui lòng ký hoàn thành giao dịch",
@@ -131,6 +149,9 @@
         "pending": "Chờ giao dịch Bridge",
         "started": "Chuẩn bị giao dịch Bridge"
       },
+      "nft": {
+        "done": "NFT đã mua"
+      },
       "receivingChain": {
         "done": "Bridge thành công",
         "partial": "Bridge thành công 1 phần",
@@ -157,24 +178,27 @@
     "rateChange": "Thay đổi tỉ giá",
     "receiving": "Đang nhận",
     "refuelStepDetails": "Lấy gas thông qua {{tool}}",
-    "routes": "Bạn nhận",
-    "selectChain": "Chain",
+    "selectChain": "Chọn chain",
     "selectChainAndToken": "Chọn chain và token",
-    "selectToken": "Token",
+    "selectToken": "Chọn Token",
     "sendToAddress": "Gửi đến {{address}}",
     "sendToWallet": "Gửi đến địa chỉ khác",
     "sentToAddress": "Gửi đến {{address}}",
     "stepBridge": "Bridge",
+    "stepBridgeAndBuy": "Chuyển và mua",
     "stepDetails": "{{tool}} thông qua LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap và Bridge",
+    "stepSwapAndBuy": "Hoán đổi và mua",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Chúng tôi đã cố gắng hoàn thành việc hoán đổi, nhưng {{tool}} đã cạn thanh khoản cho token {{tokenSymbol}}.",
+        "purchaseSuccessful": "Hiện tại bạn đang nắm giữ {{assetName}} tại ví {{walletAddress}} trên chain {{chainName}}.",
         "swapSuccessful": "Hiện tại {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} trong ví {{walletAddress}} tại {{chainName}} chain."
       },
       "title": {
         "gasSwapSuccessful": "Gas Swap thành công",
+        "purchaseSuccessful": "Mua thành công",
         "refundIssued": "Đã Refund",
         "swapPartiallySuccessful": "Swap thành công một phần",
         "swapSuccessful": "Swap thành công"
@@ -195,7 +219,7 @@
     "to": "Đến",
     "tokenOnChain": "{{tokenSymbol}} tại {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} tại {{chainName}}",
-    "tokenSearch": "Tìm kiếm token",
+    "tokenSearch": "Tìm kiếm bằng tên token hoặc địa chỉ",
     "valueLoss": "Bạn sẽ mất",
     "walletAddressOrEns": "Địa chỉ hoặc tên miền ENS",
     "warning": {
@@ -229,6 +253,7 @@
     },
     "numberOfSteps": "Một số bước swap. Mỗi bước có thể chứa 1-2 giao dịch yêu cầu chữ ký.",
     "progressToNextUpdate": "Thông tin hiển thị sẽ tự động làm mới sau {{value}} giây. Bấm vào đây để cập nhật thủ công.",
+    "recommended": "Một tuyến đường giá rẻ cân bằng giữa sự phức tạp và dễ sử dụng.",
     "settingsModified": "Thiết lập (Đã điều chỉnh)"
   },
   "wallet": {

package/cjs/i18n/zh.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "自动",
+    "buy": "购买",
+    "buyNow": "立即购买",
     "cancel": "取消",
     "connectWallet": "关联钱包",
     "contactSupport": "联系技术支持",
@@ -23,6 +25,7 @@
     "resetSettings": "恢复默认设置",
     "restartSwap": "重新兑换",
     "reviewGasSwap": "查看燃气费兑换",
+    "reviewPurchase": "审查购买",
     "reviewSwap": "查看该兑换",
     "seeDetails": "查看详情",
     "showAll": "显示所有",
@@ -39,10 +42,14 @@
   },
   "header": {
     "activeSwaps": "正在进行的兑换",
+    "bridge": "跨链",
     "checkout": "支付",
     "from": "兑换自",
     "gas": "燃气费",
     "gasSwap": "燃气费兑换",
+    "payWith": "支付方式",
+    "purchase": "购买",
+    "purchaseDetails": "交易明细",
     "routes": "您获得",
     "selectChain": "选择网络",
     "selectWallet": "选择你的钱包",
@@ -75,6 +82,8 @@
     "currentAmount": "当前余额",
     "error": {
       "message": {
+        "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
+        "insufficientFunds": "您没有足够的燃气费支付该交易。",
         "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
         "transactionFailed": "请查看区块浏览器以了解更多信息。",
         "transactionNotSent": "交易未发送，不用担心，{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包里。",
@@ -82,10 +91,12 @@
         "unknown": "请再试一次或者联系支持。"
       },
       "title": {
+        "allowanceRequired": "余额不足",
         "balanceIsTooLow": "余额太低",
         "chainSwitch": "请切换当前网络",
         "failed": "兑换失败",
         "gasLimitIsTooLow": "燃气费设置过低",
+        "insufficientFunds": "资金不足",
         "slippageNotMet": "滑点未满足",
         "transactionCanceled": "交易取消",
         "transactionFailed": "交易失败",
@@ -108,8 +119,8 @@
     "inProgress": "进行中",
     "insurance": {
       "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
-      "insure": "为跨链代币提供100%的保障",
-      "insured": "您已经对100%的跨链代币投保:",
+      "insure": "在跨链期间为<strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> 投保。",
+      "insured": "在跨链期间为<strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> 投保。",
       "slippageError": "目标链代币的滑点错误"
     },
     "info": {
@@ -131,7 +142,6 @@
     "onChain": "在{{chainName}} 上",
     "otherTokens": "其他代币",
     "ownedBy": "属于",
-    "payWith": "付款方式为",
     "process": {
       "crossChain": {
         "actionRequired": "请签署此交易",
@@ -139,6 +149,9 @@
         "pending": "跨链交易进行中",
         "started": "准备执行跨链交易"
       },
+      "nft": {
+        "done": "NFT 已购买"
+      },
       "receivingChain": {
         "done": "跨链完成",
         "partial": "跨链部分完成",
@@ -165,24 +178,27 @@
     "rateChange": "波动率",
     "receiving": "接收",
     "refuelStepDetails": "通过 {{tool}} 获取燃气费",
-    "routes": "你会收到",
-    "selectChain": "网络",
+    "selectChain": "选择网络",
     "selectChainAndToken": "选择链和代币",
-    "selectToken": "代币",
+    "selectToken": "选择代币",
     "sendToAddress": "发送到{{address}}",
     "sendToWallet": "发送到另外的钱包",
     "sentToAddress": "发送到{{address}}",
     "stepBridge": "跨链",
+    "stepBridgeAndBuy": "跨链并购买",
     "stepDetails": "通过 LI.FI {{tool}}",
     "stepSwap": "兑换",
     "stepSwapAndBridge": "兑换和跨链",
+    "stepSwapAndBuy": "兑换并购买",
     "success": {
       "message": {
         "swapPartiallySuccessful": "我们试图完成兑换，但 {{tool}} 的 {{tokenSymbol}} 代币流动性不足。",
+        "purchaseSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产",
         "swapSuccessful": "现在有 {{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 在{{chainName}} 链上的{{walletAddress}} 钱包里。"
       },
       "title": {
         "gasSwapSuccessful": "燃气费兑换成功",
+        "purchaseSuccessful": "购买成功",
         "refundIssued": "退款已受理",
         "swapPartiallySuccessful": "兑换部分完成",
         "swapSuccessful": "兑换成功"
@@ -194,16 +210,16 @@
     "tags": {
       "cheapest": "便宜的",
       "fastest": "快速的",
-      "insurable": "可保性",
+      "insurable": "可投保",
       "insurance": "保险",
-      "insured": "受保的",
+      "insured": "受保中",
       "recommended": "建议的",
       "safest": "最佳/安全"
     },
     "to": "到",
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
     "tokenOnChainAmount": "{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}}",
-    "tokenSearch": "搜索代币",
+    "tokenSearch": "按代币名称或者地址搜索",
     "valueLoss": "资金损失",
     "walletAddressOrEns": "钱包地址或ENS名称",
     "warning": {
@@ -237,6 +253,7 @@
     },
     "numberOfSteps": "一系列的兑换步骤，每个步骤可能包含1-2个需要签名的交易。",
     "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
+    "recommended": "一个价格低廉但是兼顾复杂性和易用性的路由方案。",
     "settingsModified": "设置(已修改)"
   },
   "wallet": {

package/cjs/types/events.d.ts

@@ -6,12 +6,6 @@ export declare enum WidgetEvent {
     RouteExecutionFailed = "routeExecutionFailed",
     RouteHighValueLoss = "routeHighValueLoss"
 }
-export interface RouteHighValueLossUpdate {
-    fromAmountUsd: string;
-    gasCostUSD: string | undefined;
-    toAmountUSD: string;
-    valueLoss: string;
-}
 export type WidgetEvents = {
     routeExecutionStarted: Route;
     routeExecutionUpdated: RouteExecutionUpdate;
@@ -19,6 +13,12 @@ export type WidgetEvents = {
     routeExecutionFailed: RouteExecutionUpdate;
     routeHighValueLoss: RouteHighValueLossUpdate;
 };
+export interface RouteHighValueLossUpdate {
+    fromAmountUsd: string;
+    gasCostUSD?: string;
+    toAmountUSD: string;
+    valueLoss: string;
+}
 export interface RouteExecutionUpdate {
     route: Route;
     process: Process;

package/cjs/types/widget.d.ts

@@ -1,5 +1,5 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken } from '@lifi/sdk';
+import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken, Token } from '@lifi/sdk';
 import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
@@ -103,6 +103,7 @@ export interface WidgetConfig {
     };
     tokens?: {
         featured?: StaticToken[];
+        include?: Token[];
         allow?: BaseToken[];
         deny?: BaseToken[];
     };

package/cjs/utils/format.d.ts

@@ -5,5 +5,5 @@
  */
 export declare const formatTokenAmount: (amount?: string, decimals?: number, decimalPlaces?: number) => string;
 export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
-export declare const formatInputAmount: (amount: string, returnInitial?: boolean) => string;
+export declare const formatInputAmount: (amount: string, decimals?: number | null, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/cjs/utils/format.js

@@ -24,7 +24,7 @@ const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
     while (absAmount < 1 / 10 ** decimalPlaces) {
         decimalPlaces++;
     }
-    return (0, big_js_1.default)(parsedAmount).toFixed(decimalPlaces + 1, 0);
+    return parsedAmount.toFixed(decimalPlaces + 1);
 };
 exports.formatTokenAmount = formatTokenAmount;
 const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
@@ -50,7 +50,7 @@ const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false)
     return parsedSlippage.toString();
 };
 exports.formatSlippage = formatSlippage;
-const formatInputAmount = (amount, returnInitial = false) => {
+const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
     if (!amount) {
         return amount;
     }
@@ -62,16 +62,19 @@ const formatInputAmount = (amount, returnInitial = false) => {
     if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
         return parsedAmount.toString();
     }
-    try {
-        const absFormattedAmount = (0, big_js_1.default)(formattedAmount).abs();
-        if (returnInitial) {
-            return formattedAmount;
-        }
-        return absFormattedAmount.toString();
-    }
-    catch {
+    if (isNaN(Math.abs(Number(formattedAmount)))) {
         return '';
     }
+    if (returnInitial) {
+        return formattedAmount;
+    }
+    let [integer, fraction = ''] = formattedAmount.split('.');
+    if (decimals !== null && fraction.length > decimals) {
+        fraction = fraction.slice(0, decimals);
+    }
+    integer = integer.replace(/^0+|-/, '');
+    fraction = fraction.replace(/(0+)$/, '');
+    return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
 };
 exports.formatInputAmount = formatInputAmount;
 const formatTokenPrice = (amount, price) => {

package/components/SwapInput/FormPriceHelperText.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
+import type { TokenAmount } from '@lifi/sdk';
 import type { SwapFormTypeProps } from '../../providers';
 export declare const FormPriceHelperText: React.FC<SwapFormTypeProps>;
+export declare const FormPriceHelperTextBase: React.FC<SwapFormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+}>;

package/components/SwapInput/FormPriceHelperText.js

@@ -6,15 +6,20 @@ import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { formatTokenAmount, formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, }) => {
-    const { t } = useTranslation();
-    const [amount, chainId, tokenAddress] = useWatch({
+    const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getAmountKey(formType),
             SwapFormKeyHelper.getChainKey(formType),
             SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    return (_jsx(FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = useTranslation();
+    const amount = useWatch({
+        name: SwapFormKeyHelper.getAmountKey(formType),
+    });
     const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
     return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',

package/components/SwapInput/SwapInput.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import type { Token } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
+import type { ReactNode } from 'react';
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInput: React.FC<SwapFormTypeProps & BoxProps>;
+export declare const SwapInputBase: React.FC<SwapFormTypeProps & BoxProps & {
+    token?: Token;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    bottomAdornment?: ReactNode;
+    disabled?: boolean;
+}>;

package/components/SwapInput/SwapInput.js

@@ -1,37 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useController } from 'react-hook-form';
+import { useLayoutEffect, useRef } from 'react';
+import { useController, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
-import { formatInputAmount } from '../../utils';
+import { fitInputText, formatInputAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { FitInputText } from './FitInputText';
 import { FormPriceHelperText } from './FormPriceHelperText';
-import { FormControl, Input } from './SwapInput.style';
+import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';
 import { SwapInputEndAdornment } from './SwapInputEndAdornment';
 import { SwapInputStartAdornment } from './SwapInputStartAdornment';
 export const SwapInput = ({ formType, ...props }) => {
+    const { disabledUI } = useWidgetConfig();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token } = useToken(chainId, tokenAddress);
+    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+    return (_jsx(SwapInputBase, { formType: formType, token: token, startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? _jsx(SwapInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: _jsx(FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+};
+export const SwapInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
     const { t } = useTranslation();
     const amountKey = SwapFormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = useController({
         name: amountKey,
     });
-    const { disabledUI } = useWidgetConfig();
     const ref = useRef(null);
     const handleChange = (event) => {
         const { value } = event.target;
-        const formattedAmount = formatInputAmount(value, true);
+        const formattedAmount = formatInputAmount(value, token?.decimals, true);
         onChange(formattedAmount);
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        const formattedAmount = formatInputAmount(value);
+        const formattedAmount = formatInputAmount(value, token?.decimals);
         onChange(formattedAmount);
         onBlur();
     };
-    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
-    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
+    useLayoutEffect(() => {
+        if (ref.current) {
+            fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+        }
+    }, [value, ref]);
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: startAdornment, endAdornment: endAdornment, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] }), _jsx(FitInputText, { ref: ref, formType: formType })] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), bottomAdornment] })] }));
 };

package/components/TokenList/TokenListItem.js

@@ -27,7 +27,7 @@ export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBala
             setShowAddress(false);
         }
     };
-    return (_jsxs(ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondaryTypographyProps: {
+    return (_jsxs(ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol?.[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondaryTypographyProps: {
                     component: 'div',
                     sx: {
                         overflow: 'auto',

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.11";
+export declare const version = "2.0.0-beta.13";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-beta.11';
+export const version = '2.0.0-beta.13';

package/hooks/useGasRecommendation.d.ts

@@ -1,2 +1,2 @@
 import type { ChainId } from '@lifi/sdk';
-export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse, unknown>;
+export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse | null, unknown>;

package/hooks/useGasRecommendation.js

@@ -1,9 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { useLiFi } from '../providers';
+import { useChains } from './useChains';
 const refetchInterval = 60000;
 export const useGasRecommendation = (chainId, fromChain, fromToken) => {
     const lifi = useLiFi();
+    const { chains } = useChains();
     return useQuery(['gas-recommendation', chainId, fromChain, fromToken], async ({ queryKey: [_, chainId, fromChain, fromToken] }) => {
+        if (!chains?.some((chain) => chain.id === chainId)) {
+            return null;
+        }
         const gasRecommendation = await lifi.getGasRecommendation({
             chainId: chainId,
             fromChain: fromChain,

package/hooks/useTokens.js

@@ -5,7 +5,9 @@ import { useChains } from './useChains';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
     const lifi = useLiFi();
-    const { data, isLoading, dataUpdatedAt } = useQuery(['tokens'], () => lifi.getTokens());
+    const { data, isLoading } = useQuery(['tokens'], () => lifi.getTokens(), {
+        refetchInterval: 3600000,
+    });
     const { getChainById, isLoading: isSupportedChainsLoading } = useChains();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens: configTokens, chains: configChains } = useWidgetConfig();
@@ -19,9 +21,18 @@ export const useTokens = (selectedChainId) => {
         if (!chainAllowed) {
             return [];
         }
-        let filteredTokens = configTokens?.allow?.filter((token) => token.chainId === selectedChainId);
-        if (!filteredTokens?.length) {
-            filteredTokens = data?.tokens[selectedChainId];
+        let filteredTokens = data?.tokens[selectedChainId];
+        const includedTokens = configTokens?.include?.filter((token) => token.chainId === selectedChainId);
+        if (includedTokens?.length) {
+            filteredTokens = filteredTokens
+                ? [...includedTokens, ...filteredTokens]
+                : includedTokens;
+        }
+        const allowedTokens = configTokens?.allow
+            ?.filter((token) => token.chainId === selectedChainId)
+            .map((token) => token.address);
+        if (allowedTokens?.length) {
+            filteredTokens = filteredTokens?.filter((token) => allowedTokens.includes(token.address));
         }
         const deniedTokenAddresses = configTokens?.deny
             ?.filter((token) => token.chainId === selectedChainId)
@@ -40,15 +51,16 @@ export const useTokens = (selectedChainId) => {
         return tokens;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        isSupportedChainsLoading,
-        selectedChainId,
-        getChainById,
         configChains,
         configTokens?.allow,
         configTokens?.deny,
-        featuredTokens,
+        configTokens?.include,
+        data?.tokens,
         data,
-        dataUpdatedAt,
+        featuredTokens,
+        getChainById,
+        isSupportedChainsLoading,
+        selectedChainId,
     ]);
     return {
         tokens,