# Frames - [Frame Developer Tools](https://warpcast.com/~/developers/frames) - [Developers: Embeds](https://warpcast.com/~/developers/embeds) (clearing cache) [WHY IS MY FRAME CACHED?! DEBUG GUIDE](https://warpcast.com/deodad/0xdc024835) ## v2 - [Thread of v2 frames 🧵](https://warpcast.com/dwr.eth/0x1fe34a76) - [Docs](https://docs.farcaster.xyz/developers/frames/v2/) - [Frame Developer Tools](https://warpcast.com/~/developers/frames) [Bare bones V2 Frame template/tutorial using Vite + React that can be hosted on /ipfs and /base through Orbiter:](https://warpcast.com/stevedylandev.eth/0x7de4788f) --- [Advanced Topics](https://docs.farcaster.xyz/developers/frames/advanced) ## Dynamic Metadata - https://github.com/stuckinaboot/Net/blob/86bfa561c19d890569abc02f527d4e227d357a45/website/src/app/app/inscribed-drops/mint/%5BchainIdString%5D/%5BtokenId%5D/layout.tsx#L9 - https://www.netprotocol.app/app/inscribed-drops/mint/base/3 - https://github.com/apoorvlathey/eip-tools/blob/f98db7febe925e03d64f978780c1f55b8129a1d8/app/page.tsx#L7 - https://eip.tools/ --- - [Fig: Frame Interface Guidelines](https://www.paradigm.xyz/2024/05/fig) - [Github](https://github.com/paradigmxyz/Fig) - [Figma](https://www.figma.com/community/file/1367670879509913267) [On-Chain Basic Base Frames Workshop](https://hackmd.io/So0bAr3eSVqJQU7LHi6DAA?view) from st4rgard3n [Frames Devs we want to reward you for building great Frames!](https://warpcast.com/betashop.eth/0xe6fe6d61) ## Apps - [Frameboard is a magical curation tool for Web3 and Farcaster](https://www.frameboard.com/) <blockquote class="twitter-tweet"><p lang="en" dir="ltr">The only two things I find exciting about crypto are DAOs &amp; permission-less/distributed social networks/content. <br><br>No one has nailed these two products, but oh boy if someone does… can you imagine a global, angel syndicate in DAO format?! <br><br>Imagine a distributed,…</p>&mdash; @jason (@Jason) <a href="https://twitter.com/Jason/status/1763576914281697360?ref_src=twsrc%5Etfw">March 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> Why am I so excited about Farcaster frames? I have been called the Unfurl Guy People do not understand when I talk about social sharing flows. And some boomers don't understand. --- Frames are a new design pattern. A new way of interacting with dynamic content. Developers can build a multi-view experience in the feed. The app has user context. The user is able to send data to the server. It allows developers to embed parts of their app in the feed and link users to specifc parts of your app. Frames extend the OpenGraph standard and turn static embeds into interactive experiences. - [Farcaster Frames](https://docs.farcaster.xyz/learn/what-is-farcaster/frames) - [The Open Graph protocol](https://ogp.me/) --- [Framing Frames](https://paragraph.xyz/@jayme/framing-frames) ## Open Frames - [Open Frames Spec [Draft v0.0.2]](https://github.com/open-frames/standard) - [Open Frames Spec [Draft v0.0.1]](https://github.com/open-frames/standard/blob/v0.0.1/README.md) ## Tools - [Frog](https://frog.fm/) - [frames.js](https://framesjs.org/) - [Frame Validator](https://warpcast.com/~/developers/frames) - [Neynar](https://neynar.com/) - [OG Image Playground](https://og-playground.vercel.app/) - [react-farcaster-embed](https://warpcast.com/pugson/0x09b5fad1) ### [Frog](https://frog.fm/getting-started) - Connect Frames with actions - State management - No vendor lock-in - Will soon have plugins for middleware like Privy #### Culture - FM: Frog Morning - Frog Army (DAO) ## Possible Funding - DAOhaus Grant - [Base Builder Grants](https://paragraph.xyz/@grants.base.eth/calling-based-builders) - [Since Frames launched, we’ve announced four rounds of grants for builders creating /frames on Base](https://warpcast.com/base/0x0d1c73e2) - Hats Grant --- Been inspired recently. Think we have a powerful new tech on our hands. It has gotten a bit spammy but that is because it is exciting. Things will defintely be different when the dust settles. Frames are essentially little React apps that get rendered as an image. They have buttons and a text input was added last week. The functionality is controlled with metadata using the [The Open Graph protocol](https://ogp.me/). So you send a request to your API and then display what is returned. Frames is the missing piece. Being able to embed apps in channels is huge. A communications protocol is vital to coordination. It has opened up a new paradigm of interaction. This shit is hot right now. And the community is actually calling for DAO features. This appears to be the first real demand for DAOs. There will be governace of: - Coins - Frames - NFTs And it all community generated right now. If we act fast we have a chance to really get some attention. But Nouns will ship soon and they are kinda the goto DAO solution on Warpcast. - Display proposal in Frame (use URL parameters) - Vote on proposal from Frame - Join DAO from Frame (mint NFT, return link to Silo) - Summon DAO from Frames (like Invoke) ## ToDo - [x] Swap baby to first image - [x] Show different yeet color based on buttons - [x] git clone https://github.com/horsefacts/echo-the-dolphin - [x] Create frame with text input ## Maybe Later - Add frames with external links - [frames can now pass up to 4kb of state](https://warpcast.com/horsefacts.eth/0xaa0254dd) - [A replit to make a frame with four buttons that link to different pages.](https://warpcast.com/v/0x7f925a2e) - [Minting an NFT in a Frame](https://docs.base.org/building-with-base/guides/nft-minting-frame/) - Investigate [Introducing 🗳️ onchain polls 🗳️](https://warpcast.com/destiner/0xce911d5a) - Add images to IPFS ## News - [Frame Transactions are now live for everyone!](https://warpcast.com/v/0xc5e99831) - [Transaction Frames are here!](https://warpcast.com/v/0x9b8f5abb) - [Frame Transactions Timeline](https://warpcast.com/v/0x24c8d6c7) - [Transactions in frames are getting closer!](https://warpcast.com/v/0xa11e02e5) - [Announcing... Open Frames](https://warpcast.com/df/0xb202654c) ## DAO Flows - View proposal - Vote - Join: Mint NFT/Silo RDF - Summon ## Ideas - Embed Trading View charts in frames - Frame that is an old TV with color tests and static - Frame to request features from RaidGuild - Drop ENS subdomains - Hack-a-thon frame that allows you to register or sponsor - Get share in DAO - Get proposal parameters from the URL to show on the frame to allow voting - Slide show that features the week's yeeter projects - Get share in a DAO (run transaction to mint shares then send tokens back to user) - Voting frame (Display proposal title in image, yes/no/details buttons) - Mad Libs (input text, return story) - Gather words to use in a prompt to Chat GPT - Projects on yeeter have custom "unfurls" that are a frame to contribute to their project - Fork and token gate for ERC-20 shares/loot https://github.com/unlock-protocol/token-gated-frame - Frames have their own token balance - Hobo code symbols mintable as NFTs - Could use an @mention in a text input that tags the user - Frame Guild - DAOcaster - Mint with data gathered from text fields - Use frames to gather data like surveys, "What is the biggest problem in Web3?" (:shrug: maybe like [`@ponder`](https://warpcast.com/ponder) [`/ponder`](https://warpcast.com/~/channel/ponder) - Yeet from chat - Build Frames for Hats Protocol - Hot or Not: Have pfp and two buttons ![image](https://hackmd.io/_uploads/SygGDz0hT.png) ### Warcramps - "RDF with Frames would be awesome!" ~Dekan - It is really about relays - [ERC-1271: Standard Signature Validation Method for Contracts](https://eips.ethereum.org/EIPS/eip-1271) - Relays are "hosted service forwarding" - Hosted service connect to Frame - Save signatures with votes - Gasless transactions - Server relays signatures and pays for gas - In Moloch v3 but have not really been used ## Question - How do Frames relate to ads? ## Resources - [Starcaster](https://warpcast.com/earth2travis/0x2d393f98) - [Frame Transactions [Public - Draft v2]](https://warpcast.notion.site/Frame-Transactions-Public-Draft-v2-9d9f9f4f527249519a41bd8d16165f73?pvs=4) - [Farcaster Frames](https://warpcast.notion.site/Farcaster-Frames-4bd47fe97dc74a42a48d3a234636d8c5) - [The Open Graph protocol](https://ogp.me/) - [pimlico.eth](https://twitter.com/pimlicohq?lang=en) bundler for gas transactions on a server - [How To Make A Frame On Farcaster Using IPFS](https://www.pinata.cloud/blog/how-to-make-a-frame-on-farcaster-using-ipfs) - [Hacking on Farcaster Frames](https://www.spatializes.com/p/hacking-on-farcaster-frames) - [Frames: Text Input [Public]](https://warpcast.notion.site/Frames-Text-Input-Public-27c9f0d61903486d89b6d932dd0d6a22) - [Frames: External Links [Public]](https://warpcast.notion.site/Frames-External-Links-Public-60c9900cffae4e2fb1b6aae3d4601c15) - [Choose-Your-Own-Adventure](https://github.com/thebreadcat/adventure_frame) ## Examples - EIP Tools: https://eip.tools/ - [Shibuya](https://warpcast.com/pplpleasr/0xe2dbb4f1) - [FarCards](https://warpcast.com/earth2travis/0x15cf4e3b) - [Workstation95](https://warpcast.com/earth2travis/0x052b383e) - [FrameBoy 🎮](https://warpcast.com/undefined/0xef954c26) - ["Why?" feature as a frame](https://warpcast.com/kyle/0xd63b5b4d) - [Safe Frame](https://safe-frame.builders.garden/) - [Base Quest](https://warpcast.com/seangeng/0xedb2a886) - https://warpcast.com/0xsmallbrain/0x45514285 - https://warpcast.com/horsefacts.eth/0x12477d7d - [Charmverse](https://warpcast.com/ccarella.eth/0xde011da7) - [Lending on PolyTrade-USDC Timeswap Pool through a Frame is live!](https://warpcast.com/degenfi/0xb03afe9b) - [Vitalik's Poll](https://warpcast.com/vitalik.eth/0x940d8535) - [Farcaster.vote](https://warpcast.com/casedup/0xac931437) - https://warpcast.com/felirami/0x5b785a08 - [Pop Wonder Choose Your Own Adventure](https://warpcast.com/popwonder/0xff5a1960) - [Are you a Farcoder?](https://warpcast.com/polluterofminds/0x276b4b45) - [Add your three favorite artists](https://warpcast.com/coopahtroopa.eth/0x76cd1af4) - [frameme](https://frameme.xyz/frameme) - [Daily gratitude](https://warpcast.com/sarahzorah/0xd983b6fa) - [Frame by Frame animation for Nouns!](https://warpcast.com/sloppy/0xf751e2a1) - [Ask Airstack AI](https://warpcast.com/betashop.eth/0xaf230e6f) - [launching @paybot!](https://warpcast.com/robrecht/0xb49e7f20) - [shill me your favorite transaction frames](https://warpcast.com/woj.eth/0x317904d5) - [I built a frame to easily swap ETH for ERC20 tokens](https://warpcast.com/greg/0x2fa47192) - [WTF is Ham?? Go through this frame to find out! ](https://warpcast.com/deployer/0x91e10a3a) - [🤖 🚀 launch! Airstack AI Frame v1.0.1](https://warpcast.com/betashop.eth/0x087ff154) - [Introducing: Entity Formation Frames 🖼️](https://warpcast.com/earth2travis/0xbae21218) ## Projects ### Yeet Returning a different image based on what button is selected. For this one: - https://frames-yeet.vercel.app/ - https://github.com/earth2travis/frames I used this article from the ATX DAO Frames Hackathon: [Hacking on Farcaster Frames](https://www.spatializes.com/p/hacking-on-farcaster-frames) ### Mad Frames Dynamically returning an image that includes text from an input. For this one: - https://mad-frames.vercel.app/ - https://github.com/earth2travis/mad-frames I forked this repo: https://github.com/horsefacts/echo-the-dolphin Here is the frame validator I am using: - [Frame Validator](https://warpcast.com/~/developers/frames) #### Enhancements This was inspired by Mad Libs. It would be cool to use text inputs to generate a story. You could also do a sharable Valentines Day card: https://www.madlibs.com/wp-content/uploads/2016/04/ValentinesDayCard2-flat.pdf ### Enter the Tavern https://frame-guild-character-quest.vercel.app/api ### DAOs [🗳️ The first-ever DAO proposal vote within a Frame was a complete success, and with a really solid turnout!](https://warpcast.com/vocdoni/0xd7cbee24) - [Vocdoni](https://www.vocdoni.io/) - [Introducing 🗳️ onchain polls 🗳️](https://warpcast.com/destiner/0xce911d5a) ![image](https://hackmd.io/_uploads/SkQ3QBNsa.png) [Nouns X Farcaster](https://nounsfarcaster.com/) ### Warframes - DAO games in Frames - Use $DEGEN token for transactions - Can have fees or claim losses ### Silo NFT - Mint NFT to join DAO ### [Frame of Shame](https://hackmd.io/0vtOAI-jR9-uMHm8krTCzg?view) ### [FrameWork](https://hackmd.io/3bPjCrQhRBmo9KuozzK8EQ?view) ### Choose Your Own Adventure - Use Chat GPT to write - Use choices to feed into Chat GPT as prompts to create an image that is minted as an NFT ### Merked Slang: To defeat, beat up, kill, or eliminate someone. For example, "Eventually they rip off the wrong person and then they get merked". ### Metadata It looks like Mirror may automatically be generating Frames metadata for their blog posts: ![image](https://hackmd.io/_uploads/Bki2xomnp.png) May need to look into what Paragraph is doing too. ## Objections - Needs a server - Keys on server - Infra - Need better ideas for use cases - Too much like points - [ERC-4337: Account Abstraction](https://www.erc4337.io/) - Tech overlaps with DUCE - DIN built on DUCE - High resistance in the path to transactions - Warpcast has the tech but it is stuck in legal ## Austin Farcasters https://events.xyz/44cbdd5e