Migrate TransactionButton to shadcn + tailwind

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

@@ -31,7 +31,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
       <TransactionButton
         txChainID={contract.chain.id}
         transactionCount={1}
-        isLoading={cancelQuery.isPending}
+        isPending={cancelQuery.isPending}
         onClick={() => {
           trackEvent({
             category: "marketplace",
@@ -64,8 +64,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
             error: "Failed to cancel",
           });
         }}
-        colorScheme="primary"
-        alignSelf="flex-end"
+        className="self-end"
       >
         Cancel {isAuction ? "Auction" : "Listing"}
       </TransactionButton>

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

@@ -537,11 +537,10 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         </Button>
         <TransactionButton
           txChainID={contract.chain.id}
-          isLoading={isFormLoading}
+          isPending={isFormLoading}
           transactionCount={2}
           form={LIST_FORM_ID}
           type="submit"
-          colorScheme="primary"
         >
           {actionText}
         </TransactionButton>

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

@@ -646,16 +646,15 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   hasRemovedPhases ||
                   !isMultiPhase ? (
                     <TransactionButton
-                      colorScheme="primary"
                       txChainID={contract.chain.id}
                       transactionCount={1}
-                      isDisabled={claimConditionsQuery.isPending}
+                      disabled={claimConditionsQuery.isPending}
                       type="submit"
-                      isLoading={sendTx.isPending}
-                      loadingText="Saving..."
-                      size="md"
+                      isPending={sendTx.isPending}
                     >
-                      Save Phases
+                      {claimConditionsQuery.isPending
+                        ? "Saving Phases"
+                        : "Save Phases"}
                     </TransactionButton>
                   ) : null}
                 </Flex>

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

@@ -91,26 +91,31 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
       <TransactionButton
         transactionCount={1}
         type="button"
-        isLoading={sendTxMutation.isPending}
+        isPending={sendTxMutation.isPending}
         onClick={handleResetClaimEligibility}
-        loadingText="Resetting..."
         size="sm"
         txChainID={contract.chain.id}
       >
-        Reset Eligibility
-        <ToolTipLabel
-          label={
-            <>
-              This {`contract's`} claim eligibility stores who has already
-              claimed {isErc20 ? "tokens" : "NFTs"} from this contract and
-              carries across claim phases. Resetting claim eligibility will
-              reset this state permanently, and wallets that have already
-              claimed to their limit will be able to claim again.
-            </>
-          }
-        >
-          <CircleHelpIcon className="ml-2 size-4 text-muted-foreground" />
-        </ToolTipLabel>
+        {sendTxMutation.isPending ? (
+          "Resetting Eligibility"
+        ) : (
+          <div className="flex items-center gap-2">
+            Reset Eligibility
+            <ToolTipLabel
+              label={
+                <span className="text-left">
+                  This {`contract's`} claim eligibility stores who has already
+                  claimed {isErc20 ? "tokens" : "NFTs"} from this contract and
+                  carries across claim phases. Resetting claim eligibility will
+                  reset this state permanently, and wallets that have already
+                  claimed to their limit will be able to claim again.
+                </span>
+              }
+            >
+              <CircleHelpIcon className="size-4" />
+            </ToolTipLabel>
+          </div>
+        )}
       </TransactionButton>
     </AdminOnly>
   );

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

@@ -48,11 +48,10 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
       <TransactionButton
         txChainID={v5Chain.id}
         transactionCount={1}
-        isLoading={isPending}
-        isDisabled={
+        isPending={isPending}
+        disabled={
           amount.length === 0 || Number.parseFloat(amount) <= 0 || !address
         }
-        colorScheme="primary"
         onClick={() => {
           if (!address) {
             throw new Error("Invalid address");

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

@@ -73,7 +73,6 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
   return (
     <TransactionButton
       txChainID={contract.chain.id}
-      colorScheme="primary"
       onClick={() => {
         const tx = ERC4337Ext.createAccount({
           contract,
@@ -82,9 +81,9 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
         });
         sendTxMutation.mutate(tx);
       }}
-      isLoading={sendTxMutation.isPending}
+      isPending={sendTxMutation.isPending}
       transactionCount={1}
-      isDisabled={isAccountDeployedQuery.data}
+      disabled={isAccountDeployedQuery.data}
       {...restButtonProps}
     >
       Create Account

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx

@@ -264,10 +264,9 @@ function UploadMetadataNFTSection(props: {
               className="min-w-24"
               disabled={uploadMetadataMutation.isPending}
               type="submit"
-              isLoading={uploadMetadataMutation.isPending}
+              isPending={uploadMetadataMutation.isPending}
               txChainID={props.contractChainId}
               transactionCount={1}
-              colorScheme="primary"
             >
               Upload
             </TransactionButton>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx

@@ -720,10 +720,9 @@ function ClaimConditionSection(props: {
                   className="min-w-24"
                   disabled={updateMutation.isPending || !props.isOwnerAccount}
                   type="submit"
-                  isLoading={updateMutation.isPending}
+                  isPending={updateMutation.isPending}
                   txChainID={props.chainId}
                   transactionCount={1}
-                  colorScheme="primary"
                 >
                   Update
                 </TransactionButton>
@@ -805,10 +804,9 @@ function PrimarySaleRecipientSection(props: {
               !form.formState.isDirty
             }
             type="submit"
-            isLoading={updateMutation.isPending}
+            isPending={updateMutation.isPending}
             txChainID={props.contractChainId}
             transactionCount={1}
-            colorScheme="primary"
           >
             Update
           </TransactionButton>
@@ -917,10 +915,9 @@ function MintNFTSection(props: {
               className="min-w-24 gap-2"
               disabled={mintMutation.isPending}
               type="submit"
-              isLoading={mintMutation.isPending}
+              isPending={mintMutation.isPending}
               txChainID={props.contractChainId}
               transactionCount={1}
-              colorScheme="primary"
             >
               Mint
             </TransactionButton>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx

@@ -314,8 +314,7 @@ function PrimarySalesSection(props: {
             className="min-w-24"
             disabled={updateMutation.isPending || !props.isOwnerAccount}
             type="submit"
-            isLoading={updateMutation.isPending}
-            colorScheme="primary"
+            isPending={updateMutation.isPending}
             transactionCount={1}
             txChainID={props.contractChainId}
           >
@@ -529,8 +528,7 @@ function MintNFTSection(props: {
               className="min-w-24"
               disabled={mintMutation.isPending}
               type="submit"
-              isLoading={mintMutation.isPending}
-              colorScheme="primary"
+              isPending={mintMutation.isPending}
               txChainID={props.contractChainId}
               transactionCount={1}
             >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx

@@ -385,11 +385,10 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
           <TransactionButton
             txChainID={contract.chain.id}
             transactionCount={1}
-            isLoading={installMutation.isPending}
+            isPending={installMutation.isPending}
             type="submit"
-            colorScheme="primary"
-            alignSelf="flex-end"
-            isDisabled={
+            className="self-end"
+            disabled={
               !formState.isValid ||
               isModuleCompatibleQuery.data === false ||
               isModuleCompatibleQuery.isFetching

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx

@@ -212,8 +212,7 @@ function SetSharedMetadataSection(props: {
               className="min-w-24"
               disabled={setSharedMetadataMutation.isPending}
               type="submit"
-              isLoading={setSharedMetadataMutation.isPending}
-              colorScheme="primary"
+              isPending={setSharedMetadataMutation.isPending}
               transactionCount={1}
               txChainID={props.contractChainId}
             >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx

@@ -347,8 +347,7 @@ function RoyaltyInfoPerTokenSection(props: {
               className="min-w-24"
               disabled={setRoyaltyInfoForTokenMutation.isPending}
               type="submit"
-              isLoading={setRoyaltyInfoForTokenMutation.isPending}
-              colorScheme="primary"
+              isPending={setRoyaltyInfoForTokenMutation.isPending}
               transactionCount={1}
               txChainID={props.contractChainId}
             >
@@ -450,9 +449,8 @@ function DefaultRoyaltyInfoSection(props: {
               className="min-w-24"
               disabled={updateMutation.isPending}
               type="submit"
-              colorScheme="primary"
               transactionCount={1}
-              isLoading={updateMutation.isPending}
+              isPending={updateMutation.isPending}
               txChainID={props.contractChainId}
             >
               Update
@@ -527,8 +525,7 @@ function TransferValidatorSection(props: {
             className="min-w-24 gap-2"
             disabled={updateMutation.isPending}
             type="submit"
-            colorScheme="primary"
-            isLoading={updateMutation.isPending}
+            isPending={updateMutation.isPending}
             transactionCount={1}
             txChainID={props.contractChainId}
           >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx

@@ -191,8 +191,7 @@ export function TransferableModuleUI(
                   !props.isOwnerAccount ||
                   !form.formState.isDirty
                 }
-                isLoading={updateMutation.isPending}
-                colorScheme="primary"
+                isPending={updateMutation.isPending}
                 transactionCount={
                   // if already restricted, only need to send the allowlist txs
                   // else - need to send one more

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx

@@ -1,13 +1,12 @@
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Checkbox } from "@/components/ui/checkbox";
+import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ZERO_ADDRESS } from "thirdweb";
 import { ThirdwebProvider } from "thirdweb/react";
-import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet";
 import {
   ErrorProvider,
   type TransactionError,
@@ -78,42 +77,39 @@ function Component() {
     version: "1.0.0",
   };
 
-  // TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn
   return (
     <ThirdwebProvider>
-      <ChakraProviderSetup>
-        <ErrorProvider>
-          <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-            <div>
-              <CustomConnectWallet loginRequired={false} />
-            </div>
-
-            <div className="flex items-center gap-5">
-              <CheckboxWithLabel
-                value={isOwner}
-                onChange={setIsOwner}
-                id="isOwner"
-                label="Is Owner"
-              />
-            </div>
+      <ErrorProvider>
+        <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+          <div>
+            <CustomConnectWallet loginRequired={false} />
+          </div>
 
-            <BadgeContainer label="Default">
-              <BatchMetadataModuleUI
-                contractInfo={contractInfo}
-                moduleAddress="0x0000000000000000000000000000000000000000"
-                uploadMetadata={uploadMetadataStub}
-                uninstallButton={{
-                  onClick: async () => removeMutation.mutateAsync(),
-                  isPending: removeMutation.isPending,
-                }}
-                isOwnerAccount={isOwner}
-                contractChainId={1}
-              />
-            </BadgeContainer>
-            <Toaster richColors />
+          <div className="flex items-center gap-5">
+            <CheckboxWithLabel
+              value={isOwner}
+              onChange={setIsOwner}
+              id="isOwner"
+              label="Is Owner"
+            />
           </div>
-        </ErrorProvider>
-      </ChakraProviderSetup>
+
+          <BadgeContainer label="Default">
+            <BatchMetadataModuleUI
+              contractInfo={contractInfo}
+              moduleAddress="0x0000000000000000000000000000000000000000"
+              uploadMetadata={uploadMetadataStub}
+              uninstallButton={{
+                onClick: async () => removeMutation.mutateAsync(),
+                isPending: removeMutation.isPending,
+              }}
+              isOwnerAccount={isOwner}
+              contractChainId={1}
+            />
+          </BadgeContainer>
+          <Toaster richColors />
+        </div>
+      </ErrorProvider>
     </ThirdwebProvider>
   );
 }