@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/Messages/MinFromAmountUSDMessage.js

@@ -0,0 +1,27 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Messages/MinFromAmountUSDMessage.tsx
+const MinFromAmountUSDMessage = ({ minFromAmountUSD, ...props }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		severity: "warning",
+		icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: { color: "text.primary" },
+			children: t("warning.message.minFromAmountUSD", {
+				amount: minFromAmountUSD,
+				minimumFractionDigits: 0
+			})
+		}),
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { MinFromAmountUSDMessage };
+
+//# sourceMappingURL=MinFromAmountUSDMessage.js.map

package/dist/esm/components/Messages/MinFromAmountUSDMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinFromAmountUSDMessage.js","names":[],"sources":["../../../../src/components/Messages/MinFromAmountUSDMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\ntype MinFromAmountUSDMessageProps = BoxProps & {\n  minFromAmountUSD: number\n}\n\nexport const MinFromAmountUSDMessage: React.FC<\n  MinFromAmountUSDMessageProps\n> = ({ minFromAmountUSD, ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.minFromAmountUSD', {\n            amount: minFromAmountUSD,\n            minimumFractionDigits: 0,\n          })}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AASA,MAAa,2BAER,EAAE,kBAAkB,GAAG,YAAY;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,oCAAoC;IACrC,QAAQ;IACR,uBAAuB;GACzB,CAAC;EACS,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/components/Messages/MissingRouteRequiredAccountMessage.js

@@ -0,0 +1,31 @@
+import { shortenAddress } from "../../utils/wallet.js";
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+//#region src/components/Messages/MissingRouteRequiredAccountMessage.tsx
+const MissingRouteRequiredAccountMessage = ({ chain, address, ...props }) => {
+	const { t } = useTranslation();
+	if (!chain) return null;
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				px: 1,
+				color: "text.primary"
+			},
+			children: t("info.message.missingRouteRequiredAccount", {
+				chainName: chain.name,
+				address: address ? `(${shortenAddress(address)})` : ""
+			})
+		}),
+		icon: /* @__PURE__ */ jsx(Wallet, {}),
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { MissingRouteRequiredAccountMessage };
+
+//# sourceMappingURL=MissingRouteRequiredAccountMessage.js.map

package/dist/esm/components/Messages/MissingRouteRequiredAccountMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MissingRouteRequiredAccountMessage.js","names":[],"sources":["../../../../src/components/Messages/MissingRouteRequiredAccountMessage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport Wallet from '@mui/icons-material/Wallet'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface MissingRouteRequiredAccountMessageProps extends BoxProps {\n  chain?: ExtendedChain\n  address?: string\n}\n\nexport const MissingRouteRequiredAccountMessage: React.FC<\n  MissingRouteRequiredAccountMessageProps\n> = ({ chain, address, ...props }) => {\n  const { t } = useTranslation()\n\n  if (!chain) {\n    return null\n  }\n\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.missingRouteRequiredAccount', {\n            chainName: chain.name,\n            address: address ? `(${shortenAddress(address)})` : '',\n          })}\n        </Typography>\n      }\n      icon={<Wallet />}\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,sCAER,EAAE,OAAO,SAAS,GAAG,YAAY;CACpC,MAAM,EAAE,MAAM,eAAe;CAE7B,IAAI,CAAC,OACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,4CAA4C;IAC7C,WAAW,MAAM;IACjB,SAAS,UAAU,IAAI,eAAe,OAAO,EAAE,KAAK;GACtD,CAAC;EACS,CAAA;EAEd,MAAM,oBAAC,QAAD,CAAS,CAAA;EACf,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/components/Messages/WarningMessages.js

@@ -0,0 +1,45 @@
+import { AccountDeployedMessage } from "./AccountDeployedMessage.js";
+import { AccountNotDeployedMessage } from "./AccountNotDeployedMessage.js";
+import { FundsSufficiencyMessage } from "./FundsSufficiencyMessage.js";
+import { GasSufficiencyMessage } from "./GasSufficiencyMessage.js";
+import { MinFromAmountUSDMessage } from "./MinFromAmountUSDMessage.js";
+import { MissingRouteRequiredAccountMessage } from "./MissingRouteRequiredAccountMessage.js";
+import { useMessageQueue } from "./useMessageQueue.js";
+import { Collapse } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Messages/WarningMessages.tsx
+const WarningMessages = ({ route, allowInteraction, ...props }) => {
+	const { messages, hasMessages } = useMessageQueue(route, allowInteraction);
+	const getMessage = () => {
+		switch (messages[0]?.id) {
+			case "MISSING_ROUTE_REQUIRED_ACCOUNT": return /* @__PURE__ */ jsx(MissingRouteRequiredAccountMessage, {
+				chain: messages[0].props?.chain,
+				address: messages[0].props?.address,
+				...props
+			});
+			case "INSUFFICIENT_FUNDS": return /* @__PURE__ */ jsx(FundsSufficiencyMessage, { ...props });
+			case "INSUFFICIENT_GAS": return /* @__PURE__ */ jsx(GasSufficiencyMessage, {
+				insufficientGas: messages[0].props?.insufficientGas,
+				...props
+			});
+			case "MIN_FROM_AMOUNT_USD": return /* @__PURE__ */ jsx(MinFromAmountUSDMessage, {
+				minFromAmountUSD: messages[0].props?.minFromAmountUSD,
+				...props
+			});
+			case "ACCOUNT_NOT_DEPLOYED": return /* @__PURE__ */ jsx(AccountNotDeployedMessage, { ...props });
+			case "ACCOUNT_DEPLOYED": return /* @__PURE__ */ jsx(AccountDeployedMessage, { ...props });
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ jsx(Collapse, {
+		in: hasMessages,
+		timeout: 225,
+		unmountOnExit: true,
+		mountOnEnter: true,
+		children: getMessage()
+	});
+};
+//#endregion
+export { WarningMessages };
+
+//# sourceMappingURL=WarningMessages.js.map

package/dist/esm/components/Messages/WarningMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n  route?: Route\n  allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n  route,\n  allowInteraction,\n  ...props\n}) => {\n  const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n  const getMessage = () => {\n    switch (messages[0]?.id) {\n      case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n        return (\n          <MissingRouteRequiredAccountMessage\n            chain={messages[0].props?.chain}\n            address={messages[0].props?.address}\n            {...props}\n          />\n        )\n      case 'INSUFFICIENT_FUNDS':\n        return <FundsSufficiencyMessage {...props} />\n      case 'INSUFFICIENT_GAS':\n        return (\n          <GasSufficiencyMessage\n            insufficientGas={messages[0].props?.insufficientGas}\n            {...props}\n          />\n        )\n      case 'MIN_FROM_AMOUNT_USD':\n        return (\n          <MinFromAmountUSDMessage\n            minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n            {...props}\n          />\n        )\n      case 'ACCOUNT_NOT_DEPLOYED':\n        return <AccountNotDeployedMessage {...props} />\n      case 'ACCOUNT_DEPLOYED':\n        return <AccountDeployedMessage {...props} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n      {getMessage()}\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,IAAI,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,GAAG,OAAO;IAC1B,SAAS,SAAS,GAAG,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,GAAG,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,GAAG,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;YACpD,WAAW;CACJ,CAAA;AAEd"}

package/dist/esm/components/Messages/useMessageQueue.js

@@ -0,0 +1,68 @@
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { useFromAmountThreshold } from "../../hooks/useFromAmountThreshold.js";
+import { useFromTokenSufficiency } from "../../hooks/useFromTokenSufficiency.js";
+import { useGasSufficiency } from "../../hooks/useGasSufficiency.js";
+import { useRouteRequiredAccountConnection } from "../../hooks/useRouteRequiredAccountConnection.js";
+import { useMemo } from "react";
+//#region src/components/Messages/useMessageQueue.ts
+const useMessageQueue = (route, allowInteraction) => {
+	const { requiredToAddress, accountNotDeployedAtDestination, accountDeployedAtDestination, isLoading: isToAddressRequirementsLoading } = useToAddressRequirements(route);
+	const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } = useFromTokenSufficiency(route);
+	const { insufficientGas, isLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
+	const { missingChain, missingAccountAddress } = useRouteRequiredAccountConnection(route);
+	const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold();
+	const messageQueue = useMemo(() => {
+		const queue = [];
+		if (missingChain) queue.push({
+			id: "MISSING_ROUTE_REQUIRED_ACCOUNT",
+			priority: 1,
+			props: {
+				chain: missingChain,
+				address: missingAccountAddress
+			}
+		});
+		if (insufficientFromToken) queue.push({
+			id: "INSUFFICIENT_FUNDS",
+			priority: 2
+		});
+		if (belowMinFromAmountUSD) queue.push({
+			id: "MIN_FROM_AMOUNT_USD",
+			priority: 3,
+			props: { minFromAmountUSD }
+		});
+		if (insufficientGas?.length) queue.push({
+			id: "INSUFFICIENT_GAS",
+			priority: 4,
+			props: { insufficientGas }
+		});
+		if (accountNotDeployedAtDestination && !allowInteraction) queue.push({
+			id: "ACCOUNT_NOT_DEPLOYED",
+			priority: 5
+		});
+		if (requiredToAddress && accountDeployedAtDestination && !allowInteraction) queue.push({
+			id: "ACCOUNT_DEPLOYED",
+			priority: 6
+		});
+		return queue.sort((a, b) => a.priority - b.priority);
+	}, [
+		allowInteraction,
+		insufficientFromToken,
+		insufficientGas,
+		accountDeployedAtDestination,
+		accountNotDeployedAtDestination,
+		requiredToAddress,
+		missingChain,
+		missingAccountAddress,
+		belowMinFromAmountUSD,
+		minFromAmountUSD
+	]);
+	return {
+		messages: messageQueue,
+		hasMessages: messageQueue.length > 0,
+		isLoading: isGasSufficiencyLoading || isFromTokenSufficiencyLoading || isToAddressRequirementsLoading
+	};
+};
+//#endregion
+export { useMessageQueue };
+
+//# sourceMappingURL=useMessageQueue.js.map

package/dist/esm/components/Messages/useMessageQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageQueue.js","names":[],"sources":["../../../../src/components/Messages/useMessageQueue.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'\nimport { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'\nimport { useGasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\n\nexport interface QueuedMessage {\n  id: string\n  priority: number\n  props?: Record<string, any>\n}\n\nexport const useMessageQueue = (\n  route?: Route,\n  allowInteraction?: boolean\n): {\n  messages: QueuedMessage[]\n  hasMessages: boolean\n  isLoading: boolean\n} => {\n  const {\n    requiredToAddress,\n    accountNotDeployedAtDestination,\n    accountDeployedAtDestination,\n    isLoading: isToAddressRequirementsLoading,\n  } = useToAddressRequirements(route)\n  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =\n    useFromTokenSufficiency(route)\n  const { insufficientGas, isLoading: isGasSufficiencyLoading } =\n    useGasSufficiency(route)\n  const { missingChain, missingAccountAddress } =\n    useRouteRequiredAccountConnection(route)\n  const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()\n\n  const messageQueue = useMemo(() => {\n    const queue: QueuedMessage[] = []\n\n    if (missingChain) {\n      queue.push({\n        id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',\n        priority: 1,\n        props: { chain: missingChain, address: missingAccountAddress },\n      })\n    }\n\n    if (insufficientFromToken) {\n      queue.push({\n        id: 'INSUFFICIENT_FUNDS',\n        priority: 2,\n      })\n    }\n\n    if (belowMinFromAmountUSD) {\n      queue.push({\n        id: 'MIN_FROM_AMOUNT_USD',\n        priority: 3,\n        props: { minFromAmountUSD },\n      })\n    }\n\n    if (insufficientGas?.length) {\n      queue.push({\n        id: 'INSUFFICIENT_GAS',\n        priority: 4,\n        props: { insufficientGas },\n      })\n    }\n\n    if (accountNotDeployedAtDestination && !allowInteraction) {\n      queue.push({\n        id: 'ACCOUNT_NOT_DEPLOYED',\n        priority: 5,\n      })\n    }\n\n    if (\n      requiredToAddress &&\n      accountDeployedAtDestination &&\n      !allowInteraction\n    ) {\n      queue.push({\n        id: 'ACCOUNT_DEPLOYED',\n        priority: 6,\n      })\n    }\n\n    return queue.sort((a, b) => a.priority - b.priority)\n  }, [\n    allowInteraction,\n    insufficientFromToken,\n    insufficientGas,\n    accountDeployedAtDestination,\n    accountNotDeployedAtDestination,\n    requiredToAddress,\n    missingChain,\n    missingAccountAddress,\n    belowMinFromAmountUSD,\n    minFromAmountUSD,\n  ])\n\n  return {\n    messages: messageQueue,\n    hasMessages: messageQueue.length > 0,\n    isLoading:\n      isGasSufficiencyLoading ||\n      isFromTokenSufficiencyLoading ||\n      isToAddressRequirementsLoading,\n  }\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBACX,OACA,qBAKG;CACH,MAAM,EACJ,mBACA,iCACA,8BACA,WAAW,mCACT,yBAAyB,KAAK;CAClC,MAAM,EAAE,uBAAuB,WAAW,kCACxC,wBAAwB,KAAK;CAC/B,MAAM,EAAE,iBAAiB,WAAW,4BAClC,kBAAkB,KAAK;CACzB,MAAM,EAAE,cAAc,0BACpB,kCAAkC,KAAK;CACzC,MAAM,EAAE,uBAAuB,qBAAqB,uBAAuB;CAE3E,MAAM,eAAe,cAAc;EACjC,MAAM,QAAyB,CAAC;EAEhC,IAAI,cACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO;IAAE,OAAO;IAAc,SAAS;GAAsB;EAC/D,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,iBAAiB;EAC5B,CAAC;EAGH,IAAI,iBAAiB,QACnB,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,gBAAgB;EAC3B,CAAC;EAGH,IAAI,mCAAmC,CAAC,kBACtC,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IACE,qBACA,gCACA,CAAC,kBAED,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,OAAO,MAAM,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;CACrD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO;EACL,UAAU;EACV,aAAa,aAAa,SAAS;EACnC,WACE,2BACA,iCACA;CACJ;AACF"}

package/dist/esm/components/NotFound.js

@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Block from "@mui/icons-material/Block";
+//#region src/components/NotFound.tsx
+const NotFound = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			flexDirection: "column",
+			flex: 1,
+			padding: 3
+		},
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				sx: { fontSize: 48 },
+				children: /* @__PURE__ */ jsx(Block, { fontSize: "inherit" })
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 18,
+					fontWeight: 700
+				},
+				children: t("tooltip.notFound.title")
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 14,
+					color: "text.secondary",
+					textAlign: "center",
+					mt: 2
+				},
+				children: t("tooltip.notFound.text")
+			})
+		]
+	});
+};
+//#endregion
+export { NotFound };
+
+//# sourceMappingURL=NotFound.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.js","names":[],"sources":["../../../src/components/NotFound.tsx"],"sourcesContent":["import Block from '@mui/icons-material/Block'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const NotFound: React.FC = () => {\n  const { t } = useTranslation()\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexDirection: 'column',\n        flex: 1,\n        padding: 3,\n      }}\n    >\n      <Typography\n        sx={{\n          fontSize: 48,\n        }}\n      >\n        <Block fontSize=\"inherit\" />\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 18,\n          fontWeight: 700,\n        }}\n      >\n        {t('tooltip.notFound.title')}\n      </Typography>\n      <Typography\n        sx={{\n          fontSize: 14,\n          color: 'text.secondary',\n          textAlign: 'center',\n          mt: 2,\n        }}\n      >\n        {t('tooltip.notFound.text')}\n      </Typography>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAIA,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,MAAM;GACN,SAAS;EACX;YARF;GAUE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;cAEA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;cAEC,EAAE,wBAAwB;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;cAEC,EAAE,uBAAuB;GAChB,CAAA;EACT;;AAET"}

package/dist/esm/components/PageContainer.js

@@ -0,0 +1,20 @@
+import { Container, styled } from "@mui/material";
+//#region src/components/PageContainer.ts
+const PageContainer = styled(Container, { shouldForwardProp: (prop) => ![
+	"halfGutters",
+	"topGutters",
+	"bottomGutters"
+].includes(prop) })(({ theme, halfGutters, topGutters, bottomGutters }) => ({
+	display: "flex",
+	flexDirection: "column",
+	flex: 1,
+	padding: theme.spacing(topGutters ? 1.5 : 0, halfGutters ? 1.5 : 3, bottomGutters ? 3 : 0, halfGutters ? 1.5 : 3),
+	variants: [{
+		props: ({ disableGutters }) => disableGutters,
+		style: { padding: 0 }
+	}]
+}));
+//#endregion
+export { PageContainer };
+
+//# sourceMappingURL=PageContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.js","names":[],"sources":["../../../src/components/PageContainer.ts"],"sourcesContent":["import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface PageContainerProps extends ContainerProps {\n  halfGutters?: boolean\n  topGutters?: boolean\n  bottomGutters?: boolean\n}\n\nexport const PageContainer: React.FC<\n  React.ComponentProps<typeof Container> & PageContainerProps\n> = styled(Container, {\n  shouldForwardProp: (prop) =>\n    !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),\n})<PageContainerProps>(({ theme, halfGutters, topGutters, bottomGutters }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  padding: theme.spacing(\n    topGutters ? 1.5 : 0,\n    halfGutters ? 1.5 : 3,\n    bottomGutters ? 3 : 0,\n    halfGutters ? 1.5 : 3\n  ),\n  variants: [\n    {\n      props: ({ disableGutters }) => disableGutters,\n      style: {\n        padding: 0,\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAUA,MAAa,gBAET,OAAO,WAAW,EACpB,oBAAoB,SAClB,CAAC;CAAC;CAAe;CAAc;AAAe,EAAE,SAAS,IAAc,EAC3E,CAAC,GAAuB,EAAE,OAAO,aAAa,YAAY,qBAAqB;CAC7E,SAAS;CACT,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QACb,aAAa,MAAM,GACnB,cAAc,MAAM,GACpB,gBAAgB,IAAI,GACpB,cAAc,MAAM,CACtB;CACA,UAAU,CACR;EACE,QAAQ,EAAE,qBAAqB;EAC/B,OAAO,EACL,SAAS,EACX;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/PageEntered.js

@@ -0,0 +1,17 @@
+import { useWidgetEvents } from "../hooks/useWidgetEvents.js";
+import "../types/events.js";
+import { useEffect } from "react";
+import { useLocation } from "@tanstack/react-router";
+//#region src/components/PageEntered.ts
+function PageEntered() {
+	const location = useLocation();
+	const emitter = useWidgetEvents();
+	useEffect(() => {
+		emitter.emit("pageEntered", location.pathname);
+	}, [emitter, location.pathname]);
+	return null;
+}
+//#endregion
+export { PageEntered };
+
+//# sourceMappingURL=PageEntered.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageEntered.js","names":[],"sources":["../../../src/components/PageEntered.ts"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport { useEffect } from 'react'\nimport { useWidgetEvents } from '../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../types/events.js'\n\nexport function PageEntered() {\n  const location = useLocation()\n  const emitter = useWidgetEvents()\n\n  useEffect(() => {\n    emitter.emit(WidgetEvent.PageEntered, location.pathname)\n  }, [emitter, location.pathname])\n  return null\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc;CAC5B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAEhC,gBAAgB;EACd,QAAQ,KAAA,eAA8B,SAAS,QAAQ;CACzD,GAAG,CAAC,SAAS,SAAS,QAAQ,CAAC;CAC/B,OAAO;AACT"}

package/dist/esm/components/PoweredBy/PoweredBy.js

@@ -0,0 +1,59 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { version } from "../../config/version.js";
+import { Link as Link$1 } from "./PoweredBy.style.js";
+import { Box, Tooltip, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PoweredBy/PoweredBy.tsx
+const poweredByConfig = {
+	default: {
+		url: "https://li.fi",
+		text: "LI.FI"
+	},
+	jumper: {
+		url: "https://jumper.exchange",
+		text: "Jumper"
+	}
+};
+const PoweredBy = () => {
+	const { poweredBy = "default" } = useWidgetConfig();
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			pt: 1,
+			pb: 2,
+			flex: 1,
+			display: "flex",
+			alignItems: "flex-end",
+			justifyContent: "flex-end"
+		},
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: `v${version}`,
+			enterDelay: 1e3,
+			children: /* @__PURE__ */ jsxs(Link$1, {
+				href: poweredByConfig[poweredBy].url,
+				target: "_blank",
+				underline: "none",
+				color: "text.primary",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.secondary",
+						fontSize: 12,
+						fontWeight: 500,
+						px: .5
+					},
+					children: "Powered by"
+				}), /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.primary",
+						fontSize: 12,
+						fontWeight: 600
+					},
+					children: poweredByConfig[poweredBy].text
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { PoweredBy };
+
+//# sourceMappingURL=PoweredBy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PoweredBy.js","names":["Link"],"sources":["../../../../src/components/PoweredBy/PoweredBy.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { version } from '../../config/version.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Link } from './PoweredBy.style.js'\n\nconst poweredByConfig = {\n  default: {\n    url: 'https://li.fi',\n    text: 'LI.FI',\n  },\n  jumper: {\n    url: 'https://jumper.exchange',\n    text: 'Jumper',\n  },\n}\n\nexport const PoweredBy: React.FC = () => {\n  const { poweredBy = 'default' } = useWidgetConfig()\n\n  return (\n    <Box\n      sx={{\n        pt: 1,\n        pb: 2,\n        flex: 1,\n        display: 'flex',\n        alignItems: 'flex-end',\n        justifyContent: 'flex-end',\n      }}\n    >\n      <Tooltip title={`v${version}`} enterDelay={1000}>\n        <Link\n          href={poweredByConfig[poweredBy].url}\n          target=\"_blank\"\n          underline=\"none\"\n          color=\"text.primary\"\n        >\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontSize: 12,\n              fontWeight: 500,\n              px: 0.5,\n            }}\n          >\n            Powered by\n          </Typography>\n          <Typography\n            sx={{\n              color: 'text.primary',\n              fontSize: 12,\n              fontWeight: 600,\n            }}\n          >\n            {poweredByConfig[poweredBy].text}\n          </Typography>\n        </Link>\n      </Tooltip>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB;CACtB,SAAS;EACP,KAAK;EACL,MAAM;CACR;CACA,QAAQ;EACN,KAAK;EACL,MAAM;CACR;AACF;AAEA,MAAa,kBAA4B;CACvC,MAAM,EAAE,YAAY,cAAc,gBAAgB;CAElD,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;YAEA,oBAAC,SAAD;GAAS,OAAO,IAAI;GAAW,YAAY;aACzC,qBAACA,QAAD;IACE,MAAM,gBAAgB,WAAW;IACjC,QAAO;IACP,WAAU;IACV,OAAM;cAJR,CAME,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;MACZ,IAAI;KACN;eACD;IAEW,CAAA,GACZ,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;KACd;eAEC,gBAAgB,WAAW;IAClB,CAAA,CACR;;EACC,CAAA;CACN,CAAA;AAET"}

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

@@ -0,0 +1,12 @@
+import { Link, styled } from "@mui/material";
+//#region src/components/PoweredBy/PoweredBy.style.ts
+const Link$1 = styled(Link)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	border: "none",
+	":hover": { color: theme.vars.palette.primary.main }
+}));
+//#endregion
+export { Link$1 as Link };
+
+//# sourceMappingURL=PoweredBy.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PoweredBy.style.js","names":["Link","MuiLink"],"sources":["../../../../src/components/PoweredBy/PoweredBy.style.ts"],"sourcesContent":["import { Link as MuiLink, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Link: React.FC<React.ComponentProps<typeof MuiLink>> = styled(\n  MuiLink\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  border: 'none',\n  ':hover': {\n    color: theme.vars.palette.primary.main,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,SAAuD,OAClEC,IACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,UAAU,EACR,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC;AACF,EAAE"}

package/dist/esm/components/ProgressToNextUpdate.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { Box, CircularProgress, IconButton, Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "react-i18next";
+//#region src/components/ProgressToNextUpdate.tsx
+const getProgressValue = (updatedAt, timeToUpdate) => updatedAt ? Math.min(100, (Date.now() - updatedAt) / timeToUpdate * 100) : 0;
+const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1e3), 0);
+const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+	const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
+	useEffect(() => {
+		setValue(getProgressValue(updatedAt, timeToUpdate));
+		const id = setInterval(() => {
+			const time = getProgressValue(updatedAt, timeToUpdate);
+			setValue(time);
+			if (time >= 100) clearInterval(id);
+		}, 1e3);
+		return () => clearInterval(id);
+	}, [timeToUpdate, updatedAt]);
+	useEffect(() => {
+		if (isLoading) setValue(0);
+	}, [isLoading]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		onClick,
+		disabled: isLoading,
+		...other,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: /* @__PURE__ */ jsx(Trans, {
+				i18nKey: "tooltip.progressToNextUpdate",
+				values: { value: getSecondsToUpdate(updatedAt, timeToUpdate) },
+				components: [/* @__PURE__ */ jsx("br", {})]
+			}),
+			children: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "grid",
+					position: "relative",
+					placeItems: "center",
+					width: 24,
+					height: 24
+				},
+				children: [/* @__PURE__ */ jsx(CircularProgress, {
+					variant: "determinate",
+					size: 24,
+					value: 100,
+					sx: (theme) => ({
+						position: "absolute",
+						color: theme.vars.palette.grey[300],
+						...theme.applyStyles("dark", { color: theme.vars.palette.grey[800] })
+					})
+				}), /* @__PURE__ */ jsx(CircularProgress, {
+					variant: isLoading ? "indeterminate" : "determinate",
+					size: 24,
+					value,
+					sx: (theme) => ({
+						opacity: value === 100 && !isLoading ? .5 : 1,
+						color: theme.vars.palette.primary.main,
+						...theme.applyStyles("dark", { color: theme.vars.palette.primary.light })
+					})
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { ProgressToNextUpdate };
+
+//# sourceMappingURL=ProgressToNextUpdate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressToNextUpdate.js","names":[],"sources":["../../../src/components/ProgressToNextUpdate.tsx"],"sourcesContent":["import type { IconButtonProps } from '@mui/material'\nimport { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport { Trans } from 'react-i18next'\n\nconst getProgressValue = (updatedAt: number, timeToUpdate: number) =>\n  updatedAt ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100) : 0\n\nconst getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>\n  Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0)\n\nexport const ProgressToNextUpdate: React.FC<\n  {\n    updatedAt: number\n    timeToUpdate: number\n    isLoading?: boolean\n  } & IconButtonProps\n> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {\n  const [value, setValue] = useState(() =>\n    getProgressValue(updatedAt, timeToUpdate)\n  )\n\n  useEffect(() => {\n    setValue(getProgressValue(updatedAt, timeToUpdate))\n    const id = setInterval(() => {\n      const time = getProgressValue(updatedAt, timeToUpdate)\n      setValue(time)\n      if (time >= 100) {\n        clearInterval(id)\n      }\n    }, 1000)\n    return () => clearInterval(id)\n  }, [timeToUpdate, updatedAt])\n\n  useEffect(() => {\n    if (isLoading) {\n      setValue(0)\n    }\n  }, [isLoading])\n\n  return (\n    <IconButton onClick={onClick} disabled={isLoading} {...other}>\n      <Tooltip\n        title={\n          <Trans\n            i18nKey=\"tooltip.progressToNextUpdate\"\n            values={{\n              value: getSecondsToUpdate(updatedAt, timeToUpdate),\n            }}\n            // biome-ignore lint/correctness/useJsxKeyInIterable: allowed in react-i18next\n            components={[<br />]}\n          />\n        }\n      >\n        <Box\n          sx={{\n            display: 'grid',\n            position: 'relative',\n            placeItems: 'center',\n            width: 24,\n            height: 24,\n          }}\n        >\n          <CircularProgress\n            variant=\"determinate\"\n            size={24}\n            value={100}\n            sx={(theme) => ({\n              position: 'absolute',\n              color: theme.vars.palette.grey[300],\n              ...theme.applyStyles('dark', {\n                color: theme.vars.palette.grey[800],\n              }),\n            })}\n          />\n          <CircularProgress\n            variant={isLoading ? 'indeterminate' : 'determinate'}\n            size={24}\n            value={value}\n            sx={(theme) => ({\n              opacity: value === 100 && !isLoading ? 0.5 : 1,\n              color: theme.vars.palette.primary.main,\n              ...theme.applyStyles('dark', {\n                color: theme.vars.palette.primary.light,\n              }),\n            })}\n          />\n        </Box>\n      </Tooltip>\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAKA,MAAM,oBAAoB,WAAmB,iBAC3C,YAAY,KAAK,IAAI,MAAO,KAAK,IAAI,IAAI,aAAa,eAAgB,GAAG,IAAI;AAE/E,MAAM,sBAAsB,WAAmB,iBAC7C,KAAK,IAAI,KAAK,OAAO,gBAAgB,KAAK,IAAI,IAAI,cAAc,GAAI,GAAG,CAAC;AAE1E,MAAa,wBAMR,EAAE,WAAW,cAAc,WAAW,SAAS,GAAG,YAAY;CACjE,MAAM,CAAC,OAAO,YAAY,eACxB,iBAAiB,WAAW,YAAY,CAC1C;CAEA,gBAAgB;EACd,SAAS,iBAAiB,WAAW,YAAY,CAAC;EAClD,MAAM,KAAK,kBAAkB;GAC3B,MAAM,OAAO,iBAAiB,WAAW,YAAY;GACrD,SAAS,IAAI;GACb,IAAI,QAAQ,KACV,cAAc,EAAE;EAEpB,GAAG,GAAI;EACP,aAAa,cAAc,EAAE;CAC/B,GAAG,CAAC,cAAc,SAAS,CAAC;CAE5B,gBAAgB;EACd,IAAI,WACF,SAAS,CAAC;CAEd,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,YAAD;EAAqB;EAAS,UAAU;EAAW,GAAI;YACrD,oBAAC,SAAD;GACE,OACE,oBAAC,OAAD;IACE,SAAQ;IACR,QAAQ,EACN,OAAO,mBAAmB,WAAW,YAAY,EACnD;IAEA,YAAY,CAAC,oBAAC,MAAD,CAAK,CAAA,CAAC;GACpB,CAAA;aAGH,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,UAAU;KACV,YAAY;KACZ,OAAO;KACP,QAAQ;IACV;cAPF,CASE,oBAAC,kBAAD;KACE,SAAQ;KACR,MAAM;KACN,OAAO;KACP,KAAK,WAAW;MACd,UAAU;MACV,OAAO,MAAM,KAAK,QAAQ,KAAK;MAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;KACH;IACD,CAAA,GACD,oBAAC,kBAAD;KACE,SAAS,YAAY,kBAAkB;KACvC,MAAM;KACC;KACP,KAAK,WAAW;MACd,SAAS,UAAU,OAAO,CAAC,YAAY,KAAM;MAC7C,OAAO,MAAM,KAAK,QAAQ,QAAQ;MAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;KACH;IACD,CAAA,CACE;;EACE,CAAA;CACC,CAAA;AAEhB"}

package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.js

@@ -0,0 +1,40 @@
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useToAddressReset } from "../../hooks/useToAddressReset.js";
+import { useToAddressAutoPopulate } from "../../hooks/useToAddressAutoPopulate.js";
+import { IconCard, ReverseContainer } from "./ReverseTokensButton.style.js";
+import { jsx } from "react/jsx-runtime";
+import ArrowForward from "@mui/icons-material/ArrowForward";
+//#region src/components/ReverseTokensButton/ReverseTokensButton.tsx
+const ReverseTokensButton = () => {
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const { getChainById } = useAvailableChains();
+	const { tryResetToAddress } = useToAddressReset();
+	const autoPopulateToAddress = useToAddressAutoPopulate();
+	const handleClick = () => {
+		const [fromChainId, fromToken, toChainId, toToken, toAddress] = getFieldValues("fromChain", "fromToken", "toChain", "toToken", "toAddress");
+		setFieldValue("fromAmount", "", { isTouched: true });
+		setFieldValue("fromChain", toChainId, { isTouched: true });
+		setFieldValue("fromToken", toToken, { isTouched: true });
+		setFieldValue("toChain", fromChainId, { isTouched: true });
+		setFieldValue("toToken", fromToken, { isTouched: true });
+		if (autoPopulateToAddress({
+			formType: "from",
+			selectedToAddress: toAddress,
+			selectedChainId: toChainId,
+			selectedOppositeChainId: fromChainId,
+			selectedOppositeTokenAddress: fromToken
+		})) return;
+		const toChain = getChainById(fromChainId);
+		if (toChain) tryResetToAddress(toChain);
+	};
+	return /* @__PURE__ */ jsx(ReverseContainer, { children: /* @__PURE__ */ jsx(IconCard, {
+		"data-testid": "widget-reverse-tokens-button",
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsx(ArrowForward, { fontSize: "inherit" })
+	}) });
+};
+//#endregion
+export { ReverseTokensButton };
+
+//# sourceMappingURL=ReverseTokensButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = () => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress'\n      )\n    setFieldValue('fromAmount', '', { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    // Returning early as a compatible connected wallet was found, and toAddress has been populated\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    // Auto-population applies in certain scenarios, but otherwise,\n    // we attempt to reset `toAddress` when bridging across ecosystems\n    // fromChainId becomes toChainId after using reverse\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n  return (\n    <ReverseContainer>\n      <IconCard\n        data-testid=\"widget-reverse-tokens-button\"\n        onClick={handleClick}\n      >\n        <ArrowForward fontSize=\"inherit\" />\n      </IconCard>\n    </ReverseContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,WACF;EACF,cAAc,cAAc,IAAI,EAAE,WAAW,KAAK,CAAC;EACnD,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAWvD,IAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAGyB,GACvB;EAMF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CACA,OACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EACE,eAAY;EACZ,SAAS;YAET,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;CAC1B,CAAA,EACM,CAAA;AAEtB"}

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

@@ -0,0 +1,33 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { Box, styled } from "@mui/material";
+//#region src/components/ReverseTokensButton/ReverseTokensButton.style.tsx
+const IconCard = styled(Card$1)(({ theme }) => ({
+	height: 32,
+	width: 32,
+	fontSize: 16,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	zIndex: 1110
+}));
+const ReverseContainer = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		margin: theme.spacing(-1)
+	};
+});
+const ReverseTokensButtonEmpty = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		margin: theme.spacing(1)
+	};
+});
+//#endregion
+export { IconCard, ReverseContainer, ReverseTokensButtonEmpty };
+
+//# sourceMappingURL=ReverseTokensButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReverseTokensButton.style.js","names":["Card"],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const IconCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card\n)(({ theme }) => ({\n  height: 32,\n  width: 32,\n  fontSize: 16,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  zIndex: 1110,\n}))\n\nexport const ReverseContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      margin: theme.spacing(-1),\n    }\n  })\n\nexport const ReverseTokensButtonEmpty: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    margin: theme.spacing(1),\n  }\n})\n"],"mappings":";;;AAIA,MAAa,WAAwD,OACnEA,MACF,GAAG,EAAE,aAAa;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,KAAK,MAAM;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,mBACX,OAAO,GAAG,GAAG,EAAE,YAAY;CACzB,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,EAAE;CAC1B;AACF,CAAC;AAEH,MAAa,2BAET,OAAO,GAAG,GAAG,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,CAAC;CACzB;AACF,CAAC"}