remove a bunch of <Flex>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx

@@ -1,5 +1,4 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Flex } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import { getContractFunctionsFromAbi } from "components/contract-components/getContractFunctionsFromAbi";
 import { ContractFunctionsOverview } from "components/contract-functions/contract-functions";
@@ -33,26 +32,24 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
 
   const functions = getContractFunctionsFromAbi(abi);
   return (
-    <Flex direction="column" h="70vh">
+    <div className="flex h-[70vh] flex-col">
       {functions && functions.length > 0 ? (
         <ContractFunctionsOverview
           onlyFunctions
           functions={functions}
           contract={contract}
         />
       ) : (
-        <div className="flex items-center justify-center">
-          <Flex direction="column" textAlign="center" gap={2}>
-            <h2 className="font-semibold text-2xl tracking-tight">
-              No callable functions discovered in ABI.
-            </h2>
-            <p className="text-muted-foreground text-sm">
-              Please note that proxy contracts are not yet supported in the
-              explorer, check back soon for full proxy support.
-            </p>
-          </Flex>
+        <div className="flex flex-col items-center justify-center gap-2 text-center">
+          <h2 className="font-semibold text-2xl tracking-tight">
+            No callable functions discovered in ABI.
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Please note that proxy contracts are not yet supported in the
+            explorer, check back soon for full proxy support.
+          </p>
         </div>
       )}
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx

@@ -8,7 +8,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { Flex } from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { UploadIcon } from "lucide-react";
@@ -114,44 +114,41 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
         })}
       >
         <div className="flex flex-col gap-2">
-          <div className="mb-3 flex w-full flex-col gap-6 md:flex-row">
-            <Flex direction={{ base: "column", md: "row" }} gap={4}>
-              <Sheet open={open} onOpenChange={setOpen}>
-                <SheetTrigger asChild>
-                  <Button variant="primary" className="gap-2">
-                    Upload addresses <UploadIcon className="size-4" />
-                  </Button>
-                </SheetTrigger>
-                <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
-                  <SheetHeader>
-                    <SheetTitle className="mb-5 text-left">
-                      Airdrop NFTs
-                    </SheetTitle>
-                  </SheetHeader>
-                  <AirdropUpload
-                    onClose={() => setOpen(false)}
-                    setAirdrop={(value) =>
-                      setValue("addresses", value, { shouldDirty: true })
-                    }
-                  />
-                </SheetContent>
-              </Sheet>
+          <div className="mb-3 flex w-full flex-col gap-4 md:flex-row">
+            <Sheet open={open} onOpenChange={setOpen}>
+              <SheetTrigger asChild>
+                <Button variant="primary" className="gap-2">
+                  Upload addresses <UploadIcon className="size-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+                <SheetHeader>
+                  <SheetTitle className="mb-5 text-left">
+                    Airdrop NFTs
+                  </SheetTitle>
+                </SheetHeader>
+                <AirdropUpload
+                  onClose={() => setOpen(false)}
+                  setAirdrop={(value) =>
+                    setValue("addresses", value, { shouldDirty: true })
+                  }
+                />
+              </SheetContent>
+            </Sheet>
 
-              <Flex
-                gap={2}
-                direction="row"
-                align="center"
-                justify="center"
-                color={addresses.length === 0 ? "orange.500" : "green.500"}
-              >
-                {addresses.length > 0 && (
-                  <p>
-                    ● <strong>{addresses.length} addresses</strong> ready to be
-                    airdropped
-                  </p>
-                )}
-              </Flex>
-            </Flex>
+            <div
+              className={cn("flex flex-row items-center justify-center gap-2", {
+                "text-orange-500": addresses.length === 0,
+                "text-green-500": addresses.length > 0,
+              })}
+            >
+              {addresses.length > 0 && (
+                <p>
+                  ● <strong>{addresses.length} addresses</strong> ready to be
+                  airdropped
+                </p>
+              )}
+            </div>
           </div>
           <p>
             You can airdrop to a maximum of 250 addresses at a time. If you have

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { Card, Text } from "tw-components";
 
 interface NftPropertyProps {
@@ -8,7 +7,7 @@ interface NftPropertyProps {
 
 export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
   return (
-    <Card as={Flex} flexDir="column" gap={2}>
+    <Card className="flex flex-col gap-2">
       {property?.trait_type && (
         <Text
           size="label.sm"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx

@@ -4,7 +4,6 @@ import {
   tokensDelegated,
   votingTokenDecimals,
 } from "@3rdweb-sdk/react/hooks/useVote";
-import { Flex } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { CheckIcon, MinusIcon, XIcon } from "lucide-react";
 import { useState } from "react";
@@ -81,22 +80,19 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
 
   return (
     <Card key={proposal.proposalId.toString()}>
-      <Flex mb="8px">
-        <Flex
-          paddingY="0px"
-          paddingX="16px"
-          borderRadius="25px"
-          bg={
+      <div
+        className="mb-2 rounded-md bg-gray-500 px-4 py-0"
+        style={{
+          background:
             ProposalStateToMetadataMap[
               proposal.stateLabel as keyof typeof VoteExt.ProposalState
-            ] || "gray.500"
-          }
-        >
-          <Text color="white">
-            {`${proposal.stateLabel?.charAt(0).toUpperCase()}${proposal.stateLabel?.slice(1)}`}
-          </Text>
-        </Flex>
-      </Flex>
+            ] || undefined,
+        }}
+      >
+        <Text color="white">
+          {`${proposal.stateLabel?.charAt(0).toUpperCase()}${proposal.stateLabel?.slice(1)}`}
+        </Text>
+      </div>
       <Text>
         <strong>Proposal:</strong> {proposal.description}
       </Text>
@@ -134,7 +130,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
       !hasVotedQuery.data &&
       !hasVotedQuery.isPending &&
       tokensDelegatedQuery.data ? (
-        <Flex mt="24px" gap={2}>
+        <div className="mt-6 flex gap-2">
           <TransactionButton
             txChainID={contract.chain.id}
             size="sm"
@@ -175,7 +171,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
               Abstain
             </div>
           </TransactionButton>
-        </Flex>
+        </div>
       ) : (
         canExecuteQuery.data && (
           <Button

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx

@@ -1,6 +1,4 @@
 "use client";
-
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Card, Heading, LinkButton, Text } from "tw-components";
 import { TokenAirdropButton } from "./components/airdrop-button";
@@ -25,7 +23,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
 }) => {
   if (!isERC20) {
     return (
-      <Card as={Flex} flexDir="column" gap={3}>
+      <Card className="flex flex-col gap-3">
         {/* TODO  extract this out into it's own component and make it better */}
         <Heading size="subtitle.md">No Token extension enabled</Heading>
         <Text>
@@ -46,7 +44,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
   }
 
   return (
-    <Flex direction="column" gap={6}>
+    <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <Heading size="title.sm">Contract Tokens</Heading>
         <div className="flex flex-col gap-3 md:flex-row">
@@ -59,6 +57,6 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
       </div>
 
       <TokenSupply contract={contract} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx

@@ -5,7 +5,6 @@ import {
   type EngineInstance,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex } from "@chakra-ui/react";
 import {
   EngineBackendWalletOptions,
   type EngineBackendWalletType,
@@ -42,8 +41,8 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
   const isGcpKmsConfigured = !!walletConfig?.gcpKmsKeyRingId;
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="column" gap={2}>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
         <Heading size="title.md">Backend Wallets</Heading>
         <p className="text-muted-foreground">
           Create backend wallets on the{" "}
@@ -55,7 +54,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
           </Link>{" "}
           tab. To use other wallet types, configure them below.
         </p>
-      </Flex>
+      </div>
 
       <TabButtons
         tabs={EngineBackendWalletOptions.map(({ key, name }) => ({
@@ -78,6 +77,6 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
       />
 
       {tabContent[activeTab]}
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx

@@ -6,7 +6,6 @@ import {
   useEngineQueueMetrics,
   useEngineSystemMetrics,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex } from "@chakra-ui/react";
 import { ChartAreaIcon, InfoIcon } from "lucide-react";
 import { Card, Heading, Text, TrackedLink } from "tw-components";
 import { ErrorRate } from "./ErrorRate";
@@ -30,12 +29,12 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
     systemMetricsPanel = (
       <Card p={8}>
         <div className="flex flex-col gap-4">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <InfoIcon className="size-4" />
             <Heading size="title.xs">
               System metrics are unavailable for self-hosted Engine.
             </Heading>
-          </Flex>
+          </div>
           <Text>
             Upgrade to a{" "}
             <TrackedLink
@@ -56,10 +55,10 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
     systemMetricsPanel = (
       <Card p={16}>
         <div className="flex flex-col gap-4">
-          <Flex gap={2} align="center" pb={-2}>
+          <div className="-mb-2 flex flex-row items-center gap-2">
             <ChartAreaIcon className="size-4" />
             <Heading size="title.md">System Metrics</Heading>
-          </Flex>
+          </div>
 
           <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             <Healthcheck instance={instance} />
@@ -95,9 +94,9 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
     queueMetricsPanel = (
       <Card p={8}>
         <div className="flex flex-col gap-6">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <Heading size="title.md">Queue Metrics</Heading>
-          </Flex>
+          </div>
 
           <div className="flex flex-col gap-6 lg:flex-row lg:gap-12">
             <div className="flex-col gap-y-4">

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEngineRelayer } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex } from "@chakra-ui/react";
 import { Heading, Link, Text } from "tw-components";
 import { AddRelayerButton } from "./add-relayer-button";
 import { RelayersTable } from "./relayers-table";
@@ -16,8 +15,8 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
   const relayers = useEngineRelayer(instanceUrl);
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="column" gap={2}>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
         <Heading size="title.md">Relayers</Heading>
         <Text>
           Use relayers to submit transactions from your backend wallets on
@@ -31,7 +30,7 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
           </Link>
           .
         </Text>
-      </Flex>
+      </div>
 
       <RelayersTable
         instanceUrl={instanceUrl}
@@ -40,6 +39,6 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
         isFetched={relayers.isFetched}
       />
       <AddRelayerButton instanceUrl={instanceUrl} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -28,12 +27,12 @@ export const ExternalLinksFieldset = () => {
   }, [fields, append]);
 
   return (
-    <Flex gap={8} direction="column" as="fieldset">
-      <Flex gap={2} direction="column">
+    <fieldset className="flex flex-col gap-8">
+      <div className="flex flex-col gap-2">
         <Heading size="title.md">Resources</Heading>
         <Text>Provide links to docs, usage guides etc. for the contract.</Text>
-      </Flex>
-      <Flex flexDir="column" gap={4}>
+      </div>
+      <div className="flex flex-col gap-4">
         {fields.map((item, index) => (
           <ExternalLinksInput key={item.id} remove={remove} index={index} />
         ))}
@@ -54,7 +53,7 @@ export const ExternalLinksFieldset = () => {
             Add Resource
           </Button>
         </div>
-      </Flex>
-    </Flex>
+      </div>
+    </fieldset>
   );
 };