$DEGEN Donors

Timmy is a $DEGEN Farcaster power user.

One day, Timmy's cat, Muffins, came down with tuberculosis. Insurance covered some of it, but it would've been nice to have a little more liquid assets.

Timmy has tens of thousands of rich crypto followers on Farcaster who adore Mittens. The social influence and algorithmic reach here is an untapped social gold mine.

What if Timmy could run a small fundraiser on Farcaster with seamless one-click wallet integration that he could start up in mere seconds? Better yet - anyone can view and donate within the very SAME frame. No external links required. All on the chain baby.

Introducing $DEGEN Donors - the simplest, no-code way to create fundraiser frames on Farcaster.

We’ve built (and deployed live!) a complete no-code system for deploying $DEGEN donor fundraiser frames on Farcaster that deploys instantly.

All you need to provide is a name, fundraiser description, and starting goal. You use your own wallet, we can even take care of the wallet for you by providing an embedded wallet specifically for your fundraiser.

So instead of being a degen who shills their ETH on random shitcoins, use your money for a good cause instead - be a $DEGEN donor instead.

Fundraiser Frames Our project is primarily built using frames.js and Next.js. frames.js enabled us to easily create frames using react components and allowed us to take full advantage of the frames specification. The data behind each fundraiser, such as name and description, is stored in Firebase and mapped to an ID. Because payment is done entirely through wallets, the payment destination can just be stored as a wallet address in Firebase. This greatly improves security, since each transaction is traceable, and funds can’t be accessed by anybody other than the fundraiser’s creator. Each fundraiser frame specifies their id in the url, which is then used to index the Firebase database and populate the information for that fundraiser. Within each frame, the donate button utilizes the tx action for frame buttons to seamlessly initiate a payment. Once a transaction is initiated, a callback function provided by frames is used to store the transaction id. We were then able to use web3.js to monitor that transaction, and once the transaction goes through, the relevant transaction id, farcaster id, and wallet ids are stored in firebase.

Fundraiser Analytics and Leaderboard with Pinata The stored transaction history allows us to accurately keep track of what donations were made and the size of each donation. Using this information, we display the top 3 largest donors on the stats page of each fundraiser, which is just a separate frame linked by a button. This is where we used Pinata’s Farcaster API to retrieve more information about each donor. Since the donor’s fid was recorded with each transaction, we were able to easily use Pinata’s “User by FID” endpoint to retrieve their profile and display their username in the stats page.

No-Code Fundraiser Creation As mentioned before, each fundraiser frame dynamically retrieves information for the fundraiser based on the id that is specified in the frame’s url. This means that by creating new id’s and descriptions in Firebase, we can dynamically create new urls that correspond to new fundraiser frames. To support this feature, we created a website where users can submit their fundraiser’s information, which will populate Firebase and create a url for their fundraiser from. All without code from the user!

P2P Image Storage with Pinata As part of the fundraiser creation process, users must upload an image for their fundraiser. We store these images using Pinata, which lets use easily serve them back to the users whenever somebody wants to view the frame.

Fundraiser Specific Embedded Wallets with Dynamic We’ve integrated Dynamic’s open-source frame that creates a new embedded wallet with just a Warpcast ID and email into our no-code frame creation platform. It involves a POST request to Dynamic’s special endpoint for provisioning embedded wallets. We configured an environment on Dynamic and received an API token that lets us create these wallets. After creating an embedded wallet, the user is then redirected to the https://demo.dynamic.xyz/?use-environment=Farcaster. The entire experience was quite good, and we really appreciate the generosity of opening up the endpoint.

Payments with Base (and more!) Our fundraiser frame supports multiple forms of payment - it seamlessly integrates with your Warpcast Wallet to support whichever network you want - Base, Ethereum, Optimism, Polygon or Arbitrum. Our default fundraiser donation payment infrastructure supports Base.

Full Tech Stack Next.js | frames.js | Pinata Farcaster API | Dynamic.xyz | Vercel | Firebase | Base | web3.js | styled-components