[FT-2] Physical Product Store

[FTCHD]

Part of FrameHack2 (COMING SOON!)

ℹ️ 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.](https://github.com/FTCHD/frametrain/wiki/Home) - **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

• Sell your physical product straight for a Frame!
• Uses the slice.so API as the infrastructure for inventory and payments.
• Includes gating options so not everyone can buy products.
• The Page.tsx component of this template displays the products and a list of all purchases if the current user is the owner, otherwise just the products.
• You can reach out to Slice for questions on Discord (https://discord.gg/q8NYzjuAk2).

Inspector

• Has Section s for “Store”, “Cover”, “Product”, “Success” and “Gating”.
• Users need to have a store already on Slice to create a Frame. Mention this as a helper text in the Inspector (see the Cal template for how helper text looks).
• After creating a store, the User inputs the contract address or store identifier in the Inspector, which is used to query the products and metadata.
• Gating is done in the same as the existing Cal/Poll/Gated templates, using the GatingInspector component and runGatingChecks function. For more details see the Gating section of the SDK.

Views

• Cover: displays either an image or BasicView (user picks in the Inspector).
• Product: shows one product per slide, with back/forward navigation and a “Buy” button.
• Confirm: used to do extra processing and let the the user select a payment token (USDC, ETH) as well as enter more details like email address through an inputField, has a “Buy” tx button that returns the transaction data.
• Success: either an image or BasicView (user picks in the Inspector), displayed after the transaction has been signed (from the callback handler).

[waptik]

I'd like to tackle this one if possible

[FTCHD]

Everyone is free to handle any track/issue, you don't have to "reserve" it first!