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

package/_cjs/utils/svm.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSVMAddress = void 0;
+const web3_js_1 = require("@solana/web3.js");
+const isSVMAddress = (address) => {
+    try {
+        new web3_js_1.PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+exports.isSVMAddress = isSVMAddress;

package/_cjs/utils/wallet.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortenAddress = void 0;
+const shortenAddress = (address) => address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;
+exports.shortenAddress = shortenAddress;

package/_esm/App.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AppDefault } from './AppDefault';
+import { AppDrawer } from './AppDrawer';
+import { AppProvider } from './AppProvider';
+export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+});

package/_esm/AppDefault.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppRoutes } from './AppRoutes';
+import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
+import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
+import { PoweredBy } from './components/PoweredBy';
+import { RoutesExpanded } from './components/Routes';
+import { useExpandableVariant } from './hooks';
+import { useWidgetConfig } from './providers';
+import { ElementId, createElementId } from './utils';
+export const AppDefault = () => {
+    const { elementId } = useWidgetConfig();
+    const expandable = useExpandableVariant();
+    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
+};

package/_esm/AppDrawer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as CloseIcon } from '@mui/icons-material/CloseRounded';
+import { default as KeyboardArrowLeftIcon } from '@mui/icons-material/KeyboardArrowLeft';
+import { default as KeyboardArrowRightIcon } from '@mui/icons-material/KeyboardArrowRight';
+import { Drawer } from '@mui/material';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppDefault } from './AppDefault';
+import { CloseButtonLayout, DrawerButton, DrawerButtonTypography, } from './AppDrawer.style';
+import { AppProvider } from './AppProvider';
+import { HiddenUI } from './types';
+export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
+    const openRef = useRef(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+    const toggleDrawer = useCallback(() => {
+        setDrawerOpen((open) => !open);
+    }, []);
+    const openDrawer = useCallback(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = useCallback(() => {
+        setDrawerOpen(false);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    const widgetConfig = useMemo(() => ({
+        ...config,
+        integrator,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+    }), [config, integrator]);
+    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsxs(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: [_jsx(CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: _jsx(CloseIcon, {}) }), _jsx(AppDefault, {})] })] }));
+});
+export const DrawerButtonText = ({ open, subvariant, }) => {
+    const { t } = useTranslation();
+    return (_jsx(DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
+};

package/_esm/AppDrawer.style.js

@@ -0,0 +1,87 @@
+import { Button, IconButton, Typography } from '@mui/material';
+import { styled } from '@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';
+};
+export const DrawerButton = styled(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,
+    },
+}));
+export const DrawerButtonTypography = styled(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',
+}));
+export const CloseButtonLayout = styled(IconButton)(() => ({
+    position: 'absolute',
+    top: '12px',
+    right: '26px',
+    zIndex: 1,
+    height: '40px',
+    width: '40px',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/_esm/AppProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Fragment } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router-dom';
+import { queryClient } from './config/queryClient';
+import { FormProvider, I18nProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
+import { StoreProvider } from './stores';
+export const AppProvider = ({ children, config, }) => {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(WidgetProvider, { config: config, children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(StoreProvider, { config: config, children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }));
+};
+export const AppRouter = ({ children }) => {
+    const { buildUrl } = useWidgetConfig();
+    const inRouterContext = useInRouterContext();
+    const Router = inRouterContext ? Fragment : MemoryRouter;
+    return (_jsxs(Router, { children: [children, buildUrl ? _jsx(URLSearchParamsBuilder, {}) : null] }));
+};

package/_esm/AppRoutes.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation, useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
+import { LanguagesPage } from './pages/LanguagesPage';
+import { MainPage } from './pages/MainPage';
+import { RoutesPage } from './pages/RoutesPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
+import { TransactionPage } from './pages/TransactionPage';
+import { navigationRoutes } from './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 } = useLocation();
+    return pathname.includes(navigationRoutes.selectWallet) ? (_jsx(SelectWalletPage, {})) : (_jsx(NotFound, {}));
+};
+const routes = [
+    {
+        path: '/',
+        element: _jsx(MainPage, {}),
+    },
+    {
+        path: navigationRoutes.settings,
+        element: _jsx(SettingsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Bridges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Exchanges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.languages}`,
+        element: _jsx(LanguagesPage, {}),
+    },
+    {
+        path: navigationRoutes.fromToken,
+        element: _jsx(SelectTokenPage, { formType: "from" }),
+    },
+    {
+        path: navigationRoutes.toToken,
+        element: _jsx(SelectTokenPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.toTokenNative,
+        element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
+    },
+    {
+        path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
+        element: _jsx(SelectChainPage, { formType: "from" }),
+    },
+    {
+        path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
+        element: _jsx(SelectChainPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.routes,
+        element: _jsx(RoutesPage, {}),
+    },
+    {
+        path: navigationRoutes.activeTransactions,
+        element: _jsx(ActiveTransactionsPage, {}),
+    },
+    {
+        path: navigationRoutes.transactionHistory,
+        element: _jsx(TransactionHistoryPage, {}),
+    },
+    {
+        path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+        element: _jsx(TransactionDetailsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+        element: _jsx(TransactionPage, {}),
+    },
+    {
+        path: '*',
+        element: _jsx(NotFoundRouteHandler, {}),
+    },
+];
+export const AppRoutes = () => {
+    const element = useRoutes(routes);
+    return element;
+};

package/_esm/components/ActiveTransactions/ActiveTransactionItem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as ArrowForwardIcon } from '@mui/icons-material/ArrowForward';
+import { default as ErrorRoundedIcon } from '@mui/icons-material/ErrorRounded';
+import { default as InfoRoundedIcon } from '@mui/icons-material/InfoRounded';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+export const ActiveTransactionItem = ({ routeId, dense }) => {
+    const navigate = useNavigate();
+    const { route, status } = useRouteExecution({
+        routeId,
+        executeInBackground: true,
+    });
+    const lastActiveStep = route?.steps.findLast((step) => step.execution);
+    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
+    const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
+    if (!route || !lastActiveStep) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(navigationRoutes.transactionExecution, { state: { routeId } });
+    };
+    const getStatusComponent = () => {
+        switch (lastActiveProcess?.status) {
+            case 'ACTION_REQUIRED':
+                return _jsx(InfoRoundedIcon, { color: "info", fontSize: "small" });
+            case 'FAILED':
+                return _jsx(ErrorRoundedIcon, { color: "error", fontSize: "small" });
+            default:
+                return (_jsx(Typography, { fontSize: 14, fontWeight: 500, children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
+        }
+    };
+    const ListItemComponent = dense ? ListItem : ListItemButton;
+    return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 2,
+                        height: 16,
+                    }, children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
+};

package/_esm/components/ActiveTransactions/ActiveTransactions.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks';
+import { useExecutingRoutesIds } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ActiveTransactionItem } from './ActiveTransactionItem';
+import { ShowAllButton } from './ActiveTransactions.style';
+export const ActiveTransactions = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { account } = useAccount();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    if (!executingRoutes?.length) {
+        return null;
+    }
+    const handleShowAll = () => {
+        navigate(navigationRoutes.activeTransactions);
+    };
+    const hasShowAll = executingRoutes?.length > 2;
+    return (_jsxs(Card, { variant: "selected", selectionColor: "secondary", ...props, children: [_jsx(CardTitle, { children: t('header.activeTransactions') }), _jsx(Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? (_jsx(ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
+};

package/_esm/components/ActiveTransactions/ActiveTransactions.style.js

@@ -0,0 +1,32 @@
+import { Button, ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+    },
+}));
+export const ListItem = styled(MuiListItem, {
+    shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+    padding: theme.spacing(0, 1.5),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+export const ShowAllButton = styled(Button)(({ theme }) => ({
+    background: 'none',
+    '&:hover': {
+        background: 'none',
+    },
+    padding: theme.spacing(0.75, 2),
+    fontSize: '0.875rem',
+}));

package/_esm/components/AmountInput/AmountInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
+import { fitInputText, formatInputAmount } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './AmountInput.style';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment';
+import { FormPriceHelperText } from './FormPriceHelperText';
+export const AmountInput = ({ formType, ...props }) => {
+    const { disabledUI } = useWidgetConfig();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token } = useToken(chainId, tokenAddress);
+    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+    return (_jsx(AmountInputBase, { formType: formType, token: token, startAdornment: _jsx(AmountInputStartAdornment, { formType: formType }), endAdornment: !disabled ? _jsx(AmountInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: _jsx(FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+};
+export const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+    const { t } = useTranslation();
+    const amountKey = FormKeyHelper.getAmountKey(formType);
+    const { field: { onChange, onBlur, value }, } = useController({
+        name: amountKey,
+    });
+    const ref = useRef(null);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals, true);
+        onChange(formattedAmount);
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals);
+        onChange(formattedAmount);
+        onBlur();
+    };
+    useLayoutEffect(() => {
+        if (ref.current) {
+            fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+        }
+    }, [value, ref]);
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('main.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(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] })] }));
+};

package/_esm/components/AmountInput/AmountInput.style.js

@@ -0,0 +1,31 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const maxInputFontSize = 24;
+export const minInputFontSize = 14;
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+export const Input = styled(InputBase)(({ theme }) => ({
+    fontSize: 24,
+    fontWeight: 700,
+    boxShadow: 'none',
+    // padding: theme.spacing(2, 2, 2, 0),
+    [`.${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',
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
+}));

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

@@ -0,0 +1,8 @@
+import { Button as MuiButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Button = styled(MuiButton)(({ theme }) => ({
+    padding: theme.spacing(0.5, 1, 0.625, 1),
+    lineHeight: 1.0715,
+    fontSize: '0.875rem',
+    minWidth: 'unset',
+}));

package/_esm/components/AmountInput/AmountInputEndAdornment.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAdornment, Skeleton } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { useAvailableChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
+import { FormKeyHelper } from '../../providers';
+import { Button } from './AmountInputAdornment.style';
+export const AmountInputEndAdornment = ({ formType }) => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const { getChainById } = useAvailableChains();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            FormKeyHelper.getChainKey(formType),
+            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 } = useGasRecommendation(chainId);
+    const { token, isLoading } = 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(FormKeyHelper.getAmountKey(formType), maxAmount && token ? formatUnits(maxAmount, token.decimals) : '', {
+            shouldTouch: true,
+        });
+    };
+    return (_jsx(InputAdornment, { position: "end", children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? (_jsx(Button, { onClick: handleMax, children: t('button.max') })) : null }));
+};

package/_esm/components/AmountInput/AmountInputStartAdornment.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWatch } from 'react-hook-form';
+import { useChain, useToken } from '../../hooks';
+import { FormKeyHelper } from '../../providers';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+export const AmountInputStartAdornment = ({ formType, }) => {
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = useChain(chainId);
+    const { token } = useToken(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : (_jsx(TokenAvatarDefault, { sx: { marginLeft: 2 } }));
+};

package/_esm/components/AmountInput/FormPriceHelperText.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useTokenAddressBalance } from '../../hooks';
+import { FormKeyHelper } from '../../providers';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
+export const FormPriceHelperText = ({ formType }) => {
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    return (_jsx(FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = useTranslation();
+    const amount = useWatch({
+        name: FormKeyHelper.getAmountKey(formType),
+    });
+    const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+    return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(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 ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
+                    value: formatTokenAmount(token.amount, token.decimals),
+                })}` })) : null] }));
+};

package/_esm/components/AppContainer.js

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