Improve spinner, markdown rendering

web/src/CenteredSpinner.tsx

@@ -0,0 +1,16 @@
+import { Box, Spinner } from "@chakra-ui/react";
+
+const CenteredSpinner = () => (
+  <Box
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    width="100%"
+    height="100%"
+    minHeight="200px" // Adjust the min height as needed
+  >
+    <Spinner size="xl" />
+  </Box>
+);
+
+export default CenteredSpinner;

web/src/Leaderboard.tsx

@@ -1,13 +1,12 @@
 import {
   Heading,
-  Spinner,
   Table,
   TableContainer,
   Tbody,
   Td,
   Th,
-  Thead,
   Text,
+  Thead,
   Tr,
 } from "@chakra-ui/react";
 import { formatDistance } from "date-fns";
@@ -22,6 +21,7 @@ import metadata from "./metadata.json";
 import { CHAIN_ID } from "./env";
 import { LeaderboardEntry, processLeaderboard } from "./lib";
 import { useBurnerWallet } from "./hooks/useBurnerWallet";
+import CenteredSpinner from "./CenteredSpinner";
 
 const EMOJIS = metadata.keys.map((k) => k.emoji);
 
@@ -59,8 +59,6 @@ function LeaderboardComponent() {
     return `${address?.slice(0, 6)}...${address?.slice(address?.length - 3, address?.length)}`;
   }
 
-  console.log(leaderboardEntries);
-
   return (
     <>
       <Heading>Leaderboard</Heading>
@@ -107,7 +105,7 @@ function LeaderboardComponent() {
           </Tbody>
         </Table>
       </TableContainer>
-      {status === "pending" && <Spinner />}
+      {status === "pending" && <CenteredSpinner />}
     </>
   );
 }

web/src/Puzzle.tsx

@@ -28,7 +28,7 @@ function Puzzle(props: PuzzleProps) {
   );
 
   useEffect(() => {
-    console.log(gelatoStatus);
+    console.log("Gelato status", gelatoStatus);
     if (gelatoStatus === "error") {
       toast.closeAll();
       toast({

web/src/Quest.tsx

@@ -1,10 +1,11 @@
-import { Heading, VStack } from "@chakra-ui/react";
+import { Box, Heading, VStack } from "@chakra-ui/react";
 import { useChapter } from "./hooks/useChapter";
 import Markdown from "react-markdown";
-import ChakraUIRenderer from "chakra-ui-markdown-renderer";
 import Puzzle from "./Puzzle";
 import rehypeRaw from "rehype-raw";
 import { checkSolutionMatch } from "./lib";
+import CenteredSpinner from "./CenteredSpinner";
+import "./markdown.css";
 
 function Quest() {
   const {
@@ -14,6 +15,10 @@ function Quest() {
     isLast,
   } = useChapter();
 
+  const isLoading =
+    currentSmartContractChapterIndex === undefined ||
+    currentChapterContent.length === 0;
+
   return (
     <Puzzle
       isLast={isLast}
@@ -24,18 +29,25 @@ function Quest() {
         checkSolutionMatch(solution, currentSmartContractChapterIndex)
       }
     >
-      <VStack align="flex-start">
-        <Heading variant="h2">
-          Chapter {currentSmartContractChapterIndex}
-        </Heading>
-        <Markdown
-          components={ChakraUIRenderer()}
-          urlTransform={(value: string) => value}
-          rehypePlugins={[rehypeRaw]}
-        >
-          {currentChapterContent}
-        </Markdown>
-      </VStack>
+      {isLoading ? (
+        <CenteredSpinner />
+      ) : (
+        <VStack align="flex-start">
+          <Heading variant="h3">
+            Chapter {currentSmartContractChapterIndex}
+          </Heading>
+          <Box as="article" fontSize="md" lineHeight="tall" color="gray.700">
+            <div className="markdown">
+              <Markdown
+                urlTransform={(value: string) => value}
+                rehypePlugins={[rehypeRaw]}
+              >
+                {currentChapterContent}
+              </Markdown>
+            </div>
+          </Box>
+        </VStack>
+      )}
     </Puzzle>
   );
 }

web/src/hooks/gelato.tsx

@@ -44,7 +44,7 @@ export function useSubmitSolution(
   function handleTaskStateChange() {
     const taskState = taskStatus?.taskState as string;
 
-    console.log(taskState);
+    console.log("Task state change", taskState);
     if (
       ["CheckPending", "ExecPending", "WaitingForConfirmation"].includes(
         taskState
@@ -62,7 +62,7 @@ export function useSubmitSolution(
   }
 
   async function relay() {
-    console.log(`relay ${solution}`);
+    console.log("Relay", solution);
     if (!address || !signer) {
       throw "missing account";
     }
@@ -78,7 +78,6 @@ export function useSubmitSolution(
     const response = await relayRequest(encodedCall, address, signer);
     setTaskId(response.taskId);
     await fetchTaskStatus(response.taskId);
-    console.log(`set ${index} to taskId ${response.taskId}`);
   }
 
   async function poll() {
@@ -112,7 +111,7 @@ export function useSubmitSolution(
     status: Status | undefined,
     info?: { data?: string; error?: string }
   ) {
-    console.log(`status ${status}`);
+    console.log("Task status", status);
     setStatus(status);
     setError(info?.error);
     setData(info?.data);
@@ -123,9 +122,6 @@ export function useSubmitSolution(
   }
 
   useEffect(() => {
-    console.log(index);
-    console.log(solution);
-    console.log(address);
     if (
       solution !== "" &&
       address &&

web/src/markdown.css

@@ -0,0 +1,13 @@
+.markdown h1 {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+.markdown h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.markdown p {
+  margin-bottom: 1em;
+}