@lifi/widget 1.13.2 → 1.13.3

package/cjs/components/SwapButton/SwapButton.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const utils_1 = require("../../utils");
+const SwapButton_style_1 = require("./SwapButton.style");
+const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
+    var _a;
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useChains)();
+    const config = (0, WidgetProvider_1.useWidgetConfig)();
+    const { account, switchChain, connect: walletConnect } = (0, WalletProvider_1.useWallet)();
+    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
+    const [chainId] = (0, react_hook_form_1.useWatch)({
+        name: [SwapFormProvider_1.SwapFormKeyHelper.getChainKey('from')],
+    });
+    // Allow switching chain only if execution is not started
+    const switchChainAllowed = ((_a = getChainById(chainId || sdk_1.ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
+        currentRoute &&
+        !currentRoute.steps.some((step) => step.execution);
+    const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!account.isActive) {
+            if (config.walletManagement) {
+                yield walletConnect();
+            }
+            else {
+                navigate(utils_1.navigationRoutes.selectWallet);
+            }
+        }
+        else if (switchChainAllowed) {
+            yield switchChain(chainId);
+            // check that the current route exists in the up to date route list
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    });
+    const getButtonText = () => {
+        if (account.isActive) {
+            if (switchChainAllowed) {
+                return t(`button.switchChain`);
+            }
+            if (!currentRoute) {
+                return t(`button.swap`);
+            }
+            return text || t(`button.reviewSwap`);
+        }
+        return t(`button.connectWallet`);
+    };
+    return ((0, jsx_runtime_1.jsx)(SwapButton_style_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
+        // loading={isLoading || isFetching}
+        disabled: (insufficientFunds || !!insufficientGas.length || loading) &&
+            currentRoute &&
+            !switchChainAllowed, fullWidth: true }, { children: getButtonText() })));
+};
+exports.SwapButton = SwapButton;

package/cjs/components/SwapButton/SwapButton.style.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    classes?: (Partial<import("@mui/material").ButtonClasses> & {
+        root?: string | undefined;
+        loading?: string | undefined;
+        loadingIndicator?: string | undefined;
+        loadingIndicatorCenter?: string | undefined;
+        loadingIndicatorStart?: string | undefined;
+        loadingIndicatorEnd?: string | undefined;
+        endIconLoadingEnd?: string | undefined;
+        startIconLoadingStart?: string | undefined;
+    }) | undefined;
+    loading?: boolean | undefined;
+    loadingIndicator?: import("react").ReactNode;
+    loadingPosition?: "center" | "end" | "start" | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & Omit<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes">, "classes"> & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant" | "loading" | "loadingIndicator" | "loadingPosition"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/cjs/components/SwapButton/SwapButton.style.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const lab_1 = require("@mui/lab");
+const LoadingButton_1 = require("@mui/lab/LoadingButton");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.Button = (0, styles_1.styled)(lab_1.LoadingButton)(({ theme }) => ({
+    [`&.${LoadingButton_1.loadingButtonClasses.loading}`]: {
+        color: 'transparent',
+    },
+    [`.${LoadingButton_1.loadingButtonClasses.loadingIndicator}`]: {
+        color: (0, utils_1.getContrastAlphaColor)(theme, '70%'),
+    },
+}));

package/cjs/components/SwapButton/index.d.ts

@@ -0,0 +1 @@
+export { SwapButton } from './SwapButton';

package/cjs/components/SwapButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapButton = void 0;
+var SwapButton_1 = require("./SwapButton");
+Object.defineProperty(exports, "SwapButton", { enumerable: true, get: function () { return SwapButton_1.SwapButton; } });

package/cjs/components/SwapButton/types.d.ts

@@ -0,0 +1,7 @@
+import { Route } from '@lifi/sdk';
+export interface SwapButtonProps {
+    onClick?(): void;
+    currentRoute?: Route;
+    text?: string;
+    loading?: boolean;
+}

package/cjs/components/SwapButton/types.js

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

package/cjs/components/SwapInProgress/SwapInProgress.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export declare const SwapInProgress: React.FC<BoxProps>;

package/cjs/components/SwapInProgress/SwapInProgress.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapInProgress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const TokenAvatar_1 = require("../TokenAvatar");
+const SwapInProgress_style_1 = require("./SwapInProgress.style");
+const SwapInProgress = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { account } = (0, WalletProvider_1.useWallet)();
+    const executingRoutes = (0, stores_1.useExecutingRoutes)(account.address);
+    const handleCardClick = (0, react_1.useCallback)((routeId) => {
+        navigate(utils_1.navigationRoutes.swapExecution, { state: { routeId } });
+    }, [navigate]);
+    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(SwapInProgress_style_1.ProgressCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.inProgress') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => ((0, jsx_runtime_1.jsx)(SwapInProgress_style_1.RouteCard, { onClick: () => handleCardClick(route.id), avatar: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, Object.assign({ 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 })] })), action: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}), title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
+};
+exports.SwapInProgress = SwapInProgress;

package/cjs/components/SwapInProgress/SwapInProgress.style.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    variant?: "default" | "error" | undefined;
+    dense?: boolean | undefined;
+    indented?: boolean | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+}, {}, {}>;
+export declare const RouteCard: import("@emotion/styled").StyledComponent<{
+    action?: import("react").ReactNode;
+    avatar?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
+    disableTypography?: boolean | undefined;
+    subheader?: import("react").ReactNode;
+    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    title?: import("react").ReactNode;
+    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/cjs/components/SwapInProgress/SwapInProgress.style.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteCard = exports.ProgressCard = void 0;
+const styles_1 = require("@mui/material/styles");
+const Card_1 = require("../Card");
+exports.ProgressCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
+    borderColor: (0, styles_1.alpha)(theme.palette.secondary.main, 0.48),
+    background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.2),
+    '&:hover': {
+        background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.2),
+    },
+}));
+exports.RouteCard = (0, styles_1.styled)(Card_1.CardHeader)(({ theme }) => ({
+    cursor: 'pointer',
+    paddingTop: 0,
+    paddingBottom: 0,
+}));

package/cjs/components/SwapInProgress/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapInProgress';

package/cjs/components/SwapInProgress/index.js

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

package/cjs/components/SwapInput/FormPriceHelperText.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+export declare const FormPriceHelperText: React.FC<SwapFormTypeProps & {
+    selected: boolean;
+}>;

package/cjs/components/SwapInput/FormPriceHelperText.js

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

package/cjs/components/SwapInput/SwapInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+export declare const SwapInput: React.FC<SwapFormTypeProps>;

package/cjs/components/SwapInput/SwapInput.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapInput = 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 SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const TokenAvatar_1 = require("../TokenAvatar");
+const FormPriceHelperText_1 = require("./FormPriceHelperText");
+const SwapInput_style_1 = require("./SwapInput.style");
+const SwapInputAdornment_1 = require("./SwapInputAdornment");
+const SwapInput = ({ formType }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const ref = (0, react_1.useRef)(null);
+    const amountKey = SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType);
+    const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            amountKey,
+            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = (0, hooks_1.useChain)(chainId);
+    const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setValue(amountKey, (0, utils_1.formatAmount)(value, true));
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        setValue(amountKey, (0, utils_1.formatAmount)(value));
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        (0, utils_1.fitInputText)(SwapInput_style_1.maxInputFontSize, SwapInput_style_1.minInputFontSize, ref.current);
+    }, [amount]);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.amount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginLeft: 2 } })) : null, endAdornment: (0, jsx_runtime_1.jsx)(SwapInputAdornment_1.SwapInputAdornment, { formType: formType }), inputProps: {
+                            inputMode: 'decimal',
+                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
+};
+exports.SwapInput = SwapInput;

package/cjs/components/SwapInput/SwapInput.style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const maxInputFontSize = 24;
+export declare const minInputFontSize = 14;
+export declare const FormControl: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    focused?: boolean | undefined;
+    hiddenLabel?: boolean | undefined;
+    margin?: "none" | "normal" | "dense" | undefined;
+    required?: boolean | undefined;
+    size?: "small" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "filled" | "standard" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "error" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/SwapInput/SwapInput.style.js

@@ -0,0 +1,33 @@
+"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,
+    // 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/SwapInput/SwapInputAdornment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/cjs/components/SwapInput/SwapInputAdornment.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapInputAdornment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
+const SwapInputAdornment = ({ formType }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token, isLoading } = (0, hooks_1.useTokenBalance)(chainId, tokenAddress);
+    const handleMax = () => {
+        var _a;
+        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
+};
+exports.SwapInputAdornment = SwapInputAdornment;

package/cjs/components/SwapInput/SwapInputAdornment.style.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/SwapInput/SwapInputAdornment.style.js

@@ -0,0 +1,23 @@
+"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 }) => ({
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    color: theme.palette.text.secondary,
+    padding: theme.spacing(0.125, 1, 0.375, 1),
+    lineHeight: 1,
+    fontSize: '0.875rem',
+    minWidth: 'unset',
+    '&:hover': {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.primary.main
+            : theme.palette.text.primary,
+        borderColor: theme.palette.mode === 'light'
+            ? (0, styles_1.lighten)(theme.palette.primary.main, 0.5)
+            : theme.palette.text.secondary,
+    },
+}));

package/cjs/components/SwapInput/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapInput';

package/cjs/components/SwapInput/index.js

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

package/cjs/components/SwapRouteCard/SwapRouteCard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { SwapRouteCardProps } from './types';
+export declare const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps>;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -0,0 +1,42 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRouteCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../Card");
+const StepActions_1 = require("../StepActions");
+const Token_1 = require("../Token");
+const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
+const SwapRouteCard = (_a) => {
+    var _b, _c;
+    var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
+        ? t(`swap.tags.${route.tags[0].toLowerCase()}`).toUpperCase()
+        : t(`swap.tags.general`).toUpperCase();
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: dense, indented: true }, other, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                ? route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mb: 2 }, step.id)))
+                : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
+                                        .map((step) => step.estimate.executionDuration)
+                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
+};
+exports.SwapRouteCard = SwapRouteCard;