From 37a05d3ee95f36e8a2c7ed744b8faced78323265 Mon Sep 17 00:00:00 2001
From: Kien Ngo <github@kien.ngo>
Date: Tue, 24 Sep 2024 18:59:53 +0700
Subject: [PATCH] Remove <Box/> easy mode

---
 .../contract-publish-form/custom-factory.tsx  |  4 +--
 .../external-links-fieldset.tsx               |  6 ++--
 .../contract-publish-form/index.tsx           |  4 +--
 .../landing-fieldset.tsx                      | 12 +++----
 .../components/devRelEvents/DevRelEvent.tsx   |  6 ++--
 .../components/homepage/CodeBlock/index.tsx   | 36 +++++++++----------
 .../homepage/sections/Solutions.tsx           |  5 ++-
 .../src/components/onboarding/PlanCard.tsx    |  6 ++--
 .../SponsorshipPolicies/index.tsx             | 24 ++++++-------
 .../MiniPlayground.tsx                        |  4 +--
 .../ConnectWalletPlayground/FormItem.tsx      |  4 +--
 .../tabs/events/components/events-feed.tsx    |  8 ++---
 .../tabs/nfts/components/lazy-mint-form.tsx   |  5 ++-
 .../tabs/nfts/components/mint-form.tsx        |  5 ++-
 .../nfts/components/shared-metadata-form.tsx  |  5 ++-
 .../nfts/components/update-metadata-form.tsx  |  5 ++-
 .../tabs/overview/components/LatestEvents.tsx |  4 +--
 .../overview/components/PermissionsTable.tsx  |  4 +--
 .../tabs/settings/components/metadata.tsx     |  5 ++-
 .../src/contract-ui/tabs/tokens/page.tsx      |  6 ++--
 .../src/core-ui/sidebar/detail-page.tsx       |  8 ++---
 apps/dashboard/src/pages/templates.tsx        |  4 +--
 22 files changed, 81 insertions(+), 89 deletions(-)

diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
index cb98e767365..66eae212eef 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -106,7 +106,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
             </FormControl>
           </div>
         ))}
-        <Box>
+        <div>
           <Button
             type="button"
             size="sm"
@@ -117,7 +117,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
           >
             Add Network
           </Button>
-        </Box>
+        </div>
       </Flex>
       <Flex flexDir="column" gap={4}>
         <Flex flexDir="column" gap={2}>
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
index e8849b762e7..daf477bc656 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon } from "@chakra-ui/react";
+import { Flex, Icon } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { FiPlus } from "react-icons/fi";
@@ -37,7 +37,7 @@ export const ExternalLinksFieldset = () => {
         {fields.map((item, index) => (
           <ExternalLinksInput key={item.id} remove={remove} index={index} />
         ))}
-        <Box>
+        <div>
           <Button
             type="button"
             size="sm"
@@ -53,7 +53,7 @@ export const ExternalLinksFieldset = () => {
           >
             Add Resource
           </Button>
-        </Box>
+        </div>
       </Flex>
     </Flex>
   );
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
index 91cc6cbf563..c0b67d2338e 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
@@ -295,7 +295,7 @@ export function ContractPublishForm(props: {
           gap={6}
         >
           {fieldsetToShow !== "landing" && (
-            <Box>
+            <div>
               <IconButton
                 w="inherit"
                 variant="ghost"
@@ -314,7 +314,7 @@ export function ContractPublishForm(props: {
               >
                 Back
               </IconButton>
-            </Box>
+            </div>
           )}
           {fieldsetToShow === "landing" && (
             <LandingFieldset
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
index a7ddf5a2f47..769e14550c6 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -145,7 +145,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
         </Flex>
       </Flex>
 
-      <Box>
+      <div>
         <Heading size="title.md" mb={2}>
           README
         </Heading>
@@ -186,9 +186,9 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
             </TabPanels>
           </Tabs>
         </FormControl>
-      </Box>
+      </div>
       <ExternalLinksFieldset />
-      <Box>
+      <div>
         <Heading size="title.md" mb={2}>
           Version information
         </Heading>
@@ -267,8 +267,8 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
             </FormHelperText>
           </FormControl>
         </Flex>
-      </Box>
-      <Box>
+      </div>
+      <div>
         <Heading size="title.md" mb={2}>
           Deployment options
         </Heading>
@@ -294,7 +294,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
             width="full"
           />
         </Flex>
-      </Box>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/devRelEvents/DevRelEvent.tsx b/apps/dashboard/src/components/devRelEvents/DevRelEvent.tsx
index ad0b5894dc0..bf834a5a1be 100644
--- a/apps/dashboard/src/components/devRelEvents/DevRelEvent.tsx
+++ b/apps/dashboard/src/components/devRelEvents/DevRelEvent.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, Image } from "@chakra-ui/react";
+import { Flex, Icon, Image } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { FiCalendar, FiClock } from "react-icons/fi";
 import { Card, Heading, LinkButton, Text } from "tw-components";
@@ -75,7 +75,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
             </Flex>
           </Flex>
         </Flex>
-        <Box>
+        <div>
           <LinkButton
             href={link}
             onClick={() =>
@@ -92,7 +92,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
           >
             Register
           </LinkButton>
-        </Box>
+        </div>
       </Flex>
     </Card>
   );
diff --git a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
index 1d624004315..0bed55186d7 100644
--- a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
+++ b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
@@ -209,26 +209,24 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
               as={Code}
               h="full"
             >
-              <Box>
-                <Box>
-                  <Box as="span" display="block" my={1} color="heading">
-                    {tokens.map((line, i) => (
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      <Box key={i} {...getLineProps({ line })}>
-                        <LineNumbers
-                          lineNumber={i + 1}
-                          lineHeight={chakraTheme.sizes["5"]}
-                          totalLines={tokens.length}
-                        />
-                        {line.map((token, key) => (
-                          // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                          <span key={key} {...getTokenProps({ token })} />
-                        ))}
-                      </Box>
-                    ))}
-                  </Box>
+              <div>
+                <Box as="span" display="block" my={1} color="heading">
+                  {tokens.map((line, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                    <Box key={i} {...getLineProps({ line })}>
+                      <LineNumbers
+                        lineNumber={i + 1}
+                        lineHeight={chakraTheme.sizes["5"]}
+                        totalLines={tokens.length}
+                      />
+                      {line.map((token, key) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                        <span key={key} {...getTokenProps({ token })} />
+                      ))}
+                    </Box>
+                  ))}
                 </Box>
-              </Box>
+              </div>
             </Box>
           )}
         </Highlight>
diff --git a/apps/dashboard/src/components/homepage/sections/Solutions.tsx b/apps/dashboard/src/components/homepage/sections/Solutions.tsx
index a9db411d4f4..e7ad8db16f0 100644
--- a/apps/dashboard/src/components/homepage/sections/Solutions.tsx
+++ b/apps/dashboard/src/components/homepage/sections/Solutions.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Flex,
   Image,
   LinkBox,
@@ -85,7 +84,7 @@ const SolutionCard: React.FC<SolutionCardProps> = ({
         py={{ base: 10 }}
         flexGrow={1}
       >
-        <Box>
+        <div>
           <Heading
             as="h3"
             fontSize="24px"
@@ -106,7 +105,7 @@ const SolutionCard: React.FC<SolutionCardProps> = ({
           <Text size="body.lg" lineHeight={1.7} color="whiteAlpha.700">
             {description}
           </Text>
-        </Box>
+        </div>
       </Flex>
     </Flex>
   );
diff --git a/apps/dashboard/src/components/onboarding/PlanCard.tsx b/apps/dashboard/src/components/onboarding/PlanCard.tsx
index a5e4dd27b7b..0bf9b8f688c 100644
--- a/apps/dashboard/src/components/onboarding/PlanCard.tsx
+++ b/apps/dashboard/src/components/onboarding/PlanCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, ListItem, UnorderedList } from "@chakra-ui/react";
+import { Flex, ListItem, UnorderedList } from "@chakra-ui/react";
 import { Badge, Card, Heading, LinkButton, Text } from "tw-components";
 import type { CreditsRecord } from "./ApplyForOpCreditsModal";
 
@@ -10,7 +10,7 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
   return (
     <Card as={Flex} justifyContent="space-between" flexDir="column" gap={2}>
       <Flex flexDir="column" gap={2}>
-        <Box>
+        <div>
           <Badge
             borderRadius="full"
             size="label.sm"
@@ -22,7 +22,7 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
           >
             {creditsRecord.title}
           </Badge>
-        </Box>
+        </div>
         <Flex flexDir="column" gap={1}>
           <Text color="faded">{creditsRecord.upTo ? "Up to" : "\u00A0"}</Text>
           <Heading color="bgBlack" size="title.md" fontWeight="extrabold">
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index 4abec0ddb68..bd025eaece2 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -274,7 +274,7 @@ export function AccountAbstractionSettingsPage(
         <FormControl>
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">Global spend limits</FormLabel>
                 <Text>
                   Maximum gas cost (in USD) that you want to sponsor. This
@@ -282,7 +282,7 @@ export function AccountAbstractionSettingsPage(
                   this limit is reached, your users will have to fund their own
                   gas costs.
                 </Text>
-              </Box>
+              </div>
 
               <Switch
                 colorScheme="primary"
@@ -345,7 +345,7 @@ export function AccountAbstractionSettingsPage(
         >
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">
                   Restrict to specific chains
                 </FormLabel>
@@ -361,7 +361,7 @@ export function AccountAbstractionSettingsPage(
                     supported chains.
                   </TrackedLink>
                 </Text>
-              </Box>
+              </div>
 
               <Switch
                 colorScheme="primary"
@@ -401,14 +401,14 @@ export function AccountAbstractionSettingsPage(
         >
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">
                   Restrict to specific contract addresses
                 </FormLabel>
                 <Text>
                   Only sponsor transactions for the specified contracts.
                 </Text>
-              </Box>
+              </div>
 
               <Switch
                 colorScheme="primary"
@@ -444,7 +444,7 @@ export function AccountAbstractionSettingsPage(
         <FormControl>
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">
                   Allowlisted/Blocklisted accounts
                 </FormLabel>
@@ -452,7 +452,7 @@ export function AccountAbstractionSettingsPage(
                   Select either allowlisted or blockedlisted accounts. Disabling
                   this option will allow all accounts.
                 </Text>
-              </Box>
+              </div>
 
               <Switch
                 colorScheme="primary"
@@ -521,7 +521,7 @@ export function AccountAbstractionSettingsPage(
         <FormControl>
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">Server verifier</FormLabel>
                 <Text>
                   Specify your own endpoint that will verify each transaction
@@ -536,7 +536,7 @@ export function AccountAbstractionSettingsPage(
                   </TrackedLink>
                   .
                 </Text>
-              </Box>
+              </div>
 
               <GatedSwitch
                 upgradeRequired={!dashboardAccountQuery.data.advancedEnabled}
@@ -636,13 +636,13 @@ export function AccountAbstractionSettingsPage(
         >
           <Flex flexDir="column" gap={4}>
             <div className="flex flex-row items-center justify-between">
-              <Box>
+              <div>
                 <FormLabel pointerEvents="none">Admin accounts</FormLabel>
                 <Text>
                   These accounts won&apos;t be subject to any sponsorship rules.
                   All transactions will be sponsored.
                 </Text>
-              </Box>
+              </div>
 
               <Switch
                 colorScheme="primary"
diff --git a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
index 64910b88896..591a3e41f85 100644
--- a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
+++ b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
@@ -257,7 +257,7 @@ export const MiniPlayground: React.FC<{
             )}
 
             {/* Web3 Wallets */}
-            <Box>
+            <div>
               <FormItem label="Web3 Wallets">
                 <Flex flexWrap="wrap" gap={3}>
                   {(Object.keys(enabledWallets) as WalletIdSubset[]).map(
@@ -293,7 +293,7 @@ export const MiniPlayground: React.FC<{
                 </TrackedLink>
                 <Icon as={FiChevronRight} w={4} h={4} color="blue.500" />
               </Flex>
-            </Box>
+            </div>
 
             {/* Social Logins */}
             <FormItem label="Email & Social Logins">
diff --git a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx
index 6c1b28e4bfa..0ec46bae67e 100644
--- a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx
+++ b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, FormControl, Tooltip } from "@chakra-ui/react";
+import { Flex, FormControl, Tooltip } from "@chakra-ui/react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FormLabel } from "tw-components";
 
@@ -23,7 +23,7 @@ export const FormItem: React.FC<{
               borderRadius="md"
               px={3}
               py={2}
-              label={<Box>{props.description}</Box>}
+              label={<div>{props.description}</div>}
             >
               <div>
                 <AiOutlineInfoCircle className="text-muted-foreground" />
diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
index f77bef1ec73..67a316da13b 100644
--- a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
@@ -109,7 +109,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
             ))}
           </Select>
         </Flex>
-        <Box>
+        <div>
           <FormControl display="flex" alignItems="center">
             <FormLabel htmlFor="auto-update" mb="0">
               Auto-Update
@@ -122,7 +122,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
               />
             </LightMode>
           </FormControl>
-        </Box>
+        </div>
       </Flex>
       <Card p={0} overflow="hidden">
         <SimpleGrid
@@ -314,9 +314,9 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
               <Text fontFamily="mono" noOfLines={1}>
                 {transaction.blockNumber}
               </Text>
-              <Box>
+              <div>
                 <Icon as={FiChevronDown} />
-              </Box>
+              </div>
             </Stack>
           </Box>
         </SimpleGrid>
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-form.tsx
index e63feda1d2b..237c3271ae0 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-form.tsx
@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Divider,
   DrawerBody,
   DrawerFooter,
@@ -197,7 +196,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
           </FormControl>
           <FormControl isInvalid={!!mediaFileError}>
             <FormLabel>Media</FormLabel>
-            <Box>
+            <div>
               <FileInput
                 previewMaxWidth="200px"
                 value={mediaFileUrl as File | string}
@@ -208,7 +207,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                 selectOrUpload="Upload"
                 helperText="Media"
               />
-            </Box>
+            </div>
             <FormHelperText>
               You can upload image, audio, video, html, text, pdf, and 3d model
               files here.
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-form.tsx
index 2883f03d124..48c8ca01cb5 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-form.tsx
@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Divider,
   DrawerBody,
   DrawerFooter,
@@ -207,7 +206,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({ contract, isErc721 }) => {
           </FormControl>
           <FormControl isInvalid={!!mediaFileError}>
             <FormLabel>Media</FormLabel>
-            <Box>
+            <div>
               <FileInput
                 previewMaxWidth="200px"
                 value={mediaFileUrl as File | string}
@@ -218,7 +217,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({ contract, isErc721 }) => {
                 selectOrUpload="Upload"
                 helperText="Media"
               />
-            </Box>
+            </div>
             <FormHelperText>
               You can upload image, audio, video, html, text, pdf, and 3d model
               files here.
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-form.tsx
index 45ec6179d0a..91a92e18c6b 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-form.tsx
@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Divider,
   DrawerBody,
   DrawerFooter,
@@ -188,7 +187,7 @@ export const SharedMetadataForm: React.FC<{
           </FormControl>
           <FormControl isInvalid={!!mediaFileError}>
             <FormLabel>Media</FormLabel>
-            <Box>
+            <div>
               <FileInput
                 previewMaxWidth="200px"
                 value={mediaFileUrl as File | string}
@@ -199,7 +198,7 @@ export const SharedMetadataForm: React.FC<{
                 selectOrUpload="Upload"
                 helperText="Media"
               />
-            </Box>
+            </div>
             <FormHelperText>
               You can upload image, audio, video, html, text, pdf, and 3d model
               files here.
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
index 1f7b68a6099..786c16fb456 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/update-metadata-form.tsx
@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Divider,
   DrawerBody,
   DrawerFooter,
@@ -273,7 +272,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 />
               </div>
             )}
-            <Box>
+            <div>
               <FileInput
                 previewMaxWidth="200px"
                 value={mediaFileUrl as File | string}
@@ -284,7 +283,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 selectOrUpload="Upload"
                 helperText={nft?.metadata ? "New Media" : "Media"}
               />
-            </Box>
+            </div>
             <FormHelperText>
               You can upload image, audio, video, html, text, pdf, and 3d model
               files here.
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
index 5529e777b07..9c5956a55f1 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
@@ -115,7 +115,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({ transaction }) => {
   const href = useTabHref("events");
 
   return (
-    <Box>
+    <div>
       <SimpleGrid
         columns={9}
         gap={2}
@@ -212,6 +212,6 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({ transaction }) => {
           )}
         </ButtonGroup>
       </SimpleGrid>
-    </Box>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
index 05f8fc80aba..ec596d5759e 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
@@ -130,7 +130,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
   const { onCopy } = useClipboard(data.member);
 
   return (
-    <Box>
+    <div>
       <SimpleGrid
         columns={9}
         gap={2}
@@ -225,6 +225,6 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
           )}
         </Flex>
       </SimpleGrid>
-    </Box>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
index 754e20ff473..968b38575d0 100644
--- a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
@@ -1,6 +1,5 @@
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import {
-  Box,
   Flex,
   FormControl,
   Icon,
@@ -309,7 +308,7 @@ export const SettingsMetadata = ({
                 </FormControl>
               </Flex>
             ))}
-            <Box>
+            <div>
               <Button
                 isDisabled={metadata.isPending || sendTransaction.isPending}
                 type="button"
@@ -321,7 +320,7 @@ export const SettingsMetadata = ({
               >
                 Add URL
               </Button>
-            </Box>
+            </div>
           </Flex>
         </Flex>
 
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
index f071704489e..4203346121f 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
@@ -1,4 +1,4 @@
-import { Box, ButtonGroup, Flex } from "@chakra-ui/react";
+import { ButtonGroup, Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Card, Heading, LinkButton, Text } from "tw-components";
 import { TokenAirdropButton } from "./components/airdrop-button";
@@ -30,7 +30,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
           To enable Token features you will have to extend an ERC20 interface in
           your contract.
         </Text>
-        <Box>
+        <div>
           <LinkButton
             isExternal
             href="https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20"
@@ -38,7 +38,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
           >
             Learn more
           </LinkButton>
-        </Box>
+        </div>
       </Card>
     );
   }
diff --git a/apps/dashboard/src/core-ui/sidebar/detail-page.tsx b/apps/dashboard/src/core-ui/sidebar/detail-page.tsx
index 6f7c46db9c1..6e609e1c37c 100644
--- a/apps/dashboard/src/core-ui/sidebar/detail-page.tsx
+++ b/apps/dashboard/src/core-ui/sidebar/detail-page.tsx
@@ -136,18 +136,18 @@ const NavLinkSection: React.FC<NavLinkSectionProps> = ({
           <Flex gap={2} as="span">
             {link.title}
             {link.isBeta && (
-              <Box>
+              <div>
                 <Badge colorScheme="green" variant="subtle">
                   Beta
                 </Badge>
-              </Box>
+              </div>
             )}
             {link.isDeprecated && (
-              <Box>
+              <div>
                 <Badge colorScheme="orange" variant="subtle">
                   Deprecated
                 </Badge>
-              </Box>
+              </div>
             )}
           </Flex>
         </DetailNavLink>
diff --git a/apps/dashboard/src/pages/templates.tsx b/apps/dashboard/src/pages/templates.tsx
index 08f0545cf79..739c066acee 100644
--- a/apps/dashboard/src/pages/templates.tsx
+++ b/apps/dashboard/src/pages/templates.tsx
@@ -311,7 +311,7 @@ const TemplateCard: React.FC<TemplateCardProps> = ({
         py={{ base: 10 }}
         flexGrow={1}
       >
-        <Box>
+        <div>
           <Heading as="h2" fontSize="20px" mb={3}>
             <TrackedLink
               as={LinkOverlay}
@@ -364,7 +364,7 @@ const TemplateCard: React.FC<TemplateCardProps> = ({
           >
             {description}
           </Text>
-        </Box>
+        </div>
         <Flex
           direction="row"
           alignItems="center"