RichestRevealer Frontend

This is a Next.js project bootstrapped with create-next-app, enhanced with integrations to a privacy-preserving Ethereum smart contract called RichestRevealer.

The frontend interacts with the smart contract to submit encrypted wealth values, compute the richest participant securely, and reveal results with privacy protections powered by the Inco Lightning SDK.

Project Links

• Smart Contract Repo 🔗
• Smart Contract Walkthrough Video 🔗
• Walkthrough video smart contract 🔗
• Frontend Walkthrough Video 🔗

---

Features

• Encrypted Wealth Submission: Participants submit encrypted wealth values using Inco Lightning SDK, ensuring privacy.
• Smart Contract Interaction: Connects to the RichestRevealer smart contract on your chosen testnet or local blockchain.
• Participant Status Tracking: Shows real-time submission statuses of known participants.
• Winner Highlighting: Visually highlights the richest participant(s) with dynamic UI feedback.
• Owner-Restricted Actions: Restricts privileged actions like computing richest and requesting decryption to contract owner.
• Responsive and Accessible UI: Clean design using Tailwind CSS for styling, including clear submission and winner status indicators.
• Toast Notifications: Displays toast messages for every tansaction and fetch request.

---

Getting Started

Prerequisites

• Node.js >= 16.x
• npm or yarn or pnpm
• A wallet like MetaMask configured to your testnet (e.g., Goerli)
• Access to the deployed RichestRevealer contract address and ABI
• API keys or configuration for Inco Lightning SDK (testnet mode)

Installation

Clone the repo and install dependencies:

git clone <your-repo-url>
cd richestrevealer-frontend
npm install
# or
yarn install
# or
pnpm install

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Key Files Explained

• app/page.tsx: The main UI entry point displaying participants, submission buttons, and results.
• app/components/ContractInteraction.tsx: Displays each participant’s info with their submission and winner status and other components.
• app/hooks/useRichestRevealer.ts: Custom hook to interface with the RichestRevealer smart contract via viem and set toast fetch data and status.
• utils/contract.js: Contains the smart contract address and ABI for easy import.

---

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.