@lifi/widget 1.0.0

package/pages/SwapPage/StatusBottomSheet.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useEffect, useMemo, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { BottomSheet } from '../../components/BottomSheet';
+import { StepToken } from '../../components/StepToken';
+import { useChains, useTokenBalance } from '../../hooks';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
+import { Button } from './SwapPage.style';
+import { getProcessMessage } from './utils';
+export const StatusBottomSheet = ({ status, route, }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const ref = useRef(null);
+    const { getChainById } = useChains();
+    const { token, refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
+    const { setValue } = useFormContext();
+    const clearFromAmount = () => {
+        refetchBalance(route.fromChainId, route.fromToken.address);
+        setValue(SwapFormKey.FromAmount, '');
+    };
+    const handleDone = () => {
+        clearFromAmount();
+        navigate(-1);
+    };
+    const handleClose = () => {
+        var _a;
+        clearFromAmount();
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
+    };
+    const { title, message } = useMemo(() => {
+        var _a, _b;
+        switch (status) {
+            case 'success':
+                return {
+                    title: t('swap.success.title.fundsReceived'),
+                    message: t('swap.success.message.fundsReceived', {
+                        amount: token === null || token === void 0 ? void 0 : token.amount,
+                        tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
+                        chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                    }),
+                };
+            case 'error': {
+                const step = route.steps.find((step) => {
+                    var _a;
+                    return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
+                });
+                const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+                if (!step || !process) {
+                    return {};
+                }
+                return getProcessMessage(t, getChainById, step, process);
+            }
+            default:
+                return {};
+        }
+    }, [
+        getChainById,
+        route.steps,
+        route.toChainId,
+        status,
+        t,
+        token === null || token === void 0 ? void 0 : token.amount,
+        token === null || token === void 0 ? void 0 : token.symbol,
+    ]);
+    useEffect(() => {
+        var _a, _b;
+        if ((status === 'success' || status === 'error') &&
+            !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
+            refetchBalance();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
+        }
+    }, [refetchBalance, status]);
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsxs(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })), status === 'success' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') }))) : null] })) })));
+};

package/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material';
+import { RouteExecutionStatus } from '../../hooks';
+export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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<Theme>, {}, {}>;
+export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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<Theme> & {
+    status: RouteExecutionStatus;
+}, {}, {}>;
+export declare const iconStyles: {
+    position: string;
+    fontSize: string;
+};

package/pages/SwapPage/StatusBottomSheet.style.js

@@ -0,0 +1,32 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const getStatusColor = (status, theme) => {
+    switch (status) {
+        case 'success':
+            return theme.palette.success.main;
+        case 'error':
+            return theme.palette.error.main;
+        default:
+            return theme.palette.primary.main;
+    }
+};
+export const IconContainer = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+    position: 'relative',
+}));
+export const IconCircle = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'status',
+})(({ theme, status }) => ({
+    border: `3px solid ${getStatusColor(status, theme)}`,
+    borderRadius: '50%',
+    width: 64,
+    height: 64,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+}));
+export const iconStyles = {
+    position: 'absolute',
+    fontSize: '2.5rem',
+};

package/pages/SwapPage/StepDivider.d.ts

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

package/pages/SwapPage/StepDivider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from '@mui/material';
+import { Container } from './StepDivider.style';
+export const StepDivider = () => {
+    return (_jsx(Container, { children: _jsx(Divider, { orientation: "vertical", flexItem: true }) }));
+};

package/pages/SwapPage/StepDivider.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | 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" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SwapPage/StepDivider.style.js

@@ -0,0 +1,8 @@
+import { Container as MuiContainer } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Container = styled(MuiContainer)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: theme.spacing(2),
+}));

package/pages/SwapPage/StepItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Step, TokenAmount } from '@lifinance/sdk';
+export declare const StepItem: React.FC<{
+    step: Step;
+    fromToken?: TokenAmount;
+    toToken?: TokenAmount;
+}>;

package/pages/SwapPage/StepItem.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { StepActions } from '../../components/StepActions';
+import { StepToken } from '../../components/StepToken';
+import { ExecutionItem } from './ExecutionItem';
+import { StepTimer } from './StepTimer';
+export const StepItem = ({ step, fromToken, toToken }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const stepHasError = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
+    const getCardTitle = () => {
+        switch (step.type) {
+            case 'lifi':
+                return t('swap.stepSwapAndBridge');
+            case 'swap':
+                return t('swap.stepSwap');
+            case 'cross':
+                return t('swap.stepBridge');
+            default:
+                return t('swap.stepSwap');
+        }
+    };
+    return (_jsxs(CardContainer, Object.assign({ isError: stepHasError }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, { children: _jsx(StepTimer, { step: step }) })] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(StepToken, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => (_jsx(ExecutionItem, { step: step, process: process }, index))), toToken ? _jsx(StepToken, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+};

package/pages/SwapPage/StepTimer.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Step } from '@lifinance/sdk';
+export declare const StepTimer: React.FC<{
+    step: Step;
+}>;

package/pages/SwapPage/StepTimer.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTimer } from 'react-timer-hook';
+const getExpiryTimestamp = (step) => {
+    var _a, _b, _c;
+    return new Date(((_c = (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process[0]) === null || _b === void 0 ? void 0 : _b.startedAt) !== null && _c !== void 0 ? _c : Date.now()) +
+        step.estimate.executionDuration * 1000);
+};
+export const StepTimer = ({ step }) => {
+    var _a;
+    const { t } = useTranslation();
+    const [isExpired, setExpired] = useState(false);
+    const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
+    const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
+    const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
+        autoStart: false,
+        expiryTimestamp,
+        onExpire: () => setExpired(true),
+    });
+    useEffect(() => {
+        if (isExpired || !step.execution) {
+            return;
+        }
+        if (!isExecutionStarted) {
+            setExecutionStarted(true);
+            restart(getExpiryTimestamp(step));
+        }
+        const shouldBePaused = step.execution.process.some((process) => process.status === 'ACTION_REQUIRED' ||
+            process.status === 'CHAIN_SWITCH_REQUIRED' ||
+            process.status === 'FAILED');
+        if (isRunning && shouldBePaused) {
+            pause();
+        }
+        else if (!isRunning && !shouldBePaused) {
+            resume();
+        }
+    }, [
+        expiryTimestamp,
+        isExecutionStarted,
+        isExpired,
+        isRunning,
+        pause,
+        restart,
+        resume,
+        step,
+    ]);
+    if (!isExecutionStarted) {
+        return (_jsx(_Fragment, { children: t('swap.estimatedTime', {
+                value: (step.estimate.executionDuration / 60).toFixed(0),
+            }) }));
+    }
+    if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE') {
+        return null;
+    }
+    return isExpired ? (_jsx(_Fragment, { children: t('swap.networkIsBusy') })) : (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    _jsx(_Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
+};

package/pages/SwapPage/SwapPage.d.ts

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

package/pages/SwapPage/SwapPage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useRouteExecution } from '../../hooks';
+import { StatusBottomSheet } from './StatusBottomSheet';
+import { StepDivider } from './StepDivider';
+import { StepItem } from './StepItem';
+import { Button, Container } from './SwapPage.style';
+export const SwapPage = () => {
+    const { t } = useTranslation();
+    const { state } = useLocation();
+    const navigate = useNavigate();
+    const { route, status, executeRoute, restartRoute, removeRoute } = useRouteExecution(state.routeId);
+    const handleRemoveRoute = () => {
+        removeRoute();
+        navigate(-1);
+    };
+    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, fromToken: index === 0
+                            ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : undefined, toToken: index === steps.length - 1
+                            ? Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id))), status === 'idle' ? (_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: executeRoute }, { children: t('button.startSwap') }))) : null, status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: restartRoute }, { children: t('button.restartSwap') })), _jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))] })) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
+};

package/pages/SwapPage/SwapPage.style.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | 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" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+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>, {}, {}>;

package/pages/SwapPage/SwapPage.style.js

@@ -0,0 +1,12 @@
+import { Button as MuiButton, Container as MuiContainer } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Container = styled(MuiContainer)(({ theme }) => ({
+    padding: theme.spacing(1, 3, 3, 3),
+}));
+export const Button = styled(MuiButton)(({ theme }) => ({
+    textTransform: 'none',
+    borderRadius: theme.shape.borderRadiusSecondary,
+    padding: theme.spacing(1.25, 2),
+    fontSize: '1rem',
+    marginTop: theme.spacing(2),
+}));

package/pages/SwapPage/index.d.ts

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

package/pages/SwapPage/index.js

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

package/pages/SwapPage/utils.d.ts

@@ -0,0 +1,6 @@
+import { EVMChain, Process, Step } from '@lifinance/sdk';
+import { TFunction } from 'react-i18next';
+export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+    title?: string;
+    message?: string;
+};

package/pages/SwapPage/utils.js

@@ -0,0 +1,85 @@
+import { LifiErrorCode, MetaMaskProviderErrorCode, } from '@lifinance/sdk';
+import { formatTokenAmount } from '../../utils/format';
+const formatProcessMessage = (initialMessage, args = {}) => {
+    return Object.keys(args).reduce((message, key) => {
+        return message.replace(`{${key}}`, args[key]);
+    }, initialMessage);
+};
+const processMessages = {
+    TOKEN_ALLOWANCE: {
+        STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
+        DONE: (t) => t(`swap.process.tokenAllowance.done`),
+    },
+    SWITCH_CHAIN: {
+        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        DONE: (t) => t(`swap.process.switchChain.done`),
+    },
+    SWAP: {
+        STARTED: (t) => t(`swap.process.swap.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
+        PENDING: (t) => t(`swap.process.swap.pending`),
+        DONE: (t) => t(`swap.process.swap.done`),
+    },
+    CROSS_CHAIN: {
+        STARTED: (t) => t(`swap.process.crossChain.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
+        PENDING: (t) => t(`swap.process.crossChain.pending`),
+        DONE: (t) => t(`swap.process.crossChain.done`),
+    },
+    RECEIVING_CHAIN: {
+        PENDING: (t) => t(`swap.process.receivingChain.pending`),
+        DONE: (t) => t(`swap.process.receivingChain.done`),
+    },
+    TRANSACTION: {},
+};
+export function getProcessMessage(t, getChainById, step, process) {
+    var _a, _b, _c, _d;
+    if (process.error && process.status === 'FAILED') {
+        const getTransactionNotSentMessage = () => {
+            var _a, _b;
+            return t(`swap.error.message.transactionNotSent`, {
+                amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+                tokenSymbol: step.action.fromToken.symbol,
+                chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+            });
+        };
+        let title = '';
+        let message = '';
+        switch (process.error.code) {
+            case LifiErrorCode.ChainSwitchError:
+                title = t(`swap.error.title.chainSwitch`);
+                message = getTransactionNotSentMessage();
+                break;
+            case LifiErrorCode.TransactionFailed:
+                title = t(`swap.error.title.transactionFailed`);
+                message = t(`swap.error.message.transactionFailed`);
+                break;
+            case LifiErrorCode.TransactionUnderpriced:
+                title = t(`swap.error.title.transactionUnderpriced`);
+                message = getTransactionNotSentMessage();
+                break;
+            case LifiErrorCode.TransactionUnprepared:
+                title = t(`swap.error.title.transactionUnprepared`);
+                message = getTransactionNotSentMessage();
+                break;
+            case MetaMaskProviderErrorCode.userRejectedRequest:
+                title = t(`swap.error.title.userRejectedSignatureRequest`);
+                message = t(`swap.error.message.signatureRequired`, {
+                    amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+                    tokenSymbol: step.action.fromToken.symbol,
+                    chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+                });
+                break;
+            default:
+                title = t(`swap.error.title.unknown`);
+                if (process.txLink) {
+                    message = t(`swap.error.message.transactionFailed`);
+                }
+                break;
+        }
+        return { title, message };
+    }
+    const title = (_d = (_c = processMessages[process.type])[process.status]) === null || _d === void 0 ? void 0 : _d.call(_c, t);
+    return { title };
+}

package/pages/SwapRoutesPage/SwapRoutesPage.d.ts

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

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { SwapRouteCard } from '../../components/SwapRouteCard';
+import { useCurrentRoute, useSetExecutableRoute, useSwapRoutes, } from '../../hooks';
+import { routes } from '../../utils/routes';
+import { Stack } from './SwapRoutesPage.style';
+export const SwapRoutesPage = () => {
+    const navigate = useNavigate();
+    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const [currentRoute] = useCurrentRoute();
+    const setExecutableRoute = useSetExecutableRoute();
+    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
+        // TODO: make no routes message
+        return null;
+    }
+    const handleRouteClick = (route) => {
+        setExecutableRoute(route);
+        navigate(routes.swap, { state: { routeId: route.id }, replace: true });
+    };
+    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: isLoading || isFetching
+            ? Array.from({ length: 3 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 196, sx: { borderRadius: 1 } }, index)))
+            : swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, active: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id) === route.id, onClick: () => handleRouteClick(route) }, route.id))) })));
+};

package/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    ref?: import("react").Ref<unknown> | undefined;
+    children?: import("react").ReactNode;
+    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
+    divider?: import("react").ReactNode;
+    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" | "direction" | ("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") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SwapRoutesPage/SwapRoutesPage.style.js

@@ -0,0 +1,6 @@
+import { Stack as MuiStack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Stack = styled(MuiStack)(({ theme }) => ({
+    position: 'relative',
+    padding: theme.spacing(2, 3, 3, 3),
+}));

package/pages/SwapRoutesPage/index.d.ts

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

package/pages/SwapRoutesPage/index.js

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

package/providers/SwapFormProvider/SwapFormProvider.d.ts

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

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormProvider, useForm } from 'react-hook-form';
+import { useWidgetConfig } from '../WidgetProvider';
+import { SwapFormKey } from './types';
+const defaultValues = {
+    [SwapFormKey.FromAmount]: '',
+    [SwapFormKey.GasPrice]: 'normal',
+    [SwapFormKey.Slippage]: '3',
+    [SwapFormKey.SearchTokensFilter]: '',
+};
+export const SwapFormProvider = ({ children, }) => {
+    var _a;
+    const { fromChain, fromToken, fromAmount, toChain, toToken } = useWidgetConfig();
+    const methods = useForm({
+        defaultValues: Object.assign(Object.assign({}, defaultValues), { fromChain,
+            fromToken, fromAmount: (_a = fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()) !== null && _a !== void 0 ? _a : defaultValues.fromAmount, toChain,
+            toToken }),
+    });
+    return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
+};

package/providers/SwapFormProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SwapFormProvider';
+export * from './types';

package/providers/SwapFormProvider/index.js

@@ -0,0 +1,2 @@
+export * from './SwapFormProvider';
+export * from './types';

package/providers/SwapFormProvider/types.d.ts

@@ -0,0 +1,44 @@
+export declare enum SwapFormKey {
+    BridgePrioritization = "bridgePrioritization",
+    EnabledBridges = "enabledBridges",
+    EnabledExchanges = "enabledExchanges",
+    FromAmount = "fromAmount",
+    FromChain = "fromChain",
+    FromToken = "fromToken",
+    GasPrice = "gasPrice",
+    IsAddressConfirmed = "isAddressConfirmed",
+    IsSendToRecipient = "isSendToRecipient",
+    RecipientsAddress = "recipientsAddress",
+    RoutePriority = "routePriority",
+    SearchTokensFilter = "searchTokensFilter",
+    Slippage = "slippage",
+    ToChain = "toChain",
+    ToToken = "toToken"
+}
+export declare type SwapFormValues = {
+    [SwapFormKey.BridgePrioritization]: string;
+    [SwapFormKey.EnabledBridges]: string[];
+    [SwapFormKey.EnabledExchanges]: string[];
+    [SwapFormKey.FromAmount]: string;
+    [SwapFormKey.FromChain]: number;
+    [SwapFormKey.FromToken]: string;
+    [SwapFormKey.GasPrice]: string;
+    [SwapFormKey.IsAddressConfirmed]: boolean;
+    [SwapFormKey.IsSendToRecipient]: boolean;
+    [SwapFormKey.RecipientsAddress]: string;
+    [SwapFormKey.RoutePriority]: string;
+    [SwapFormKey.SearchTokensFilter]: string;
+    [SwapFormKey.Slippage]: string;
+    [SwapFormKey.ToChain]: number;
+    [SwapFormKey.ToToken]: string;
+};
+export declare type SwapFormDirection = 'from' | 'to';
+export declare const SwapFormKeyHelper: {
+    getChainKey: (formType: SwapFormDirection) => 'fromChain' | 'toChain';
+    getTokenKey: (formType: SwapFormDirection) => 'fromToken' | 'toToken';
+    getAmountKey: (formType: SwapFormDirection) => 'fromAmount' | 'toAmount';
+    getSearchTokensFilterKey: (formType: SwapFormDirection) => string;
+};
+export interface SwapFormTypeProps {
+    formType: SwapFormDirection;
+}