[Dashboard] Remove default <Stack /> (#4828)

@MananTank here's the source code: https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/components/stack/stack.tsx

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing `Stack` components with `div` elements styled with `flex` and `gap` classes across various files for a more consistent layout approach in the UI.

### Detailed summary
- Replaced `Stack` with `div className="flex flex-col gap-2"` in multiple components.
- Updated layout in `airdrop-tab.tsx`, `mint-form.tsx`, `lazy-mint-form.tsx`, `split/page.tsx`, `shared-metadata-form.tsx`, `update-metadata-form.tsx`, `transaction-timeline.tsx`, `NewsletterSection.tsx`, and more.
- Enhanced UI consistency and responsiveness.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/.eslintrc.js

@@ -60,6 +60,7 @@ module.exports = {
               "AspectRatio",
               "useToast",
               "useClipboard",
+              "Badge",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -71,6 +72,7 @@ module.exports = {
               "MenuGroupProps",
               "MenuItemProps",
               "AspectRatioProps",
+              "BadgeProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

apps/dashboard/src/components/contract-components/published-contract/addresses-modal.tsx

@@ -29,7 +29,6 @@ import {
   usePublishedContractFunctions,
 } from "../hooks";
 import { PublisherHeader } from "../publisher/publisher-header";
-import { AddressesModal } from "./addresses-modal";
 import { MarkdownRenderer } from "./markdown-renderer";
 
 interface ExtendedPublishedContract extends PublishedContractWithVersion {
@@ -235,23 +234,6 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
                             : "Proxy"}{" "}
                           Enabled
                         </Heading>
-                        {implementationAddresses &&
-                        hasImplementationAddresses ? (
-                          <AddressesModal
-                            chainAddressRecord={implementationAddresses}
-                            buttonTitle="Implementations"
-                            modalTitle="Implementation Addresses"
-                          />
-                        ) : null}
-                        {factoryAddresses &&
-                        hasFactoryAddresses &&
-                        publishedContract?.isDeployableViaFactory ? (
-                          <AddressesModal
-                            chainAddressRecord={factoryAddresses}
-                            buttonTitle="Factories"
-                            modalTitle="Factory Addresses"
-                          />
-                        ) : null}
                       </Flex>
                     </Flex>
                   </ListItem>

apps/dashboard/src/components/contract-components/published-contract/index.tsx

@@ -316,7 +316,7 @@ const ModalBodyInputData = ({
           <FormControl>
             <FormLabel>Processed Data</FormLabel>
 
-            <Stack>
+            <div className="flex flex-col gap-2">
               <Checkbox
                 {...form.register("processEventLogs")}
                 checked={form.getValues("processEventLogs")}
@@ -346,7 +346,7 @@ const ModalBodyInputData = ({
                       }
                     }}
                   >
-                    <Stack>
+                    <div className="flex flex-col gap-2">
                       <Radio value="false">
                         <Text>All events</Text>
                       </Radio>
@@ -368,7 +368,7 @@ const ModalBodyInputData = ({
                           }
                         />
                       </Collapse>
-                    </Stack>
+                    </div>
                   </RadioGroup>
                 </Stack>
               </Collapse>
@@ -402,7 +402,7 @@ const ModalBodyInputData = ({
                       }
                     }}
                   >
-                    <Stack>
+                    <div className="flex flex-col gap-2">
                       <Radio value="false">
                         <Text>All functions</Text>
                       </Radio>
@@ -424,11 +424,11 @@ const ModalBodyInputData = ({
                           }
                         />
                       </Collapse>
-                    </Stack>
+                    </div>
                   </RadioGroup>
                 </Stack>
               </Collapse>
-            </Stack>
+            </div>
           </FormControl>
         </Stack>
       </ModalBody>

apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx

@@ -21,7 +21,7 @@ import {
   useEngineRemoveCloudHosted,
   useEngineRemoveFromDashboard,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { FormControl, Radio, RadioGroup, Stack } from "@chakra-ui/react";
+import { FormControl, Radio, RadioGroup } from "@chakra-ui/react";
 import { DialogDescription } from "@radix-ui/react-dialog";
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
@@ -440,7 +440,7 @@ function CancelSubscriptionModalContent(props: {
             Please share any feedback to help us improve
           </FormLabel>
           <RadioGroup>
-            <Stack>
+            <div className="flex flex-col gap-2">
               <Radio
                 value="USING_SELF_HOSTED"
                 {...form.register("reason", { required: true })}
@@ -465,7 +465,7 @@ function CancelSubscriptionModalContent(props: {
               >
                 <span className="text-sm"> Other </span>
               </Radio>
-            </Stack>
+            </div>
           </RadioGroup>
         </FormControl>
 

apps/dashboard/src/components/engine/engine-instances-table.tsx

@@ -137,14 +137,14 @@ export const TransactionTimeline = ({
               <StepStatus complete={<FiCheck />} active={<FiCheck />} />
             </StepIndicator>
             <Flex justify="space-between" w="full" mt={-1}>
-              <Stack>
+              <div className="flex flex-col gap-2">
                 {isFilled ? (
                   <Text>{step.step}</Text>
                 ) : (
                   <Text color="gray.600">{step.step}</Text>
                 )}
                 {step.cta}
-              </Stack>
+              </div>
               {step.date && (
                 <Text fontSize="small">
                   {prettyPrintTimestamp(step.date, index === 0)}

apps/dashboard/src/components/engine/overview/transaction-timeline.tsx

@@ -15,7 +15,6 @@ import {
   ModalHeader,
   ModalOverlay,
   Select,
-  Stack,
   Textarea,
   useDisclosure,
 } from "@chakra-ui/react";
@@ -129,7 +128,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
           <ModalHeader>Add Public Key</ModalHeader>
           <ModalBody as={Flex} flexDir="column" gap={8}>
             <FormControl>
-              <Stack>
+              <div className="flex flex-col gap-2">
                 <div className="flex flex-row gap-2">
                   <Text>Create a private key using:</Text>
                   <Select
@@ -179,7 +178,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
                   code="cat public.key"
                   language="solidity"
                 />
-              </Stack>
+              </div>
             </FormControl>
 
             <FormControl isRequired>
@@ -206,14 +205,14 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
             </FormControl>
 
             <Alert variant="left-accent">
-              <Stack>
+              <div className="flex flex-col gap-2">
                 <Text>
                   <strong>Keep your private key secure!</strong>
                   <br />
                   Your backend will sign access tokens with this private key
                   which Engine verifies with this public key.
                 </Text>
-              </Stack>
+              </div>
             </Alert>
           </ModalBody>
 

apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx

@@ -49,15 +49,15 @@ export const NewsletterSection = () => {
         >
           <Stack direction="row" spacing={5} align="center">
             <Icon boxSize={8} color="white" as={MdMarkEmailRead} />
-            <Stack>
+            <div className="flex flex-col gap-2">
               <Text color="white" size="label.lg">
                 Sign up for our newsletter
               </Text>
               <Text>
                 Join 70,000+ builders and stay up to date with our latest
                 updates and news.
               </Text>
-            </Stack>
+            </div>
           </Stack>
 
           <form onSubmit={(e) => e.preventDefault()}>

apps/dashboard/src/components/homepage/sections/NewsletterSection.tsx

@@ -1,4 +1,4 @@
-import { Box, Fade, SimpleGrid, Stack, useDisclosure } from "@chakra-ui/react";
+import { Box, Fade, SimpleGrid, useDisclosure } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { Card, Text } from "tw-components";
 import { NavCard } from "./NavCard";
@@ -76,14 +76,12 @@ export const HoverMenu: React.FC<HoverMenuProps> = ({
             borderRadius="8px"
             width={width}
           >
-            <div className="flex flex-row">
-              <Stack>
-                <SimpleGrid columns={columns} gap={2}>
-                  {items.map((item) => (
-                    <NavCard key={item.label} {...item} />
-                  ))}
-                </SimpleGrid>
-              </Stack>
+            <div className="flex flex-col gap-2">
+              <SimpleGrid columns={columns} gap={2}>
+                {items.map((item) => (
+                  <NavCard key={item.label} {...item} />
+                ))}
+              </SimpleGrid>
             </div>
           </Card>
         </Fade>

apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx

@@ -109,7 +109,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
           });
         })}
       >
-        <Stack>
+        <div className="flex flex-col gap-2">
           <Stack
             spacing={6}
             w="100%"
@@ -167,7 +167,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
           >
             Airdrop
           </TransactionButton>
-        </Stack>
+        </div>
       </form>
     </Stack>
   );