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

PoolTogether Frames

View PoolTogether balance, deposit and withdraw on Optimism... all within a frame!

PoolTogether Frames

Created At

Frameworks

Project Description

The PoolTogether Farcaster Frame allows users to interact with a prize vault contract within any Farcaster client that allows for transactions. A frame that is configured with a Prize USDC vault on Optimism, for example, will provide users with a quick and easy way to check their balances, deposit more USDC or withdraw their existing balance. Future functionality can include delegations, checking for prizes won, etc. all within the frame.

When a user first uses the frame, they are asked for a wallet address, which is then cached for future interactions. Once they are on their account page within the frame, they can then choose to deposit, withdraw, etc. A user can also switch the wallet they are accessing at any time.

Once deposited into PoolTogether through the frame, prizes will be automatically be sent to their wallet if they win.

How it's Made

The frame is built with NextJS, Viem for onchain Optimism queries and Frames.js for the ease of converting the structure/flow of the frame into valid metadata. The frame can take in any valid PoolTogether prize vault configuration on Optimism, and display a frame for it (we have pUSDC and pWETH currently setup).

By using Frames.js, we managed to create a really simple react component for each view of the frame, map these to specific interactions with the user state, and have them be converted to valid metadata on any Farcaster client. We also made great use of Frames.js's debugger by setting it up locally on our frames repo, allowing us to better test our frames on testnets PoolTogether is deployed in (not present on other Farcaster client debuggers).

To address some limitations of frame state management, we are hosting the frames on a cloud instance of our our own in order to manage user state. This makes the frames faster and allows for more than 256 bytes of state to be configured for any frame's state, at the cost of extremely small storage amounts. Caches are avoided when passing minimal state between the client and the frame server by using updated timestamps, as recommended by the "best practices" on the frame specs.

background image mobile

Join the mailing list

Get the latest news and updates