@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_cjs/components/TokenList/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TokenList"), exports);
+__exportStar(require("./useTokenSelect"), exports);

package/_cjs/components/TokenList/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_cjs/components/TokenList/useTokenSelect.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenSelect = void 0;
+const widget_1 = require("@lifi/widget");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../../providers");
+const useTokenSelect = (formType, onClick) => {
+    const tokenKey = providers_1.FormKeyHelper.getTokenKey(formType);
+    const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: tokenKey });
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const emitter = (0, widget_1.useWidgetEvents)();
+    return (0, react_1.useCallback)((tokenAddress, chainId) => {
+        onChange(tokenAddress);
+        onBlur();
+        const selectedChainId = chainId ?? getValues(providers_1.FormKeyHelper.getChainKey(formType));
+        // Set chain again to trigger URL builder update
+        setValue(providers_1.FormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldDirty: true,
+            shouldTouch: true,
+        });
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
+            providers_1.FormKeyHelper.getTokenKey(oppositeFormType),
+            providers_1.FormKeyHelper.getChainKey(oppositeFormType),
+        ]);
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChainId === selectedChainId &&
+            subvariant !== 'nft') {
+            setValue(providers_1.FormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: true,
+                shouldTouch: true,
+            });
+        }
+        const eventToEmit = formType === 'from'
+            ? widget_1.WidgetEvent.SourceChainTokenSelected
+            : widget_1.WidgetEvent.DestinationChainTokenSelected;
+        emitter.emit(eventToEmit, {
+            chainId: selectedChainId,
+            tokenAddress,
+        });
+        onClick?.();
+    }, [
+        emitter,
+        formType,
+        getValues,
+        onBlur,
+        onChange,
+        onClick,
+        setValue,
+        subvariant,
+    ]);
+};
+exports.useTokenSelect = useTokenSelect;

package/_cjs/config/queryClient.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queryClient = void 0;
+const react_query_1 = require("@tanstack/react-query");
+exports.queryClient = new react_query_1.QueryClient({
+    defaultOptions: {
+        queries: {
+            enabled: true,
+            staleTime: 3600000,
+            refetchInterval: false,
+            refetchIntervalInBackground: false,
+            refetchOnWindowFocus: true,
+            refetchOnReconnect: true,
+            refetchOnMount: true,
+            retryOnMount: true,
+            // suspense: true,
+        },
+        mutations: {
+            onError: (error) => {
+                //
+            },
+        },
+    },
+});

package/_cjs/config/theme.js

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const LoadingButton_1 = require("@mui/lab/LoadingButton");
+const ButtonBase_1 = require("@mui/material/ButtonBase");
+const DialogActions_1 = require("@mui/material/DialogActions");
+const colors_1 = require("@mui/material/colors");
+const styles_1 = require("@mui/material/styles");
+const palette = {
+    primary: {
+        main: '#3F49E1',
+        light: (0, styles_1.lighten)('#3F49E1', 0.5),
+        dark: (0, styles_1.darken)('#3F49E1', 0.2),
+    },
+    secondary: {
+        main: '#F5B5FF',
+        light: (0, styles_1.lighten)('#F5B5FF', 0.5),
+        dark: (0, styles_1.darken)('#F5B5FF', 0.2),
+    },
+    success: {
+        main: '#0AA65B',
+    },
+    warning: {
+        main: '#FFCC00',
+    },
+    error: {
+        main: '#E5452F',
+    },
+    info: {
+        main: '#297EFF',
+    },
+};
+const paletteLight = {
+    text: {
+        primary: '#000000',
+        secondary: '#747474',
+    },
+};
+const paletteDark = {
+    background: {
+        paper: '#212121',
+    },
+};
+const shape = {
+    borderRadius: 12,
+    borderRadiusSecondary: 8,
+};
+const enterKeyframe = (0, styles_1.keyframes) `
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
+const createTheme = (mode, theme = {}) => {
+    const primaryMainColor = theme.palette?.primary?.main ??
+        palette.primary.main;
+    const primaryLightColor = (0, styles_1.lighten)(theme.palette?.primary?.main ??
+        palette.primary.main, 0.5);
+    const primaryDarkColor = (0, styles_1.darken)(theme.palette?.primary?.main ??
+        palette.primary.main, 0.2);
+    const contrastButtonColor = (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
+        ? colors_1.common.white
+        : colors_1.common.black;
+    const contrastTextButtonColor = (0, styles_1.getContrastRatio)(colors_1.common.white, (0, styles_1.alpha)(primaryMainColor, 0.08)) >= 3
+        ? colors_1.common.white
+        : colors_1.common.black;
+    return (0, styles_1.createTheme)({
+        typography: {
+            fontFamily: 'Inter var, Inter, sans-serif',
+            ...theme.typography,
+        },
+        palette: {
+            mode,
+            ...palette,
+            ...(mode === 'light' ? paletteLight : paletteDark),
+            ...theme.palette,
+            primary: {
+                main: primaryMainColor,
+                light: primaryLightColor,
+                dark: primaryDarkColor,
+            },
+            secondary: {
+                main: theme.palette?.secondary?.main ??
+                    palette.secondary.main,
+                light: (0, styles_1.lighten)(theme.palette?.secondary?.main ??
+                    palette.secondary.main, 0.5),
+                dark: (0, styles_1.darken)(theme.palette?.secondary?.main ??
+                    palette.secondary.main, 0.2),
+            },
+        },
+        shape: {
+            ...shape,
+            ...theme.shape,
+        },
+        breakpoints: {
+            values: {
+                xs: 0,
+                sm: 392,
+                md: 900,
+                lg: 1200,
+                xl: 1536,
+            },
+        },
+        components: {
+            MuiScopedCssBaseline: {
+                styleOverrides: {
+                    root: {
+                        fontFamily: 'Inter, sans-serif',
+                        ...theme.typography,
+                        '@supports (font-variation-settings: normal)': {
+                            fontFamily: 'Inter var, sans-serif',
+                            ...theme.typography,
+                        },
+                    },
+                },
+            },
+            MuiButtonBase: {
+                styleOverrides: {
+                    // This `css()` function invokes keyframes. `styled-components` only supports keyframes
+                    // in string templates. Do not convert these styles in JS object as it will break.
+                    root: (0, styles_1.css) `
+            &
+              .${ButtonBase_1.touchRippleClasses.ripple}.${ButtonBase_1.touchRippleClasses.rippleVisible} {
+              opacity: 0.1;
+              animation-name: ${enterKeyframe};
+            }
+          `,
+                },
+            },
+            MuiButton: {
+                defaultProps: {
+                    disableElevation: true,
+                },
+                styleOverrides: {
+                    root: {
+                        borderRadius: theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary,
+                        textTransform: 'none',
+                        fontSize: '1rem',
+                        [`&.Mui-disabled, &.Mui-disabled:hover`]: {
+                            color: mode === 'light'
+                                ? (0, styles_1.alpha)(colors_1.common.black, 0.56)
+                                : (0, styles_1.alpha)(colors_1.common.white, 0.56),
+                            cursor: 'not-allowed',
+                            pointerEvents: 'auto',
+                        },
+                        [`&.${LoadingButton_1.loadingButtonClasses.loading}.Mui-disabled`]: {
+                            backgroundColor: primaryMainColor,
+                            color: contrastButtonColor,
+                            cursor: 'auto',
+                            pointerEvents: 'auto',
+                        },
+                        [`.${LoadingButton_1.loadingButtonClasses.loadingIndicator}`]: {
+                            color: contrastButtonColor,
+                        },
+                        [`&.${LoadingButton_1.loadingButtonClasses.root}.${LoadingButton_1.loadingButtonClasses.loading}`]: {
+                            color: 'transparent',
+                        },
+                    },
+                    text: {
+                        backgroundColor: mode === 'light'
+                            ? (0, styles_1.alpha)(primaryMainColor, 0.08)
+                            : (0, styles_1.alpha)(primaryMainColor, 0.42),
+                        '&:hover': {
+                            backgroundColor: mode === 'light'
+                                ? (0, styles_1.alpha)(primaryMainColor, 0.12)
+                                : (0, styles_1.alpha)(primaryMainColor, 0.56),
+                        },
+                        color: mode === 'light' ? primaryMainColor : contrastTextButtonColor,
+                    },
+                    contained: {
+                        '&:hover': {
+                            color: contrastButtonColor,
+                        },
+                    },
+                    sizeMedium: {
+                        padding: '10px 14px',
+                        [`.${DialogActions_1.dialogActionsClasses.root} &`]: {
+                            padding: '6px 12px',
+                        },
+                    },
+                },
+            },
+            MuiIconButton: {
+                styleOverrides: {
+                    root: {
+                        color: 'inherit',
+                        '&:hover': {
+                            color: 'inherit',
+                        },
+                    },
+                },
+            },
+            MuiAvatar: {
+                styleOverrides: {
+                    root: {
+                        height: 32,
+                        width: 32,
+                    },
+                },
+                ...theme.components?.MuiAvatar,
+            },
+            MuiListItemAvatar: {
+                styleOverrides: {
+                    root: {
+                        minWidth: 48,
+                    },
+                },
+            },
+            MuiListItemText: {
+                styleOverrides: {
+                    primary: ({ theme }) => ({
+                        fontWeight: '500',
+                        fontSize: '1.125rem',
+                        lineHeight: '1.2778',
+                        color: theme.palette.text.primary,
+                    }),
+                    secondary: ({ theme }) => ({
+                        fontWeight: '400',
+                        fontSize: '0.75rem',
+                        color: theme.palette.text.secondary,
+                    }),
+                },
+            },
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: ({ theme }) => ({
+                        backgroundColor: 'rgb(0 0 0 / 64%)',
+                        backdropFilter: 'blur(3px)',
+                        fontSize: '0.75rem',
+                        padding: theme.spacing(1, 1.5),
+                    }),
+                    arrow: {
+                        color: 'rgb(0 0 0 / 64%)',
+                    },
+                },
+            },
+        },
+    });
+};
+exports.createTheme = createTheme;

package/_cjs/config/version.d.ts

@@ -0,0 +1,2 @@
+export declare const name = "@lifi/widget";
+export declare const version = "3.0.0-alpha.6";

package/_cjs/config/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.version = exports.name = void 0;
+exports.name = '@lifi/widget';
+exports.version = '3.0.0-alpha.6';

package/_cjs/hooks/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAccount"), exports);
+__exportStar(require("./useAvailableChains"), exports);
+__exportStar(require("./useChain"), exports);
+__exportStar(require("./useChains"), exports);
+__exportStar(require("./useContentHeight"), exports);
+__exportStar(require("./useDebouncedWatch"), exports);
+__exportStar(require("./useDefaultElementId"), exports);
+__exportStar(require("./useExpandableVariant"), exports);
+__exportStar(require("./useFeaturedTokens"), exports);
+__exportStar(require("./useFromTokenSufficiency"), exports);
+__exportStar(require("./useGasRecommendation"), exports);
+__exportStar(require("./useGasRefuel"), exports);
+__exportStar(require("./useGasSufficiency"), exports);
+__exportStar(require("./useInitializer"), exports);
+__exportStar(require("./useLanguages"), exports);
+__exportStar(require("./useNavigateBack"), exports);
+__exportStar(require("./useProcessMessage"), exports);
+__exportStar(require("./useRequiredToAddress"), exports);
+__exportStar(require("./useRouteExecution"), exports);
+__exportStar(require("./useRoutes"), exports);
+__exportStar(require("./useScrollableContainer"), exports);
+__exportStar(require("./useSettingMonitor"), exports);
+__exportStar(require("./useSwapOnly"), exports);
+__exportStar(require("./useToken"), exports);
+__exportStar(require("./useTokenAddressBalance"), exports);
+__exportStar(require("./useTokenBalance"), exports);
+__exportStar(require("./useTokenBalances"), exports);
+__exportStar(require("./useTokenSearch"), exports);
+__exportStar(require("./useTokens"), exports);
+__exportStar(require("./useTools"), exports);
+__exportStar(require("./useTransactionDetails"), exports);
+__exportStar(require("./useTransactionHistory"), exports);
+__exportStar(require("./useWidgetEvents"), exports);

package/_cjs/hooks/useAccount.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccountDisconnect = exports.useAccount = void 0;
+const sdk_1 = require("@lifi/sdk");
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const react_1 = require("react");
+const wagmi_1 = require("wagmi");
+const useAccount = () => {
+    const account = (0, wagmi_1.useAccount)();
+    const { wallet } = (0, wallet_adapter_react_1.useWallet)();
+    return (0, react_1.useMemo)(() => {
+        const svm = wallet?.adapter.publicKey
+            ? {
+                address: wallet?.adapter.publicKey.toString(),
+                chainId: sdk_1.ChainId.SOL,
+                chainType: sdk_1.ChainType.SVM,
+                connector: wallet?.adapter,
+                isConnected: Boolean(wallet?.adapter.publicKey),
+                isConnecting: false,
+                isReconnecting: false,
+                isDisconnected: !wallet,
+                status: 'connected',
+            }
+            : {
+                chainType: sdk_1.ChainType.SVM,
+                isConnected: false,
+                isConnecting: false,
+                isReconnecting: false,
+                isDisconnected: true,
+                status: 'disconnected',
+            };
+        const evm = { ...account, chainType: sdk_1.ChainType.EVM };
+        return {
+            account: account.isConnected ? evm : svm,
+            accounts: [evm, svm],
+        };
+    }, [account, wallet]);
+};
+exports.useAccount = useAccount;
+const useAccountDisconnect = () => {
+    const account = (0, wagmi_1.useAccount)();
+    const { disconnect: wagmiDisconnect } = (0, wagmi_1.useDisconnect)();
+    const { wallet, disconnect } = (0, wallet_adapter_react_1.useWallet)();
+    return () => {
+        if (account.isConnected) {
+            wagmiDisconnect();
+        }
+        if (wallet) {
+            disconnect();
+        }
+    };
+};
+exports.useAccountDisconnect = useAccountDisconnect;

package/_cjs/hooks/useAvailableChains.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvailableChains = void 0;
+const sdk_1 = require("@lifi/sdk");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const useAvailableChains = () => {
+    const { data, isLoading } = (0, react_query_1.useQuery)({
+        queryKey: ['chains'],
+        queryFn: async () => {
+            const chains = await (0, sdk_1.getChains)({
+                chainTypes: [sdk_1.ChainType.EVM, sdk_1.ChainType.SVM],
+            });
+            sdk_1.config.setChains(chains);
+            return chains;
+        },
+        refetchInterval: 300000,
+        staleTime: 300000,
+    });
+    const getChainById = (0, react_1.useCallback)((chainId, chains = data) => {
+        if (!chainId) {
+            return;
+        }
+        const chain = chains?.find((chain) => chain.id === chainId);
+        // if (!chain) {
+        //   throw new Error('Chain not found or chainId is invalid.');
+        // }
+        return chain;
+    }, [data]);
+    return {
+        chains: data,
+        getChainById,
+        isLoading,
+    };
+};
+exports.useAvailableChains = useAvailableChains;

package/_cjs/hooks/useChain.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChain = void 0;
+const react_1 = require("react");
+const useAvailableChains_1 = require("./useAvailableChains");
+const useChain = (chainId) => {
+    const { isLoading, getChainById } = (0, useAvailableChains_1.useAvailableChains)();
+    const chain = (0, react_1.useMemo)(() => getChainById(chainId), [chainId, getChainById]);
+    return {
+        chain,
+        isLoading,
+    };
+};
+exports.useChain = useChain;

package/_cjs/hooks/useChains.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChains = void 0;
+const react_1 = require("react");
+const providers_1 = require("../providers");
+const useAvailableChains_1 = require("./useAvailableChains");
+const useChains = () => {
+    const { chains } = (0, providers_1.useWidgetConfig)();
+    const { chains: availableChains, isLoading: isLoadingAvailableChains, getChainById, } = (0, useAvailableChains_1.useAvailableChains)();
+    const filteredChains = (0, react_1.useMemo)(() => {
+        const filteredChains = availableChains?.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains));
+        return filteredChains;
+    }, [availableChains, chains]);
+    return {
+        chains: filteredChains,
+        getChainById,
+        isLoading: isLoadingAvailableChains,
+    };
+};
+exports.useChains = useChains;

package/_cjs/hooks/useContentHeight.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetContentHeight = exports.useContentHeight = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useDefaultElementId_1 = require("./useDefaultElementId");
+const useScrollableContainer_1 = require("./useScrollableContainer");
+const getContentHeight = (elementId) => {
+    const containerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId));
+    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
+    if (!containerElement || !headerElement) {
+        console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
+        return 0;
+    }
+    const { height: containerHeight } = containerElement.getBoundingClientRect();
+    const { height: headerHeight } = headerElement.getBoundingClientRect();
+    return containerHeight - headerHeight;
+};
+const useContentHeight = () => {
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
+    (0, react_1.useLayoutEffect)(() => {
+        setContentHeight(getContentHeight(elementId));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return contentHeight;
+};
+exports.useContentHeight = useContentHeight;
+const useSetContentHeight = (ref) => {
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
+    (0, react_1.useLayoutEffect)(() => {
+        const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)(elementId);
+        if (!scrollableContainer ||
+            !ref.current ||
+            ref.current?.clientHeight <= scrollableContainer?.clientHeight) {
+            return;
+        }
+        scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+        return () => {
+            scrollableContainer.style.removeProperty('height');
+        };
+    }, [elementId, ref]);
+};
+exports.useSetContentHeight = useSetContentHeight;

package/_cjs/hooks/useDebouncedWatch.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedWatch = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const useDebouncedWatch = (name, delay) => {
+    const watchedValue = (0, react_hook_form_1.useWatch)({
+        name,
+    });
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(watchedValue);
+    const debouncedValueRef = (0, react_1.useRef)();
+    const isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isMounted.current) {
+            const hasWatchedValue = Array.isArray(watchedValue)
+                ? watchedValue.some((value) => value)
+                : Boolean(watchedValue);
+            if (hasWatchedValue) {
+                const handler = setTimeout(() => {
+                    setDebouncedValue(watchedValue);
+                }, delay);
+                return () => clearTimeout(handler);
+            }
+            debouncedValueRef.current = watchedValue;
+            setDebouncedValue(watchedValue);
+            return undefined;
+        }
+        isMounted.current = true;
+        return undefined;
+    }, [delay, watchedValue]);
+    return debouncedValue;
+};
+exports.useDebouncedWatch = useDebouncedWatch;

package/_cjs/hooks/useDefaultElementId.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultElementId = void 0;
+const providers_1 = require("../providers");
+const useDefaultElementId = () => {
+    const { elementId } = (0, providers_1.useWidgetConfig)();
+    return elementId;
+};
+exports.useDefaultElementId = useDefaultElementId;

package/_cjs/hooks/useExpandableVariant.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandableVariant = void 0;
+const useMediaQuery_1 = require("@mui/material/useMediaQuery");
+const providers_1 = require("../providers");
+const defaultExpandableWidth = 852;
+const useExpandableVariant = () => {
+    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
+    const expandableAllowed = (0, useMediaQuery_1.default)((theme) => theme.breakpoints.up(defaultExpandableWidth));
+    return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
+};
+exports.useExpandableVariant = useExpandableVariant;

package/_cjs/hooks/useFeaturedTokens.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeaturedTokens = void 0;
+const react_1 = require("react");
+const providers_1 = require("../providers");
+const useFeaturedTokens = (selectedChainId) => {
+    const { tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => tokens?.featured?.filter((token) => token.chainId === selectedChainId), [selectedChainId, tokens?.featured]);
+};
+exports.useFeaturedTokens = useFeaturedTokens;