Tokengate
The tokengate
component presents the gate requirements to unlock a reaction, and the buyer's eligibility status based on their connected wallet.
Code example
Anchor link to section titled "Code example"
Name | Description | Required | Type |
---|---|---|---|
connectButton |
CTA when no wallet is connected. It should trigger the connect wallet flow. | true |
JSX.Element |
connectedButton |
CTA when the wallet is connected. If undefined, the connectButton is used. |
false |
JSX.Element |
isLoading |
Display loading state. | false |
boolean |
isLocked |
Set if connected wallet contains the required tokens. If undefined , logic is determined internally by comparing the contract addresses of conditions and unlocking tokens. |
false |
boolean |
isSoldOut |
Displays sold-out state and prompts users to check back later for stock updates. | false |
boolean |
isConnected |
Set if a wallet is connected. | true |
boolean |
requirements |
Requirements to unlock a reaction. | false |
Requirements |
unlockingTokens |
Array of eligible tokens in the user's connected wallet. | false |
UnlockingToken[] |
exclusiveCustomTitles |
Custom titles applied to gate for exclusive reactions. | false |
CustomTitles |
discountCustomTitles |
Custom titles applied to gate for discount access reactions. | false |
CustomTitles |
active |
Period of time in which the gate is active. | false |
Active |
reaction |
Reaction applied when the requirements are met. The default reaction type is exclusive . |
false |
Reaction |
redemptionLimit |
Information related to the redemption limit of the reaction. | false |
RedemptionLimit |
Requirements
Anchor link to section titled "Requirements"Name | Description | Required | Type |
---|---|---|---|
conditions |
Array of conditions that need to exist to meet the requirements. | true |
Condition[] |
logic |
Logic that is applied to the conditions. | true |
'ANY' | 'ALL' |
Unlocking Token
Anchor link to section titled "Unlocking Token"Name | Description | Required | Type |
---|---|---|---|
name |
Name of the unlocking token. | true |
string |
imageUrl |
URL of the image of the unlocking token. | true |
string |
collectionName |
Name of the collection that the unlocking token corresponds to. | true |
string |
contractAddress |
Address of the contract of the unlocking token. | true |
string |
Custom Titles
Anchor link to section titled "Custom Titles"Name | Description | Required | Type |
---|---|---|---|
lockedTitle? |
Custom title for the locked state of the gate. | false |
string |
lockedSubtitle? |
Custom subtitle for the locked state of the gate. | false |
string |
unlockedTitle? |
Custom title for the unlocked state of the gate. | false |
string |
unlockedSubtitle? |
Custom subtitle for the unlocked state of the gate. | false |
string |
unlockedSubtitleWithRedemptionLimit? |
Custom subtitle for the unlocked state of the gate when redemption limits exist. | false |
string |
Name | Description | Required | Type |
---|---|---|---|
start? |
Starting date when the gate is active. | false |
string ISO Date format |
end? |
End date when the gate will no longer be active. | false |
string ISO Date format |
Name | Description | Required | Type |
---|---|---|---|
name |
Name that will be displayed for the condition. | true |
string |
imageUrl |
URL of the image that will be displayed for the condition. | false |
string |
contractAddress |
Address of the contract related to the condition. | true |
string |
links |
Array of links that will be displayed for the condition | false |
LinkType[] |
description |
Description that will be displayed for the condition | false |
ReactNode |
Redemption limit
Anchor link to section titled "Redemption limit"Name | Description | Required | Type |
---|---|---|---|
total |
Total amount of reactions that can be redeemed with the existing unlocking tokens. | true |
number |
perToken |
Redemption limit per token. | true |
number |
Name | Description | Required | Type |
---|---|---|---|
type |
Reaction type, defaults to exclusive_access . |
true |
'exclusive_access' | 'discount' |
discount |
Additional information for the discount reaction. |
false when type is "exclusive_access" true when type is "discount" |
{type: 'percentage' | 'fixedAmount', value: number} |
Name | Description | Required | Type |
---|---|---|---|
label |
Custom title for a link | false |
string |
marketplace |
Predefined marketplaces | false when label is defined true when label is undefined |
"Blur" | "Coinbase NFT" | "LooksRare" | "MagicEden" | "OpenSea" | "Rarible" | "SuperRare" |
icon |
The icon representing the link | false |
JSX.Element |
imageUrl |
The address to the icon representing the link | false |
string |
url |
Url for the link | true |
string |