project screenshot 1
project screenshot 2
project screenshot 3

ArtGridz

An onchain pixel art dApp where every change is permanently stored, demonstrating blockchain immutability. Sponsored gas fees make it accessible for all, easing onboarding and participation.

ArtGridz

Created At

Superhack 2024

Project Description

ArtGridz is a groundbreaking platform aimed at making blockchain and distributed ledger technology (DLT) more accessible by simplifying its complexities. It offers a user-friendly interface on the Base Superchain, allowing for the creation, management, and secure exchange of digital art.

How it's Made

ArtGridz merges blockchain technology with digital art creation, offering a streamlined and secure platform on the Base Superchain. Here’s a detailed breakdown of how ArtGridz is built, including recent updates and integrations:

  1. Blockchain Platform: Base Base provides a scalable and cost-effective environment for deploying smart contracts. It ensures low transaction fees and rapid processing, aligning with ArtGridz's goal of making blockchain interactions more accessible.
  2. Smart Contract Development Solidity: Smart contracts are written in Solidity, allowing for precise control over digital art management and transactions. This language is well-suited for developing and managing complex contract logic on the EVM. OpenZeppelin: To enhance security, ArtGridz employs OpenZeppelin’s ReentrancyGuard to mitigate reentrancy attacks and ensure robust contract functionality.
  3. Custom Art Storage and State Preservation Custom Storage Solution: ArtGridz introduces a unique method for onchain art storage. A multi-dimensional mapping system is used to track each pixel's state, preserving a complete historical record of artwork changes. Event Handling: The system uses smart contract events to manage pixel color updates. By subscribing to these events, ArtGridz efficiently updates the artwork’s state without constant onchain queries.
  4. Frontend Development React and ThirdWeb SDK: The frontend is developed with React, utilizing the ThirdWeb SDK for blockchain interactions. This SDK provides hooks like useContract, useContractRead, and useContractEvents, enabling seamless integration with smart contracts and real-time data updates. Canvas Rendering: ArtGridz employs a dynamic rendering approach for visualizing the artwork. The renderCanvas function constructs the pixel grid based on the current artwork state, with smooth transitions facilitated by framer-motion.
  5. Pixel Management Pixel Color Conversion: Utilities convert between decimal and hexadecimal color formats to accurately display pixel colors on the canvas. Real-Time Updates: The system listens to PixelChanged events to update pixel colors in real-time, providing an interactive and engaging experience.
  6. User Interaction Interactive Canvas: Users can click and hover over pixels to paint or erase them. These interactions are managed locally using React hooks, ensuring a responsive and intuitive interface. Color Selection: A color picker allows users to select and apply colors to pixels, dynamically updating the canvas.
  7. Technological Integrations Web3 Integration: ArtGridz uses Web3 technologies to connect the frontend with the blockchain, enabling direct contract interactions from web browsers. ThirdWeb SDK: The ThirdWeb SDK is integral to fetching events and interacting with smart contracts. It simplifies the process of subscribing to blockchain events and reading contract data. Transaction Bundler and Paymaster: ArtGridz has recently integrated the Coinbase Developer Platform’s transaction bundler and paymaster. This setup sponsors transactions, reducing the need for users to handle gas fees directly and streamlining the transaction process.
  8. Security and Performance Reentrancy Guard: The noReentrancy modifier prevents reentrancy attacks, enhancing contract security. Efficient Data Handling: The event-based architecture minimizes the need for constant onchain data queries, improving performance and responsiveness.
  9. Notable Design Choices Historical Art Tracking: The system preserves every past state of the artwork, allowing users to review and retrieve the complete history of their digital art. Custom Grid Ownership: Users can soon create and manage custom grids, which are unlocked based on their engagement(coloring 100 pixels). This feature promotes creativity and sustained interaction with the platform. By integrating innovative blockchain technology, real-time event handling, and advanced transaction management features, ArtGridz delivers a compelling digital art experience. The platform's use of ThirdWeb SDK and Coinbase’s transaction tools further enhances usability and accessibility, setting ArtGridz apart in the digital art and blockchain space.
background image mobile

Join the mailing list

Get the latest news and updates