Skip to content

Frontend Overview

The Iyup frontend is a Next.js application that provides a web interface for interacting with the Iyup Protocol. It handles document upload, encryption, marketplace trading, and document verification.

Technology Stack

  • Framework: Next.js 14 (App Router)
  • UI Library: HeroUI (NextUI fork)
  • Wallet: Mysten dApp Kit
  • Storage: Walrus Protocol client
  • Encryption: Web Crypto API (AES-256-GCM)
  • Language: TypeScript

Project Structure

frontend/
├── app/                    # Next.js app directory
│   ├── (client)/          # Client-side routes
│   │   ├── marketplace/   # Marketplace pages
│   │   ├── my-tokens/     # Access key retrieval
│   │   ├── upload/        # Document registration
│   │   ├── verify/        # Document verification
│   │   └── zk-commitments/ # ZK commitments page
│   └── _components/       # Shared components
├── components/            # UI components
│   ├── navbar.tsx        # Navigation
│   └── wallet/           # Wallet connection
├── services/             # Business logic & API
│   ├── documents.service.ts
│   ├── marketplace.service.ts
│   ├── vault.service.ts
│   ├── zk-vault.service.ts
│   ├── walrus.service.ts
│   ├── seal.service.ts
│   ├── zkproof.service.ts
│   └── zk-commitments.service.ts
├── lib/                  # Utilities
│   ├── contracts.ts     # Contract addresses
│   ├── crypto.ts        # Encryption utilities
│   ├── access-crypto.ts # Key derivation
│   └── sui.ts           # Sui client setup
└── types/               # TypeScript types

Core Features

1. Document Registration

  • Client-Side Encryption: Documents encrypted before leaving browser
  • Threshold Encryption: Optional Mysten Seal threshold encryption (2-of-3 servers)
  • Zero-Knowledge Mode: Optional privacy-preserving registration with ZK commitments
  • Walrus Storage: Decentralized storage with erasure coding
  • On-Chain Registration: Document hash or ZK commitment stored on Sui

2. RWA Marketplace

  • List Tokens: Sellers can list RWA tokens with custom pricing
  • Buy/Sell: Secure peer-to-peer trading with automatic token transfer
  • Price Updates: Sellers can update listing prices
  • Cancel Listings: Remove listings and return token to seller
  • Automatic Access Transfer: Access keys automatically available to new token owners

3. Document Verification

  • ZK Proof Verification: Full zero-knowledge commitment verification
  • Hash Verification: Traditional SHA-256 hash comparison
  • Decryption: Decrypt documents using cryptographic keys
  • Integrity Checks: Verify documents haven't been tampered with

4. Access Key Management

  • Ownership Verification: Only token owners can retrieve access keys
  • My Tokens Page: Easy interface to retrieve keys for owned tokens
  • Auto-Population: Automatic key retrieval after marketplace purchases

Key Pages

Home (/)

Landing page with:

  • Platform overview
  • Feature highlights
  • Quick start buttons
  • How it works section

Upload (/upload)

Document registration page:

  • File upload interface
  • Token selection
  • Encryption mode selection
  • Registration form

Marketplace (/marketplace)

Trading interface:

  • Browse active listings
  • View listing details
  • Purchase tokens
  • Manage your listings

My Tokens (/my-tokens)

Token management:

  • View owned tokens
  • Retrieve access keys
  • Access document metadata

Verify (/verify)

Document verification:

  • Enter token address
  • Retrieve and decrypt document
  • Verify hash/commitment
  • Download verified document

ZK Commitments (/zk-commitments)

ZK commitment management:

  • View registered commitments
  • Generate proofs
  • Verify proofs

Services Architecture

See Frontend Services for detailed service documentation.

User Flows

See User Flows for detailed flow documentation.

Environment Variables

# Site Configuration
NEXT_PUBLIC_SITE_URL=
NODE_ENV=development
 
# Iyup Smart Contract Addresses (Sui Testnet)
NEXT_PUBLIC_IYUP_PACKAGE_ID=
NEXT_PUBLIC_IYUP_REGISTRY_ID=
NEXT_PUBLIC_IYUP_MARKETPLACE_ID=
NEXT_PUBLIC_ZK_REGISTRY_ID=
 
# Indexer API
API_URL=
NEXT_PUBLIC_INDEXER_URL=
 
# Walrus Storage
NEXT_PUBLIC_WALRUS_PUBLISHER_URL=
NEXT_PUBLIC_WALRUS_AGGREGATOR_URL=
 
# Seal Threshold Encryption
NEXT_PUBLIC_SEAL_PACKAGE_ID=
NEXT_PUBLIC_SEAL_SERVERS=
NEXT_PUBLIC_SEAL_THRESHOLD=2

Installation

# Install dependencies
cd frontend
pnpm install
 
# Run development server
pnpm dev
 
# Build for production
pnpm build
 
# Start production server
pnpm start

Security Features

Client-Side Encryption

  • Documents encrypted before upload
  • Keys derived from token and owner addresses
  • No unencrypted data sent over network

Access Control

  • On-chain ownership verification
  • Frontend verifies ownership before API calls
  • Cryptographic key derivation

Privacy

  • Optional zero-knowledge mode
  • No key storage on-chain
  • Encrypted storage on Walrus

Next Steps