@layerswap/widget 1.0.0 → 1.0.1

package/dist/esm/components/Modal/modalWithoutAnimation.js

@@ -35,7 +35,7 @@ export const ModalContent = (props) => {
     }, [isOpen]);
     if (!isOpen)
         return null;
-    const modalElement = (_jsxs("div", { className: clsx("absolute inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col", className), children: [(header || showCloseButton) && (_jsx("div", { className: "w-full relative", children: _jsxs("div", { className: "flex items-center w-full text-left justify-between px-4 pt-2 pb-2 gap-x-2", children: [_jsx("div", { className: "flex-1 text-lg text-secondary-text font-semibold w-full flex justify-end", children: header }), showCloseButton && (_jsx(IconButton, { onClick: closeModal, className: "active:animate-press-down", icon: _jsx(X, { strokeWidth: 3 }) }))] }) })), _jsx("div", { className: "flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden overflow-y-auto relative pb-3", children: typeof children === 'function' ? children({ closeModal, shouldFocus }) : children })] }));
+    const modalElement = (_jsxs("div", { className: clsx("absolute inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col", className), children: [(header || showCloseButton) && (_jsx("div", { className: "w-full relative", children: _jsxs("div", { className: "flex items-center w-full text-left justify-between px-4 pt-2 pb-2 gap-x-2 sm:gap-x-1", children: [_jsx("div", { className: "flex-1 text-lg text-secondary-text font-semibold w-full flex justify-end", children: header }), showCloseButton && (_jsx(IconButton, { onClick: closeModal, className: "active:animate-press-down", icon: _jsx(X, { strokeWidth: 3 }) }))] }) })), _jsx("div", { className: "flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden overflow-y-auto relative pb-3", children: typeof children === 'function' ? children({ closeModal, shouldFocus }) : children })] }));
     const widgetElement = document.getElementById('widget');
     if (!widgetElement) {
         console.warn('Widget element not found, modal will not render');

package/dist/esm/components/Modal/vaulModal.js

@@ -11,7 +11,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Drawer } from './vaul';
 import AppSettings from '../../lib/AppSettings';
 const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className }) => {
-    const { isMobileWithPortal: isMobile } = useWindowDimensions();
+    const { isMobileWithPortal: isMobile, isMobile: isMobileWithoutPortal } = useWindowDimensions();
     let [headerRef, { height }] = useMeasure();
     const { setHeaderHeight } = useSnapPoints();
     const expandRef = useRef(null);
@@ -77,7 +77,7 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
     }, [isMobile]);
     if (!loaded)
         return null;
-    const container = isMobile ? undefined : document.getElementById('widget');
+    const container = (isMobile && AppSettings.ThemeData?.enablePortal) ? undefined : document.getElementById('widget');
     return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
             if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
                 expandRef.current?.classList.add('hidden');
@@ -86,7 +86,7 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
                         : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
                         'border-none! rounded-none!': snap === 1,
                         '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
-                    }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobile &&
+                    }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobileWithoutPortal &&
                                     _jsx("div", { className: "flex justify-center w-full mt-2 mb-[6px]", children: _jsx(Drawer.Handle, { className: '!w-12 !bg-primary-text-tertiary' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-4 sm:pt-2 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold w-full", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { children: _jsx(IconButton, { className: 'inline-flex active:animate-press-down', icon: _jsx(X, { strokeWidth: 3 }) }) }) })] }), description &&
                                     _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', {
                                 'overflow-y-auto h-full': snap === 1,

package/dist/esm/components/Pages/Swap/Form/ExchangeForm.js

@@ -44,19 +44,20 @@ const ExchangeForm = ({ partner }) => {
     const handleActionHover = (value) => {
         setActionTempValue(value);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsx("div", { className: "w-full max-sm:min-h-[79svh] flex flex-col justify-between mt-2 sm:mt-0", children: _jsx("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full leading-4', children: _jsxs("div", { className: "flex flex-col w-full space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
-                                                            const addressProviderIcon = (partner?.is_wallet && addressItem?.group === AddressGroup.FromQuery && partner?.logo) ? partner.logo : undefined;
-                                                            return _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet, addressProviderIcon: addressProviderIcon }) })
-                                                                    : destination_address ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: destination_address }) })
-                                                                        :
-                                                                            _jsxs("span", { className: "flex items-center", children: [_jsx(SelectedEchangePlaceholder, { placeholder: 'Enter destination address' }), _jsx("span", { className: "absolute right-0 px-1 pr-5 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }) });
-                                                        } }) })] }), _jsxs("div", { className: "bg-secondary-500 rounded-2xl p-3 group space-y-2", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base ml-2 leading-5", children: "Enter amount" }), from && fromCurrency && minAllowedAmount && maxAmountFromApi &&
-                                                            _jsx("div", { className: clsx({
-                                                                    "hidden": !showQuickActions,
-                                                                    "block": showQuickActions,
-                                                                }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: "deposit_address" }) })] }), _jsx("div", { className: "relative group exchange-amount-field", children: _jsx(AmountField, { className: "!pb-0 !rounded-xl", fee: quote, usdPosition: "right", actionValue: actionTempValue }) })] })] }) }) }) }), _jsxs(Widget.Footer, { showPoweredBy: true, children: [_jsxs("div", { className: "space-y-3", children: [routeValidation.message
-                                        ? _jsx(ValidationError, {})
-                                        : null, _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }), _jsx(FormButton, { shouldConnectWallet: false, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsxs(Widget.Content, { children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
+                                                const addressProviderIcon = (partner?.is_wallet && addressItem?.group === AddressGroup.FromQuery && partner?.logo) ? partner.logo : undefined;
+                                                return _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet, addressProviderIcon: addressProviderIcon }) })
+                                                        : destination_address ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: destination_address }) })
+                                                            :
+                                                                _jsxs("span", { className: "flex items-center", children: [_jsx(SelectedEchangePlaceholder, { placeholder: 'Enter destination address' }), _jsx("span", { className: "absolute right-0 px-1 pr-5 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }) });
+                                            } }) })] }), _jsxs("div", { className: "bg-secondary-500 rounded-2xl p-3 group space-y-2", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base ml-2 leading-5", children: "Enter amount" }), from && fromCurrency && minAllowedAmount && maxAmountFromApi &&
+                                                _jsx("div", { className: clsx({
+                                                        "hidden": !showQuickActions,
+                                                        "block": showQuickActions,
+                                                    }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: "deposit_address" }) })] }), _jsx("div", { className: "relative group exchange-amount-field", children: _jsx(AmountField, { className: "pb-0! rounded-xl!", fee: quote, usdPosition: "right", actionValue: actionTempValue }) })] }), routeValidation.message
+                                ?
+                                    _jsx(ValidationError, {})
+                                : _jsx(_Fragment, {}), _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: false, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) })] })] }));
 };
 export default ExchangeForm;
 const AddressButton = ({ address, network, wallet, addressProviderIcon }) => {

package/dist/esm/components/Wallet/WalletModal/ConnectorsList.js

@@ -17,6 +17,7 @@ import { Checkbox } from "../../../components/shadcn/checkbox";
 import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
 import { SearchComponent } from "../../../components/Input/Search";
 import { isMobile } from "../../../lib/wallets/utils/isMobile";
+import AppSettings from "../../../lib/AppSettings";
 const ConnectorsList = ({ onFinish }) => {
     const { providers } = useWallet();
     const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector, selectedMultiChainConnector, setSelectedMultiChainConnector } = useConnectModal();
@@ -115,8 +116,8 @@ const ConnectorsList = ({ onFinish }) => {
     }
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "text-primary-text space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SearchComponent, { searchQuery: searchValue || "", setSearchQuery: setSearchValue, placeholder: allHiddenConnectors.length > 300 ? "Search through 400+ wallets..." : "Search wallet", className: "w-full" }), (!selectedProvider || selectedProvider?.isSelectedFromFilter) &&
                             _jsx(ProviderPicker, { providers: filteredProviders, selectedProviderName: selectedProvider?.name, setSelectedProviderName: handleSelectProvider })] }), _jsx("div", { onScroll: handleScroll, className: clsx('overflow-y-scroll -mr-4 pr-2 scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar-thumb:bg-transparent', {
-                        'h-[55vh]': isMobileSize,
-                        'h-[265px]': !isMobileSize,
+                        'h-[55vh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
+                        'h-[265px]': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
                         'styled-scroll': isScrolling
                     }), children: _jsx("div", { className: 'grid grid-cols-2 gap-2', children: allConnectors.map(item => {
                             const provider = featuredProviders.find(p => p.name === item.providerName);
@@ -130,19 +131,19 @@ const LoadingConnect = ({ onRetry, selectedConnector, connectionError }) => {
     const isMobilePlatform = isMobile();
     if (selectedConnector.installUrl) {
         return _jsx("div", { className: clsx('w-full flex flex-col justify-center items-center font-semibold relative', {
-                'h-[60vh]': isMobileSize,
-                'h-[360px]': !isMobileSize,
+                'h-[60vh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
+                'h-[300px]': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
             }), children: _jsxs("div", { className: "flex flex-col gap-4 items-center justify-end row-start-2 row-span-1", children: [_jsxs("div", { className: "flex-col flex items-center gap-1", children: [_jsx(ConnectorIcon, { className: "w-11 h-auto p-0.5 rounded-md bg-secondary-800" }), _jsxs("p", { className: 'text-base font-semibold', children: [_jsx("span", { children: selectedConnector?.name }), " ", _jsx("span", { children: "is not installed" })] })] }), _jsx("button", { onClick: () => window.open(selectedConnector.installUrl, '_blank'), type: "button", className: "px-3 py-1 rounded-full bg-secondary-600 text-primary-500 font-semibold text-base hover:brightness-125 transition-all duration-200", children: "INSTALL" })] }) });
     }
     return (_jsxs("div", { className: clsx('w-full flex flex-col justify-center items-center font-semibold relative', {
-            'h-[60vh]': isMobileSize,
-            'h-[360px]': !isMobileSize,
+            'h-[60vh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
+            'h-[300px]': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
             'pb-20': connectionError
         }), children: [selectedConnector &&
                 _jsxs("div", { className: "flex flex-col gap-3 items-center justify-end row-start-2 row-span-1", children: [_jsx("div", { className: "flex-col flex items-center", children: _jsxs("div", { className: "grid grid-cols-3 items-center gap-2", children: [_jsx("div", { className: "p-3 bg-secondary-700 rounded-lg z-10", children: _jsx(LayerSwapLogoSmall, { className: "w-11 h-auto" }) }), connectionError ?
                                         _jsx(Link2Off, { className: "w-auto h-auto place-self-center" })
                                         :
-                                            _jsx("div", { className: "loader !text-[3px] place-self-center" }), _jsx("div", { className: "p-3 bg-secondary-700 rounded-lg z-10", children: _jsx(ConnectorIcon, { className: "w-11 h-auto" }) })] }) }), !connectionError &&
+                                            _jsx("div", { className: "loader text-[3px]! place-self-center" }), _jsx("div", { className: "p-3 bg-secondary-700 rounded-lg z-10", children: _jsx(ConnectorIcon, { className: "w-11 h-auto" }) })] }) }), !connectionError &&
                             _jsxs("div", { className: "py-1 text-center", children: [_jsx("p", { className: "text-base font-medium", children: isMobilePlatform ? 'Approve connection in your wallet' : 'Approve connection in your wallet pop-up' }), _jsx("p", { className: "text-sm font-normal text-secondary-text", children: isMobilePlatform ? "Don't see the request? Check your wallet app." : "Don't see a pop-up? Check your browser windows." })] })] }), connectionError &&
                 _jsxs("div", { className: `bg-secondary-500 rounded-lg flex flex-col gap-1.5 items-center p-3 w-full absolute bottom-0`, children: [_jsxs("div", { className: "flex w-full gap-1 text-sm text-secondary-text justify-start", children: [_jsx(CircleX, { className: "w-5 h-5 stroke-primary-500 mr-1 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base text-white', children: "Failed to connect" }), _jsx("p", { className: "text-sm font-normal", children: connectionError })] })] }), _jsxs("button", { type: "button", className: "flex gap-1.5 items-center justify-center bg-secondary-400 w-full text-primary-text p-4 border-none rounded-lg cursor-pointer text-sm font-medium leading-4", onClick: onRetry, children: [_jsx(RotateCw, { className: 'h-4 w-4' }), _jsx("span", { children: "Try again" })] })] })] }));
 };
@@ -161,7 +162,7 @@ const ProviderPicker = ({ providers, selectedProviderName, setSelectedProviderNa
 };
 const MultichainConnectorPicker = ({ selectedConnector, allConnectors, providers, connect }) => {
     const Icon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col gap-4 py-15", children: [_jsx("div", { className: "flex justify-center gap-1", children: _jsx(Icon, { className: "w-14 h-auto rounded-lg" }) }), _jsxs("p", { className: "text-base text-center text-primary-text", children: [_jsx("span", { children: selectedConnector.name }), " ", _jsx("span", { children: "supports multiple network types. Please select the one you'd like to use." })] })] }), _jsx("div", { className: "flex flex-col gap-2 w-full", children: allConnectors.filter(c => c?.name === selectedConnector.name)?.map((connector, index) => {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col gap-4 py-10", children: [_jsx("div", { className: "flex justify-center gap-1", children: _jsx(Icon, { className: "w-14 h-auto rounded-lg" }) }), _jsxs("p", { className: "text-base text-center text-primary-text", children: [_jsx("span", { children: selectedConnector.name }), " ", _jsx("span", { children: "supports multiple network types. Please select the one you'd like to use." })] })] }), _jsx("div", { className: "flex flex-col gap-2 w-full", children: allConnectors.filter(c => c?.name === selectedConnector.name)?.map((connector, index) => {
                     const provider = providers.find(p => p.name === connector?.providerName);
                     return (_jsxs("button", { type: "button", onClick: async () => {
                             await connect(connector, provider);

package/dist/esm/components/Widget/Index.js

@@ -5,10 +5,14 @@ import { default as Content } from './Content';
 import { default as Footer } from './Footer';
 import { useRef } from "react";
 import AppSettings from "../../lib/AppSettings";
+import clsx from "clsx";
 const Widget = ({ children, hideMenu, goBack, contextualMenu }) => {
     const wrapper = useRef(null);
     return _jsxs("div", { className: "relative p-px", children: [AppSettings.ThemeData?.enableWideVersion &&
-                _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" }), _jsxs("div", { id: "widget", style: AppSettings.ThemeData?.cardBackgroundStyle, className: "sm:pb-4 rounded-3xl w-full sm:overflow-hidden relative bg-secondary-700 max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh] has-openwithdrawalmodal:min-h-[650px] h-full flex flex-col", children: [AppSettings.ApiVersion === 'sandbox' &&
+                _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" }), _jsxs("div", { id: "widget", style: AppSettings.ThemeData?.cardBackgroundStyle, className: clsx("sm:pb-4 rounded-3xl w-full sm:overflow-hidden relative bg-secondary-700 h-full flex flex-col", {
+                    "max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh]": AppSettings.ThemeData?.enableWideVersion,
+                    "sm:has-openpicker:min-h-[650px]": !AppSettings.ThemeData?.enableWideVersion,
+                }), children: [AppSettings.ApiVersion === 'testnet' &&
                         _jsx("div", { className: "relative z-20", children: _jsx("div", { className: "absolute -top-1 right-[calc(50%-68px)] bg-[#D95E1B] py-0.5 px-10 rounded-b-md text-xs scale-75", children: "TESTNET" }) }), !hideMenu &&
                         _jsx(HeaderWithMenu, { goBack: goBack, contextualMenu: contextualMenu }), _jsx("div", { className: "relative flex-col px-4 h-full min-h-0 flex flex-1", children: _jsx("div", { className: "flex flex-col flex-1 items-start h-full min-h-0 w-full gap-3", ref: wrapper, children: children }) }), _jsx("div", { id: "widget_root" })] })] });
 };

package/dist/esm/context/LayerswapProvider.js

@@ -23,7 +23,7 @@ const LayerswapProviderComponent = ({ children, callbacks, config, walletProvide
     let { apiKey, version, settings: _settings, theme: themeData, imtblPassport, initialValues } = config || {};
     const [fetchedSettings, setFetchedSettings] = useState(null);
     themeData = { ...THEME_COLORS['default'], ...config?.theme };
-    AppSettings.ApiVersion = version;
+    AppSettings.ApiVersion = version || AppSettings.ApiVersion;
     AppSettings.ImtblPassportConfig = imtblPassport;
     AppSettings.WalletConnectConfig = config?.walletConnect || AppSettings.WalletConnectConfig;
     AppSettings.ThemeData = themeData;
@@ -32,7 +32,7 @@ const LayerswapProviderComponent = ({ children, callbacks, config, walletProvide
     useEffect(() => {
         if (!_settings) {
             (async () => {
-                const fetchedSettings = await getSettings();
+                const fetchedSettings = await getSettings(version || AppSettings.ApiVersion);
                 if (!fetchedSettings)
                     throw new Error('Failed to fetch settings');
                 setFetchedSettings(fetchedSettings);

package/dist/esm/exports/index.js

@@ -6,7 +6,7 @@ export { CampaignDetails } from '../components/Pages/Campaigns/Details';
 export { WidgetLoading } from '../components/WidgetLoading';
 export { LayerSwapSettings } from '../Models/LayerSwapSettings';
 export { THEME_COLORS } from '../Models/Theme';
-export { getSettings } from '../helpers/getSettings';
+export { getSettings, useSettings } from '../helpers/getSettings';
 export { LayerswapProvider } from '../context/LayerswapProvider';
 export { useSettingsState } from '../context/settings';
 export { resolveWalletConnectorIcon, walletIconResolver } from '../lib/wallets/utils/resolveWalletIcon';

package/dist/esm/helpers/getSettings.js

@@ -1,6 +1,8 @@
+import { useEffect, useState } from "react";
 import LayerSwapApiClient from "../lib/apiClients/layerSwapApiClient";
-export async function getSettings() {
+export async function getSettings(apiKey) {
     const apiClient = new LayerSwapApiClient();
+    LayerSwapApiClient.apiKey = apiKey;
     const { data: networkData } = await apiClient.GetLSNetworksAsync();
     const { data: sourceExchangesData } = await apiClient.GetSourceExchangesAsync();
     const { data: sourceRoutes } = await apiClient.GetRoutesAsync('sources');
@@ -15,3 +17,17 @@ export async function getSettings() {
     };
     return settings;
 }
+export function useSettings(apiKey) {
+    const [loading, setLoading] = useState(true);
+    const [settings, setSettings] = useState(null);
+    useEffect(() => {
+        (async () => {
+            const settings = await getSettings(apiKey);
+            if (!settings)
+                throw new Error('Failed to fetch settings');
+            setSettings(settings);
+            setLoading(false);
+        })();
+    }, []);
+    return { settings, loading };
+}