DAO MiniApp Starter (vite)

Vite React Starter for a DAO app scoped to a single DAO.

Development

1. Project Setup

NPX/degit

npx degit HausDAO/dao-app-starter-vite my-daohaus-app

cd my-daohaus-app

git init

yarn

SSH

git clone git@github.com:HausDAO/moloch-v3-vite-starter.git

git remote remove origin

cd dh-moloch-v3-vite-starter

yarn

HTTPS

git clone https://github.com/HausDAO/dh-v3-vite-starter.git

git remote remove origin

cd dh-moloch-v3-vite-starter

yarn

2. .env Setup

cp .env.sample .env

Rivet is the default RPC - Get a free Rivet key here

VITE_RIVET_KEY

You can also use Alchemy API keys for Optimism, Arbitrum or Polygon

VITE_OPTIMISM_ALCHEMY_KEY
VITE_ARBITRUM_ALCHEMY_KEY
VITE_POLYGONPOS_ALCHEMY_KEY

Proposal details uses etherscan explorer APIs to fetch ABIs. Add a key for any chain you are supporting. Get an Etherscan API key here

VITE_ETHERSCAN_KEY
VITE_ARBISCAN_KEY
VITE_GNOSISSCAN_KEY
VITE_POLYGONSCAN_KEY
VITE_OPTIMISMSCAN_KEY

If developing for Mainnet or Gnosis Chain you can get an API key here. Ignore this one if not worried about mainnet or gnosis chain yet.

VITE_GRAPH_API_KEY_MAINNET

This is the target address for the DAO you are developing the app for. You will get this value in the next step if you do not have an existing DAO. You'll need to use this if you are setting the app up for single DAO. More on this below.

VITE_TARGET_KEY

3. Single DAO vs. Multi-DAO Setup

If your app is supporting a single DAO

Summon a DAO

Edit src/targetDao.ts

Add your DAO's data to the property and values of the object

Edit .env

Add the DAO address in the VITE_TARGET_KEY variable

• You can add multiple DAOs as new objects in targetDao.ts and toggle with this env variable
• You can add other variables to targetDao.ts as needed

If your app is supporting multiple DAOs

Remove VITE_TARGET_KEY from the .env file.

You will now beable to navigate to any existing dao whenrunning the app with the following url pattern:

/#/molochv3/:daochain/:daoid

This is the same pattern seen in the DAOhaus admin app

:daochain is the network ID for the DAO

'0x1' - mainnet '0x5' - goerli '0x64' - gnosis chain '0x89' - polygon '0xa' - optimism '0xa4b1' - arbitrum

:daoid is the contract address for the DAO smart contract

4. Run the Development Server

yarn dev

Reference

main.tsx

• Sets up the react-query provider @daohaus/moloch-v3-hooks will use
• Sets up HausThemeProvider - that provides the styling theme to the app

App.tsx

• Sets up DHConnectProvider - that handles the Wallet Connect functionality
• Adds the router to the app

HomeContainer.tsx

• Parent component wrapping all on-dao scoped routes/pages
• Sets up DHLayout which adds the connect button and navigation to the app
  • You can update the navigation in navLinks

DaoContainer.tsx

• Parent component wrapping all dao scoped routes/pages
• Sets up DHLayout which adds the connect button and navigation to the app
  • You can update the navigation in navLinks
• Sets up TXBuilder which enables easy transaction creation

FormTest.tsx

• Example of how to add FormBuilder to the app
• See the legos it is using at legos/forms.ts, legos/fields.ts, and legos/tx.ts
  • These are recipes for creating forms and contract function interactions

Pages/

• Example of many current DAO Admin pages
  • Dao overview
  • Proposal list and Proposal details
  • Member list and Member details
  • Dao Settings

Adding UI Components

• Storybook

Methods for Accessing daoid and daochain

These values are used in most hooks and components and are loaded into a context from the @daohaus/moloch-v3-hooks library and then there is a hook you can use.

import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
 ...

const { daoChain, daoId } = useCurrentDao();

Adding Custom Fields

tbd

Editing the Theme

tbd

Resources

• DAO Toolbox docs
• HausDAO monorepo libs
• monorepo apps/admin