[FH-2] NFT Store

[FTCHD]

Part of FrameHack2 (1,000 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 anyone create their own NFT marketplace in a Frame!
• Uses the reservoir.tools API to fetch order status and build the transaction data for the trade, it’s free!
• Includes gating options so not everyone can buy products.
• The Page.tsx component displays the NFTs and a list of all purchases if the current person that views the page is the owner, otherwise just the products.

Inspector

• Has Section s for “General”, “NFT_Name”, “Cover”, Success” and “Gating”.
• User can create a new Section for each NFT with a button in the “General” Section. This is where the contract address and token ID must be entered (which is also queried by the Inspector in the background) and the visual aspect of this specific slide can be customized. Each NFT slide can be customized differently, as each has its own Section and slide.
• Verify if there’s an order on any marketplace for this NFT after making sure the data inputted by the User is valid, and add a helper text to the Inspector about having to create an order first before the NFT can be listed in the Frame.
• 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).
• Nft: shows one product per slide, with back/forward navigation and a “Buy” button. The data displayed is partially based on the User's input when configuring the Frame (title, description etc), and partially taken from onchain/API data (such as the price, which is taken from the existing order). Hint: Make sure to save these in the config and do the fetching in your Inspector, so you don't have to do the query every time in your handler functions.
• 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).