@lifi/widget 1.14.1 → 1.16.0

package/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import './fonts/inter.css';
+export { useWidgetEvents } from './hooks';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./AppProvider").AppProps>;
 export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<Pick<import("./AppDrawer").AppDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<import("./AppDrawer").AppDrawerBase>>;

package/index.js

@@ -2,6 +2,7 @@ import { App } from './App';
 import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
+export { useWidgetEvents } from './hooks';
 export * from './types';
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) =>

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@lifi/widget",
-  "version": "1.14.1",
+  "version": "1.16.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
+  "types": "./index.d.ts",
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
       "yarn run lint:fix",
@@ -36,27 +37,29 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.0",
-    "@lifi/sdk": "^1.2.1",
-    "@lifi/wallet-management": "^1.1.7",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.95",
-    "@mui/material": "^5.10.1",
-    "@sentry/integrations": "^7.11.1",
-    "@sentry/react": "^7.11.1",
-    "@sentry/tracing": "^7.11.1",
-    "@tanstack/react-query": "^4.2.1",
+    "@lifi/sdk": "^1.5.0",
+    "@lifi/wallet-management": "^1.1.9",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/lab": "^5.0.0-alpha.98",
+    "@mui/material": "^5.10.4",
+    "@sentry/integrations": "^7.12.1",
+    "@sentry/react": "^7.12.1",
+    "@sentry/tracing": "^7.12.1",
+    "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-virtual": "^3.0.0-beta.17",
     "big.js": "^6.2.1",
+    "events": "^3.3.0",
     "i18next": "^21.9.1",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.34.2",
-    "react-i18next": "^11.18.4",
+    "react-i18next": "^11.18.5",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"
@@ -75,10 +78,5 @@
     "extends": "../../.eslintrc"
   },
   "sideEffects": false,
-  "private": false,
-  "types": "./index.d.ts",
-  "exports": {
-    "require": "./cjs/index.js",
-    "import": "./index.js"
-  }
+  "private": false
 }

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.d.ts

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

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SwapHoriz as SwapHorizIcon } from '@mui/icons-material';
+import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const ActiveSwapsEmpty = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Container, Object.assign({ sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(SwapHorizIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
+};

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ActiveSwapsPage: () => JSX.Element;

package/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, List } from '@mui/material';
+import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { useWallet } from '../../providers';
+import { useExecutingRoutesIds } from '../../stores';
+import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
+export const ActiveSwapsPage = () => {
+    const { account } = useWallet();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    if (!executingRoutes.length) {
+        return _jsx(ActiveSwapsEmpty, {});
+    }
+    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) })) })));
+};

package/pages/ActiveSwapsPage/index.d.ts

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

package/pages/ActiveSwapsPage/index.js

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

package/pages/MainPage/MainPage.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { ActiveSwaps } from '../../components/ActiveSwaps';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
-import { SwapInProgress } from '../../components/SwapInProgress';
 import { SwapInput } from '../../components/SwapInput';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 import { SwapRoutes } from './SwapRoutes';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
 };

package/pages/MainPage/MainSwapButton.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormState } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
@@ -15,6 +16,7 @@ import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 export const MainSwapButton = () => {
     const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
     const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
     const currentRoute = swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes[0];
@@ -26,5 +28,5 @@ export const MainSwapButton = () => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, loading: isLoading || isFetching || !currentRoute }));
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
 };

package/pages/MainPage/SwapRoutes.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
 import { Box, IconButton } from '@mui/material';
 import { useCallback } from 'react';
+import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Card, CardTitle } from '../../components/Card';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
+import { SendToWallet } from '../../components/SendToWallet';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
 import { navigationRoutes } from '../../utils';
@@ -15,6 +17,7 @@ import { Stack } from './SwapRoutes.style';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const handleCardClick = useCallback(() => {
         navigate(navigationRoutes.swapRoutes);
@@ -32,5 +35,5 @@ export const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
+                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props)), _jsx(SendToWallet, { mx: 3, mb: 3 })] }));
 };

package/pages/SelectChainPage/SelectChainPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SelectChainPage: React.FC<Partial<SwapFormTypeProps>>;

package/pages/SelectChainPage/SelectChainPage.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+import { useChainSelect } from '../../components/ChainSelect';
+import { useNavigateBack } from '../../hooks';
+import { ListItemButton, ListItemText } from './SelectChainPage.style';
+export const SelectChainPage = ({ formType, }) => {
+    const { navigateBack } = useNavigateBack();
+    const { state } = useLocation();
+    const formTypeState = (state === null || state === void 0 ? void 0 : state.formType) || formType;
+    const { chains, setCurrentChain } = useChainSelect(formTypeState);
+    const handleClick = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
+        setCurrentChain(chainId);
+        navigateBack();
+    });
+    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleClick(chain.id), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), _jsx(ListItemText, { primary: chain.name })] }), chain.id))) })) })));
+};

package/pages/SelectChainPage/SelectChainPage.style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+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 ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SelectChainPage/SelectChainPage.style.js

@@ -0,0 +1,17 @@
+import { ListItemButton as MuiListItemButton, ListItemText as MuiListItemText, } from '@mui/material';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));
+export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/pages/SelectChainPage/index.d.ts

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

package/pages/SelectChainPage/index.js

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

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../../components/Card';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { SwapFormKey } from '../../providers';
 import { Input } from './SearchTokenInput.style';
 export const SearchTokenInput = () => {
     const { t } = useTranslation();

package/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,5 +1,3 @@
 import type { FC } from 'react';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
-export declare const SelectTokenPage: FC<{
-    formType: SwapFormDirection;
-}>;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SelectTokenPage: FC<SwapFormTypeProps>;

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
-import { ChainSelect } from './ChainSelect';
+import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
-export const SelectTokenPage = ({ formType, }) => {
+export const SelectTokenPage = ({ formType }) => {
     useScrollableOverflowHidden();
-    const navigate = useNavigate();
+    const { navigateBack } = useNavigateBack();
     const headerRef = useRef(null);
     const contentHeight = useContentHeight();
     const [headerHeight, setHeaderHeight] = useState(0);
-    const handleTokenClick = () => {
-        navigate(-1);
-    };
     useLayoutEffect(() => {
         var _a, _b;
         setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
     }, [contentHeight]);
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: headerHeight, onClick: handleTokenClick, formType: formType })] })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: headerHeight, onClick: navigateBack, formType: formType })] })));
 };

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -12,20 +12,20 @@ import { supportedWallets } from '@lifi/wallet-management';
 import { Avatar, Button, Container, DialogActions, DialogContent, DialogContentText, List, ListItemAvatar, } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { Dialog } from '../../components/Dialog';
-import { useWallet } from '../../providers/WalletProvider';
-import { WalletListItemButton, WalletListItemText, } from './SelectWalletPage.style';
+import { useNavigateBack } from '../../hooks';
+import { useWallet } from '../../providers';
+import { ListItemButton, ListItemText } from './SelectWalletPage.style';
 export const SelectWalletPage = () => {
     var _a;
     const { t } = useTranslation();
-    const navigate = useNavigate();
+    const { navigateBack } = useNavigateBack();
     const { connect } = useWallet();
     const [walletIdentity, setWalletIdentity] = useState({ show: false });
     const closeDialog = () => {
         setWalletIdentity((state) => (Object.assign(Object.assign({}, state), { show: false })));
     };
-    const handleConnect = useCallback((event, wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleConnect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         const { ethereum } = window;
         const identityCheckPassed = wallet.checkProviderIdentity({
             provider: ethereum,
@@ -37,13 +37,13 @@ export const SelectWalletPage = () => {
             });
             return;
         }
-        navigate(-1);
+        navigateBack();
         yield connect(wallet);
-    }), [connect, navigate]);
+    }), [connect, navigateBack]);
     return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsx(List, Object.assign({ sx: {
-                    paddingLeft: 2,
-                    paddingRight: 2,
-                } }, { children: supportedWallets.map((wallet) => (_jsxs(WalletListItemButton, Object.assign({ onClick: (event) => handleConnect(event, wallet), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), _jsx(WalletListItemText, { primary: wallet.name })] }), wallet.name))) })), _jsxs(Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
+                    paddingLeft: 1.5,
+                    paddingRight: 1.5,
+                } }, { children: supportedWallets.map((wallet) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleConnect(wallet), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), _jsx(ListItemText, { primary: wallet.name })] }), wallet.name))) })), _jsxs(Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
                             }) }) }), _jsx(DialogActions, { children: _jsx(Button, Object.assign({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
 };

package/pages/SelectWalletPage/SelectWalletPage.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const WalletListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+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;
@@ -18,29 +18,4 @@ export declare const WalletListItemButton: import("@emotion/styled").StyledCompo
 }, "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 WalletListItem: 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 WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SelectWalletPage/SelectWalletPage.style.js

@@ -1,27 +1,17 @@
-import { ListItem, ListItemButton, ListItemText, Typography, } from '@mui/material';
-import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { ListItemButton as MuiListItemButton, ListItemText as MuiListItemText, } from '@mui/material';
 import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
-export const WalletListItemButton = styled(ListItemButton)(({ theme }) => ({
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(1.5),
-    height: 64,
+    height: 56,
     '&:hover': {
         backgroundColor: getContrastAlphaColor(theme, '4%'),
     },
 }));
-export const WalletListItem = styled(ListItem)(({ theme }) => ({
-    padding: theme.spacing(1.5),
-    [`.${listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(3),
-    },
-}));
-export const WalletListItemText = styled(ListItemText)(({ theme }) => ({
+export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
     [`.${listItemTextClasses.primary}`]: {
         fontWeight: 400,
     },
 }));
-export const WalletIdentityPopoverContent = styled(Typography)({
-    maxWidth: 400,
-});

package/pages/SettingsPage/AdvancedPreferences.js

@@ -12,9 +12,9 @@ export const AdvancedPreferences = () => {
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);
     };
-    return (_jsxs(Box, Object.assign({ px: 3, pt: 3 }, { children: [_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, Object.assign({ px: 3, pt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 2, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
 import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useWidgetConfig } from '../../providers';
 import { useAppearance } from '../../stores';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 export const ColorSchemeButtonGroup = () => {

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -11,7 +11,7 @@ export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     selected?: boolean | undefined;
     size?: "small" | "medium" | "large" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    value: unknown;
+    value: {};
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/pages/SettingsPage/EnabledBridgesSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import { Box, Checkbox, Chip, FormControl, MenuItem, Skeleton, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
@@ -8,16 +8,13 @@ import { Select } from '../../components/Select';
 import { useTools } from '../../hooks';
 import { useSettingsStore } from '../../stores';
 export const EnabledBridgesSelect = () => {
-    var _a;
     const { t } = useTranslation();
     const { tools, formattedTools } = useTools();
     const [enabledBridges, setTools] = useSettingsStore((state) => [state.enabledBridges, state.setTools], shallow);
-    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
-                            setTools('Bridges', event.target.value, tools.bridges);
-                        }
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: KeyboardArrowDownIcon, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        setTools('Bridges', event.target.value, tools.bridges);
                     }, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return (_jsx(Chip, { label: (_c = (_b = (_a = formattedTools.bridges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge.key }, { children: bridge.name }), bridge.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.bridges.map((bridge) => (_jsxs(MenuItem, Object.assign({ value: bridge.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [_jsx(Checkbox, { checked: enabledBridges === null || enabledBridges === void 0 ? void 0 : enabledBridges.includes(bridge.key) }), bridge.name] }), bridge.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/EnabledExchangesSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import { Box, Checkbox, Chip, FormControl, MenuItem, Skeleton, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
@@ -12,11 +12,9 @@ export const EnabledExchangesSelect = () => {
     const { tools, formattedTools } = useTools();
     const [enabledExchanges, setTools] = useSettingsStore((state) => [state.enabledExchanges, state.setTools], shallow);
     return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
-                            setTools('Exchanges', event.target.value, tools.exchanges);
-                        }
-                    }, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
+                        setTools('Exchanges', event.target.value, tools.exchanges);
+                    }, MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: KeyboardArrowDownIcon, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return (_jsx(Chip, { label: (_c = (_b = (_a = formattedTools.exchanges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.exchanges.map((exchange) => (_jsxs(MenuItem, Object.assign({ value: exchange.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [_jsx(Checkbox, { checked: enabledExchanges === null || enabledExchanges === void 0 ? void 0 : enabledExchanges.includes(exchange.key) }), exchange.name] }), exchange.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -10,5 +10,9 @@ export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
     const [setValue] = useSetSettings();
     const { routePriority } = useSettings(['routePriority']);
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => {
+                        const tag = t(`swap.tags.${order.toUpperCase()}`);
+                        const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
+                        return (_jsx(MenuItem, Object.assign({ value: order }, { children: tagName }), order));
+                    }) })) }))] }));
 };

package/pages/SettingsPage/SettingsPage.js

@@ -4,7 +4,8 @@ import { AdvancedPreferences } from './AdvancedPreferences';
 import { ColorSchemeButtonGroup } from './ColorSchemeButtonGroup';
 import { GasPriceSelect } from './GasPriceSelect';
 import { RoutePrioritySelect } from './RoutePrioritySelect';
+import { ShowDestinationWallet } from './ShowDestinationWallet';
 import { SlippageInput } from './SlippageInput';
 export const SettingsPage = () => {
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(AdvancedPreferences, {})] })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(ShowDestinationWallet, {}), _jsx(AdvancedPreferences, {})] })));
 };