Skip to content

Commit 295dd1b

Browse files
GWSzetoGWSzeto
committed
WIP: SDK integration for transferable module
1 parent 267a614 commit 295dd1b

File tree

2 files changed

+117
-50
lines changed

2 files changed

+117
-50
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function TransferrableModuleUI(props: {
9494
>
9595
<div className="p-4 lg:p-6">
9696
{/* Title */}
97-
<h3 className="font-semibold text-xl tracking-tight">
97+
<h3 className="text-xl font-semibold tracking-tight">
9898
Transferrable
9999
</h3>
100100

@@ -234,7 +234,7 @@ export function TransferrableModuleUI(props: {
234234
</div>
235235

236236
{/* Footer */}
237-
<div className="flex flex-col items-end border-border border-t px-4 py-4 lg:px-6">
237+
<div className="flex flex-col items-end border-t border-border px-4 py-4 lg:px-6">
238238
<Button
239239
type="submit"
240240
size="sm"

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

Lines changed: 115 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ import {
66
TransferrableModuleUI,
77
} from "./Transferrable";
88

9+
import { ThirdwebProvider, useActiveAccount, ConnectButton, useSendTransaction } from "thirdweb/react";
10+
import { createThirdwebClient, getContract } from "thirdweb";
11+
import { anvil } from "thirdweb/chains";
12+
import { useSendBatchTransaction, useReadContract } from "thirdweb/react";
13+
import { TransferableERC721 } from "thirdweb/modules";
14+
915
const meta = {
1016
title: "Modules/Transferrable",
1117
component: Component,
@@ -31,65 +37,126 @@ export const Mobile: Story = {
3137
const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
3238
const testAddress2 = "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425";
3339

40+
// TESTING: used to test out the SDK in story book for now
41+
const client = createThirdwebClient({
42+
//clientId: process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID!,
43+
secretKey: process.env.DASHBOARD_SECRET_KEY!
44+
});
45+
46+
const contract = getContract({
47+
client,
48+
address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
49+
chain: anvil,
50+
});
51+
52+
function AnvilComponent() {
53+
const account = useActiveAccount();
54+
const { mutateAsync: sendTransaction, error } = useSendTransaction();
55+
const { data: isTransferEnabled, isLoading } = useReadContract(TransferableERC721.isTransferEnabled, {
56+
contract
57+
});
58+
59+
async function anvilUpdate(values: TransferrableModuleFormValues) {
60+
if (isTransferEnabled !== values.isRestricted) {
61+
const setTransferableTransaction = TransferableERC721.setTransferable({
62+
contract,
63+
enableTransfer: values.isRestricted,
64+
});
65+
66+
await sendTransaction(setTransferableTransaction)
67+
}
68+
69+
const setTransferableForTransactions = values.allowList.map(allowlistedAddress => TransferableERC721.setTransferableFor({
70+
contract,
71+
enableTransfer: true,
72+
target: allowlistedAddress.address,
73+
}))
74+
75+
await Promise.allSettled(setTransferableForTransactions.map(transaction => sendTransaction(transaction)))
76+
};
77+
78+
return (
79+
<>
80+
<ConnectButton client={client} />
81+
82+
<BadgeContainer label="Anvil localhost test">
83+
<TransferrableModuleUI
84+
allowList={[]}
85+
isPending={isLoading}
86+
isRestricted={isLoading ? false : isTransferEnabled!}
87+
adminAddress={account?.address ?? ""}
88+
update={anvilUpdate}
89+
/>
90+
</BadgeContainer>
91+
</>
92+
)
93+
}
94+
3495
function Component() {
96+
3597
async function updateStub(values: TransferrableModuleFormValues) {
3698
console.log("submitting", values);
3799
await new Promise((resolve) => setTimeout(resolve, 1000));
38100
}
39101

40102
return (
41-
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
42-
<BadgeContainer label="Empty AllowList, Not Restricted">
43-
<TransferrableModuleUI
44-
allowList={[]}
45-
isPending={false}
46-
isRestricted={false}
47-
adminAddress={testAddress1}
48-
update={updateStub}
49-
/>
50-
</BadgeContainer>
103+
<ThirdwebProvider>
104+
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
51105

52-
<BadgeContainer label="Empty AllowList, Restricted">
53-
<TransferrableModuleUI
54-
allowList={[]}
55-
isPending={false}
56-
isRestricted={true}
57-
adminAddress={testAddress1}
58-
update={updateStub}
59-
/>
60-
</BadgeContainer>
106+
<AnvilComponent />
61107

62-
<BadgeContainer label="Length 1 AllowList, Restricted">
63-
<TransferrableModuleUI
64-
allowList={[testAddress1]}
65-
isPending={false}
66-
isRestricted={true}
67-
adminAddress={testAddress1}
68-
update={updateStub}
69-
/>
70-
</BadgeContainer>
108+
<BadgeContainer label="Empty AllowList, Not Restricted">
109+
<TransferrableModuleUI
110+
allowList={[]}
111+
isPending={false}
112+
isRestricted={false}
113+
adminAddress={testAddress1}
114+
update={updateStub}
115+
/>
116+
</BadgeContainer>
71117

72-
<BadgeContainer label="Length 2 AllowList, Restricted">
73-
<TransferrableModuleUI
74-
allowList={[testAddress1, testAddress2]}
75-
isPending={false}
76-
isRestricted={true}
77-
adminAddress={testAddress1}
78-
update={updateStub}
79-
/>
80-
</BadgeContainer>
118+
<BadgeContainer label="Empty AllowList, Restricted">
119+
<TransferrableModuleUI
120+
allowList={[]}
121+
isPending={false}
122+
isRestricted={true}
123+
adminAddress={testAddress1}
124+
update={updateStub}
125+
/>
126+
</BadgeContainer>
81127

82-
<BadgeContainer label="Pending">
83-
<TransferrableModuleUI
84-
allowList={[]}
85-
isPending={true}
86-
adminAddress={testAddress1}
87-
isRestricted={false}
88-
update={updateStub}
89-
/>
90-
</BadgeContainer>
128+
<BadgeContainer label="Length 1 AllowList, Restricted">
129+
<TransferrableModuleUI
130+
allowList={[testAddress1]}
131+
isPending={false}
132+
isRestricted={true}
133+
adminAddress={testAddress1}
134+
update={updateStub}
135+
/>
136+
</BadgeContainer>
137+
138+
<BadgeContainer label="Length 2 AllowList, Restricted">
139+
<TransferrableModuleUI
140+
allowList={[testAddress1, testAddress2]}
141+
isPending={false}
142+
isRestricted={true}
143+
adminAddress={testAddress1}
144+
update={updateStub}
145+
/>
146+
</BadgeContainer>
147+
148+
<BadgeContainer label="Pending">
149+
<TransferrableModuleUI
150+
allowList={[]}
151+
isPending={true}
152+
adminAddress={testAddress1}
153+
isRestricted={false}
154+
update={updateStub}
155+
/>
156+
</BadgeContainer>
91157

92-
<Toaster richColors />
93-
</div>
158+
<Toaster richColors />
159+
</div>
160+
</ThirdwebProvider>
94161
);
95162
}

0 commit comments

Comments
 (0)