ultimate-dominion · ECWireless · May 29, 2024 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <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/MUDContext.tsx b/packages/client/src/MUDContext.tsx
diff --git 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
@@ -0,0 +1,126 @@
+import { encodeEntity } from '@latticexyz/store-sync/recs';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { formatEther } from 'viem';
+
+import { type Burner } from '../lib/mud/createBurner';
+import {
+  ComponentsResult,
+  NetworkResult,
+  SystemCallsResult,
+} from '../lib/mud/setup';
+
+const MUDContext = createContext<{
+  burnerBalance: string;
+  components: ComponentsResult;
+  delegatorAddress: string | null;
+  delegatorEntity: string | null;
+  network: NetworkResult;
+  setBurnerWithCleanup: (burner: Burner) => () => void;
+  systemCalls: SystemCallsResult;
+} | null>(null);
+
+type Props = {
+  children: ReactNode;
+  setupResult: {
+    components: ComponentsResult;
+    network: NetworkResult;
+    systemCalls: SystemCallsResult;
+  };
+};
+
+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 && burner.delegatorAddress)) {
+      return {
+        burnerBalance,
+        components: setupResult.components,
+        delegatorAddress: null,
+        delegatorEntity: null,
+        network: setupResult.network,
+        setBurnerWithCleanup,
+        systemCalls: setupResult.systemCalls,
+      };
+    }
+
+    return {
+      burnerBalance,
+      components: burner.components,
+      delegatorAddress: burner.delegatorAddress,
+      delegatorEntity: encodeEntity(
+        { address: 'address' },
+        { address: burner.delegatorAddress },
+      ),
+      network: burner.network,
+      systemCalls: burner.systemCalls,
+      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 = (): {
+  burnerBalance: string;
+  components: ComponentsResult;
+  delegatorAddress: string | null;
+  delegatorEntity: string | null;
+  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/hooks/useDelegation.ts 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/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 './mud/setup';
-import { MUDProvider } from './MUDContext';
+import { setup } from './lib/mud/setup';
 import { globalStyles, theme } from './utils/theme';
 
 const rootElement = document.getElementById('react-root');
@@ -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>