@lifi/widget 2.0.0-beta.2 → 2.0.0-beta.4

package/cjs/i18n/th.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": "{{tool}} โดย LI.FI",
     "stepSwap": "แลกเปลี่ยน",
     "stepSwapAndBridge": "แลกเปลี่ยนและบริดจ์",
     "success": {
@@ -180,11 +192,13 @@
     "swapStepDetails": "แลกเปลี่ยนบน {{chain}} ผ่าน {{tool}}",
     "swapping": "การแลกเปลี่ยน",
     "tags": {
-      "ALTERNATIVE": "ทางเลือก",
-      "CHEAPEST": "ราคาถูก",
-      "FASTEST": "เร็ว",
-      "RECOMMENDED": "แนะนำ",
-      "SAFEST": "ปลอดภัย"
+      "cheapest": "ราคาถูก",
+      "fastest": "รวดเร็ว",
+      "insurable": "การประกัน",
+      "insurance": "การประกัน",
+      "insured": "ประกัน",
+      "recommended": "แนะนำ",
+      "safest": "ปลอดภัย"
     },
     "to": "ถึง",
     "tokenOnChain": "{{tokenSymbol}} บน {{chainName}}",
@@ -198,7 +212,7 @@
         "deleteSwapHistory": "ประวัติการแลกเปลี่ยนจะถูกจัดเก็บไว้ในเครื่องเท่านั้นและไม่สามารถกู้คืนได้หากคุณลบออก",
         "highValueLoss": "มูลค่าของโทเค็นที่ได้รับนั้นต่ำกว่าโทเค็นที่แลกเปลี่ยนและต้นทุนการทำธุรกรรมอย่างมาก.",
         "insufficientFunds": "คุณมีเงินไม่เพียงพอที่จะดำเนินการแลกเปลี่ยน.",
-        "insufficientGas": "คุณต้องเพิ่มอย่างน้อย:",
+        "insufficientGas": "คุณมีแก๊สไม่เพียงพอที่จะแลกเปลี่ยนให้เสร็จสมบูรณ์ คุณต้องเพิ่มอย่างน้อย:",
         "rateChanged": "อัตราแลกเปลี่ยนมีการเปลี่ยนแปลง คุณจะยอมรับอัตราใหม่.",
         "resetSettings": "การดำเนินการนี้จะรีเซ็ตลำดับความสำคัญของเส้นทาง การคลาดเลื่อน ค่าแก็ส บริดจ์ที่เปิดใช้งานและการแลกเปลี่ยน"
       },
@@ -214,6 +228,7 @@
     }
   },
   "tooltip": {
+    "additionalProviderFee": "บริดจ์เพิ่มเติม DEX และค่าบริการ",
     "estimatedNetworkFee": "ค่าธรรรมเนียมโดยประมาณของเครือข่าย",
     "estimatedTime": "เวลาดำเนินการแลกเปลี่ยนโดยประมาณเป็นนาที.",
     "notFound": {

package/cjs/i18n/uk.json

@@ -12,6 +12,7 @@
     "done": "Готово",
     "getGas": "Отримати газ",
     "hide": "Сховати",
+    "learnMore": "Докладніше",
     "lifiSwap": "LI.FI Swap",
     "light": "Світла",
     "max": "макс",
@@ -29,6 +30,7 @@
     "startSwap": "Почати своп",
     "swap": "Своп",
     "tryAgain": "Спробувати ще раз",
+    "viewCoverage": "Переглянути покриття",
     "viewOnExplorer": "Переглянути в оглядачі"
   },
   "format": {
@@ -56,7 +58,7 @@
     "title": "Мова"
   },
   "settings": {
-    "enabledBridges": "Увімкнені бріджі",
+    "enabledBridges": "Увімкнені бриджі",
     "enabledExchanges": "Увімкнені обмінники",
     "gasPrice": {
       "fast": "Швидко",
@@ -69,7 +71,7 @@
     "slippage": "Прослизання"
   },
   "swap": {
-    "crossStepDetails": "Брідж з {{from}} до {{to}} через {{tool}}",
+    "crossStepDetails": "Бридж з {{from}} до {{to}} через {{tool}}",
     "currentAmount": "Поточна сума",
     "error": {
       "message": {
@@ -104,6 +106,12 @@
     "gasFeeEstimated": "орієнтована комісія за газ",
     "gasFeePaid": "оплата за газ",
     "inProgress": "в процесі",
+    "insurance": {
+      "bridgeExploits": "Збої в роботі бриджу, зломи чи експлойти",
+      "insure": "Застрахуйте 100% токенів транзакції.",
+      "insured": "Ви застрахували 100% токенів транзакції:",
+      "slippageError": "Помилка в прослизанні для отриманих токенів"
+    },
     "info": {
       "message": {
         "autoRefuel": "У вас замало {{chainName}} газу. Продовжуючи, ви отримаєте достатньо газу, щоб завершити обмін.",
@@ -127,15 +135,15 @@
     "process": {
       "crossChain": {
         "actionRequired": "Будь ласка, підпишіть транзакцію",
-        "done": "Брідж транзакцію схвалено",
-        "pending": "Очікування брідж транзакції",
-        "started": "Підготовка брідж транзакції"
+        "done": "Бридж транзакцію схвалено",
+        "pending": "Очікування бридж транзакції",
+        "started": "Підготовка бридж транзакції"
       },
       "receivingChain": {
-        "done": "Брідж завершено",
-        "partial": "Брідж частково завершено",
+        "done": "Бридж завершено",
+        "partial": "Бридж частково завершено",
         "pending": "В очікуванні чейна що приймає",
-        "refunded": "Брідж транзакція відшкодована"
+        "refunded": "Бридж транзакція відшкодована"
       },
       "swap": {
         "actionRequired": "Будь ласка, підпишіть транзакцію",
@@ -164,10 +172,10 @@
     "sendToAddress": "Відправити на {{address}}",
     "sendToWallet": "Надіслати на інший гаманець",
     "sentToAddress": "Відправлено на {{address}}",
-    "stepBridge": "Брідж",
+    "stepBridge": "Бридж",
     "stepDetails": "{{tool}} через LI.FI",
     "stepSwap": "Своп",
-    "stepSwapAndBridge": "Своп та брідж",
+    "stepSwapAndBridge": "Своп та бридж",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Ми намагалися завершити своп, але {{tool}} не вистачило ліквідності токену {{tokenSymbol}}.",
@@ -206,7 +214,7 @@
         "insufficientFunds": "У вас недостатньо коштів для здійснення свопу.",
         "insufficientGas": "Для завершення свопа у вас недостатньо газу. Вам необхідно додати хоча б:",
         "rateChanged": "Курс обміну змінився. Продовжуючи своп, ви приймете новий курс.",
-        "resetSettings": "Це скине пріоритет вашого маршруту, прослизання, ціну газу, увімкнені мости та обмінники."
+        "resetSettings": "Це скине пріоритет вашого маршруту, прослизання, ціну газу, увімкнені бриджі та обмінники."
       },
       "title": {
         "deleteActiveSwaps": "Видалити всі активні свопи?",
@@ -220,7 +228,7 @@
     }
   },
   "tooltip": {
-    "additionalProviderFee": "Додаткові комісії бріджів, обмінників та послуг.",
+    "additionalProviderFee": "Додаткові комісії бриджів, обмінників та послуг.",
     "estimatedNetworkFee": "Орієнтовна мережева плата.",
     "estimatedTime": "Орієнтовний час виконання свопу в хвилинах.",
     "notFound": {

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,6 +106,12 @@
     "gasFeeEstimated": "预估燃气费",
     "gasFeePaid": "已支付燃气费",
     "inProgress": "进行中",
+    "insurance": {
+      "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
+      "insure": "为跨链代币提供100%的保障",
+      "insured": "您已经对100%的跨链代币投保:",
+      "slippageError": "目标链代币的滑点错误"
+    },
     "info": {
       "message": {
         "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -10,16 +10,19 @@ 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 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,7 +56,7 @@ 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, 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') })] })] })] }));

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,7 +73,10 @@ 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,
@@ -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,6 +8,7 @@ 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");
@@ -43,7 +44,7 @@ const SwapPage = () => {
     const handleSwapClick = async () => {
         if (status === stores_1.RouteExecutionStatus.Idle) {
             const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
-            if (thresholdExceeded) {
+            if (thresholdExceeded && variant !== 'nft') {
                 tokenValueBottomSheetRef.current?.open();
             }
             else {
@@ -61,9 +62,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 +87,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, 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 ||
                 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 && 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

@@ -21,7 +21,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { 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)
+    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.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)

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

@@ -1,12 +1,12 @@
 import type { Signer } from '@ethersproject/abstract-signer';
 import type { Provider } from '@ethersproject/providers';
-import type { Token } from '@lifi/sdk';
+import type { StaticToken } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 export interface WalletContextProps {
     account: WalletAccount;
     provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
-    addToken(chainId: number, token: Token): Promise<void>;
+    addToken(chainId: number, token: StaticToken): Promise<void>;
     disconnect(wallet?: Wallet): void;
     switchChain(chainId: number): Promise<boolean>;
     connect(wallet?: Wallet | undefined): Promise<void>;

package/cjs/types/token.d.ts

@@ -1,4 +1,4 @@
-import type { TokenAmount } from '@lifi/sdk';
-export interface Token extends TokenAmount {
+import type { TokenAmount as SDKTokenAmount } from '@lifi/sdk';
+export interface TokenAmount extends SDKTokenAmount {
     featured?: boolean;
 }

package/cjs/types/widget.d.ts

@@ -1,5 +1,5 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { ChainKey, ConfigUpdate, Order, RouteOptions, Token } from '@lifi/sdk';
+import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken } 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';
@@ -16,7 +16,8 @@ export declare enum HiddenUI {
     Appearance = "appearance",
     Language = "language",
     PoweredBy = "poweredBy",
-    ToAddress = "toAddress"
+    ToAddress = "toAddress",
+    History = "history"
 }
 export type HiddenUIType = `${HiddenUI}`;
 export declare enum RequiredUI {
@@ -34,7 +35,7 @@ export interface WidgetWalletManagement {
     connect(): Promise<Signer>;
     disconnect(): Promise<void>;
     switchChain?(chainId: number): Promise<Signer>;
-    addToken?(token: Token, chainId: number): Promise<void>;
+    addToken?(token: StaticToken, chainId: number): Promise<void>;
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
@@ -96,9 +97,9 @@ export interface WidgetConfig {
         deny?: number[];
     };
     tokens?: {
-        featured?: Token[];
-        allow?: Token[];
-        deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
+        featured?: StaticToken[];
+        allow?: BaseToken[];
+        deny?: BaseToken[];
     };
     languages?: {
         default?: LanguageKey;

package/cjs/types/widget.js

@@ -15,6 +15,7 @@ var HiddenUI;
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
+    HiddenUI["History"] = "history";
     // ToToken = 'toToken',
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
 var RequiredUI;

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/ChainSelect/ChainSelect.style.js

@@ -9,7 +9,7 @@ export const ChainCard = styled(Card)({
 });
 export const ChainContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(5, 1fr)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/components/GasMessage/FundsSufficiencyMessage.d.ts

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

package/components/Header/NavigationHeader.js

@@ -7,12 +7,13 @@ import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { variant } = useWidgetConfig();
+    const { variant, hiddenUI } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
     const { element } = useHeaderActionStore();
@@ -34,8 +35,12 @@ export const NavigationHeader = () => {
                 return t(`settings.enabledExchanges`);
             case navigationRoutes.swapHistory:
                 return t(`header.swapHistory`);
-            case navigationRoutes.fromToken:
+            case navigationRoutes.fromToken: {
+                if (variant === 'nft') {
+                    return t(`header.payWith`);
+                }
                 return t(`header.from`);
+            }
             case navigationRoutes.toToken:
                 return t(`header.to`);
             case navigationRoutes.fromChain:
@@ -46,10 +51,18 @@ export const NavigationHeader = () => {
                 return t(`header.routes`);
             case navigationRoutes.activeSwaps:
                 return t(`header.activeSwaps`);
-            case navigationRoutes.swapExecution:
+            case navigationRoutes.swapExecution: {
+                if (variant === 'nft') {
+                    return t(`header.purchase`);
+                }
                 return t(`header.swap`);
-            case navigationRoutes.swapDetails:
+            }
+            case navigationRoutes.swapDetails: {
+                if (variant === 'nft') {
+                    return t(`header.purchaseDetails`);
+                }
                 return t(`header.swapDetails`);
+            }
             default: {
                 switch (variant) {
                     case 'nft':
@@ -62,7 +75,7 @@ export const NavigationHeader = () => {
             }
         }
     };
-    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, _jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
+    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, _jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
                                             marginRight: -1.25,
                                         }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }));
 };