Mission Enrollment

An enrollment tool for a collaborative artistic mission (Zinneke Rescue Mission) on the Base blockchain (later on the Superchain). A blockchain app being openly built by a human and a non-human since summer 2024.

This app facilitates the enrollment of its connected user for an up-coming onchain mission. Its use requires the verification of a name on a blockchain, a token from an in-person event, and an attestation signed by the mission coordinator on the Base blockchain.

This project implements a transparent process reliant on 3 steps of control and validation: identity check, event attendance, and enrollment attestation. It is built as a web application with Next.js and React, and runs on top of smart contracts integrating blockchain protocols: Basename (ENS), Proof of Attendance Protocol (POAP) and Ethereum Attestation Service (EAS).

Project Structure

Directory Organization

/
├── app/                    # Next.js app router pages and configuration
│   ├── config/            # Web3 and chain configurations
│   └── providers/         # React context providers
├── components/            # React components
│   ├── SuccessAttestation.tsx    # Final success screen
│   ├── EventAttendanceVerification.tsx    # Event attendance verification
│   ├── EnrollmentAttestation.tsx    # Attestation creation
├── services/             # Core services
│   ├── apollo/           # GraphQL client
│   ├── store/            # State management
│   └── web3/            # Blockchain connectivity
├── utils/               # Utility functions
└── types/              # TypeScript definitions

Custom Hooks

useNetworkSwitch

Custom hook for handling network switching between Base and Base Sepolia networks:

• Manages network switching state
• Handles network switching errors
• Provides network status information

Technical Stack

• Frontend: React with Next.js (Node.js v18)
• Blockchain Interaction: ethers.js, wagmi v2, viem/chains
• Basename/ENS Integration: user name resolution via ethers.js with two-step verification
• POAP API: Custom API route with caching, rate limiting, and a delay implementation
• Middleware: Custom implementation for POAP API request handling with rate limiting
• Attestation: Ethereum Attestation Service (EAS) SDK v2.7.0 with role-based access
• OnchainKit (Coinbase): Integrated for identity and wallet functionalities
• GraphQL Integration: Apollo Client for querying attestation data from EAS GraphQL endpoint with pagination and caching
• Recent Attestations: Paginated view of attestations with error handling and fallback UI

State Management

The application uses a multi-layered state management approach:

• Zustand stores for:
  • Global state (network, currency prices)
  • Verification state (user input, verification status)
• Apollo Client for GraphQL state
• React Query for data fetching

Testing Infrastructure

The project includes comprehensive testing setup:

• Jest for unit testing
• React Testing Library for component tests
• Contract testing via Hardhat
• End-to-end testing capabilities

Other Dev Tools

• State Management: React Query
• Wallet Login: RainbowKit (Recommended: Coinbase Wallet)
• Styling: Tailwind CSS, daisy UI
• Type Checking: TypeScript
• Code Quality: ESLint, Jest

Screenshots

Enrollment-Step0	Enrollment-Step1	Enrollment-Pause1	Enrollment-Step2	Enrollment-Pause2	Enrollment-Step3

Note: A success screen is displayed after successful attestation creation, showing attestation details and providing a link to view it on EAS Explorer.

Getting Started

Prerequisites

• Node.js (v18 or later)
• Yarn
• An Ethereum wallet (recommended: Coinbase Wallet)
• Environment Variables:
  • NEXT_PUBLIC_ONCHAINKIT_API_KEY: API key for OnchainKit integration
  • NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: Project ID for WalletConnect
  • NEXT_PUBLIC_ALCHEMY_API_KEY: API key for Alchemy services
  • NEXT_PUBLIC_POAP_API_KEY: API key for POAP data retrieval
  • NEXT_PUBLIC_BASE_SEPOLIA_RPC_URL: RPC URL for Base Sepolia network
  • NEXT_PUBLIC_EAS_CONTRACT_ADDRESS: Address of the EAS contract
  • NEXT_PUBLIC_DEFAULT_CHAIN: Chain ID (default: 8453 for Base)

Installation

1. Clone the repository:

   git clone https://github.com/daqhris/MissionEnrollment.git
   cd MissionEnrollment
   

2. Install dependencies:

   yarn install
   

3. Set up environment variables: Create a .env.local file in the root directory and add the necessary environment variables (refer to .env.example for required variables).

Running the Application

1. Start the development server:

   yarn dev
   

2. Open http://localhost:3000 in your browser to see the application.

Usage

Mission Enrollment provides a streamlined, one-page application for a select number of talented individuals to enroll in advance of the Zinneke Rescue Mission.

1. User connects their Ethereum wallet using the wallet connector and verifies their identity with Basename or ENS name.
2. The application fetches and displays relevant POAPs, specifically ETHGlobal Brussels 2024, extracting role information dynamically.
3. Its interface's second stage leads to verification of event attendance and role through POAPs before proceeding to attestation.
4. User creates an attestation on the Base Sepolia network using EAS, with automatic network switching if needed.
5. Upon successful attestation creation, a success screen is displayed with attestation details and a link to view it on EAS Explorer.

API Routes

• /api/fetchPoaps: Fetches POAPs for a given Ethereum address, Basename or ENS name.

Smart Contracts

AttestationService.sol: This contract implements an onchain attestation using the Ethereum Attestation Service (EAS) through the official EAS SDK v2.7.0.

Smart Contract Functions

1. createMissionEnrollmentSchema(): Creates the schema for enrollment attestations with 10 fields
2. createMissionEnrollmentAttestation(): Creates an attestation for a user with associated information
3. verifyAttestation(bytes32 attestationId): Verifies the validity of an onchain attestation

EAS Architecture and Schema

The attestation system leverages the Ethereum Attestation Service (EAS) infrastructure with the following components:

Schema Details

• Schema Structure: address userAddress,string verifiedName,string proofMethod,string eventName,string eventType,string assignedRole,string missionName,uint256 timestamp,address attester,string proofProtocol
• Schema UID: 0xa580685123e4b999c5f1cdd30ade707da884eb258416428f2cbda0b0609f64cd
• View Attestations on EAS Explorer: Base Sepolia Schema #910
• Fields:
  • userAddress: Ethereum address of the enrolled user
  • verifiedName: User's verified Basename or ENS name
  • proofMethod: Method used for verification (e.g., "POAP")
  • eventName: Name of the verified event (e.g., "ETHGlobal Brussels 2024")
  • eventType: Type of event attended (e.g., "Hackathon")
  • assignedRole: Role assigned at the event (dynamically extracted from POAP)
  • missionName: Name of the mission being enrolled for
  • timestamp: Unix timestamp of attestation creation
  • attester: Address of the attestation creator
  • proofProtocol: Protocol used for proof (e.g., "POAP")

Contract Architecture

• Proxy Pattern: UUPS (Universal Upgradeable Proxy Standard)
  • Allows contract upgrades while preserving state and address
  • Implements access control for upgrade operations
• Integration:
  • Uses EAS SDK v2.7.0 for attestation operations
  • Connects to Base's EAS contract at 0x4200000000000000000000000000000000000021
  • Implements role-based access control for attestation creation

Onchain Attestation Resources

• EAS Documentation
• EAS SDK Reference
• Base Network EAS Guide
• Base Sepolia Explorer
• EAS Contract on Base Sepolia

Frontend Components

Core Components

• IdentityVerification.tsx: Handles user identity verification through Basenames

  • Implements error boundaries and fallback UI
  • Manages loading states and animations
  • Real-time Basename resolution with caching
  • Wallet connection state management
  • Network status monitoring

• EventAttendanceVerification.tsx: Manages POAP verification

  • Dynamic role extraction from POAP data
  • Animated verification process with loading states
  • Comprehensive error handling with retries
  • API request management and rate limiting
  • POAP token filtering and validation

• EnrollmentAttestation.tsx: Handles attestation creation

  • Automatic network switching logic
  • Transaction status management and monitoring
  • Data encoding for EAS attestations
  • Wallet integration via wagmi hooks
  • Error recovery mechanisms
  • Gas estimation and optimization

• SuccessAttestation.tsx: Final success screen component

  • Displays attestation creation confirmation
  • Shows attestation details and transaction status
  • Provides EAS Explorer link for verification
  • Implements error boundaries and fallback UI
  • Manages component state and animations
  • Handles network-specific functionality

Technical Implementation

Network Management

• Automatic chain switching (Base/Base Sepolia)
• Network status monitoring and recovery
• Transaction confirmation handling
• Gas price optimization
• Error recovery mechanisms

Wallet Integration

• Multiple wallet support (MetaMask, WalletConnect, Coinbase)
• Connection state management
• Transaction signing flow
• Account change handling
• Network synchronization

ETHGlobal Brussels 2024

This web app includes a special feature that is dependent on in-person participation at ETHGlobal Brussels 2024. Users are invited to verify ownership of an ETHGlobal-certified POAP, adding an extra layer of credibility to their enrollment attestations. The mission coordinator has participated in the global hackathon when it was held for the first time in Belgium.

Affiliated Wallet Addresses

• daqhris.base.eth: 0xb5ee030c71e76c3e03b2a8d425dbb9b395037c82
• mission-enrollment.base.eth: 0xF0bC5CC2B4866dAAeCb069430c60b24520077037

Note: Contract addresses are maintained and updated regularly as the app is still under construction.

External Resources

• Ethereum Attestation Service Documentation
• Basename Documentation
• POAP Documentation

Disclaimer

This project builds upon components from Scaffold-ETH 2 and leverages open-source protocols for blockchain functionality. If necessary, users should verify the authenticity of mission enrollments through additional public means.

The creation of this dApp was initiated by daqhris during a virtual hackathon: ETHGlobal Superhack 2024. It is built thanks to the assistance and collaboration of Devin, the world's first AI software engineer from Cognition.AI.

Hackathon Submission: ethglobal.com/showcase/missionenrollment-i4fkr

Short Demo Video (December 18, 2024): mission-enrollment.daqhris.com/Preview-MissionEnrollment-WebApp