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.

View in Storybook

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