@lifi/widget 1.15.0 → 1.16.1

package/cjs/stores/chains/useInitializeChainOrder.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetChainOrder = void 0;
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const useChainOrderStore_1 = require("./useChainOrderStore");
+const useSetChainOrder = () => {
+    return (0, useChainOrderStore_1.useChainOrderStore)((state) => [state.setChain, state.initializeChains], shallow_1.default);
+};
+exports.useSetChainOrder = useSetChainOrder;

package/cjs/stores/route/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
-export * from './useExecutingRoutes';
+export * from './useExecutingRoutesIds';
 export * from './useRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
+export * from './utils';

package/cjs/stores/route/index.js

@@ -15,7 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
-__exportStar(require("./useExecutingRoutes"), exports);
+__exportStar(require("./useExecutingRoutesIds"), exports);
 __exportStar(require("./useRouteStore"), exports);
 __exportStar(require("./useSetExecutableRoute"), exports);
 __exportStar(require("./useSwapHistory"), exports);
+__exportStar(require("./utils"), exports);

package/cjs/stores/route/useExecutingRoutesIds.d.ts

@@ -0,0 +1 @@
+export declare const useExecutingRoutesIds: (address?: string) => string[];

package/cjs/stores/route/useExecutingRoutesIds.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExecutingRoutesIds = void 0;
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const useRouteStore_1 = require("./useRouteStore");
+const useExecutingRoutesIds = (address) => {
+    return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)
+        .filter((item) => item.route.fromAddress === address &&
+        (item.status === 'loading' || item.status === 'error'))
+        .sort((a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = b === null || b === void 0 ? void 0 : b.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0) -
+            ((_d = (_c = a === null || a === void 0 ? void 0 : a.route.steps[0].execution) === null || _c === void 0 ? void 0 : _c.process[0].startedAt) !== null && _d !== void 0 ? _d : 0);
+    })
+        .map(({ route }) => route.id), shallow_1.default);
+};
+exports.useExecutingRoutesIds = useExecutingRoutesIds;

package/cjs/stores/route/useRouteStore.js

@@ -7,6 +7,7 @@ exports.useRouteStore = void 0;
 const zustand_1 = __importDefault(require("zustand"));
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
+const utils_1 = require("./utils");
 exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     routes: {},
     setExecutableRoute: (route) => set((state) => {
@@ -24,12 +25,12 @@ exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, i
     updateRoute: (route) => set((state) => {
         if (state.routes[route.id]) {
             state.routes[route.id].route = route;
-            const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+            const isFailed = (0, utils_1.isRouteFailed)(route);
             if (isFailed) {
                 state.routes[route.id].status = 'error';
                 return;
             }
-            const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+            const isDone = (0, utils_1.isRouteCompleted)(route);
             if (isDone) {
                 state.routes[route.id].status = 'success';
                 return;
@@ -68,12 +69,12 @@ exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, i
                         route,
                         status: 'idle',
                     };
-                    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+                    const isFailed = (0, utils_1.isRouteFailed)(route);
                     if (isFailed) {
                         state.routes[route.id].status = 'error';
                         return;
                     }
-                    const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+                    const isDone = (0, utils_1.isRouteCompleted)(route);
                     if (isDone) {
                         state.routes[route.id].status = 'success';
                         return;

package/cjs/stores/route/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Route } from '@lifi/sdk';
+export declare const isRouteCompleted: (route: Route) => boolean;
+export declare const isRouteFailed: (route: Route) => boolean;
+export declare const isRouteActive: (route?: Route) => boolean;

package/cjs/stores/route/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRouteActive = exports.isRouteFailed = exports.isRouteCompleted = void 0;
+const isRouteCompleted = (route) => {
+    return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+};
+exports.isRouteCompleted = isRouteCompleted;
+const isRouteFailed = (route) => {
+    return route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+};
+exports.isRouteFailed = isRouteFailed;
+const isRouteActive = (route) => {
+    if (!route) {
+        return false;
+    }
+    const isDone = (0, exports.isRouteCompleted)(route);
+    const isFailed = (0, exports.isRouteFailed)(route);
+    const alreadyStarted = route.steps.some((step) => step.execution);
+    return !isDone && !isFailed && alreadyStarted;
+};
+exports.isRouteActive = isRouteActive;

package/cjs/stores/settings/useSettingsStore.js

@@ -42,12 +42,15 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
             return;
         }
         if (state[`_enabled${toolType}`]) {
-            state[`_enabled${toolType}`] = tools
-                .filter((tool) => !Object.prototype.hasOwnProperty.call(state._enabledBridges, tool))
+            // Add a new tools
+            const enabledTools = tools
+                .filter((tool) => !Object.prototype.hasOwnProperty.call(state[`_enabled${toolType}`], tool))
                 .reduce((values, tool) => {
                 values[tool] = true;
                 return values;
             }, state[`_enabled${toolType}`]);
+            // Filter tools we no longer have
+            state[`_enabled${toolType}`] = Object.fromEntries(Object.entries(enabledTools).filter(([key]) => tools.includes(key)));
         }
         else {
             state[`_enabled${toolType}`] = tools.reduce((values, tool) => {

package/cjs/types/events.d.ts

@@ -0,0 +1,5 @@
+export declare enum WidgetEvent {
+    SwapStarted = "swapStarted",
+    SwapCompleted = "swapCompleted",
+    SwapFailed = "swapFailed"
+}

package/cjs/types/events.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetEvent = void 0;
+var WidgetEvent;
+(function (WidgetEvent) {
+    WidgetEvent["SwapStarted"] = "swapStarted";
+    WidgetEvent["SwapCompleted"] = "swapCompleted";
+    WidgetEvent["SwapFailed"] = "swapFailed";
+})(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));

package/cjs/types/index.d.ts

@@ -1,2 +1,3 @@
+export * from './events';
 export * from './token';
 export * from './widget';

package/cjs/types/index.js

@@ -14,5 +14,6 @@ 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("./events"), exports);
 __exportStar(require("./token"), exports);
 __exportStar(require("./widget"), exports);

package/cjs/types/widget.d.ts

@@ -1,4 +1,4 @@
-import type { ChainKey, Token } from '@lifi/sdk';
+import type { ChainKey, ConfigUpdate, Token } from '@lifi/sdk';
 import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
@@ -29,6 +29,7 @@ interface WidgetConfigBase {
     integrator?: string;
     disabledChains?: number[];
     featuredTokens?: Token[];
+    sdkConfig?: ConfigUpdate;
 }
 declare type WidgetFromTokenConfig = {
     fromChain: `${ChainKey}` | number;

package/cjs/utils/colors.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";
+export declare const getContrastTextColor: (theme: Theme, background?: string) => "#000" | "#fff";

package/cjs/utils/navigationRoutes.d.ts

@@ -4,10 +4,15 @@ export declare const navigationRoutes: {
     settings: string;
     fromToken: string;
     toToken: string;
+    fromChain: string;
+    toChain: string;
     swapRoutes: string;
     swapExecution: string;
     swapHistory: string;
+    activeSwaps: string;
     swapDetails: string;
 };
 export declare const navigationRoutesValues: string[];
+export declare const stickyHeaderRoutes: string[];
+export declare const backButtonRoutes: string[];
 export declare type NavigationRouteType = keyof typeof navigationRoutes;

package/cjs/utils/navigationRoutes.js

@@ -1,15 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.navigationRoutesValues = exports.navigationRoutes = void 0;
+exports.backButtonRoutes = exports.stickyHeaderRoutes = exports.navigationRoutesValues = exports.navigationRoutes = void 0;
 exports.navigationRoutes = {
     home: '/',
-    selectWallet: 'select-wallet',
+    selectWallet: 'wallet',
     settings: 'settings',
-    fromToken: 'select-from-token',
-    toToken: 'select-to-token',
+    fromToken: 'from-token',
+    toToken: 'to-token',
+    fromChain: 'from-chain',
+    toChain: 'to-chain',
     swapRoutes: 'swap-routes',
     swapExecution: 'swap-execution',
     swapHistory: 'swap-history',
+    activeSwaps: 'active-swaps',
     swapDetails: 'swap-details',
 };
 exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
+exports.stickyHeaderRoutes = [
+    exports.navigationRoutes.selectWallet,
+    exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.settings,
+    exports.navigationRoutes.swapRoutes,
+    exports.navigationRoutes.swapExecution,
+    exports.navigationRoutes.swapHistory,
+    exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.swapDetails,
+];
+exports.backButtonRoutes = [
+    exports.navigationRoutes.selectWallet,
+    exports.navigationRoutes.settings,
+    exports.navigationRoutes.swapHistory,
+    exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.fromToken,
+    exports.navigationRoutes.toToken,
+    exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.swapRoutes,
+    exports.navigationRoutes.swapExecution,
+    exports.navigationRoutes.swapDetails,
+];

package/components/ActiveSwaps/ActiveSwapItem.d.ts

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

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowForward as ArrowForwardIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveSwaps.style';
+export const ActiveSwapItem = ({ routeId, dense }) => {
+    var _a;
+    const navigate = useNavigate();
+    const { route, status } = 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 } = useProcessMessage(lastActiveStep, lastActiveProcess);
+    if (!route || !lastActiveStep) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(navigationRoutes.swapExecution, { state: { routeId } });
+    };
+    const getStatusComponent = () => {
+        switch (lastActiveProcess === null || lastActiveProcess === void 0 ? void 0 : lastActiveProcess.status) {
+            case 'ACTION_REQUIRED':
+                return _jsx(InfoIcon, { color: "info", fontSize: "small" });
+            case 'FAILED':
+                return _jsx(WarningIcon, { color: "error", fontSize: "small" });
+            default:
+                return (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
+        }
+    };
+    const ListItemComponent = dense ? ListItem : ListItemButton;
+    return (_jsxs(ListItemComponent, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] })) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, Object.assign({ fontWeight: 500, lineHeight: 1, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 2,
+                        height: 16,
+                    } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== 'success' ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useWallet } from '../../providers';
+import { useExecutingRoutesIds } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { CardTitle } from '../Card';
+import { ActiveSwapItem } from './ActiveSwapItem';
+import { ProgressCard, ShowAllButton } from './ActiveSwaps.style';
+export const ActiveSwaps = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { account } = useWallet();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+        return null;
+    }
+    const handleShowAll = () => {
+        navigate(navigationRoutes.activeSwaps);
+    };
+    const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
+    return (_jsxs(ProgressCard, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll, sx: (theme) => ({
+                    padding: theme.spacing(0.75, 2),
+                }) }, { children: t('button.showAll') }))) : null] })));
+};

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

@@ -0,0 +1,37 @@
+import { Button, ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { alpha, styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+import { Card } from '../Card';
+export const ProgressCard = styled(Card)(({ theme }) => ({
+    borderColor: alpha(theme.palette.secondary.main, 0.48),
+    background: alpha(theme.palette.secondary.main, 0.08),
+    '&:hover': {
+        background: alpha(theme.palette.secondary.main, 0.08),
+    },
+}));
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));
+export const ListItem = styled(MuiListItem, {
+    shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+    padding: theme.spacing(0, 1.5),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+    '&:hover': {
+        cursor: 'pointer',
+    },
+}));
+export const ShowAllButton = styled(Button)(({ theme }) => ({
+    '&:hover': {
+        background: 'none',
+    },
+}));

package/components/ActiveSwaps/index.d.ts

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

package/components/ActiveSwaps/index.js

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

package/components/AppContainer.js

@@ -3,7 +3,7 @@ import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useWidgetConfig } from '../providers';
 import { ElementId } from '../utils';
 const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',

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

@@ -1,32 +1,42 @@
 import { Box } from '@mui/material';
-import { darken, lighten, styled } from '@mui/material/styles';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
+const getBackgroundColor = (theme, variant) => variant === 'selected'
+    ? theme.palette.mode === 'light'
+        ? alpha(theme.palette.primary.main, 0.04)
+        : alpha(theme.palette.primary.main, 0.42)
+    : theme.palette.background.paper;
 export const Card = styled(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'
-                ? darken(theme.palette.background.paper, 0.02)
-                : 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'
+                    ? darken(backgroundColor, 0.02)
+                    : lighten(backgroundColor, 0.02)
+                : theme.palette.background.paper,
+        },
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.enteringScreen,
+            easing: theme.transitions.easing.easeOut,
+        }),
+    };
+});