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

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/config/version.d.ts

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

package/config/version.js

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

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}}",

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": {

package/i18n/uk.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "Авто",
+    "buy": "Придбати",
+    "buyNow": "Придбати",
     "cancel": "Скасувати",
     "connectWallet": "Під'єднати гаманець",
     "contactSupport": "Служба підтримки",
@@ -23,6 +25,7 @@
     "resetSettings": "Скинути налаштування",
     "restartSwap": "Перезапустити своп",
     "reviewGasSwap": "Переглянути своп газу",
+    "reviewPurchase": "Перегляд покупки",
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
@@ -39,12 +42,16 @@
   },
   "header": {
     "activeSwaps": "Активні свопи",
+    "bridge": "Бридж",
     "checkout": "Розрахунок",
     "from": "Своп з",
     "gas": "Газ",
     "gasSwap": "Своп газу",
+    "payWith": "Сплатити за допомогою",
+    "purchase": "Купівля",
+    "purchaseDetails": "Деталі покупки",
     "routes": "Ви отримаєте",
-    "selectChain": "Оберіть чейн",
+    "selectChain": "Виберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
     "settings": "Налаштування",
     "swap": "Своп",
@@ -75,6 +82,7 @@
     "currentAmount": "Поточна сума",
     "error": {
       "message": {
+        "allowanceRequired": "Сума переказу для {{tokenSymbol}} перевищує поточну межу. Збільшіть доступну кількість у гаманці та спробуйте ще раз.",
         "slippageThreshold": "Прослизання перевищує визначений поріг. Будь ласка, зробіть запит на новий маршрут, щоб отримати нову пропозицію.",
         "transactionFailed": "Будь ласка, перевірте провідник блоків для отримання додаткової інформації.",
         "transactionNotSent": "Транзакція не була відправлена. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}} все ще знаходяться у вашому гаманці.",
@@ -82,6 +90,7 @@
         "unknown": "Будь ласка, спробуйте ще раз або зверніться до служби підтримки."
       },
       "title": {
+        "allowanceRequired": "Недостатня дозволена кількість",
         "balanceIsTooLow": "Баланс занадто низький",
         "chainSwitch": "Потрібно переключити чейн.",
         "failed": "Помилка обміну.",
@@ -131,7 +140,6 @@
     "onChain": "на {{chainName}}",
     "otherTokens": "Інші токени",
     "ownedBy": "Власник",
-    "payWith": "Оплатити з",
     "process": {
       "crossChain": {
         "actionRequired": "Будь ласка, підпишіть транзакцію",
@@ -139,6 +147,9 @@
         "pending": "Очікування бридж транзакції",
         "started": "Підготовка бридж транзакції"
       },
+      "nft": {
+        "done": "Придбано NFT"
+      },
       "receivingChain": {
         "done": "Бридж завершено",
         "partial": "Бридж частково завершено",
@@ -165,24 +176,27 @@
     "rateChange": "Зміна курсу",
     "receiving": "Отримання",
     "refuelStepDetails": "Отримати газ через {{tool}}",
-    "routes": "Ви отримаєте",
-    "selectChain": "Чейн",
+    "selectChain": "Виберіть чейн",
     "selectChainAndToken": "Виберіть чейн і токен",
-    "selectToken": "Токен",
+    "selectToken": "Виберіть токен",
     "sendToAddress": "Відправити на {{address}}",
     "sendToWallet": "Надіслати на інший гаманець",
     "sentToAddress": "Відправлено на {{address}}",
     "stepBridge": "Бридж",
+    "stepBridgeAndBuy": "Бридж та покупка",
     "stepDetails": "{{tool}} через LI.FI",
     "stepSwap": "Своп",
     "stepSwapAndBridge": "Своп та бридж",
+    "stepSwapAndBuy": "Своп та покупка",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Ми намагалися завершити своп, але {{tool}} не вистачило ліквідності токену {{tokenSymbol}}.",
+        "purchaseSuccessful": "Тепер ви маєте {{assetName}} в {{walletAddress}} гаманці на ланцюжку {{chainName}}.",
         "swapSuccessful": "Зараз є {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} у гаманці {{walletAddress}} на чейні {{chainName}}."
       },
       "title": {
         "gasSwapSuccessful": "Своп газу успішний",
+        "purchaseSuccessful": "Покупка успішна",
         "refundIssued": "Здійснено повернення коштів",
         "swapPartiallySuccessful": "Своп частково успішний",
         "swapSuccessful": "Своп успішний"
@@ -237,6 +251,7 @@
     },
     "numberOfSteps": "Кількість кроків свопу. Кожен крок може містити 1-3 транзакції, які потребують підпису.",
     "progressToNextUpdate": "Зображені дані автоматично оновляться через {{value}} секунд. Натисніть тут, щоб оновити вручну.",
+    "recommended": "Дешевий маршрут, який балансує складність і легкість використання.",
     "settingsModified": "Налаштування (змінено)"
   },
   "wallet": {

package/index.d.ts

@@ -6,4 +6,4 @@ export * from './config/version';
 export { useWidgetEvents, widgetEvents } from './hooks';
 export { useWallet } from './providers/WalletProvider';
 export * from './types';
-export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
+export declare const LiFiWidget: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.7",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -44,10 +44,10 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.0.0-beta.11",
-    "@lifi/wallet-management": "^2.0.0-beta.4",
+    "@lifi/wallet-management": "^2.0.0-beta.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.128",
-    "@mui/material": "^5.12.2",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
@@ -60,10 +60,10 @@
     "react-hook-form": "^7.43.9",
     "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.11.1",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.7"
+    "zustand": "^4.3.8"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",