@lifi/widget 1.15.1 → 1.17.0

package/cjs/stores/chains/useChainOrderStore.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainOrderStore = exports.maxChainToOrder = void 0;
+/* eslint-disable no-underscore-dangle */
+const zustand_1 = __importDefault(require("zustand"));
+const middleware_1 = require("zustand/middleware");
+const immer_1 = require("zustand/middleware/immer");
+exports.maxChainToOrder = 9;
+exports.useChainOrderStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set, get) => ({
+    chainOrder: [],
+    availableChains: [],
+    initializeChains: (chainIds) => {
+        set((state) => {
+            state.availableChains = chainIds;
+            state.chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
+            const chainsToAdd = chainIds.filter((chainId) => !state.chainOrder.includes(chainId));
+            if (state.chainOrder.length === exports.maxChainToOrder ||
+                !chainsToAdd.length) {
+                return;
+            }
+            const chainsToAddLength = exports.maxChainToOrder - state.chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+                state.chainOrder.push(chainsToAdd[index]);
+            }
+        });
+        return get().chainOrder;
+    },
+    setChain: (chainId) => set((state) => {
+        if (state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)) {
+            return;
+        }
+        state.chainOrder.unshift(chainId);
+        if (state.chainOrder.length > exports.maxChainToOrder) {
+            state.chainOrder.pop();
+        }
+    }),
+})), {
+    name: 'li.fi-widget-chains-order',
+    version: 0,
+    partialize: (state) => ({ chainOrder: state.chainOrder }),
+}));

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

@@ -1,5 +1,4 @@
 export * from './types';
 export * from './useAppearance';
-export * from './useSetSettings';
 export * from './useSettings';
 export * from './useSettingsStore';

package/cjs/stores/settings/index.js

@@ -16,6 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./useAppearance"), exports);
-__exportStar(require("./useSetSettings"), exports);
 __exportStar(require("./useSettings"), exports);
 __exportStar(require("./useSettingsStore"), exports);

package/cjs/stores/settings/useAppearance.js

@@ -8,7 +8,9 @@ const shallow_1 = __importDefault(require("zustand/shallow"));
 const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
     const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.default);
-    const setAppearance = (appearance) => setValue('appearance', appearance);
+    const setAppearance = (appearance) => {
+        setValue('appearance', appearance);
+    };
     return [appearance, setAppearance];
 };
 exports.useAppearance = useAppearance;

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';
@@ -17,32 +17,40 @@ export interface WidgetWalletManagement {
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
-interface WidgetConfigBase {
-    fromAmount?: number | string;
+export interface WidgetConfig {
+    fromChain?: `${ChainKey}` | number;
+    toChain?: `${ChainKey}` | number;
+    fromToken?: string;
+    toToken?: string;
     toAddress?: string;
-    containerStyle?: CSSProperties;
-    theme?: ThemeConfig;
+    fromAmount?: number | string;
     appearance?: Appearance;
+    theme?: ThemeConfig;
+    containerStyle?: CSSProperties;
     disableAppearance?: boolean;
     disableTelemetry?: boolean;
-    walletManagement?: WidgetWalletManagement;
-    integrator?: string;
+    /** @deprecated Use chains.deny instead */
     disabledChains?: number[];
+    /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
+    integrator?: string;
+    walletManagement?: WidgetWalletManagement;
+    sdkConfig?: ConfigUpdate;
+    bridges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    exchanges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    chains?: {
+        allow?: number[];
+        deny?: number[];
+    };
+    tokens?: {
+        featured?: Token[];
+        allow?: Token[];
+        deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
+    };
 }
-declare type WidgetFromTokenConfig = {
-    fromChain: `${ChainKey}` | number;
-    fromToken?: string;
-} | {
-    fromChain?: never;
-    fromToken?: never;
-};
-declare type WidgetToTokenConfig = {
-    toChain: `${ChainKey}` | number;
-    toToken?: string;
-} | {
-    toChain?: never;
-    toToken?: never;
-};
-export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig;
-export {};

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%',