🔍 What is vlayer?

vlayer enables developers to extract, verify, and integrate real-world data into Ethereum smart contracts securely without exposing sensitive information.

Learn more: vlayer Documentation

📋 Getting Started with Web Proofs

This Getting Started repo demonstrates Web Proofs - one of vlayer's core features. It allows you to:

1. Prove ownership of a Twitter/X account by verifying data from Twitter
2. Extract the handle from your Twitter account
3. Verify the proof on-chain (Optimism Sepolia testnet)

The proof is generated client-side using the vlayer chrome browser extension, ensuring your Twitter credentials never leave your browser.

🏗️ Project Structure

webproof-getting-started/
├── contracts/              # Solidity contracts 
│   ├── src/vlayer/        # Web proof prover and verifier contracts
│   ├── deploy/            # Deployment scripts
│   └── test/              # Contract tests
└── react-frontend/        # React frontend application
    └── src/               # Frontend source code

🚀 Prerequisites

• Bun - For deployment scripts
• Node.js - For the React frontend
• vlayer Browser Extension - For generating web proofs

📦 Installation

1. Install Dependencies & Build Contracts

cd contracts
forge soldeer install
forge build

2. Install Deployment Dependencies

cd contracts/deploy
bun install

3. Create .env.testnet.local

Create a .env.testnet.local file in the contracts/deploy directory with the following:

VLAYER_API_TOKEN=""
EXAMPLES_TEST_PRIVATE_KEY="0x"

Obtain your VLAYER_API_TOKEN from the vlayer developer dashboard and create a new jwt token:

4. Deploy Contracts

Deploy to vlayer testnet:

cd contracts/deploy
bun run deploy:testnet

This will deploy the contracts and create a .env file with the deployed contract addresses.

5. Copy .env to /react-frontend

Copy .env from /contracts/deploy to /react-frontend and also add your jwt and wallet to new .env. Completed .env should look like:

VITE_PROVER_ADDRESS=0x951a2e9612d6ace80ebd82f0f66a087c2932d31d
VITE_VERIFIER_ADDRESS=0x2462b1347212a4b956fd65a534b17b6a3a086418
VITE_CHAIN_NAME=optimismSepolia
VITE_PROVER_URL=https://stable-fake-prover.vlayer.xyz/1.5.1/
VITE_JSON_RPC_URL=https://sepolia.optimism.io
VITE_NOTARY_URL=https://test-notary.vlayer.xyz/v0.1.0-alpha.12
VITE_WS_PROXY_URL=wss://test-wsproxy.vlayer.xyz/jwt
VITE_GAS_LIMIT=5000
VITE_EXAMPLES_TEST_PRIVATE_KEY=**"your private key here"**
VITE_VLAYER_API_TOKEN=**"your api token here"**

6. Install Frontend Dependencies

cd react-frontend
npm install
# or
bun install

7. Start the Frontend

cd react-frontend
npm run dev
# or
bun run dev

Visit http://localhost:5173 to see the application.

📝 How It Works

1. User clicks "Prove" in the frontend
2. vlayer browser extension opens and guides you through:
   • Logging into Twitter/X
   • Navigating to your account settings API
   • Notarizing the API response
3. Web proof is generated using zero-knowledge proofs
4. Proof is sent to vlayer's prover network
5. Smart contract verifies the proof on Optimism Sepolia
6. Transaction link is displayed for viewing on the block explorer

🔐 Smart Contracts

WebProofProver.sol

Extracts and proves Twitter screen name from the API response:

• Verifies the web proof
• Extracts screen_name from JSON response
• Returns proof data for on-chain verification

WebProofVerifier.sol

Verifies the proof on-chain and stores the verified screen name.

🧪 Testing

Run contract tests:

cd contracts
vlayer test