Contest Frames for Farcaster

[sachben91]

Description

From a Farcaster frame, users should be able to:

• view the title of the contest
• click on the leaderboard button to toggle through the top five leaders of the contest
• Check if they are eligible for a contest. For a user to be eligible for a contest, they should have an ethereum address connected to their Farcaster account

  Project Owner

@sachben91

Bucket ID

7659

User Stories / Acceptance Criteria

• The Farcaster frame should have two options when the user has not taken any action on it - "View leaderboard" and "Check Eligibility"
• Clicking on "Check eligibility" checks if the user has an ethereum address connected to their Farcaster. If it's connected, the frame would show a "you're eligible for this contest" and if not it would show "you're not eligible, connect an ethereum account to your Farcaster"
• Clicking on view leaderboard should change the state of the frame to backward and forward toggle buttons, and a "view cast" button. The frame should show the top most upvoted contest entry and the "view cast" button should take the user to that cast. The toggle button allows the user to toggle upto the 5 most upvoted entries to the contest

Design Devlink

Frame prototypes

Design Screenshot

Additional Context

Some resources for implementing Frames (suggestions not guidelines)

• Paragraph
• Frog.fm

[masvelio]

Clicking on view leaderboard should change the state of the frame to backward and forward toggle buttons, and a "view cast" button. The frame should show the top most upvoted contest entry and the "view cast" button should take the user to that cast.

@sachben91 I investigated this and it won't be possible to embed cast into the frame. It is important to understand that frame, essentially, is nothing but the image that can be enhanced by the action buttons below the image. Cast, though, is interactive component with clickable author's profile picture, nickname. Body can have selectable text, clickable image or interactive video player. All of these are impossible to display inside a frame. Considering this limitations, these are solutions that we can implement:

1. We can use farcaster API to fetch data for leaderboard casts. Then, we can use this data to build our own "preview" of the cast and display it as a frame. Downside is that the frame can only be in 1.91:1 ratio, so if there is a lot of text in the cast, it might not fit in the frame. Also, there might be a hustle with rendering images. Videos won't be possible at all. So this will be time consuming but still the results won't be impressive. This is the example of very basic cast preview

2. "View leaderboard" button can be external link that will lead to our app. This should be new view as currently leaderboard for common contests is just a list of threads sorted by upvotes, which does not make sense for farcaster contest. Anyways, in the farcaster leaderboard page we would be able to use react library that renders farcaster casts and they look really good, they suport text, image, videos etc. See examples here

Personally I think that number 1 will be time consuming and for sure we will encounter more technical issues along the way. Also, it might lead to bad UX because cast previews will be very limited. Number two seems to be more reasonable from technical and UX point of view. Downside is that we are taking users away from farcaster app but the truth is that farcaster frames are mini-apps that have limited possibilities so we need to look for a compromise.

[masvelio]

@sachben91 This ticket has a very big scope and many things needs to be done beforehand. Also, considering this comment, the requirements of this ticket should be changed. To move this forward we need to:

• [ ] get back frames.js into the master by resolving #9101 or #9099
• [ ] have a design for farcaster contest view with leaderboard section (described in the comment above) + ticket for implementing it
• [ ] be able to launch farcaster contest
• [ ] implement eligibility check on the backend

cc @rbennettcw

[sachben91]

@masvelio on leaderboard - will likely have a design that I'm able to hand off tomorrow, will create a separate ticket for it. Do we need a separate ticket for implementing eligibility check?

[masvelio]

Do we need a separate ticket for implementing eligibility check?

will leave this answer to @rbennettcw

[rbennettcw]

There's a lot of duplication going on. I've already started on the eligibility check.

All of the platform side tickets, I've already created and started working on: https://github.com/orgs/hicommonwealth/projects/37/views/1?filterQuery=rbennett+milestone%3A%22Contests+on+Farcaster%22

If it's already implemented in the UI, then I'll wire up the platform side to it.

[masvelio]

There's a lot of duplication going on. I've already started on the eligibility check.

All of the platform side tickets, I've already created and started working on: https://github.com/orgs/hicommonwealth/projects/37/views/1?filterQuery=rbennett+milestone%3A%22Contests+on+Farcaster%22

If it's already implemented in the UI, then I'll wire up the platform side to it.

UI for eligibility is ready in frames. Leaderboard - no, we need a new design