--- tags: mcon2 --- # Technical Session Notes ## Form Builder Overview Form Builder is a tool for scaffolding out React-based forms through adding in static data as a JavaScript object. The object takes in the form fields and handles the validation and transactions. The form takes in the following: - `title` - `subtitle` - `tx` - `fields` - There are many different field types to render, and the basic field types are what's included in the Core UI - Can add in custom fields that are more specific to the Moloch context and can then be added in as custom fields - Once the config instructions are created the form will then render in the UI, and pass the form data into the configured tx - Fields are added in the following way. These three fields are commonly used, but another custom field can be added as well by passing in an object into the fields - `FIELD.TITLE` - `FIELD.DESCRIPTION` - `FIELD.LINK` ```jsx `fields: [FIELD.TITLE, FIELD.DESCRIPTION, FIELD.LINK, {id: 'pubTitle', type: 'input', placeholder: 'pubTitle', label: 'Publication Title'}, {id: 'pubDescription', type: 'textarea', placeholder: 'pub description', label: 'Publication Description'}]` ``` - The custom fields added via the object for the `pubTitle` will be used for the contract interaction - (Fill in with Jord's actual example) - Once the form config is created, the form will be rendered in the UI using the corresponding field types - There are additional UI helpers that can be used as well - `JSONDetails` can help with scaffolding where you're able to pass in the schema (including an `action`) - . syntax maps to the `id` that is defined in the Form config - `.formValues.pubTitle` matches the `pubTitle` `id` in the config - Getting all the data from the form -> turning it into JSON - Logging things out helps with debugging -- there is a `log` prop for enabling logging if set to `true` - Can also utilize the react-hook-forms dev tools via the `devTool` prop - This provides visibility into how the validation is working behind the scene ## Tabula - Tabula is an app from Gnosis Guild that uses the Poster contract under the hood - For the demo, the Moloch DAO will call Poster and then Tabula's subgraph looks through this content and creates a publication on the frontend - Can look to the schema for Tabula to inform the custom fields needed -- will be stringified and passed into the contract - These can then be added to the Form Builder config as custom fields (the objects being passed in the example above) - Each field must have an `id` and a `type` -- the types can come from the existing DAOhaus fields in the Core UI *or* you can create a custom type that can be used in Form Builder once it's added to the custom fields ## Libraries Demo - *HausConnect* is one of the feature libraries that provides functionality related to handling the address, network, and also includes UI components that integrate the functionality (such as the ConnectButton and the `DaoHausNav`) - `useDao` example from the `dao-context` - Include documentation on this -- `useDao` and pulling out the `dao` - Transaction Builder - Wraps the app -- takes in the `chainId` from `HausConnect` - `<TxBuilder chainId={chainId} providerId={providerId} safeId={dao?.safeAddress} appState={}/>` - Structure the starter apps in a similar way -- provide the instructions along the way - What are the use cases? Create recipes that correspond to each of these use cases