@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.17

package/dist/esm/components/Header/WalletHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/IconTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    lineHeight: 0,\n    ...theme.applyStyles('dark', {\n      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n    }),\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE,CAAC;CACH,EAAE"}
+{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({\n  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n  lineHeight: 0,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n  }),\n}))\n"],"mappings":";;AAIA,MAAa,iBAAqC,OAAO,IAAI,EAAE,EAAE,aAAa;CAC5E,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE,CAAC;CACH,EAAE"}

package/dist/esm/components/Messages/AlertMessage.js

@@ -6,7 +6,7 @@ const AlertMessage = ({ title, icon, children, multiline, severity = "info", ...
 	...rest,
 	children: [/* @__PURE__ */ jsxs(AlertMessageCardTitle, {
 		severity,
-		alignItems: multiline ? "start" : "center",
+		sx: { alignItems: multiline ? "start" : "center" },
 		children: [icon, title]
 	}), children]
 });

package/dist/esm/components/Messages/AlertMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n  AlertMessageCard,\n  AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n  icon: ReactNode\n  title: ReactNode\n  multiline?: boolean\n  severity?: Severity\n}\n\nexport const AlertMessage = ({\n  title,\n  icon,\n  children,\n  multiline,\n  severity = 'info',\n  ...rest\n}: AlertMessageProps): JSX.Element => (\n  <AlertMessageCard severity={severity} {...rest}>\n    <AlertMessageCardTitle\n      severity={severity}\n      alignItems={multiline ? 'start' : 'center'}\n    >\n      {icon}\n      {title}\n    </AlertMessageCardTitle>\n    {children}\n  </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,YAAY,YAAY,UAAU;YAFpC,CAIG,MACA,MACqB;KACvB,SACgB"}
+{"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n  AlertMessageCard,\n  AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n  icon: ReactNode\n  title: ReactNode\n  multiline?: boolean\n  severity?: Severity\n}\n\nexport const AlertMessage = ({\n  title,\n  icon,\n  children,\n  multiline,\n  severity = 'info',\n  ...rest\n}: AlertMessageProps): JSX.Element => (\n  <AlertMessageCard severity={severity} {...rest}>\n    <AlertMessageCardTitle\n      severity={severity}\n      sx={{ alignItems: multiline ? 'start' : 'center' }}\n    >\n      {icon}\n      {title}\n    </AlertMessageCardTitle>\n    {children}\n  </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,UAAU;YAFpD,CAIG,MACA,MACqB;KACvB,SACgB"}

package/dist/esm/components/PageEntered.js

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../types/events.js";
+import "../types/events.js";
 import { useEffect } from "react";
 import { useLocation } from "@tanstack/react-router";
 //#region src/components/PageEntered.ts
@@ -7,7 +7,7 @@ function PageEntered() {
 	const location = useLocation();
 	const emitter = useWidgetEvents();
 	useEffect(() => {
-		emitter.emit(WidgetEvent.PageEntered, location.pathname);
+		emitter.emit("pageEntered", location.pathname);
 	}, [emitter, location.pathname]);
 	return null;
 }

package/dist/esm/components/PageEntered.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageEntered.js","names":[],"sources":["../../../src/components/PageEntered.ts"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport { useEffect } from 'react'\nimport { useWidgetEvents } from '../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../types/events.js'\n\nexport function PageEntered() {\n  const location = useLocation()\n  const emitter = useWidgetEvents()\n\n  useEffect(() => {\n    emitter.emit(WidgetEvent.PageEntered, location.pathname)\n  }, [emitter, location.pathname])\n  return null\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc;CAC5B,MAAM,WAAW,aAAa;CAC9B,MAAM,UAAU,iBAAiB;AAEjC,iBAAgB;AACd,UAAQ,KAAK,YAAY,aAAa,SAAS,SAAS;IACvD,CAAC,SAAS,SAAS,SAAS,CAAC;AAChC,QAAO"}
+{"version":3,"file":"PageEntered.js","names":[],"sources":["../../../src/components/PageEntered.ts"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport { useEffect } from 'react'\nimport { useWidgetEvents } from '../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../types/events.js'\n\nexport function PageEntered() {\n  const location = useLocation()\n  const emitter = useWidgetEvents()\n\n  useEffect(() => {\n    emitter.emit(WidgetEvent.PageEntered, location.pathname)\n  }, [emitter, location.pathname])\n  return null\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc;CAC5B,MAAM,WAAW,aAAa;CAC9B,MAAM,UAAU,iBAAiB;AAEjC,iBAAgB;AACd,UAAQ,KAAA,eAA8B,SAAS,SAAS;IACvD,CAAC,SAAS,SAAS,SAAS,CAAC;AAChC,QAAO"}

package/dist/esm/components/RouteCard/RouteCard.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { Card as Card$1 } from "../Card/Card.js";
 import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
 import { CardLabel, CardLabelTypography } from "../Card/CardLabel.js";
@@ -20,7 +20,7 @@ const RouteCard = ({ route, active, variant = "default", expanded: defaultExpand
 		...route.toToken,
 		amount: BigInt(route.toAmount)
 	};
-	const impactToken = subvariant !== "custom" && !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact) ? {
+	const impactToken = subvariant !== "custom" && !hiddenUI?.includes("routeCardPriceImpact") ? {
 		...route.fromToken,
 		amount: BigInt(route.fromAmount)
 	} : void 0;

package/dist/esm/components/RouteCard/RouteCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n  RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n  route,\n  active,\n  variant = 'default',\n  expanded: defaultExpanded,\n  ...other\n}) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n    useWidgetConfig()\n\n  const token: TokenAmount =\n    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : { ...route.toToken, amount: BigInt(route.toAmount) }\n  const impactToken: TokenAmount | undefined =\n    subvariant !== 'custom' &&\n    !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : undefined\n\n  const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n    const mainTag = route.tags?.find(\n      (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'\n    )\n    const tags: string[] = mainTag ? [mainTag] : []\n    const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n    if (!combinedFeesUSD) {\n      tags.push('gasless')\n    }\n    if (route.steps.length > 1) {\n      tags.push('multistep')\n    }\n    const customLabels = getMatchingLabels(route, routeLabels)\n    return [tags, customLabels]\n  }, [route.tags, route, routeLabels])\n\n  const cardContent = (\n    <Box\n      sx={{\n        flex: 1,\n      }}\n    >\n      {subvariant !== 'refuel' && (tags.length || customLabels.length) ? (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            mb: 2,\n            gap: 1,\n            flexWrap: 'wrap',\n          }}\n        >\n          {tags?.map((tag) => {\n            const formattedTag = tag.toLowerCase()\n            const tooltipKey = `tooltip.${formattedTag}` as any\n            const tooltipText = t(tooltipKey)\n            const hasTooltip = tooltipText !== tooltipKey\n\n            const cardLabel = (\n              <CardLabel\n                variant={\n                  tag === 'gasless'\n                    ? 'success'\n                    : active\n                      ? 'secondary'\n                      : undefined\n                }\n                key={tag}\n              >\n                <CardLabelTypography>\n                  {t(`main.tags.${formattedTag}` as any)}\n                </CardLabelTypography>\n              </CardLabel>\n            )\n\n            return hasTooltip ? (\n              <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n                {cardLabel}\n              </Tooltip>\n            ) : (\n              cardLabel\n            )\n          })}\n          {customLabels.map((label, index) => (\n            <CardLabel key={index} sx={label.sx}>\n              <CardLabelTypography>{label.text}</CardLabelTypography>\n            </CardLabel>\n          ))}\n        </Box>\n      ) : null}\n      <RouteToken\n        route={route}\n        token={token}\n        impactToken={impactToken}\n        defaultExpanded={defaultExpanded}\n        showEssentials\n      />\n    </Box>\n  )\n\n  return subvariant === 'refuel' || variant === 'cardless' ? (\n    cardContent\n  ) : (\n    <Card\n      type={active ? 'selected' : 'default'}\n      selectionColor=\"secondary\"\n      indented\n      {...other}\n    >\n      {cardContent}\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,SAAS,SAAS,qBAAqB,GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,YAAY,CAC/B;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}
+{"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n  RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n  route,\n  active,\n  variant = 'default',\n  expanded: defaultExpanded,\n  ...other\n}) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n    useWidgetConfig()\n\n  const token: TokenAmount =\n    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : { ...route.toToken, amount: BigInt(route.toAmount) }\n  const impactToken: TokenAmount | undefined =\n    subvariant !== 'custom' &&\n    !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n      : undefined\n\n  const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n    const mainTag = route.tags?.find(\n      (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'\n    )\n    const tags: string[] = mainTag ? [mainTag] : []\n    const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n    if (!combinedFeesUSD) {\n      tags.push('gasless')\n    }\n    if (route.steps.length > 1) {\n      tags.push('multistep')\n    }\n    const customLabels = getMatchingLabels(route, routeLabels)\n    return [tags, customLabels]\n  }, [route.tags, route, routeLabels])\n\n  const cardContent = (\n    <Box\n      sx={{\n        flex: 1,\n      }}\n    >\n      {subvariant !== 'refuel' && (tags.length || customLabels.length) ? (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            mb: 2,\n            gap: 1,\n            flexWrap: 'wrap',\n          }}\n        >\n          {tags?.map((tag) => {\n            const formattedTag = tag.toLowerCase()\n            const tooltipKey = `tooltip.${formattedTag}` as any\n            const tooltipText = t(tooltipKey)\n            const hasTooltip = tooltipText !== tooltipKey\n\n            const cardLabel = (\n              <CardLabel\n                variant={\n                  tag === 'gasless'\n                    ? 'success'\n                    : active\n                      ? 'secondary'\n                      : undefined\n                }\n                key={tag}\n              >\n                <CardLabelTypography>\n                  {t(`main.tags.${formattedTag}` as any)}\n                </CardLabelTypography>\n              </CardLabel>\n            )\n\n            return hasTooltip ? (\n              <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n                {cardLabel}\n              </Tooltip>\n            ) : (\n              cardLabel\n            )\n          })}\n          {customLabels.map((label, index) => (\n            <CardLabel key={index} sx={label.sx}>\n              <CardLabelTypography>{label.text}</CardLabelTypography>\n            </CardLabel>\n          ))}\n        </Box>\n      ) : null}\n      <RouteToken\n        route={route}\n        token={token}\n        impactToken={impactToken}\n        defaultExpanded={defaultExpanded}\n        showEssentials\n      />\n    </Box>\n  )\n\n  return subvariant === 'refuel' || variant === 'cardless' ? (\n    cardContent\n  ) : (\n    <Card\n      type={active ? 'selected' : 'default'}\n      selectionColor=\"secondary\"\n      indented\n      {...other}\n    >\n      {cardContent}\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,SAAA,uBAAuC,GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,YAAY,CAC/B;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}

package/dist/esm/components/RouteCard/RouteCardEssentials.js

@@ -37,8 +37,11 @@ const RouteCardEssentials = ({ route }) => {
 						alignItems: "center"
 					},
 					children: [/* @__PURE__ */ jsx(IconTypography, {
-						mr: .5,
-						fontSize: 16,
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
 						children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
 					}), /* @__PURE__ */ jsx(Typography, {
 						"data-value": combinedFeesUSD,
@@ -60,8 +63,11 @@ const RouteCardEssentials = ({ route }) => {
 						alignItems: "center"
 					},
 					children: [/* @__PURE__ */ jsx(IconTypography, {
-						mr: .5,
-						fontSize: 16,
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
 						children: /* @__PURE__ */ jsx(AccessTimeFilled, { fontSize: "inherit" })
 					}), /* @__PURE__ */ jsx(Typography, {
 						sx: {

package/dist/esm/components/RouteCard/RouteCardEssentials.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n  route,\n}) => {\n  const { t, i18n } = useTranslation()\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const { gasCosts, feeCosts, combinedFeesUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        flex: 1,\n        mt: 2,\n      }}\n    >\n      <TokenRate route={route} />\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <FeeBreakdownTooltip\n          gasCosts={gasCosts}\n          feeCosts={feeCosts}\n          gasless={!combinedFeesUSD}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              mr: 1.5,\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography mr={0.5} fontSize={16}>\n              <LocalGasStationRounded fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              data-value={combinedFeesUSD}\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {!combinedFeesUSD\n                ? t('main.fees.free')\n                : t('format.currency', {\n                    value: combinedFeesUSD,\n                  })}\n            </Typography>\n          </Box>\n        </FeeBreakdownTooltip>\n        <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography mr={0.5} fontSize={16}>\n              <AccessTimeFilled fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {formatDuration(executionTimeSeconds, i18n.language)}\n            </Typography>\n          </Box>\n        </Tooltip>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,gBAAgB;CACpC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,EACD,CACF;CAED,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,MAAM;AACxC,QACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;GACL;YAPH,CASE,oBAAC,WAAD,EAAkB,OAAS,CAAA,EAC3B,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACb;aAJH,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;MACb;eALH,CAOE,oBAAC,gBAAD;MAAgB,IAAI;MAAK,UAAU;gBACjC,oBAAC,wBAAD,EAAwB,UAAS,WAAY,CAAA;MAC9B,CAAA,EACjB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,CAAC,kBACE,EAAE,iBAAiB,GACnB,EAAE,mBAAmB,EACnB,OAAO,iBACR,CAAC;MACK,CAAA,CACT;;IACc,CAAA,EACtB,oBAAC,SAAD;IAAS,OAAO,EAAE,wBAAwB;IAAE,IAAI,EAAE,QAAQ,QAAQ;cAChE,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;MACb;eAJH,CAME,oBAAC,gBAAD;MAAgB,IAAI;MAAK,UAAU;gBACjC,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;MACxB,CAAA,EACjB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,eAAe,sBAAsB,KAAK,SAAS;MACzC,CAAA,CACT;;IACE,CAAA,CACN;KACF"}
+{"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n  route,\n}) => {\n  const { t, i18n } = useTranslation()\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const { gasCosts, feeCosts, combinedFeesUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        flex: 1,\n        mt: 2,\n      }}\n    >\n      <TokenRate route={route} />\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <FeeBreakdownTooltip\n          gasCosts={gasCosts}\n          feeCosts={feeCosts}\n          gasless={!combinedFeesUSD}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              mr: 1.5,\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n              <LocalGasStationRounded fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              data-value={combinedFeesUSD}\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {!combinedFeesUSD\n                ? t('main.fees.free')\n                : t('format.currency', {\n                    value: combinedFeesUSD,\n                  })}\n            </Typography>\n          </Box>\n        </FeeBreakdownTooltip>\n        <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n            }}\n          >\n            <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n              <AccessTimeFilled fontSize=\"inherit\" />\n            </IconTypography>\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.primary',\n                fontWeight: 600,\n                lineHeight: 1,\n              }}\n            >\n              {formatDuration(executionTimeSeconds, i18n.language)}\n            </Typography>\n          </Box>\n        </Tooltip>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,gBAAgB;CACpC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,EACD,CACF;CAED,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,MAAM;AACxC,QACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;GACL;YAPH,CASE,oBAAC,WAAD,EAAkB,OAAS,CAAA,EAC3B,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACb;aAJH,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;MACb;eALH,CAOE,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;OAAI;gBAC5D,oBAAC,wBAAD,EAAwB,UAAS,WAAY,CAAA;MAC9B,CAAA,EACjB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,CAAC,kBACE,EAAE,iBAAiB,GACnB,EAAE,mBAAmB,EACnB,OAAO,iBACR,CAAC;MACK,CAAA,CACT;;IACc,CAAA,EACtB,oBAAC,SAAD;IAAS,OAAO,EAAE,wBAAwB;IAAE,IAAI,EAAE,QAAQ,QAAQ;cAChE,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;MACb;eAJH,CAME,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;OAAI;gBAC5D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;MACxB,CAAA,EACjB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,eAAe,sBAAsB,KAAK,SAAS;MACzC,CAAA,CACT;;IACE,CAAA,CACN;KACF"}

package/dist/esm/components/RouteCard/RouteToken.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
 import { Token } from "../Token/Token.js";
 import { RouteCardEssentials } from "./RouteCardEssentials.js";
@@ -24,7 +24,7 @@ const RouteToken = ({ route, token, impactToken, defaultExpanded, showEssentials
 			impactToken,
 			step: route.steps[0],
 			stepVisible: !cardExpanded,
-			disableDescription: hiddenUI?.includes(HiddenUI.RouteTokenDescription)
+			disableDescription: hiddenUI?.includes("routeTokenDescription")
 		}), !defaultExpanded ? /* @__PURE__ */ jsx(CardIconButton, {
 			onClick: handleExpand,
 			size: "small",

package/dist/esm/components/RouteCard/RouteToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n  route: RouteExtended\n  token: TokenAmount\n  impactToken?: TokenAmount\n  defaultExpanded?: boolean\n  showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n  route,\n  token,\n  impactToken,\n  defaultExpanded,\n  showEssentials,\n}: RouteTokenProps): JSX.Element => {\n  const { hiddenUI } = useWidgetConfig()\n\n  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setCardExpanded((expanded) => !expanded)\n  }\n\n  return (\n    <Box>\n      <TokenContainer>\n        <Token\n          token={token}\n          impactToken={impactToken}\n          step={route.steps[0]}\n          stepVisible={!cardExpanded}\n          disableDescription={hiddenUI?.includes(\n            HiddenUI.RouteTokenDescription\n          )}\n        />\n        {!defaultExpanded ? (\n          <CardIconButton onClick={handleExpand} size=\"small\">\n            {cardExpanded ? (\n              <ExpandLess fontSize=\"inherit\" />\n            ) : (\n              <ExpandMore fontSize=\"inherit\" />\n            )}\n          </CardIconButton>\n        ) : null}\n      </TokenContainer>\n      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n        <RouteDetails route={route} />\n      </Collapse>\n      {showEssentials ? (\n        <Collapse timeout={225} in={!cardExpanded}>\n          <RouteCardEssentials route={route} />\n        </Collapse>\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CAEjE,MAAM,gBAAsD,MAAM;AAChE,IAAE,iBAAiB;AACnB,mBAAiB,aAAa,CAAC,SAAS;;AAG1C,QACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU,SAC5B,SAAS,sBACV;GACD,CAAA,EACD,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA,GAEjC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA;GAEpB,CAAA,GACf,KACW,EAAA,CAAA;EACjB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,OAAS,CAAA;GACrB,CAAA;EACV,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,OAAS,CAAA;GAC5B,CAAA,GACT;EACA,EAAA,CAAA"}
+{"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n  route: RouteExtended\n  token: TokenAmount\n  impactToken?: TokenAmount\n  defaultExpanded?: boolean\n  showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n  route,\n  token,\n  impactToken,\n  defaultExpanded,\n  showEssentials,\n}: RouteTokenProps): JSX.Element => {\n  const { hiddenUI } = useWidgetConfig()\n\n  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setCardExpanded((expanded) => !expanded)\n  }\n\n  return (\n    <Box>\n      <TokenContainer>\n        <Token\n          token={token}\n          impactToken={impactToken}\n          step={route.steps[0]}\n          stepVisible={!cardExpanded}\n          disableDescription={hiddenUI?.includes(\n            HiddenUI.RouteTokenDescription\n          )}\n        />\n        {!defaultExpanded ? (\n          <CardIconButton onClick={handleExpand} size=\"small\">\n            {cardExpanded ? (\n              <ExpandLess fontSize=\"inherit\" />\n            ) : (\n              <ExpandMore fontSize=\"inherit\" />\n            )}\n          </CardIconButton>\n        ) : null}\n      </TokenContainer>\n      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n        <RouteDetails route={route} />\n      </Collapse>\n      {showEssentials ? (\n        <Collapse timeout={225} in={!cardExpanded}>\n          <RouteCardEssentials route={route} />\n        </Collapse>\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CAEjE,MAAM,gBAAsD,MAAM;AAChE,IAAE,iBAAiB;AACnB,mBAAiB,aAAa,CAAC,SAAS;;AAG1C,QACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU,SAAA,wBAE7B;GACD,CAAA,EACD,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA,GAEjC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA;GAEpB,CAAA,GACf,KACW,EAAA,CAAA;EACjB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,OAAS,CAAA;GACrB,CAAA;EACV,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,OAAS,CAAA;GAC5B,CAAA,GACT;EACA,EAAA,CAAA"}

package/dist/esm/components/Routes/RoutesExpanded.js

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { ExpansionTransition } from "../Expansion/ExpansionTransition.js";
 import { useRoutes } from "../../hooks/useRoutes.js";
@@ -32,7 +32,7 @@ const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion
 			to: navigationRoutes.transactionExecution,
 			search: { routeId: route.id }
 		});
-		emitter.emit(WidgetEvent.RouteSelected, {
+		emitter.emit("routeSelected", {
 			route,
 			routes
 		});
@@ -45,7 +45,7 @@ const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion
 		setOpenExpansion(expanded);
 	}, [expanded, setOpenExpansion]);
 	useEffect(() => {
-		emitter.emit(WidgetEvent.WidgetExpanded, expanded);
+		emitter.emit("widgetExpanded", expanded);
 	}, [emitter, expanded]);
 	return /* @__PURE__ */ jsx(ExpansionTransition, {
 		in: expanded,

package/dist/esm/components/Routes/RoutesExpanded.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,iBAAiB;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAgB,KAAA,EAAU;CAC5C,MAAM,kBAAkB,OAAO,MAAM;CAErC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,WAAW;CAEf,MAAM,SAAS,kBAAkB;AAE/B,YAAU,UAAU,KAAA;IACnB,EAAE,CAAC;AAGN,KAAI,UAAU,WAAW,CAAC,QAAQ;AAChC,kBAAgB,UAAU;AAE1B,MAAI,UACF,WAAU,UAAU,KAAA;QAEjB;AACL,YAAU,UAAU;AACpB,kBAAgB,UAAU,QAAQ,OAAO;;CAG3C,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,UACvD,IAAI;CAGP,MAAM,eAAe,aAClB,UAAiB;AAChB,qBAAmB,MAAM;AACzB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,IAAI;GAC9B,CAAC;AACF,UAAQ,KAAK,YAAY,eAAe;GAAE;GAAe;GAAS,CAAC;IAErE;EAAC;EAAS;EAAQ;EAAmB,CACtC;AAGD,uBAAsB;AACpB,mBAAiB,SAAS;IACzB,CAAC,UAAU,iBAAiB,CAAC;AAEhC,iBAAgB;AACd,UAAQ,KAAK,YAAY,gBAAgB,SAAS;IACjD,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;GACd,CAAA;EACkB,CAAA;EAExB"}
+{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,iBAAiB;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAgB,KAAA,EAAU;CAC5C,MAAM,kBAAkB,OAAO,MAAM;CAErC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,WAAW;CAEf,MAAM,SAAS,kBAAkB;AAE/B,YAAU,UAAU,KAAA;IACnB,EAAE,CAAC;AAGN,KAAI,UAAU,WAAW,CAAC,QAAQ;AAChC,kBAAgB,UAAU;AAE1B,MAAI,UACF,WAAU,UAAU,KAAA;QAEjB;AACL,YAAU,UAAU;AACpB,kBAAgB,UAAU,QAAQ,OAAO;;CAG3C,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,UACvD,IAAI;CAGP,MAAM,eAAe,aAClB,UAAiB;AAChB,qBAAmB,MAAM;AACzB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,IAAI;GAC9B,CAAC;AACF,UAAQ,KAAA,iBAAgC;GAAE;GAAe;GAAS,CAAC;IAErE;EAAC;EAAS;EAAQ;EAAmB,CACtC;AAGD,uBAAsB;AACpB,mBAAiB,SAAS;IACzB,CAAC,UAAU,iBAAiB,CAAC;AAEhC,iBAAgB;AACd,UAAQ,KAAA,kBAAiC,SAAS;IACjD,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;GACd,CAAA;EACkB,CAAA;EAExB"}

package/dist/esm/components/SelectChainAndToken.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../types/widget.js";
+import "../types/widget.js";
 import { ReverseTokensButtonEmpty } from "./ReverseTokensButton/ReverseTokensButton.style.js";
 import { ReverseTokensButton } from "./ReverseTokensButton/ReverseTokensButton.js";
 import { SelectTokenButton } from "./SelectTokenButton/SelectTokenButton.js";
@@ -8,13 +8,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectChainAndToken.tsx
 const SelectChainAndToken = (props) => {
 	const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
-	const hiddenReverse = subvariant === "refuel" || disabledUI?.includes(DisabledUI.FromToken) || disabledUI?.includes(DisabledUI.ToToken) || hiddenUI?.includes(HiddenUI.FromToken) || hiddenUI?.includes(HiddenUI.ToToken) || hiddenUI?.includes(HiddenUI.ReverseTokensButton);
-	const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken);
-	const hiddenToToken = subvariant === "custom" || hiddenUI?.includes(HiddenUI.ToToken);
+	const hiddenReverse = subvariant === "refuel" || disabledUI?.includes("fromToken") || disabledUI?.includes("toToken") || hiddenUI?.includes("fromToken") || hiddenUI?.includes("toToken") || hiddenUI?.includes("reverseTokensButton");
+	const hiddenFromToken = hiddenUI?.includes("fromToken");
+	const hiddenToToken = subvariant === "custom" || hiddenUI?.includes("toToken");
 	const showReverseButton = !hiddenToToken && !hiddenFromToken;
 	return /* @__PURE__ */ jsxs(Box, {
-		sx: { display: "flex" },
 		...props,
+		sx: {
+			display: "flex",
+			...props.sx
+		},
 		children: [
 			!hiddenFromToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
 				formType: "from",

package/dist/esm/components/SelectChainAndToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { DisabledUI, HiddenUI } from '../types/widget.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()\n\n  const hiddenReverse =\n    subvariant === 'refuel' ||\n    disabledUI?.includes(DisabledUI.FromToken) ||\n    disabledUI?.includes(DisabledUI.ToToken) ||\n    hiddenUI?.includes(HiddenUI.FromToken) ||\n    hiddenUI?.includes(HiddenUI.ToToken) ||\n    hiddenUI?.includes(HiddenUI.ReverseTokensButton)\n\n  const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)\n  const hiddenToToken =\n    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box sx={{ display: 'flex' }} {...props}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,eAAe,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,YACf,YAAY,SAAS,WAAW,UAAU,IAC1C,YAAY,SAAS,WAAW,QAAQ,IACxC,UAAU,SAAS,SAAS,UAAU,IACtC,UAAU,SAAS,SAAS,QAAQ,IACpC,UAAU,SAAS,SAAS,oBAAoB;CAElD,MAAM,kBAAkB,UAAU,SAAS,SAAS,UAAU;CAC9D,MAAM,gBACJ,eAAe,YAAY,UAAU,SAAS,SAAS,QAAQ;CAEjE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;AAE7C,QACE,qBAAC,KAAD;EAAK,IAAI,EAAE,SAAS,QAAQ;EAAE,GAAI;YAAlC;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;IAAiB,CAAA,GACjE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,EAAuB,CAAA,GAEvB,oBAAC,0BAAD,EAA4B,CAAA,GAE5B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;IAAiB,CAAA,GAC/D;GACA"}
+{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { DisabledUI, HiddenUI } from '../types/widget.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()\n\n  const hiddenReverse =\n    subvariant === 'refuel' ||\n    disabledUI?.includes(DisabledUI.FromToken) ||\n    disabledUI?.includes(DisabledUI.ToToken) ||\n    hiddenUI?.includes(HiddenUI.FromToken) ||\n    hiddenUI?.includes(HiddenUI.ToToken) ||\n    hiddenUI?.includes(HiddenUI.ReverseTokensButton)\n\n  const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)\n  const hiddenToToken =\n    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,eAAe,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,YACf,YAAY,SAAA,YAA8B,IAC1C,YAAY,SAAA,UAA4B,IACxC,UAAU,SAAA,YAA4B,IACtC,UAAU,SAAA,UAA0B,IACpC,UAAU,SAAA,sBAAsC;CAElD,MAAM,kBAAkB,UAAU,SAAA,YAA4B;CAC9D,MAAM,gBACJ,eAAe,YAAY,UAAU,SAAA,UAA0B;CAEjE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;AAE7C,QACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;GAAI;YAApD;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;IAAiB,CAAA,GACjE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,EAAuB,CAAA,GAEvB,oBAAC,0BAAD,EAA4B,CAAA,GAE5B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;IAAiB,CAAA,GAC/D;GACA"}

package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js

@@ -43,7 +43,6 @@ const SelectTokenCard = styled(Card$1)(({ theme }) => {
 const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["formType", "mask"].includes(prop) })(({ theme, formType, mask = true }) => {
 	const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
 	const horizontal = formType === "to" ? "-8px" : "calc(100% + 8px)";
-	const vertical = "50%";
 	return {
 		padding: 0,
 		transition: theme.transitions.create(["background-color"], {
@@ -53,7 +52,7 @@ const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["form
 		"&:last-child": { paddingBottom: 0 },
 		...cardVariant !== "outlined" && {
 			backgroundColor: theme.vars.palette.background.paper,
-			mask: mask ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
+			mask: mask ? `radial-gradient(circle 20px at ${horizontal} 50%, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
 		},
 		...cardVariant === "filled" && { "&:hover": {
 			cursor: "pointer",

package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  padding: theme.spacing(2),\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n    fontSize: 18,\n    fontWeight: 500,\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      fontSize: 16,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n        },\n      },\n    },\n  ],\n}))\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = direction\n    const vertical = '50%'\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,UAAU,IACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACR;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,CACF;CACF,EAAE;AAEH,MAAa,kBAKT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,OAAO,CAAC,SAAS,KAAe,EAC5E,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;CAE/C,MAAM,WAAW;AACjB,QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,GAAG,SAAS,sDACzD;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}
+{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  padding: theme.spacing(2),\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n    fontSize: 18,\n    fontWeight: 500,\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      fontSize: 16,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n        },\n      },\n    },\n  ],\n}))\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = direction\n    const vertical = '50%'\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,UAAU,IACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACR;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,CACF;CACF,EAAE;AAEH,MAAa,kBAKT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,OAAO,CAAC,SAAS,KAAe,EAC5E,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;AAG/C,QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,0DAC7C;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}

package/dist/esm/components/SendToWallet/SendToWalletButton.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
@@ -34,8 +34,8 @@ const SendToWalletButton = (props) => {
 	const { accounts } = useAccount();
 	const { getChainTypeFromAddress } = useChainTypeFromAddress();
 	const { requiredToAddress } = useToAddressRequirements();
-	const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-	const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+	const disabledToAddress = disabledUI?.includes("toAddress");
+	const hiddenToAddress = hiddenUI?.includes("toAddress");
 	const address = toAddressFieldValue ? shortenAddress(toAddressFieldValue) : t("sendToWallet.enterAddress", { context: "short" });
 	const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
 	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || (toAddressFieldValue ? getChainTypeFromAddress(toAddressFieldValue) : void 0) : void 0;

package/dist/esm/components/SendToWallet/SendToWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const {\n    disabledUI,\n    hiddenUI,\n    toAddress,\n    toAddresses,\n    subvariant,\n    subvariantOptions,\n  } = useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              !!toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const {\n    disabledUI,\n    hiddenUI,\n    toAddress,\n    toAddresses,\n    subvariant,\n    subvariantOptions,\n  } = useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              !!toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
@@ -15,8 +15,8 @@ const SendToWalletExpandButton = () => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig();
-	const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-	const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+	const hiddenToAddress = hiddenUI?.includes("toAddress");
+	const disabledToAddress = disabledUI?.includes("toAddress");
 	const { requiredToAddress } = useToAddressRequirements();
 	const [toAddressValue] = useFieldValues("toAddress");
 	const visible = !hiddenToAddress && !disabledToAddress && !toAddressValue && !requiredToAddress;

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,aAAa,YAAY,aAAa,iBAAiB;CAC/D,MAAM,kBAAkB,UAAU,SAAS,SAAS,UAAU;CAC9D,MAAM,oBAAoB,YAAY,SAAS,WAAW,UAAU;CACpE,MAAM,EAAE,sBAAsB,0BAA0B;CACxD,MAAM,CAAC,kBAAkB,eAAe,YAAY;CAEpD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,cACtB,CAAC;AAEJ,QACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,oBAAoB;GAAE,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAED,oBAAC,QAAD,EAAU,CAAA;IACH,CAAA;GACD,CAAA;EACD,CAAA"}
+{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,aAAa,YAAY,aAAa,iBAAiB;CAC/D,MAAM,kBAAkB,UAAU,SAAA,YAA4B;CAC9D,MAAM,oBAAoB,YAAY,SAAA,YAA8B;CACpE,MAAM,EAAE,sBAAsB,0BAA0B;CACxD,MAAM,CAAC,kBAAkB,eAAe,YAAY;CAEpD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,cACtB,CAAC;AAEJ,QACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,oBAAoB;GAAE,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAED,oBAAC,QAAD,EAAU,CAAA;IACH,CAAA;GACD,CAAA;EACD,CAAA"}

package/dist/esm/components/Step/Step.js

@@ -38,10 +38,15 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 				flex: 1
 			},
 			children: [/* @__PURE__ */ jsx(CardTitle, {
-				flex: 1,
+				sx: { flex: 1 },
 				children: getCardTitle()
-			}), /* @__PURE__ */ jsx(CardTitle, {
-				sx: { fontWeight: 600 },
+			}), /* @__PURE__ */ jsx(Box, {
+				sx: {
+					p: 2,
+					pb: 0,
+					fontSize: 14,
+					fontWeight: 600
+				},
 				children: /* @__PURE__ */ jsx(StepTimer, { step })
 			})]
 		}), /* @__PURE__ */ jsxs(Box, {
@@ -49,13 +54,17 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 			children: [
 				fromToken ? /* @__PURE__ */ jsx(Token, {
 					token: fromToken,
-					px: 2,
-					py: 1
+					sx: {
+						px: 2,
+						py: 1
+					}
 				}) : null,
 				/* @__PURE__ */ jsx(StepActions, {
 					step,
-					px: 2,
-					py: 1,
+					sx: {
+						px: 2,
+						py: 1
+					},
 					dense: true
 				}),
 				prepareActions(step.execution?.actions ?? []).map((actionsGroup, index) => /* @__PURE__ */ jsx(StepAction, {
@@ -79,8 +88,10 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 					token: toToken,
 					impactToken,
 					enableImpactTokenTooltip: true,
-					px: 2,
-					py: 1
+					sx: {
+						px: 2,
+						py: 1
+					}
 				}) : null
 			]
 		})]

package/dist/esm/components/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n  ExecutionActionType,\n  LiFiStepExtended,\n  TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n  step: LiFiStepExtended\n  fromToken?: TokenAmount\n  toToken?: TokenAmount\n  impactToken?: TokenAmount\n  toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions } = useWidgetConfig()\n  const { getAddressLink } = useExplorer()\n\n  // If execution status is failed outside of actions scope,\n  // show a synthetic action to represent the failed execution\n  const actions = step.execution?.actions ?? []\n  const failedWithoutActions =\n    step.execution?.status === 'FAILED' &&\n    !actions.some((a) => a.status === 'FAILED')\n\n  const getCardTitle = () => {\n    const hasBridgeStep = step.includedSteps.some(\n      (step) => step.type === 'cross'\n    )\n    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n    const hasCustomStep = step.includedSteps.some(\n      (step) => step.type === 'custom'\n    )\n\n    const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n    if (hasBridgeStep && hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepSwapAndBridge')\n    }\n    if (hasBridgeStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepBridge')\n    }\n    if (hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepSwapAndDeposit')\n          : t('main.stepSwapAndBuy')\n        : t('main.stepSwap')\n    }\n    return isCustomVariant\n      ? subvariantOptions?.custom === 'deposit'\n        ? t('main.stepDeposit')\n        : t('main.stepBuy')\n      : t('main.stepSwap')\n  }\n\n  const formattedToAddress = shortenAddress(toAddress)\n  const toAddressLink = toAddress\n    ? getAddressLink(toAddress, step.action.toChainId)\n    : undefined\n\n  return (\n    <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n        }}\n      >\n        <CardTitle flex={1}>{getCardTitle()}</CardTitle>\n        <CardTitle sx={{ fontWeight: 600 }}>\n          <StepTimer step={step} />\n        </CardTitle>\n      </Box>\n      <Box\n        sx={{\n          py: 1,\n        }}\n      >\n        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}\n        <StepActions step={step} px={2} py={1} dense />\n        {prepareActions(step.execution?.actions ?? []).map(\n          (actionsGroup, index) => (\n            <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n          )\n        )}\n        {failedWithoutActions ? (\n          <StepAction\n            step={step}\n            actionsGroup={[\n              {\n                status: 'FAILED',\n                type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n                error: step.execution?.error,\n              },\n            ]}\n          />\n        ) : null}\n        {formattedToAddress && toAddressLink ? (\n          <DestinationWalletAddress\n            step={step}\n            toAddress={formattedToAddress}\n            toAddressLink={toAddressLink}\n          />\n        ) : null}\n        {toToken ? (\n          <Token\n            token={toToken}\n            impactToken={impactToken}\n            enableImpactTokenTooltip\n            px={2}\n            py={1}\n          />\n        ) : null}\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,SACzB,IAEwC,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,MAAM;cAAI,cAAc;IAAa,CAAA,EAChD,oBAAC,WAAD;IAAW,IAAI,EAAE,YAAY,KAAK;cAChC,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACf,CAAA,CACR;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;KAAG,IAAI;KAAK,CAAA,GAAG;IACzD,oBAAC,aAAD;KAAmB;KAAM,IAAI;KAAG,IAAI;KAAG,OAAA;KAAQ,CAAA;IAC9C,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;KACJ,IAAI;KACJ,CAAA,GACA;IACA;KACD"}
+{"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n  ExecutionActionType,\n  LiFiStepExtended,\n  TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n  step: LiFiStepExtended\n  fromToken?: TokenAmount\n  toToken?: TokenAmount\n  impactToken?: TokenAmount\n  toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions } = useWidgetConfig()\n  const { getAddressLink } = useExplorer()\n\n  // If execution status is failed outside of actions scope,\n  // show a synthetic action to represent the failed execution\n  const actions = step.execution?.actions ?? []\n  const failedWithoutActions =\n    step.execution?.status === 'FAILED' &&\n    !actions.some((a) => a.status === 'FAILED')\n\n  const getCardTitle = () => {\n    const hasBridgeStep = step.includedSteps.some(\n      (step) => step.type === 'cross'\n    )\n    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n    const hasCustomStep = step.includedSteps.some(\n      (step) => step.type === 'custom'\n    )\n\n    const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n    if (hasBridgeStep && hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepSwapAndBridge')\n    }\n    if (hasBridgeStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepBridge')\n    }\n    if (hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepSwapAndDeposit')\n          : t('main.stepSwapAndBuy')\n        : t('main.stepSwap')\n    }\n    return isCustomVariant\n      ? subvariantOptions?.custom === 'deposit'\n        ? t('main.stepDeposit')\n        : t('main.stepBuy')\n      : t('main.stepSwap')\n  }\n\n  const formattedToAddress = shortenAddress(toAddress)\n  const toAddressLink = toAddress\n    ? getAddressLink(toAddress, step.action.toChainId)\n    : undefined\n\n  return (\n    <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n        }}\n      >\n        <CardTitle sx={{ flex: 1 }}>{getCardTitle()}</CardTitle>\n        <Box sx={{ p: 2, pb: 0, fontSize: 14, fontWeight: 600 }}>\n          <StepTimer step={step} />\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          py: 1,\n        }}\n      >\n        {fromToken ? <Token token={fromToken} sx={{ px: 2, py: 1 }} /> : null}\n        <StepActions step={step} sx={{ px: 2, py: 1 }} dense />\n        {prepareActions(step.execution?.actions ?? []).map(\n          (actionsGroup, index) => (\n            <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n          )\n        )}\n        {failedWithoutActions ? (\n          <StepAction\n            step={step}\n            actionsGroup={[\n              {\n                status: 'FAILED',\n                type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n                error: step.execution?.error,\n              },\n            ]}\n          />\n        ) : null}\n        {formattedToAddress && toAddressLink ? (\n          <DestinationWalletAddress\n            step={step}\n            toAddress={formattedToAddress}\n            toAddressLink={toAddressLink}\n          />\n        ) : null}\n        {toToken ? (\n          <Token\n            token={toToken}\n            impactToken={impactToken}\n            enableImpactTokenTooltip\n            sx={{ px: 2, py: 1 }}\n          />\n        ) : null}\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,SACzB,IAEwC,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,IAAI,EAAE,MAAM,GAAG;cAAG,cAAc;IAAa,CAAA,EACxD,oBAAC,KAAD;IAAK,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG,UAAU;KAAI,YAAY;KAAK;cACrD,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACrB,CAAA,CACF;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAI,CAAA,GAAG;IACjE,oBAAC,aAAD;KAAmB;KAAM,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAE,OAAA;KAAQ,CAAA;IACtD,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KACpB,CAAA,GACA;IACA;KACD"}

package/dist/esm/components/Step/StepActions.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
 import { Card as Card$1 } from "../Card/Card.js";
@@ -28,7 +28,7 @@ const StepActions = ({ route }) => {
 			},
 			children: route.steps.flatMap((routeStep) => {
 				let steps = routeStep.includedSteps;
-				if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+				if (hiddenUI?.includes("integratorStepDetails")) {
 					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
 					if (feeCollectionStep) {
 						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));