This is the "simplest" version of a Frame that can do all of the things a Frame should be able to do. It may be more than you need. It may be less. But it's a great place to start, IMHO.
- ๐ฑ Zero Framework: Didn't want a framework baked in, and most options default to Next.js/React. No offense, but those seem like overkill.
- ๐ Zero Cost: Frames are for experiments! Experimenting is more fruitful when it's free.
- ๐งฑ Stable: The domain and its attached state should be reasonably stable over the horizon of an experiment. Replit can only give you this at cost (see above)
- ๐คธ Dynamic: You can get all the above pretty easy with static files, but let's be real: we want dynamism or something! And, as social animals, we want to act and react.
- ๐คค Small: and hopefully easy. Nobody to impress here. If my quite smooth brain can write this, your quite prune-like brain can understand it to.
- ๐ Cool Tech: We want to be at the ๐คฌ edge here, people! I admit this is somewhat in tension with "simplest".
- โ Flow Definition: Define button & input behaviour within each frame file.
- ๐ Static & Dynamic Images: Support for both static & dynamic frame images.
- ๐ง Validate trustedData: Verify the current payload's
trustedData
via Farcaster Hubs (eg. wield.co), to protect against tomfoolery. - โจ๏ธ Text inputs: Accept that UGC with byte-level protection. Our
safeDecode
function leveragesdompurify
to give you a literal, and helpful purity test. The judgement of whether the content meets your standards is still up to you, though. โ๏ธ Redirect Support: Because frames can't do everything ... yet! And, doggonit, there's a whole worldwide webout there for y'all to explore.- ๐๏ธ Mint from frame (COMING SOON): Using Syndicate + Base, this boilerplate gives you what you need to make random interactions with your frame unforgettable. Is that a good idea? That sounds like a you problem.
- ๐ Anti-theft: Don't bet the engagement farm! Bind your Frame to a specific cast or account so nobody else can get your likes, follows, recasts ... and respect. Capisci?
https://warpcast.com/depatchedmode/0xecad681e
- Clone the repo
- Install the Netlify CLI
- Copy
sample.env
to.env
and add:- your Netlify Key, for deploys:
NETLIFY_AUTH_TOKEN
- a [Wield Key](https://docs.wield.co/farcaster/api() for reading Farcaster state:
WIELD_API_KEY
- your Netlify Key, for deploys:
npm install
netlify dev
- Run
netlify dev --live
will give proxy your local machine to the world wide web. - Test that link in the Warpcast Embed UI: https://warpcast.com/~/developers/embeds
We'll update with a proper docs soon*, but you'll find everything you need in the public
and src
directories.
To add a new frame, create a {frameName}.js
file in /src/frames
and add it as an import to /src/frames/index.js
. You'll find examples of dynamic (eg. rendered HTML) and static (eg. served from the public folder) frames in that directory.
*Y'all are welcome to help me write them.
This should be as simple as watching a git repo for commits.
You may encounter a 502 gateway error after deployment on the /og-image
endpoint. This is a known issue with the sharp
module this repo relies upon. We'll hopefully have this fixed by default, but for now there are workarounds. Follow this thread for fixes:
depatchedmode/simplest-frame#3
I am a designer larping as a dev. I invite your collaboration and feedback. Please be kind.
And please! Can we make it simpler?
- Less bad
- More better
- Migration to the everywhere.computer