Skip to content

Commit b5ebf52

Browse files
MananTankMananTank
committed
add tx button in Royalty module
1 parent 7584f00 commit b5ebf52

File tree

2 files changed

+123
-97
lines changed

2 files changed

+123
-97
lines changed

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
"use client";
2-
import { Spinner } from "@/components/ui/Spinner/Spinner";
32
import {
43
Accordion,
54
AccordionContent,
65
AccordionItem,
76
AccordionTrigger,
87
} from "@/components/ui/accordion";
98
import { Alert, AlertTitle } from "@/components/ui/alert";
10-
import { Button } from "@/components/ui/button";
119
import {
1210
Form,
1311
FormControl,
@@ -20,6 +18,7 @@ import { Input } from "@/components/ui/input";
2018
import { Skeleton } from "@/components/ui/skeleton";
2119
import { zodResolver } from "@hookform/resolvers/zod";
2220
import { useMutation } from "@tanstack/react-query";
21+
import { TransactionButton } from "components/buttons/TransactionButton";
2322
import { useTxNotifications } from "hooks/useTxNotifications";
2423
import { CircleAlertIcon } from "lucide-react";
2524
import { useCallback } from "react";
@@ -133,6 +132,7 @@ function RoyaltyModule(props: ModuleInstanceProps) {
133132
setTransferValidator={setTransferValidator}
134133
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
135134
isOwnerAccount={!!ownerAccount}
135+
contractChainId={props.contract.chain.id}
136136
/>
137137
);
138138
}
@@ -148,6 +148,7 @@ export function RoyaltyModuleUI(
148148
values: TransferValidatorFormValues,
149149
) => Promise<void>;
150150
setRoyaltyInfoForToken: (values: RoyaltyInfoFormValues) => Promise<void>;
151+
contractChainId: number;
151152
},
152153
) {
153154
return (
@@ -165,6 +166,7 @@ export function RoyaltyModuleUI(
165166
{props.isOwnerAccount ? (
166167
<RoyaltyInfoPerTokenSection
167168
setRoyaltyInfoForToken={props.setRoyaltyInfoForToken}
169+
contractChainId={props.contractChainId}
168170
/>
169171
) : (
170172
<Alert variant="info">
@@ -186,6 +188,7 @@ export function RoyaltyModuleUI(
186188
<DefaultRoyaltyInfoSection
187189
update={props.setDefaultRoyaltyInfo}
188190
defaultRoyaltyInfo={props.defaultRoyaltyInfo}
191+
contractChainId={props.contractChainId}
189192
/>
190193
) : (
191194
<Alert variant="info">
@@ -207,6 +210,7 @@ export function RoyaltyModuleUI(
207210
<TransferValidatorSection
208211
update={props.setTransferValidator}
209212
transferValidator={props.transferValidator}
213+
contractChainId={props.contractChainId}
210214
/>
211215
) : (
212216
<Alert variant="info">
@@ -240,6 +244,7 @@ export type RoyaltyInfoFormValues = z.infer<typeof royaltyInfoFormSchema>;
240244

241245
function RoyaltyInfoPerTokenSection(props: {
242246
setRoyaltyInfoForToken: (values: RoyaltyInfoFormValues) => Promise<void>;
247+
contractChainId: number;
243248
}) {
244249
const form = useForm<RoyaltyInfoFormValues>({
245250
resolver: zodResolver(royaltyInfoFormSchema),
@@ -317,17 +322,18 @@ function RoyaltyInfoPerTokenSection(props: {
317322
</div>
318323

319324
<div className="mt-4 flex justify-end">
320-
<Button
325+
<TransactionButton
321326
size="sm"
322-
className="min-w-24 gap-2"
327+
className="min-w-24"
323328
disabled={setRoyaltyInfoForTokenMutation.isPending}
324329
type="submit"
330+
isLoading={setRoyaltyInfoForTokenMutation.isPending}
331+
colorScheme="primary"
332+
transactionCount={1}
333+
txChainID={props.contractChainId}
325334
>
326-
{setRoyaltyInfoForTokenMutation.isPending && (
327-
<Spinner className="size-4" />
328-
)}
329-
Update Royalty Info for Token
330-
</Button>
335+
Update
336+
</TransactionButton>
331337
</div>
332338
</div>
333339
</form>
@@ -347,6 +353,7 @@ export type DefaultRoyaltyFormValues = z.infer<typeof defaultRoyaltyFormSchema>;
347353
function DefaultRoyaltyInfoSection(props: {
348354
defaultRoyaltyInfo?: readonly [string, number];
349355
update: (values: DefaultRoyaltyFormValues) => Promise<void>;
356+
contractChainId: number;
350357
}) {
351358
const [defaultRoyaltyRecipient, defaultRoyaltyBps] =
352359
props.defaultRoyaltyInfo || [];
@@ -414,15 +421,18 @@ function DefaultRoyaltyInfoSection(props: {
414421
<div className="h-2" />
415422

416423
<div className="mt-4 flex justify-end">
417-
<Button
424+
<TransactionButton
418425
size="sm"
419-
className="min-w-24 gap-2"
426+
className="min-w-24"
420427
disabled={updateMutation.isPending}
421428
type="submit"
429+
colorScheme="primary"
430+
transactionCount={1}
431+
isLoading={updateMutation.isPending}
432+
txChainID={props.contractChainId}
422433
>
423-
{updateMutation.isPending && <Spinner className="size-4" />}
424434
Update
425-
</Button>
435+
</TransactionButton>
426436
</div>
427437
</div>
428438
</form>
@@ -441,6 +451,7 @@ export type TransferValidatorFormValues = z.infer<
441451
function TransferValidatorSection(props: {
442452
transferValidator: string | undefined;
443453
update: (values: TransferValidatorFormValues) => Promise<void>;
454+
contractChainId: number;
444455
}) {
445456
const form = useForm<TransferValidatorFormValues>({
446457
resolver: zodResolver(transferValidatorFormSchema),
@@ -487,15 +498,18 @@ function TransferValidatorSection(props: {
487498
<div className="h-2" />
488499

489500
<div className="mt-4 flex justify-end">
490-
<Button
501+
<TransactionButton
491502
size="sm"
492503
className="min-w-24 gap-2"
493504
disabled={updateMutation.isPending}
494505
type="submit"
506+
colorScheme="primary"
507+
isLoading={updateMutation.isPending}
508+
transactionCount={1}
509+
txChainID={props.contractChainId}
495510
>
496-
{updateMutation.isPending && <Spinner className="size-4" />}
497511
Update
498-
</Button>
512+
</TransactionButton>
499513
</div>
500514
</form>
501515
</Form>

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

Lines changed: 93 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
12
import { Checkbox } from "@/components/ui/checkbox";
23
import type { Meta, StoryObj } from "@storybook/react";
34
import { useMutation } from "@tanstack/react-query";
@@ -17,6 +18,9 @@ const meta = {
1718
component: Component,
1819
parameters: {
1920
layout: "centered",
21+
nextjs: {
22+
appDirectory: true,
23+
},
2024
},
2125
} satisfies Meta<typeof Component>;
2226

@@ -70,89 +74,97 @@ function Component() {
7074
version: "1.0.0",
7175
};
7276

77+
// TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn
78+
7379
return (
74-
<ThirdwebProvider>
75-
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
76-
<div className="flex items-center gap-5">
77-
<CheckboxWithLabel
78-
value={isOwner}
79-
onChange={setIsOwner}
80-
id="isOwner"
81-
label="Is Owner"
82-
/>
80+
<ChakraProviderSetup>
81+
<ThirdwebProvider>
82+
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
83+
<div className="flex items-center gap-5">
84+
<CheckboxWithLabel
85+
value={isOwner}
86+
onChange={setIsOwner}
87+
id="isOwner"
88+
label="Is Owner"
89+
/>
90+
</div>
91+
92+
<BadgeContainer label="Empty Transfer Validator & Default Royalty Info">
93+
<RoyaltyModuleUI
94+
contractInfo={contractInfo}
95+
moduleAddress="0x0000000000000000000000000000000000000000"
96+
isPending={false}
97+
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
98+
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
99+
setTransferValidator={setTransferValidatorStub}
100+
uninstallButton={{
101+
onClick: async () => removeMutation.mutateAsync(),
102+
isPending: removeMutation.isPending,
103+
}}
104+
isOwnerAccount={isOwner}
105+
contractChainId={1}
106+
/>
107+
</BadgeContainer>
108+
109+
<BadgeContainer label="Empty Transfer Validator & Non-Empty Default Royalty Info">
110+
<RoyaltyModuleUI
111+
contractInfo={contractInfo}
112+
moduleAddress="0x0000000000000000000000000000000000000000"
113+
isPending={false}
114+
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
115+
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
116+
setTransferValidator={setTransferValidatorStub}
117+
defaultRoyaltyInfo={[_testAddress1, 100]}
118+
uninstallButton={{
119+
onClick: async () => removeMutation.mutateAsync(),
120+
isPending: removeMutation.isPending,
121+
}}
122+
isOwnerAccount={isOwner}
123+
contractChainId={1}
124+
/>
125+
</BadgeContainer>
126+
127+
<BadgeContainer label="Non-Empty Transfer Validator & Empty Default Royalty Info">
128+
<RoyaltyModuleUI
129+
contractInfo={contractInfo}
130+
moduleAddress="0x0000000000000000000000000000000000000000"
131+
isPending={false}
132+
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
133+
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
134+
setTransferValidator={setTransferValidatorStub}
135+
transferValidator={"0x0000000000000000000000000000000000000000"}
136+
uninstallButton={{
137+
onClick: async () => removeMutation.mutateAsync(),
138+
isPending: removeMutation.isPending,
139+
}}
140+
isOwnerAccount={isOwner}
141+
contractChainId={1}
142+
/>
143+
</BadgeContainer>
144+
145+
<BadgeContainer label="Non-Empty Transfer Validator & Default Royalty Info">
146+
<RoyaltyModuleUI
147+
contractInfo={contractInfo}
148+
moduleAddress="0x0000000000000000000000000000000000000000"
149+
isPending={false}
150+
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
151+
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
152+
setTransferValidator={setTransferValidatorStub}
153+
defaultRoyaltyInfo={[_testAddress1, 100]}
154+
transferValidator={"0x0000000000000000000000000000000000000000"}
155+
uninstallButton={{
156+
onClick: async () => removeMutation.mutateAsync(),
157+
isPending: removeMutation.isPending,
158+
}}
159+
isOwnerAccount={isOwner}
160+
contractChainId={1}
161+
/>
162+
</BadgeContainer>
163+
164+
<Toaster richColors />
83165
</div>
84-
85-
<BadgeContainer label="Empty Transfer Validator & Default Royalty Info">
86-
<RoyaltyModuleUI
87-
contractInfo={contractInfo}
88-
moduleAddress="0x0000000000000000000000000000000000000000"
89-
isPending={false}
90-
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
91-
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
92-
setTransferValidator={setTransferValidatorStub}
93-
uninstallButton={{
94-
onClick: async () => removeMutation.mutateAsync(),
95-
isPending: removeMutation.isPending,
96-
}}
97-
isOwnerAccount={isOwner}
98-
/>
99-
</BadgeContainer>
100-
101-
<BadgeContainer label="Empty Transfer Validator & Non-Empty Default Royalty Info">
102-
<RoyaltyModuleUI
103-
contractInfo={contractInfo}
104-
moduleAddress="0x0000000000000000000000000000000000000000"
105-
isPending={false}
106-
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
107-
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
108-
setTransferValidator={setTransferValidatorStub}
109-
defaultRoyaltyInfo={[_testAddress1, 100]}
110-
uninstallButton={{
111-
onClick: async () => removeMutation.mutateAsync(),
112-
isPending: removeMutation.isPending,
113-
}}
114-
isOwnerAccount={isOwner}
115-
/>
116-
</BadgeContainer>
117-
118-
<BadgeContainer label="Non-Empty Transfer Validator & Empty Default Royalty Info">
119-
<RoyaltyModuleUI
120-
contractInfo={contractInfo}
121-
moduleAddress="0x0000000000000000000000000000000000000000"
122-
isPending={false}
123-
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
124-
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
125-
setTransferValidator={setTransferValidatorStub}
126-
transferValidator={"0x0000000000000000000000000000000000000000"}
127-
uninstallButton={{
128-
onClick: async () => removeMutation.mutateAsync(),
129-
isPending: removeMutation.isPending,
130-
}}
131-
isOwnerAccount={isOwner}
132-
/>
133-
</BadgeContainer>
134-
135-
<BadgeContainer label="Non-Empty Transfer Validator & Default Royalty Info">
136-
<RoyaltyModuleUI
137-
contractInfo={contractInfo}
138-
moduleAddress="0x0000000000000000000000000000000000000000"
139-
isPending={false}
140-
setRoyaltyInfoForToken={setRoyaltyInfoForToken}
141-
setDefaultRoyaltyInfo={setDefaultRoyaltyInfoStub}
142-
setTransferValidator={setTransferValidatorStub}
143-
defaultRoyaltyInfo={[_testAddress1, 100]}
144-
transferValidator={"0x0000000000000000000000000000000000000000"}
145-
uninstallButton={{
146-
onClick: async () => removeMutation.mutateAsync(),
147-
isPending: removeMutation.isPending,
148-
}}
149-
isOwnerAccount={isOwner}
150-
/>
151-
</BadgeContainer>
152-
153-
<Toaster richColors />
154-
</div>
155-
</ThirdwebProvider>
166+
</ThirdwebProvider>
167+
</ChakraProviderSetup>
156168
);
157169
}
158170

0 commit comments

Comments
 (0)