[Dashboard] Remove chakra <Flex/ > (1) (#4697)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates various components to replace `<Flex>` with `<div>` for styling consistency.

### Detailed summary
- Replaces `<Flex>` with `<div>` in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx`, `apps/dashboard/src/pages/dashboard/settings/devices.tsx`, `apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx`, `apps/dashboard/src/components/dashboard/Changelog.tsx`, `apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx`

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

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx

@@ -2,7 +2,6 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex } from "@chakra-ui/react";
 import { ApplyForOpCreditsModal } from "components/onboarding/ApplyForOpCreditsModal";
 import { Heading, LinkButton } from "tw-components";
 
@@ -18,8 +17,8 @@ export const SettingsGasCreditsPage = () => {
   }
 
   return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="row" gap={4} align="center">
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-row gap-4 items-center">
         <Heading size="title.lg" as="h1">
           Apply to the Optimism Superchain App Accelerator
         </Heading>
@@ -32,9 +31,9 @@ export const SettingsGasCreditsPage = () => {
         >
           Learn More
         </LinkButton>
-      </Flex>
+      </div>
 
       <ApplyForOpCreditsModal />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx

@@ -2,7 +2,7 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
+import { HStack } from "@chakra-ui/react";
 import { BillingPeriod } from "components/settings/Account/Billing/Period";
 import { BillingPlan } from "components/settings/Account/Billing/Plan";
 import { Usage } from "components/settings/Account/Usage";
@@ -21,8 +21,8 @@ export const SettingsUsagePage = () => {
   }
 
   return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="column">
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col">
         <h1 className="font-semibold text-3xl tracking-tight mb-2">Usage</h1>
         <HStack
           justifyContent="space-between"
@@ -32,9 +32,9 @@ export const SettingsUsagePage = () => {
           <BillingPlan account={account} />
           <BillingPeriod account={account} usage={usageQuery.data} />
         </HStack>
-      </Flex>
+      </div>
 
       <Usage usage={usageQuery.data} usageLoading={usageQuery.isLoading} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/components/app-layouts/app.tsx

@@ -4,7 +4,7 @@ import {
   EVMContractInfoProvider,
 } from "@3rdweb-sdk/react";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { SimpleGrid } from "@chakra-ui/react";
 import {
   type DehydratedState,
   HydrationBoundary,
@@ -96,10 +96,10 @@ const SanctionedAddressesChecker: ComponentWithChildren = ({ children }) => {
         bg="black"
         zIndex="banner"
       >
-        <Flex gap={4} direction="column" align="center">
+        <div className="gap-4 flex flex-col items-center">
           <Heading as="p">Address is blocked</Heading>
           <CustomConnectWallet />
-        </Flex>
+        </div>
       </SimpleGrid>
     );
   }

apps/dashboard/src/components/community/PartnersSection.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 
 const partnersCompanies = [
@@ -46,13 +45,7 @@ const partnersCompanies = [
 
 const PartnersSection = () => {
   return (
-    <Flex
-      alignItems="center"
-      justifyContent="center"
-      flexWrap="wrap"
-      gap={10}
-      mt="24px"
-    >
+    <div className="items-center justify-center flex-wrap gap-10 mt-6 flex flex-row">
       {partnersCompanies.slice(0, 10).map((partner, idx) => (
         <ChakraNextImage
           // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
@@ -62,7 +55,7 @@ const PartnersSection = () => {
           alt="partner"
         />
       ))}
-    </Flex>
+    </div>
   );
 };
 

apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import type { SizeProp } from "chakra-react-select";
 import { useSupportedChains } from "hooks/chains/configureChains";
@@ -54,7 +53,7 @@ export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
   }, [form, options]);
 
   return (
-    <Flex gap={2} alignItems="center" w="full">
+    <div className="flex flex-row gap-2 items-center w-full">
       <Select
         size={size}
         placeholder={`${
@@ -106,6 +105,6 @@ export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
             : options.find(({ value: val }) => val === value)
         }
       />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/components/contract-components/contract-publish-form/abi-selector.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import { Select } from "chakra-react-select";
 import { useMemo } from "react";
@@ -27,7 +26,7 @@ export const AbiSelector: React.FC<AbiSelectorProps> = ({
   }, [abi]);
 
   return (
-    <Flex gap={2} alignItems="center" w="full">
+    <div className="flex flex-row gap-2 items-center w-full">
       <Select
         placeholder="Select function"
         options={options}
@@ -45,6 +44,6 @@ export const AbiSelector: React.FC<AbiSelectorProps> = ({
           }
         }}
       />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/components/contract-components/shared/sources-panel.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import { Link, Text } from "tw-components";
 import type { SourceFile } from "../types";
@@ -11,8 +10,8 @@ interface SourcesPanelProps {
 
 export const SourcesPanel: React.FC<SourcesPanelProps> = ({ sources, abi }) => {
   return (
-    <Flex flexDir="column" gap={8}>
-      <Flex flexDir="column" gap={4}>
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
         {sources && sources?.length > 0 ? (
           <SourcesAccordion sources={sources} abi={abi} />
         ) : (
@@ -27,7 +26,7 @@ export const SourcesPanel: React.FC<SourcesPanelProps> = ({ sources, abi }) => {
             </Link>
           </Text>
         )}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 };

apps/dashboard/src/components/dashboard/Changelog.tsx

@@ -1,5 +1,4 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import { Flex } from "@chakra-ui/react";
 import { formatDistance } from "date-fns/formatDistance";
 import { ArrowRightIcon } from "lucide-react";
 import { Link } from "tw-components";
@@ -17,17 +16,12 @@ interface ChangelogProps {
 
 export const Changelog: React.FC<ChangelogProps> = ({ changelog }) => {
   return (
-    <Flex
-      flexDir="column"
-      gap={6}
-      position="relative"
-      className="border-l border-border py-2"
-    >
+    <div className="border-l border-border py-2 flex flex-col gap-6 relative">
       {changelog.map((item) => (
-        <Flex key={item.title} gap={4}>
+        <div className="flex flex-row gap-4" key={item.title}>
           <div className="size-2.5 bg-border rounded-full shrink-0 -translate-x-1/2 translate-y-1/2" />
 
-          <Flex flexDir="column">
+          <div className="flex flex-col">
             <Link
               isExternal
               href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
@@ -43,8 +37,8 @@ export const Changelog: React.FC<ChangelogProps> = ({ changelog }) => {
                 })}
               </ClientOnly>
             </div>
-          </Flex>
-        </Flex>
+          </div>
+        </div>
       ))}
       <Link
         href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
@@ -53,6 +47,6 @@ export const Changelog: React.FC<ChangelogProps> = ({ changelog }) => {
       >
         View More <ArrowRightIcon className="size-4" />
       </Link>
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signers.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { getAllActiveSigners, getAllAdmins } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
@@ -30,10 +29,10 @@ export const AccountSigners: React.FC<AccountSignersProps> = ({ contract }) => {
   );
   const data = transformedAdmins.concat(transformedSigners || []);
   return (
-    <Flex direction="column" gap={6}>
+    <div className="flex flex-col gap-6">
       {data.map((item) => (
         <AccountSigner key={item.signer} item={item} />
       ))}
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/account-permissions/page.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
 import { AccountSigners } from "./components/account-signers";
@@ -11,11 +10,11 @@ export const AccountPermissionsPage: React.FC<AccountPermissionsPageProps> = ({
   contract,
 }) => {
   return (
-    <Flex direction="column" gap={6}>
-      <Flex direction="row" justify="space-between" align="center">
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-row justify-between items-center">
         <Heading size="title.sm">Account Signers</Heading>
-      </Flex>
+      </div>
       <AccountSigners contract={contract} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/claim-conditions/components/price-preview.tsx

@@ -1,5 +1,4 @@
 import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
-import { Flex } from "@chakra-ui/react";
 import { CURRENCIES } from "constants/currencies";
 import { useSupportedChainsRecord } from "hooks/chains/configureChains";
 import { Text } from "tw-components";
@@ -27,7 +26,7 @@ export const PricePreview: React.FC<PricePreviewProps> = ({
   );
 
   return (
-    <Flex direction="column">
+    <div className="flex flex-col">
       <Text fontWeight="bold">Default price</Text>
       {Number(price) === 0 ? (
         <Text>Free</Text>
@@ -41,6 +40,6 @@ export const PricePreview: React.FC<PricePreviewProps> = ({
               : `(${shortenIfAddress(currencyAddress)})`}
         </Text>
       )}
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/claim-conditions/page.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { ClaimConditions } from "./components/claim-conditions";
 
@@ -11,8 +10,8 @@ export const ContractClaimConditionsPage: React.FC<
   ContractClaimConditionsPageProps
 > = ({ contract, isERC20 }) => {
   return (
-    <Flex direction="column" gap={6}>
+    <div className="flex flex-col gap-6">
       <ClaimConditions contract={contract} isERC20={isERC20} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/code/page.tsx

@@ -2,7 +2,6 @@
 
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { CodeOverview } from "./components/code-overview";
 
@@ -25,8 +24,8 @@ export const ContractCodePage: React.FC<ContractCodePageProps> = ({
   }
 
   return (
-    <Flex direction="column" gap={6}>
+    <div className="flex flex-col gap-6">
       <CodeOverview abi={abiQuery.data} contractAddress={contract.address} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/direct-listings/page.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
 import { CreateListingButton } from "../shared-components/list-button";
@@ -12,19 +11,19 @@ export const ContractDirectListingsPage: React.FC<
   ContractDirectListingsPageProps
 > = ({ contract }) => {
   return (
-    <Flex direction="column" gap={6}>
-      <Flex direction="row" justify="space-between" align="center">
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-row justify-between items-center">
         <Heading size="title.sm">Contract Listings</Heading>
-        <Flex gap={4}>
+        <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}
             type="direct-listings"
             createText="Create Direct Listing"
           />
-        </Flex>
-      </Flex>
+        </div>
+      </div>
 
       <DirectListingsTable contract={contract} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/embed/page.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { EmbedSetup } from "./components/embed-setup";
 
@@ -18,10 +17,10 @@ export const ContractEmbedPage: React.FC<ContractEmbedPageProps> = ({
   ercOrMarketplace,
 }) => {
   return (
-    <Flex direction="column" gap={6}>
+    <div className="flex flex-col gap-6">
       {ercOrMarketplace && (
         <EmbedSetup contract={contract} ercOrMarketplace={ercOrMarketplace} />
       )}
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/english-auctions/page.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
 import { CreateListingButton } from "../shared-components/list-button";
@@ -12,19 +11,19 @@ export const ContractEnglishAuctionsPage: React.FC<
   ContractEnglishAuctionsProps
 > = ({ contract }) => {
   return (
-    <Flex direction="column" gap={6}>
-      <Flex direction="row" justify="space-between" align="center">
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-row justify-between items-center">
         <Heading size="title.sm">Contract Auctions</Heading>
-        <Flex gap={4}>
+        <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}
             type="english-auctions"
             createText="Create English Auction"
           />
-        </Flex>
-      </Flex>
+        </div>
+      </div>
 
       <EnglishAuctionsTable contract={contract} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/overview/components/TokenDetails.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { TokenSupply } from "contract-ui/tabs/tokens/components/supply";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
@@ -9,11 +8,11 @@ interface TokenDetailsProps {
 
 export const TokenDetails: React.FC<TokenDetailsProps> = ({ contract }) => {
   return (
-    <Flex direction="column" gap={6}>
-      <Flex align="center" justify="space-between" w="full">
+    <div className="flex flex-col gap-6">
+      <div className="items-center justify-between w-full flex flex-row">
         <Heading size="title.sm">Token Details</Heading>
-      </Flex>
+      </div>
       <TokenSupply contract={contract} />
-    </Flex>
+    </div>
   );
 };

apps/dashboard/src/pages/chain/validate.tsx

@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
 import ChainValidation from "components/chain-validation";
 import { NextSeo } from "next-seo";
@@ -15,8 +14,8 @@ const ValidateChainPage: ThirdwebNextPage = () => {
         noindex
         nofollow
       />
-      <Flex direction="column" gap={8}>
-        <Flex flexDir="column" gap={2}>
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-2">
           <Heading as="h1">Validate Chain</Heading>
           <Text>
             Validate a given chain is compatible with{" "}
@@ -25,10 +24,10 @@ const ValidateChainPage: ThirdwebNextPage = () => {
             </Link>
             .
           </Text>
-        </Flex>
+        </div>
 
         <ChainValidation />
-      </Flex>
+      </div>
     </>
   );
 };

apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx

@@ -4,7 +4,6 @@ import {
   useAccount,
   useApiKeys,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
 import { ApiKeys } from "components/settings/ApiKeys";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
@@ -38,25 +37,21 @@ const SettingsApiKeysPage: ThirdwebNextPage = () => {
   }, [apiKeys, account]);
 
   return (
-    <Flex flexDir="column" gap={8}>
+    <div className="flex flex-col gap-8">
       <LazyCreateAPIKeyDialog
         open={isCreateModalOpen}
         onOpenChange={setIsCreateModalOpen}
         wording="api-key"
       />
 
-      <Flex direction="column" gap={2}>
-        <Flex
-          justifyContent="space-between"
-          direction={{ base: "column", md: "row" }}
-          gap={4}
-        >
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col md:flex-row gap-4 justify-between">
           <h1 className="text-3xl font-semibold tracking-tight">API Keys</h1>
           <Button onClick={() => setIsCreateModalOpen(true)} className="gap-2">
             <PlusIcon className="size-4" />
             Create API Key
           </Button>
-        </Flex>
+        </div>
 
         <p className="text-muted-foreground text-sm">
           An API key is required to use thirdweb&apos;s services through the SDK
@@ -70,7 +65,7 @@ const SettingsApiKeysPage: ThirdwebNextPage = () => {
             Learn more
           </Link>
         </p>
-      </Flex>
+      </div>
 
       {hasSmartWalletsWithoutBilling && (
         <SmartWalletsBillingAlert dismissable />
@@ -81,7 +76,7 @@ const SettingsApiKeysPage: ThirdwebNextPage = () => {
         isLoading={keysQuery.isLoading}
         isFetched={keysQuery.isFetched}
       />
-    </Flex>
+    </div>
   );
 };
 

apps/dashboard/src/pages/dashboard/settings/devices.tsx

@@ -1,5 +1,4 @@
 import { useAuthorizedWallets } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
 import { AuthorizedWalletsTable } from "components/settings/AuthorizedWallets/AuthorizedWalletsTable";
 import { SettingsSidebarLayout } from "core-ui/sidebar/settings";
@@ -11,14 +10,9 @@ const SettingsDevicesPage: ThirdwebNextPage = () => {
   const authorizedWalletsQuery = useAuthorizedWallets();
 
   return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="column" gap={2}>
-        <Flex
-          justifyContent="space-between"
-          direction={{ base: "column", md: "row" }}
-          gap={4}
-          flexDirection="column"
-        >
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4 justify-between">
           <Heading size="title.lg" as="h1">
             Authorized Devices
           </Heading>
@@ -31,9 +25,9 @@ const SettingsDevicesPage: ThirdwebNextPage = () => {
             isLoading={authorizedWalletsQuery.isLoading}
             isFetched={authorizedWalletsQuery.isFetched}
           />
-        </Flex>
-      </Flex>
-    </Flex>
+        </div>
+      </div>
+    </div>
   );
 };
 

apps/dashboard/src/utils/errorParser.tsx

@@ -1,11 +1,11 @@
-import { Flex, Link } from "@chakra-ui/react";
+import Link from "next/link";
 import posthog from "posthog-js";
 import { Text } from "tw-components";
 
 const PLEASE_REACH_OUT_MESSAGE = (
   <Text as="span" color="inherit">
     If you believe this is incorrect or the error persists, please visit our{" "}
-    <Link fontWeight="700" href="/support" isExternal textDecor="underline">
+    <Link className="underline font-bold" target="_blank" href="/support">
       support site
     </Link>
     .
@@ -18,14 +18,14 @@ export function parseErrorToMessage(error: unknown): string | JSX.Element {
   const message = parseError(error);
 
   return (
-    <Flex gap={4} flexDir="column">
+    <div className="flex flex-col gap-4">
       <Text as="span" color="inherit" noOfLines={3}>
         {message}
       </Text>
       <Text fontStyle="italic" as="span" color="inherit">
         {PLEASE_REACH_OUT_MESSAGE}
       </Text>
-    </Flex>
+    </div>
   );
 }