use txbutton in batchmetadata and claimable

MananTank · MananTank · commit 24fc6e8410be · 2024-11-05T22:01:46.000+05:30
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
@@ -1,13 +1,11 @@
 "use client";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Alert, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -20,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
@@ -92,6 +91,7 @@ function BatchMetadataModule(props: ModuleInstanceProps) {
       {...props}
       uploadMetadata={uploadMetadata}
       isOwnerAccount={!!ownerAccount}
+      contractChainId={contract.chain.id}
     />
   );
 }
@@ -100,6 +100,7 @@ export function BatchMetadataModuleUI(
   props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
     isOwnerAccount: boolean;
     uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
+    contractChainId: number;
   },
 ) {
   return (
@@ -115,6 +116,7 @@ export function BatchMetadataModuleUI(
               {props.isOwnerAccount && (
                 <UploadMetadataNFTSection
                   uploadMetadata={props.uploadMetadata}
+                  contractChainId={props.contractChainId}
                 />
               )}
               {!props.isOwnerAccount && (
@@ -155,6 +157,7 @@ export function BatchMetadataModuleUI(
 
 function UploadMetadataNFTSection(props: {
   uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
+  contractChainId: number;
 }) {
   const form = useForm<UploadMetadataFormValues>({
     resolver: zodResolver(uploadMetadataFormSchema),
@@ -252,17 +255,18 @@ function UploadMetadataNFTSection(props: {
           </div>
 
           <div className="flex justify-end">
-            <Button
+            <TransactionButton
               size="sm"
-              className="min-w-24 gap-2"
+              className="min-w-24"
               disabled={uploadMetadataMutation.isPending}
               type="submit"
+              isLoading={uploadMetadataMutation.isPending}
+              txChainID={props.contractChainId}
+              transactionCount={1}
+              colorScheme="primary"
             >
-              {uploadMetadataMutation.isPending && (
-                <Spinner className="size-4" />
-              )}
               Upload
-            </Button>
+            </TransactionButton>
           </div>
         </div>
       </form>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { DatePickerWithRange } from "@/components/ui/DatePickerWithRange";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Accordion,
   AccordionContent,
@@ -24,6 +23,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
 import { addDays, fromUnixTime } from "date-fns";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -220,7 +220,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
       }}
       isOwnerAccount={!!ownerAccount}
       isErc721={isErc721}
-      chainId={props.contract.chain.id}
+      contractChainId={props.contract.chain.id}
       mintSection={{
         mint,
       }}
@@ -232,7 +232,7 @@ export function ClaimableModuleUI(
   props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
     isOwnerAccount: boolean;
     isErc721: boolean;
-    chainId: number;
+    contractChainId: number;
     primarySaleRecipientSection: {
       setPrimarySaleRecipient: (
         values: PrimarySaleRecipientFormValues,
@@ -272,6 +272,7 @@ export function ClaimableModuleUI(
               <MintNFTSection
                 mint={props.mintSection.mint}
                 isErc721={props.isErc721}
+                contractChainId={props.contractChainId}
               />
             </AccordionContent>
           </AccordionItem>
@@ -289,7 +290,7 @@ export function ClaimableModuleUI(
                   }
                   update={props.claimConditionSection.setClaimCondition}
                   isErc721={props.isErc721}
-                  chainId={props.chainId}
+                  chainId={props.contractChainId}
                   tokenDecimals={props.claimConditionSection.data.tokenDecimals}
                 />
               ) : (
@@ -315,6 +316,7 @@ export function ClaimableModuleUI(
                   update={
                     props.primarySaleRecipientSection.setPrimarySaleRecipient
                   }
+                  contractChainId={props.contractChainId}
                 />
               ) : (
                 <Skeleton className="h-[74px]" />
@@ -598,15 +600,18 @@ function ClaimConditionSection(props: {
           </div>
 
           <div className="flex justify-end">
-            <Button
+            <TransactionButton
               size="sm"
-              className="min-w-24 gap-2"
+              className="min-w-24"
               disabled={updateMutation.isPending || !props.isOwnerAccount}
               type="submit"
+              isLoading={updateMutation.isPending}
+              txChainID={props.chainId}
+              transactionCount={1}
+              colorScheme="primary"
             >
-              {updateMutation.isPending && <Spinner className="size-4" />}
               Update
-            </Button>
+            </TransactionButton>
           </div>
         </div>
       </form>{" "}
@@ -626,6 +631,7 @@ function PrimarySaleRecipientSection(props: {
   primarySaleRecipient: string | undefined;
   update: (values: PrimarySaleRecipientFormValues) => Promise<void>;
   isOwnerAccount: boolean;
+  contractChainId: number;
 }) {
   const form = useForm<PrimarySaleRecipientFormValues>({
     resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -673,15 +679,18 @@ function PrimarySaleRecipientSection(props: {
         <div className="h-5" />
 
         <div className="flex justify-end">
-          <Button
+          <TransactionButton
             size="sm"
             className="min-w-24 gap-2"
             disabled={updateMutation.isPending || !props.isOwnerAccount}
             type="submit"
+            isLoading={updateMutation.isPending}
+            txChainID={props.contractChainId}
+            transactionCount={1}
+            colorScheme="primary"
           >
-            {updateMutation.isPending && <Spinner className="size-4" />}
             Update
-          </Button>
+          </TransactionButton>
         </div>
       </form>{" "}
     </Form>
@@ -701,6 +710,7 @@ export type MintFormValues = z.infer<typeof mintFormSchema>;
 function MintNFTSection(props: {
   mint: (values: MintFormValues) => Promise<void>;
   isErc721: boolean;
+  contractChainId: number;
 }) {
   const form = useForm<MintFormValues>({
     resolver: zodResolver(mintFormSchema),
@@ -784,15 +794,18 @@ function MintNFTSection(props: {
           </div>
 
           <div className="flex justify-end">
-            <Button
+            <TransactionButton
               size="sm"
               className="min-w-24 gap-2"
               disabled={mintMutation.isPending}
               type="submit"
+              isLoading={mintMutation.isPending}
+              txChainID={props.contractChainId}
+              transactionCount={1}
+              colorScheme="primary"
             >
-              {mintMutation.isPending && <Spinner className="size-4" />}
               Mint
-            </Button>
+            </TransactionButton>
           </div>
         </div>
       </form>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx
@@ -1,3 +1,4 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Checkbox } from "@/components/ui/checkbox";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
@@ -20,6 +21,9 @@ const meta = {
   component: Component,
   parameters: {
     layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
   },
 } satisfies Meta<typeof Component>;
 
@@ -73,35 +77,38 @@ function Component() {
     version: "1.0.0",
   };
 
-  // TODO - remove ChakraProviderSetup after converting the chakra components used in BatchMetadataModuleUI
+  // TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn
   return (
     <ThirdwebProvider>
-      <ErrorProvider>
-        <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-          <div className="flex items-center gap-5">
-            <CheckboxWithLabel
-              value={isOwner}
-              onChange={setIsOwner}
-              id="isOwner"
-              label="Is Owner"
-            />
-          </div>
+      <ChakraProviderSetup>
+        <ErrorProvider>
+          <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+            <div className="flex items-center gap-5">
+              <CheckboxWithLabel
+                value={isOwner}
+                onChange={setIsOwner}
+                id="isOwner"
+                label="Is Owner"
+              />
+            </div>
 
-          <BadgeContainer label="Default">
-            <BatchMetadataModuleUI
-              contractInfo={contractInfo}
-              moduleAddress="0x0000000000000000000000000000000000000000"
-              uploadMetadata={uploadMetadataStub}
-              uninstallButton={{
-                onClick: async () => removeMutation.mutateAsync(),
-                isPending: removeMutation.isPending,
-              }}
-              isOwnerAccount={isOwner}
-            />
-          </BadgeContainer>
-          <Toaster richColors />
-        </div>
-      </ErrorProvider>
+            <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>
+      </ChakraProviderSetup>
     </ThirdwebProvider>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx
