Token Gating

import { useAccount, useReadContract } from 'wagmi';

const NFT_CONTRACT = "0xYOUR_CONTRACT_ADDRESS";
const NFT_ABI = [
  {
    inputs: [{ name: "owner", type: "address" }],
    name: "balanceOf",
    outputs: [{ name: "", type: "uint256" }],
    stateMutability: "view",
    type: "function",
  },
];

function TokenGatedContent() {
  const { address } = useAccount();

  const { data: balance } = useReadContract({
    address: NFT_CONTRACT,
    abi: NFT_ABI,
    functionName: "balanceOf",
    args: [address],
  });

  const hasAccess = balance && Number(balance) > 0;

  if (!hasAccess) {
    return (
      <div className="text-center p-8">
        <h2>Access Restricted</h2>
        <p>You need to hold an NFT from this collection to view this content.</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Welcome, NFT Holder!</h2>
      {/* Your gated content here */}
    </div>
  );
}

export default TokenGatedContent;