[Dashboard] Remove <Stack/> (3) (#4831)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing instances of the `Stack` component from Chakra UI with `div` elements styled using Tailwind CSS classes. This change aims to improve layout consistency across various components in the application.

### Detailed summary
- Replaced `<Stack>` with `<div className="flex ...">` in multiple components for layout consistency.
- Adjusted spacing and alignment properties to match previous `Stack` behavior.
- Updated components in `airdrop-tab.tsx`, `select-option.tsx`, `airdrop-upload.tsx`, and others.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Icon, Stack } from "@chakra-ui/react";
+import { ButtonGroup, Flex, Icon } from "@chakra-ui/react";
 import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon";
 import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
@@ -88,7 +88,7 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
   );
 
   return (
-    <Stack spacing={2}>
+    <div className="flex flex-col gap-2">
       {!hideTabs && (
         <Flex justify="space-between" align="flex-end">
           <Flex direction="column" gap={4}>
@@ -133,7 +133,7 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
           />
         </>
       )}
-    </Stack>
+    </div>
   );
 };
 

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

@@ -23,7 +23,6 @@ import {
   Radio,
   RadioGroup,
   Spinner,
-  Stack,
   type UseDisclosureReturn,
   useDisclosure,
 } from "@chakra-ui/react";
@@ -537,7 +536,7 @@ const FilterSelector = ({
           Cannot resolve the contract definition. Filters are unavailable.
         </Text>
       ) : (
-        <Stack maxH={300} overflowY="auto">
+        <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
           <CheckboxGroup
             value={filter}
             onChange={(selected: string[]) => setFilter(selected)}
@@ -548,7 +547,7 @@ const FilterSelector = ({
               </Checkbox>
             ))}
           </CheckboxGroup>
-        </Stack>
+        </div>
       )}
     </Card>
   );

apps/dashboard/src/components/logo/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { Stack, VisuallyHidden } from "@chakra-ui/react";
+import { VisuallyHidden } from "@chakra-ui/react";
 
 export const IconLogo: React.FC<{ extraClass?: string; color?: string }> = ({
   color,
@@ -95,7 +95,7 @@ export const Logo: React.FC<ILogoProps> = ({
   color = "var(--chakra-colors-wordmark)",
 }) => {
   return (
-    <Stack as="h2" align="center" direction="row">
+    <h2 className="flex flex-row items-center gap-2">
       {hideIcon ?? <IconLogo extraClass="w-9 md:w-10 flex-shrink-0" />}
       {(hideWordmark && !forceShowWordMark) ?? (
         <div
@@ -117,6 +117,6 @@ export const Logo: React.FC<ILogoProps> = ({
         </div>
       )}
       <VisuallyHidden>thirdweb</VisuallyHidden>
-    </Stack>
+    </h2>
   );
 };

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

@@ -1,4 +1,4 @@
-import { Box, Stack } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -21,7 +21,7 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
       pointerEvents={comingSoon ? "none" : "auto"}
     >
       <Box _hover={{ bg: "whiteAlpha.50" }} p="8px" borderRadius="md">
-        <Stack direction="row" align="center" spacing={4}>
+        <div className="flex flex-row items-center gap-4">
           {icon && (
             <ChakraNextImage boxSize={7} mb="-4px" src={icon} alt="icon" />
           )}
@@ -34,7 +34,7 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
             </Text>
             <Text color="whiteAlpha.500">{description}</Text>
           </div>
-        </Stack>
+        </div>
       </Box>
     </TrackedLink>
   );

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

@@ -1,4 +1,4 @@
-import { Box, Stack } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import type { StaticImageData } from "next/image";
 import { Text } from "tw-components";
 
@@ -24,7 +24,7 @@ export const ProductNavCard: React.FC<ProductSectionItemProps> = ({
       p={6}
       cursor="default"
     >
-      <Stack direction="row" align="center" spacing={3}>
+      <div className="flex flex-row items-center gap-3">
         <div className="flex flex-col">
           <Text
             fontWeight="bold"
@@ -34,7 +34,7 @@ export const ProductNavCard: React.FC<ProductSectionItemProps> = ({
           </Text>
           <Text color="whiteAlpha.500">{description}</Text>
         </div>
-      </Stack>
+      </div>
     </Box>
   );
 };

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

@@ -17,7 +17,6 @@ import {
   IconButton,
   Input,
   Select,
-  Stack,
   Switch,
   Textarea,
 } from "@chakra-ui/react";
@@ -577,7 +576,7 @@ export function AccountAbstractionSettingsPage(
                 </FormControl>
                 <FormControl>
                   <FormLabel size="label.sm">Custom Headers</FormLabel>
-                  <Stack gap={3} alignItems="end">
+                  <div className="flex flex-col items-end gap-3">
                     {customHeaderFields.fields.map((_, customHeaderIdx) => {
                       return (
                         // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
@@ -621,7 +620,7 @@ export function AccountAbstractionSettingsPage(
                     >
                       Add header
                     </Button>
-                  </Stack>
+                  </div>
                 </FormControl>
               </div>
             )}

apps/dashboard/src/contract-ui/tabs/listings/components/listing-stats.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, Stack, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAuctions, totalListings } from "thirdweb/extensions/marketplace";
@@ -79,12 +79,12 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
   hasEnglishAuctions,
 }) => {
   return (
-    <Stack spacing={{ base: 3, md: 6 }} direction="row">
+    <div className="flex flex-row gap-3 md:gap-6">
       {hasDirectListings && hasEnglishAuctions && contract && (
         <TotalListingsStat contract={contract} />
       )}
       {hasDirectListings && <DirectListingsStat contract={contract} />}
       {hasEnglishAuctions && <EnglishAuctionsStat contract={contract} />}
-    </Stack>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx

@@ -47,7 +47,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
   const addresses = watch("addresses");
 
   return (
-    <Stack w="full">
+    <div className="flex w-full flex-col gap-2">
       <form
         onSubmit={handleSubmit(async (_data) => {
           trackEvent({
@@ -169,7 +169,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
           </TransactionButton>
         </div>
       </form>
-    </Stack>
+    </div>
   );
 };
 export default AirdropTab;

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx

@@ -10,7 +10,6 @@ import {
   ListItem,
   Portal,
   Select,
-  Stack,
   Table,
   TableContainer,
   Tbody,
@@ -342,12 +341,12 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
                     : "Address couldn't be resolved"
                 }
               >
-                <Stack direction="row" align="center">
+                <div className="flex flex-row items-center gap-2">
                   <Icon as={IoAlertCircleOutline} color="red.500" boxSize={5} />
                   <Text fontWeight="bold" color="red.500" cursor="default">
                     {address}
                   </Text>
-                </Stack>
+                </div>
               </Tooltip>
             </div>
           );

apps/dashboard/src/contract-ui/tabs/nfts/components/burn-tab.tsx

@@ -1,4 +1,4 @@
-import { FormControl, Input, Stack } from "@chakra-ui/react";
+import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -52,7 +52,7 @@ const BurnTab: React.FC<BurnTabProps> = ({ contract, tokenId }) => {
   const { mutate, isPending } = useSendAndConfirmTransaction();
 
   return (
-    <Stack w="full">
+    <div className="flex w-full flex-col gap-2">
       <form
         onSubmit={handleSubmit((data) => {
           trackEvent({
@@ -96,13 +96,9 @@ const BurnTab: React.FC<BurnTabProps> = ({ contract, tokenId }) => {
           });
         })}
       >
-        <Stack gap={3}>
+        <div className="flex flex-col gap-3">
           {isErc1155 && (
-            <Stack
-              spacing={6}
-              w="100%"
-              direction={{ base: "column", md: "row" }}
-            >
+            <div className="flex w-full flex-col gap-6 md:flex-row">
               <FormControl isRequired={isErc1155} isInvalid={!!errors.amount}>
                 <FormLabel>Amount</FormLabel>
                 <Input placeholder="1" {...register("amount")} />
@@ -111,7 +107,7 @@ const BurnTab: React.FC<BurnTabProps> = ({ contract, tokenId }) => {
                 </FormHelperText>
                 <FormErrorMessage>{errors.amount?.message}</FormErrorMessage>
               </FormControl>
-            </Stack>
+            </div>
           )}
           {isErc721 && (
             <Text>
@@ -140,9 +136,9 @@ const BurnTab: React.FC<BurnTabProps> = ({ contract, tokenId }) => {
           >
             Burn
           </TransactionButton>
-        </Stack>
+        </div>
       </form>
-    </Stack>
+    </div>
   );
 };