@lifi/widget 2.0.0-beta.3 → 2.0.0-beta.5

package/README.md

@@ -54,21 +54,20 @@ yarn add @lifi/wallet-management
 
 Here is an example of a basic app using LI.FI Widget:
 
-```jsx
+```tsx
 import { LiFiWidget, WidgetConfig } from '@lifi/widget';
-import { useMemo } from 'react';
+
+const widgetConfig: WidgetConfig = {
+  containerStyle: {
+    border: '1px solid rgb(234, 234, 234)',
+    borderRadius: '16px',
+  },
+};
 
 export const WidgetPage = () => {
-  const widgetConfig: WidgetConfig = useMemo(() => {
-    return {
-      containerStyle: {
-        border: '1px solid rgb(234, 234, 234)',
-        borderRadius: '16px',
-      },
-    };
-  }, []);
-
-  return <LiFiWidget config={widgetConfig} />;
+  return (
+    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
+  );
 };
 ```
 

package/cjs/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/cjs/components/ChainSelect/ChainSelect.style.js

@@ -12,7 +12,7 @@ exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
 });
 exports.ChainContainer = (0, styles_1.styled)(material_1.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/cjs/components/GasMessage/FundsSufficiencyMessage.d.ts

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

package/cjs/components/Header/NavigationHeader.js

@@ -10,12 +10,13 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const useHeaderActionStore_1 = require("./useHeaderActionStore");
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { variant, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
     const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
@@ -37,8 +38,12 @@ const NavigationHeader = () => {
                 return t(`settings.enabledExchanges`);
             case utils_1.navigationRoutes.swapHistory:
                 return t(`header.swapHistory`);
-            case utils_1.navigationRoutes.fromToken:
+            case utils_1.navigationRoutes.fromToken: {
+                if (variant === 'nft') {
+                    return t(`header.payWith`);
+                }
                 return t(`header.from`);
+            }
             case utils_1.navigationRoutes.toToken:
                 return t(`header.to`);
             case utils_1.navigationRoutes.fromChain:
@@ -49,10 +54,18 @@ const NavigationHeader = () => {
                 return t(`header.routes`);
             case utils_1.navigationRoutes.activeSwaps:
                 return t(`header.activeSwaps`);
-            case utils_1.navigationRoutes.swapExecution:
+            case utils_1.navigationRoutes.swapExecution: {
+                if (variant === 'nft') {
+                    return t(`header.purchase`);
+                }
                 return t(`header.swap`);
-            case utils_1.navigationRoutes.swapDetails:
+            }
+            case utils_1.navigationRoutes.swapDetails: {
+                if (variant === 'nft') {
+                    return t(`header.purchaseDetails`);
+                }
                 return t(`header.swapDetails`);
+            }
             default: {
                 switch (variant) {
                     case 'nft':
@@ -65,7 +78,7 @@ const NavigationHeader = () => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
                                             marginRight: -1.25,
                                         }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }));
 };

package/cjs/components/Insurance/InsuranceCard.js

@@ -14,21 +14,26 @@ const Card_1 = require("../Card");
 const Switch_1 = require("../Switch");
 const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const [enabled, setEnabled] = (0, react_1.useState)(false);
     const [cardExpanded, setCardExpanded] = (0, react_1.useState)(status === stores_1.RouteExecutionStatus.Idle);
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        onChange?.(checked);
+    };
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
                                     ? t('swap.tags.insurance')
-                                    : t('swap.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                    : t('swap.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: handleSwitch, value: enabled })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
                                         value: feeAmountUsd,
                                     }) }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, children: status === stores_1.RouteExecutionStatus.Idle
                                         ? t('swap.insurance.insure')
-                                        : t('swap.insurance.insured') }), status !== stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                        listStyleType: 'disc',
-                                        pl: 2,
-                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
+                                        : t('swap.insurance.insured') }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabled || status !== stores_1.RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            listStyleType: 'disc',
+                                            pl: 2,
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
                                         ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
                                         : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
                                             ? t('button.learnMore')

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -19,7 +19,7 @@ const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, fee
             }
         },
     });
-    const toggleInsurance = (_, checked) => {
+    const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {
                 setExecutableRoute(insuredRoute, insurableRouteId);

package/cjs/components/Insurance/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { RouteExecutionStatus } from '../../stores';
 export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
@@ -12,5 +11,5 @@ export interface InsuranceCardProps {
     feeAmountUsd?: string;
     status?: RouteExecutionStatus;
     insuranceCoverageId?: string;
-    onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    onChange?: (checked: boolean) => void;
 }

package/cjs/components/NFT/NFT.js

@@ -9,7 +9,7 @@ const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const Token_1 = require("../Token");
 const NFT_style_1 = require("./NFT.style");
-const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, contract, ...props }) => {
+const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => {
@@ -24,6 +24,6 @@ const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, cont
             setValue(providers_1.SwapFormKey.ToContractGasLimit, contract.gasLimit);
         }
     }, [contract, setValue, token]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectonName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
 };
 exports.NFT = NFT;

package/cjs/components/NFT/types.d.ts

@@ -2,7 +2,7 @@ import type { TokenAmount } from '@lifi/sdk';
 import type { WidgetContract } from '../../types';
 export interface NFTProps {
     imageUrl?: string;
-    collectonName?: string;
+    collectionName?: string;
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;

package/cjs/components/PoweredBy/PoweredBy.js

@@ -8,7 +8,6 @@ const version_1 = require("../../config/version");
 const providers_1 = require("../../providers");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
-const LiFiLogo_1 = require("../LiFiLogo");
 const PoweredBy_style_1 = require("./PoweredBy.style");
 const PoweredBy = () => {
     const { hiddenUI } = (0, providers_1.useWidgetConfig)();
@@ -17,10 +16,10 @@ const PoweredBy = () => {
         pathname.includes(utils_1.navigationRoutes.toToken)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, py: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 1, pb: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 3000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(LiFiLogo_1.LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] }) })) : null }));
+        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 1000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
 };
 exports.PoweredBy = PoweredBy;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -35,7 +35,7 @@ const SelectTokenButton = ({ formType, compact }) => {
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
     const cardTitle = formType === 'from' && variant === 'nft'
-        ? t(`swap.payWith`)
+        ? t(`header.payWith`)
         : t(`swap.${formType}`);
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };

package/cjs/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;

package/cjs/components/Step/Step.js

@@ -8,6 +8,7 @@ const Card_1 = require("../../components/Card");
 const StepActions_1 = require("../../components/StepActions");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const DestinationWalletAddress_1 = require("./DestinationWalletAddress");
 const GasStepProcess_1 = require("./GasStepProcess");
@@ -16,6 +17,7 @@ const StepTimer_1 = require("./StepTimer");
 const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -23,14 +25,22 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
                 const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
                 const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
                 if (hasCrossStep && hasSwapStep) {
-                    return t('swap.stepSwapAndBridge');
+                    return variant === 'nft'
+                        ? t('swap.stepBridgeAndBuy')
+                        : t('swap.stepSwapAndBridge');
                 }
                 if (hasCrossStep) {
-                    return t('swap.stepBridge');
+                    return variant === 'nft'
+                        ? t('swap.stepBridgeAndBuy')
+                        : t('swap.stepBridge');
                 }
-                return t('swap.stepSwap');
+                return variant === 'nft'
+                    ? t('swap.stepSwapAndBuy')
+                    : t('swap.stepSwap');
             default:
-                return t('swap.stepSwap');
+                return variant === 'nft'
+                    ? t('swap.stepSwapAndBuy')
+                    : t('swap.stepSwap');
         }
     };
     const formattedToAddress = (0, utils_1.shortenWalletAddress)(toAddress);

package/cjs/components/Step/StepList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

package/cjs/components/StepActions/StepActions.js

@@ -18,27 +18,13 @@ const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
 const StepActions = ({ step, dense, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, contractTool } = (0, providers_1.useWidgetConfig)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const [cardExpanded, setCardExpanded] = (0, react_1.useState)(false);
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    const customStep = variant === 'nft'
-        ? step.includedSteps?.find((step) => step.type === 'custom')
-        : undefined;
     const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    if (customStep && contractTool) {
-        const toolDetails = {
-            key: contractTool.name,
-            name: contractTool.name,
-            logoURI: contractTool.logoURI,
-        };
-        customStep.toolDetails = toolDetails;
-        if (dense) {
-            step.toolDetails = toolDetails;
-        }
-    }
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { children: (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
                             tool: step.toolDetails.name,
                         }) }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }))] }));
@@ -74,10 +60,7 @@ const StepDetailsContent = ({ step, variant }) => {
     else {
         fromAmount = (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals);
     }
-    const showToAmount = step.type !== 'custom' &&
-        step.tool !== 'custom' &&
-        variant !== 'nft' &&
-        !sameTokenProtocolStep;
+    const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {

package/cjs/components/SwapButton/SwapButton.js

@@ -28,14 +28,26 @@ const SwapButton = ({ onClick, hasRoute, text, disabled, loading, }) => {
     const getButtonText = () => {
         if (account.isActive) {
             if (!hasRoute) {
-                return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
+                switch (variant) {
+                    case 'nft':
+                        return t(`button.buy`);
+                    case 'refuel':
+                        return t(`button.getGas`);
+                    default:
+                        return t(`button.swap`);
+                }
             }
             if (text) {
                 return text;
             }
-            return variant !== 'refuel'
-                ? t(`button.reviewSwap`)
-                : t(`button.reviewGasSwap`);
+            switch (variant) {
+                case 'nft':
+                    return t(`button.reviewPurchase`);
+                case 'refuel':
+                    return t(`button.reviewGasSwap`);
+                default:
+                    return t(`button.reviewSwap`);
+            }
         }
         return t(`button.connectWallet`);
     };

package/cjs/components/SwapInput/SwapInputEndAdornment.d.ts

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

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -25,9 +25,21 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
-                            ? 'insurance-icon'
-                            : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : react_1.Fragment;
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsx)(InsuranceTooltip, { children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(RecommendedTagTooltip, { children: (0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
+const InsuranceTooltip = ({ children, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: t('swap.insurance.insure') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -18,7 +18,7 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
     const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -7,7 +7,7 @@ const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = ({ variant, ...other }) => {
     const { variant: widgetVariant } = (0, providers_1.useWidgetConfig)();
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' ? ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && widgetVariant !== 'nft' ? ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
                         borderRadius: `${theme.shape.borderRadius}px`,
                     }) }) })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -28,7 +28,7 @@ const SwapRoutes = (props) => {
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
     const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,

package/cjs/components/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -23,7 +23,7 @@ const SwapRoutesExpandedElement = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
-    const { containerStyle } = (0, providers_1.useWidgetConfig)();
+    const { variant, containerStyle } = (0, providers_1.useWidgetConfig)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes?.[0];
@@ -37,6 +37,6 @@ const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };
 exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/components/Token/Token.js

@@ -17,7 +17,7 @@ const Token = ({ token, ...other }) => {
     return (0, jsx_runtime_1.jsx)(exports.TokenBase, { token: token, ...other });
 };
 exports.Token = Token;
-const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+const TokenFallback = ({ token, isLoading, ...other }) => {
     const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token?.chainId, token?.address);
     return ((0, jsx_runtime_1.jsx)(exports.TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-import type { Chain, Token } from '@lifi/sdk';
+import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 export declare const TokenAvatarFallback: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarBase: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;

package/cjs/components/TokenList/TokenList.js

@@ -8,8 +8,8 @@ const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenNotFound_1 = require("./TokenNotFound");
-const useTokenSelect_1 = require("./useTokenSelect");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
+const useTokenSelect_1 = require("./useTokenSelect");
 const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = (0, react_1.useRef)(null);
     const { account } = (0, providers_1.useWallet)();
@@ -18,7 +18,9 @@ const TokenList = ({ formType, height, onClick, }) => {
     });
     const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
-    let filteredTokens = (tokensWithBalance ?? chainTokens ?? []);
+    let filteredTokens = (tokensWithBalance ??
+        chainTokens ??
+        []);
     const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
     filteredTokens = tokenSearchFilter
         ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||

package/cjs/components/TokenList/types.d.ts

@@ -1,14 +1,13 @@
-import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
-import type { Token } from '../../types';
+import type { TokenAmount } from '../../types';
 export interface TokenListProps {
     formType: SwapFormType;
     height: number;
     onClick?(): void;
 }
 export interface VirtualizedTokenListProps {
-    tokens: Token[];
+    tokens: TokenAmount[];
     featuredTokensLength?: number;
     scrollElementRef: MutableRefObject<HTMLElement | null>;
     isLoading: boolean;

package/cjs/config/theme.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const LoadingButton_1 = require("@mui/lab/LoadingButton");
 const ButtonBase_1 = require("@mui/material/ButtonBase");
-const colors_1 = require("@mui/material/colors");
 const DialogActions_1 = require("@mui/material/DialogActions");
+const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const palette = {
@@ -226,6 +226,19 @@ const createTheme = (mode, theme = {}) => {
                     }),
                 },
             },
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: ({ theme }) => ({
+                        backgroundColor: 'rgb(0 0 0 / 64%)',
+                        backdropFilter: 'blur(3px)',
+                        fontSize: '0.75rem',
+                        padding: theme.spacing(1, 1.5),
+                    }),
+                    arrow: {
+                        color: 'rgb(0 0 0 / 64%)',
+                    },
+                },
+            },
         },
     });
 };

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.0.0-beta.3';
+exports.version = '2.0.0-beta.5';

package/cjs/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[] | undefined;
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").StaticToken[] | undefined;