[Dashboard] Remove tw-components stuff (1) (#5540)

part of DASH-388

Author: kien-ngo

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

@@ -1,6 +1,6 @@
+import { Button } from "@/components/ui/button";
 import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
-import { Button, Text } from "tw-components";
 import { useClaimConditionsFormContext } from "..";
 import { CustomFormControl } from "../common";
 
@@ -115,13 +115,13 @@ export const ClaimerSelection = () => {
           >
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
-              colorScheme="purple"
-              isDisabled={disabledSnapshotButton}
-              borderRadius="md"
+              variant="primary"
+              disabled={disabledSnapshotButton}
+              className="gap-2 rounded-md"
               onClick={() => setOpenIndex(phaseIndex)}
-              rightIcon={<UploadIcon className="size-4" />}
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
+              <UploadIcon className="size-4" />
             </Button>
 
             <Flex
@@ -136,14 +136,14 @@ export const ClaimerSelection = () => {
               }}
               ml={2}
             >
-              <Text size="body.sm" color="inherit">
+              <p>
                 ●{" "}
                 <strong>
                   {field.snapshot?.length} address
                   {field.snapshot?.length === 1 ? "" : "es"}
                 </strong>{" "}
                 in snapshot
-              </Text>
+              </p>
             </Flex>
           </Flex>
         ) : (

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

@@ -2,7 +2,6 @@
 
 import { useWalletNFTs } from "@3rdweb-sdk/react";
 import type { ThirdwebContract } from "thirdweb";
-import { Text } from "tw-components";
 import { NFTCards } from "../../_components/NFTCards";
 
 interface NftsOwnedProps {
@@ -35,8 +34,8 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({ contract }) => {
       trackingCategory="account_nfts_owned"
     />
   ) : isWalletNFTsLoading ? null : error ? (
-    <Text>Failed to fetch NFTs for this account: {error}</Text>
+    <p>Failed to fetch NFTs for this account: {error}</p>
   ) : (
-    <Text>This account doesn&apos;t own any NFTs.</Text>
+    <p>This account doesn&apos;t own any NFTs.</p>
   );
 };

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Tooltip } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import type { ThirdwebContract } from "thirdweb";
@@ -9,7 +11,6 @@ import {
   useReadContract,
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
-import { Button, Card, Text } from "tw-components";
 
 interface CreateAccountButtonProps {
   contract: ThirdwebContract;
@@ -51,8 +52,8 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
     return (
       <Tooltip
         label={
-          <Card py={2} px={4} bgColor="backgroundHighlight">
-            <Text>You can only initialize one account per EOA.</Text>
+          <Card className="bg-card px-4 py-2">
+            <p>You can only initialize one account per EOA.</p>
           </Card>
         }
         bg="transparent"
@@ -62,7 +63,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
         placement="right"
         shouldWrapChildren
       >
-        <Button colorScheme="primary" isDisabled>
+        <Button variant="primary" disabled>
           Account Created
         </Button>
       </Tooltip>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -18,7 +19,6 @@ import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, Text } from "tw-components";
 import {
   type AirdropAddressInput,
   AirdropUpload,
@@ -118,12 +118,8 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
             <Flex direction={{ base: "column", md: "row" }} gap={4}>
               <Sheet open={open} onOpenChange={setOpen}>
                 <SheetTrigger asChild>
-                  <Button
-                    colorScheme="primary"
-                    borderRadius="md"
-                    rightIcon={<UploadIcon className="size-5" />}
-                  >
-                    Upload addresses
+                  <Button variant="primary" className="rounded-md">
+                    Upload addresses <UploadIcon className="mr-2 size-5" />
                   </Button>
                 </SheetTrigger>
                 <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
@@ -149,18 +145,18 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 color={addresses.length === 0 ? "orange.500" : "green.500"}
               >
                 {addresses.length > 0 && (
-                  <Text size="body.sm" color="inherit">
+                  <p>
                     ● <strong>{addresses.length} addresses</strong> ready to be
                     airdropped
-                  </Text>
+                  </p>
                 )}
               </Flex>
             </Flex>
           </div>
-          <Text>
+          <p>
             You can airdrop to a maximum of 250 addresses at a time. If you have
             more, please do it in multiple transactions.
-          </Text>
+          </p>
           <TransactionButton
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -27,8 +27,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import {} from "tw-components";
-import { Button, Card, Heading, Text } from "tw-components";
+import { Button, Card } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
@@ -104,10 +103,10 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
 
   if (!nft) {
     return (
-      <Text>
+      <p>
         No NFT found with token ID {tokenId}. Please check the token ID and try
         again.
-      </Text>
+      </p>
     );
   }
 
@@ -182,7 +181,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                   label={
                     tb.isDisabled ? (
                       <Card py={2} px={4} bgColor="backgroundHighlight">
-                        <Text size="label.sm">{tb.disabledText}</Text>
+                        <p>{tb.disabledText}</p>
                       </Card>
                     ) : (
                       ""
@@ -214,7 +213,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             <Card as={Flex} flexDir="column" gap={3}>
               <SimpleGrid rowGap={3} columns={12} placeItems="center left">
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token ID</Heading>
+                  <p className="font-semibold">Token ID</p>
                 </GridItem>
                 <GridItem colSpan={8}>
                   <CopyTextButton
@@ -228,31 +227,29 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.owner && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Owner</Heading>
+                      <p className="font-semibold">Owner</p>
                     </GridItem>
                     <GridItem colSpan={8}>
                       <WalletAddress address={nft.owner} />
                     </GridItem>
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token Standard</Heading>
+                  <p className="font-semibold">Token Standard</p>
                 </GridItem>
                 <GridItem colSpan={8}>{nft.type}</GridItem>
                 {nft.type !== "ERC721" && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Supply</Heading>
+                      <p className="font-semibold">Supply</p>
                     </GridItem>
                     <GridItem colSpan={8}>
-                      <Text fontFamily="mono" size="body.md">
-                        {nft.supply.toString()}
-                      </Text>
+                      <p>{nft.supply.toLocaleString("en-US")}</p>
                     </GridItem>
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token URI</Heading>
+                  <p className="font-semibold">Token URI</p>
                 </GridItem>
                 <GridItem
                   colSpan={8}
@@ -275,7 +272,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.metadata.image && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Media URI</Heading>
+                      <p className="font-semibold">Media URI</p>
                     </GridItem>
                     <GridItem
                       colSpan={8}
@@ -301,7 +298,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             </Card>
             {properties ? (
               <Card as={Flex} flexDir="column" gap={4}>
-                <Heading size="label.md">Attributes</Heading>
+                <p className="font-semibold">Attributes</p>
                 {Array.isArray(properties) &&
                 String(properties[0]?.value) !== "undefined" ? (
                   <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>

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

@@ -3,7 +3,6 @@ import {
   useEngineSystemHealth,
   useEngineSystemMetrics,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Text } from "tw-components";
 
 interface EngineSystemProps {
   instance: EngineInstance;
@@ -17,14 +16,14 @@ export const EngineSystem: React.FC<EngineSystemProps> = ({ instance }) => {
   }
 
   return (
-    <Text fontSize="x-small" fontFamily="mono" opacity={0.5} gap={0}>
+    <p className="gap-0 font-mono text-xs opacity-50">
       Version: {healthQuery.data.engineVersion ?? "..."}
       <br />
       Enabled: {healthQuery.data.features?.join(", ")}
       <br />
       CPU: {metricsQuery.data?.data?.cpu?.toFixed(2) ?? "..."}%
       <br />
       Memory: {metricsQuery.data?.data?.memory?.toFixed(0) ?? "..."}MB
-    </Text>
+    </p>
   );
 };

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import {} from "@/components/ui/dropdown-menu";
-import {} from "@/components/ui/select";
 import { Layers3 } from "lucide-react";
 import Link from "next/link";
 

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

@@ -7,7 +7,6 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Heading } from "tw-components";
 import type { SourceFile } from "../types";
 
 interface SourcesAccordionProps {
@@ -33,7 +32,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">ABI</Heading>
+                <p className="font-semibold">ABI</p>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>
@@ -58,7 +57,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">{signature.filename}</Heading>
+                <p className="font-semibold">{signature.filename}</p>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>

apps/dashboard/src/components/devRelEvents/AmbassadorCards.tsx

@@ -1,7 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import type { StaticImageData } from "next/image";
-import { Text } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface AmbassadorProps {
@@ -41,7 +40,7 @@ export const AmbassadorCard: ComponentWithChildren<AmbassadorProps> = ({
         lineHeight={1.6}
         textAlign="center"
       >
-        <Text size="body.lg">{children}</Text>
+        <p>{children}</p>
       </Flex>
     </Flex>
   );

apps/dashboard/src/core-ui/batch-upload/batch-table.tsx

@@ -28,7 +28,6 @@ import {
 import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
-import { Text } from "tw-components";
 
 const FileImage: React.FC<ImageProps> = ({ src, ...props }) => {
   const img = useImageFileOrUrl(
@@ -174,9 +173,9 @@ export const BatchTable: React.FC<BatchTableProps> = ({
                 {headerGroup.headers.map((column, i) => (
                   // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                   <Th {...column.getHeaderProps()} border="none" key={i}>
-                    <Text as="label" size="label.sm" color="faded">
+                    <p className="text-muted-foreground">
                       {column.render("Header")}
-                    </Text>
+                    </p>
                   </Th>
                 ))}
               </Tr>
@@ -227,10 +226,10 @@ export const BatchTable: React.FC<BatchTableProps> = ({
               icon={<ChevronLeftIcon className="size-4" />}
               onClick={() => previousPage()}
             />
-            <Text whiteSpace="nowrap">
+            <p className="whitespace-nowrap">
               Page <strong>{pageIndex + 1}</strong> of{" "}
               <strong>{pageOptions.length}</strong>
-            </Text>
+            </p>
             <IconButton
               isDisabled={!canNextPage}
               aria-label="next page"