@lifi/widget 1.0.0

package/components/StepActions/StepActions.style.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const StepIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StepConnector: import("@emotion/styled").StyledComponent<import("@mui/material").StepConnectorProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepLabel: import("@emotion/styled").StyledComponent<import("@mui/material").StepLabelProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepContent: import("@emotion/styled").StyledComponent<import("@mui/material").StepContentProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "square" | "circular" | "rounded" | 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" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/StepActions/StepActions.style.js

@@ -0,0 +1,56 @@
+import { Avatar, StepConnector as MuiStepConnector, StepContent as MuiStepContent, StepLabel as MuiStepLabel, } from '@mui/material';
+import { stepConnectorClasses } from '@mui/material/StepConnector';
+import { stepContentClasses } from '@mui/material/StepContent';
+import { stepLabelClasses } from '@mui/material/StepLabel';
+import { styled } from '@mui/material/styles';
+export const StepIcon = styled('span', {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    width: 12,
+    height: 12,
+    borderRadius: '50%',
+    border: `2px solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+}));
+export const StepConnector = styled(MuiStepConnector, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    marginLeft: theme.spacing(1.875),
+    [`.${stepConnectorClasses.line}`]: {
+        minHeight: 8,
+        borderLeftWidth: 2,
+        borderColor: theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    },
+}));
+export const StepLabel = styled(MuiStepLabel, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error', 'disabled'].includes(prop),
+})(({ theme }) => ({
+    padding: 0,
+    [`.${stepLabelClasses.iconContainer}`]: {
+        paddingLeft: theme.spacing(1.25),
+        paddingRight: theme.spacing(3.25),
+    },
+    [`&.${stepLabelClasses.disabled}`]: {
+        cursor: 'inherit',
+    },
+}));
+export const StepContent = styled(MuiStepContent, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    borderLeft: `2px solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+    marginLeft: theme.spacing(1.875),
+    paddingLeft: theme.spacing(3.875),
+    [`&.${stepContentClasses.last}`]: {
+        borderLeft: 'none',
+        paddingLeft: theme.spacing(4.1875),
+    },
+}));
+export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
+    color: variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+    backgroundColor: 'transparent',
+}));

package/components/StepActions/index.d.ts

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

package/components/StepActions/index.js

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

package/components/StepActions/types.d.ts

@@ -0,0 +1,6 @@
+import { Step } from '@lifinance/sdk';
+import { BoxProps } from '@mui/material';
+export interface StepActionsProps extends BoxProps {
+    step: Step;
+    dense?: boolean;
+}

package/components/StepActions/types.js

@@ -0,0 +1 @@
+export {};

package/components/StepToken.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TokenAmount } from '@lifinance/sdk';
+import { BoxProps } from '@mui/material';
+export declare const StepToken: React.FC<{
+    token: TokenAmount;
+} & BoxProps>;

package/components/StepToken.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, Typography } from '@mui/material';
+import { formatTokenAmount } from '../utils/format';
+import { TextFitter } from './TextFitter';
+export const StepToken = (_a) => {
+    var { token } = _a, other = __rest(_a, ["token"]);
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ maxHeight: 32, textStyle: {
+                            fontWeight: 700,
+                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(Typography, Object.assign({ fontSize: 14, lineHeight: 1, fontWeight: "500", color: "text.secondary", mr: 1, ml: 6 }, { children: token.symbol }))] })));
+};

package/components/SwapButton/ButtonTooltip.d.ts

@@ -0,0 +1,4 @@
+export declare const ButtonTooltip: ({ title, children, }: {
+    title?: string | undefined;
+    children: JSX.Element;
+}) => JSX.Element;

package/components/SwapButton/ButtonTooltip.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+export const ButtonTooltip = ({ title, children, }) => title ? (_jsx(Tooltip, Object.assign({ title: title, placement: "top", enterDelay: 250, arrow: true }, { children: _jsx("span", { children: children }) }))) : (children);

package/components/SwapButton/SwapButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SwapButton: React.FC;

package/components/SwapButton/SwapButton.js

@@ -0,0 +1,77 @@
+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());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainId } from '@lifinance/sdk';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useChains, useCurrentRoute, useHasSufficientBalance, useSetExecutableRoute, useSwapRoutes, } from '../../hooks';
+import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
+import { useWallet } from '../../providers/WalletProvider';
+import { routes } from '../../utils/routes';
+import { ButtonTooltip } from './ButtonTooltip';
+import { Button } from './SwapButton.style';
+export const SwapButton = () => {
+    var _a;
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    const { account, switchChain } = useWallet();
+    const [currentRoute] = useCurrentRoute();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const { hasGasBalanceOnStartChain, hasGasOnCrossChain, hasSufficientBalance, } = useHasSufficientBalance();
+    const [chainId] = useWatch({
+        name: [SwapFormKeyHelper.getChainKey('from')],
+    });
+    const isCurrentChainMatch = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) === account.chainId;
+    const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!account.isActive) {
+            navigate(routes.selectWallet);
+        }
+        else if (!isCurrentChainMatch) {
+            yield switchChain(chainId);
+            // check that the current route exists in the up to date route list
+        }
+        else if (currentRoute &&
+            (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
+            setExecutableRoute(currentRoute);
+            navigate(routes.swap, { state: { routeId: currentRoute.id } });
+        }
+    });
+    const getButtonText = () => {
+        if (account.isActive) {
+            if (!isCurrentChainMatch) {
+                return t(`button.switchChain`);
+            }
+            if (!hasSufficientBalance) {
+                return t(`swap.insufficientFunds`);
+            }
+            if (!hasGasBalanceOnStartChain) {
+                return t(`swap.insufficientGasOnStartChain`);
+            }
+            if (!hasGasOnCrossChain) {
+                return t(`swap.insufficientGasOnDestinationChain`);
+            }
+            return t(`button.swap`);
+        }
+        return t(`button.connectWallet`);
+    };
+    return (_jsx(ButtonTooltip, Object.assign({ title: !hasGasOnCrossChain
+            ? t(`swap.insufficientGasOnDestinationChainTooltip`)
+            : undefined }, { children: _jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
+            // loading={isLoading || isFetching}
+            disabled: (!hasSufficientBalance ||
+                !hasGasBalanceOnStartChain ||
+                !hasGasOnCrossChain ||
+                isLoading ||
+                isFetching) &&
+                isCurrentChainMatch }, { children: getButtonText() })) })));
+};

package/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/Button").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/Button").ButtonClasses> | undefined;
+    color?: "inherit" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "large" | "medium" | 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/components/SwapButton/SwapButton.style.js

@@ -0,0 +1,20 @@
+import { LoadingButton } from '@mui/lab';
+import { loadingButtonClasses } from '@mui/lab/LoadingButton';
+import { buttonClasses } from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils/colors';
+export const Button = styled(LoadingButton)(({ theme }) => ({
+    textTransform: 'none',
+    borderRadius: theme.shape.borderRadiusSecondary,
+    padding: theme.spacing(1.25, 2),
+    fontSize: '1rem',
+    [`&.${buttonClasses.disabled}`]: {
+        color: getContrastAlphaColor(theme, '70%'),
+    },
+    [`&.${loadingButtonClasses.loading}`]: {
+        color: 'transparent',
+    },
+    [`.${loadingButtonClasses.loadingIndicator}`]: {
+        color: getContrastAlphaColor(theme, '70%'),
+    },
+}));

package/components/SwapButton/index.d.ts

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

package/components/SwapButton/index.js

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

package/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/components/SwapInProgress/SwapInProgress.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowForward as ArrowForwardIcon, KeyboardArrowRight as KeyboardArrowRightIcon, } from '@mui/icons-material';
+import { AvatarGroup, Box, Stack } from '@mui/material';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useExecutingRoutes } from '../../hooks';
+import { routes } from '../../utils/routes';
+import { CardTitle } from '../Card';
+import { Card, RouteAvatar, RouteCard } from './SwapInProgress.style';
+export const SwapInProgress = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const executingRoutes = useExecutingRoutes();
+    const handleCardClick = useCallback((routeId) => {
+        navigate(routes.swap, { state: { routeId } });
+    }, [navigate]);
+    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+        return null;
+    }
+    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.inProgress') }), _jsx(Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => (_jsx(RouteCard, { onClick: () => handleCardClick(route.id), avatar: _jsxs(AvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(RouteAvatar, Object.assign({ src: route.fromToken.logoURI, alt: route.fromToken.symbol }, { children: route.fromToken.symbol[0] })), _jsx(RouteAvatar, Object.assign({ src: route.toToken.logoURI, alt: route.toToken.symbol }, { children: route.toToken.symbol[0] }))] })), action: _jsx(KeyboardArrowRightIcon, {}), title: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
+};

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").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").Theme> & {
+    isError?: boolean | 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").SxProps<import("@mui/material").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").Theme>, {}, {}>;
+export declare const RouteAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "square" | "circular" | "rounded" | 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" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SwapInProgress/SwapInProgress.style.js

@@ -0,0 +1,15 @@
+import { Avatar } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { CardContainer, CardHeader } from '../Card';
+export const Card = styled(CardContainer)(({ theme }) => ({
+    borderColor: alpha(theme.palette.secondary.main, 0.48),
+    background: alpha(theme.palette.secondary.main, 0.2),
+}));
+export const RouteCard = styled(CardHeader)(({ theme }) => ({
+    cursor: 'pointer',
+    paddingTop: 0,
+    paddingBottom: 0,
+}));
+export const RouteAvatar = styled(Avatar)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+}));

package/components/SwapInProgress/index.d.ts

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

package/components/SwapInProgress/index.js

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

package/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/components/SwapInput/FormPriceHelperText.js

@@ -0,0 +1,27 @@
+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 { useTokenBalance } from '../../hooks';
+import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { formatTokenPrice } from '../../utils/format';
+export const FormPriceHelperText = ({ formType, selected }) => {
+    const { t } = useTranslation();
+    const [amount, chainId, tokenAddress] = useWatch({
+        name: [
+            SwapFormKeyHelper.getAmountKey(formType),
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token, isLoading, isFetching } = useTokenBalance(chainId, tokenAddress);
+    const fromAmountTokenPrice = formatTokenPrice(amount, token === null || token === void 0 ? void 0 : token.priceUSD);
+    return (_jsxs(FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [_jsx(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 && isFetching ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token ? (_jsx(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] })));
+};

package/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/components/SwapInput/SwapInput.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '@mui/material';
+import { useLayoutEffect, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useChain, useToken } from '../../hooks';
+import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { formatAmount } from '../../utils/format';
+import { fitInputText } from '../../utils/input';
+import { CardContainer, CardTitle } from '../Card';
+import { FormPriceHelperText } from './FormPriceHelperText';
+import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';
+import { SwapInputAdornment } from './SwapInputAdornment';
+export const SwapInput = ({ formType }) => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const ref = useRef(null);
+    const amountKey = SwapFormKeyHelper.getAmountKey(formType);
+    const [amount, chainId, tokenAddress] = useWatch({
+        name: [
+            amountKey,
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain } = useChain(chainId);
+    const { token } = useToken(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setValue(amountKey, formatAmount(value, true));
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        setValue(amountKey, formatAmount(value));
+    };
+    useLayoutEffect(() => {
+        fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+    }, [amount]);
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t('swap.amount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginLeft: 2 } }, { children: token.symbol[0] }))) : null, endAdornment: _jsx(SwapInputAdornment, { formType: formType }), inputProps: {
+                            inputMode: 'decimal',
+                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, required: true }), _jsx(FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
+};

package/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?: "success" | "error" | "primary" | "secondary" | "info" | "warning" | 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/components/SwapInput/SwapInput.style.js

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

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

package/components/SwapInput/SwapInputAdornment.js

@@ -0,0 +1,23 @@
+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 { useTokenBalance } from '../../hooks';
+import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { Button } from './SwapInputAdornment.style';
+export const SwapInputAdornment = ({ formType }) => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token, isLoading, isFetching } = useTokenBalance(chainId, tokenAddress);
+    const handleMax = () => {
+        var _a;
+        setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
+    };
+    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && isFetching ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
+};

package/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" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "large" | "medium" | 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>, {}, {}>;