chore(explorer): setup zustand with context (#3077)

packages/explorer/src/app/Providers.tsx

@@ -6,6 +6,7 @@ import { ReactNode } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createConfig, http } from "@wagmi/core";
 import { localhost } from "@wagmi/core/chains";
+import { AppStoreProvider } from "../store";
 
 const queryClient = new QueryClient();
 
@@ -28,7 +29,9 @@ export const wagmiConfig = createConfig({
 export function Providers({ children }: { children: ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <AppStoreProvider>{children}</AppStoreProvider>
+      </QueryClientProvider>
     </WagmiProvider>
   );
 }

packages/explorer/src/app/worlds/[worldAddress]/explorer/EditableTableCell.tsx

@@ -13,7 +13,7 @@ import { waitForTransactionReceipt, writeContract } from "@wagmi/core";
 import { Checkbox } from "../../../../components/ui/Checkbox";
 import { ACCOUNT_PRIVATE_KEYS } from "../../../../consts";
 import { camelCase, cn } from "../../../../lib/utils";
-import { useStore } from "../../../../store";
+import { useAppStore } from "../../../../store";
 import { wagmiConfig } from "../../../Providers";
 import { TableConfig } from "../../../api/table/route";
 
@@ -27,7 +27,7 @@ type Props = {
 export function EditableTableCell({ name, config, keyTuple, value: defaultValue }: Props) {
   const queryClient = useQueryClient();
   const chainId = useChainId();
-  const { account } = useStore();
+  const { account } = useAppStore();
   const { worldAddress } = useParams();
 
   const [value, setValue] = useState<unknown>(defaultValue);

packages/explorer/src/app/worlds/[worldAddress]/interact/useContractMutation.ts

@@ -6,7 +6,7 @@ import { useChainId } from "wagmi";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { readContract, waitForTransactionReceipt, writeContract } from "@wagmi/core";
 import { ACCOUNT_PRIVATE_KEYS } from "../../../../consts";
-import { useStore } from "../../../../store";
+import { useAppStore } from "../../../../store";
 import { wagmiConfig } from "../../../Providers";
 import { FunctionType } from "./FunctionField";
 
@@ -18,7 +18,7 @@ type UseContractMutationProps = {
 export function useContractMutation({ abi, operationType }: UseContractMutationProps) {
   const queryClient = useQueryClient();
   const chainId = useChainId();
-  const { account } = useStore();
+  const { account } = useAppStore();
   const { worldAddress } = useParams();
 
   return useMutation({

packages/explorer/src/components/AccountSelect.tsx

@@ -1,7 +1,7 @@
 import { Address, formatEther } from "viem";
 import { useBalance } from "wagmi";
 import { ACCOUNTS } from "../consts";
-import { useStore } from "../store";
+import { useAppStore } from "../store";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/Select";
 import { TruncatedHex } from "./ui/TruncatedHex";
 
@@ -25,7 +25,7 @@ function AccountSelectItem({ address, name }: { address: Address; name: string }
 }
 
 export function AccountSelect() {
-  const { account, setAccount } = useStore();
+  const { account, setAccount } = useAppStore();
   return (
     <Select value={account} onValueChange={setAccount}>
       <SelectTrigger className="w-[300px] text-left">

packages/explorer/src/store/AppStoreProvider.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { type ReactNode, createContext, useRef } from "react";
+import { createAppStore } from "./createAppStore";
+
+export type AppStore = ReturnType<typeof createAppStore>;
+
+export const AppStoreContext = createContext<AppStore | undefined>(undefined);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const AppStoreProvider = ({ children }: Props) => {
+  const storeRef = useRef<AppStore>();
+  if (!storeRef.current) {
+    storeRef.current = createAppStore();
+  }
+
+  return <AppStoreContext.Provider value={storeRef.current}>{children}</AppStoreContext.Provider>;
+};

packages/explorer/src/store/createAppStore.ts

@@ -0,0 +1,15 @@
+import { Hex } from "viem";
+import { createStore } from "zustand";
+import { ACCOUNTS } from "../consts";
+
+export type AppStoreData = {
+  account: Hex;
+  setAccount: (account: Hex) => void;
+};
+
+export const createAppStore = () => {
+  return createStore<AppStoreData>()((set) => ({
+    account: ACCOUNTS[0],
+    setAccount: (account) => set({ account }),
+  }));
+};

packages/explorer/src/store/index.ts

@@ -0,0 +1,3 @@
+export * from "./createAppStore";
+export * from "./useAppStore";
+export * from "./AppStoreProvider";

packages/explorer/src/store/useAppStore.ts

@@ -0,0 +1,13 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import { AppStoreContext } from "./AppStoreProvider";
+
+export const useAppStore = () => {
+  const appStoreContext = useContext(AppStoreContext);
+
+  if (!appStoreContext) {
+    throw new Error(`useAppStore must be used within AppStoreProvider`);
+  }
+
+  return useStore(appStoreContext);
+};