Prove & Mint: Verified by Reclaim Protocol (zkTLS)

This project is a full-stack dApp that allows users to mint a special NFT if they meet certain eligibility conditions, verified using the Reclaim Protocol (zkTLS). Users prove their eligibility (e.g., social followers, account status, etc.) via Reclaim, and if successful, can mint an NFT on-chain.

---

🚀 Project Overview

• Proof-based NFT Minting: Users must prove eligibility (e.g., >1000 Twitter followers) using Reclaim Protocol before minting.
• zkTLS Verification: Leverages Reclaim's zero-knowledge proof system for privacy-preserving eligibility checks.
• Seamless UX: QR code-based proof flow, wallet connection, and instant feedback with toast notifications.
• Addresses:
  • Attestor.sol- 0x583F5bCc04FE351eB13D7F8D9Ca98C8A72FF229B
  • CroissantNFT.sol- 0xe933fB4624eE012592A96900166cF0226Ed25072

---

✨ Features

• Connect Wallet: Supports EVM wallets via Wagmi.
• Eligibility Proof: Users generate a proof request and scan a QR code to submit their proof via Reclaim.
• On-chain Verification: Proof is verified on-chain using a smart contract.
• Conditional Minting: Only eligible users (e.g., >1000 followers) can mint the NFT.
• User Feedback: Beautiful UI with real-time toast notifications (Sonner) for all major actions.
• Not Eligible UI: Friendly screen for users who do not meet the criteria.

---

🛠️ Getting Started

1. Clone the Repository

git clone <your-repo-url>
cd reclaim-wagmi-example

2. Install Dependencies

npm install --legacy-peer-deps

3. Configure Reclaim Credentials

Edit src/App.js and fill in your Reclaim App ID, App Secret, and Provider ID:

const APP_ID = "YOUR_APP_ID";
const APP_SECRET = "YOUR_APP_SECRET";
const PROVIDER_ID = "YOUR_PROVIDER_ID";

4. Set Contract Addresses

Update the contract addresses in:

• src/verify-proof.jsx (for proof verification)
• src/eligiblity-screen.jsx (for NFT minting)

And set the correct chainId for your network.

5. (Optional) Update Eligibility Logic

By default, eligibility is set to result > 1000 (e.g., >1000 Twitter followers). You can change this logic in src/App.js inside the handleVerified function.

---

🧑‍💻 Usage

1. Start the Development Server

   npm run start

2. Connect your wallet (ensure it's on the correct network).
3. Create Claim: Click "Create Claim QR Code" and scan with your phone.
4. Verify Proof: After submitting proof, click "Verify Proof" to trigger on-chain verification.
5. Mint NFT: If eligible, mint your NFT! If not, you'll see a friendly message.

---

📝 Customization

• Eligibility Criteria: Change the logic in handleVerified in src/App.js.
• NFT Contract: Replace the contract address and ABI in src/eligiblity-screen.jsx.
• UI/Branding: Update styles and images as desired.

---

📂 Code Structure

• src/App.js — Main app logic, proof flow, eligibility check.
• src/verify-proof.jsx — Handles proof transformation and on-chain verification.
• src/eligiblity-screen.jsx — NFT minting UI and logic for eligible users.
• src/not-eligible-screen.jsx — UI for ineligible users.
• src/config.js — Wagmi and network configuration.

---

🛟 Troubleshooting

• Wallet Issues: Ensure your wallet is on the correct network and refresh if needed.
• Proof Submission Fails: Double-check your Reclaim credentials and contract addresses.
• Dependency Issues: Use --legacy-peer-deps if you encounter npm errors.

---

🤝 Credits

• Reclaim Protocol for zkTLS proof system.
• Wagmi for wallet and contract integration.
• Sonner for toast notifications.

---

📝 License

MIT