@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/components/SendToWallet/SendToWallet.js

@@ -1,25 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isAddress } from '@ethersproject/address';
 import { Collapse, FormHelperText } from '@mui/material';
+import { getEnsAddress } from '@wagmi/core';
 import { forwardRef, useEffect, useRef } from 'react';
 import { useController, useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FormKey, useWallet, useWidgetConfig } from '../../providers';
+import { isAddress } from 'viem';
+import { normalize } from 'viem/ens';
+import { useConfig } from 'wagmi';
+import { useAccount, useRequiredToAddress } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
+import { DisabledUI, HiddenUI } from '../../types';
+import { isSVMAddress } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { trigger, getValues, setValue, clearErrors } = useFormContext();
-    const { account } = useWallet();
-    const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
-    const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
+    const { account } = useAccount();
+    const config = useConfig();
+    const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+    const { showSendToWallet, showSendToWalletDirty } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
     const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress);
+    const requiredToAddress = useRequiredToAddress();
     const requiredToAddressRef = useRef(requiredToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
+    const showInstantly = Boolean(!showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
     const { field: { onChange, onBlur, name, value }, } = useController({
         name: FormKey.ToAddress,
         rules: {
@@ -29,30 +40,22 @@ export const SendToWallet = forwardRef((props, ref) => {
             },
             validate: async (value) => {
                 try {
-                    if (!value) {
+                    if (!value || isAddress(value) || isSVMAddress(value)) {
                         return true;
                     }
-                    const address = await account.signer?.provider?.resolveName(value);
-                    return (isAddress(address || value) ||
-                        t('error.title.walletAddressInvalid'));
+                    const address = await getEnsAddress(config, {
+                        chainId: getValues(FormKey.ToChain),
+                        name: normalize(value),
+                    });
+                    return Boolean(address);
                 }
-                catch {
+                catch (error) {
                     return t('error.title.walletEnsAddressInvalid');
                 }
             },
             onBlur: () => trigger(FormKey.ToAddress),
         },
     });
-    // We want to show toAddress field if it is set via widget configuration and not hidden
-    const showInstantly = Boolean(!showSendToWalletDirty &&
-        showDestinationWallet &&
-        toAddress &&
-        !hiddenToAddress) || requiredToAddress;
-    useEffect(() => {
-        if (showInstantly) {
-            setSendToWallet(true);
-        }
-    }, [showInstantly, setSendToWallet]);
     useEffect(() => {
         const value = getValues(FormKey.ToAddress);
         if (value) {
@@ -64,7 +67,7 @@ export const SendToWallet = forwardRef((props, ref) => {
             trigger(FormKey.ToAddress).then(() => clearErrors(FormKey.ToAddress));
         }
     }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
-    if (hiddenToAddress) {
+    if (hiddenToAddress && !requiredToAddress) {
         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('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, {})] })] }) }));

package/components/SendToWallet/SendToWalletButton.js

@@ -3,20 +3,21 @@ 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 { useWidgetEvents } from '../../hooks';
+import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
 import { FormKey, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI, RequiredUI, WidgetEvent } from '../../types';
+import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
 export const SendToWalletButton = () => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     const emitter = useWidgetEvents();
-    const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
+    const { disabledUI, hiddenUI } = useWidgetConfig();
     const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const requiredToAddress = useRequiredToAddress();
     if (!showDestinationWallet ||
         hiddenUI?.includes(HiddenUI.ToAddress) ||
-        requiredUI?.includes(RequiredUI.ToAddress)) {
+        requiredToAddress) {
         return null;
     }
     const handleClick = () => {

package/{cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.style.d.ts → components/SettingsListItemButton.d.ts}

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const SettingsListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "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" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/SettingsListItemButton.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from './ListItemButton';
+export const SettingsListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

package/components/Step/DestinationWalletAddress.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { LifiStep } from '@lifi/sdk';
+import type { LiFiStepExtended } from '@lifi/sdk';
 export declare const DestinationWalletAddress: React.FC<{
-    step: LifiStep;
+    step: LiFiStepExtended;
     toAddress: string;
     toAddressLink: string;
 }>;

package/components/Step/GasStepProcess.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { LifiStep } from '@lifi/sdk';
+import type { LiFiStepExtended } from '@lifi/sdk';
 export declare const GasStepProcess: React.FC<{
-    step: LifiStep;
+    step: LiFiStepExtended;
 }>;

package/components/Step/Step.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { LifiStep, TokenAmount } from '@lifi/sdk';
+import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk';
 export declare const Step: React.FC<{
-    step: LifiStep;
+    step: LiFiStepExtended;
     fromToken?: TokenAmount;
     toToken?: TokenAmount;
     toAddress?: string;

package/components/Step/Step.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
-import { useChains } from '../../hooks';
+import { useAvailableChains } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { shortenAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
@@ -13,7 +13,7 @@ import { StepProcess } from './StepProcess';
 import { StepTimer } from './StepTimer';
 export const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = useTranslation();
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     const { subvariant } = useWidgetConfig();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {

package/components/Step/StepList.d.ts

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

package/components/Step/StepList.js

@@ -5,16 +5,16 @@ import { Step } from './Step';
 export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
     const lastIndex = steps.length - 1;
     const fromToken = index === 0
-        ? { ...step.action.fromToken, amount: step.action.fromAmount }
+        ? { ...step.action.fromToken, amount: BigInt(step.action.fromAmount) }
         : undefined;
     const toToken = index === lastIndex
         ? {
             ...(step.execution?.toToken ?? step.action?.toToken),
             amount: step.execution?.toAmount
-                ? step.execution.toAmount
+                ? BigInt(step.execution.toAmount)
                 : subvariant === 'nft'
-                    ? route.toAmount
-                    : step.estimate.toAmount,
+                    ? BigInt(route.toAmount)
+                    : BigInt(step.estimate.toAmount),
         }
         : undefined;
     const toAddress = index === lastIndex && route.fromAddress !== route.toAddress

package/components/Step/StepProcess.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { LifiStep, Process } from '@lifi/sdk';
+import type { LiFiStep, Process } from '@lifi/sdk';
 export declare const StepProcess: React.FC<{
-    step: LifiStep;
+    step: LiFiStep;
     process: Process;
 }>;

package/components/Step/StepTimer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { LifiStep } from '@lifi/sdk';
+import type { LiFiStepExtended } from '@lifi/sdk';
 export declare const StepTimer: React.FC<{
-    step: LifiStep;
+    step: LiFiStepExtended;
     hideInProgress?: boolean;
 }>;

package/components/StepActions/StepActions.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import type { LifiStep, Step } from '@lifi/sdk';
+import type { LiFiStep, StepExtended } from '@lifi/sdk';
 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;
+    step: LiFiStep;
     subvariant?: WidgetSubvariant;
 }>;
 export declare const StepDetailsContent: React.FC<{
-    step: Step;
+    step: StepExtended;
     subvariant?: WidgetSubvariant;
 }>;
 export declare const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps>;

package/components/StepActions/StepActions.js

@@ -3,10 +3,10 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Badge, Box, Collapse, Step as MuiStep, Stepper, Typography, } from '@mui/material';
-import Big from 'big.js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useChains } from '../../hooks';
+import { formatUnits } from 'viem';
+import { useAvailableChains } from '../../hooks';
 import { LiFiToolLogo } from '../../icons';
 import { useWidgetConfig } from '../../providers';
 import { formatTokenAmount } from '../../utils';
@@ -26,7 +26,7 @@ export const StepActions = ({ step, dense, ...other }) => {
     const toolDetails = subvariant === 'nft'
         ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
         : step.toolDetails;
-    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: toolDetails.logoURI, alt: toolDetails.name, children: toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.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, { src: LiFiToolLogo }), children: _jsx(StepAvatar, { variant: "circular", src: toolDetails.logoURI ?? LiFiToolLogo, alt: toolDetails.name, children: toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
                             tool: 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, subvariant: subvariant }) })) : (_jsx(IncludedSteps, { step: step, subvariant: subvariant }))] }));
 };
@@ -52,23 +52,20 @@ export const StepDetailsContent = ({ step, subvariant }) => {
         step.action.fromToken.address === step.action.toToken.address;
     let fromAmount;
     if (sameTokenProtocolStep) {
-        const estimatedFromAmount = Big(step.estimate.fromAmount)
-            .div(10 ** step.action.fromToken.decimals)
-            .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();
+        const estimatedFromAmount = BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
+        fromAmount =
+            estimatedFromAmount > 0n
+                ? formatUnits(estimatedFromAmount, step.action.fromToken.decimals)
+                : formatUnits(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
     }
     else {
-        fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);
+        fromAmount = formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
     }
     const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
     return (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                        value: formatTokenAmount(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
+                        value: formatTokenAmount(BigInt(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, subvariant, }) => {
@@ -87,7 +84,7 @@ export const CustomStepDetailsLabel = ({ step, subvariant, }) => {
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     const { t } = useTranslation();
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     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,
@@ -96,7 +93,7 @@ export const CrossStepDetailsLabel = ({ step }) => {
 };
 export const SwapStepDetailsLabel = ({ step }) => {
     const { t } = useTranslation();
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.swapStepDetails', {
             chain: getChainById(step.action.fromChainId)?.name,
             tool: step.toolDetails.name,

package/components/StepActions/types.d.ts

@@ -1,8 +1,8 @@
-import type { LifiStep, Step } from '@lifi/sdk';
+import type { LiFiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { WidgetSubvariant } from '../../types';
 export interface StepActionsProps extends BoxProps {
-    step: LifiStep;
+    step: LiFiStep;
     dense?: boolean;
 }
 export interface StepDetailsLabelProps {

package/components/{Header/NavigationTabs.style.d.ts → Tabs/Tabs.style.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { StyledComponent } from '@emotion/styled';
 import type { TabsProps } from '@mui/material';
-export declare const NavbarTabs: StyledComponent<TabsProps>;
-export declare const NavbarTab: StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const Tabs: StyledComponent<TabsProps>;
+export declare const Tab: StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "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" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "label" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     component?: import("react").ElementType<any> | undefined;

package/components/Tabs/Tabs.style.js

@@ -0,0 +1,36 @@
+import { Tab as MuiTab, Tabs as MuiTabs, tabClasses, tabsClasses, } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { getCardFieldsetBackgroundColor } from '../../utils';
+export const Tabs = styled(MuiTabs)(({ theme }) => ({
+    backgroundColor: getCardFieldsetBackgroundColor(theme),
+    borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
+    padding: theme.spacing(0.5),
+    flex: 1,
+    [`.${tabsClasses.indicator}`]: {
+        height: '100%',
+        width: '100%',
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.background.default
+            : theme.palette.common.white,
+        borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) -
+            4,
+        boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+    },
+}));
+export const Tab = styled(MuiTab, {
+    shouldForwardProp: (prop) => prop !== 'isDarkMode',
+})(({ theme }) => ({
+    zIndex: 1,
+    flex: 1,
+    textTransform: 'none',
+    fontSize: '1rem',
+    fontWeight: 700,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    [`&.${tabClasses.selected}`]: {
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+    },
+}));

package/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs.style';

package/components/Tabs/index.js

@@ -0,0 +1 @@
+export * from './Tabs.style';

package/components/Token/Token.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import type { LifiStep, TokenAmount } from '@lifi/sdk';
+import type { LiFiStep, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 interface TokenProps {
-    token?: TokenAmount;
+    token: TokenAmount;
     connected?: boolean;
-    step?: LifiStep;
+    step?: LiFiStep;
     disableDescription?: boolean;
     isLoading?: boolean;
 }

package/components/Token/Token.js

@@ -8,20 +8,20 @@ import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
 export const Token = ({ token, ...other }) => {
-    if (!token?.priceUSD || !token.logoURI) {
+    if (!token.priceUSD || !token.logoURI) {
         return _jsx(TokenFallback, { token: token, ...other });
     }
     return _jsx(TokenBase, { token: token, ...other });
 };
 export const TokenFallback = ({ token, isLoading, ...other }) => {
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
+    const { token: chainToken, isLoading: isLoadingToken } = useToken(token.chainId, token.address);
     return (_jsx(TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };
 export const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
     const { t } = useTranslation();
     const { chain } = useChain(token?.chainId);
-    const formattedTokenAmount = formatTokenAmount(token?.amount, token?.decimals);
-    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token?.priceUSD);
+    const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);
+    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token.priceUSD);
     return (_jsxs(Box, { flex: 1, ...other, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? (_jsx(Skeleton, { width: 112, height: 32, variant: "text" })) : (_jsx(TextFitter, { height: 30, textStyle: {
                             fontWeight: 700,
                         }, children: t('format.number', {
@@ -29,7 +29,7 @@ export const TokenBase = ({ token, connected, step, disableDescription, isLoadin
                         }) }))] }), _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(`main.tokenOnChain`, {
-                            tokenSymbol: token?.symbol,
+                            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: {
                                         border: 0,

package/components/TokenList/TokenList.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useRef } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
-import { FormKey, FormKeyHelper, useWallet } from '../../providers';
+import { useAccount, useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
+import { FormKey, FormKeyHelper } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 import { useTokenSelect } from './useTokenSelect';
 export const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = useRef(null);
-    const { account } = useWallet();
+    const { account } = useAccount();
     const [selectedChainId] = useWatch({
         name: [FormKeyHelper.getChainKey(formType)],
     });
@@ -39,5 +39,5 @@ export const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = useTokenSelect(formType, onClick);
-    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
+    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isConnected, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };

package/components/TokenList/TokenListItem.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
 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, }) => {
+export const TokenListItem = ({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return (_jsxs(ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
         }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
-});
+};
 export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoading, }) => {
     const { t } = useTranslation();
-    const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
+    const tokenPrice = token.amount
+        ? formatTokenPrice(formatUnits(token.amount, token.decimals), token.priceUSD)
+        : undefined;
     const container = useRef(null);
     const timeoutId = useRef();
     const [showAddress, setShowAddress] = useState(false);
@@ -33,8 +36,8 @@ export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBala
                                 position: 'absolute',
                             }, 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: _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),
+                            }, 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: [token.amount ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+                            value: formatTokenAmount(token.amount, token.decimals),
                         }) })) : 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.js

@@ -3,14 +3,14 @@ import SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useChains } from '../../hooks';
+import { useAvailableChains } from '../../hooks';
 import { FormKeyHelper } from '../../providers';
 export const TokenNotFound = ({ formType }) => {
     const { t } = useTranslation();
     const [selectedChainId] = useWatch({
         name: [FormKeyHelper.getChainKey(formType)],
     });
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     return (_jsxs(Box, { sx: {
             display: 'flex',
             justifyContent: 'center',

package/components/TokenList/VirtualizedTokenList.js

@@ -11,9 +11,9 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
     const tokensLastIndex = tokens.length - 1;
     const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
         count: tokens.length,
-        getScrollElement: () => scrollElementRef.current,
         overscan: 10,
         paddingEnd: 12,
+        getScrollElement: () => scrollElementRef.current,
         estimateSize: (index) => {
             // heigth of TokenListItem
             let size = 64;
@@ -35,6 +35,7 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
         getItemKey: (index) => `${tokens[index].address}-${index}`,
     });
     useEffect(() => {
+        // Scroll to the top of the list when switching the chains
         if (getVirtualItems().length) {
             scrollToIndex(0, { align: 'start' });
         }

package/config/queryClient.js

@@ -4,7 +4,6 @@ export const queryClient = new QueryClient({
         queries: {
             enabled: true,
             staleTime: 3600000,
-            cacheTime: Infinity,
             refetchInterval: false,
             refetchIntervalInBackground: false,
             refetchOnWindowFocus: true,
@@ -12,9 +11,6 @@ export const queryClient = new QueryClient({
             refetchOnMount: true,
             retryOnMount: true,
             // suspense: true,
-            onError: (error) => {
-                //
-            },
         },
         mutations: {
             onError: (error) => {

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.9.3";
+export declare const version = "3.0.0-alpha.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.9.3';
+export const version = '3.0.0-alpha.0';

package/hooks/index.d.ts

@@ -1,3 +1,5 @@
+export * from './useAccount';
+export * from './useAvailableChains';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
@@ -9,13 +11,15 @@ export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';
 export * from './useGasSufficiency';
-export * from './useGetTokenBalancesWithRetry';
 export * from './useInitializer';
+export * from './useLanguages';
 export * from './useNavigateBack';
 export * from './useProcessMessage';
+export * from './useRequiredToAddress';
 export * from './useRouteExecution';
 export * from './useRoutes';
 export * from './useScrollableContainer';
+export * from './useSettingMonitor';
 export * from './useSwapOnly';
 export * from './useToken';
 export * from './useTokenAddressBalance';
@@ -24,4 +28,6 @@ export * from './useTokenBalances';
 export * from './useTokenSearch';
 export * from './useTokens';
 export * from './useTools';
+export * from './useTransactionDetails';
+export * from './useTransactionHistory';
 export * from './useWidgetEvents';