project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4

Payrennial

WeChat's success hinged on WeChat Pay. Warpcast needs a payment feature to be the all-in-one crypto app, and this is what payrennial is doing: warpcast native payment frames.

Payrennial

Created At

Frameworks

Winner of

trophy

ETHGlobal - 🏆 Frameworks Finalist

Project Description

This project aims to integrate seamless payment and money request functionalities within Warpcast, drawing inspiration from Venmo and WeChat Pay. Users can engage in transactions through "payment frames" using Ethereum (ETH). These frames allow users to either send payments or request money directly on Warpcast, maintaining the interaction within the app for a cohesive user experience.

Consider the example of Alice and Bob:

Alice inputs "payrennial.xyz/Alice" to cast her personal payment frame on Warpcast. Within this frame, she can:

  • View a list of payment requests from Bob and other users. She can choose to fulfill these requests by entering the unique payee number associated with each request.
  • Issue payment requests to Bob for any outstanding amounts he owes her.

Bob has the flexibility to engage with Alice's payment frame in two ways:

  • He can either cast a new instance of Alice's payment frame or locate an existing one in the Warpcast Feed. Both methods provide him access to the same functionalities. Within this frame, Bob can:
    • Clear any outstanding amounts by sending a payment to Alice.
    • Submit a request for Alice to pay back any amounts she owes him

To add a personal touch reminiscent of Venmo, both Alice and Bob are prompted to leave messages with their transactions. Additionally, for transparency and security, every payment allows the sender to verify the transaction details through a user-friendly interface on a blockchain explorer, ensuring both parties can trust the process.

How it's Made

Our project's tech stack was carefully selected to create a seamless payment experience within the Farcaster ecosystem. Here's a breakdown of the technologies we used and how they were integrated:

  • Next.js: Served as the backbone for creating and rendering user-friendly payment frames. Its server-side rendering capabilities enhanced performance and user experience.
  • Frames.js: This library was instrumental in establishing a robust frame infrastructure, allowing for efficient management and interaction with various payment frames.
  • Airstack: Utilized to retrieve comprehensive profile details, linking them to their respective Farcaster usernames. This integration ensured a personalized and secure user experience.
  • Optimism (Mainnet): Chosen for its scalability and low transaction costs, Optimism facilitated smooth payment transactions between Farcaster users, ensuring reliability and speed.
  • Once Upon Explorer: Enabled users to verify transaction details transparently, adding an extra layer of trust and security to the payment process.
  • Supabase: Acted as our database solution, efficiently storing and managing payment requests. Its real-time capabilities allowed for instant updates and notifications.

A particularly innovative aspect of our project was the way we leveraged Frames.js in conjunction with Next.js to dynamically generate payment frames that are both interactive and secure. This "hack" allowed us to embed complex payment functionalities within a seemingly simple frame, providing users with a streamlined experience without sacrificing security or capability.

background image mobile

Join the mailing list

Get the latest news and updates