Feat/content/feature hook

[BigBen-7]

PR: feat(hooks): Develop a Token-Gated Content/Feature Hook

**Closes #19 **

Description

This pull request introduces useTokenGatedAccess, a powerful and reusable React hook that serves as the primary tool for implementing token-gated functionality across the application.

This hook abstracts away the complexity of on-chain data fetching. It allows any component to easily determine if the connected user meets specific on-chain criteria (such as owning an NFT or holding a minimum balance of a token) and react accordingly. This provides a clean, declarative, and centralized way to manage access to exclusive UI elements, features, or content.

---

Implementation Details

useTokenGatedAccess Hook

• Signature:
  The hook is designed to be flexible, accepting an object with the contract address and the specific ownership criteria:
  useTokenGatedAccess({ contractAddress, minBalance?, tokenId? })

• On-Chain Logic:

  • It leverages the useFlare hook to get the connected user's account and the network provider.
  • It uses ethers.js to create a generic contract instance.
  • The hook intelligently determines which check to perform:
    • If tokenId is provided, it calls ownerOf(tokenId) to verify ERC-721 ownership.
    • If minBalance is provided, it calls balanceOf(account) to verify ERC-20/ERC-1155 token balance.

• Reactive State:

  • The hook returns a simple and reactive state object: { hasAccess: boolean, isLoading: boolean }.
  • A useEffect hook ensures the on-chain check is re-run whenever the user's account or the input criteria (contractAddress, tokenId, etc.) change, keeping the UI perfectly in sync with the user's wallet state.

• Demonstration:
  The hook has been demonstrated by gating a sample UI component, which will now only render if the connected user holds the required token.

---

How to Test

1. Setup

• You will need two wallet accounts: one that meets the on-chain criteria (e.g., owns the NFT) and one that does not.
• Use the hook in a test component:

  const { hasAccess, isLoading } = useTokenGatedAccess({
    contractAddress: '0x...',
    tokenId: 1, // or minBalance: 100
  });
  
  if (isLoading) return <p>Checking access...</p>;
  if (!hasAccess) return <p>You do not have access.</p>;
  
  return <h2>Welcome! Here is your exclusive content.</h2>;

2. Test the "Has Access" Flow

1. Connect the wallet that meets the criteria.
2. Navigate to the test page.
3. Observe: After a brief "Checking access..." message, the "Welcome! Here is your exclusive content" message should appear.

3. Test the "No Access" Flow

1. Connect the wallet that does not meet the criteria.
2. Navigate to the test page.
3. Observe: After the loading message, the "You do not have access" message should be displayed.

4. Test Reactivity

1. Start while connected with the wallet that has access.
2. Use your wallet to switch to the account that does not have access.
3. Observe: The component should automatically re-render to show the "You do not have access" message.