ultimate-dominion · ECWireless · Jun 4, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react';
+import { Grid } from '@chakra-ui/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { Footer } from './components/Footer';
@@ -8,11 +8,16 @@ import AppRoutes from './Routes';
 export const App = (): JSX.Element => {
   return (
     <Router>
-      <Box px={{ base: 8, sm: 12, md: 20 }}>
+      <Grid
+        minHeight="100vh"
+        px={{ base: 8, sm: 12, md: 20 }}
+        templateColumns="100%"
+        templateRows="auto 1fr auto"
+      >
         <Header />
         <AppRoutes />
         <Footer />
-      </Box>
+      </Grid>
     </Router>
   );
 };

diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -1,6 +1,6 @@
 import { Route, Routes } from 'react-router-dom';
 
-import { CharacterCreation } from './components/CharacterCreation';
+import { CharacterCreation } from './pages/CharacterCreation';
 import { Welcome } from './pages/Welcome';
 import { World } from './pages/World';
 

diff --git a/packages/client/src/components/CharacterCreation.tsx b/packages/client/src/components/CharacterCreation.tsx
diff --git a/packages/client/src/components/ConnectWalletModal.tsx b/packages/client/src/components/ConnectWalletModal.tsx
@@ -25,7 +25,7 @@ export const ConnectWalletModal = ({
 }): JSX.Element => {
   const { data: externalWalletClient } = useWalletClient();
   const { isConnected, address } = useAccount();
-  const { delegatorAddress, setBurnerWithCleanup } = useMUD();
+  const { delegatorAddress } = useMUD();
 
   const bodyContent = useMemo(() => {
     if (externalWalletClient && delegatorAddress) {
@@ -35,7 +35,6 @@ export const ConnectWalletModal = ({
           <DelegationButton
             externalWalletClient={externalWalletClient}
             onClose={onClose}
-            setBurner={setBurnerWithCleanup}
           />
         </VStack>
       );
@@ -68,7 +67,6 @@ export const ConnectWalletModal = ({
           <DelegationButton
             externalWalletClient={externalWalletClient}
             onClose={onClose}
-            setBurner={setBurnerWithCleanup}
           />
         </VStack>
       );
@@ -80,14 +78,7 @@ export const ConnectWalletModal = ({
         <ConnectWalletButton />
       </VStack>
     );
-  }, [
-    address,
-    externalWalletClient,
-    delegatorAddress,
-    isConnected,
-    onClose,
-    setBurnerWithCleanup,
-  ]);
+  }, [address, externalWalletClient, delegatorAddress, isConnected, onClose]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>

diff --git a/packages/client/src/components/DelegationButton.tsx b/packages/client/src/components/DelegationButton.tsx
@@ -1,27 +1,25 @@
 import { Button } from '@chakra-ui/react';
-import { useCallback, useEffect, useState } from 'react';
-import type { Account, Chain, Hex, Transport, WalletClient } from 'viem';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { Account, Chain, Transport, WalletClient } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
 
 import { useMUD } from '../contexts/MUDContext';
-import { useDelegation } from '../hooks/useDelegation';
 import { useToast } from '../hooks/useToast';
-import { type Burner, createBurner } from '../lib/mud/createBurner';
+import { setupDelegation } from '../lib/mud/delegation';
 import { getChainNameFromId, isSupportedChain } from '../lib/web3';
 
-export type SetBurnerProps = { setBurner: (burner: Burner) => () => void };
-
 export const DelegationButton = ({
   externalWalletClient,
   onClose,
-  setBurner,
-}: SetBurnerProps & {
+}: {
   externalWalletClient: WalletClient<Transport, Chain, Account>;
   onClose?: () => void;
 }): JSX.Element => {
+  const navigate = useNavigate();
   const { chains, switchChain } = useSwitchChain();
   const { chainId } = useAccount();
-  const { status, setupDelegation } = useDelegation(externalWalletClient);
+  const { burnerAddress, network } = useMUD();
   const { renderError, renderSuccess } = useToast();
 
   const [isDelegating, setIsDelegating] = useState(false);
@@ -32,20 +30,34 @@ export const DelegationButton = ({
         throw new Error('Delegation setup function not available');
       }
 
+      if (!network) {
+        throw new Error('Network not available');
+      }
+
       setIsDelegating(true);
-      await setupDelegation();
+      await setupDelegation(network, externalWalletClient, burnerAddress);
 
       renderSuccess('Delegation successful');
 
       if (onClose) {
         onClose();
       }
+
+      navigate('/character-creation');
     } catch (error) {
       renderError(error, 'Failed to delegate');
     } finally {
       setIsDelegating(false);
     }
-  }, [onClose, renderError, renderSuccess, setupDelegation]);
+  }, [
+    burnerAddress,
+    externalWalletClient,
+    navigate,
+    network,
+    onClose,
+    renderError,
+    renderSuccess,
+  ]);
 
   if (!isSupportedChain(chainId)) {
     return (
@@ -55,15 +67,6 @@ export const DelegationButton = ({
     );
   }
 
-  if (status === 'delegated') {
-    return (
-      <SetBurner
-        externalWalletAccountAddress={externalWalletClient.account.address}
-        setBurner={setBurner}
-      />
-    );
-  }
-
   return (
     <Button
       isLoading={isDelegating}
@@ -74,17 +77,3 @@ export const DelegationButton = ({
     </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/components/Footer.tsx b/packages/client/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { FaDiscord, FaTwitter } from 'react-icons/fa';
 
 export const Footer = (): JSX.Element => {
   return (
-    <HStack alignItems="center" h="150px">
+    <HStack alignItems="center" as="footer" h="150px">
       <Grid
         alignItems="center"
         templateColumns="repeat(4, 1fr)"
@@ -19,11 +19,11 @@ export const Footer = (): JSX.Element => {
               <Link
                 alignSelf="start"
                 borderBottom="2px solid"
-                borderColor="lightgrey"
+                borderColor="grey400"
                 fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
                 pb={1}
                 _hover={{
-                  borderColor: 'grey',
+                  borderColor: 'grey500',
                   textDecoration: 'none',
                 }}
               >
@@ -32,11 +32,11 @@ export const Footer = (): JSX.Element => {
               <Link
                 alignSelf="start"
                 borderBottom="2px solid"
-                borderColor="lightgrey"
+                borderColor="grey400"
                 fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
                 pb={1}
                 _hover={{
-                  borderColor: 'grey',
+                  borderColor: 'grey500',
                   textDecoration: 'none',
                 }}
               >
@@ -50,11 +50,11 @@ export const Footer = (): JSX.Element => {
               <Link
                 alignSelf="start"
                 borderBottom="2px solid"
-                borderColor="lightgrey"
+                borderColor="grey400"
                 fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
                 pb={1}
                 _hover={{
-                  borderColor: 'grey',
+                  borderColor: 'grey500',
                   textDecoration: 'none',
                 }}
               >
@@ -63,11 +63,11 @@ export const Footer = (): JSX.Element => {
               <Link
                 alignSelf="start"
                 borderBottom="2px solid"
-                borderColor="lightgrey"
+                borderColor="grey400"
                 fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
                 pb={1}
                 _hover={{
-                  borderColor: 'grey',
+                  borderColor: 'grey500',
                   textDecoration: 'none',
                 }}
               >

diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Stack } from '@chakra-ui/react';
+import { Box, Heading } from '@chakra-ui/react';
 import { useLocation } from 'react-router-dom';
 
 const PAGES_WITHOUT_HEADER = ['/'];
@@ -11,12 +11,10 @@ export const Header = (): JSX.Element => {
   }
 
   return (
-    <Box>
-      <Stack backgroundColor="lightgray" direction="row" padding="10px">
-        <Heading as="h1" margin="10px" w="50%">
-          Ultimate Dominion
-        </Heading>
-      </Stack>
+    <Box as="header" bgColor="grey300" mt={8} padding="10px">
+      <Heading size={{ base: 'sm', sm: 'md' }} textAlign="right">
+        Ultimate Dominion
+      </Heading>
     </Box>
   );
 };