@lifi/widget 2.0.0-beta.9 → 2.0.0

package/components/SendToWallet/SendToWallet.js

@@ -4,7 +4,7 @@ import { Collapse, FormHelperText } from '@mui/material';
 import { forwardRef, useEffect, useRef } from 'react';
 import { useController, useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
+import { FormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
 import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
 import { Card, CardTitle } from '../Card';
@@ -21,10 +21,9 @@ export const SendToWallet = forwardRef((props, ref) => {
     const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress);
     const requiredToAddressRef = useRef(requiredToAddress);
     const { field: { onChange, onBlur, name, value }, } = useController({
-        name: SwapFormKey.ToAddress,
+        name: FormKey.ToAddress,
         rules: {
-            required: requiredToAddress &&
-                t('swap.error.title.walletAddressRequired'),
+            required: requiredToAddress && t('error.title.walletAddressRequired'),
             validate: async (value) => {
                 try {
                     if (!value) {
@@ -32,13 +31,13 @@ export const SendToWallet = forwardRef((props, ref) => {
                     }
                     const address = await account.signer?.provider?.resolveName(value);
                     return (isAddress(address || value) ||
-                        t('swap.error.title.walletAddressInvalid'));
+                        t('error.title.walletAddressInvalid'));
                 }
                 catch {
-                    return t('swap.error.title.walletEnsAddressInvalid');
+                    return t('error.title.walletEnsAddressInvalid');
                 }
             },
-            onBlur: () => trigger(SwapFormKey.ToAddress),
+            onBlur: () => trigger(FormKey.ToAddress),
         },
     });
     // We want to show toAddress field if it is set via widget configuration and not hidden
@@ -52,20 +51,20 @@ export const SendToWallet = forwardRef((props, ref) => {
         }
     }, [showInstantly, setSendToWallet]);
     useEffect(() => {
-        const value = getValues(SwapFormKey.ToAddress);
+        const value = getValues(FormKey.ToAddress);
         if (value) {
-            trigger(SwapFormKey.ToAddress);
+            trigger(FormKey.ToAddress);
             // Trigger validation if we change requiredToAddress in the runtime
         }
         else if (requiredToAddressRef.current !== requiredToAddress) {
             requiredToAddressRef.current = requiredToAddress;
-            trigger(SwapFormKey.ToAddress).then(() => clearErrors(SwapFormKey.ToAddress));
+            trigger(FormKey.ToAddress).then(() => clearErrors(FormKey.ToAddress));
         }
     }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
     if (hiddenToAddress) {
         return null;
     }
-    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
+    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('main.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('main.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
 });
 export const SendToWalletFormHelperText = () => {
     const { errors } = useFormState();

package/components/SendToWallet/SendToWallet.style.d.ts

@@ -2,7 +2,7 @@
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").FormControlPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").FormControlPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/components/SendToWallet/SendToWalletButton.js

@@ -3,7 +3,7 @@ import WalletIcon from '@mui/icons-material/Wallet';
 import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
+import { FormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
 import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
 export const SendToWalletButton = () => {
@@ -21,11 +21,11 @@ export const SendToWalletButton = () => {
     }
     const handleClick = () => {
         if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-            setValue(SwapFormKey.ToAddress, '', { shouldTouch: true });
+            setValue(FormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();
     };
-    return (_jsx(Tooltip, { title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             }, children: _jsx(WalletIcon, {}) }) }));

package/components/SmallAvatar.d.ts

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

package/components/Step/DestinationWalletAddress.js

@@ -15,10 +15,10 @@ export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) =>
                             position: 'absolute',
                             fontSize: '1rem',
                         } }) }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: 400, children: isDone
-                        ? t('swap.sentToAddress', {
+                        ? t('main.sentToAddress', {
                             address: toAddress,
                         })
-                        : t('swap.sendToAddress', {
+                        : t('main.sendToAddress', {
                             address: toAddress,
                         }) }), _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })] }) }));
 };

package/components/Step/GasStepProcess.js

@@ -16,5 +16,5 @@ export const GasStepProcess = ({ step }) => {
                             value: (step.execution?.gasAmountUSD ||
                                 step.estimate.gasCosts?.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)) ??
                                 0,
-                        }), ' ', isDone ? t('swap.gasFeePaid') : t('swap.gasFeeEstimated')] })] }) }));
+                        }), ' ', isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')] })] }) }));
 };

package/components/Step/Step.js

@@ -14,7 +14,7 @@ import { StepTimer } from './StepTimer';
 export const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    const { variant } = useWidgetConfig();
+    const { subvariant } = useWidgetConfig();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -22,22 +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 variant === 'nft'
-                        ? t('swap.stepBridgeAndBuy')
-                        : t('swap.stepSwapAndBridge');
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepSwapAndBridge');
                 }
                 if (hasCrossStep) {
-                    return variant === 'nft'
-                        ? t('swap.stepBridgeAndBuy')
-                        : t('swap.stepBridge');
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepBridge');
                 }
-                return variant === 'nft'
-                    ? t('swap.stepSwapAndBuy')
-                    : t('swap.stepSwap');
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
             default:
-                return variant === 'nft'
-                    ? t('swap.stepSwapAndBuy')
-                    : t('swap.stepSwap');
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
         }
     };
     const formattedToAddress = shortenAddress(toAddress);

package/components/Step/StepTimer.js

@@ -40,7 +40,7 @@ export const StepTimer = ({ step, hideInProgress }) => {
         step,
     ]);
     if (!isExecutionStarted) {
-        return (_jsx(_Fragment, { children: t('swap.estimatedTime', {
+        return (_jsx(_Fragment, { children: t('main.estimatedTime', {
                 value: Math.ceil(step.estimate.executionDuration / 60),
             }) }));
     }
@@ -50,7 +50,7 @@ export const StepTimer = ({ step, hideInProgress }) => {
         (isTimerExpired && hideInProgress)) {
         return null;
     }
-    return isTimerExpired ? (_jsx(_Fragment, { children: t('swap.inProgress') })) : (
+    return isTimerExpired ? (_jsx(_Fragment, { children: t('main.inProgress') })) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     _jsx(_Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
 };

package/components/StepActions/StepActions.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import type { LifiStep, Step } from '@lifi/sdk';
-import type { WidgetVariant } from '../../types';
+import type { WidgetSubvariant } from '../../types';
 import type { StepActionsProps, StepDetailsLabelProps } from './types';
 export declare const StepActions: React.FC<StepActionsProps>;
 export declare const IncludedSteps: React.FC<{
     step: LifiStep;
-    variant?: WidgetVariant;
+    subvariant?: WidgetSubvariant;
 }>;
 export declare const StepDetailsContent: React.FC<{
     step: Step;
-    variant?: WidgetVariant;
+    subvariant?: WidgetSubvariant;
 }>;
 export declare const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps>;
 export declare const CrossStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;

package/components/StepActions/StepActions.js

@@ -15,18 +15,18 @@ import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export const StepActions = ({ step, dense, ...other }) => {
     const { t } = useTranslation();
-    const { variant } = useWidgetConfig();
+    const { subvariant } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = useState(false);
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
     const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    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`, {
+    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(`main.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 }))] }));
+                        }) }), 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, subvariant: subvariant }) })) : (_jsx(IncludedSteps, { step: step, subvariant: subvariant }))] }));
 };
-export const IncludedSteps = ({ step, variant }) => {
+export const IncludedSteps = ({ step, subvariant }) => {
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
         const tool = step.includedSteps?.[Number(icon) - 1];
@@ -34,24 +34,28 @@ export const IncludedSteps = ({ step, variant }) => {
                 boxSizing: 'content-box',
             }, children: tool.toolDetails.name[0] })) : null;
     };
-    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+    const StepDetailsLabel = step.tool === 'custom' && subvariant === 'nft'
         ? CustomStepDetailsLabel
         : step.type === 'lifi' &&
             step.includedSteps.some((step) => step.type === 'cross')
             ? CrossStepDetailsLabel
             : SwapStepDetailsLabel;
-    return step.includedSteps.length > 1 ? (_jsx(Box, { mt: 1.5, children: _jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' ? (_jsx(CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? (_jsx(ProtocolStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) }) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] }));
+    return step.includedSteps.length > 1 ? (_jsx(Box, { mt: 1.5, children: _jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && subvariant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, subvariant: subvariant })) : step.type === 'cross' ? (_jsx(CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? (_jsx(ProtocolStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, subvariant: subvariant }) })] }, step.id))) }) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, subvariant: subvariant === 'nft' ? subvariant : undefined }), _jsx(StepDetailsContent, { step: step, subvariant: subvariant })] }));
 };
-export const StepDetailsContent = ({ step, variant }) => {
+export const StepDetailsContent = ({ step, subvariant }) => {
     const { t } = useTranslation();
     const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId &&
         step.action.fromToken.address === step.action.toToken.address;
     let fromAmount;
     if (sameTokenProtocolStep) {
-        fromAmount = Big(step.estimate.fromAmount)
+        const estimatedFromAmount = Big(step.estimate.fromAmount)
             .div(10 ** step.action.fromToken.decimals)
-            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals))
-            .toString();
+            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+        fromAmount = estimatedFromAmount.gt(0)
+            ? estimatedFromAmount.toString()
+            : Big(step.estimate.fromAmount)
+                .div(10 ** step.action.fromToken.decimals)
+                .toString();
     }
     else {
         fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);
@@ -63,19 +67,19 @@ export const StepDetailsContent = ({ step, variant }) => {
                         value: formatTokenAmount(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
                     }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
-export const CustomStepDetailsLabel = ({ step, variant, }) => {
+export const CustomStepDetailsLabel = ({ step, subvariant, }) => {
     const { t } = useTranslation();
-    if (!variant) {
+    if (!subvariant) {
         return null;
     }
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`swap.${variant}StepDetails`, {
+    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`main.${subvariant}StepDetails`, {
             tool: step.toolDetails.name,
         }) }));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.crossStepDetails', {
+    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.crossStepDetails', {
             from: getChainById(step.action.fromChainId)?.name,
             to: getChainById(step.action.toChainId)?.name,
             tool: step.toolDetails.name,
@@ -84,7 +88,7 @@ export const CrossStepDetailsLabel = ({ step }) => {
 export const SwapStepDetailsLabel = ({ step }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.swapStepDetails', {
+    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.swapStepDetails', {
             chain: getChainById(step.action.fromChainId)?.name,
             tool: step.toolDetails.name,
         }) }));
@@ -92,7 +96,7 @@ export const SwapStepDetailsLabel = ({ step }) => {
 export const ProtocolStepDetailsLabel = ({ step }) => {
     const { t } = useTranslation();
     return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: step.toolDetails.key === 'lifuelProtocol'
-            ? t('swap.refuelStepDetails', {
+            ? t('main.refuelStepDetails', {
                 tool: step.toolDetails.name,
             })
             : step.toolDetails.name }));

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

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

package/components/StepActions/types.d.ts

@@ -1,11 +1,11 @@
 import type { LifiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import type { WidgetVariant } from '../../types';
+import type { WidgetSubvariant } from '../../types';
 export interface StepActionsProps extends BoxProps {
     step: LifiStep;
     dense?: boolean;
 }
 export interface StepDetailsLabelProps {
     step: Step;
-    variant?: Extract<WidgetVariant, 'nft'>;
+    subvariant?: Extract<WidgetSubvariant, 'nft'>;
 }

package/components/Token/Token.js

@@ -28,7 +28,7 @@ export const TokenBase = ({ token, connected, step, disableDescription, isLoadin
                             value: formattedTokenAmount,
                         }) }))] }), _jsxs(TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? (_jsx(Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`format.currency`, {
                             value: formattedTokenPrice,
-                        }) })), !disableDescription ? (_jsx(TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`swap.tokenOnChain`, {
+                        }) })), !disableDescription ? (_jsx(TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`main.tokenOnChain`, {
                             tokenSymbol: token?.symbol,
                             chainName: chain?.name,
                         }) }))) : null, step ? (_jsxs(Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [_jsx(Box, { pr: 0.75, children: _jsx(SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {

package/components/TokenList/TokenList.js

@@ -3,7 +3,7 @@ import { Box } from '@mui/material';
 import { useRef } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
-import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
+import { FormKey, FormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 import { useTokenSelect } from './useTokenSelect';
@@ -11,9 +11,9 @@ export const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = useRef(null);
     const { account } = useWallet();
     const [selectedChainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [FormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
+    const [tokenSearchFilter] = useDebouncedWatch([FormKey.TokenSearchFilter], 320);
     const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
     let filteredTokens = (tokensWithBalance ??

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

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

package/components/TokenList/TokenList.style.js

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

package/components/TokenList/TokenListItem.js

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

package/components/TokenList/TokenNotFound.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { SwapFormTypeProps } from '../../providers';
-export declare const TokenNotFound: React.FC<SwapFormTypeProps>;
+import type { FormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<FormTypeProps>;

package/components/TokenList/TokenNotFound.js

@@ -4,11 +4,11 @@ import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 export const TokenNotFound = ({ formType }) => {
     const { t } = useTranslation();
     const [selectedChainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [FormKeyHelper.getChainKey(formType)],
     });
     const { getChainById } = useChains();
     return (_jsxs(Box, { sx: {
@@ -18,7 +18,7 @@ export const TokenNotFound = ({ formType }) => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        }, children: [_jsx(Typography, { fontSize: 48, lineHeight: 1, children: _jsx(SearchOffIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+        }, children: [_jsx(Typography, { fontSize: 48, lineHeight: 1, children: _jsx(SearchOffIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('info.message.emptyTokenList', {
                     chainName: getChainById(selectedChainId)?.name,
                 }) })] }));
 };

package/components/TokenList/VirtualizedTokenList.js

@@ -46,9 +46,9 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
     }
     return (_jsx(List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('main.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
-                    item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));
+                    item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('main.otherTokens') })) : null }, item.key));
         }) }));
 };

package/components/TokenList/types.d.ts

@@ -1,9 +1,9 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormType } from '../../providers';
+import type { FormType } from '../../providers';
 import type { TokenAmount } from '../../types';
 export interface TokenListProps {
-    formType: SwapFormType;
+    formType: FormType;
     height: number;
     onClick?(): void;
 }

package/components/TokenList/useTokenSelect.d.ts

@@ -1,2 +1,2 @@
-import type { SwapFormType } from '../../providers';
-export declare const useTokenSelect: (formType: SwapFormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;
+import type { FormType } from '../../providers';
+export declare const useTokenSelect: (formType: FormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;

package/components/TokenList/useTokenSelect.js

@@ -1,32 +1,34 @@
 import { useCallback } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
 export const useTokenSelect = (formType, onClick) => {
-    const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
+    const tokenKey = FormKeyHelper.getTokenKey(formType);
     const { field: { onChange, onBlur }, } = useController({ name: tokenKey });
     const { setValue, getValues } = useFormContext();
+    const { subvariant } = useWidgetConfig();
     return useCallback((tokenAddress, chainId) => {
         onChange(tokenAddress);
         onBlur();
-        const selectedChainId = chainId ?? getValues(SwapFormKeyHelper.getChainKey(formType));
+        const selectedChainId = chainId ?? getValues(FormKeyHelper.getChainKey(formType));
         // Set chain again to trigger URL builder update
-        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+        setValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
             shouldDirty: true,
             shouldTouch: true,
         });
-        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(FormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChainId] = getValues([
-            SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            SwapFormKeyHelper.getChainKey(oppositeFormType),
+            FormKeyHelper.getTokenKey(oppositeFormType),
+            FormKeyHelper.getChainKey(oppositeFormType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChainId === selectedChainId) {
-            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+            selectedOppositeChainId === selectedChainId &&
+            subvariant !== 'nft') {
+            setValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
                 shouldDirty: true,
                 shouldTouch: true,
             });
         }
         onClick?.();
-    }, [formType, getValues, onBlur, onChange, onClick, setValue]);
+    }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
 };