@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js

@@ -0,0 +1,62 @@
+import { Box, ButtonBase, InputBase, inputBaseClasses, styled } from "@mui/material";
+//#region src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx
+const SettingsFieldSet = styled(Box)(({ theme }) => ({
+	display: "flex",
+	borderRadius: theme.vars.shape.borderRadius,
+	padding: theme.spacing(.5),
+	gap: theme.spacing(.5),
+	height: "3.5rem",
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` })
+}));
+const settingsControlSelected = (theme) => ({
+	backgroundColor: theme.vars.palette.background.paper,
+	boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	...theme.applyStyles("dark", {
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+		boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`
+	}),
+	borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`
+});
+const SettingsDefaultButton = styled(ButtonBase)(({ theme, selected }) => {
+	const settingsControlSelectedStyles = settingsControlSelected(theme);
+	const selectedStyle = selected ? { "&:not(:focus)": { ...settingsControlSelectedStyles } } : {};
+	return {
+		height: "100%",
+		width: "100%",
+		fontSize: "1rem",
+		fontWeight: 700,
+		"&:focus": { ...settingsControlSelectedStyles },
+		...selectedStyle
+	};
+});
+const SettingsCustomInput = styled(InputBase)(({ theme, selected }) => {
+	const settingsControlSelectedStyles = settingsControlSelected(theme);
+	const selectedStyle = selected ? { "&:not(:focus)": { ...settingsControlSelectedStyles } } : {};
+	return {
+		height: "100%",
+		width: "100%",
+		[`.${inputBaseClasses.input}`]: {
+			height: "100%",
+			width: "100%",
+			padding: 0,
+			textAlign: "center",
+			"&::placeholder": {
+				fontSize: "1rem",
+				fontWeight: 700,
+				opacity: 1
+			},
+			"&:focus": { ...settingsControlSelectedStyles },
+			...selectedStyle
+		}
+	};
+});
+const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(1.25),
+	marginTop: theme.spacing(1.5)
+}));
+//#endregion
+export { SettingsCustomInput, SettingsDefaultButton, SettingsFieldSet, SlippageLimitsWarningContainer };
+
+//# sourceMappingURL=SlippageSettings.style.js.map

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlippageSettings.style.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport {\n  Box,\n  ButtonBase,\n  InputBase,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsFieldSet: React.FC<\n  React.ComponentProps<typeof Box> & SettingsControlProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(0.5),\n  height: '3.5rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,\n  }),\n  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,\n})\n\ninterface SettingsControlProps {\n  selected?: boolean\n}\n\nexport const SettingsDefaultButton: React.FC<\n  React.ComponentProps<typeof ButtonBase> & SettingsControlProps\n> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    fontSize: '1rem',\n    fontWeight: 700,\n    '&:focus': {\n      ...settingsControlSelectedStyles,\n    },\n    ...selectedStyle,\n  }\n})\n\nexport const SettingsCustomInput: React.FC<\n  React.ComponentProps<typeof InputBase> & SettingsControlProps\n> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    [`.${inputBaseClasses.input}`]: {\n      height: '100%',\n      width: '100%',\n      padding: 0,\n      textAlign: 'center',\n      '&::placeholder': {\n        fontSize: '1rem',\n        fontWeight: 700,\n        opacity: 1,\n      },\n      '&:focus': {\n        ...settingsControlSelectedStyles,\n      },\n      ...selectedStyle,\n    },\n  }\n})\n\nexport const SlippageLimitsWarningContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.25),\n  marginTop: theme.spacing(1.5),\n}))\n"],"mappings":";;AAUA,MAAa,mBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,EAAG;CAC1B,KAAK,MAAM,QAAQ,EAAG;CACtB,QAAQ;CACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF,CAAC;AACH,EAAE;AAEF,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpF,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW;EAC5E,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,WAAW;CACpF,CAAC;CACD,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;AACtD;AAMA,MAAa,wBAET,OAAO,UAAU,GAAyB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,KAAK;CACnE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,8BACL,EACF,IACA,CAAC;CAEL,OAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,8BACL;EACA,GAAG;CACL;AACF,CAAC;AAED,MAAa,sBAET,OAAO,SAAS,GAAyB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,KAAK;CACnE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,8BACL,EACF,IACA,CAAC;CAEL,OAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;GACX;GACA,WAAW,EACT,GAAG,8BACL;GACA,GAAG;EACL;CACF;AACF,CAAC;AAED,MAAa,iCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,IAAI;CACvB,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE"}

package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js

@@ -0,0 +1,75 @@
+import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { formatInputAmount } from "../../utils/format.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { Switch as Switch$1 } from "../../components/Switch.js";
+import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+import { SettingsCustomInput, SettingsFieldSet } from "./SlippageSettings/SlippageSettings.style.js";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import AttachMoney from "@mui/icons-material/AttachMoney";
+//#region src/pages/SettingsPage/SmallBalanceFilterSettings.tsx
+const defaultThreshold = "0.01";
+const SmallBalanceFilterSettings = () => {
+	const { t } = useTranslation();
+	const { smallBalanceThreshold } = useSettings(["smallBalanceThreshold"]);
+	const { setValue } = useSettingsActions();
+	const [inputValue, setInputValue] = useState(smallBalanceThreshold ?? defaultThreshold);
+	const buttonRef = useRef(null);
+	const inputRef = useRef(null);
+	const formatAndSetThreshold = (inputValue, returnInitial = false) => {
+		const formattedValue = formatInputAmount(inputValue.replace("$", ""), 2, returnInitial);
+		if (returnInitial) setInputValue(formattedValue);
+		else {
+			const formattedOrDefault = formattedValue || defaultThreshold;
+			setInputValue(formattedOrDefault);
+			setValue("smallBalanceThreshold", formattedOrDefault);
+		}
+	};
+	const handleInputUpdate = (event) => {
+		formatAndSetThreshold(event.target.value, true);
+	};
+	const handleInputBlur = (event) => {
+		formatAndSetThreshold(event.target.value, false);
+	};
+	const handleHideSmallBalancesChange = (event) => {
+		setValue("smallBalanceThreshold", event.target.checked ? defaultThreshold : void 0);
+		if (buttonRef.current) buttonRef.current?.toggleExpanded(event.target.checked);
+	};
+	const handleExpanded = () => {
+		if (inputRef.current) inputRef.current.focus();
+	};
+	useEffect(() => {
+		setInputValue(smallBalanceThreshold ?? defaultThreshold);
+	}, [smallBalanceThreshold]);
+	return /* @__PURE__ */ jsx(SettingCardExpandable, {
+		ref: buttonRef,
+		value: /* @__PURE__ */ jsx(Switch$1, {
+			checked: !!smallBalanceThreshold,
+			onChange: handleHideSmallBalancesChange,
+			"aria-label": t("settings.hideSmallBalances")
+		}),
+		icon: /* @__PURE__ */ jsx(AttachMoney, {}),
+		title: t("settings.hideSmallBalances"),
+		disabled: !smallBalanceThreshold,
+		keepValueVisible: true,
+		onEntered: handleExpanded,
+		children: /* @__PURE__ */ jsx(Box, {
+			sx: { mt: 1.5 },
+			children: /* @__PURE__ */ jsx(SettingsFieldSet, { children: /* @__PURE__ */ jsx(SettingsCustomInput, {
+				inputRef,
+				selected: true,
+				inputProps: { inputMode: "decimal" },
+				onChange: handleInputUpdate,
+				onBlur: handleInputBlur,
+				value: `$${inputValue}`,
+				autoComplete: "off"
+			}) })
+		})
+	});
+};
+//#endregion
+export { SmallBalanceFilterSettings };
+
+//# sourceMappingURL=SmallBalanceFilterSettings.js.map

package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallBalanceFilterSettings.js","names":["Switch"],"sources":["../../../../src/pages/SettingsPage/SmallBalanceFilterSettings.tsx"],"sourcesContent":["import AttachMoney from '@mui/icons-material/AttachMoney'\nimport { Box } from '@mui/material'\nimport {\n  type ChangeEvent,\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Switch } from '../../components/Switch.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, usdDecimals } from '../../utils/format.js'\nimport {\n  SettingCardExpandable,\n  type SettingCardExpandableRef,\n} from './SettingsCard/SettingCardExpandable.js'\nimport {\n  SettingsCustomInput,\n  SettingsFieldSet,\n} from './SlippageSettings/SlippageSettings.style.js'\n\nconst defaultThreshold = '0.01'\n\nexport const SmallBalanceFilterSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])\n  const { setValue } = useSettingsActions()\n  const [inputValue, setInputValue] = useState(\n    smallBalanceThreshold ?? defaultThreshold\n  )\n  const buttonRef = useRef<SettingCardExpandableRef>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {\n    const value = inputValue.replace('$', '')\n    const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)\n    if (returnInitial) {\n      setInputValue(formattedValue)\n    } else {\n      const formattedOrDefault = formattedValue || defaultThreshold\n      setInputValue(formattedOrDefault)\n      setValue('smallBalanceThreshold', formattedOrDefault)\n    }\n  }\n\n  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetThreshold(event.target.value, true)\n  }\n\n  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetThreshold(event.target.value, false)\n  }\n\n  const handleHideSmallBalancesChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ) => {\n    setValue(\n      'smallBalanceThreshold',\n      event.target.checked ? defaultThreshold : undefined\n    )\n    if (buttonRef.current) {\n      buttonRef.current?.toggleExpanded(event.target.checked)\n    }\n  }\n\n  const handleExpanded = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  useEffect(() => {\n    setInputValue(smallBalanceThreshold ?? defaultThreshold)\n  }, [smallBalanceThreshold])\n\n  return (\n    <SettingCardExpandable\n      ref={buttonRef}\n      value={\n        <Switch\n          checked={!!smallBalanceThreshold}\n          onChange={handleHideSmallBalancesChange}\n          aria-label={t('settings.hideSmallBalances')}\n        />\n      }\n      icon={<AttachMoney />}\n      title={t('settings.hideSmallBalances')}\n      disabled={!smallBalanceThreshold}\n      keepValueVisible\n      onEntered={handleExpanded}\n    >\n      <Box\n        sx={{\n          mt: 1.5,\n        }}\n      >\n        <SettingsFieldSet>\n          <SettingsCustomInput\n            inputRef={inputRef}\n            selected\n            inputProps={{\n              inputMode: 'decimal',\n            }}\n            onChange={handleInputUpdate}\n            onBlur={handleInputBlur}\n            value={`$${inputValue}`}\n            autoComplete=\"off\"\n          />\n        </SettingsFieldSet>\n      </Box>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,mBAAmB;AAEzB,MAAa,mCAA6C;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,0BAA0B,YAAY,CAAC,uBAAuB,CAAC;CACvE,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAClC,yBAAyB,gBAC3B;CACA,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,yBAAyB,YAAoB,gBAAgB,UAAU;EAE3E,MAAM,iBAAiB,kBADT,WAAW,QAAQ,KAAK,EACO,GAAA,GAAgB,aAAa;EAC1E,IAAI,eACF,cAAc,cAAc;OACvB;GACL,MAAM,qBAAqB,kBAAkB;GAC7C,cAAc,kBAAkB;GAChC,SAAS,yBAAyB,kBAAkB;EACtD;CACF;CAEA,MAAM,qBAA2D,UAAU;EACzE,sBAAsB,MAAM,OAAO,OAAO,IAAI;CAChD;CAEA,MAAM,mBAAwD,UAAU;EACtE,sBAAsB,MAAM,OAAO,OAAO,KAAK;CACjD;CAEA,MAAM,iCACJ,UACG;EACH,SACE,yBACA,MAAM,OAAO,UAAU,mBAAmB,KAAA,CAC5C;EACA,IAAI,UAAU,SACZ,UAAU,SAAS,eAAe,MAAM,OAAO,OAAO;CAE1D;CAEA,MAAM,uBAAuB;EAC3B,IAAI,SAAS,SACX,SAAS,QAAQ,MAAM;CAE3B;CAEA,gBAAgB;EACd,cAAc,yBAAyB,gBAAgB;CACzD,GAAG,CAAC,qBAAqB,CAAC;CAE1B,OACE,oBAAC,uBAAD;EACE,KAAK;EACL,OACE,oBAACA,UAAD;GACE,SAAS,CAAC,CAAC;GACX,UAAU;GACV,cAAY,EAAE,4BAA4B;EAC3C,CAAA;EAEH,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB,OAAO,EAAE,4BAA4B;EACrC,UAAU,CAAC;EACX,kBAAA;EACA,WAAW;YAEX,oBAAC,KAAD;GACE,IAAI,EACF,IAAI,IACN;aAEA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IACY;IACV,UAAA;IACA,YAAY,EACV,WAAW,UACb;IACA,UAAU;IACV,QAAQ;IACR,OAAO,IAAI;IACX,cAAa;GACd,CAAA,EACe,CAAA;EACf,CAAA;CACgB,CAAA;AAE3B"}

package/dist/esm/pages/SettingsPage/ThemeSettings.js

@@ -0,0 +1,60 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { CardTabs, Tab as Tab$1 } from "../../components/Tabs/Tabs.style.js";
+import { CardValue } from "../../components/Card/CardButton.style.js";
+import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+import { Tooltip, useColorScheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import BrightnessAuto from "@mui/icons-material/BrightnessAuto";
+import LightMode from "@mui/icons-material/LightMode";
+import Nightlight from "@mui/icons-material/Nightlight";
+//#region src/pages/SettingsPage/ThemeSettings.tsx
+const themeIcons = {
+	light: LightMode,
+	dark: Nightlight,
+	system: BrightnessAuto
+};
+const ThemeTab = ({ title, value, Icon, ...props }) => /* @__PURE__ */ jsx(Tooltip, {
+	title,
+	children: /* @__PURE__ */ jsx(Tab$1, {
+		icon: Icon,
+		value,
+		...props,
+		disableRipple: true
+	})
+});
+const ThemeSettings = () => {
+	const { t } = useTranslation();
+	const { mode, setMode } = useColorScheme();
+	const { hiddenUI } = useWidgetConfig();
+	if (hiddenUI?.appearance) return null;
+	const appearance = mode ?? "system";
+	const ThemeIcon = themeIcons[appearance];
+	const handleThemeChange = (_, appearance) => {
+		setMode(appearance);
+	};
+	return /* @__PURE__ */ jsx(SettingCardExpandable, {
+		value: /* @__PURE__ */ jsxs(CardValue, { children: [t(`button.${appearance}`), " "] }),
+		icon: /* @__PURE__ */ jsx(ThemeIcon, {}),
+		title: t("settings.appearance"),
+		children: /* @__PURE__ */ jsx(CardTabs, {
+			value: appearance,
+			"aria-label": "tabs",
+			indicatorColor: "primary",
+			onChange: handleThemeChange,
+			sx: { mt: 1.5 },
+			children: Object.entries(themeIcons).map(([theme, Icon]) => {
+				const supportedThemeOption = theme;
+				return /* @__PURE__ */ jsx(ThemeTab, {
+					title: t(`button.${supportedThemeOption}`),
+					value: supportedThemeOption,
+					Icon: /* @__PURE__ */ jsx(Icon, {})
+				}, supportedThemeOption);
+			})
+		})
+	});
+};
+//#endregion
+export { ThemeSettings };
+
+//# sourceMappingURL=ThemeSettings.js.map

package/dist/esm/pages/SettingsPage/ThemeSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSettings.js","names":["Tab"],"sources":["../../../../src/pages/SettingsPage/ThemeSettings.tsx"],"sourcesContent":["import BrightnessAuto from '@mui/icons-material/BrightnessAuto'\nimport LightMode from '@mui/icons-material/LightMode'\nimport Nightlight from '@mui/icons-material/Nightlight'\nimport { Tooltip, useColorScheme } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { CardValue } from '../../components/Card/CardButton.style.js'\nimport { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { Appearance } from '../../types/widget.js'\nimport { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'\n\nconst themeIcons = {\n  light: LightMode,\n  dark: Nightlight,\n  system: BrightnessAuto,\n}\n\ninterface ThemeTabProps {\n  title: string\n  value: Appearance\n  Icon: React.ReactElement\n}\n\n// If the Tab is not the direct child of the Tabs component you can loose the switching\n// The component passes the props to the Tab component so switching isn't lost\nconst ThemeTab: React.FC<ThemeTabProps> = ({\n  title,\n  value,\n  Icon,\n  ...props\n}) => (\n  <Tooltip title={title}>\n    <Tab icon={Icon} value={value} {...props} disableRipple />\n  </Tooltip>\n)\n\nexport const ThemeSettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { mode, setMode } = useColorScheme()\n  const { hiddenUI } = useWidgetConfig()\n\n  if (hiddenUI?.appearance) {\n    return null\n  }\n\n  const appearance = mode ?? 'system'\n\n  const ThemeIcon = themeIcons[appearance]\n\n  const handleThemeChange = (\n    _: React.SyntheticEvent,\n    appearance: Appearance\n  ) => {\n    setMode(appearance)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}\n      icon={<ThemeIcon />}\n      title={t('settings.appearance')}\n    >\n      <CardTabs\n        value={appearance}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleThemeChange}\n        sx={{ mt: 1.5 }}\n      >\n        {Object.entries(themeIcons).map(([theme, Icon]) => {\n          const supportedThemeOption = theme as Appearance\n\n          return (\n            <ThemeTab\n              key={supportedThemeOption}\n              title={t(`button.${supportedThemeOption}`)}\n              value={supportedThemeOption}\n              Icon={<Icon />}\n            />\n          )\n        })}\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,QAAQ;AACV;AAUA,MAAM,YAAqC,EACzC,OACA,OACA,MACA,GAAG,YAEH,oBAAC,SAAD;CAAgB;WACd,oBAACA,OAAD;EAAK,MAAM;EAAa;EAAO,GAAI;EAAO,eAAA;CAAe,CAAA;AAClD,CAAA;AAGX,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,YAAY,eAAe;CACzC,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,UAAU,YACZ,OAAO;CAGT,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAY,WAAW;CAE7B,MAAM,qBACJ,GACA,eACG;EACH,QAAQ,UAAU;CACpB;CAEA,OACE,oBAAC,uBAAD;EACE,OAAO,qBAAC,WAAD,EAAA,UAAA,CAAY,EAAE,UAAU,YAAY,GAAE,GAAY,EAAA,CAAA;EACzD,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OAAO,EAAE,qBAAqB;YAE9B,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aAEb,OAAO,QAAQ,UAAU,EAAE,KAAK,CAAC,OAAO,UAAU;IACjD,MAAM,uBAAuB;IAE7B,OACE,oBAAC,UAAD;KAEE,OAAO,EAAE,UAAU,sBAAsB;KACzC,OAAO;KACP,MAAM,oBAAC,MAAD,CAAO,CAAA;IACd,GAJM,oBAIN;GAEL,CAAC;EACO,CAAA;CACW,CAAA;AAE3B"}

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js

@@ -0,0 +1,16 @@
+import { useContactSupport } from "../../hooks/useContactSupport.js";
+import { ButtonChip } from "./ContactSupportButton.style.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionDetailsPage/ContactSupportButton.tsx
+const ContactSupportButton = ({ supportId }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(ButtonChip, {
+		onClick: useContactSupport(supportId),
+		children: t("button.contactSupport")
+	});
+};
+//#endregion
+export { ContactSupportButton };
+
+//# sourceMappingURL=ContactSupportButton.js.map

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSupportButton.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useContactSupport } from '../../hooks/useContactSupport.js'\nimport { ButtonChip } from './ContactSupportButton.style.js'\n\ninterface ContactSupportButtonProps {\n  supportId?: string\n}\n\nexport const ContactSupportButton = ({\n  supportId,\n}: ContactSupportButtonProps): JSX.Element => {\n  const { t } = useTranslation()\n  const handleContactSupport = useContactSupport(supportId)\n\n  return (\n    <ButtonChip onClick={handleContactSupport}>\n      {t('button.contactSupport')}\n    </ButtonChip>\n  )\n}\n"],"mappings":";;;;;AASA,MAAa,wBAAwB,EACnC,gBAC4C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAG7B,OACE,oBAAC,YAAD;EAAY,SAHe,kBAAkB,SAGL;YACrC,EAAE,uBAAuB;CAChB,CAAA;AAEhB"}

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.style.js

@@ -0,0 +1,14 @@
+import { ButtonTertiary } from "../../components/ButtonTertiary.js";
+import { styled } from "@mui/material";
+//#region src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx
+const ButtonChip = styled(ButtonTertiary)(({ theme }) => ({
+	padding: theme.spacing(.5, 1.5),
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	height: "auto"
+}));
+//#endregion
+export { ButtonChip };
+
+//# sourceMappingURL=ContactSupportButton.style.js.map

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSupportButton.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\n\nexport const ButtonChip: React.FC<React.ComponentProps<typeof ButtonTertiary>> =\n  styled(ButtonTertiary)(({ theme }) => ({\n    padding: theme.spacing(0.5, 1.5),\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    height: 'auto',\n  }))\n"],"mappings":";;;AAIA,MAAa,aACX,OAAO,cAAc,GAAG,EAAE,aAAa;CACrC,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;AACV,EAAE"}

package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.js

@@ -0,0 +1,28 @@
+import { Card } from "../../components/Card/Card.js";
+import { CardTitle } from "../../components/Card/CardTitle.js";
+import { StepActionsList } from "../../components/StepActions/StepActionsList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionDetailsPage/ReceiptsCard.tsx
+const ReceiptsCard = ({ route }) => {
+	const { t } = useTranslation();
+	const toAddress = route.toAddress;
+	return /* @__PURE__ */ jsxs(Card, {
+		type: "default",
+		indented: true,
+		children: [/* @__PURE__ */ jsx(CardTitle, {
+			sx: {
+				padding: 0,
+				mb: 2
+			},
+			children: t("main.receipts")
+		}), /* @__PURE__ */ jsx(StepActionsList, {
+			route,
+			toAddress
+		})]
+	});
+};
+//#endregion
+export { ReceiptsCard };
+
+//# sourceMappingURL=ReceiptsCard.js.map

package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiptsCard.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ReceiptsCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActionsList } from '../../components/StepActions/StepActionsList.js'\n\ninterface ReceiptsCardProps {\n  route: RouteExtended\n}\n\nexport const ReceiptsCard = ({ route }: ReceiptsCardProps): JSX.Element => {\n  const { t } = useTranslation()\n  const toAddress = route.toAddress\n\n  return (\n    <Card type=\"default\" indented>\n      <CardTitle sx={{ padding: 0, mb: 2 }}>{t('main.receipts')}</CardTitle>\n      <StepActionsList route={route} toAddress={toAddress} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,gBAAgB,EAAE,YAA4C;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,YAAY,MAAM;CAExB,OACE,qBAAC,MAAD;EAAM,MAAK;EAAU,UAAA;YAArB,CACE,oBAAC,WAAD;GAAW,IAAI;IAAE,SAAS;IAAG,IAAI;GAAE;aAAI,EAAE,eAAe;EAAa,CAAA,GACrE,oBAAC,iBAAD;GAAwB;GAAkB;EAAY,CAAA,CAClD;;AAEV"}

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js

@@ -0,0 +1,84 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import "../../config/constants.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { PageContainer } from "../../components/PageContainer.js";
+import { getSourceTxHash } from "../../stores/routes/utils.js";
+import { useRouteExecutionStore } from "../../stores/routes/RouteExecutionStore.js";
+import { useTools } from "../../hooks/useTools.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { buildRouteFromTxHistory } from "../../utils/converters.js";
+import { TransactionCard } from "../../components/TransactionCard/TransactionCard.js";
+import { ContractComponent } from "../../components/ContractComponent/ContractComponent.js";
+import { useTransactionDetails } from "../../hooks/useTransactionDetails.js";
+import { ReceiptsCard } from "./ReceiptsCard.js";
+import { TransactionDetailsSkeleton } from "./TransactionDetailsSkeleton.js";
+import { TransferIdCard } from "./TransferIdCard.js";
+import { useEffect, useMemo } from "react";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
+const TransactionDetailsPage = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { mode, modeOptions, contractSecondaryComponent, explorerUrls } = useWidgetConfig();
+	const { search } = useLocation();
+	const { tools } = useTools();
+	const { getTransactionLink } = useExplorer();
+	const storedRouteExecution = useRouteExecutionStore((store) => search?.routeId ? store.routes[search.routeId] : void 0);
+	const { transaction, isLoading } = useTransactionDetails(!storedRouteExecution && search?.transactionHash);
+	useHeader(mode === "custom" ? t(`header.${modeOptions?.custom?.type ?? "checkout"}Details`) : t("header.transactionDetails"));
+	const routeExecution = useMemo(() => {
+		if (storedRouteExecution) return storedRouteExecution;
+		if (isLoading) return;
+		if (transaction) return buildRouteFromTxHistory(transaction, tools);
+	}, [
+		isLoading,
+		storedRouteExecution,
+		tools,
+		transaction
+	]);
+	useEffect(() => {
+		if (!isLoading && !routeExecution) navigate({ to: navigationRoutes.home });
+	}, [
+		isLoading,
+		navigate,
+		routeExecution
+	]);
+	const explorerUrl = explorerUrls?.internal?.[0];
+	const url = typeof explorerUrl === "string" ? explorerUrl : explorerUrl?.url;
+	let supportId = getSourceTxHash(routeExecution?.route) ?? routeExecution?.route.id ?? "";
+	const internalTxLink = routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink;
+	const externalTxLink = routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink;
+	const txLink = (url ? internalTxLink?.replace("https://scan.li.fi", url) : internalTxLink) || externalTxLink || getTransactionLink({ txHash: supportId });
+	if (process.env.NODE_ENV === "development") supportId += `_${routeExecution?.route.id}`;
+	const startedAt = new Date(routeExecution?.route.steps[0].execution?.startedAt ?? 0);
+	if (isLoading && !storedRouteExecution) return /* @__PURE__ */ jsx(TransactionDetailsSkeleton, {});
+	if (!routeExecution?.route) return null;
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		bottomGutters: true,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		},
+		children: [
+			/* @__PURE__ */ jsx(TransactionCard, {
+				route: routeExecution.route,
+				date: startedAt
+			}),
+			mode === "custom" && contractSecondaryComponent ? /* @__PURE__ */ jsx(ContractComponent, { children: contractSecondaryComponent }) : null,
+			/* @__PURE__ */ jsx(ReceiptsCard, { route: routeExecution.route }),
+			supportId ? /* @__PURE__ */ jsx(TransferIdCard, {
+				transferId: supportId,
+				txLink
+			}) : null
+		]
+	});
+};
+//#endregion
+export { TransactionDetailsPage };
+
+//# sourceMappingURL=TransactionDetailsPage.js.map

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailsPage.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"sourcesContent":["import type { FullStatusData } from '@lifi/sdk'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { internalExplorerUrl } from '../../config/constants.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useTools } from '../../hooks/useTools.js'\nimport { useTransactionDetails } from '../../hooks/useTransactionDetails.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { buildRouteFromTxHistory } from '../../utils/converters.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ReceiptsCard } from './ReceiptsCard.js'\nimport { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'\nimport { TransferIdCard } from './TransferIdCard.js'\n\nexport const TransactionDetailsPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, contractSecondaryComponent, explorerUrls } =\n    useWidgetConfig()\n  const { search }: any = useLocation()\n  const { tools } = useTools()\n  const { getTransactionLink } = useExplorer()\n  const storedRouteExecution = useRouteExecutionStore((store) =>\n    search?.routeId ? store.routes[search.routeId] : undefined\n  )\n  const { transaction, isLoading } = useTransactionDetails(\n    !storedRouteExecution && search?.transactionHash\n  )\n\n  const title =\n    mode === 'custom'\n      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}Details`)\n      : t('header.transactionDetails')\n  useHeader(title)\n\n  const routeExecution = useMemo(() => {\n    if (storedRouteExecution) {\n      return storedRouteExecution\n    }\n    if (isLoading) {\n      return\n    }\n    if (transaction) {\n      return buildRouteFromTxHistory(transaction as FullStatusData, tools)\n    }\n  }, [isLoading, storedRouteExecution, tools, transaction])\n\n  useEffect(() => {\n    if (!isLoading && !routeExecution) {\n      navigate({ to: navigationRoutes.home })\n    }\n  }, [isLoading, navigate, routeExecution])\n\n  const explorerUrl = explorerUrls?.internal?.[0]\n  const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url\n\n  const sourceTxHash = getSourceTxHash(routeExecution?.route)\n  let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''\n\n  const internalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink\n  const externalTxLink =\n    routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink\n\n  const txLink =\n    (url\n      ? internalTxLink?.replace(internalExplorerUrl, url)\n      : internalTxLink) ||\n    externalTxLink ||\n    getTransactionLink({ txHash: supportId })\n\n  if (process.env.NODE_ENV === 'development') {\n    supportId += `_${routeExecution?.route.id}`\n  }\n\n  const startedAt = new Date(\n    routeExecution?.route.steps[0].execution?.startedAt ?? 0\n  )\n\n  if (isLoading && !storedRouteExecution) {\n    return <TransactionDetailsSkeleton />\n  }\n\n  if (!routeExecution?.route) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionCard route={routeExecution.route} date={startedAt} />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ReceiptsCard route={routeExecution.route} />\n      {supportId ? (\n        <TransferIdCard transferId={supportId} txLink={txLink} />\n      ) : null}\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,+BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,4BAA4B,iBACrD,gBAAgB;CAClB,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,uBAAuB,YAAY;CAC3C,MAAM,uBAAuB,wBAAwB,UACnD,QAAQ,UAAU,MAAM,OAAO,OAAO,WAAW,KAAA,CACnD;CACA,MAAM,EAAE,aAAa,cAAc,sBACjC,CAAC,wBAAwB,QAAQ,eACnC;CAMA,UAHE,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,QAAQ,IAC5D,EAAE,2BAA2B,CACpB;CAEf,MAAM,iBAAiB,cAAc;EACnC,IAAI,sBACF,OAAO;EAET,IAAI,WACF;EAEF,IAAI,aACF,OAAO,wBAAwB,aAA+B,KAAK;CAEvE,GAAG;EAAC;EAAW;EAAsB;EAAO;CAAW,CAAC;CAExD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,gBACjB,SAAS,EAAE,IAAI,iBAAiB,KAAK,CAAC;CAE1C,GAAG;EAAC;EAAW;EAAU;CAAc,CAAC;CAExC,MAAM,cAAc,cAAc,WAAW;CAC7C,MAAM,MAAM,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAGzE,IAAI,YADiB,gBAAgB,gBAAgB,KAC1B,KAAK,gBAAgB,MAAM,MAAM;CAE5D,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,GAAG,WAAW;CACnD,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,GAAG,WAAW;CAEnD,MAAM,UACH,MACG,gBAAgB,QAAA,sBAA6B,GAAG,IAChD,mBACJ,kBACA,mBAAmB,EAAE,QAAQ,UAAU,CAAC;CAE1C,IAAI,QAAQ,IAAI,aAAa,eAC3B,aAAa,IAAI,gBAAgB,MAAM;CAGzC,MAAM,YAAY,IAAI,KACpB,gBAAgB,MAAM,MAAM,GAAG,WAAW,aAAa,CACzD;CAEA,IAAI,aAAa,CAAC,sBAChB,OAAO,oBAAC,4BAAD,CAA6B,CAAA;CAGtC,IAAI,CAAC,gBAAgB,OACnB,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;YAHzD;GAKE,oBAAC,iBAAD;IAAiB,OAAO,eAAe;IAAO,MAAM;GAAY,CAAA;GAC/D,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,cAAD,EAAc,OAAO,eAAe,MAAQ,CAAA;GAC3C,YACC,oBAAC,gBAAD;IAAgB,YAAY;IAAmB;GAAS,CAAA,IACtD;EACS;;AAEnB"}

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js

@@ -0,0 +1,80 @@
+import { PageContainer } from "../../components/PageContainer.js";
+import { Card as Card$1 } from "../../components/Card/Card.js";
+import { TokenSkeleton } from "../../components/Token/Token.js";
+import { Box, Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx
+const TransactionDetailsSkeleton = () => {
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		topGutters: true,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				pb: 1,
+				pt: .75,
+				display: "flex",
+				flex: 1,
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				width: 96,
+				height: 20,
+				variant: "text"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				width: 40,
+				height: 20,
+				variant: "text"
+			})]
+		}), /* @__PURE__ */ jsxs(Card$1, {
+			sx: {
+				paddingX: 2,
+				marginBottom: 3
+			},
+			children: [/* @__PURE__ */ jsx(Box, {
+				sx: { pt: 2.5 },
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					width: 64,
+					height: 12,
+					variant: "rounded"
+				})
+			}), /* @__PURE__ */ jsxs(Box, {
+				sx: { py: 1 },
+				children: [
+					/* @__PURE__ */ jsx(Box, {
+						sx: { py: 1 },
+						children: /* @__PURE__ */ jsx(TokenSkeleton, {})
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						sx: { py: 1 },
+						children: /* @__PURE__ */ jsx(TokenSkeleton, { disableDescription: true })
+					}),
+					Array.from({ length: 3 }).map((_, key) => /* @__PURE__ */ jsxs(Box, {
+						sx: {
+							py: 1,
+							display: "flex",
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ jsx(Skeleton, {
+							variant: "rounded",
+							width: 40,
+							height: 40,
+							sx: { borderRadius: "100%" }
+						}), /* @__PURE__ */ jsx(Skeleton, {
+							sx: { ml: 2 },
+							width: 96,
+							height: 24,
+							variant: "text"
+						})]
+					}, key)),
+					/* @__PURE__ */ jsx(Box, {
+						sx: { py: 1 },
+						children: /* @__PURE__ */ jsx(TokenSkeleton, {})
+					})
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { TransactionDetailsSkeleton };
+
+//# sourceMappingURL=TransactionDetailsSkeleton.js.map

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailsSkeleton.js","names":["Card"],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenSkeleton } from '../../components/Token/Token.js'\n\nexport const TransactionDetailsSkeleton = (): JSX.Element => {\n  return (\n    <PageContainer topGutters>\n      <Box\n        sx={{\n          pb: 1,\n          pt: 0.75,\n          display: 'flex',\n          flex: 1,\n          justifyContent: 'space-between',\n        }}\n      >\n        <Skeleton width={96} height={20} variant=\"text\" />\n        <Skeleton width={40} height={20} variant=\"text\" />\n      </Box>\n      <Card sx={{ paddingX: 2, marginBottom: 3 }}>\n        <Box\n          sx={{\n            pt: 2.5,\n          }}\n        >\n          <Skeleton width={64} height={12} variant=\"rounded\" />\n        </Box>\n        <Box\n          sx={{\n            py: 1,\n          }}\n        >\n          {/* Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n          {/* Bridge skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton disableDescription />\n          </Box>\n          {/* Steps skeleton */}\n          {Array.from({ length: 3 }).map((_, key) => (\n            <Box\n              key={key}\n              sx={{\n                py: 1,\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <Skeleton\n                variant=\"rounded\"\n                width={40}\n                height={40}\n                sx={{\n                  borderRadius: '100%',\n                }}\n              />\n              <Skeleton\n                sx={{\n                  ml: 2,\n                }}\n                width={96}\n                height={24}\n                variant=\"text\"\n              />\n            </Box>\n          ))}\n          {/* Receiving Token skeleton */}\n          <Box\n            sx={{\n              py: 1,\n            }}\n          >\n            <TokenSkeleton />\n          </Box>\n        </Box>\n      </Card>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,mCAAgD;CAC3D,OACE,qBAAC,eAAD;EAAe,YAAA;YAAf,CACE,qBAAC,KAAD;GACE,IAAI;IACF,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,MAAM;IACN,gBAAgB;GAClB;aAPF,CASE,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,GACjD,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAI,SAAQ;GAAQ,CAAA,CAC9C;MACL,qBAACA,QAAD;GAAM,IAAI;IAAE,UAAU;IAAG,cAAc;GAAE;aAAzC,CACE,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,IACN;cAEA,oBAAC,UAAD;KAAU,OAAO;KAAI,QAAQ;KAAI,SAAQ;IAAW,CAAA;GACjD,CAAA,GACL,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,EACN;cAHF;KAME,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;KAEL,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,EAAe,oBAAA,KAAoB,CAAA;KAChC,CAAA;KAEJ,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,QACjC,qBAAC,KAAD;MAEE,IAAI;OACF,IAAI;OACJ,SAAS;OACT,YAAY;MACd;gBANF,CAQE,oBAAC,UAAD;OACE,SAAQ;OACR,OAAO;OACP,QAAQ;OACR,IAAI,EACF,cAAc,OAChB;MACD,CAAA,GACD,oBAAC,UAAD;OACE,IAAI,EACF,IAAI,EACN;OACA,OAAO;OACP,QAAQ;OACR,SAAQ;MACT,CAAA,CACE;QAvBE,GAuBF,CACN;KAED,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,eAAD,CAAgB,CAAA;KACb,CAAA;IACF;KACD;IACO;;AAEnB"}

package/dist/esm/pages/TransactionDetailsPage/TransferIdCard.js

@@ -0,0 +1,65 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { Card as Card$1 } from "../../components/Card/Card.js";
+import { CardIconButton } from "../../components/Card/CardIconButton.js";
+import { CardTitle } from "../../components/Card/CardTitle.js";
+import { ContactSupportButton } from "./ContactSupportButton.js";
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNew from "@mui/icons-material/OpenInNew";
+//#region src/pages/TransactionDetailsPage/TransferIdCard.tsx
+const TransferIdCard = ({ transferId, txLink }) => {
+	const { t } = useTranslation();
+	const { hiddenUI } = useWidgetConfig();
+	const copyTransferId = async () => {
+		await navigator.clipboard.writeText(transferId);
+	};
+	const openTransferIdInExplorer = () => {
+		window.open(txLink, "_blank");
+	};
+	return /* @__PURE__ */ jsxs(Card$1, {
+		type: "default",
+		indented: true,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { p: 0 },
+				children: t("main.transferId")
+			}), /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					gap: 1,
+					display: "flex"
+				},
+				children: [
+					/* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						onClick: copyTransferId,
+						children: /* @__PURE__ */ jsx(ContentCopyRounded, { fontSize: "inherit" })
+					}),
+					txLink ? /* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						onClick: openTransferIdInExplorer,
+						children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "inherit" })
+					}) : null,
+					!hiddenUI?.contactSupport ? /* @__PURE__ */ jsx(ContactSupportButton, { supportId: transferId }) : null
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				pt: 2,
+				wordBreak: "break-all"
+			},
+			children: transferId
+		})]
+	});
+};
+//#endregion
+export { TransferIdCard };
+
+//# sourceMappingURL=TransferIdCard.js.map

package/dist/esm/pages/TransactionDetailsPage/TransferIdCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferIdCard.js","names":["Card"],"sources":["../../../../src/pages/TransactionDetailsPage/TransferIdCard.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport { Box, Typography } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardIconButton } from '../../components/Card/CardIconButton.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { ContactSupportButton } from './ContactSupportButton.js'\n\ninterface TransferIdCardProps {\n  transferId: string\n  txLink?: string\n}\n\nexport const TransferIdCard = ({\n  transferId,\n  txLink,\n}: TransferIdCardProps): JSX.Element => {\n  const { t } = useTranslation()\n  const { hiddenUI } = useWidgetConfig()\n\n  const copyTransferId = async () => {\n    await navigator.clipboard.writeText(transferId)\n  }\n\n  const openTransferIdInExplorer = () => {\n    window.open(txLink, '_blank')\n  }\n\n  return (\n    <Card type=\"default\" indented>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n        }}\n      >\n        <CardTitle sx={{ p: 0 }}>{t('main.transferId')}</CardTitle>\n        <Box\n          sx={{\n            gap: 1,\n            display: 'flex',\n          }}\n        >\n          <CardIconButton size=\"small\" onClick={copyTransferId}>\n            <ContentCopyRounded fontSize=\"inherit\" />\n          </CardIconButton>\n          {txLink ? (\n            <CardIconButton size=\"small\" onClick={openTransferIdInExplorer}>\n              <OpenInNew fontSize=\"inherit\" />\n            </CardIconButton>\n          ) : null}\n          {!hiddenUI?.contactSupport ? (\n            <ContactSupportButton supportId={transferId} />\n          ) : null}\n        </Box>\n      </Box>\n      <Typography\n        variant=\"body2\"\n        sx={{\n          pt: 2,\n          wordBreak: 'break-all',\n        }}\n      >\n        {transferId}\n      </Typography>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,kBAAkB,EAC7B,YACA,aACsC;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,gBAAgB;CAErC,MAAM,iBAAiB,YAAY;EACjC,MAAM,UAAU,UAAU,UAAU,UAAU;CAChD;CAEA,MAAM,iCAAiC;EACrC,OAAO,KAAK,QAAQ,QAAQ;CAC9B;CAEA,OACE,qBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;YAArB,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;aALF,CAOE,oBAAC,WAAD;IAAW,IAAI,EAAE,GAAG,EAAE;cAAI,EAAE,iBAAiB;GAAa,CAAA,GAC1D,qBAAC,KAAD;IACE,IAAI;KACF,KAAK;KACL,SAAS;IACX;cAJF;KAME,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,oBAAD,EAAoB,UAAS,UAAW,CAAA;KAC1B,CAAA;KACf,SACC,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,WAAD,EAAW,UAAS,UAAW,CAAA;KACjB,CAAA,IACd;KACH,CAAC,UAAU,iBACV,oBAAC,sBAAD,EAAsB,WAAW,WAAa,CAAA,IAC5C;IACD;KACF;MACL,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,WAAW;GACb;aAEC;EACS,CAAA,CACR;;AAEV"}