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

package/_cjs/App.js

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AppDefault_1 = require("./AppDefault");
+const AppDrawer_1 = require("./AppDrawer");
+const AppProvider_1 = require("./AppProvider");
+exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(AppDefault_1.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+});

package/_cjs/AppDefault.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppDefault = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppRoutes_1 = require("./AppRoutes");
+const AppContainer_1 = require("./components/AppContainer");
+const Header_1 = require("./components/Header");
+const Initializer_1 = require("./components/Initializer");
+const PoweredBy_1 = require("./components/PoweredBy");
+const Routes_1 = require("./components/Routes");
+const hooks_1 = require("./hooks");
+const providers_1 = require("./providers");
+const utils_1 = require("./utils");
+const AppDefault = () => {
+    const { elementId } = (0, providers_1.useWidgetConfig)();
+    const expandable = (0, hooks_1.useExpandableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.AppExpandedContainer, elementId), children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
+};
+exports.AppDefault = AppDefault;

package/_cjs/AppDrawer.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerButtonText = exports.AppDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CloseRounded_1 = require("@mui/icons-material/CloseRounded");
+const KeyboardArrowLeft_1 = require("@mui/icons-material/KeyboardArrowLeft");
+const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const AppDefault_1 = require("./AppDefault");
+const AppDrawer_style_1 = require("./AppDrawer.style");
+const AppProvider_1 = require("./AppProvider");
+const types_1 = require("./types");
+exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, config }, ref) => {
+    const openRef = (0, react_1.useRef)(open);
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
+    const toggleDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen((open) => !open);
+    }, []);
+    const openDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(false);
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    const widgetConfig = (0, react_1.useMemo)(() => ({
+        ...config,
+        integrator,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+    }), [config, integrator]);
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, slotProps: {
+                    backdrop: {
+                        sx: {
+                            backgroundColor: 'rgb(0 0 0 / 48%)',
+                            backdropFilter: 'blur(3px)',
+                        },
+                    },
+                }, PaperProps: {
+                    sx: {
+                        width: config?.containerStyle?.width ?? '100%',
+                        minWidth: config?.containerStyle?.minWidth ?? 360,
+                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
+                    },
+                }, keepMounted: true, children: [(0, jsx_runtime_1.jsx)(AppDrawer_style_1.CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, {}) }), (0, jsx_runtime_1.jsx)(AppDefault_1.AppDefault, {})] })] }));
+});
+const DrawerButtonText = ({ open, subvariant, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
+};
+exports.DrawerButtonText = DrawerButtonText;

package/_cjs/AppDrawer.style.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButtonLayout = exports.DrawerButtonTypography = exports.DrawerButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const getButtonTransformWidth = (drawerWidth, drawerMaxWidth) => {
+    if (typeof drawerWidth === 'number') {
+        return `${drawerWidth}px`;
+    }
+    if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+        return drawerWidth;
+    }
+    if (typeof drawerMaxWidth === 'number') {
+        return `${drawerMaxWidth}px`;
+    }
+    if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+        return drawerMaxWidth;
+    }
+    return '392px';
+};
+exports.DrawerButton = (0, styles_1.styled)(material_1.Button, {
+    shouldForwardProp: (prop) => !['open', 'drawerProps'].includes(prop),
+})(({ theme, open, drawerProps }) => ({
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    alignItems: 'center',
+    borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 144,
+    minWidth: 40,
+    padding: theme.spacing(1, 0, 1, 0),
+    position: 'absolute',
+    right: 0,
+    top: 'calc(50% - 74px)',
+    transform: `translate3d(calc(${open
+        ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
+        : '0px'} * -1), 0, 0)`,
+    transition: theme.transitions.create(['transform'], {
+        duration: open
+            ? theme.transitions.duration.enteringScreen
+            : theme.transitions.duration.leavingScreen,
+        easing: open
+            ? theme.transitions.easing.easeOut
+            : theme.transitions.easing.sharp,
+    }),
+    zIndex: 1500,
+    '&:hover': {
+        background: theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+    },
+    svg: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+    },
+}));
+exports.DrawerButtonTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1),
+    position: 'relative',
+    textTransform: 'none',
+    transform: 'rotateZ(180deg)',
+    writingMode: 'vertical-rl',
+}));
+exports.CloseButtonLayout = (0, styles_1.styled)(material_1.IconButton)(() => ({
+    position: 'absolute',
+    top: '12px',
+    right: '26px',
+    zIndex: 1,
+    height: '40px',
+    width: '40px',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/_cjs/AppProvider.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppRouter = exports.AppProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const queryClient_1 = require("./config/queryClient");
+const providers_1 = require("./providers");
+const stores_1 = require("./stores");
+const AppProvider = ({ children, config, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }));
+};
+exports.AppProvider = AppProvider;
+const AppRouter = ({ children }) => {
+    const { buildUrl } = (0, providers_1.useWidgetConfig)();
+    const inRouterContext = (0, react_router_dom_1.useInRouterContext)();
+    const Router = inRouterContext ? react_1.Fragment : react_router_dom_1.MemoryRouter;
+    return ((0, jsx_runtime_1.jsxs)(Router, { children: [children, buildUrl ? (0, jsx_runtime_1.jsx)(providers_1.URLSearchParamsBuilder, {}) : null] }));
+};
+exports.AppRouter = AppRouter;

package/_cjs/AppRoutes.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppRoutes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const NotFound_1 = require("./components/NotFound");
+const ActiveTransactionsPage_1 = require("./pages/ActiveTransactionsPage");
+const LanguagesPage_1 = require("./pages/LanguagesPage");
+const MainPage_1 = require("./pages/MainPage");
+const RoutesPage_1 = require("./pages/RoutesPage");
+const SelectChainPage_1 = require("./pages/SelectChainPage");
+const SelectEnabledToolsPage_1 = require("./pages/SelectEnabledToolsPage");
+const SelectTokenPage_1 = require("./pages/SelectTokenPage");
+const SelectWalletPage_1 = require("./pages/SelectWalletPage");
+const SettingsPage_1 = require("./pages/SettingsPage");
+const TransactionDetailsPage_1 = require("./pages/TransactionDetailsPage");
+const TransactionHistoryPage_1 = require("./pages/TransactionHistoryPage");
+const TransactionPage_1 = require("./pages/TransactionPage");
+const utils_1 = require("./utils");
+// SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
+// Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
+const NotFoundRouteHandler = () => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    return pathname.includes(utils_1.navigationRoutes.selectWallet) ? ((0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {})) : ((0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}));
+};
+const routes = [
+    {
+        path: '/',
+        element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.settings,
+        element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.bridges}`,
+        element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Bridges" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.exchanges}`,
+        element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Exchanges" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.languages}`,
+        element: (0, jsx_runtime_1.jsx)(LanguagesPage_1.LanguagesPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.fromToken,
+        element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
+    },
+    {
+        path: utils_1.navigationRoutes.toToken,
+        element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
+    },
+    {
+        path: utils_1.navigationRoutes.toTokenNative,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.fromToken}?/${utils_1.navigationRoutes.fromChain}`,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.toToken}?/${utils_1.navigationRoutes.toChain}`,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
+    },
+    {
+        path: utils_1.navigationRoutes.routes,
+        element: (0, jsx_runtime_1.jsx)(RoutesPage_1.RoutesPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.activeTransactions,
+        element: (0, jsx_runtime_1.jsx)(ActiveTransactionsPage_1.ActiveTransactionsPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.transactionHistory,
+        element: (0, jsx_runtime_1.jsx)(TransactionHistoryPage_1.TransactionHistoryPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.transactionHistory}?/${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.transactionDetails}`,
+        element: (0, jsx_runtime_1.jsx)(TransactionDetailsPage_1.TransactionDetailsPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.activeTransactions}?/${utils_1.navigationRoutes.transactionExecution}`,
+        element: (0, jsx_runtime_1.jsx)(TransactionPage_1.TransactionPage, {}),
+    },
+    {
+        path: '*',
+        element: (0, jsx_runtime_1.jsx)(NotFoundRouteHandler, {}),
+    },
+];
+const AppRoutes = () => {
+    const element = (0, react_router_dom_1.useRoutes)(routes);
+    return element;
+};
+exports.AppRoutes = AppRoutes;

package/_cjs/components/ActiveTransactions/ActiveTransactionItem.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveTransactionItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
+const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
+const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
+const material_1 = require("@mui/material");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const StepTimer_1 = require("../Step/StepTimer");
+const TokenAvatar_1 = require("../TokenAvatar");
+const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
+const ActiveTransactionItem = ({ routeId, dense }) => {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { route, status } = (0, hooks_1.useRouteExecution)({
+        routeId,
+        executeInBackground: true,
+    });
+    const lastActiveStep = route?.steps.findLast((step) => step.execution);
+    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
+    const { title } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
+    if (!route || !lastActiveStep) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(utils_1.navigationRoutes.transactionExecution, { state: { routeId } });
+    };
+    const getStatusComponent = () => {
+        switch (lastActiveProcess?.status) {
+            case 'ACTION_REQUIRED':
+                return (0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "info", fontSize: "small" });
+            case 'FAILED':
+                return (0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error", fontSize: "small" });
+            default:
+                return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
+        }
+    };
+    const ListItemComponent = dense ? ActiveTransactions_style_1.ListItem : ActiveTransactions_style_1.ListItemButton;
+    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 2,
+                        height: 16,
+                    }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
+};
+exports.ActiveTransactionItem = ActiveTransactionItem;

package/_cjs/components/ActiveTransactions/ActiveTransactions.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveTransactions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const ActiveTransactionItem_1 = require("./ActiveTransactionItem");
+const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
+const ActiveTransactions = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { account } = (0, hooks_1.useAccount)();
+    const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
+    if (!executingRoutes?.length) {
+        return null;
+    }
+    const handleShowAll = () => {
+        navigate(utils_1.navigationRoutes.activeTransactions);
+    };
+    const hasShowAll = executingRoutes?.length > 2;
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: "selected", selectionColor: "secondary", ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeTransactions') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveTransactionItem_1.ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveTransactions_style_1.ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
+};
+exports.ActiveTransactions = ActiveTransactions;

package/_cjs/components/ActiveTransactions/ActiveTransactions.style.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowAllButton = exports.ListItem = exports.ListItemButton = void 0;
+const material_1 = require("@mui/material");
+const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
+    },
+}));
+exports.ListItem = (0, styles_1.styled)(material_1.ListItem, {
+    shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+    padding: theme.spacing(0, 1.5),
+    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+exports.ShowAllButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    background: 'none',
+    '&:hover': {
+        background: 'none',
+    },
+    padding: theme.spacing(0.75, 2),
+    fontSize: '0.875rem',
+}));

package/_cjs/components/ActiveTransactions/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("./ActiveTransactionItem"), exports);
+__exportStar(require("./ActiveTransactions"), exports);

package/_cjs/components/AmountInput/AmountInput.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AmountInputBase = exports.AmountInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const AmountInput_style_1 = require("./AmountInput.style");
+const AmountInputEndAdornment_1 = require("./AmountInputEndAdornment");
+const AmountInputStartAdornment_1 = require("./AmountInputStartAdornment");
+const FormPriceHelperText_1 = require("./FormPriceHelperText");
+const AmountInput = ({ formType, ...props }) => {
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
+    const disabled = disabledUI?.includes(types_1.DisabledUI.FromAmount);
+    return ((0, jsx_runtime_1.jsx)(exports.AmountInputBase, { formType: formType, token: token, startAdornment: (0, jsx_runtime_1.jsx)(AmountInputStartAdornment_1.AmountInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(AmountInputEndAdornment_1.AmountInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+};
+exports.AmountInput = AmountInput;
+const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const amountKey = providers_1.FormKeyHelper.getAmountKey(formType);
+    const { field: { onChange, onBlur, value }, } = (0, react_hook_form_1.useController)({
+        name: amountKey,
+    });
+    const ref = (0, react_1.useRef)(null);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        const formattedAmount = (0, utils_1.formatInputAmount)(value, token?.decimals, true);
+        onChange(formattedAmount);
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        const formattedAmount = (0, utils_1.formatInputAmount)(value, token?.decimals);
+        onChange(formattedAmount);
+        onBlur();
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        if (ref.current) {
+            (0, utils_1.fitInputText)(AmountInput_style_1.maxInputFontSize, AmountInput_style_1.minInputFontSize, ref.current);
+        }
+    }, [value, ref]);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('main.fromAmount') }), (0, jsx_runtime_1.jsxs)(AmountInput_style_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(AmountInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: startAdornment, endAdornment: endAdornment, inputProps: {
+                            inputMode: 'decimal',
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), bottomAdornment] })] }));
+};
+exports.AmountInputBase = AmountInputBase;

package/_cjs/components/AmountInput/AmountInput.style.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.FormControl = exports.minInputFontSize = exports.maxInputFontSize = void 0;
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const styles_1 = require("@mui/material/styles");
+exports.maxInputFontSize = 24;
+exports.minInputFontSize = 14;
+exports.FormControl = (0, styles_1.styled)(material_1.FormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+exports.Input = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
+    fontSize: 24,
+    fontWeight: 700,
+    boxShadow: 'none',
+    // padding: theme.spacing(2, 2, 2, 0),
+    [`.${InputBase_1.inputBaseClasses.input}`]: {
+        height: 32,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+    '& input[type="number"]': {
+        MozAppearance: 'textfield',
+    },
+    [`&.${InputBase_1.inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${InputBase_1.inputBaseClasses.input}.${InputBase_1.inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
+}));

package/_cjs/components/AmountInput/AmountInputAdornment.style.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Button = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    padding: theme.spacing(0.5, 1, 0.625, 1),
+    lineHeight: 1.0715,
+    fontSize: '0.875rem',
+    minWidth: 'unset',
+}));

package/_cjs/components/AmountInput/AmountInputEndAdornment.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AmountInputEndAdornment = 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 viem_1 = require("viem");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const AmountInputAdornment_style_1 = require("./AmountInputAdornment.style");
+const AmountInputEndAdornment = ({ formType }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    // We get gas recommendations for the source chain to make sure that after pressing the Max button
+    // the user will have enough funds remaining to cover gas costs
+    const { data } = (0, hooks_1.useGasRecommendation)(chainId);
+    const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
+    const handleMax = () => {
+        const chain = getChainById(chainId);
+        let maxAmount = token?.amount;
+        if (chain?.nativeToken.address === tokenAddress &&
+            data?.available &&
+            data?.recommended) {
+            const tokenAmount = token?.amount ?? 0n;
+            const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+            if (tokenAmount > recommendedAmount) {
+                maxAmount = tokenAmount - recommendedAmount;
+            }
+        }
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), maxAmount && token ? (0, viem_1.formatUnits)(maxAmount, token.decimals) : '', {
+            shouldTouch: true,
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? ((0, jsx_runtime_1.jsx)(AmountInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
+};
+exports.AmountInputEndAdornment = AmountInputEndAdornment;

package/_cjs/components/AmountInput/AmountInputStartAdornment.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AmountInputStartAdornment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const TokenAvatar_1 = require("../TokenAvatar");
+const AmountInputStartAdornment = ({ formType, }) => {
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = (0, hooks_1.useChain)(chainId);
+    const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, { sx: { marginLeft: 2 } }));
+};
+exports.AmountInputStartAdornment = AmountInputStartAdornment;