[Dashboard] migrate Box to shadcn

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -1,10 +1,10 @@
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
 import {
-  Box,
   Flex,
   FormControl,
   Input,
@@ -539,27 +539,36 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                         </Card>
                       }
                     >
-                      <Box
-                        borderRadius="lg"
-                        cursor="pointer"
+                      <div
+                        className={cn(
+                          "cursor-pointer overflow-hidden rounded-lg",
+                          isSelected(nft) &&
+                            "outline outline-3 outline-purple-500",
+                        )}
                         onClick={() =>
                           isSelected(nft)
                             ? form.setValue("selected", undefined)
                             : form.setValue("selected", nft)
                         }
-                        outline={isSelected(nft) ? "3px solid" : undefined}
-                        outlineColor={
-                          isSelected(nft) ? "purple.500" : undefined
-                        }
-                        overflow="hidden"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            isSelected(nft)
+                              ? form.setValue("selected", undefined)
+                              : form.setValue("selected", nft);
+                          }
+                        }}
+                        tabIndex={0}
+                        role="button"
+                        aria-pressed={isSelected(nft)}
                       >
                         <NFTMediaWithEmptyState
                           metadata={nft.metadata}
                           width="140px"
                           height="140px"
                           requireInteraction
                         />
-                      </Box>
+                      </div>
                     </Tooltip>
                   );
                 })}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx

@@ -1,4 +1,5 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
+import { Flex } from "@chakra-ui/react";
 import { CurrencySelector } from "components/shared/CurrencySelector";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { useClaimConditionsFormContext } from "..";
@@ -36,14 +37,14 @@ export const ClaimPriceInput = (props: {
       }
     >
       <Flex gap={2} flexDir={{ base: "column", md: "row" }}>
-        <Box w={{ base: "100%", md: "50%" }} minW="70px">
+        <div className="w-full min-w-[70px] md:w-1/2">
           <PriceInput
             w="full"
             value={field.price?.toString() || ""}
             onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
           />
-        </Box>
-        <Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
+        </div>
+        <div className={cn("w-full", isColumn ? "md:w-1/2" : "md:w-full")}>
           <CurrencySelector
             contractChainId={props.contractChainId}
             isDisabled={formDisabled}
@@ -55,7 +56,7 @@ export const ClaimPriceInput = (props: {
               )
             }
           />
-        </Box>
+        </div>
       </Flex>
     </CustomFormControl>
   );

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Box, Flex, Select } from "@chakra-ui/react";
+import { Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
 import { useClaimConditionsFormContext } from "..";
 import { CustomFormControl } from "../common";
@@ -147,10 +147,7 @@ export const ClaimerSelection = () => {
             </Flex>
           </Flex>
         ) : (
-          <Box
-            w={{ base: "100%", md: "50%" }}
-            display={{ base: "none", md: "block" }}
-          />
+          <div className="hidden w-full md:block md:w-1/2" />
         )}
       </Flex>
     </CustomFormControl>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -9,7 +9,6 @@ import {
   AlertDescription,
   AlertIcon,
   AlertTitle,
-  Box,
   Flex,
   Menu,
   MenuButton,
@@ -647,7 +646,10 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
             </div>
 
             <div className="flex flex-row">
-              <AdminOnly contract={contract} fallback={<Box pb={5} />}>
+              <AdminOnly
+                contract={contract}
+                fallback={<div className="pb-5" />}
+              >
                 <Flex justifyContent="center" alignItems="center" gap={3}>
                   {(hasRemovedPhases || hasAddedPhases) && (
                     <Text color="red.500" fontWeight="bold">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx

@@ -34,7 +34,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
     endTimestamp,
   } = item;
   return (
-    <Card position="relative" p={8}>
+    <Card className="relative p-8">
       <Flex direction="column" gap={8}>
         <Flex flexDir="column" gap={2} mt={{ base: 4, md: 0 }}>
           <Flex

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useSplitBalances } from "@3rdweb-sdk/react/hooks/useSplit";
-import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { SimpleGrid, StatLabel, StatNumber } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { useActiveWalletChain, useWalletBalance } from "thirdweb/react";
 import { Card } from "tw-components";
@@ -21,14 +21,14 @@ export const AccountBalance: React.FC<AccountBalanceProps> = ({ contract }) => {
 
   return (
     <SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
-      <Card as={Stat}>
+      <Card className="[&>*]:m-0">
         <StatLabel mb={{ base: 1, md: 0 }}>{balance?.symbol}</StatLabel>
         <StatNumber>{balance?.displayValue}</StatNumber>
       </Card>
       {balanceQuery?.data
         ?.filter((bl) => bl.name !== "Native Token")
         .map((bl) => (
-          <Card as={Stat} key={bl.symbol}>
+          <Card className="[&>*]:m-0" key={bl.symbol}>
             <StatLabel mb={{ base: 1, md: 0 }}>{bl.symbol}</StatLabel>
             <StatNumber>{bl.display_balance}</StatNumber>
           </Card>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx

@@ -32,15 +32,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
   const v5Chain = useV5DashboardChain(chain.chainId);
 
   return (
-    <Card
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        gap: 16,
-        alignItems: "center",
-      }}
-      maxW={{ base: "100%", md: "49%" }}
-    >
+    <Card className="flex max-w-full flex-row items-center gap-4 md:max-w-49%">
       <Input
         placeholder={`Amount in ${symbol}. ex: 0.001`}
         onChange={handleChange}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  SimpleGrid,
-  Skeleton,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
+import { SimpleGrid, Skeleton, StatLabel, StatNumber } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
@@ -20,7 +14,7 @@ export const AccountsCount: React.FC<AccountsCountProps> = ({ contract }) => {
   const totalAccountsQuery = useReadContract(totalAccounts, { contract });
   return (
     <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 3, md: 6 }}>
-      <Card as={Stat}>
+      <Card className="[&>*]:m-0">
         <StatLabel mb={{ base: 1, md: 0 }}>Total Accounts</StatLabel>
         <Skeleton isLoaded={totalAccountsQuery.isSuccess}>
           <StatNumber>{totalAccountsQuery.data?.toString()}</StatNumber>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx

@@ -11,7 +11,6 @@ import {
   AccordionButton,
   AccordionItem,
   AccordionPanel,
-  Box,
   ButtonGroup,
   Divider,
   Flex,
@@ -114,7 +113,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
           </FormControl>
         </div>
       </Flex>
-      <Card p={0} overflow="hidden">
+      <Card className="overflow-hidden p-0">
         <SimpleGrid
           gap={2}
           columns={12}
@@ -198,14 +197,14 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
           alignItems="center"
           _last={{ borderBottomWidth: 0 }}
         >
-          <Box gridColumn="span 3">
+          <div className="col-span-3">
             <div className="flex flex-row items-center gap-3">
               <Tooltip
                 p={0}
                 bg="transparent"
                 boxShadow="none"
                 label={
-                  <Card py={2} px={4} bgColor="backgroundHighlight">
+                  <Card className="bg-backgroundHighlight px-4 py-2">
                     <Text size="label.sm">
                       Copy transaction hash to clipboard
                     </Text>
@@ -227,9 +226,9 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 {transaction.transactionHash.slice(0, 32)}...
               </Text>
             </div>
-          </Box>
+          </div>
 
-          <Box gridColumn="span 1" />
+          <div className="col-span-1" />
 
           <ButtonGroup
             size="sm"
@@ -262,7 +261,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
             )}
           </ButtonGroup>
 
-          <Box gridColumn="span 3">
+          <div className="col-span-3">
             <div className="flex flex-row justify-between gap-2">
               <Text fontFamily="mono" noOfLines={1}>
                 {transaction.blockNumber}
@@ -271,7 +270,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 <ChevronDownIcon className="size-4" />
               </div>
             </div>
-          </Box>
+          </div>
         </SimpleGrid>
       </AccordionButton>
       <AccordionPanel>
@@ -312,15 +311,15 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 key={`${transaction.transactionHash}_${event.logIndex}`}
               >
                 <SimpleGrid columns={12} gap={2}>
-                  <Box gridColumn="span 3">
+                  <div className="col-span-3">
                     <Text fontWeight="bold">{event.eventName}</Text>
-                  </Box>
-                  <Box gridColumn="span 9">
+                  </div>
+                  <div className="col-span-9">
                     <CodeClient
                       code={stringify(event.args, null, 2)}
                       lang="json"
                     />
-                  </Box>
+                  </div>
                 </SimpleGrid>
 
                 {arr.length - 1 === idx ? null : <Divider />}
@@ -353,7 +352,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
             bg="transparent"
             boxShadow="none"
             label={
-              <Card py={2} px={4} bgColor="backgroundHighlight">
+              <Card className="bg-backgroundHighlight px-4 py-2">
                 <Text size="label.sm">{description}</Text>
               </Card>
             }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx

@@ -25,7 +25,7 @@ export const ContractPermissionsPage: React.FC<
 
   if (!detectedPermissionEnumerable) {
     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">
           Missing PermissionsEnumerable Extension

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { voteTokenBalances } from "@3rdweb-sdk/react/hooks/useVote";
-import { Divider, Flex, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { Divider, Flex, StatLabel, StatNumber } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
@@ -61,7 +61,11 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
         <Heading size="title.sm">Voting Tokens</Heading>
         <div className="flex flex-row gap-2">
           {voteTokenBalancesQuery.data?.map((balance) => (
-            <Card as={Stat} key={balance.address} maxWidth="240px">
+            <Card
+              className="[&>*]:m-0"
+              key={balance.address}
+              style={{ maxWidth: 240 }}
+            >
               <StatLabel>
                 {balance.address?.toLowerCase() === address?.toLowerCase()
                   ? "Your Balance"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx

@@ -142,7 +142,7 @@ export const SettingsMetadata = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="metadata" detectedState={detectedState} />
       <Flex
         as="form"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

@@ -75,7 +75,7 @@ export const SettingsPlatformFees = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="platformFee" detectedState={detectedState} />
       <Flex
         as="form"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

@@ -67,7 +67,7 @@ export const SettingsPrimarySale = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="primarySale" detectedState={detectedState} />
       <Flex
         as="form"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx

@@ -88,7 +88,7 @@ export const SettingsRoyalties = ({
   );
 
   return (
-    <Card p={0} position="relative" overflow="hidden">
+    <Card className="relative overflow-hidden p-0">
       <SettingDetectedState type="royalties" detectedState={detectedState} />
       <Flex
         as="form"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx

@@ -5,7 +5,6 @@ import {
   Flex,
   SimpleGrid,
   Spinner,
-  Stat,
   StatLabel,
   StatNumber,
 } from "@chakra-ui/react";
@@ -121,7 +120,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
       <div className="flex flex-col gap-8">
         <Flex gap={4} flexDir="column">
           <SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
-            <Card as={Stat}>
+            <Card className="[&>*]:m-0">
               <StatLabel mb={{ base: 1, md: 0 }}>
                 {nativeBalanceQuery.data?.symbol}
               </StatLabel>
@@ -145,7 +144,11 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
               (balanceQuery?.data || [])
                 ?.filter((bl) => bl.name !== "Native Token")
                 ?.map((balance) => (
-                  <Card as={Stat} key={balance.token_address} maxWidth="2xs">
+                  <Card
+                    className="[&>*]:m-0"
+                    key={balance.token_address}
+                    style={{ maxWidth: "20rem" }}
+                  >
                     <StatLabel as={Heading} size="label.lg">
                       {balance.name === "Native Token"
                         ? v4Chain?.nativeCurrency.symbol || "Native Token"