@lifi/widget 1.15.1 → 1.17.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/AppProvider.d.ts

@@ -5,7 +5,3 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
-export declare const TelemetryProvider: React.FC<{
-    children: React.ReactElement<any, any> | null;
-    disabled?: boolean;
-}>;

package/AppProvider.js

@@ -3,21 +3,13 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
-import { useTelemetry } from './hooks';
-import { SwapFormProvider } from './providers/SwapFormProvider';
-import { ThemeProvider } from './providers/ThemeProvider';
-import { WalletProvider } from './providers/WalletProvider';
-import { WidgetProvider } from './providers/WidgetProvider';
+import { SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: _jsx(WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) })) })) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(WalletProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
     return _jsx(Router, { children: children });
 };
-export const TelemetryProvider = ({ children, disabled }) => {
-    useTelemetry(disabled);
-    return children;
-};

package/README.md

@@ -83,7 +83,7 @@ Visit our [playground](https://testing.li.finance) to see how you can customize
 
 ## Documentation
 
-[LI.FI Documentation](https://docs.li.fi)
+[LI.FI Widget Documentation](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview)
 
 ## Changelog
 

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/AppProvider.d.ts

@@ -5,7 +5,3 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
-export declare const TelemetryProvider: React.FC<{
-    children: React.ReactElement<any, any> | null;
-    disabled?: boolean;
-}>;

package/cjs/AppProvider.js

@@ -1,19 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelemetryProvider = exports.AppRouter = exports.AppProvider = void 0;
+exports.AppRouter = exports.AppProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const queryClient_1 = require("./config/queryClient");
-const hooks_1 = require("./hooks");
-const SwapFormProvider_1 = require("./providers/SwapFormProvider");
-const ThemeProvider_1 = require("./providers/ThemeProvider");
-const WalletProvider_1 = require("./providers/WalletProvider");
-const WidgetProvider_1 = require("./providers/WidgetProvider");
+const providers_1 = require("./providers");
 const QueryProvider = react_query_1.QueryClientProvider;
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(exports.TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: (0, jsx_runtime_1.jsx)(WalletProvider_1.WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: (0, jsx_runtime_1.jsx)(WidgetProvider_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(SwapFormProvider_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) })) })) })) })));
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {
@@ -22,8 +18,3 @@ const AppRouter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(Router, { children: children });
 };
 exports.AppRouter = AppRouter;
-const TelemetryProvider = ({ children, disabled }) => {
-    (0, hooks_1.useTelemetry)(disabled);
-    return children;
-};
-exports.TelemetryProvider = TelemetryProvider;

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/{SwapsInProgress/SwapsInProgress.d.ts → ActiveSwaps/ActiveSwaps.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export declare const SwapsInProgress: 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/AppContainer.js

@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',
@@ -44,7 +44,7 @@ exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
 });
 const AppContainer = ({ children }) => {
     const ref = (0, react_1.useRef)(null);
-    const { containerStyle } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { containerStyle } = (0, providers_1.useWidgetConfig)();
     return ((0, jsx_runtime_1.jsxs)(RelativeContainer, Object.assign({ sx: containerStyle }, { children: [(0, jsx_runtime_1.jsx)(ScrollableContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, ref: ref }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })), (0, jsx_runtime_1.jsx)(exports.ScrollToLocation, { elementRef: ref })] })));
 };
 exports.AppContainer = AppContainer;

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/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;