add tx button in open edition module

Author: MananTank

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.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";
@@ -73,6 +72,7 @@ function OpenEditionMetadataModule(props: ModuleInstanceProps) {
       {...props}
       setSharedMetadata={setSharedMetadata}
       isOwnerAccount={!!props.ownerAccount}
+      contractChainId={props.contract.chain.id}
     />
   );
 }
@@ -81,6 +81,7 @@ export function OpenEditionMetadataModuleUI(
   props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
     isOwnerAccount: boolean;
     setSharedMetadata: (values: SetSharedMetadataFormValues) => Promise<void>;
+    contractChainId: number;
   },
 ) {
   return (
@@ -95,6 +96,7 @@ export function OpenEditionMetadataModuleUI(
             {props.isOwnerAccount && (
               <SetSharedMetadataSection
                 setSharedMetadata={props.setSharedMetadata}
+                contractChainId={props.contractChainId}
               />
             )}
             {!props.isOwnerAccount && (
@@ -115,6 +117,7 @@ export function OpenEditionMetadataModuleUI(
 
 function SetSharedMetadataSection(props: {
   setSharedMetadata: (values: SetSharedMetadataFormValues) => Promise<void>;
+  contractChainId: number;
 }) {
   const form = useForm<SetSharedMetadataFormValues>({
     resolver: zodResolver(setSharedMetadataFormSchema),
@@ -204,17 +207,18 @@ function SetSharedMetadataSection(props: {
           </div>
 
           <div className="flex justify-end">
-            <Button
+            <TransactionButton
               size="sm"
-              className="min-w-24 gap-2"
+              className="min-w-24"
               disabled={setSharedMetadataMutation.isPending}
               type="submit"
+              isLoading={setSharedMetadataMutation.isPending}
+              colorScheme="primary"
+              transactionCount={1}
+              txChainID={props.contractChainId}
             >
-              {setSharedMetadataMutation.isPending && (
-                <Spinner className="size-4" />
-              )}
               Update
-            </Button>
+            </TransactionButton>
           </div>
         </div>
       </form>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.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";
@@ -15,6 +16,9 @@ const meta = {
   component: Component,
   parameters: {
     layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
   },
 } satisfies Meta<typeof Component>;
 
@@ -58,38 +62,41 @@ function Component() {
 
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-        <div className="flex gap-2">
-          <Checkbox
-            id="terms1"
-            checked={isOwner}
-            onCheckedChange={(v) => setIsOwner(!!v)}
-          />
-          <div className="grid gap-1.5 leading-none">
-            <label
-              htmlFor="terms1"
-              className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              Is Owner
-            </label>
+      <ChakraProviderSetup>
+        <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+          <div className="flex gap-2">
+            <Checkbox
+              id="terms1"
+              checked={isOwner}
+              onCheckedChange={(v) => setIsOwner(!!v)}
+            />
+            <div className="grid gap-1.5 leading-none">
+              <label
+                htmlFor="terms1"
+                className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Is Owner
+              </label>
+            </div>
           </div>
-        </div>
 
-        <BadgeContainer label="Default">
-          <OpenEditionMetadataModuleUI
-            contractInfo={contractInfo}
-            moduleAddress="0x0000000000000000000000000000000000000000"
-            setSharedMetadata={setSharedMetadataStub}
-            uninstallButton={{
-              onClick: async () => removeMutation.mutateAsync(),
-              isPending: removeMutation.isPending,
-            }}
-            isOwnerAccount={isOwner}
-          />
-        </BadgeContainer>
+          <BadgeContainer label="Default">
+            <OpenEditionMetadataModuleUI
+              contractInfo={contractInfo}
+              moduleAddress="0x0000000000000000000000000000000000000000"
+              setSharedMetadata={setSharedMetadataStub}
+              uninstallButton={{
+                onClick: async () => removeMutation.mutateAsync(),
+                isPending: removeMutation.isPending,
+              }}
+              isOwnerAccount={isOwner}
+              contractChainId={1}
+            />
+          </BadgeContainer>
 
-        <Toaster richColors />
-      </div>
+          <Toaster richColors />
+        </div>
+      </ChakraProviderSetup>
     </ThirdwebProvider>
   );
 }