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

package/components/Insurance/InsuranceCard.js

@@ -1,22 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Link, Typography } from '@mui/material';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
-import { Card, CardLabel, CardLabelTypography } from '../Card';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
 export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = useTranslation();
-    return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
-                                    ? t(`swap.tags.insurance`)
-                                    : t(`swap.tags.insured`) })] }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
-                            value: feeAmountUsd,
-                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { fontSize: 12, children: status === RouteExecutionStatus.Idle
-                            ? 'Get 100% coverage for lost tokens.'
-                            : '100% coverage for lost tokens.' }), _jsx(Link, { href: status === 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: _jsx(Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === RouteExecutionStatus.Idle
-                                ? 'Learn more'
-                                : 'View coverage' }) })] })] }));
+    const [enabled, setEnabled] = useState(false);
+    const [cardExpanded, setCardExpanded] = useState(status === RouteExecutionStatus.Idle);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        onChange?.(checked);
+    };
+    return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
+                                    ? t('swap.tags.insurance')
+                                    : t('swap.tags.insured') })] }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: handleSwitch, value: enabled })) : (_jsx(Box, { my: -0.5, children: _jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }))] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                        value: feeAmountUsd,
+                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: status === RouteExecutionStatus.Idle
+                                        ? t('swap.insurance.insure')
+                                        : t('swap.insurance.insured') }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
+                                            listStyleType: 'disc',
+                                            pl: 2,
+                                        }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] }) }), _jsx(Link, { href: status === 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: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
+                                            ? t('button.learnMore')
+                                            : t('button.viewCoverage') }) })] })] }) })] }));
 };

package/components/Insurance/InsuranceCollapsed.js

@@ -16,7 +16,7 @@ export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverage
             }
         },
     });
-    const toggleInsurance = (_, checked) => {
+    const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {
                 setExecutableRoute(insuredRoute, insurableRouteId);

package/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/components/NFT/NFT.js

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../../providers';
 import { Token } from '../Token';
 import { PreviewAvatar } from './NFT.style';
-export const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, contract, ...props }) => {
+export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     useEffect(() => {
@@ -21,5 +21,5 @@ export const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, toke
             setValue(SwapFormKey.ToContractGasLimit, contract.gasLimit);
         }
     }, [contract, setValue, token]);
-    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectonName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
 };

package/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/components/PoweredBy/PoweredBy.js

@@ -5,7 +5,6 @@ import { version } from '../../config/version';
 import { useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
-import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 export const PoweredBy = () => {
     const { hiddenUI } = useWidgetConfig();
@@ -14,9 +13,9 @@ export const PoweredBy = () => {
         pathname.includes(navigationRoutes.toToken)) {
         return null;
     }
-    return (_jsx(Box, { px: 3, py: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
+    return (_jsx(Box, { px: 3, pt: 1, pb: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, px: 0.5, children: "Powered by" }), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] }) })) : null }));
+        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 1000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), _jsx(Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
 };

package/components/SelectTokenButton/SelectTokenButton.js

@@ -32,7 +32,7 @@ export 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 (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };

package/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/components/Step/Step.js

@@ -5,6 +5,7 @@ import { Card, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
 import { useChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { shortenWalletAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
 import { GasStepProcess } from './GasStepProcess';
@@ -13,6 +14,7 @@ import { StepTimer } from './StepTimer';
 export const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
+    const { variant } = useWidgetConfig();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -20,14 +22,22 @@ export 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 = shortenWalletAddress(toAddress);

package/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/components/StepActions/StepActions.js

@@ -15,27 +15,13 @@ import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export const StepActions = ({ step, dense, ...other }) => {
     const { t } = useTranslation();
-    const { variant, contractTool } = useWidgetConfig();
+    const { variant } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = 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 (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
                             tool: step.toolDetails.name,
                         }) }), hasCollapsedSteps ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), hasCollapsedSteps ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step, variant: variant }) })) : (_jsx(IncludedSteps, { step: step, variant: variant }))] }));
@@ -69,10 +55,7 @@ export const StepDetailsContent = ({ step, variant }) => {
     else {
         fromAmount = 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 (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {

package/components/SwapButton/SwapButton.js

@@ -25,14 +25,26 @@ export 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/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/components/SwapRouteCard/SwapRouteCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Collapse } from '@mui/material';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
@@ -22,8 +22,11 @@ export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ..
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
-                            ? 'insurance-icon'
-                            : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? (_jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, children: t('swap.insurance.insure') }), _jsxs(Box, { sx: {
+                                        listStyleType: 'disc',
+                                        pl: 2,
+                                    }, children: [_jsx(Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 12, display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };

package/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -15,7 +15,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
     const feeCosts = getFeeCostsBreakdown(route, false);
-    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 12, 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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 12, 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: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

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

package/components/SwapRoutes/SwapRoutes.js

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

package/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/components/SwapRoutes/SwapRoutesExpanded.js

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

package/components/Token/Token.js

@@ -13,7 +13,7 @@ export const Token = ({ token, ...other }) => {
     }
     return _jsx(TokenBase, { token: token, ...other });
 };
-export const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+export const TokenFallback = ({ token, isLoading, ...other }) => {
     const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
     return (_jsx(TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };

package/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/components/TokenList/TokenList.js

@@ -5,8 +5,8 @@ import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
-import { useTokenSelect } from './useTokenSelect';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
+import { useTokenSelect } from './useTokenSelect';
 export const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = useRef(null);
     const { account } = useWallet();
@@ -15,7 +15,9 @@ export const TokenList = ({ formType, height, onClick, }) => {
     });
     const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = 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/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/config/theme.js

@@ -1,7 +1,7 @@
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { touchRippleClasses } from '@mui/material/ButtonBase';
-import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
+import { common } from '@mui/material/colors';
 import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
 import { keyframes } from '@mui/system';
 const palette = {
@@ -223,6 +223,19 @@ export 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/config/version.d.ts

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

package/config/version.js

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

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

package/hooks/useProcessMessage.d.ts

@@ -1,10 +1,11 @@
 import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
+import type { WidgetVariant } from '../types';
 export declare const useProcessMessage: (step?: LifiStep, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, variant?: WidgetVariant): {
     title?: string;
     message?: string;
 };

package/hooks/useProcessMessage.js

@@ -1,18 +1,21 @@
 import { LifiErrorCode } from '@lifi/sdk';
 import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../providers';
 import { formatTokenAmount } from '../utils';
 import { useChains } from './useChains';
 export const useProcessMessage = (step, process) => {
+    const { variant } = useWidgetConfig();
     const { t } = useTranslation();
     const { getChainById } = useChains();
     if (!step || !process) {
         return {};
     }
-    return getProcessMessage(t, getChainById, step, process);
+    return getProcessMessage(t, getChainById, step, process, variant);
 };
 const processStatusMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.tokenAllowance.pending`),
         PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
         DONE: (t) => t(`swap.process.tokenAllowance.done`),
     },
@@ -24,7 +27,9 @@ const processStatusMessages = {
         STARTED: (t) => t(`swap.process.swap.started`),
         ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
         PENDING: (t) => t(`swap.process.swap.pending`),
-        DONE: (t) => t(`swap.process.swap.done`),
+        DONE: (t, variant) => variant === 'nft'
+            ? t(`swap.process.nft.done`)
+            : t(`swap.process.swap.done`),
     },
     CROSS_CHAIN: {
         STARTED: (t) => t(`swap.process.crossChain.started`),
@@ -34,7 +39,9 @@ const processStatusMessages = {
     },
     RECEIVING_CHAIN: {
         PENDING: (t) => t(`swap.process.receivingChain.pending`),
-        DONE: (t) => t(`swap.process.receivingChain.done`),
+        DONE: (t, variant) => variant === 'nft'
+            ? t(`swap.process.nft.done`)
+            : t(`swap.process.receivingChain.done`),
     },
     TRANSACTION: {},
 };
@@ -64,7 +71,7 @@ const processSubstatusMessages = {
     INVALID: {},
     NOT_FOUND: {},
 };
-export function getProcessMessage(t, getChainById, step, process) {
+export function getProcessMessage(t, getChainById, step, process, variant) {
     if (process.error && process.status === 'FAILED') {
         const getTransactionNotSentMessage = () => t(`swap.error.message.transactionNotSent`, {
             amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
@@ -74,6 +81,12 @@ export function getProcessMessage(t, getChainById, step, process) {
         let title = '';
         let message = '';
         switch (process.error.code) {
+            case LifiErrorCode.AllowanceRequired:
+                title = t(`swap.error.title.allowanceRequired`);
+                message = t(`swap.error.message.allowanceRequired`, {
+                    tokenSymbol: step.action.fromToken.symbol,
+                });
+                break;
             case LifiErrorCode.BalanceError:
                 title = t(`swap.error.title.balanceIsTooLow`);
                 message = getTransactionNotSentMessage();
@@ -86,6 +99,10 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageNotMet`);
+                message = t(`swap.error.message.slippageThreshold`);
+                break;
             case LifiErrorCode.TransactionFailed:
                 title = t(`swap.error.title.transactionFailed`);
                 message = t(`swap.error.message.transactionFailed`);
@@ -102,10 +119,6 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.transactionCanceled`);
                 message = getTransactionNotSentMessage();
                 break;
-            case LifiErrorCode.SlippageError:
-                title = t(`swap.error.title.slippageNotMet`);
-                message = t(`swap.error.message.slippageThreshold`);
-                break;
             case LifiErrorCode.TransactionRejected:
                 title = t(`swap.error.title.transactionRejected`);
                 message = t(`swap.error.message.transactionRejected`, {
@@ -127,6 +140,7 @@ export function getProcessMessage(t, getChainById, step, process) {
         }
         return { title, message };
     }
-    const title = processSubstatusMessages[process.status]?.[process.substatus]?.(t) ?? processStatusMessages[process.type]?.[process.status]?.(t);
+    const title = processSubstatusMessages[process.status]?.[process.substatus]?.(t) ??
+        processStatusMessages[process.type]?.[process.status]?.(t, variant);
     return { title };
 }