@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

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

@@ -1 +1 @@
-{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,YAAY,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAClE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,UAC7D;CACF,EAAE"}
+{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,YAAY,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACzE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACpE;CACF,EAAE"}

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

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { PageContainer } from "../../components/PageContainer.js";
 import { useHeader } from "../../hooks/useHeader.js";
 import { SettingsList } from "./SettingsCard/SettingCard.style.js";
@@ -27,7 +27,7 @@ const SettingsPage = () => {
 			/* @__PURE__ */ jsx(RoutePrioritySettings, {}),
 			/* @__PURE__ */ jsx(GasPriceSettings, {}),
 			/* @__PURE__ */ jsx(SlippageSettings, {}),
-			!hiddenUI?.includes(HiddenUI.HideSmallBalances) && /* @__PURE__ */ jsx(SmallBalanceFilterSettings, {}),
+			!hiddenUI?.includes("hideSmallBalances") && /* @__PURE__ */ jsx(SmallBalanceFilterSettings, {}),
 			/* @__PURE__ */ jsx(BridgeAndExchangeSettings, { type: "Bridges" }),
 			/* @__PURE__ */ jsx(BridgeAndExchangeSettings, { type: "Exchanges" })
 		] }) }), /* @__PURE__ */ jsx(ResetSettingsButton, {})]

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../../../src/pages/SettingsPage/SettingsPage.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'\nimport { GasPriceSettings } from './GasPriceSettings.js'\nimport { LanguageSetting } from './LanguageSetting.js'\nimport { ResetSettingsButton } from './ResetSettingsButton.js'\nimport { RoutePrioritySettings } from './RoutePrioritySettings.js'\nimport { SettingsList } from './SettingsCard/SettingCard.style.js'\nimport { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'\nimport { SlippageSettings } from './SlippageSettings/SlippageSettings.js'\nimport { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'\nimport { ThemeSettings } from './ThemeSettings.js'\n\nexport const SettingsPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const { hiddenUI } = useWidgetConfig()\n  useHeader(t('header.settings'))\n\n  return (\n    <PageContainer bottomGutters>\n      <SettingsList>\n        <SettingsCardAccordion>\n          <ThemeSettings />\n          <LanguageSetting />\n          <RoutePrioritySettings />\n          <GasPriceSettings />\n          <SlippageSettings />\n          {!hiddenUI?.includes(HiddenUI.HideSmallBalances) && (\n            <SmallBalanceFilterSettings />\n          )}\n          <BridgeAndExchangeSettings type=\"Bridges\" />\n          <BridgeAndExchangeSettings type=\"Exchanges\" />\n        </SettingsCardAccordion>\n      </SettingsList>\n      <ResetSettingsButton />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAkC;CAC7C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,aAAa,iBAAiB;AACtC,WAAU,EAAE,kBAAkB,CAAC;AAE/B,QACE,qBAAC,eAAD;EAAe,eAAA;YAAf,CACE,oBAAC,cAAD,EAAA,UACE,qBAAC,uBAAD,EAAA,UAAA;GACE,oBAAC,eAAD,EAAiB,CAAA;GACjB,oBAAC,iBAAD,EAAmB,CAAA;GACnB,oBAAC,uBAAD,EAAyB,CAAA;GACzB,oBAAC,kBAAD,EAAoB,CAAA;GACpB,oBAAC,kBAAD,EAAoB,CAAA;GACnB,CAAC,UAAU,SAAS,SAAS,kBAAkB,IAC9C,oBAAC,4BAAD,EAA8B,CAAA;GAEhC,oBAAC,2BAAD,EAA2B,MAAK,WAAY,CAAA;GAC5C,oBAAC,2BAAD,EAA2B,MAAK,aAAc,CAAA;GACxB,EAAA,CAAA,EACX,CAAA,EACf,oBAAC,qBAAD,EAAuB,CAAA,CACT"}
+{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../../../src/pages/SettingsPage/SettingsPage.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'\nimport { GasPriceSettings } from './GasPriceSettings.js'\nimport { LanguageSetting } from './LanguageSetting.js'\nimport { ResetSettingsButton } from './ResetSettingsButton.js'\nimport { RoutePrioritySettings } from './RoutePrioritySettings.js'\nimport { SettingsList } from './SettingsCard/SettingCard.style.js'\nimport { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'\nimport { SlippageSettings } from './SlippageSettings/SlippageSettings.js'\nimport { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'\nimport { ThemeSettings } from './ThemeSettings.js'\n\nexport const SettingsPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const { hiddenUI } = useWidgetConfig()\n  useHeader(t('header.settings'))\n\n  return (\n    <PageContainer bottomGutters>\n      <SettingsList>\n        <SettingsCardAccordion>\n          <ThemeSettings />\n          <LanguageSetting />\n          <RoutePrioritySettings />\n          <GasPriceSettings />\n          <SlippageSettings />\n          {!hiddenUI?.includes(HiddenUI.HideSmallBalances) && (\n            <SmallBalanceFilterSettings />\n          )}\n          <BridgeAndExchangeSettings type=\"Bridges\" />\n          <BridgeAndExchangeSettings type=\"Exchanges\" />\n        </SettingsCardAccordion>\n      </SettingsList>\n      <ResetSettingsButton />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAkC;CAC7C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,aAAa,iBAAiB;AACtC,WAAU,EAAE,kBAAkB,CAAC;AAE/B,QACE,qBAAC,eAAD;EAAe,eAAA;YAAf,CACE,oBAAC,cAAD,EAAA,UACE,qBAAC,uBAAD,EAAA,UAAA;GACE,oBAAC,eAAD,EAAiB,CAAA;GACjB,oBAAC,iBAAD,EAAmB,CAAA;GACnB,oBAAC,uBAAD,EAAyB,CAAA;GACzB,oBAAC,kBAAD,EAAoB,CAAA;GACpB,oBAAC,kBAAD,EAAoB,CAAA;GACnB,CAAC,UAAU,SAAA,oBAAoC,IAC9C,oBAAC,4BAAD,EAA8B,CAAA;GAEhC,oBAAC,2BAAD,EAA2B,MAAK,WAAY,CAAA;GAC5C,oBAAC,2BAAD,EAA2B,MAAK,aAAc,CAAA;GACxB,EAAA,CAAA,EACX,CAAA,EACf,oBAAC,qBAAD,EAAuB,CAAA,CACT"}

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

@@ -6,15 +6,15 @@ const SettingsFieldSet = styled(Box)(({ theme }) => ({
 	padding: theme.spacing(.5),
 	gap: theme.spacing(.5),
 	height: "3.5rem",
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-	...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` })
+	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 rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+	boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	...theme.applyStyles("dark", {
-		backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-		boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`
+		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)`
 });

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

@@ -1 +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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,\n    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,\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,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,GAAI;CAC3B,KAAK,MAAM,QAAQ,GAAI;CACvB,QAAQ;CACR,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE,CAAC;CACH,EAAE;AAEH,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,oBAAoB,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAC7E,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,kBAAkB;EACrE,WAAW,oBAAoB,MAAM,KAAK,QAAQ,OAAO,kBAAkB;EAC5E,CAAC;CACF,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACrD;AAMD,MAAa,wBAET,OAAO,WAAW,EAAwB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,+BACJ;EACD,GAAG;EACJ;EACD;AAEF,MAAa,sBAET,OAAO,UAAU,EAAwB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACD,WAAW,EACT,GAAG,+BACJ;GACD,GAAG;GACJ;EACF;EACD;AAEF,MAAa,iCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,KAAK;CACxB,WAAW,MAAM,QAAQ,IAAI;CAC9B,EAAE"}
+{"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,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,GAAI;CAC3B,KAAK,MAAM,QAAQ,GAAI;CACvB,QAAQ;CACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E,CAAC;CACH,EAAE;AAEH,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;EACnF,CAAC;CACF,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACrD;AAMD,MAAa,wBAET,OAAO,WAAW,EAAwB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,+BACJ;EACD,GAAG;EACJ;EACD;AAEF,MAAa,sBAET,OAAO,UAAU,EAAwB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACD,WAAW,EACT,GAAG,+BACJ;GACD,GAAG;GACJ;EACF;EACD;AAEF,MAAa,iCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,KAAK;CACxB,WAAW,MAAM,QAAQ,IAAI;CAC9B,EAAE"}

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

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.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";
@@ -28,7 +28,7 @@ const ThemeSettings = () => {
 	const { t } = useTranslation();
 	const { mode, setMode } = useColorScheme();
 	const { hiddenUI } = useWidgetConfig();
-	if (hiddenUI?.includes(HiddenUI.Appearance)) return null;
+	if (hiddenUI?.includes("appearance")) return null;
 	const appearance = mode ?? "system";
 	const ThemeIcon = themeIcons[appearance];
 	const handleThemeChange = (_, appearance) => {

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

@@ -1 +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 { HiddenUI } 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?.includes(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":";;;;;;;;;;;;AAYA,MAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,QAAQ;CACT;AAUD,MAAM,YAAqC,EACzC,OACA,OACA,MACA,GAAG,YAEH,oBAAC,SAAD;CAAgB;WACd,oBAACA,OAAD;EAAK,MAAM;EAAa;EAAO,GAAI;EAAO,eAAA;EAAgB,CAAA;CAClD,CAAA;AAGZ,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,MAAM,YAAY,gBAAgB;CAC1C,MAAM,EAAE,aAAa,iBAAiB;AAEtC,KAAI,UAAU,SAAS,SAAS,WAAW,CACzC,QAAO;CAGT,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAY,WAAW;CAE7B,MAAM,qBACJ,GACA,eACG;AACH,UAAQ,WAAW;;AAGrB,QACE,oBAAC,uBAAD;EACE,OAAO,qBAAC,WAAD,EAAA,UAAA,CAAY,EAAE,UAAU,aAAa,EAAC,IAAa,EAAA,CAAA;EAC1D,MAAM,oBAAC,WAAD,EAAa,CAAA;EACnB,OAAO,EAAE,sBAAsB;YAE/B,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,KAAK;aAEd,OAAO,QAAQ,WAAW,CAAC,KAAK,CAAC,OAAO,UAAU;IACjD,MAAM,uBAAuB;AAE7B,WACE,oBAAC,UAAD;KAEE,OAAO,EAAE,UAAU,uBAAuB;KAC1C,OAAO;KACP,MAAM,oBAAC,MAAD,EAAQ,CAAA;KACd,EAJK,qBAIL;KAEJ;GACO,CAAA;EACW,CAAA"}
+{"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 { HiddenUI } 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?.includes(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":";;;;;;;;;;;;AAYA,MAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,QAAQ;CACT;AAUD,MAAM,YAAqC,EACzC,OACA,OACA,MACA,GAAG,YAEH,oBAAC,SAAD;CAAgB;WACd,oBAACA,OAAD;EAAK,MAAM;EAAa;EAAO,GAAI;EAAO,eAAA;EAAgB,CAAA;CAClD,CAAA;AAGZ,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,MAAM,YAAY,gBAAgB;CAC1C,MAAM,EAAE,aAAa,iBAAiB;AAEtC,KAAI,UAAU,SAAA,aAA6B,CACzC,QAAO;CAGT,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAY,WAAW;CAE7B,MAAM,qBACJ,GACA,eACG;AACH,UAAQ,WAAW;;AAGrB,QACE,oBAAC,uBAAD;EACE,OAAO,qBAAC,WAAD,EAAA,UAAA,CAAY,EAAE,UAAU,aAAa,EAAC,IAAa,EAAA,CAAA;EAC1D,MAAM,oBAAC,WAAD,EAAa,CAAA;EACnB,OAAO,EAAE,sBAAsB;YAE/B,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,KAAK;aAEd,OAAO,QAAQ,WAAW,CAAC,KAAK,CAAC,OAAO,UAAU;IACjD,MAAM,uBAAuB;AAE7B,WACE,oBAAC,UAAD;KAEE,OAAO,EAAE,UAAU,uBAAuB;KAC1C,OAAO;KACP,MAAM,oBAAC,MAAD,EAAQ,CAAA;KACd,EAJK,qBAIL;KAEJ;GACO,CAAA;EACW,CAAA"}

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

@@ -6,7 +6,7 @@ const ActionRowContainer = styled(Box)(({ theme }) => ({
 	gap: theme.spacing(1),
 	padding: theme.spacing(1),
 	borderRadius: theme.vars.shape.borderRadiusTertiary,
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`
 }));
 const ActionIconCircle = styled(Box)(({ theme }) => ({
 	display: "flex",
@@ -15,7 +15,7 @@ const ActionIconCircle = styled(Box)(({ theme }) => ({
 	width: 24,
 	height: 24,
 	borderRadius: "50%",
-	backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`
 }));
 const ActionRowLabel = styled(Typography)(({ theme }) => ({
 	flex: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  }))\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACxE,EAAE;AAEL,MAAa,mBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,0BAA0B,MAAM,KAAK,QAAQ,QAAQ,YAAY,SAAS,MAAM,KAAK,QAAQ,WAAW,MAAM;CAChI,EAAE;AAEL,MAAa,iBACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE"}
+{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  }))\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC/E,EAAE;AAEL,MAAa,mBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW,MAAM;CACpH,EAAE;AAEL,MAAa,iBACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE"}

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

@@ -14,7 +14,7 @@ const ExternalLink = styled(Link)(({ theme }) => ({
 	borderRadius: "50%",
 	textDecoration: "none",
 	color: theme.vars.palette.text.primary,
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 }));
 //#endregion
 export { ExternalLink, TransactionList };

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

@@ -1 +1 @@
-{"version":3,"file":"ReceiptsCard.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const TransactionList: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1.5),\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,IAAI;CACxB,EAAE;AAEL,MAAa,eAA4D,OACvE,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACF,EAAE"}
+{"version":3,"file":"ReceiptsCard.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const TransactionList: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1.5),\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,IAAI;CACxB,EAAE;AAEL,MAAa,eAA4D,OACvE,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACF,EAAE"}

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

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.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";
@@ -47,7 +47,7 @@ const TransferIdCard = ({ transferId, txLink }) => {
 						onClick: openTransferIdInExplorer,
 						children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "inherit" })
 					}) : null,
-					!hiddenUI?.includes(HiddenUI.ContactSupport) ? /* @__PURE__ */ jsx(ContactSupportButton, { supportId: transferId }) : null
+					!hiddenUI?.includes("contactSupport") ? /* @__PURE__ */ jsx(ContactSupportButton, { supportId: transferId }) : null
 				]
 			})]
 		}), /* @__PURE__ */ jsx(Typography, {

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

@@ -1 +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 { HiddenUI } from '../../types/widget.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?.includes(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":";;;;;;;;;;;;AAiBA,MAAa,kBAAkB,EAC7B,YACA,aACsC;CACtC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,iBAAiB,YAAY;AACjC,QAAM,UAAU,UAAU,UAAU,WAAW;;CAGjD,MAAM,iCAAiC;AACrC,SAAO,KAAK,QAAQ,SAAS;;AAG/B,QACE,qBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;YAArB,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IACjB;aALH,CAOE,oBAAC,WAAD;IAAW,IAAI,EAAE,GAAG,GAAG;cAAG,EAAE,kBAAkB;IAAa,CAAA,EAC3D,qBAAC,KAAD;IACE,IAAI;KACF,KAAK;KACL,SAAS;KACV;cAJH;KAME,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,oBAAD,EAAoB,UAAS,WAAY,CAAA;MAC1B,CAAA;KAChB,SACC,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,WAAD,EAAW,UAAS,WAAY,CAAA;MACjB,CAAA,GACf;KACH,CAAC,UAAU,SAAS,SAAS,eAAe,GAC3C,oBAAC,sBAAD,EAAsB,WAAW,YAAc,CAAA,GAC7C;KACA;MACF;MACN,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,WAAW;IACZ;aAEA;GACU,CAAA,CACR"}
+{"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 { HiddenUI } from '../../types/widget.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?.includes(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":";;;;;;;;;;;;AAiBA,MAAa,kBAAkB,EAC7B,YACA,aACsC;CACtC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,iBAAiB,YAAY;AACjC,QAAM,UAAU,UAAU,UAAU,WAAW;;CAGjD,MAAM,iCAAiC;AACrC,SAAO,KAAK,QAAQ,SAAS;;AAG/B,QACE,qBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;YAArB,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IACjB;aALH,CAOE,oBAAC,WAAD;IAAW,IAAI,EAAE,GAAG,GAAG;cAAG,EAAE,kBAAkB;IAAa,CAAA,EAC3D,qBAAC,KAAD;IACE,IAAI;KACF,KAAK;KACL,SAAS;KACV;cAJH;KAME,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,oBAAD,EAAoB,UAAS,WAAY,CAAA;MAC1B,CAAA;KAChB,SACC,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,WAAD,EAAW,UAAS,WAAY,CAAA;MACjB,CAAA,GACf;KACH,CAAC,UAAU,SAAA,iBAAiC,GAC3C,oBAAC,sBAAD,EAAsB,WAAW,YAAc,CAAA,GAC7C;KACA;MACF;MACN,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,WAAW;IACZ;aAEA;GACU,CAAA,CACR"}

package/dist/esm/pages/TransactionPage/ConfirmToAddressSheet.js

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useChain } from "../../hooks/useChain.js";
 import { AlertMessage } from "../../components/Messages/AlertMessage.js";
 import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
@@ -31,7 +31,7 @@ const ConfirmToAddressSheetContent = ({ onContinue, onClose, toAddress, toChainI
 	const ref = useRef(null);
 	useSetContentHeight(ref);
 	const handleContinue = () => {
-		emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {
+		emitter.emit("lowAddressActivityConfirmed", {
 			address: toAddress,
 			chainId: toChainId
 		});

package/dist/esm/pages/TransactionPage/ConfirmToAddressSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmToAddressSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ConfirmToAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n} from '../SendToWallet/SendToWalletPage.style.js'\n\ninterface ConfirmToAddressSheetProps {\n  onContinue: () => void\n  toAddress: string\n  toChainId: number\n}\n\ninterface ConfirmToAddressSheetContentProps extends ConfirmToAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmToAddressSheet: ForwardRefExoticComponent<\n  ConfirmToAddressSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, ConfirmToAddressSheetProps>((props, ref) => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmToAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n})\n\nconst ConfirmToAddressSheetContent: React.FC<\n  ConfirmToAddressSheetContentProps\n> = ({ onContinue, onClose, toAddress, toChainId }) => {\n  const { t } = useTranslation()\n  const { chain } = useChain(toChainId)\n  const emitter = useWidgetEvents()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  const handleContinue = () => {\n    emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {\n      address: toAddress,\n      chainId: toChainId,\n    })\n    onClose()\n    onContinue()\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={ref}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <Typography variant=\"h6\" sx={{ textAlign: 'center', mb: 2 }}>\n        {t('warning.title.lowAddressActivity')}\n      </Typography>\n      <SheetAddressContainer>\n        <Typography>{toAddress}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.lowAddressActivity', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAa,wBAET,YAAyD,OAAO,QAAQ;CAC1E,MAAM,oBAAoB;AACtB,MAAmC,SAAS,OAAO;;AAGvD,QACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,8BAAD;GAA8B,GAAI;GAAO,SAAS;GAAe,CAAA;EACrD,CAAA;EAEhB;AAEF,MAAM,gCAED,EAAE,YAAY,SAAS,WAAW,gBAAgB;CACrD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,UAAU,SAAS,UAAU;CACrC,MAAM,UAAU,iBAAiB;CACjC,MAAM,MAAM,OAAoB,KAAK;AACrC,qBAAoB,IAAI;CAExB,MAAM,uBAAuB;AAC3B,UAAQ,KAAK,YAAY,6BAA6B;GACpD,SAAS;GACT,SAAS;GACV,CAAC;AACF,WAAS;AACT,cAAY;;AAGd,QACE,qBAAC,4BAAD;EAAiC;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA,EAClB,CAAA;GAChB,oBAAC,YAAD;IAAY,SAAQ;IAAK,IAAI;KAAE,WAAW;KAAU,IAAI;KAAG;cACxD,EAAE,mCAAmC;IAC3B,CAAA;GACb,oBAAC,uBAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UAAa,WAAuB,CAAA,EACd,CAAA;GACxB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,gBAAgB;eACtD,EAAE,sCAAsC,EACvC,WAAW,OAAO,MACnB,CAAC;KACS,CAAA;IAEf,MAAM,oBAAC,gBAAD,EAAkB,CAAA;IACxB,WAAA;IACA,CAAA;GACF,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,gBAAgB;IACZ,CAAA,EACT,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAgB,WAAA;cAClD,EAAE,kBAAkB;IACd,CAAA,CACa,EAAA,CAAA;GACG"}
+{"version":3,"file":"ConfirmToAddressSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ConfirmToAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n} from '../SendToWallet/SendToWalletPage.style.js'\n\ninterface ConfirmToAddressSheetProps {\n  onContinue: () => void\n  toAddress: string\n  toChainId: number\n}\n\ninterface ConfirmToAddressSheetContentProps extends ConfirmToAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmToAddressSheet: ForwardRefExoticComponent<\n  ConfirmToAddressSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, ConfirmToAddressSheetProps>((props, ref) => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmToAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n})\n\nconst ConfirmToAddressSheetContent: React.FC<\n  ConfirmToAddressSheetContentProps\n> = ({ onContinue, onClose, toAddress, toChainId }) => {\n  const { t } = useTranslation()\n  const { chain } = useChain(toChainId)\n  const emitter = useWidgetEvents()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  const handleContinue = () => {\n    emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {\n      address: toAddress,\n      chainId: toChainId,\n    })\n    onClose()\n    onContinue()\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={ref}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <Typography variant=\"h6\" sx={{ textAlign: 'center', mb: 2 }}>\n        {t('warning.title.lowAddressActivity')}\n      </Typography>\n      <SheetAddressContainer>\n        <Typography>{toAddress}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.lowAddressActivity', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAa,wBAET,YAAyD,OAAO,QAAQ;CAC1E,MAAM,oBAAoB;AACtB,MAAmC,SAAS,OAAO;;AAGvD,QACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,8BAAD;GAA8B,GAAI;GAAO,SAAS;GAAe,CAAA;EACrD,CAAA;EAEhB;AAEF,MAAM,gCAED,EAAE,YAAY,SAAS,WAAW,gBAAgB;CACrD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,UAAU,SAAS,UAAU;CACrC,MAAM,UAAU,iBAAiB;CACjC,MAAM,MAAM,OAAoB,KAAK;AACrC,qBAAoB,IAAI;CAExB,MAAM,uBAAuB;AAC3B,UAAQ,KAAA,+BAA8C;GACpD,SAAS;GACT,SAAS;GACV,CAAC;AACF,WAAS;AACT,cAAY;;AAGd,QACE,qBAAC,4BAAD;EAAiC;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA,EAClB,CAAA;GAChB,oBAAC,YAAD;IAAY,SAAQ;IAAK,IAAI;KAAE,WAAW;KAAU,IAAI;KAAG;cACxD,EAAE,mCAAmC;IAC3B,CAAA;GACb,oBAAC,uBAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UAAa,WAAuB,CAAA,EACd,CAAA;GACxB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,gBAAgB;eACtD,EAAE,sCAAsC,EACvC,WAAW,OAAO,MACnB,CAAC;KACS,CAAA;IAEf,MAAM,oBAAC,gBAAD,EAAkB,CAAA;IACxB,WAAA;IACA,CAAA;GACF,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,gBAAgB;IACZ,CAAA,EACT,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAgB,WAAA;cAClD,EAAE,kBAAkB;IACd,CAAA,CACa,EAAA,CAAA;GACG"}

package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -59,7 +59,7 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
 		children: [
 			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
 				status: "warning",
-				mb: 1,
+				sx: { mb: 1 },
 				children: /* @__PURE__ */ jsx(WarningRounded, { color: "warning" })
 			}), /* @__PURE__ */ jsx(Typography, {
 				sx: {

package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExchangeRateBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\nexport interface ExchangeRateBottomSheetBase {\n  isOpen(): void\n  open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void\n  close(value?: boolean, bottomSheetClose?: boolean): void\n}\n\ninterface ExchangeRateBottomSheetProps {\n  data?: ExchangeRateUpdateParams\n  onContinue?(): void\n  onCancel?(): void\n}\n\nexport const ExchangeRateBottomSheet: ForwardRefExoticComponent<\n  ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>\n> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(\n  ({ onContinue, onCancel }, ref) => {\n    const [data, setData] = useState<ExchangeRateUpdateParams>()\n    const bottomSheetRef = useRef<BottomSheetBase>(null)\n    const resolverRef = useRef<(value: boolean) => void>(null)\n\n    const handleContinue = () => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)\n      onContinue?.()\n    }\n\n    const handleCancel = useCallback(() => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)\n      onCancel?.()\n    }, [onCancel, ref])\n\n    const handleClose = useCallback(() => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(\n        false,\n        false\n      )\n      onCancel?.()\n    }, [onCancel, ref])\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isOpen: () => bottomSheetRef.current?.isOpen(),\n        open: (resolver, data) => {\n          setData(data)\n          resolverRef.current = resolver\n          bottomSheetRef.current?.open()\n        },\n        close: (value = false, bottomSheetClose = true) => {\n          resolverRef.current?.(value)\n          if (bottomSheetClose) {\n            bottomSheetRef.current?.close()\n          }\n        },\n      }),\n      []\n    )\n\n    return (\n      <BottomSheet ref={bottomSheetRef} onClose={handleClose}>\n        <ExchangeRateBottomSheetContent\n          data={data}\n          onContinue={handleContinue}\n          onCancel={handleCancel}\n        />\n      </BottomSheet>\n    )\n  }\n)\n\nconst ExchangeRateBottomSheetContent: React.FC<\n  ExchangeRateBottomSheetProps\n> = ({ data, onCancel, onContinue }) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  if (!data) {\n    return\n  }\n\n  const oldAmount = BigInt(data.oldToAmount || 1)\n  const rateChange = (\n    (Number((BigInt(data.newToAmount || 0) * 1_000_000n) / oldAmount) /\n      1_000_000) *\n      100 -\n    100\n  ).toFixed(2)\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      <CenterContainer>\n        <IconCircle status=\"warning\" mb={1}>\n          <WarningRounded color=\"warning\" />\n        </IconCircle>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.rateChanged')}\n        </Typography>\n      </CenterContainer>\n      <Typography\n        sx={{\n          py: 1,\n        }}\n      >\n        {t('warning.message.rateChanged')}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 1,\n        }}\n      >\n        <Typography>{t('main.quotedAmount')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(data.oldToAmount),\n              data.toToken.decimals\n            ),\n          })}{' '}\n          {data?.toToken.symbol}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.currentAmount')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(data?.newToAmount),\n              data?.toToken.decimals\n            ),\n          })}{' '}\n          {data?.toToken.symbol}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.rateChange')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {rateChange}%\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          mt: 3,\n        }}\n      >\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Box\n          sx={{\n            display: 'flex',\n            p: 1,\n          }}\n        />\n        <Button variant=\"contained\" onClick={onContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ExchangeRateBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\nexport interface ExchangeRateBottomSheetBase {\n  isOpen(): void\n  open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void\n  close(value?: boolean, bottomSheetClose?: boolean): void\n}\n\ninterface ExchangeRateBottomSheetProps {\n  data?: ExchangeRateUpdateParams\n  onContinue?(): void\n  onCancel?(): void\n}\n\nexport const ExchangeRateBottomSheet: ForwardRefExoticComponent<\n  ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>\n> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(\n  ({ onContinue, onCancel }, ref) => {\n    const [data, setData] = useState<ExchangeRateUpdateParams>()\n    const bottomSheetRef = useRef<BottomSheetBase>(null)\n    const resolverRef = useRef<(value: boolean) => void>(null)\n\n    const handleContinue = () => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)\n      onContinue?.()\n    }\n\n    const handleCancel = useCallback(() => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)\n      onCancel?.()\n    }, [onCancel, ref])\n\n    const handleClose = useCallback(() => {\n      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(\n        false,\n        false\n      )\n      onCancel?.()\n    }, [onCancel, ref])\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isOpen: () => bottomSheetRef.current?.isOpen(),\n        open: (resolver, data) => {\n          setData(data)\n          resolverRef.current = resolver\n          bottomSheetRef.current?.open()\n        },\n        close: (value = false, bottomSheetClose = true) => {\n          resolverRef.current?.(value)\n          if (bottomSheetClose) {\n            bottomSheetRef.current?.close()\n          }\n        },\n      }),\n      []\n    )\n\n    return (\n      <BottomSheet ref={bottomSheetRef} onClose={handleClose}>\n        <ExchangeRateBottomSheetContent\n          data={data}\n          onContinue={handleContinue}\n          onCancel={handleCancel}\n        />\n      </BottomSheet>\n    )\n  }\n)\n\nconst ExchangeRateBottomSheetContent: React.FC<\n  ExchangeRateBottomSheetProps\n> = ({ data, onCancel, onContinue }) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  if (!data) {\n    return\n  }\n\n  const oldAmount = BigInt(data.oldToAmount || 1)\n  const rateChange = (\n    (Number((BigInt(data.newToAmount || 0) * 1_000_000n) / oldAmount) /\n      1_000_000) *\n      100 -\n    100\n  ).toFixed(2)\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      <CenterContainer>\n        <IconCircle status=\"warning\" sx={{ mb: 1 }}>\n          <WarningRounded color=\"warning\" />\n        </IconCircle>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.rateChanged')}\n        </Typography>\n      </CenterContainer>\n      <Typography\n        sx={{\n          py: 1,\n        }}\n      >\n        {t('warning.message.rateChanged')}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 1,\n        }}\n      >\n        <Typography>{t('main.quotedAmount')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(data.oldToAmount),\n              data.toToken.decimals\n            ),\n          })}{' '}\n          {data?.toToken.symbol}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.currentAmount')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(data?.newToAmount),\n              data?.toToken.decimals\n            ),\n          })}{' '}\n          {data?.toToken.symbol}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.rateChange')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {rateChange}%\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          mt: 3,\n        }}\n      >\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Box\n          sx={{\n            display: 'flex',\n            p: 1,\n          }}\n        />\n        <Button variant=\"contained\" onClick={onContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js

@@ -5,7 +5,6 @@ import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { formatTokenAmount } from "../../utils/format.js";
 import { Card as Card$1 } from "../../components/Card/Card.js";
 import { hasEnumFlag } from "../../utils/enum.js";
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { getSourceTxHash } from "../../stores/routes/utils.js";
 import { Token } from "../../components/Token/Token.js";
 import { getErrorMessage } from "../../utils/getErrorMessage.js";
@@ -29,8 +28,8 @@ const StatusBottomSheet = ({ status, route }) => {
 		ref.current?.close();
 	}, []);
 	useEffect(() => {
-		const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-		const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed);
+		const hasSuccessFlag = hasEnumFlag(status, 4);
+		const hasFailedFlag = hasEnumFlag(status, 8);
 		if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) ref.current?.open();
 	}, [status]);
 	return /* @__PURE__ */ jsx(BottomSheet, {
@@ -100,11 +99,11 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 	let failedMessage;
 	let handlePrimaryButton = handleDone;
 	switch (status) {
-		case RouteExecutionStatus.Done:
+		case 4:
 			title = subvariant === "custom" ? t(`success.title.${subvariantOptions?.custom ?? "checkout"}Successful`) : t(`success.title.${transactionType}Successful`);
 			handlePrimaryButton = handleDone;
 			break;
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
+		case 20:
 			title = t(`success.title.${transactionType}PartiallySuccessful`);
 			primaryMessage = t("success.message.exchangePartiallySuccessful", {
 				tool: route.steps.at(-1)?.toolDetails.name,
@@ -112,14 +111,14 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 			});
 			handlePrimaryButton = handlePartialDone;
 			break;
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
+		case 36:
 			title = t("success.title.refundIssued");
 			primaryMessage = t("success.message.exchangePartiallySuccessful", {
 				tool: route.steps.at(-1)?.toolDetails.name,
 				tokenSymbol: route.steps.at(-1)?.action.toToken.symbol
 			});
 			break;
-		case RouteExecutionStatus.Failed: {
+		case 8: {
 			const step = route.steps.find((step) => step.execution?.status === "FAILED");
 			if (!step) break;
 			const actionMessage = getErrorMessage(t, getChainById, step, step.execution?.actions?.find((action) => action.status === "FAILED") || {
@@ -134,20 +133,20 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 		}
 		default: break;
 	}
-	const showContractComponent = subvariant === "custom" && hasEnumFlag(status, RouteExecutionStatus.Done) && (contractCompactComponent || contractSecondaryComponent);
-	const VcComponent = status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : void 0;
+	const showContractComponent = subvariant === "custom" && hasEnumFlag(status, 4) && (contractCompactComponent || contractSecondaryComponent);
+	const VcComponent = status === 4 ? feeConfig?._vcComponent : void 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
 		sx: { p: 3 },
 		children: [
 			!showContractComponent ? /* @__PURE__ */ jsx(CenterContainer, { children: /* @__PURE__ */ jsxs(IconCircle, {
 				status,
-				mb: 1,
+				sx: { mb: 1 },
 				children: [
-					status === RouteExecutionStatus.Idle ? /* @__PURE__ */ jsx(InfoRounded, { color: "primary" }) : null,
-					status === RouteExecutionStatus.Done ? /* @__PURE__ */ jsx(Done, { color: "success" }) : null,
-					hasEnumFlag(status, RouteExecutionStatus.Partial) || hasEnumFlag(status, RouteExecutionStatus.Refunded) ? /* @__PURE__ */ jsx(WarningRounded, { color: "warning" }) : null,
-					hasEnumFlag(status, RouteExecutionStatus.Failed) ? /* @__PURE__ */ jsx(ErrorRounded, { color: "error" }) : null
+					status === 1 ? /* @__PURE__ */ jsx(InfoRounded, { color: "primary" }) : null,
+					status === 4 ? /* @__PURE__ */ jsx(Done, { color: "success" }) : null,
+					hasEnumFlag(status, 16) || hasEnumFlag(status, 32) ? /* @__PURE__ */ jsx(WarningRounded, { color: "warning" }) : null,
+					hasEnumFlag(status, 8) ? /* @__PURE__ */ jsx(ErrorRounded, { color: "error" }) : null
 				]
 			}) }) : null,
 			/* @__PURE__ */ jsx(CenterContainer, { children: /* @__PURE__ */ jsx(Typography, {
@@ -158,10 +157,10 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 				},
 				children: title
 			}) }),
-			showContractComponent ? contractCompactComponent || contractSecondaryComponent : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? /* @__PURE__ */ jsx(Typography, {
+			showContractComponent ? contractCompactComponent || contractSecondaryComponent : hasEnumFlag(status, 8) && failedMessage ? /* @__PURE__ */ jsx(Typography, {
 				sx: { py: 1 },
 				children: failedMessage
-			}) : hasEnumFlag(status, RouteExecutionStatus.Done) ? /* @__PURE__ */ jsxs(Box, {
+			}) : hasEnumFlag(status, 4) ? /* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
@@ -179,7 +178,7 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					children: [
 						/* @__PURE__ */ jsx(CardTitle, {
 							sx: { padding: 0 },
-							children: hasEnumFlag(status, RouteExecutionStatus.Refunded) ? t("header.refunded") : t("header.received")
+							children: hasEnumFlag(status, 32) ? t("header.refunded") : t("header.received")
 						}),
 						/* @__PURE__ */ jsx(Token, {
 							token: toToken,
@@ -203,7 +202,7 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					marginTop: 2,
 					gap: 1.5
 				},
-				children: [hasEnumFlag(status, RouteExecutionStatus.Done) ? /* @__PURE__ */ jsx(Button, {
+				children: [hasEnumFlag(status, 4) ? /* @__PURE__ */ jsx(Button, {
 					variant: "text",
 					onClick: handleSeeDetails,
 					fullWidth: true,
@@ -213,9 +212,9 @@ const StatusBottomSheetContent = ({ status, route, onClose }) => {
 					fullWidth: true,
 					onClick: handlePrimaryButton,
 					children: [
-						status === RouteExecutionStatus.Idle ? t("button.ok") : null,
-						hasEnumFlag(status, RouteExecutionStatus.Done) ? t("button.done") : null,
-						status === RouteExecutionStatus.Failed ? t("button.seeDetails") : null
+						status === 1 ? t("button.ok") : null,
+						hasEnumFlag(status, 4) ? t("button.done") : null,
+						status === 8 ? t("button.seeDetails") : null
 					]
 				})]
 			})

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBottomSheet.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.tsx"],"sourcesContent":["import type { ExecutionActionType } from '@lifi/sdk'\nimport Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n  type RouteExecution,\n  RouteExecutionStatus,\n} from '../../stores/routes/types.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { getErrorMessage } from '../../utils/getErrorMessage.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\ninterface StatusBottomSheetContentProps extends RouteExecution {\n  onClose(): void\n}\n\nexport const StatusBottomSheet: React.FC<RouteExecution> = ({\n  status,\n  route,\n}) => {\n  const ref = useRef<BottomSheetBase>(null)\n\n  const onClose = useCallback(() => {\n    ref.current?.close()\n  }, [])\n\n  useEffect(() => {\n    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)\n    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)\n    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {\n      ref.current?.open()\n    }\n  }, [status])\n\n  return (\n    <BottomSheet ref={ref}>\n      <StatusBottomSheetContent\n        status={status}\n        route={route}\n        onClose={onClose}\n      />\n    </BottomSheet>\n  )\n}\n\nconst StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({\n  status,\n  route,\n  onClose,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const {\n    subvariant,\n    subvariantOptions,\n    contractSecondaryComponent,\n    contractCompactComponent,\n    feeConfig,\n  } = useWidgetConfig()\n  const { getChainById } = useAvailableChains()\n\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  const toToken = {\n    ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n    amount: BigInt(\n      route.steps.at(-1)?.execution?.toAmount ??\n        route.steps.at(-1)?.estimate.toAmount ??\n        route.toAmount\n    ),\n  }\n\n  const cleanFields = () => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('toAmount', '')\n  }\n\n  const handleDone = () => {\n    cleanFields()\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  const handlePartialDone = () => {\n    if (\n      toToken.chainId !== route.toToken.chainId &&\n      toToken.address !== route.toToken.address\n    ) {\n      setFieldValue(\n        'fromAmount',\n        formatTokenAmount(toToken.amount, toToken.decimals),\n        { isTouched: true }\n      )\n      setFieldValue('fromChain', toToken.chainId, { isTouched: true })\n      setFieldValue('fromToken', toToken.address, { isTouched: true })\n      setFieldValue('toChain', route.toToken.chainId, {\n        isTouched: true,\n      })\n      setFieldValue('toToken', route.toToken.address, {\n        isTouched: true,\n      })\n    } else {\n      cleanFields()\n    }\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  const handleClose = () => {\n    cleanFields()\n    onClose()\n  }\n\n  const handleSeeDetails = () => {\n    handleClose()\n\n    const transactionHash = getSourceTxHash(route)\n\n    navigate({\n      to: navigationRoutes.transactionDetails,\n      search: {\n        routeId: route.id,\n        transactionHash,\n      },\n      replace: true,\n    })\n  }\n\n  const transactionType =\n    route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n\n  let title: string | undefined\n  let primaryMessage: string | undefined\n  let failedMessage: string | undefined\n  let handlePrimaryButton = handleDone\n  switch (status) {\n    case RouteExecutionStatus.Done: {\n      title =\n        subvariant === 'custom'\n          ? t(\n              `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`\n            )\n          : t(`success.title.${transactionType}Successful`)\n      handlePrimaryButton = handleDone\n      break\n    }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {\n      title = t(`success.title.${transactionType}PartiallySuccessful`)\n      primaryMessage = t('success.message.exchangePartiallySuccessful', {\n        tool: route.steps.at(-1)?.toolDetails.name,\n        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n      })\n      handlePrimaryButton = handlePartialDone\n      break\n    }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {\n      title = t('success.title.refundIssued')\n      primaryMessage = t('success.message.exchangePartiallySuccessful', {\n        tool: route.steps.at(-1)?.toolDetails.name,\n        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n      })\n      break\n    }\n    case RouteExecutionStatus.Failed: {\n      const step = route.steps.find(\n        (step) => step.execution?.status === 'FAILED'\n      )\n      if (!step) {\n        break\n      }\n      const action = step.execution?.actions?.find(\n        (action) => action.status === 'FAILED'\n      ) || {\n        status: 'FAILED',\n        type: 'EXECUTION' as ExecutionActionType,\n        error: step.execution?.error,\n      } // synthetic action to represent a failed execution with no actions\n      const actionMessage = getErrorMessage(t, getChainById, step, action)\n      title = actionMessage.title\n      failedMessage = actionMessage.message\n      handlePrimaryButton = handleClose\n      break\n    }\n    default:\n      break\n  }\n\n  const showContractComponent =\n    subvariant === 'custom' &&\n    hasEnumFlag(status, RouteExecutionStatus.Done) &&\n    (contractCompactComponent || contractSecondaryComponent)\n\n  const VcComponent =\n    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      {!showContractComponent ? (\n        <CenterContainer>\n          <IconCircle status={status} mb={1}>\n            {status === RouteExecutionStatus.Idle ? (\n              <InfoRounded color=\"primary\" />\n            ) : null}\n            {status === RouteExecutionStatus.Done ? (\n              <Done color=\"success\" />\n            ) : null}\n            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||\n            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (\n              <WarningRounded color=\"warning\" />\n            ) : null}\n            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (\n              <ErrorRounded color=\"error\" />\n            ) : null}\n          </IconCircle>\n        </CenterContainer>\n      ) : null}\n      <CenterContainer>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {title}\n        </Typography>\n      </CenterContainer>\n      {showContractComponent ? (\n        contractCompactComponent || contractSecondaryComponent\n      ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (\n        <Typography\n          sx={{\n            py: 1,\n          }}\n        >\n          {failedMessage}\n        </Typography>\n      ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 2,\n            marginTop: 2,\n            marginBottom: VcComponent ? 2 : 3,\n          }}\n        >\n          <Card\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 2,\n              padding: 2,\n            }}\n          >\n            <CardTitle sx={{ padding: 0 }}>\n              {hasEnumFlag(status, RouteExecutionStatus.Refunded)\n                ? t('header.refunded')\n                : t('header.received')}\n            </CardTitle>\n            <Token token={toToken} disableDescription={false} />\n            {primaryMessage && (\n              <Typography\n                sx={{\n                  color: 'text.secondary',\n                  fontSize: '12px',\n                  lineHeight: '16px',\n                  fontWeight: 500,\n                }}\n              >\n                {primaryMessage}\n              </Typography>\n            )}\n          </Card>\n          {VcComponent ? <VcComponent route={route} /> : null}\n        </Box>\n      ) : null}\n      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>\n        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n          <Button variant=\"text\" onClick={handleSeeDetails} fullWidth>\n            {t('button.seeDetails')}\n          </Button>\n        ) : null}\n        <Button variant=\"contained\" fullWidth onClick={handlePrimaryButton}>\n          {status === RouteExecutionStatus.Idle ? t('button.ok') : null}\n          {hasEnumFlag(status, RouteExecutionStatus.Done)\n            ? t('button.done')\n            : null}\n          {status === RouteExecutionStatus.Failed\n            ? t('button.seeDetails')\n            : null}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StatusBottomSheet.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.tsx"],"sourcesContent":["import type { ExecutionActionType } from '@lifi/sdk'\nimport Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n  type RouteExecution,\n  RouteExecutionStatus,\n} from '../../stores/routes/types.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { getErrorMessage } from '../../utils/getErrorMessage.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\n\ninterface StatusBottomSheetContentProps extends RouteExecution {\n  onClose(): void\n}\n\nexport const StatusBottomSheet: React.FC<RouteExecution> = ({\n  status,\n  route,\n}) => {\n  const ref = useRef<BottomSheetBase>(null)\n\n  const onClose = useCallback(() => {\n    ref.current?.close()\n  }, [])\n\n  useEffect(() => {\n    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)\n    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)\n    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {\n      ref.current?.open()\n    }\n  }, [status])\n\n  return (\n    <BottomSheet ref={ref}>\n      <StatusBottomSheetContent\n        status={status}\n        route={route}\n        onClose={onClose}\n      />\n    </BottomSheet>\n  )\n}\n\nconst StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({\n  status,\n  route,\n  onClose,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const {\n    subvariant,\n    subvariantOptions,\n    contractSecondaryComponent,\n    contractCompactComponent,\n    feeConfig,\n  } = useWidgetConfig()\n  const { getChainById } = useAvailableChains()\n\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  const toToken = {\n    ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n    amount: BigInt(\n      route.steps.at(-1)?.execution?.toAmount ??\n        route.steps.at(-1)?.estimate.toAmount ??\n        route.toAmount\n    ),\n  }\n\n  const cleanFields = () => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('toAmount', '')\n  }\n\n  const handleDone = () => {\n    cleanFields()\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  const handlePartialDone = () => {\n    if (\n      toToken.chainId !== route.toToken.chainId &&\n      toToken.address !== route.toToken.address\n    ) {\n      setFieldValue(\n        'fromAmount',\n        formatTokenAmount(toToken.amount, toToken.decimals),\n        { isTouched: true }\n      )\n      setFieldValue('fromChain', toToken.chainId, { isTouched: true })\n      setFieldValue('fromToken', toToken.address, { isTouched: true })\n      setFieldValue('toChain', route.toToken.chainId, {\n        isTouched: true,\n      })\n      setFieldValue('toToken', route.toToken.address, {\n        isTouched: true,\n      })\n    } else {\n      cleanFields()\n    }\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  const handleClose = () => {\n    cleanFields()\n    onClose()\n  }\n\n  const handleSeeDetails = () => {\n    handleClose()\n\n    const transactionHash = getSourceTxHash(route)\n\n    navigate({\n      to: navigationRoutes.transactionDetails,\n      search: {\n        routeId: route.id,\n        transactionHash,\n      },\n      replace: true,\n    })\n  }\n\n  const transactionType =\n    route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n\n  let title: string | undefined\n  let primaryMessage: string | undefined\n  let failedMessage: string | undefined\n  let handlePrimaryButton = handleDone\n  switch (status) {\n    case RouteExecutionStatus.Done: {\n      title =\n        subvariant === 'custom'\n          ? t(\n              `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`\n            )\n          : t(`success.title.${transactionType}Successful`)\n      handlePrimaryButton = handleDone\n      break\n    }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {\n      title = t(`success.title.${transactionType}PartiallySuccessful`)\n      primaryMessage = t('success.message.exchangePartiallySuccessful', {\n        tool: route.steps.at(-1)?.toolDetails.name,\n        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n      })\n      handlePrimaryButton = handlePartialDone\n      break\n    }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {\n      title = t('success.title.refundIssued')\n      primaryMessage = t('success.message.exchangePartiallySuccessful', {\n        tool: route.steps.at(-1)?.toolDetails.name,\n        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,\n      })\n      break\n    }\n    case RouteExecutionStatus.Failed: {\n      const step = route.steps.find(\n        (step) => step.execution?.status === 'FAILED'\n      )\n      if (!step) {\n        break\n      }\n      const action = step.execution?.actions?.find(\n        (action) => action.status === 'FAILED'\n      ) || {\n        status: 'FAILED',\n        type: 'EXECUTION' as ExecutionActionType,\n        error: step.execution?.error,\n      } // synthetic action to represent a failed execution with no actions\n      const actionMessage = getErrorMessage(t, getChainById, step, action)\n      title = actionMessage.title\n      failedMessage = actionMessage.message\n      handlePrimaryButton = handleClose\n      break\n    }\n    default:\n      break\n  }\n\n  const showContractComponent =\n    subvariant === 'custom' &&\n    hasEnumFlag(status, RouteExecutionStatus.Done) &&\n    (contractCompactComponent || contractSecondaryComponent)\n\n  const VcComponent =\n    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      {!showContractComponent ? (\n        <CenterContainer>\n          <IconCircle status={status} sx={{ mb: 1 }}>\n            {status === RouteExecutionStatus.Idle ? (\n              <InfoRounded color=\"primary\" />\n            ) : null}\n            {status === RouteExecutionStatus.Done ? (\n              <Done color=\"success\" />\n            ) : null}\n            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||\n            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (\n              <WarningRounded color=\"warning\" />\n            ) : null}\n            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (\n              <ErrorRounded color=\"error\" />\n            ) : null}\n          </IconCircle>\n        </CenterContainer>\n      ) : null}\n      <CenterContainer>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {title}\n        </Typography>\n      </CenterContainer>\n      {showContractComponent ? (\n        contractCompactComponent || contractSecondaryComponent\n      ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (\n        <Typography\n          sx={{\n            py: 1,\n          }}\n        >\n          {failedMessage}\n        </Typography>\n      ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 2,\n            marginTop: 2,\n            marginBottom: VcComponent ? 2 : 3,\n          }}\n        >\n          <Card\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 2,\n              padding: 2,\n            }}\n          >\n            <CardTitle sx={{ padding: 0 }}>\n              {hasEnumFlag(status, RouteExecutionStatus.Refunded)\n                ? t('header.refunded')\n                : t('header.received')}\n            </CardTitle>\n            <Token token={toToken} disableDescription={false} />\n            {primaryMessage && (\n              <Typography\n                sx={{\n                  color: 'text.secondary',\n                  fontSize: '12px',\n                  lineHeight: '16px',\n                  fontWeight: 500,\n                }}\n              >\n                {primaryMessage}\n              </Typography>\n            )}\n          </Card>\n          {VcComponent ? <VcComponent route={route} /> : null}\n        </Box>\n      ) : null}\n      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>\n        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (\n          <Button variant=\"text\" onClick={handleSeeDetails} fullWidth>\n            {t('button.seeDetails')}\n          </Button>\n        ) : null}\n        <Button variant=\"contained\" fullWidth onClick={handlePrimaryButton}>\n          {status === RouteExecutionStatus.Idle ? t('button.ok') : null}\n          {hasEnumFlag(status, RouteExecutionStatus.Done)\n            ? t('button.done')\n            : null}\n          {status === RouteExecutionStatus.Failed\n            ? t('button.seeDetails')\n            : null}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js

@@ -1,30 +1,29 @@
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { Box, styled } from "@mui/material";
 //#region src/pages/TransactionPage/StatusBottomSheet.style.tsx
 const getStatusColor = (status, theme) => {
 	switch (status) {
-		case RouteExecutionStatus.Done: return {
-			color: theme.vars.palette.success.mainChannel,
+		case 4: return {
+			color: theme.vars.palette.success.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
-		case RouteExecutionStatus.Failed: return {
-			color: theme.vars.palette.error.mainChannel,
+		case 8: return {
+			color: theme.vars.palette.error.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
-		case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
+		case 20:
+		case 36:
 		case "warning": return {
-			color: theme.vars.palette.warning.mainChannel,
+			color: theme.vars.palette.warning.main,
 			alpha: .48,
 			lightDarken: .32,
 			darkDarken: 0
 		};
 		default: return {
-			color: theme.vars.palette.primary.mainChannel,
+			color: theme.vars.palette.primary.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
@@ -36,10 +35,10 @@ const CenterContainer = styled(Box)(() => ({
 	placeItems: "center",
 	position: "relative"
 }));
-const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status" })(({ theme, status = RouteExecutionStatus.Idle }) => {
+const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status" })(({ theme, status = 1 }) => {
 	const statusConfig = getStatusColor(status, theme);
 	return {
-		backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
+		backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,
 		borderRadius: "50%",
 		width: 72,
 		height: 72,
@@ -47,12 +46,12 @@ const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status"
 		position: "relative",
 		placeItems: "center",
 		"& > svg": {
-			color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,
 			width: 36,
 			height: 36
 		},
 		...theme.applyStyles("dark", { "& > svg": {
-			color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,
 			width: 36,
 			height: 36
 		} })