@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -1,40 +1,40 @@
-import { Box, styled } from '@mui/material';
-export const animationDuration = 225;
-export const defaultStyle = {
-    opacity: 0,
-    whiteSpace: 'nowrap',
-    transform: 'translateX(-100%)',
-    display: 'inline-block',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+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)`
 };
-export 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 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%)"
+	}
 };
-export const ExpansionContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'width',
-})(({ width }) => ({
-    position: 'relative',
-    display: 'flex',
-    transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-    width: width,
-    marginLeft: width ? '24px' : 0,
+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

@@ -1 +1 @@
-{"version":3,"file":"Expansion.style.js","sourceRoot":"","sources":["../../../../src/components/Expansion/Expansion.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,mBAAmB;IAC9B,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,UAAmB;IAC7B,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,WAAW,iBAAiB,8CAA8C,iBAAiB,iCAAiC;CACzI,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,eAAe;KAC3B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,eAAe;KAC3B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,mBAAmB;KAC/B;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,mBAAmB;KAC/B;CACF,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;CAC9C,CAAC,CAA6B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,SAAS,iBAAiB,iCAAiC;IACvE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CAC/B,CAAC,CAAC,CAAA"}
+{"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,CAAC,EAA8B,EAAE,aAAa;CAC7C,UAAU;CACV,SAAS;CACT,YAAY;CACL;CACP,YAAY,QAAQ,SAAS;AAC/B,EAAE"}

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

@@ -1,16 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { useRef } from 'react';
-import { Transition } from 'react-transition-group';
-import { animationDuration, defaultStyle, transitionStyles, } from './Expansion.style.js';
-export function ExpansionTransition({ in: inProp, children, width, onExited, }) {
-    const nodeRef = useRef(null);
-    return (_jsx(Transition, { nodeRef: nodeRef, in: inProp, timeout: animationDuration, onExited: onExited, mountOnEnter: true, unmountOnExit: true, children: (state) => {
-            return (_jsx(Box, { ref: nodeRef, style: {
-                    ...defaultStyle,
-                    ...transitionStyles[state],
-                    width,
-                }, children: children }));
-        } }));
+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

@@ -1 +1 @@
-{"version":3,"file":"ExpansionTransition.js","sourceRoot":"","sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,sBAAsB,CAAA;AAQ7B,MAAM,UAAU,mBAAmB,CAAC,EAClC,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,GACoC;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,QACZ,aAAa,kBAEZ,CAAC,KAAK,EAAE,EAAE;YACT,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;oBACL,GAAG,YAAY;oBACf,GAAG,gBAAgB,CAAC,KAAsC,CAAC;oBAC3D,KAAK;iBACN,YAEA,QAAQ,GACL,CACP,CAAA;QACH,CAAC,GACU,CACd,CAAA;AACH,CAAC"}
+{"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

@@ -1,17 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Tooltip, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { formatTokenAmount } from '../utils/format.js';
-export const FeeBreakdownTooltip = ({ gasCosts, feeCosts, gasless, children, }) => {
-    const { t } = useTranslation();
-    return (_jsx(Tooltip, { title: _jsxs(Box, { children: [gasless ? _jsx(Box, { children: t('tooltip.gasless') }) : null, gasCosts?.length && !gasless ? (_jsxs(Box, { children: [t('main.fees.network'), getFeeBreakdownTypography(gasCosts, t)] })) : null, feeCosts?.length && !gasless ? (_jsxs(Box, { sx: {
-                        mt: 0.5,
-                    }, children: [t('main.fees.provider'), getFeeBreakdownTypography(feeCosts, t)] })) : null] }), sx: { cursor: 'help' }, children: children }));
+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) => (_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}`)));
+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

@@ -1 +1 @@
-{"version":3,"file":"FeeBreakdownTooltip.js","sourceRoot":"","sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAGxD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EACH,MAAC,GAAG,eACD,OAAO,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,CAAC,CAAC,iBAAiB,CAAC,GAAO,CAAC,CAAC,CAAC,IAAI,EAClD,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9B,MAAC,GAAG,eACD,CAAC,CAAC,mBAAmB,CAAC,EACtB,yBAAyB,CAAC,QAAQ,EAAE,CAAC,CAAC,IACnC,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9B,MAAC,GAAG,IACF,EAAE,EAAE;wBACF,EAAE,EAAE,GAAG;qBACR,aAEA,CAAC,CAAC,oBAAoB,CAAC,EACvB,yBAAyB,CAAC,QAAQ,EAAE,CAAC,CAAC,IACnC,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,EAER,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAErB,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,yBAAyB,GAAG,CAAC,IAAqB,EAAE,CAAY,EAAE,EAAE,CACxE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACvB,MAAC,UAAU,IACT,KAAK,EAAC,SAAS,EAEf,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB,aAEA,CAAC,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC,QAC9C,CAAC,CAAC,oBAAoB,EAAE;YACvB,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;SACzD,CAAC,EAAE,GAAG,EACN,GAAG,CAAC,KAAK,CAAC,MAAM,UAVZ,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,EAAE,CAWxB,CACd,CAAC,CAAA"}
+{"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,CAAC,EAAE,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,CAAC,QAAQ;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEF,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,SACxC,CAAC,CAAC,CAAuB,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,CAAC,EAAE,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

@@ -1,22 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ArrowBack from '@mui/icons-material/ArrowBack';
-import { IconButton, useTheme } from '@mui/material';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
-export const BackButton = () => {
-    const theme = useTheme();
-    const navigateBack = useNavigateBack();
-    const [backAction, executeBackAction] = useHeaderStore((state) => [
-        state.backAction,
-        state.executeBackAction,
-    ]);
-    return (_jsx(IconButton, { size: "medium", edge: theme?.navigation?.edge ? 'start' : false, onClick: () => {
-            if (backAction) {
-                executeBackAction();
-            }
-            else {
-                navigateBack();
-            }
-        }, children: _jsx(ArrowBack, {}) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","sourceRoot":"","sources":["../../../../src/components/Header/BackButton.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAEtE,MAAM,CAAC,MAAM,UAAU,GAAa,GAAG,EAAE;IACvC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,eAAe,EAAE,CAAA;IACtC,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QAChE,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,iBAAiB;KACxB,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAC/C,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,UAAU,EAAE,CAAC;gBACf,iBAAiB,EAAE,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACN,YAAY,EAAE,CAAA;YAChB,CAAC;QACH,CAAC,YAED,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AACH,CAAC,CAAA"}
+{"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

@@ -1,15 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import CloseRounded from '@mui/icons-material/CloseRounded';
-import { IconButton, Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useDrawer } from '../../AppDrawerContext.js';
-import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
-export const CloseDrawerButton = ({ header }) => {
-    const { t } = useTranslation();
-    const { closeDrawer } = useDrawer();
-    const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
-    const showInNavigationHeader = header === 'navigation' && useExternalWalletProvidersOnly;
-    const showInWalletHeader = header === 'wallet';
-    return showInNavigationHeader || showInWalletHeader ? (_jsx(Tooltip, { title: t('button.close'), children: _jsx(IconButton, { size: "medium", onClick: closeDrawer, children: _jsx(CloseRounded, {}) }) })) : null;
+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

@@ -1 +1 @@
-{"version":3,"file":"CloseDrawerButton.js","sourceRoot":"","sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6DAA6D,CAAA;AAMvG,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAA0B,EAAE,EAAE;IACtE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAA;IACnC,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,EAAE,CAAA;IAEtE,MAAM,sBAAsB,GAC1B,MAAM,KAAK,YAAY,IAAI,8BAA8B,CAAA;IAE3D,MAAM,kBAAkB,GAAG,MAAM,KAAK,QAAQ,CAAA;IAE9C,OAAO,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpD,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,YAC/B,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,YAC5C,KAAC,YAAY,KAAG,GACL,GACL,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
+{"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

@@ -1,12 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAccountDisconnect } from '@lifi/wallet-management';
-import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded';
-import { IconButton } from '@mui/material';
-export const DisconnectIconButton = ({ account }) => {
-    const disconnect = useAccountDisconnect();
-    return (_jsx(IconButton, { size: "medium", onClick: async (e) => {
-            e.stopPropagation();
-            await disconnect(account);
-        }, children: _jsx(PowerSettingsNewRounded, {}) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"DisconnectIconButton.js","sourceRoot":"","sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAE9D,OAAO,uBAAuB,MAAM,6CAA6C,CAAA;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE;IACxE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAA;IACzC,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,MAAM,UAAU,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC,YAED,KAAC,uBAAuB,KAAG,GAChB,CACd,CAAA;AACH,CAAC,CAAA"}
+{"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"}

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

@@ -1,39 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLocation } from '@tanstack/react-router';
-import { useLayoutEffect, useRef } from 'react';
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js';
-import { createElementId, ElementId } from '../../utils/elements.js';
-import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
-import { Container } from './Header.style.js';
-import { NavigationHeader } from './NavigationHeader.js';
-import { WalletHeader } from './WalletHeader.js';
+import { useSetHeaderHeight } from "../../stores/header/useHeaderStore.js";
+import { createElementId } from "../../utils/elements.js";
+import { stickyHeaderRoutes } from "../../utils/navigationRoutes.js";
+import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
+import { Container } from "./Header.style.js";
+import { NavigationHeader } from "./NavigationHeader.js";
+import { WalletHeader } from "./WalletHeader.js";
+import { useCallback } from "react";
+import { useLocation } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Header/Header.tsx
 const HeaderContainer = ({ children }) => {
-    const { pathname } = useLocation();
-    const elementId = useDefaultElementId();
-    const headerRef = useRef(null);
-    const { setHeaderHeight } = useSetHeaderHeight();
-    useLayoutEffect(() => {
-        const handleHeaderResize = () => {
-            const height = headerRef.current?.getBoundingClientRect().height;
-            if (height) {
-                setHeaderHeight(height);
-            }
-        };
-        let resizeObserver;
-        if (headerRef.current) {
-            resizeObserver = new ResizeObserver(handleHeaderResize);
-            resizeObserver.observe(headerRef.current);
-        }
-        return () => {
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-        };
-    }, [setHeaderHeight]);
-    return (_jsx(Container, { id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)), ref: headerRef, children: children }));
+	const { pathname } = useLocation();
+	const elementId = useDefaultElementId();
+	const { setHeaderHeight } = useSetHeaderHeight();
+	const headerRef = useCallback((node) => {
+		if (!node) return;
+		const handleHeaderResize = () => {
+			const height = node.getBoundingClientRect().height;
+			if (height) setHeaderHeight(height);
+		};
+		const resizeObserver = new ResizeObserver(handleHeaderResize);
+		resizeObserver.observe(node);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [setHeaderHeight]);
+	return /* @__PURE__ */ jsx(Container, {
+		id: createElementId("widget-header", elementId ?? ""),
+		sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)),
+		ref: headerRef,
+		children
+	});
 };
-export const Header = () => {
-    return (_jsxs(HeaderContainer, { children: [_jsx(WalletHeader, {}), _jsx(NavigationHeader, {})] }));
+const Header = () => {
+	return /* @__PURE__ */ jsxs(HeaderContainer, { children: [/* @__PURE__ */ jsx(WalletHeader, {}), /* @__PURE__ */ jsx(NavigationHeader, {})] });
 };
+//#endregion
+export { Header };
+
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAA;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,MAAM,CAAA;YAEhE,IAAI,MAAM,EAAE,CAAC;gBACX,eAAe,CAAC,MAAM,CAAC,CAAA;YACzB,CAAC;QACH,CAAC,CAAA;QAED,IAAI,cAA8B,CAAA;QAElC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAA;YACvD,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE,CAAC;gBACnB,cAAc,CAAC,UAAU,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,KAAC,SAAS,IACR,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,EAChD,MAAM,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EACpE,GAAG,EAAE,SAAS,YAEb,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAO,GAAG,EAAE;IAC7B,OAAO,CACL,MAAC,eAAe,eACd,KAAC,YAAY,KAAG,EAChB,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useCallback } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n  const { pathname } = useLocation()\n  const elementId = useDefaultElementId()\n  const { setHeaderHeight } = useSetHeaderHeight()\n\n  // React 19 ref cleanup callback: set up the ResizeObserver when the node\n  // mounts and tear it down when it unmounts.\n  const headerRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (!node) {\n        return\n      }\n\n      const handleHeaderResize = () => {\n        const height = node.getBoundingClientRect().height\n\n        if (height) {\n          setHeaderHeight(height)\n        }\n      }\n\n      const resizeObserver = new ResizeObserver(handleHeaderResize)\n      resizeObserver.observe(node)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    },\n    [setHeaderHeight]\n  )\n\n  return (\n    <Container\n      id={createElementId(ElementId.Header, elementId ?? '')}\n      sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n      ref={headerRef}\n    >\n      {children}\n    </Container>\n  )\n}\n\nexport const Header: FC = () => {\n  return (\n    <HeaderContainer>\n      <WalletHeader />\n      <NavigationHeader />\n    </HeaderContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,YAAY,oBAAoB;CACtC,MAAM,EAAE,oBAAoB,mBAAmB;CAI/C,MAAM,YAAY,aACf,SAAgC;EAC/B,IAAI,CAAC,MACH;EAGF,MAAM,2BAA2B;GAC/B,MAAM,SAAS,KAAK,sBAAsB,CAAC,CAAC;GAE5C,IAAI,QACF,gBAAgB,MAAM;EAE1B;EAEA,MAAM,iBAAiB,IAAI,eAAe,kBAAkB;EAC5D,eAAe,QAAQ,IAAI;EAE3B,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GACA,CAAC,eAAe,CAClB;CAEA,OACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,EAAE;EACrD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,KAAK,CAAC;EACnE,KAAK;EAEJ;CACQ,CAAA;AAEf;AAEA,MAAa,eAAmB;CAC9B,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,kBAAD,CAAmB,CAAA,CACJ,EAAA,CAAA;AAErB"}