@lifi/widget 4.0.0-beta.9 → 4.1.0

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js

@@ -1,41 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Wallet from '@mui/icons-material/Wallet';
-import { Button, Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { sendToWalletStore, useSendToWalletStore, } from '../../stores/settings/useSendToWalletStore.js';
-import { WidgetEvent } from '../../types/events.js';
-import { DisabledUI, HiddenUI } from '../../types/widget.js';
-export const SendToWalletExpandButton = () => {
-    const { t } = useTranslation();
-    const { disabledUI, hiddenUI } = useWidgetConfig();
-    const { setFieldValue } = useFieldActions();
-    const { setSelectedBookmark } = useBookmarkActions();
-    const emitter = useWidgetEvents();
-    const { showSendToWallet, setSendToWallet } = useSendToWalletStore((state) => state);
-    const [toAddressFieldValue] = useFieldValues('toAddress');
-    const { requiredToAddress } = useToAddressRequirements();
-    if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-        return null;
-    }
-    const handleClick = () => {
-        if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-            setFieldValue('toAddress', '', { isTouched: true });
-            setSelectedBookmark();
-        }
-        setSendToWallet(!showSendToWallet);
-        emitter.emit(WidgetEvent.SendToWalletToggled, sendToWalletStore.getState().showSendToWallet);
-    };
-    const buttonVariant = showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text';
-    return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", children: _jsx(Button, { variant: buttonVariant, onClick: handleClick, sx: {
-                minWidth: 48,
-                width: 48,
-                height: 48,
-            }, children: _jsx(Wallet, {}) }) }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import Tooltip from "@mui/material/Tooltip";
+//#region src/components/SendToWallet/SendToWalletExpandButton.tsx
+const SendToWalletExpandButton = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig();
+	const hiddenToAddress = hiddenUI?.toAddress;
+	const disabledToAddress = disabledUI?.toAddress;
+	const { requiredToAddress } = useToAddressRequirements();
+	const [toAddressValue] = useFieldValues("toAddress");
+	const visible = !hiddenToAddress && !disabledToAddress && !toAddressValue && !requiredToAddress;
+	const handleClick = () => navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
+	return /* @__PURE__ */ jsx(Collapse, {
+		orientation: "horizontal",
+		in: visible,
+		timeout: 225,
+		mountOnEnter: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: t("main.sendToWallet"),
+			placement: "bottom-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: handleClick,
+				sx: {
+					ml: 1.5,
+					minWidth: 48,
+					width: 48,
+					height: 48
+				},
+				children: /* @__PURE__ */ jsx(Wallet, {})
+			})
+		})
+	});
 };
+//#endregion
+export { SendToWalletExpandButton };
+
 //# sourceMappingURL=SendToWalletExpandButton.js.map

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletExpandButton.js","sourceRoot":"","sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAA;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EACL,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,+CAA+C,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE5D,MAAM,CAAC,MAAM,wBAAwB,GAAa,GAAG,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAA;IAClD,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,EAAE,CAAA;IACpD,MAAM,OAAO,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,oBAAoB,CAChE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CACjB,CAAA;IACD,MAAM,CAAC,mBAAmB,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,EAAE,CAAA;IAExD,IAAI,iBAAiB,IAAI,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAChE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,gBAAgB,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YACpE,aAAa,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YACnD,mBAAmB,EAAE,CAAA;QACvB,CAAC;QACD,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAA;QAClC,OAAO,CAAC,IAAI,CACV,WAAW,CAAC,mBAAmB,EAC/B,iBAAiB,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAC9C,CAAA;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GACjB,gBAAgB,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAA;IAEzE,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAE,SAAS,EAAC,YAAY,YAC5D,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;gBACF,QAAQ,EAAE,EAAE;gBACZ,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;aACX,YAED,KAAC,MAAM,KAAG,GACH,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.toAddress\n  const disabledToAddress = disabledUI?.toAddress\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;cAEA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}

package/dist/esm/components/SettingsListItemButton.js

@@ -1,6 +1,8 @@
-import { styled } from '@mui/material';
-import { ListItemButton as ListItemButtonBase } from './ListItemButton.js';
-export const SettingsListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
-    paddingRight: theme.spacing(1),
-}));
+import { ListItemButton as ListItemButton$1 } from "./ListItemButton.js";
+import { styled } from "@mui/material";
+//#region src/components/SettingsListItemButton.tsx
+const SettingsListItemButton = styled(ListItemButton$1)(({ theme }) => ({ paddingRight: theme.spacing(1) }));
+//#endregion
+export { SettingsListItemButton };
+
 //# sourceMappingURL=SettingsListItemButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsListItemButton.js","sourceRoot":"","sources":["../../../src/components/SettingsListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAE1E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAC9D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/B,CAAC,CACH,CAAA"}
+{"version":3,"file":"SettingsListItemButton.js","names":["ListItemButtonBase"],"sources":["../../../src/components/SettingsListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from './ListItemButton.js'\n\nexport const SettingsListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingRight: theme.spacing(1),\n}))\n"],"mappings":";;;AAIA,MAAa,yBAET,OAAOA,gBAAkB,CAAC,EAAE,EAAE,aAAa,EAC7C,cAAc,MAAM,QAAQ,CAAC,EAC/B,EAAE"}

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts

@@ -1,2 +1,10 @@
-import type { WidgetConfigPartialProps } from '../../types/widget.js';
-export declare const WidgetSkeleton: ({ config }: WidgetConfigPartialProps) => import("react/jsx-runtime").JSX.Element;
+import { WidgetConfigPartialProps } from "../../types/widget.js";
+import { JSX } from "react";
+
+//#region src/components/Skeleton/WidgetSkeleton.d.ts
+declare const WidgetSkeleton: ({
+  config
+}: WidgetConfigPartialProps) => JSX.Element;
+//#endregion
+export { WidgetSkeleton };
+//# sourceMappingURL=WidgetSkeleton.d.ts.map

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSkeleton.d.ts","names":[],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"mappings":";;;;cAkEa,cAAA;EACX;AAAA,GACC,wBAAA,KAA2B,GAAA,CAAI,OAAA"}

package/dist/esm/components/Skeleton/WidgetSkeleton.js

@@ -1,28 +1,124 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
-import { useMemo } from 'react';
-import { createTheme } from '../../themes/createTheme.js';
-import { AppExpandedContainer, FlexContainer, RelativeContainer, } from '../AppContainer.js';
-import { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer, } from './WidgetSkeleton.style.js';
-const SkeletonIcon = () => _jsx(Skeleton, { width: 24, height: 24, variant: "rounded" });
-const SkeletonWalletMenuButton = () => (_jsxs(SkeletonWalletMenuButtonContainer, { children: [_jsx(Skeleton, { width: 98, height: 24, variant: "text" }), _jsx(SkeletonIcon, {})] }));
-const SkeletonSelectCard = ({ titleWidth = 36, placeholderWidth = 195, }) => (_jsxs(SkeletonCard, { elevation: 0, children: [_jsx(Skeleton, { width: titleWidth, height: 22, variant: "text" }), _jsxs(SkeletonCardRow, { children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: placeholderWidth, height: 27, variant: "text" })] })] }));
-const SkeletonYouPayCard = () => (_jsxs(SkeletonInputCard, { elevation: 0, children: [_jsx(Skeleton, { width: 55, height: 22, variant: "text" }), _jsxs(SkeletonCardRow, { children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsxs(SkeletonAmountContainer, { children: [_jsx(Skeleton, { width: 48, height: 37, variant: "text", sx: { marginTop: -0.75 } }), _jsx(Skeleton, { width: 48, height: 12, variant: "text" })] })] })] }));
-export const WidgetSkeleton = ({ config }) => {
-    const appearance = config?.appearance;
-    const hiddenUI = config?.hiddenUI || [];
-    const requiredUI = config?.requiredUI || [];
-    const configTheme = config?.theme;
-    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    const appearanceMode = !appearance || appearance === 'system'
-        ? prefersDarkMode
-            ? 'dark'
-            : 'light'
-        : appearance;
-    const theme = useMemo(() => createTheme(configTheme), [configTheme]);
-    return (_jsx(ThemeProvider, { theme: theme, defaultMode: appearanceMode, modeStorageKey: "li.fi-widget-mode", colorSchemeStorageKey: "li.fi-widget-color-scheme", disableTransitionOnChange: true, children: _jsx(AppExpandedContainer, { children: _jsxs(RelativeContainer, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(SkeletonHeaderContainer, { children: [!hiddenUI.includes('walletMenu') ? (_jsx(SkeletonHeaderAppBar, { children: _jsx(SkeletonWalletMenuButton, {}) })) : null, _jsxs(SkeletonHeaderAppBar, { sx: { justifyContent: 'space-between', height: 52 }, children: [_jsx(Skeleton, { width: 124, height: 36, variant: "text" }), _jsx(SkeletonIcon, {})] })] }), _jsxs(FlexContainer, { sx: {
-                            gap: 2,
-                            paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
-                        }, children: [_jsx(SkeletonSelectCard, {}), _jsx(SkeletonSelectCard, {}), _jsx(SkeletonYouPayCard, {}), requiredUI.includes('toAddress') ? (_jsx(SkeletonSelectCard, { titleWidth: 104, placeholderWidth: 175 })) : null, _jsxs(SkeletonReviewButtonContainer, { children: [_jsx(SkeletonReviewButton, { variant: "contained", fullWidth: true, children: "\u00A0" }), !requiredUI.includes('toAddress') ? (_jsx(SkeletonSendToWalletButton, { variant: "text", fullWidth: true, children: "\u00A0" })) : null] })] }), !hiddenUI.includes('poweredBy') ? (_jsx(SkeletonPoweredByContainer, { children: _jsx(Skeleton, { width: 96, height: 18, variant: "text" }) })) : null] }) }) }));
+import { AppExpandedContainer, FlexContainer, RelativeContainer } from "../AppContainer.js";
+import { createTheme as createTheme$1 } from "../../themes/createTheme.js";
+import { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer } from "./WidgetSkeleton.style.js";
+import { useMemo } from "react";
+import { Skeleton, ThemeProvider, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Skeleton/WidgetSkeleton.tsx
+const SkeletonIcon = () => /* @__PURE__ */ jsx(Skeleton, {
+	width: 24,
+	height: 24,
+	variant: "rounded"
+});
+const SkeletonWalletMenuButton = () => /* @__PURE__ */ jsxs(SkeletonWalletMenuButtonContainer, { children: [/* @__PURE__ */ jsx(Skeleton, {
+	width: 98,
+	height: 24,
+	variant: "text"
+}), /* @__PURE__ */ jsx(SkeletonIcon, {})] });
+const SkeletonSelectCard = ({ titleWidth = 36, placeholderWidth = 195 }) => /* @__PURE__ */ jsxs(SkeletonCard, {
+	elevation: 0,
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: titleWidth,
+		height: 22,
+		variant: "text"
+	}), /* @__PURE__ */ jsxs(SkeletonCardRow, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 40,
+		height: 40,
+		variant: "circular"
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		width: placeholderWidth,
+		height: 27,
+		variant: "text"
+	})] })]
+});
+const SkeletonYouPayCard = () => /* @__PURE__ */ jsxs(SkeletonInputCard, {
+	elevation: 0,
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 55,
+		height: 22,
+		variant: "text"
+	}), /* @__PURE__ */ jsxs(SkeletonCardRow, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 40,
+		height: 40,
+		variant: "circular"
+	}), /* @__PURE__ */ jsxs(SkeletonAmountContainer, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 48,
+		height: 37,
+		variant: "text",
+		sx: { marginTop: -.75 }
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		width: 48,
+		height: 12,
+		variant: "text"
+	})] })] })]
+});
+const WidgetSkeleton = ({ config }) => {
+	const appearance = config?.appearance;
+	const hiddenUI = config?.hiddenUI;
+	const requiredUI = config?.requiredUI;
+	const configTheme = config?.theme;
+	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+	const appearanceMode = !appearance || appearance === "system" ? prefersDarkMode ? "dark" : "light" : appearance;
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: useMemo(() => createTheme$1(configTheme), [configTheme]),
+		defaultMode: appearanceMode,
+		modeStorageKey: "li.fi-widget-mode",
+		colorSchemeStorageKey: "li.fi-widget-color-scheme",
+		disableTransitionOnChange: true,
+		children: /* @__PURE__ */ jsx(AppExpandedContainer, {
+			"data-testid": "widget-skeleton-container",
+			children: /* @__PURE__ */ jsxs(RelativeContainer, {
+				sx: {
+					display: "flex",
+					flexDirection: "column"
+				},
+				children: [
+					/* @__PURE__ */ jsxs(SkeletonHeaderContainer, { children: [!hiddenUI?.walletMenu ? /* @__PURE__ */ jsx(SkeletonHeaderAppBar, { children: /* @__PURE__ */ jsx(SkeletonWalletMenuButton, {}) }) : null, /* @__PURE__ */ jsxs(SkeletonHeaderAppBar, {
+						sx: {
+							justifyContent: "space-between",
+							height: 52
+						},
+						children: [/* @__PURE__ */ jsx(Skeleton, {
+							width: 124,
+							height: 36,
+							variant: "text"
+						}), /* @__PURE__ */ jsx(SkeletonIcon, {})]
+					})] }),
+					/* @__PURE__ */ jsxs(FlexContainer, {
+						sx: {
+							gap: 2,
+							paddingBottom: hiddenUI?.poweredBy ? 3 : 2
+						},
+						children: [
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonYouPayCard, {}),
+							requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSelectCard, {
+								titleWidth: 104,
+								placeholderWidth: 175
+							}) : null,
+							/* @__PURE__ */ jsxs(SkeletonReviewButtonContainer, { children: [/* @__PURE__ */ jsx(SkeletonReviewButton, {
+								variant: "contained",
+								fullWidth: true,
+								children: "\xA0"
+							}), !requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSendToWalletButton, {
+								variant: "text",
+								fullWidth: true,
+								children: "\xA0"
+							}) : null] })
+						]
+					}),
+					!hiddenUI?.poweredBy ? /* @__PURE__ */ jsx(SkeletonPoweredByContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
+						width: 96,
+						height: 18,
+						variant: "text"
+					}) }) : null
+				]
+			})
+		})
+	});
 };
+//#endregion
+export { WidgetSkeleton };
+
 //# sourceMappingURL=WidgetSkeleton.js.map

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Skeleton/WidgetSkeleton.style.js

@@ -1,73 +1,73 @@
-import { Box, Button, Card as MuiCard, styled } from '@mui/material';
-import { InputCard } from '../../components/Card/InputCard.js';
-export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    color: theme.vars?.palette?.text.primary,
-    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
+import { InputCard } from "../Card/InputCard.js";
+import { Box, Button, Card, styled } from "@mui/material";
+//#region src/components/Skeleton/WidgetSkeleton.style.tsx
+const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "row",
+	justifyContent: "flex-end",
+	alignItems: "center",
+	color: theme.vars?.palette?.text.primary,
+	paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1)
 }));
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(1, 0, 1, 1.5),
-    gap: theme.spacing(1),
+const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(1, 0, 1, 1.5),
+	gap: theme.spacing(1)
 }));
-export const SkeletonCardRow = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(2),
-    alignItems: 'center',
-    marginTop: theme.spacing(1.5),
+const SkeletonCardRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(2),
+	alignItems: "center",
+	marginTop: theme.spacing(1.5)
 }));
-export const SkeletonAmountContainer = styled(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: 40,
-    overflowY: 'hidden',
+const SkeletonAmountContainer = styled(Box)({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	height: 40,
+	overflowY: "hidden"
 });
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-    padding: theme.spacing(1.5, 2, 2),
+const SkeletonCard = styled(Card)(({ theme }) => ({ padding: theme.spacing(1.5, 2, 2) }));
+const SkeletonInputCard = styled(InputCard)(({ theme }) => ({ padding: theme.spacing(1.5, 2, 2) }));
+const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(1.5),
+	alignItems: "center"
 }));
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
-    padding: theme.spacing(1.5, 2, 2),
-}));
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    alignItems: 'center',
-}));
-export const SkeletonReviewButton = styled(Button)({
-    height: 48,
-    pointerEvents: 'none',
+const SkeletonReviewButton = styled(Button)({
+	height: 48,
+	pointerEvents: "none"
 });
-export const SkeletonSendToWalletButton = styled(Button)({
-    height: 48,
-    minWidth: 48,
-    width: 48,
-    pointerEvents: 'none',
+const SkeletonSendToWalletButton = styled(Button)({
+	height: 48,
+	minWidth: 48,
+	width: 48,
+	pointerEvents: "none"
 });
-export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'flex-end',
-    paddingBottom: theme.spacing(2),
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
+const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexGrow: 1,
+	justifyContent: "flex-end",
+	alignItems: "flex-end",
+	paddingBottom: theme.spacing(2),
+	paddingLeft: theme.spacing(3),
+	paddingRight: theme.spacing(3)
 }));
-export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: theme.vars.palette.background.default,
-        position: 'relative',
-        top: 0,
-        zIndex: 1200,
-        gap: theme.spacing(0.5),
-        padding: theme.spacing(1.5, 3, 1.5, 3),
-        overflow: 'auto',
-    };
+const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		flexDirection: "column",
+		backgroundColor: theme.vars.palette.background.default,
+		position: "relative",
+		top: 0,
+		zIndex: 1200,
+		gap: theme.spacing(.5),
+		padding: theme.spacing(1.5, 3, 1.5, 3),
+		overflow: "auto"
+	};
 });
+//#endregion
+export { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer };
+
 //# sourceMappingURL=WidgetSkeleton.style.js.map

package/dist/esm/components/Skeleton/WidgetSkeleton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.style.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"WidgetSkeleton.style.js","names":["MuiCard"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"sourcesContent":["import { Box, Button, Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\n\nexport const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    color: theme.vars?.palette?.text.primary,\n    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),\n  }))\n\nexport const SkeletonWalletMenuButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(1, 0, 1, 1.5),\n  gap: theme.spacing(1),\n}))\n\nexport const SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'center',\n    marginTop: theme.spacing(1.5),\n  }))\n\nexport const SkeletonAmountContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  height: 40,\n  overflowY: 'hidden',\n})\n\nexport const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =\n  styled(MuiCard)(({ theme }) => ({\n    padding: theme.spacing(1.5, 2, 2),\n  }))\n\nexport const SkeletonInputCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)(({ theme }) => ({\n  padding: theme.spacing(1.5, 2, 2),\n}))\n\nexport const SkeletonReviewButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}))\n\nexport const SkeletonReviewButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  pointerEvents: 'none',\n})\nexport const SkeletonSendToWalletButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  minWidth: 48,\n  width: 48,\n  pointerEvents: 'none',\n})\n\nexport const SkeletonPoweredByContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n  alignItems: 'flex-end',\n  paddingBottom: theme.spacing(2),\n  paddingLeft: theme.spacing(3),\n  paddingRight: theme.spacing(3),\n}))\n\nexport const SkeletonHeaderContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 1.5, 3),\n    overflow: 'auto',\n  }\n})\n"],"mappings":";;;AAIA,MAAa,uBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY;CACZ,OAAO,MAAM,MAAM,SAAS,KAAK;CACjC,cAAc,MAAM,YAAY,OAAO,IAAI,MAAM,UAAU,CAAC;AAC9D,EAAE;AAEJ,MAAa,oCAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG;CACnC,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY;CACZ,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,CAAC,CAAC;CACd,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,QAAQ;CACR,WAAW;AACb,CAAC;AAED,MAAa,eACX,OAAOA,IAAO,CAAC,EAAE,EAAE,aAAa,EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEJ,MAAa,oBAET,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEF,MAAa,gCAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAG;CACtB,YAAY;AACd,EAAE;AAEF,MAAa,uBAET,OAAO,MAAM,CAAC,CAAC;CACjB,QAAQ;CACR,eAAe;AACjB,CAAC;AACD,MAAa,6BAET,OAAO,MAAM,CAAC,CAAC;CACjB,QAAQ;CACR,UAAU;CACV,OAAO;CACP,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,eAAe,MAAM,QAAQ,CAAC;CAC9B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,CAAC,EAAE,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,UAAU;CACZ;AACF,CAAC"}