@lifi/widget 2.0.0-beta.9 → 2.0.0

package/cjs/components/Routes/RoutesExpanded.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoutesExpandedElement = exports.RoutesExpanded = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
+const RouteCard_1 = require("../RouteCard");
+const RoutesExpanded_style_1 = require("./RoutesExpanded.style");
+const timeout = { enter: 225, exit: 225, appear: 0 };
+const RoutesExpanded = () => {
+    const element = (0, react_router_dom_1.useMatch)('/');
+    return ((0, jsx_runtime_1.jsx)(RoutesExpanded_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.RoutesExpandedElement, {}) }) }) }) }));
+};
+exports.RoutesExpanded = RoutesExpanded;
+const RoutesExpandedElement = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const { subvariant, containerStyle } = (0, providers_1.useWidgetConfig)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useRoutes)();
+    const currentRoute = routes?.[0];
+    const handleRouteClick = (route) => {
+        if (isValid && !isValidating) {
+            setExecutableRoute(route);
+            navigate(utils_1.navigationRoutes.transactionExecution, {
+                state: { routeId: route.id },
+            });
+        }
+    };
+    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
+    const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(RoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(RoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(RoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: subvariant === 'nft'
+                                        ? t('main.fromAmount')
+                                        : t('header.youGet') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+};
+exports.RoutesExpandedElement = RoutesExpandedElement;

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

@@ -0,0 +1,2 @@
+export * from './Routes';
+export * from './RoutesExpanded';

package/cjs/components/Routes/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Routes"), exports);
+__exportStar(require("./RoutesExpanded"), exports);

package/cjs/components/SelectChainAndToken.js

@@ -10,20 +10,20 @@ const providers_1 = require("../providers");
 const types_1 = require("../types");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, hiddenUI, variant } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI, subvariant } = (0, providers_1.useWidgetConfig)();
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKey.FromChain,
-            providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.FromToken,
-            providers_1.SwapFormKey.ToToken,
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.ToChain,
+            providers_1.FormKey.FromToken,
+            providers_1.FormKey.ToToken,
         ],
     });
-    const hiddenReverse = variant === 'refuel' ||
+    const hiddenReverse = subvariant === 'refuel' ||
         disabledUI?.includes(types_1.DisabledUI.FromToken) ||
         disabledUI?.includes(types_1.DisabledUI.ToToken) ||
         hiddenUI?.includes(types_1.HiddenUI.ToToken);
-    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(types_1.HiddenUI.ToToken);
+    const hiddenToToken = subvariant === 'nft' || hiddenUI?.includes(types_1.HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&

package/cjs/components/SelectTokenButton/SelectTokenButton.d.ts

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

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -15,31 +15,31 @@ const SelectTokenButton_style_1 = require("./SelectTokenButton.style");
 const SelectTokenButton = ({ formType, compact }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, subvariant } = (0, providers_1.useWidgetConfig)();
     const swapOnly = (0, hooks_1.useSwapOnly)();
-    const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
+    const tokenKey = providers_1.FormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey(formType), tokenKey],
+        name: [providers_1.FormKeyHelper.getChainKey(formType), tokenKey],
     });
     const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);
     const { token, isLoading: isTokenLoading } = (0, hooks_1.useToken)(chainId, tokenAddress);
     const handleClick = () => {
         navigate(formType === 'from'
             ? utils_1.navigationRoutes.fromToken
-            : variant === 'refuel'
+            : subvariant === 'refuel'
                 ? utils_1.navigationRoutes.toTokenNative
                 : utils_1.navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-    const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t('swap.selectChain')
+    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
+        ? t('main.selectChain')
         : formType === 'to' && swapOnly
-            ? t('swap.selectToken')
-            : t('swap.selectChainAndToken');
-    const cardTitle = formType === 'from' && variant === 'nft'
+            ? t('main.selectToken')
+            : t('main.selectChainAndToken');
+    const cardTitle = formType === 'from' && subvariant === 'nft'
         ? t(`header.payWith`)
-        : t(`swap.${formType}`);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
+        : t(`main.${formType}`);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };
 exports.SelectTokenButton = SelectTokenButton;

package/cjs/components/SendToWallet/SendToWallet.js

@@ -24,10 +24,9 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const requiredToAddress = requiredUI?.includes(types_1.RequiredUI.ToAddress);
     const requiredToAddressRef = (0, react_1.useRef)(requiredToAddress);
     const { field: { onChange, onBlur, name, value }, } = (0, react_hook_form_1.useController)({
-        name: providers_1.SwapFormKey.ToAddress,
+        name: providers_1.FormKey.ToAddress,
         rules: {
-            required: requiredToAddress &&
-                t('swap.error.title.walletAddressRequired'),
+            required: requiredToAddress && t('error.title.walletAddressRequired'),
             validate: async (value) => {
                 try {
                     if (!value) {
@@ -35,13 +34,13 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
                     }
                     const address = await account.signer?.provider?.resolveName(value);
                     return ((0, address_1.isAddress)(address || value) ||
-                        t('swap.error.title.walletAddressInvalid'));
+                        t('error.title.walletAddressInvalid'));
                 }
                 catch {
-                    return t('swap.error.title.walletEnsAddressInvalid');
+                    return t('error.title.walletEnsAddressInvalid');
                 }
             },
-            onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
+            onBlur: () => trigger(providers_1.FormKey.ToAddress),
         },
     });
     // We want to show toAddress field if it is set via widget configuration and not hidden
@@ -55,20 +54,20 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
         }
     }, [showInstantly, setSendToWallet]);
     (0, react_1.useEffect)(() => {
-        const value = getValues(providers_1.SwapFormKey.ToAddress);
+        const value = getValues(providers_1.FormKey.ToAddress);
         if (value) {
-            trigger(providers_1.SwapFormKey.ToAddress);
+            trigger(providers_1.FormKey.ToAddress);
             // Trigger validation if we change requiredToAddress in the runtime
         }
         else if (requiredToAddressRef.current !== requiredToAddress) {
             requiredToAddressRef.current = requiredToAddress;
-            trigger(providers_1.SwapFormKey.ToAddress).then(() => clearErrors(providers_1.SwapFormKey.ToAddress));
+            trigger(providers_1.FormKey.ToAddress).then(() => clearErrors(providers_1.FormKey.ToAddress));
         }
     }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
     if (hiddenToAddress) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { required: requiredToAddress, children: t('main.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.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) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] })] }) }));
 });
 const SendToWalletFormHelperText = () => {
     const { errors } = (0, react_hook_form_1.useFormState)();

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

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

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -24,11 +24,11 @@ const SendToWalletButton = () => {
     }
     const handleClick = () => {
         if (showSendToWallet && !disabledUI?.includes(types_1.DisabledUI.ToAddress)) {
-            setValue(providers_1.SwapFormKey.ToAddress, '', { shouldTouch: true });
+            setValue(providers_1.FormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             }, children: (0, jsx_runtime_1.jsx)(Wallet_1.default, {}) }) }));

package/cjs/components/SmallAvatar.d.ts

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

package/cjs/components/Step/DestinationWalletAddress.js

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

package/cjs/components/Step/GasStepProcess.js

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

package/cjs/components/Step/Step.js

@@ -17,7 +17,7 @@ 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 { variant } = (0, providers_1.useWidgetConfig)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -25,22 +25,22 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
                 const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
                 const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
                 if (hasCrossStep && hasSwapStep) {
-                    return variant === 'nft'
-                        ? t('swap.stepBridgeAndBuy')
-                        : t('swap.stepSwapAndBridge');
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepSwapAndBridge');
                 }
                 if (hasCrossStep) {
-                    return variant === 'nft'
-                        ? t('swap.stepBridgeAndBuy')
-                        : t('swap.stepBridge');
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepBridge');
                 }
-                return variant === 'nft'
-                    ? t('swap.stepSwapAndBuy')
-                    : t('swap.stepSwap');
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
             default:
-                return variant === 'nft'
-                    ? t('swap.stepSwapAndBuy')
-                    : t('swap.stepSwap');
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
         }
     };
     const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);

package/cjs/components/Step/StepTimer.js

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

package/cjs/components/StepActions/StepActions.d.ts

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

package/cjs/components/StepActions/StepActions.js

@@ -18,19 +18,19 @@ const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
 const StepActions = ({ step, dense, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
     const [cardExpanded, setCardExpanded] = (0, react_1.useState)(false);
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
     const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    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: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.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, { children: (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
                             tool: step.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, variant: variant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }))] }));
+                        }) }), 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 }))] }));
 };
 exports.StepActions = StepActions;
-const IncludedSteps = ({ step, variant }) => {
+const IncludedSteps = ({ step, subvariant }) => {
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
         const tool = step.includedSteps?.[Number(icon) - 1];
@@ -38,25 +38,29 @@ const IncludedSteps = ({ step, variant }) => {
                 boxSizing: 'content-box',
             }, children: tool.toolDetails.name[0] })) : null;
     };
-    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+    const StepDetailsLabel = step.tool === 'custom' && subvariant === 'nft'
         ? exports.CustomStepDetailsLabel
         : step.type === 'lifi' &&
             step.includedSteps.some((step) => step.type === 'cross')
             ? exports.CrossStepDetailsLabel
             : exports.SwapStepDetailsLabel;
-    return step.includedSteps.length > 1 ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? ((0, jsx_runtime_1.jsx)(exports.ProtocolStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) }), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] }));
+    return step.includedSteps.length > 1 ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, subvariant: subvariant })) : step.type === 'cross' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? ((0, jsx_runtime_1.jsx)(exports.ProtocolStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) }), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, subvariant: subvariant }) })] }, step.id))) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, subvariant: subvariant === 'nft' ? subvariant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, subvariant: subvariant })] }));
 };
 exports.IncludedSteps = IncludedSteps;
-const StepDetailsContent = ({ step, variant }) => {
+const StepDetailsContent = ({ step, subvariant }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId &&
         step.action.fromToken.address === step.action.toToken.address;
     let fromAmount;
     if (sameTokenProtocolStep) {
-        fromAmount = (0, big_js_1.default)(step.estimate.fromAmount)
+        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))
-            .toString();
+            .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();
     }
     else {
         fromAmount = (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals);
@@ -69,12 +73,12 @@ const StepDetailsContent = ({ step, variant }) => {
                     }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
 exports.StepDetailsContent = StepDetailsContent;
-const CustomStepDetailsLabel = ({ step, variant, }) => {
+const CustomStepDetailsLabel = ({ step, subvariant, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    if (!variant) {
+    if (!subvariant) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`swap.${variant}StepDetails`, {
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`main.${subvariant}StepDetails`, {
             tool: step.toolDetails.name,
         }) }));
 };
@@ -82,7 +86,7 @@ exports.CustomStepDetailsLabel = CustomStepDetailsLabel;
 const CrossStepDetailsLabel = ({ step }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.crossStepDetails', {
+    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,
             tool: step.toolDetails.name,
@@ -92,7 +96,7 @@ exports.CrossStepDetailsLabel = CrossStepDetailsLabel;
 const SwapStepDetailsLabel = ({ step }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('swap.swapStepDetails', {
+    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,
         }) }));
@@ -101,7 +105,7 @@ exports.SwapStepDetailsLabel = SwapStepDetailsLabel;
 const ProtocolStepDetailsLabel = ({ step }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: step.toolDetails.key === 'lifuelProtocol'
-            ? t('swap.refuelStepDetails', {
+            ? t('main.refuelStepDetails', {
                 tool: step.toolDetails.name,
             })
             : step.toolDetails.name }));

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

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

package/cjs/components/StepActions/types.d.ts

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

package/cjs/components/Token/Token.js

@@ -33,7 +33,7 @@ const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...o
                             value: formattedTokenAmount,
                         }) }))] }), (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(`swap.tokenOnChain`, {
+                        }) })), !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,
                             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: {

package/cjs/components/TokenList/TokenList.js

@@ -14,9 +14,9 @@ const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = (0, react_1.useRef)(null);
     const { account } = (0, providers_1.useWallet)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+        name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.FormKey.TokenSearchFilter], 320);
     const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
     let filteredTokens = (tokensWithBalance ??

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

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

package/cjs/components/TokenList/TokenList.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = exports.ListItem = exports.ListItemButton = void 0;
+exports.IconButton = exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
@@ -23,28 +23,31 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${ListItemText_1.listItemTextClasses.primary}`]: {
+        height: 22,
+    },
     [`& .${ListItemText_1.listItemTextClasses.primary}, & .${ListItemText_1.listItemTextClasses.secondary}`]: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
     },
 }));
-exports.LinkButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
     lineHeight: 1,
     fontSize: '0.75rem',
     fontWeight: 400,
-    padding: theme.spacing(0.375, 0.75),
+    padding: theme.spacing(0.375, 0.375),
+    marginLeft: theme.spacing(0.25),
     color: 'inherit',
     backgroundColor: 'unset',
+    minWidth: 'unset',
+    borderRadius: '50%',
     '&:hover': {
         backgroundColor: theme.palette.mode === 'light'
             ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
             : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
     },
-    [`.${material_1.buttonClasses.endIcon}`]: {
-        marginLeft: theme.spacing(0.25),
-    },
-    [`.${material_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
-        fontSize: '0.75rem',
+    svg: {
+        fontSize: '0.875rem',
     },
 }));