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

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus | 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n  switch (status) {\n    case RouteExecutionStatus.Done:\n      return {\n        color: theme.vars.palette.success.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Failed:\n      return {\n        color: theme.vars.palette.error.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.mainChannel,\n        alpha: 0.48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    default:\n      return {\n        color: theme.vars.palette.primary.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const CenterContainer: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n  display: 'grid',\n  placeItems: 'center',\n  position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n  ({ theme, status = RouteExecutionStatus.Idle }) => {\n    const statusConfig = getStatusColor(status, theme)\n\n    return {\n      backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,\n      borderRadius: '50%',\n      width: 72,\n      height: 72,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n        width: 36,\n        height: 36,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n          width: 36,\n          height: 36,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAK,qBAAqB,KACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAS,qBAAqB,WAAW;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,QAAQ,aAAa,MAAM,KAAK,aAAa,MAAM;EACpE,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,eAAe,IAAI;GAC7F,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,cAAc,IAAI;GAC5F,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}
+{"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus | 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n  switch (status) {\n    case RouteExecutionStatus.Done:\n      return {\n        color: theme.vars.palette.success.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Failed:\n      return {\n        color: theme.vars.palette.error.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.main,\n        alpha: 0.48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    default:\n      return {\n        color: theme.vars.palette.primary.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const CenterContainer: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n  display: 'grid',\n  placeItems: 'center',\n  position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n  ({ theme, status = RouteExecutionStatus.Idle }) => {\n    const statusConfig = getStatusColor(status, theme)\n\n    return {\n      backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,\n      borderRadius: '50%',\n      width: 72,\n      height: 72,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n        width: 36,\n        height: 36,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n          width: 36,\n          height: 36,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAA,EACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAA,EACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAA;EACA,KAAA;EACA,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAA,QAAyC;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,sBAAsB,aAAa,MAAM,GAAG,aAAa,QAAQ,IAAI;EACtF,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,eAAe,IAAI;GACxF,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,cAAc,IAAI;GACvF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}

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

@@ -4,8 +4,8 @@ import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
 import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
 import { CenterContainer, IconCircle } from "./StatusBottomSheet.style.js";
 import { calculateValueLossPercentage } from "./utils.js";
-import { forwardRef, useRef } from "react";
-import { Box, Button, Typography } from "@mui/material";
+import { forwardRef, useRef, useState } from "react";
+import { Box, Button, Checkbox, FormControlLabel, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import WarningRounded from "@mui/icons-material/WarningRounded";
@@ -26,6 +26,7 @@ const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref)
 	});
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
+	const [accepted, setAccepted] = useState(false);
 	const { t } = useTranslation();
 	const ref = useRef(null);
 	useSetContentHeight(ref);
@@ -38,7 +39,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 		children: [
 			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
 				status: "warning",
-				mb: 1,
+				sx: { mb: 1 },
 				children: /* @__PURE__ */ jsx(WarningRounded, { color: "warning" })
 			}), /* @__PURE__ */ jsx(Typography, {
 				sx: {
@@ -114,10 +115,18 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 					children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"]
 				})]
 			}),
+			/* @__PURE__ */ jsx(FormControlLabel, {
+				control: /* @__PURE__ */ jsx(Checkbox, {
+					checked: accepted,
+					onChange: (_, checked) => setAccepted(checked)
+				}),
+				label: t("warning.checkbox.highValueLoss"),
+				sx: { mt: 1 }
+			}),
 			/* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
-					mt: 3
+					mt: 1
 				},
 				children: [
 					/* @__PURE__ */ jsx(Button, {
@@ -133,6 +142,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
 					/* @__PURE__ */ jsx(Button, {
 						variant: "contained",
 						onClick: onContinue,
+						disabled: !accepted,
 						fullWidth: true,
 						children: t("button.continue")
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n  route: Route\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenValueBottomSheet: ForwardRefExoticComponent<\n  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(\n  ({ route, onContinue, onCancel }, ref) => {\n    const handleCancel = () => {\n      ;(ref as RefObject<BottomSheetBase>).current?.close()\n      onCancel?.()\n    }\n\n    return (\n      <BottomSheet ref={ref} onClose={onCancel}>\n        <TokenValueBottomSheetContent\n          route={route}\n          onContinue={onContinue}\n          onCancel={handleCancel}\n        />\n      </BottomSheet>\n    )\n  }\n)\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n  route,\n  onCancel,\n  onContinue,\n}) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n  const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      <CenterContainer>\n        <IconCircle status=\"warning\" mb={1}>\n          <WarningRounded color=\"warning\" />\n        </IconCircle>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.highValueLoss')}\n        </Typography>\n      </CenterContainer>\n      <Typography\n        sx={{\n          py: 1,\n        }}\n      >\n        {t('warning.message.highValueLoss')}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 1,\n        }}\n      >\n        <Typography>{t('main.sending')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.fees.network')}</Typography>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <Typography\n            sx={{\n              fontWeight: 600,\n            }}\n          >\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </Typography>\n        </FeeBreakdownTooltip>\n      </Box>\n      {feeCostUSD ? (\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            mt: 0.25,\n          }}\n        >\n          <Typography>{t('main.fees.provider')}</Typography>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <Typography\n              sx={{\n                fontWeight: 600,\n              }}\n            >\n              {t('format.currency', { value: feeCostUSD })}\n            </Typography>\n          </FeeBreakdownTooltip>\n        </Box>\n      ) : null}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.receiving')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.toAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.valueLoss')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          mt: 3,\n        }}\n      >\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Box\n          sx={{\n            display: 'flex',\n            p: 1,\n          }}\n        />\n        <Button variant=\"contained\" onClick={onContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n  Box,\n  Button,\n  Checkbox,\n  FormControlLabel,\n  Typography,\n} from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, 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 { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n  route: Route\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenValueBottomSheet: ForwardRefExoticComponent<\n  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(\n  ({ route, onContinue, onCancel }, ref) => {\n    const handleCancel = () => {\n      ;(ref as RefObject<BottomSheetBase>).current?.close()\n      onCancel?.()\n    }\n\n    return (\n      <BottomSheet ref={ref} onClose={onCancel}>\n        <TokenValueBottomSheetContent\n          route={route}\n          onContinue={onContinue}\n          onCancel={handleCancel}\n        />\n      </BottomSheet>\n    )\n  }\n)\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n  route,\n  onCancel,\n  onContinue,\n}) => {\n  const [accepted, setAccepted] = useState(false)\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n  const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      <CenterContainer>\n        <IconCircle status=\"warning\" sx={{ mb: 1 }}>\n          <WarningRounded color=\"warning\" />\n        </IconCircle>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.highValueLoss')}\n        </Typography>\n      </CenterContainer>\n      <Typography\n        sx={{\n          py: 1,\n        }}\n      >\n        {t('warning.message.highValueLoss')}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 1,\n        }}\n      >\n        <Typography>{t('main.sending')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.fees.network')}</Typography>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <Typography\n            sx={{\n              fontWeight: 600,\n            }}\n          >\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </Typography>\n        </FeeBreakdownTooltip>\n      </Box>\n      {feeCostUSD ? (\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            mt: 0.25,\n          }}\n        >\n          <Typography>{t('main.fees.provider')}</Typography>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <Typography\n              sx={{\n                fontWeight: 600,\n              }}\n            >\n              {t('format.currency', { value: feeCostUSD })}\n            </Typography>\n          </FeeBreakdownTooltip>\n        </Box>\n      ) : null}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.receiving')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.toAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.valueLoss')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </Typography>\n      </Box>\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={accepted}\n            onChange={(_, checked) => setAccepted(checked)}\n          />\n        }\n        label={t('warning.checkbox.highValueLoss')}\n        sx={{ mt: 1 }}\n      />\n      <Box\n        sx={{\n          display: 'flex',\n          mt: 1,\n        }}\n      >\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Box\n          sx={{\n            display: 'flex',\n            p: 1,\n          }}\n        />\n        <Button\n          variant=\"contained\"\n          onClick={onContinue}\n          disabled={!accepted}\n          fullWidth\n        >\n          {t('button.continue')}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,12 +1,11 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { PageContainer } from "../../components/PageContainer.js";
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
 import { useNavigateBack } from "../../hooks/useNavigateBack.js";
 import { useHeader } from "../../hooks/useHeader.js";
@@ -23,7 +22,7 @@ import { StartTransactionButton } from "./StartTransactionButton.js";
 import { StatusBottomSheet } from "./StatusBottomSheet.js";
 import { calculateValueLossPercentage, getTokenValueLossThreshold } from "./utils.js";
 import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { Box, Button, Tooltip } from "@mui/material";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -57,26 +56,23 @@ const TransactionPage = () => {
 		if (subvariant === "custom") return t(`header.${subvariantOptions?.custom ?? "checkout"}`);
 		if (route) {
 			const transactionType = route.fromChainId === route.toChainId ? "swap" : "bridge";
-			return status === RouteExecutionStatus.Idle ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
+			return status === 1 ? t(`button.${transactionType}Review`) : t(`header.${transactionType}`);
 		}
 		return t("header.exchange");
 	};
-	const headerAction = useMemo(() => status === RouteExecutionStatus.Idle ? /* @__PURE__ */ jsx(RouteTracker, {
+	const headerAction = useMemo(() => status === 1 ? /* @__PURE__ */ jsx(RouteTracker, {
 		observableRouteId: stateRouteId,
 		onChange: setRouteId,
 		onFetching: setRouteRefreshing
 	}) : void 0, [stateRouteId, status]);
 	useHeader(getHeaderTitle(), headerAction);
-	useEffect(() => {
-		if (status === RouteExecutionStatus.Idle) emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
-	}, []);
 	if (!route) return null;
 	const handleExecuteRoute = () => {
 		if (tokenValueBottomSheetRef.current?.isOpen()) {
 			const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
 			const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
 			const toAmountUSD = Number.parseFloat(route.toAmountUSD);
-			emitter.emit(WidgetEvent.RouteHighValueLoss, {
+			emitter.emit("routeHighValueLoss", {
 				fromAmountUSD,
 				toAmountUSD,
 				gasCostUSD,
@@ -99,8 +95,8 @@ const TransactionPage = () => {
 		});
 	};
 	const handleStartClick = async () => {
-		if (status === RouteExecutionStatus.Idle) {
-			if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation)) {
+		if (status === 1) {
+			if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.includes("lowAddressActivityConfirmation")) {
 				confirmToAddressSheetRef.current?.open();
 				return;
 			}
@@ -108,7 +104,7 @@ const TransactionPage = () => {
 			if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && subvariant !== "custom") tokenValueBottomSheetRef.current?.open();
 			else handleExecuteRoute();
 		}
-		if (status === RouteExecutionStatus.Failed) restartRoute();
+		if (status === 8) restartRoute();
 	};
 	const handleRemoveRoute = () => {
 		navigateBack();
@@ -116,12 +112,12 @@ const TransactionPage = () => {
 	};
 	const getButtonText = () => {
 		switch (status) {
-			case RouteExecutionStatus.Idle: switch (subvariant) {
+			case 1: switch (subvariant) {
 				case "custom": return subvariantOptions?.custom === "deposit" ? t("button.deposit") : t("button.buy");
 				case "refuel": return t("button.startBridging");
 				default: return t(`button.start${route.fromChainId === route.toChainId ? "Swapping" : "Bridging"}`);
 			}
-			case RouteExecutionStatus.Failed: return t("button.tryAgain");
+			case 8: return t("button.tryAgain");
 			default: return "";
 		}
 	};
@@ -137,8 +133,8 @@ const TransactionPage = () => {
 				route,
 				sx: { marginTop: 2 }
 			}),
-			status === RouteExecutionStatus.Idle || status === RouteExecutionStatus.Failed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WarningMessages, {
-				mt: 2,
+			status === 1 || status === 8 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WarningMessages, {
+				sx: { mt: 2 },
 				route,
 				allowInteraction: true
 			}), /* @__PURE__ */ jsxs(Box, {
@@ -151,7 +147,7 @@ const TransactionPage = () => {
 					onClick: handleStartClick,
 					route,
 					loading: routeRefreshing || isLoadingAddressActivity
-				}), status === RouteExecutionStatus.Failed ? /* @__PURE__ */ jsx(Tooltip, {
+				}), status === 8 ? /* @__PURE__ */ jsx(Tooltip, {
 					title: t("button.clearTransaction"),
 					placement: "bottom-end",
 					children: /* @__PURE__ */ jsx(Button, {
@@ -174,7 +170,7 @@ const TransactionPage = () => {
 				onContinue: handleExecuteRoute
 			}) : null,
 			/* @__PURE__ */ jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }),
-			!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
+			!hiddenUI?.includes("lowAddressActivityConfirmation") ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
 				ref: confirmToAddressSheetRef,
 				onContinue: handleExecuteRoute,
 				toAddress,

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 Delete from '@mui/icons-material/Delete'\nimport { Box, Button, Tooltip } from '@mui/material'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { type JSX, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { getStepList } from '../../components/Step/StepList.js'\nimport { TransactionDetails } from '../../components/TransactionDetails.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.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 { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { StatusBottomSheet } from './StatusBottomSheet.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n  calculateValueLossPercentage,\n  getTokenValueLossThreshold,\n} from './utils.js'\n\nexport const TransactionPage = (): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { setFieldValue } = useFieldActions()\n  const emitter = useWidgetEvents()\n  const setBackAction = useHeaderStore((state) => state.setBackAction)\n  const navigate = useNavigate()\n  const navigateBack = useNavigateBack()\n  const {\n    subvariant,\n    subvariantOptions,\n    contractSecondaryComponent,\n    hiddenUI,\n  } = 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\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(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    useRouteExecution({\n      routeId: routeId,\n      onAcceptExchangeRateUpdate,\n    })\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route?.toChainId)\n\n  const getHeaderTitle = () => {\n    if (subvariant === 'custom') {\n      return t(`header.${subvariantOptions?.custom ?? '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: We want to emit event only when the page is mounted\n  useEffect(() => {\n    if (status === RouteExecutionStatus.Idle) {\n      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)\n    }\n  }, [])\n\n  if (!route) {\n    return null\n  }\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 (subvariant === 'custom') {\n      setFieldValue('fromToken', '')\n      setFieldValue('toToken', '')\n    }\n    // Once transaction is started, set the back action to navigate to the home page\n    setBackAction(() => {\n      navigate({ to: navigationRoutes.home, replace: true })\n    })\n  }\n\n  const handleStartClick = async () => {\n    if (status === RouteExecutionStatus.Idle) {\n      if (\n        toAddress &&\n        !hasActivity &&\n        !isLoadingAddressActivity &&\n        isActivityAddressFetched &&\n        !hiddenUI?.includes(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 && subvariant !== 'custom') {\n        tokenValueBottomSheetRef.current?.open()\n      } else {\n        handleExecuteRoute()\n      }\n    }\n    if (status === RouteExecutionStatus.Failed) {\n      restartRoute()\n    }\n  }\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const getButtonText = (): string => {\n    switch (status) {\n      case RouteExecutionStatus.Idle:\n        switch (subvariant) {\n          case 'custom':\n            return subvariantOptions?.custom === '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      case RouteExecutionStatus.Failed:\n        return t('button.tryAgain')\n      default:\n        return ''\n    }\n  }\n\n  return (\n    <PageContainer bottomGutters>\n      {getStepList(route, subvariant)}\n      {subvariant === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent sx={{ marginTop: 2 }}>\n          {contractSecondaryComponent}\n        </ContractComponent>\n      ) : null}\n      <TransactionDetails route={route} sx={{ marginTop: 2 }} />\n      {status === RouteExecutionStatus.Idle ||\n      status === RouteExecutionStatus.Failed ? (\n        <>\n          <WarningMessages mt={2} route={route} allowInteraction />\n          <Box\n            sx={{\n              mt: 2,\n              display: 'flex',\n            }}\n          >\n            <StartTransactionButton\n              text={getButtonText()}\n              onClick={handleStartClick}\n              route={route}\n              loading={routeRefreshing || isLoadingAddressActivity}\n            />\n            {status === RouteExecutionStatus.Failed ? (\n              <Tooltip\n                title={t('button.clearTransaction')}\n                placement=\"bottom-end\"\n              >\n                <Button\n                  onClick={handleRemoveRoute}\n                  sx={{\n                    minWidth: 48,\n                    marginLeft: 1,\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </Tooltip>\n            ) : null}\n          </Box>\n        </>\n      ) : null}\n      {status ? <StatusBottomSheet status={status} route={route} /> : null}\n      {subvariant !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleExecuteRoute}\n        />\n      ) : null}\n      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n      {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleExecuteRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </PageContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TransactionPage.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionPage.tsx"],"sourcesContent":["import type { ExchangeRateUpdateParams } from '@lifi/sdk'\nimport Delete from '@mui/icons-material/Delete'\nimport { Box, Button, Tooltip } from '@mui/material'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { type JSX, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { getStepList } from '../../components/Step/StepList.js'\nimport { TransactionDetails } from '../../components/TransactionDetails.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.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 { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'\nimport { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'\nimport { RouteTracker } from './RouteTracker.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { StatusBottomSheet } from './StatusBottomSheet.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport {\n  calculateValueLossPercentage,\n  getTokenValueLossThreshold,\n} from './utils.js'\n\nexport const TransactionPage = (): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { setFieldValue } = useFieldActions()\n  const emitter = useWidgetEvents()\n  const setBackAction = useHeaderStore((state) => state.setBackAction)\n  const navigate = useNavigate()\n  const navigateBack = useNavigateBack()\n  const {\n    subvariant,\n    subvariantOptions,\n    contractSecondaryComponent,\n    hiddenUI,\n  } = 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\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(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    useRouteExecution({\n      routeId: routeId,\n      onAcceptExchangeRateUpdate,\n    })\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route?.toChainId)\n\n  const getHeaderTitle = () => {\n    if (subvariant === 'custom') {\n      return t(`header.${subvariantOptions?.custom ?? '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  if (!route) {\n    return null\n  }\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 (subvariant === 'custom') {\n      setFieldValue('fromToken', '')\n      setFieldValue('toToken', '')\n    }\n    // Once transaction is started, set the back action to navigate to the home page\n    setBackAction(() => {\n      navigate({ to: navigationRoutes.home, replace: true })\n    })\n  }\n\n  const handleStartClick = async () => {\n    if (status === RouteExecutionStatus.Idle) {\n      if (\n        toAddress &&\n        !hasActivity &&\n        !isLoadingAddressActivity &&\n        isActivityAddressFetched &&\n        !hiddenUI?.includes(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 && subvariant !== 'custom') {\n        tokenValueBottomSheetRef.current?.open()\n      } else {\n        handleExecuteRoute()\n      }\n    }\n    if (status === RouteExecutionStatus.Failed) {\n      restartRoute()\n    }\n  }\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const getButtonText = (): string => {\n    switch (status) {\n      case RouteExecutionStatus.Idle:\n        switch (subvariant) {\n          case 'custom':\n            return subvariantOptions?.custom === '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      case RouteExecutionStatus.Failed:\n        return t('button.tryAgain')\n      default:\n        return ''\n    }\n  }\n\n  return (\n    <PageContainer bottomGutters>\n      {getStepList(route, subvariant)}\n      {subvariant === 'custom' && contractSecondaryComponent ? (\n        <ContractComponent sx={{ marginTop: 2 }}>\n          {contractSecondaryComponent}\n        </ContractComponent>\n      ) : null}\n      <TransactionDetails route={route} sx={{ marginTop: 2 }} />\n      {status === RouteExecutionStatus.Idle ||\n      status === RouteExecutionStatus.Failed ? (\n        <>\n          <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />\n          <Box\n            sx={{\n              mt: 2,\n              display: 'flex',\n            }}\n          >\n            <StartTransactionButton\n              text={getButtonText()}\n              onClick={handleStartClick}\n              route={route}\n              loading={routeRefreshing || isLoadingAddressActivity}\n            />\n            {status === RouteExecutionStatus.Failed ? (\n              <Tooltip\n                title={t('button.clearTransaction')}\n                placement=\"bottom-end\"\n              >\n                <Button\n                  onClick={handleRemoveRoute}\n                  sx={{\n                    minWidth: 48,\n                    marginLeft: 1,\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </Tooltip>\n            ) : null}\n          </Box>\n        </>\n      ) : null}\n      {status ? <StatusBottomSheet status={status} route={route} /> : null}\n      {subvariant !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleExecuteRoute}\n        />\n      ) : null}\n      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />\n      {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleExecuteRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </PageContainer>\n  )\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useExternalWalletProvider.js","names":[],"sources":["../../../../src/providers/WalletProvider/useExternalWalletProvider.ts"],"sourcesContent":["import { ChainType } from '@lifi/sdk'\nimport {\n  useBitcoinContext,\n  useEthereumContext,\n  useSolanaContext,\n  useSuiContext,\n} from '@lifi/widget-provider'\nimport { useMemo } from 'react'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\n\ninterface ExternalWalletProvider {\n  useExternalWalletProvidersOnly: boolean\n  externalChainTypes: ChainType[]\n  internalChainTypes: ChainType[]\n}\n\nconst internalChainTypes = [\n  ChainType.EVM,\n  ChainType.SVM,\n  ChainType.UTXO,\n  ChainType.MVM,\n]\n\nexport function useExternalWalletProvider(): ExternalWalletProvider {\n  const { walletConfig } = useWidgetConfig()\n  const { isExternalContext: hasExternalEthereumContext } = useEthereumContext()\n  const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()\n  const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()\n  const { isExternalContext: hasExternalSuiContext } = useSuiContext()\n  const data = useMemo(() => {\n    const providers: ChainType[] = []\n    if (hasExternalEthereumContext) {\n      providers.push(ChainType.EVM)\n    }\n    if (hasExternalSolanaContext) {\n      providers.push(ChainType.SVM)\n    }\n    if (hasExternalBitcoinContext) {\n      providers.push(ChainType.UTXO)\n    }\n    if (hasExternalSuiContext) {\n      providers.push(ChainType.MVM)\n    }\n    const hasExternalProvider =\n      hasExternalEthereumContext ||\n      hasExternalSolanaContext ||\n      hasExternalBitcoinContext ||\n      hasExternalSuiContext\n\n    const useExternalWalletProvidersOnly =\n      hasExternalProvider &&\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement\n    return {\n      useExternalWalletProvidersOnly,\n      externalChainTypes: providers,\n      internalChainTypes: internalChainTypes.filter(\n        (chainType) => !providers.includes(chainType)\n      ),\n    }\n  }, [\n    hasExternalEthereumContext,\n    hasExternalSolanaContext,\n    hasExternalBitcoinContext,\n    hasExternalSuiContext,\n    walletConfig?.usePartialWalletManagement,\n    walletConfig?.forceInternalWalletManagement,\n  ])\n\n  return data\n}\n"],"mappings":";;;;;AAgBA,MAAM,qBAAqB;CACzB,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACX;AAED,SAAgB,4BAAoD;CAClE,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,EAAE,mBAAmB,+BAA+B,oBAAoB;CAC9E,MAAM,EAAE,mBAAmB,6BAA6B,kBAAkB;CAC1E,MAAM,EAAE,mBAAmB,8BAA8B,mBAAmB;CAC5E,MAAM,EAAE,mBAAmB,0BAA0B,eAAe;AAyCpE,QAxCa,cAAc;EACzB,MAAM,YAAyB,EAAE;AACjC,MAAI,2BACF,WAAU,KAAK,UAAU,IAAI;AAE/B,MAAI,yBACF,WAAU,KAAK,UAAU,IAAI;AAE/B,MAAI,0BACF,WAAU,KAAK,UAAU,KAAK;AAEhC,MAAI,sBACF,WAAU,KAAK,UAAU,IAAI;AAY/B,SAAO;GACL,iCAVA,8BACA,4BACA,6BACA,0BAIA,CAAC,cAAc,8BACf,CAAC,cAAc;GAGf,oBAAoB;GACpB,oBAAoB,mBAAmB,QACpC,cAAc,CAAC,UAAU,SAAS,UAAU,CAC9C;GACF;IACA;EACD;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;EACf,CAAC"}
+{"version":3,"file":"useExternalWalletProvider.js","names":[],"sources":["../../../../src/providers/WalletProvider/useExternalWalletProvider.ts"],"sourcesContent":["import { ChainType } from '@lifi/sdk'\nimport {\n  useBitcoinContext,\n  useEthereumContext,\n  useSolanaContext,\n  useSuiContext,\n  useTronContext,\n} from '@lifi/widget-provider'\nimport { useMemo } from 'react'\nimport { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'\n\ninterface ExternalWalletProvider {\n  useExternalWalletProvidersOnly: boolean\n  externalChainTypes: ChainType[]\n  internalChainTypes: ChainType[]\n}\n\nconst internalChainTypes = [\n  ChainType.EVM,\n  ChainType.SVM,\n  ChainType.UTXO,\n  ChainType.MVM,\n  ChainType.TVM,\n]\n\nexport function useExternalWalletProvider(): ExternalWalletProvider {\n  const { walletConfig } = useWidgetConfig()\n  const { isExternalContext: hasExternalEthereumContext } = useEthereumContext()\n  const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()\n  const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()\n  const { isExternalContext: hasExternalSuiContext } = useSuiContext()\n  const { isExternalContext: hasExternalTronContext } = useTronContext()\n  const data = useMemo(() => {\n    const providers: ChainType[] = []\n    if (hasExternalEthereumContext) {\n      providers.push(ChainType.EVM)\n    }\n    if (hasExternalSolanaContext) {\n      providers.push(ChainType.SVM)\n    }\n    if (hasExternalBitcoinContext) {\n      providers.push(ChainType.UTXO)\n    }\n    if (hasExternalSuiContext) {\n      providers.push(ChainType.MVM)\n    }\n    if (hasExternalTronContext) {\n      providers.push(ChainType.TVM)\n    }\n    const hasExternalProvider =\n      hasExternalEthereumContext ||\n      hasExternalSolanaContext ||\n      hasExternalBitcoinContext ||\n      hasExternalSuiContext ||\n      hasExternalTronContext\n\n    const useExternalWalletProvidersOnly =\n      hasExternalProvider &&\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement\n    return {\n      useExternalWalletProvidersOnly,\n      externalChainTypes: providers,\n      internalChainTypes: internalChainTypes.filter(\n        (chainType) => !providers.includes(chainType)\n      ),\n    }\n  }, [\n    hasExternalEthereumContext,\n    hasExternalSolanaContext,\n    hasExternalBitcoinContext,\n    hasExternalSuiContext,\n    hasExternalTronContext,\n    walletConfig?.usePartialWalletManagement,\n    walletConfig?.forceInternalWalletManagement,\n  ])\n\n  return data\n}\n"],"mappings":";;;;;AAiBA,MAAM,qBAAqB;CACzB,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACX;AAED,SAAgB,4BAAoD;CAClE,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,EAAE,mBAAmB,+BAA+B,oBAAoB;CAC9E,MAAM,EAAE,mBAAmB,6BAA6B,kBAAkB;CAC1E,MAAM,EAAE,mBAAmB,8BAA8B,mBAAmB;CAC5E,MAAM,EAAE,mBAAmB,0BAA0B,eAAe;CACpE,MAAM,EAAE,mBAAmB,2BAA2B,gBAAgB;AA8CtE,QA7Ca,cAAc;EACzB,MAAM,YAAyB,EAAE;AACjC,MAAI,2BACF,WAAU,KAAK,UAAU,IAAI;AAE/B,MAAI,yBACF,WAAU,KAAK,UAAU,IAAI;AAE/B,MAAI,0BACF,WAAU,KAAK,UAAU,KAAK;AAEhC,MAAI,sBACF,WAAU,KAAK,UAAU,IAAI;AAE/B,MAAI,uBACF,WAAU,KAAK,UAAU,IAAI;AAa/B,SAAO;GACL,iCAXA,8BACA,4BACA,6BACA,yBACA,2BAIA,CAAC,cAAc,8BACf,CAAC,cAAc;GAGf,oBAAoB;GACpB,oBAAoB,mBAAmB,QACpC,cAAc,CAAC,UAAU,SAAS,UAAU,CAC9C;GACF;IACA;EACD;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;EACf,CAAC"}

package/dist/esm/stores/chains/ChainOrderStore.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useSwapOnly } from "../../hooks/useSwapOnly.js";
 import { getConfigItemSets, isItemAllowedForSets } from "../../utils/item.js";
 import { useChains } from "../../hooks/useChains.js";
@@ -33,7 +33,7 @@ function ChainOrderStoreProvider({ children, ...props }) {
 			});
 			const chainOrder = storeRef.current?.getState().initializeChains(filteredChains.map((chain) => chain.id), key);
 			const isSwapTo = swapOnly && key === "to";
-			const showAllNetworks = filteredChains.length > 1 && !hiddenUI?.includes(HiddenUI.AllNetworks) && !isSwapTo;
+			const showAllNetworks = filteredChains.length > 1 && !hiddenUI?.includes("allNetworks") && !isSwapTo;
 			const urlValues = getDefaultValuesFromQueryString({ buildUrl });
 			const urlChainValue = key === "from" ? urlValues.fromChain : urlValues.toChain;
 			const initialIsAllNetworks = showAllNetworks && !(key === "from" ? fromChainConfig : toChainConfig) && !urlChainValue;

package/dist/esm/stores/chains/ChainOrderStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainOrderStore.js","names":[],"sources":["../../../../src/stores/chains/ChainOrderStore.tsx"],"sourcesContent":["import { createContext, type JSX, useContext, useEffect, useRef } from 'react'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { useShallow } from 'zustand/shallow'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\nimport { getDefaultValuesFromQueryString } from '../form/getDefaultValuesFromQueryString.js'\nimport type { FormType } from '../form/types.js'\nimport { useFieldActions } from '../form/useFieldActions.js'\nimport type { PersistStoreProviderProps } from '../types.js'\nimport { createChainOrderStore } from './createChainOrderStore.js'\nimport type { ChainOrderState } from './types.js'\n\ntype ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>\n\nconst ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)\n\nexport function ChainOrderStoreProvider({\n  children,\n  ...props\n}: PersistStoreProviderProps): JSX.Element {\n  const {\n    chains: chainsConfig,\n    hiddenUI,\n    fromChain: fromChainConfig,\n    toChain: toChainConfig,\n    buildUrl,\n  } = useWidgetConfig()\n  const storeRef = useRef<ChainOrderStore>(null)\n  const { chains } = useChains()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const swapOnly = useSwapOnly()\n  const { variant, subvariantOptions } = useWidgetConfig()\n  const { externalChainTypes, useExternalWalletProvidersOnly } =\n    useExternalWalletProvider()\n\n  if (!storeRef.current) {\n    storeRef.current = createChainOrderStore({\n      ...props,\n    })\n  }\n\n  useEffect(() => {\n    if (chains) {\n      ;(['from', 'to'] as FormType[]).forEach((key) => {\n        const configChainIds = chainsConfig?.[key]\n        const isFromKey = key === 'from'\n\n        // Convert configChainIds to Sets for O(1) lookup\n        const configChainIdsSet = getConfigItemSets(\n          configChainIds,\n          (chainIds) => new Set(chainIds)\n        )\n        const filteredChains = chains.filter((chain) => {\n          const passesChainsConfigFilter = configChainIdsSet\n            ? isItemAllowedForSets(chain.id, configChainIdsSet)\n            : true\n          // If the integrator uses external wallet management and has not opted in for partial wallet management,\n          // restrict the displayed chains to those compatible with external wallet management.\n          // This ensures users only see chains for which they can sign transactions.\n          const passesWalletConfigFilter = isFromKey\n            ? !useExternalWalletProvidersOnly ||\n              externalChainTypes.includes(chain.chainType)\n            : true\n          return passesChainsConfigFilter && passesWalletConfigFilter\n        })\n\n        const chainOrder = storeRef.current?.getState().initializeChains(\n          filteredChains.map((chain) => chain.id),\n          key\n        )\n\n        const isSwapTo = swapOnly && key === 'to'\n\n        // Show \"All networks\" button if there are multiple networks\n        const showAllNetworks =\n          filteredChains.length > 1 &&\n          !hiddenUI?.includes(HiddenUI.AllNetworks) &&\n          !isSwapTo\n\n        // Initialize the isAllNetworks with true if the tab is shown,\n        // there is no config chain value and no url chain value\n        const urlValues = getDefaultValuesFromQueryString({ buildUrl })\n        const urlChainValue =\n          key === 'from' ? urlValues.fromChain : urlValues.toChain\n        const configChainValue =\n          key === 'from' ? fromChainConfig : toChainConfig\n        const initialIsAllNetworks =\n          showAllNetworks && !configChainValue && !urlChainValue\n        storeRef.current?.getState().setIsAllNetworks(initialIsAllNetworks, key)\n        storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)\n\n        // If swap only, set the to chain to the from chain\n        if (isSwapTo) {\n          const [fromChainValue] = getFieldValues('fromChain')\n          setFieldValue('toChain', fromChainValue)\n        }\n\n        // When \"All Networks\" is active, don't auto-select a chain from the\n        // persisted chain order. This prevents stale cross-ecosystem selections\n        // (e.g. EVM from + Solana to) from triggering the \"destination wallet\n        // address required\" message after a page refresh.\n        if (initialIsAllNetworks) {\n          return\n        }\n\n        const [chainValue] = getFieldValues(`${key}Chain`)\n        if (chainValue) {\n          return\n        }\n\n        const firstAllowedPinnedChain = storeRef.current\n          ?.getState()\n          .pinnedChains?.find((chainId) =>\n            filteredChains.some((chain) => chain.id === chainId)\n          )\n        if (\n          variant === 'wide' &&\n          !subvariantOptions?.wide?.disableChainSidebar &&\n          firstAllowedPinnedChain\n        ) {\n          setFieldValue(`${key}Chain`, firstAllowedPinnedChain)\n        } else if (chainOrder?.length) {\n          setFieldValue(`${key}Chain`, chainOrder[0])\n        }\n      })\n    }\n  }, [\n    chains,\n    chainsConfig,\n    externalChainTypes,\n    getFieldValues,\n    setFieldValue,\n    useExternalWalletProvidersOnly,\n    variant,\n    subvariantOptions?.wide?.disableChainSidebar,\n    hiddenUI,\n    swapOnly,\n    fromChainConfig,\n    toChainConfig,\n    buildUrl,\n  ])\n\n  return (\n    <ChainOrderStoreContext.Provider value={storeRef.current}>\n      {children}\n    </ChainOrderStoreContext.Provider>\n  )\n}\n\nfunction useChainOrderStoreContext() {\n  const useStore = useContext(ChainOrderStoreContext)\n  if (!useStore) {\n    throw new Error(\n      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`\n    )\n  }\n  return useStore\n}\n\nexport function useChainOrderStore<T>(\n  selector: (state: ChainOrderState) => T\n): T {\n  const useStore = useChainOrderStoreContext()\n  return useStore(useShallow(selector))\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,yBAAyB,cAAsC,KAAK;AAE1E,SAAgB,wBAAwB,EACtC,UACA,GAAG,SACsC;CACzC,MAAM,EACJ,QAAQ,cACR,UACA,WAAW,iBACX,SAAS,eACT,aACE,iBAAiB;CACrB,MAAM,WAAW,OAAwB,KAAK;CAC9C,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,SAAS,sBAAsB,iBAAiB;CACxD,MAAM,EAAE,oBAAoB,mCAC1B,2BAA2B;AAE7B,KAAI,CAAC,SAAS,QACZ,UAAS,UAAU,sBAAsB,EACvC,GAAG,OACJ,CAAC;AAGJ,iBAAgB;AACd,MAAI,OACA,EAAC,QAAQ,KAAK,CAAgB,SAAS,QAAQ;GAC/C,MAAM,iBAAiB,eAAe;GACtC,MAAM,YAAY,QAAQ;GAG1B,MAAM,oBAAoB,kBACxB,iBACC,aAAa,IAAI,IAAI,SAAS,CAChC;GACD,MAAM,iBAAiB,OAAO,QAAQ,UAAU;IAC9C,MAAM,2BAA2B,oBAC7B,qBAAqB,MAAM,IAAI,kBAAkB,GACjD;IAIJ,MAAM,2BAA2B,YAC7B,CAAC,kCACD,mBAAmB,SAAS,MAAM,UAAU,GAC5C;AACJ,WAAO,4BAA4B;KACnC;GAEF,MAAM,aAAa,SAAS,SAAS,UAAU,CAAC,iBAC9C,eAAe,KAAK,UAAU,MAAM,GAAG,EACvC,IACD;GAED,MAAM,WAAW,YAAY,QAAQ;GAGrC,MAAM,kBACJ,eAAe,SAAS,KACxB,CAAC,UAAU,SAAS,SAAS,YAAY,IACzC,CAAC;GAIH,MAAM,YAAY,gCAAgC,EAAE,UAAU,CAAC;GAC/D,MAAM,gBACJ,QAAQ,SAAS,UAAU,YAAY,UAAU;GAGnD,MAAM,uBACJ,mBAAmB,EAFnB,QAAQ,SAAS,kBAAkB,kBAEK,CAAC;AAC3C,YAAS,SAAS,UAAU,CAAC,iBAAiB,sBAAsB,IAAI;AACxE,YAAS,SAAS,UAAU,CAAC,mBAAmB,iBAAiB,IAAI;AAGrE,OAAI,UAAU;IACZ,MAAM,CAAC,kBAAkB,eAAe,YAAY;AACpD,kBAAc,WAAW,eAAe;;AAO1C,OAAI,qBACF;GAGF,MAAM,CAAC,cAAc,eAAe,GAAG,IAAI,OAAO;AAClD,OAAI,WACF;GAGF,MAAM,0BAA0B,SAAS,SACrC,UAAU,CACX,cAAc,MAAM,YACnB,eAAe,MAAM,UAAU,MAAM,OAAO,QAAQ,CACrD;AACH,OACE,YAAY,UACZ,CAAC,mBAAmB,MAAM,uBAC1B,wBAEA,eAAc,GAAG,IAAI,QAAQ,wBAAwB;YAC5C,YAAY,OACrB,eAAc,GAAG,IAAI,QAAQ,WAAW,GAAG;IAE7C;IAEH;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,mBAAmB,MAAM;EACzB;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO,SAAS;EAC9C;EAC+B,CAAA;;AAItC,SAAS,4BAA4B;CACnC,MAAM,WAAW,WAAW,uBAAuB;AACnD,KAAI,CAAC,SACH,OAAM,IAAI,MACR,yCAAyC,wBAAwB,KAAK,IACvE;AAEH,QAAO;;AAGT,SAAgB,mBACd,UACG;AAEH,QADiB,2BAA2B,CAC5B,WAAW,SAAS,CAAC"}
+{"version":3,"file":"ChainOrderStore.js","names":[],"sources":["../../../../src/stores/chains/ChainOrderStore.tsx"],"sourcesContent":["import { createContext, type JSX, useContext, useEffect, useRef } from 'react'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { useShallow } from 'zustand/shallow'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\nimport { getDefaultValuesFromQueryString } from '../form/getDefaultValuesFromQueryString.js'\nimport type { FormType } from '../form/types.js'\nimport { useFieldActions } from '../form/useFieldActions.js'\nimport type { PersistStoreProviderProps } from '../types.js'\nimport { createChainOrderStore } from './createChainOrderStore.js'\nimport type { ChainOrderState } from './types.js'\n\ntype ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>\n\nconst ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)\n\nexport function ChainOrderStoreProvider({\n  children,\n  ...props\n}: PersistStoreProviderProps): JSX.Element {\n  const {\n    chains: chainsConfig,\n    hiddenUI,\n    fromChain: fromChainConfig,\n    toChain: toChainConfig,\n    buildUrl,\n  } = useWidgetConfig()\n  const storeRef = useRef<ChainOrderStore>(null)\n  const { chains } = useChains()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const swapOnly = useSwapOnly()\n  const { variant, subvariantOptions } = useWidgetConfig()\n  const { externalChainTypes, useExternalWalletProvidersOnly } =\n    useExternalWalletProvider()\n\n  if (!storeRef.current) {\n    storeRef.current = createChainOrderStore({\n      ...props,\n    })\n  }\n\n  useEffect(() => {\n    if (chains) {\n      ;(['from', 'to'] as FormType[]).forEach((key) => {\n        const configChainIds = chainsConfig?.[key]\n        const isFromKey = key === 'from'\n\n        // Convert configChainIds to Sets for O(1) lookup\n        const configChainIdsSet = getConfigItemSets(\n          configChainIds,\n          (chainIds) => new Set(chainIds)\n        )\n        const filteredChains = chains.filter((chain) => {\n          const passesChainsConfigFilter = configChainIdsSet\n            ? isItemAllowedForSets(chain.id, configChainIdsSet)\n            : true\n          // If the integrator uses external wallet management and has not opted in for partial wallet management,\n          // restrict the displayed chains to those compatible with external wallet management.\n          // This ensures users only see chains for which they can sign transactions.\n          const passesWalletConfigFilter = isFromKey\n            ? !useExternalWalletProvidersOnly ||\n              externalChainTypes.includes(chain.chainType)\n            : true\n          return passesChainsConfigFilter && passesWalletConfigFilter\n        })\n\n        const chainOrder = storeRef.current?.getState().initializeChains(\n          filteredChains.map((chain) => chain.id),\n          key\n        )\n\n        const isSwapTo = swapOnly && key === 'to'\n\n        // Show \"All networks\" button if there are multiple networks\n        const showAllNetworks =\n          filteredChains.length > 1 &&\n          !hiddenUI?.includes(HiddenUI.AllNetworks) &&\n          !isSwapTo\n\n        // Initialize the isAllNetworks with true if the tab is shown,\n        // there is no config chain value and no url chain value\n        const urlValues = getDefaultValuesFromQueryString({ buildUrl })\n        const urlChainValue =\n          key === 'from' ? urlValues.fromChain : urlValues.toChain\n        const configChainValue =\n          key === 'from' ? fromChainConfig : toChainConfig\n        const initialIsAllNetworks =\n          showAllNetworks && !configChainValue && !urlChainValue\n        storeRef.current?.getState().setIsAllNetworks(initialIsAllNetworks, key)\n        storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)\n\n        // If swap only, set the to chain to the from chain\n        if (isSwapTo) {\n          const [fromChainValue] = getFieldValues('fromChain')\n          setFieldValue('toChain', fromChainValue)\n        }\n\n        // When \"All Networks\" is active, don't auto-select a chain from the\n        // persisted chain order. This prevents stale cross-ecosystem selections\n        // (e.g. EVM from + Solana to) from triggering the \"destination wallet\n        // address required\" message after a page refresh.\n        if (initialIsAllNetworks) {\n          return\n        }\n\n        const [chainValue] = getFieldValues(`${key}Chain`)\n        if (chainValue) {\n          return\n        }\n\n        const firstAllowedPinnedChain = storeRef.current\n          ?.getState()\n          .pinnedChains?.find((chainId) =>\n            filteredChains.some((chain) => chain.id === chainId)\n          )\n        if (\n          variant === 'wide' &&\n          !subvariantOptions?.wide?.disableChainSidebar &&\n          firstAllowedPinnedChain\n        ) {\n          setFieldValue(`${key}Chain`, firstAllowedPinnedChain)\n        } else if (chainOrder?.length) {\n          setFieldValue(`${key}Chain`, chainOrder[0])\n        }\n      })\n    }\n  }, [\n    chains,\n    chainsConfig,\n    externalChainTypes,\n    getFieldValues,\n    setFieldValue,\n    useExternalWalletProvidersOnly,\n    variant,\n    subvariantOptions?.wide?.disableChainSidebar,\n    hiddenUI,\n    swapOnly,\n    fromChainConfig,\n    toChainConfig,\n    buildUrl,\n  ])\n\n  return (\n    <ChainOrderStoreContext.Provider value={storeRef.current}>\n      {children}\n    </ChainOrderStoreContext.Provider>\n  )\n}\n\nfunction useChainOrderStoreContext() {\n  const useStore = useContext(ChainOrderStoreContext)\n  if (!useStore) {\n    throw new Error(\n      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`\n    )\n  }\n  return useStore\n}\n\nexport function useChainOrderStore<T>(\n  selector: (state: ChainOrderState) => T\n): T {\n  const useStore = useChainOrderStoreContext()\n  return useStore(useShallow(selector))\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,yBAAyB,cAAsC,KAAK;AAE1E,SAAgB,wBAAwB,EACtC,UACA,GAAG,SACsC;CACzC,MAAM,EACJ,QAAQ,cACR,UACA,WAAW,iBACX,SAAS,eACT,aACE,iBAAiB;CACrB,MAAM,WAAW,OAAwB,KAAK;CAC9C,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,SAAS,sBAAsB,iBAAiB;CACxD,MAAM,EAAE,oBAAoB,mCAC1B,2BAA2B;AAE7B,KAAI,CAAC,SAAS,QACZ,UAAS,UAAU,sBAAsB,EACvC,GAAG,OACJ,CAAC;AAGJ,iBAAgB;AACd,MAAI,OACA,EAAC,QAAQ,KAAK,CAAgB,SAAS,QAAQ;GAC/C,MAAM,iBAAiB,eAAe;GACtC,MAAM,YAAY,QAAQ;GAG1B,MAAM,oBAAoB,kBACxB,iBACC,aAAa,IAAI,IAAI,SAAS,CAChC;GACD,MAAM,iBAAiB,OAAO,QAAQ,UAAU;IAC9C,MAAM,2BAA2B,oBAC7B,qBAAqB,MAAM,IAAI,kBAAkB,GACjD;IAIJ,MAAM,2BAA2B,YAC7B,CAAC,kCACD,mBAAmB,SAAS,MAAM,UAAU,GAC5C;AACJ,WAAO,4BAA4B;KACnC;GAEF,MAAM,aAAa,SAAS,SAAS,UAAU,CAAC,iBAC9C,eAAe,KAAK,UAAU,MAAM,GAAG,EACvC,IACD;GAED,MAAM,WAAW,YAAY,QAAQ;GAGrC,MAAM,kBACJ,eAAe,SAAS,KACxB,CAAC,UAAU,SAAA,cAA8B,IACzC,CAAC;GAIH,MAAM,YAAY,gCAAgC,EAAE,UAAU,CAAC;GAC/D,MAAM,gBACJ,QAAQ,SAAS,UAAU,YAAY,UAAU;GAGnD,MAAM,uBACJ,mBAAmB,EAFnB,QAAQ,SAAS,kBAAkB,kBAEK,CAAC;AAC3C,YAAS,SAAS,UAAU,CAAC,iBAAiB,sBAAsB,IAAI;AACxE,YAAS,SAAS,UAAU,CAAC,mBAAmB,iBAAiB,IAAI;AAGrE,OAAI,UAAU;IACZ,MAAM,CAAC,kBAAkB,eAAe,YAAY;AACpD,kBAAc,WAAW,eAAe;;AAO1C,OAAI,qBACF;GAGF,MAAM,CAAC,cAAc,eAAe,GAAG,IAAI,OAAO;AAClD,OAAI,WACF;GAGF,MAAM,0BAA0B,SAAS,SACrC,UAAU,CACX,cAAc,MAAM,YACnB,eAAe,MAAM,UAAU,MAAM,OAAO,QAAQ,CACrD;AACH,OACE,YAAY,UACZ,CAAC,mBAAmB,MAAM,uBAC1B,wBAEA,eAAc,GAAG,IAAI,QAAQ,wBAAwB;YAC5C,YAAY,OACrB,eAAc,GAAG,IAAI,QAAQ,WAAW,GAAG;IAE7C;IAEH;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,mBAAmB,MAAM;EACzB;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO,SAAS;EAC9C;EAC+B,CAAA;;AAItC,SAAS,4BAA4B;CACnC,MAAM,WAAW,WAAW,uBAAuB;AACnD,KAAI,CAAC,SACH,OAAM,IAAI,MACR,yCAAyC,wBAAwB,KAAK,IACvE;AAEH,QAAO;;AAGT,SAAgB,mBACd,UACG;AAEH,QADiB,2BAA2B,CAC5B,WAAW,SAAS,CAAC"}

package/dist/esm/stores/chains/createChainOrderStore.js

@@ -1,5 +1,5 @@
 import { widgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 const defaultChainState = {
@@ -68,7 +68,7 @@ const createChainOrderStore = ({ namePrefix }) => create()(persist((set, get) =>
 			pinnedChains.push(chainId);
 			return { pinnedChains };
 		});
-		widgetEvents.emit(WidgetEvent.ChainPinned, {
+		widgetEvents.emit("chainPinned", {
 			chainId,
 			pinned: !wasAlreadyPinned
 		});

package/dist/esm/stores/chains/createChainOrderStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"createChainOrderStore.js","names":[],"sources":["../../../../src/stores/chains/createChainOrderStore.ts"],"sourcesContent":["import type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { ChainOrderState } from './types.js'\n\n// (10 tiles: 9 + 1 for \"All chains\")\nexport const maxGridItemsToShow = 10\nexport const maxChainsToShow: number = maxGridItemsToShow - 1\n// If there are more than maxChainsToShow chains to show,\n// -1 tile to show a button \"+ N\" more chains\nexport const maxChainsToOrder: number = maxChainsToShow - 1\n\nconst defaultChainState = {\n  from: [],\n  to: [],\n}\n\nexport const createChainOrderStore = ({\n  namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<ChainOrderState>> =>\n  create<ChainOrderState>()(\n    persist(\n      (set, get) => ({\n        chainOrder: defaultChainState,\n        fromIsAllNetworks: true,\n        toIsAllNetworks: true,\n        fromShowAllNetworks: true,\n        toShowAllNetworks: true,\n        availableChains: defaultChainState,\n        pinnedChains: [],\n        initializeChains: (chainIds, type) => {\n          set((state: ChainOrderState) => {\n            const chainOrder = state.chainOrder[type].filter((chainId) =>\n              chainIds.includes(chainId)\n            )\n            const chainsToAdd = chainIds.filter(\n              (chainId) => !chainOrder.includes(chainId)\n            )\n            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {\n              return {\n                availableChains: {\n                  ...state.availableChains,\n                  [type]: chainIds,\n                },\n                chainOrder: {\n                  ...state.chainOrder,\n                  [type]: chainOrder,\n                },\n              }\n            }\n            const chainsToAddLength = maxChainsToOrder - chainOrder.length\n            for (let index = 0; index < chainsToAddLength; index++) {\n              chainOrder.push(chainsToAdd[index])\n            }\n            return {\n              availableChains: {\n                ...state.availableChains,\n                [type]: chainIds,\n              },\n              chainOrder: {\n                ...state.chainOrder,\n                [type]: chainOrder,\n              },\n            }\n          })\n          return get().chainOrder[type].slice(0, maxChainsToOrder)\n        },\n        setChain: (chainId, type) => {\n          const state = get()\n          if (\n            state.chainOrder[type].includes(chainId) ||\n            !state.availableChains[type].includes(chainId)\n          ) {\n            return\n          }\n          set((state: ChainOrderState) => {\n            const chainOrder = [chainId, ...state.chainOrder[type]].slice(\n              0,\n              maxChainsToOrder\n            )\n            return {\n              chainOrder: {\n                ...state.chainOrder,\n                [type]: chainOrder,\n              },\n            }\n          })\n        },\n        setIsAllNetworks: (isAllNetworks, formType) => {\n          set({ [`${formType}IsAllNetworks`]: isAllNetworks })\n        },\n        setShowAllNetworks: (showAllNetworks, formType) => {\n          set({ [`${formType}ShowAllNetworks`]: showAllNetworks })\n        },\n        setPinnedChain: (chainId) => {\n          const currentPinnedChains = get().pinnedChains\n          const wasAlreadyPinned = currentPinnedChains.includes(chainId)\n          set((state: ChainOrderState) => {\n            const pinnedChains = [...state.pinnedChains]\n            if (wasAlreadyPinned) {\n              return {\n                pinnedChains: pinnedChains.filter((id) => id !== chainId),\n              }\n            }\n            pinnedChains.push(chainId)\n            return {\n              pinnedChains,\n            }\n          })\n          widgetEvents.emit(WidgetEvent.ChainPinned, {\n            chainId,\n            pinned: !wasAlreadyPinned,\n          })\n        },\n      }),\n      {\n        name: `${namePrefix || 'li.fi'}-widget-chains-order`,\n        version: 4,\n        partialize: (state) => ({\n          chainOrder: state.chainOrder,\n          pinnedChains: state.pinnedChains,\n        }),\n      }\n    )\n  )\n"],"mappings":";;;;AAeA,MAAM,oBAAoB;CACxB,MAAM,EAAE;CACR,IAAI,EAAE;CACP;AAED,MAAa,yBAAyB,EACpC,iBAEA,QAAyB,CACvB,SACG,KAAK,SAAS;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB;CACjB,qBAAqB;CACrB,mBAAmB;CACnB,iBAAiB;CACjB,cAAc,EAAE;CAChB,mBAAmB,UAAU,SAAS;AACpC,OAAK,UAA2B;GAC9B,MAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,YAChD,SAAS,SAAS,QAAQ,CAC3B;GACD,MAAM,cAAc,SAAS,QAC1B,YAAY,CAAC,WAAW,SAAS,QAAQ,CAC3C;AACD,OAAI,WAAW,WAAA,KAA+B,CAAC,YAAY,OACzD,QAAO;IACL,iBAAiB;KACf,GAAG,MAAM;MACR,OAAO;KACT;IACD,YAAY;KACV,GAAG,MAAM;MACR,OAAO;KACT;IACF;GAEH,MAAM,oBAAA,IAAuC,WAAW;AACxD,QAAK,IAAI,QAAQ,GAAG,QAAQ,mBAAmB,QAC7C,YAAW,KAAK,YAAY,OAAO;AAErC,UAAO;IACL,iBAAiB;KACf,GAAG,MAAM;MACR,OAAO;KACT;IACD,YAAY;KACV,GAAG,MAAM;MACR,OAAO;KACT;IACF;IACD;AACF,SAAO,KAAK,CAAC,WAAW,MAAM,MAAM,GAAA,EAAoB;;CAE1D,WAAW,SAAS,SAAS;EAC3B,MAAM,QAAQ,KAAK;AACnB,MACE,MAAM,WAAW,MAAM,SAAS,QAAQ,IACxC,CAAC,MAAM,gBAAgB,MAAM,SAAS,QAAQ,CAE9C;AAEF,OAAK,UAA2B;GAC9B,MAAM,aAAa,CAAC,SAAS,GAAG,MAAM,WAAW,MAAM,CAAC,MACtD,GAAA,EAED;AACD,UAAO,EACL,YAAY;IACV,GAAG,MAAM;KACR,OAAO;IACT,EACF;IACD;;CAEJ,mBAAmB,eAAe,aAAa;AAC7C,MAAI,GAAG,GAAG,SAAS,iBAAiB,eAAe,CAAC;;CAEtD,qBAAqB,iBAAiB,aAAa;AACjD,MAAI,GAAG,GAAG,SAAS,mBAAmB,iBAAiB,CAAC;;CAE1D,iBAAiB,YAAY;EAE3B,MAAM,mBADsB,KAAK,CAAC,aACW,SAAS,QAAQ;AAC9D,OAAK,UAA2B;GAC9B,MAAM,eAAe,CAAC,GAAG,MAAM,aAAa;AAC5C,OAAI,iBACF,QAAO,EACL,cAAc,aAAa,QAAQ,OAAO,OAAO,QAAQ,EAC1D;AAEH,gBAAa,KAAK,QAAQ;AAC1B,UAAO,EACL,cACD;IACD;AACF,eAAa,KAAK,YAAY,aAAa;GACzC;GACA,QAAQ,CAAC;GACV,CAAC;;CAEL,GACD;CACE,MAAM,GAAG,cAAc,QAAQ;CAC/B,SAAS;CACT,aAAa,WAAW;EACtB,YAAY,MAAM;EAClB,cAAc,MAAM;EACrB;CACF,CACF,CACF"}
+{"version":3,"file":"createChainOrderStore.js","names":[],"sources":["../../../../src/stores/chains/createChainOrderStore.ts"],"sourcesContent":["import type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { ChainOrderState } from './types.js'\n\n// (10 tiles: 9 + 1 for \"All chains\")\nexport const maxGridItemsToShow = 10\nexport const maxChainsToShow: number = maxGridItemsToShow - 1\n// If there are more than maxChainsToShow chains to show,\n// -1 tile to show a button \"+ N\" more chains\nexport const maxChainsToOrder: number = maxChainsToShow - 1\n\nconst defaultChainState = {\n  from: [],\n  to: [],\n}\n\nexport const createChainOrderStore = ({\n  namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<ChainOrderState>> =>\n  create<ChainOrderState>()(\n    persist(\n      (set, get) => ({\n        chainOrder: defaultChainState,\n        fromIsAllNetworks: true,\n        toIsAllNetworks: true,\n        fromShowAllNetworks: true,\n        toShowAllNetworks: true,\n        availableChains: defaultChainState,\n        pinnedChains: [],\n        initializeChains: (chainIds, type) => {\n          set((state: ChainOrderState) => {\n            const chainOrder = state.chainOrder[type].filter((chainId) =>\n              chainIds.includes(chainId)\n            )\n            const chainsToAdd = chainIds.filter(\n              (chainId) => !chainOrder.includes(chainId)\n            )\n            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {\n              return {\n                availableChains: {\n                  ...state.availableChains,\n                  [type]: chainIds,\n                },\n                chainOrder: {\n                  ...state.chainOrder,\n                  [type]: chainOrder,\n                },\n              }\n            }\n            const chainsToAddLength = maxChainsToOrder - chainOrder.length\n            for (let index = 0; index < chainsToAddLength; index++) {\n              chainOrder.push(chainsToAdd[index])\n            }\n            return {\n              availableChains: {\n                ...state.availableChains,\n                [type]: chainIds,\n              },\n              chainOrder: {\n                ...state.chainOrder,\n                [type]: chainOrder,\n              },\n            }\n          })\n          return get().chainOrder[type].slice(0, maxChainsToOrder)\n        },\n        setChain: (chainId, type) => {\n          const state = get()\n          if (\n            state.chainOrder[type].includes(chainId) ||\n            !state.availableChains[type].includes(chainId)\n          ) {\n            return\n          }\n          set((state: ChainOrderState) => {\n            const chainOrder = [chainId, ...state.chainOrder[type]].slice(\n              0,\n              maxChainsToOrder\n            )\n            return {\n              chainOrder: {\n                ...state.chainOrder,\n                [type]: chainOrder,\n              },\n            }\n          })\n        },\n        setIsAllNetworks: (isAllNetworks, formType) => {\n          set({ [`${formType}IsAllNetworks`]: isAllNetworks })\n        },\n        setShowAllNetworks: (showAllNetworks, formType) => {\n          set({ [`${formType}ShowAllNetworks`]: showAllNetworks })\n        },\n        setPinnedChain: (chainId) => {\n          const currentPinnedChains = get().pinnedChains\n          const wasAlreadyPinned = currentPinnedChains.includes(chainId)\n          set((state: ChainOrderState) => {\n            const pinnedChains = [...state.pinnedChains]\n            if (wasAlreadyPinned) {\n              return {\n                pinnedChains: pinnedChains.filter((id) => id !== chainId),\n              }\n            }\n            pinnedChains.push(chainId)\n            return {\n              pinnedChains,\n            }\n          })\n          widgetEvents.emit(WidgetEvent.ChainPinned, {\n            chainId,\n            pinned: !wasAlreadyPinned,\n          })\n        },\n      }),\n      {\n        name: `${namePrefix || 'li.fi'}-widget-chains-order`,\n        version: 4,\n        partialize: (state) => ({\n          chainOrder: state.chainOrder,\n          pinnedChains: state.pinnedChains,\n        }),\n      }\n    )\n  )\n"],"mappings":";;;;AAeA,MAAM,oBAAoB;CACxB,MAAM,EAAE;CACR,IAAI,EAAE;CACP;AAED,MAAa,yBAAyB,EACpC,iBAEA,QAAyB,CACvB,SACG,KAAK,SAAS;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB;CACjB,qBAAqB;CACrB,mBAAmB;CACnB,iBAAiB;CACjB,cAAc,EAAE;CAChB,mBAAmB,UAAU,SAAS;AACpC,OAAK,UAA2B;GAC9B,MAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,YAChD,SAAS,SAAS,QAAQ,CAC3B;GACD,MAAM,cAAc,SAAS,QAC1B,YAAY,CAAC,WAAW,SAAS,QAAQ,CAC3C;AACD,OAAI,WAAW,WAAA,KAA+B,CAAC,YAAY,OACzD,QAAO;IACL,iBAAiB;KACf,GAAG,MAAM;MACR,OAAO;KACT;IACD,YAAY;KACV,GAAG,MAAM;MACR,OAAO;KACT;IACF;GAEH,MAAM,oBAAA,IAAuC,WAAW;AACxD,QAAK,IAAI,QAAQ,GAAG,QAAQ,mBAAmB,QAC7C,YAAW,KAAK,YAAY,OAAO;AAErC,UAAO;IACL,iBAAiB;KACf,GAAG,MAAM;MACR,OAAO;KACT;IACD,YAAY;KACV,GAAG,MAAM;MACR,OAAO;KACT;IACF;IACD;AACF,SAAO,KAAK,CAAC,WAAW,MAAM,MAAM,GAAA,EAAoB;;CAE1D,WAAW,SAAS,SAAS;EAC3B,MAAM,QAAQ,KAAK;AACnB,MACE,MAAM,WAAW,MAAM,SAAS,QAAQ,IACxC,CAAC,MAAM,gBAAgB,MAAM,SAAS,QAAQ,CAE9C;AAEF,OAAK,UAA2B;GAC9B,MAAM,aAAa,CAAC,SAAS,GAAG,MAAM,WAAW,MAAM,CAAC,MACtD,GAAA,EAED;AACD,UAAO,EACL,YAAY;IACV,GAAG,MAAM;KACR,OAAO;IACT,EACF;IACD;;CAEJ,mBAAmB,eAAe,aAAa;AAC7C,MAAI,GAAG,GAAG,SAAS,iBAAiB,eAAe,CAAC;;CAEtD,qBAAqB,iBAAiB,aAAa;AACjD,MAAI,GAAG,GAAG,SAAS,mBAAmB,iBAAiB,CAAC;;CAE1D,iBAAiB,YAAY;EAE3B,MAAM,mBADsB,KAAK,CAAC,aACW,SAAS,QAAQ;AAC9D,OAAK,UAA2B;GAC9B,MAAM,eAAe,CAAC,GAAG,MAAM,aAAa;AAC5C,OAAI,iBACF,QAAO,EACL,cAAc,aAAa,QAAQ,OAAO,OAAO,QAAQ,EAC1D;AAEH,gBAAa,KAAK,QAAQ;AAC1B,UAAO,EACL,cACD;IACD;AACF,eAAa,KAAA,eAA8B;GACzC;GACA,QAAQ,CAAC;GACV,CAAC;;CAEL,GACD;CACE,MAAM,GAAG,cAAc,QAAQ;CAC/B,SAAS;CACT,aAAa,WAAW;EACtB,YAAY,MAAM;EAClB,cAAc,MAAM;EACrB;CACF,CACF,CACF"}

package/dist/esm/stores/form/useFieldActions.js

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useFormStore } from "./useFormStore.js";
 import { useCallback } from "react";
 //#region src/stores/form/useFieldActions.ts
@@ -18,7 +18,7 @@ const useFieldActions = () => {
 	const setFieldValueWithEmittedEvents = useCallback((fieldName, newValue, options) => {
 		const oldValue = actions.getFieldValues(fieldName)[0];
 		actions.setFieldValue(fieldName, newValue, options);
-		if (newValue !== oldValue) emitter.emit(WidgetEvent.FormFieldChanged, {
+		if (newValue !== oldValue) emitter.emit("formFieldChanged", {
 			fieldName,
 			newValue,
 			oldValue
@@ -37,7 +37,7 @@ const useFieldActions = () => {
 		}, []);
 		actions.setUserAndDefaultValues(formValues);
 		changedValues.forEach(({ fieldName, newValue, oldValue }) => {
-			emitter.emit(WidgetEvent.FormFieldChanged, {
+			emitter.emit("formFieldChanged", {
 				fieldName,
 				newValue,
 				oldValue

package/dist/esm/stores/form/useFieldActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldActions.js","names":[],"sources":["../../../../src/stores/form/useFieldActions.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type {\n  DefaultValues,\n  FormActions,\n  FormFieldNames,\n  GenericFormValue,\n  SetOptions,\n} from './types.js'\nimport { useFormStore } from './useFormStore.js'\n\nexport const useFieldActions = (): FormActions => {\n  const emitter = useWidgetEvents()\n  const actions = useFormStore<FormActions>((store) => ({\n    getFieldValues: store.getFieldValues,\n    isTouched: store.isTouched,\n    isDirty: store.isDirty,\n    resetField: store.resetField,\n    setAsTouched: store.setAsTouched,\n    setDefaultValues: store.setDefaultValues,\n    setFieldValue: store.setFieldValue,\n    setUserAndDefaultValues: store.setUserAndDefaultValues,\n  }))\n\n  const setFieldValueWithEmittedEvents = useCallback(\n    (\n      fieldName: FormFieldNames,\n      newValue: GenericFormValue,\n      options?: SetOptions\n    ) => {\n      const oldValue = actions.getFieldValues(fieldName)[0]\n\n      actions.setFieldValue(fieldName, newValue, options)\n\n      if (newValue !== oldValue) {\n        emitter.emit(WidgetEvent.FormFieldChanged, {\n          fieldName,\n          newValue,\n          oldValue,\n        } as FormFieldChanged)\n      }\n    },\n    [actions, emitter]\n  )\n\n  const setUserAndDefaultValuesWithEmittedEvents = useCallback(\n    (formValues: Partial<DefaultValues>) => {\n      const formValuesKeys = Object.keys(formValues) as FormFieldNames[]\n\n      const changedValues = formValuesKeys.reduce(\n        (accum, fieldName) => {\n          const oldValue = actions.getFieldValues(fieldName)[0]\n          const newValue = formValues[fieldName]\n\n          if (newValue !== oldValue) {\n            accum.push({ fieldName, newValue, oldValue })\n          }\n\n          return accum\n        },\n        [] as {\n          fieldName: FormFieldNames\n          newValue: GenericFormValue\n          oldValue: GenericFormValue\n        }[]\n      )\n\n      actions.setUserAndDefaultValues(formValues)\n\n      changedValues.forEach(({ fieldName, newValue, oldValue }) => {\n        emitter.emit(WidgetEvent.FormFieldChanged, {\n          fieldName,\n          newValue,\n          oldValue,\n        } as FormFieldChanged)\n      })\n    },\n    [actions, emitter]\n  )\n\n  return {\n    getFieldValues: actions.getFieldValues,\n    isTouched: actions.isTouched,\n    isDirty: actions.isDirty,\n    resetField: actions.resetField,\n    setAsTouched: actions.setAsTouched,\n    setDefaultValues: actions.setDefaultValues,\n    setFieldValue: setFieldValueWithEmittedEvents,\n    setUserAndDefaultValues: setUserAndDefaultValuesWithEmittedEvents,\n  }\n}\n"],"mappings":";;;;;AAaA,MAAa,wBAAqC;CAChD,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,cAA2B,WAAW;EACpD,gBAAgB,MAAM;EACtB,WAAW,MAAM;EACjB,SAAS,MAAM;EACf,YAAY,MAAM;EAClB,cAAc,MAAM;EACpB,kBAAkB,MAAM;EACxB,eAAe,MAAM;EACrB,yBAAyB,MAAM;EAChC,EAAE;CAEH,MAAM,iCAAiC,aAEnC,WACA,UACA,YACG;EACH,MAAM,WAAW,QAAQ,eAAe,UAAU,CAAC;AAEnD,UAAQ,cAAc,WAAW,UAAU,QAAQ;AAEnD,MAAI,aAAa,SACf,SAAQ,KAAK,YAAY,kBAAkB;GACzC;GACA;GACA;GACD,CAAqB;IAG1B,CAAC,SAAS,QAAQ,CACnB;CAED,MAAM,2CAA2C,aAC9C,eAAuC;EAGtC,MAAM,gBAFiB,OAAO,KAAK,WAAW,CAET,QAClC,OAAO,cAAc;GACpB,MAAM,WAAW,QAAQ,eAAe,UAAU,CAAC;GACnD,MAAM,WAAW,WAAW;AAE5B,OAAI,aAAa,SACf,OAAM,KAAK;IAAE;IAAW;IAAU;IAAU,CAAC;AAG/C,UAAO;KAET,EAAE,CAKH;AAED,UAAQ,wBAAwB,WAAW;AAE3C,gBAAc,SAAS,EAAE,WAAW,UAAU,eAAe;AAC3D,WAAQ,KAAK,YAAY,kBAAkB;IACzC;IACA;IACA;IACD,CAAqB;IACtB;IAEJ,CAAC,SAAS,QAAQ,CACnB;AAED,QAAO;EACL,gBAAgB,QAAQ;EACxB,WAAW,QAAQ;EACnB,SAAS,QAAQ;EACjB,YAAY,QAAQ;EACpB,cAAc,QAAQ;EACtB,kBAAkB,QAAQ;EAC1B,eAAe;EACf,yBAAyB;EAC1B"}
+{"version":3,"file":"useFieldActions.js","names":[],"sources":["../../../../src/stores/form/useFieldActions.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type {\n  DefaultValues,\n  FormActions,\n  FormFieldNames,\n  GenericFormValue,\n  SetOptions,\n} from './types.js'\nimport { useFormStore } from './useFormStore.js'\n\nexport const useFieldActions = (): FormActions => {\n  const emitter = useWidgetEvents()\n  const actions = useFormStore<FormActions>((store) => ({\n    getFieldValues: store.getFieldValues,\n    isTouched: store.isTouched,\n    isDirty: store.isDirty,\n    resetField: store.resetField,\n    setAsTouched: store.setAsTouched,\n    setDefaultValues: store.setDefaultValues,\n    setFieldValue: store.setFieldValue,\n    setUserAndDefaultValues: store.setUserAndDefaultValues,\n  }))\n\n  const setFieldValueWithEmittedEvents = useCallback(\n    (\n      fieldName: FormFieldNames,\n      newValue: GenericFormValue,\n      options?: SetOptions\n    ) => {\n      const oldValue = actions.getFieldValues(fieldName)[0]\n\n      actions.setFieldValue(fieldName, newValue, options)\n\n      if (newValue !== oldValue) {\n        emitter.emit(WidgetEvent.FormFieldChanged, {\n          fieldName,\n          newValue,\n          oldValue,\n        } as FormFieldChanged)\n      }\n    },\n    [actions, emitter]\n  )\n\n  const setUserAndDefaultValuesWithEmittedEvents = useCallback(\n    (formValues: Partial<DefaultValues>) => {\n      const formValuesKeys = Object.keys(formValues) as FormFieldNames[]\n\n      const changedValues = formValuesKeys.reduce(\n        (accum, fieldName) => {\n          const oldValue = actions.getFieldValues(fieldName)[0]\n          const newValue = formValues[fieldName]\n\n          if (newValue !== oldValue) {\n            accum.push({ fieldName, newValue, oldValue })\n          }\n\n          return accum\n        },\n        [] as {\n          fieldName: FormFieldNames\n          newValue: GenericFormValue\n          oldValue: GenericFormValue\n        }[]\n      )\n\n      actions.setUserAndDefaultValues(formValues)\n\n      changedValues.forEach(({ fieldName, newValue, oldValue }) => {\n        emitter.emit(WidgetEvent.FormFieldChanged, {\n          fieldName,\n          newValue,\n          oldValue,\n        } as FormFieldChanged)\n      })\n    },\n    [actions, emitter]\n  )\n\n  return {\n    getFieldValues: actions.getFieldValues,\n    isTouched: actions.isTouched,\n    isDirty: actions.isDirty,\n    resetField: actions.resetField,\n    setAsTouched: actions.setAsTouched,\n    setDefaultValues: actions.setDefaultValues,\n    setFieldValue: setFieldValueWithEmittedEvents,\n    setUserAndDefaultValues: setUserAndDefaultValuesWithEmittedEvents,\n  }\n}\n"],"mappings":";;;;;AAaA,MAAa,wBAAqC;CAChD,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,cAA2B,WAAW;EACpD,gBAAgB,MAAM;EACtB,WAAW,MAAM;EACjB,SAAS,MAAM;EACf,YAAY,MAAM;EAClB,cAAc,MAAM;EACpB,kBAAkB,MAAM;EACxB,eAAe,MAAM;EACrB,yBAAyB,MAAM;EAChC,EAAE;CAEH,MAAM,iCAAiC,aAEnC,WACA,UACA,YACG;EACH,MAAM,WAAW,QAAQ,eAAe,UAAU,CAAC;AAEnD,UAAQ,cAAc,WAAW,UAAU,QAAQ;AAEnD,MAAI,aAAa,SACf,SAAQ,KAAA,oBAAmC;GACzC;GACA;GACA;GACD,CAAqB;IAG1B,CAAC,SAAS,QAAQ,CACnB;CAED,MAAM,2CAA2C,aAC9C,eAAuC;EAGtC,MAAM,gBAFiB,OAAO,KAAK,WAAW,CAET,QAClC,OAAO,cAAc;GACpB,MAAM,WAAW,QAAQ,eAAe,UAAU,CAAC;GACnD,MAAM,WAAW,WAAW;AAE5B,OAAI,aAAa,SACf,OAAM,KAAK;IAAE;IAAW;IAAU;IAAU,CAAC;AAG/C,UAAO;KAET,EAAE,CAKH;AAED,UAAQ,wBAAwB,WAAW;AAE3C,gBAAc,SAAS,EAAE,WAAW,UAAU,eAAe;AAC3D,WAAQ,KAAA,oBAAmC;IACzC;IACA;IACA;IACD,CAAqB;IACtB;IAEJ,CAAC,SAAS,QAAQ,CACnB;AAED,QAAO;EACL,gBAAgB,QAAQ;EACxB,WAAW,QAAQ;EACnB,SAAS,QAAQ;EACjB,YAAY,QAAQ;EACpB,cAAc,QAAQ;EACtB,kBAAkB,QAAQ;EAC1B,eAAe;EACf,yBAAyB;EAC1B"}

package/dist/esm/stores/form/useFormRef.js

@@ -1,5 +1,5 @@
 import { widgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useBookmarkActions } from "../bookmarks/useBookmarkActions.js";
 import { formDefaultValues } from "./createFormStore.js";
 import { useImperativeHandle } from "react";
@@ -22,7 +22,7 @@ const useFormRef = (formStore, formRef) => {
 			const fieldValueOptions = options?.setUrlSearchParam ? { isTouched: options?.setUrlSearchParam } : void 0;
 			const oldValue = formStore.getState().getFieldValues(fieldName)[0];
 			formStore.getState().setFieldValue(fieldName, sanitizedValue, fieldValueOptions);
-			if (sanitizedValue !== oldValue) widgetEvents.emit(WidgetEvent.FormFieldChanged, {
+			if (sanitizedValue !== oldValue) widgetEvents.emit("formFieldChanged", {
 				fieldName,
 				newValue: sanitizedValue,
 				oldValue

package/dist/esm/stores/form/useFormRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type {\n  FormFieldNames,\n  FormStoreStore,\n  GenericFormValue,\n} from './types.js'\n\nexport const useFormRef = (\n  formStore: FormStoreStore,\n  formRef?: FormRef\n): void => {\n  const { setSelectedBookmark } = useBookmarkActions()\n\n  useImperativeHandle(formRef, () => {\n    const sanitizeValue: {\n      [key: string]: (value: any) => GenericFormValue\n    } = {\n      fromAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.fromAmount,\n      toAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.toAmount,\n      toAddress: (value) => {\n        const isToAddressObj = typeof value !== 'string'\n\n        const address =\n          (isToAddressObj ? value?.address : value) ||\n          formDefaultValues.toAddress\n\n        // we can assume that the toAddress has been passed as ToAddress object\n        // and display it accordingly - this ensures that if a name is included\n        // that it is displayed in the Send To Wallet form field correctly\n        if (isToAddressObj) {\n          setSelectedBookmark(value)\n        }\n\n        return address\n      },\n    }\n\n    return {\n      setFieldValue: (fieldName, value, options) => {\n        const sanitizedValue = (\n          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value\n        ) as GenericFormValue\n\n        const fieldValueOptions = options?.setUrlSearchParam\n          ? { isTouched: options?.setUrlSearchParam }\n          : undefined\n\n        const oldValue = formStore\n          .getState()\n          .getFieldValues(fieldName as FormFieldNames)[0]\n\n        formStore\n          .getState()\n          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)\n\n        if (sanitizedValue !== oldValue) {\n          widgetEvents.emit(WidgetEvent.FormFieldChanged, {\n            fieldName,\n            newValue: sanitizedValue,\n            oldValue,\n          } as FormFieldChanged)\n        }\n      },\n    }\n  }, [formStore, setSelectedBookmark])\n}\n"],"mappings":";;;;;;AAaA,MAAa,cACX,WACA,YACS;CACT,MAAM,EAAE,wBAAwB,oBAAoB;AAEpD,qBAAoB,eAAe;EACjC,MAAM,gBAEF;GACF,aAAa,WACV,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,WAAW,WACR,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,YAAY,UAAU;IACpB,MAAM,iBAAiB,OAAO,UAAU;IAExC,MAAM,WACH,iBAAiB,OAAO,UAAU,UACnC,kBAAkB;AAKpB,QAAI,eACF,qBAAoB,MAAM;AAG5B,WAAO;;GAEV;AAED,SAAO,EACL,gBAAgB,WAAW,OAAO,YAAY;GAC5C,MAAM,iBACJ,cAAc,aAAa,cAAc,WAAW,MAAM,GAAG;GAG/D,MAAM,oBAAoB,SAAS,oBAC/B,EAAE,WAAW,SAAS,mBAAmB,GACzC,KAAA;GAEJ,MAAM,WAAW,UACd,UAAU,CACV,eAAe,UAA4B,CAAC;AAE/C,aACG,UAAU,CACV,cAAc,WAAW,gBAAgB,kBAAkB;AAE9D,OAAI,mBAAmB,SACrB,cAAa,KAAK,YAAY,kBAAkB;IAC9C;IACA,UAAU;IACV;IACD,CAAqB;KAG3B;IACA,CAAC,WAAW,oBAAoB,CAAC"}
+{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type {\n  FormFieldNames,\n  FormStoreStore,\n  GenericFormValue,\n} from './types.js'\n\nexport const useFormRef = (\n  formStore: FormStoreStore,\n  formRef?: FormRef\n): void => {\n  const { setSelectedBookmark } = useBookmarkActions()\n\n  useImperativeHandle(formRef, () => {\n    const sanitizeValue: {\n      [key: string]: (value: any) => GenericFormValue\n    } = {\n      fromAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.fromAmount,\n      toAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.toAmount,\n      toAddress: (value) => {\n        const isToAddressObj = typeof value !== 'string'\n\n        const address =\n          (isToAddressObj ? value?.address : value) ||\n          formDefaultValues.toAddress\n\n        // we can assume that the toAddress has been passed as ToAddress object\n        // and display it accordingly - this ensures that if a name is included\n        // that it is displayed in the Send To Wallet form field correctly\n        if (isToAddressObj) {\n          setSelectedBookmark(value)\n        }\n\n        return address\n      },\n    }\n\n    return {\n      setFieldValue: (fieldName, value, options) => {\n        const sanitizedValue = (\n          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value\n        ) as GenericFormValue\n\n        const fieldValueOptions = options?.setUrlSearchParam\n          ? { isTouched: options?.setUrlSearchParam }\n          : undefined\n\n        const oldValue = formStore\n          .getState()\n          .getFieldValues(fieldName as FormFieldNames)[0]\n\n        formStore\n          .getState()\n          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)\n\n        if (sanitizedValue !== oldValue) {\n          widgetEvents.emit(WidgetEvent.FormFieldChanged, {\n            fieldName,\n            newValue: sanitizedValue,\n            oldValue,\n          } as FormFieldChanged)\n        }\n      },\n    }\n  }, [formStore, setSelectedBookmark])\n}\n"],"mappings":";;;;;;AAaA,MAAa,cACX,WACA,YACS;CACT,MAAM,EAAE,wBAAwB,oBAAoB;AAEpD,qBAAoB,eAAe;EACjC,MAAM,gBAEF;GACF,aAAa,WACV,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,WAAW,WACR,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,YAAY,UAAU;IACpB,MAAM,iBAAiB,OAAO,UAAU;IAExC,MAAM,WACH,iBAAiB,OAAO,UAAU,UACnC,kBAAkB;AAKpB,QAAI,eACF,qBAAoB,MAAM;AAG5B,WAAO;;GAEV;AAED,SAAO,EACL,gBAAgB,WAAW,OAAO,YAAY;GAC5C,MAAM,iBACJ,cAAc,aAAa,cAAc,WAAW,MAAM,GAAG;GAG/D,MAAM,oBAAoB,SAAS,oBAC/B,EAAE,WAAW,SAAS,mBAAmB,GACzC,KAAA;GAEJ,MAAM,WAAW,UACd,UAAU,CACV,eAAe,UAA4B,CAAC;AAE/C,aACG,UAAU,CACV,cAAc,WAAW,gBAAgB,kBAAkB;AAE9D,OAAI,mBAAmB,SACrB,cAAa,KAAA,oBAAmC;IAC9C;IACA,UAAU;IACV;IACD,CAAqB;KAG3B;IACA,CAAC,WAAW,oBAAoB,CAAC"}