Migrate TransactionButton to shadcn + tailwind

Author: MananTank

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