[Dashboard] Remove tw-components Button from contract action-buttons (#…

…5369) ## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview This PR focuses on refactoring the button components across various files to standardize the usage of the `Button` component from the `@/components/ui/button` module, updating properties for consistency, and improving the UI elements. ### Detailed summary - Replaced `Button` imports from `tw-components` with `@/components/ui/button`. - Changed `colorScheme` to `variant` for button styling. - Updated `isDisabled` to `disabled` for button state management. - Added `className="gap-2"` for consistent spacing. - Modified button content to include icons before text. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
thirdweb-dev · Nov 11, 2024 · a1b518c · a1b518c
1 parent 8c1fa1b
commit a1b518c
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 81 deletions.
diff --git a/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx b/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -17,7 +18,6 @@ import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button } from "tw-components";
 
 interface BatchLazyMintButtonProps {
   canCreateDelayedRevealBatch: boolean;
@@ -55,10 +55,8 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
     <MinterOnly contract={contract}>
       <Sheet onOpenChange={setOpen} open={open}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<FileStackIcon className="size-4" />}
-          >
+          <Button variant="primary" className="gap-2">
+            <FileStackIcon className="size-4" />
             Batch Upload
           </Button>
         </SheetTrigger>

diff --git a/...src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx b/...src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -18,7 +19,6 @@ import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc721";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button } from "tw-components";
 import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
 
 const CLAIM_FORM_ID = "nft-claim-form";
@@ -45,8 +45,8 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button colorScheme="primary" leftIcon={<GemIcon className="size-4" />}>
-          Claim
+        <Button variant="primary" className="gap-2">
+          <GemIcon className="size-4" /> Claim
         </Button>
       </SheetTrigger>
       <SheetContent className="overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">

diff --git a/...app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-button.tsx b/...app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-button.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -10,7 +11,6 @@ import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Button } from "tw-components";
 import { LazyMintNftForm } from "./lazy-mint-form";
 
 interface NFTLazyMintButtonProps {
@@ -28,11 +28,8 @@ export const NFTLazyMintButton: React.FC<NFTLazyMintButtonProps> = ({
     <MinterOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<PlusIcon className="size-5" />}
-            {...restButtonProps}
-          >
+          <Button variant="primary" className="gap-2" {...restButtonProps}>
+            <PlusIcon className="size-5" />
             Single Upload
           </Button>
         </SheetTrigger>

diff --git a/...c/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx b/...c/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Accordion,
   AccordionButton,
@@ -25,7 +26,6 @@ import { lazyMint as lazyMint721 } from "thirdweb/extensions/erc721";
 import { lazyMint as lazyMint1155 } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import {
-  Button,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
@@ -313,9 +313,9 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
       </form>
       <div className="mt-8 flex flex-row justify-end gap-3">
         <Button
-          isDisabled={sendAndConfirmTx.isPending}
+          disabled={sendAndConfirmTx.isPending}
           variant="outline"
-          mr={3}
+          className="mr-3"
           onClick={() => setOpen(false)}
         >
           Cancel

diff --git a/.../src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-button.tsx b/.../src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -11,7 +12,6 @@ import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Button } from "tw-components";
 import { NFTMintForm } from "./mint-form";
 
 interface NFTMintButtonProps {
@@ -30,11 +30,8 @@ export const NFTMintButton: React.FC<NFTMintButtonProps> = ({
     <MinterOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<PlusIcon className="size-5" />}
-            {...restButtonProps}
-          >
+          <Button variant="primary" className="gap-2" {...restButtonProps}>
+            <PlusIcon className="size-5" />
             Mint
           </Button>
         </SheetTrigger>

diff --git a/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx b/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -18,7 +19,7 @@ import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { getBatchesToReveal, reveal } from "thirdweb/extensions/erc721";
 import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, FormErrorMessage, FormLabel } from "tw-components";
+import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface NFTRevealButtonProps {
   contract: ThirdwebContract;
@@ -48,11 +49,8 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
     <MinterOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<EyeIcon className="size-4" />}
-          >
-            Reveal NFTs
+          <Button variant="primary" className="gap-2">
+            <EyeIcon className="size-4" /> Reveal NFTs
           </Button>
         </SheetTrigger>
         <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">

diff --git a/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx b/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -10,7 +11,6 @@ import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Button } from "tw-components";
 import { SharedMetadataForm } from "./shared-metadata-form";
 
 interface NFTSharedMetadataButtonProps {
@@ -25,12 +25,8 @@ export const NFTSharedMetadataButton: React.FC<
     <MinterOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<PlusIcon className="size-5" />}
-            {...restButtonProps}
-          >
-            Set NFT Metadata
+          <Button variant="primary" className="gap-2" {...restButtonProps}>
+            <PlusIcon className="size-5" /> Set NFT Metadata
           </Button>
         </SheetTrigger>
         <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">

diff --git a/...p/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx b/...p/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx
@@ -1,13 +1,13 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import { useSplitDistributeFunds } from "@3rdweb-sdk/react/hooks/useSplit";
 import { MismatchButton } from "components/buttons/MismatchButton";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Button } from "tw-components";
 import type { Balance } from "../ContractSplitPage";
 
 interface DistributeButtonProps {
@@ -90,7 +90,7 @@ export const DistributeButton: React.FC<DistributeButtonProps> = ({
 
   if (numTransactions === 0) {
     return (
-      <Button isDisabled colorScheme="primary" {...restButtonProps}>
+      <Button disabled variant="primary" {...restButtonProps}>
         Nothing to distribute
       </Button>
     );

diff --git a/...app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-button.tsx b/...app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-button.tsx
@@ -1,18 +1,18 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { Droplet } from "lucide-react";
+import { DropletIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { balanceOf } from "thirdweb/extensions/erc20";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
-import { Button } from "tw-components";
 import { TokenAirdropForm } from "./airdrop-form";
 interface TokenAirdropButtonProps {
   contract: ThirdwebContract;
@@ -33,12 +33,12 @@ export const TokenAirdropButton: React.FC<TokenAirdropButtonProps> = ({
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <Button
-          colorScheme="primary"
-          leftIcon={<Droplet size={16} />}
+          variant="primary"
           {...restButtonProps}
-          isDisabled={!hasBalance}
+          disabled={!hasBalance}
+          className="gap-2"
         >
-          Airdrop
+          <DropletIcon size={16} /> Airdrop
         </Button>
       </SheetTrigger>
       <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">

diff --git a/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx b/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -23,7 +24,6 @@ import {
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
 import {
-  Button,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
@@ -59,12 +59,12 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <Button
-          colorScheme="primary"
-          leftIcon={<Flame size={16} />}
+          variant="primary"
           {...restButtonProps}
-          isDisabled={!hasBalance}
+          disabled={!hasBalance}
+          className="gap-2"
         >
-          Burn
+          <Flame size={16} /> Burn
         </Button>
       </SheetTrigger>
       <SheetContent className="z-[10000]">

diff --git a/...c/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx b/...c/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -11,7 +12,7 @@ import {
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Gem } from "lucide-react";
+import { GemIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -22,12 +23,7 @@ import {
   useReadContract,
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
-import {
-  Button,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-} from "tw-components";
+import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
 
 interface TokenClaimButtonProps {
   contract: ThirdwebContract;
@@ -52,12 +48,8 @@ export const TokenClaimButton: React.FC<TokenClaimButtonProps> = ({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button
-          colorScheme="primary"
-          leftIcon={<Gem size={16} />}
-          {...restButtonProps}
-        >
-          Claim
+        <Button variant="primary" className="gap-2" {...restButtonProps}>
+          <GemIcon size={16} /> Claim
         </Button>
       </SheetTrigger>
       <SheetContent className="z-[10000]">

diff --git a/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx b/...rc/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -12,7 +13,7 @@ import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Plus } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -23,7 +24,7 @@ import {
   useReadContract,
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
-import { Button, FormErrorMessage, FormLabel } from "tw-components";
+import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface TokenMintButtonProps {
   contract: ThirdwebContract;
@@ -50,12 +51,8 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
     <MinterOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button
-            colorScheme="primary"
-            leftIcon={<Plus size={16} />}
-            {...restButtonProps}
-          >
-            Mint
+          <Button variant="primary" {...restButtonProps} className="gap-2">
+            <PlusIcon size={16} /> Mint
           </Button>
         </SheetTrigger>
         <SheetContent className="z-[10000]">