MuralClash

MuralClash revolutionizes fan engagement by creating the world's first collaborative on-chain canvas specifically designed for sports communities. Built for ETHGlobal New York 2025, this platform transforms passive fan engagement into active, collaborative art creation that becomes a permanent part of blockchain history.

The Problem We're Solving Traditional fan engagement is limited to cheering from the sidelines, buying merchandise, or posting on social media. Fans have no way to collaboratively create lasting artifacts that represent their collective passion and energy around major sporting events. When fans want to show support for their teams, they're restricted to individual actions that don't build into something bigger and more meaningful.

Our Solution: Collaborative Fan Art on the Blockchain MuralClash provides fans with a shared digital canvas where they can collaborate to create team murals, support their favorite sponsors, and participate in friendly competition with rival fan bases. Every stroke is recorded permanently on the Chiliz blockchain, creating an immutable record of fan passion and creativity.

The Fan Experience When fans visit our platform during a major sporting event or hackathon, they immediately see a live collaborative canvas where hundreds of other fans are actively drawing. They select their team affiliation from major sponsors like Chiliz, The Graph, Walrus, or other ETHGlobal teams, and start contributing to their team's section of the canvas.

The experience is incredibly engaging because fans can see their contributions become part of something much larger. A single line drawing costs just 3 Fan Tokens, while detailed stickers cost 10 Fan Tokens. Every fan gets 100 tokens automatically when they start, ensuring everyone can participate regardless of their technical knowledge or financial situation.

Fan Engagement Through Real Competition The platform creates natural competition between fan groups. Real-time statistics show which teams have the most active supporters, creating a gamified experience where fans are motivated to out-draw rival teams. The live leaderboard displaying total strokes by team turns art creation into a competitive sport itself.

NFT Auction & Revenue Sharing When the canvas is locked and minted as a 1-of-1 NFT, the real magic begins. The final collaborative canvas becomes a unique, verifiable NFT that gets auctioned off. Crucially, the proceeds from this auction are distributed back to the community:

• 70% of auction revenue goes to the winning team's contributors (proportional to their strokes)
• Stroke Contributors receive 2x Fan Tokens for each stroke contributed
• Winning Team members get an additional 5x Fan Token bonus
• Early Contributors receive bonus multipliers for early participation

This creates powerful economic incentives for fan engagement and artistic excellence.

Permanent Digital Artifacts Unlike traditional fan activities that are temporary, MuralClash creates permanent digital artifacts. When an event concludes, the entire canvas can be locked and minted as a unique NFT, creating a one-of-a-kind collectible that represents the collective passion of all participating fans from that specific event.

The Personal Connection - Barcelona Fans Building for Fans Hitarth and Akshat, both core Barcelona fans, built MuralClash from a deeply personal understanding of what it means to support a team. Having experienced countless matches where they wished they could create lasting memories and collaborative souvenirs with fellow fans, they recognized a gap in how sports technology serves fan communities.

The idea emerged from wanting to give fans artistic tools to craft permanent tributes to their teams, moving beyond temporary social media posts to blockchain-verified fan art that could last forever. The vision extends beyond just creation - the team plans to reward the most creative supporters when tournaments conclude by distributing portions of NFT sale proceeds to artists whose teams win, creating real economic incentives for fan engagement and artistic excellence.

MuralClash is built on a robust "On-Chain Proof, Off-Chain Data" architecture to ensure scalability and cost-efficiency.

Smart Contract Foundation (Solidity + Hardhat) The core contract (ETHGlobalContract.sol) implements a sophisticated multi-layered system. The contract manages three distinct but interconnected systems:

• Collaborative Canvas State Machine: Tracks canvas locking, NFT minting, and stroke management
• Fan Token Economy: Automatic demo balance creation (100 tokens on first use)
• Variable Pricing: 3 tokens for lines, 10 for stickers to prevent spam

Deployed Contract: 0x2cC8C36C09726519b676b0a19BB911873dAdF387 on Chiliz Spicy Testnet

Fabric.js Canvas Innovation The drawing interface leverages Fabric.js in a particularly clever way. Rather than storing raw canvas bitmap data, the system captures SVG path data from Fabric.js drawing events. This approach provides several advantages:

• Vector Graphics: Remain crisp at any resolution
• Manageable File Sizes: Efficient storage and transmission
• Programmatic Replay: Individual strokes can be reconstructed perfectly

Technical Challenge Solved: Color and brush width persistence. Fabric.js sometimes loses style information when converting paths to SVG, so the system explicitly captures and stores color/width metadata alongside the SVG data, then force-overrides these properties during canvas reconstruction.

Walrus Integration - The Storage Game Changer The Walrus decentralized storage integration represents the most innovative technical component:

• 99.995% Gas Reduction: 50KB SVG data → 50-byte blob ID
• Chain-Agnostic: Uses HTTP API rather than SUI-specific interfaces
• Erasure Coding: Data distributed across multiple storage nodes
• Intelligent Fallback: Automatic IPFS backup if Walrus fails

APIs Used:

• Publisher: https://publisher.walrus-testnet.walrus.space
• Aggregator: https://aggregator.walrus-testnet.walrus.space

The Graph Subgraph - Real-time Collaboration Engine Direct blockchain queries don't scale beyond ~100 strokes due to RPC rate limits and latency. The Graph subgraph solves this by maintaining a comprehensive indexed database of all canvas activity.

Subgraph Endpoint: https://api.studio.thegraph.com/query/118839/eth-global-canvas/v1.0.0

Schema Entities (7 comprehensive data models):

• Stroke: Individual drawing strokes with metadata
• Artist: User profiles with stroke counts and demo balances
• Category: Team/sponsor statistics and unique artist tracking
• Canvas: Global canvas state (locked, NFT minted, totals)
• DemoBalance: In-contract virtual token system
• DailyStats & HourlyStats: Time-based analytics

Real-time Features:

• 30-second refresh cycles for instant collaboration
• Live team leaderboards and analytics
• Complete stroke metadata (color, width, timestamp, team)

Frontend Architecture (Next.js + React)

• Multi-Screen Flow: Lobby → Team Selection → Arena (Canvas)
• Client-Side Rendering: Fabric.js components require dynamic import with ssr: false
• State Management: localStorage persistence for seamless user experience
• Responsive Design: Mobile-optimized for hackathon demos

Technical Innovations and Hacky Solutions

1. Batch Transaction Optimization Rather than sending each stroke individually (expensive and annoying), the system accumulates drawing actions locally and submits them as single Walrus uploads with batch on-chain confirmation, reducing costs and improving UX dramatically.

2. Storage Agnostic Architecture The download/upload system detects blob ID formats and automatically routes between Walrus and IPFS, providing redundancy without user complexity.

3. Real-time Canvas Updates The frontend polls The Graph every 30 seconds to fetch new strokes and automatically redraws the canvas, creating seamless collaboration without websockets or complex state management.

4. Demo Mode vs Wallet Mode The platform intelligently handles both demo users (local token simulation) and wallet users (real blockchain interaction) through the same interface, enabling sponsor booth demonstrations while preserving full Web3 functionality.

5. Hydration Error Prevention Implemented SSR-safe localStorage restoration to prevent Next.js hydration mismatches while maintaining page persistence.

Technology Stack Integration

Frontend:

• Next.js with SSR capabilities
• React with Framer Motion animations
• Fabric.js for canvas drawing
• Tailwind CSS with custom Web3 themes
• Shadcn/ui components for modern UI

Blockchain:

• Solidity smart contracts
• Hardhat development environment
• Ethers.js v6 for wallet integration
• MetaMask with automatic network switching

Storage & Indexing:

• Walrus decentralized storage
• IPFS fallback system
• The Graph subgraph (AssemblyScript)
• URQL for GraphQL communication

Deployment:

• Vercel for frontend hosting
• Chiliz Spicy Testnet for blockchain
• The Graph Studio for subgraph hosting

Performance Optimizations

1. Graph Query Optimization

• Cached and batched queries to minimize RPC calls
• Efficient SVG-to-Fabric conversion
• Proper event listener cleanup

2. Gas Cost Reduction

• 99.995% reduction through Walrus integration
• Batch transactions for multiple strokes
• Optimized contract events for indexing

3. User Experience

• 30-second refresh cycles for real-time collaboration
• Automatic network switching to Chiliz
• Seamless localStorage persistence