PhishFrame

PhishFrame is here to give our Farcaster friends a simple and convenient set of security tools to ensure your safety in the world of Web3. Got a URL that's looking a bit fishy? No problem! Just pop it into PhishFrame and with a single click, you can see if it's on ChainPatrol’s scam blocklist. It's as easy as that!

What's more, PhishFrame empowers all Farcaster users to report any suspicious URLs. Each URL you submit gets a thorough review and, if found to be shady, it's swiftly added to a blocklist of domains. This blocklist is used by more than 20 wallets, including big names like Metamask, Coinbase Wallet, and Phantom.

So, with PhishFrame, every Farcaster user gets to play detective with the links they come across. Together, we're harnessing the power of the Farcaster community to boost phishing detection and brand protection. Stay safe out there, friends!

PhishFrame is built using frames.js and Next.js. I built the frame in a single file and implemented my own basic router for the different operations: check and report. The user-inputted URLs are sanitized and parsed to determine if they are valid and what the user’s intent was.

Frames.js did a lot of the heavy lifting to get the frame working with Farcaster. I started the project with their multi-page example and built out my UI using the Tailwind styling capabilities of @vercel/og that frames.js exposes.

After building the main functionality of PhishFrame using the @chainpatrol/sdk to check URLs and report them to ChainPatrol, I began work on the styling of the frame.

People use products that look nice, are simple to understand, and provide something of value. To achieve these goals, I tried to imagine the type of Farcaster user that would benefit from the security tools that PhishFrame offers.

Developers and security researchers were the initial audience that came to mind. So, I decided to theme the Image UI of PhishFrame like a command-line terminal. I recreated the familiar MacOS Terminal UI (in dark mode, of course!) and built some reusable components to visualize a shell session.

I incorporated some basic syntax highlighting where I thought it made sense to improve legibility and the familiarity that developers expect from their terminal. At first, I planned to use the famous https://shiki.style/ library, but given the 2MB constraints on Vercel for Edge Functions, I decided to just implement the syntax highlighting manually.

The biggest challenge I ran into was at the end deploying the project to Vercel. As mentioned above, there’s a strict limit on the bundle size for Edge Functions, and for some reason, the @farcaster/core package that frames.js depends on was not tree-shaking. This ate up 90% of the bundle size and left very little room for my own code. To get this project to the finish line, I ended up switching to deploying on Railway as a “serverful” application.

All in all, the experience of building frames was super smooth. Frame.js’ debugger helped a lot in creating a tight feedback loop and it was really fun to design around the constraints of Frames on Farcaster.