@lifi/widget 2.0.0-beta.12 → 2.0.0-beta.14

package/cjs/i18n/th.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": "ไม่ได้ส่งธุรกรรม. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} บน {{chainName}} ยังคงอยู่ในกระเป๋าเงินของคุณ.",
@@ -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": "{{tool}} โดย LI.FI",
     "stepSwap": "แลกเปลี่ยน",
     "stepSwapAndBridge": "แลกเปลี่ยนและบริดจ์",
+    "stepSwapAndBuy": "แลกเปลี่ยน และ ซื้อ",
     "success": {
       "message": {
         "swapPartiallySuccessful": "เราได้พยายามดำเนินการแลกเปลี่ยนให้เสร็จสมบูรณ์แต่ {{tool}} ขาดสภาพคล่องสำหรับโทเค็น {{tokenSymbol}}",
+        "purchaseSuccessful": "คุณมี {{assetName}} ใน{{walletAddress}} กระเป๋า บน{{chainName}} เครือข่าย",
         "swapSuccessful": "ตอนนี้มี {{amount, number(maximumFractionDigits: 9)}}{{tokenSymbol}} ใน {{walletAddress}} กระเป๋าบน {{chainName}} เชน."
       },
       "title": {
         "gasSwapSuccessful": "แลกเปลี่ยนแก็สสำเร็จ",
+        "purchaseSuccessful": "การซื้อเสร็จสมบูรณ์",
         "refundIssued": "คืนเงินแล้ว",
         "swapPartiallySuccessful": "แลกเปลี่ยนสำเร็จบางส่วน",
         "swapSuccessful": "แลกเปลี่ยนสำเร็จ"
@@ -203,7 +219,7 @@
     "to": "ถึง",
     "tokenOnChain": "{{tokenSymbol}} บน {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}}{{tokenSymbol}} บน {{chainName}}",
-    "tokenSearch": "ค้นหาโทเค็นของคุณ",
+    "tokenSearch": "ค้นหาชื่อของเหรียญ หรือ ที่อยู่",
     "valueLoss": "มูลค่าที่สูญเสีย",
     "walletAddressOrEns": "ที่อยู่กระเป๋าหรือชื่อENS",
     "warning": {
@@ -237,6 +253,7 @@
     },
     "numberOfSteps": "ขั้นตอนการแลกเปลี่ยนหลายขั้นตอน แต่ละขั้นตอนสามารถมี 1-2 รายการที่ต้องใช้ลายเซ็น.",
     "progressToNextUpdate": "ข้อมูลที่แสดงจะรีเฟรชอัตโนมัติหลังจาก {{value}} วินาที คลิกที่นี่เพื่ออัปเดตด้วยตนเอง",
+    "recommended": "เส้นทางที่ถูกมียอดคงเหลือที่เพียงพอและง่ายต่องการใช้งาน",
     "settingsModified": "การตั้งค่า (แก้ไข)"
   },
   "wallet": {

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

@@ -17,4 +17,4 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/cjs/pages/SelectTokenPage/types.js

@@ -5,4 +5,4 @@ var TokenFilterType;
 (function (TokenFilterType) {
     TokenFilterType[TokenFilterType["My"] = 0] = "My";
     TokenFilterType[TokenFilterType["All"] = 1] = "All";
-})(TokenFilterType = exports.TokenFilterType || (exports.TokenFilterType = {}));
+})(TokenFilterType || (exports.TokenFilterType = TokenFilterType = {}));

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

@@ -9,7 +9,7 @@ export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     selected?: boolean | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     value: {};
 } & Omit<{

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

@@ -17,5 +17,5 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/providers/SwapFormProvider/types.js

@@ -15,7 +15,7 @@ var SwapFormKey;
     SwapFormKey["ToContractGasLimit"] = "ToContractGasLimit";
     SwapFormKey["ToToken"] = "toToken";
     SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
-})(SwapFormKey = exports.SwapFormKey || (exports.SwapFormKey = {}));
+})(SwapFormKey || (exports.SwapFormKey = SwapFormKey = {}));
 exports.SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,
     getTokenKey: (formType) => `${formType}Token`,

package/cjs/stores/routes/types.js

@@ -9,4 +9,4 @@ var RouteExecutionStatus;
     RouteExecutionStatus[RouteExecutionStatus["Failed"] = 4] = "Failed";
     RouteExecutionStatus[RouteExecutionStatus["Partial"] = 8] = "Partial";
     RouteExecutionStatus[RouteExecutionStatus["Refunded"] = 16] = "Refunded";
-})(RouteExecutionStatus = exports.RouteExecutionStatus || (exports.RouteExecutionStatus = {}));
+})(RouteExecutionStatus || (exports.RouteExecutionStatus = RouteExecutionStatus = {}));

package/cjs/types/events.js

@@ -8,4 +8,4 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
     WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
-})(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));
+})(WidgetEvent || (exports.WidgetEvent = WidgetEvent = {}));

package/cjs/types/widget.js

@@ -7,7 +7,7 @@ var DisabledUI;
     DisabledUI["FromToken"] = "fromToken";
     DisabledUI["ToAddress"] = "toAddress";
     DisabledUI["ToToken"] = "toToken";
-})(DisabledUI = exports.DisabledUI || (exports.DisabledUI = {}));
+})(DisabledUI || (exports.DisabledUI = DisabledUI = {}));
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
@@ -18,8 +18,8 @@ var HiddenUI;
     HiddenUI["ToAddress"] = "toAddress";
     HiddenUI["ToToken"] = "toToken";
     HiddenUI["WalletMenu"] = "walletMenu";
-})(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
+})(HiddenUI || (exports.HiddenUI = HiddenUI = {}));
 var RequiredUI;
 (function (RequiredUI) {
     RequiredUI["ToAddress"] = "toAddress";
-})(RequiredUI = exports.RequiredUI || (exports.RequiredUI = {}));
+})(RequiredUI || (exports.RequiredUI = RequiredUI = {}));

package/cjs/utils/elements.js

@@ -5,6 +5,6 @@ var ElementId;
 (function (ElementId) {
     ElementId["ScrollableContainer"] = "widget-scrollable-container";
     ElementId["Header"] = "widget-header";
-})(ElementId = exports.ElementId || (exports.ElementId = {}));
+})(ElementId || (exports.ElementId = ElementId = {}));
 const createElementId = (ElementId, elementId) => `${ElementId}-${elementId}`;
 exports.createElementId = createElementId;

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, decimals?: number, 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

@@ -50,7 +50,7 @@ const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false)
     return parsedSlippage.toString();
 };
 exports.formatSlippage = formatSlippage;
-const formatInputAmount = (amount, decimals = 0, returnInitial = false) => {
+const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
     if (!amount) {
         return amount;
     }
@@ -69,7 +69,7 @@ const formatInputAmount = (amount, decimals = 0, returnInitial = false) => {
         return formattedAmount;
     }
     let [integer, fraction = ''] = formattedAmount.split('.');
-    if (fraction.length > decimals) {
+    if (decimals !== null && fraction.length > decimals) {
         fraction = fraction.slice(0, decimals);
     }
     integer = integer.replace(/^0+|-/, '');

package/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -35,7 +35,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "divider" | "components" | "dense" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
@@ -46,7 +46,7 @@ export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

package/components/Card/CardIconButton.d.ts

@@ -6,7 +6,7 @@ export declare const CardIconButton: import("@emotion/styled").StyledComponent<{
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/components/Header/Header.style.d.ts

@@ -35,7 +35,7 @@ export declare const WalletButton: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

package/components/Header/NavigationTabs.style.js

@@ -2,7 +2,7 @@ import { Tab, Tabs, tabClasses, tabsClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 export const NavbarTabs = styled(Tabs)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.common.white
+        ? theme.palette.background.paper
         : alpha(theme.palette.common.black, 0.04),
     borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
     padding: theme.spacing(0.5),
@@ -22,7 +22,7 @@ export const NavbarTabs = styled(Tabs)(({ theme }) => ({
         transform: 'translateY(-50%)',
         height: 48,
         backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.common.black
+            ? theme.palette.background.default
             : theme.palette.common.white,
         borderRadius: theme.shape.borderRadiusSecondary,
         boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,

package/components/ListItemButton.d.ts

@@ -17,4 +17,4 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/NFT/NFT.style.d.ts

@@ -10,7 +10,7 @@ export declare const PreviewAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"circular" | "rounded" | "square", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -6,7 +6,7 @@ export declare const IconButton: import("@emotion/styled").StyledComponent<{
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/components/SmallAvatar.d.ts

@@ -10,7 +10,7 @@ export declare const SmallAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"circular" | "rounded" | "square", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/StepActions/StepActions.style.d.ts

@@ -14,7 +14,7 @@ export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"circular" | "rounded" | "square", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -9,7 +9,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { StyledComponent } from '@emotion/styled';
-import type { ButtonProps, LinkProps } from '@mui/material';
+import type { IconButtonProps, LinkProps } from '@mui/material';
 export declare const ListItemButton: StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -19,7 +19,7 @@ export declare const ListItemButton: StyledComponent<import("@mui/material").Lis
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -37,5 +37,5 @@ export declare const ListItem: StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const LinkButton: StyledComponent<ButtonProps & LinkProps>;
+}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "divider" | "components" | "dense" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const IconButton: StyledComponent<IconButtonProps & LinkProps>;

package/components/TokenList/TokenList.style.js

@@ -1,4 +1,4 @@
-import { Button, ListItem as MuiListItem, buttonClasses } from '@mui/material';
+import { IconButton as MuiIconButton, ListItem as MuiListItem, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
 import { alpha, styled } from '@mui/material/styles';
@@ -20,28 +20,31 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     [`.${listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${listItemTextClasses.primary}`]: {
+        height: 22,
+    },
     [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
     },
 }));
-export const LinkButton = styled(Button)(({ theme }) => ({
+export const IconButton = styled(MuiIconButton)(({ theme }) => ({
     lineHeight: 1,
     fontSize: '0.75rem',
     fontWeight: 400,
-    padding: theme.spacing(0.375, 0.75),
+    padding: theme.spacing(0.375, 0.375),
+    marginLeft: theme.spacing(0.25),
     color: 'inherit',
     backgroundColor: 'unset',
+    minWidth: 'unset',
+    borderRadius: '50%',
     '&:hover': {
         backgroundColor: theme.palette.mode === 'light'
             ? alpha(theme.palette.common.black, 0.04)
             : alpha(theme.palette.common.white, 0.08),
     },
-    [`.${buttonClasses.endIcon}`]: {
-        marginLeft: theme.spacing(0.25),
-    },
-    [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
-        fontSize: '0.75rem',
+    svg: {
+        fontSize: '0.875rem',
     },
 }));

package/components/TokenList/TokenListItem.js

@@ -4,7 +4,7 @@ import { Avatar, Box, Link, ListItemAvatar, ListItemText, Skeleton, Slide, Typog
 import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatTokenAmount, formatTokenPrice, shortenAddress, } from '../../utils';
-import { LinkButton, ListItem, ListItemButton } from './TokenList.style';
+import { IconButton, ListItem, ListItemButton } from './TokenList.style';
 export const TokenListItem = memo(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return (_jsxs(ListItem, { disablePadding: true, style: {
@@ -29,15 +29,11 @@ export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBala
     };
     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',
-                        marginLeft: -0.75,
-                    },
-                }, secondary: _jsxs(Box, { position: "relative", height: 18, ref: container, children: [_jsx(Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                }, secondary: _jsxs(Box, { position: "relative", height: 20, ref: container, children: [_jsx(Slide, { direction: "down", in: !showAddress, container: container.current, style: {
                                 position: 'absolute',
-                            }, appear: false, children: _jsx(Box, { pl: 0.75, children: token.name }) }), _jsx(Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                            }, appear: false, children: _jsx(Box, { pt: 0.25, children: token.name }) }), _jsx(Slide, { direction: "up", in: showAddress, container: container.current, style: {
                                 position: 'absolute',
-                            }, appear: false, mountOnEnter: true, children: _jsx(LinkButton, { size: "small", LinkComponent: Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: _jsx(OpenInNewIcon, {}), children: shortenAddress(token.address) }) })] }) }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+                            }, appear: false, mountOnEnter: true, children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { display: "flex", alignItems: "center", pt: 0.125, children: shortenAddress(token.address) }), _jsx(IconButton, { size: "small", LinkComponent: Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: _jsx(OpenInNewIcon, {}) })] }) })] }) }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
                             value: formatTokenAmount(token.amount),
                         }) })) : null, tokenPrice ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,

package/config/version.d.ts

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

package/config/version.js

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