@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,31 @@
+import { Tab, Tabs, styled, tabClasses, tabsClasses } from "@mui/material";
+const CardTabs = styled(styled(Tabs)(({ theme }) => ({
+	flex: 1,
+	[`.${tabsClasses.indicator}`]: {
+		top: theme.spacing(.5),
+		left: theme.spacing(.5),
+		height: `calc(100% - ${theme.spacing(1)})`,
+		width: `calc(100% - ${theme.spacing(1)})`
+	},
+	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
+})))(({ theme }) => ({
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
+	...theme.applyStyles("dark", {
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+		[`.${tabsClasses.indicator}`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)` }
+	})
+}));
+const Tab$1 = styled(Tab)(({ theme }) => ({
+	zIndex: 1,
+	flex: 1,
+	textTransform: "none",
+	fontSize: "1rem",
+	fontWeight: 700,
+	color: theme.vars.palette.common.onBackground,
+	[`&.${tabClasses.selected}`]: { color: theme.vars.palette.common.onBackground }
+}));
+//#endregion
+export { CardTabs, Tab$1 as Tab };
+
+//# sourceMappingURL=Tabs.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,IAAO,GAAG,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAGED,CACF,GAAG,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,GAAa,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,aACnC;AACF,EAAE"}

package/dist/esm/components/TextFitter/TextFitter.js

@@ -0,0 +1,62 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "react-intersection-observer";
+//#region src/components/TextFitter/TextFitter.tsx
+const initialState = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+const TextFitter = ({ children, width = "100%", height, preserveAspectRatio = "xMinYMid meet", textStyle, svgStyle, cropTop, cropBottom, onFit }) => {
+	const theme = useTheme();
+	const textRef = useRef(null);
+	const [viewBox, setViewBox] = useState(initialState);
+	const [ref] = useInView({ onChange(inView) {
+		if (inView) calculateBox();
+	} });
+	const calculateBox = useCallback(() => {
+		if (!textRef.current) return;
+		const box = textRef.current.getBBox();
+		if (cropTop) {
+			box.y += box.height * cropTop;
+			box.height -= box.height * cropTop;
+		}
+		if (cropBottom) box.height -= box.height * cropBottom;
+		setViewBox(box);
+		onFit?.();
+	}, [
+		cropBottom,
+		cropTop,
+		onFit
+	]);
+	useLayoutEffect(() => {
+		calculateBox();
+	}, [calculateBox, children]);
+	useLayoutEffect(() => {
+		if (document.fonts) document.fonts.ready.then(() => {
+			calculateBox();
+		});
+	}, [calculateBox]);
+	return /* @__PURE__ */ jsxs("svg", {
+		style: svgStyle,
+		viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
+		width,
+		height,
+		preserveAspectRatio,
+		fill: theme.vars.palette.text.primary,
+		ref,
+		children: [/* @__PURE__ */ jsx("title", { children }), /* @__PURE__ */ jsx("text", {
+			x: 0,
+			y: 0,
+			style: textStyle,
+			ref: textRef,
+			children
+		})]
+	});
+};
+//#endregion
+export { TextFitter };
+
+//# sourceMappingURL=TextFitter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n  children,\n  width = '100%',\n  height,\n  preserveAspectRatio = 'xMinYMid meet',\n  textStyle,\n  svgStyle,\n  cropTop,\n  cropBottom,\n  onFit,\n}) => {\n  const theme = useTheme()\n  const textRef = useRef<SVGTextElement>(null)\n  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n  const [ref] = useInView({\n    onChange(inView) {\n      if (inView) {\n        calculateBox()\n      }\n    },\n  })\n\n  const calculateBox = useCallback(() => {\n    if (!textRef.current) {\n      return\n    }\n    const box = textRef.current.getBBox()\n    if (cropTop) {\n      box.y += box.height * cropTop\n      box.height -= box.height * cropTop\n    }\n    if (cropBottom) {\n      box.height -= box.height * cropBottom\n    }\n    setViewBox(box)\n    onFit?.()\n  }, [cropBottom, cropTop, onFit])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n  useLayoutEffect(() => {\n    calculateBox()\n  }, [calculateBox, children])\n\n  useLayoutEffect(() => {\n    if (document.fonts) {\n      document.fonts.ready.then(() => {\n        calculateBox()\n      })\n    }\n  }, [calculateBox])\n\n  return (\n    <svg\n      style={svgStyle}\n      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n      width={width}\n      height={height}\n      // height={\n      //   textRect.height && maxHeight && textRect.height >= maxHeight\n      //     ? maxHeight\n      //     : height\n      // }\n      preserveAspectRatio={preserveAspectRatio}\n      fill={theme.vars.palette.text.primary}\n      ref={ref}\n    >\n      <title>{children}</title>\n      <text x={0} y={0} style={textStyle} ref={textRef}>\n        {children}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;YAZP,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}

package/dist/esm/components/Timer/ExecutionTimerText.js

@@ -0,0 +1,10 @@
+import { useExecutionTimer } from "../../hooks/timer/useExecutionTimer.js";
+//#region src/components/Timer/ExecutionTimerText.tsx
+const ExecutionTimerText = ({ expiryTimestamp }) => {
+	const { formatted } = useExecutionTimer(expiryTimestamp);
+	return formatted;
+};
+//#endregion
+export { ExecutionTimerText };
+
+//# sourceMappingURL=ExecutionTimerText.js.map

package/dist/esm/components/Timer/ExecutionTimerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionTimerText.js","names":[],"sources":["../../../../src/components/Timer/ExecutionTimerText.tsx"],"sourcesContent":["import { useExecutionTimer } from '../../hooks/timer/useExecutionTimer.js'\n\nexport const ExecutionTimerText = ({\n  expiryTimestamp,\n}: {\n  expiryTimestamp: Date\n}): string | null => {\n  const { formatted } = useExecutionTimer(expiryTimestamp)\n  return formatted\n}\n"],"mappings":";;AAEA,MAAa,sBAAsB,EACjC,sBAGmB;CACnB,MAAM,EAAE,cAAc,kBAAkB,eAAe;CACvD,OAAO;AACT"}

package/dist/esm/components/Timer/StepStatusTimer.js

@@ -0,0 +1,56 @@
+import { CircularProgressPending, ProgressFill, ProgressTrack, RingContainer, StatusCircle, TimerLabel } from "./StepStatusTimer.style.js";
+import { formatTimer, getExpiryTimestamp } from "../../utils/timer.js";
+import { useTimer } from "../../hooks/timer/useTimer.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Timer/StepStatusTimer.tsx
+const TimerRing = ({ step, size = 90, thickness = 2, showLabel = true }) => {
+	const { i18n } = useTranslation();
+	const [isExpired, setExpired] = useState(false);
+	const signedAt = step?.execution?.signedAt;
+	const totalDuration = (step?.estimate.executionDuration ?? 0) * 1e3;
+	const expiryTimestamp = getExpiryTimestamp(step);
+	const { days, hours, minutes, seconds } = useTimer({
+		autoStart: Boolean(signedAt),
+		expiryTimestamp,
+		onExpire: () => setExpired(true)
+	});
+	const hasActiveCountdown = Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds));
+	const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0);
+	const countdownProgress = totalDuration > 0 ? Math.min((totalDuration - remaining) / totalDuration * 100, 100) : 0;
+	return /* @__PURE__ */ jsxs(RingContainer, {
+		sx: {
+			width: size,
+			height: size
+		},
+		children: [
+			/* @__PURE__ */ jsx(ProgressTrack, {
+				variant: "determinate",
+				value: 100,
+				size,
+				thickness
+			}),
+			hasActiveCountdown ? /* @__PURE__ */ jsx(ProgressFill, {
+				variant: "determinate",
+				value: countdownProgress,
+				size,
+				thickness
+			}) : /* @__PURE__ */ jsx(CircularProgressPending, {
+				size,
+				thickness
+			}),
+			showLabel && hasActiveCountdown ? /* @__PURE__ */ jsx(StatusCircle, { children: /* @__PURE__ */ jsx(TimerLabel, { children: formatTimer({
+				locale: i18n.language,
+				days,
+				hours,
+				minutes,
+				seconds
+			}) }) }) : null
+		]
+	});
+};
+//#endregion
+export { TimerRing };
+
+//# sourceMappingURL=StepStatusTimer.js.map

package/dist/esm/components/Timer/StepStatusTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n  CircularProgressPending,\n  ProgressFill,\n  ProgressTrack,\n  RingContainer,\n  StatusCircle,\n  TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n  step?: LiFiStepExtended\n  size?: number\n  thickness?: number\n  showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n  step,\n  size = iconCircleSize,\n  thickness = 2,\n  showLabel = true,\n}) => {\n  const { i18n } = useTranslation()\n  const [isExpired, setExpired] = useState(false)\n\n  const signedAt = step?.execution?.signedAt\n  const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n  const expiryTimestamp = getExpiryTimestamp(step)\n\n  const { days, hours, minutes, seconds } = useTimer({\n    autoStart: Boolean(signedAt),\n    expiryTimestamp,\n    onExpire: () => setExpired(true),\n  })\n\n  const hasActiveCountdown =\n    Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds))\n\n  const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n  const countdownProgress =\n    totalDuration > 0\n      ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n      : 0\n\n  return (\n    <RingContainer sx={{ width: size, height: size }}>\n      <ProgressTrack\n        variant=\"determinate\"\n        value={100}\n        size={size}\n        thickness={thickness}\n      />\n      {hasActiveCountdown ? (\n        <ProgressFill\n          variant=\"determinate\"\n          value={countdownProgress}\n          size={size}\n          thickness={thickness}\n        />\n      ) : (\n        <CircularProgressPending size={size} thickness={thickness} />\n      )}\n      {showLabel && hasActiveCountdown ? (\n        <StatusCircle>\n          <TimerLabel>\n            {formatTimer({\n              locale: i18n.language,\n              days,\n              hours,\n              minutes,\n              seconds,\n            })}\n          </TimerLabel>\n        </StatusCircle>\n      ) : null}\n    </RingContainer>\n  )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;YAA/C;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}

package/dist/esm/components/Timer/StepStatusTimer.style.js

@@ -0,0 +1,67 @@
+import { Box, CircularProgress, Typography, circularProgressClasses, keyframes, styled } from "@mui/material";
+//#region src/components/Timer/StepStatusTimer.style.tsx
+const StatusCircle = styled(Box)({
+	position: "absolute",
+	inset: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+});
+const RingContainer = styled(Box)({
+	position: "relative",
+	width: 90,
+	height: 90
+});
+const ProgressTrack = styled(CircularProgress)(({ theme }) => ({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	color: theme.vars.palette.grey[300],
+	...theme.applyStyles("dark", { color: theme.vars.palette.grey[800] })
+}));
+const ProgressFill = styled(CircularProgress)(({ theme }) => ({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	color: theme.vars.palette.primary.main,
+	...theme.applyStyles("dark", { color: theme.vars.palette.primary.light })
+}));
+const TimerLabel = styled(Typography)({
+	fontSize: 18,
+	fontWeight: 700
+});
+const circleAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+const CircularProgressPending = styled(CircularProgress)`
+  color: ${({ theme }) => theme.vars.palette.primary.main};
+  ${({ theme }) => theme.applyStyles("dark", { color: theme.vars.palette.primary.light })}
+  animation-duration: 3s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  .${circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`;
+//#endregion
+export { CircularProgressPending, ProgressFill, ProgressTrack, RingContainer, StatusCircle, TimerLabel };
+
+//# sourceMappingURL=StepStatusTimer.style.js.map

package/dist/esm/components/Timer/StepStatusTimer.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatusTimer.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Timer/StepStatusTimer.style.tsx"],"sourcesContent":["import {\n  Box,\n  circularProgressClasses,\n  keyframes,\n  CircularProgress as MuiCircularProgress,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n})\n\nexport const RingContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)({\n  position: 'relative',\n  width: iconCircleSize,\n  height: iconCircleSize,\n})\n\nexport const ProgressTrack: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  color: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const ProgressFill: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  color: theme.vars.palette.primary.main,\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.primary.light,\n  }),\n}))\n\nexport const TimerLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    fontSize: 18,\n    fontWeight: 700,\n  })\n\nconst circleAnimation = keyframes`\n  0% {\n    stroke-dashoffset: 129;\n    transform: rotate(0);\n  }\n  50% {\n    stroke-dashoffset: 56;\n    transform: rotate(45deg);\n  };\n  100% {\n    stroke-dashoffset: 129;\n    transform: rotate(360deg);\n  }\n`\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const CircularProgressPending: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)`\n  color: ${({ theme }) => theme.vars.palette.primary.main};\n  ${({ theme }) =>\n    theme.applyStyles('dark', {\n      color: theme.vars.palette.primary.light,\n    })}\n  animation-duration: 3s;\n  position: absolute;\n  top: 0;\n  left: 0;\n  .${circularProgressClasses.circle} {\n    animation-duration: 2s;\n    animation-timing-function: linear;\n    animation-name: ${circleAnimation};\n    stroke-dasharray: 129;\n    stroke-dashoffset: 129;\n    stroke-linecap: round;\n    transform-origin: 100% 100%;\n  }\n`\n"],"mappings":";;AAWA,MAAa,eAA2D,OACtE,GACF,EAAE;CACA,UAAU;CACV,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,MAAa,gBAA4D,OACvE,GACF,EAAE;CACA,UAAU;CACV,OAAA;CACA,QAAA;AACF,CAAC;AAED,MAAa,gBAET,OAAOA,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE;AAEF,MAAa,eAET,OAAOA,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,QAAQ;CAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,EAAE;CACjB,UAAU;CACV,YAAY;AACd,CAAC;AAEH,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,gBAAmB,CAAC;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC,EAAE;;;;;KAKF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}

package/dist/esm/components/Token/Token.js

@@ -0,0 +1,208 @@
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { getPriceImpact } from "../../utils/getPriceImpact.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { AvatarBadgedSkeleton } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { TextFitter } from "../TextFitter/TextFitter.js";
+import { TextSecondary, TextSecondaryContainer } from "./Token.style.js";
+import { Box, Grow, Skeleton, Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Token/Token.tsx
+const Token = ({ token, ...other }) => {
+	if (!token.priceUSD || !token.logoURI) return /* @__PURE__ */ jsx(TokenFallback, {
+		token,
+		...other
+	});
+	return /* @__PURE__ */ jsx(TokenBase, {
+		token,
+		...other
+	});
+};
+const TokenFallback = ({ token, isLoading, ...other }) => {
+	const { token: chainToken, isLoading: isLoadingToken } = useToken(token.chainId, token.address);
+	return /* @__PURE__ */ jsx(TokenBase, {
+		token: {
+			...token,
+			...chainToken
+		},
+		isLoading: isLoading || isLoadingToken,
+		...other
+	});
+};
+const TokenBase = ({ token, impactToken, enableImpactTokenTooltip, step, stepVisible, disableDescription, isLoading, ...other }) => {
+	const { t, i18n } = useTranslation();
+	const { chain } = useChain(token?.chainId);
+	if (isLoading) return /* @__PURE__ */ jsx(TokenSkeleton, {
+		token,
+		step,
+		disableDescription,
+		...other
+	});
+	const tokenAmount = formatTokenAmount(token.amount, token.decimals);
+	const tokenPrice = formatTokenPrice(token.amount, token.priceUSD, token.decimals);
+	let priceImpact;
+	let priceImpactPercent;
+	if (impactToken) {
+		priceImpact = getPriceImpact({
+			fromToken: impactToken,
+			fromAmount: impactToken.amount,
+			toToken: token,
+			toAmount: token.amount
+		});
+		priceImpactPercent = priceImpact * 100;
+	}
+	const tokenOnChain = !disableDescription ? /* @__PURE__ */ jsx(TextSecondary, { children: t("main.tokenOnChain", {
+		tokenSymbol: token.symbol,
+		chainName: chain?.name
+	}) }) : null;
+	return /* @__PURE__ */ jsxs(Box, {
+		...other,
+		sx: [{
+			flex: 1,
+			display: "flex",
+			alignItems: "center"
+		}, ...Array.isArray(other.sx) ? other.sx : [other.sx]],
+		children: [/* @__PURE__ */ jsx(TokenAvatar, {
+			token,
+			chain,
+			isLoading,
+			sx: { marginRight: 2 }
+		}), /* @__PURE__ */ jsxs(Box, {
+			sx: { flex: 1 },
+			children: [/* @__PURE__ */ jsx(Box, {
+				sx: {
+					mb: .5,
+					height: 24,
+					display: "flex",
+					alignItems: "center"
+				},
+				title: tokenAmount,
+				children: /* @__PURE__ */ jsx(TextFitter, {
+					height: 30,
+					textStyle: { fontWeight: 700 },
+					children: t("format.tokenAmount", { value: tokenAmount })
+				})
+			}), /* @__PURE__ */ jsxs(TextSecondaryContainer, { children: [
+				/* @__PURE__ */ jsx(TextSecondary, { children: t("format.currency", { value: tokenPrice }) }),
+				impactToken ? /* @__PURE__ */ jsx(TextSecondary, {
+					sx: { px: .5 },
+					dot: true,
+					children: "•"
+				}) : null,
+				impactToken ? enableImpactTokenTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+					title: t("tooltip.priceImpact"),
+					sx: { cursor: "help" },
+					children: /* @__PURE__ */ jsx(TextSecondary, { children: t("format.percent", {
+						value: priceImpact,
+						usePlusSign: true
+					}) })
+				}) : /* @__PURE__ */ jsx(TextSecondary, {
+					title: priceImpactPercent?.toLocaleString(i18n.language, { maximumFractionDigits: 9 }),
+					children: t("format.percent", {
+						value: priceImpact,
+						usePlusSign: true
+					})
+				}) : null,
+				!disableDescription ? /* @__PURE__ */ jsx(TextSecondary, {
+					sx: { px: .5 },
+					dot: true,
+					children: "•"
+				}) : null,
+				!disableDescription && step ? /* @__PURE__ */ jsx(TokenStep, {
+					step,
+					stepVisible,
+					disableDescription,
+					children: tokenOnChain
+				}) : tokenOnChain
+			] })]
+		})]
+	});
+};
+const TokenStep = ({ step, stepVisible, disableDescription, children }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			flex: 1,
+			position: "relative",
+			overflow: "hidden",
+			height: 16
+		},
+		children: [/* @__PURE__ */ jsx(Grow, {
+			in: !stepVisible && !disableDescription,
+			style: { position: "absolute" },
+			appear: false,
+			timeout: 225,
+			children: /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					height: 16
+				},
+				children
+			})
+		}), /* @__PURE__ */ jsx(Grow, {
+			in: stepVisible,
+			style: { position: "absolute" },
+			appear: false,
+			timeout: 225,
+			children: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					height: 16
+				},
+				children: [/* @__PURE__ */ jsx(Box, {
+					sx: {
+						mr: .75,
+						height: 16
+					},
+					children: /* @__PURE__ */ jsx(SmallAvatar, {
+						src: step?.toolDetails.logoURI,
+						alt: step?.toolDetails.name,
+						children: step?.toolDetails.name[0]
+					})
+				}), /* @__PURE__ */ jsx(TextSecondary, { children: step?.toolDetails.name })]
+			})
+		})]
+	});
+};
+const TokenSkeleton = ({ step, disableDescription, ...other }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		...other,
+		sx: [{ flex: 1 }, ...Array.isArray(other.sx) ? other.sx : [other.sx]],
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flex: 1,
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx(AvatarBadgedSkeleton, { sx: { marginRight: 2 } }), /* @__PURE__ */ jsxs(Box, {
+				sx: { flex: 1 },
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					width: 112,
+					height: 28,
+					variant: "text"
+				}), /* @__PURE__ */ jsxs(TextSecondaryContainer, { children: [/* @__PURE__ */ jsx(Skeleton, {
+					width: 48,
+					height: 12,
+					variant: "rounded",
+					sx: { marginTop: .5 }
+				}), !step && !disableDescription ? /* @__PURE__ */ jsx(Skeleton, {
+					width: 96,
+					height: 12,
+					variant: "rounded",
+					sx: {
+						marginTop: .5,
+						marginLeft: 1.5
+					}
+				}) : null] })]
+			})]
+		})
+	});
+};
+//#endregion
+export { Token, TokenSkeleton };
+
+//# sourceMappingURL=Token.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n  token: TokenAmount\n  impactToken?: TokenAmount\n  enableImpactTokenTooltip?: boolean\n  step?: LiFiStep\n  stepVisible?: boolean\n  disableDescription?: boolean\n  isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n  if (!token.priceUSD || !token.logoURI) {\n    return <TokenFallback token={token} {...other} />\n  }\n  return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n  token,\n  isLoading,\n  ...other\n}) => {\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token.chainId,\n    token.address\n  )\n\n  return (\n    <TokenBase\n      token={{ ...token, ...chainToken } as TokenAmount}\n      isLoading={isLoading || isLoadingToken}\n      {...other}\n    />\n  )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n  token,\n  impactToken,\n  enableImpactTokenTooltip,\n  step,\n  stepVisible,\n  disableDescription,\n  isLoading,\n  ...other\n}) => {\n  const { t, i18n } = useTranslation()\n  const { chain } = useChain(token?.chainId)\n\n  if (isLoading) {\n    return (\n      <TokenSkeleton\n        token={token}\n        step={step}\n        disableDescription={disableDescription}\n        {...other}\n      />\n    )\n  }\n\n  const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n  const tokenPrice = formatTokenPrice(\n    token.amount,\n    token.priceUSD,\n    token.decimals\n  )\n\n  let priceImpact: number | undefined\n  let priceImpactPercent: number | undefined\n  if (impactToken) {\n    priceImpact = getPriceImpact({\n      fromToken: impactToken,\n      fromAmount: impactToken.amount,\n      toToken: token,\n      toAmount: token.amount,\n    })\n    priceImpactPercent = priceImpact * 100\n  }\n\n  const tokenOnChain = !disableDescription ? (\n    <TextSecondary>\n      {t('main.tokenOnChain', {\n        tokenSymbol: token.symbol,\n        chainName: chain?.name,\n      })}\n    </TextSecondary>\n  ) : null\n\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <TokenAvatar\n        token={token}\n        chain={chain}\n        isLoading={isLoading}\n        sx={{ marginRight: 2 }}\n      />\n      <Box\n        sx={{\n          flex: 1,\n        }}\n      >\n        <Box\n          sx={{\n            mb: 0.5,\n            height: 24,\n            display: 'flex',\n            alignItems: 'center',\n          }}\n          title={tokenAmount}\n        >\n          <TextFitter\n            height={30}\n            textStyle={{\n              fontWeight: 700,\n            }}\n          >\n            {t('format.tokenAmount', {\n              value: tokenAmount,\n            })}\n          </TextFitter>\n        </Box>\n        <TextSecondaryContainer>\n          <TextSecondary>\n            {t('format.currency', {\n              value: tokenPrice,\n            })}\n          </TextSecondary>\n          {impactToken ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {impactToken ? (\n            enableImpactTokenTooltip ? (\n              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n                <TextSecondary>\n                  {t('format.percent', {\n                    value: priceImpact,\n                    usePlusSign: true,\n                  })}\n                </TextSecondary>\n              </Tooltip>\n            ) : (\n              <TextSecondary\n                title={priceImpactPercent?.toLocaleString(i18n.language, {\n                  maximumFractionDigits: 9,\n                })}\n              >\n                {t('format.percent', { value: priceImpact, usePlusSign: true })}\n              </TextSecondary>\n            )\n          ) : null}\n          {!disableDescription ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {!disableDescription && step ? (\n            <TokenStep\n              step={step}\n              stepVisible={stepVisible}\n              disableDescription={disableDescription}\n            >\n              {tokenOnChain}\n            </TokenStep>\n          ) : (\n            tokenOnChain\n          )}\n        </TextSecondaryContainer>\n      </Box>\n    </Box>\n  )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n  step,\n  stepVisible,\n  disableDescription,\n  children,\n}) => {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        position: 'relative',\n        overflow: 'hidden',\n        height: 16,\n      }}\n    >\n      <Grow\n        in={!stepVisible && !disableDescription}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          {children as ReactElement}\n        </Box>\n      </Grow>\n      <Grow\n        in={stepVisible}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          <Box\n            sx={{\n              mr: 0.75,\n              height: 16,\n            }}\n          >\n            <SmallAvatar\n              src={step?.toolDetails.logoURI}\n              alt={step?.toolDetails.name}\n            >\n              {step?.toolDetails.name[0]}\n            </SmallAvatar>\n          </Box>\n          <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n        </Box>\n      </Grow>\n    </Box>\n  )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n  step,\n  disableDescription,\n  ...other\n}) => {\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n        }}\n      >\n        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Skeleton width={112} height={28} variant=\"text\" />\n          <TextSecondaryContainer>\n            <Skeleton\n              width={48}\n              height={12}\n              variant=\"rounded\"\n              sx={{ marginTop: 0.5 }}\n            />\n            {!step && !disableDescription ? (\n              <Skeleton\n                width={96}\n                height={12}\n                variant=\"rounded\"\n                sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n              />\n            ) : null}\n          </TextSecondaryContainer>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Token/Token.style.tsx
+const TextSecondaryContainer = styled(Box)(() => ({
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	flex: 1,
+	height: 16
+}));
+const TextSecondary = styled(Typography, { shouldForwardProp: (prop) => !["dot"].includes(prop) })(({ theme }) => ({
+	fontSize: 12,
+	lineHeight: 1,
+	fontWeight: 500,
+	color: theme.vars.palette.text.secondary,
+	whiteSpace: "nowrap",
+	variants: [{
+		props: ({ dot }) => dot,
+		style: { color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)` }
+	}]
+}));
+styled(Box)(({ theme }) => ({
+	height: 16,
+	borderLeftWidth: 2,
+	borderLeftStyle: "solid",
+	borderColor: theme.vars.palette.grey[300],
+	...theme.applyStyles("dark", { borderColor: theme.vars.palette.grey[800] })
+}));
+//#endregion
+export { TextSecondary, TextSecondaryContainer };
+
+//# sourceMappingURL=Token.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Token.style.js","names":[],"sources":["../../../../src/components/Token/Token.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TextSecondaryContainer: React.FC<\n  React.ComponentProps<typeof Box> & { dot?: boolean }\n> = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  flex: 1,\n  height: 16,\n}))\n\nexport const TextSecondary: React.FC<\n  React.ComponentProps<typeof Typography> & { dot?: boolean }\n> = styled(Typography, {\n  shouldForwardProp: (prop: string) => !['dot'].includes(prop),\n})<{ dot?: boolean }>(({ theme }) => ({\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: 500,\n  color: theme.vars.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  variants: [\n    {\n      props: ({ dot }) => dot,\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,\n      },\n    },\n  ],\n}))\n\nexport const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  height: 16,\n  borderLeftWidth: 2,\n  borderLeftStyle: 'solid',\n  borderColor: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,GAAG,SAAS;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;AACV,EAAE;AAEF,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,KAAK,EAAE,SAAS,IAAI,EAC7D,CAAC,GAAsB,EAAE,aAAa;CACpC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,UAAU,CACR;EACE,QAAQ,EAAE,UAAU;EACpB,OAAO,EACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,UAAU,oBACjE;CACF,CACF;AACF,EAAE;AAEsE,OACtE,GACF,GAAG,EAAE,aAAa;CAChB,QAAQ;CACR,iBAAiB;CACjB,iBAAiB;CACjB,aAAa,MAAM,KAAK,QAAQ,KAAK;CACrC,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;AACH,EAAE"}

package/dist/esm/components/TokenList/PinTokenButton.js

@@ -0,0 +1,36 @@
+import { usePinnedTokensStore } from "../../stores/pinnedTokens/PinnedTokensStore.js";
+import { IconButton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+//#region src/components/TokenList/PinTokenButton.tsx
+const PinTokenButton = ({ chainId, tokenAddress }) => {
+	const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [
+		state.pinnedTokens,
+		state.pinToken,
+		state.unpinToken
+	]);
+	const isPinned = pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false;
+	const handleClick = (e) => {
+		e.stopPropagation();
+		e.currentTarget.blur();
+		if (isPinned) unpinToken(chainId, tokenAddress);
+		else pinToken(chainId, tokenAddress);
+	};
+	return /* @__PURE__ */ jsx(IconButton, {
+		sx: {
+			width: 20,
+			height: 20
+		},
+		size: "small",
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsx(isPinned ? PushPinIcon : PushPinOutlinedIcon, { sx: {
+			fontSize: 12,
+			color: isPinned ? "text.primary" : "text.secondary"
+		} })
+	});
+};
+//#endregion
+export { PinTokenButton };
+
+//# sourceMappingURL=PinTokenButton.js.map

package/dist/esm/components/TokenList/PinTokenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinTokenButton.js","names":[],"sources":["../../../../src/components/TokenList/PinTokenButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'\n\ninterface PinTokenButtonProps {\n  chainId: number\n  tokenAddress: string\n}\n\nexport const PinTokenButton = ({\n  chainId,\n  tokenAddress,\n}: PinTokenButtonProps): JSX.Element => {\n  const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [\n    state.pinnedTokens,\n    state.pinToken,\n    state.unpinToken,\n  ])\n\n  const isPinned =\n    pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    ;(e.currentTarget as HTMLElement).blur()\n    if (isPinned) {\n      unpinToken(chainId, tokenAddress)\n    } else {\n      pinToken(chainId, tokenAddress)\n    }\n  }\n\n  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n\n  return (\n    <IconButton\n      sx={{ width: 20, height: 20 }}\n      size=\"small\"\n      onClick={handleClick}\n    >\n      <PinIcon\n        sx={{\n          fontSize: 12,\n          color: isPinned ? 'text.primary' : 'text.secondary',\n        }}\n      />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,SACA,mBACsC;CACtC,MAAM,CAAC,cAAc,UAAU,cAAc,sBAAsB,UAAU;EAC3E,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAED,MAAM,WACJ,aAAa,UAAU,SAAS,aAAa,YAAY,CAAC,KAAK;CAEjE,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,IAAI,UACF,WAAW,SAAS,YAAY;OAEhC,SAAS,SAAS,YAAY;CAElC;CAIA,OACE,oBAAC,YAAD;EACE,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;YAET,oBARY,WAAW,cAAc,qBAQrC,EACE,IAAI;GACF,UAAU;GACV,OAAO,WAAW,iBAAiB;EACrC,EACD,CAAA;CACS,CAAA;AAEhB"}

package/dist/esm/components/TokenList/TokenDetailsSheet.js

@@ -0,0 +1,37 @@
+import { BottomSheet } from "../BottomSheet/BottomSheet.js";
+import { TokenDetailsSheetContent } from "./TokenDetailsSheetContent.js";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/TokenList/TokenDetailsSheet.tsx
+const TokenDetailsSheet = forwardRef((_, ref) => {
+	const bottomSheetRef = useRef(null);
+	const [tokenAddress, setTokenAddress] = useState(void 0);
+	const [chainId, setChainId] = useState(void 0);
+	const [withoutContractAddress, setWithoutContractAddress] = useState(false);
+	useImperativeHandle(ref, () => ({
+		isOpen: () => bottomSheetRef.current?.isOpen(),
+		open: (address, noContractAddress, chainId) => {
+			setTokenAddress(address);
+			setWithoutContractAddress(noContractAddress);
+			setChainId(chainId);
+			bottomSheetRef.current?.open();
+		},
+		close: () => {
+			bottomSheetRef.current?.close();
+		}
+	}), []);
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref: bottomSheetRef,
+		keepMounted: true,
+		children: /* @__PURE__ */ jsx(TokenDetailsSheetContent, {
+			ref,
+			tokenAddress,
+			withoutContractAddress,
+			chainId
+		})
+	});
+});
+//#endregion
+export { TokenDetailsSheet };
+
+//# sourceMappingURL=TokenDetailsSheet.js.map

package/dist/esm/components/TokenList/TokenDetailsSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type React from 'react'\nimport { forwardRef, useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet: React.ForwardRefExoticComponent<\n  React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase>((_, ref) => {\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const [tokenAddress, setTokenAddress] = useState<string | undefined>(\n    undefined\n  )\n  const [chainId, setChainId] = useState<number | undefined>(undefined)\n  const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => bottomSheetRef.current?.isOpen(),\n      open: (address: string, noContractAddress: boolean, chainId: number) => {\n        setTokenAddress(address)\n        setWithoutContractAddress(noContractAddress)\n        setChainId(chainId)\n        bottomSheetRef.current?.open()\n      },\n      close: () => {\n        bottomSheetRef.current?.close()\n      },\n    }),\n    []\n  )\n\n  return (\n    <BottomSheet ref={bottomSheetRef} keepMounted>\n      <TokenDetailsSheetContent\n        ref={ref}\n        tokenAddress={tokenAddress}\n        withoutContractAddress={withoutContractAddress}\n        chainId={chainId}\n      />\n    </BottomSheet>\n  )\n})\n"],"mappings":";;;;;AAOA,MAAa,oBAET,YAAmC,GAAG,QAAQ;CAChD,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;YAChC,oBAAC,0BAAD;GACO;GACS;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB,CAAC"}