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"
| Interface TokengateProps | Type | Description |
|---|---|---|
isConnected |
boolean |
Set if a wallet is connected. |
isLocked? |
boolean |
Set if connected wallet contains the required tokens. If undefined, logic is determined internally by comparing the contract addresses of conditions and unlocking tokens. |
isLoading? |
boolean |
Display loading state. |
isSoldOut? |
boolean |
Displays sold-out state and prompts users to check back later for stock updates. |
connectButton |
React.ReactNode |
CTA when no wallet is connected. It should trigger the connect wallet flow. |
connectedButton? |
React.ReactNode |
CTA when the wallet is connected. If undefined, the connectButton is used. |
requirements? |
Requirements |
Requirements to unlock a reaction. |
reaction? |
Reaction |
Reaction applied when the requirements are met. The default reaction type is exclusive. |
unlockingTokens? |
UnlockingToken[] |
Array of eligible tokens in the user's connected wallet. |
active? |
Active |
Period of time in which the gate is active. |
redemptionLimit? |
RedemptionLimit |
Information related to the redemption limit of the reaction. |
exclusiveCustomTitles |
CustomTitles |
Custom titles applied to gate for exclusive reactions. |
discountCustomTitles |
CustomTitles |
Custom titles applied to gate for discount access reactions. |
Requirements
Anchor link to section titled "Requirements"| Interface Requirements | Type | Description |
|---|---|---|
logic |
'ANY' | 'ALL' |
Logic that is applied to the conditions. |
conditions |
Condition[] |
Array of conditions that need to exist to meet the requirements. |
| Interface Reaction | Type | Description |
|---|---|---|
type |
string |
Name that wants to be displayed for the condition. |
imageUrl? |
string |
URL of the image that will be displayed for the condition. |
collectionAddress |
string |
Address of the collection related to the condition. |
| Interface Condition | Type | Description |
|---|---|---|
type |
'exclusive_access' | 'discount' |
Reaction type, defaults to exclusive_access. |
discount? |
{type: 'percentage' | 'amount', value: number} |
Additional information for the discount reaction. |
Unlocking Token
Anchor link to section titled "Unlocking Token"| Interface UnlockingToken | Type | Description |
|---|---|---|
name |
string |
Name of the unlocking token. |
imageUrl |
string |
URL of the image of the unlocking token. |
collectionName |
string |
Name of the collection that the unlocking token corresponds to. |
collectionAddress |
string |
Address of the collection of the unlocking token. |
Custom Titles
Anchor link to section titled "Custom Titles"| Interface CustomTitles | Type | Description |
|---|---|---|
lockedTitle? |
string |
Custom title for the locked state of the gate. |
lockedSubtitle? |
string |
Custom subtitle for the locked state of the gate. |
unlockedTitle? |
string |
Custom title for the unlocked state of the gate. |
unlockedSubtitle? |
string |
Custom subtitle for the unlocked state of the gate. |
unlockedSubtitleWithRedemptionLimit? |
string |
Custom subtitle for the unlocked state of the gate when redemption limits exist. |
Redemption limit
Anchor link to section titled "Redemption limit"| Interface RedemptionLimit | Type | Description |
|---|---|---|
total |
number |
Total amount of reactions that can be redeemed with the existing unlocking tokens. |
perToken |
number |
Redemption limit per token. |
| Interface Active | Type | Description |
|---|---|---|
start? |
ISODate string |
Starting date when the gate is active. |
end? |
ISODate string |
End date when the gate will no longer be active. |