Skip to content

[HACKATHONS] FrameHack #1

Jump to bottom
FTCHD edited this page Jul 13, 2024 · 2 revisions

🤘 Intro

Welcome to the first edition of FrameHack, let's keep it concise and fg!

⏰ Date & Location

FrameHack starts on 7th June 2024 at 16:00 UTC, and ends on 17th June at the same time, lasting for 10 days.

It is 100% online, you just need a computer and an internet connection.

🏆 Prize Pool: $10,000

🥇 First Prize - $2,500

🥈 Second Prize - $1,500

🥉 Third Prize - $1,000

🏅 4th → 13th Prize - $500

The rewards will be distributed after results are published, and will be awarded in USDC on Base.

The first places will probably go to one or more Templates that are part of the ideas list below, but don't hesitate to go for the #1 place if you think you have something that blows everything out of the water. These are only suggestions after all.

Besides the prizes for this edition of FrameHack, your template will also receive rewards each month based on its usage when the Revenue mechanism is launched, whether you win or not. This is why the creatorFid and creatorName fields in the config are required.

🥳 Winners

🥇 First Prize - Figma Template

🥈 Second Prize - Form Builder Template

🥉 Third Prize - Cal Template

🏅 4th Prize - Medium Template

🏅 5th Prize - Quizlet Template

🏅 6th Prize - Long Form (Presentation) Template

🏅 7th Prize - LuMa Template

🏅 8th Prize - Youtube/Video/GIF Template

🖼️ Frame Template Ideas

1. Figma Frame

Figma allows its users to create files that can then be modified outside of Figma. Figma users can share their files publicly as a URL, and these files can be rendered as SVGs. These SVG elements (such as Text labels) can be edited outside of Figma, and a new export can be created.

Using FigmaImageResponse from @vercel/og (github.com/vercel/example-figma-og-image), we can take any file from Figma and change the values of the elements. If we had a standard website for example, we could have a file in Figma for our OG image and just change the label based on the page/route.

This mechanism allows for dynamic image exports based on simple parameters, which means it's possible to enable users to create Frames out of their Figma files.

Bonus: It should also be possible to input regular Figma public URLs and have that be a Slide in the Frame. No parameters.

Guidelines (roughly)

  • User creates a file on Figma.
  • Let's say the User has created a simple cover image template with a title and subtitle.
  • The User gets the file URL from Figma and inputs it in the FrameTrain Figma template.
  • The User inputs the name of the parameter they want to change and the value. Ideally, we should get all available parameters from the inputted URL and offer them as options, most likely using the Figma API.
  • The values of these parameters are saved in the Frame config, so we can later use when rendering the Figma file.
  • The User can add multiple Slides to their Frame, each connected to a button and a file URL (could be the same for multiple buttons).
  • The end result is being able to create a slideshow-type Frame from Figma files. When you tap on a Frame button, you get navigated to another Slide in the Frame, which shows the Figma file attached to the button.
  • When serving (rendering) the Frame inside your handler function, the saved config is passed to the Figma file.
  • The Figma file is rendered in the handler using FigmaImageResponse from @vercel/og, passing the result as image (instead of the usual component) in your return statement.

2. Token Swap Frame

Similar to FrameSwap and SwapBot. Use the 0x API to build the transaction data, because it's free and relieves you of having to write a lot of code.

Guidelines (roughly)

  • User inputs the Uniswap pool address and the predefined amounts (max 3).
  • We search for a Uniswap pool with that address on all chains using viem, and save the address and chain in the Frame's config.
  • The button labels for the predefined options are displayed in the amount + SYMBOL format, depending on the token pair.
  • For example, if the User inputs the DEGEN/DAI pair, the button for a predefined option of 25 will say "25 DAI".
  • We manually check if the secondary token picked is USDT/USDC/DAI, and show "$" before the amount instead of "USDT/USDC" symbols.
  • Besides for the pool address field, the User also has a Switcher/Toggle to switch between the 2 tokens in the pair, making one the primary and the other the secondary (the one used to pay).
  • User now posts the Frame on Warpcast, which has 1 button for each predefined amount, and a last button saying "Custom".
  • Viewer on Warpcast can swap tokens using one of the predefined amounts, or a custom amount.
  • "Custom" navigates the Viewer to a new screen, where they can input their own amount in the secondary token.
  • Viewer gets the usual tx pop-up from Warpcast & their wallet.

Materials

3. Seaport Frame

This Frame lets you sell any NFT in your wallet using Seaport, OpenSea's contract.

Guidelines (roughly)

  • User can create a Slide for each NFT. They can also mark any of the NFTs/Slides as the cover for the Frame, with the remaining order being sequential as they were added by the User.
  • The User has a way to input the NFT they want to sell in each slide. Either by inputting the contract address and token ID of the NFT, or some other more friendlier way. The idea is to tie it to an existing Seaport order hash. We do this by using the getListings endpoint from OpenSea, extracting the order_hash, and storing it in the config.
  • The User can edit the title and description for each slide, whose default values are taken from the NFT metadata.
  • The Frame has back and forward arrows. Pressing them cycles through each NFT, showing the same Slide layout but with different data.
  • The data displayed is partly based on the User's input when configuring the Frame (title, description etc), and partly from onchain/API data (such as the price, which is taken from the existing order). Hint: Make sure to save these in the config and do the fetching in your Inspector, so you don't have to do the query every time in your handler functions.
  • User posts the Frame to Warpcast.
  • Viewer sees the Frame and browses through the NFTs.
  • Viewer can buy the NFT using USDC or ETH.
  • Transaction data is built, swap goes directly through Seaport contract (not OpenSea API).
  • Viewer gets the usual tx pop-up from Warpcast & their wallet.

Materials

4. Long Post Frame

Is actually one of the most important templates to have. It does not serve any specific use-case, so this means it will be highly customizable.

You should be able to edit the background, add text, add images, and much more (but not all at the same time). Do not get discouraged, the starting point is the Twitter Frame template, with the Twitter functionality removed. Instead of tweets, the User inputs their own text. For more context, check out the Twitter template.

The User can edit the config for the Cover (title, subtitle, background, etc) and add multiple Slides.

If no text is inputted in the Cover or in any of the Slides, only the background will be displayed, which should cover the entire Slide (Frame page).

Things you should be able to do with this template:

  • An image slideshow
  • A presentation about a topic

5. Gated Frame

This would be something akin to glass.cx, where you can set an action to happen when some conditions are met. The action can be showing a piece of text, an image, or allowing the Viewer to mint an NFT.

Guidelines (roughly)

  • Allows setting conditions to hold ERC-721, ERC-1155, or ERC-20 tokens.
  • Allows setting conditions to require accounts to be Active Status, Top Casters, or have a low FID.
  • Allows setting conditions to require like, recast, or follow any account (already integrated in the FrameTrain SDK, just set requireValidation to true in your template metadata).

6. Form Builder Frame

Title says it all. Each slide is a field that the Viewer fills. Should include basic validation (text, number, email, phone, address).

This template is among the ones that would use the state field, in this case to store form submissions from Viewers. Pay attention to the visual aspect of the Frame too.

In the end, you should be able to create something like this: https://warpcast.com/orangedao/0x48e5e415, and more.

X. Other Ideas

Feel free to take on ideas outside of this list. You can go more into the minting mechanism in Frames, or do some smart contract integrations.

You can also pick one of the existing templates (Poll, PDF, Twitter, Sablier) and vastly improve their functionality, add new features etc.

Valuable contributions to these existing templates are counted as new frames.

Awarding & Elimination Criteria

The most important characteristic in a Template is how much usage potential it has, and how complex it is.

Having a Template that is relevant only for a specific season/year, or is a one time use like a token balance checker — where each instance of the Template is the same, therefore lowering the need for creating a Frame instead of having it bookmarked in your client. A Token Swap or NFT Storefront Template would be highly customizable and always based on the user's needs, showing a greater potential for reusability.

As creators we strive to give Farcaster users the best experience possible, and this is an important factor for FrameHack.

Your template will not be accepted into the hackathon if it uses third-party code that is not MIT or permissively licensed. This does not refer to installed npm libraries.

Farcaster Frames No Code Templates

👋 WELCOME

💻 SDK

🤑 HACKATHONS

Clone this wiki locally