@rango-dev/widget-embedded 0.17.1-next.6 → 0.17.1-next.8

package/dist/store/AppStore.d.ts

@@ -4,56 +4,8 @@ import React from 'react';
 type AppStoreProviderProps = PropsWithChildren<{
     config?: WidgetConfig;
 }>;
-export declare const AppStoreContext: React.Context<({
-    (): import("./app").AppStoreState;
-    <U>(selector: (state: import("./app").AppStoreState) => U, equals?: ((a: U, b: U) => boolean) | undefined): U;
-} & import("zustand").StoreApi<import("./app").AppStoreState> & {
-    use: {
-        _blockchains: () => import("rango-sdk").BlockchainMeta[];
-        _tokens: () => import("rango-sdk").Token[];
-        _popularTokens: () => import("rango-sdk").Token[];
-        _swappers: () => import("rango-sdk").SwapperMeta[];
-        fetchStatus: () => import("./slices/data").FetchStatus;
-        blockchains: () => (options?: {
-            type?: "source" | "destination" | undefined;
-        } | undefined) => import("rango-sdk").BlockchainMeta[];
-        tokens: () => (options?: {
-            type?: "source" | "destination" | undefined;
-            blockchain?: string | undefined;
-            searchFor?: string | undefined;
-        } | undefined) => import("rango-sdk").Token[];
-        swappers: () => () => import("rango-sdk").SwapperMeta[];
-        isTokenPinned: () => (token: import("rango-sdk").Token) => boolean;
-        fetch: () => () => Promise<void>;
-        config: () => WidgetConfig;
-        updateConfig: () => (config: WidgetConfig) => void;
-    };
-}) | null>;
-export declare function useAppStore(): {
-    (): import("./app").AppStoreState;
-    <U>(selector: (state: import("./app").AppStoreState) => U, equals?: ((a: U, b: U) => boolean) | undefined): U;
-} & import("zustand").StoreApi<import("./app").AppStoreState> & {
-    use: {
-        _blockchains: () => import("rango-sdk").BlockchainMeta[];
-        _tokens: () => import("rango-sdk").Token[];
-        _popularTokens: () => import("rango-sdk").Token[];
-        _swappers: () => import("rango-sdk").SwapperMeta[];
-        fetchStatus: () => import("./slices/data").FetchStatus;
-        blockchains: () => (options?: {
-            type?: "source" | "destination" | undefined;
-        } | undefined) => import("rango-sdk").BlockchainMeta[];
-        tokens: () => (options?: {
-            type?: "source" | "destination" | undefined;
-            blockchain?: string | undefined;
-            searchFor?: string | undefined;
-        } | undefined) => import("rango-sdk").Token[];
-        swappers: () => () => import("rango-sdk").SwapperMeta[];
-        isTokenPinned: () => (token: import("rango-sdk").Token) => boolean;
-        fetch: () => () => Promise<void>;
-        config: () => WidgetConfig;
-        updateConfig: () => (config: WidgetConfig) => void;
-    };
-};
+export declare const AppStoreContext: React.Context<import("zustand").UseBoundStore<import("zustand").StoreApi<import("./app").AppStoreState>> | null>;
+export declare function useAppStore(): import("./app").AppStoreState;
 export declare function AppStoreProvider(props: AppStoreProviderProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=AppStore.d.ts.map

package/dist/store/AppStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppStore.d.ts","sourceRoot":"","sources":["../../src/store/AppStore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAA4C,MAAM,OAAO,CAAC;AAKjE,KAAK,qBAAqB,GAAG,iBAAiB,CAAC;IAAE,MAAM,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;UAAuC,CAAC;AAEpE,wBAAgB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;EAQ1B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAY5D"}
+{"version":3,"file":"AppStore.d.ts","sourceRoot":"","sources":["../../src/store/AppStore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAA4C,MAAM,OAAO,CAAC;AAKjE,KAAK,qBAAqB,GAAG,iBAAiB,CAAC;IAAE,MAAM,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,kHAAuC,CAAC;AAEpE,wBAAgB,WAAW,kCAQ1B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAY5D"}

package/dist/store/app.d.ts

@@ -4,29 +4,5 @@ import type { WidgetConfig } from '../types';
 import type { StateCreator } from 'zustand';
 export type StateCreatorWithInitialData<T extends Partial<WidgetConfig>, R extends Record<string, unknown>, V extends Record<string, unknown>> = (initialData: T | undefined, ...rest: Parameters<StateCreator<R, [], [], V>>) => ReturnType<StateCreator<R, [], [], V>>;
 export type AppStoreState = DataSlice & ConfigSlice;
-export declare function createAppStore(initialData?: WidgetConfig): {
-    (): AppStoreState;
-    <U>(selector: (state: AppStoreState) => U, equals?: ((a: U, b: U) => boolean) | undefined): U;
-} & import("zustand").StoreApi<AppStoreState> & {
-    use: {
-        _blockchains: () => import("rango-sdk").BlockchainMeta[];
-        _tokens: () => import("rango-sdk").Token[];
-        _popularTokens: () => import("rango-sdk").Token[];
-        _swappers: () => import("rango-sdk").SwapperMeta[];
-        fetchStatus: () => import("./slices/data").FetchStatus;
-        blockchains: () => (options?: {
-            type?: "source" | "destination" | undefined;
-        } | undefined) => import("rango-sdk").BlockchainMeta[];
-        tokens: () => (options?: {
-            type?: "source" | "destination" | undefined;
-            blockchain?: string | undefined;
-            searchFor?: string | undefined;
-        } | undefined) => import("rango-sdk").Token[];
-        swappers: () => () => import("rango-sdk").SwapperMeta[];
-        isTokenPinned: () => (token: import("rango-sdk").Token) => boolean;
-        fetch: () => () => Promise<void>;
-        config: () => WidgetConfig;
-        updateConfig: () => (config: WidgetConfig) => void;
-    };
-};
+export declare function createAppStore(initialData?: WidgetConfig): import("zustand").UseBoundStore<import("zustand").StoreApi<AppStoreState>>;
 //# sourceMappingURL=app.d.ts.map

package/dist/store/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/store/app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,OAAO,CAAC,YAAY,CAAC,EAC/B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC/B,CACF,WAAW,EAAE,CAAC,GAAG,SAAS,EAC1B,GAAG,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAC5C,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,wBAAgB,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY;;;;;;;;;;;;;;;;;;;;;;;;EAOxD"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/store/app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,OAAO,CAAC,YAAY,CAAC,EAC/B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC/B,CACF,WAAW,EAAE,CAAC,GAAG,SAAS,EAC1B,GAAG,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAC5C,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,wBAAgB,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY,8EAKxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.6",
+  "version": "0.17.1-next.8",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,13 +19,13 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.22.1-next.3",
+    "@rango-dev/provider-all": "^0.22.1-next.4",
     "@rango-dev/queue-manager-core": "^0.22.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.4",
+    "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.5",
     "@rango-dev/queue-manager-react": "^0.22.1-next.0",
-    "@rango-dev/ui": "^0.22.1-next.5",
-    "@rango-dev/wallets-react": "^0.8.1-next.2",
-    "@rango-dev/wallets-shared": "^0.21.1-next.2",
+    "@rango-dev/ui": "^0.22.1-next.6",
+    "@rango-dev/wallets-react": "^0.8.1-next.3",
+    "@rango-dev/wallets-shared": "^0.21.1-next.3",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -33,7 +33,7 @@ function QueueManager(props: PropsWithChildren) {
     });
   }, []);
 
-  const blockchains = useAppStore().use.blockchains()();
+  const blockchains = useAppStore().blockchains();
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {

package/src/Wallets.tsx

@@ -35,9 +35,9 @@ function Main(
     config: WidgetConfig;
   }>
 ) {
-  const updateConfig = useAppStore().use.updateConfig();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const updateConfig = useAppStore().updateConfig;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const { providers } = useWalletProviders(props.providers, props?.options);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();

package/src/Widget.tsx

@@ -43,7 +43,7 @@ export type WidgetProps = {
 export function Main() {
   globalFont();
 
-  const { fetch: fetchMeta, config } = useAppStore()();
+  const { fetch: fetchMeta, config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
   const { activeLanguage, changeLanguage } = useLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
@@ -69,6 +69,7 @@ export function Main() {
       changeLanguage(config.language);
     }
   }, [config?.language]);
+
   return (
     <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>

package/src/components/AppRouter.tsx

@@ -46,7 +46,7 @@ export function AppRouter({
 }) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
-  const blockchains = useAppStore().use.blockchains()();
+  const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
 
   const evmChains = blockchains.filter(isEvmBlockchain);

package/src/components/BlockchainList/BlockchainList.tsx

@@ -20,7 +20,7 @@ import { LoadingBlockchainList } from './LoadingBlockchainList';
 export function BlockchainList(props: PropTypes) {
   const { list, searchedFor, onChange, blockchainCategory } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
-  const { fetchStatus } = useAppStore()();
+  const { fetchStatus } = useAppStore();
 
   useEffect(() => {
     setBlockchains([

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -27,7 +27,7 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const { fetchStatus } = useAppStore()();
+  const { fetchStatus } = useAppStore();
   const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
   const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -51,8 +51,8 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
-  const config = useAppStore().use.config();
-  const blockchains = useAppStore().use.blockchains()();
+  const config = useAppStore().config;
+  const blockchains = useAppStore().blockchains();
   const {
     quote,
     setSelectedWallets: selectQuoteWallets,

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -42,10 +42,10 @@ import {
 
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
-  const { config } = useAppStore()();
+  const { config } = useAppStore();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useAppStore()();
+  const { blockchains } = useAppStore();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =

package/src/components/NoResult/NoResult.tsx

@@ -24,7 +24,7 @@ export function NoResult(props: PropTypes) {
   const toggleAllLiquiditySources =
     useSettingsStore.use.toggleAllLiquiditySources();
 
-  const swappers = useAppStore().use.swappers()();
+  const swappers = useAppStore().swappers();
 
   const info = makeInfo(
     error,

package/src/components/NotificationContent/NotificationContent.tsx

@@ -26,8 +26,8 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);

package/src/components/Quote/Quote.tsx

@@ -62,7 +62,7 @@ export function Quote(props: QuoteProps) {
     type,
     recommended = true,
   } = props;
-  const tokens = useAppStore().use.tokens()();
+  const tokens = useAppStore().tokens();
 
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);

package/src/components/SwapDetails/SwapDetails.tsx

@@ -64,8 +64,8 @@ import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();

package/src/components/TokenList/TokenList.tsx

@@ -86,11 +86,11 @@ export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
-  const fetchStatus = useAppStore().use.fetchStatus();
-  const blockchains = useAppStore().use.blockchains()();
+  const fetchStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const loadingWallet = useWalletsStore.use.loading();
-  const { isTokenPinned } = useAppStore()();
+  const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
   const innerElementType: React.FC<CommonProps> = forwardRef((render, ref) => {

package/src/components/UpdateUrl.tsx

@@ -29,9 +29,9 @@ export function UpdateUrl() {
   const setToToken = useQuoteStore.use.setToToken();
   const inputAmount = useQuoteStore.use.inputAmount();
   const setInputAmount = useQuoteStore.use.setInputAmount();
-  const fetchMetaStatus = useAppStore().use.fetchStatus();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   useSyncStoresWithConfig();
 

package/src/components/WidgetEvents.tsx

@@ -14,7 +14,7 @@ import { useWalletsStore } from '../store/wallets';
 import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
-  const tokens = useAppStore().use.tokens()();
+  const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -40,8 +40,8 @@ export function useConfirmSwap(): ConfirmSwap {
     disabledLiquiditySources,
   } = useSettingsStore();
   const { connectedWallets } = useWalletsStore();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
 
   const userSlippage = customSlippage || slippage;
 

package/src/hooks/useSwapInput.ts

@@ -33,9 +33,8 @@ type UseSwapInput = {
  */
 export function useSwapInput(): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
-  const { liquiditySources, enableNewLiquiditySources } =
-    useAppStore().use.config();
-  const tokens = useAppStore().use.tokens()();
+  const { liquiditySources, enableNewLiquiditySources } = useAppStore().config;
+  const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -20,10 +20,10 @@ export function useSyncStoresWithConfig() {
     toBlockchain,
   } = useQuoteStore();
 
-  const config = useAppStore().use.config();
-  const fetchMetaStatus = useAppStore().use.fetchStatus();
-  const blockchains = useAppStore().use.blockchains()();
-  const tokens = useAppStore().use.tokens()();
+  const config = useAppStore().config;
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();

package/src/hooks/useWalletList.ts

@@ -37,7 +37,7 @@ export function useWalletList(params: Params) {
   const { config, chain, onBeforeConnect, onConnect } = params;
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
-  const blockchains = useAppStore().use.blockchains()();
+  const blockchains = useAppStore().blockchains();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =

package/src/pages/Home.tsx

@@ -76,7 +76,7 @@ export function Home() {
     setQuoteWarningsConfirmed,
   } = useQuoteStore();
 
-  const fetchMetaStatus = useAppStore().use.fetchStatus();
+  const fetchMetaStatus = useAppStore().fetchStatus;
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();

package/src/pages/LiquiditySourcePage.tsx

@@ -35,8 +35,8 @@ interface PropTypes {
 }
 
 export function LiquiditySourcePage({ sourceType }: PropTypes) {
-  const fetchStatus = useAppStore().use.fetchStatus();
-  const swappers = useAppStore().use.swappers()();
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const { navigateBackFrom } = useNavigateBack();

package/src/pages/SelectBlockchainPage.tsx

@@ -21,9 +21,9 @@ export function SelectBlockchainPage(props: PropTypes) {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
   const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const fetchStatus = useAppStore().use.fetchStatus();
+  const fetchStatus = useAppStore().fetchStatus;
 
-  const blockchains = useAppStore().use.blockchains()({
+  const blockchains = useAppStore().blockchains({
     type: type,
   });
   const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';

package/src/pages/SelectSwapItemsPage.tsx

@@ -39,10 +39,10 @@ export function SelectSwapItemsPage(props: PropTypes) {
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
   // Tokens & Blockchains list
-  const blockchains = useAppStore().use.blockchains()({
+  const blockchains = useAppStore().blockchains({
     type: type,
   });
-  const tokens = useAppStore().use.tokens()({
+  const tokens = useAppStore().tokens({
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,

package/src/pages/SettingsPage.tsx

@@ -26,9 +26,9 @@ import { getUniqueSwappersGroups } from '../utils/settings';
 
 export function SettingsPage() {
   const navigate = useNavigate();
-  const { theme } = useAppStore().use.config();
-  const fetchStatus = useAppStore().use.fetchStatus();
-  const swappers = useAppStore().use.swappers()();
+  const { theme } = useAppStore().config;
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
   const { navigateBackFrom } = useNavigateBack();
 
   const infiniteApprove = useSettingsStore.use.infiniteApprove();

package/src/pages/SwapDetailsPage.tsx

@@ -16,7 +16,7 @@ export function SwapDetailsPage() {
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
-  const { fetchStatus: fetchMetaStatus } = useAppStore()();
+  const { fetchStatus: fetchMetaStatus } = useAppStore();
 
   const showSkeleton = loading || fetchMetaStatus === 'loading';
 

package/src/pages/WalletsPage.tsx

@@ -29,7 +29,7 @@ export const TIME_TO_CLOSE_MODAL = 3_000;
 export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
-  const { config, fetchStatus: fetchMetaStatus } = useAppStore()();
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
   const { navigateBackFrom } = useNavigateBack();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');

package/src/store/AppStore.tsx

@@ -17,7 +17,7 @@ export function useAppStore() {
     throw new Error('Missing AppStoreContext.Provider in the tree');
   }
 
-  return store;
+  return store();
 }
 
 export function AppStoreProvider(props: AppStoreProviderProps) {

package/src/store/app.ts

@@ -5,7 +5,6 @@ import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
 
-import createSelectors from './selectors';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 
@@ -21,10 +20,8 @@ export type StateCreatorWithInitialData<
 export type AppStoreState = DataSlice & ConfigSlice;
 
 export function createAppStore(initialData?: WidgetConfig) {
-  return createSelectors(
-    create<AppStoreState>()((...a) => ({
-      ...createDataSlice(...a),
-      ...createConfigSlice(initialData, ...a),
-    }))
-  );
+  return create<AppStoreState>()((...a) => ({
+    ...createDataSlice(...a),
+    ...createConfigSlice(initialData, ...a),
+  }));
 }