@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_cjs/components/AmountInput/FormPriceHelperText.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPriceHelperTextBase = exports.FormPriceHelperText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const FormPriceHelperText = ({ formType }) => {
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
+    return ((0, jsx_runtime_1.jsx)(exports.FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+exports.FormPriceHelperText = FormPriceHelperText;
+const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const amount = (0, react_hook_form_1.useWatch)({
+        name: providers_1.FormKeyHelper.getAmountKey(formType),
+    });
+    const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token?.priceUSD);
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word',
+                }, children: t(`format.currency`, {
+                    value: fromAmountTokenPrice,
+                }) }), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
+                    value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
+                })}` })) : null] }));
+};
+exports.FormPriceHelperTextBase = FormPriceHelperTextBase;

package/_cjs/components/AmountInput/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AmountInput"), exports);

package/_cjs/components/AppContainer.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppContainer = exports.FlexContainer = exports.AppExpandedContainer = exports.maxHeight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const providers_1 = require("../providers");
+const utils_1 = require("../utils");
+exports.maxHeight = 680;
+exports.AppExpandedContainer = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ variant }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
+    flex: 1,
+    height: variant === 'drawer' ? 'none' : exports.maxHeight,
+}));
+const RelativeContainer = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme, variant }) => ({
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: 360,
+    maxWidth: 392,
+    maxHeight: variant === 'drawer' ? 'none' : exports.maxHeight,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    zIndex: 0,
+}));
+const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ variant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight: variant === 'drawer' ? 'none' : exports.maxHeight,
+    overflowY: 'auto',
+    height: '100%',
+}));
+exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+});
+const AppContainer = ({ children }) => {
+    // const ref = useRef<HTMLDivElement>(null);
+    const { containerStyle, variant, elementId } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsx)(RelativeContainer, { sx: containerStyle, variant: variant, id: (0, utils_1.createElementId)(utils_1.ElementId.RelativeContainer, elementId), children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, { disableGutters: true, children: children }) }) }));
+};
+exports.AppContainer = AppContainer;

package/_cjs/components/BaseTransactionButton/BaseTransactionButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseTransactionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LoadingButton_1 = require("@mui/lab/LoadingButton");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const BaseTransactionButton = ({ onClick, text, disabled, loading, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { walletManagement } = (0, providers_1.useWidgetConfig)();
+    const { account } = (0, hooks_1.useAccount)();
+    const handleClick = async () => {
+        if (account.isConnected) {
+            onClick?.();
+        }
+        else if (walletManagement) {
+            await walletManagement.connect();
+        }
+        else {
+            navigate(utils_1.navigationRoutes.selectWallet);
+        }
+    };
+    const getButtonText = () => {
+        if (account.isConnected) {
+            if (text) {
+                return text;
+            }
+        }
+        return t(`button.connectWallet`);
+    };
+    return ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "contained", color: "primary", onClick: handleClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
+};
+exports.BaseTransactionButton = BaseTransactionButton;

package/_cjs/components/BaseTransactionButton/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseTransactionButton = void 0;
+var BaseTransactionButton_1 = require("./BaseTransactionButton");
+Object.defineProperty(exports, "BaseTransactionButton", { enumerable: true, get: function () { return BaseTransactionButton_1.BaseTransactionButton; } });
+__exportStar(require("./types"), exports);

package/_cjs/components/BaseTransactionButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_cjs/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const Dialog_1 = require("../Dialog");
+exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = (0, hooks_1.useGetScrollableContainer)();
+    const openRef = (0, react_1.useRef)(open);
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
+    const close = (0, react_1.useCallback)(() => {
+        setDrawerOpen(false);
+        openRef.current = false;
+        onClose?.();
+    }, [onClose]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => openRef.current,
+        open: () => {
+            setDrawerOpen(true);
+            openRef.current = true;
+        },
+        close,
+    }), [close]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, slotProps: Dialog_1.slotProps, disableAutoFocus: true, children: children }));
+});

package/_cjs/components/BottomSheet/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BottomSheet"), exports);
+__exportStar(require("./types"), exports);

package/_cjs/components/BottomSheet/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_cjs/components/Card/Card.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const material_1 = require("@mui/material");
+const Badge_1 = require("@mui/material/Badge");
+const styles_1 = require("@mui/material/styles");
+const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
+    ? selectionColor === 'primary'
+        ? theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.primary.main, 0.04)
+            : (0, styles_1.alpha)(theme.palette.primary.main, 0.42)
+        : (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
+    : theme.palette.background.paper;
+exports.Card = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', indented, pointerEvents, onClick, }) => {
+    const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+    const backgroundHoverColor = onClick
+        ? theme.palette.mode === 'light'
+            ? (0, styles_1.darken)(backgroundColor, 0.02)
+            : (0, styles_1.lighten)(backgroundColor, 0.02)
+        : backgroundColor;
+    return {
+        backgroundColor,
+        border: `1px solid`,
+        borderColor: variant === 'error'
+            ? theme.palette.error.main
+            : variant === 'selected'
+                ? selectionColor === 'primary'
+                    ? theme.palette.primary.main
+                    : (0, styles_1.alpha)(theme.palette.secondary.main, 0.48)
+                : theme.palette.mode === 'light'
+                    ? theme.palette.grey[300]
+                    : theme.palette.grey[800],
+        borderRadius: theme.shape.borderRadius,
+        overflow: 'hidden',
+        position: 'relative',
+        padding: indented ? theme.spacing(2) : 0,
+        boxSizing: 'border-box',
+        '&:hover': {
+            cursor: onClick ? 'pointer' : 'default',
+            backgroundColor: backgroundHoverColor,
+        },
+        [`&:hover .${Badge_1.badgeClasses.badge} > div`]: {
+            borderColor: backgroundHoverColor,
+        },
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.enteringScreen,
+            easing: theme.transitions.easing.easeOut,
+        }),
+        pointerEvents,
+    };
+});

package/_cjs/components/Card/CardHeader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardHeader = void 0;
+const material_1 = require("@mui/material");
+const CardHeader_1 = require("@mui/material/CardHeader");
+const styles_1 = require("@mui/material/styles");
+exports.CardHeader = (0, styles_1.styled)(material_1.CardHeader)(({ theme }) => ({
+    [`.${CardHeader_1.cardHeaderClasses.action}`]: {
+        marginTop: -2,
+        alignSelf: 'center',
+    },
+    [`.${CardHeader_1.cardHeaderClasses.title}`]: {
+        fontWeight: '500',
+        fontSize: '1.125rem',
+        lineHeight: '1.2778',
+        color: theme.palette.text.primary,
+    },
+    [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
+        fontWeight: '400',
+        fontSize: '0.75rem',
+        color: theme.palette.text.secondary,
+    },
+}));

package/_cjs/components/Card/CardIconButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardIconButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardIconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => {
+    const backgroundColor = theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return {
+        padding: theme.spacing(0.5),
+        backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.04),
+        '&:hover': {
+            backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.08),
+        },
+    };
+});

package/_cjs/components/Card/CardLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardLabelTypography = exports.CardLabel = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardLabel = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    backgroundColor: type === 'active'
+        ? theme.palette.mode === 'light'
+            ? theme.palette.secondary.main
+            : (0, styles_1.alpha)(theme.palette.secondary.main, 0.32)
+        : type?.includes('insurance')
+            ? (0, styles_1.alpha)(theme.palette.success.main, theme.palette.mode === 'light' ? 0.12 : 0.24)
+            : theme.palette.mode === 'light'
+                ? (0, styles_1.alpha)(theme.palette.common.black, 0.12)
+                : (0, styles_1.alpha)(theme.palette.common.white, 0.16),
+    borderRadius: theme.shape.borderRadius,
+    color: type?.includes('insurance')
+        ? (0, styles_1.lighten)(theme.palette.success.main, theme.palette.mode === 'light' ? 0 : 0.24)
+        : theme.palette.text.primary,
+    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    minWidth: 24,
+    userSelect: 'none',
+    fontSize: '1rem',
+    marginRight: theme.spacing(1),
+}));
+exports.CardLabelTypography = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    padding: type === 'icon'
+        ? theme.spacing(0.75, 0, 0.75, 0.75)
+        : theme.spacing(0.75, 1.5),
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: '600',
+    textTransform: 'lowercase',
+    '&::first-letter': {
+        textTransform: 'uppercase',
+    },
+}));

package/_cjs/components/Card/CardTitle.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardTitle = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardTitle = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => !['required'].includes(prop),
+})(({ theme, required }) => ({
+    fontSize: '0.875rem',
+    lineHeight: '1.286',
+    letterSpacing: '0.01071em',
+    fontWeight: 700,
+    padding: theme.spacing(1.75, 2, 0, 2),
+    '&:after': {
+        content: required ? '" *"' : 'none',
+        color: theme.palette.error.main,
+    },
+}));

package/_cjs/components/Card/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Card"), exports);
+__exportStar(require("./CardHeader"), exports);
+__exportStar(require("./CardIconButton"), exports);
+__exportStar(require("./CardLabel"), exports);
+__exportStar(require("./CardTitle"), exports);

package/_cjs/components/ChainSelect/ChainSelect.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_router_dom_1 = require("react-router-dom");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const ChainSelect_style_1 = require("./ChainSelect.style");
+const useChainSelect_1 = require("./useChainSelect");
+const ChainSelect = ({ formType }) => {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = (0, useChainSelect_1.useChainSelect)(formType);
+    const [chainId] = (0, react_hook_form_1.useWatch)({
+        name: [providers_1.FormKeyHelper.getChainKey(formType)],
+    });
+    (0, react_1.useEffect)(() => {
+        const hasChainInOrderedList = chainOrder.includes(chainId);
+        // If we don't have a chain in the ordered chain list we should add it.
+        if (!hasChainInOrderedList) {
+            setChainOrder(chainId);
+        }
+    }, [chainId, chainOrder, setChainOrder]);
+    const showAllChains = () => {
+        navigate(utils_1.navigationRoutes[`${formType}Chain`]);
+    };
+    const chainsToHide = (chains?.length ?? 0) - stores_1.maxChainToOrder;
+    return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
+                ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: chain.name, placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, { onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default', children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 }, children: chain.name[0] }) }) }, chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, { onClick: showAllChains, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        width: 40,
+                        height: 40,
+                        display: 'grid',
+                        placeItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, children: ["+", chainsToHide] }) }) })) : null] }));
+};
+exports.ChainSelect = ChainSelect;

package/_cjs/components/ChainSelect/ChainSelect.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainContainer = exports.ChainCard = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Card_1 = require("../../components/Card");
+exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
+    display: 'grid',
+    placeItems: 'center',
+    minWidth: 52,
+    height: 56,
+});
+exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+    gridAutoRows: '56px',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+}));

package/_cjs/components/ChainSelect/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChainSelect"), exports);
+__exportStar(require("./useChainSelect"), exports);

package/_cjs/components/ChainSelect/useChainSelect.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainSelect = void 0;
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const types_1 = require("../../types");
+const useChainSelect = (formType) => {
+    const { requiredUI } = (0, providers_1.useWidgetConfig)();
+    const chainKey = providers_1.FormKeyHelper.getChainKey(formType);
+    const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: chainKey });
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const { chains, isLoading, getChainById } = (0, hooks_1.useChains)();
+    const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
+    const swapOnly = (0, hooks_1.useSwapOnly)();
+    const getChains = () => {
+        if (!chains) {
+            return [];
+        }
+        const selectedChains = chainOrder
+            .map((chainId) => chains.find((chain) => chain.id === chainId))
+            .filter(Boolean);
+        return selectedChains;
+    };
+    const setCurrentChain = (chainId) => {
+        onChange(chainId);
+        onBlur();
+        if (swapOnly) {
+            setValue(providers_1.FormKeyHelper.getChainKey('to'), chainId, {
+                shouldTouch: true,
+            });
+        }
+        setValue(providers_1.FormKeyHelper.getTokenKey(formType), '');
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.FormKey.TokenSearchFilter, '');
+        const [fromChainId, toChainId] = getValues([
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.ToChain,
+        ]);
+        const fromChain = getChainById(fromChainId);
+        const toChain = getChainById(toChainId);
+        const differentChainType = fromChain && toChain && fromChain.chainType !== toChain.chainType;
+        const requiredToAddress = requiredUI?.includes(types_1.RequiredUI.ToAddress) || differentChainType;
+        // toAddress field is required (always visible) when bridging between
+        // two ecosystems (fromChain and toChain have different chain types).
+        // We clean up toAddress on every chain change if toAddress is not required.
+        // This is used when we switch between different chain ecosystems (chain types) and
+        // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
+        // but it keeps toAddress value set for the previous chain pair.
+        if (!requiredToAddress) {
+            setValue(providers_1.FormKey.ToAddress, '');
+        }
+        setChainOrder(chainId);
+    };
+    return {
+        chainOrder,
+        chains,
+        getChains,
+        isLoading,
+        setChainOrder,
+        setCurrentChain,
+    };
+};
+exports.useChainSelect = useChainSelect;

package/_cjs/components/ContractComponent/ContractComponent.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContractComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card_1 = require("../Card");
+const ContractComponent = ({ children, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Card_1.Card, { ...props, children: children });
+};
+exports.ContractComponent = ContractComponent;

package/_cjs/components/ContractComponent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ContractComponent"), exports);

package/_cjs/components/Dialog.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = exports.slotProps = exports.paperProps = exports.modalProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../hooks");
+exports.modalProps = {
+    sx: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+};
+exports.paperProps = {
+    sx: (theme) => ({
+        position: 'absolute',
+        backgroundImage: 'none',
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+    }),
+};
+exports.slotProps = {
+    backdrop: {
+        sx: {
+            position: 'absolute',
+            backgroundColor: 'rgb(0 0 0 / 32%)',
+            backdropFilter: 'blur(3px)',
+        },
+    },
+};
+const Dialog = ({ children, open, onClose, }) => {
+    const getContainer = (0, hooks_1.useGetScrollableContainer)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { container: getContainer, open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, slotProps: exports.slotProps, children: children }));
+};
+exports.Dialog = Dialog;

package/_cjs/components/GasMessage/FundsSufficiencyMessage.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FundsSufficiencyMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const GasMessage_style_1 = require("./GasMessage.style");
+const FundsSufficiencyMessage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { display: "flex", children: [(0, jsx_runtime_1.jsx)(GasMessage_style_1.WarningMessageCardTitle, { children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { sx: {
+                        marginTop: 2,
+                        marginLeft: 2,
+                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`warning.message.insufficientFunds`) })] }));
+};
+exports.FundsSufficiencyMessage = FundsSufficiencyMessage;