@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -14,12 +14,13 @@ const SendToWalletButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const emitter = (0, hooks_1.useWidgetEvents)();
-    const { disabledUI, hiddenUI, requiredUI } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const { showSendToWallet, toggleSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const requiredToAddress = (0, hooks_1.useRequiredToAddress)();
     if (!showDestinationWallet ||
         hiddenUI?.includes(types_1.HiddenUI.ToAddress) ||
-        requiredUI?.includes(types_1.RequiredUI.ToAddress)) {
+        requiredToAddress) {
         return null;
     }
     const handleClick = () => {

package/{pages/SelectEnabledToolsPage/SelectEnabledToolsPage.style.d.ts → cjs/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/cjs/components/SettingsListItemButton.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsListItemButton = void 0;
+const styles_1 = require("@mui/material/styles");
+const ListItemButton_1 = require("./ListItemButton");
+exports.SettingsListItemButton = (0, styles_1.styled)(ListItemButton_1.ListItemButton)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

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

@@ -16,7 +16,7 @@ const StepProcess_1 = require("./StepProcess");
 const StepTimer_1 = require("./StepTimer");
 const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     const { subvariant } = (0, providers_1.useWidgetConfig)();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {

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

@@ -8,16 +8,16 @@ const Step_1 = require("./Step");
 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/cjs/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/cjs/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/cjs/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/cjs/components/StepActions/StepActions.js

@@ -6,9 +6,9 @@ const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
 const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
 const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
 const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
 const providers_1 = require("../../providers");
@@ -29,7 +29,7 @@ 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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { children: (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: toolDetails.logoURI, alt: toolDetails.name, children: toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: icons_1.LiFiToolLogo }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: toolDetails.logoURI ?? icons_1.LiFiToolLogo, alt: toolDetails.name, children: toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
                             tool: toolDetails.name,
                         }) }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, subvariant: subvariant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, subvariant: subvariant }))] }));
 };
@@ -57,23 +57,20 @@ const StepDetailsContent = ({ step, subvariant }) => {
         step.action.fromToken.address === step.action.toToken.address;
     let fromAmount;
     if (sameTokenProtocolStep) {
-        const estimatedFromAmount = (0, big_js_1.default)(step.estimate.fromAmount)
-            .div(10 ** step.action.fromToken.decimals)
-            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
-        fromAmount = estimatedFromAmount.gt(0)
-            ? estimatedFromAmount.toString()
-            : (0, big_js_1.default)(step.estimate.fromAmount)
-                .div(10 ** step.action.fromToken.decimals)
-                .toString();
+        const estimatedFromAmount = BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
+        fromAmount =
+            estimatedFromAmount > 0n
+                ? (0, viem_1.formatUnits)(estimatedFromAmount, step.action.fromToken.decimals)
+                : (0, viem_1.formatUnits)(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
     }
     else {
-        fromAmount = (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals);
+        fromAmount = (0, utils_1.formatTokenAmount)(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
     }
     const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                        value: (0, utils_1.formatTokenAmount)(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
+                        value: (0, utils_1.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] }));
 };
 exports.StepDetailsContent = StepDetailsContent;
@@ -94,7 +91,7 @@ const CustomStepDetailsLabel = ({ step, subvariant, }) => {
 exports.CustomStepDetailsLabel = CustomStepDetailsLabel;
 const CrossStepDetailsLabel = ({ step }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.crossStepDetails', {
             from: getChainById(step.action.fromChainId)?.name,
             to: getChainById(step.action.toChainId)?.name,
@@ -104,7 +101,7 @@ const CrossStepDetailsLabel = ({ step }) => {
 exports.CrossStepDetailsLabel = CrossStepDetailsLabel;
 const SwapStepDetailsLabel = ({ step }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.swapStepDetails', {
             chain: getChainById(step.action.fromChainId)?.name,
             tool: step.toolDetails.name,

package/cjs/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/cjs/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/cjs/components/{Header/NavigationTabs.style.js → Tabs/Tabs.style.js}

@@ -1,61 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarTab = exports.NavbarTabs = void 0;
+exports.Tab = exports.Tabs = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-exports.NavbarTabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.background.paper
-        : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
+const utils_1 = require("../../utils");
+exports.Tabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
+    backgroundColor: (0, utils_1.getCardFieldsetBackgroundColor)(theme),
     borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
     padding: theme.spacing(0.5),
     flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    height: 56,
-    [`.${material_1.tabsClasses.flexContainer}`]: {
-        alignItems: 'center',
-    },
-    [`.${material_1.tabsClasses.scroller}`]: {
-        overflow: 'initial !important',
-    },
     [`.${material_1.tabsClasses.indicator}`]: {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        height: 48,
+        height: '100%',
+        width: '100%',
         backgroundColor: theme.palette.mode === 'dark'
             ? theme.palette.background.default
             : theme.palette.common.white,
-        borderRadius: theme.shape.borderRadiusSecondary,
+        borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) -
+            4,
         boxShadow: `0px 2px 4px ${(0, styles_1.alpha)(theme.palette.common.black, 0.04)}`,
     },
 }));
-exports.NavbarTab = (0, styles_1.styled)(material_1.Tab, {
+exports.Tab = (0, styles_1.styled)(material_1.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',
     [`&.${material_1.tabClasses.selected}`]: {
         color: theme.palette.mode === 'dark'
             ? theme.palette.common.white
             : theme.palette.common.black,
-        backgroundColor: 'transparent',
-    },
-    [`.${material_1.tabClasses.iconWrapper}`]: {
-        margin: theme.spacing(0, 1, 0, 0),
     },
 }));

package/cjs/components/Tabs/index.d.ts

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

package/cjs/{providers/SDKProvider → components/Tabs}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./SDKProvider"), exports);
+__exportStar(require("./Tabs.style"), exports);

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

@@ -11,22 +11,22 @@ const TextFitter_1 = require("../TextFitter");
 const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
 const Token = ({ token, ...other }) => {
-    if (!token?.priceUSD || !token.logoURI) {
+    if (!token.priceUSD || !token.logoURI) {
         return (0, jsx_runtime_1.jsx)(exports.TokenFallback, { token: token, ...other });
     }
     return (0, jsx_runtime_1.jsx)(exports.TokenBase, { token: token, ...other });
 };
 exports.Token = Token;
 const TokenFallback = ({ token, isLoading, ...other }) => {
-    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token?.chainId, token?.address);
+    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token.chainId, token.address);
     return ((0, jsx_runtime_1.jsx)(exports.TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };
 exports.TokenFallback = TokenFallback;
 const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { chain } = (0, hooks_1.useChain)(token?.chainId);
-    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token?.amount, token?.decimals);
-    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token?.priceUSD);
+    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token.amount, token.decimals);
+    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token.priceUSD);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 32, variant: "text" })) : ((0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, { height: 30, textStyle: {
                             fontWeight: 700,
                         }, children: t('format.number', {
@@ -34,7 +34,7 @@ const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...o
                         }) }))] }), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`format.currency`, {
                             value: formattedTokenPrice,
                         }) })), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`main.tokenOnChain`, {
-                            tokenSymbol: token?.symbol,
+                            tokenSymbol: token.symbol,
                             chainName: chain?.name,
                         }) }))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { pr: 0.75, children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                         border: 0,

package/cjs/components/TokenList/TokenList.js

@@ -12,7 +12,7 @@ const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
 const useTokenSelect_1 = require("./useTokenSelect");
 const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = (0, react_1.useRef)(null);
-    const { account } = (0, providers_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
@@ -42,6 +42,6 @@ const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isConnected, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };
 exports.TokenList = TokenList;

package/cjs/components/TokenList/TokenListItem.js

@@ -6,18 +6,22 @@ const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
 const utils_1 = require("../../utils");
 const TokenList_style_1 = require("./TokenList.style");
-exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
+const TokenListItem = ({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
         }, children: [startAdornment, (0, jsx_runtime_1.jsx)(exports.TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
-});
+};
+exports.TokenListItem = TokenListItem;
 const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoading, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const tokenPrice = (0, utils_1.formatTokenPrice)(token.amount, token.priceUSD);
+    const tokenPrice = token.amount
+        ? (0, utils_1.formatTokenPrice)((0, viem_1.formatUnits)(token.amount, token.decimals), token.priceUSD)
+        : undefined;
     const container = (0, react_1.useRef)(null);
     const timeoutId = (0, react_1.useRef)();
     const [showAddress, setShowAddress] = (0, react_1.useState)(false);
@@ -36,8 +40,8 @@ const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoad
                                 position: 'absolute',
                             }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pt: 0.25, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
                                 position: 'absolute',
-                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", pt: 0.125, children: (0, utils_1.shortenAddress)(token.address) }), (0, jsx_runtime_1.jsx)(TokenList_style_1.IconButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}) })] }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
-                            value: (0, utils_1.formatTokenAmount)(token.amount),
+                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", pt: 0.125, children: (0, utils_1.shortenAddress)(token.address) }), (0, jsx_runtime_1.jsx)(TokenList_style_1.IconButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}) })] }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [token.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+                            value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
                         }) })) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,
                         }) })) : null] }))) : null] }));

package/cjs/components/TokenList/TokenNotFound.js

@@ -13,7 +13,7 @@ const TokenNotFound = ({ formType }) => {
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: 'flex',
             justifyContent: 'center',

package/cjs/components/TokenList/VirtualizedTokenList.js

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

package/cjs/config/queryClient.js

@@ -7,7 +7,6 @@ exports.queryClient = new react_query_1.QueryClient({
         queries: {
             enabled: true,
             staleTime: 3600000,
-            cacheTime: Infinity,
             refetchInterval: false,
             refetchIntervalInBackground: false,
             refetchOnWindowFocus: true,
@@ -15,9 +14,6 @@ exports.queryClient = new react_query_1.QueryClient({
             refetchOnMount: true,
             retryOnMount: true,
             // suspense: true,
-            onError: (error) => {
-                //
-            },
         },
         mutations: {
             onError: (error) => {

package/cjs/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/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.9.3';
+exports.version = '3.0.0-alpha.0';

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

package/cjs/hooks/index.js

@@ -14,6 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAccount"), exports);
+__exportStar(require("./useAvailableChains"), exports);
 __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChains"), exports);
 __exportStar(require("./useContentHeight"), exports);
@@ -25,13 +27,15 @@ __exportStar(require("./useFromTokenSufficiency"), exports);
 __exportStar(require("./useGasRecommendation"), exports);
 __exportStar(require("./useGasRefuel"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
-__exportStar(require("./useGetTokenBalancesWithRetry"), exports);
 __exportStar(require("./useInitializer"), exports);
+__exportStar(require("./useLanguages"), exports);
 __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);
+__exportStar(require("./useRequiredToAddress"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useRoutes"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
+__exportStar(require("./useSettingMonitor"), exports);
 __exportStar(require("./useSwapOnly"), exports);
 __exportStar(require("./useToken"), exports);
 __exportStar(require("./useTokenAddressBalance"), exports);
@@ -40,4 +44,6 @@ __exportStar(require("./useTokenBalances"), exports);
 __exportStar(require("./useTokenSearch"), exports);
 __exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTools"), exports);
+__exportStar(require("./useTransactionDetails"), exports);
+__exportStar(require("./useTransactionHistory"), exports);
 __exportStar(require("./useWidgetEvents"), exports);

package/cjs/hooks/useAccount.d.ts

@@ -0,0 +1,31 @@
+import { ChainType } from '@lifi/sdk';
+import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import type { Chain } from 'viem';
+import type { Connector } from 'wagmi';
+export interface AccountBase {
+    address?: string;
+    addresses?: readonly string[];
+    chain?: Chain;
+    chainId?: number;
+    chainType?: ChainType;
+    isConnected: boolean;
+    isConnecting: boolean;
+    isDisconnected: boolean;
+    isReconnecting: boolean;
+    status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
+}
+export interface EVMAccount extends AccountBase {
+    chainType: ChainType.EVM;
+    connector?: Connector;
+}
+export interface SVMAccount extends AccountBase {
+    chainType: ChainType.SVM;
+    connector?: WalletAdapter;
+}
+export type Account = EVMAccount | SVMAccount;
+export interface AccountResult {
+    account: Account;
+    accounts: Account[];
+}
+export declare const useAccount: () => AccountResult;
+export declare const useAccountDisconnect: () => () => void;