-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomConnectClaim721.tsx
77 lines (69 loc) · 2.13 KB
/
CustomConnectClaim721.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"
import { ConnectButton, ThirdwebProvider, ClaimButton, useActiveAccount } from "thirdweb/react"
import { createThirdwebClient } from "thirdweb"
import { defineChain } from "thirdweb/chains"
function ConnectAndClaimButtons(props) {
const { enableAccountAbstraction, chainId, clientId, contractAddress, ...rest } = props
const account = useActiveAccount()
const client = React.useMemo(() => createThirdwebClient({ clientId }), [clientId])
const connectButtonProps = {
client: client,
...rest,
}
if (enableAccountAbstraction) {
connectButtonProps.accountAbstraction = {
chain: defineChain(chainId),
gasless: true,
}
}
return (
<>
<ConnectButton {...connectButtonProps} />
{account && contractAddress && (
<ClaimButton
client={client}
chain={defineChain(chainId)}
contractAddress={contractAddress as string}
claimParams={{
type: "ERC721",
quantity: BigInt(1),
}}
>
Claim
</ClaimButton>
)}
</>
)
}
export function CustomConnectClaim721(props) {
return (
<ThirdwebProvider>
<ConnectAndClaimButtons {...props} />
</ThirdwebProvider>
)
}
CustomConnectClaim721.defaultProps = {
enableAccountAbstraction: false,
chainId: 1, // Default to Ethereum mainnet
clientId: "", // Default to empty string
contractAddress: "", // Default to empty string
}
addPropertyControls(CustomConnectClaim721, {
enableAccountAbstraction: {
type: ControlType.Boolean,
title: "Enable Account Abstraction",
},
chainId: {
type: ControlType.Number,
title: "Chain ID",
},
clientId: {
type: ControlType.String,
title: "Client ID",
},
contractAddress: {
type: ControlType.String,
title: "Contract Address",
},
})