@lifi/widget 4.4.0 → 4.6.0

package/dist/esm/components/ExecutionStatusCard/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { TimerRing } from '../Timer/StepStatusTimer.js'\nimport type { ExecutionIconKey } from './iconKey.js'\nimport { resolveExecutionIconKey } from './iconKey.js'\nimport { StatusIconContainer } from './StatusIcon.style.js'\n\nconst ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }\n\nconst iconEnterConfig: Record<\n  ExecutionIconKey,\n  { initialScale: number; transition: Transition }\n> = {\n  success: {\n    initialScale: 0.6,\n    transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },\n  },\n  warning: {\n    initialScale: 0.75,\n    transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },\n  },\n  error: {\n    initialScale: 0.75,\n    transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },\n  },\n  info: {\n    initialScale: 0.8,\n    transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n  },\n  timer: {\n    initialScale: 0.85,\n    transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst iconVariants: Variants = {\n  hidden: (key: ExecutionIconKey) => ({\n    opacity: 0,\n    scale: iconEnterConfig[key].initialScale,\n  }),\n  visible: (key: ExecutionIconKey) => ({\n    opacity: 1,\n    scale: 1,\n    transition: iconEnterConfig[key].transition,\n  }),\n  exit: {\n    opacity: 0,\n    scale: 0.8,\n    filter: 'blur(4px)',\n    transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },\n  },\n}\n\ninterface StatusIconProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\n/**\n * The animated status icon. Each state animates in its own way; they all\n * animate out the same way.\n */\nexport function StatusIcon({ route, status }: StatusIconProps): JSX.Element {\n  const iconKey = resolveExecutionIconKey(route, status)\n  const step = route.steps.at(-1)\n\n  return (\n    <StatusIconContainer>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <m.div\n          key={iconKey}\n          custom={iconKey}\n          variants={iconVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          {iconKey === 'timer' ? (\n            <TimerRing step={step} />\n          ) : (\n            <IconCircle status={iconKey} />\n          )}\n        </m.div>\n      </AnimatePresence>\n    </StatusIconContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,YAAY;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AAEtE,MAAM,kBAGF;CACF,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAK,QAAQ;EAAK;CAClE;CACA,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAM,QAAQ;EAAI;CAClE;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;CACA,MAAM;EACJ,cAAc;EACd,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;AAEA,MAAM,eAAyB;CAC7B,SAAS,SAA2B;EAClC,SAAS;EACT,OAAO,gBAAgB,IAAI,CAAC;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,IAAI,CAAC;CACnC;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,YAAY;GAAE,UAAU,UAAU;GAAU,MAAM,UAAU;EAAK;CACnE;AACF;;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,UAAwC;CAC1E,MAAM,UAAU,wBAAwB,OAAO,MAAM;CACrD,MAAM,OAAO,MAAM,MAAM,GAAG,EAAE;CAE9B,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,MAAK;EAAY,SAAS;YACzC,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;aAEC,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}
+{"version":3,"file":"StatusIcon.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { TimerRing } from '../Timer/StepStatusTimer.js'\nimport type { ExecutionIconKey } from './iconKey.js'\nimport { resolveExecutionIconKey } from './iconKey.js'\nimport { StatusIconContainer } from './StatusIcon.style.js'\n\nconst ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }\n\nconst iconEnterConfig: Record<\n  ExecutionIconKey,\n  { initialScale: number; transition: Transition }\n> = {\n  success: {\n    initialScale: 0.6,\n    transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },\n  },\n  warning: {\n    initialScale: 0.75,\n    transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },\n  },\n  error: {\n    initialScale: 0.75,\n    transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },\n  },\n  info: {\n    initialScale: 0.8,\n    transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n  },\n  timer: {\n    initialScale: 0.85,\n    transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst iconVariants: Variants = {\n  hidden: (key: ExecutionIconKey) => ({\n    opacity: 0,\n    scale: iconEnterConfig[key].initialScale,\n  }),\n  visible: (key: ExecutionIconKey) => ({\n    opacity: 1,\n    scale: 1,\n    transition: iconEnterConfig[key].transition,\n  }),\n  exit: {\n    opacity: 0,\n    scale: 0.8,\n    filter: 'blur(4px)',\n    transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },\n  },\n}\n\ninterface StatusIconProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\n/**\n * The animated status icon. Each state animates in its own way; they all\n * animate out the same way.\n */\nexport function StatusIcon({ route, status }: StatusIconProps): JSX.Element {\n  const iconKey = resolveExecutionIconKey(route, status)\n  const step = route.steps.at(-1)\n\n  return (\n    <StatusIconContainer>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <m.div\n          key={iconKey}\n          custom={iconKey}\n          variants={iconVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          {iconKey === 'timer' ? (\n            <TimerRing step={step} />\n          ) : (\n            <IconCircle status={iconKey} />\n          )}\n        </m.div>\n      </AnimatePresence>\n    </StatusIconContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,YAAY;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AAEtE,MAAM,kBAGF;CACF,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAK,QAAQ;EAAK;CAClE;CACA,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAM,QAAQ;EAAI;CAClE;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;CACA,MAAM;EACJ,cAAc;EACd,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;AAEA,MAAM,eAAyB;CAC7B,SAAS,SAA2B;EAClC,SAAS;EACT,OAAO,gBAAgB,IAAI,CAAC;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,IAAI,CAAC;CACnC;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,YAAY;GAAE,UAAU,UAAU;GAAU,MAAM,UAAU;EAAK;CACnE;AACF;;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,UAAwC;CAC1E,MAAM,UAAU,wBAAwB,OAAO,MAAM;CACrD,MAAM,OAAO,MAAM,MAAM,GAAG,EAAE;CAE9B,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,MAAK;EAAY,SAAS;EACzC,UAAA,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;GAEC,UAAA,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}

package/dist/esm/components/Expansion/Expansion.js

@@ -13,10 +13,11 @@ function Expansion() {
 	const chainExpansionTypeRef = useRef(expansionType);
 	const [routesOpen, setRoutesOpen] = useState(false);
 	if (expansionType === "fromChain" || expansionType === "toChain") chainExpansionTypeRef.current = expansionType;
+	const containerWidth = useMemo(() => {
+		return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
+	}, [routesOpen, withChainExpansion]);
 	return /* @__PURE__ */ jsxs(ExpansionContainer, {
-		width: useMemo(() => {
-			return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
-		}, [routesOpen, withChainExpansion]),
+		width: containerWidth,
 		children: [/* @__PURE__ */ jsx(RoutesExpanded, {
 			canOpen: expansionType === "routes",
 			setOpenExpansion: setRoutesOpen

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

@@ -1 +1 @@
-{"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n  const [withChainExpansion, expansionType] = useHasChainExpansion()\n  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n  const [routesOpen, setRoutesOpen] = useState(false)\n\n  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n  if (\n    expansionType === ExpansionType.FromChain ||\n    expansionType === ExpansionType.ToChain\n  ) {\n    chainExpansionTypeRef.current = expansionType\n  }\n\n  const containerWidth = useMemo(() => {\n    return routesOpen\n      ? routesExpansionWidth\n      : withChainExpansion\n        ? chainExpansionWidth\n        : 0\n  }, [routesOpen, withChainExpansion])\n\n  return (\n    <ExpansionContainer width={containerWidth}>\n      <RoutesExpanded\n        canOpen={expansionType === ExpansionType.Routes}\n        setOpenExpansion={setRoutesOpen}\n      />\n      <ChainsExpanded\n        formType={\n          chainExpansionTypeRef.current === ExpansionType.FromChain\n            ? 'from'\n            : 'to'\n        }\n        open={withChainExpansion}\n      />\n    </ExpansionContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,qBAAqB;CACjE,MAAM,wBAAwB,OAAsB,aAAa;CACjE,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAGlD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAWlC,OACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;GACnC,OAAO,aACH,uBACA,qBACE,sBACA;EACR,GAAG,CAAC,YAAY,kBAAkB,CAGQ;YAAxC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;EACnB,CAAA,GACD,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;EACP,CAAA,CACiB;;AAExB"}
+{"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n  const [withChainExpansion, expansionType] = useHasChainExpansion()\n  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n  const [routesOpen, setRoutesOpen] = useState(false)\n\n  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n  if (\n    expansionType === ExpansionType.FromChain ||\n    expansionType === ExpansionType.ToChain\n  ) {\n    chainExpansionTypeRef.current = expansionType\n  }\n\n  const containerWidth = useMemo(() => {\n    return routesOpen\n      ? routesExpansionWidth\n      : withChainExpansion\n        ? chainExpansionWidth\n        : 0\n  }, [routesOpen, withChainExpansion])\n\n  return (\n    <ExpansionContainer width={containerWidth}>\n      <RoutesExpanded\n        canOpen={expansionType === ExpansionType.Routes}\n        setOpenExpansion={setRoutesOpen}\n      />\n      <ChainsExpanded\n        formType={\n          chainExpansionTypeRef.current === ExpansionType.FromChain\n            ? 'from'\n            : 'to'\n        }\n        open={withChainExpansion}\n      />\n    </ExpansionContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,qBAAqB;CACjE,MAAM,wBAAwB,OAAsB,aAAa;CACjE,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAGlD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAGlC,MAAM,iBAAiB,cAAc;EACnC,OAAO,aACH,uBACA,qBACE,sBACA;CACR,GAAG,CAAC,YAAY,kBAAkB,CAAC;CAEnC,OACE,qBAAC,oBAAD;EAAoB,OAAO;EAA3B,UAAA,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;EACnB,CAAA,GACD,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;EACP,CAAA,CACiB;;AAExB"}

package/dist/esm/components/Expansion/ExpansionTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n  animationDuration,\n  defaultStyle,\n  transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n  in: boolean\n  width: string\n  onExited?: () => void\n}\n\nexport function ExpansionTransition({\n  in: inProp,\n  children,\n  width,\n  onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n  const nodeRef = useRef(null)\n  return (\n    <Transition\n      nodeRef={nodeRef}\n      in={inProp}\n      timeout={animationDuration}\n      onExited={onExited}\n      mountOnEnter\n      unmountOnExit\n    >\n      {(state) => {\n        return (\n          <Box\n            ref={nodeRef}\n            style={{\n              ...defaultStyle,\n              ...transitionStyles[state as keyof typeof transitionStyles],\n              width,\n            }}\n          >\n            {children}\n          </Box>\n        )\n      }}\n    </Transition>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;aAEE,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}
+{"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n  animationDuration,\n  defaultStyle,\n  transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n  in: boolean\n  width: string\n  onExited?: () => void\n}\n\nexport function ExpansionTransition({\n  in: inProp,\n  children,\n  width,\n  onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n  const nodeRef = useRef(null)\n  return (\n    <Transition\n      nodeRef={nodeRef}\n      in={inProp}\n      timeout={animationDuration}\n      onExited={onExited}\n      mountOnEnter\n      unmountOnExit\n    >\n      {(state) => {\n        return (\n          <Box\n            ref={nodeRef}\n            style={{\n              ...defaultStyle,\n              ...transitionStyles[state as keyof typeof transitionStyles],\n              width,\n            }}\n          >\n            {children}\n          </Box>\n        )\n      }}\n    </Transition>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;EAEE,WAAA,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n  gasCosts?: FeesBreakdown[]\n  feeCosts?: FeesBreakdown[]\n  gasless?: boolean\n  children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n  gasCosts,\n  feeCosts,\n  gasless,\n  children,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip\n      title={\n        <Box>\n          {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n          {gasCosts?.length && !gasless ? (\n            <Box>\n              {t('main.fees.network')}\n              {getFeeBreakdownTypography(gasCosts, t)}\n            </Box>\n          ) : null}\n          {feeCosts?.length && !gasless ? (\n            <Box\n              sx={{\n                mt: 0.5,\n              }}\n            >\n              {t('main.fees.provider')}\n              {getFeeBreakdownTypography(feeCosts, t)}\n            </Box>\n          ) : null}\n        </Box>\n      }\n      sx={{ cursor: 'help' }}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n  fees.map((fee, index) => (\n    <Typography\n      color=\"inherit\"\n      key={`${fee.token.address}${index}`}\n      sx={{\n        fontSize: 12,\n        fontWeight: '500',\n      }}\n    >\n      {t('format.currency', { value: fee.amountUSD })} (\n      {t('format.tokenAmount', {\n        value: formatTokenAmount(fee.amount, fee.token.decimals),\n      })}{' '}\n      {fee.token.symbol})\n    </Typography>\n  ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;cAHF,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;QACH;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;WANF;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;GAXL,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}
+{"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n  gasCosts?: FeesBreakdown[]\n  feeCosts?: FeesBreakdown[]\n  gasless?: boolean\n  children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n  gasCosts,\n  feeCosts,\n  gasless,\n  children,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip\n      title={\n        <Box>\n          {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n          {gasCosts?.length && !gasless ? (\n            <Box>\n              {t('main.fees.network')}\n              {getFeeBreakdownTypography(gasCosts, t)}\n            </Box>\n          ) : null}\n          {feeCosts?.length && !gasless ? (\n            <Box\n              sx={{\n                mt: 0.5,\n              }}\n            >\n              {t('main.fees.provider')}\n              {getFeeBreakdownTypography(feeCosts, t)}\n            </Box>\n          ) : null}\n        </Box>\n      }\n      sx={{ cursor: 'help' }}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n  fees.map((fee, index) => (\n    <Typography\n      color=\"inherit\"\n      key={`${fee.token.address}${index}`}\n      sx={{\n        fontSize: 12,\n        fontWeight: '500',\n      }}\n    >\n      {t('format.currency', { value: fee.amountUSD })} (\n      {t('format.tokenAmount', {\n        value: formatTokenAmount(fee.amount, fee.token.decimals),\n      })}{' '}\n      {fee.token.symbol})\n    </Typography>\n  ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;IAHF,UAAA,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;GACH,CAAA,IAAA;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;CANF,UAAA;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;AAXL,GAAA,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple={indicator.active || indicator.failed}\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;YACnC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;cAErD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}
+{"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple={indicator.active || indicator.failed}\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;EACnC,UAAA,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;GAE7C,UAAA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;IAErD,UAAA,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n  const theme = useTheme()\n  const navigateBack = useNavigateBack()\n  const [backAction, executeBackAction] = useHeaderStore((state) => [\n    state.backAction,\n    state.executeBackAction,\n  ])\n\n  return (\n    <IconButton\n      size=\"medium\"\n      edge={theme?.navigation?.edge ? 'start' : false}\n      onClick={() => {\n        if (backAction) {\n          executeBackAction()\n        } else {\n          navigateBack()\n        }\n      }}\n    >\n      <ArrowBack />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;YAEA,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}
+{"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n  const theme = useTheme()\n  const navigateBack = useNavigateBack()\n  const [backAction, executeBackAction] = useHeaderStore((state) => [\n    state.backAction,\n    state.executeBackAction,\n  ])\n\n  return (\n    <IconButton\n      size=\"medium\"\n      edge={theme?.navigation?.edge ? 'start' : false}\n      onClick={() => {\n        if (backAction) {\n          executeBackAction()\n        } else {\n          navigateBack()\n        }\n      }}\n    >\n      <ArrowBack />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;EAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n  header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n  header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { closeDrawer } = useDrawer()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const showInNavigationHeader =\n    header === 'navigation' && useExternalWalletProvidersOnly\n\n  const showInWalletHeader = header === 'wallet'\n\n  return showInNavigationHeader || showInWalletHeader ? (\n    <Tooltip title={t('button.close')}>\n      <IconButton\n        size=\"medium\"\n        data-testid=\"widget-close-drawer-button\"\n        onClick={closeDrawer}\n      >\n        <CloseRounded />\n      </IconButton>\n    </Tooltip>\n  ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;YAC9B,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;aAET,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}
+{"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n  header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n  header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { closeDrawer } = useDrawer()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const showInNavigationHeader =\n    header === 'navigation' && useExternalWalletProvidersOnly\n\n  const showInWalletHeader = header === 'wallet'\n\n  return showInNavigationHeader || showInWalletHeader ? (\n    <Tooltip title={t('button.close')}>\n      <IconButton\n        size=\"medium\"\n        data-testid=\"widget-close-drawer-button\"\n        onClick={closeDrawer}\n      >\n        <CloseRounded />\n      </IconButton>\n    </Tooltip>\n  ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;EAC9B,UAAA,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;GAET,UAAA,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}

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

@@ -1 +1 @@
-{"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n  account,\n}: {\n  account: Account\n}): JSX.Element => {\n  const disconnect = useAccountDisconnect()\n  return (\n    <IconButton\n      size=\"medium\"\n      onClick={async (e) => {\n        e.stopPropagation()\n        await disconnect(account)\n      }}\n    >\n      <PowerSettingsNewRounded />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;YAEA,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}
+{"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n  account,\n}: {\n  account: Account\n}): JSX.Element => {\n  const disconnect = useAccountDisconnect()\n  return (\n    <IconButton\n      size=\"medium\"\n      onClick={async (e) => {\n        e.stopPropagation()\n        await disconnect(account)\n      }}\n    >\n      <PowerSettingsNewRounded />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;EAEA,UAAA,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n  key: K\n  label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n  tabs: HeaderTab<K>[]\n  value: K\n  onChange: (key: K) => void\n}\n\n/**\n * Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n  tabs,\n  value,\n  onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n  const { setFieldValue } = useFieldActions()\n\n  const handleChange = (_: React.SyntheticEvent, key: K) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    onChange(key)\n  }\n\n  return (\n    <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n      {tabs.map((tab) => (\n        <NavigationTab\n          key={tab.key}\n          value={tab.key}\n          label={tab.label}\n          disableRipple\n        />\n      ))}\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;YAC9D,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}
+{"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n  key: K\n  label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n  tabs: HeaderTab<K>[]\n  value: K\n  onChange: (key: K) => void\n}\n\n/**\n * Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n  tabs,\n  value,\n  onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n  const { setFieldValue } = useFieldActions()\n\n  const handleChange = (_: React.SyntheticEvent, key: K) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    onChange(key)\n  }\n\n  return (\n    <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n      {tabs.map((tab) => (\n        <NavigationTab\n          key={tab.key}\n          value={tab.key}\n          label={tab.label}\n          disableRipple\n        />\n      ))}\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;EAC9D,UAAA,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n  backButtonRoutes,\n  navigationRoutes,\n  navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n  const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n  const navigationTabsCount = useNavigationTabsStore(\n    (state) => state.tabs.length\n  )\n  const { account } = useAccount()\n  const [element, title] = useHeaderStore((state) => [\n    state.element,\n    state.title,\n  ])\n  const { pathname } = useLocation()\n  const cleanedPathname = pathname.endsWith('/')\n    ? pathname.slice(0, -1)\n    : pathname\n  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n  const hasPath = navigationRoutesValues.includes(path)\n\n  // The store resolves which tabs to show (split Swap/Bridge or configured\n  // navigation tabs); the header just reflects whether there are any.\n  const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n  return (\n    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n      {backButtonRoutes.includes(path) ? <BackButton /> : null}\n      {showHeaderTabs ? (\n        <Box sx={{ flex: 1, marginRight: 1 }}>\n          <HeaderNavigationTabs />\n        </Box>\n      ) : (\n        <Typography\n          align={hasPath ? 'center' : 'left'}\n          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n          sx={{\n            fontSize: hasPath ? 18 : 24,\n            fontWeight: '700',\n            flex: 1,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n      {pathname === navigationRoutes.home ? (\n        <HeaderControlsContainer>\n          {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n          <SettingsButton />\n          {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n            <CloseDrawerButton header=\"navigation\" />\n          ) : null}\n        </HeaderControlsContainer>\n      ) : (\n        element || (\n          <Box\n            sx={{\n              width: 28,\n              height: 40,\n            }}\n          />\n        )\n      )}\n    </HeaderAppBar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;YAApE;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;cACjC,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}
+{"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n  backButtonRoutes,\n  navigationRoutes,\n  navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n  const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n  const navigationTabsCount = useNavigationTabsStore(\n    (state) => state.tabs.length\n  )\n  const { account } = useAccount()\n  const [element, title] = useHeaderStore((state) => [\n    state.element,\n    state.title,\n  ])\n  const { pathname } = useLocation()\n  const cleanedPathname = pathname.endsWith('/')\n    ? pathname.slice(0, -1)\n    : pathname\n  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n  const hasPath = navigationRoutesValues.includes(path)\n\n  // The store resolves which tabs to show (split Swap/Bridge or configured\n  // navigation tabs); the header just reflects whether there are any.\n  const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n  return (\n    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n      {backButtonRoutes.includes(path) ? <BackButton /> : null}\n      {showHeaderTabs ? (\n        <Box sx={{ flex: 1, marginRight: 1 }}>\n          <HeaderNavigationTabs />\n        </Box>\n      ) : (\n        <Typography\n          align={hasPath ? 'center' : 'left'}\n          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n          sx={{\n            fontSize: hasPath ? 18 : 24,\n            fontWeight: '700',\n            flex: 1,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n      {pathname === navigationRoutes.home ? (\n        <HeaderControlsContainer>\n          {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n          <SettingsButton />\n          {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n            <CloseDrawerButton header=\"navigation\" />\n          ) : null}\n        </HeaderControlsContainer>\n      ) : (\n        element || (\n          <Box\n            sx={{\n              width: 28,\n              height: 40,\n            }}\n          />\n        )\n      )}\n    </HeaderAppBar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;EAApE,UAAA;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;IACjC,UAAA,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}

package/dist/esm/components/Header/SettingsButton.js

@@ -12,8 +12,9 @@ const SettingsButton = () => {
 	const navigate = useNavigate();
 	const { isCustomRouteSettings, isRouteSettingsWithWarnings } = useSettingMonitor();
 	const variant = isRouteSettingsWithWarnings ? "warning" : isCustomRouteSettings ? "info" : void 0;
+	const tooltipMessage = variant ? t("tooltip.settingsModified") : t("header.settings");
 	return /* @__PURE__ */ jsx(Tooltip, {
-		title: variant ? t("tooltip.settingsModified") : t("header.settings"),
+		title: tooltipMessage,
 		children: /* @__PURE__ */ jsx(SettingsIconButton, {
 			size: "medium",
 			onClick: () => navigate({ to: navigationRoutes.settings }),

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n  SettingsIconBadge,\n  SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n\n  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n    useSettingMonitor()\n\n  const variant = isRouteSettingsWithWarnings\n    ? 'warning'\n    : isCustomRouteSettings\n      ? 'info'\n      : undefined\n\n  const tooltipMessage = variant\n    ? t('tooltip.settingsModified')\n    : t('header.settings')\n\n  return (\n    <Tooltip title={tooltipMessage}>\n      <SettingsIconButton\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.settings })}\n        variant={variant}\n      >\n        {variant ? (\n          <SettingsIconBadge variant=\"dot\" color={variant}>\n            <Settings />\n          </SettingsIconBadge>\n        ) : (\n          <Settings />\n        )}\n      </SettingsIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;YAInB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}
+{"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n  SettingsIconBadge,\n  SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n\n  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n    useSettingMonitor()\n\n  const variant = isRouteSettingsWithWarnings\n    ? 'warning'\n    : isCustomRouteSettings\n      ? 'info'\n      : undefined\n\n  const tooltipMessage = variant\n    ? t('tooltip.settingsModified')\n    : t('header.settings')\n\n  return (\n    <Tooltip title={tooltipMessage}>\n      <SettingsIconButton\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.settings })}\n        variant={variant}\n      >\n        {variant ? (\n          <SettingsIconBadge variant=\"dot\" color={variant}>\n            <Settings />\n          </SettingsIconBadge>\n        ) : (\n          <Settings />\n        )}\n      </SettingsIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAEN,MAAM,iBAAiB,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;CAEvB,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;GAER,UAAA,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;IACtC,UAAA,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}

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 { 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?.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?.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 { 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?.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?.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/Header/WalletMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n  onClose,\n}: {\n  onClose: () => void\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { getChainById } = useAvailableChains()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async () => {\n    openWalletMenu()\n    onClose()\n  }\n  const { getAddressLink } = useExplorer()\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {accounts.map((account) => {\n          const chain = getChainById(account.chainId)\n          const walletAddress = shortenAddress(account.address)\n          const handleCopyAddress = async () => {\n            await navigator.clipboard.writeText(account.address ?? '')\n            onClose()\n          }\n\n          return (\n            <MenuItem key={account.address} disableTouchRipple>\n              <Box\n                sx={{\n                  flex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                {chain?.logoURI ? (\n                  <Badge\n                    overlap=\"circular\"\n                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n                    badgeContent={\n                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n                        {chain?.name[0]}\n                      </SmallAvatar>\n                    }\n                    sx={{ marginRight: 1.5 }}\n                  >\n                    <AvatarMasked\n                      src={getConnectorIcon(account.connector)}\n                      alt={account.connector?.name}\n                    >\n                      {account.connector?.name[0]}\n                    </AvatarMasked>\n                  </Badge>\n                ) : (\n                  <Avatar\n                    src={getConnectorIcon(account.connector)}\n                    alt={account.connector?.name}\n                    sx={{\n                      marginRight: 1.5,\n                    }}\n                  >\n                    {account.connector?.name[0]}\n                  </Avatar>\n                )}\n                {walletAddress}\n              </Box>\n              <Box\n                sx={{\n                  ml: 2,\n                }}\n              >\n                <IconButton size=\"medium\" onClick={handleCopyAddress}>\n                  <ContentCopyRounded />\n                </IconButton>\n                <IconButton\n                  size=\"medium\"\n                  component=\"a\"\n                  onClick={onClose}\n                  href={\n                    account.address\n                      ? getAddressLink(account.address, chain)\n                      : undefined\n                  }\n                  target=\"_blank\"\n                >\n                  <OpenInNewRounded />\n                </IconButton>\n                <DisconnectIconButton account={account} />\n              </Box>\n            </MenuItem>\n          )\n        })}\n      </Box>\n      <Button\n        onClick={connect}\n        fullWidth\n        startIcon={<PowerSettingsNewRounded />}\n        sx={{\n          marginTop: 1,\n        }}\n      >\n        {t('button.connectAnotherWallet')}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;YAEC,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;cAAhC,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;eALF,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;iBAC3C,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;gBAEvB,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;iBAEvB,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;gBAEC,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;QACL,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;eAHF;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;iBACjC,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;iBAEP,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;MACG;MA9DK,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;YAEC,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}
+{"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n  onClose,\n}: {\n  onClose: () => void\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { getChainById } = useAvailableChains()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async () => {\n    openWalletMenu()\n    onClose()\n  }\n  const { getAddressLink } = useExplorer()\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {accounts.map((account) => {\n          const chain = getChainById(account.chainId)\n          const walletAddress = shortenAddress(account.address)\n          const handleCopyAddress = async () => {\n            await navigator.clipboard.writeText(account.address ?? '')\n            onClose()\n          }\n\n          return (\n            <MenuItem key={account.address} disableTouchRipple>\n              <Box\n                sx={{\n                  flex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                {chain?.logoURI ? (\n                  <Badge\n                    overlap=\"circular\"\n                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n                    badgeContent={\n                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n                        {chain?.name[0]}\n                      </SmallAvatar>\n                    }\n                    sx={{ marginRight: 1.5 }}\n                  >\n                    <AvatarMasked\n                      src={getConnectorIcon(account.connector)}\n                      alt={account.connector?.name}\n                    >\n                      {account.connector?.name[0]}\n                    </AvatarMasked>\n                  </Badge>\n                ) : (\n                  <Avatar\n                    src={getConnectorIcon(account.connector)}\n                    alt={account.connector?.name}\n                    sx={{\n                      marginRight: 1.5,\n                    }}\n                  >\n                    {account.connector?.name[0]}\n                  </Avatar>\n                )}\n                {walletAddress}\n              </Box>\n              <Box\n                sx={{\n                  ml: 2,\n                }}\n              >\n                <IconButton size=\"medium\" onClick={handleCopyAddress}>\n                  <ContentCopyRounded />\n                </IconButton>\n                <IconButton\n                  size=\"medium\"\n                  component=\"a\"\n                  onClick={onClose}\n                  href={\n                    account.address\n                      ? getAddressLink(account.address, chain)\n                      : undefined\n                  }\n                  target=\"_blank\"\n                >\n                  <OpenInNewRounded />\n                </IconButton>\n                <DisconnectIconButton account={account} />\n              </Box>\n            </MenuItem>\n          )\n        })}\n      </Box>\n      <Button\n        onClick={connect}\n        fullWidth\n        startIcon={<PowerSettingsNewRounded />}\n        sx={{\n          marginTop: 1,\n        }}\n      >\n        {t('button.connectAnotherWallet')}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;EAEC,UAAA,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;IAAhC,UAAA,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;KALF,UAAA,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;OAC3C,UAAA,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;MAEvB,UAAA,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;OAEvB,UAAA,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;MAEC,UAAA,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;IACL,CAAA,GAAA,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;KAHF,UAAA;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;OACjC,UAAA,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;OAEP,UAAA,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;IACG,CAAA,CAAA;GA9DK,GAAA,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;EAEC,UAAA,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/esm/components/IconCircle/IconCircle.js

@@ -4,7 +4,8 @@ import { useTheme } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/IconCircle/IconCircle.tsx
 const IconCircle = ({ status, size = 90, ...rest }) => {
-	const colorConfig = getStatusColor(status, useTheme());
+	const theme = useTheme();
+	const colorConfig = getStatusColor(status, theme);
 	const Icon = statusIcons[status];
 	return /* @__PURE__ */ jsx(IconCircleRoot, {
 		colorConfig,

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

@@ -1 +1 @@
-{"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n  getStatusColor,\n  IconCircleRoot,\n  iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n  status: StatusIcon\n  size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n  status,\n  size = iconCircleSize,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const colorConfig = getStatusColor(status, theme)\n  const Icon = statusIcons[status]\n\n  return (\n    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n      <Icon />\n    </IconCircleRoot>\n  )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,SACiC,CAAC;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}
+{"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n  getStatusColor,\n  IconCircleRoot,\n  iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n  status: StatusIcon\n  size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n  status,\n  size = iconCircleSize,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const colorConfig = getStatusColor(status, theme)\n  const Icon = statusIcons[status]\n\n  return (\n    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n      <Icon />\n    </IconCircleRoot>\n  )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,cAAc,eAAe,QAAQ,KAAK;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;EAC9D,UAAA,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}

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

@@ -1 +1 @@
-{"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n  Container,\n  ExpiryValue,\n  SettingItemButton,\n  SettingItemTitle,\n  SettingItemValue,\n  SettingsRow,\n  ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const [validUntil, partiallyFillable] = useFieldValues(\n    'validUntil',\n    'partiallyFillable'\n  )\n  const { setFieldValue } = useFieldActions()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = (): void => {\n    setAnchorEl(null)\n  }\n\n  const handleSelect = (duration: number): void => {\n    setFieldValue('validUntil', duration)\n    setAnchorEl(null)\n  }\n\n  const handlePartiallyFillableChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ): void => {\n    setFieldValue('partiallyFillable', event.target.checked)\n  }\n\n  return (\n    <Container {...props}>\n      <Card>\n        <SettingItemButton\n          onClick={handleOpen}\n          disableRipple\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n          <ExpiryValue>\n            <SettingItemValue>\n              {formatDuration(validUntil, i18n.language, 'long')}\n            </SettingItemValue>\n            <KeyboardArrowDownIcon\n              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n            />\n          </ExpiryValue>\n        </SettingItemButton>\n      </Card>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              border: `1px solid ${theme.vars.palette.grey[300]}`,\n              boxShadow: 'none',\n              ...theme.applyStyles('dark', {\n                borderColor: theme.vars.palette.grey[800],\n              }),\n            }),\n          },\n        }}\n      >\n        {DURATIONS.map((duration) => (\n          <MenuItem\n            key={duration}\n            onClick={() => handleSelect(duration)}\n            sx={(theme) => ({\n              justifyContent: 'space-between',\n              gap: 4,\n              fontSize: 14,\n              fontWeight: 700,\n              lineHeight: '18px',\n              color: theme.vars.palette.text.primary,\n            })}\n          >\n            {formatDuration(duration, i18n.language, 'long')}\n            {duration === validUntil ? (\n              <Check color=\"primary\" fontSize=\"small\" />\n            ) : null}\n          </MenuItem>\n        ))}\n      </Menu>\n      <Card>\n        <SettingsRow>\n          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n          <Switch\n            checked={partiallyFillable}\n            onChange={handlePartiallyFillableChange}\n            aria-label={t('limitOrder.partiallyFillable')}\n          />\n        </SettingsRow>\n      </Card>\n    </Container>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;YAAf;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;cAJjB,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;MACf,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;cAEC,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;eAVF,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;OAfH,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}
+{"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n  Container,\n  ExpiryValue,\n  SettingItemButton,\n  SettingItemTitle,\n  SettingItemValue,\n  SettingsRow,\n  ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const [validUntil, partiallyFillable] = useFieldValues(\n    'validUntil',\n    'partiallyFillable'\n  )\n  const { setFieldValue } = useFieldActions()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = (): void => {\n    setAnchorEl(null)\n  }\n\n  const handleSelect = (duration: number): void => {\n    setFieldValue('validUntil', duration)\n    setAnchorEl(null)\n  }\n\n  const handlePartiallyFillableChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ): void => {\n    setFieldValue('partiallyFillable', event.target.checked)\n  }\n\n  return (\n    <Container {...props}>\n      <Card>\n        <SettingItemButton\n          onClick={handleOpen}\n          disableRipple\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n          <ExpiryValue>\n            <SettingItemValue>\n              {formatDuration(validUntil, i18n.language, 'long')}\n            </SettingItemValue>\n            <KeyboardArrowDownIcon\n              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n            />\n          </ExpiryValue>\n        </SettingItemButton>\n      </Card>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              border: `1px solid ${theme.vars.palette.grey[300]}`,\n              boxShadow: 'none',\n              ...theme.applyStyles('dark', {\n                borderColor: theme.vars.palette.grey[800],\n              }),\n            }),\n          },\n        }}\n      >\n        {DURATIONS.map((duration) => (\n          <MenuItem\n            key={duration}\n            onClick={() => handleSelect(duration)}\n            sx={(theme) => ({\n              justifyContent: 'space-between',\n              gap: 4,\n              fontSize: 14,\n              fontWeight: 700,\n              lineHeight: '18px',\n              color: theme.vars.palette.text.primary,\n            })}\n          >\n            {formatDuration(duration, i18n.language, 'long')}\n            {duration === validUntil ? (\n              <Check color=\"primary\" fontSize=\"small\" />\n            ) : null}\n          </MenuItem>\n        ))}\n      </Menu>\n      <Card>\n        <SettingsRow>\n          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n          <Switch\n            checked={partiallyFillable}\n            onChange={handlePartiallyFillableChange}\n            aria-label={t('limitOrder.partiallyFillable')}\n          />\n        </SettingsRow>\n      </Card>\n    </Container>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;EAAf,UAAA;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;IAJjB,UAAA,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;GACf,CAAA,EAAA,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;IAEC,UAAA,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;KAVF,UAAA,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;IAfH,GAAA,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}

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

@@ -1 +1 @@
-{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;YAAtD,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;aACtD,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;aAChE,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;aAdF,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;IAER;;AAEnB"}
+{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;EAAtD,UAAA,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;GACtD,UAAA,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;GAChE,UAAA,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;GAdF,UAAA,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;EAER,CAAA,CAAA;;AAEnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"AccountDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.accountDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,0BAA8C,EAAE,GAAG,YAAY;CAC1E,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,qCAAqC;EAC9B,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"AccountDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.accountDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,0BAA8C,EAAE,GAAG,YAAY;CAC1E,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;GAEC,UAAA,EAAE,qCAAqC;EAC9B,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"AccountNotDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountNotDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  return (\n    <AlertMessage\n      title={\n        <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n          {t('warning.message.accountNotDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAAiD,UAAU;CACtE,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,OAAO,eAAe;aACrD,EAAE,2CAA2C;EACpC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"AccountNotDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountNotDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  return (\n    <AlertMessage\n      title={\n        <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n          {t('warning.message.accountNotDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAAiD,UAAU;CACtE,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,OAAO,eAAe;GACrD,UAAA,EAAE,2CAA2C;EACpC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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      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,SAAS;YAFnD,CAIG,MACA,KACoB;KACtB,QACe"}
+{"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;CAA1C,UAAA,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,SAAS;EAFnD,UAAA,CAIG,MACA,KACoB;CACtB,CAAA,GAAA,QACe"}

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

@@ -1 +1 @@
-{"version":3,"file":"FundsSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/FundsSufficiencyMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.insufficientFunds')}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,2BAA+C,UAAU;CACpE,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,mCAAmC;EAC5B,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"FundsSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/FundsSufficiencyMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.insufficientFunds')}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,2BAA+C,UAAU;CACpE,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;GAEC,UAAA,EAAE,mCAAmC;EAC5B,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"GasRefuelMessage.js","names":[],"sources":["../../../../src/components/Messages/GasRefuelMessage.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Collapse, Typography } from '@mui/material'\nimport type { ChangeEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useGasRefuel } from '../../hooks/useGasRefuel.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { AlertMessage } from './AlertMessage.js'\nimport { InfoMessageSwitch } from './GasRefuelMessage.style.js'\n\nexport const GasRefuelMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  const { setValue } = useSettingsActions()\n  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])\n\n  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()\n\n  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {\n    setValue('enabledAutoRefuel', checked)\n  }\n\n  const showGasRefuelMessage = chain && enabled && !isRefuelLoading\n\n  return (\n    <Collapse\n      timeout={225}\n      in={showGasRefuelMessage}\n      unmountOnExit\n      mountOnEnter\n    >\n      <AlertMessage\n        icon={<EvStation />}\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexGrow: 1,\n            }}\n          >\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontWeight: 700,\n              }}\n            >\n              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}\n            </Typography>\n            <InfoMessageSwitch\n              checked={enabledAutoRefuel}\n              onChange={onChange}\n            />\n          </Box>\n        }\n        {...props}\n      >\n        <Collapse\n          timeout={225}\n          in={enabledAutoRefuel}\n          unmountOnExit\n          mountOnEnter\n        >\n          <Typography\n            variant=\"body2\"\n            sx={{\n              px: 2,\n              pt: 1,\n            }}\n          >\n            {t('info.message.autoRefuel', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        </Collapse>\n      </AlertMessage>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBAAwC,UAAU;CAC7D,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,YAAY,CAAC,mBAAmB,CAAC;CAE/D,MAAM,EAAE,SAAS,OAAO,WAAW,oBAAoB,aAAa;CAEpE,MAAM,YAAY,GAAkC,YAAqB;EACvE,SAAS,qBAAqB,OAAO;CACvC;CAIA,OACE,oBAAC,UAAD;EACE,SAAS;EACT,IALyB,SAAS,WAAW,CAAC;EAM9C,eAAA;EACA,cAAA;YAEA,oBAAC,cAAD;GACE,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,UAAU;IACZ;cANF,CAQE,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI,EACF,YAAY,IACd;eAEC,EAAE,yBAAyB,EAAE,WAAW,OAAO,QAAQ,GAAG,CAAC;IAClD,CAAA,GACZ,oBAAC,mBAAD;KACE,SAAS;KACC;IACX,CAAA,CACE;;GAEP,GAAI;aAEJ,oBAAC,UAAD;IACE,SAAS;IACT,IAAI;IACJ,eAAA;IACA,cAAA;cAEA,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;MACF,IAAI;MACJ,IAAI;KACN;eAEC,EAAE,2BAA2B,EAC5B,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;GACJ,CAAA;EACE,CAAA;CACN,CAAA;AAEd"}
+{"version":3,"file":"GasRefuelMessage.js","names":[],"sources":["../../../../src/components/Messages/GasRefuelMessage.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Collapse, Typography } from '@mui/material'\nimport type { ChangeEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useGasRefuel } from '../../hooks/useGasRefuel.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { AlertMessage } from './AlertMessage.js'\nimport { InfoMessageSwitch } from './GasRefuelMessage.style.js'\n\nexport const GasRefuelMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  const { setValue } = useSettingsActions()\n  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])\n\n  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()\n\n  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {\n    setValue('enabledAutoRefuel', checked)\n  }\n\n  const showGasRefuelMessage = chain && enabled && !isRefuelLoading\n\n  return (\n    <Collapse\n      timeout={225}\n      in={showGasRefuelMessage}\n      unmountOnExit\n      mountOnEnter\n    >\n      <AlertMessage\n        icon={<EvStation />}\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexGrow: 1,\n            }}\n          >\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontWeight: 700,\n              }}\n            >\n              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}\n            </Typography>\n            <InfoMessageSwitch\n              checked={enabledAutoRefuel}\n              onChange={onChange}\n            />\n          </Box>\n        }\n        {...props}\n      >\n        <Collapse\n          timeout={225}\n          in={enabledAutoRefuel}\n          unmountOnExit\n          mountOnEnter\n        >\n          <Typography\n            variant=\"body2\"\n            sx={{\n              px: 2,\n              pt: 1,\n            }}\n          >\n            {t('info.message.autoRefuel', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        </Collapse>\n      </AlertMessage>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBAAwC,UAAU;CAC7D,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,YAAY,CAAC,mBAAmB,CAAC;CAE/D,MAAM,EAAE,SAAS,OAAO,WAAW,oBAAoB,aAAa;CAEpE,MAAM,YAAY,GAAkC,YAAqB;EACvE,SAAS,qBAAqB,OAAO;CACvC;CAIA,OACE,oBAAC,UAAD;EACE,SAAS;EACT,IALyB,SAAS,WAAW,CAAC;EAM9C,eAAA;EACA,cAAA;EAEA,UAAA,oBAAC,cAAD;GACE,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,UAAU;IACZ;IANF,UAAA,CAQE,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI,EACF,YAAY,IACd;KAEC,UAAA,EAAE,yBAAyB,EAAE,WAAW,OAAO,QAAQ,GAAG,CAAC;IAClD,CAAA,GACZ,oBAAC,mBAAD;KACE,SAAS;KACC;IACX,CAAA,CACE;;GAEP,GAAI;GAEJ,UAAA,oBAAC,UAAD;IACE,SAAS;IACT,IAAI;IACJ,eAAA;IACA,cAAA;IAEA,UAAA,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;MACF,IAAI;MACJ,IAAI;KACN;KAEC,UAAA,EAAE,2BAA2B,EAC5B,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;GACJ,CAAA;EACE,CAAA;CACN,CAAA;AAEd"}

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

@@ -1 +1 @@
-{"version":3,"file":"GasSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/GasSufficiencyMessage.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport EvStation from '@mui/icons-material/EvStation'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport type { GasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface GasSufficiencyMessageProps extends BoxProps {\n  insufficientGas?: GasSufficiency[]\n}\n\nexport const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({\n  insufficientGas,\n  ...props\n}) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<EvStation />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.insufficientGas')}\n        </Typography>\n      }\n      {...props}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          px: 2,\n          pt: 1,\n        }}\n      >\n        {t('warning.message.insufficientGas')}\n      </Typography>\n      {insufficientGas?.map((item, index) => (\n        <Typography\n          key={index}\n          variant=\"body2\"\n          sx={{\n            px: 2,\n            pt: 0.5,\n          }}\n        >\n          {t('main.tokenOnChainAmount', {\n            amount: formatUnits(\n              item.insufficientAmount ?? 0n,\n              item.token.decimals\n            ),\n            tokenSymbol: item.token.symbol,\n            chainName: item.chain?.name,\n          })}\n        </Typography>\n      ))}\n    </AlertMessage>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAa,yBAA+D,EAC1E,iBACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,YAAY,IACd;aAEC,EAAE,+BAA+B;EACxB,CAAA;EAEd,GAAI;YAbN,CAeE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,iCAAiC;EAC1B,CAAA,GACX,iBAAiB,KAAK,MAAM,UAC3B,oBAAC,YAAD;GAEE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,2BAA2B;IAC5B,QAAQ,YACN,KAAK,sBAAsB,IAC3B,KAAK,MAAM,QACb;IACA,aAAa,KAAK,MAAM;IACxB,WAAW,KAAK,OAAO;GACzB,CAAC;EACS,GAfL,KAeK,CACb,CACW;;AAElB"}
+{"version":3,"file":"GasSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/GasSufficiencyMessage.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport EvStation from '@mui/icons-material/EvStation'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport type { GasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface GasSufficiencyMessageProps extends BoxProps {\n  insufficientGas?: GasSufficiency[]\n}\n\nexport const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({\n  insufficientGas,\n  ...props\n}) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<EvStation />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.insufficientGas')}\n        </Typography>\n      }\n      {...props}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          px: 2,\n          pt: 1,\n        }}\n      >\n        {t('warning.message.insufficientGas')}\n      </Typography>\n      {insufficientGas?.map((item, index) => (\n        <Typography\n          key={index}\n          variant=\"body2\"\n          sx={{\n            px: 2,\n            pt: 0.5,\n          }}\n        >\n          {t('main.tokenOnChainAmount', {\n            amount: formatUnits(\n              item.insufficientAmount ?? 0n,\n              item.token.decimals\n            ),\n            tokenSymbol: item.token.symbol,\n            chainName: item.chain?.name,\n          })}\n        </Typography>\n      ))}\n    </AlertMessage>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAa,yBAA+D,EAC1E,iBACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,YAAY,IACd;GAEC,UAAA,EAAE,+BAA+B;EACxB,CAAA;EAEd,GAAI;EAbN,UAAA,CAeE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;GAEC,UAAA,EAAE,iCAAiC;EAC1B,CAAA,GACX,iBAAiB,KAAK,MAAM,UAC3B,oBAAC,YAAD;GAEE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;GAEC,UAAA,EAAE,2BAA2B;IAC5B,QAAQ,YACN,KAAK,sBAAsB,IAC3B,KAAK,MAAM,QACb;IACA,aAAa,KAAK,MAAM;IACxB,WAAW,KAAK,OAAO;GACzB,CAAC;EACS,GAfL,KAeK,CACb,CACW;;AAElB"}

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

@@ -1 +1 @@
-{"version":3,"file":"MinFromAmountUSDMessage.js","names":[],"sources":["../../../../src/components/Messages/MinFromAmountUSDMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\ntype MinFromAmountUSDMessageProps = BoxProps & {\n  minFromAmountUSD: number\n}\n\nexport const MinFromAmountUSDMessage: React.FC<\n  MinFromAmountUSDMessageProps\n> = ({ minFromAmountUSD, ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.minFromAmountUSD', {\n            amount: minFromAmountUSD,\n            minimumFractionDigits: 0,\n          })}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AASA,MAAa,2BAER,EAAE,kBAAkB,GAAG,YAAY;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,oCAAoC;IACrC,QAAQ;IACR,uBAAuB;GACzB,CAAC;EACS,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"MinFromAmountUSDMessage.js","names":[],"sources":["../../../../src/components/Messages/MinFromAmountUSDMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\ntype MinFromAmountUSDMessageProps = BoxProps & {\n  minFromAmountUSD: number\n}\n\nexport const MinFromAmountUSDMessage: React.FC<\n  MinFromAmountUSDMessageProps\n> = ({ minFromAmountUSD, ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.minFromAmountUSD', {\n            amount: minFromAmountUSD,\n            minimumFractionDigits: 0,\n          })}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AASA,MAAa,2BAER,EAAE,kBAAkB,GAAG,YAAY;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;GAEC,UAAA,EAAE,oCAAoC;IACrC,QAAQ;IACR,uBAAuB;GACzB,CAAC;EACS,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"MissingRouteRequiredAccountMessage.js","names":[],"sources":["../../../../src/components/Messages/MissingRouteRequiredAccountMessage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport Wallet from '@mui/icons-material/Wallet'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface MissingRouteRequiredAccountMessageProps extends BoxProps {\n  chain?: ExtendedChain\n  address?: string\n}\n\nexport const MissingRouteRequiredAccountMessage: React.FC<\n  MissingRouteRequiredAccountMessageProps\n> = ({ chain, address, ...props }) => {\n  const { t } = useTranslation()\n\n  if (!chain) {\n    return null\n  }\n\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.missingRouteRequiredAccount', {\n            chainName: chain.name,\n            address: address ? `(${shortenAddress(address)})` : '',\n          })}\n        </Typography>\n      }\n      icon={<Wallet />}\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,sCAER,EAAE,OAAO,SAAS,GAAG,YAAY;CACpC,MAAM,EAAE,MAAM,eAAe;CAE7B,IAAI,CAAC,OACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,4CAA4C;IAC7C,WAAW,MAAM;IACjB,SAAS,UAAU,IAAI,eAAe,OAAO,EAAE,KAAK;GACtD,CAAC;EACS,CAAA;EAEd,MAAM,oBAAC,QAAD,CAAS,CAAA;EACf,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"MissingRouteRequiredAccountMessage.js","names":[],"sources":["../../../../src/components/Messages/MissingRouteRequiredAccountMessage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport Wallet from '@mui/icons-material/Wallet'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface MissingRouteRequiredAccountMessageProps extends BoxProps {\n  chain?: ExtendedChain\n  address?: string\n}\n\nexport const MissingRouteRequiredAccountMessage: React.FC<\n  MissingRouteRequiredAccountMessageProps\n> = ({ chain, address, ...props }) => {\n  const { t } = useTranslation()\n\n  if (!chain) {\n    return null\n  }\n\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.missingRouteRequiredAccount', {\n            chainName: chain.name,\n            address: address ? `(${shortenAddress(address)})` : '',\n          })}\n        </Typography>\n      }\n      icon={<Wallet />}\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,sCAER,EAAE,OAAO,SAAS,GAAG,YAAY;CACpC,MAAM,EAAE,MAAM,eAAe;CAE7B,IAAI,CAAC,OACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;GAEC,UAAA,EAAE,4CAA4C;IAC7C,WAAW,MAAM;IACjB,SAAS,UAAU,IAAI,eAAe,OAAO,EAAE,KAAK;GACtD,CAAC;EACS,CAAA;EAEd,MAAM,oBAAC,QAAD,CAAS,CAAA;EACf,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,27 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Messages/UnsupportedToAddressMessage.tsx
+const UnsupportedToAddressMessage = ({ ...props }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				px: 1,
+				color: "text.primary"
+			},
+			children: t("info.message.unsupportedToAddressMessage")
+		}),
+		icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+		severity: "warning",
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { UnsupportedToAddressMessage };
+
+//# sourceMappingURL=UnsupportedToAddressMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedToAddressMessage.js","names":[],"sources":["../../../../src/components/Messages/UnsupportedToAddressMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const UnsupportedToAddressMessage: React.FC<BoxProps> = ({\n  ...props\n}) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      title={\n        <Typography variant=\"body2\" sx={{ px: 1, color: 'text.primary' }}>\n          {t('info.message.unsupportedToAddressMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,+BAAmD,EAC9D,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI;IAAE,IAAI;IAAG,OAAO;GAAe;GAC5D,UAAA,EAAE,0CAA0C;EACnC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/components/Messages/WarningMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WarningMessages.d.ts","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"mappings":";;;KAWK,uBAAuB;EAC1B,QAAQ;EACR;;cAGW,iBAAiB,MAAM,GAAG"}
+{"version":3,"file":"WarningMessages.d.ts","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"mappings":";;;KAYK,uBAAuB;EAC1B,QAAQ;EACR;;cAGW,iBAAiB,MAAM,GAAG"}