Remove <Box/> easy mode

Author: kien-ngo

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}>

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>
   );

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

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>
   );
 };

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>
   );

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>

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>
   );

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">

apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx

@@ -274,15 +274,15 @@ 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
                   applies for the duration of the billing period (monthly). Once
                   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,15 +444,15 @@ 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>
                 <Text>
                   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"

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">