@lifi/widget 4.4.0 → 4.6.0

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

@@ -0,0 +1,64 @@
+import { IconCircle } from "../../components/IconCircle/IconCircle.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { ButtonRow, CenterContainer, ContentContainer, WarningMessage, WarningTitle } from "./TokenValueBottomSheet.style.js";
+import { useRef, useState } from "react";
+import { Button, Checkbox, FormControlLabel } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TokenVerificationBottomSheet.tsx
+const TokenVerificationBottomSheet = ({ tokens, onContinue, onCancel, ref }) => {
+	const handleCancel = () => {
+		ref.current?.close();
+		onCancel?.();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		onClose: onCancel,
+		children: /* @__PURE__ */ jsx(TokenVerificationBottomSheetContent, {
+			tokens,
+			onContinue,
+			onCancel: handleCancel
+		})
+	});
+};
+const TokenVerificationBottomSheetContent = ({ tokens, onCancel, onContinue }) => {
+	const [accepted, setAccepted] = useState(false);
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	return /* @__PURE__ */ jsxs(ContentContainer, {
+		ref,
+		children: [
+			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
+				status: "error",
+				sx: { mb: 2.5 }
+			}), /* @__PURE__ */ jsx(WarningTitle, { children: t("warning.title.tokenFlagged") })] }),
+			tokens.map((token) => /* @__PURE__ */ jsx(WarningMessage, { children: t("warning.message.tokenFlagged", { tokenSymbol: token.symbol }) }, `${token.chainId}-${token.address}`)),
+			/* @__PURE__ */ jsx(FormControlLabel, {
+				control: /* @__PURE__ */ jsx(Checkbox, {
+					checked: accepted,
+					onChange: (_, checked) => setAccepted(checked)
+				}),
+				label: t("warning.checkbox.tokenFlagged"),
+				sx: { mt: 1 }
+			}),
+			/* @__PURE__ */ jsxs(ButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onCancel,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: onContinue,
+				disabled: !accepted,
+				fullWidth: true,
+				children: t("button.continue")
+			})] })
+		]
+	});
+};
+//#endregion
+export { TokenVerificationBottomSheet };
+
+//# sourceMappingURL=TokenVerificationBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenVerificationBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenVerificationBottomSheet.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport { Button, Checkbox, FormControlLabel } from '@mui/material'\nimport type { JSX, Ref, RefObject } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport {\n  ButtonRow,\n  CenterContainer,\n  ContentContainer,\n  WarningMessage,\n  WarningTitle,\n} from './TokenValueBottomSheet.style.js'\n\ninterface TokenVerificationBottomSheetProps {\n  /** Source and/or destination tokens the screening provider flagged. */\n  tokens: Token[]\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenVerificationBottomSheet = ({\n  tokens,\n  onContinue,\n  onCancel,\n  ref,\n}: TokenVerificationBottomSheetProps & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const handleCancel = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n    onCancel?.()\n  }\n\n  return (\n    <BottomSheet ref={ref} onClose={onCancel}>\n      <TokenVerificationBottomSheetContent\n        tokens={tokens}\n        onContinue={onContinue}\n        onCancel={handleCancel}\n      />\n    </BottomSheet>\n  )\n}\n\nconst TokenVerificationBottomSheetContent: React.FC<\n  TokenVerificationBottomSheetProps\n> = ({ tokens, onCancel, onContinue }) => {\n  const [accepted, setAccepted] = useState(false)\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n\n  return (\n    <ContentContainer ref={ref}>\n      <CenterContainer>\n        <IconCircle status=\"error\" sx={{ mb: 2.5 }} />\n        <WarningTitle>{t('warning.title.tokenFlagged')}</WarningTitle>\n      </CenterContainer>\n      {tokens.map((token) => (\n        <WarningMessage key={`${token.chainId}-${token.address}`}>\n          {t('warning.message.tokenFlagged', { tokenSymbol: token.symbol })}\n        </WarningMessage>\n      ))}\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={accepted}\n            onChange={(_, checked) => setAccepted(checked)}\n          />\n        }\n        label={t('warning.checkbox.tokenFlagged')}\n        sx={{ mt: 1 }}\n      />\n      <ButtonRow>\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button\n          variant=\"contained\"\n          onClick={onContinue}\n          disabled={!accepted}\n          fullWidth\n        >\n          {t('button.continue')}\n        </Button>\n      </ButtonRow>\n    </ContentContainer>\n  )\n}\n"],"mappings":";;;;;;;;;AAwBA,MAAa,gCAAgC,EAC3C,QACA,YACA,UACA,UAGiB;CACjB,MAAM,qBAAqB;EACxB,IAAoC,SAAS,MAAM;EACpD,WAAW;CACb;CAEA,OACE,oBAAC,aAAD;EAAkB;EAAK,SAAS;EAC9B,UAAA,oBAAC,qCAAD;GACU;GACI;GACZ,UAAU;EACX,CAAA;CACU,CAAA;AAEjB;AAEA,MAAM,uCAED,EAAE,QAAQ,UAAU,iBAAiB;CACxC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,MAAM,OAAoB,IAAI;CACpC,oBAAoB,GAAG;CAEvB,OACE,qBAAC,kBAAD;EAAuB;EAAvB,UAAA;GACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;IAAY,QAAO;IAAQ,IAAI,EAAE,IAAI,IAAI;GAAI,CAAA,GAC7C,oBAAC,cAAD,EAAA,UAAe,EAAE,4BAA4B,EAAgB,CAAA,CAC9C,EAAA,CAAA;GAChB,OAAO,KAAK,UACX,oBAAC,gBAAD,EAAA,UACG,EAAE,gCAAgC,EAAE,aAAa,MAAM,OAAO,CAAC,EAClD,GAFK,GAAG,MAAM,QAAQ,GAAG,MAAM,SAE/B,CACjB;GACD,oBAAC,kBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAS;KACT,WAAW,GAAG,YAAY,YAAY,OAAO;IAC9C,CAAA;IAEH,OAAO,EAAE,+BAA+B;IACxC,IAAI,EAAE,IAAI,EAAE;GACb,CAAA;GACD,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAU,WAAA;IACvC,UAAA,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,WAAA;IAEC,UAAA,EAAE,iBAAiB;GACd,CAAA,CACC,EAAA,CAAA;EACK;;AAEtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionDoneButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionDoneButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Button } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { getExecutionToToken } from '../../utils/token.js'\n\ninterface TransactionDoneButtonsProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\nexport const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps> = ({\n  route,\n  status,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const clearAmountFields = useClearAmountFields()\n\n  if (!hasEnumFlag(status, RouteExecutionStatus.Done)) {\n    return null\n  }\n\n  const handlePartialDone = () => {\n    const toToken = getExecutionToToken(route)\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      clearAmountFields()\n    }\n  }\n\n  const handleClick = () => {\n    if (hasEnumFlag(status, RouteExecutionStatus.Partial)) {\n      handlePartialDone()\n    } else {\n      clearAmountFields()\n    }\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  return (\n    <Button variant=\"contained\" fullWidth onClick={handleClick}>\n      {t('button.done')}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAa,0BAAiE,EAC5E,OACA,aACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,oBAAoB,qBAAqB;CAE/C,IAAI,CAAC,YAAY,QAAA,CAAiC,GAChD,OAAO;CAGT,MAAM,0BAA0B;EAC9B,MAAM,UAAU,oBAAoB,KAAK;EACzC,IACE,QAAQ,YAAY,MAAM,QAAQ,WAClC,QAAQ,YAAY,MAAM,QAAQ,SAClC;GACA,cACE,cACA,kBAAkB,QAAQ,QAAQ,QAAQ,QAAQ,GAClD,EAAE,WAAW,KAAK,CACpB;GACA,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;GACD,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;EACH,OACE,kBAAkB;CAEtB;CAEA,MAAM,oBAAoB;EACxB,IAAI,YAAY,QAAA,EAAoC,GAClD,kBAAkB;OAElB,kBAAkB;EAEpB,SAAS;GAAE,IAAI,iBAAiB;GAAM,SAAS;EAAK,CAAC;CACvD;CAEA,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAY,WAAA;EAAU,SAAS;YAC5C,EAAE,aAAa;CACV,CAAA;AAEZ"}
+{"version":3,"file":"TransactionDoneButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionDoneButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Button } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { getExecutionToToken } from '../../utils/token.js'\n\ninterface TransactionDoneButtonsProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\nexport const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps> = ({\n  route,\n  status,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const clearAmountFields = useClearAmountFields()\n\n  if (!hasEnumFlag(status, RouteExecutionStatus.Done)) {\n    return null\n  }\n\n  const handlePartialDone = () => {\n    const toToken = getExecutionToToken(route)\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      clearAmountFields()\n    }\n  }\n\n  const handleClick = () => {\n    if (hasEnumFlag(status, RouteExecutionStatus.Partial)) {\n      handlePartialDone()\n    } else {\n      clearAmountFields()\n    }\n    navigate({ to: navigationRoutes.home, replace: true })\n  }\n\n  return (\n    <Button variant=\"contained\" fullWidth onClick={handleClick}>\n      {t('button.done')}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAa,0BAAiE,EAC5E,OACA,aACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,oBAAoB,qBAAqB;CAE/C,IAAI,CAAC,YAAY,QAAA,CAAiC,GAChD,OAAO;CAGT,MAAM,0BAA0B;EAC9B,MAAM,UAAU,oBAAoB,KAAK;EACzC,IACE,QAAQ,YAAY,MAAM,QAAQ,WAClC,QAAQ,YAAY,MAAM,QAAQ,SAClC;GACA,cACE,cACA,kBAAkB,QAAQ,QAAQ,QAAQ,QAAQ,GAClD,EAAE,WAAW,KAAK,CACpB;GACA,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,aAAa,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC;GAC/D,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;GACD,cAAc,WAAW,MAAM,QAAQ,SAAS,EAC9C,WAAW,KACb,CAAC;EACH,OACE,kBAAkB;CAEtB;CAEA,MAAM,oBAAoB;EACxB,IAAI,YAAY,QAAA,EAAoC,GAClD,kBAAkB;OAElB,kBAAkB;EAEpB,SAAS;GAAE,IAAI,iBAAiB;GAAM,SAAS;EAAK,CAAC;CACvD;CAEA,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAY,WAAA;EAAU,SAAS;EAC5C,UAAA,EAAE,aAAa;CACV,CAAA;AAEZ"}

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

@@ -24,6 +24,22 @@ const TransactionExecutionContent = ({ route, status, restartRoute, deleteRoute
 	const { title, message } = useRouteExecutionMessage(route, status);
 	const { mode, contractCompactComponent, contractSecondaryComponent, defaultUI } = useWidgetConfig();
 	const isDone = hasEnumFlag(status, 4);
+	const rows = useExecutionRows(route, isDone ? route.toAddress : void 0);
+	const iconSlot = mode === "custom" && isDone && !!(contractCompactComponent || contractSecondaryComponent) ? contractCompactComponent || contractSecondaryComponent : /* @__PURE__ */ jsx(StatusIcon, {
+		route,
+		status
+	});
+	const footerSlot = isDone ? /* @__PURE__ */ jsx(ExecutionDoneCard, {
+		route,
+		status
+	}) : /* @__PURE__ */ jsx(Card$1, {
+		type: "default",
+		indented: true,
+		children: /* @__PURE__ */ jsx(RouteTokens, {
+			route,
+			defaultExpanded: defaultUI?.transactionDetailsExpanded
+		})
+	});
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domMax,
 		strict: true,
@@ -38,22 +54,9 @@ const TransactionExecutionContent = ({ route, status, restartRoute, deleteRoute
 				children: [/* @__PURE__ */ jsx(ExecutionStatusCard, {
 					title,
 					description: message,
-					rows: useExecutionRows(route, isDone ? route.toAddress : void 0),
-					iconSlot: mode === "custom" && isDone && !!(contractCompactComponent || contractSecondaryComponent) ? contractCompactComponent || contractSecondaryComponent : /* @__PURE__ */ jsx(StatusIcon, {
-						route,
-						status
-					}),
-					footerSlot: isDone ? /* @__PURE__ */ jsx(ExecutionDoneCard, {
-						route,
-						status
-					}) : /* @__PURE__ */ jsx(Card$1, {
-						type: "default",
-						indented: true,
-						children: /* @__PURE__ */ jsx(RouteTokens, {
-							route,
-							defaultExpanded: defaultUI?.transactionDetailsExpanded
-						})
-					})
+					rows,
+					iconSlot,
+					footerSlot
 				}), status === 8 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WarningMessages, {
 					route,
 					allowInteraction: true

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionExecutionContent.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionExecutionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { domMax, LazyMotion, MotionConfig } from 'motion/react'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'\nimport { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useExecutionRows } from '../../components/StepActions/executionRows.js'\nimport { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { ExecutionDoneCard } from './ExecutionDoneCard.js'\nimport { TransactionDoneButtons } from './TransactionDoneButtons.js'\nimport { TransactionFailedButtons } from './TransactionFailedButtons.js'\n\nexport interface TransactionExecutionContentProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\n/**\n * Execution-phase layout for the Transaction page.\n * Renders the {@link ExecutionStatusCard}, warning messages,\n * and terminal action buttons.\n */\nexport const TransactionExecutionContent: React.FC<\n  TransactionExecutionContentProps\n> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {\n  const { title, message } = useRouteExecutionMessage(route, status)\n  const {\n    mode,\n    contractCompactComponent,\n    contractSecondaryComponent,\n    defaultUI,\n  } = useWidgetConfig()\n\n  const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)\n  const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)\n\n  const showContract =\n    mode === 'custom' &&\n    isDone &&\n    !!(contractCompactComponent || contractSecondaryComponent)\n\n  const iconSlot = showContract ? (\n    contractCompactComponent || contractSecondaryComponent\n  ) : (\n    <StatusIcon route={route} status={status} />\n  )\n\n  const footerSlot = isDone ? (\n    <ExecutionDoneCard route={route} status={status} />\n  ) : (\n    <Card type=\"default\" indented>\n      <RouteTokens\n        route={route}\n        defaultExpanded={defaultUI?.transactionDetailsExpanded}\n      />\n    </Card>\n  )\n\n  return (\n    <LazyMotion features={domMax} strict>\n      <MotionConfig reducedMotion=\"user\">\n        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n          <ExecutionStatusCard\n            title={title}\n            description={message}\n            rows={rows}\n            iconSlot={iconSlot}\n            footerSlot={footerSlot}\n          />\n          {status === RouteExecutionStatus.Failed ? (\n            <>\n              <WarningMessages route={route} allowInteraction />\n              <TransactionFailedButtons\n                route={route}\n                restartRoute={restartRoute}\n                deleteRoute={deleteRoute}\n              />\n            </>\n          ) : isDone ? (\n            <TransactionDoneButtons route={route} status={status} />\n          ) : null}\n        </Box>\n      </MotionConfig>\n    </LazyMotion>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,+BAER,EAAE,OAAO,QAAQ,cAAc,kBAA+B;CACjE,MAAM,EAAE,OAAO,YAAY,yBAAyB,OAAO,MAAM;CACjE,MAAM,EACJ,MACA,0BACA,4BACA,cACE,gBAAgB;CAEpB,MAAM,SAAS,YAAY,QAAA,CAAiC;CAyB5D,OACE,oBAAC,YAAD;EAAY,UAAU;EAAQ,QAAA;YAC5B,oBAAC,cAAD;GAAc,eAAc;aAC1B,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,eAAe;KAAU,KAAK;IAAE;cAA5D,CACE,oBAAC,qBAAD;KACS;KACP,aAAa;KACb,MA/BG,iBAAiB,OAAO,SAAS,MAAM,YAAY,KAAA,CA+B7C;KACT,UA7BR,SAAS,YACT,UACA,CAAC,EAAE,4BAA4B,8BAG/B,4BAA4B,6BAE5B,oBAAC,YAAD;MAAmB;MAAe;KAAS,CAAA;KAuBnC,YApBS,SACjB,oBAAC,mBAAD;MAA0B;MAAe;KAAS,CAAA,IAElD,oBAACA,QAAD;MAAM,MAAK;MAAU,UAAA;gBACnB,oBAAC,aAAD;OACS;OACP,iBAAiB,WAAW;MAC7B,CAAA;KACG,CAAA;IAaC,CAAA,GACA,WAAA,IACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;KAAwB;KAAO,kBAAA;IAAkB,CAAA,GACjD,oBAAC,0BAAD;KACS;KACO;KACD;IACd,CAAA,CACD,EAAA,CAAA,IACA,SACF,oBAAC,wBAAD;KAA+B;KAAe;IAAS,CAAA,IACrD,IACD;;EACO,CAAA;CACJ,CAAA;AAEhB"}
+{"version":3,"file":"TransactionExecutionContent.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionExecutionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { domMax, LazyMotion, MotionConfig } from 'motion/react'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'\nimport { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useExecutionRows } from '../../components/StepActions/executionRows.js'\nimport { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { ExecutionDoneCard } from './ExecutionDoneCard.js'\nimport { TransactionDoneButtons } from './TransactionDoneButtons.js'\nimport { TransactionFailedButtons } from './TransactionFailedButtons.js'\n\nexport interface TransactionExecutionContentProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\n/**\n * Execution-phase layout for the Transaction page.\n * Renders the {@link ExecutionStatusCard}, warning messages,\n * and terminal action buttons.\n */\nexport const TransactionExecutionContent: React.FC<\n  TransactionExecutionContentProps\n> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {\n  const { title, message } = useRouteExecutionMessage(route, status)\n  const {\n    mode,\n    contractCompactComponent,\n    contractSecondaryComponent,\n    defaultUI,\n  } = useWidgetConfig()\n\n  const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)\n  const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)\n\n  const showContract =\n    mode === 'custom' &&\n    isDone &&\n    !!(contractCompactComponent || contractSecondaryComponent)\n\n  const iconSlot = showContract ? (\n    contractCompactComponent || contractSecondaryComponent\n  ) : (\n    <StatusIcon route={route} status={status} />\n  )\n\n  const footerSlot = isDone ? (\n    <ExecutionDoneCard route={route} status={status} />\n  ) : (\n    <Card type=\"default\" indented>\n      <RouteTokens\n        route={route}\n        defaultExpanded={defaultUI?.transactionDetailsExpanded}\n      />\n    </Card>\n  )\n\n  return (\n    <LazyMotion features={domMax} strict>\n      <MotionConfig reducedMotion=\"user\">\n        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n          <ExecutionStatusCard\n            title={title}\n            description={message}\n            rows={rows}\n            iconSlot={iconSlot}\n            footerSlot={footerSlot}\n          />\n          {status === RouteExecutionStatus.Failed ? (\n            <>\n              <WarningMessages route={route} allowInteraction />\n              <TransactionFailedButtons\n                route={route}\n                restartRoute={restartRoute}\n                deleteRoute={deleteRoute}\n              />\n            </>\n          ) : isDone ? (\n            <TransactionDoneButtons route={route} status={status} />\n          ) : null}\n        </Box>\n      </MotionConfig>\n    </LazyMotion>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,+BAER,EAAE,OAAO,QAAQ,cAAc,kBAA+B;CACjE,MAAM,EAAE,OAAO,YAAY,yBAAyB,OAAO,MAAM;CACjE,MAAM,EACJ,MACA,0BACA,4BACA,cACE,gBAAgB;CAEpB,MAAM,SAAS,YAAY,QAAA,CAAiC;CAC5D,MAAM,OAAO,iBAAiB,OAAO,SAAS,MAAM,YAAY,KAAA,CAAS;CAOzE,MAAM,WAJJ,SAAS,YACT,UACA,CAAC,EAAE,4BAA4B,8BAG/B,4BAA4B,6BAE5B,oBAAC,YAAD;EAAmB;EAAe;CAAS,CAAA;CAG7C,MAAM,aAAa,SACjB,oBAAC,mBAAD;EAA0B;EAAe;CAAS,CAAA,IAElD,oBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;EACnB,UAAA,oBAAC,aAAD;GACS;GACP,iBAAiB,WAAW;EAC7B,CAAA;CACG,CAAA;CAGR,OACE,oBAAC,YAAD;EAAY,UAAU;EAAQ,QAAA;EAC5B,UAAA,oBAAC,cAAD;GAAc,eAAc;GAC1B,UAAA,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,eAAe;KAAU,KAAK;IAAE;IAA5D,UAAA,CACE,oBAAC,qBAAD;KACS;KACP,aAAa;KACP;KACI;KACE;IACb,CAAA,GACA,WAAA,IACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;KAAwB;KAAO,kBAAA;IAAkB,CAAA,GACjD,oBAAC,0BAAD;KACS;KACO;KACD;IACd,CAAA,CACD,EAAA,CAAA,IACA,SACF,oBAAC,wBAAD;KAA+B;KAAe;IAAS,CAAA,IACrD,IACD;;EACO,CAAA;CACJ,CAAA;AAEhB"}

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

@@ -28,7 +28,9 @@ const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
 			return;
 		}
 		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
+		const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+		const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+		if (getTokenValueLossThreshold(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
 		else restartRoute();
 	};
 	return /* @__PURE__ */ jsxs(Box, {

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionFailedButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionFailedButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box, Button } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport { getTokenValueLossThreshold } from './utils.js'\n\ninterface TransactionFailedButtonsProps {\n  route: RouteExtended\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\nexport const TransactionFailedButtons: React.FC<\n  TransactionFailedButtonsProps\n> = ({ route, restartRoute, deleteRoute }) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { mode, hiddenUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const handleRetryClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      restartRoute()\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Box sx={{ display: 'flex', gap: 1.5 }}>\n        <Box sx={{ flex: 1 }}>\n          <Button onClick={handleRemoveRoute} fullWidth>\n            {t('button.delete')}\n          </Button>\n        </Box>\n        <Box sx={{ flex: 1 }}>\n          <StartTransactionButton\n            text={t('button.tryAgain')}\n            onClick={handleRetryClick}\n            route={route}\n            loading={isLoadingAddressActivity}\n          />\n        </Box>\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={restartRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={restartRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,4BAER,EAAE,OAAO,cAAc,kBAAkB;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAE3C,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,0BAA0B;EAC9B,aAAa;EACb,YAAY;CACd;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EASxE,IANwC,2BAFlB,OAAO,WAAW,MAAM,aAGhC,GAFM,OAAO,WAAW,MAAM,WAGhC,GACV,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,aAAa;CAEjB;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,KAAK;IAAI;cAArC,CACE,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;eACjB,oBAAC,QAAD;MAAQ,SAAS;MAAmB,WAAA;gBACjC,EAAE,eAAe;KACZ,CAAA;IACL,CAAA,GACL,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;eACjB,oBAAC,wBAAD;MACE,MAAM,EAAE,iBAAiB;MACzB,SAAS;MACF;MACP,SAAS;KACV,CAAA;IACE,CAAA,CACF;;GACJ,SAAS,WACR,oBAAC,uBAAD;IACS;IACP,KAAK;IACL,YAAY;GACb,CAAA,IACC;GACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;IACE,KAAK;IACL,YAAY;IACD;IACX,WAAW,MAAM;GAClB,CAAA,IACC;EACD;;AAET"}
+{"version":3,"file":"TransactionFailedButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionFailedButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box, Button } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport { getTokenValueLossThreshold } from './utils.js'\n\ninterface TransactionFailedButtonsProps {\n  route: RouteExtended\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\nexport const TransactionFailedButtons: React.FC<\n  TransactionFailedButtonsProps\n> = ({ route, restartRoute, deleteRoute }) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { mode, hiddenUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const handleRetryClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      restartRoute()\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Box sx={{ display: 'flex', gap: 1.5 }}>\n        <Box sx={{ flex: 1 }}>\n          <Button onClick={handleRemoveRoute} fullWidth>\n            {t('button.delete')}\n          </Button>\n        </Box>\n        <Box sx={{ flex: 1 }}>\n          <StartTransactionButton\n            text={t('button.tryAgain')}\n            onClick={handleRetryClick}\n            route={route}\n            loading={isLoadingAddressActivity}\n          />\n        </Box>\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={restartRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={restartRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,4BAER,EAAE,OAAO,cAAc,kBAAkB;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAE3C,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,0BAA0B;EAC9B,aAAa;EACb,YAAY;CACd;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;EAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;EAOvD,IANwC,2BACtC,eACA,aACA,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,aAAa;CAEjB;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAA9D,UAAA;GACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,KAAK;IAAI;IAArC,UAAA,CACE,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,QAAD;MAAQ,SAAS;MAAmB,WAAA;MACjC,UAAA,EAAE,eAAe;KACZ,CAAA;IACL,CAAA,GACL,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,wBAAD;MACE,MAAM,EAAE,iBAAiB;MACzB,SAAS;MACF;MACP,SAAS;KACV,CAAA;IACE,CAAA,CACF;;GACJ,SAAS,WACR,oBAAC,uBAAD;IACS;IACP,KAAK;IACL,YAAY;GACb,CAAA,IACC;GACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;IACE,KAAK;IACL,YAAY;IACD;IACX,WAAW,MAAM;GAClB,CAAA,IACC;EACD;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport { useLocation } from '@tanstack/react-router'\nimport { type JSX, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { usePacedRouteExecution } from '../../hooks/usePacedRouteExecution.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { TransactionContent } from './TransactionContent.js'\n\nexport const TransactionPage = (): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig()\n  const { search }: any = useLocation()\n  const stateRouteId = search?.routeId\n  const [routeId, setRouteId] = useState<string>(stateRouteId)\n  const [routeRefreshing, setRouteRefreshing] = useState(false)\n  const clearAmountFields = useClearAmountFields()\n\n  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n\n  const onAcceptExchangeRateUpdate = (\n    resolver: (value: boolean) => void,\n    data: ExchangeRateUpdateParams\n  ) => {\n    exchangeRateBottomSheetRef.current?.open(resolver, data)\n  }\n\n  const { route, status, executeRoute, restartRoute, deleteRoute } =\n    usePacedRouteExecution({\n      routeId: routeId,\n      onAcceptExchangeRateUpdate,\n    })\n\n  const statusRef = useRef(status)\n  statusRef.current = status\n\n  const getHeaderTitle = () => {\n    if (mode === 'custom') {\n      return t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n    }\n    if (route) {\n      const transactionType =\n        route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n      return status === RouteExecutionStatus.Idle\n        ? t(`button.${transactionType}Review`)\n        : t(`header.${transactionType}`)\n    }\n\n    return t('header.exchange')\n  }\n\n  const headerAction = useMemo(\n    () =>\n      status === RouteExecutionStatus.Idle ? (\n        <RouteTracker\n          observableRouteId={stateRouteId}\n          onChange={setRouteId}\n          onFetching={setRouteRefreshing}\n        />\n      ) : undefined,\n    [stateRouteId, status]\n  )\n\n  useHeader(getHeaderTitle(), headerAction)\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup only on unmount\n  useEffect(() => {\n    return () => {\n      if (\n        statusRef.current &&\n        statusRef.current !== RouteExecutionStatus.Idle &&\n        !hasEnumFlag(statusRef.current, RouteExecutionStatus.Done)\n      ) {\n        clearAmountFields()\n      }\n    }\n  }, [])\n\n  if (!route || !status) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionContent\n        route={route}\n        status={status}\n        executeRoute={executeRoute}\n        restartRoute={restartRoute}\n        deleteRoute={deleteRoute}\n        routeRefreshing={routeRefreshing}\n      />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,wBAA4C;CACvD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,+BAA+B,gBAAgB;CAC1E,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,eAAe,QAAQ;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAiB,YAAY;CAC3D,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,6BAA6B,OAAoC,IAAI;CAE3E,MAAM,8BACJ,UACA,SACG;EACH,2BAA2B,SAAS,KAAK,UAAU,IAAI;CACzD;CAEA,MAAM,EAAE,OAAO,QAAQ,cAAc,cAAc,gBACjD,uBAAuB;EACZ;EACT;CACF,CAAC;CAEH,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CAEpB,MAAM,uBAAuB;EAC3B,IAAI,SAAS,UACX,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY;EAE9D,IAAI,OAAO;GACT,MAAM,kBACJ,MAAM,gBAAgB,MAAM,YAAY,SAAS;GACnD,OAAO,WAAA,IACH,EAAE,UAAU,gBAAgB,OAAO,IACnC,EAAE,UAAU,iBAAiB;EACnC;EAEA,OAAO,EAAE,iBAAiB;CAC5B;CAEA,MAAM,eAAe,cAEjB,WAAA,IACE,oBAAC,cAAD;EACE,mBAAmB;EACnB,UAAU;EACV,YAAY;CACb,CAAA,IACC,KAAA,GACN,CAAC,cAAc,MAAM,CACvB;CAEA,UAAU,eAAe,GAAG,YAAY;CAGxC,gBAAgB;EACd,aAAa;GACX,IACE,UAAU,WACV,UAAU,YAAA,KACV,CAAC,YAAY,UAAU,SAAA,CAAkC,GAEzD,kBAAkB;EAEtB;CACF,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,SAAS,CAAC,QACb,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;YAHzD;GAKE,oBAAC,oBAAD;IACS;IACC;IACM;IACA;IACD;IACI;GAClB,CAAA;GACA,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,yBAAD,EAAyB,KAAK,2BAA6B,CAAA;EAC9C;;AAEnB"}
+{"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport { useLocation } from '@tanstack/react-router'\nimport { type JSX, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { usePacedRouteExecution } from '../../hooks/usePacedRouteExecution.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { TransactionContent } from './TransactionContent.js'\n\nexport const TransactionPage = (): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig()\n  const { search }: any = useLocation()\n  const stateRouteId = search?.routeId\n  const [routeId, setRouteId] = useState<string>(stateRouteId)\n  const [routeRefreshing, setRouteRefreshing] = useState(false)\n  const clearAmountFields = useClearAmountFields()\n\n  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n\n  const onAcceptExchangeRateUpdate = (\n    resolver: (value: boolean) => void,\n    data: ExchangeRateUpdateParams\n  ) => {\n    exchangeRateBottomSheetRef.current?.open(resolver, data)\n  }\n\n  const { route, status, executeRoute, restartRoute, deleteRoute } =\n    usePacedRouteExecution({\n      routeId: routeId,\n      onAcceptExchangeRateUpdate,\n    })\n\n  const statusRef = useRef(status)\n  statusRef.current = status\n\n  const getHeaderTitle = () => {\n    if (mode === 'custom') {\n      return t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n    }\n    if (route) {\n      const transactionType =\n        route.fromChainId === route.toChainId ? 'swap' : 'bridge'\n      return status === RouteExecutionStatus.Idle\n        ? t(`button.${transactionType}Review`)\n        : t(`header.${transactionType}`)\n    }\n\n    return t('header.exchange')\n  }\n\n  const headerAction = useMemo(\n    () =>\n      status === RouteExecutionStatus.Idle ? (\n        <RouteTracker\n          observableRouteId={stateRouteId}\n          onChange={setRouteId}\n          onFetching={setRouteRefreshing}\n        />\n      ) : undefined,\n    [stateRouteId, status]\n  )\n\n  useHeader(getHeaderTitle(), headerAction)\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup only on unmount\n  useEffect(() => {\n    return () => {\n      if (\n        statusRef.current &&\n        statusRef.current !== RouteExecutionStatus.Idle &&\n        !hasEnumFlag(statusRef.current, RouteExecutionStatus.Done)\n      ) {\n        clearAmountFields()\n      }\n    }\n  }, [])\n\n  if (!route || !status) {\n    return null\n  }\n\n  return (\n    <PageContainer\n      topGutters\n      bottomGutters\n      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n    >\n      <TransactionContent\n        route={route}\n        status={status}\n        executeRoute={executeRoute}\n        restartRoute={restartRoute}\n        deleteRoute={deleteRoute}\n        routeRefreshing={routeRefreshing}\n      />\n      {mode === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n      ) : null}\n      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,wBAA4C;CACvD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,+BAA+B,gBAAgB;CAC1E,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,eAAe,QAAQ;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAiB,YAAY;CAC3D,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,6BAA6B,OAAoC,IAAI;CAE3E,MAAM,8BACJ,UACA,SACG;EACH,2BAA2B,SAAS,KAAK,UAAU,IAAI;CACzD;CAEA,MAAM,EAAE,OAAO,QAAQ,cAAc,cAAc,gBACjD,uBAAuB;EACZ;EACT;CACF,CAAC;CAEH,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CAEpB,MAAM,uBAAuB;EAC3B,IAAI,SAAS,UACX,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY;EAE9D,IAAI,OAAO;GACT,MAAM,kBACJ,MAAM,gBAAgB,MAAM,YAAY,SAAS;GACnD,OAAO,WAAA,IACH,EAAE,UAAU,gBAAgB,OAAO,IACnC,EAAE,UAAU,iBAAiB;EACnC;EAEA,OAAO,EAAE,iBAAiB;CAC5B;CAEA,MAAM,eAAe,cAEjB,WAAA,IACE,oBAAC,cAAD;EACE,mBAAmB;EACnB,UAAU;EACV,YAAY;CACb,CAAA,IACC,KAAA,GACN,CAAC,cAAc,MAAM,CACvB;CAEA,UAAU,eAAe,GAAG,YAAY;CAGxC,gBAAgB;EACd,aAAa;GACX,IACE,UAAU,WACV,UAAU,YAAA,KACV,CAAC,YAAY,UAAU,SAAA,CAAkC,GAEzD,kBAAkB;EAEtB;CACF,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,SAAS,CAAC,QACb,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;EAHzD,UAAA;GAKE,oBAAC,oBAAD;IACS;IACC;IACM;IACA;IACD;IACI;GAClB,CAAA;GACA,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,yBAAD,EAAyB,KAAK,2BAA6B,CAAA;EAC9C;;AAEnB"}

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

@@ -13,6 +13,8 @@ import { ConfirmToAddressSheet } from "./ConfirmToAddressSheet.js";
 import { StartTransactionButton } from "./StartTransactionButton.js";
 import { calculateValueLossPercentage, getTokenValueLossThreshold } from "./utils.js";
 import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
+import { useFlaggedTokenGuard } from "../../hooks/useFlaggedTokenGuard.js";
+import { TokenVerificationBottomSheet } from "./TokenVerificationBottomSheet.js";
 import { useRef } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { Box } from "@mui/material";
@@ -28,6 +30,7 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 	const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig();
 	const tokenValueBottomSheetRef = useRef(null);
 	const confirmToAddressSheetRef = useRef(null);
+	const { flaggedTokens, flaggedTokenSheetRef } = useFlaggedTokenGuard(route);
 	const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched } = useAddressActivity(route.toChainId);
 	const handleExecuteRoute = () => {
 		if (tokenValueBottomSheetRef.current?.isOpen()) {
@@ -43,6 +46,7 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 			});
 		}
 		tokenValueBottomSheetRef.current?.close();
+		flaggedTokenSheetRef.current?.close();
 		executeRoute();
 		setFieldValue("fromAmount", "");
 		if (mode === "custom") {
@@ -56,15 +60,28 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 			});
 		});
 	};
-	const handleStartClick = () => {
+	const handleStartAfterTokenCheck = () => {
 		if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.lowAddressActivityConfirmation) {
 			confirmToAddressSheetRef.current?.open();
 			return;
 		}
 		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
+		const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+		const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+		if (getTokenValueLossThreshold(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
 		else handleExecuteRoute();
 	};
+	const handleStartClick = () => {
+		if (flaggedTokens.length) {
+			flaggedTokenSheetRef.current?.open();
+			return;
+		}
+		handleStartAfterTokenCheck();
+	};
+	const handleFlaggedTokensContinue = () => {
+		flaggedTokenSheetRef.current?.close();
+		handleStartAfterTokenCheck();
+	};
 	const getButtonText = () => {
 		switch (mode) {
 			case "custom": return modeOptions?.custom?.type === "deposit" ? t("button.deposit") : t("button.buy");
@@ -104,6 +121,11 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 			ref: tokenValueBottomSheetRef,
 			onContinue: handleExecuteRoute
 		}) : null,
+		flaggedTokens.length ? /* @__PURE__ */ jsx(TokenVerificationBottomSheet, {
+			ref: flaggedTokenSheetRef,
+			tokens: flaggedTokens,
+			onContinue: handleFlaggedTokensContinue
+		}) : null,
 		!hiddenUI?.lowAddressActivityConfirmation ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
 			ref: confirmToAddressSheetRef,
 			onContinue: handleExecuteRoute,

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionReview.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionReview.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n  calculateValueLossPercentage,\n  getTokenValueLossThreshold,\n} from './utils.js'\n\ninterface TransactionReviewProps {\n  route: RouteExtended\n  executeRoute: () => void\n  routeRefreshing: boolean\n}\n\nexport const TransactionReview: React.FC<TransactionReviewProps> = ({\n  route,\n  executeRoute,\n  routeRefreshing,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const emitter = useWidgetEvents()\n  const setBackAction = useHeaderStore((state) => state.setBackAction)\n  const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleExecuteRoute = () => {\n    if (tokenValueBottomSheetRef.current?.isOpen()) {\n      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n      const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n      emitter.emit(WidgetEvent.RouteHighValueLoss, {\n        fromAmountUSD,\n        toAmountUSD,\n        gasCostUSD,\n        feeCostUSD,\n        valueLoss: calculateValueLossPercentage(\n          fromAmountUSD,\n          toAmountUSD,\n          gasCostUSD,\n          feeCostUSD\n        ),\n      })\n    }\n    tokenValueBottomSheetRef.current?.close()\n    executeRoute()\n    setFieldValue('fromAmount', '')\n    if (mode === 'custom') {\n      setFieldValue('fromToken', '')\n      setFieldValue('toToken', '')\n    }\n    setBackAction(() => {\n      navigate({ to: navigationRoutes.home, replace: true })\n    })\n  }\n\n  const handleStartClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      handleExecuteRoute()\n    }\n  }\n\n  const getButtonText = (): string => {\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.startBridging')\n      default: {\n        const transactionType =\n          route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'\n        return t(`button.start${transactionType}`)\n      }\n    }\n  }\n\n  return (\n    <>\n      <Card type=\"default\" indented>\n        <RouteTokens\n          route={route}\n          showEssentials\n          defaultExpanded={defaultUI?.transactionDetailsExpanded}\n        />\n      </Card>\n      <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />\n      <Box sx={{ flex: 1 }}>\n        <StartTransactionButton\n          text={getButtonText()}\n          onClick={handleStartClick}\n          route={route}\n          loading={routeRefreshing || isLoadingAddressActivity}\n        />\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleExecuteRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleExecuteRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,qBAAuD,EAClE,OACA,cACA,sBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,UAAU,gBAAgB;CAChC,MAAM,gBAAgB,gBAAgB,UAAU,MAAM,aAAa;CACnE,MAAM,EAAE,MAAM,aAAa,UAAU,cAAc,gBAAgB;CAEnE,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,2BAA2B;EAC/B,IAAI,yBAAyB,SAAS,OAAO,GAAG;GAC9C,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;GACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;GAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;GACvD,QAAQ,KAAA,sBAAqC;IAC3C;IACA;IACA;IACA;IACA,WAAW,6BACT,eACA,aACA,YACA,UACF;GACF,CAAC;EACH;EACA,yBAAyB,SAAS,MAAM;EACxC,aAAa;EACb,cAAc,cAAc,EAAE;EAC9B,IAAI,SAAS,UAAU;GACrB,cAAc,aAAa,EAAE;GAC7B,cAAc,WAAW,EAAE;EAC7B;EACA,oBAAoB;GAClB,SAAS;IAAE,IAAI,iBAAiB;IAAM,SAAS;GAAK,CAAC;EACvD,CAAC;CACH;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EASxE,IANwC,2BAFlB,OAAO,WAAW,MAAM,aAGhC,GAFM,OAAO,WAAW,MAAM,WAGhC,GACV,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,mBAAmB;CAEvB;CAEA,MAAM,sBAA8B;EAClC,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,sBAAsB;GACjC,SAAS;IACP,MAAM,kBACJ,MAAM,gBAAgB,MAAM,YAAY,aAAa;IACvD,OAAO,EAAE,eAAe,iBAAiB;GAC3C;EACF;CACF;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAACA,QAAD;GAAM,MAAK;GAAU,UAAA;aACnB,oBAAC,aAAD;IACS;IACP,gBAAA;IACA,iBAAiB,WAAW;GAC7B,CAAA;EACG,CAAA;EACN,oBAAC,iBAAD;GAAiB,IAAI,EAAE,IAAI,EAAE;GAAU;GAAO,kBAAA;EAAkB,CAAA;EAChE,oBAAC,KAAD;GAAK,IAAI,EAAE,MAAM,EAAE;aACjB,oBAAC,wBAAD;IACE,MAAM,cAAc;IACpB,SAAS;IACF;IACP,SAAS,mBAAmB;GAC7B,CAAA;EACE,CAAA;EACJ,SAAS,WACR,oBAAC,uBAAD;GACS;GACP,KAAK;GACL,YAAY;EACb,CAAA,IACC;EACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;GACE,KAAK;GACL,YAAY;GACD;GACX,WAAW,MAAM;EAClB,CAAA,IACC;CACJ,EAAA,CAAA;AAEN"}
+{"version":3,"file":"TransactionReview.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionReview.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { Card } from '../../components/Card/Card.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useFlaggedTokenGuard } from '../../hooks/useFlaggedTokenGuard.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport { TokenVerificationBottomSheet } from './TokenVerificationBottomSheet.js'\nimport {\n  calculateValueLossPercentage,\n  getTokenValueLossThreshold,\n} from './utils.js'\n\ninterface TransactionReviewProps {\n  route: RouteExtended\n  executeRoute: () => void\n  routeRefreshing: boolean\n}\n\nexport const TransactionReview: React.FC<TransactionReviewProps> = ({\n  route,\n  executeRoute,\n  routeRefreshing,\n}) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { setFieldValue } = useFieldActions()\n  const emitter = useWidgetEvents()\n  const setBackAction = useHeaderStore((state) => state.setBackAction)\n  const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const { flaggedTokens, flaggedTokenSheetRef } = useFlaggedTokenGuard(route)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleExecuteRoute = () => {\n    if (tokenValueBottomSheetRef.current?.isOpen()) {\n      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n      const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n      emitter.emit(WidgetEvent.RouteHighValueLoss, {\n        fromAmountUSD,\n        toAmountUSD,\n        gasCostUSD,\n        feeCostUSD,\n        valueLoss: calculateValueLossPercentage(\n          fromAmountUSD,\n          toAmountUSD,\n          gasCostUSD,\n          feeCostUSD\n        ),\n      })\n    }\n    tokenValueBottomSheetRef.current?.close()\n    flaggedTokenSheetRef.current?.close()\n    executeRoute()\n    setFieldValue('fromAmount', '')\n    if (mode === 'custom') {\n      setFieldValue('fromToken', '')\n      setFieldValue('toToken', '')\n    }\n    setBackAction(() => {\n      navigate({ to: navigationRoutes.home, replace: true })\n    })\n  }\n\n  // Runs the remaining gates. The flagged-token sheet continues into this\n  // rather than executing, so accepting it does not skip the others.\n  const handleStartAfterTokenCheck = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      handleExecuteRoute()\n    }\n  }\n\n  const handleStartClick = () => {\n    if (flaggedTokens.length) {\n      flaggedTokenSheetRef.current?.open()\n      return\n    }\n    handleStartAfterTokenCheck()\n  }\n\n  const handleFlaggedTokensContinue = () => {\n    flaggedTokenSheetRef.current?.close()\n    handleStartAfterTokenCheck()\n  }\n\n  const getButtonText = (): string => {\n    switch (mode) {\n      case 'custom':\n        return modeOptions?.custom?.type === 'deposit'\n          ? t('button.deposit')\n          : t('button.buy')\n      case 'refuel':\n        return t('button.startBridging')\n      default: {\n        const transactionType =\n          route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'\n        return t(`button.start${transactionType}`)\n      }\n    }\n  }\n\n  return (\n    <>\n      <Card type=\"default\" indented>\n        <RouteTokens\n          route={route}\n          showEssentials\n          defaultExpanded={defaultUI?.transactionDetailsExpanded}\n        />\n      </Card>\n      <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />\n      <Box sx={{ flex: 1 }}>\n        <StartTransactionButton\n          text={getButtonText()}\n          onClick={handleStartClick}\n          route={route}\n          loading={routeRefreshing || isLoadingAddressActivity}\n        />\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleExecuteRoute}\n        />\n      ) : null}\n      {flaggedTokens.length ? (\n        <TokenVerificationBottomSheet\n          ref={flaggedTokenSheetRef}\n          tokens={flaggedTokens}\n          onContinue={handleFlaggedTokensContinue}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleExecuteRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,qBAAuD,EAClE,OACA,cACA,sBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,UAAU,gBAAgB;CAChC,MAAM,gBAAgB,gBAAgB,UAAU,MAAM,aAAa;CACnE,MAAM,EAAE,MAAM,aAAa,UAAU,cAAc,gBAAgB;CAEnE,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EAAE,eAAe,yBAAyB,qBAAqB,KAAK;CAE1E,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,2BAA2B;EAC/B,IAAI,yBAAyB,SAAS,OAAO,GAAG;GAC9C,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;GACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;GAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;GACvD,QAAQ,KAAA,sBAAqC;IAC3C;IACA;IACA;IACA;IACA,WAAW,6BACT,eACA,aACA,YACA,UACF;GACF,CAAC;EACH;EACA,yBAAyB,SAAS,MAAM;EACxC,qBAAqB,SAAS,MAAM;EACpC,aAAa;EACb,cAAc,cAAc,EAAE;EAC9B,IAAI,SAAS,UAAU;GACrB,cAAc,aAAa,EAAE;GAC7B,cAAc,WAAW,EAAE;EAC7B;EACA,oBAAoB;GAClB,SAAS;IAAE,IAAI,iBAAiB;IAAM,SAAS;GAAK,CAAC;EACvD,CAAC;CACH;CAIA,MAAM,mCAAmC;EACvC,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;EAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;EAOvD,IANwC,2BACtC,eACA,aACA,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,mBAAmB;CAEvB;CAEA,MAAM,yBAAyB;EAC7B,IAAI,cAAc,QAAQ;GACxB,qBAAqB,SAAS,KAAK;GACnC;EACF;EACA,2BAA2B;CAC7B;CAEA,MAAM,oCAAoC;EACxC,qBAAqB,SAAS,MAAM;EACpC,2BAA2B;CAC7B;CAEA,MAAM,sBAA8B;EAClC,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,sBAAsB;GACjC,SAAS;IACP,MAAM,kBACJ,MAAM,gBAAgB,MAAM,YAAY,aAAa;IACvD,OAAO,EAAE,eAAe,iBAAiB;GAC3C;EACF;CACF;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAACA,QAAD;GAAM,MAAK;GAAU,UAAA;GACnB,UAAA,oBAAC,aAAD;IACS;IACP,gBAAA;IACA,iBAAiB,WAAW;GAC7B,CAAA;EACG,CAAA;EACN,oBAAC,iBAAD;GAAiB,IAAI,EAAE,IAAI,EAAE;GAAU;GAAO,kBAAA;EAAkB,CAAA;EAChE,oBAAC,KAAD;GAAK,IAAI,EAAE,MAAM,EAAE;GACjB,UAAA,oBAAC,wBAAD;IACE,MAAM,cAAc;IACpB,SAAS;IACF;IACP,SAAS,mBAAmB;GAC7B,CAAA;EACE,CAAA;EACJ,SAAS,WACR,oBAAC,uBAAD;GACS;GACP,KAAK;GACL,YAAY;EACb,CAAA,IACC;EACH,cAAc,SACb,oBAAC,8BAAD;GACE,KAAK;GACL,QAAQ;GACR,YAAY;EACb,CAAA,IACC;EACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;GACE,KAAK;GACL,YAAY;GACD;GACX,WAAW,MAAM;EAClB,CAAA,IACC;CACJ,EAAA,CAAA;AAEN"}

package/dist/esm/providers/I18nProvider/I18nProvider.js

@@ -17,43 +17,44 @@ const I18nProvider = ({ children }) => {
 	const { languages, languageResources } = useWidgetConfig();
 	const { language, languageCache } = useSettings(["language", "languageCache"]);
 	const i18nInstanceRef = useRef(null);
+	const i18nInstance = useMemo(() => {
+		if (i18nInstanceRef.current) {
+			if (language && languageCache && language !== "en") i18nInstanceRef.current.addResourceBundle(language, "translation", languageCache, true, true);
+			return i18nInstanceRef.current;
+		}
+		const customLanguageKeys = languageResources ? Object.keys(languageResources).filter((key) => !allLanguages.includes(key)) : [];
+		const initialLanguage = language || languages?.default;
+		const i18n = createInstance({
+			lng: initialLanguage,
+			fallbackLng: "en",
+			lowerCaseLng: true,
+			interpolation: { escapeValue: false },
+			resources: {
+				en: { translation: mergeWithLanguageResources(en, languageResources?.en) },
+				...initialLanguage && initialLanguage !== "en" && languageCache && { [initialLanguage]: { translation: languageCache } },
+				...customLanguageKeys.reduce((acc, key) => {
+					const customResource = languageResources?.[key];
+					if (customResource) acc[key] = { translation: customResource };
+					return acc;
+				}, {})
+			},
+			detection: { caches: [] },
+			returnEmptyString: false
+		});
+		i18n.init();
+		i18n.services.formatter?.addCached("numberExt", compactNumberFormatter);
+		i18n.services.formatter?.addCached("currencyExt", currencyExtendedFormatter);
+		i18n.services.formatter?.addCached("percent", percentFormatter);
+		i18nInstanceRef.current = i18n;
+		return i18n;
+	}, [
+		language,
+		languageResources,
+		languages?.default,
+		languageCache
+	]);
 	return /* @__PURE__ */ jsxs(I18nextProvider, {
-		i18n: useMemo(() => {
-			if (i18nInstanceRef.current) {
-				if (language && languageCache && language !== "en") i18nInstanceRef.current.addResourceBundle(language, "translation", languageCache, true, true);
-				return i18nInstanceRef.current;
-			}
-			const customLanguageKeys = languageResources ? Object.keys(languageResources).filter((key) => !allLanguages.includes(key)) : [];
-			const initialLanguage = language || languages?.default;
-			const i18n = createInstance({
-				lng: initialLanguage,
-				fallbackLng: "en",
-				lowerCaseLng: true,
-				interpolation: { escapeValue: false },
-				resources: {
-					en: { translation: mergeWithLanguageResources(en, languageResources?.en) },
-					...initialLanguage && initialLanguage !== "en" && languageCache && { [initialLanguage]: { translation: languageCache } },
-					...customLanguageKeys.reduce((acc, key) => {
-						const customResource = languageResources?.[key];
-						if (customResource) acc[key] = { translation: customResource };
-						return acc;
-					}, {})
-				},
-				detection: { caches: [] },
-				returnEmptyString: false
-			});
-			i18n.init();
-			i18n.services.formatter?.addCached("numberExt", compactNumberFormatter);
-			i18n.services.formatter?.addCached("currencyExt", currencyExtendedFormatter);
-			i18n.services.formatter?.addCached("percent", percentFormatter);
-			i18nInstanceRef.current = i18n;
-			return i18n;
-		}, [
-			language,
-			languageResources,
-			languages?.default,
-			languageCache
-		]),
+		i18n: i18nInstance,
 		children: [children, /* @__PURE__ */ jsx(DefaultLanguageHandler, {})]
 	});
 };

package/dist/esm/providers/I18nProvider/I18nProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"I18nProvider.js","names":["enResource"],"sources":["../../../../src/providers/I18nProvider/I18nProvider.tsx"],"sourcesContent":["import { createInstance, type i18n } from 'i18next'\nimport { useEffect, useMemo, useRef } from 'react'\nimport { I18nextProvider } from 'react-i18next'\nimport { useLanguages } from '../../hooks/useLanguages.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'\nimport { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'\nimport { percentFormatter } from '../../utils/percentFormatter.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\nimport { allLanguages } from './constants.js'\nimport { enResource } from './enResource.js'\nimport { mergeWithLanguageResources } from './i18n.js'\nimport type { LanguageKey, LanguageResource, PartialResource } from './types.js'\n\nexport const I18nProvider: React.FC<React.PropsWithChildren> = ({\n  children,\n}) => {\n  const { languages, languageResources } = useWidgetConfig()\n  const { language, languageCache } = useSettings(['language', 'languageCache'])\n  const i18nInstanceRef = useRef<i18n | null>(null)\n\n  const i18nInstance = useMemo(() => {\n    if (i18nInstanceRef.current) {\n      // Update i18n instance with language and language cache updates\n      if (language && languageCache && language !== 'en') {\n        i18nInstanceRef.current.addResourceBundle(\n          language,\n          'translation',\n          languageCache,\n          true,\n          true\n        )\n      }\n      return i18nInstanceRef.current\n    }\n\n    // Custom language resources (of non-default languages) are added statically.\n    // If custom language resources extend existing languages, they are merged with dynamically loaded resources.\n    const customLanguageKeys = languageResources\n      ? Object.keys(languageResources).filter(\n          (key: string) => !allLanguages.includes(key as LanguageKey)\n        )\n      : []\n    const initialLanguage = language || languages?.default\n    const i18n = createInstance({\n      lng: initialLanguage,\n      fallbackLng: 'en',\n      lowerCaseLng: true,\n      interpolation: { escapeValue: false },\n      resources: {\n        en: {\n          translation: mergeWithLanguageResources(\n            enResource,\n            languageResources?.en\n          ),\n        },\n        ...(initialLanguage &&\n          initialLanguage !== 'en' &&\n          languageCache && {\n            [initialLanguage]: {\n              translation: languageCache,\n            },\n          }),\n        // Add non-existing custom language resources\n        ...customLanguageKeys.reduce(\n          (acc, key) => {\n            const customResource = languageResources?.[key as LanguageKey]\n            if (customResource) {\n              acc[key] = {\n                translation: customResource,\n              }\n            }\n            return acc\n          },\n          {} as Record<\n            string,\n            { translation: PartialResource<LanguageResource> }\n          >\n        ),\n      },\n      detection: {\n        caches: [],\n      },\n      returnEmptyString: false,\n    })\n\n    i18n.init()\n\n    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)\n    i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)\n    i18n.services.formatter?.addCached('percent', percentFormatter)\n    i18nInstanceRef.current = i18n\n    return i18n\n  }, [language, languageResources, languages?.default, languageCache])\n\n  return (\n    <I18nextProvider i18n={i18nInstance}>\n      {children}\n      <DefaultLanguageHandler />\n    </I18nextProvider>\n  )\n}\n\n// Sync language settings internally when config.languages.default changes externally\nconst DefaultLanguageHandler: React.FC = () => {\n  const { languages } = useWidgetConfig()\n  const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [\n    state.lastDefaultLanguage,\n    state.setValue,\n  ])\n  const { setLanguageWithCode: setLanguage } = useLanguages()\n\n  useEffect(() => {\n    const currentDefaultLanguage = languages?.default\n\n    const defaultLanguageChanged =\n      currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage\n\n    if (!defaultLanguageChanged) {\n      return\n    }\n\n    const updateLanguage = async () => {\n      await setLanguage(currentDefaultLanguage)\n      setValue('lastDefaultLanguage', currentDefaultLanguage)\n    }\n\n    updateLanguage()\n  }, [languages?.default, setValue, lastDefaultLanguage, setLanguage])\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,gBAAmD,EAC9D,eACI;CACJ,MAAM,EAAE,WAAW,sBAAsB,gBAAgB;CACzD,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,kBAAkB,OAAoB,IAAI;CA4EhD,OACE,qBAAC,iBAAD;EAAiB,MA3EE,cAAc;GACjC,IAAI,gBAAgB,SAAS;IAE3B,IAAI,YAAY,iBAAiB,aAAa,MAC5C,gBAAgB,QAAQ,kBACtB,UACA,eACA,eACA,MACA,IACF;IAEF,OAAO,gBAAgB;GACzB;GAIA,MAAM,qBAAqB,oBACvB,OAAO,KAAK,iBAAiB,CAAC,CAAC,QAC5B,QAAgB,CAAC,aAAa,SAAS,GAAkB,CAC5D,IACA,CAAC;GACL,MAAM,kBAAkB,YAAY,WAAW;GAC/C,MAAM,OAAO,eAAe;IAC1B,KAAK;IACL,aAAa;IACb,cAAc;IACd,eAAe,EAAE,aAAa,MAAM;IACpC,WAAW;KACT,IAAI,EACF,aAAa,2BACXA,IACA,mBAAmB,EACrB,EACF;KACA,GAAI,mBACF,oBAAoB,QACpB,iBAAiB,GACd,kBAAkB,EACjB,aAAa,cACf,EACF;KAEF,GAAG,mBAAmB,QACnB,KAAK,QAAQ;MACZ,MAAM,iBAAiB,oBAAoB;MAC3C,IAAI,gBACF,IAAI,OAAO,EACT,aAAa,eACf;MAEF,OAAO;KACT,GACA,CAAC,CAIH;IACF;IACA,WAAW,EACT,QAAQ,CAAC,EACX;IACA,mBAAmB;GACrB,CAAC;GAED,KAAK,KAAK;GAEV,KAAK,SAAS,WAAW,UAAU,aAAa,sBAAsB;GACtE,KAAK,SAAS,WAAW,UAAU,eAAe,yBAAyB;GAC3E,KAAK,SAAS,WAAW,UAAU,WAAW,gBAAgB;GAC9D,gBAAgB,UAAU;GAC1B,OAAO;EACT,GAAG;GAAC;GAAU;GAAmB,WAAW;GAAS;EAAa,CAG9B;YAAlC,CACG,UACD,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAErB;AAGA,MAAM,+BAAyC;CAC7C,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,CAAC,qBAAqB,YAAY,kBAAkB,UAAU,CAClE,MAAM,qBACN,MAAM,QACR,CAAC;CACD,MAAM,EAAE,qBAAqB,gBAAgB,aAAa;CAE1D,gBAAgB;EACd,MAAM,yBAAyB,WAAW;EAK1C,IAAI,EAFF,0BAA0B,2BAA2B,sBAGrD;EAGF,MAAM,iBAAiB,YAAY;GACjC,MAAM,YAAY,sBAAsB;GACxC,SAAS,uBAAuB,sBAAsB;EACxD;EAEA,eAAe;CACjB,GAAG;EAAC,WAAW;EAAS;EAAU;EAAqB;CAAW,CAAC;CAEnE,OAAO;AACT"}
+{"version":3,"file":"I18nProvider.js","names":["enResource"],"sources":["../../../../src/providers/I18nProvider/I18nProvider.tsx"],"sourcesContent":["import { createInstance, type i18n } from 'i18next'\nimport { useEffect, useMemo, useRef } from 'react'\nimport { I18nextProvider } from 'react-i18next'\nimport { useLanguages } from '../../hooks/useLanguages.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'\nimport { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'\nimport { percentFormatter } from '../../utils/percentFormatter.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\nimport { allLanguages } from './constants.js'\nimport { enResource } from './enResource.js'\nimport { mergeWithLanguageResources } from './i18n.js'\nimport type { LanguageKey, LanguageResource, PartialResource } from './types.js'\n\nexport const I18nProvider: React.FC<React.PropsWithChildren> = ({\n  children,\n}) => {\n  const { languages, languageResources } = useWidgetConfig()\n  const { language, languageCache } = useSettings(['language', 'languageCache'])\n  const i18nInstanceRef = useRef<i18n | null>(null)\n\n  const i18nInstance = useMemo(() => {\n    if (i18nInstanceRef.current) {\n      // Update i18n instance with language and language cache updates\n      if (language && languageCache && language !== 'en') {\n        i18nInstanceRef.current.addResourceBundle(\n          language,\n          'translation',\n          languageCache,\n          true,\n          true\n        )\n      }\n      return i18nInstanceRef.current\n    }\n\n    // Custom language resources (of non-default languages) are added statically.\n    // If custom language resources extend existing languages, they are merged with dynamically loaded resources.\n    const customLanguageKeys = languageResources\n      ? Object.keys(languageResources).filter(\n          (key: string) => !allLanguages.includes(key as LanguageKey)\n        )\n      : []\n    const initialLanguage = language || languages?.default\n    const i18n = createInstance({\n      lng: initialLanguage,\n      fallbackLng: 'en',\n      lowerCaseLng: true,\n      interpolation: { escapeValue: false },\n      resources: {\n        en: {\n          translation: mergeWithLanguageResources(\n            enResource,\n            languageResources?.en\n          ),\n        },\n        ...(initialLanguage &&\n          initialLanguage !== 'en' &&\n          languageCache && {\n            [initialLanguage]: {\n              translation: languageCache,\n            },\n          }),\n        // Add non-existing custom language resources\n        ...customLanguageKeys.reduce(\n          (acc, key) => {\n            const customResource = languageResources?.[key as LanguageKey]\n            if (customResource) {\n              acc[key] = {\n                translation: customResource,\n              }\n            }\n            return acc\n          },\n          {} as Record<\n            string,\n            { translation: PartialResource<LanguageResource> }\n          >\n        ),\n      },\n      detection: {\n        caches: [],\n      },\n      returnEmptyString: false,\n    })\n\n    i18n.init()\n\n    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)\n    i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)\n    i18n.services.formatter?.addCached('percent', percentFormatter)\n    i18nInstanceRef.current = i18n\n    return i18n\n  }, [language, languageResources, languages?.default, languageCache])\n\n  return (\n    <I18nextProvider i18n={i18nInstance}>\n      {children}\n      <DefaultLanguageHandler />\n    </I18nextProvider>\n  )\n}\n\n// Sync language settings internally when config.languages.default changes externally\nconst DefaultLanguageHandler: React.FC = () => {\n  const { languages } = useWidgetConfig()\n  const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [\n    state.lastDefaultLanguage,\n    state.setValue,\n  ])\n  const { setLanguageWithCode: setLanguage } = useLanguages()\n\n  useEffect(() => {\n    const currentDefaultLanguage = languages?.default\n\n    const defaultLanguageChanged =\n      currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage\n\n    if (!defaultLanguageChanged) {\n      return\n    }\n\n    const updateLanguage = async () => {\n      await setLanguage(currentDefaultLanguage)\n      setValue('lastDefaultLanguage', currentDefaultLanguage)\n    }\n\n    updateLanguage()\n  }, [languages?.default, setValue, lastDefaultLanguage, setLanguage])\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,gBAAmD,EAC9D,eACI;CACJ,MAAM,EAAE,WAAW,sBAAsB,gBAAgB;CACzD,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,kBAAkB,OAAoB,IAAI;CAEhD,MAAM,eAAe,cAAc;EACjC,IAAI,gBAAgB,SAAS;GAE3B,IAAI,YAAY,iBAAiB,aAAa,MAC5C,gBAAgB,QAAQ,kBACtB,UACA,eACA,eACA,MACA,IACF;GAEF,OAAO,gBAAgB;EACzB;EAIA,MAAM,qBAAqB,oBACvB,OAAO,KAAK,iBAAiB,CAAC,CAAC,QAC5B,QAAgB,CAAC,aAAa,SAAS,GAAkB,CAC5D,IACA,CAAC;EACL,MAAM,kBAAkB,YAAY,WAAW;EAC/C,MAAM,OAAO,eAAe;GAC1B,KAAK;GACL,aAAa;GACb,cAAc;GACd,eAAe,EAAE,aAAa,MAAM;GACpC,WAAW;IACT,IAAI,EACF,aAAa,2BACXA,IACA,mBAAmB,EACrB,EACF;IACA,GAAI,mBACF,oBAAoB,QACpB,iBAAiB,GACd,kBAAkB,EACjB,aAAa,cACf,EACF;IAEF,GAAG,mBAAmB,QACnB,KAAK,QAAQ;KACZ,MAAM,iBAAiB,oBAAoB;KAC3C,IAAI,gBACF,IAAI,OAAO,EACT,aAAa,eACf;KAEF,OAAO;IACT,GACA,CAAC,CAIH;GACF;GACA,WAAW,EACT,QAAQ,CAAC,EACX;GACA,mBAAmB;EACrB,CAAC;EAED,KAAK,KAAK;EAEV,KAAK,SAAS,WAAW,UAAU,aAAa,sBAAsB;EACtE,KAAK,SAAS,WAAW,UAAU,eAAe,yBAAyB;EAC3E,KAAK,SAAS,WAAW,UAAU,WAAW,gBAAgB;EAC9D,gBAAgB,UAAU;EAC1B,OAAO;CACT,GAAG;EAAC;EAAU;EAAmB,WAAW;EAAS;CAAa,CAAC;CAEnE,OACE,qBAAC,iBAAD;EAAiB,MAAM;EAAvB,UAAA,CACG,UACD,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAErB;AAGA,MAAM,+BAAyC;CAC7C,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,CAAC,qBAAqB,YAAY,kBAAkB,UAAU,CAClE,MAAM,qBACN,MAAM,QACR,CAAC;CACD,MAAM,EAAE,qBAAqB,gBAAgB,aAAa;CAE1D,gBAAgB;EACd,MAAM,yBAAyB,WAAW;EAK1C,IAAI,EAFF,0BAA0B,2BAA2B,sBAGrD;EAGF,MAAM,iBAAiB,YAAY;GACjC,MAAM,YAAY,sBAAsB;GACxC,SAAS,uBAAuB,sBAAsB;EACxD;EAEA,eAAe;CACjB,GAAG;EAAC,WAAW;EAAS;EAAU;EAAqB;CAAW,CAAC;CAEnE,OAAO;AACT"}

package/dist/esm/providers/I18nProvider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/providers/I18nProvider/types.ts"],"mappings":";;KAEY,gBAAgB,KAAK,sBAE1B,WAAW,KAAK,gBAAgB,EAAE,SAErC;KAEQ;KAmBA,0BAA0B;KAE1B,uBAEL,KAAK,eAAe,gBAAgB;sBAGjB,gBAAgB"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/providers/I18nProvider/types.ts"],"mappings":";;KAEY,gBAAgB,KAAK,sBAE1B,WAAW,KAAK,gBAAgB,EAAE,SAErC;KAEQ;KAmBA,0BAA0B;KAE1B,uBAEL,KAAK,eAAe,gBAAgB;GAGjB,mBAAA,gBAAgB"}

package/dist/esm/providers/ThemeProvider/ThemeProvider.js

@@ -10,8 +10,9 @@ const ThemeProvider$1 = ({ children }) => {
 	useEffect(() => {
 		if (colorSchemeMode) setMode(colorSchemeMode);
 	}, [colorSchemeMode]);
+	const theme = useMemo(() => createTheme$1(themeConfig), [themeConfig]);
 	return /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: useMemo(() => createTheme$1(themeConfig), [themeConfig]),
+		theme,
 		defaultMode: colorSchemeMode ?? "system",
 		modeStorageKey: "li.fi-widget-mode",
 		colorSchemeStorageKey: "li.fi-widget-color-scheme",

package/dist/esm/providers/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["ThemeProvider","MuiThemeProvider","createTheme"],"sources":["../../../../src/providers/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import {\n  ThemeProvider as MuiThemeProvider,\n  useColorScheme,\n} from '@mui/material'\nimport { useEffect, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\n\nexport const ThemeProvider: React.FC<React.PropsWithChildren> = ({\n  children,\n}) => {\n  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()\n  const { setMode } = useColorScheme()\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: setMode is stable\n  useEffect(() => {\n    if (colorSchemeMode) {\n      setMode(colorSchemeMode)\n    }\n  }, [colorSchemeMode])\n\n  const theme = useMemo(() => createTheme(themeConfig), [themeConfig])\n\n  return (\n    <MuiThemeProvider\n      theme={theme}\n      defaultMode={colorSchemeMode ?? 'system'}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      {children}\n    </MuiThemeProvider>\n  )\n}\n"],"mappings":";;;;;;AAQA,MAAaA,mBAAoD,EAC/D,eACI;CACJ,MAAM,EAAE,YAAY,iBAAiB,OAAO,gBAAgB,gBAAgB;CAC5E,MAAM,EAAE,YAAY,eAAe;CAGnC,gBAAgB;EACd,IAAI,iBACF,QAAQ,eAAe;CAE3B,GAAG,CAAC,eAAe,CAAC;CAIpB,OACE,oBAACC,eAAD;EACE,OAJU,cAAcC,cAAY,WAAW,GAAG,CAAC,WAAW,CAInD;EACX,aAAa,mBAAmB;EAChC,gBAAe;EACf,uBAAsB;EACtB,2BAAA;EAEC;CACe,CAAA;AAEtB"}
+{"version":3,"file":"ThemeProvider.js","names":["ThemeProvider","createTheme","MuiThemeProvider"],"sources":["../../../../src/providers/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import {\n  ThemeProvider as MuiThemeProvider,\n  useColorScheme,\n} from '@mui/material'\nimport { useEffect, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\n\nexport const ThemeProvider: React.FC<React.PropsWithChildren> = ({\n  children,\n}) => {\n  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()\n  const { setMode } = useColorScheme()\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: setMode is stable\n  useEffect(() => {\n    if (colorSchemeMode) {\n      setMode(colorSchemeMode)\n    }\n  }, [colorSchemeMode])\n\n  const theme = useMemo(() => createTheme(themeConfig), [themeConfig])\n\n  return (\n    <MuiThemeProvider\n      theme={theme}\n      defaultMode={colorSchemeMode ?? 'system'}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      {children}\n    </MuiThemeProvider>\n  )\n}\n"],"mappings":";;;;;;AAQA,MAAaA,mBAAoD,EAC/D,eACI;CACJ,MAAM,EAAE,YAAY,iBAAiB,OAAO,gBAAgB,gBAAgB;CAC5E,MAAM,EAAE,YAAY,eAAe;CAGnC,gBAAgB;EACd,IAAI,iBACF,QAAQ,eAAe;CAE3B,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,QAAQ,cAAcC,cAAY,WAAW,GAAG,CAAC,WAAW,CAAC;CAEnE,OACE,oBAACC,eAAD;EACS;EACP,aAAa,mBAAmB;EAChC,gBAAe;EACf,uBAAsB;EACtB,2BAAA;EAEC;CACe,CAAA;AAEtB"}

package/dist/esm/providers/WalletProvider/WalletProvider.js

@@ -19,16 +19,17 @@ const WalletProvider = ({ children, providers }) => {
 	}, [internalChainTypes, chainsConfig?.types]);
 	if (!providers.length && !useExternalWalletProvidersOnly && process.env.NODE_ENV === "development") console.warn("No widget providers specified");
 	const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers;
+	const walletManagementConfig = useMemo(() => ({
+		locale: i18n.resolvedLanguage,
+		enabledChainTypes,
+		walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder
+	}), [
+		i18n.resolvedLanguage,
+		enabledChainTypes,
+		walletConfig?.walletEcosystemsOrder
+	]);
 	return /* @__PURE__ */ jsx(WalletManagementProviders, {
-		config: useMemo(() => ({
-			locale: i18n.resolvedLanguage,
-			enabledChainTypes,
-			walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder
-		}), [
-			i18n.resolvedLanguage,
-			enabledChainTypes,
-			walletConfig?.walletEcosystemsOrder
-		]),
+		config: walletManagementConfig,
 		providers: effectiveProviders,
 		chains,
 		forceInternalWalletManagement: walletConfig?.forceInternalWalletManagement,

package/dist/esm/providers/WalletProvider/WalletProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletProvider.js","names":[],"sources":["../../../../src/providers/WalletProvider/WalletProvider.tsx"],"sourcesContent":["import { WalletManagementProviders } from '@lifi/wallet-management'\nimport type { WidgetProviderProps } from '@lifi/widget-provider'\nimport {\n  type FC,\n  type JSX,\n  type PropsWithChildren,\n  type ReactNode,\n  useMemo,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\nimport { useExternalWalletProvider } from './useExternalWalletProvider.js'\n\ninterface WalletProviderProps extends PropsWithChildren {\n  providers: ((props: PropsWithChildren<WidgetProviderProps>) => ReactNode)[]\n}\n\nexport const WalletProvider = ({\n  children,\n  providers,\n}: PropsWithChildren<WalletProviderProps>): JSX.Element => {\n  const { walletConfig, chains: chainsConfig } = useWidgetConfig()\n  const { chains } = useAvailableChains()\n  const { i18n } = useTranslation()\n  const { useExternalWalletProvidersOnly, internalChainTypes } =\n    useExternalWalletProvider()\n\n  // Restrict offered wallets to the ecosystems allowed by chains.types config.\n  const enabledChainTypes = useMemo(() => {\n    const chainTypeSets = getConfigItemSets(\n      chainsConfig?.types,\n      (items) => new Set(items)\n    )\n    return internalChainTypes.filter((chainType) =>\n      isItemAllowedForSets(chainType, chainTypeSets)\n    )\n  }, [internalChainTypes, chainsConfig?.types])\n\n  if (\n    !providers.length &&\n    !useExternalWalletProvidersOnly &&\n    process.env.NODE_ENV === 'development'\n  ) {\n    console.warn('No widget providers specified')\n  }\n\n  const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers\n\n  const walletManagementConfig = useMemo(\n    () => ({\n      locale: i18n.resolvedLanguage as never,\n      enabledChainTypes,\n      walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,\n    }),\n    [\n      i18n.resolvedLanguage,\n      enabledChainTypes,\n      walletConfig?.walletEcosystemsOrder,\n    ]\n  )\n\n  return (\n    <WalletManagementProviders\n      config={walletManagementConfig}\n      providers={effectiveProviders}\n      chains={chains}\n      forceInternalWalletManagement={\n        walletConfig?.forceInternalWalletManagement\n      }\n    >\n      <SDKProviderInitializer>{children}</SDKProviderInitializer>\n    </WalletManagementProviders>\n  )\n}\n\nconst SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {\n  useInitializeSDKProviders()\n  return children\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,kBAAkB,EAC7B,UACA,gBACyD;CACzD,MAAM,EAAE,cAAc,QAAQ,iBAAiB,gBAAgB;CAC/D,MAAM,EAAE,WAAW,mBAAmB;CACtC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,gCAAgC,uBACtC,0BAA0B;CAG5B,MAAM,oBAAoB,cAAc;EACtC,MAAM,gBAAgB,kBACpB,cAAc,QACb,UAAU,IAAI,IAAI,KAAK,CAC1B;EACA,OAAO,mBAAmB,QAAQ,cAChC,qBAAqB,WAAW,aAAa,CAC/C;CACF,GAAG,CAAC,oBAAoB,cAAc,KAAK,CAAC;CAE5C,IACE,CAAC,UAAU,UACX,CAAC,kCACD,QAAQ,IAAI,aAAa,eAEzB,QAAQ,KAAK,+BAA+B;CAG9C,MAAM,qBAAqB,iCAAiC,CAAC,IAAI;CAejE,OACE,oBAAC,2BAAD;EACE,QAf2B,eACtB;GACL,QAAQ,KAAK;GACb;GACA,uBAAuB,cAAc;EACvC,IACA;GACE,KAAK;GACL;GACA,cAAc;EAChB,CAK+B;EAC7B,WAAW;EACH;EACR,+BACE,cAAc;YAGhB,oBAAC,wBAAD,EAAyB,SAAiC,CAAA;CACjC,CAAA;AAE/B;AAEA,MAAM,0BAAiD,EAAE,eAAe;CACtE,0BAA0B;CAC1B,OAAO;AACT"}
+{"version":3,"file":"WalletProvider.js","names":[],"sources":["../../../../src/providers/WalletProvider/WalletProvider.tsx"],"sourcesContent":["import { WalletManagementProviders } from '@lifi/wallet-management'\nimport type { WidgetProviderProps } from '@lifi/widget-provider'\nimport {\n  type FC,\n  type JSX,\n  type PropsWithChildren,\n  type ReactNode,\n  useMemo,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\nimport { useExternalWalletProvider } from './useExternalWalletProvider.js'\n\ninterface WalletProviderProps extends PropsWithChildren {\n  providers: ((props: PropsWithChildren<WidgetProviderProps>) => ReactNode)[]\n}\n\nexport const WalletProvider = ({\n  children,\n  providers,\n}: PropsWithChildren<WalletProviderProps>): JSX.Element => {\n  const { walletConfig, chains: chainsConfig } = useWidgetConfig()\n  const { chains } = useAvailableChains()\n  const { i18n } = useTranslation()\n  const { useExternalWalletProvidersOnly, internalChainTypes } =\n    useExternalWalletProvider()\n\n  // Restrict offered wallets to the ecosystems allowed by chains.types config.\n  const enabledChainTypes = useMemo(() => {\n    const chainTypeSets = getConfigItemSets(\n      chainsConfig?.types,\n      (items) => new Set(items)\n    )\n    return internalChainTypes.filter((chainType) =>\n      isItemAllowedForSets(chainType, chainTypeSets)\n    )\n  }, [internalChainTypes, chainsConfig?.types])\n\n  if (\n    !providers.length &&\n    !useExternalWalletProvidersOnly &&\n    process.env.NODE_ENV === 'development'\n  ) {\n    console.warn('No widget providers specified')\n  }\n\n  const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers\n\n  const walletManagementConfig = useMemo(\n    () => ({\n      locale: i18n.resolvedLanguage as never,\n      enabledChainTypes,\n      walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,\n    }),\n    [\n      i18n.resolvedLanguage,\n      enabledChainTypes,\n      walletConfig?.walletEcosystemsOrder,\n    ]\n  )\n\n  return (\n    <WalletManagementProviders\n      config={walletManagementConfig}\n      providers={effectiveProviders}\n      chains={chains}\n      forceInternalWalletManagement={\n        walletConfig?.forceInternalWalletManagement\n      }\n    >\n      <SDKProviderInitializer>{children}</SDKProviderInitializer>\n    </WalletManagementProviders>\n  )\n}\n\nconst SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {\n  useInitializeSDKProviders()\n  return children\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,kBAAkB,EAC7B,UACA,gBACyD;CACzD,MAAM,EAAE,cAAc,QAAQ,iBAAiB,gBAAgB;CAC/D,MAAM,EAAE,WAAW,mBAAmB;CACtC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,gCAAgC,uBACtC,0BAA0B;CAG5B,MAAM,oBAAoB,cAAc;EACtC,MAAM,gBAAgB,kBACpB,cAAc,QACb,UAAU,IAAI,IAAI,KAAK,CAC1B;EACA,OAAO,mBAAmB,QAAQ,cAChC,qBAAqB,WAAW,aAAa,CAC/C;CACF,GAAG,CAAC,oBAAoB,cAAc,KAAK,CAAC;CAE5C,IACE,CAAC,UAAU,UACX,CAAC,kCACD,QAAQ,IAAI,aAAa,eAEzB,QAAQ,KAAK,+BAA+B;CAG9C,MAAM,qBAAqB,iCAAiC,CAAC,IAAI;CAEjE,MAAM,yBAAyB,eACtB;EACL,QAAQ,KAAK;EACb;EACA,uBAAuB,cAAc;CACvC,IACA;EACE,KAAK;EACL;EACA,cAAc;CAChB,CACF;CAEA,OACE,oBAAC,2BAAD;EACE,QAAQ;EACR,WAAW;EACH;EACR,+BACE,cAAc;EAGhB,UAAA,oBAAC,wBAAD,EAAyB,SAAiC,CAAA;CACjC,CAAA;AAE/B;AAEA,MAAM,0BAAiD,EAAE,eAAe;CACtE,0BAA0B;CAC1B,OAAO;AACT"}

package/dist/esm/providers/WalletProvider/useExternalWalletProvider.js

@@ -1,14 +1,15 @@
 import { useWidgetConfig } from "../WidgetProvider/WidgetProvider.js";
 import { ChainType } from "@lifi/sdk";
 import { useMemo } from "react";
-import { useBitcoinContext, useEthereumContext, useSolanaContext, useSuiContext, useTronContext } from "@lifi/widget-provider";
+import { useBitcoinContext, useEthereumContext, useSolanaContext, useStellarContext, useSuiContext, useTronContext } from "@lifi/widget-provider";
 //#region src/providers/WalletProvider/useExternalWalletProvider.ts
 const internalChainTypes = [
 	ChainType.EVM,
 	ChainType.SVM,
 	ChainType.UTXO,
 	ChainType.MVM,
-	ChainType.TVM
+	ChainType.TVM,
+	ChainType.STL
 ];
 function useExternalWalletProvider() {
 	const { walletConfig } = useWidgetConfig();
@@ -17,6 +18,7 @@ function useExternalWalletProvider() {
 	const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext();
 	const { isExternalContext: hasExternalSuiContext } = useSuiContext();
 	const { isExternalContext: hasExternalTronContext } = useTronContext();
+	const { isExternalContext: hasExternalStellarContext } = useStellarContext();
 	return useMemo(() => {
 		const providers = [];
 		if (hasExternalEthereumContext) providers.push(ChainType.EVM);
@@ -24,8 +26,9 @@ function useExternalWalletProvider() {
 		if (hasExternalBitcoinContext) providers.push(ChainType.UTXO);
 		if (hasExternalSuiContext) providers.push(ChainType.MVM);
 		if (hasExternalTronContext) providers.push(ChainType.TVM);
+		if (hasExternalStellarContext) providers.push(ChainType.STL);
 		return {
-			useExternalWalletProvidersOnly: (hasExternalEthereumContext || hasExternalSolanaContext || hasExternalBitcoinContext || hasExternalSuiContext || hasExternalTronContext) && !walletConfig?.usePartialWalletManagement && !walletConfig?.forceInternalWalletManagement,
+			useExternalWalletProvidersOnly: (hasExternalEthereumContext || hasExternalSolanaContext || hasExternalBitcoinContext || hasExternalSuiContext || hasExternalTronContext || hasExternalStellarContext) && !walletConfig?.usePartialWalletManagement && !walletConfig?.forceInternalWalletManagement,
 			externalChainTypes: providers,
 			internalChainTypes: internalChainTypes.filter((chainType) => !providers.includes(chainType))
 		};
@@ -35,6 +38,7 @@ function useExternalWalletProvider() {
 		hasExternalBitcoinContext,
 		hasExternalSuiContext,
 		hasExternalTronContext,
+		hasExternalStellarContext,
 		walletConfig?.usePartialWalletManagement,
 		walletConfig?.forceInternalWalletManagement
 	]);