From b3361b927f72d05efd38425ec02ea71cca46e6f4 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Wed, 28 Aug 2024 14:54:38 +0300
Subject: [PATCH] chore(explorer): setup zustand with context (#3077)

---
 packages/explorer/src/app/Providers.tsx       |  5 ++++-
 .../explorer/EditableTableCell.tsx            |  4 ++--
 .../interact/useContractMutation.ts           |  4 ++--
 .../explorer/src/components/AccountSelect.tsx |  4 ++--
 packages/explorer/src/store.ts                | 13 ------------
 .../explorer/src/store/AppStoreProvider.tsx   | 21 +++++++++++++++++++
 packages/explorer/src/store/createAppStore.ts | 15 +++++++++++++
 packages/explorer/src/store/index.ts          |  3 +++
 packages/explorer/src/store/useAppStore.ts    | 13 ++++++++++++
 9 files changed, 62 insertions(+), 20 deletions(-)
 delete mode 100644 packages/explorer/src/store.ts
 create mode 100644 packages/explorer/src/store/AppStoreProvider.tsx
 create mode 100644 packages/explorer/src/store/createAppStore.ts
 create mode 100644 packages/explorer/src/store/index.ts
 create mode 100644 packages/explorer/src/store/useAppStore.ts

diff --git a/packages/explorer/src/app/Providers.tsx b/packages/explorer/src/app/Providers.tsx
index 4ca56ec072..d930de1dba 100644
--- a/packages/explorer/src/app/Providers.tsx
+++ b/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>
   );
 }
diff --git a/packages/explorer/src/app/worlds/[worldAddress]/explorer/EditableTableCell.tsx b/packages/explorer/src/app/worlds/[worldAddress]/explorer/EditableTableCell.tsx
index 4040cc825b..15822d6c74 100644
--- a/packages/explorer/src/app/worlds/[worldAddress]/explorer/EditableTableCell.tsx
+++ b/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);
diff --git a/packages/explorer/src/app/worlds/[worldAddress]/interact/useContractMutation.ts b/packages/explorer/src/app/worlds/[worldAddress]/interact/useContractMutation.ts
index d14a3ea16c..720fe207c4 100644
--- a/packages/explorer/src/app/worlds/[worldAddress]/interact/useContractMutation.ts
+++ b/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({
diff --git a/packages/explorer/src/components/AccountSelect.tsx b/packages/explorer/src/components/AccountSelect.tsx
index 9127682ad8..1e51fa87cf 100644
--- a/packages/explorer/src/components/AccountSelect.tsx
+++ b/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">
diff --git a/packages/explorer/src/store.ts b/packages/explorer/src/store.ts
deleted file mode 100644
index 1bc3d3a651..0000000000
--- a/packages/explorer/src/store.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Hex } from "viem";
-import { create } from "zustand";
-import { ACCOUNTS } from "./consts";
-
-type Store = {
-  account: Hex;
-  setAccount: (account: Hex) => void;
-};
-
-export const useStore = create<Store>((set) => ({
-  account: ACCOUNTS[0],
-  setAccount: (account) => set({ account }),
-}));
diff --git a/packages/explorer/src/store/AppStoreProvider.tsx b/packages/explorer/src/store/AppStoreProvider.tsx
new file mode 100644
index 0000000000..e3b35d8df8
--- /dev/null
+++ b/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>;
+};
diff --git a/packages/explorer/src/store/createAppStore.ts b/packages/explorer/src/store/createAppStore.ts
new file mode 100644
index 0000000000..05f5e41991
--- /dev/null
+++ b/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 }),
+  }));
+};
diff --git a/packages/explorer/src/store/index.ts b/packages/explorer/src/store/index.ts
new file mode 100644
index 0000000000..6a67ea3b1e
--- /dev/null
+++ b/packages/explorer/src/store/index.ts
@@ -0,0 +1,3 @@
+export * from "./createAppStore";
+export * from "./useAppStore";
+export * from "./AppStoreProvider";
diff --git a/packages/explorer/src/store/useAppStore.ts b/packages/explorer/src/store/useAppStore.ts
new file mode 100644
index 0000000000..0ff4c7a992
--- /dev/null
+++ b/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);
+};