Code example
Props
Types

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"

Props

Anchor link to section titled "Props"

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`

Types

Anchor link to section titled "Types"

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`

Active

Anchor link to section titled "Active"

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

Condition

Anchor link to section titled "Condition"

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`

Reaction

Anchor link to section titled "Reaction"

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}`

LinkType

Anchor link to section titled "LinkType"

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`

On this page

Code example
Props
Types