From 24ce6c538a9593504bc905da5f1a3fc40ffa8db8 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:26:09 +0530
Subject: [PATCH 01/11] fixed bug in section heights

---
 .../web/components/Dashboard/Calendar.tsx     |  26 +-
 .../components/Dashboard/DashboardSection.tsx |  45 +---
 .../components/Dashboard/LatestContent.tsx    | 123 +++++----
 .../web/components/Dashboard/Leaderboard.tsx  | 240 +++++++++---------
 .../components/Dashboard/QuestsCompleted.tsx  |   7 +-
 .../components/Dashboard/QuestsCreated.tsx    |  92 +++----
 packages/web/components/Dashboard/Seed.tsx    | 141 +++++-----
 packages/web/components/Dashboard/XP.tsx      | 108 ++++----
 .../Player/Section/PlayerSkills.tsx           |   2 +-
 packages/web/utils/layoutHelpers.ts           |   2 +-
 10 files changed, 398 insertions(+), 388 deletions(-)

diff --git a/packages/web/components/Dashboard/Calendar.tsx b/packages/web/components/Dashboard/Calendar.tsx
index 25a0aeca1..97558383a 100644
--- a/packages/web/components/Dashboard/Calendar.tsx
+++ b/packages/web/components/Dashboard/Calendar.tsx
@@ -1,3 +1,4 @@
+import { Flex, Text } from '@metafam/ds';
 import { CONFIG } from 'config';
 import React, { useEffect, useState } from 'react';
 
@@ -13,15 +14,20 @@ export const Calendar: React.FC = () => {
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
   return (
-    <iframe
-      title="calendar"
-      src={`https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=${timezone}&showPrint=0&mode=AGENDA&showTitle=0&showNav=1&showTabs=0&showPrint=0&showCalendars=0&src=${CONFIG.calendarId}&color=%23F09300`}
-      style={{
-        marginTop: '1rem',
-        flex: 1,
-      }}
-      width="100%"
-      scrolling="no"
-    />
+    <Flex direction="column" p={6} w="100%" minH="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        Calendar
+      </Text>
+      <iframe
+        title="calendar"
+        src={`https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=${timezone}&showPrint=0&mode=AGENDA&showTitle=0&showNav=1&showTabs=0&showPrint=0&showCalendars=0&src=${CONFIG.calendarId}&color=%23F09300`}
+        style={{
+          marginTop: '1rem',
+          flex: 1,
+        }}
+        width="100%"
+        scrolling="no"
+      />
+    </Flex>
   );
 };
diff --git a/packages/web/components/Dashboard/DashboardSection.tsx b/packages/web/components/Dashboard/DashboardSection.tsx
index 84a0f4f42..3753ebca1 100644
--- a/packages/web/components/Dashboard/DashboardSection.tsx
+++ b/packages/web/components/Dashboard/DashboardSection.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton, Text } from '@metafam/ds';
+import { Flex, IconButton } from '@metafam/ds';
 import { Calendar } from 'components/Dashboard/Calendar';
 import { LatestContent } from 'components/Dashboard/LatestContent';
 import { Leaderboard } from 'components/Dashboard/Leaderboard';
@@ -51,32 +51,9 @@ const DashboardSectionInner: React.FC<Props> = ({
   }
 };
 
-const getTitle = (type: BoxType, metadata?: BoxMetadata) => {
-  if (metadata?.title) return metadata?.title.toString();
-  switch (type) {
-    case BoxTypes.DASHBOARD_LASTEST_CONTENT:
-      return 'Latest Content';
-    case BoxTypes.DASHBOARD_XP_INFO:
-      return 'XP';
-    case BoxTypes.DASHBOARD_SEEDS_INFO:
-      return 'Seed';
-    case BoxTypes.DASHBOARD_CALENDER:
-      return 'Calendar';
-    case BoxTypes.DASHBOARD_LEADERBOARD:
-      return 'Leaderboard';
-    case BoxTypes.DASHBOARD_COMPLETED_QUESTS:
-      return 'Submitted Quests';
-    case BoxTypes.DASHBOARD_CREATED_QUESTS:
-      return 'Posted Quest Submissions';
-    default:
-      return '';
-  }
-};
-
 export const DashboardSection = forwardRef<HTMLDivElement, Props>(
   ({ metadata, type, player, editing = false, onRemoveBox }, ref) => {
     const key = createBoxKey(type, metadata);
-    const title = getTitle(type, metadata);
     if (!player) return null;
 
     return (
@@ -88,29 +65,15 @@ export const DashboardSection = forwardRef<HTMLDivElement, Props>(
         minH="100%"
         boxShadow="md"
         pos="relative"
-        padding={type !== BoxTypes.EMBEDDED_URL ? 6 : 0}
-        paddingRight={
-          type === BoxTypes.DASHBOARD_LASTEST_CONTENT ? 4 : undefined
-        }
       >
         <Flex
+          display={isBoxResizable(type) ? 'flex' : 'block'}
+          minH={isBoxResizable(type) ? '100%' : undefined}
+          overflow={isBoxResizable(type) ? 'hidden' : undefined}
           w="100%"
-          minH="100%"
-          h="auto"
           direction="column"
-          overflowY={
-            isBoxResizable(type) && type !== BoxTypes.EMBEDDED_URL
-              ? 'auto'
-              : 'hidden'
-          }
-          overflowX="hidden"
           pointerEvents={editing ? 'none' : 'initial'}
         >
-          {title && (
-            <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
-              {title}
-            </Text>
-          )}
           <DashboardSectionInner
             {...{
               metadata,
diff --git a/packages/web/components/Dashboard/LatestContent.tsx b/packages/web/components/Dashboard/LatestContent.tsx
index 67b4384c4..b8d4d6ae5 100644
--- a/packages/web/components/Dashboard/LatestContent.tsx
+++ b/packages/web/components/Dashboard/LatestContent.tsx
@@ -1,4 +1,12 @@
-import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@metafam/ds';
+import {
+  Flex,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from '@metafam/ds';
 import React from 'react';
 
 import { Listen } from './LatestContentTabs/Listen';
@@ -6,61 +14,66 @@ import { Read } from './LatestContentTabs/Read';
 import { Watch } from './LatestContentTabs/Watch';
 
 export const LatestContent: React.FC = () => (
-  <Flex grow={1} w="100%" mt={4} overflowY="hidden">
-    <Tabs
-      size="lg"
-      variant="line"
-      colorScheme="gray.600"
-      isFitted
-      w="100%"
-      sx={{
-        p: {
-          fontSize: 'md',
-          pb: 2,
-          mr: 'auto',
-        },
-        ul: {
-          fontSize: 'sm',
-          pb: 2,
-          pl: 6,
-        },
-      }}
-    >
-      <Flex direction="column" w="100%" h="100%">
-        <TabList borderBottomWidth={0} pr={4} pl={0}>
-          {['Read', 'Listen', 'Watch'].map((title) => (
-            <Tab
-              key={title}
-              color="gray.600"
-              _selected={{ color: 'white', borderBottomColor: 'white' }}
-              _focus={{
-                boxShadow: 'none',
-                backgroundColor: 'transparent',
-              }}
-              _active={{
-                boxShadow: 'none',
-                backgroundColor: 'transparent',
-              }}
-            >
-              {title}
-            </Tab>
-          ))}
-        </TabList>
+  <Flex direction="column" p={6} pr={4} minH="100%" w="100%">
+    <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+      Latest Content
+    </Text>
+    <Flex h="100%" w="100%" mt={4} overflowY="hidden" grow={1}>
+      <Tabs
+        size="lg"
+        variant="line"
+        colorScheme="gray.600"
+        isFitted
+        w="100%"
+        sx={{
+          p: {
+            fontSize: 'md',
+            pb: 2,
+            mr: 'auto',
+          },
+          ul: {
+            fontSize: 'sm',
+            pb: 2,
+            pl: 6,
+          },
+        }}
+      >
+        <Flex direction="column" w="100%" h="100%">
+          <TabList borderBottomWidth={0} pr={4} pl={0}>
+            {['Read', 'Listen', 'Watch'].map((title) => (
+              <Tab
+                key={title}
+                color="gray.600"
+                _selected={{ color: 'white', borderBottomColor: 'white' }}
+                _focus={{
+                  boxShadow: 'none',
+                  backgroundColor: 'transparent',
+                }}
+                _active={{
+                  boxShadow: 'none',
+                  backgroundColor: 'transparent',
+                }}
+              >
+                {title}
+              </Tab>
+            ))}
+          </TabList>
 
-        <Flex grow={1} w="100%" overflowY="auto" mt={1}>
-          <TabPanels w="100%" h="100%">
-            <TabPanel p={0}>
-              <Read />
-            </TabPanel>
-            <TabPanel p={0}>
-              <Listen />
-            </TabPanel>
-            <TabPanel p={0}>
-              <Watch />
-            </TabPanel>
-          </TabPanels>
+          <Flex grow={1} w="100%" overflowY="auto" mt={1}>
+            <TabPanels w="100%" h="100%">
+              <TabPanel p={0}>
+                <Read />
+              </TabPanel>
+              <TabPanel p={0}>
+                <Listen />
+              </TabPanel>
+              <TabPanel p={0}>
+                <Watch />
+              </TabPanel>
+            </TabPanels>
+          </Flex>
         </Flex>
-      </Flex>
-    </Tabs>
+      </Tabs>
+    </Flex>
   </Flex>
 );
diff --git a/packages/web/components/Dashboard/Leaderboard.tsx b/packages/web/components/Dashboard/Leaderboard.tsx
index f04a30c85..979b1536f 100644
--- a/packages/web/components/Dashboard/Leaderboard.tsx
+++ b/packages/web/components/Dashboard/Leaderboard.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Flex,
   FlexProps,
   HStack,
   LabeledValue,
@@ -41,130 +42,135 @@ export const Leaderboard: React.FC = () => {
   );
 
   return (
-    <VStack
-      width="100%"
-      mt={5}
-      fontFamily="exo2"
-      fontWeight={700}
-      alignItems="baseline"
-    >
-      <Box mb={4} h="2.75rem">
-        <MetaFilterSelectSearch
-          title={
-            <Text
-              as="span"
-              textTransform="none"
-              style={{ fontVariant: 'small-caps' }}
-            >
-              Sort By: <Text as="span">{sortOption.label}</Text>
-            </Text>
-          }
-          styles={metaFilterSelectStyles}
-          hasValue={sortOption.value !== SortOption.SEASON_XP}
-          value={[
-            { label: sortOption.label ?? '', value: sortOption.value ?? '' },
-          ]} // Hack
-          onChange={(choice) => {
-            if (Array.isArray(choice)) {
-              // eslint-disable-next-line no-param-reassign
-              [choice] = choice.slice(-1);
+    <Flex direction="column" p={6} w="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        Leaderboard
+      </Text>
+      <VStack
+        width="100%"
+        mt={5}
+        fontFamily="exo2"
+        fontWeight={700}
+        alignItems="baseline"
+      >
+        <Box mb={4} h="2.75rem">
+          <MetaFilterSelectSearch
+            title={
+              <Text
+                as="span"
+                textTransform="none"
+                style={{ fontVariant: 'small-caps' }}
+              >
+                Sort By: <Text as="span">{sortOption.label}</Text>
+              </Text>
             }
+            styles={metaFilterSelectStyles}
+            hasValue={sortOption.value !== SortOption.SEASON_XP}
+            value={[
+              { label: sortOption.label ?? '', value: sortOption.value ?? '' },
+            ]} // Hack
+            onChange={(choice) => {
+              if (Array.isArray(choice)) {
+                // eslint-disable-next-line no-param-reassign
+                [choice] = choice.slice(-1);
+              }
 
-            if (choice) {
-              const labeled = choice as LabeledValue<string>;
-              setSortOption(labeled);
-              setQueryVariable('orderBy', labeled.value);
-            }
-          }}
-          options={sortOptions}
-        />
-      </Box>
-      <VStack w="100%" align="stretch" h="27rem">
-        {error && <Text>{`Error: ${error.message}`}</Text>}
-        {fetching ? (
-          <LoadingState />
-        ) : (
-          !error &&
-          players.slice(0, 7).map((p, i) => {
-            const position = i + 1;
-            if (
-              (showSeasonalXP && p.seasonXP >= 1) ||
-              (!showSeasonalXP && p.totalXP >= 50)
-            ) {
-              return (
-                <MetaLink
-                  key={`player-chip-${p.id}`}
-                  as={getPlayerURL(p)}
-                  href="/player/[username]"
-                  w="100%"
-                  color="white"
-                  _hover={{}}
-                >
-                  <Box
-                    display="flex"
-                    width="100%"
-                    maxW="100%"
-                    px={3}
-                    py={2}
-                    fontSize={['sm', 'md']}
-                    flexFlow="row nowrap"
-                    alignItems="center"
-                    justifyContent="flex-start"
-                    backgroundColor="blackAlpha.500"
-                    borderRadius="md"
-                    overflow="hidden"
-                    _hover={{
-                      boxShadow: 'md',
-                      backgroundColor: 'blackAlpha.600',
-                    }}
+              if (choice) {
+                const labeled = choice as LabeledValue<string>;
+                setSortOption(labeled);
+                setQueryVariable('orderBy', labeled.value);
+              }
+            }}
+            options={sortOptions}
+          />
+        </Box>
+        <VStack w="100%" align="stretch" h="24rem">
+          {error && <Text>{`Error: ${error.message}`}</Text>}
+          {fetching ? (
+            <LoadingState />
+          ) : (
+            !error &&
+            players.slice(0, 7).map((p, i) => {
+              const position = i + 1;
+              if (
+                (showSeasonalXP && p.seasonXP >= 1) ||
+                (!showSeasonalXP && p.totalXP >= 50)
+              ) {
+                return (
+                  <MetaLink
+                    key={`player-chip-${p.id}`}
+                    as={getPlayerURL(p)}
+                    href="/player/[username]"
+                    w="100%"
+                    color="white"
+                    _hover={{}}
                   >
-                    <Box flex={0} mr={1.5}>
-                      {position}
-                    </Box>
-                    <PlayerAvatar
-                      bg="cyan.200"
-                      border={0}
-                      mr={1}
-                      size="sm"
-                      player={p}
-                      sx={{
-                        '&::after': {
-                          content: '""',
-                          position: 'absolute',
-                          top: 0,
-                          left: 0,
-                          width: '100%',
-                          height: '100%',
-                          borderRadius: '50%',
-                          border: '1px solid white',
-                          borderColor: p.rank
-                            ? p.rank.toLocaleLowerCase()
-                            : 'red.400',
-                        },
-                      }}
-                    />
                     <Box
-                      overflowX="hidden"
-                      whiteSpace="pre"
-                      textOverflow="ellipsis"
-                      mr={2}
+                      display="flex"
+                      width="100%"
+                      maxW="100%"
+                      px={3}
+                      py={2}
+                      fontSize={['sm', 'md']}
+                      flexFlow="row nowrap"
+                      alignItems="center"
+                      justifyContent="flex-start"
+                      backgroundColor="blackAlpha.500"
+                      borderRadius="md"
+                      overflow="hidden"
+                      _hover={{
+                        boxShadow: 'md',
+                        backgroundColor: 'blackAlpha.600',
+                      }}
                     >
-                      {getPlayerName(p)}
-                    </Box>
-                    <Box textAlign="right" flex={1}>
-                      {Math.floor(
-                        showSeasonalXP ? p.seasonXP : p.totalXP,
-                      ).toLocaleString()}
+                      <Box flex={0} mr={1.5}>
+                        {position}
+                      </Box>
+                      <PlayerAvatar
+                        bg="cyan.200"
+                        border={0}
+                        mr={1}
+                        size="sm"
+                        player={p}
+                        sx={{
+                          '&::after': {
+                            content: '""',
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            borderRadius: '50%',
+                            border: '1px solid white',
+                            borderColor: p.rank
+                              ? p.rank.toLocaleLowerCase()
+                              : 'red.400',
+                          },
+                        }}
+                      />
+                      <Box
+                        overflowX="hidden"
+                        whiteSpace="pre"
+                        textOverflow="ellipsis"
+                        mr={2}
+                      >
+                        {getPlayerName(p)}
+                      </Box>
+                      <Box textAlign="right" flex={1}>
+                        {Math.floor(
+                          showSeasonalXP ? p.seasonXP : p.totalXP,
+                        ).toLocaleString()}
+                      </Box>
                     </Box>
-                  </Box>
-                </MetaLink>
-              );
-            }
-            return null;
-          })
-        )}
+                  </MetaLink>
+                );
+              }
+              return null;
+            })
+          )}
+        </VStack>
       </VStack>
-    </VStack>
+    </Flex>
   );
 };
 
diff --git a/packages/web/components/Dashboard/QuestsCompleted.tsx b/packages/web/components/Dashboard/QuestsCompleted.tsx
index 61389a062..f39265b15 100644
--- a/packages/web/components/Dashboard/QuestsCompleted.tsx
+++ b/packages/web/components/Dashboard/QuestsCompleted.tsx
@@ -63,7 +63,10 @@ export const DashboardQuestsCompleted: React.FC = () => {
   }, [allQuests, statusSelection]);
 
   return (
-    <>
+    <Flex direction="column" p={6} w="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        Submitted Quests
+      </Text>
       <Box mt={2}>
         {fetching && <LoadingState />}
         {error && <Text>{`Error: ${error.message}`}</Text>}
@@ -106,6 +109,6 @@ export const DashboardQuestsCompleted: React.FC = () => {
           )}
         </Box>
       </Box>
-    </>
+    </Flex>
   );
 };
diff --git a/packages/web/components/Dashboard/QuestsCreated.tsx b/packages/web/components/Dashboard/QuestsCreated.tsx
index a0ff783bc..b5b514440 100644
--- a/packages/web/components/Dashboard/QuestsCreated.tsx
+++ b/packages/web/components/Dashboard/QuestsCreated.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Flex,
   FormControl,
   FormLabel,
   ListItem,
@@ -37,48 +38,53 @@ export const DashboardQuestsCreated: React.FC = () => {
   const createdQuests = data?.quest || null;
 
   return (
-    <Box mt={4} w="100%" overflowY="hidden">
-      {fetching && <LoadingState />}
-      {error && <Text>{`Error: ${error.message}`}</Text>}
-      {createdQuests != null && createdQuests.length > 0 && (
-        <Box h="100%" overflowY="auto">
-          <FormControl display="flex" alignItems="center">
-            <FormLabel
-              htmlFor="pendingOnly"
-              mb={0}
-              fontSize="md"
-              style={{ cursor: 'pointer' }}
-            >
-              Pending submissions only
-            </FormLabel>
-            <Switch
-              id="pendingOnly"
-              isChecked={pendingOnly}
-              onChange={() => setPendingOnly(!pendingOnly)}
-            />
-          </FormControl>
-          {createdQuests.map((quest) => (
-            <Box mt={2}>
-              <MetaLink href={`/quest/${quest.id}`}>{quest.title}</MetaLink>
-              {quest.quest_completions?.length > 0 && (
-                <UnorderedList>
-                  {quest.quest_completions.map((questCompletion) => (
-                    <ListItem pb={1}>
-                      {getPlayerName(questCompletion.player as Player)}
-                      <MetaTag ml={2}>
-                        {moment(questCompletion.submittedAt).format(
-                          'MMM D h:mma',
-                        )}
-                      </MetaTag>
-                    </ListItem>
-                  ))}
-                </UnorderedList>
-              )}
-            </Box>
-          ))}
-        </Box>
-      )}
-      {createdQuests?.length === 0 && <Box>You have no active quests.</Box>}
-    </Box>
+    <Flex direction="column" p={6} w="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        Posted Quest Submissions
+      </Text>
+      <Box mt={4} w="100%" overflowY="hidden">
+        {fetching && <LoadingState />}
+        {error && <Text>{`Error: ${error.message}`}</Text>}
+        {createdQuests != null && createdQuests.length > 0 && (
+          <Box h="100%" overflowY="auto">
+            <FormControl display="flex" alignItems="center">
+              <FormLabel
+                htmlFor="pendingOnly"
+                mb={0}
+                fontSize="md"
+                style={{ cursor: 'pointer' }}
+              >
+                Pending submissions only
+              </FormLabel>
+              <Switch
+                id="pendingOnly"
+                isChecked={pendingOnly}
+                onChange={() => setPendingOnly(!pendingOnly)}
+              />
+            </FormControl>
+            {createdQuests.map((quest) => (
+              <Box mt={2}>
+                <MetaLink href={`/quest/${quest.id}`}>{quest.title}</MetaLink>
+                {quest.quest_completions?.length > 0 && (
+                  <UnorderedList>
+                    {quest.quest_completions.map((questCompletion) => (
+                      <ListItem pb={1}>
+                        {getPlayerName(questCompletion.player as Player)}
+                        <MetaTag ml={2}>
+                          {moment(questCompletion.submittedAt).format(
+                            'MMM D h:mma',
+                          )}
+                        </MetaTag>
+                      </ListItem>
+                    ))}
+                  </UnorderedList>
+                )}
+              </Box>
+            ))}
+          </Box>
+        )}
+        {createdQuests?.length === 0 && <Box>You have no active quests.</Box>}
+      </Box>
+    </Flex>
   );
 };
diff --git a/packages/web/components/Dashboard/Seed.tsx b/packages/web/components/Dashboard/Seed.tsx
index aa00b3214..3b2aa66bc 100644
--- a/packages/web/components/Dashboard/Seed.tsx
+++ b/packages/web/components/Dashboard/Seed.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Flex,
   Image,
   Link,
   Stat,
@@ -10,6 +11,7 @@ import {
   StatHelpText,
   StatLabel,
   StatNumber,
+  Text,
   VStack,
 } from '@metafam/ds';
 import { animated, useSpring } from '@react-spring/web';
@@ -125,75 +127,79 @@ export const Seed = (): ReactElement => {
   });
 
   return (
-    <VStack spacing={2} align="stretch">
-      <Box position="relative" zIndex="20" h="16rem">
-        <StatGroup position="relative" my={5} zIndex={10}>
-          <Stat mb={3}>
-            <StatLabel>Market Price</StatLabel>
-            <StatNumber>${token?.market.current_price.usd}</StatNumber>
-            <StatHelpText>
-              <StatArrow type={token?.priceUp ? 'increase' : 'decrease'} />
-              {token?.market.price_change_percentage_24h
-                ? `${token?.market.price_change_percentage_24h?.toFixed(2)}%`
-                : `No data 😞`}
-            </StatHelpText>
-          </Stat>
+    <Flex direction="column" p={6} w="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        Seed
+      </Text>
+      <VStack spacing={2} align="stretch">
+        <Box position="relative" zIndex="20" h="15rem">
+          <StatGroup position="relative" my={5} zIndex={10}>
+            <Stat mb={3}>
+              <StatLabel>Market Price</StatLabel>
+              <StatNumber>${token?.market.current_price.usd}</StatNumber>
+              <StatHelpText>
+                <StatArrow type={token?.priceUp ? 'increase' : 'decrease'} />
+                {token?.market.price_change_percentage_24h
+                  ? `${token?.market.price_change_percentage_24h?.toFixed(2)}%`
+                  : `No data 😞`}
+              </StatHelpText>
+            </Stat>
 
-          <Stat mb={3}>
-            <StatLabel>24h Trading Volume</StatLabel>
-            <StatNumber>${token?.market.total_volume.usd}</StatNumber>
-            <StatHelpText>
-              <StatArrow type={token?.volumeUp ? 'increase' : 'decrease'} />
-              {token?.volumePercent}%
-            </StatHelpText>
-          </Stat>
+            <Stat mb={3}>
+              <StatLabel>24h Trading Volume</StatLabel>
+              <StatNumber>${token?.market.total_volume.usd}</StatNumber>
+              <StatHelpText>
+                <StatArrow type={token?.volumeUp ? 'increase' : 'decrease'} />
+                {token?.volumePercent}%
+              </StatHelpText>
+            </Stat>
 
-          <Stat alignSelf="flex-start" flex="0 0 100%">
-            <StatLabel>7d Low / High</StatLabel>
-            <StatNumber>
-              ${token?.highLow7d.low} / ${token?.highLow7d.high}
-            </StatNumber>
-          </Stat>
-        </StatGroup>
-      </Box>
-      <Box
-        position="absolute"
-        width="100%"
-        height="100%"
-        bottom={0}
-        left={0}
-        zIndex={0}
-      >
-        {token?.prices ? (
-          <Chart data={token.prices} />
-        ) : (
-          <Box
-            position="absolute"
-            bottom={5}
-            right={5}
-            opacity={0.5}
-            fontSize="lg"
-          >
-            Loading chart...
-          </Box>
-        )}
-      </Box>
-      {/**
-       * Delete this component after the CoinGecko API is updated with the Polygon Seed Pool info
-       * (and uncomment the following bit to start using the API again for the link)
-       */}
-      <Link
-        position="absolute"
-        bottom={6}
-        left={6}
-        href={TEMP_SEED_POOL_LINK_FIX_LATER}
-        isExternal
-        zIndex={20}
-      >
-        Pool Info
-      </Link>
+            <Stat alignSelf="flex-start" flex="0 0 100%">
+              <StatLabel>7d Low / High</StatLabel>
+              <StatNumber>
+                ${token?.highLow7d.low} / ${token?.highLow7d.high}
+              </StatNumber>
+            </Stat>
+          </StatGroup>
+        </Box>
+        <Box
+          position="absolute"
+          width="100%"
+          height="100%"
+          bottom={0}
+          left={0}
+          zIndex={0}
+        >
+          {token?.prices ? (
+            <Chart data={token.prices} />
+          ) : (
+            <Box
+              position="absolute"
+              bottom={5}
+              right={5}
+              opacity={0.5}
+              fontSize="lg"
+            >
+              Loading chart...
+            </Box>
+          )}
+        </Box>
+        {/**
+         * Delete this component after the CoinGecko API is updated with the Polygon Seed Pool info
+         * (and uncomment the following bit to start using the API again for the link)
+         */}
+        <Link
+          position="absolute"
+          bottom={6}
+          left={6}
+          href={TEMP_SEED_POOL_LINK_FIX_LATER}
+          isExternal
+          zIndex={20}
+        >
+          Pool Info
+        </Link>
 
-      {/**
+        {/**
          * Uncomment this after the CoinGecko API is updated with the Polygon Seed Pool info
         
       {token?.poolTicker && (
@@ -210,7 +216,8 @@ export const Seed = (): ReactElement => {
       )}
 
         */}
-    </VStack>
+      </VStack>
+    </Flex>
   );
 };
 
diff --git a/packages/web/components/Dashboard/XP.tsx b/packages/web/components/Dashboard/XP.tsx
index 3d564fad2..d134d2a1a 100644
--- a/packages/web/components/Dashboard/XP.tsx
+++ b/packages/web/components/Dashboard/XP.tsx
@@ -33,9 +33,9 @@ export const XP = (): React.ReactElement => {
 
   if (xpStats == null) {
     return (
-      <VStack spacing={0}>
+      <VStack spacing={0} w="100%" p={6}>
         <Flex align="center" justify="center" h="17rem">
-          <Text fontStyle="italic" textAlign="center" px={4} w="100%" pb="5rem">
+          <Text fontStyle="italic" textAlign="center" px={4} w="100%">
             If you want your XP stats to appear, you gotta earn some XP first!
             Go{' '}
             <Link
@@ -58,58 +58,64 @@ export const XP = (): React.ReactElement => {
     lastWeekXP,
     userWeeklyCred,
   } = xpStats;
+
   return (
-    <VStack spacing={2} align="stretch">
-      <Box position="relative" zIndex="20" h="17rem">
-        <StatGroup mt={5} flex="0 0 50%">
-          <Stat mb={3}>
-            <StatLabel>This Week</StatLabel>
-            <StatNumber>{thisWeekXP}</StatNumber>
-            <StatHelpText>
-              <StatArrow
-                type={variationThisWeek < 0 ? 'decrease' : 'increase'}
-              />
-              {variationThisWeek}%
-            </StatHelpText>
-          </Stat>
+    <Flex direction="column" p={6} w="100%">
+      <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+        XP
+      </Text>
+      <VStack spacing={2} align="stretch">
+        <Box position="relative" zIndex="20" h="15rem">
+          <StatGroup mt={5} flex="0 0 50%">
+            <Stat mb={3}>
+              <StatLabel>This Week</StatLabel>
+              <StatNumber>{thisWeekXP}</StatNumber>
+              <StatHelpText>
+                <StatArrow
+                  type={variationThisWeek < 0 ? 'decrease' : 'increase'}
+                />
+                {variationThisWeek}%
+              </StatHelpText>
+            </Stat>
 
-          <Stat mb={3} flex="0 0 50%">
-            <StatLabel>Last Week</StatLabel>
-            <StatNumber>{lastWeekXP}</StatNumber>
-            <StatHelpText>
-              <StatArrow
-                type={variationLastWeek < 0 ? 'decrease' : 'increase'}
-              />
-              {lastWeekXP}%
-            </StatHelpText>
-          </Stat>
+            <Stat mb={3} flex="0 0 50%">
+              <StatLabel>Last Week</StatLabel>
+              <StatNumber>{lastWeekXP}</StatNumber>
+              <StatHelpText>
+                <StatArrow
+                  type={variationLastWeek < 0 ? 'decrease' : 'increase'}
+                />
+                {lastWeekXP}%
+              </StatHelpText>
+            </Stat>
 
-          <Stat alignSelf="flex-start" justifySelf="flex-end" flex="0 0 100%">
-            <StatLabel>All Time</StatLabel>
-            <StatNumber>{userTotalXP.toLocaleString()}</StatNumber>
-            {user?.rank && (
-              <MetaTag
-                backgroundColor={user.rank.toLowerCase()}
-                size="md"
-                color="blackAlpha.600"
-              >
-                {user.rank}
-              </MetaTag>
-            )}
-          </Stat>
-        </StatGroup>
-      </Box>
-      <Box
-        position="absolute"
-        width="100%"
-        height="100%"
-        bottom={0}
-        left={0}
-        zIndex={0}
-      >
-        {userWeeklyCred && <Chart data={userWeeklyCred} />}
-      </Box>
-    </VStack>
+            <Stat alignSelf="flex-start" justifySelf="flex-end" flex="0 0 100%">
+              <StatLabel>All Time</StatLabel>
+              <StatNumber>{userTotalXP.toLocaleString()}</StatNumber>
+              {user?.rank && (
+                <MetaTag
+                  backgroundColor={user.rank.toLowerCase()}
+                  size="md"
+                  color="blackAlpha.600"
+                >
+                  {user.rank}
+                </MetaTag>
+              )}
+            </Stat>
+          </StatGroup>
+        </Box>
+        <Box
+          position="absolute"
+          width="100%"
+          height="100%"
+          bottom={0}
+          left={0}
+          zIndex={0}
+        >
+          {userWeeklyCred && <Chart data={userWeeklyCred} />}
+        </Box>
+      </VStack>
+    </Flex>
   );
 };
 
diff --git a/packages/web/components/Player/Section/PlayerSkills.tsx b/packages/web/components/Player/Section/PlayerSkills.tsx
index e65731973..031c7d226 100644
--- a/packages/web/components/Player/Section/PlayerSkills.tsx
+++ b/packages/web/components/Player/Section/PlayerSkills.tsx
@@ -35,7 +35,7 @@ export const PlayerSkills: React.FC<Props> = ({
           defined any skills.
         </Text>
       ) : (
-        <Wrap transition="opacity 0.4s" justify="center">
+        <Wrap transition="opacity 0.4s" justify="center" pb={4}>
           {(skills || []).map(({ id, name, category }) => (
             <WrapItem key={id}>
               <MetaTag
diff --git a/packages/web/utils/layoutHelpers.ts b/packages/web/utils/layoutHelpers.ts
index 17d9ed003..670b9e921 100644
--- a/packages/web/utils/layoutHelpers.ts
+++ b/packages/web/utils/layoutHelpers.ts
@@ -192,7 +192,7 @@ const DEFAULT_BOX_HEIGHTS: Partial<Record<BoxType, number>> = {
 };
 
 export const getBoxLayoutItemDefaults = (type: BoxType): Layout => ({
-  i: createBoxKey(type, type === BoxTypes.EMBEDDED_URL ? {} : undefined),
+  i: createBoxKey(type, undefined),
   x: 0,
   y: 0,
   w: 1,

From c3c3b0d97d7cfba6a891785bd7897c72d2153fa9 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:26:38 +0530
Subject: [PATCH 02/11] fixed version of ethers in utils package

---
 packages/utils/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/utils/package.json b/packages/utils/package.json
index c269953af..87da498d5 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -19,7 +19,7 @@
     "@ethersproject/address": "5.6.0",
     "bignumber.js": "^9.1.0",
     "cids": "1.1.9",
-    "ethers": "5.6.9",
+    "ethers": "5.7.0",
     "imgix-core-js": "2.3.2",
     "js-base64": "3.7.2",
     "node-fetch": "3.2.1",

From aa2128cdb3fdaad394f98be0dde8ff2c0c1503d3 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:40:42 +0530
Subject: [PATCH 03/11] fixed remove bug with player & guild sections

---
 .../web/components/Guild/GuildSection.tsx     | 20 +++++++++-------
 .../web/components/Player/PlayerSection.tsx   | 24 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/Guild/GuildSection.tsx b/packages/web/components/Guild/GuildSection.tsx
index ba3193828..9ee2860fc 100644
--- a/packages/web/components/Guild/GuildSection.tsx
+++ b/packages/web/components/Guild/GuildSection.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton } from '@metafam/ds';
+import { Box, Flex, IconButton } from '@metafam/ds';
 import { GuildAnnouncements } from 'components/Guild/Section/GuildAnnouncements';
 import { GuildHero } from 'components/Guild/Section/GuildHero';
 import { GuildLinks } from 'components/Guild/Section/GuildLinks';
@@ -57,14 +57,16 @@ export const GuildSection = forwardRef<HTMLDivElement, Props>(
         boxShadow="md"
         pos="relative"
       >
-        <GuildSectionInner
-          {...{
-            metadata,
-            type,
-            guild,
-            editing,
-          }}
-        />
+        <Box pointerEvents={editing ? 'none' : 'initial'}>
+          <GuildSectionInner
+            {...{
+              metadata,
+              type,
+              guild,
+              editing,
+            }}
+          />
+        </Box>
         {editing && (
           <Flex
             className="gridItemOverlay"
diff --git a/packages/web/components/Player/PlayerSection.tsx b/packages/web/components/Player/PlayerSection.tsx
index e47003336..44a6a66b9 100644
--- a/packages/web/components/Player/PlayerSection.tsx
+++ b/packages/web/components/Player/PlayerSection.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton } from '@metafam/ds';
+import { Box, Flex, IconButton } from '@metafam/ds';
 import { PlayerAchievements } from 'components/Player/Section/PlayerAchievements';
 import { PlayerCompletedQuests } from 'components/Player/Section/PlayerCompletedQuests';
 import { PlayerGallery } from 'components/Player/Section/PlayerGallery';
@@ -78,17 +78,18 @@ export const PlayerSection = forwardRef<HTMLDivElement, Props>(
         minH="100%"
         boxShadow="md"
         pos="relative"
-        pointerEvents={editing ? 'none' : 'initial'}
       >
-        <PlayerSectionInner
-          {...{
-            metadata,
-            type,
-            player,
-            isOwnProfile,
-            editing,
-          }}
-        />
+        <Box pointerEvents={editing ? 'none' : 'initial'}>
+          <PlayerSectionInner
+            {...{
+              metadata,
+              type,
+              player,
+              isOwnProfile,
+              editing,
+            }}
+          />
+        </Box>
         {editing && (
           <Flex
             className="gridItemOverlay"
@@ -103,6 +104,7 @@ export const PlayerSection = forwardRef<HTMLDivElement, Props>(
         {editing && type && type !== BoxTypes.PLAYER_HERO && (
           <IconButton
             aria-label="Remove Profile Section"
+            zIndex={100}
             size="lg"
             pos="absolute"
             top={0}

From 830bb7423be0d1f9af7d871d50e41ec9d3695d37 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 18:12:06 +0530
Subject: [PATCH 04/11] added custom text box type

---
 packages/web/utils/boxTypes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/utils/boxTypes.ts b/packages/web/utils/boxTypes.ts
index 864a23238..71c69e7f8 100644
--- a/packages/web/utils/boxTypes.ts
+++ b/packages/web/utils/boxTypes.ts
@@ -33,6 +33,7 @@ export const BoxTypes = {
   // Common Boxes
   ADD_NEW_BOX: 'add-new-box',
   EMBEDDED_URL: 'embedded-url',
+  CUSTOM_TEXT: 'custom-text',
 } as const;
 
 export type BoxType = Values<typeof BoxTypes>;

From e00d05be92bbebbd24743143386d41a581384901 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:17:25 +0530
Subject: [PATCH 05/11] added custom text section component

---
 .../components/Section/CustomTextSection.tsx  | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/web/components/Section/CustomTextSection.tsx

diff --git a/packages/web/components/Section/CustomTextSection.tsx b/packages/web/components/Section/CustomTextSection.tsx
new file mode 100644
index 000000000..35c45cc2f
--- /dev/null
+++ b/packages/web/components/Section/CustomTextSection.tsx
@@ -0,0 +1,50 @@
+import { Input, Text, VStack } from '@metafam/ds';
+import { MarkdownEditor } from 'components/MarkdownEditor';
+import { MarkdownViewer } from 'components/MarkdownViewer';
+import React from 'react';
+import { BoxMetadata } from 'utils/boxTypes';
+
+type CustomTextSectionProps = {
+  title?: string;
+  content?: string;
+};
+
+export const CustomTextSection: React.FC<CustomTextSectionProps> = ({
+  title = '',
+  content = '',
+}) => (
+  <VStack w="100%" p={6} align="stretch" pb={10}>
+    <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
+      {title}
+    </Text>
+    <MarkdownViewer>{content}</MarkdownViewer>
+  </VStack>
+);
+
+export const CustomTextSectionMetadata: React.FC<{
+  metadata: BoxMetadata;
+  setMetadata: React.Dispatch<React.SetStateAction<BoxMetadata>>;
+}> = ({ metadata, setMetadata }) => (
+  <>
+    <Input
+      bg="dark"
+      w="100%"
+      placeholder="Provide the title"
+      _placeholder={{ color: 'whiteAlpha.500' }}
+      value={metadata.title ?? ''}
+      onChange={({ target: { value: title } }) =>
+        setMetadata((old) => ({ ...old, title }))
+      }
+      size="lg"
+      borderRadius={0}
+      borderColor="borderPurple"
+      fontSize="md"
+      borderWidth="2px"
+    />
+    <MarkdownEditor
+      placeholder="Provide the content"
+      value={metadata.content ?? ''}
+      onChange={(content) => setMetadata((old) => ({ ...old, content }))}
+    />
+  </>
+);

From f1ba43dd29195d4032a2c34cd668e2ba7c38d275 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:42:17 +0530
Subject: [PATCH 06/11] support custom text sections in all pages

---
 packages/web/components/Dashboard/DashboardSection.tsx | 7 +++++++
 packages/web/components/Guild/GuildSection.tsx         | 7 +++++++
 packages/web/components/Player/PlayerSection.tsx       | 7 +++++++
 3 files changed, 21 insertions(+)

diff --git a/packages/web/components/Dashboard/DashboardSection.tsx b/packages/web/components/Dashboard/DashboardSection.tsx
index 3753ebca1..73720f2ec 100644
--- a/packages/web/components/Dashboard/DashboardSection.tsx
+++ b/packages/web/components/Dashboard/DashboardSection.tsx
@@ -4,6 +4,7 @@ import { LatestContent } from 'components/Dashboard/LatestContent';
 import { Leaderboard } from 'components/Dashboard/Leaderboard';
 import { Seed } from 'components/Dashboard/Seed';
 import { XP } from 'components/Dashboard/XP';
+import { CustomTextSection } from 'components/Section/CustomTextSection';
 import { EmbeddedUrl } from 'components/Section/EmbeddedUrlSection';
 import { Player } from 'graphql/autogen/types';
 import React, { forwardRef } from 'react';
@@ -46,6 +47,12 @@ const DashboardSectionInner: React.FC<Props> = ({
       const { url } = metadata ?? {};
       return url ? <EmbeddedUrl {...{ url, editing }} /> : null;
     }
+    case BoxTypes.CUSTOM_TEXT: {
+      const { title, content } = metadata ?? {};
+      return title && content ? (
+        <CustomTextSection {...{ title, content }} />
+      ) : null;
+    }
     default:
       return null;
   }
diff --git a/packages/web/components/Guild/GuildSection.tsx b/packages/web/components/Guild/GuildSection.tsx
index 9ee2860fc..8112d25a7 100644
--- a/packages/web/components/Guild/GuildSection.tsx
+++ b/packages/web/components/Guild/GuildSection.tsx
@@ -3,6 +3,7 @@ import { GuildAnnouncements } from 'components/Guild/Section/GuildAnnouncements'
 import { GuildHero } from 'components/Guild/Section/GuildHero';
 import { GuildLinks } from 'components/Guild/Section/GuildLinks';
 import { GuildPlayers } from 'components/Guild/Section/GuildPlayers';
+import { CustomTextSection } from 'components/Section/CustomTextSection';
 import { EmbeddedUrl } from 'components/Section/EmbeddedUrlSection';
 import { GuildFragment } from 'graphql/autogen/types';
 import React, { forwardRef } from 'react';
@@ -36,6 +37,12 @@ const GuildSectionInner: React.FC<Props & { guild: GuildFragment }> = ({
       const { url } = metadata ?? {};
       return url ? <EmbeddedUrl {...{ url, editing }} /> : null;
     }
+    case BoxTypes.CUSTOM_TEXT: {
+      const { title, content } = metadata ?? {};
+      return title && content ? (
+        <CustomTextSection {...{ title, content }} />
+      ) : null;
+    }
     default:
       return null;
   }
diff --git a/packages/web/components/Player/PlayerSection.tsx b/packages/web/components/Player/PlayerSection.tsx
index 44a6a66b9..d9819b036 100644
--- a/packages/web/components/Player/PlayerSection.tsx
+++ b/packages/web/components/Player/PlayerSection.tsx
@@ -8,6 +8,7 @@ import { PlayerPersonalityType } from 'components/Player/Section/PlayerPersonali
 import { PlayerRoles } from 'components/Player/Section/PlayerRoles';
 import { PlayerSkills } from 'components/Player/Section/PlayerSkills';
 import { PlayerType } from 'components/Player/Section/PlayerType';
+import { CustomTextSection } from 'components/Section/CustomTextSection';
 import { EmbeddedUrl } from 'components/Section/EmbeddedUrlSection';
 import { Player } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
@@ -52,6 +53,12 @@ const PlayerSectionInner: React.FC<
       const { url } = metadata ?? {};
       return url ? <EmbeddedUrl {...{ url, editing }} /> : null;
     }
+    case BoxTypes.CUSTOM_TEXT: {
+      const { title, content } = metadata ?? {};
+      return title && content ? (
+        <CustomTextSection {...{ title, content }} />
+      ) : null;
+    }
     default:
       return null;
   }

From 6307ef135805a73f0380c172ec3d276ef561f23f Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:47:32 +0530
Subject: [PATCH 07/11] add custom text block to supported boxes

---
 packages/web/components/Dashboard/config.ts      | 1 +
 packages/web/components/Guild/Section/config.ts  | 1 +
 packages/web/components/Player/Section/config.ts | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/web/components/Dashboard/config.ts b/packages/web/components/Dashboard/config.ts
index 97950008b..44bcfc7ca 100644
--- a/packages/web/components/Dashboard/config.ts
+++ b/packages/web/components/Dashboard/config.ts
@@ -43,6 +43,7 @@ export const ALL_BOXES = [
   BoxTypes.DASHBOARD_COMPLETED_QUESTS,
   BoxTypes.DASHBOARD_CREATED_QUESTS,
   BoxTypes.EMBEDDED_URL,
+  BoxTypes.CUSTOM_TEXT,
   // TODO: Add more types of sections
 ];
 
diff --git a/packages/web/components/Guild/Section/config.ts b/packages/web/components/Guild/Section/config.ts
index 6af07f0a6..338d49961 100644
--- a/packages/web/components/Guild/Section/config.ts
+++ b/packages/web/components/Guild/Section/config.ts
@@ -14,6 +14,7 @@ export const ALL_BOXES = [
   BoxTypes.GUILD_ANNOUNCEMENTS,
   BoxTypes.GUILD_PLAYERS,
   BoxTypes.EMBEDDED_URL,
+  BoxTypes.CUSTOM_TEXT,
   // BoxTypes.GUILD_SKILLS,
   // TODO: Add more types of sections
 ];
diff --git a/packages/web/components/Player/Section/config.ts b/packages/web/components/Player/Section/config.ts
index 1e01a7ded..14421665f 100644
--- a/packages/web/components/Player/Section/config.ts
+++ b/packages/web/components/Player/Section/config.ts
@@ -18,6 +18,7 @@ export const ALL_BOXES = [
   BoxTypes.PLAYER_ROLES,
   BoxTypes.EMBEDDED_URL,
   BoxTypes.PLAYER_COMPLETED_QUESTS,
+  BoxTypes.CUSTOM_TEXT,
   // BoxTypes.PLAYER_ACHIEVEMENTS,
   // TODO: Add more types of sections
 ];

From bb9e74afc78e0f29078a10635d53632a6cccc47f Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Wed, 18 Jan 2023 23:56:32 +0530
Subject: [PATCH 08/11] add the custom text metadata editor

---
 packages/web/components/Section/AddBoxSection.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/Section/AddBoxSection.tsx b/packages/web/components/Section/AddBoxSection.tsx
index b559d3491..83821e993 100644
--- a/packages/web/components/Section/AddBoxSection.tsx
+++ b/packages/web/components/Section/AddBoxSection.tsx
@@ -22,6 +22,7 @@ import { GuildFragment, Player } from 'graphql/autogen/types';
 import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { BoxMetadata, BoxType, BoxTypes } from 'utils/boxTypes';
 
+import { CustomTextSectionMetadata } from './CustomTextSection';
 import { EmbeddedUrlMetadata } from './EmbeddedUrlSection';
 
 type Props = FlexProps & {
@@ -208,11 +209,13 @@ export const AddBoxSection = React.forwardRef<HTMLDivElement, Props>(
 export const EditMetadata: React.FC<{
   type: BoxType;
   metadata: BoxMetadata;
-  setMetadata: (d: BoxMetadata) => void;
+  setMetadata: React.Dispatch<React.SetStateAction<BoxMetadata>>;
 }> = ({ type, ...props }) => {
   switch (type) {
     case BoxTypes.EMBEDDED_URL:
       return <EmbeddedUrlMetadata {...props} />;
+    case BoxTypes.CUSTOM_TEXT:
+      return <CustomTextSectionMetadata {...props} />;
     default:
       return null;
   }

From 594d22baf7a9fc3a6d2415e5d74040db7bc5b89e Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Thu, 19 Jan 2023 00:10:43 +0530
Subject: [PATCH 09/11] support multiple custom text blocks

---
 packages/web/utils/layoutHelpers.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web/utils/layoutHelpers.ts b/packages/web/utils/layoutHelpers.ts
index 670b9e921..d0366fbad 100644
--- a/packages/web/utils/layoutHelpers.ts
+++ b/packages/web/utils/layoutHelpers.ts
@@ -11,7 +11,10 @@ import {
 
 export const GRID_ROW_HEIGHT = 32;
 export const HEIGHT_MODIFIER = 1.8;
-export const MULTIPLE_ALLOWED_BOXES = [BoxTypes.EMBEDDED_URL] as Array<BoxType>;
+export const MULTIPLE_ALLOWED_BOXES = [
+  BoxTypes.EMBEDDED_URL,
+  BoxTypes.CUSTOM_TEXT,
+] as Array<BoxType>;
 
 export const removeBoxFromLayouts = (
   layouts: Layouts,
@@ -189,6 +192,7 @@ const DEFAULT_BOX_HEIGHTS: Partial<Record<BoxType, number>> = {
   // common boxes
   [BoxTypes.ADD_NEW_BOX]: 3,
   [BoxTypes.EMBEDDED_URL]: 7,
+  [BoxTypes.CUSTOM_TEXT]: 7,
 };
 
 export const getBoxLayoutItemDefaults = (type: BoxType): Layout => ({

From 86b1609613089de3e52e238dd79a6567a761ddf3 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Thu, 19 Jan 2023 00:28:03 +0530
Subject: [PATCH 10/11] added a guide for creating a custom block

---
 guides/CUSTOM_BLOCK.md | 99 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 guides/CUSTOM_BLOCK.md

diff --git a/guides/CUSTOM_BLOCK.md b/guides/CUSTOM_BLOCK.md
new file mode 100644
index 000000000..94788714f
--- /dev/null
+++ b/guides/CUSTOM_BLOCK.md
@@ -0,0 +1,99 @@
+# MyMeta - Custom Blocks
+
+This shall serve a minimal guide towards developing custom blocks and linking your MyMeta player profiles, guild profiles and/or personal dashboards with external applications or APIs.
+
+## Pre-requesites
+
+- The MyMeta frontend codebase ([`packages/web`](https://github.com/MetaFam/TheGame/blob/develop/packages/web)) uses NextJS, so a basic understanding of NextJS architecture is a must.
+- Some important files that you must understand before proceeding to develop your own custom blocks:
+  1. Dashboard Page - [`pages/dashboard.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/pages/dashboard.tsx)
+  2. Player Profile Page- [`pages/player/[username].tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/pages/player/[username.tsx])
+  3. Guild Profile Page - [`pages/guild/[guildname]/index.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/pages/guild/%5Bguildname%5D/index.tsx)
+  4. Common EditableGridLayout Component - [`components/EditableGridLayout.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/components/EditableGridLayout.tsx)
+     - This component is the basis for building the layout of blocks.
+     - One of the props for `EditableGridLayout`, is the `displayComponent` which renders the actual block. The different display components for different pages are given below.
+  5. Dashboard Display Component - [`components/Dashboard/DashboardSection.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/components/Dashboard/DashboardSection.tsx)
+     - The `displayComponent` for `pages/dashboard.tsx`
+  6. Player Profile Display Component - [`components/Player/PlayerSection.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/components/Player/PlayerSection.tsx)
+     - The `displayComponent` for `pages/player/[username].tsx`
+  7. Guild Profile Display Component - [`components/Guild/GuildSection.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/components/Guild/GuildSection.tsx)
+     - The `displayComponent` for `pages/guild/[guildname]/index.tsx`
+  8. AddBoxSection Component - [`components/Section/AddBoxSection.tsx`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/components/Section/AddBoxSection.tsx)
+     - Another key component in `EditableGridLayout`.
+     - This renders the UI for the user to customize and create a new block on their `EditableGridLayout`.
+  9. Box Types Utils - [`utils/boxTypes.ts`](https://github.com/MetaFam/TheGame/blob/develop/packages/web/utils/boxTypes.ts)
+     - This file contains all the basic utilities methods and constants required for the functionality of custom blocks
+
+## Steps
+
+> We shall be creating a simple block with a custom title and description. Similar steps can be followed to create more complex custom blocks.
+
+### Step 1: Create a new BoxType
+
+- Add a new `BoxType` in `utils/boxTypes.ts`.
+
+```
+  CUSTOM_TEXT: 'custom-text'
+```
+
+- Refer to the commit [830bb74](https://github.com/MetaFam/TheGame/commit/830bb7423be0d1f9af7d871d50e41ec9d3695d37) for the code changes
+
+### Step 2: Define the structure of metadata
+
+- Each block can use a custom metadata with the type of `BoxMetadata`, and we must define the type for our custom block. For this usecase we shall assume that it requires two text parameters `title` and `content`.
+
+### Step 3: Create the component for this boxType
+
+- Now create a new component `CustomTextSection` with `title` and `content` as props.
+- Refer to the commit [e00d05b](https://github.com/MetaFam/TheGame/commit/e00d05be92bbebbd24743143386d41a581384901) for the code changes
+
+### Step 4: Create the metadata editor component
+
+- Next, we can create a component `CustomTextSectionMetadata` which has two props `metadata` & `setMetadata` which shall be used in `AddBoxSection` for the user to create the metadata required for `CustomTextSection`.
+- Refer to the commit [e00d05b](https://github.com/MetaFam/TheGame/commit/e00d05be92bbebbd24743143386d41a581384901) for the code changes
+
+### Step 5: Add the render option in the display components
+
+- Add an extra case in the switch statements in `DashboardSection`, `PlayerSection` and `GuildSection` components to handle the metadata and render the `CustomTextSection`
+
+```
+case BoxTypes.CUSTOM_TEXT: {
+  const { title, content } = metadata ?? {};
+  return title && content ? (
+    <CustomTextSection {...{ title, content }} />
+    ) : null;
+  }
+```
+
+- In this case, our custom text can be added to all three pages, but if your custom box is relavant only to one of the pages then add it only to that particular display component.
+- Refer to the commit [f1ba43d](https://github.com/MetaFam/TheGame/commit/f1ba43dd29195d4032a2c34cd668e2ba7c38d275) for the code changes
+
+### Step 6: Add our boxType to the supported list of boxes
+
+- Add `BoxTypes.CUSTOM_TEXT` to the list of `ALL_BOXES` to the `config.ts` of each page
+  - `components/Player/Section/config.ts` for player profiles
+  - `components/Guild/Section/config.ts` for guild profiles
+  - `components/Dashboard/config.ts` for dashboard
+- Refer to the commit [6307ef1](https://github.com/MetaFam/TheGame/commit/6307ef135805a73f0380c172ec3d276ef561f23f) for the code changes
+
+### Step 7: Add our metadata editor component
+
+- Add the `CustomTextSectionMetadata` editor component to the `AddBoxSection` component
+- Refer to the commit [bb9e74a](https://github.com/MetaFam/TheGame/commit/bb9e74afc78e0f29078a10635d53632a6cccc47f) for the code changes
+
+### Step 7: Add specific config/helpers for this boxType
+
+- Add a default box height in `utils/layoutHelpers.ts` under `DEFAULT_BOX_HEIGHTS`.
+- In this case, the custom text box can be added multiple times with different metadata, therefore we shall add it the list of `MULTIPLE_ALLOWED_BOXES` as well.
+- If needed we may need to edit `isResizableBox` if this block is resizable, although we leave it untouched for our usecase. See `components/Dashboard/Calendar.tsx` for an example of a resizable block.
+- Refer to the commit [594d22b](https://github.com/MetaFam/TheGame/commit/594d22baf7a9fc3a6d2415e5d74040db7bc5b89e) for the code changes
+
+## Conclusion
+
+- Hurray! We have successfully added a basic custom block to MyMeta.
+- Next step is to create a PR with our `develop` branch.
+- Please follow our [`CONTRIBUTING_GUIDE`](https://github.com/MetaFam/TheGame/blob/develop/guides/CONTRIBUTING.md) for complete instructions on contributing to MyMeta.
+
+## Help & Support
+
+- For any queries, please join our discord and go to the `#builders` channel for help!

From 7d9bc6e736b1e43513af8800d69da6e8e154c6c9 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Fri, 20 Jan 2023 17:04:44 +0530
Subject: [PATCH 11/11] minor typo

---
 guides/CUSTOM_BLOCK.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/guides/CUSTOM_BLOCK.md b/guides/CUSTOM_BLOCK.md
index 94788714f..29c96d9c2 100644
--- a/guides/CUSTOM_BLOCK.md
+++ b/guides/CUSTOM_BLOCK.md
@@ -1,6 +1,6 @@
 # MyMeta - Custom Blocks
 
-This shall serve a minimal guide towards developing custom blocks and linking your MyMeta player profiles, guild profiles and/or personal dashboards with external applications or APIs.
+This shall serve as a minimal guide towards developing custom blocks and linking your MyMeta player profiles, guild profiles and/or personal dashboards with external applications or APIs.
 
 ## Pre-requesites
 
@@ -26,7 +26,7 @@ This shall serve a minimal guide towards developing custom blocks and linking yo
 
 ## Steps
 
-> We shall be creating a simple block with a custom title and description. Similar steps can be followed to create more complex custom blocks.
+> We shall be creating a simple block with a custom title and content. Similar steps can be followed to create more complex custom blocks.
 
 ### Step 1: Create a new BoxType