Bello Frames

For this hackathon, we focused on enhancing Bello by adding Frames support, enabling users to interact dynamically with blockchain data insights. This feature allows users to navigate through visual frames that present complex on-chain data in an accessible and engaging manner. Our goal is to demystify blockchain insights, making them more approachable for users.

The project leverages Frog for creating interactive frames and Pinata for managing data via IPFS, with dynamic content rendering achieved through Puppeteer. We developed custom middleware for seamless integration with Pinata analytics, personalizing the user experience with blockchain data. The introduction of Frames into Bello transforms the way users interact with blockchain insights, making them more engaging and accessible. Airstack Captcha was briefly included to underscore our commitment to security, aiming to protect the platform against bot interference and ensure a secure exploration environment for Web3 marketing insights.

The backend is where the magic happens - when data is not immediately available, we employ a headless browser (Puppeteer) to capture real-time screenshots of the Bello app. These screenshots are then dynamically uploaded to IPFS via Pinata, ensuring data is decentralized and persistently accessible. This method not only enhances user interaction with blockchain data but also ensures that the most current data is displayed in an engaging format.