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

package/components/Header/NavigationTabs.style.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+export declare const NavbarTabs: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
+    allowScrollButtonsMobile?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    centered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
+    slots?: {
+        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
+        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    slotProps?: {
+        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+    } | undefined;
+    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
+    scrollButtons?: boolean | "auto" | undefined;
+    selectionFollowsFocus?: boolean | undefined;
+    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
+    textColor?: "inherit" | "primary" | "secondary" | undefined;
+    value?: any;
+    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
+    visibleScrollbar?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "sx" | "variant" | "value" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const NavbarTab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    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;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Header/NavigationTabs.style.js

@@ -0,0 +1,58 @@
+import { Tab, Tabs, tabClasses, tabsClasses } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+export const NavbarTabs = styled(Tabs)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : alpha(theme.palette.common.black, 0.04),
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(0.5),
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    height: 56,
+    [`.${tabsClasses.flexContainer}`]: {
+        alignItems: 'center',
+    },
+    [`.${tabsClasses.scroller}`]: {
+        overflow: 'initial !important',
+    },
+    [`.${tabsClasses.indicator}`]: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        height: 48,
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+        borderRadius: theme.shape.borderRadiusSecondary,
+        boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+    },
+}));
+export const NavbarTab = styled(Tab, {
+    shouldForwardProp: (prop) => prop !== 'isDarkMode',
+})(({ theme }) => ({
+    zIndex: 1,
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    textTransform: 'none',
+    height: 48,
+    minHeight: 48,
+    fontSize: '1rem',
+    fontWeight: 700,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    textDecoration: 'none',
+    [`&.${tabClasses.selected}`]: {
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        backgroundColor: 'transparent',
+    },
+    [`.${tabClasses.iconWrapper}`]: {
+        margin: theme.spacing(0, 1, 0, 0),
+    },
+}));

package/components/Header/WalletHeader.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const WalletHeader: React.FC;
+export declare const WalletMenuButton: React.FC;

package/components/Header/WalletHeader.js

@@ -14,28 +14,33 @@ import { navigationRoutes, shortenWalletAddress } from '../../utils';
 import { HeaderAppBar, WalletButton } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 export const WalletHeader = () => {
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: _jsx(WalletMenuButton, {}) }));
+};
+export const WalletMenuButton = () => {
     const { account } = useWallet();
-    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) }));
+    return account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {});
 };
 const ConnectButton = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
-    const config = useWidgetConfig();
+    const { walletManagement, subvariant } = useWidgetConfig();
     const { connect: connectWallet } = useWallet();
     const navigate = useNavigate();
     const connect = async () => {
-        if (config.walletManagement) {
+        if (walletManagement) {
             await connectWallet();
             return;
         }
         navigate(navigationRoutes.selectWallet);
     };
-    return (_jsx(WalletButton, { endIcon: _jsx(WalletIcon, {}), onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
-            marginRight: -1.25,
+    return (_jsx(WalletButton, { endIcon: subvariant !== 'split' ? _jsx(WalletIcon, {}) : undefined, startIcon: subvariant === 'split' ? _jsx(WalletIcon, {}) : undefined, onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: subvariant === 'split' ? 0 : -1.25,
+            marginLeft: subvariant === 'split' ? -1.25 : 0,
         }, children: t(`button.connectWallet`) }));
 };
 const ConnectedButton = () => {
     const { t } = useTranslation();
+    const { subvariant } = useWidgetConfig();
     const { account, disconnect } = useWallet();
     const walletAddress = shortenWalletAddress(account.address);
     const { chain } = useChain(account.chainId);
@@ -55,7 +60,8 @@ const ConnectedButton = () => {
         handleClose();
     };
     return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
-                    marginRight: -1.25,
+                    marginRight: subvariant === 'split' ? 0 : -1.25,
+                    marginLeft: subvariant === 'split' ? -1 : 0,
                 }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [_jsx(OpenInNewIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsNewIcon, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));

package/components/Header/useHeaderActionStore.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { create } from 'zustand';
 export const useHeaderActionStore = create((set, get) => ({
     setAction: (element) => {

package/components/SelectTokenButton/SelectTokenButton.js

@@ -3,7 +3,7 @@ import { Skeleton } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChain, useToken } from '../../hooks';
+import { useChain, useSwapOnly, useToken } from '../../hooks';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
@@ -13,6 +13,7 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { disabledUI, variant } = useWidgetConfig();
+    const swapOnly = useSwapOnly();
     const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType), tokenKey],
@@ -29,8 +30,10 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
     const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t(`header.selectChain`)
-        : t(`swap.selectChainAndToken`);
+        ? t('swap.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('swap.selectToken')
+            : t('swap.selectChainAndToken');
     const cardTitle = formType === 'from' && variant === 'nft'
         ? t(`header.payWith`)
         : t(`swap.${formType}`);

package/components/SwapRouteCard/SwapRouteCard.js

@@ -3,7 +3,7 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
@@ -22,11 +22,20 @@ 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 ? (_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
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { 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 })] }));
+                                : '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(RecommendedTagTooltip, { children: _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 }));
 };
+const InsuranceTooltip = ({ children, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", children: t('swap.insurance.insure') }), _jsxs(Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(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 } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

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: 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`, {
+    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, 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: _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, 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: _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/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/hooks/index.js

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/hooks/useContentHeight.js

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useState } from 'react';
-import { createElementId, ElementId } from '../utils';
+import { ElementId, createElementId } from '../utils';
 import { useDefaultElementId } from './useDefaultElementId';
 import { getScrollableContainer } from './useScrollableContainer';
 const getContentHeight = (elementId) => {
-    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
     const containerElement = document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
+    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
         return 0;
@@ -15,11 +15,9 @@ const getContentHeight = (elementId) => {
 };
 export const useContentHeight = () => {
     const elementId = useDefaultElementId();
-    const [contentHeight, setContentHeight] = useState(() => getContentHeight(elementId));
+    const [contentHeight, setContentHeight] = useState(0);
     useLayoutEffect(() => {
-        if (!contentHeight) {
-            setContentHeight(getContentHeight(elementId));
-        }
+        setContentHeight(getContentHeight(elementId));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return contentHeight;

package/hooks/useInitializer.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { checkPackageUpdates } from '@lifi/sdk';
 import { useEffect } from 'react';
 import { name, version } from '../config/version';

package/hooks/useSwapOnly.d.ts

@@ -0,0 +1 @@
+export declare const useSwapOnly: () => boolean;

package/hooks/useSwapOnly.js

@@ -0,0 +1,5 @@
+import { useSplitSubvariantStore } from '../stores';
+export const useSwapOnly = () => {
+    const state = useSplitSubvariantStore((state) => state.state);
+    return state === 'swap';
+};

package/hooks/useSwapRoutes.js

@@ -7,12 +7,14 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedWatch, useGasRefuel, useToken } from '.';
 import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
+import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
 export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     const lifi = useLiFi();
     const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
+    const swapOnly = useSwapOnly();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
         'slippage',
         'routePriority',
@@ -63,7 +65,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         toContractCallData,
         toContractGasLimit,
         slippage,
-        enabledBridges,
+        swapOnly ? [] : enabledBridges,
         enabledExchanges,
         routePriority,
         variant,

package/i18n/en.json

@@ -176,9 +176,9 @@
     "rateChange": "Rate change",
     "receiving": "Receiving",
     "refuelStepDetails": "Get gas via {{tool}}",
-    "selectChain": "Chain",
+    "selectChain": "Select chain",
     "selectChainAndToken": "Select chain and token",
-    "selectToken": "Token",
+    "selectToken": "Select token",
     "sendToAddress": "Send to {{address}}",
     "sendToWallet": "Send to a different wallet",
     "sentToAddress": "Sent to {{address}}",
@@ -251,6 +251,7 @@
     },
     "numberOfSteps": "A number of swap steps. Each step can contain 1-2 transactions that require a signature.",
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "recommended": "A cheap route that balances complexity and ease of use.",
     "settingsModified": "Settings (modified)"
   },
   "wallet": {

package/i18n/pt.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "Automático",
+    "buy": "Comprar",
+    "buyNow": "Comprar agora",
     "cancel": "Cancelar",
     "connectWallet": "Conectar carteira",
     "contactSupport": "Falar com o suporte",
@@ -23,6 +25,7 @@
     "resetSettings": "Redefinir as configurações",
     "restartSwap": "Reiniciar a conversão",
     "reviewGasSwap": "Rever o gás de conversão",
+    "reviewPurchase": "Revisar compra",
     "reviewSwap": "Rever conversão",
     "seeDetails": "Ver detalhes",
     "showAll": "Mostrar tudo",
@@ -39,10 +42,14 @@
   },
   "header": {
     "activeSwaps": "Conversões ativas",
+    "bridge": "Ponte",
     "checkout": "Finalizar",
     "from": "Converter a partir de",
     "gas": "Gás",
     "gasSwap": "Conversão de gás",
+    "payWith": "Pagar com",
+    "purchase": "Compra",
+    "purchaseDetails": "Detalhes da compra",
     "routes": "Você recebe",
     "selectChain": "Selecionar uma rede",
     "selectWallet": "Selecionar sua carteira",
@@ -75,6 +82,7 @@
     "currentAmount": "Quantidade atual",
     "error": {
       "message": {
+        "allowanceRequired": "A quantidade a ser transferida para {{tokenSymbol}} excede a sua permissão atual. Por favor, aumente a sua permissão e tente novamente.",
         "slippageThreshold": "A derrapagem é maior do que o limite definido. Solicite uma nova rota para obter uma nova cotação.",
         "transactionFailed": "Por favor, verifique o explorador de blocos para mais informações.",
         "transactionNotSent": "A transação não foi enviada. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} na {{chainName}} permanece na sua carteira.",
@@ -82,6 +90,7 @@
         "unknown": "Por favor, tente novamente ou fale com o suporte."
       },
       "title": {
+        "allowanceRequired": "Permissão insuficiente",
         "balanceIsTooLow": "O saldo é muito baixo",
         "chainSwitch": "Necessário mudança de rede",
         "failed": "Conversão falhou",
@@ -131,7 +140,6 @@
     "onChain": "em {{nome da rede}}",
     "otherTokens": "Outros tokens",
     "ownedBy": "Possuído por",
-    "payWith": "Pagar com",
     "process": {
       "crossChain": {
         "actionRequired": "Por favor, assine a transação",
@@ -139,6 +147,9 @@
         "pending": "Aguardando a transação da ponte",
         "started": "Preparando a transação da ponte"
       },
+      "nft": {
+        "done": "NFT comprado"
+      },
       "receivingChain": {
         "done": "Ponte concluída",
         "partial": "Ponte parcialmente concluída",
@@ -165,24 +176,27 @@
     "rateChange": "Alterar taxa",
     "receiving": "Recebendo",
     "refuelStepDetails": "Obter gás via {{tool}}",
-    "routes": "Você recebe",
-    "selectChain": "Rede",
+    "selectChain": "Selecione a rede",
     "selectChainAndToken": "Selecione a rede e o token",
-    "selectToken": "Token",
+    "selectToken": "Selecione o Token",
     "sendToAddress": "Enviar para",
     "sendToWallet": "Enviar para uma carteira diferente",
     "sentToAddress": "Enviar para",
     "stepBridge": "Ponte",
+    "stepBridgeAndBuy": "Transfira e compre",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Conversão",
     "stepSwapAndBridge": "Converter e enviar pela ponte",
+    "stepSwapAndBuy": "Converta e compre",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Tentamos completar a conversão, mas a {{tool}} ficou sem liquidez para o token {{tokenSymbol}}.",
+        "purchaseSuccessful": "Agora você tem {{assetName}} na carteira {{walletAddress}} na cadeia {{chainName}}",
         "swapSuccessful": "Agora há {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} na carteira {{walletAddress}} na rede {{chainName}}."
       },
       "title": {
         "gasSwapSuccessful": "Conversão de gás bem sucedida",
+        "purchaseSuccessful": "Compra efetuada com sucesso",
         "refundIssued": "Reembolso emitido",
         "swapPartiallySuccessful": "Conversão parcialmente bem sucedida",
         "swapSuccessful": "Conversão bem sucedida"
@@ -237,6 +251,7 @@
     },
     "numberOfSteps": "Um número de passos para a conversão. Cada etapa pode conter 1-2 transações que requerem uma assinatura.",
     "progressToNextUpdate": "Os dados exibidos serão atualizados automaticamente após {{value}} segundos. Clique aqui para atualizar manualmente.",
+    "recommended": "Uma rota econômica que equilibra complexidade e facilidade de uso.",
     "settingsModified": "Configurações (modificado)"
   },
   "wallet": {