From 258b10e1cddd7f471146b742347da197ee99e1b0 Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Tue, 19 Sep 2023 11:49:51 -0400
Subject: [PATCH 1/6] basic setup

---
 packages/common/src/chains/mudFoundry.ts        |  6 +++---
 packages/common/src/createContract.ts           |  1 -
 templates/react/packages/client/package.json    |  4 +++-
 templates/react/packages/client/src/App.tsx     |  5 +++++
 templates/react/packages/client/src/index.tsx   | 15 ++++++++++++---
 .../packages/client/src/mud/setupNetwork.ts     | 17 +++++++++++++++++
 6 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/common/src/chains/mudFoundry.ts b/packages/common/src/chains/mudFoundry.ts
index 1754534d8d..e971901277 100644
--- a/packages/common/src/chains/mudFoundry.ts
+++ b/packages/common/src/chains/mudFoundry.ts
@@ -3,7 +3,7 @@ import { MUDChain } from "./types";
 
 export const mudFoundry = {
   ...foundry,
-  fees: {
-    defaultPriorityFee: 0n,
-  },
+  // fees: {
+  //   defaultPriorityFee: 0n,
+  // },
 } as const satisfies MUDChain;
diff --git a/packages/common/src/createContract.ts b/packages/common/src/createContract.ts
index c327709352..46cc0ed236 100644
--- a/packages/common/src/createContract.ts
+++ b/packages/common/src/createContract.ts
@@ -15,7 +15,6 @@ import {
   getAbiItem,
   getContract,
   getFunctionSelector,
-  trim,
 } from "viem";
 import pRetry from "p-retry";
 import { AbiFunction } from "abitype";
diff --git a/templates/react/packages/client/package.json b/templates/react/packages/client/package.json
index 1855fbf09e..831345ae19 100644
--- a/templates/react/packages/client/package.json
+++ b/templates/react/packages/client/package.json
@@ -20,11 +20,13 @@
     "@latticexyz/store-sync": "link:../../../../packages/store-sync",
     "@latticexyz/utils": "link:../../../../packages/utils",
     "@latticexyz/world": "link:../../../../packages/world",
+    "@rainbow-me/rainbowkit": "^1.0.11",
     "contracts": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
-    "viem": "1.6.0"
+    "viem": "1.6.0",
+    "wagmi": "^1.4.2"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index a9660de463..9363888f32 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -1,3 +1,6 @@
+import "@rainbow-me/rainbowkit/styles.css";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useWalletClient } from "wagmi";
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
@@ -7,6 +10,7 @@ export const App = () => {
     components: { Counter },
     systemCalls: { increment },
   } = useMUD();
+  const walletClient = useWalletClient();
 
   const counter = useComponentValue(Counter, singletonEntity);
 
@@ -24,6 +28,7 @@ export const App = () => {
       >
         Increment
       </button>
+      <ConnectButton />
     </>
   );
 };
diff --git a/templates/react/packages/client/src/index.tsx b/templates/react/packages/client/src/index.tsx
index da8d70f020..e59a46c0eb 100644
--- a/templates/react/packages/client/src/index.tsx
+++ b/templates/react/packages/client/src/index.tsx
@@ -1,4 +1,6 @@
 import ReactDOM from "react-dom/client";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { WagmiConfig } from "wagmi";
 import { App } from "./App";
 import { setup } from "./mud/setup";
 import { MUDProvider } from "./MUDContext";
@@ -10,10 +12,17 @@ const root = ReactDOM.createRoot(rootElement);
 
 // TODO: figure out if we actually want this to be async or if we should render something else in the meantime
 setup().then(async (result) => {
+  const {
+    network: { wagmiConfig, chain },
+  } = result;
   root.render(
-    <MUDProvider value={result}>
-      <App />
-    </MUDProvider>
+    <WagmiConfig config={wagmiConfig}>
+      <RainbowKitProvider chains={[chain]}>
+        <MUDProvider value={result}>
+          <App />
+        </MUDProvider>
+      </RainbowKitProvider>
+    </WagmiConfig>
   );
 
   // https://vitejs.dev/guide/env-and-mode.html
diff --git a/templates/react/packages/client/src/mud/setupNetwork.ts b/templates/react/packages/client/src/mud/setupNetwork.ts
index 59f5663277..7871825f32 100644
--- a/templates/react/packages/client/src/mud/setupNetwork.ts
+++ b/templates/react/packages/client/src/mud/setupNetwork.ts
@@ -6,10 +6,13 @@
 import { createPublicClient, fallback, webSocket, http, createWalletClient, Hex, parseEther, ClientConfig } from "viem";
 import { createFaucetService } from "@latticexyz/services/faucet";
 import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
+import { createConfig } from "wagmi";
+import { getDefaultWallets } from "@rainbow-me/rainbowkit";
 
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
 import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+
 import { createBurnerAccount, createContract, transportObserver, ContractWrite } from "@latticexyz/common";
 
 import { Subject, share } from "rxjs";
@@ -51,6 +54,18 @@ export async function setupNetwork() {
     account: burnerAccount,
   });
 
+  const { connectors } = getDefaultWallets({
+    appName: "MUD",
+    projectId: "MUD",
+    chains: [networkConfig.chain],
+  });
+
+  const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors,
+    publicClient,
+  });
+
   /*
    * Create an observable for contract writes that we can
    * pass into MUD dev tools for transaction observability.
@@ -117,6 +132,8 @@ export async function setupNetwork() {
     playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
     publicClient,
     walletClient: burnerWalletClient,
+    wagmiConfig,
+    chain: networkConfig.chain,
     latestBlock$,
     storedBlockLogs$,
     waitForTransaction,

From 26312fa3944fde0d31170ff14bc5ba38be0cc69b Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Tue, 19 Sep 2023 14:40:31 -0400
Subject: [PATCH 2/6] create system calls after connect

---
 templates/react/packages/client/src/App.tsx   | 26 ++++++++++----
 .../packages/client/src/mud/constants.ts      |  7 ++++
 .../client/src/mud/createSystemCalls.ts       | 36 ++++++++++++++++---
 .../react/packages/client/src/mud/setup.ts    |  3 --
 .../packages/client/src/mud/setupNetwork.ts   | 16 ++-------
 .../packages/client/src/mud/useSystemCalls.ts | 25 +++++++++++++
 6 files changed, 85 insertions(+), 28 deletions(-)
 create mode 100644 templates/react/packages/client/src/mud/constants.ts
 create mode 100644 templates/react/packages/client/src/mud/useSystemCalls.ts

diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index 9363888f32..d236e99d8e 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -4,15 +4,17 @@ import { useWalletClient } from "wagmi";
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { useSystemCalls } from "./mud/useSystemCalls";
 
 export const App = () => {
-  const {
-    components: { Counter },
-    systemCalls: { increment },
-  } = useMUD();
-  const walletClient = useWalletClient();
+  const { network, components } = useMUD();
+  const { playerEntity, walletClient: burnerWalletClient } = network;
+  const { Counter, Delegations } = components;
 
+  const walletClient = useWalletClient();
+  const systemCalls = useSystemCalls(network, components, walletClient.data);
   const counter = useComponentValue(Counter, singletonEntity);
+  const delegatee = useComponentValue(Delegations, playerEntity);
 
   return (
     <>
@@ -23,12 +25,24 @@ export const App = () => {
         type="button"
         onClick={async (event) => {
           event.preventDefault();
-          console.log("new counter value:", await increment());
+          console.log("new counter value:", await systemCalls?.increment());
         }}
       >
         Increment
       </button>
       <ConnectButton />
+      {walletClient.data && !delegatee ? (
+        <button
+          type="button"
+          onClick={async (event) => {
+            event.preventDefault();
+            console.log("registering delegation");
+            await systemCalls?.registerDelegation(walletClient.data.account.address);
+          }}
+        >
+          Delegate actions to burner wallet: {burnerWalletClient.account.address}
+        </button>
+      ) : null}
     </>
   );
 };
diff --git a/templates/react/packages/client/src/mud/constants.ts b/templates/react/packages/client/src/mud/constants.ts
new file mode 100644
index 0000000000..78c56c0cf2
--- /dev/null
+++ b/templates/react/packages/client/src/mud/constants.ts
@@ -0,0 +1,7 @@
+import { encodePacked, toHex } from "viem";
+
+const ROOT_NAMESPACE = 0;
+
+const encodedRootSpace = toHex(ROOT_NAMESPACE, { size: 16 });
+const encodedDelegationId = toHex("unlimited.d", { size: 16 });
+export const UNLIMITED_DELEGATION = encodePacked(["bytes16", "bytes16"], [encodedRootSpace, encodedDelegationId]);
diff --git a/templates/react/packages/client/src/mud/createSystemCalls.ts b/templates/react/packages/client/src/mud/createSystemCalls.ts
index 9858910ed2..b5e9d95c9e 100644
--- a/templates/react/packages/client/src/mud/createSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/createSystemCalls.ts
@@ -2,11 +2,14 @@
  * Create the system calls that the client can use to ask
  * for changes in the World state (using the System contracts).
  */
-
+import { Hex, WalletClient, Transport, Chain, Account } from "viem";
 import { getComponentValue } from "@latticexyz/recs";
-import { ClientComponents } from "./createClientComponents";
-import { SetupNetworkResult } from "./setupNetwork";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { SetupNetworkResult } from "./setupNetwork";
+import { ClientComponents } from "./createClientComponents";
+import { UNLIMITED_DELEGATION } from "./constants";
+import { createContract } from "@latticexyz/common";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
@@ -28,9 +31,22 @@ export function createSystemCalls(
    *   through createClientComponents.ts, but it originates in
    *   syncToRecs (https://github.com/latticexyz/mud/blob/26dabb34321eedff7a43f3fcb46da4f3f5ba3708/templates/react/packages/client/src/mud/setupNetwork.ts#L39).
    */
-  { worldContract, waitForTransaction }: SetupNetworkResult,
-  { Counter }: ClientComponents
+  { worldAddress, waitForTransaction, getResourceSelector, publicClient, write$ }: SetupNetworkResult,
+  { Counter }: ClientComponents,
+  walletClient: WalletClient<Transport, Chain, Account>
 ) {
+  /*
+   * Create an object for communicating with the deployed World.
+   */
+  const worldContract = createContract({
+    address: worldAddress as Hex,
+    abi: IWorldAbi,
+    publicClient,
+    walletClient,
+    onWrite: (write) => write$.next(write),
+    getResourceSelector,
+  });
+
   const increment = async () => {
     /*
      * Because IncrementSystem
@@ -43,7 +59,17 @@ export function createSystemCalls(
     return getComponentValue(Counter, singletonEntity);
   };
 
+  const registerDelegation = async (delegatee: Hex) => {
+    const callData = "0x";
+    console.log({ delegatee, UNLIMITED_DELEGATION, callData });
+    const tx = await worldContract.write.registerDelegation([delegatee, UNLIMITED_DELEGATION, callData], {
+      gas: 15000000n,
+    });
+    await waitForTransaction(tx);
+  };
+
   return {
     increment,
+    registerDelegation,
   };
 }
diff --git a/templates/react/packages/client/src/mud/setup.ts b/templates/react/packages/client/src/mud/setup.ts
index 8f9fdbab34..c95fa97b68 100644
--- a/templates/react/packages/client/src/mud/setup.ts
+++ b/templates/react/packages/client/src/mud/setup.ts
@@ -3,7 +3,6 @@
  */
 
 import { createClientComponents } from "./createClientComponents";
-import { createSystemCalls } from "./createSystemCalls";
 import { setupNetwork } from "./setupNetwork";
 
 export type SetupResult = Awaited<ReturnType<typeof setup>>;
@@ -11,11 +10,9 @@ export type SetupResult = Awaited<ReturnType<typeof setup>>;
 export async function setup() {
   const network = await setupNetwork();
   const components = createClientComponents(network);
-  const systemCalls = createSystemCalls(network, components);
 
   return {
     network,
     components,
-    systemCalls,
   };
 }
diff --git a/templates/react/packages/client/src/mud/setupNetwork.ts b/templates/react/packages/client/src/mud/setupNetwork.ts
index 7871825f32..304fa4d338 100644
--- a/templates/react/packages/client/src/mud/setupNetwork.ts
+++ b/templates/react/packages/client/src/mud/setupNetwork.ts
@@ -11,7 +11,6 @@ import { getDefaultWallets } from "@rainbow-me/rainbowkit";
 
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
-import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 import { createBurnerAccount, createContract, transportObserver, ContractWrite } from "@latticexyz/common";
 
@@ -86,18 +85,6 @@ export async function setupNetwork() {
     startBlock: BigInt(networkConfig.initialBlockNumber),
   });
 
-  /*
-   * Create an object for communicating with the deployed World.
-   */
-  const worldContract = createContract({
-    address: networkConfig.worldAddress as Hex,
-    abi: IWorldAbi,
-    publicClient,
-    walletClient: burnerWalletClient,
-    onWrite: (write) => write$.next(write),
-    getResourceSelector,
-  });
-
   /*
    * If there is a faucet, request (test) ETH if you have
    * less than 1 ETH. Repeat every 20 seconds to ensure you don't
@@ -128,6 +115,7 @@ export async function setupNetwork() {
 
   return {
     world,
+    worldAddress: networkConfig.worldAddress,
     components,
     playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
     publicClient,
@@ -137,7 +125,7 @@ export async function setupNetwork() {
     latestBlock$,
     storedBlockLogs$,
     waitForTransaction,
-    worldContract,
+    getResourceSelector,
     write$: write$.asObservable().pipe(share()),
   };
 }
diff --git a/templates/react/packages/client/src/mud/useSystemCalls.ts b/templates/react/packages/client/src/mud/useSystemCalls.ts
new file mode 100644
index 0000000000..aa01881034
--- /dev/null
+++ b/templates/react/packages/client/src/mud/useSystemCalls.ts
@@ -0,0 +1,25 @@
+import { Schema } from "@latticexyz/recs";
+import { useEffect, useState } from "react";
+import { WalletClient, Transport, Chain, Account } from "viem";
+import { createSystemCalls } from "./createSystemCalls";
+import { SetupNetworkResult } from "./setupNetwork";
+import { ClientComponents } from "./createClientComponents";
+
+export function useSystemCalls<S extends Schema>(
+  network: SetupNetworkResult,
+  components: ClientComponents,
+  client: WalletClient<Transport, Chain, Account> | undefined
+) {
+  const [systemCalls, setSystemCalls] = useState(undefined);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const systemCalls = createSystemCalls(network, components, client);
+    setSystemCalls(systemCalls);
+
+    // TODO what's the cleanup fn?
+  }, [client]);
+
+  return systemCalls;
+}

From d7bb9f5568682d98c05f1b514cb8658ebf3bdcc2 Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Tue, 19 Sep 2023 22:23:43 -0400
Subject: [PATCH 3/6] delegationControl hook

---
 templates/react/packages/client/src/App.tsx   | 12 +++--
 templates/react/packages/client/src/index.tsx |  8 ++--
 .../client/src/mud/createSystemCalls.ts       |  2 +-
 .../packages/client/src/mud/setupNetwork.ts   |  9 ++--
 .../client/src/mud/useDelegationControl.ts    | 47 +++++++++++++++++++
 .../packages/client/src/mud/useSystemCalls.ts |  6 +--
 6 files changed, 66 insertions(+), 18 deletions(-)
 create mode 100644 templates/react/packages/client/src/mud/useDelegationControl.ts

diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index d236e99d8e..7d865d5d5a 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -5,16 +5,18 @@ import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
 import { useSystemCalls } from "./mud/useSystemCalls";
+import { useDelegationControl } from "./mud/useDelegationControl";
 
 export const App = () => {
   const { network, components } = useMUD();
-  const { playerEntity, walletClient: burnerWalletClient } = network;
-  const { Counter, Delegations } = components;
+  // TODO rename to delegatee
+  const { walletClient: burnerWalletClient } = network;
+  const { Counter } = components;
 
   const walletClient = useWalletClient();
   const systemCalls = useSystemCalls(network, components, walletClient.data);
+  const delegationControlId = useDelegationControl(walletClient.data, burnerWalletClient, components);
   const counter = useComponentValue(Counter, singletonEntity);
-  const delegatee = useComponentValue(Delegations, playerEntity);
 
   return (
     <>
@@ -31,13 +33,13 @@ export const App = () => {
         Increment
       </button>
       <ConnectButton />
-      {walletClient.data && !delegatee ? (
+      {walletClient.data && !delegationControlId ? (
         <button
           type="button"
           onClick={async (event) => {
             event.preventDefault();
             console.log("registering delegation");
-            await systemCalls?.registerDelegation(walletClient.data.account.address);
+            await systemCalls?.registerDelegation(burnerWalletClient.account.address);
           }}
         >
           Delegate actions to burner wallet: {burnerWalletClient.account.address}
diff --git a/templates/react/packages/client/src/index.tsx b/templates/react/packages/client/src/index.tsx
index e59a46c0eb..23c475e737 100644
--- a/templates/react/packages/client/src/index.tsx
+++ b/templates/react/packages/client/src/index.tsx
@@ -1,10 +1,12 @@
 import ReactDOM from "react-dom/client";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { WagmiConfig } from "wagmi";
+import { share } from "rxjs";
 import { App } from "./App";
 import { setup } from "./mud/setup";
 import { MUDProvider } from "./MUDContext";
 import mudConfig from "contracts/mud.config";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
@@ -34,9 +36,9 @@ setup().then(async (result) => {
       walletClient: result.network.walletClient,
       latestBlock$: result.network.latestBlock$,
       storedBlockLogs$: result.network.storedBlockLogs$,
-      worldAddress: result.network.worldContract.address,
-      worldAbi: result.network.worldContract.abi,
-      write$: result.network.write$,
+      worldAddress: result.network.worldAddress,
+      worldAbi: IWorldAbi,
+      write$: result.network.write$.asObservable().pipe(share()),
       recsWorld: result.network.world,
     });
   }
diff --git a/templates/react/packages/client/src/mud/createSystemCalls.ts b/templates/react/packages/client/src/mud/createSystemCalls.ts
index b5e9d95c9e..861c5fde8f 100644
--- a/templates/react/packages/client/src/mud/createSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/createSystemCalls.ts
@@ -8,7 +8,7 @@ import { singletonEntity } from "@latticexyz/store-sync/recs";
 import { SetupNetworkResult } from "./setupNetwork";
 import { ClientComponents } from "./createClientComponents";
 import { UNLIMITED_DELEGATION } from "./constants";
-import { createContract } from "@latticexyz/common";
+import { createContract, ContractWrite } from "@latticexyz/common";
 import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
diff --git a/templates/react/packages/client/src/mud/setupNetwork.ts b/templates/react/packages/client/src/mud/setupNetwork.ts
index 304fa4d338..83c882d3db 100644
--- a/templates/react/packages/client/src/mud/setupNetwork.ts
+++ b/templates/react/packages/client/src/mud/setupNetwork.ts
@@ -8,13 +8,10 @@ import { createFaucetService } from "@latticexyz/services/faucet";
 import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { createConfig } from "wagmi";
 import { getDefaultWallets } from "@rainbow-me/rainbowkit";
-
+import { Subject } from "rxjs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
-
-import { createBurnerAccount, createContract, transportObserver, ContractWrite } from "@latticexyz/common";
-
-import { Subject, share } from "rxjs";
+import { createBurnerAccount, transportObserver, ContractWrite } from "@latticexyz/common";
 
 /*
  * Import our MUD config, which includes strong types for
@@ -126,6 +123,6 @@ export async function setupNetwork() {
     storedBlockLogs$,
     waitForTransaction,
     getResourceSelector,
-    write$: write$.asObservable().pipe(share()),
+    write$,
   };
 }
diff --git a/templates/react/packages/client/src/mud/useDelegationControl.ts b/templates/react/packages/client/src/mud/useDelegationControl.ts
new file mode 100644
index 0000000000..4e7323b520
--- /dev/null
+++ b/templates/react/packages/client/src/mud/useDelegationControl.ts
@@ -0,0 +1,47 @@
+import { ComponentValue, Type, getComponentValue } from "@latticexyz/recs";
+import { useEffect, useState } from "react";
+import { WalletClient, Transport, Chain, Account } from "viem";
+import { encodeEntity } from "@latticexyz/store-sync/recs";
+import { ClientComponents } from "./createClientComponents";
+
+export function useDelegationControl(
+  delegator: WalletClient<Transport, Chain, Account> | null | undefined,
+  delegatee: WalletClient<Transport, Chain, Account>,
+  components: ClientComponents
+) {
+  const [delegationControlId, setDelegationControlId] = useState<
+    | ComponentValue<
+        {
+          __staticData: Type.OptionalString;
+          __encodedLengths: Type.OptionalString;
+          __dynamicData: Type.OptionalString;
+        } & {
+          delegationControlId: Type.String;
+        },
+        unknown
+      >
+    | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (!delegator) return;
+
+    const delegationsKeyEntity = encodeEntity(components.Delegations.metadata.keySchema, {
+      delegator: delegator.account.address,
+      delegatee: delegatee.account.address,
+    });
+    const delegationControlId = getComponentValue(components.Delegations, delegationsKeyEntity);
+
+    console.log({
+      delegator: delegator.account.address,
+      delegatee: delegatee.account.address,
+      delegationControlId,
+      delegations: [...components.Delegations.entities()],
+    });
+    setDelegationControlId(delegationControlId);
+
+    // TODO what's the cleanup fn?
+  }, [delegator]);
+
+  return delegationControlId;
+}
diff --git a/templates/react/packages/client/src/mud/useSystemCalls.ts b/templates/react/packages/client/src/mud/useSystemCalls.ts
index aa01881034..8a61297cf8 100644
--- a/templates/react/packages/client/src/mud/useSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/useSystemCalls.ts
@@ -1,15 +1,15 @@
-import { Schema } from "@latticexyz/recs";
 import { useEffect, useState } from "react";
 import { WalletClient, Transport, Chain, Account } from "viem";
 import { createSystemCalls } from "./createSystemCalls";
 import { SetupNetworkResult } from "./setupNetwork";
 import { ClientComponents } from "./createClientComponents";
 
-export function useSystemCalls<S extends Schema>(
+export function useSystemCalls(
   network: SetupNetworkResult,
   components: ClientComponents,
-  client: WalletClient<Transport, Chain, Account> | undefined
+  client: WalletClient<Transport, Chain, Account> | null | undefined
 ) {
+  // TODO type systemCalls
   const [systemCalls, setSystemCalls] = useState(undefined);
 
   useEffect(() => {

From ef6ca42d7535e0817ea61f13cdb3025a16492f0e Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Wed, 20 Sep 2023 16:55:10 -0400
Subject: [PATCH 4/6] buggy setupResult to context

---
 templates/react/packages/client/src/App.tsx   |  1 +
 .../react/packages/client/src/MUDContext.tsx  | 23 +++++--
 templates/react/packages/client/src/index.tsx | 61 ++++++++++---------
 .../packages/client/src/mud/useSystemCalls.ts |  2 +-
 4 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index 7d865d5d5a..f33c7a8d53 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -9,6 +9,7 @@ import { useDelegationControl } from "./mud/useDelegationControl";
 
 export const App = () => {
   const { network, components } = useMUD();
+  console.log({ network, components });
   // TODO rename to delegatee
   const { walletClient: burnerWalletClient } = network;
   const { Counter } = components;
diff --git a/templates/react/packages/client/src/MUDContext.tsx b/templates/react/packages/client/src/MUDContext.tsx
index 7b5637f6a6..8747188be0 100644
--- a/templates/react/packages/client/src/MUDContext.tsx
+++ b/templates/react/packages/client/src/MUDContext.tsx
@@ -1,17 +1,30 @@
-import { createContext, ReactNode, useContext } from "react";
-import { SetupResult } from "./mud/setup";
+import { createContext, ReactNode, useContext, useState, useEffect } from "react";
+import { setup, SetupResult } from "./mud/setup";
+import { usePromise } from "@latticexyz/react";
 
 const MUDContext = createContext<SetupResult | null>(null);
 
 type Props = {
   children: ReactNode;
-  value: SetupResult;
 };
 
-export const MUDProvider = ({ children, value }: Props) => {
+export const MUDProvider = ({ children }: Props) => {
   const currentValue = useContext(MUDContext);
   if (currentValue) throw new Error("MUDProvider can only be used once");
-  return <MUDContext.Provider value={value}>{children}</MUDContext.Provider>;
+
+  // const setupResult = usePromise(setup());
+
+  // if (setupResult.status === "rejected") throw new Error("Ecountered error while setting up MUD");
+
+  // if (setupResult.status !== "fulfilled") return;
+
+  const [setupResult, setSetupResult] = useState<Awaited<ReturnType<typeof setup>> | null>(null);
+
+  useEffect(() => {
+    setup().then((response) => setSetupResult(response));
+  }, []);
+
+  return setupResult ? <MUDContext.Provider value={setupResult}>{children}</MUDContext.Provider> : null;
 };
 
 export const useMUD = () => {
diff --git a/templates/react/packages/client/src/index.tsx b/templates/react/packages/client/src/index.tsx
index 23c475e737..5943ae0adf 100644
--- a/templates/react/packages/client/src/index.tsx
+++ b/templates/react/packages/client/src/index.tsx
@@ -2,44 +2,47 @@ import ReactDOM from "react-dom/client";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { WagmiConfig } from "wagmi";
 import { share } from "rxjs";
-import { App } from "./App";
-import { setup } from "./mud/setup";
-import { MUDProvider } from "./MUDContext";
 import mudConfig from "contracts/mud.config";
-import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
+import { App } from "./App";
+import { MUDProvider, useMUD } from "./MUDContext";
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
 const root = ReactDOM.createRoot(rootElement);
 
-// TODO: figure out if we actually want this to be async or if we should render something else in the meantime
-setup().then(async (result) => {
-  const {
-    network: { wagmiConfig, chain },
-  } = result;
-  root.render(
+const AppWithWalletContext = () => {
+  const { network } = useMUD();
+  const { wagmiConfig, chain } = network;
+
+  // https://vitejs.dev/guide/env-and-mode.html
+  if (import.meta.env.DEV) {
+    import("@latticexyz/dev-tools").then(({ mount: mountDevTools }) =>
+      mountDevTools({
+        config: mudConfig,
+        publicClient: network.publicClient,
+        walletClient: network.walletClient,
+        latestBlock$: network.latestBlock$,
+        storedBlockLogs$: network.storedBlockLogs$,
+        worldAddress: network.worldAddress,
+        worldAbi: IBaseWorldAbi,
+        write$: network.write$.asObservable().pipe(share()),
+        recsWorld: network.world,
+      })
+    );
+  }
+
+  return (
     <WagmiConfig config={wagmiConfig}>
       <RainbowKitProvider chains={[chain]}>
-        <MUDProvider value={result}>
-          <App />
-        </MUDProvider>
+        <App />
       </RainbowKitProvider>
     </WagmiConfig>
   );
+};
 
-  // https://vitejs.dev/guide/env-and-mode.html
-  if (import.meta.env.DEV) {
-    const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
-    mountDevTools({
-      config: mudConfig,
-      publicClient: result.network.publicClient,
-      walletClient: result.network.walletClient,
-      latestBlock$: result.network.latestBlock$,
-      storedBlockLogs$: result.network.storedBlockLogs$,
-      worldAddress: result.network.worldAddress,
-      worldAbi: IWorldAbi,
-      write$: result.network.write$.asObservable().pipe(share()),
-      recsWorld: result.network.world,
-    });
-  }
-});
+root.render(
+  <MUDProvider>
+    <AppWithWalletContext />
+  </MUDProvider>
+);
diff --git a/templates/react/packages/client/src/mud/useSystemCalls.ts b/templates/react/packages/client/src/mud/useSystemCalls.ts
index 8a61297cf8..23a7db014e 100644
--- a/templates/react/packages/client/src/mud/useSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/useSystemCalls.ts
@@ -10,7 +10,7 @@ export function useSystemCalls(
   client: WalletClient<Transport, Chain, Account> | null | undefined
 ) {
   // TODO type systemCalls
-  const [systemCalls, setSystemCalls] = useState(undefined);
+  const [systemCalls, setSystemCalls] = useState<ReturnType<typeof createSystemCalls> | undefined>(undefined);
 
   useEffect(() => {
     if (!client) return;

From b76d1ebbe668f7d45b082bea468a85057fd73fd6 Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Wed, 20 Sep 2023 20:05:21 -0400
Subject: [PATCH 5/6] minor fixes

---
 templates/react/packages/client/src/App.tsx   |  9 ++++--
 templates/react/packages/client/src/index.tsx |  4 +--
 .../client/src/mud/createSystemCalls.ts       | 30 +++++++++----------
 .../packages/client/src/mud/setupNetwork.ts   | 16 +++++++++-
 .../client/src/mud/useDelegationControl.ts    |  1 +
 5 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index f33c7a8d53..1cea1cc84e 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -1,6 +1,6 @@
 import "@rainbow-me/rainbowkit/styles.css";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useWalletClient } from "wagmi";
+import { useWalletClient, useAccount } from "wagmi";
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
@@ -9,16 +9,19 @@ import { useDelegationControl } from "./mud/useDelegationControl";
 
 export const App = () => {
   const { network, components } = useMUD();
-  console.log({ network, components });
+
   // TODO rename to delegatee
   const { walletClient: burnerWalletClient } = network;
   const { Counter } = components;
 
   const walletClient = useWalletClient();
+  const account = useAccount();
   const systemCalls = useSystemCalls(network, components, walletClient.data);
   const delegationControlId = useDelegationControl(walletClient.data, burnerWalletClient, components);
   const counter = useComponentValue(Counter, singletonEntity);
 
+  console.log({ account, delegationControlId });
+
   return (
     <>
       <div>
@@ -34,7 +37,7 @@ export const App = () => {
         Increment
       </button>
       <ConnectButton />
-      {walletClient.data && !delegationControlId ? (
+      {account.isConnected && !delegationControlId ? (
         <button
           type="button"
           onClick={async (event) => {
diff --git a/templates/react/packages/client/src/index.tsx b/templates/react/packages/client/src/index.tsx
index 5943ae0adf..52bd9c62e0 100644
--- a/templates/react/packages/client/src/index.tsx
+++ b/templates/react/packages/client/src/index.tsx
@@ -3,7 +3,7 @@ import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { WagmiConfig } from "wagmi";
 import { share } from "rxjs";
 import mudConfig from "contracts/mud.config";
-import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 import { App } from "./App";
 import { MUDProvider, useMUD } from "./MUDContext";
 
@@ -25,7 +25,7 @@ const AppWithWalletContext = () => {
         latestBlock$: network.latestBlock$,
         storedBlockLogs$: network.storedBlockLogs$,
         worldAddress: network.worldAddress,
-        worldAbi: IBaseWorldAbi,
+        worldAbi: IWorldAbi,
         write$: network.write$.asObservable().pipe(share()),
         recsWorld: network.world,
       })
diff --git a/templates/react/packages/client/src/mud/createSystemCalls.ts b/templates/react/packages/client/src/mud/createSystemCalls.ts
index 861c5fde8f..3a589c8cc7 100644
--- a/templates/react/packages/client/src/mud/createSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/createSystemCalls.ts
@@ -8,7 +8,7 @@ import { singletonEntity } from "@latticexyz/store-sync/recs";
 import { SetupNetworkResult } from "./setupNetwork";
 import { ClientComponents } from "./createClientComponents";
 import { UNLIMITED_DELEGATION } from "./constants";
-import { createContract, ContractWrite } from "@latticexyz/common";
+import { createContract } from "@latticexyz/common";
 import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
@@ -31,22 +31,10 @@ export function createSystemCalls(
    *   through createClientComponents.ts, but it originates in
    *   syncToRecs (https://github.com/latticexyz/mud/blob/26dabb34321eedff7a43f3fcb46da4f3f5ba3708/templates/react/packages/client/src/mud/setupNetwork.ts#L39).
    */
-  { worldAddress, waitForTransaction, getResourceSelector, publicClient, write$ }: SetupNetworkResult,
+  { worldAddress, waitForTransaction, getResourceSelector, publicClient, write$, worldContract }: SetupNetworkResult,
   { Counter }: ClientComponents,
   walletClient: WalletClient<Transport, Chain, Account>
 ) {
-  /*
-   * Create an object for communicating with the deployed World.
-   */
-  const worldContract = createContract({
-    address: worldAddress as Hex,
-    abi: IWorldAbi,
-    publicClient,
-    walletClient,
-    onWrite: (write) => write$.next(write),
-    getResourceSelector,
-  });
-
   const increment = async () => {
     /*
      * Because IncrementSystem
@@ -54,15 +42,25 @@ export function createSystemCalls(
      * is in the root namespace, `.increment` can be called directly
      * on the World contract.
      */
-    const tx = await worldContract.write.increment();
+    const tx = await worldContract.write.increment({
+      gas: 15000000n,
+    });
     await waitForTransaction(tx);
     return getComponentValue(Counter, singletonEntity);
   };
 
   const registerDelegation = async (delegatee: Hex) => {
+    const contractWithDelegator = createContract({
+      address: worldAddress as Hex,
+      abi: IWorldAbi,
+      publicClient,
+      walletClient,
+      onWrite: (write) => write$.next(write),
+      getResourceSelector,
+    });
     const callData = "0x";
     console.log({ delegatee, UNLIMITED_DELEGATION, callData });
-    const tx = await worldContract.write.registerDelegation([delegatee, UNLIMITED_DELEGATION, callData], {
+    const tx = await contractWithDelegator.write.registerDelegation([delegatee, UNLIMITED_DELEGATION, callData], {
       gas: 15000000n,
     });
     await waitForTransaction(tx);
diff --git a/templates/react/packages/client/src/mud/setupNetwork.ts b/templates/react/packages/client/src/mud/setupNetwork.ts
index 83c882d3db..f4c336f55d 100644
--- a/templates/react/packages/client/src/mud/setupNetwork.ts
+++ b/templates/react/packages/client/src/mud/setupNetwork.ts
@@ -11,7 +11,8 @@ import { getDefaultWallets } from "@rainbow-me/rainbowkit";
 import { Subject } from "rxjs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
-import { createBurnerAccount, transportObserver, ContractWrite } from "@latticexyz/common";
+import { createBurnerAccount, transportObserver, ContractWrite, createContract } from "@latticexyz/common";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 
 /*
  * Import our MUD config, which includes strong types for
@@ -82,6 +83,18 @@ export async function setupNetwork() {
     startBlock: BigInt(networkConfig.initialBlockNumber),
   });
 
+  /*
+   * Create an object for communicating with the deployed World.
+   */
+  const worldContract = createContract({
+    address: networkConfig.worldAddress as Hex,
+    abi: IWorldAbi,
+    publicClient,
+    walletClient: burnerWalletClient,
+    onWrite: (write) => write$.next(write),
+    getResourceSelector,
+  });
+
   /*
    * If there is a faucet, request (test) ETH if you have
    * less than 1 ETH. Repeat every 20 seconds to ensure you don't
@@ -113,6 +126,7 @@ export async function setupNetwork() {
   return {
     world,
     worldAddress: networkConfig.worldAddress,
+    worldContract,
     components,
     playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
     publicClient,
diff --git a/templates/react/packages/client/src/mud/useDelegationControl.ts b/templates/react/packages/client/src/mud/useDelegationControl.ts
index 4e7323b520..c98b56073d 100644
--- a/templates/react/packages/client/src/mud/useDelegationControl.ts
+++ b/templates/react/packages/client/src/mud/useDelegationControl.ts
@@ -33,6 +33,7 @@ export function useDelegationControl(
     const delegationControlId = getComponentValue(components.Delegations, delegationsKeyEntity);
 
     console.log({
+      delegationsKeyEntity,
       delegator: delegator.account.address,
       delegatee: delegatee.account.address,
       delegationControlId,

From 9bd418e2f518a1ff7f017a9f0f70e5d1b2a3c5d7 Mon Sep 17 00:00:00 2001
From: y77cao <yujiac8000@gmail.com>
Date: Thu, 21 Sep 2023 19:04:18 -0400
Subject: [PATCH 6/6] use hooks for setup

---
 templates/react/packages/client/src/App.tsx   | 15 +++++----
 .../react/packages/client/src/MUDContext.tsx  | 18 +++++++---
 .../{mud => hooks}/useDelegationControl.ts    |  9 +----
 .../client/src/hooks/usePromiseValue.ts       | 24 ++++++++++++++
 .../packages/client/src/hooks/useSetup.tsx    | 17 ++++++++++
 .../src/{mud => hooks}/useSystemCalls.ts      |  6 ++--
 templates/react/packages/client/src/index.tsx | 33 +++++++++----------
 .../client/src/mud/createSystemCalls.ts       | 11 +++----
 8 files changed, 86 insertions(+), 47 deletions(-)
 rename templates/react/packages/client/src/{mud => hooks}/useDelegationControl.ts (81%)
 create mode 100644 templates/react/packages/client/src/hooks/usePromiseValue.ts
 create mode 100644 templates/react/packages/client/src/hooks/useSetup.tsx
 rename templates/react/packages/client/src/{mud => hooks}/useSystemCalls.ts (77%)

diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index 1cea1cc84e..a025d67b3e 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -3,12 +3,17 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useWalletClient, useAccount } from "wagmi";
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
+import { setup } from "./mud/setup";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
-import { useSystemCalls } from "./mud/useSystemCalls";
-import { useDelegationControl } from "./mud/useDelegationControl";
+import { useSystemCalls } from "./hooks/useSystemCalls";
+import { useDelegationControl } from "./hooks/useDelegationControl";
 
-export const App = () => {
-  const { network, components } = useMUD();
+type Props = {
+  setup: Awaited<ReturnType<typeof setup>>;
+};
+
+export const App = ({ setup }: Props) => {
+  const { network, components } = setup;
 
   // TODO rename to delegatee
   const { walletClient: burnerWalletClient } = network;
@@ -20,8 +25,6 @@ export const App = () => {
   const delegationControlId = useDelegationControl(walletClient.data, burnerWalletClient, components);
   const counter = useComponentValue(Counter, singletonEntity);
 
-  console.log({ account, delegationControlId });
-
   return (
     <>
       <div>
diff --git a/templates/react/packages/client/src/MUDContext.tsx b/templates/react/packages/client/src/MUDContext.tsx
index 8747188be0..6568ef6312 100644
--- a/templates/react/packages/client/src/MUDContext.tsx
+++ b/templates/react/packages/client/src/MUDContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useState, useEffect } from "react";
+import { createContext, ReactNode, useContext, useState, useEffect, useMemo } from "react";
 import { setup, SetupResult } from "./mud/setup";
 import { usePromise } from "@latticexyz/react";
 
@@ -8,27 +8,35 @@ type Props = {
   children: ReactNode;
 };
 
+// THis is not used. Context doesn't play well with async data fetch so used hook instead
 export const MUDProvider = ({ children }: Props) => {
   const currentValue = useContext(MUDContext);
   if (currentValue) throw new Error("MUDProvider can only be used once");
 
+  // Had weird re-rendering issue with the approach below
   // const setupResult = usePromise(setup());
 
   // if (setupResult.status === "rejected") throw new Error("Ecountered error while setting up MUD");
 
   // if (setupResult.status !== "fulfilled") return;
+  const setupPromise = useMemo(() => {
+    return setup();
+  }, []);
 
   const [setupResult, setSetupResult] = useState<Awaited<ReturnType<typeof setup>> | null>(null);
 
   useEffect(() => {
-    setup().then((response) => setSetupResult(response));
-  }, []);
+    setupPromise.then((result) => setSetupResult(result));
+
+    return () => {
+      setupPromise.then((result) => result.network.world.dispose());
+    };
+  }, [setupPromise]);
 
-  return setupResult ? <MUDContext.Provider value={setupResult}>{children}</MUDContext.Provider> : null;
+  return <MUDContext.Provider value={setupResult}>{children}</MUDContext.Provider>;
 };
 
 export const useMUD = () => {
   const value = useContext(MUDContext);
-  if (!value) throw new Error("Must be used within a MUDProvider");
   return value;
 };
diff --git a/templates/react/packages/client/src/mud/useDelegationControl.ts b/templates/react/packages/client/src/hooks/useDelegationControl.ts
similarity index 81%
rename from templates/react/packages/client/src/mud/useDelegationControl.ts
rename to templates/react/packages/client/src/hooks/useDelegationControl.ts
index c98b56073d..5d157e8aa7 100644
--- a/templates/react/packages/client/src/mud/useDelegationControl.ts
+++ b/templates/react/packages/client/src/hooks/useDelegationControl.ts
@@ -2,7 +2,7 @@ import { ComponentValue, Type, getComponentValue } from "@latticexyz/recs";
 import { useEffect, useState } from "react";
 import { WalletClient, Transport, Chain, Account } from "viem";
 import { encodeEntity } from "@latticexyz/store-sync/recs";
-import { ClientComponents } from "./createClientComponents";
+import { ClientComponents } from "../mud/createClientComponents";
 
 export function useDelegationControl(
   delegator: WalletClient<Transport, Chain, Account> | null | undefined,
@@ -32,13 +32,6 @@ export function useDelegationControl(
     });
     const delegationControlId = getComponentValue(components.Delegations, delegationsKeyEntity);
 
-    console.log({
-      delegationsKeyEntity,
-      delegator: delegator.account.address,
-      delegatee: delegatee.account.address,
-      delegationControlId,
-      delegations: [...components.Delegations.entities()],
-    });
     setDelegationControlId(delegationControlId);
 
     // TODO what's the cleanup fn?
diff --git a/templates/react/packages/client/src/hooks/usePromiseValue.ts b/templates/react/packages/client/src/hooks/usePromiseValue.ts
new file mode 100644
index 0000000000..bd71492d14
--- /dev/null
+++ b/templates/react/packages/client/src/hooks/usePromiseValue.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState, useRef } from "react";
+
+export const usePromiseValue = <T>(promise: Promise<T> | null) => {
+  const promiseRef = useRef<typeof promise>(promise);
+  const [value, setValue] = useState<T | null>(null);
+  useEffect(() => {
+    if (!promise) return;
+    let isMounted = true;
+    promiseRef.current = promise;
+    // TODO: do something with promise errors?
+    promise.then((resolvedValue) => {
+      // skip if unmounted (state changes will cause errors otherwise)
+      if (!isMounted) return;
+      // If our promise was replaced before it resolved, ignore the result
+      if (promiseRef.current !== promise) return;
+
+      setValue(resolvedValue);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [promise]);
+  return value;
+};
diff --git a/templates/react/packages/client/src/hooks/useSetup.tsx b/templates/react/packages/client/src/hooks/useSetup.tsx
new file mode 100644
index 0000000000..8f11d8c765
--- /dev/null
+++ b/templates/react/packages/client/src/hooks/useSetup.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useMemo } from "react";
+import { usePromiseValue } from "./usePromiseValue";
+import { setup } from "../mud/setup";
+
+export const useSetup = () => {
+  const setupPromise = useMemo(() => {
+    return setup();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      setupPromise.then((result) => result.network.world.dispose());
+    };
+  }, [setupPromise]);
+
+  return usePromiseValue(setupPromise);
+};
diff --git a/templates/react/packages/client/src/mud/useSystemCalls.ts b/templates/react/packages/client/src/hooks/useSystemCalls.ts
similarity index 77%
rename from templates/react/packages/client/src/mud/useSystemCalls.ts
rename to templates/react/packages/client/src/hooks/useSystemCalls.ts
index 23a7db014e..7046b91f11 100644
--- a/templates/react/packages/client/src/mud/useSystemCalls.ts
+++ b/templates/react/packages/client/src/hooks/useSystemCalls.ts
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { WalletClient, Transport, Chain, Account } from "viem";
-import { createSystemCalls } from "./createSystemCalls";
-import { SetupNetworkResult } from "./setupNetwork";
-import { ClientComponents } from "./createClientComponents";
+import { createSystemCalls } from "../mud/createSystemCalls";
+import { SetupNetworkResult } from "../mud/setupNetwork";
+import { ClientComponents } from "../mud/createClientComponents";
 
 export function useSystemCalls(
   network: SetupNetworkResult,
diff --git a/templates/react/packages/client/src/index.tsx b/templates/react/packages/client/src/index.tsx
index 52bd9c62e0..8703e405d6 100644
--- a/templates/react/packages/client/src/index.tsx
+++ b/templates/react/packages/client/src/index.tsx
@@ -6,43 +6,40 @@ import mudConfig from "contracts/mud.config";
 import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 import { App } from "./App";
 import { MUDProvider, useMUD } from "./MUDContext";
+import { useSetup } from "./hooks/useSetup";
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
 const root = ReactDOM.createRoot(rootElement);
 
 const AppWithWalletContext = () => {
-  const { network } = useMUD();
-  const { wagmiConfig, chain } = network;
+  const setup = useSetup();
 
   // https://vitejs.dev/guide/env-and-mode.html
-  if (import.meta.env.DEV) {
+  if (import.meta.env.DEV && setup) {
     import("@latticexyz/dev-tools").then(({ mount: mountDevTools }) =>
       mountDevTools({
         config: mudConfig,
-        publicClient: network.publicClient,
-        walletClient: network.walletClient,
-        latestBlock$: network.latestBlock$,
-        storedBlockLogs$: network.storedBlockLogs$,
-        worldAddress: network.worldAddress,
+        publicClient: setup.network.publicClient,
+        walletClient: setup.network.walletClient,
+        latestBlock$: setup.network.latestBlock$,
+        storedBlockLogs$: setup.network.storedBlockLogs$,
+        worldAddress: setup.network.worldAddress,
         worldAbi: IWorldAbi,
-        write$: network.write$.asObservable().pipe(share()),
-        recsWorld: network.world,
+        write$: setup.network.write$.asObservable().pipe(share()),
+        recsWorld: setup.network.world,
       })
     );
   }
 
+  if (!setup) return <>Loading...</>;
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider chains={[chain]}>
-        <App />
+    <WagmiConfig config={setup.network.wagmiConfig}>
+      <RainbowKitProvider chains={[setup.network.chain]}>
+        <App setup={setup} />
       </RainbowKitProvider>
     </WagmiConfig>
   );
 };
 
-root.render(
-  <MUDProvider>
-    <AppWithWalletContext />
-  </MUDProvider>
-);
+root.render(<AppWithWalletContext />);
diff --git a/templates/react/packages/client/src/mud/createSystemCalls.ts b/templates/react/packages/client/src/mud/createSystemCalls.ts
index 3a589c8cc7..a904cfa4cc 100644
--- a/templates/react/packages/client/src/mud/createSystemCalls.ts
+++ b/templates/react/packages/client/src/mud/createSystemCalls.ts
@@ -42,9 +42,9 @@ export function createSystemCalls(
      * is in the root namespace, `.increment` can be called directly
      * on the World contract.
      */
-    const tx = await worldContract.write.increment({
-      gas: 15000000n,
-    });
+    // gas added here is a workaround for intrinsic gas too high error
+    // likely something along with commenting out the defaultPriorityFee on chain config?
+    const tx = await worldContract.write.increment({ gas: 1500000 });
     await waitForTransaction(tx);
     return getComponentValue(Counter, singletonEntity);
   };
@@ -59,10 +59,7 @@ export function createSystemCalls(
       getResourceSelector,
     });
     const callData = "0x";
-    console.log({ delegatee, UNLIMITED_DELEGATION, callData });
-    const tx = await contractWithDelegator.write.registerDelegation([delegatee, UNLIMITED_DELEGATION, callData], {
-      gas: 15000000n,
-    });
+    const tx = await contractWithDelegator.write.registerDelegation([delegatee, UNLIMITED_DELEGATION, callData]);
     await waitForTransaction(tx);
   };