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

kien-ngo · kien-ngo · commit 63ceb2874ccc · 2024-09-27T16:08:38.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## 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 `&lt;Stack&gt;` with `&lt;div className="flex ..."&gt;` 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.

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

&lt;!-- end pr-codex --&gt;
diff --git a/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx b/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>
   );
 };
 
diff --git a/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx b/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>
   );
diff --git a/apps/dashboard/src/components/logo/index.tsx b/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>
   );
 };
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx b/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>
   );
diff --git a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx b/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>
   );
 };
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/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>
             )}
diff --git a/apps/dashboard/src/contract-ui/tabs/listings/components/listing-stats.tsx b/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>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx b/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;
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx b/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>
           );
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/burn-tab.tsx b/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>
   );
 };
 
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
@@ -4,7 +4,6 @@ import {
   Icon,
   List,
   SimpleGrid,
-  Stack,
   Tag,
   Tooltip,
 } from "@chakra-ui/react";
@@ -166,7 +165,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
         _last={{ borderBottomWidth: 0 }}
       >
         <Box gridColumn="span 2">
-          <Stack direction="row" align="center" spacing={3}>
+          <div className="flex flex-row items-center gap-3">
             <Tooltip
               p={0}
               bg="transparent"
@@ -191,7 +190,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
             <Text fontFamily="mono" noOfLines={1}>
               {shortenIfAddress(data.member)}
             </Text>
-          </Stack>
+          </div>
         </Box>
 
         <Box gridColumn="span 1" />
diff --git a/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx b/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
@@ -1,5 +1,5 @@
 import { useIsAdmin } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import { Flex, Icon, Select, Spinner, Stack } from "@chakra-ui/react";
+import { Flex, Icon, Select, Spinner } from "@chakra-ui/react";
 import { useFormContext } from "react-hook-form";
 import { FiInfo } from "react-icons/fi";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
@@ -35,14 +35,14 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
   return (
     <Card position="relative">
       <Flex direction="column" gap={3}>
-        <Stack spacing={2} mb="12px">
+        <div className="mb-3 flex flex-col gap-2">
           <div className="flex flex-row">
-            <Stack spacing={1} flexGrow={1}>
+            <div className="flex grow flex-col gap-1">
               <Heading size="subtitle.sm" textTransform="capitalize">
                 {role === "minter" ? "Minter / Creator" : role}
               </Heading>
               <Text>{description}</Text>
-            </Stack>
+            </div>
 
             {role === "transfer" && (
               <Flex align="center" justify="center" flexGrow={0} flexShrink={0}>
@@ -267,7 +267,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
             isRestricted &&
             role && <PermissionEditor role={role} contract={contract} />
           )}
-        </Stack>
+        </div>
       </Flex>
     </Card>
   );
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/burn-button.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/burn-button.tsx
@@ -6,7 +6,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-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 { Flame } from "lucide-react";
@@ -69,8 +69,8 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
         <SheetHeader>
           <SheetTitle>Burn tokens</SheetTitle>
         </SheetHeader>
-        <Stack gap={3} as="form" mt={10}>
-          <Stack spacing={6} w="100%" direction={{ base: "column", md: "row" }}>
+        <form className="mt-10 flex flex-col gap-3">
+          <div className="flex w-full flex-col gap-6 md:flex-row">
             <FormControl isRequired isInvalid={!!form.formState.errors.amount}>
               <FormLabel>Amount</FormLabel>
               <Input
@@ -83,14 +83,14 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
                 {form.formState.errors.amount?.message}
               </FormErrorMessage>
             </FormControl>
-          </Stack>
+          </div>
           <Text>
             Burning these{" "}
             {`${Number.parseInt(form.watch("amount")) > 1 ? form.watch("amount") : ""} `}
             tokens will remove them from the total circulating supply. This
             action is irreversible.
           </Text>
-        </Stack>
+        </form>
         <SheetFooter className="mt-10">
           <TransactionButton
             transactionCount={1}
diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -50,7 +50,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
         {...stackProps}
       >
         <Flex flexDirection="row" justifyContent="space-between">
-          <Stack flexDirection="row" alignItems="start" spacing={0}>
+          <div className="flex flex-row items-start gap-0">
             <Radio
               cursor="pointer"
               size="lg"
@@ -75,7 +75,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 </Text>
               )}
             </Stack>
-          </Stack>
+          </div>
           {infoText && (
             <div className="flex flex-row">
               <Tooltip
