[FH-2] Ad Spot

[FTCHD]

Part of FrameHack2 (1,500 PTS)

ℹ️ Terminology

• Viewer: The person using the Frame on a client.

• User: The person who created the Frame on FrameTrain.

• Creator: The person who created the template from which the Frame was created. This is you, creating a template right now!

• View: A React component that is called by a handler (like a controller in MVC architecture), which then gets rendered using Satori and returned as image.

• BasicView: A specific, existent, pre-made React component imported from @/sdk/components that is used for common scenarios where you need just a title, a (optional) subtitle and a (optional) bottom message. It was made so creators don’t write the same basic component over and over again. It also comes with a matching component to use in your Inspector to let the User customize it named BasicViewInspector, click here for details.

• Handler: A function that receives the VALIDATED POST message from a Farcaster client, does the handling it needs, and returns either Frame data (metadata + a View or an image), or transaction data.

• Inspector: A required React component present in each template that appears as the “Configuration” panel on FrameTrain. It’s the right side of the editor, and is made up of one Configuration.Root and multiple Configuration.Section's (see below). You import the Configuration parent from @/sdk/inspector.

• Section: In order to not overwhelm the user with all the settings at once, we separate these in tabs that the user can navigate to one at a time. This is done internally, you only have to structure the content of your Inspector in multiple Section components.

• Page: A an optional React component present in a template’s folder, that is displayed on the /${FRAME_ID}/show route. You can include such a component in your template to display a Page with a detailed view of the votes in the case of a poll template, achieving the same functionality as WePonder for example.

• SDK: The FrameTrain SDK, located in the @/sdk folder. It provides components and utilities for gating, fonts and much more. Start reading about the SDK here.

• Config: The configuration data the User sets in the Inspector for the current Frame being edited, which is saved in the DB and fed into the template at runtime.

• Storage: Think of this like the state, but persisted in the DB. You receive the storage in your handler, and can return a new value for it, which updates the column in the DB.

Description

• Pin this Frame on your Farcaster profile or post it after a banger cast, renting ad space on your reach.
• The Page.tsx component shows a big hero/cover image of the ad at the top, and below a table of all bids. If the current user is the owner, they can approve a bidder from here as well by tapping on the “Accept” button that updates the DB.

Inspector

• The User can select the mode of operation, ie. how the bidding is done and how the ad space is rented. There’s 2 modes to select from: “Continuous” or “Auction”.
• If it’s continuous it means the highest bidder gets the space at any time, and Auction means it has a deadline (set by the User) after which no more bids can be placed.
• In “Auction” mode, the User would have to set a new deadline in order to enable bids again, while “Continuous” mode only needs to be setup once.
• If it’s an Auction then the User can approve at the end one or more of the bids (inside the Frame itself) and the Viewers who bided can pay the amount to the User (because they can check the status of their bid in the Frame as well).
• If the mode is “Auction” the User has an input for “deadline” DateTime, which functions as a deadline for bidding.
• If the mode is “Continuous” the User has an input for “expiry” in hours, which functions as the expiry time for an ad after it has won. After this expiry time passes the highest bid gets reset to 0, and anyone can start bidding again.
• Add as much helper text as possible in your Inspector to give the user direction about what they should do.

Views

• Cover: displays either the image ad itself, or a image/BasicView when the spot is empty (user picks in the Inspector), has a “Visit” link and a “ℹ️” button that leads to the InfoView.
• Info: shows the metadata setup by the User in the Inspector, has buttons for “Back”, “Buy Space”, “Manage” which opens a different Manage slide depending who the Viewer is (bidder, winner, owner).
• Buy: shows info about the process, the current highest bid and or/expiry time, has an input for amount. if the expiry time passed, show a message that you can’t bid and throw a FrameError when the Bid button is pressed.
• Success: displayed as callback after the Viewer signs the transaction.
• ManageBidder: gets displayed by the manage handler if the Viewer is a bidder, displays different info based on the rental mechanism (continuous/auction), has a “Back” button and “Bid” button that runs the same logic as the “Buy” slide.
• ManageWinner: allows you to change the Cover image or “Visit” link using one inputText field and 2 buttons, but before showing those buttons you first see a “Pay” button to do the payment.
• ManageOwner: can view the total amounts bidded, who bidded the most, expiry time and has a link button to the /show page which displays the Page.tsx component, where they can see and approve bids.