From 3e5b68511655d37295851dc07c284856e9f68ebd Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 28 May 2024 18:33:49 -0600
Subject: [PATCH 1/4] Move MUD files to a lib folder

---
 packages/client/src/MUDContext.tsx                          | 2 +-
 packages/client/src/index.tsx                               | 2 +-
 packages/client/src/{ => lib}/mud/createClientComponents.ts | 0
 packages/client/src/{ => lib}/mud/createSystemCalls.ts      | 0
 packages/client/src/{ => lib}/mud/getNetworkConfig.ts       | 0
 packages/client/src/{ => lib}/mud/setup.ts                  | 0
 packages/client/src/{ => lib}/mud/setupNetwork.ts           | 0
 packages/client/src/{ => lib}/mud/supportedChains.ts        | 0
 packages/client/src/{ => lib}/mud/world.ts                  | 0
 9 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/client/src/{ => lib}/mud/createClientComponents.ts (100%)
 rename packages/client/src/{ => lib}/mud/createSystemCalls.ts (100%)
 rename packages/client/src/{ => lib}/mud/getNetworkConfig.ts (100%)
 rename packages/client/src/{ => lib}/mud/setup.ts (100%)
 rename packages/client/src/{ => lib}/mud/setupNetwork.ts (100%)
 rename packages/client/src/{ => lib}/mud/supportedChains.ts (100%)
 rename packages/client/src/{ => lib}/mud/world.ts (100%)

diff --git a/packages/client/src/MUDContext.tsx b/packages/client/src/MUDContext.tsx
index c681c21bb..c9184787b 100644
--- a/packages/client/src/MUDContext.tsx
+++ b/packages/client/src/MUDContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext } from 'react';
 
-import { SetupResult } from './mud/setup';
+import { SetupResult } from './lib/mud/setup';
 
 const MUDContext = createContext<SetupResult | null>(null);
 
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 3f0c46eec..b19cff760 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 import { Web3Provider } from './contexts/Web3Provider';
-import { setup } from './mud/setup';
+import { setup } from './lib/mud/setup';
 import { MUDProvider } from './MUDContext';
 import { globalStyles, theme } from './utils/theme';
 
diff --git a/packages/client/src/mud/createClientComponents.ts b/packages/client/src/lib/mud/createClientComponents.ts
similarity index 100%
rename from packages/client/src/mud/createClientComponents.ts
rename to packages/client/src/lib/mud/createClientComponents.ts
diff --git a/packages/client/src/mud/createSystemCalls.ts b/packages/client/src/lib/mud/createSystemCalls.ts
similarity index 100%
rename from packages/client/src/mud/createSystemCalls.ts
rename to packages/client/src/lib/mud/createSystemCalls.ts
diff --git a/packages/client/src/mud/getNetworkConfig.ts b/packages/client/src/lib/mud/getNetworkConfig.ts
similarity index 100%
rename from packages/client/src/mud/getNetworkConfig.ts
rename to packages/client/src/lib/mud/getNetworkConfig.ts
diff --git a/packages/client/src/mud/setup.ts b/packages/client/src/lib/mud/setup.ts
similarity index 100%
rename from packages/client/src/mud/setup.ts
rename to packages/client/src/lib/mud/setup.ts
diff --git a/packages/client/src/mud/setupNetwork.ts b/packages/client/src/lib/mud/setupNetwork.ts
similarity index 100%
rename from packages/client/src/mud/setupNetwork.ts
rename to packages/client/src/lib/mud/setupNetwork.ts
diff --git a/packages/client/src/mud/supportedChains.ts b/packages/client/src/lib/mud/supportedChains.ts
similarity index 100%
rename from packages/client/src/mud/supportedChains.ts
rename to packages/client/src/lib/mud/supportedChains.ts
diff --git a/packages/client/src/mud/world.ts b/packages/client/src/lib/mud/world.ts
similarity index 100%
rename from packages/client/src/mud/world.ts
rename to packages/client/src/lib/mud/world.ts

From 8652939e54899260ceb2fb214393951bdd3994cf Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 28 May 2024 18:35:31 -0600
Subject: [PATCH 2/4] Move MUDContext

---
 packages/client/src/{ => contexts}/MUDContext.tsx | 2 +-
 packages/client/src/index.tsx                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/client/src/{ => contexts}/MUDContext.tsx (92%)

diff --git a/packages/client/src/MUDContext.tsx b/packages/client/src/contexts/MUDContext.tsx
similarity index 92%
rename from packages/client/src/MUDContext.tsx
rename to packages/client/src/contexts/MUDContext.tsx
index c9184787b..acd6b08ed 100644
--- a/packages/client/src/MUDContext.tsx
+++ b/packages/client/src/contexts/MUDContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext } from 'react';
 
-import { SetupResult } from './lib/mud/setup';
+import { SetupResult } from '../lib/mud/setup';
 
 const MUDContext = createContext<SetupResult | null>(null);
 
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index b19cff760..7b6546de4 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -13,9 +13,9 @@ import mudConfig from 'contracts/mud.config';
 import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
+import { MUDProvider } from './contexts/MUDContext';
 import { Web3Provider } from './contexts/Web3Provider';
 import { setup } from './lib/mud/setup';
-import { MUDProvider } from './MUDContext';
 import { globalStyles, theme } from './utils/theme';
 
 const rootElement = document.getElementById('react-root');

From 987ca449f198408701743b6ba56e3eae0f69902f Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 28 May 2024 19:01:20 -0600
Subject: [PATCH 3/4] Add lib files for delegation

---
 packages/client/src/contexts/MUDContext.tsx   | 112 +++++++++++++++--
 packages/client/src/index.tsx                 |   2 +-
 packages/client/src/lib/mud/createBurner.ts   | 115 ++++++++++++++++++
 .../src/lib/mud/createViemClientConfig.ts     |  25 ++++
 .../src/lib/mud/getBurnerAccount copy.ts      |  10 ++
 .../client/src/lib/mud/getBurnerAccount.ts    |  10 ++
 packages/client/src/lib/mud/setup.ts          |   4 +-
 packages/client/src/lib/mud/setupNetwork.ts   |  35 ++----
 8 files changed, 275 insertions(+), 38 deletions(-)
 create mode 100644 packages/client/src/lib/mud/createBurner.ts
 create mode 100644 packages/client/src/lib/mud/createViemClientConfig.ts
 create mode 100644 packages/client/src/lib/mud/getBurnerAccount copy.ts
 create mode 100644 packages/client/src/lib/mud/getBurnerAccount.ts

diff --git a/packages/client/src/contexts/MUDContext.tsx b/packages/client/src/contexts/MUDContext.tsx
index acd6b08ed..686d90db9 100644
--- a/packages/client/src/contexts/MUDContext.tsx
+++ b/packages/client/src/contexts/MUDContext.tsx
@@ -1,21 +1,117 @@
-import { createContext, ReactNode, useContext } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { formatEther } from 'viem';
 
-import { SetupResult } from '../lib/mud/setup';
+import { type Burner } from '../lib/mud/createBurner';
+import {
+  ComponentsResult,
+  NetworkResult,
+  SystemCallsResult,
+} from '../lib/mud/setup';
 
-const MUDContext = createContext<SetupResult | null>(null);
+const MUDContext = createContext<{
+  burner: Burner | null;
+  burnerBalance: string;
+  components: ComponentsResult;
+  network: NetworkResult;
+  setBurnerWithCleanup: (burner: Burner) => () => void;
+  systemCalls: SystemCallsResult;
+} | null>(null);
 
 type Props = {
   children: ReactNode;
-  value: SetupResult;
+  setupResult: {
+    components: ComponentsResult;
+    network: NetworkResult;
+    systemCalls: SystemCallsResult;
+  };
 };
 
-export const MUDProvider = ({ children, value }: Props): JSX.Element => {
-  const currentValue = useContext(MUDContext);
-  if (currentValue) throw new Error('MUDProvider can only be used once');
+export const MUDProvider = ({ children, setupResult }: Props): JSX.Element => {
+  const [burner, setBurner] = useState<Burner | null>(null);
+  const [burnerBalance, setBurnerBalance] = useState<string>('0');
+  const [components, setComponents] = useState<ComponentsResult | null>(null);
+  const [network, setNetwork] = useState<NetworkResult | null>(null);
+  const [systemCalls, setSystemCalls] = useState<SystemCallsResult | null>(
+    null,
+  );
+
+  const setBurnerWithCleanup = useCallback((burner: Burner) => {
+    setBurner(burner);
+
+    return () => {
+      setBurner(null);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (network && components && systemCalls) return;
+    if (setupResult) {
+      setComponents(setupResult.components);
+      setNetwork(setupResult.network);
+      setSystemCalls(setupResult.systemCalls);
+    }
+  }, [components, network, setupResult, systemCalls]);
+
+  const getBurnerBalance = useCallback(async () => {
+    if (!(burner && network)) return;
+    const balance = await network.publicClient.getBalance({
+      address: burner.walletClient.account.address,
+    });
+    setBurnerBalance(formatEther(balance));
+  }, [burner, network]);
+
+  useEffect(() => {
+    if (!burner) return () => {};
+    getBurnerBalance();
+
+    const interval = setInterval(getBurnerBalance, 5000);
+    return () => clearInterval(interval);
+  }, [burner, getBurnerBalance]);
+
+  const value = useMemo(() => {
+    if (!setupResult) return null;
+    if (!burner) {
+      return {
+        burner,
+        burnerBalance,
+        components: setupResult.components,
+        network: setupResult.network,
+        setBurnerWithCleanup,
+        systemCalls: setupResult.systemCalls,
+      };
+    }
+
+    return {
+      network: burner.network,
+      components: burner.components,
+      systemCalls: burner.systemCalls,
+      burner,
+      burnerBalance,
+      setBurnerWithCleanup,
+    };
+  }, [burner, burnerBalance, setBurnerWithCleanup, setupResult]);
+
+  // const currentValue = useContext(MUDContext);
+  // if (currentValue) throw new Error('MUDProvider can only be used once');
   return <MUDContext.Provider value={value}>{children}</MUDContext.Provider>;
 };
 
-export const useMUD = (): SetupResult => {
+export const useMUD = (): {
+  burner: Burner | null;
+  burnerBalance: string;
+  components: ComponentsResult;
+  network: NetworkResult;
+  setBurnerWithCleanup: (burner: Burner) => () => void;
+  systemCalls: SystemCallsResult;
+} => {
   const value = useContext(MUDContext);
   if (!value) throw new Error('Must be used within a MUDProvider');
   return value;
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 7b6546de4..fe4f1f4b7 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -28,7 +28,7 @@ setup().then(async result => {
     <ChakraProvider resetCSS theme={theme}>
       <Global styles={globalStyles} />
       <Web3Provider>
-        <MUDProvider value={result}>
+        <MUDProvider setupResult={result}>
           <App />
         </MUDProvider>
       </Web3Provider>
diff --git a/packages/client/src/lib/mud/createBurner.ts b/packages/client/src/lib/mud/createBurner.ts
new file mode 100644
index 000000000..64328e722
--- /dev/null
+++ b/packages/client/src/lib/mud/createBurner.ts
@@ -0,0 +1,115 @@
+import { type ContractWrite } from '@latticexyz/common';
+import { transactionQueue, writeObserver } from '@latticexyz/common/actions';
+import { getComponentValue } from '@latticexyz/recs';
+import {} from '@latticexyz/store-sync';
+import { encodeEntity } from '@latticexyz/store-sync/recs';
+import { callFrom } from '@latticexyz/world/internal';
+import IWorldAbi from 'contracts/out/IWorld.sol/IWorld.abi.json';
+import { share, Subject } from 'rxjs';
+import { createWalletClient, getContract, type Hex } from 'viem';
+
+import { createSystemCalls } from '../mud/createSystemCalls';
+import { type SetupNetworkResult } from '../mud/setupNetwork';
+import { createViemClientConfig } from './createViemClientConfig';
+import { getBurnerAccount } from './getBurnerAccount';
+
+export type Burner = ReturnType<typeof createBurner>;
+export type WorldContract = Burner['worldContract'];
+
+// Create a burner object including `walletClient` and `worldContract`.
+//
+// A burner account is a temporary account stored in local storage.
+// This function checks its existence in storage; if absent, generates and saves the account.
+//
+// If `delegatorAddress` is provided, delegation is automatically applied to `walletClient.writeContract(world...)` and `worldContract.write()`.
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function createBurner(
+  network: SetupNetworkResult,
+  delegatorAddress?: Hex,
+) {
+  /*
+   * Create an observable for contract writes that we can
+   * pass into MUD dev tools for transaction observability.
+   */
+  const write$ = new Subject<ContractWrite>();
+
+  /*
+   * Get or create a burner account, and create a viem client for it
+   * (see https://viem.sh/docs/clients/wallet.html).
+   */
+  let walletClient = createWalletClient({
+    ...createViemClientConfig(network.publicClient.chain),
+    account: getBurnerAccount(),
+  })
+    .extend(transactionQueue())
+    .extend(writeObserver({ onWrite: write => write$.next(write) }));
+
+  if (delegatorAddress) {
+    walletClient = walletClient.extend(
+      callFrom({
+        worldAddress: network.worldContract.address,
+        delegatorAddress,
+        worldFunctionToSystemFunction: async worldFunctionSelector => {
+          const encodedWorldFunctionSelector = encodeEntity(
+            { string: 'bytes4' },
+            { string: worldFunctionSelector },
+          );
+
+          const systemFunction = getComponentValue(
+            network.components.FunctionSelectors,
+            encodedWorldFunctionSelector,
+          );
+
+          if (!systemFunction)
+            throw new Error(
+              `Possibly store not synced: ${worldFunctionSelector}`,
+            );
+
+          return {
+            systemId: systemFunction.systemId as Hex,
+            systemFunctionSelector:
+              systemFunction.systemFunctionSelector as Hex,
+          };
+        },
+      }),
+    );
+  }
+
+  /*
+   * Create an object for communicating with the deployed World.
+   */
+  const worldContract = getContract({
+    address: network.worldContract.address,
+    abi: IWorldAbi,
+    client: { public: network.publicClient, wallet: walletClient },
+  });
+
+  const components = {
+    ...network.components,
+    // Position: overridableComponent(network.components.Position),
+  };
+
+  return {
+    components,
+    delegatorAddress,
+    delegatorEntity: delegatorAddress
+      ? encodeEntity({ address: 'address' }, { address: delegatorAddress })
+      : undefined,
+    network,
+    playerEntity: encodeEntity(
+      { address: 'address' },
+      { address: walletClient.account.address },
+    ),
+    systemCalls: createSystemCalls(
+      {
+        ...network,
+        worldContract: worldContract,
+      },
+      components,
+    ),
+    walletClient,
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
+  };
+}
diff --git a/packages/client/src/lib/mud/createViemClientConfig.ts b/packages/client/src/lib/mud/createViemClientConfig.ts
new file mode 100644
index 000000000..2000c3bbc
--- /dev/null
+++ b/packages/client/src/lib/mud/createViemClientConfig.ts
@@ -0,0 +1,25 @@
+import { transportObserver } from '@latticexyz/common';
+import { type MUDChain } from '@latticexyz/common/chains';
+import {
+  type ClientConfig,
+  fallback,
+  FallbackTransport,
+  http,
+  webSocket,
+} from 'viem';
+
+/*
+ * Create a viem public (read only) client
+ * (https://viem.sh/docs/clients/public.html)
+ */
+export function createViemClientConfig(chain: MUDChain): {
+  readonly chain: MUDChain;
+  readonly transport: FallbackTransport;
+  readonly pollingInterval: 1000;
+} {
+  return {
+    chain,
+    transport: transportObserver(fallback([webSocket(), http()])),
+    pollingInterval: 1000,
+  } as const satisfies ClientConfig;
+}
diff --git a/packages/client/src/lib/mud/getBurnerAccount copy.ts b/packages/client/src/lib/mud/getBurnerAccount copy.ts
new file mode 100644
index 000000000..f169fc95e
--- /dev/null
+++ b/packages/client/src/lib/mud/getBurnerAccount copy.ts	
@@ -0,0 +1,10 @@
+import { createBurnerAccount, getBurnerPrivateKey } from '@latticexyz/common';
+import { type PrivateKeyAccount } from 'viem';
+
+// Get or create a burner account.
+//
+// A burner account is a temporary account stored in local storage.
+// This function checks its existence in storage; if absent, generates and saves the account.
+export function getBurnerAccount(): PrivateKeyAccount {
+  return createBurnerAccount(getBurnerPrivateKey());
+}
diff --git a/packages/client/src/lib/mud/getBurnerAccount.ts b/packages/client/src/lib/mud/getBurnerAccount.ts
new file mode 100644
index 000000000..f169fc95e
--- /dev/null
+++ b/packages/client/src/lib/mud/getBurnerAccount.ts
@@ -0,0 +1,10 @@
+import { createBurnerAccount, getBurnerPrivateKey } from '@latticexyz/common';
+import { type PrivateKeyAccount } from 'viem';
+
+// Get or create a burner account.
+//
+// A burner account is a temporary account stored in local storage.
+// This function checks its existence in storage; if absent, generates and saves the account.
+export function getBurnerAccount(): PrivateKeyAccount {
+  return createBurnerAccount(getBurnerPrivateKey());
+}
diff --git a/packages/client/src/lib/mud/setup.ts b/packages/client/src/lib/mud/setup.ts
index 56f108919..a3c35def0 100644
--- a/packages/client/src/lib/mud/setup.ts
+++ b/packages/client/src/lib/mud/setup.ts
@@ -6,7 +6,9 @@ import { createClientComponents } from './createClientComponents';
 import { createSystemCalls } from './createSystemCalls';
 import { setupNetwork } from './setupNetwork';
 
-export type SetupResult = Awaited<ReturnType<typeof setup>>;
+export type NetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
+export type ComponentsResult = ReturnType<typeof createClientComponents>;
+export type SystemCallsResult = ReturnType<typeof createSystemCalls>;
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function setup() {
diff --git a/packages/client/src/lib/mud/setupNetwork.ts b/packages/client/src/lib/mud/setupNetwork.ts
index a5ebe701a..7a55acee5 100644
--- a/packages/client/src/lib/mud/setupNetwork.ts
+++ b/packages/client/src/lib/mud/setupNetwork.ts
@@ -3,11 +3,7 @@
  * (https://viem.sh/docs/getting-started.html).
  * This line imports the functions we need from it.
  */
-import {
-  ContractWrite,
-  createBurnerAccount,
-  transportObserver,
-} from '@latticexyz/common';
+import { ContractWrite, createBurnerAccount } from '@latticexyz/common';
 import { transactionQueue, writeObserver } from '@latticexyz/common/actions';
 import { encodeEntity, syncToRecs } from '@latticexyz/store-sync/recs';
 /*
@@ -21,17 +17,9 @@ import { encodeEntity, syncToRecs } from '@latticexyz/store-sync/recs';
 import mudConfig from 'contracts/mud.config';
 import IWorldAbi from 'contracts/out/IWorld.sol/IWorld.abi.json';
 import { share, Subject } from 'rxjs';
-import {
-  ClientConfig,
-  createPublicClient,
-  createWalletClient,
-  fallback,
-  getContract,
-  Hex,
-  http,
-  webSocket,
-} from 'viem';
+import { createPublicClient, createWalletClient, getContract, Hex } from 'viem';
 
+import { createViemClientConfig } from './createViemClientConfig';
 import { getNetworkConfig } from './getNetworkConfig';
 import { world } from './world';
 
@@ -41,16 +29,7 @@ export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 export async function setupNetwork() {
   const networkConfig = await getNetworkConfig();
 
-  /*
-   * Create a viem public (read only) client
-   * (https://viem.sh/docs/clients/public.html)
-   */
-  const clientOptions = {
-    chain: networkConfig.chain,
-    transport: transportObserver(fallback([webSocket(), http()])),
-    pollingInterval: 1000,
-  } as const satisfies ClientConfig;
-
+  const clientOptions = createViemClientConfig(networkConfig.chain);
   const publicClient = createPublicClient(clientOptions);
 
   /*
@@ -96,17 +75,17 @@ export async function setupNetwork() {
     });
 
   return {
-    world,
     components,
+    latestBlock$,
     playerEntity: encodeEntity(
       { address: 'address' },
       { address: burnerWalletClient.account.address },
     ),
     publicClient,
-    walletClient: burnerWalletClient,
-    latestBlock$,
     storedBlockLogs$,
     waitForTransaction,
+    walletClient: burnerWalletClient,
+    world,
     worldContract,
     write$: write$.asObservable().pipe(share()),
   };

From 165046b1eb8ce75e7f5aeb482a25d027f70faf7f Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Wed, 29 May 2024 08:48:27 -0600
Subject: [PATCH 4/4] Add delegation button

---
 packages/client/index.html                    |   4 +-
 .../src/components/ConnectWalletModal.tsx     | 134 +++++++++++++++++-
 packages/client/src/contexts/MUDContext.tsx   |  22 ++-
 packages/client/src/hooks/useDelegation.ts    |  46 ++++++
 packages/client/src/lib/mud/delegation.ts     |  40 ++++++
 5 files changed, 230 insertions(+), 16 deletions(-)
 create mode 100644 packages/client/src/hooks/useDelegation.ts
 create mode 100644 packages/client/src/lib/mud/delegation.ts

diff --git a/packages/client/index.html b/packages/client/index.html
index c3f06eb80..e0abe524a 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>a minimal MUD client</title>
+    <title>Ultimate Dominion</title>
   </head>
   <body>
     <div id="react-root"></div>
diff --git a/packages/client/src/components/ConnectWalletModal.tsx b/packages/client/src/components/ConnectWalletModal.tsx
index f264dcee6..41142e1fc 100644
--- a/packages/client/src/components/ConnectWalletModal.tsx
+++ b/packages/client/src/components/ConnectWalletModal.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -8,7 +9,13 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
+import { useEffect, useMemo } from 'react';
+import type { Account, Chain, Hex, Transport, WalletClient } from 'viem';
+import { useAccount, useSwitchChain, useWalletClient } from 'wagmi';
 
+import { useMUD } from '../contexts/MUDContext';
+import { useDelegation } from '../hooks/useDelegation';
+import { type Burner, createBurner } from '../lib/mud/createBurner';
 import { ConnectWalletButton } from './ConnectWalletButton';
 
 export const ConnectWalletModal = ({
@@ -18,19 +25,132 @@ export const ConnectWalletModal = ({
   isOpen: boolean;
   onClose: () => void;
 }): JSX.Element => {
+  const { data: externalWalletClient } = useWalletClient();
+  const { isConnected, address } = useAccount();
+  const { delegatorAddress, setBurnerWithCleanup } = useMUD();
+
+  const bodyContent = useMemo(() => {
+    if (externalWalletClient && delegatorAddress) {
+      return (
+        <VStack p={4} spacing={10}>
+          <Button onClick={onClose}>Continue</Button>
+          <DelegationButton
+            externalWalletClient={externalWalletClient}
+            setBurner={setBurnerWithCleanup}
+          />
+        </VStack>
+      );
+    }
+
+    if (address && externalWalletClient && isConnected) {
+      return (
+        <VStack p={4} spacing={10}>
+          <VStack spacing={4}>
+            <Text size="sm" textAlign="center">
+              Connected account:
+            </Text>
+            <Text textAlign="center">
+              {address.slice(0, 6)}...{address.slice(-4)}
+            </Text>
+            <Text size="sm" textAlign="center">
+              In order to play, you must delegate in-game power to a session
+              account.
+            </Text>
+            <Text size="sm" textAlign="center">
+              A session account is a private key stored in your browser&apos;s
+              local storage. It allows you to play games without having to
+              confirm transactions, but is less secure.
+            </Text>
+            <Text fontWeight={700} size="sm" textAlign="center">
+              Do not deposit any funds into this account that you are not
+              willing to lose.
+            </Text>
+          </VStack>
+          <DelegationButton
+            externalWalletClient={externalWalletClient}
+            setBurner={setBurnerWithCleanup}
+          />
+        </VStack>
+      );
+    }
+
+    return (
+      <VStack p={4} spacing={10}>
+        <Text textAlign="center">Connect your wallet to play.</Text>
+        <ConnectWalletButton />
+      </VStack>
+    );
+  }, [
+    address,
+    externalWalletClient,
+    delegatorAddress,
+    isConnected,
+    onClose,
+    setBurnerWithCleanup,
+  ]);
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Connect Wallet</ModalHeader>
+        <ModalHeader>
+          {isConnected ? 'Delegate Account' : 'Connect Wallet'}
+        </ModalHeader>
         <ModalCloseButton />
-        <ModalBody>
-          <VStack p={10} spacing={10}>
-            <Text textAlign="center">Connect your wallet to play.</Text>
-            <ConnectWalletButton />
-          </VStack>
-        </ModalBody>
+        <ModalBody>{bodyContent}</ModalBody>
       </ModalContent>
     </Modal>
   );
 };
+
+export type SetBurnerProps = { setBurner: (burner: Burner) => () => void };
+
+const DelegationButton = ({
+  externalWalletClient,
+  setBurner,
+}: SetBurnerProps & {
+  externalWalletClient: WalletClient<Transport, Chain, Account>;
+}) => {
+  const { chains, switchChain } = useSwitchChain();
+  const { chainId } = useAccount();
+  const { status, setupDelegation } = useDelegation(externalWalletClient);
+
+  const wrongNetwork = useMemo(() => {
+    if (!chainId) return true;
+    const chainIds = chains.map(chain => chain.id);
+    return !chainIds.includes(chainId);
+  }, [chainId, chains]);
+
+  if (wrongNetwork) {
+    return (
+      <Button onClick={() => switchChain({ chainId: chains[0].id })}>
+        Wrong Network
+      </Button>
+    );
+  }
+
+  if (status === 'delegated') {
+    return (
+      <SetBurner
+        externalWalletAccountAddress={externalWalletClient.account.address}
+        setBurner={setBurner}
+      />
+    );
+  }
+
+  return <Button onClick={setupDelegation}>Delegate</Button>;
+};
+
+const SetBurner = ({
+  externalWalletAccountAddress,
+  setBurner,
+}: SetBurnerProps & { externalWalletAccountAddress: Hex }) => {
+  const { network } = useMUD();
+
+  useEffect(
+    () => setBurner(createBurner(network, externalWalletAccountAddress)),
+    [externalWalletAccountAddress, network, setBurner],
+  );
+
+  return null;
+};
diff --git a/packages/client/src/contexts/MUDContext.tsx b/packages/client/src/contexts/MUDContext.tsx
index 686d90db9..b06cf5bb9 100644
--- a/packages/client/src/contexts/MUDContext.tsx
+++ b/packages/client/src/contexts/MUDContext.tsx
@@ -1,3 +1,4 @@
+import { encodeEntity } from '@latticexyz/store-sync/recs';
 import {
   createContext,
   ReactNode,
@@ -17,9 +18,10 @@ import {
 } from '../lib/mud/setup';
 
 const MUDContext = createContext<{
-  burner: Burner | null;
   burnerBalance: string;
   components: ComponentsResult;
+  delegatorAddress: string | null;
+  delegatorEntity: string | null;
   network: NetworkResult;
   setBurnerWithCleanup: (burner: Burner) => () => void;
   systemCalls: SystemCallsResult;
@@ -78,11 +80,12 @@ export const MUDProvider = ({ children, setupResult }: Props): JSX.Element => {
 
   const value = useMemo(() => {
     if (!setupResult) return null;
-    if (!burner) {
+    if (!(burner && burner.delegatorAddress)) {
       return {
-        burner,
         burnerBalance,
         components: setupResult.components,
+        delegatorAddress: null,
+        delegatorEntity: null,
         network: setupResult.network,
         setBurnerWithCleanup,
         systemCalls: setupResult.systemCalls,
@@ -90,11 +93,15 @@ export const MUDProvider = ({ children, setupResult }: Props): JSX.Element => {
     }
 
     return {
-      network: burner.network,
+      burnerBalance,
       components: burner.components,
+      delegatorAddress: burner.delegatorAddress,
+      delegatorEntity: encodeEntity(
+        { address: 'address' },
+        { address: burner.delegatorAddress },
+      ),
+      network: burner.network,
       systemCalls: burner.systemCalls,
-      burner,
-      burnerBalance,
       setBurnerWithCleanup,
     };
   }, [burner, burnerBalance, setBurnerWithCleanup, setupResult]);
@@ -105,9 +112,10 @@ export const MUDProvider = ({ children, setupResult }: Props): JSX.Element => {
 };
 
 export const useMUD = (): {
-  burner: Burner | null;
   burnerBalance: string;
   components: ComponentsResult;
+  delegatorAddress: string | null;
+  delegatorEntity: string | null;
   network: NetworkResult;
   setBurnerWithCleanup: (burner: Burner) => () => void;
   systemCalls: SystemCallsResult;
diff --git a/packages/client/src/hooks/useDelegation.ts b/packages/client/src/hooks/useDelegation.ts
new file mode 100644
index 000000000..1c1486560
--- /dev/null
+++ b/packages/client/src/hooks/useDelegation.ts
@@ -0,0 +1,46 @@
+import { useComponentValue } from '@latticexyz/react';
+import { encodeEntity } from '@latticexyz/store-sync/recs';
+import { useMemo } from 'react';
+import type { Account, Chain, Hex, Transport, WalletClient } from 'viem';
+import { useAccount } from 'wagmi';
+
+import { useMUD } from '../contexts/MUDContext';
+import { isDelegated, setupDelegation } from '../lib/mud/delegation';
+import { getBurnerAccount } from '../lib/mud/getBurnerAccount';
+
+export function useDelegation(
+  externalWalletClient: WalletClient<Transport, Chain, Account>,
+):
+  | {
+      status: 'delegated';
+      setupDelegation?: undefined;
+    }
+  | {
+      status: 'unset';
+      setupDelegation: () => Promise<void>;
+    } {
+  const {
+    network,
+    components: { UserDelegationControl },
+  } = useMUD();
+  const { address } = useAccount();
+
+  const burnerAddress = useMemo(() => getBurnerAccount().address, []);
+
+  const delegation = useComponentValue(
+    UserDelegationControl,
+    encodeEntity(
+      { delegatee: 'address', delegator: 'address' },
+      { delegatee: address ?? '0x', delegator: burnerAddress },
+    ),
+  );
+
+  if (isDelegated(delegation as { delegationControlId: Hex }))
+    return { status: 'delegated' as const };
+
+  return {
+    status: 'unset' as const,
+    setupDelegation: () =>
+      setupDelegation(network, externalWalletClient, burnerAddress),
+  };
+}
diff --git a/packages/client/src/lib/mud/delegation.ts b/packages/client/src/lib/mud/delegation.ts
new file mode 100644
index 000000000..3b39fc70d
--- /dev/null
+++ b/packages/client/src/lib/mud/delegation.ts
@@ -0,0 +1,40 @@
+import { resourceToHex } from '@latticexyz/common';
+import IWorldAbi from 'contracts/out/IWorld.sol/IWorld.abi.json';
+import {
+  type Account,
+  type Chain,
+  type Hex,
+  type Transport,
+  type WalletClient,
+} from 'viem';
+
+import { type SetupNetworkResult } from '../mud/setupNetwork';
+
+const UNLIMITED_DELEGATION = resourceToHex({
+  type: 'system',
+  namespace: '',
+  name: 'unlimited',
+});
+
+export async function setupDelegation(
+  network: SetupNetworkResult,
+  externalWalletClient: WalletClient<Transport, Chain, Account>,
+  delegateeAddress: Hex,
+): Promise<void> {
+  const { request } = await network.publicClient.simulateContract({
+    account: externalWalletClient.account,
+    address: network.worldContract.address,
+    abi: IWorldAbi,
+    functionName: 'registerDelegation',
+    args: [delegateeAddress, UNLIMITED_DELEGATION, '0x0'],
+  });
+
+  const delegationTx = await externalWalletClient.writeContract(request);
+  await network.waitForTransaction(delegationTx);
+}
+
+export function isDelegated(
+  delegation: { delegationControlId: Hex } | undefined,
+): boolean {
+  return delegation?.delegationControlId === UNLIMITED_DELEGATION;
+}