AdSpace

Demo

About

The problem it solves ### Problem Solved by AdSpace NFT AdSpace NFT addresses the inefficiencies and lack of ownership in traditional online advertising platforms like Google AdSense. Centralized systems often impose high fees, lack transparency in ad placement and revenue distribution, and expose publishers and advertisers to risks such as ad fraud, censorship, and opaque pricing models. By leveraging blockchain technology and NFTs, AdSpace NFT eliminates intermediaries, ensures verifiable ownership, and provides a trustless environment for ad space transactions. ### Use Cases and Benefits - **Empowering Independent Publishers:** - **Use Case:** Small website owners or content creators can mint ad spaces as NFTs, setting their own rates (e.g., $10/hour) and retaining 95% of earnings. - **Benefit:** Simplifies monetization, reduces dependency on ad networks, and offers full control over ad space availability. - **Secure Advertising for Businesses:** - **Use Case:** Companies can rent ad spaces on niche websites (e.g., crypto blogs) to target blockchain-savvy audiences, uploading creatives via IPFS. - **Benefit:** Enhances safety with on-chain transparency, reducing fraud risks, and ensures ad visibility with immutable records. - **Decentralized Marketplace for Freelancers:** - **Use Case:** Freelance designers or marketers can rent ad spaces to promote portfolios or services, paying in ETH via Chainlink-priced rates. - **Benefit:** Streamlines advertising without middlemen, making it cost-effective and accessible globally. - **Community-Driven Campaigns:** - **Use Case:** Decentralized projects (e.g., DAOs) can rent ad spaces to engage communities, with publishers rendering ads using the `adspace-provider` package. - **Benefit:** Fosters trust and engagement through transparent, censorship-resistant ad placement. - **Safer Revenue Streams for Content Platforms:** - **Use Case:** Niche platforms (e.g., gaming or tech blogs) can tokenize multiple ad slots, managing them via the dashboard. - **Benefit:** Protects against platform bans or revenue cuts, ensuring a safer, self-managed income source. - **Innovative Marketing for Startups:** - **Use Case:** Early-stage startups can experiment with ad placements on diverse sites, adjusting campaigns in real-time. - **Benefit:** Makes marketing more flexible and cost-efficient, with real-time tracking via the dashboard.

How it's made

Challenges we ran into ### Challenges I Ran Into Building AdSpace NFT presented several technical hurdles, particularly during the development of the npm package, smart contract deployment with Foundry, and frontend integration. Below are the key challenges encountered and how they were overcome. - **Bug: Incorrect Hourly Rental Rate Display in Frontend** - **Issue:** The 'hourlyRentalRate' displayed on the 'AdCard' component showed an incorrect value (e.g., '$0.000000000000000012 /hour' instead of '$12 /hour'). This stemmed from the 'Dashboard' component applying 'ethers.formatUnits' with 18 decimals to a raw USD value stored in the smart contract, which expected no decimals. - **Solution:** Removed the 'ethers.formatUnits' call with 18 decimals in 'Dashboard.tsx', fetching the raw 'hourlyRentalRate' as a string. In 'AdCard.tsx', implemented 'parseFloat(space.hourlyRentalRate)' to convert it to a readable '$X /hour' format. Extensive testing with MetaMask confirmed the correct display for various rate inputs. - **Hurdle: npm Package (adspace-provider) Integration Issues** - **Issue:** Initial versions of the 'adspace-provider' package failed to fetch metadata from IPFS due to CORS restrictions and improper handling of tokenId in the 'AdspaceProvider' component. This caused ads to render incorrectly on publisher websites. - **Solution:** Debugged the package by adding error handling and using a proxy server (via Pinata API) to bypass CORS. Updated the component to dynamically query the smart contract for metadata URI based on 'tokenId', ensuring reliable rendering. Published a new version to npm after testing in a sample Next.js app. - **Hurdle: Foundry Smart Contract Deployment Failures** - **Issue:** Deploying the 'PiqselNFT' contract with Foundry encountered gas estimation errors and transaction reversions on the Sepolia testnet, particularly due to incorrect Chainlink price feed address configuration and insufficient test ETH. - **Solution:** Verified the Chainlink 'AggregatorV3Interface' address by consulting the Chainlink documentation and updated the deployment script ('DeployPiqselNFT.s.sol'). Increased test ETH allocation via a faucet and adjusted gas limits in the Forge script. Successfully deployed to '0xd9A04562B2ea577007097B013e625F0CB2Fbf83A' after iterative testing. - **Challenge: Synchronization Between Frontend and Smart Contract** - **Issue:** The frontend 'Dashboard' component occasionally displayed outdated ad space statuses due to asynchronous data fetching and lack of event listeners for on-chain updates. - **Solution:** Implemented a polling mechanism with a 5-second interval in 'useEffect' to refresh data and added event listeners for 'AdRented' and 'AdSpaceMinted' events using 'ethers.js'. This ensured real-time synchronization. These challenges tested our problem-solving skills, from debugging frontend logic to mastering Foundry deployment and npm package development. Overcoming them strengthened the project's robustness, making it a viable solution for the Hackathon.