@lifi/widget 1.0.0

package/components/Header/Header.style.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes" | "color" | "position"> & {
+    classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
+    color?: "inherit" | "transparent" | "default" | "primary" | "secondary" | undefined;
+    enableColorOnDark?: boolean | undefined;
+    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | "key"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    pt?: number | undefined;
+}, {}, {}>;
+export declare const Container: 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> & {
+    sticky?: boolean | undefined;
+}, {}, {}>;

package/components/Header/Header.style.js

@@ -0,0 +1,21 @@
+import { AppBar, Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const HeaderAppBar = styled(AppBar, {
+    shouldForwardProp: (prop) => prop !== 'pt',
+})(({ theme, pt }) => ({
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    minHeight: 48,
+    padding: theme.spacing(pt !== null && pt !== void 0 ? pt : 0, 3, 0, 3),
+}));
+export const Container = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'sticky',
+})(({ theme, sticky }) => ({
+    backgroundColor: theme.palette.background.default,
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+}));

package/components/Header/NavigationHeader.d.ts

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

package/components/Header/NavigationHeader.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowBack as ArrowBackIcon, Settings as SettingsIcon, } from '@mui/icons-material';
+import { Box, IconButton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { routes } from '../../utils/routes';
+import { SwapRoutesUpdateProgress } from '../SwapRoutes/SwapRoutesUpdateProgress';
+import { HeaderAppBar } from './Header.style';
+const backButtonRoutes = [
+    routes.selectWallet,
+    routes.settings,
+    routes.fromToken,
+    routes.toToken,
+    routes.swapRoutes,
+    routes.swap,
+];
+export const NavigationHeader = () => {
+    const { t } = useTranslation();
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+    const handleSettings = () => {
+        navigate(routes.settings);
+    };
+    const handleBack = () => {
+        navigate(-1);
+    };
+    const handleHeaderTitle = () => {
+        switch (pathname) {
+            case routes.selectWallet:
+                return t(`header.selectWallet`);
+            case routes.settings:
+                return t(`header.settings`);
+            case routes.fromToken:
+                return t(`header.from`);
+            case routes.toToken:
+                return t(`header.to`);
+            case routes.swapRoutes:
+                return t(`header.routes`);
+            case routes.swap:
+                return t(`header.swap`);
+            default:
+                return t(`header.swap`);
+        }
+    };
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(pathname) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: pathname === '/' ? 32 : 24, align: pathname === '/' ? 'left' : 'center', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: routes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "/:empty", element: _jsx(Box, { width: 36, height: 48 }) })] })] })));
+};

package/components/Header/WalletHeader.d.ts

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

package/components/Header/WalletHeader.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AccountBalanceWallet as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
+import { Box, IconButton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useWallet } from '../../providers/WalletProvider';
+import { routes } from '../../utils/routes';
+import { HeaderAppBar } from './Header.style';
+export const WalletHeader = () => {
+    const { t } = useTranslation();
+    const { account, disconnect } = useWallet();
+    const walletAddress = account.address
+        ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
+        : null;
+    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0, pt: 1.5 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                    }, mr: 0.5 }, { children: [_jsx(Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), _jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: disconnect }, { children: _jsx(LogoutIcon, {}) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), _jsx(ConnectButton, {})] })) })));
+};
+const ConnectButton = () => {
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+    const connect = () => {
+        navigate(routes.selectWallet);
+    };
+    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: pathname !== routes.selectWallet ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
+};

package/components/Header/index.d.ts

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

package/components/Header/index.js

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

package/components/Input.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Input.js

@@ -0,0 +1,14 @@
+import { InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const Input = styled(InputBase)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    paddingRight: theme.spacing(2),
+    [`.${inputBaseClasses.input}`]: {
+        padding: theme.spacing(1.5, 1, 1.5, 2),
+        height: '2.875em',
+        boxSizing: 'inherit',
+    },
+}));

package/components/LiFiLogo.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export declare const LiFiLogo: React.FC<{
+    variant?: 'icon' | 'full';
+    style?: CSSProperties;
+}>;

package/components/LiFiLogo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactComponent as LiFiFullLogo } from '../icons/LiFiFullLogo.svg';
+import { ReactComponent as LiFiIconLogo } from '../icons/LiFiLogo.svg';
+export const LiFiLogo = ({ variant = 'icon', style }) => {
+    const Component = variant === 'icon' ? LiFiIconLogo : LiFiFullLogo;
+    return _jsx(Component, { style: style, fill: "currentColor" });
+};

package/components/PoweredBy.d.ts

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

package/components/PoweredBy.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import { LiFiLogo } from './LiFiLogo';
+export const PoweredBy = () => {
+    return (_jsx(Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+            flex: 1,
+        } }, { children: _jsxs(Link, Object.assign({ sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })));
+};

package/components/ProgressToNextUpdate/ProgressToNextUpdate.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+export declare const ProgressToNextUpdate: React.FC<{
+    updatedAt: number;
+    timeToUpdate: number;
+    isLoading?: boolean;
+} & IconButtonProps>;

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, IconButton, Tooltip, } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const calculateTime = (updatedAt, timeToUpdate) => {
+    if (updatedAt === 0) {
+        return 0;
+    }
+    const progress = ((Date.now() - updatedAt) / timeToUpdate) * 100;
+    return Math.min(100, progress);
+};
+export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, sx }) => {
+    const { t } = useTranslation();
+    const [value, setValue] = useState(() => calculateTime(updatedAt, timeToUpdate));
+    useEffect(() => {
+        const id = setInterval(() => {
+            const time = calculateTime(updatedAt, timeToUpdate);
+            setValue(calculateTime(updatedAt, timeToUpdate));
+            if (time >= 100) {
+                clearInterval(id);
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    }, [timeToUpdate, updatedAt]);
+    useEffect(() => {
+        if (isLoading) {
+            setValue(0);
+        }
+    }, [isLoading]);
+    return (_jsx(IconButton, Object.assign({ onClick: onClick, sx: sx, disabled: isLoading }, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
+                value: Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000),
+            }), placement: "top", enterDelay: 250, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    placeItems: 'center',
+                    width: 24,
+                    height: 24,
+                } }, { children: [_jsx(CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
+                            position: 'absolute',
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.grey[300]
+                                : theme.palette.grey[800],
+                        }) }), _jsx(CircularProgress, { variant: isLoading ? 'indeterminate' : 'determinate', size: 24, value: value, sx: (theme) => ({
+                            opacity: value === 100 && !isLoading ? 0.5 : 1,
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.primary.main
+                                : theme.palette.primary.light,
+                        }) })] })) })) })));
+};

package/components/ProgressToNextUpdate/index.d.ts

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

package/components/ProgressToNextUpdate/index.js

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

package/components/ReverseTokensButton/ReverseTokensButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ReverseTokensButton: React.FC<{
+    vertical?: boolean;
+}>;

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SwapHoriz as SwapHorizIcon, SwapVert as SwapVertIcon, } from '@mui/icons-material';
+import { useFormContext } from 'react-hook-form';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { IconButton } from './ReverseTokensButton.style';
+export const ReverseTokensButton = ({ vertical, }) => {
+    const { setValue, getValues } = useFormContext();
+    const handleClick = () => {
+        const [fromChain, fromToken, toChain, toToken] = getValues([
+            SwapFormKey.FromChain,
+            SwapFormKey.FromToken,
+            SwapFormKey.ToChain,
+            SwapFormKey.ToToken,
+        ]);
+        if (fromChain && fromToken && toChain && toToken) {
+            setValue(SwapFormKey.FromAmount, '');
+            setValue(SwapFormKey.FromChain, toChain);
+            setValue(SwapFormKey.FromToken, toToken);
+            setValue(SwapFormKey.ToChain, fromChain);
+            setValue(SwapFormKey.ToToken, fromToken);
+        }
+    };
+    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
+};

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const IconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -0,0 +1,14 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { darken, styled } from '@mui/material/styles';
+export const IconButton = styled(MuiIconButton)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid`,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    zIndex: 1200,
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: darken(theme.palette.background.paper, 0.04),
+    },
+}));

package/components/ReverseTokensButton/index.d.ts

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

package/components/ReverseTokensButton/index.js

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

package/components/Select.d.ts

@@ -0,0 +1,3 @@
+export declare const Select: import("@emotion/styled").StyledComponent<import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    dense?: boolean | undefined;
+}, {}, {}>;

package/components/Select.js

@@ -0,0 +1,27 @@
+import { Select as MuiSelect } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { selectClasses } from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+export const Select = styled(MuiSelect, {
+    shouldForwardProp: (prop) => prop !== 'dense',
+})(({ theme, dense }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    [`.${inputBaseClasses.input}`]: {
+        padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`.${selectClasses.icon}`]: {
+        right: 10,
+    },
+    [`.${listItemIconClasses.root}`]: {
+        minWidth: 38,
+    },
+    [`.${outlinedInputClasses.notchedOutline}`]: {
+        display: 'none',
+    },
+}));

package/components/SelectChainAndToken.d.ts

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

package/components/SelectChainAndToken.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useMediaQuery } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { ReverseTokensButton } from '../components/ReverseTokensButton';
+import { SelectTokenButton } from '../components/SelectTokenButton';
+import { SwapFormKey } from '../providers/SwapFormProvider';
+export const SelectChainAndToken = (props) => {
+    const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+    const [fromChain, toChain, fromToken, toToken] = useWatch({
+        name: [
+            SwapFormKey.FromChain,
+            SwapFormKey.ToChain,
+            SwapFormKey.FromToken,
+            SwapFormKey.ToToken,
+        ],
+    });
+    const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), _jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: -1.25 }, { children: _jsx(ReverseTokensButton, { vertical: !isCompact }) })), _jsx(SelectTokenButton, { formType: "to", compact: isCompact })] })));
+};

package/components/SelectTokenButton/SelectTokenButton.d.ts

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

package/components/SelectTokenButton/SelectTokenButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import { Avatar, Skeleton } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useChain, useToken } from '../../hooks';
+import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { routes } from '../../utils/routes';
+import { CardTitle } from '../Card';
+import { CardContainer } from '../Card/CardContainer';
+import { Card, SelectTokenCardHeader } from './SelectTokenButton.style';
+export const SelectTokenButton = ({ formType, compact }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            SwapFormKeyHelper.getChainKey(formType),
+            SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain, isLoading: isChainLoading } = useChain(chainId);
+    const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
+    const handleClick = () => {
+        navigate(formType === 'from' ? routes.fromToken : routes.toToken);
+    };
+    const isSelected = !!(chain && token);
+    return (_jsx(CardContainer, Object.assign({ flex: 1 }, { children: _jsxs(Card, Object.assign({ onClick: handleClick, elevation: 0 }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) : null, action: !compact ? _jsx(KeyboardArrowRightIcon, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })) })));
+};

package/components/SelectTokenButton/SelectTokenButton.style.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const Card: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes"> & {
+    classes?: Partial<import("@mui/material").CardClasses> | undefined;
+    raised?: boolean | 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 | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "variant" | "square" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SelectTokenCardHeader: 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> & {
+    selected?: boolean | undefined;
+    compact?: boolean | undefined;
+}, {}, {}>;

package/components/SelectTokenButton/SelectTokenButton.style.js

@@ -0,0 +1,31 @@
+import { Card as MuiCard } from '@mui/material';
+import { cardHeaderClasses } from '@mui/material/CardHeader';
+import { styled } from '@mui/material/styles';
+import { CardHeader } from '../Card';
+export const Card = styled(MuiCard)(({ theme }) => ({
+    borderRadius: 0,
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+export const SelectTokenCardHeader = styled(CardHeader, {
+    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
+})(({ theme, selected, compact }) => ({
+    height: 64,
+    [`.${cardHeaderClasses.title}`]: {
+        color: selected
+            ? theme.palette.text.primary
+            : theme.palette.text.secondary,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 244,
+        fontWeight: selected ? 500 : 400,
+    },
+    [`.${cardHeaderClasses.subheader}`]: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 244,
+    },
+}));

package/components/SelectTokenButton/index.d.ts

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

package/components/SelectTokenButton/index.js

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

package/components/StepActions/StepActions.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Step } from '@lifinance/sdk';
+import { StepActionsProps } from './types';
+export declare const StepActions: React.FC<StepActionsProps>;
+export declare const StepDetailsContent: React.FC<{
+    step: Step;
+}>;
+export declare const CrossStepDetailsLabel: React.FC<{
+    step: Step;
+}>;
+export declare const SwapStepDetailsLabel: React.FC<{
+    step: Step;
+}>;

package/components/StepActions/StepActions.js

@@ -0,0 +1,49 @@
+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 { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
+import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useChains } from '../../hooks';
+import { formatTokenAmount } from '../../utils/format';
+import { LiFiLogo } from '../LiFiLogo';
+import { StepAvatar, StepConnector, StepContent, StepIcon, StepLabel, } from './StepActions.style';
+export const StepActions = (_a) => {
+    var _b;
+    var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
+    const StepDetailsLabel = step.type === 'cross' || step.type === 'lifi'
+        ? CrossStepDetailsLabel
+        : SwapStepDetailsLabel;
+    const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
+    return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: step.type === 'lifi' ? 'square' : 'circular', src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+                            ? 'LI.FI Smart Contract'
+                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIcon }, { children: _jsx(StepDetailsLabel, { step: step }) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
+};
+export const StepDetailsContent = ({ step }) => {
+    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount(step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
+};
+export const CrossStepDetailsLabel = ({ step }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    return (_jsx(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.crossStepDetails', {
+            from: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            to: (_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.name,
+            tool: step.toolDetails.name,
+        }) })));
+};
+export const SwapStepDetailsLabel = ({ step }) => {
+    const { t } = useTranslation();
+    return (_jsx(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.swapStepDetails', {
+            value: step.toolDetails.name,
+        }) })));
+};