ERC7730 Previewer

Problem Statement

JSON File Upload & Parsing Users can upload JSON files containing ERC7730 schemas, and the app validates and parses them.Function Analysis & Visualization The app automatically: Extracts function signatures from the JSON Identifies function names (approve, mint, transfer, burn) Maps functions to visual preview images Displays the intent/description of each functionVisual Preview System The app provides visual previews for different transaction types: Approve operations: Shows approval flow images Mint operations: Displays minting process visuals Transfer operations: Shows transfer workflow images Burn operations: Displays burning process visuals Each function gets matched with relevant preview images that show what the user will see on their Ledger device during signing.Device Simulation The app includes device simulators for both Ledger Flex and Stax devices, showing exactly how the transaction will appear on the hardware wallet screen.JSON Schema Validation The app validates that uploaded JSON follows the ERC7730 format: Must contain display.formats section Each function should have an intent description Proper metadata structure

Solution

task1: The ERC7730 JSON file follows a standardized schema for Ledger clear signing. 1. Start with contract analysis: Get ABI from contract address 2. Identify key functions: approve, transfer, mint, burn, etc. 3. Define user intents: What each function does in plain English 4. Map parameters: Link ABI parameters to display labels 5. Set formatting rules: How addresses, amounts should appear task2:JsonFileUpload (json-file-upload.tsx):File upload handling with drag & dropJSON validation and parsingError handling for invalid filesState management for parsed dataFunctionAnalyzer (function-analyzer.tsx): - Parses display.formats section - Extracts function signatures and intents - Maps functions to preview images - Renders function cards with metadata