[Dashboard] Remove tw-components <Badge /> (#5370)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the usage of the `Badge` component across various files, simplifying its props and styling. It also removes the `Badge` component from some files and updates imports accordingly.

### Detailed summary
- Deleted `badge.tsx` file.
- Removed `Badge` imports and usage in several components, replacing them with simpler implementations.
- Updated `Badge` usage to use class names for styling instead of props in multiple components.
- Adjusted the `Badge` component's props to reduce complexity and improve readability.

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

<!-- end pr-codex -->

Author: kien-ngo

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

@@ -1,9 +1,10 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
 import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react";
 import { formatDistance } from "date-fns/formatDistance";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useActiveAccount } from "thirdweb/react";
-import { Badge, Card, Heading, Text } from "tw-components";
+import { Card, Heading, Text } from "tw-components";
 
 export type AccountSignerType = {
   signer: string;
@@ -45,19 +46,9 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
               <WalletAddress shortenAddress={isMobile} address={signer} />
             </Heading>
             <div className="flex flex-row gap-2">
-              {isAdmin ? (
-                <Badge borderRadius="lg" p={1.5}>
-                  Admin Key
-                </Badge>
-              ) : (
-                <Badge borderRadius="lg" p={1.5}>
-                  Scoped key
-                </Badge>
-              )}
+              {isAdmin ? <Badge>Admin Key</Badge> : <Badge>Scoped key</Badge>}
               {signer === address && (
-                <Badge colorScheme="green" borderRadius="lg" p={1.5}>
-                  Currently connected
-                </Badge>
+                <Badge variant="success">Currently connected</Badge>
               )}
             </div>
           </Flex>

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

@@ -27,7 +27,8 @@ 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 { Badge, Button, Card, Heading, Text } from "tw-components";
+import {} from "tw-components";
+import { Button, Card, Heading, Text } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
@@ -237,11 +238,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 <GridItem colSpan={4}>
                   <Heading size="label.md">Token Standard</Heading>
                 </GridItem>
-                <GridItem colSpan={8}>
-                  <Badge size="label.sm" variant="subtle">
-                    {nft.type}
-                  </Badge>
-                </GridItem>
+                <GridItem colSpan={8}>{nft.type}</GridItem>
                 {nft.type !== "ERC721" && (
                   <>
                     <GridItem colSpan={4}>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
 import {
@@ -21,7 +24,7 @@ import { CircleCheckIcon, CircleXIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
-import { Badge, Button, Card, Heading } from "tw-components";
+import { Heading } from "tw-components";
 
 interface ContractSourcesPageProps {
   contract: ThirdwebContract;
@@ -91,9 +94,7 @@ const VerifyContractModal: React.FC<
         <ModalHeader>
           <Flex gap={2} align="center">
             <Heading size="subtitle.md">Contract Verification</Heading>
-            <Badge variant="outline" colorScheme="purple" rounded="md" px={2}>
-              beta
-            </Badge>
+            <Badge>beta</Badge>
           </Flex>
         </ModalHeader>
         <ModalCloseButton mt={2} />
@@ -213,11 +214,11 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
             chainId={contract.chain.id}
             contractAddress={contract.address}
           />
-          <Button variant="solid" colorScheme="purple" onClick={onOpen}>
+          <Button variant="primary" onClick={onOpen}>
             Verify contract
           </Button>
         </Flex>
-        <Card p={0}>
+        <Card>
           <SourcesPanel sources={sources} abi={abiQuery.data} />
         </Card>
       </Flex>
@@ -264,7 +265,7 @@ function RefreshContractMetadataButton(props: {
 
   return (
     <Button
-      isLoading={contractCacheMutation.isPending}
+      disabled={contractCacheMutation.isPending}
       variant="outline"
       onClick={() => {
         toast.promise(contractCacheMutation.mutateAsync(), {
@@ -274,8 +275,9 @@ function RefreshContractMetadataButton(props: {
           error: (e) => e?.message || "Failed to refresh contract data.",
         });
       }}
+      className="w-[182px]"
     >
-      Refresh Contract Data
+      {contractCacheMutation.isPending ? <Spinner /> : "Refresh Contract Data"}
     </Button>
   );
 }

apps/dashboard/src/components/badges/opensea.tsx

@@ -1,17 +1,10 @@
+import { Badge } from "@/components/ui/badge";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { Badge, type BadgeProps } from "tw-components";
 
-export const OpenSeaPropertyBadge: React.FC<BadgeProps> = (props) => {
+export const OpenSeaPropertyBadge: React.FC = () => {
   return (
     <ToolTipLabel label="This property is supported on OpenSea">
-      <Badge
-        {...props}
-        borderRadius="full"
-        variant="outline"
-        colorScheme="opensea"
-      >
-        OpenSea
-      </Badge>
+      <Badge>OpenSea</Badge>
     </ToolTipLabel>
   );
 };

apps/dashboard/src/components/homepage/sections/PricingCard.tsx

@@ -1,7 +1,7 @@
+import { Badge } from "@/components/ui/badge";
 import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
 import { Box, type CardProps, Flex } from "@chakra-ui/react";
 import {
-  Badge,
   Card,
   Heading,
   Text,
@@ -60,25 +60,15 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     >
       <Flex flexDir="column" gap={6}>
         <Flex flexDir="column" gap={3}>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row items-center gap-2">
             <Heading
               as="h3"
               size={size === "lg" ? "title.lg" : "title.sm"}
               textTransform="capitalize"
             >
               {plan.title}
             </Heading>
-            {current && (
-              <Badge
-                borderRadius="md"
-                size="label.sm"
-                px={3}
-                py={1.5}
-                textTransform="capitalize"
-              >
-                Current plan
-              </Badge>
-            )}
+            {current && <Badge className="capitalize">Current plan</Badge>}
           </div>
           <Text maxW={320} h={12}>
             {plan.description}

apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
   type AccountPlan,
   accountPlan,
@@ -16,7 +17,7 @@ import {
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { useEffect, useMemo, useState } from "react";
-import { Badge, Button, Card, Heading, Text } from "tw-components";
+import { Button, Card, Heading, Text } from "tw-components";
 import { ApplyForOpCreditsForm } from "./ApplyForOpCreditsForm";
 import { LazyOnboardingBilling } from "./LazyOnboardingBilling";
 import { OnboardingModal } from "./Modal";
@@ -114,13 +115,10 @@ export const ApplyForOpCreditsModal: React.FC = () => {
             <Card position="relative">
               <Box position="absolute">
                 <Badge
-                  borderRadius="full"
-                  size="label.sm"
-                  px={3}
-                  bgColor={creditsRecord.color}
-                  color="#fff"
-                  textTransform="capitalize"
-                  fontWeight="bold"
+                  className="rounded-full px-3 font-bold text-white capitalize"
+                  style={{
+                    backgroundColor: creditsRecord.color,
+                  }}
                 >
                   {creditsRecord.title}
                 </Badge>

apps/dashboard/src/components/onboarding/PlanCard.tsx

@@ -1,5 +1,6 @@
+import { Badge } from "@/components/ui/badge";
 import { Flex, ListItem, UnorderedList } from "@chakra-ui/react";
-import { Badge, Card, Heading, LinkButton, Text } from "tw-components";
+import { Card, Heading, LinkButton, Text } from "tw-components";
 import type { CreditsRecord } from "./ApplyForOpCreditsModal";
 
 interface PlanCardProps {
@@ -12,13 +13,10 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
       <Flex flexDir="column" gap={2}>
         <div>
           <Badge
-            borderRadius="full"
-            size="label.sm"
-            px={3}
-            bgColor={creditsRecord.color}
-            color="#fff"
-            textTransform="capitalize"
-            fontWeight="bold"
+            className="font-bold text-white capitalize"
+            style={{
+              backgroundColor: creditsRecord.color,
+            }}
           >
             {creditsRecord.title}
           </Badge>

apps/dashboard/src/components/settings/Account/Billing/Header.tsx

@@ -1,6 +1,7 @@
+import { Badge } from "@/components/ui/badge";
 import { Flex } from "@chakra-ui/react";
 import { AlertCircleIcon, CheckCircleIcon, InfoIcon } from "lucide-react";
-import { Badge, Text } from "tw-components";
+import { Text } from "tw-components";
 
 interface BillingHeaderProps {
   validPayment: boolean;
@@ -20,13 +21,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
           Manage your payment methods, billing information and invoices.
         </Text>
 
-        <Badge
-          borderRadius="md"
-          size="label.sm"
-          px={3}
-          py={1.5}
-          textTransform="capitalize"
-        >
+        <Badge className="capitalize" variant="outline">
           <span className="flex flex-row items-center gap-2">
             <Icon
               validPayment={validPayment}

apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx

@@ -1,6 +1,7 @@
+import { Badge } from "@/components/ui/badge";
 import { useAccount, useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
 import { Flex } from "@chakra-ui/react";
-import { Badge, Card, Heading, Text } from "tw-components";
+import { Card, Heading, Text } from "tw-components";
 import { PLANS } from "utils/pricing";
 import { CreditsItem } from "./CreditsItem";
 
@@ -19,13 +20,7 @@ export const BillingPlanCard = () => {
     <Card as={Flex} flexDir="column" gap={2}>
       <div className="flex flex-row items-center gap-2">
         <Heading size="title.xs">Your current plan is</Heading>
-        <Badge
-          borderRadius="md"
-          size="label.sm"
-          textTransform="capitalize"
-          px={3}
-          py={1.5}
-        >
+        <Badge className="capitalize">
           {PLANS[account.plan as keyof typeof PLANS].title}
         </Badge>
       </div>