optimization - zustand selectors

src/core/state/appConnectionWalletSwitcher/appConnectionSwitcher.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface AppConnectionWalletSwitcherStore {
  nudgeSheetEnabled: boolean;
@@ -78,6 +79,6 @@ export const appConnectionWalletSwitcherStore =
  },
  );
 
-export const useAppConnectionWalletSwitcherStore = create(
- appConnectionWalletSwitcherStore,
+export const useAppConnectionWalletSwitcherStore = withSelectors(
+ create(appConnectionWalletSwitcherStore),
 );

src/core/state/appSessions/index.ts

@@ -4,6 +4,7 @@ import create from 'zustand';
 import { ChainId } from '~/core/types/chains';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface AppSession {
  activeSessionAddress: Address;
@@ -242,4 +243,4 @@ export const appSessionsStore = createStore<AppSessionsStore<AppSession>>(
  },
 );
 
-export const useAppSessionsStore = create(appSessionsStore);
+export const useAppSessionsStore = withSelectors(create(appSessionsStore));

src/core/state/contacts/index.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface Contact {
  name: string;
@@ -52,4 +53,4 @@ export const contactsStore = createStore<ContactsStore>(
  },
 );
 
-export const useContactsStore = create(contactsStore);
+export const useContactsStore = withSelectors(create(contactsStore));

src/core/state/currentSettings/currentAddress.ts

@@ -3,6 +3,8 @@ import create from 'zustand';
 
 import { createStore } from '~/core/state/internal/createStore';
 
+import { withSelectors } from '../internal/withSelectors';
+
 interface PersistedAddressState {
  currentAddress: Address;
  setCurrentAddress: (address: Address) => void;
@@ -47,4 +49,4 @@ persistedAddressStore.subscribe((state) => {
  }
 });
 
-export const useCurrentAddressStore = currentAddressStore;
+export const useCurrentAddressStore = withSelectors(currentAddressStore);

src/core/state/currentSettings/currentTheme.ts

@@ -3,6 +3,8 @@ import create from 'zustand';
 import { createStore } from '~/core/state/internal/createStore';
 import { ThemeOption } from '~/core/types/settings';
 
+import { withSelectors } from '../internal/withSelectors';
+
 export interface CurrentThemeState {
  currentTheme: Exclude<ThemeOption, 'system'>;
  currentUserSelectedTheme: ThemeOption;
@@ -38,4 +40,4 @@ export const currentThemeStore = createStore<CurrentThemeState>(
  },
 );
 
-export const useCurrentThemeStore = create(currentThemeStore);
+export const useCurrentThemeStore = withSelectors(create(currentThemeStore));

src/core/state/error/index.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface ErrorState {
  error: Error | null;
@@ -12,4 +13,4 @@ export const errorStore = createStore<ErrorState>((set) => ({
  setError: (error) => set({ error }),
 }));
 
-export const useErrorStore = create(errorStore);
+export const useErrorStore = withSelectors(create(errorStore));

src/core/state/gas/index.ts

@@ -9,6 +9,7 @@ import {
 } from '~/core/types/gas';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface GasStore {
  selectedGas: GasFeeParams | GasFeeLegacyParams;
@@ -65,4 +66,4 @@ export const gasStore = createStore<GasStore>(
  },
 );
 
-export const useGasStore = create(gasStore);
+export const useGasStore = withSelectors(create(gasStore));

src/core/state/hiddenAssets/hiddenAssets.ts

@@ -4,6 +4,7 @@ import { ParsedUserAsset } from '~/core/types/assets';
 import { SearchAsset } from '~/core/types/search';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 type UpdateHiddenAssetArgs = {
  uniqueId: string;
@@ -49,4 +50,4 @@ export const hiddenAssetsStore = createStore<HiddenAssetState>(
  },
 );
 
-export const useHiddenAssetStore = create(hiddenAssetsStore);
+export const useHiddenAssetStore = withSelectors(create(hiddenAssetsStore));

src/core/state/internal/withSelectors.ts

@@ -0,0 +1,18 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+
+type WithSelectors<S> = S extends { getState: () => infer T }
+ ? S & { use: { [K in keyof T]: () => T[K] } }
+ : never;
+
+export function withSelectors<S extends UseBoundStore<StoreApi<object>>>(
+ _store: S,
+) {
+ const store = _store as WithSelectors<typeof _store>;
+ store.use = {};
+ for (const k of Object.keys(store.getState())) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (store.use as any)[k] = () => store((s) => s[k as keyof typeof s]);
+ }
+
+ return store;
+}

src/core/state/navRestoration/index.ts

@@ -3,12 +3,13 @@ import create from 'zustand';
 import { isNativePopup } from '~/core/utils/tabs';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface NavRestorationStore {
  clearLastPage: () => Promise<void>;
- lastPage?: string;
+ lastPage: string | undefined;
  setLastPage: (lastPage: string) => Promise<void>;
- lastState?: Record<string, string>;
+ lastState: Record<string, string> | undefined;
  setLastState: (lastState: Record<string, string>) => Promise<void>;
  setShouldRestoreNavigation: (should: boolean) => Promise<void>;
  shouldRestoreNavigation: boolean;
@@ -52,4 +53,6 @@ export const navRestorationStore = createStore<NavRestorationStore>(
  },
 );
 
-export const useNavRestorationStore = create(navRestorationStore);
+export const useNavRestorationStore = withSelectors(
+ create(navRestorationStore),
+);

src/core/state/nfts/index.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 type NftDisplayMode = 'byCollection' | 'grouped';
 export type NftSort = 'alphabetical' | 'recent';
@@ -69,4 +70,4 @@ export const nftsStore = createStore<NftsState>(
  },
 );
 
-export const useNftsStore = create(nftsStore);
+export const useNftsStore = withSelectors(create(nftsStore));

src/core/state/nonce/index.ts

@@ -4,6 +4,7 @@ import create from 'zustand';
 import { ChainId } from '~/core/types/chains';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 type NonceData = {
  currentNonce?: number;
@@ -67,4 +68,4 @@ export const nonceStore = createStore<CurrentNonceState>(
  },
 );
 
-export const useNonceStore = create(nonceStore);
+export const useNonceStore = withSelectors(create(nonceStore));

src/core/state/popupInstances/index.ts

@@ -7,6 +7,7 @@ import { isNativePopup } from '~/core/utils/tabs';
 import { IndependentField } from '~/entries/popup/hooks/swap/useSwapInputs';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 type SendAddress = Address | 'eth' | '';
 interface CustomNetworkDraft {
@@ -166,7 +167,7 @@ export const popupInstanceStore = createStore<PopupInstanceStore>(
  },
 );
 
-export const usePopupInstanceStore = create(popupInstanceStore);
+export const usePopupInstanceStore = withSelectors(create(popupInstanceStore));
 
 // creates handlers that only work in popup context and passes through callback types
 function popupInstanceHandlerFactory<

src/core/state/rainbowChains/index.ts

@@ -11,6 +11,7 @@ import {
 import { persistOptions } from '~/core/utils/persistOptions';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface RainbowChain {
  activeRpcUrl: string;
@@ -289,4 +290,4 @@ export const rainbowChainsStore = createStore<RainbowChainsState>(
  },
 );
 
-export const useRainbowChainsStore = create(rainbowChainsStore);
+export const useRainbowChainsStore = withSelectors(create(rainbowChainsStore));

src/core/state/savedEnsNames/index.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 type SavedNamesStore = {
  savedNames: Record<Address, string>;
@@ -20,4 +21,4 @@ export const savedEnsNamesStore = createStore<SavedNamesStore>(
  { persist: { name: 'ensSavedNames', version: 0 } },
 );
 
-export const useSavedEnsNames = create(savedEnsNamesStore);
+export const useSavedEnsNames = withSelectors(create(savedEnsNamesStore));

src/core/state/selectedNft/index.ts

@@ -3,6 +3,7 @@ import create from 'zustand';
 import { UniqueAsset } from '~/core/types/nfts';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface SelectedNftState {
  setSelectedNft: (nft?: UniqueAsset) => void;
@@ -16,4 +17,4 @@ export const selectedNftStore = createStore<SelectedNftState>((set) => ({
  selectedNft: null,
 }));
 
-export const useSelectedNftStore = create(selectedNftStore);
+export const useSelectedNftStore = withSelectors(create(selectedNftStore));

src/core/state/selectedToken/index.ts

@@ -3,6 +3,7 @@ import create from 'zustand';
 import { ParsedUserAsset } from '~/core/types/assets';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface SelectedTokenState {
  getSelectedToken: () => ParsedUserAsset | null;
@@ -20,4 +21,4 @@ export const selectedTokenStore = createStore<SelectedTokenState>(
  }),
 );
 
-export const useSelectedTokenStore = create(selectedTokenStore);
+export const useSelectedTokenStore = withSelectors(create(selectedTokenStore));

src/core/state/selectedTransaction/index.ts

@@ -3,6 +3,7 @@ import create from 'zustand';
 import { RainbowTransaction } from '~/core/types/transactions';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface SelectedTransactionState {
  getSelectedTransaction: () => RainbowTransaction | null;
@@ -20,4 +21,6 @@ export const selectedTransactionStore = createStore<SelectedTransactionState>(
  }),
 );
 
-export const useSelectedTransactionStore = create(selectedTransactionStore);
+export const useSelectedTransactionStore = withSelectors(
+ create(selectedTransactionStore),
+);

src/core/state/swapAssetsToRefresh/index.ts

@@ -3,6 +3,7 @@ import create from 'zustand';
 import { ParsedSearchAsset } from '~/core/types/assets';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface SwapAssetsToRefreshState {
  setSwapAssetsToRefresh: (assetsToRefresh: {
@@ -30,4 +31,6 @@ export const swapAssetsToRefreshStore = createStore<SwapAssetsToRefreshState>(
  }),
 );
 
-export const useSwapAssetsToRefreshStore = create(swapAssetsToRefreshStore);
+export const useSwapAssetsToRefreshStore = withSelectors(
+ create(swapAssetsToRefreshStore),
+);

src/core/state/transactions/customNetworkTransactions/index.ts

@@ -4,6 +4,7 @@ import create from 'zustand';
 import { RainbowTransaction } from '~/core/types/transactions';
 
 import { createStore } from '../../internal/createStore';
+import { withSelectors } from '../../internal/withSelectors';
 
 export interface CustomNetworkTransactionsState {
  customNetworkTransactions: Record<
@@ -85,6 +86,6 @@ export const customNetworkTransactionsStore =
  },
  );
 
-export const useCustomNetworkTransactionsStore = create(
- customNetworkTransactionsStore,
+export const useCustomNetworkTransactionsStore = withSelectors(
+ create(customNetworkTransactionsStore),
 );

src/core/state/transactions/pendingTransactions/index.ts

@@ -5,6 +5,7 @@ import create from 'zustand';
 import { RainbowTransaction } from '~/core/types/transactions';
 
 import { createStore } from '../../internal/createStore';
+import { withSelectors } from '../../internal/withSelectors';
 
 export interface PendingTransactionsStateV1 {
  [key: Address]: {
@@ -145,4 +146,6 @@ export const pendingTransactionsStore = createStore<PendingTransactionsState>(
  },
 );
 
-export const usePendingTransactionsStore = create(pendingTransactionsStore);
+export const usePendingTransactionsStore = withSelectors(
+ create(pendingTransactionsStore),
+);

src/core/state/userChains/index.ts

@@ -4,6 +4,7 @@ import { SUPPORTED_MAINNET_CHAINS } from '~/core/references';
 import { ChainId } from '~/core/types/chains';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface UserChainsState {
  /**
@@ -114,4 +115,4 @@ export const userChainsStore = createStore<UserChainsState>(
  },
 );
 
-export const useUserChainsStore = create(userChainsStore);
+export const useUserChainsStore = withSelectors(create(userChainsStore));

src/core/state/walletBackups/index.ts

@@ -4,6 +4,7 @@ import create from 'zustand';
 import { KeychainType, KeychainWallet } from '~/core/types/keychainTypes';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface WalletBackupReminderStore {
  reminded: boolean;
@@ -101,4 +102,4 @@ export const walletBackupsStore = createStore<WalletBackupsStore>(
  },
 );
 
-export const useWalletBackupsStore = create(walletBackupsStore);
+export const useWalletBackupsStore = withSelectors(create(walletBackupsStore));

src/core/state/walletNames/index.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface WalletNamesStore {
  walletNames: { [address: Address]: string };
@@ -49,4 +50,4 @@ export const walletNamesStore = createStore<WalletNamesStore>(
  },
 );
 
-export const useWalletNamesStore = create(walletNamesStore);
+export const useWalletNamesStore = withSelectors(create(walletNamesStore));

src/core/state/walletOrder/index.ts

@@ -2,6 +2,7 @@ import { Address } from 'wagmi';
 import create from 'zustand';
 
 import { createStore } from '../internal/createStore';
+import { withSelectors } from '../internal/withSelectors';
 
 export interface WalletOrderStore {
  walletOrder: Address[];
@@ -31,4 +32,4 @@ export const walletOrderStore = createStore<WalletOrderStore>(
  },
 );
 
-export const useWalletOrderStore = create(walletOrderStore);
+export const useWalletOrderStore = withSelectors(create(walletOrderStore));