minor fixes

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) => {

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,
       })

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,38 +31,36 @@ 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
      * (https://mud.dev/tutorials/walkthrough/minimal-onchain#incrementsystemsol)
      * 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);

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,

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,