@lifi/widget 4.0.0-beta.0 → 4.0.0-beta.10

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

@@ -1,111 +1,91 @@
-import { cardHeaderClasses, CardContent as MuiCardContent, styled, } from '@mui/material';
-import { Card } from '../Card/Card.js';
-import { CardHeader } from '../Card/CardHeader.js';
-export const SelectTokenCardHeader = styled(CardHeader, {
-    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
-})(({ theme, selected, compact }) => ({
-    padding: theme.spacing(2),
-    [`.${cardHeaderClasses.title}`]: {
-        color: theme.vars.palette.text.secondary,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        width: 256,
-        fontSize: compact && !selected ? 16 : 18,
-        fontWeight: 500,
-        [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-            width: 224,
-        },
-        [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-            width: 180,
-            fontSize: 16,
-        },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        width: 256,
-        [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-            width: 224,
-        },
-        [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-            width: 180,
-        },
-    },
-    variants: [
-        {
-            props: ({ selected }) => selected,
-            style: {
-                [`.${cardHeaderClasses.title}`]: {
-                    color: theme.vars.palette.text.primary,
-                    fontWeight: 600,
-                },
-            },
-        },
-        {
-            props: ({ compact }) => compact,
-            style: {
-                [`.${cardHeaderClasses.title}`]: {
-                    width: 96,
-                    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-                        width: 96,
-                    },
-                },
-                [`.${cardHeaderClasses.subheader}`]: {
-                    width: 96,
-                    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-                        width: 96,
-                    },
-                },
-            },
-        },
-    ],
+import { Card as Card$1 } from "../Card/Card.js";
+import { CardHeader as CardHeader$1 } from "../Card/CardHeader.js";
+import { CardContent, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/SelectTokenButton/SelectTokenButton.style.tsx
+const SelectTokenCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected", "compact"].includes(prop) })(({ theme, selected, compact }) => ({
+	padding: theme.spacing(2),
+	[`.${cardHeaderClasses.title}`]: {
+		color: theme.vars.palette.text.secondary,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 256,
+		fontSize: compact && !selected ? 16 : 18,
+		fontWeight: 500,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 },
+		[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+			width: 180,
+			fontSize: 16
+		}
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 256,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 },
+		[theme.breakpoints.down(theme.breakpoints.values.xs)]: { width: 180 }
+	},
+	variants: [{
+		props: ({ selected }) => selected,
+		style: { [`.${cardHeaderClasses.title}`]: {
+			color: theme.vars.palette.text.primary,
+			fontWeight: 600
+		} }
+	}, {
+		props: ({ compact }) => compact,
+		style: {
+			[`.${cardHeaderClasses.title}`]: {
+				width: 96,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 96 }
+			},
+			[`.${cardHeaderClasses.subheader}`]: {
+				width: 96,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 96 }
+			}
+		}
+	}]
 }));
-export const SelectTokenCard = styled(Card)(({ theme }) => {
-    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
-    return {
-        flex: 1,
-        ...(cardVariant !== 'outlined' && {
-            background: 'none',
-            '&:hover': {
-                cursor: 'pointer',
-                background: 'none',
-            },
-        }),
-    };
+const SelectTokenCard = styled(Card$1)(({ theme }) => {
+	return {
+		flex: 1,
+		...theme.components?.MuiCard?.defaultProps?.variant !== "outlined" && {
+			background: "none",
+			"&:hover": {
+				cursor: "pointer",
+				background: "none"
+			}
+		}
+	};
 });
-export const CardContent = styled(MuiCardContent, {
-    shouldForwardProp: (prop) => !['formType', 'compact', 'mask'].includes(prop),
-})(({ theme, formType, compact, mask = true }) => {
-    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
-    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)';
-    const horizontal = compact ? direction : '50%';
-    const vertical = compact ? '50%' : direction;
-    return {
-        padding: 0,
-        transition: theme.transitions.create(['background-color'], {
-            duration: theme.transitions.duration.enteringScreen,
-            easing: theme.transitions.easing.easeOut,
-        }),
-        '&:last-child': {
-            paddingBottom: 0,
-        },
-        ...(cardVariant !== 'outlined' && {
-            backgroundColor: theme.vars.palette.background.paper,
-            mask: mask
-                ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
-                : 'none',
-        }),
-        ...(cardVariant === 'filled' && {
-            '&:hover': {
-                cursor: 'pointer',
-                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
-                ...theme.applyStyles('dark', {
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
-                }),
-            },
-        }),
-    };
+const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => ![
+	"formType",
+	"compact",
+	"mask"
+].includes(prop) })(({ theme, formType, compact, mask = true }) => {
+	const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
+	const direction = formType === "to" ? "-8px" : "calc(100% + 8px)";
+	const horizontal = compact ? direction : "50%";
+	const vertical = compact ? "50%" : direction;
+	return {
+		padding: 0,
+		transition: theme.transitions.create(["background-color"], {
+			duration: theme.transitions.duration.enteringScreen,
+			easing: theme.transitions.easing.easeOut
+		}),
+		"&:last-child": { paddingBottom: 0 },
+		...cardVariant !== "outlined" && {
+			backgroundColor: theme.vars.palette.background.paper,
+			mask: mask ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
+		},
+		...cardVariant === "filled" && { "&:hover": {
+			cursor: "pointer",
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
+			...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)` })
+		} }
+	};
 });
+//#endregion
+export { CardContent$1 as CardContent, SelectTokenCard, SelectTokenCardHeader };
+
 //# sourceMappingURL=SelectTokenButton.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenButton.style.js","sourceRoot":"","sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n    compact?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'compact'].includes(prop as string),\n})<{ selected?: boolean; compact?: boolean }>(\n  ({ theme, selected, compact }) => ({\n    padding: theme.spacing(2),\n    [`.${cardHeaderClasses.title}`]: {\n      color: theme.vars.palette.text.secondary,\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      width: 256,\n      fontSize: compact && !selected ? 16 : 18,\n      fontWeight: 500,\n      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n        width: 224,\n      },\n      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n        width: 180,\n        fontSize: 16,\n      },\n    },\n    [`.${cardHeaderClasses.subheader}`]: {\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      width: 256,\n      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n        width: 224,\n      },\n      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n        width: 180,\n      },\n    },\n    variants: [\n      {\n        props: ({ selected }) => selected,\n        style: {\n          [`.${cardHeaderClasses.title}`]: {\n            color: theme.vars.palette.text.primary,\n            fontWeight: 600,\n          },\n        },\n      },\n      {\n        props: ({ compact }) => compact,\n        style: {\n          [`.${cardHeaderClasses.title}`]: {\n            width: 96,\n            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n              width: 96,\n            },\n          },\n          [`.${cardHeaderClasses.subheader}`]: {\n            width: 96,\n            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n              width: 96,\n            },\n          },\n        },\n      },\n    ],\n  })\n)\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    compact?: boolean\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    compact?: boolean\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) =>\n    !['formType', 'compact', 'mask'].includes(prop as string),\n})<{ formType?: FormType; compact?: boolean; mask?: boolean }>(\n  ({ theme, formType, compact, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = compact ? direction : '50%'\n    const vertical = compact ? '50%' : direction\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAKT,OAAOA,cAAY,EACrB,oBAAoB,SAClB,CAAC,CAAC,YAAY,UAAU,CAAC,SAAS,KAAe,EACpD,CAAC,EACC,EAAE,OAAO,UAAU,eAAe;CACjC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU,WAAW,CAAC,WAAW,KAAK;EACtC,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;GACA,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG;GACrD,OAAO;GACP,UAAU;GACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;GACA,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;EACF;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,EACD;EACE,QAAQ,EAAE,cAAc;EACxB,OAAO;IACJ,IAAI,kBAAkB,UAAU;IAC/B,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,IACR;IACF;IACA,IAAI,kBAAkB,cAAc;IACnC,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,IACR;IACF;GACF;EACF,CACF;CACF,EACF;AAED,MAAa,kBAMT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAMT,OAAOC,aAAgB,EACzB,oBAAoB,SAClB,CAAC;CAAC;CAAY;CAAW;CAAO,CAAC,SAAS,KAAe,EAC5D,CAAC,EACC,EAAE,OAAO,UAAU,SAAS,OAAO,WAAW;CAC7C,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAC7D,MAAM,YAAY,aAAa,OAAO,SAAS;CAC/C,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,WAAW,UAAU,QAAQ;AACnC,QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,GAAG,SAAS,sDACzD;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}

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

@@ -1,100 +1,116 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAccount } from '@lifi/wallet-management';
-import { useChainTypeFromAddress } from '@lifi/widget-provider';
-import CloseRounded from '@mui/icons-material/CloseRounded';
-import { Box, Collapse } from '@mui/material';
-import { useNavigate } from '@tanstack/react-router';
-import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
-import { DisabledUI, HiddenUI } from '../../types/widget.js';
-import { defaultChainIdsByType } from '../../utils/chainType.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { AccountAvatar } from '../Avatar/AccountAvatar.js';
-import { Card } from '../Card/Card.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CardTitle } from '../Card/CardTitle.js';
-import { SendToWalletCardHeader } from './SendToWallet.style.js';
-export const SendToWalletButton = (props) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { disabledUI, hiddenUI, toAddress, toAddresses, subvariant, subvariantOptions, } = useWidgetConfig();
-    const { showSendToWallet } = useSendToWalletStore((state) => state);
-    const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues('toAddress', 'toChain', 'toToken');
-    const { setFieldValue } = useFieldActions();
-    const { selectedBookmark } = useBookmarks();
-    const { setSelectedBookmark } = useBookmarkActions();
-    const { accounts } = useAccount();
-    const { requiredToAddress } = useToAddressRequirements();
-    const { getChainTypeFromAddress } = useChainTypeFromAddress();
-    const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-    const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-    const address = toAddressFieldValue
-        ? shortenAddress(toAddressFieldValue)
-        : t('sendToWallet.enterAddress', {
-            context: 'short',
-        });
-    const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
-    const chainType = !matchingConnectedAccount
-        ? selectedBookmark?.chainType ||
-            (toAddressFieldValue
-                ? getChainTypeFromAddress(toAddressFieldValue)
-                : undefined)
-        : undefined;
-    const chainId = toChainId && toTokenAddress
-        ? toChainId
-        : matchingConnectedAccount
-            ? matchingConnectedAccount.chainId
-            : chainType
-                ? defaultChainIdsByType[chainType]
-                : undefined;
-    const isConnectedAccount = selectedBookmark?.isConnectedAccount &&
-        matchingConnectedAccount?.isConnected;
-    const connectedAccountName = matchingConnectedAccount?.connector?.name;
-    const bookmarkName = selectedBookmark?.name;
-    const headerTitle = isConnectedAccount
-        ? connectedAccountName || address
-        : bookmarkName || connectedAccountName || address;
-    const headerSubheader = isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
-    const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress;
-    const handleOnClick = () => {
-        navigate({
-            to: toAddresses?.length
-                ? navigationRoutes.configuredWallets
-                : navigationRoutes.sendToWallet,
-        });
-    };
-    const clearSelectedBookmark = (e) => {
-        e.stopPropagation();
-        setFieldValue('toAddress', '', { isTouched: true });
-        setSelectedBookmark();
-    };
-    // The collapse opens instantly on first page load/component mount when there is an address to display
-    // After which it needs an animated transition for open and closing.
-    // collapseTransitionTime is used specify the transition time for opening and closing
-    const collapseTransitionTime = useRef(0);
-    // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            collapseTransitionTime.current = 225;
-        }, 0);
-        return () => clearTimeout(timeout);
-    }, []);
-    const isOpenCollapse = !hiddenToAddress && (requiredToAddress || showSendToWallet);
-    const title = subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
-        ? t('header.depositTo')
-        : t('header.sendToWallet');
-    return (_jsx(Collapse, { timeout: collapseTransitionTime.current, in: isOpenCollapse, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { role: "button", onClick: disabledForChanges ? undefined : handleOnClick, sx: { width: '100%', ...props.sx }, children: [_jsx(CardTitle, { required: requiredToAddress, children: title }), _jsx(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: _jsx(SendToWalletCardHeader, { avatar: _jsx(AccountAvatar, { chainId: chainId, account: matchingConnectedAccount, toAddress: toAddress, empty: !toAddressFieldValue }), title: headerTitle, subheader: headerSubheader, selected: !!toAddressFieldValue || disabledToAddress, action: !!toAddressFieldValue && !disabledForChanges ? (_jsx(CardIconButton, { onClick: clearSelectedBookmark, size: "small", children: _jsx(CloseRounded, { fontSize: "inherit" }) })) : null }) })] }) }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { DisabledUI, HiddenUI } from "../../types/widget.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useBookmarks } from "../../stores/bookmarks/useBookmarks.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { defaultChainIdsByType } from "../../utils/chainType.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { AccountAvatar } from "../Avatar/AccountAvatar.js";
+import { SendToWalletCardHeader, SendToWalletCardTitleRow, SendToWalletRequiredLabel, SendToWalletRequiredLabelText } from "./SendToWalletButton.style.js";
+import { useEffect, useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Box, Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useChainTypeFromAddress } from "@lifi/widget-provider";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/SendToWallet/SendToWalletButton.tsx
+const SendToWalletButton = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { disabledUI, hiddenUI, toAddress, toAddresses, subvariant, subvariantOptions } = useWidgetConfig();
+	const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues("toAddress", "toChain", "toToken");
+	const { setFieldValue } = useFieldActions();
+	const { selectedBookmark } = useBookmarks();
+	const { setSelectedBookmark } = useBookmarkActions();
+	const { accounts } = useAccount();
+	const { getChainTypeFromAddress } = useChainTypeFromAddress();
+	const { requiredToAddress } = useToAddressRequirements();
+	const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+	const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+	const address = toAddressFieldValue ? shortenAddress(toAddressFieldValue) : t("sendToWallet.enterAddress", { context: "short" });
+	const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
+	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || (toAddressFieldValue ? getChainTypeFromAddress(toAddressFieldValue) : void 0) : void 0;
+	const chainId = toChainId && toTokenAddress ? toChainId : matchingConnectedAccount ? matchingConnectedAccount.chainId : chainType ? defaultChainIdsByType[chainType] : void 0;
+	const isConnectedAccount = selectedBookmark?.isConnectedAccount && matchingConnectedAccount?.isConnected;
+	const connectedAccountName = matchingConnectedAccount?.connector?.name;
+	const bookmarkName = selectedBookmark?.name;
+	const headerTitle = isConnectedAccount ? connectedAccountName || address : bookmarkName || connectedAccountName || address;
+	const headerSubheader = isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
+	const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress;
+	const handleOnClick = () => {
+		navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
+	};
+	const clearSelectedBookmark = (e) => {
+		e.stopPropagation();
+		setFieldValue("toAddress", "", { isTouched: true });
+		setSelectedBookmark();
+	};
+	const collapseTransitionTime = useRef(0);
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			collapseTransitionTime.current = 225;
+		}, 0);
+		return () => clearTimeout(timeout);
+	}, []);
+	const isOpenCollapse = !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue);
+	const title = subvariant === "custom" && subvariantOptions?.custom === "deposit" ? t("header.depositTo") : t("header.sendToWallet");
+	return /* @__PURE__ */ jsx(Collapse, {
+		timeout: collapseTransitionTime.current,
+		in: isOpenCollapse,
+		mountOnEnter: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsxs(Card$1, {
+			role: "button",
+			onClick: disabledForChanges ? void 0 : handleOnClick,
+			sx: {
+				width: "100%",
+				...props.sx
+			},
+			children: [/* @__PURE__ */ jsxs(SendToWalletCardTitleRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { p: 0 },
+				children: title
+			}), requiredToAddress && !toAddressFieldValue ? /* @__PURE__ */ jsxs(SendToWalletRequiredLabel, {
+				variant: "warning",
+				children: [/* @__PURE__ */ jsx(WarningRounded, { sx: { fontSize: 14 } }), /* @__PURE__ */ jsx(SendToWalletRequiredLabelText, {
+					type: "icon",
+					children: t("sendToWallet.required")
+				})]
+			}) : null] }), /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center"
+				},
+				children: /* @__PURE__ */ jsx(SendToWalletCardHeader, {
+					avatar: /* @__PURE__ */ jsx(AccountAvatar, {
+						chainId,
+						account: matchingConnectedAccount,
+						toAddress,
+						empty: !toAddressFieldValue
+					}),
+					title: headerTitle,
+					subheader: headerSubheader,
+					selected: !!toAddressFieldValue || disabledToAddress,
+					action: !!toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
+						onClick: clearSelectedBookmark,
+						size: "small",
+						children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "inherit" })
+					}) : null
+				})
+			})]
+		})
+	});
 };
+//#endregion
+export { SendToWalletButton };
+
 //# sourceMappingURL=SendToWalletButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletButton.js","sourceRoot":"","sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const {\n    disabledUI,\n    hiddenUI,\n    toAddress,\n    toAddresses,\n    subvariant,\n    subvariantOptions,\n  } = useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              !!toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/SendToWallet/SendToWalletButton.style.js

@@ -0,0 +1,53 @@
+import { CardLabel, CardLabelTypography } from "../Card/CardLabel.js";
+import { CardHeader as CardHeader$1 } from "../Card/CardHeader.js";
+import { Box, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/SendToWallet/SendToWalletButton.style.tsx
+const SendToWalletCardTitleRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: theme.spacing(2, 2, 0, 2),
+	height: 30
+}));
+const SendToWalletRequiredLabel = styled(CardLabel)(({ theme }) => ({ padding: theme.spacing(0, 1) }));
+const SendToWalletRequiredLabelText = styled(CardLabelTypography)(({ theme }) => ({ padding: theme.spacing(0, .5) }));
+const SendToWalletCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected"].includes(prop) })(({ theme }) => ({
+	width: "100%",
+	[`.${cardHeaderClasses.title}`]: {
+		color: theme.vars.palette.text.secondary,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		fontWeight: 500,
+		width: 254,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 }
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 254,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 }
+	},
+	[`.${cardHeaderClasses.action}`]: { marginRight: 0 },
+	[`.${cardHeaderClasses.action} > button`]: { fontSize: 16 },
+	variants: [{
+		props: ({ selected }) => selected,
+		style: {
+			[`.${cardHeaderClasses.title}`]: {
+				color: theme.vars.palette.text.primary,
+				fontWeight: 600,
+				width: 224,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 192 }
+			},
+			[`.${cardHeaderClasses.subheader}`]: {
+				width: 224,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 192 }
+			}
+		}
+	}]
+}));
+//#endregion
+export { SendToWalletCardHeader, SendToWalletCardTitleRow, SendToWalletRequiredLabel, SendToWalletRequiredLabelText };
+
+//# sourceMappingURL=SendToWalletButton.style.js.map

package/dist/esm/components/SendToWallet/SendToWalletButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletButton.style.js","names":["CardHeader"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.style.tsx"],"sourcesContent":["import { Box, cardHeaderClasses, styled } from '@mui/material'\nimport type React from 'react'\nimport { CardHeader } from '../Card/CardHeader.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\n\nexport const SendToWalletCardTitleRow: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2, 0, 2),\n  height: 30,\n}))\n\nexport const SendToWalletRequiredLabel: React.FC<\n  React.ComponentProps<typeof CardLabel>\n> = styled(CardLabel)(({ theme }) => ({\n  padding: theme.spacing(0, 1),\n}))\n\nexport const SendToWalletRequiredLabelText: React.FC<\n  React.ComponentProps<typeof CardLabelTypography>\n> = styled(CardLabelTypography)(({ theme }) => ({\n  padding: theme.spacing(0, 0.5),\n}))\n\nexport const SendToWalletCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & { selected?: boolean }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  width: '100%',\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    fontWeight: 500,\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.action}`]: {\n    marginRight: 0,\n  },\n  [`.${cardHeaderClasses.action} > button`]: {\n    fontSize: 16,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n        [`.${cardHeaderClasses.subheader}`]: {\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;;;AAKA,MAAa,2BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE;CAClC,QAAQ;CACT,EAAE;AAEH,MAAa,4BAET,OAAO,UAAU,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,GAAG,EAAE,EAC7B,EAAE;AAEH,MAAa,gCAET,OAAO,oBAAoB,EAAE,EAAE,aAAa,EAC9C,SAAS,MAAM,QAAQ,GAAG,GAAI,EAC/B,EAAE;AAEH,MAAa,yBAET,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,OAAO;EACN,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;EACF;EACA,IAAI,kBAAkB,WAAW,EAChC,aAAa,GACd;EACA,IAAI,kBAAkB,OAAO,aAAa,EACzC,UAAU,IACX;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO;IACJ,IAAI,kBAAkB,UAAU;IAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;IAC/B,YAAY;IACZ,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;IACF;IACA,IAAI,kBAAkB,cAAc;IACnC,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,OAAO,KACR;IACF;GACF;EACF,CACF;CACF,EAAE"}