---
# System prepended metadata

title: Technical Session Notes
tags: [mcon2]

---

---
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