Skip to content

Commit d82a9fd

Browse files
MananTankMananTank
committed
add tx button in Transferable module
1 parent b5ebf52 commit d82a9fd

File tree

5 files changed

+137
-84
lines changed

5 files changed

+137
-84
lines changed

‎apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { popularChains } from "../popularChains";
3434
export const CustomConnectWallet = (props: {
3535
loginRequired?: boolean;
3636
connectButtonClassName?: string;
37+
signInLinkButtonClassName?: string;
3738
detailsButtonClassName?: string;
3839
}) => {
3940
const thirdwebClient = useThirdwebClient();
@@ -134,7 +135,12 @@ export const CustomConnectWallet = (props: {
134135
if (!isLoggedIn && loginRequired) {
135136
return (
136137
<>
137-
<Button asChild variant="default" className="gap-2" size="lg">
138+
<Button
139+
asChild
140+
variant="default"
141+
className={props.signInLinkButtonClassName}
142+
size="lg"
143+
>
138144
<Link
139145
href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
140146
>

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Switch } from "@/components/ui/switch";
1616
import { ToolTipLabel } from "@/components/ui/tooltip";
1717
import { zodResolver } from "@hookform/resolvers/zod";
1818
import { useMutation } from "@tanstack/react-query";
19+
import { TransactionButton } from "components/buttons/TransactionButton";
1920
import { CircleAlertIcon, PlusIcon, Trash2Icon } from "lucide-react";
2021
import { useCallback } from "react";
2122
import { useFieldArray, useForm } from "react-hook-form";
@@ -95,6 +96,7 @@ function TransferableModule(props: ModuleInstanceProps) {
9596
adminAddress={props.ownerAccount?.address || ""}
9697
update={update}
9798
isOwnerAccount={!!props.ownerAccount}
99+
contractChainId={props.contract.chain.id}
98100
/>
99101
);
100102
}
@@ -107,6 +109,7 @@ export function TransferableModuleUI(
107109
adminAddress: string;
108110
isOwnerAccount: boolean;
109111
update: (values: TransferableModuleFormValues) => Promise<void>;
112+
contractChainId: number;
110113
},
111114
) {
112115
const form = useForm<TransferableModuleFormValues>({
@@ -150,9 +153,25 @@ export function TransferableModuleUI(
150153
<form onSubmit={form.handleSubmit(onSubmit)}>
151154
<ModuleCardUI
152155
{...props}
153-
updateButton={{
154-
isPending: updateMutation.isPending,
155-
isDisabled: !form.formState.isDirty,
156+
updateButton={() => {
157+
return (
158+
<TransactionButton
159+
size="sm"
160+
className="min-w-24 gap-2"
161+
type="submit"
162+
disabled={
163+
props.isPending ||
164+
!props.isOwnerAccount ||
165+
!form.formState.isDirty
166+
}
167+
isLoading={updateMutation.isPending}
168+
colorScheme="primary"
169+
transactionCount={1}
170+
txChainID={props.contractChainId}
171+
>
172+
Update
173+
</TransactionButton>
174+
);
156175
}}
157176
>
158177
{props.isPending && <Skeleton className="h-[90px]" />}

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

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -189,11 +189,13 @@ export type ModuleCardUIProps = {
189189
onClick: () => void;
190190
isPending: boolean;
191191
};
192-
updateButton?: {
193-
onClick?: () => void;
194-
isPending: boolean;
195-
isDisabled: boolean;
196-
};
192+
updateButton?:
193+
| {
194+
onClick?: () => void;
195+
isPending: boolean;
196+
isDisabled: boolean;
197+
}
198+
| React.FC;
197199
};
198200

199201
export function ModuleCardUI(props: ModuleCardUIProps) {
@@ -291,17 +293,23 @@ export function ModuleCardUI(props: ModuleCardUIProps) {
291293
Uninstall
292294
</Button>
293295

294-
{props.isOwnerAccount && props.updateButton && (
295-
<Button
296-
size="sm"
297-
className="min-w-24 gap-2"
298-
type="submit"
299-
onClick={props.updateButton.onClick}
300-
disabled={props.updateButton.isPending || !props.isOwnerAccount}
301-
>
302-
{props.updateButton.isPending && <Spinner className="size-4" />}
303-
Update
304-
</Button>
296+
{props.isOwnerAccount &&
297+
props.updateButton &&
298+
typeof props.updateButton !== "function" && (
299+
<Button
300+
size="sm"
301+
className="min-w-24 gap-2"
302+
type="submit"
303+
onClick={props.updateButton.onClick}
304+
disabled={props.updateButton.isPending || !props.isOwnerAccount}
305+
>
306+
{props.updateButton.isPending && <Spinner className="size-4" />}
307+
Update
308+
</Button>
309+
)}
310+
311+
{props.isOwnerAccount && typeof props.updateButton === "function" && (
312+
<props.updateButton />
305313
)}
306314
</div>
307315
</section>

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

Lines changed: 75 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ 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";
8+
import { ChakraProviderSetup } from "../../../../../../../@/components/ChakraProviderSetup";
79
import {
810
type TransferableModuleFormValues,
911
TransferableModuleUI,
@@ -14,6 +16,9 @@ const meta = {
1416
component: Component,
1517
parameters: {
1618
layout: "centered",
19+
nextjs: {
20+
appDirectory: true,
21+
},
1722
},
1823
} satisfies Meta<typeof Component>;
1924

@@ -58,72 +63,79 @@ function Component() {
5863
};
5964

6065
return (
61-
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
62-
<div className="flex gap-2">
63-
<Checkbox
64-
id="terms1"
65-
checked={isOwner}
66-
onCheckedChange={(v) => setIsOwner(!!v)}
67-
/>
68-
<div className="grid gap-1.5 leading-none">
69-
<label
70-
htmlFor="terms1"
71-
className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
72-
>
73-
Is Owner
74-
</label>
75-
</div>
76-
</div>
66+
<ChakraProviderSetup>
67+
<ThirdwebProvider>
68+
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
69+
<div className="flex gap-2">
70+
<Checkbox
71+
id="terms1"
72+
checked={isOwner}
73+
onCheckedChange={(v) => setIsOwner(!!v)}
74+
/>
75+
<div className="grid gap-1.5 leading-none">
76+
<label
77+
htmlFor="terms1"
78+
className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
79+
>
80+
Is Owner
81+
</label>
82+
</div>
83+
</div>
7784

78-
<BadgeContainer label="Empty AllowList, Not Restricted">
79-
<TransferableModuleUI
80-
contractInfo={contractInfo}
81-
moduleAddress="0x0000000000000000000000000000000000000000"
82-
isPending={false}
83-
isRestricted={false}
84-
adminAddress={testAddress1}
85-
update={updateStub}
86-
uninstallButton={{
87-
onClick: async () => removeMutation.mutateAsync(),
88-
isPending: removeMutation.isPending,
89-
}}
90-
isOwnerAccount={isOwner}
91-
/>
92-
</BadgeContainer>
85+
<BadgeContainer label="Empty AllowList, Not Restricted">
86+
<TransferableModuleUI
87+
contractInfo={contractInfo}
88+
moduleAddress="0x0000000000000000000000000000000000000000"
89+
isPending={false}
90+
isRestricted={false}
91+
adminAddress={testAddress1}
92+
update={updateStub}
93+
uninstallButton={{
94+
onClick: async () => removeMutation.mutateAsync(),
95+
isPending: removeMutation.isPending,
96+
}}
97+
isOwnerAccount={isOwner}
98+
contractChainId={1}
99+
/>
100+
</BadgeContainer>
93101

94-
<BadgeContainer label="Empty AllowList, Restricted">
95-
<TransferableModuleUI
96-
contractInfo={contractInfo}
97-
moduleAddress="0x0000000000000000000000000000000000000000"
98-
isPending={false}
99-
isRestricted={true}
100-
adminAddress={testAddress1}
101-
update={updateStub}
102-
uninstallButton={{
103-
onClick: () => removeMutation.mutateAsync(),
104-
isPending: removeMutation.isPending,
105-
}}
106-
isOwnerAccount={isOwner}
107-
/>
108-
</BadgeContainer>
102+
<BadgeContainer label="Empty AllowList, Restricted">
103+
<TransferableModuleUI
104+
contractInfo={contractInfo}
105+
moduleAddress="0x0000000000000000000000000000000000000000"
106+
isPending={false}
107+
isRestricted={true}
108+
adminAddress={testAddress1}
109+
update={updateStub}
110+
uninstallButton={{
111+
onClick: () => removeMutation.mutateAsync(),
112+
isPending: removeMutation.isPending,
113+
}}
114+
isOwnerAccount={isOwner}
115+
contractChainId={1}
116+
/>
117+
</BadgeContainer>
109118

110-
<BadgeContainer label="Pending">
111-
<TransferableModuleUI
112-
contractInfo={contractInfo}
113-
moduleAddress="0x0000000000000000000000000000000000000000"
114-
isPending={true}
115-
adminAddress={testAddress1}
116-
isRestricted={false}
117-
update={updateStub}
118-
uninstallButton={{
119-
onClick: () => removeMutation.mutateAsync(),
120-
isPending: removeMutation.isPending,
121-
}}
122-
isOwnerAccount={isOwner}
123-
/>
124-
</BadgeContainer>
119+
<BadgeContainer label="Pending">
120+
<TransferableModuleUI
121+
contractInfo={contractInfo}
122+
moduleAddress="0x0000000000000000000000000000000000000000"
123+
isPending={true}
124+
adminAddress={testAddress1}
125+
isRestricted={false}
126+
update={updateStub}
127+
uninstallButton={{
128+
onClick: () => removeMutation.mutateAsync(),
129+
isPending: removeMutation.isPending,
130+
}}
131+
isOwnerAccount={isOwner}
132+
contractChainId={1}
133+
/>
134+
</BadgeContainer>
125135

126-
<Toaster richColors />
127-
</div>
136+
<Toaster richColors />
137+
</div>
138+
</ThirdwebProvider>
139+
</ChakraProviderSetup>
128140
);
129141
}

‎apps/dashboard/src/components/buttons/MismatchButton.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,17 @@ export const MismatchButton = forwardRef<
9696

9797
const eventRef =
9898
useRef<React.MouseEvent<HTMLButtonElement, MouseEvent>>(undefined);
99+
99100
if (!wallet || !chainId) {
100101
return (
101-
<CustomConnectWallet borderRadius="md" colorScheme="primary" {...props} />
102+
<CustomConnectWallet
103+
borderRadius="md"
104+
colorScheme="primary"
105+
{...props}
106+
signInLinkButtonClassName={
107+
props.size === "sm" ? "!py-2 !h-auto" : undefined
108+
}
109+
/>
102110
);
103111
}
104112
const notEnoughBalance =

0 commit comments

Comments
 (0)