@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/ExecutionStatusCard/StaggeredRevealTypography.js

@@ -0,0 +1,47 @@
+import { Fragment } from "react";
+import { Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+//#region src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx
+const WORD_DURATION = .3;
+const WORD_BOUNCE = 0;
+const WORD_ENTER_Y = 4;
+/**
+* Reveals text with a word-level stagger animation on mount.
+* Callers should remount via `key={text}` when the text changes.
+*/
+function StaggeredRevealTypography({ text, delay, ...props }) {
+	if (useReducedMotion()) return /* @__PURE__ */ jsx(Typography, {
+		...props,
+		children: text
+	});
+	const words = text.split(" ");
+	const perWordDuration = words.length > 1 ? WORD_DURATION * .6 : WORD_DURATION;
+	const staggerInterval = (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1);
+	return /* @__PURE__ */ jsx(Typography, {
+		...props,
+		children: words.map((word, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && " ", /* @__PURE__ */ jsx(m.span, {
+			initial: {
+				opacity: 0,
+				y: WORD_ENTER_Y
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			transition: {
+				type: "spring",
+				visualDuration: perWordDuration,
+				bounce: WORD_BOUNCE,
+				delay: (delay ?? 0) + i * staggerInterval
+			},
+			style: { display: "inline-block" },
+			children: word
+		})] }, i))
+	});
+}
+//#endregion
+export { StaggeredRevealTypography };
+
+//# sourceMappingURL=StaggeredRevealTypography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StaggeredRevealTypography.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material'\nimport { useReducedMotion } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport { Fragment } from 'react'\n\nconst WORD_DURATION = 0.3\nconst WORD_BOUNCE = 0\nconst WORD_ENTER_Y = 4\n\nexport type StaggeredRevealTypographyProps = {\n  text: string\n  /** Seconds before the first word begins animating. */\n  delay?: number\n} & Omit<TypographyProps, 'children'>\n\n/**\n * Reveals text with a word-level stagger animation on mount.\n * Callers should remount via `key={text}` when the text changes.\n */\nexport function StaggeredRevealTypography({\n  text,\n  delay,\n  ...props\n}: StaggeredRevealTypographyProps): JSX.Element {\n  const reduceMotion = useReducedMotion()\n\n  if (reduceMotion) {\n    return <Typography {...props}>{text}</Typography>\n  }\n\n  const words = text.split(' ')\n  const perWordDuration = words.length > 1 ? WORD_DURATION * 0.6 : WORD_DURATION\n  const staggerInterval =\n    (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1)\n\n  return (\n    <Typography {...props}>\n      {words.map((word, i) => (\n        <Fragment key={i}>\n          {i > 0 && ' '}\n          <m.span\n            initial={{ opacity: 0, y: WORD_ENTER_Y }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{\n              type: 'spring',\n              visualDuration: perWordDuration,\n              bounce: WORD_BOUNCE,\n              delay: (delay ?? 0) + i * staggerInterval,\n            }}\n            style={{ display: 'inline-block' }}\n          >\n            {word}\n          </m.span>\n        </Fragment>\n      ))}\n    </Typography>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;AAYrB,SAAgB,0BAA0B,EACxC,MACA,OACA,GAAG,SAC2C;CAG9C,IAFqB,iBAEN,GACb,OAAO,oBAAC,YAAD;EAAY,GAAI;YAAQ;CAAiB,CAAA;CAGlD,MAAM,QAAQ,KAAK,MAAM,GAAG;CAC5B,MAAM,kBAAkB,MAAM,SAAS,IAAI,gBAAgB,KAAM;CACjE,MAAM,mBACH,gBAAgB,mBAAmB,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;CAElE,OACE,oBAAC,YAAD;EAAY,GAAI;YACb,MAAM,KAAK,MAAM,MAChB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,KACV,oBAAC,EAAE,MAAH;GACE,SAAS;IAAE,SAAS;IAAG,GAAG;GAAa;GACvC,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,YAAY;IACV,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,QAAQ,SAAS,KAAK,IAAI;GAC5B;GACA,OAAO,EAAE,SAAS,eAAe;aAEhC;EACK,CAAA,CACA,EAAA,GAfK,CAeL,CACX;CACS,CAAA;AAEhB"}

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

@@ -0,0 +1,122 @@
+import { IconCircle } from "../IconCircle/IconCircle.js";
+import { TimerRing } from "../Timer/StepStatusTimer.js";
+import { resolveExecutionIconKey } from "./iconKey.js";
+import { StatusIconContainer } from "./StatusIcon.style.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+//#region src/components/ExecutionStatusCard/StatusIcon.tsx
+const ICON_EXIT = {
+	duration: .08,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+const iconEnterConfig = {
+	success: {
+		initialScale: .6,
+		transition: {
+			type: "spring",
+			visualDuration: .3,
+			bounce: .18
+		}
+	},
+	warning: {
+		initialScale: .75,
+		transition: {
+			type: "spring",
+			visualDuration: .27,
+			bounce: .1
+		}
+	},
+	error: {
+		initialScale: .75,
+		transition: {
+			duration: .18,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	},
+	info: {
+		initialScale: .8,
+		transition: {
+			duration: .2,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	},
+	timer: {
+		initialScale: .85,
+		transition: {
+			duration: .22,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	}
+};
+const iconVariants = {
+	hidden: (key) => ({
+		opacity: 0,
+		scale: iconEnterConfig[key].initialScale
+	}),
+	visible: (key) => ({
+		opacity: 1,
+		scale: 1,
+		transition: iconEnterConfig[key].transition
+	}),
+	exit: {
+		opacity: 0,
+		scale: .8,
+		filter: "blur(4px)",
+		transition: {
+			duration: ICON_EXIT.duration,
+			ease: ICON_EXIT.ease
+		}
+	}
+};
+/**
+* The animated status icon. Each state animates in its own way; they all
+* animate out the same way.
+*/
+function StatusIcon({ route, status }) {
+	const iconKey = resolveExecutionIconKey(route, status);
+	const step = route.steps.at(-1);
+	return /* @__PURE__ */ jsx(StatusIconContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		initial: false,
+		children: /* @__PURE__ */ jsx(m.div, {
+			custom: iconKey,
+			variants: iconVariants,
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			style: {
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: iconKey === "timer" ? /* @__PURE__ */ jsx(TimerRing, { step }) : /* @__PURE__ */ jsx(IconCircle, { status: iconKey })
+		}, iconKey)
+	}) });
+}
+//#endregion
+export { StatusIcon };
+
+//# sourceMappingURL=StatusIcon.js.map

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

@@ -0,0 +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,KAAK;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,KAAK;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"}

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

@@ -0,0 +1,14 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/ExecutionStatusCard/StatusIcon.style.tsx
+const StatusIconContainer = styled(Box)({
+	position: "relative",
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	width: 90,
+	height: 90
+});
+//#endregion
+export { StatusIconContainer };
+
+//# sourceMappingURL=StatusIcon.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.style.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusIconContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)({\n    position: 'relative',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: iconCircleSize,\n    height: iconCircleSize,\n  })\n"],"mappings":";;AAIA,MAAa,sBACX,OAAO,GAAG,EAAE;CACV,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAA;CACA,QAAA;AACF,CAAC"}

package/dist/esm/components/ExecutionStatusCard/iconKey.js

@@ -0,0 +1,13 @@
+import { hasEnumFlag } from "../../utils/enum.js";
+//#region src/components/ExecutionStatusCard/iconKey.ts
+/** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */
+function resolveExecutionIconKey(route, status) {
+	if (hasEnumFlag(status, 4)) return hasEnumFlag(status, 16) || hasEnumFlag(status, 32) ? "warning" : "success";
+	if (hasEnumFlag(status, 8)) return "error";
+	if ((route.steps.find((step) => step.execution?.status === "PENDING" || step.execution?.status === "ACTION_REQUIRED") ?? route.steps.at(-1))?.execution?.status === "ACTION_REQUIRED") return "info";
+	return "timer";
+}
+//#endregion
+export { resolveExecutionIconKey };
+
+//# sourceMappingURL=iconKey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iconKey.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/iconKey.ts"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\n\n/** Visual state of the execution status indicator. */\nexport type ExecutionIconKey =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info'\n  | 'timer'\n\n/** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */\nexport function resolveExecutionIconKey(\n  route: RouteExtended,\n  status: RouteExecutionStatus\n): ExecutionIconKey {\n  if (hasEnumFlag(status, RouteExecutionStatus.Done)) {\n    return hasEnumFlag(status, RouteExecutionStatus.Partial) ||\n      hasEnumFlag(status, RouteExecutionStatus.Refunded)\n      ? 'warning'\n      : 'success'\n  }\n  if (hasEnumFlag(status, RouteExecutionStatus.Failed)) {\n    return 'error'\n  }\n  const activeStep =\n    route.steps.find(\n      (step) =>\n        step.execution?.status === 'PENDING' ||\n        step.execution?.status === 'ACTION_REQUIRED'\n    ) ?? route.steps.at(-1)\n  if (activeStep?.execution?.status === 'ACTION_REQUIRED') {\n    return 'info'\n  }\n  return 'timer'\n}\n"],"mappings":";;;AAaA,SAAgB,wBACd,OACA,QACkB;CAClB,IAAI,YAAY,QAAA,CAAiC,GAC/C,OAAO,YAAY,QAAA,EAAoC,KACrD,YAAY,QAAA,EAAqC,IAC/C,YACA;CAEN,IAAI,YAAY,QAAA,CAAmC,GACjD,OAAO;CAQT,KALE,MAAM,MAAM,MACT,SACC,KAAK,WAAW,WAAW,aAC3B,KAAK,WAAW,WAAW,iBAC/B,KAAK,MAAM,MAAM,GAAG,EAAE,IACR,WAAW,WAAW,mBACpC,OAAO;CAET,OAAO;AACT"}

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

@@ -0,0 +1,32 @@
+import "../../types/widget.js";
+import { useHasChainExpansion } from "../../hooks/useHasChainExpansion.js";
+import { ExpansionContainer } from "./Expansion.style.js";
+import { chainExpansionWidth } from "../Chains/ChainsExpanded.style.js";
+import { ChainsExpanded } from "../Chains/ChainsExpanded.js";
+import { routesExpansionWidth } from "../Routes/RoutesExpanded.style.js";
+import { RoutesExpanded } from "../Routes/RoutesExpanded.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Expansion/Expansion.tsx
+function Expansion() {
+	const [withChainExpansion, expansionType] = useHasChainExpansion();
+	const chainExpansionTypeRef = useRef(expansionType);
+	const [routesOpen, setRoutesOpen] = useState(false);
+	if (expansionType === "fromChain" || expansionType === "toChain") chainExpansionTypeRef.current = expansionType;
+	return /* @__PURE__ */ jsxs(ExpansionContainer, {
+		width: useMemo(() => {
+			return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
+		}, [routesOpen, withChainExpansion]),
+		children: [/* @__PURE__ */ jsx(RoutesExpanded, {
+			canOpen: expansionType === "routes",
+			setOpenExpansion: setRoutesOpen
+		}), /* @__PURE__ */ jsx(ChainsExpanded, {
+			formType: chainExpansionTypeRef.current === "fromChain" ? "from" : "to",
+			open: withChainExpansion
+		})]
+	});
+}
+//#endregion
+export { Expansion };
+
+//# sourceMappingURL=Expansion.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,40 @@
+import { Box, styled } from "@mui/material";
+const defaultStyle = {
+	opacity: 0,
+	whiteSpace: "nowrap",
+	transform: "translateX(-100%)",
+	display: "inline-block",
+	position: "absolute",
+	top: 0,
+	left: 0,
+	transition: `opacity 225ms cubic-bezier(0.4, 0, 0.2, 1), transform 225ms cubic-bezier(0.4, 0, 0.2, 1)`
+};
+const transitionStyles = {
+	entering: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	entered: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	exiting: {
+		opacity: 0,
+		transform: "translateX(-100%)"
+	},
+	exited: {
+		opacity: 0,
+		transform: "translateX(-100%)"
+	}
+};
+const ExpansionContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "width" })(({ width }) => ({
+	position: "relative",
+	display: "flex",
+	transition: `width 225ms cubic-bezier(0.4, 0, 0.2, 1)`,
+	width,
+	marginLeft: width ? "24px" : 0
+}));
+//#endregion
+export { ExpansionContainer, defaultStyle, transitionStyles };
+
+//# sourceMappingURL=Expansion.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expansion.style.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const animationDuration = 225\n\nexport const defaultStyle = {\n  opacity: 0,\n  whiteSpace: 'nowrap',\n  transform: 'translateX(-100%)',\n  display: 'inline-block',\n  position: 'absolute' as const,\n  top: 0,\n  left: 0,\n  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n}\n\nexport const transitionStyles = {\n  entering: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  entered: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  exiting: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n}\n\nexport const ExpansionContainer: React.FC<\n  React.ComponentProps<typeof Box> & { width: string | number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'width',\n})<{ width: string | number }>(({ width }) => ({\n  position: 'relative',\n  display: 'flex',\n  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n  width: width,\n  marginLeft: width ? '24px' : 0,\n}))\n"],"mappings":";AAKA,MAAa,eAAe;CAC1B,SAAS;CACT,YAAY;CACZ,WAAW;CACX,SAAS;CACT,UAAU;CACV,KAAK;CACL,MAAM;CACN,YAAY;AACd;AAEA,MAAa,mBAAmB;CAC9B,UAAU;EACR,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,QAAQ;EACN,SAAS;EACT,WAAW;CACb;AACF;AAEA,MAAa,qBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,QACxC,CAAC,GAA+B,EAAE,aAAa;CAC7C,UAAU;CACV,SAAS;CACT,YAAY;CACL;CACP,YAAY,QAAQ,SAAS;AAC/B,EAAE"}

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

@@ -0,0 +1,32 @@
+import { defaultStyle, transitionStyles } from "./Expansion.style.js";
+import { useRef } from "react";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { Transition } from "react-transition-group";
+//#region src/components/Expansion/ExpansionTransition.tsx
+function ExpansionTransition({ in: inProp, children, width, onExited }) {
+	const nodeRef = useRef(null);
+	return /* @__PURE__ */ jsx(Transition, {
+		nodeRef,
+		in: inProp,
+		timeout: 225,
+		onExited,
+		mountOnEnter: true,
+		unmountOnExit: true,
+		children: (state) => {
+			return /* @__PURE__ */ jsx(Box, {
+				ref: nodeRef,
+				style: {
+					...defaultStyle,
+					...transitionStyles[state],
+					width
+				},
+				children
+			});
+		}
+	});
+}
+//#endregion
+export { ExpansionTransition };
+
+//# sourceMappingURL=ExpansionTransition.js.map

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

@@ -0,0 +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"}

package/dist/esm/components/FeeBreakdownTooltip.js

@@ -0,0 +1,39 @@
+import { formatTokenAmount } from "../utils/format.js";
+import { Box, Tooltip, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/FeeBreakdownTooltip.tsx
+const FeeBreakdownTooltip = ({ gasCosts, feeCosts, gasless, children }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: /* @__PURE__ */ jsxs(Box, { children: [
+			gasless ? /* @__PURE__ */ jsx(Box, { children: t("tooltip.gasless") }) : null,
+			gasCosts?.length && !gasless ? /* @__PURE__ */ jsxs(Box, { children: [t("main.fees.network"), getFeeBreakdownTypography(gasCosts, t)] }) : null,
+			feeCosts?.length && !gasless ? /* @__PURE__ */ jsxs(Box, {
+				sx: { mt: .5 },
+				children: [t("main.fees.provider"), getFeeBreakdownTypography(feeCosts, t)]
+			}) : null
+		] }),
+		sx: { cursor: "help" },
+		children
+	});
+};
+const getFeeBreakdownTypography = (fees, t) => fees.map((fee, index) => /* @__PURE__ */ jsxs(Typography, {
+	color: "inherit",
+	sx: {
+		fontSize: 12,
+		fontWeight: "500"
+	},
+	children: [
+		t("format.currency", { value: fee.amountUSD }),
+		" (",
+		t("format.tokenAmount", { value: formatTokenAmount(fee.amount, fee.token.decimals) }),
+		" ",
+		fee.token.symbol,
+		")"
+	]
+}, `${fee.token.address}${index}`));
+//#endregion
+export { FeeBreakdownTooltip };
+
+//# sourceMappingURL=FeeBreakdownTooltip.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,61 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useRouteExecutionIndicator } from "../../stores/routes/useRouteExecutionIndicator.js";
+import { CircularProgressPending } from "../Timer/StepStatusTimer.style.js";
+import { ActivitiesIconButton, ErrorBadge, IconContainer, ProgressTrack } from "./ActivitiesButton.style.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ErrorRounded from "@mui/icons-material/ErrorRounded";
+import HistoryIcon from "@mui/icons-material/History";
+//#region src/components/Header/ActivitiesButton.tsx
+const ActivitiesButton = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const indicator = useRouteExecutionIndicator();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: t("header.activities"),
+		children: /* @__PURE__ */ jsx(ActivitiesIconButton, {
+			active: indicator.active || indicator.failed,
+			size: "medium",
+			onClick: () => navigate({ to: navigationRoutes.activities }),
+			disableRipple: indicator.active || indicator.failed,
+			children: /* @__PURE__ */ jsx(ErrorBadge, {
+				invisible: !indicator.failed,
+				badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {
+					color: "error",
+					sx: {
+						width: 20,
+						height: 20
+					}
+				}),
+				overlap: "circular",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "right"
+				},
+				children: /* @__PURE__ */ jsxs(IconContainer, { children: [
+					(indicator.active || indicator.failed) && /* @__PURE__ */ jsx(ProgressTrack, {
+						variant: "determinate",
+						value: 100,
+						size: 40,
+						thickness: 3
+					}),
+					indicator.active && /* @__PURE__ */ jsx(CircularProgressPending, {
+						size: 40,
+						sx: {
+							position: "absolute",
+							top: -8,
+							left: -8
+						}
+					}),
+					/* @__PURE__ */ jsx(HistoryIcon, {})
+				] })
+			})
+		})
+	});
+};
+//#endregion
+export { ActivitiesButton };
+
+//# sourceMappingURL=ActivitiesButton.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,39 @@
+import { Badge, Box, CircularProgress, IconButton, styled } from "@mui/material";
+//#region src/components/Header/ActivitiesButton.style.tsx
+const ErrorBadge = styled(Badge)(({ theme }) => ({ "& .MuiBadge-badge": {
+	padding: 0,
+	minWidth: 16,
+	width: 16,
+	height: 16,
+	borderRadius: "50%",
+	backgroundColor: theme.vars.palette.background.paper,
+	boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,
+	top: -2,
+	left: 10
+} }));
+const IconContainer = styled(Box)(() => ({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+}));
+const ActivitiesIconButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "active" })({ variants: [{
+	props: { active: true },
+	style: ({ theme }) => ({
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
+		...theme.applyStyles("dark", {
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
+		})
+	})
+}] });
+const ProgressTrack = styled(CircularProgress)(({ theme }) => ({
+	position: "absolute",
+	color: theme.vars.palette.grey[300],
+	...theme.applyStyles("dark", { color: theme.vars.palette.grey[800] })
+}));
+//#endregion
+export { ActivitiesIconButton, ErrorBadge, IconContainer, ProgressTrack };
+
+//# sourceMappingURL=ActivitiesButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitiesButton.style.js","names":["MuiIconButton","MuiCircularProgress"],"sources":["../../../../src/components/Header/ActivitiesButton.style.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  CircularProgress as MuiCircularProgress,\n  IconButton as MuiIconButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(\n  Badge\n)(({ theme }) => ({\n  '& .MuiBadge-badge': {\n    padding: 0,\n    minWidth: 16,\n    width: 16,\n    height: 16,\n    borderRadius: '50%',\n    backgroundColor: theme.vars.palette.background.paper,\n    boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,\n    top: -2,\n    left: 10,\n  },\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(() => ({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n}))\n\nexport const ActivitiesIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & { active?: boolean }\n> = styled(MuiIconButton, {\n  shouldForwardProp: (prop) => prop !== 'active',\n})<{ active?: boolean }>({\n  variants: [\n    {\n      props: { active: true },\n      style: ({ theme }) => ({\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }),\n    },\n  ],\n})\n\nexport const ProgressTrack: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  color: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AASA,MAAa,aAA2D,OACtE,KACF,GAAG,EAAE,aAAa,EAChB,qBAAqB;CACnB,SAAS;CACT,UAAU;CACV,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,aAAa,MAAM,KAAK,QAAQ,WAAW;CACtD,KAAK;CACL,MAAM;AACR,EACF,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,SAAS;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEF,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,SACxC,CAAC,EAAwB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,KAAK;CACtB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACF,CAAC;CACH;AACF,CACF,EACF,CAAC;AAED,MAAa,gBAET,OAAOC,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE"}

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

@@ -0,0 +1,24 @@
+import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { IconButton, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import ArrowBack from "@mui/icons-material/ArrowBack";
+//#region src/components/Header/BackButton.tsx
+const BackButton = () => {
+	const theme = useTheme();
+	const navigateBack = useNavigateBack();
+	const [backAction, executeBackAction] = useHeaderStore((state) => [state.backAction, state.executeBackAction]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		size: "medium",
+		edge: theme?.navigation?.edge ? "start" : false,
+		onClick: () => {
+			if (backAction) executeBackAction();
+			else navigateBack();
+		},
+		children: /* @__PURE__ */ jsx(ArrowBack, {})
+	});
+};
+//#endregion
+export { BackButton };
+
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
+import { useDrawer } from "../../AppDrawerContext.js";
+import { IconButton, Tooltip } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+//#region src/components/Header/CloseDrawerButton.tsx
+const CloseDrawerButton = ({ header }) => {
+	const { t } = useTranslation();
+	const { closeDrawer } = useDrawer();
+	const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
+	return header === "navigation" && useExternalWalletProvidersOnly || header === "wallet" ? /* @__PURE__ */ jsx(Tooltip, {
+		title: t("button.close"),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "medium",
+			"data-testid": "widget-close-drawer-button",
+			onClick: closeDrawer,
+			children: /* @__PURE__ */ jsx(CloseRounded, {})
+		})
+	}) : null;
+};
+//#endregion
+export { CloseDrawerButton };
+
+//# sourceMappingURL=CloseDrawerButton.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+import { IconButton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useAccountDisconnect } from "@lifi/wallet-management";
+import PowerSettingsNewRounded from "@mui/icons-material/PowerSettingsNewRounded";
+//#region src/components/Header/DisconnectIconButton.tsx
+const DisconnectIconButton = ({ account }) => {
+	const disconnect = useAccountDisconnect();
+	return /* @__PURE__ */ jsx(IconButton, {
+		size: "medium",
+		onClick: async (e) => {
+			e.stopPropagation();
+			await disconnect(account);
+		},
+		children: /* @__PURE__ */ jsx(PowerSettingsNewRounded, {})
+	});
+};
+//#endregion
+export { DisconnectIconButton };
+
+//# sourceMappingURL=DisconnectIconButton.js.map

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

@@ -0,0 +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"}