Skip to content

Commit 7584f00

Browse files
MananTankMananTank
committed
use tx button in Mintable
1 parent 24fc6e8 commit 7584f00

File tree

2 files changed

+113
-91
lines changed

2 files changed

+113
-91
lines changed

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

Lines changed: 21 additions & 10 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 { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
1210
import {
1311
Form,
@@ -24,6 +22,7 @@ import { Skeleton } from "@/components/ui/skeleton";
2422
import { Textarea } from "@/components/ui/textarea";
2523
import { zodResolver } from "@hookform/resolvers/zod";
2624
import { useMutation } from "@tanstack/react-query";
25+
import { TransactionButton } from "components/buttons/TransactionButton";
2726
import { useTxNotifications } from "hooks/useTxNotifications";
2827
import { CircleAlertIcon } from "lucide-react";
2928
import { useCallback } from "react";
@@ -134,6 +133,7 @@ function MintableModule(props: ModuleInstanceProps) {
134133
isOwnerAccount={!!ownerAccount}
135134
isErc721={isErc721}
136135
isBatchMetadataInstalled={isBatchMetadataInstalled}
136+
contractChainId={contract.chain.id}
137137
/>
138138
);
139139
}
@@ -147,6 +147,7 @@ export function MintableModuleUI(
147147
mint: (values: MintFormValues) => Promise<void>;
148148
isErc721: boolean;
149149
isBatchMetadataInstalled: boolean;
150+
contractChainId: number;
150151
},
151152
) {
152153
return (
@@ -168,6 +169,7 @@ export function MintableModuleUI(
168169
mint={props.mint}
169170
isErc721={props.isErc721}
170171
isBatchMetadataInstalled={props.isBatchMetadataInstalled}
172+
contractChainId={props.contractChainId}
171173
/>
172174
)}
173175
{!props.isOwnerAccount && (
@@ -193,6 +195,7 @@ export function MintableModuleUI(
193195
isOwnerAccount={props.isOwnerAccount}
194196
primarySaleRecipient={props.primarySaleRecipient}
195197
update={props.updatePrimaryRecipient}
198+
contractChainId={props.contractChainId}
196199
/>
197200
</AccordionContent>
198201
</AccordionItem>
@@ -211,6 +214,7 @@ function PrimarySalesSection(props: {
211214
primarySaleRecipient: string | undefined;
212215
update: (values: UpdateFormValues) => Promise<void>;
213216
isOwnerAccount: boolean;
217+
contractChainId: number;
214218
}) {
215219
const form = useForm<UpdateFormValues>({
216220
resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -259,15 +263,18 @@ function PrimarySalesSection(props: {
259263
/>
260264

261265
<div className="mt-4 flex justify-end">
262-
<Button
266+
<TransactionButton
263267
size="sm"
264-
className="min-w-24 gap-2"
268+
className="min-w-24"
265269
disabled={updateMutation.isPending || !props.isOwnerAccount}
266270
type="submit"
271+
isLoading={updateMutation.isPending}
272+
colorScheme="primary"
273+
transactionCount={1}
274+
txChainID={props.contractChainId}
267275
>
268-
{updateMutation.isPending && <Spinner className="size-4" />}
269276
Update
270-
</Button>
277+
</TransactionButton>
271278
</div>
272279
</form>{" "}
273280
</Form>
@@ -287,6 +294,7 @@ function MintNFTSection(props: {
287294
mint: (values: MintFormValues) => Promise<void>;
288295
isErc721: boolean;
289296
isBatchMetadataInstalled: boolean;
297+
contractChainId: number;
290298
}) {
291299
const form = useForm<MintFormValues>({
292300
resolver: zodResolver(mintFormSchema),
@@ -467,15 +475,18 @@ function MintNFTSection(props: {
467475
</div>
468476

469477
<div className="flex justify-end">
470-
<Button
478+
<TransactionButton
471479
size="sm"
472-
className="min-w-24 gap-2"
480+
className="min-w-24"
473481
disabled={mintMutation.isPending}
474482
type="submit"
483+
isLoading={mintMutation.isPending}
484+
colorScheme="primary"
485+
txChainID={props.contractChainId}
486+
transactionCount={1}
475487
>
476-
{mintMutation.isPending && <Spinner className="size-4" />}
477488
Mint
478-
</Button>
489+
</TransactionButton>
479490
</div>
480491
</div>
481492
</form>

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

Lines changed: 92 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";
@@ -16,6 +17,9 @@ const meta = {
1617
component: Component,
1718
parameters: {
1819
layout: "centered",
20+
nextjs: {
21+
appDirectory: true,
22+
},
1923
},
2024
} satisfies Meta<typeof Component>;
2125

@@ -67,89 +71,96 @@ function Component() {
6771
version: "1.0.0",
6872
};
6973

74+
// TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn
75+
7076
return (
71-
<ThirdwebProvider>
72-
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
73-
<div className="flex items-center gap-5">
74-
<CheckboxWithLabel
75-
value={isOwner}
76-
onChange={setIsOwner}
77-
id="isOwner"
78-
label="Is Owner"
79-
/>
80-
81-
<CheckboxWithLabel
82-
value={isErc721}
83-
onChange={setIsErc721}
84-
id="isErc721"
85-
label="isErc721"
86-
/>
87-
88-
<CheckboxWithLabel
89-
value={isBatchMetadataInstalled}
90-
onChange={setIsBatchMetadataInstalled}
91-
id="isBatchMetadataInstalled"
92-
label="isBatchMetadataInstalled"
93-
/>
77+
<ChakraProviderSetup>
78+
<ThirdwebProvider>
79+
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
80+
<div className="flex items-center gap-5">
81+
<CheckboxWithLabel
82+
value={isOwner}
83+
onChange={setIsOwner}
84+
id="isOwner"
85+
label="Is Owner"
86+
/>
87+
88+
<CheckboxWithLabel
89+
value={isErc721}
90+
onChange={setIsErc721}
91+
id="isErc721"
92+
label="isErc721"
93+
/>
94+
95+
<CheckboxWithLabel
96+
value={isBatchMetadataInstalled}
97+
onChange={setIsBatchMetadataInstalled}
98+
id="isBatchMetadataInstalled"
99+
label="isBatchMetadataInstalled"
100+
/>
101+
</div>
102+
103+
<BadgeContainer label="Empty Primary Sale Recipient">
104+
<MintableModuleUI
105+
contractInfo={contractInfo}
106+
moduleAddress="0x0000000000000000000000000000000000000000"
107+
isPending={false}
108+
primarySaleRecipient={""}
109+
updatePrimaryRecipient={updatePrimaryRecipientStub}
110+
mint={mintStub}
111+
uninstallButton={{
112+
onClick: async () => removeMutation.mutateAsync(),
113+
isPending: removeMutation.isPending,
114+
}}
115+
isOwnerAccount={isOwner}
116+
isErc721={isErc721}
117+
isBatchMetadataInstalled={isBatchMetadataInstalled}
118+
contractChainId={1}
119+
/>
120+
</BadgeContainer>
121+
122+
<BadgeContainer label="Filled Primary Sale Recipient">
123+
<MintableModuleUI
124+
contractInfo={contractInfo}
125+
moduleAddress="0x0000000000000000000000000000000000000000"
126+
isPending={false}
127+
primarySaleRecipient={testAddress1}
128+
updatePrimaryRecipient={updatePrimaryRecipientStub}
129+
mint={mintStub}
130+
uninstallButton={{
131+
onClick: () => removeMutation.mutateAsync(),
132+
isPending: removeMutation.isPending,
133+
}}
134+
isOwnerAccount={isOwner}
135+
isErc721={isErc721}
136+
isBatchMetadataInstalled={isBatchMetadataInstalled}
137+
contractChainId={1}
138+
/>
139+
</BadgeContainer>
140+
141+
<BadgeContainer label="Pending">
142+
<MintableModuleUI
143+
contractInfo={contractInfo}
144+
moduleAddress="0x0000000000000000000000000000000000000000"
145+
isPending={true}
146+
primarySaleRecipient={testAddress1}
147+
updatePrimaryRecipient={updatePrimaryRecipientStub}
148+
mint={mintStub}
149+
uninstallButton={{
150+
onClick: () => removeMutation.mutateAsync(),
151+
isPending: removeMutation.isPending,
152+
}}
153+
isOwnerAccount={isOwner}
154+
isErc721={isErc721}
155+
isBatchMetadataInstalled={isBatchMetadataInstalled}
156+
contractChainId={1}
157+
/>
158+
</BadgeContainer>
159+
160+
<Toaster richColors />
94161
</div>
95-
96-
<BadgeContainer label="Empty Primary Sale Recipient">
97-
<MintableModuleUI
98-
contractInfo={contractInfo}
99-
moduleAddress="0x0000000000000000000000000000000000000000"
100-
isPending={false}
101-
primarySaleRecipient={""}
102-
updatePrimaryRecipient={updatePrimaryRecipientStub}
103-
mint={mintStub}
104-
uninstallButton={{
105-
onClick: async () => removeMutation.mutateAsync(),
106-
isPending: removeMutation.isPending,
107-
}}
108-
isOwnerAccount={isOwner}
109-
isErc721={isErc721}
110-
isBatchMetadataInstalled={isBatchMetadataInstalled}
111-
/>
112-
</BadgeContainer>
113-
114-
<BadgeContainer label="Filled Primary Sale Recipient">
115-
<MintableModuleUI
116-
contractInfo={contractInfo}
117-
moduleAddress="0x0000000000000000000000000000000000000000"
118-
isPending={false}
119-
primarySaleRecipient={testAddress1}
120-
updatePrimaryRecipient={updatePrimaryRecipientStub}
121-
mint={mintStub}
122-
uninstallButton={{
123-
onClick: () => removeMutation.mutateAsync(),
124-
isPending: removeMutation.isPending,
125-
}}
126-
isOwnerAccount={isOwner}
127-
isErc721={isErc721}
128-
isBatchMetadataInstalled={isBatchMetadataInstalled}
129-
/>
130-
</BadgeContainer>
131-
132-
<BadgeContainer label="Pending">
133-
<MintableModuleUI
134-
contractInfo={contractInfo}
135-
moduleAddress="0x0000000000000000000000000000000000000000"
136-
isPending={true}
137-
primarySaleRecipient={testAddress1}
138-
updatePrimaryRecipient={updatePrimaryRecipientStub}
139-
mint={mintStub}
140-
uninstallButton={{
141-
onClick: () => removeMutation.mutateAsync(),
142-
isPending: removeMutation.isPending,
143-
}}
144-
isOwnerAccount={isOwner}
145-
isErc721={isErc721}
146-
isBatchMetadataInstalled={isBatchMetadataInstalled}
147-
/>
148-
</BadgeContainer>
149-
150-
<Toaster richColors />
151-
</div>
152-
</ThirdwebProvider>
162+
</ThirdwebProvider>
163+
</ChakraProviderSetup>
153164
);
154165
}
155166

0 commit comments

Comments
 (0)