The `tokengate` component presents the gate requirements to unlock a reaction, and the buyer's eligibility status based on their connected wallet. ## Code example

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