<GatedComponent />

The <GatedComponent/> is a React component designed to conditionally render content based on specific criteria defined by policies. This component is intended to be utilized in scenarios where content access needs to be restricted according to one or more policies. Before using <GatedComponent/>, ensure that you have at least one policy created.

Usage

To use <GatedComponent/>, wrap any content you wish to gate with this component, and provide the required props, including an array of policyIds and a walletAddress. If the policy rules associated with the provided policyIds are satisfied for the given walletAddress, the children components will be rendered. Otherwise, the content will not be displayed.

<GatedComponent policyIds={['policy1', 'policy2']} walletAddress="0x123...">
  {/* Content to be gated */}
  <div>
    This content is only visible if the policy rules are satisfied.
  </div>
</GatedComponent>

Props

Name	Type	Description
`policyIds`	`Array<string>`	An array of policy IDs. These are identifiers for the policies that will be evaluated to determine if the child components should be rendered. It is essential to have these policies created and configured beforehand.
`walletAddress`	`string`	The wallet address to be evaluated against the specified policies. The content within the `<GatedComponent/>` will only be rendered if the wallet address satisfies the conditions defined by the policies identified in `policyIds`.
`children`	`React.ReactNode`	The content or components that are to be conditionally rendered based on the policy evaluation outcome. If the policy conditions are met for the provided `walletAddress`, these children components will be displayed.