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

package/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -43,12 +43,12 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0-beta.8",
-    "@lifi/wallet-management": "^2.0.0-beta.1",
+    "@lifi/sdk": "^2.0.0-beta.11",
+    "@lifi/wallet-management": "^2.0.0-beta.3",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.127",
-    "@mui/material": "^5.12.1",
-    "@tanstack/react-query": "^4.29.3",
+    "@mui/lab": "^5.0.0-alpha.128",
+    "@mui/material": "^5.12.2",
+    "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
     "i18next": "^22.4.15",
@@ -58,7 +58,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.10.0",
     "react-timer-hook": "^3.0.5",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -7,16 +7,19 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
+import { ContractComponent } from '../../components/ContractComponent';
 import { Dialog } from '../../components/Dialog';
 import { useHeaderActionStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
     const { t, i18n } = useTranslation();
     const { navigateBack } = useNavigateBack();
+    const { variant } = useWidgetConfig();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state?.routeId], store.deleteRoute], shallow);
     const [open, setOpen] = useState(false);
@@ -50,7 +53,7 @@ export const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), getStepList(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route), variant === 'nft' ? _jsx(ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
                         }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));

package/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
-import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
     const [data, setData] = useState();
     const bottomSheetRef = useRef(null);
@@ -44,7 +44,7 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.newToAmount, data?.toToken.decimals, 5),

package/pages/SwapPage/StatusBottomSheet.js

@@ -10,16 +10,17 @@ import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
-import { SwapFormKey } from '../../providers';
+import { SwapFormKey, useWidgetConfig } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
 import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
-import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     const { t } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
     const { setValue } = useFormContext();
+    const { variant, contractComponent, contractCompactComponent } = useWidgetConfig();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
         amount: route.steps.at(-1)?.execution?.toAmount ??
@@ -30,6 +31,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(SwapFormKey.FromAmount, '');
+        setValue(SwapFormKey.ToAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
@@ -68,7 +70,10 @@ export const StatusBottomSheet = ({ status, route, }) => {
     let handlePrimaryButton = handleDone;
     switch (status) {
         case 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,
@@ -139,8 +144,9 @@ export const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-                                    hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, { py: 1, children: primaryMessage }), secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
+    const showContractComponent = variant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
+    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [!showContractComponent ? (_jsx(CenterContainer, { children: _jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+                                hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent || contractComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (_jsx(Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

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

@@ -15,7 +15,7 @@ const getStatusColor = (status, theme) => {
             return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
     }
 };
-export const IconContainer = styled(Box)(({ theme }) => ({
+export const CenterContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
     placeItems: 'center',
     position: 'relative',

package/pages/SwapPage/SwapPage.js

@@ -5,6 +5,7 @@ import { useCallback, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { ContractComponent } from '../../components/ContractComponent';
 import { GasMessage } from '../../components/GasMessage';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
@@ -40,7 +41,7 @@ export const SwapPage = () => {
     const handleSwapClick = async () => {
         if (status === RouteExecutionStatus.Idle) {
             const thresholdExceeded = getTokenValueLossThreshold(route);
-            if (thresholdExceeded) {
+            if (thresholdExceeded && variant !== 'nft') {
                 tokenValueBottomSheetRef.current?.open();
             }
             else {
@@ -58,9 +59,14 @@ export const SwapPage = () => {
     const getSwapButtonText = () => {
         switch (status) {
             case 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 RouteExecutionStatus.Failed:
                 return t('button.tryAgain');
             default:
@@ -78,9 +84,9 @@ export const SwapPage = () => {
     const insuranceCoverageId = route?.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
-    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+    return (_jsxs(Container, { children: [getStepList(route), variant === 'nft' ? _jsx(ContractComponent, { mt: 2 }) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (_jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
+                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route && variant !== 'nft' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (_jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -6,7 +6,7 @@ import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
-import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
     const handleCancel = () => {
         ref.current?.close();
@@ -18,7 +18,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, { fontWeight: 600, children: [Big(route.toAmountUSD || 0)
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, { fontWeight: 600, children: [Big(route.toAmountUSD || 0)
                                 .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
                                 .minus(1)
                                 .mul(100)

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