@lifi/widget 1.14.1 → 1.16.0

package/App.js

@@ -6,7 +6,9 @@ import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { NotFound } from './components/NotFound';
 import { PoweredBy } from './components/PoweredBy';
+import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
 import { MainPage } from './pages/MainPage';
+import { SelectChainPage } from './pages/SelectChainPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
@@ -39,10 +41,28 @@ const AppRoutes = () => {
             path: navigationRoutes.toToken,
             element: _jsx(SelectTokenPage, { formType: "to" }),
         },
+        ...[
+            navigationRoutes.fromChain,
+            `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectChainPage, { formType: "from" }),
+        })),
+        ...[
+            navigationRoutes.toChain,
+            `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectChainPage, { formType: "to" }),
+        })),
         {
             path: navigationRoutes.swapRoutes,
             element: _jsx(SwapRoutesPage, {}),
         },
+        {
+            path: navigationRoutes.activeSwaps,
+            element: _jsx(ActiveSwapsPage, {}),
+        },
         {
             path: navigationRoutes.swapHistory,
             element: _jsx(SwapHistoryPage, {}),
@@ -62,6 +82,7 @@ const AppRoutes = () => {
         ...[
             navigationRoutes.swapExecution,
             `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+            `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
         ].map((path) => ({
             path,
             element: _jsx(SwapPage, {}),

package/cjs/App.js

@@ -9,7 +9,9 @@ const Header_1 = require("./components/Header");
 const Initializer_1 = require("./components/Initializer");
 const NotFound_1 = require("./components/NotFound");
 const PoweredBy_1 = require("./components/PoweredBy");
+const ActiveSwapsPage_1 = require("./pages/ActiveSwapsPage");
 const MainPage_1 = require("./pages/MainPage");
+const SelectChainPage_1 = require("./pages/SelectChainPage");
 const SelectTokenPage_1 = require("./pages/SelectTokenPage");
 const SelectWalletPage_1 = require("./pages/SelectWalletPage");
 const SettingsPage_1 = require("./pages/SettingsPage");
@@ -44,10 +46,28 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.toToken,
             element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
         },
+        ...[
+            utils_1.navigationRoutes.fromChain,
+            `${utils_1.navigationRoutes.fromToken}/${utils_1.navigationRoutes.fromChain}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
+        })),
+        ...[
+            utils_1.navigationRoutes.toChain,
+            `${utils_1.navigationRoutes.toToken}/${utils_1.navigationRoutes.toChain}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
+        })),
         {
             path: utils_1.navigationRoutes.swapRoutes,
             element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
         },
+        {
+            path: utils_1.navigationRoutes.activeSwaps,
+            element: (0, jsx_runtime_1.jsx)(ActiveSwapsPage_1.ActiveSwapsPage, {}),
+        },
         {
             path: utils_1.navigationRoutes.swapHistory,
             element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
@@ -67,6 +87,7 @@ const AppRoutes = () => {
         ...[
             utils_1.navigationRoutes.swapExecution,
             `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}`,
+            `${utils_1.navigationRoutes.activeSwaps}/${utils_1.navigationRoutes.swapExecution}`,
         ].map((path) => ({
             path,
             element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),

package/cjs/components/ActiveSwaps/ActiveSwapItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ActiveSwapItem: React.FC<{
+    routeId: string;
+    dense?: boolean;
+}>;

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveSwapItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const StepTimer_1 = require("../Step/StepTimer");
+const TokenAvatar_1 = require("../TokenAvatar");
+const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
+const ActiveSwapItem = ({ routeId, dense }) => {
+    var _a;
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { route, status } = (0, hooks_1.useRouteExecution)(routeId, true);
+    // TODO: replace with ES2023 findLast
+    const lastActiveStep = route === null || route === void 0 ? void 0 : route.steps.slice().reverse().find((step) => step.execution);
+    const lastActiveProcess = (_a = lastActiveStep === null || lastActiveStep === void 0 ? void 0 : lastActiveStep.execution) === null || _a === void 0 ? void 0 : _a.process.at(-1);
+    const { title } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
+    if (!route || !lastActiveStep) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(utils_1.navigationRoutes.swapExecution, { state: { routeId } });
+    };
+    const getStatusComponent = () => {
+        switch (lastActiveProcess === null || lastActiveProcess === void 0 ? void 0 : lastActiveProcess.status) {
+            case 'ACTION_REQUIRED':
+                return (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "info", fontSize: "small" });
+            case 'FAILED':
+                return (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", fontSize: "small" });
+            default:
+                return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
+        }
+    };
+    const ListItemComponent = dense ? ActiveSwaps_style_1.ListItem : ActiveSwaps_style_1.ListItemButton;
+    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, Object.assign({ total: 2 }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 500, lineHeight: 1, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 2,
+                        height: 16,
+                    } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+};
+exports.ActiveSwapItem = ActiveSwapItem;

package/cjs/components/{SwapInProgress/SwapInProgress.d.ts → ActiveSwaps/ActiveSwaps.d.ts}

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

package/cjs/components/ActiveSwaps/ActiveSwaps.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveSwaps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const ActiveSwapItem_1 = require("./ActiveSwapItem");
+const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
+const ActiveSwaps = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { account } = (0, providers_1.useWallet)();
+    const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
+    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+        return null;
+    }
+    const handleShowAll = () => {
+        navigate(utils_1.navigationRoutes.activeSwaps);
+    };
+    const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
+    return ((0, jsx_runtime_1.jsxs)(ActiveSwaps_style_1.ProgressCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
+                    padding: theme.spacing(0.75, 2),
+                }) }, { children: t('button.showAll') }))) : null] })));
+};
+exports.ActiveSwaps = ActiveSwaps;

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+export declare const ProgressCard: 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> & {
+    variant?: ("default" | "error" | "selected") | undefined;
+    dense?: boolean | undefined;
+    indented?: boolean | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+}, {}, {}>;
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/ActiveSwaps/ActiveSwaps.style.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowAllButton = exports.ListItem = exports.ListItemButton = exports.ProgressCard = void 0;
+const material_1 = require("@mui/material");
+const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+exports.ProgressCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
+    borderColor: (0, styles_1.alpha)(theme.palette.secondary.main, 0.48),
+    background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.08),
+    '&:hover': {
+        background: (0, styles_1.alpha)(theme.palette.secondary.main, 0.08),
+    },
+}));
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+    },
+}));
+exports.ListItem = (0, styles_1.styled)(material_1.ListItem, {
+    shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+    padding: theme.spacing(0, 1.5),
+    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+exports.ShowAllButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    '&:hover': {
+        background: 'none',
+    },
+}));

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

@@ -0,0 +1,2 @@
+export * from './ActiveSwapItem';
+export * from './ActiveSwaps';

package/cjs/components/ActiveSwaps/index.js

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

package/cjs/components/Card/Card.d.ts

@@ -1,14 +1,17 @@
+import type { Theme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+declare type CardVariant = 'default' | 'selected' | 'error';
+export declare const Card: 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<import("@mui/material").Theme> | 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<import("@mui/material").Theme> & {
-    variant?: "default" | "error" | 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> & {
+    variant?: CardVariant | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
 }, {}, {}>;
+export {};

package/cjs/components/Card/Card.js

@@ -3,33 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
+const getBackgroundColor = (theme, variant) => variant === 'selected'
+    ? theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.primary.main, 0.04)
+        : (0, styles_1.alpha)(theme.palette.primary.main, 0.42)
+    : theme.palette.background.paper;
 exports.Card = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => !['dense', 'variant', 'indented'].includes(prop),
-})(({ theme, variant, dense, indented, onClick }) => ({
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid`,
-    borderColor: variant === 'error'
-        ? theme.palette.error.main
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: dense
-        ? theme.shape.borderRadiusSecondary
-        : theme.shape.borderRadius,
-    overflow: 'hidden',
-    position: 'relative',
-    padding: indented ? theme.spacing(2) : 0,
-    boxSizing: 'border-box',
-    '&:hover': {
-        cursor: onClick ? 'pointer' : 'default',
-        backgroundColor: onClick
-            ? theme.palette.mode === 'light'
-                ? (0, styles_1.darken)(theme.palette.background.paper, 0.02)
-                : (0, styles_1.lighten)(theme.palette.background.paper, 0.02)
-            : theme.palette.background.paper,
-    },
-    transition: theme.transitions.create(['background-color'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
-    }),
-}));
+})(({ theme, variant, dense, indented, onClick }) => {
+    const backgroundColor = getBackgroundColor(theme, variant);
+    return {
+        backgroundColor,
+        border: `1px solid`,
+        borderColor: variant === 'error'
+            ? theme.palette.error.main
+            : variant === 'selected'
+                ? theme.palette.primary.main
+                : theme.palette.mode === 'light'
+                    ? theme.palette.grey[300]
+                    : theme.palette.grey[800],
+        borderRadius: dense
+            ? theme.shape.borderRadiusSecondary
+            : theme.shape.borderRadius,
+        overflow: 'hidden',
+        position: 'relative',
+        padding: indented ? theme.spacing(2) : 0,
+        boxSizing: 'border-box',
+        '&:hover': {
+            cursor: onClick ? 'pointer' : 'default',
+            backgroundColor: onClick
+                ? theme.palette.mode === 'light'
+                    ? (0, styles_1.darken)(backgroundColor, 0.02)
+                    : (0, styles_1.lighten)(backgroundColor, 0.02)
+                : theme.palette.background.paper,
+        },
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.enteringScreen,
+            easing: theme.transitions.easing.easeOut,
+        }),
+    };
+});

package/cjs/{pages/SelectTokenPage → components/ChainSelect}/ChainSelect.d.ts

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

package/cjs/components/ChainSelect/ChainSelect.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const react_router_dom_1 = require("react-router-dom");
+const providers_1 = require("../../providers");
+const chains_1 = require("../../stores/chains");
+const utils_1 = require("../../utils");
+const ChainSelect_style_1 = require("./ChainSelect.style");
+const useChainSelect_1 = require("./useChainSelect");
+const ChainSelect = ({ formType }) => {
+    var _a;
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { chains, getChains, setCurrentChain, isLoading } = (0, useChainSelect_1.useChainSelect)(formType);
+    const [chainId] = (0, react_hook_form_1.useWatch)({
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const showAllChains = () => {
+        navigate(utils_1.navigationRoutes[`${formType}Chain`], {
+            state: { formType },
+        });
+    };
+    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - chains_1.maxChainToOrder;
+    return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
+                ? Array.from({ length: chains_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                        width: 40,
+                        height: 40,
+                        display: 'grid',
+                        placeItems: 'center',
+                    } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 500 }, { children: ["+", chainsToHide] })) })) }))) : null] }));
+};
+exports.ChainSelect = ChainSelect;

package/cjs/components/{SwapInProgress/SwapInProgress.style.d.ts → ChainSelect/ChainSelect.style.d.ts}

@@ -1,31 +1,22 @@
 /// <reference types="react" />
-export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+export declare const ChainCard: 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/styles").SxProps<import("@mui/material/styles").Theme> | 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/styles").Theme> & {
-    variant?: "default" | "error" | 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> & {
+    variant?: ("default" | "error" | "selected") | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
 }, {}, {}>;
-export declare const RouteCard: import("@emotion/styled").StyledComponent<{
-    action?: import("react").ReactNode;
-    avatar?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
-    disableTypography?: boolean | undefined;
-    subheader?: import("react").ReactNode;
-    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    title?: import("react").ReactNode;
-    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
+export declare const ChainContainer: 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 | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, 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>, {}, {}>;

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainContainer = exports.ChainCard = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Card_1 = require("../../components/Card");
+exports.ChainCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+    width: 56,
+    height: 56,
+}));
+exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridAutoRows: '56px',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+}));

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

@@ -0,0 +1,2 @@
+export * from './ChainSelect';
+export * from './useChainSelect';

package/cjs/components/ChainSelect/index.js

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

package/cjs/components/ChainSelect/useChainSelect.d.ts

@@ -0,0 +1,8 @@
+import type { EVMChain } from '@lifi/sdk';
+import type { SwapFormDirection } from '../../providers';
+export declare const useChainSelect: (formType: SwapFormDirection) => {
+    chains: EVMChain[] | undefined;
+    getChains: () => EVMChain[];
+    setCurrentChain: (chainId: number) => void;
+    isLoading: boolean;
+};