Bringing the SuperRare Art Marketplace to Farcaster
May 9, 2024
SuperRare, one of the world's top digital art marketplaces, is known for its carefully curated selection of art and artists. We partnered with them to design and build a scalable Frame experience that brings the SuperRare art marketplace into Farcaster. These new Frames allow anyone to view, bid on, and purchase SuperRare NFTs without ever having to leave the Farcaster feed.
Understanding Farcaster Frames
Farcaster is a decentralized social network that empowers its users by offering enhanced control over their personal data, interactions, and digital identities. Built on the Farcaster protocol, Frames are an extension of the OpenGraph standard that transforms static embeds into dynamic, interactive applications. Frames enable the creation of rich, transactional experiences—such as polls, games, token-gated content, articles and interactive art galleries—integrated seamlessly within each post.
An Artist Focused Interface
One of the biggest challenges was designing an interactive art collection interface within a 600x600 pixel Frame. Our objective was to make this limited space a rich, informative, and interactive experience that celebrates both the art and its creators. Some of the key design questions we asked ourselves were, how might we…
Highlight artwork and the creator.
Ensure the artwork and content is visible on small screens.
Create a design system to be utilized across all SuperRare Frames.
Incorporate UI elements from SuperRare to enhance familiarity.
Our initial launch includes three Frame states—Live Auction, Live Mint, and Default—with plans to expand these states in the future.
The Frame interface design system.
Limited Mint, Live Auction and Default Frame states.
The Architecture
The Frame is designed to be easily embeddable in SuperRare’s frontend. To address limitations in Warpcasts' frame response caching system, which does not support fully dynamic initial frames, we introduced a Router Frame to serve as a static interface for all artworks. This approach ensures a consistent user experience and effectively circumvents potential caching issues, without requiring additional logic on the SuperRare frontend.
The frame architecture is composed of four distinct Frames, each tailored for specific interactions:
Router Frame: The main entry point and interface, responsible for displaying a dynamic initial image reflecting the artwork's state and routing to the appropriate interaction Frame.
Limited Mint Frame: Shown when an artwork series is released through a limited mint via SuperRare’s RareMinter contract, allowing users to mint from within the Frame.
Auction Frame: Shown when an artwork is on auction through SuperRare’s Bazaar contract, enabling users to place new bids from within the Frame.
Default Frame: Shown when an artwork does not fit other interactive experiences, linking directly to the artwork page.
The Frame architecture flow begins with the Router Frame, when interacted with it will display the correct Frame.
Dynamic Image Generation
Artwork image and artist data are fetched from SuperRare’s GraphQL API, with a fallback of fetching directly from IPFS which is necessary for handling lazy mints. Artwork state data—such as whether an item is part of an auction or a limited mint—is derived through direct reads on the NFT, SuperRare Bazaar, and RareMinter contracts.
Generating and serving high-quality, dynamic Frame images in near real-time presented a significant challenge. To address this, we developed a method that involves creating distinct image layers, which are then assembled to produce the final rendered image. This technique isolates the dynamic content to a single layer, enabling us to implement static layer caching effectively. Specifically, we use four distinct layers for the SuperRare images:
Artwork Image Layer (Static): This base layer features the actual artwork, typically a large image file that can be slow to load, especially when sourced from IPFS. To optimize performance, we resize, compress, and cache this layer after the initial fetch, to ensure performant image loads for all subsequent uses.
Artwork Overlay Layer (Static): This layer includes a gradient and the SuperRare logo to ensure text visibility across different backgrounds.
Artwork State Layer (Dynamic): This dynamic layer reflects the current state of the artwork, including updates like bid/mint price, time remaining, and release count. Isolating this layer allows for real-time updates without needing to regenerate the other layers.
Artist Image Layer (Static): A final overlay that displays the artist's profile image.
Image Layers: Show how the Frame is structured.
Optimizing Performance and Reliability
To ensure quick response times and scalability across SuperRare’s extensive artwork collection, we've implemented a caching and revalidation strategy:
Frame Image Revalidation: We've set cache-control headers for Frame images to control the revalidation process. Images related to ongoing mints or auctions, which have dynamic content, have a faster revalidation cycle compared to fallback images that change less frequently.
Data Caching: All fetched data is cached, and revalidated with deliberate times. Static data is cached longer than dynamic data, reducing the need to frequently refresh content that remains constant.
Image Layer Caching: As previously discussed, we cache individual image layers during image generation. By isolating dynamic content to a single layer, we avoid the need to revalidate more stable, expensive layers.
Assembled Image Caching: The final image output is also cached. If the underlying layers haven’t changed, we skip reassembly to speed up image delivery.
Enhancing Transaction Reliability
We've mapped potential failure points in the transaction process, and designed the transaction endpoints to actively check for issues and provide clear, descriptive error messages. This proactive approach helps maintain transparency and trust.
Benefits to Artists and Collectors
We believe that integrating SuperRare Frames into the Farcaster ecosystem will create new, immersive spaces to elevate the digital art collection experience, providing a more social and interactive experience for both artists and collectors. These Frames can help enhance artist visibility, expanding their audience and strengthening community connections while offering new avenues for monetization. For collectors, these Frames offer a new and more interactive way to view and collect art, improving discovery of new pieces and facilitating more direct and personal relationship with artists.
Looking Ahead
We are excited to continue our collaboration with SuperRare to introduce new functionalities and expand existing features. We look forward to building a future where the Farcaster Frames act as a natural extension of the SuperRare UI interactions.
Explore the Frames
Want to see the SuperRare Frames in action? Explore the /SuperRare Warpcast channel. If you're interested in having Frames built for your platform, feel free to reach out on Warpcast or DM us on X. For those interested in more specific implementation details, all the code is open sourced on GitHub.
Interested in the all the Frames we have shipped? Visit the Paperclip Labs Frame Portfolio on Warpcast.
Acknowledgments
Special shoutout to Brennan and Luke for their support and feedback along the way and thank you to Charles, Matt, Row, and Lauren from the SuperRare team for their invaluable support to this project.