@lifi/widget 1.18.8 → 1.19.0

package/cjs/providers/WalletProvider/WalletFormUpdate.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { WalletAccount } from './types';
+export declare const WalletFormUpdate: React.FC<{
+    account: WalletAccount;
+}>;

package/cjs/providers/WalletProvider/WalletFormUpdate.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletFormUpdate = void 0;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const stores_1 = require("../../stores");
+const SwapFormProvider_1 = require("../SwapFormProvider");
+const WidgetProvider_1 = require("../WidgetProvider");
+const WalletFormUpdate = ({ account, }) => {
+    const { fromChain, toChain, chains, disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { setValue, getValues, getFieldState, 
+    // Subscription to touchedFields is required by getFieldState to work
+    formState: { touchedFields }, } = (0, react_hook_form_1.useFormContext)();
+    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+    (0, react_1.useEffect)(() => {
+        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains, disabledChains);
+        if (!account.isActive || !account.chainId || !chainAllowed) {
+            return;
+        }
+        const [fromChainValue, toChainValue] = getValues([
+            SwapFormProvider_1.SwapFormKey.FromChain,
+            SwapFormProvider_1.SwapFormKey.ToChain,
+        ]);
+        const { isTouched: isFromChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromChain);
+        const { isTouched: isToChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToChain);
+        const { isTouched: isFromTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromToken);
+        const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
+        const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
+        const { chainOrder, setChain } = stores_1.useChainOrderStore.getState();
+        // Users can switch chains in the wallet.
+        // If we don't have a chain in the ordered chain list we should add it.
+        setChain(account.chainId);
+        // If we ran out of slots for the ordered chain list and the current chain isn't there
+        // we should make a recently switched chain as current.
+        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainTouched && !isFromTokenTouched) ||
+            !hasFromChainInOrderedList) {
+            setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
+            setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
+            if (isFromAmountTouched) {
+                setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+            }
+        }
+        if ((!toChain && !isToChainTouched && !isToTokenTouched) ||
+            !hasToChainInOrderedList) {
+            setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
+            setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
+        }
+    }, [
+        account.chainId,
+        account.isActive,
+        chains,
+        disabledChains,
+        fromChain,
+        getFieldState,
+        getValues,
+        setValue,
+        toChain,
+    ]);
+    return null;
+};
+exports.WalletFormUpdate = WalletFormUpdate;

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -13,10 +13,8 @@ exports.extractAccountFromSigner = exports.WalletProvider = exports.useWallet =
 const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const stores_1 = require("../../stores");
-const SwapFormProvider_1 = require("../SwapFormProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
+const WalletFormUpdate_1 = require("./WalletFormUpdate");
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -32,8 +30,7 @@ const WalletContext = (0, react_1.createContext)(initialContext);
 const useWallet = () => (0, react_1.useContext)(WalletContext);
 exports.useWallet = useWallet;
 const WalletProvider = ({ children }) => {
-    const { walletManagement, fromChain, toChain, chains, disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
-    const methods = (0, react_hook_form_1.useFormContext)();
+    const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = (0, wallet_management_1.useLiFiWalletManagement)();
     const [account, setAccount] = (0, react_1.useState)({});
     const connect = (0, react_1.useCallback)((wallet) => __awaiter(void 0, void 0, void 0, function* () {
@@ -98,59 +95,7 @@ const WalletProvider = ({ children }) => {
         account,
         provider,
     }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
-    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-    (0, react_1.useEffect)(() => {
-        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains, disabledChains);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
-            return;
-        }
-        const [fromChainValue, toChainValue] = methods.getValues([
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-        ]);
-        const { isDirty: isFromChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromChain, methods.formState);
-        const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToChain, methods.formState);
-        const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromToken, methods.formState);
-        const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToToken, methods.formState);
-        const { chainOrder, setChain } = stores_1.useChainOrderStore.getState();
-        // Users can switch chains in the wallet.
-        // If we don't have a chain in the ordered chain list we should add it.
-        setChain(account.chainId);
-        // If we ran out of slots for the ordered chain list and the current chain isn't there
-        // we should make a recently switched chain as current.
-        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
-        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
-        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
-            !hasFromChainInOrderedList) {
-            methods.setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormProvider_1.SwapFormKey.FromToken, '', {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '', {
-                shouldDirty: false,
-            });
-        }
-        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
-            !hasToChainInOrderedList) {
-            methods.setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormProvider_1.SwapFormKey.ToToken, '', {
-                shouldDirty: false,
-            });
-        }
-    }, [
-        account.chainId,
-        account.isActive,
-        chains,
-        disabledChains,
-        fromChain,
-        methods,
-        toChain,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
+    return ((0, jsx_runtime_1.jsxs)(WalletContext.Provider, Object.assign({ value: value }, { children: [(0, jsx_runtime_1.jsx)(WalletFormUpdate_1.WalletFormUpdate, { account: account }), children] })));
 };
 exports.WalletProvider = WalletProvider;
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -15,6 +15,7 @@ exports.WidgetProvider = exports.useWidgetConfig = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const utils_1 = require("../../utils");
 const initialContext = {
     disabledChains: [],
 };
@@ -24,27 +25,33 @@ exports.useWidgetConfig = useWidgetConfig;
 const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const value = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         try {
             const searchParams = Object.fromEntries(new URLSearchParams(window === null || window === void 0 ? void 0 : window.location.search));
+            // Prevent using fromToken/toToken params if chain is not selected
+            ['from', 'to'].forEach((key) => {
+                if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+                    delete searchParams[`${key}Token`];
+                }
+            });
             return Object.assign(Object.assign({}, config), { fromChain: (searchParams.fromChain &&
                     isNaN(parseInt(searchParams.fromChain, 10))) ||
                     typeof fromChain === 'string'
-                    ? (0, sdk_1.getChainByKey)((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase()).id
+                    ? (_b = (0, sdk_1.getChainByKey)((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase())) === null || _b === void 0 ? void 0 : _b.id
                     : (searchParams.fromChain &&
                         !isNaN(parseInt(searchParams.fromChain, 10))) ||
                         typeof fromChain === 'number'
                         ? parseInt(searchParams.fromChain, 10) || fromChain
                         : undefined, toChain: (searchParams.toChain && isNaN(parseInt(searchParams.toChain, 10))) ||
                     typeof toChain === 'string'
-                    ? (0, sdk_1.getChainByKey)((_b = (searchParams.toChain || toChain)) === null || _b === void 0 ? void 0 : _b.toLowerCase()).id
+                    ? (_d = (0, sdk_1.getChainByKey)((_c = (searchParams.toChain || toChain)) === null || _c === void 0 ? void 0 : _c.toLowerCase())) === null || _d === void 0 ? void 0 : _d.id
                     : (searchParams.toChain &&
                         !isNaN(parseInt(searchParams.toChain, 10))) ||
                         typeof toChain === 'number'
                         ? parseInt(searchParams.toChain, 10) || toChain
-                        : undefined, fromToken: ((_c = searchParams.fromToken) === null || _c === void 0 ? void 0 : _c.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_d = searchParams.toToken) === null || _d === void 0 ? void 0 : _d.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
+                        : undefined, fromToken: ((_e = searchParams.fromToken) === null || _e === void 0 ? void 0 : _e.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_f = searchParams.toToken) === null || _f === void 0 ? void 0 : _f.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
-                    ? searchParams.fromAmount
+                    ? (0, utils_1.formatAmount)(searchParams.fromAmount)
                     : fromAmount });
         }
         catch (e) {

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

@@ -1,7 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
+export * from './useRecommendedRouteStore';
 export * from './useRouteExecutionStore';
-export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/cjs/stores/routes/index.js

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

package/cjs/stores/routes/types.d.ts

@@ -5,14 +5,14 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
-    deleteRoutes: () => void;
+    deleteRoutes: (type: 'completed' | 'active') => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;
 }
-export interface SelectedRouteStore {
-    selectedRoute?: Route;
-    setSelectedRoute: (route?: Route) => void;
+export interface RecommendedRouteStore {
+    recommendedRoute?: Route;
+    setRecommendedRoute: (route?: Route) => void;
 }

package/cjs/stores/routes/useRecommendedRouteStore.d.ts

@@ -0,0 +1,4 @@
+import type { RecommendedRouteStore } from './types';
+export declare const useRecommendedRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RecommendedRouteStore>, "setState"> & {
+    setState(nextStateOrUpdater: RecommendedRouteStore | Partial<RecommendedRouteStore> | ((state: import("immer/dist/internal").WritableDraft<RecommendedRouteStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/cjs/stores/routes/{useSelectedRouteStore.js → useRecommendedRouteStore.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectedRouteStore = void 0;
+exports.useRecommendedRouteStore = void 0;
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
-exports.useSelectedRouteStore = (0, zustand_1.default)()((0, immer_1.immer)((set) => ({
-    setSelectedRoute: (route) => {
+exports.useRecommendedRouteStore = (0, zustand_1.default)()((0, immer_1.immer)((set) => ({
+    setRecommendedRoute: (route) => {
         set((state) => {
-            state.selectedRoute = route;
+            state.recommendedRoute = route;
         });
     },
 })));

package/cjs/stores/routes/useRouteExecutionStore.js

@@ -46,8 +46,15 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
             delete state.routes[routeId];
         }
     }),
-    deleteRoutes: () => set((state) => {
-        state.routes = {};
+    deleteRoutes: (type) => set((state) => {
+        Object.keys(state.routes)
+            .filter((routeId) => {
+            var _a, _b;
+            return type === 'completed'
+                ? ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === 'success'
+                : ((_b = state.routes[routeId]) === null || _b === void 0 ? void 0 : _b.status) !== 'success';
+        })
+            .forEach((routeId) => delete state.routes[routeId]);
     }),
 })), {
     name: 'li.fi-widget-routes',
@@ -82,6 +89,7 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
                     }
                 });
             }
+            localStorage.removeItem('routes');
         }
         catch (error) {
             console.log(error);

package/cjs/stores/settings/useSettingsStore.js

@@ -23,7 +23,7 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',
-    slippage: '3',
+    slippage: '0.5',
     setValue: (key, value) => set((state) => {
         state[key] = value;
     }),
@@ -68,7 +68,7 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
     }),
 })), {
     name: 'li.fi-widget-settings',
-    version: 1,
+    version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges } = state, partializedState = __rest(state, ["enabledBridges", "enabledExchanges"]);
         return partializedState;
@@ -86,6 +86,9 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
         if (version === 0 && persistedState.appearance === 'system') {
             persistedState.appearance = 'auto';
         }
+        if (version === 1) {
+            persistedState.slippage = '0.5';
+        }
         return persistedState;
     },
 }));

package/cjs/types/widget.d.ts

@@ -38,6 +38,7 @@ export interface WidgetConfig {
     variant?: WidgetVariant;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
+    buildSwapUrl?: boolean;
     bridges?: {
         allow?: string[];
         deny?: string[];

package/components/ActiveSwaps/ActiveSwaps.js

@@ -5,9 +5,9 @@ import { useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers';
 import { useExecutingRoutesIds } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { CardTitle } from '../Card';
+import { Card, CardTitle } from '../Card';
 import { ActiveSwapItem } from './ActiveSwapItem';
-import { ProgressCard, ShowAllButton } from './ActiveSwaps.style';
+import { ShowAllButton } from './ActiveSwaps.style';
 export const ActiveSwaps = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -20,7 +20,7 @@ export const ActiveSwaps = (props) => {
         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) => ({
+    return (_jsxs(Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, 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

@@ -1,18 +1,4 @@
 /// <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;
-    selectionColor?: "primary" | "secondary" | 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;

package/components/ActiveSwaps/ActiveSwaps.style.js

@@ -1,15 +1,7 @@
 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 { 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),

package/components/AppContainer.d.ts

@@ -1,5 +1,16 @@
 import type { PropsWithChildren } from 'react';
+import type { WidgetVariant } from '../types';
 export declare const maxHeight = 680;
+export declare const AppExpandedContainer: 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?: WidgetVariant | undefined;
+}, {}, {}>;
 export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
@@ -11,4 +22,3 @@ export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const AppContainer: React.FC<PropsWithChildren<{}>>;
-export declare const AppExpandedContainer: React.FC<PropsWithChildren<{}>>;

package/components/AppContainer.js

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import { useWidgetConfig } from '../providers';
 import { ElementId } from '../utils';
 export const maxHeight = 680;
-const ExpandedContainer = styled(Box, {
+export const AppExpandedContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
     display: 'flex',
@@ -30,6 +30,7 @@ const RelativeContainer = styled(Box, {
 const CssBaselineContainer = styled(ScopedCssBaseline, {
     shouldForwardProp: (prop) => prop !== 'variant',
 })(({ variant }) => ({
+    position: 'relative',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -50,6 +51,3 @@ export const AppContainer = ({ children }) => {
     const { containerStyle, variant } = useWidgetConfig();
     return (_jsx(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: _jsx(CssBaselineContainer, Object.assign({ id: ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
-export const AppExpandedContainer = ({ children, }) => {
-    return _jsx(ExpandedContainer, { children: children });
-};

package/components/BottomSheet/BottomSheet.js

@@ -1,44 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { useScrollableContainer } from '../../hooks';
+import { backdropProps, modalProps, paperProps } from '../Dialog';
 export const BottomSheet = forwardRef(({ elementRef, children, open }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
-    const containerElement = useScrollableContainer();
-    const openDrawer = useCallback(() => {
-        setDrawerOpen(true);
-        openRef.current = true;
-    }, []);
-    const closeDrawer = useCallback(() => {
+    const close = useCallback(() => {
         setDrawerOpen(false);
         openRef.current = false;
     }, []);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,
-        openDrawer,
-        closeDrawer,
-    }), [closeDrawer, openDrawer]);
-    return (_jsx(Drawer, Object.assign({ container: containerElement, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: closeDrawer, ModalProps: {
-            sx: {
-                position: 'absolute',
-                overflow: 'hidden',
-            },
-            keepMounted: true,
-        }, PaperProps: {
-            sx: (theme) => ({
-                position: 'absolute',
-                backgroundImage: 'none',
-                borderTopLeftRadius: theme.shape.borderRadius,
-                borderTopRightRadius: theme.shape.borderRadius,
-            }),
-        }, BackdropProps: {
-            sx: {
-                position: 'absolute',
-                backgroundColor: 'rgb(0 0 0 / 48%)',
-                backdropFilter: 'blur(3px)',
-            },
-        }, SlideProps: {
-            container: containerElement,
-        } }, { children: children })));
+        open: () => {
+            setDrawerOpen(true);
+            openRef.current = true;
+        },
+        close,
+    }), [close]);
+    return (_jsx(Drawer, Object.assign({ ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 });

package/components/BottomSheet/types.d.ts

@@ -5,6 +5,6 @@ export declare type BottomSheetProps = DrawerProps & {
 };
 export interface BottomSheetBase {
     isOpen(): void;
-    openDrawer(): void;
-    closeDrawer(): void;
+    open(): void;
+    close(): void;
 }

package/components/Card/Card.js

@@ -5,7 +5,7 @@ const getBackgroundColor = (theme, variant, selectionColor) => variant === 'sele
         ? theme.palette.mode === 'light'
             ? alpha(theme.palette.primary.main, 0.04)
             : alpha(theme.palette.primary.main, 0.42)
-        : alpha(theme.palette.secondary.main, 0.08)
+        : alpha(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
     : theme.palette.background.paper;
 export const Card = styled(Box, {
     shouldForwardProp: (prop) => !['dense', 'variant', 'indented', 'selectionColor'].includes(prop),

package/components/Card/CardHeader.d.ts

@@ -15,4 +15,4 @@ export declare const CardHeader: import("@emotion/styled").StyledComponent<{
     }> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ChainSelect/ChainSelect.js

@@ -22,7 +22,7 @@ export const ChainSelect = ({ formType }) => {
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - maxChainToOrder;
     return (_jsxs(ChainContainer, { children: [isLoading
                 ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => (_jsx(Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
+                : getChains().map((chain) => (_jsx(Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, Object.assign({ onClick: showAllChains }, { children: _jsx(Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',

package/components/ChainSelect/useChainSelect.js

@@ -17,10 +17,8 @@ export const useChainSelect = (formType) => {
         return selectedChains;
     };
     const setCurrentChain = (chainId) => {
-        setValue(chainKey, chainId, { shouldDirty: true });
-        setValue(SwapFormKeyHelper.getTokenKey(formType), '', {
-            shouldDirty: false,
-        });
+        setValue(chainKey, chainId, { shouldTouch: true });
+        setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(SwapFormKey.TokenSearchFilter, '');
         setChainOrder(chainId);

package/components/Dialog.d.ts

@@ -1,3 +1,24 @@
-import type { DialogProps } from '@mui/material';
+import type { DialogProps, Theme } from '@mui/material';
 import type { PropsWithChildren } from 'react';
+export declare const modalProps: {
+    sx: {
+        position: string;
+        overflow: string;
+    };
+};
+export declare const paperProps: {
+    sx: (theme: Theme) => {
+        position: string;
+        backgroundImage: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+};
+export declare const backdropProps: {
+    sx: {
+        position: string;
+        backgroundColor: string;
+        backdropFilter: string;
+    };
+};
 export declare const Dialog: React.FC<PropsWithChildren<DialogProps>>;

package/components/Dialog.js

@@ -1,23 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as MuiDialog } from '@mui/material';
-import { useScrollableContainer } from '../hooks';
+export const modalProps = {
+    sx: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+};
+export const paperProps = {
+    sx: (theme) => ({
+        position: 'absolute',
+        backgroundImage: 'none',
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+    }),
+};
+export const backdropProps = {
+    sx: {
+        position: 'absolute',
+        backgroundColor: 'rgb(0 0 0 / 32%)',
+        backdropFilter: 'blur(3px)',
+    },
+};
 export const Dialog = ({ children, open, onClose, }) => {
-    const containerElement = useScrollableContainer();
-    return (_jsx(MuiDialog, Object.assign({ open: open, onClose: onClose, container: containerElement, sx: {
-            position: 'absolute',
-            overflow: 'hidden',
-        }, PaperProps: {
-            sx: (theme) => ({
-                position: 'absolute',
-                backgroundImage: 'none',
-                borderTopLeftRadius: theme.shape.borderRadius,
-                borderTopRightRadius: theme.shape.borderRadius,
-            }),
-        }, BackdropProps: {
-            sx: {
-                position: 'absolute',
-                backgroundColor: 'rgb(0 0 0 / 32%)',
-                backdropFilter: 'blur(3px)',
-            },
-        } }, { children: children })));
+    return (_jsx(MuiDialog, Object.assign({ open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, disableEnforceFocus: true, disableScrollLock: true, disablePortal: true }, { children: children })));
 };