@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/_esm/AppDrawer.style.js

@@ -0,0 +1,88 @@
+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',
+}));
+//# sourceMappingURL=AppDrawer.style.js.map

package/src/_esm/AppDrawer.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDrawer.style.js","sourceRoot":"","sources":["../../../src/AppDrawer.style.tsx"],"names":[],"mappings":"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"}

package/src/_esm/AppProvider.js

@@ -0,0 +1,17 @@
+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] }));
+};
+//# sourceMappingURL=AppProvider.js.map

package/src/_esm/AppProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.js","sourceRoot":"","sources":["../../../src/AppProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,sBAAsB,EACtB,cAAc,EACd,cAAc,EACd,eAAe,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,CAAC,MAAM,WAAW,GAAmD,CAAC,EAC1E,QAAQ,EACR,MAAM,GACP,EAAE,EAAE;IACH,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,YAC5B,KAAC,aAAa,cACZ,KAAC,YAAY,cACX,KAAC,cAAc,cACb,KAAC,YAAY,cACX,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,YAC3B,KAAC,SAAS,cAAE,QAAQ,GAAa,GACnB,GACH,GACA,GACJ,GACD,GACD,GACG,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAoC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;IACzD,OAAO,CACL,MAAC,MAAM,eACJ,QAAQ,EACR,QAAQ,CAAC,CAAC,CAAC,KAAC,sBAAsB,KAAG,CAAC,CAAC,CAAC,IAAI,IACtC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/AppRoutes.js

@@ -0,0 +1,93 @@
+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;
+};
+//# sourceMappingURL=AppRoutes.js.map

package/src/_esm/AppRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppRoutes.js","sourceRoot":"","sources":["../../../src/AppRoutes.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,8GAA8G;AAC9G,qIAAqI;AACrI,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,OAAO,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CACxD,KAAC,gBAAgB,KAAG,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,KAAG,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkB;IAC5B;QACE,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAC,QAAQ,KAAG;KACtB;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,QAAQ;QAC/B,OAAO,EAAE,KAAC,YAAY,KAAG;KAC1B;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,QAAQ,IAAI,gBAAgB,CAAC,OAAO,EAAE;QAChE,OAAO,EAAE,KAAC,sBAAsB,IAAC,IAAI,EAAC,SAAS,GAAG;KACnD;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,QAAQ,IAAI,gBAAgB,CAAC,SAAS,EAAE;QAClE,OAAO,EAAE,KAAC,sBAAsB,IAAC,IAAI,EAAC,WAAW,GAAG;KACrD;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,QAAQ,IAAI,gBAAgB,CAAC,SAAS,EAAE;QAClE,OAAO,EAAE,KAAC,aAAa,KAAG;KAC3B;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,SAAS;QAChC,OAAO,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,MAAM,GAAG;KAC7C;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,OAAO;QAC9B,OAAO,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,IAAI,GAAG;KAC3C;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,aAAa;QACpC,OAAO,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,IAAI,EAAC,iBAAiB,SAAG;KAC7D;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,SAAS,KAAK,gBAAgB,CAAC,SAAS,EAAE;QACpE,OAAO,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,MAAM,GAAG;KAC7C;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,EAAE;QAChE,OAAO,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,IAAI,GAAG;KAC3C;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,MAAM;QAC7B,OAAO,EAAE,KAAC,UAAU,KAAG;KACxB;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,kBAAkB;QACzC,OAAO,EAAE,KAAC,sBAAsB,KAAG;KACpC;IACD;QACE,IAAI,EAAE,gBAAgB,CAAC,kBAAkB;QACzC,OAAO,EAAE,KAAC,sBAAsB,KAAG;KACpC;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,kBAAkB,KAAK,gBAAgB,CAAC,MAAM,KAAK,gBAAgB,CAAC,oBAAoB,KAAK,gBAAgB,CAAC,kBAAkB,EAAE;QAC5J,OAAO,EAAE,KAAC,sBAAsB,KAAG;KACpC;IACD;QACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,MAAM,KAAK,gBAAgB,CAAC,kBAAkB,KAAK,gBAAgB,CAAC,oBAAoB,EAAE;QACpH,OAAO,EAAE,KAAC,eAAe,KAAG;KAC7B;IACD;QACE,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAC,oBAAoB,KAAG;KAClC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/src/_esm/components/ActiveTransactions/ActiveTransactionItem.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import 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()] }));
+};
+//# sourceMappingURL=ActiveTransactionItem.js.map

package/src/_esm/components/ActiveTransactions/ActiveTransactionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactionItem.js","sourceRoot":"","sources":["../../../../../src/components/ActiveTransactions/ActiveTransactionItem.tsx"],"names":[],"mappings":"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"}

package/src/_esm/components/ActiveTransactions/ActiveTransactions.js

@@ -0,0 +1,25 @@
+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] }));
+};
+//# sourceMappingURL=ActiveTransactions.js.map

package/src/_esm/components/ActiveTransactions/ActiveTransactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactions.js","sourceRoot":"","sources":["../../../../../src/components/ActiveTransactions/ActiveTransactions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAuB,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;IACjC,MAAM,eAAe,GAAG,qBAAqB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAE/D,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,eAAe,EAAE,MAAM,GAAG,CAAC,CAAC;IAE/C,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,cAAc,EAAC,WAAW,KAAK,KAAK,aAC3D,KAAC,SAAS,cAAE,CAAC,CAAC,2BAA2B,CAAC,GAAa,EACvD,KAAC,KAAK,IAAC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YACjD,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC5C,KAAC,qBAAqB,IAAe,OAAO,EAAE,OAAO,EAAE,KAAK,UAAhC,OAAO,CAA4B,CAChE,CAAC,GACI,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,aAAa,IAAC,aAAa,QAAC,SAAS,QAAC,OAAO,EAAE,aAAa,YAC1D,CAAC,CAAC,gBAAgB,CAAC,GACN,CACjB,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,33 @@
+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',
+}));
+//# sourceMappingURL=ActiveTransactions.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactions.style.js","sourceRoot":"","sources":["../../../../../src/components/ActiveTransactions/ActiveTransactions.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,QAAQ,IAAI,WAAW,EACvB,cAAc,IAAI,iBAAiB,GACpC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,8BAA8B,EAAE,MAAM,uCAAuC,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;IACtC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC/B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAChC,MAAM,EAAE,EAAE;IACV,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;KACjE;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,eAAe;CACtD,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9B,CAAC,IAAI,8BAA8B,CAAC,IAAI,EAAE,CAAC,EAAE;QAC3C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE;QACT,UAAU,EAAE,MAAM;KACnB;IACD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAC"}

package/src/_esm/components/ActiveTransactions/index.js

@@ -0,0 +1,3 @@
+export * from './ActiveTransactionItem';
+export * from './ActiveTransactions';
+//# sourceMappingURL=index.js.map

package/src/_esm/components/ActiveTransactions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ActiveTransactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/src/_esm/components/AmountInput/AmountInput.js

@@ -0,0 +1,53 @@
+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] })] }));
+};
+//# sourceMappingURL=AmountInput.js.map

package/src/_esm/components/AmountInput/AmountInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+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',
+    },
+}));
+//# sourceMappingURL=AmountInput.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.style.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/AmountInput.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;CACvC,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,MAAM;IACjB,sCAAsC;IACtC,CAAC,IAAI,gBAAgB,CAAC,KAAK,EAAE,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC;IACD,sGAAsG,EACpG;QACE,gBAAgB,EAAE,MAAM;QACxB,MAAM,EAAE,CAAC;KACV;IACH,wBAAwB,EAAE;QACxB,aAAa,EAAE,WAAW;KAC3B;IACD,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAClC,KAAK,EAAE,SAAS;KACjB;IACD,CAAC,IAAI,gBAAgB,CAAC,KAAK,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC3D,mBAAmB,EAAE,OAAO;KAC7B;CACF,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+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',
+}));
+//# sourceMappingURL=AmountInputAdornment.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputAdornment.style.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/AmountInputAdornment.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,OAAO;CAClB,CAAC,CAAC,CAAC"}

package/src/_esm/components/AmountInput/AmountInputEndAdornment.js

@@ -0,0 +1,41 @@
+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 }));
+};
+//# sourceMappingURL=AmountInputEndAdornment.js.map

package/src/_esm/components/AmountInput/AmountInputEndAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputEndAdornment.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAiB,EAAE,EAAE;IACrE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,EAAE,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC;QACvC,IAAI,EAAE;YACJ,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;SACpC;KACF,CAAC,CAAC;IAEH,kGAAkG;IAClG,+DAA+D;IAC/D,MAAM,EAAE,IAAI,EAAE,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAE3E,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;QACpC,IAAI,SAAS,GAAG,KAAK,EAAE,MAAM,CAAC;QAC9B,IACE,KAAK,EAAE,WAAW,CAAC,OAAO,KAAK,YAAY;YAC3C,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,WAAW,EACjB,CAAC;YACD,MAAM,WAAW,GAAG,KAAK,EAAE,MAAM,IAAI,EAAE,CAAC;YACxC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YAC/D,IAAI,WAAW,GAAG,iBAAiB,EAAE,CAAC;gBACpC,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,QAAQ,CACN,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,EACpC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAChE;YACE,WAAW,EAAE,IAAI;SAClB,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,IAAC,QAAQ,EAAC,KAAK,YAC3B,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,CAC3B,KAAC,QAAQ,IACP,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,GACzB,CACH,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CACzC,KAAC,MAAM,IAAC,OAAO,EAAE,SAAS,YAAG,CAAC,CAAC,YAAY,CAAC,GAAU,CACvD,CAAC,CAAC,CAAC,IAAI,GACO,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/AmountInput/AmountInputStartAdornment.js

@@ -0,0 +1,18 @@
+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 } }));
+};
+//# sourceMappingURL=AmountInputStartAdornment.js.map

package/src/_esm/components/AmountInput/AmountInputStartAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputStartAdornment.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,CAAC,MAAM,yBAAyB,GAA4B,CAAC,EACjE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC;QACvC,IAAI,EAAE;YACJ,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;SACpC;KACF,CAAC,CAAC;IAEH,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEtC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI,CACnE,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI,CAC9C,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/AmountInput/FormPriceHelperText.js

@@ -0,0 +1,33 @@
+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] }));
+};
+//# sourceMappingURL=FormPriceHelperText.js.map

package/src/_esm/components/AmountInput/FormPriceHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormPriceHelperText.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/FormPriceHelperText.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC;QACvC,IAAI,EAAE;YACJ,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC;SACpC;KACF,CAAC,CAAC;IAEH,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAE3E,OAAO,CACL,KAAC,uBAAuB,IACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAMhC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC;QACtB,IAAI,EAAE,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC;KAC3C,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAEvE,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAC,KAAK,EACf,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,EAAE,aAEnE,KAAC,UAAU,IACT,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,EAC3D,UAAU,EAAE,GAAG,EACf,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,CAAC,EACb,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,CAAC,EACP,EAAE,EAAE;oBACF,SAAS,EAAE,YAAY;oBACvB,YAAY,EAAE,YAAY;iBAC3B,YAEA,CAAC,CAAC,iBAAiB,EAAE;oBACpB,KAAK,EAAE,oBAAoB;iBAC5B,CAAC,GACS,EACZ,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,CAC3B,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,GAC1B,CACH,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAClB,KAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE,MAAM,EAClB,EAAE,EAAE,IAAI,YAEP,KAAK,CAAC,CAAC,eAAe,EAAE;oBACvB,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC;iBACvD,CAAC,EAAE,GACO,CACd,CAAC,CAAC,CAAC,IAAI,IACO,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/AmountInput/index.js

@@ -0,0 +1,2 @@
+export * from './AmountInput';
+//# sourceMappingURL=index.js.map

package/src/_esm/components/AmountInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/AmountInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}