[FH-2] Bet

[FTCHD]

Part of FrameHack2 (700 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

• This template lets the User propose and place a bet with a counterparty (another Farcaster account) about anything.
• The User is required to add an arbitrator and a backup arbitrator. They do this by specifying their Farcaster usernames. The arbitrators are the only ones that can finalize the outcome of the bet.
• After the bet has concluded, the User has a button to pay the counterparty. A handler exists that builds the txData to send the reward from the User to the counterparty’s verified address on Farcaster. We get the counterparty’s address from storage, we saved it there when the counterparty accepted the bet.

Inspector

• Has Section s for “General” and “Cover”, we use the customization options from Cover for the other Views as well (the ones that can be applied to other Views, like the background and text color).
• The User can input the idea of the bet, and the input field for it has a placeholder text that reads: “I bet you that…”
• The User can select the deadline of the bet, otherwise it runs until a winner is selected by the arbitrator. Arbitrators cannot pick a winner before the deadline, a FrameError is thrown if they try.
• The User can select if the bet is public or private, in which case the Cover reads “This is a bet between @usera and @userb!”, and doesn’t show the idea.
• Add a “Share” button as the first element on the right side that shares the current /f/{frameId} url with a warpcast: deep link that includes a message like “Do you take my bet, @counterparty?”.

Views

• Cover: displays a BasicView, has a “Bet” button and a “Create Your Own” link button that leads to FrameTrain.
• Bet: the content of this slide depends if you are the User, the counterparty, or one of the arbitrators. The buttons are the main differentiator, if you’re the User it has a “Pay” (if the winner has been decided and you’re not the winner) and a “Back” button, if you’re the counterparty it shows an “Accept” button or just “Back” if you’ve already accepted, and if you’re the arbitrator you have 2 buttons to pick the winner and a “Back” button.
• CounterpartyAccepted: displayed after the counterparty accepts the bet.
• ArbitratorDecided: displayed after the arbitrator picks a winner.

[HiteshChoudhary0098]

@FTCHD is this issue still open for contribution?