Skip to content

Commit 648380f

Browse files
MananTankMananTank
committed
Fix crash on various modules UI on storybook on info button click
1 parent 7fbf87b commit 648380f

File tree

5 files changed

+197
-191
lines changed

5 files changed

+197
-191
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
21
import { Checkbox } from "@/components/ui/checkbox";
32
import type { Meta, StoryObj } from "@storybook/react";
43
import { useMutation } from "@tanstack/react-query";
54
import { useState } from "react";
65
import { Toaster, toast } from "sonner";
76
import { BadgeContainer, mobileViewport } from "stories/utils";
7+
import { ThirdwebProvider } from "thirdweb/react";
88
import {
99
ClaimableModuleUI,
1010
type ConfigFormValues,
@@ -79,9 +79,8 @@ function Component() {
7979
auxData: "0x",
8080
};
8181

82-
// TODO - remove ChakraProviderSetup after converting the chakra components used in ClaimableModuleUI
8382
return (
84-
<ChakraProviderSetup>
83+
<ThirdwebProvider>
8584
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
8685
<div className="flex items-center gap-5">
8786
<CheckboxWithLabel
@@ -168,7 +167,7 @@ function Component() {
168167

169168
<Toaster richColors />
170169
</div>
171-
</ChakraProviderSetup>
170+
</ThirdwebProvider>
172171
);
173172
}
174173

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

Lines changed: 92 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMutation } from "@tanstack/react-query";
44
import { useState } from "react";
55
import { Toaster, toast } from "sonner";
66
import { BadgeContainer, mobileViewport } from "stories/utils";
7+
import { ThirdwebProvider } from "thirdweb/react";
78
import {
89
type MintFormValues,
910
MintableModuleUI,
@@ -68,98 +69,99 @@ function Component() {
6869
version: "1.0.0",
6970
};
7071

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

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

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMutation } from "@tanstack/react-query";
44
import { useState } from "react";
55
import { Toaster } from "sonner";
66
import { BadgeContainer, mobileViewport } from "stories/utils";
7+
import { ThirdwebProvider } from "thirdweb/react";
78
import { ModuleCardUI } from "./module-card";
89

910
const meta = {
@@ -52,74 +53,76 @@ function Component() {
5253
};
5354

5455
return (
55-
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
56-
<div className="flex gap-2">
57-
<Checkbox
58-
id="terms1"
59-
checked={isOwner}
60-
onCheckedChange={(v) => setIsOwner(!!v)}
61-
/>
62-
<div className="grid gap-1.5 leading-none">
63-
<label
64-
htmlFor="terms1"
65-
className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
66-
>
67-
Is Owner
68-
</label>
56+
<ThirdwebProvider>
57+
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
58+
<div className="flex gap-2">
59+
<Checkbox
60+
id="terms1"
61+
checked={isOwner}
62+
onCheckedChange={(v) => setIsOwner(!!v)}
63+
/>
64+
<div className="grid gap-1.5 leading-none">
65+
<label
66+
htmlFor="terms1"
67+
className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
68+
>
69+
Is Owner
70+
</label>
71+
</div>
6972
</div>
70-
</div>
7173

72-
<BadgeContainer label="No Update, No Children">
73-
<ModuleCardUI
74-
contractInfo={contractInfo}
75-
moduleAddress="0x0000000000000000000000000000000000000000"
76-
uninstallButton={{
77-
onClick: () => removeMutation.mutateAsync(),
78-
isPending: removeMutation.isPending,
79-
}}
80-
isOwnerAccount={isOwner}
81-
/>
82-
</BadgeContainer>
74+
<BadgeContainer label="No Update, No Children">
75+
<ModuleCardUI
76+
contractInfo={contractInfo}
77+
moduleAddress="0x0000000000000000000000000000000000000000"
78+
uninstallButton={{
79+
onClick: () => removeMutation.mutateAsync(),
80+
isPending: removeMutation.isPending,
81+
}}
82+
isOwnerAccount={isOwner}
83+
/>
84+
</BadgeContainer>
8385

84-
<BadgeContainer label="Update Button (disabled), No Children">
85-
<ModuleCardUI
86-
contractInfo={contractInfo}
87-
moduleAddress="0x0000000000000000000000000000000000000000"
88-
uninstallButton={{
89-
onClick: () => removeMutation.mutateAsync(),
90-
isPending: removeMutation.isPending,
91-
}}
92-
updateButton={{
93-
isDisabled: true,
94-
isPending: updateMutation.isPending,
95-
onClick: () => updateMutation.mutateAsync(),
96-
}}
97-
isOwnerAccount={isOwner}
98-
/>
99-
</BadgeContainer>
86+
<BadgeContainer label="Update Button (disabled), No Children">
87+
<ModuleCardUI
88+
contractInfo={contractInfo}
89+
moduleAddress="0x0000000000000000000000000000000000000000"
90+
uninstallButton={{
91+
onClick: () => removeMutation.mutateAsync(),
92+
isPending: removeMutation.isPending,
93+
}}
94+
updateButton={{
95+
isDisabled: true,
96+
isPending: updateMutation.isPending,
97+
onClick: () => updateMutation.mutateAsync(),
98+
}}
99+
isOwnerAccount={isOwner}
100+
/>
101+
</BadgeContainer>
100102

101-
<BadgeContainer label="Update Button (enabled), Children, Owner">
102-
<ModuleCardUI
103-
contractInfo={contractInfo}
104-
moduleAddress="0x0000000000000000000000000000000000000000"
105-
uninstallButton={{
106-
onClick: () => removeMutation.mutateAsync(),
107-
isPending: removeMutation.isPending,
108-
}}
109-
updateButton={{
110-
isDisabled: false,
111-
isPending: updateMutation.isPending,
112-
onClick: () => updateMutation.mutateAsync(),
113-
}}
114-
isOwnerAccount={isOwner}
115-
>
116-
<div className="flex h-36 items-center justify-center rounded-lg bg-muted text-muted-foreground text-sm">
117-
CHILDREN
118-
</div>
119-
</ModuleCardUI>
120-
</BadgeContainer>
103+
<BadgeContainer label="Update Button (enabled), Children, Owner">
104+
<ModuleCardUI
105+
contractInfo={contractInfo}
106+
moduleAddress="0x0000000000000000000000000000000000000000"
107+
uninstallButton={{
108+
onClick: () => removeMutation.mutateAsync(),
109+
isPending: removeMutation.isPending,
110+
}}
111+
updateButton={{
112+
isDisabled: false,
113+
isPending: updateMutation.isPending,
114+
onClick: () => updateMutation.mutateAsync(),
115+
}}
116+
isOwnerAccount={isOwner}
117+
>
118+
<div className="flex h-36 items-center justify-center rounded-lg bg-muted text-muted-foreground text-sm">
119+
CHILDREN
120+
</div>
121+
</ModuleCardUI>
122+
</BadgeContainer>
121123

122-
<Toaster richColors />
123-
</div>
124+
<Toaster richColors />
125+
</div>
126+
</ThirdwebProvider>
124127
);
125128
}

0 commit comments

Comments
 (0)