rep-attestation-frontend

Frontend for making attestations related to the OMA3 App Registry. Built with Next.js, TypeScript, and Reown AppKit for seamless wallet integration.

License and Participation

• Code is licensed under MIT
• Contributor terms are defined in CONTRIBUTING.md

Licensing Notice
This initial version (v1) is released under MIT to maximize transparency and adoption.

OMA3 may license future versions of this reference implementation under different terms (for example, the Business Source License, BSL) if forks or incompatible implementations threaten to fragment the ecosystem or undermine the sustainability of OMA3.

OMA3 standards (such as specifications and schemas) will always remain open and are governed by OMA3’s IPR Policy.

Features

• Schema-driven attestation forms - Dynamic form generation from JSON schemas
• Multiple attestation types - Certification, Endorsement, Linked Identifier, User Review
• Modern wallet integration - Social logins, email authentication, and 500+ wallet support
• Responsive design - Built with Tailwind CSS and shadcn/ui components
• Type-safe - Full TypeScript support with proper validation

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository:

git clone https://github.com/oma3dao/rep-attestation-frontend.git
cd rep-attestation-frontend

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local
# Edit .env.local with your values (see Environment Variables below)

Deploying to Vercel? For environment variable values, domain configuration, and Vercel project setup, see the Deployment Guide (Section 5). This README covers local development workflow.

4. Run the development server:

npm run dev

5. Build for production:

npm run build

Open http://localhost:3000 to view the application.

Wallet Integration Setup

Environment Variables

Create a .env.local file in the root directory with the following variable:

# ThirdWeb Configuration (required)
# Get from https://thirdweb.com/dashboard
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_thirdweb_client_id

Getting a ThirdWeb Client ID

1. Go to ThirdWeb Dashboard
2. Create an account or sign in
3. Create a new project or select an existing one
4. Copy your Client ID from the project settings
5. Add it to your .env.local file

Features Enabled

• Social Login: Google, Facebook, Apple, Discord, and more
• Email Login: Direct email authentication with OTP
• Wallet Connect: MetaMask, Coinbase Wallet, WalletConnect mobile wallets
• Built-in Chain Switching: Automatic network switching for supported chains

Usage

The wallet integration provides:

• Single ConnectButton with all login options in a modal
• ThirdWeb's unified state management hooks
• Automatic network switching for supported chains
• Graceful fallbacks for unsupported wallets

Project Structure

src/
├── app/                    # Next.js app router pages
│   ├── api/               # Server-side API routes
│   │   ├── controller-witness-proxy/  # CORS proxy for controller witness
│   │   └── eas/           # EAS delegated attestation + nonce endpoints
│   ├── attest/            # Attestation creation pages
│   ├── dashboard/         # User dashboard (subjects, keys, attestations)
│   ├── publish/           # Publish attestation pages (by type)
│   ├── account/           # Account management
│   └── client.ts          # ThirdWeb client configuration
├── components/            # Reusable React components
│   ├── ui/               # shadcn/ui base components
│   ├── dashboard/        # Dashboard-specific components
│   ├── home/             # Landing page components
│   └── ...               # Form inputs, DID inputs, auth, attestation views
├── config/                # Configuration files
│   ├── chains.ts         # Chain definitions (OMAChain mainnet/testnet/devnet)
│   ├── schemas.ts        # Attestation schema definitions (generated)
│   ├── publish-categories.ts  # Publish workflow categories
│   ├── subsidized-schemas.ts  # Schemas eligible for gas subsidy
│   └── ...               # Wallets, social platforms, home workflows
├── lib/                   # Utility functions and business logic
│   ├── server/           # Server-only code (EAS routes, delegate key)
│   ├── utils/caip10/     # CAIP-10 address parsing and validation
│   ├── blockchain.ts     # Wallet hooks and chain management
│   ├── eas.ts            # EAS attestation helpers
│   ├── omatrust-backend.ts  # Backend API client
│   ├── service-urls.ts   # Chain-prefixed service URL derivation
│   └── service.ts        # High-level attestation service layer
└── app/globals.css        # Global styles (Tailwind)

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run update-schemas - Update schemas from JSON files

Schema Management

This project uses JSON schemas to generate TypeScript attestation forms. Schema definitions live in the rep-attestation-tools-evm-solidity repository under schemas-json/. For the full authoring guide — OMA3 extensions (x-oma3-*), best practices, and example structures — see that repo's schemas-json/README.md.

Updating Schemas

When schema definitions change in rep-attestation-tools-evm-solidity, you need to regenerate the frontend schemas:

This is the beginning of the README. Read the rest at the original. Read the full README ↗