@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,38 @@
+import { CardTitle } from "../Card/CardTitle.js";
+import { Box, FormControl, InputBase, inputBaseClasses, styled } from "@mui/material";
+//#region src/components/AmountInput/AmountInput.style.tsx
+const FormContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(2)
+}));
+const FormControl$1 = styled(FormControl)(() => ({ height: 40 }));
+const Input = styled(InputBase)(({ theme }) => ({
+	fontSize: 24,
+	fontWeight: 700,
+	boxShadow: "none",
+	lineHeight: 1.5,
+	[`.${inputBaseClasses.input}`]: {
+		height: 24,
+		padding: theme.spacing(0, 0, 0, 2)
+	},
+	"& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button": {
+		WebkitAppearance: "none",
+		margin: 0
+	},
+	"& input[type=\"number\"]": { MozAppearance: "textfield" },
+	[`&.${inputBaseClasses.disabled}`]: { color: "inherit" },
+	[`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: { WebkitTextFillColor: "unset" }
+}));
+const AmountInputCardTitle = styled(CardTitle)(({ theme }) => ({ padding: theme.spacing(0) }));
+const AmountInputCardHeader = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(2, 2, 0, 2),
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	height: 30
+}));
+//#endregion
+export { AmountInputCardHeader, AmountInputCardTitle, FormContainer, FormControl$1 as FormControl, Input };
+
+//# sourceMappingURL=AmountInput.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.style.js","names":["FormControl","MuiFormControl"],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"sourcesContent":["import {\n  Box,\n  InputBase,\n  inputBaseClasses,\n  FormControl as MuiFormControl,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { CardTitle } from '../Card/CardTitle.js'\n\nexport const maxInputFontSize = 24\nexport const minInputFontSize = 14\n\nexport const FormContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n}))\n\nexport const FormControl: React.FC<\n  React.ComponentProps<typeof MuiFormControl>\n> = styled(MuiFormControl)(() => ({\n  height: 40,\n}))\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  fontSize: 24,\n  fontWeight: 700,\n  boxShadow: 'none',\n  lineHeight: 1.5,\n  [`.${inputBaseClasses.input}`]: {\n    height: 24,\n    padding: theme.spacing(0, 0, 0, 2),\n  },\n  '& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button':\n    {\n      WebkitAppearance: 'none',\n      margin: 0,\n    },\n  '& input[type=\"number\"]': {\n    MozAppearance: 'textfield',\n  },\n  [`&.${inputBaseClasses.disabled}`]: {\n    color: 'inherit',\n  },\n  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {\n    WebkitTextFillColor: 'unset',\n  },\n}))\n\nexport const AmountInputCardTitle: React.FC<\n  React.ComponentProps<typeof CardTitle>\n> = styled(CardTitle)(({ theme }) => ({\n  padding: theme.spacing(0),\n}))\n\nexport const AmountInputCardHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    padding: theme.spacing(2, 2, 0, 2),\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    height: 30,\n  }))\n"],"mappings":";;;AAaA,MAAa,gBAA4D,OACvE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,CAAC;AAC1B,EAAE;AAEF,MAAaA,gBAET,OAAOC,WAAc,SAAS,EAChC,QAAQ,GACV,EAAE;AAEF,MAAa,QAA0D,OACrE,SACF,GAAG,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;EACX,IAAI,iBAAiB,UAAU;EAC9B,QAAQ;EACR,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACnC;CACA,4GACE;EACE,kBAAkB;EAClB,QAAQ;CACV;CACF,4BAA0B,EACxB,eAAe,YACjB;EACC,KAAK,iBAAiB,aAAa,EAClC,OAAO,UACT;EACC,IAAI,iBAAiB,MAAM,GAAG,iBAAiB,aAAa,EAC3D,qBAAqB,QACvB;AACF,EAAE;AAEF,MAAa,uBAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,CAAC,EAC1B,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;AACV,EAAE"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js

@@ -0,0 +1,64 @@
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useGasRecommendation } from "../../hooks/useGasRecommendation.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { AmountInputButton, ButtonContainer } from "./AmountInputEndAdornment.style.js";
+import { formatUnits } from "@lifi/sdk";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/AmountInput/AmountInputEndAdornment.tsx
+const AmountInputEndAdornment = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	const { setFieldValue } = useFieldActions();
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { data } = useGasRecommendation(chainId);
+	const { token } = useTokenAddressBalance(chainId, tokenAddress);
+	const getMaxAmount = () => {
+		if (!token?.amount) return 0n;
+		const chain = getChainById(chainId);
+		let maxAmount = token.amount;
+		if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+			const recommendedAmount = BigInt(data.recommended.amount);
+			if (token.amount > recommendedAmount) maxAmount = token.amount - recommendedAmount;
+		}
+		return maxAmount;
+	};
+	const handlePercentage = (percentage) => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) {
+			const percentageAmount = maxAmount * BigInt(percentage) / 100n;
+			setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(percentageAmount, token.decimals), { isTouched: true });
+		}
+	};
+	const handleMax = () => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), { isTouched: true });
+	};
+	if (formType !== "from" || !token) return null;
+	return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(25),
+			children: "25%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(50),
+			children: "50%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(75),
+			children: "75%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: handleMax,
+			children: t("button.max")
+		})
+	] });
+});
+//#endregion
+export { AmountInputEndAdornment };
+
+//# sourceMappingURL=AmountInputEndAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport {\n  AmountInputButton,\n  ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n  memo(({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const { getChainById } = useAvailableChains()\n    const { setFieldValue } = useFieldActions()\n\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    // We get gas recommendations for the source chain to make sure that after pressing the Max button\n    // the user will have enough funds remaining to cover gas costs\n    const { data } = useGasRecommendation(chainId)\n\n    const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n    const getMaxAmount = () => {\n      if (!token?.amount) {\n        return 0n\n      }\n      const chain = getChainById(chainId)\n      let maxAmount = token.amount\n      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n        const recommendedAmount = BigInt(data.recommended.amount)\n        if (token.amount > recommendedAmount) {\n          maxAmount = token.amount - recommendedAmount\n        }\n      }\n      return maxAmount\n    }\n\n    const handlePercentage = (percentage: number) => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(percentageAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    const handleMax = () => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(maxAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    if (formType !== 'from' || !token) {\n      return null\n    }\n\n    return (\n      <ButtonContainer>\n        <AmountInputButton onClick={() => handlePercentage(25)}>\n          25%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(50)}>\n          50%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(75)}>\n          75%\n        </AmountInputButton>\n        <AmountInputButton onClick={handleMax}>\n          {t('button.max')}\n        </AmountInputButton>\n      </ButtonContainer>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAIA,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAE7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,QACV,OAAO;EAET,MAAM,QAAQ,aAAa,OAAO;EAClC,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAEA,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,kBAAkB,MAAM,QAAQ,GAC5C,EACE,WAAW,KACb,CACF;EACF;CACF;CAEA,MAAM,kBAAkB;EACtB,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,WAAW,MAAM,QAAQ,GACrC,EACE,WAAW,KACb,CACF;CAEJ;CAEA,IAAI,aAAa,UAAU,CAAC,OAC1B,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,SAAS;aACzB,EAAE,YAAY;EACE,CAAA;CACJ,EAAA,CAAA;AAErB,CAAC"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js

@@ -0,0 +1,21 @@
+import { ButtonTertiary } from "../ButtonTertiary.js";
+import { Box, styled } from "@mui/material";
+//#region src/components/AmountInput/AmountInputEndAdornment.style.ts
+const ButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(1),
+	padding: theme.spacing(0, 2, 2, 2)
+}));
+const AmountInputButton = styled(ButtonTertiary)(({ theme }) => ({
+	flex: 1,
+	padding: theme.spacing(.5, 1.5),
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	height: "auto",
+	borderRadius: theme.shape.borderRadiusSecondary
+}));
+//#endregion
+export { AmountInputButton, ButtonContainer };
+
+//# sourceMappingURL=AmountInputEndAdornment.style.js.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputEndAdornment.style.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.style.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\n\nexport const ButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0, 2, 2, 2),\n  }))\n\nexport const AmountInputButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  flex: 1,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  height: 'auto',\n  borderRadius: theme.shape.borderRadiusSecondary,\n}))\n"],"mappings":";;;AAIA,MAAa,kBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AACnC,EAAE;AAEJ,MAAa,oBAET,OAAO,cAAc,GAAG,EAAE,aAAa;CACzC,MAAM;CACN,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,cAAc,MAAM,MAAM;AAC5B,EAAE"}

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js

@@ -0,0 +1,21 @@
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarBadgedDefault } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AmountInput/AmountInputStartAdornment.tsx
+const AmountInputStartAdornment = ({ formType }) => {
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { chain } = useChain(chainId);
+	const { token } = useToken(chainId, tokenAddress);
+	return !!(chain && token) ? /* @__PURE__ */ jsx(TokenAvatar, {
+		token,
+		chain
+	}) : /* @__PURE__ */ jsx(AvatarBadgedDefault, {});
+};
+//#endregion
+export { AmountInputStartAdornment };
+
+//# sourceMappingURL=AmountInputStartAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n  formType,\n}) => {\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n  const isSelected = !!(chain && token)\n\n  return isSelected ? (\n    <TokenAvatar token={token} chain={chain} />\n  ) : (\n    <AvatarBadgedDefault />\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAGhD,OAAO,CAFa,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;CAAQ,CAAA,IAE1C,oBAAC,qBAAD,CAAsB,CAAA;AAE1B"}

package/dist/esm/components/AmountInput/PriceFormHelperText.js

@@ -0,0 +1,98 @@
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useInputModeStore } from "../../stores/inputMode/useInputModeStore.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { InputPriceButton } from "./PriceFormHelperText.style.js";
+import { memo } from "react";
+import { FormHelperText, Skeleton, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+//#region src/components/AmountInput/PriceFormHelperText.tsx
+const PriceFormHelperText = memo(({ formType }) => {
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+	return /* @__PURE__ */ jsx(PriceFormHelperTextBase, {
+		formType,
+		isLoading,
+		tokenAddress,
+		token
+	});
+});
+const PriceFormHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+	const { t } = useTranslation();
+	const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
+	const { inputMode, toggleInputMode } = useInputModeStore();
+	const currentInputMode = inputMode[formType];
+	const tokenAmount = token ? formatTokenAmount(token.amount, token.decimals) : "0";
+	const getPriceAmountDisplayValue = () => {
+		if (currentInputMode === "amount") return t("format.currency", { value: formatTokenPrice(amount, token?.priceUSD, token?.decimals) });
+		else return t("format.tokenAmount", { value: amount || "0" });
+	};
+	const handleToggleMode = (e) => {
+		e.stopPropagation();
+		toggleInputMode(formType);
+	};
+	return /* @__PURE__ */ jsxs(FormHelperText, {
+		component: "div",
+		sx: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			margin: 0,
+			marginLeft: 1.25,
+			marginTop: .5
+		},
+		children: [/* @__PURE__ */ jsxs(InputPriceButton, {
+			onClick: token?.priceUSD ? handleToggleMode : void 0,
+			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.secondary",
+						fontWeight: 500,
+						fontSize: 12,
+						lineHeight: 1,
+						marginRight: .25,
+						maxWidth: 136,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: getPriceAmountDisplayValue()
+				}),
+				currentInputMode === "price" && token?.symbol ? /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.secondary",
+						fontWeight: 500,
+						fontSize: 12,
+						lineHeight: 1,
+						wordBreak: "break-word",
+						overflowWrap: "break-word",
+						marginRight: .25
+					},
+					children: token.symbol
+				}) : null,
+				token?.priceUSD && /* @__PURE__ */ jsx(SwapVertIcon, { sx: { fontSize: 14 } })
+			]
+		}), isLoading && tokenAddress ? /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 56,
+			height: 16
+		}) : token?.amount ? /* @__PURE__ */ jsx(Typography, {
+			sx: {
+				fontWeight: 500,
+				fontSize: 12,
+				color: "text.secondary",
+				lineHeight: 1,
+				paddingLeft: .25
+			},
+			title: tokenAmount,
+			children: `/ ${t("format.tokenAmount", { value: tokenAmount })}`
+		}) : null]
+	});
+};
+//#endregion
+export { PriceFormHelperText };
+
+//# sourceMappingURL=PriceFormHelperText.js.map

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n  memo<FormTypeProps>(({ formType }) => {\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n    return (\n      <PriceFormHelperTextBase\n        formType={formType}\n        isLoading={isLoading}\n        tokenAddress={tokenAddress}\n        token={token}\n      />\n    )\n  })\n\nconst PriceFormHelperTextBase: React.FC<\n  FormTypeProps & {\n    isLoading?: boolean\n    tokenAddress?: string\n    token?: TokenAmount\n  }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n  const { t } = useTranslation()\n  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n  const { inputMode, toggleInputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n\n  const tokenAmount = token\n    ? formatTokenAmount(token.amount, token.decimals)\n    : '0'\n\n  const getPriceAmountDisplayValue = () => {\n    if (currentInputMode === 'amount') {\n      const tokenPrice = formatTokenPrice(\n        amount,\n        token?.priceUSD,\n        token?.decimals\n      )\n      return t('format.currency', { value: tokenPrice })\n    } else {\n      return t('format.tokenAmount', { value: amount || '0' })\n    }\n  }\n\n  const handleToggleMode = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    toggleInputMode(formType)\n  }\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        margin: 0,\n        marginLeft: 1.25,\n        marginTop: 0.5,\n      }}\n    >\n      <InputPriceButton\n        onClick={token?.priceUSD ? handleToggleMode : undefined}\n      >\n        <Typography\n          sx={{\n            color: 'text.secondary',\n            fontWeight: 500,\n            fontSize: 12,\n            lineHeight: 1,\n            marginRight: 0.25,\n            maxWidth: 136,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {getPriceAmountDisplayValue()}\n        </Typography>\n        {currentInputMode === 'price' && token?.symbol ? (\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontWeight: 500,\n              fontSize: 12,\n              lineHeight: 1,\n              wordBreak: 'break-word',\n              overflowWrap: 'break-word',\n              marginRight: 0.25,\n            }}\n          >\n            {token.symbol}\n          </Typography>\n        ) : null}\n        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n      </InputPriceButton>\n      {isLoading && tokenAddress ? (\n        <Skeleton variant=\"text\" width={56} height={16} />\n      ) : token?.amount ? (\n        <Typography\n          sx={{\n            fontWeight: 500,\n            fontSize: 12,\n            color: 'text.secondary',\n            lineHeight: 1,\n            paddingLeft: 0.25,\n          }}\n          title={tokenAmount}\n        >\n          {`/ ${t('format.tokenAmount', {\n            value: tokenAmount,\n          })}`}\n        </Typography>\n      ) : null}\n    </FormHelperText>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CACA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,OACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;CACR,CAAA;AAEL,CAAC;AAEH,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,QAAQ,CAAC;CACpE,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CAEzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,IAC9C;CAEJ,MAAM,mCAAmC;EACvC,IAAI,qBAAqB,UAMvB,OAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,QAEqC,EAAE,CAAC;OAEjD,OAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAE3D;CAEA,MAAM,oBAAoB,MAAwB;EAChD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,OACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;EACb;YATF,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;KACd;eAEC,2BAA2B;IAClB,CAAA;IACX,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;KACf;eAEC,MAAM;IACG,CAAA,IACV;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACzC;MACjB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;EAAK,CAAA,IAC/C,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;GACf;GACA,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,YACT,CAAC;EACS,CAAA,IACV,IACU;;AAEpB"}

package/dist/esm/components/AmountInput/PriceFormHelperText.style.js

@@ -0,0 +1,28 @@
+import { Button, styled } from "@mui/material";
+//#region src/components/AmountInput/PriceFormHelperText.style.tsx
+const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
+	color: theme.vars.palette.text.secondary,
+	padding: theme.spacing(.25, .5, .25, .75),
+	maxHeight: 16,
+	fontSize: "0.75rem",
+	fontWeight: 500,
+	borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+	backgroundColor: "transparent",
+	minWidth: 32,
+	...onClick ? {
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+		...theme.applyStyles("dark", {
+			backgroundColor: "transparent",
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+		})
+	} : {
+		cursor: "text",
+		userSelect: "text",
+		pointerEvents: "none",
+		...theme.applyStyles("dark", { backgroundColor: "transparent" })
+	}
+}));
+//#endregion
+export { InputPriceButton };
+
+//# sourceMappingURL=PriceFormHelperText.style.js.map

package/dist/esm/components/AmountInput/PriceFormHelperText.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme, onClick }) => ({\n    color: theme.vars.palette.text.secondary,\n    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n    maxHeight: 16,\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n    backgroundColor: 'transparent',\n    minWidth: 32,\n    ...(onClick\n      ? {\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n          },\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n            },\n          }),\n        }\n      : {\n          cursor: 'text',\n          userSelect: 'text',\n          pointerEvents: 'none',\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n          }),\n        }),\n  }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,MAAM,GAAG,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,GAAI;CAC5C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACF,CAAC;CACH,IACA;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACH;AACN,EAAE"}

package/dist/esm/components/AppContainer.js

@@ -0,0 +1,93 @@
+import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
+import { useHeaderHeight } from "../stores/header/useHeaderStore.js";
+import { createElementId } from "../utils/elements.js";
+import { getWidgetMaxHeight } from "../utils/widgetSize.js";
+import { Box, Container, ScopedCssBaseline, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AppContainer.tsx
+const AppExpandedContainer = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "start",
+		flex: 1,
+		height: theme.container?.display === "flex" ? "100%" : theme.container?.maxHeight ? "auto" : theme.container?.height || "auto"
+	};
+});
+const RelativeContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "variant" })(({ theme }) => {
+	const maxHeight = theme.container?.height === "fit-content" || !theme.container?.height && !theme.container?.maxHeight ? "none" : getWidgetMaxHeight(theme);
+	return {
+		position: "relative",
+		boxSizing: "content-box",
+		width: "100%",
+		minWidth: theme.breakpoints.values.xs,
+		maxWidth: theme.breakpoints.values.sm,
+		background: theme.vars.palette.background.default,
+		overflow: "auto",
+		flex: 1,
+		...theme.container,
+		maxHeight: theme.container?.display === "flex" && !theme.container?.height ? "100%" : maxHeight,
+		zIndex: 1,
+		variants: [{
+			props: { variant: "drawer" },
+			style: {
+				maxHeight: "none",
+				height: "100%",
+				boxShadow: "none",
+				borderRadius: 0
+			}
+		}]
+	};
+});
+const CssBaselineContainer = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => ![
+	"variant",
+	"paddingTopAdjustment",
+	"elementId"
+].includes(prop) })(({ theme, variant, paddingTopAdjustment }) => {
+	const maxHeight = theme.container?.height === "fit-content" || !theme.container?.height && !theme.container?.maxHeight ? "none" : getWidgetMaxHeight(theme);
+	return {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		overflowX: "clip",
+		margin: 0,
+		width: "100%",
+		maxHeight: variant === "drawer" || theme.container?.display === "flex" ? "none" : maxHeight,
+		overflowY: "auto",
+		height: theme.container?.display === "flex" ? "auto" : "100%",
+		paddingTop: paddingTopAdjustment,
+		"&:has(.long-list)": {
+			minHeight: getWidgetMaxHeight(theme),
+			maxHeight: getWidgetMaxHeight(theme)
+		}
+	};
+});
+const FlexContainer = styled(Container)({
+	display: "flex",
+	flexDirection: "column",
+	flex: 1
+});
+const AppContainer = ({ children }) => {
+	const { variant, elementId, theme } = useWidgetConfig();
+	const { headerHeight } = useHeaderHeight();
+	const positionFixedAdjustment = theme?.header?.position === "fixed" ? headerHeight : 0;
+	return /* @__PURE__ */ jsx(RelativeContainer, {
+		variant,
+		id: createElementId("widget-relative-container", elementId),
+		children: /* @__PURE__ */ jsx(CssBaselineContainer, {
+			id: createElementId("widget-scrollable-container", elementId),
+			variant,
+			enableColorScheme: true,
+			paddingTopAdjustment: positionFixedAdjustment,
+			elementId,
+			children: /* @__PURE__ */ jsx(FlexContainer, {
+				disableGutters: true,
+				children
+			})
+		})
+	});
+};
+//#endregion
+export { AppContainer, AppExpandedContainer, FlexContainer, RelativeContainer };
+
+//# sourceMappingURL=AppContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n//  A Number of other components and hooks work with height values that are often set on or derived from these elements\n//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n//    - useTokenListHeight\n//    - useSetContentHeight\n//  Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'start',\n      flex: 1,\n      height:\n        theme.container?.display === 'flex'\n          ? '100%'\n          : theme.container?.maxHeight\n            ? 'auto'\n            : theme.container?.height || 'auto',\n    }\n  }\n)\n\nexport const RelativeContainer: React.FC<\n  BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    position: 'relative',\n    boxSizing: 'content-box',\n    width: '100%',\n    minWidth: theme.breakpoints.values.xs,\n    maxWidth: theme.breakpoints.values.sm,\n    background: theme.vars.palette.background.default,\n    overflow: 'auto',\n    flex: 1,\n    ...theme.container,\n    maxHeight:\n      theme.container?.display === 'flex' && !theme.container?.height\n        ? '100%'\n        : maxHeight,\n    zIndex: 1, // NB: higher than of expansion containers\n    variants: [\n      {\n        props: {\n          variant: 'drawer',\n        },\n        style: {\n          maxHeight: 'none',\n          height: '100%',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      },\n    ],\n  }\n})\n\ninterface CssBaselineContainerProps {\n  variant?: WidgetVariant\n  paddingTopAdjustment: number\n  elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX: 'clip',\n    margin: 0,\n    width: '100%',\n    maxHeight:\n      variant === 'drawer' || theme.container?.display === 'flex'\n        ? 'none'\n        : maxHeight,\n    overflowY: 'auto',\n    height: theme.container?.display === 'flex' ? 'auto' : '100%',\n    paddingTop: paddingTopAdjustment,\n    '&:has(.long-list)': {\n      minHeight: getWidgetMaxHeight(theme),\n      maxHeight: getWidgetMaxHeight(theme),\n    },\n  }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n  // const ref = useRef<HTMLDivElement>(null);\n  const { variant, elementId, theme } = useWidgetConfig()\n  const { headerHeight } = useHeaderHeight()\n  const positionFixedAdjustment =\n    theme?.header?.position === 'fixed' ? headerHeight : 0\n\n  return (\n    <RelativeContainer\n      variant={variant}\n      id={createElementId(ElementId.RelativeContainer, elementId)}\n    >\n      <CssBaselineContainer\n        id={createElementId(ElementId.ScrollableContainer, elementId)}\n        variant={variant}\n        enableColorScheme\n        paddingTopAdjustment={positionFixedAdjustment}\n        elementId={elementId}\n        // ref={ref}\n      >\n        <FlexContainer disableGutters>{children}</FlexContainer>\n      </CssBaselineContainer>\n      {/* <ScrollToLocation elementRef={ref} /> */}\n    </RelativeContainer>\n  )\n}\n\n// export const ScrollToLocation: React.FC<{\n//   elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n//   const { pathname } = useLocation();\n//   useLayoutEffect(() => {\n//     elementRef.current?.scrollTo(0, 0);\n//   }, [elementRef, pathname]);\n//   return null;\n// };\n"],"mappings":";;;;;;;AAkBA,MAAa,uBAA2C,OAAO,GAAG,GAC/D,EAAE,YAAY;CACb,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;CACrC;AACF,CACF;AAEA,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,GAAgC,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,SACX;GACA,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;GAChB;EACF,CACF;CACF;AACF,CAAC;AAQD,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;AAAW,EAAE,SAAS,IAAc,EAC7E,CAAC,GAA8B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EACZ,qBAAqB;GACnB,WAAW,mBAAmB,KAAK;GACnC,WAAW,mBAAmB,KAAK;EACrC;CACF;AACF,CAAC;AAED,MAAa,gBAA0C,OAAO,SAAS,EAAE;CACvE,SAAS;CACT,eAAe;CACf,MAAM;AACR,CAAC;AAED,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,gBAAgB;CACtD,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;CAEvD,OACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,SAAS;YAE1D,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,SAAS;GACnD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;GAAwB,CAAA;EACnC,CAAA;CAEL,CAAA;AAEvB"}

package/dist/esm/components/Avatar/AccountAvatar.js

@@ -0,0 +1,29 @@
+import { useChain } from "../../hooks/useChain.js";
+import { AvatarDefault, AvatarMasked } from "./Avatar.style.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { Badge } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { getConnectorIcon } from "@lifi/wallet-management";
+import Wallet from "@mui/icons-material/Wallet";
+//#region src/components/Avatar/AccountAvatar.tsx
+const AccountAvatar = ({ chainId, account, empty, toAddress }) => {
+	const { chain } = useChain(chainId);
+	const avatar = empty ? /* @__PURE__ */ jsx(AvatarDefault, {}) : account?.connector || toAddress?.logoURI ? /* @__PURE__ */ jsx(AvatarMasked, {
+		src: toAddress?.logoURI || getConnectorIcon(account?.connector),
+		alt: toAddress?.name || account?.connector?.name,
+		children: (toAddress?.name || account?.connector?.name)?.[0]
+	}) : /* @__PURE__ */ jsx(AvatarDefault, { children: /* @__PURE__ */ jsx(Wallet, { sx: { fontSize: 20 } }) });
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, { chain }),
+		children: avatar
+	});
+};
+//#endregion
+export { AccountAvatar };
+
+//# sourceMappingURL=AccountAvatar.js.map

package/dist/esm/components/Avatar/AccountAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAvatar.js","names":[],"sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"sourcesContent":["import { getConnectorIcon } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Badge } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useChain } from '../../hooks/useChain.js'\nimport type { ToAddress } from '../../types/widget.js'\nimport { AvatarDefault, AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\ninterface AccountAvatarProps {\n  chainId?: number\n  account?: Account\n  toAddress?: ToAddress\n  empty?: boolean\n}\n\nexport const AccountAvatar = ({\n  chainId,\n  account,\n  empty,\n  toAddress,\n}: AccountAvatarProps): JSX.Element => {\n  const { chain } = useChain(chainId)\n\n  const avatar = empty ? (\n    <AvatarDefault />\n  ) : account?.connector || toAddress?.logoURI ? (\n    <AvatarMasked\n      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}\n      alt={toAddress?.name || account?.connector?.name}\n    >\n      {(toAddress?.name || account?.connector?.name)?.[0]}\n    </AvatarMasked>\n  ) : (\n    <AvatarDefault>\n      <Wallet sx={{ fontSize: 20 }} />\n    </AvatarDefault>\n  )\n\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} />}\n    >\n      {avatar}\n    </Badge>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBAAiB,EAC5B,SACA,SACA,OACA,gBACqC;CACrC,MAAM,EAAE,UAAU,SAAS,OAAO;CAElC,MAAM,SAAS,QACb,oBAAC,eAAD,CAAgB,CAAA,IACd,SAAS,aAAa,WAAW,UACnC,oBAAC,cAAD;EACE,KAAK,WAAW,WAAW,iBAAiB,SAAS,SAAS;EAC9D,KAAK,WAAW,QAAQ,SAAS,WAAW;aAE1C,WAAW,QAAQ,SAAS,WAAW,QAAQ;CACrC,CAAA,IAEd,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;CAGjB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;YAE/C;CACI,CAAA;AAEX"}

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,47 @@
+import { AvatarDefault, AvatarSkeletonMaskedContainer } from "./Avatar.style.js";
+import { SmallAvatarSkeleton } from "./SmallAvatar.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { Badge, Skeleton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+const AvatarBadgedDefault = ({ sx, chain }) => {
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, { chain }),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarDefault, {})
+	});
+};
+const AvatarBadgedSkeleton = ({ sx, avatarSize = 40, badgeSize = 16 }) => {
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(SmallAvatarSkeleton, { size: badgeSize }),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarSkeleton, {
+			avatarSize,
+			badgeSize
+		})
+	});
+};
+const AvatarSkeleton = ({ avatarSize, badgeSize }) => {
+	return /* @__PURE__ */ jsx(AvatarSkeletonMaskedContainer, {
+		badgeSize,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			width: avatarSize,
+			height: avatarSize,
+			variant: "circular"
+		})
+	});
+};
+//#endregion
+export { AvatarBadgedDefault, AvatarBadgedSkeleton };
+
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n  sx?: SxProps<Theme>\n  chain?: ExtendedChain\n}> = ({ sx, chain }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} />}\n      sx={sx}\n    >\n      <AvatarDefault />\n    </Badge>\n  )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n  sx?: SxProps<Theme>\n  avatarSize?: number\n  badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n    </Badge>\n  )\n}\n\nconst AvatarSkeleton: React.FC<{\n  avatarSize: number\n  badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n  return (\n    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n      <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n    </AvatarSkeletonMaskedContainer>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAGP,EAAE,IAAI,YAAY;CACtB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;EAC5C;YAEJ,oBAAC,eAAD,CAAgB,CAAA;CACX,CAAA;AAEX;AAEA,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;CAChD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,UAAY,CAAA;EACjD;YAEJ,oBAAC,gBAAD;GAA4B;GAAuB;EAAY,CAAA;CAC1D,CAAA;AAEX;AAEA,MAAM,kBAGA,EAAE,YAAY,gBAAgB;CAClC,OACE,oBAAC,+BAAD;EAA0C;YACxC,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;EAAY,CAAA;CACxC,CAAA;AAEnC"}

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

@@ -0,0 +1,57 @@
+import { getAvatarMask } from "./utils.js";
+import { Avatar, AvatarGroup, Box, avatarClasses, badgeClasses, styled } from "@mui/material";
+//#region src/components/Avatar/Avatar.style.tsx
+const AvatarMasked = styled(Avatar, { shouldForwardProp: (prop) => prop !== "avatarSize" && prop !== "badgeSize" })(({ avatarSize = 40, badgeSize = 16 }) => ({
+	width: avatarSize,
+	height: avatarSize,
+	mask: getAvatarMask(badgeSize)
+}));
+styled(AvatarGroup)(({ theme }) => ({
+	[`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: { boxSizing: "border-box" },
+	[`& .${avatarClasses.root}`]: {
+		border: "none",
+		marginLeft: 0
+	},
+	[`& .${badgeClasses.root}:first-of-type`]: {
+		marginLeft: theme.spacing(-1),
+		border: "none"
+	},
+	[`& .${badgeClasses.root}:last-of-type`]: { border: "none" }
+}));
+const AvatarDefault = styled(Box, { shouldForwardProp: (prop) => prop !== "badgeSize" })(({ theme, badgeSize = 16 }) => {
+	const root = theme.components?.MuiAvatar?.styleOverrides?.root;
+	return {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%",
+		height: root?.height,
+		width: root?.width,
+		color: theme.vars.palette.text.secondary,
+		mask: getAvatarMask(badgeSize),
+		background: theme.vars.palette.grey[300],
+		...theme.applyStyles("dark", { background: theme.vars.palette.grey[800] })
+	};
+});
+const AvatarDefaultBadge = styled(Box, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = 16 }) => {
+	return {
+		borderRadius: "50%",
+		height: size,
+		width: size,
+		background: theme.vars.palette.grey[300],
+		...theme.applyStyles("dark", { background: theme.vars.palette.grey[800] })
+	};
+});
+const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+	background: theme.vars.palette.background.paper,
+	borderRadius: "50%"
+}));
+const AvatarSkeletonMaskedContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "badgeSize" })(({ theme, badgeSize = 16 }) => ({
+	background: theme.vars.palette.background.paper,
+	borderRadius: "50%",
+	mask: getAvatarMask(badgeSize)
+}));
+//#endregion
+export { AvatarDefault, AvatarDefaultBadge, AvatarMasked, AvatarSkeletonContainer, AvatarSkeletonMaskedContainer };
+
+//# sourceMappingURL=Avatar.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.style.js","names":["MuiAvatar"],"sources":["../../../../src/components/Avatar/Avatar.style.tsx"],"sourcesContent":["import type { CSSObject } from '@mui/material'\nimport {\n  AvatarGroup,\n  avatarClasses,\n  Box,\n  badgeClasses,\n  Avatar as MuiAvatar,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from './utils.js'\n\nexport const AvatarMasked: React.FC<\n  React.ComponentProps<typeof MuiAvatar> & {\n    avatarSize?: number\n    badgeSize?: number\n  }\n> = styled(MuiAvatar, {\n  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n  ({ avatarSize = 40, badgeSize = 16 }) => ({\n    width: avatarSize,\n    height: avatarSize,\n    mask: getAvatarMask(badgeSize),\n  })\n)\n\nexport const TokenAvatarGroup: React.FC<\n  React.ComponentProps<typeof AvatarGroup> & { badgeSize?: number }\n> = styled(AvatarGroup)(({ theme }) => ({\n  [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {\n    boxSizing: 'border-box',\n  },\n  [`& .${avatarClasses.root}`]: {\n    border: 'none',\n    marginLeft: 0,\n  },\n  [`& .${badgeClasses.root}:first-of-type`]: {\n    marginLeft: theme.spacing(-1),\n    border: 'none',\n  },\n  [`& .${badgeClasses.root}:last-of-type`]: {\n    border: 'none',\n  },\n}))\n\nexport const AvatarDefault: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'badgeSize',\n})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {\n  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '50%',\n    height: root?.height,\n    width: root?.width,\n    color: theme.vars.palette.text.secondary,\n    mask: getAvatarMask(badgeSize),\n    background: theme.vars.palette.grey[300],\n    ...theme.applyStyles('dark', {\n      background: theme.vars.palette.grey[800],\n    }),\n  }\n})\n\nexport const AvatarDefaultBadge: React.FC<\n  React.ComponentProps<typeof Box> & { size?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<{ size?: number }>(({ theme, size = 16 }) => {\n  return {\n    borderRadius: '50%',\n    height: size,\n    width: size,\n    background: theme.vars.palette.grey[300],\n    ...theme.applyStyles('dark', {\n      background: theme.vars.palette.grey[800],\n    }),\n  }\n})\n\nexport const AvatarSkeletonContainer: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  background: theme.vars.palette.background.paper,\n  borderRadius: '50%',\n}))\n\nexport const AvatarSkeletonMaskedContainer: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'badgeSize',\n})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({\n  background: theme.vars.palette.background.paper,\n  borderRadius: '50%',\n  mask: getAvatarMask(badgeSize),\n}))\n"],"mappings":";;;AAYA,MAAa,eAKT,OAAOA,QAAW,EACpB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,YACjE,CAAC,GACE,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,OAAO;CACP,QAAQ;CACR,MAAM,cAAc,SAAS;AAC/B,EACF;AAII,OAAO,WAAW,GAAG,EAAE,aAAa;EACrC,MAAM,aAAa,MAAM,iBAAiB,cAAc,SAAS,EAChE,WAAW,aACb;EACC,MAAM,cAAc,SAAS;EAC5B,QAAQ;EACR,YAAY;CACd;EACC,MAAM,aAAa,KAAK,kBAAkB;EACzC,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;CACV;EACC,MAAM,aAAa,KAAK,iBAAiB,EACxC,QAAQ,OACV;AACF,EAAE;AAEF,MAAa,gBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACxC,CAAC,GAA2B,EAAE,OAAO,YAAY,SAAS;CACxD,MAAM,OAAO,MAAM,YAAY,WAAW,gBAAgB;CAC1D,OAAO;EACL,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,QAAQ,MAAM;EACd,OAAO,MAAM;EACb,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,MAAM,cAAc,SAAS;EAC7B,YAAY,MAAM,KAAK,QAAQ,KAAK;EACpC,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,MAAM,KAAK,QAAQ,KAAK,KACtC,CAAC;CACH;AACF,CAAC;AAED,MAAa,qBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAsB,EAAE,OAAO,OAAO,SAAS;CAC9C,OAAO;EACL,cAAc;EACd,QAAQ;EACR,OAAO;EACP,YAAY,MAAM,KAAK,QAAQ,KAAK;EACpC,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,MAAM,KAAK,QAAQ,KAAK,KACtC,CAAC;CACH;AACF,CAAC;AAED,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,cAAc;AAChB,EAAE;AAEF,MAAa,gCAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACxC,CAAC,GAA2B,EAAE,OAAO,YAAY,UAAU;CACzD,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,cAAc;CACd,MAAM,cAAc,SAAS;AAC/B,EAAE"}

package/dist/esm/components/Avatar/ChainBadgeContent.js

@@ -0,0 +1,17 @@
+import { AvatarDefaultBadge } from "./Avatar.style.js";
+import { SmallAvatar } from "./SmallAvatar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/ChainBadgeContent.tsx
+const ChainBadgeContent = ({ chain, size = 16 }) => {
+	if (chain?.logoURI) return /* @__PURE__ */ jsx(SmallAvatar, {
+		src: chain.logoURI,
+		alt: chain.name,
+		size,
+		children: chain.name?.[0]
+	});
+	return /* @__PURE__ */ jsx(AvatarDefaultBadge, { size });
+};
+//#endregion
+export { ChainBadgeContent };
+
+//# sourceMappingURL=ChainBadgeContent.js.map

package/dist/esm/components/Avatar/ChainBadgeContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainBadgeContent.js","names":[],"sources":["../../../../src/components/Avatar/ChainBadgeContent.tsx"],"sourcesContent":["import type { Chain, ExtendedChain } from '@lifi/sdk'\nimport { AvatarDefaultBadge } from './Avatar.style.js'\nimport { SmallAvatar } from './SmallAvatar.js'\n\ninterface ChainBadgeContentProps {\n  chain?: Chain | ExtendedChain\n  size?: number\n}\n\nexport const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({\n  chain,\n  size = 16,\n}) => {\n  if (chain?.logoURI) {\n    return (\n      <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>\n        {chain.name?.[0]}\n      </SmallAvatar>\n    )\n  }\n  return <AvatarDefaultBadge size={size} />\n}\n"],"mappings":";;;;AASA,MAAa,qBAAuD,EAClE,OACA,OAAO,SACH;CACJ,IAAI,OAAO,SACT,OACE,oBAAC,aAAD;EAAa,KAAK,MAAM;EAAS,KAAK,MAAM;EAAY;YACrD,MAAM,OAAO;CACH,CAAA;CAGjB,OAAO,oBAAC,oBAAD,EAA0B,KAAO,CAAA;AAC1C"}