first commit

.env.sample

@@ -0,0 +1,37 @@
+# key from wallet connect is required
+VITE_WALLET_CONNECT_ID=
+
+# rivet key for rpc calls, you can also pass in custom rpcs to many components
+VITE_RIVET_KEY=
+
+# # alternate RPCs for any supported network
+# VITE_MAINNET_RPC=
+# VITE_GOERLI_RPC=
+# VITE_GNOSISCHAIN_RPC=
+# VITE_OPTIMISM_RPC=
+# VITE_POLYGONPOS_RPC=
+# VITE_ARBITRUM_RPC=
+# VITE_SEPOLIA_RPC=
+# VITE_BASE_RPC=
+
+# # add your graph api key if using mainnet or gnosischain
+# VITE_GRAPH_API_KEY_MAINNET=
+
+# # optional will use rate limited if not set
+# VITE_OPTIMISM_ALCHEMY_KEY=
+# VITE_ARBITRUM_ALCHEMY_KEY=
+# VITE_POLYGONPOS_ALCHEMY_KEY=
+# VITE_SEPOLIA_ALCHEMY_KEY=
+# VITE_BASE_ALCHEMY_KEY=
+
+# # add blockexplorer api keys for any supported networks
+# VITE_ETHERSCAN_KEY=
+# VITE_ARBISCAN_KEY=
+# VITE_GNOSISSCAN_KEY=
+# VITE_POLYGONSCAN_KEY=
+# VITE_OPTIMISMSCAN_KEY=
+# VITE_SEPOLIASCAN_KEY=
+# VITE_BASESCAN_KEY=
+
+# # corresponds to keys in targetDao.ts if scoping app to a single dao
+# VITE_TARGET_KEY=

.github/workflows/main.yml

@@ -0,0 +1,12 @@
+# on:
+#   push:
+#     branches: ["feat/pg"]
+# jobs:
+#   my_first_job:
+#     uses: web3-storage/add-to-web3@v2
+#     id: web3
+#     with:
+#         web3_token: ${{ secrets.WEB3_STORAGE_TOKEN }}
+#         path_to_add: 'dist'
+# - run: echo ${{ steps.web3.outputs.cid }}
+# - run: echo ${{ steps.web3.outputs.url }}

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
+dev/

README.md

@@ -0,0 +1,214 @@
+# DAO MiniApp Starter (vite)
+
+Vite React Starter for a DAO app scoped to a single DAO.
+
+## Development
+
+### 1. Project Setup
+
+#### NPX/degit
+
+```bash
+npx degit HausDAO/dao-app-starter-vite my-daohaus-app
+
+cd my-daohaus-app
+
+git init
+
+yarn
+```
+
+#### SSH
+
+```bash
+git clone [email protected]:HausDAO/moloch-v3-vite-starter.git
+
+git remote remove origin
+
+cd dh-moloch-v3-vite-starter
+
+yarn
+```
+
+#### HTTPS
+
+```bash
+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
+
+```bash
+cp .env.sample .env
+```
+
+Rivet is the default RPC - Get a free Rivet key [here](https://rivet.cloud/)
+
+```yaml
+VITE_RIVET_KEY
+```
+
+You can also use any RPC url
+
+```yaml
+VITE_MAINNET_RPC=
+VITE_GOERLI_RPC=
+VITE_GNOSISCHAIN_RPC=
+VITE_OPTIMISM_RPC=
+VITE_POLYGONPOS_RPC=
+VITE_ARBITRUM_RPC=
+VITE_SEPOLIA_RPC=
+VITE_BASE_RPC=
+```
+
+
+You can also use Alchemy API keys for Optimism, Arbitrum, Base or Polygon
+
+```yaml
+VITE_OPTIMISM_ALCHEMY_KEY
+VITE_ARBITRUM_ALCHEMY_KEY
+VITE_POLYGONPOS_ALCHEMY_KEY
+VITE_BASE_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](https://etherscan.io/apis)
+
+```yaml
+VITE_ETHERSCAN_KEY
+VITE_ARBISCAN_KEY
+VITE_GNOSISSCAN_KEY
+VITE_POLYGONSCAN_KEY
+VITE_OPTIMISMSCAN_KEY
+VITE_BASESCAN_KEY
+```
+
+If developing for Mainnet or Gnosis Chain you can get an API key [here](https://thegraph.com/explorer/subgraph?id=GfHFdFmiSwW1PKtnDhhcxhArwtTjVuMnXxQ5XcETF1bP&view=Overview). Ignore this one if not worried about mainnet or gnosis chain yet.
+
+```yaml
+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.
+
+```yaml
+VITE_TARGET_KEY
+```
+
+### 3. Single DAO vs. Multi-DAO Setup
+
+#### If your app is supporting a single DAO
+
+[Summon](https://summon.daohaus.club) 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](https://admin.daohaus.club/#/molochv3/0x5/0xf6538c07324f59b3ba685d86393c65dce9676c70)
+
+##### `: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
+
+```bash
+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](https://storybook.js.org/)
+
+### 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.
+
+```tsx
+import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
+ ...
+
+const { daoChain, daoId } = useCurrentDao();
+```
+
+### Adding Custom Fields
+
+tbd
+
+### Editing the Theme
+
+tbd
+
+## Resources
+
+- [DAO Toolbox](https://toolbox.daohaus.fun/) docs
+- HausDAO monorepo [libs](https://github.com/HausDAO/monorepo/tree/develop/libs)
+- monorepo apps/admin

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DAOhaus v3 React Vite Starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      window.global = window;
+    </script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "daohaus-dao-app-starter",
+  "private": true,
+  "version": "0.2.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@daohaus/abis": "^0.4.1",
+    "@daohaus/connect": "^0.4.1",
+    "@daohaus/connect-context": "^0.4.1",
+    "@daohaus/contract-utils": "^0.4.1",
+    "@daohaus/form-builder": "^0.4.1",
+    "@daohaus/form-builder-base": "^0.4.1",
+    "@daohaus/keychain-utils": "^0.4.1",
+    "@daohaus/moloch-v3-data": "^0.4.1",
+    "@daohaus/moloch-v3-fields": "^0.4.1",
+    "@daohaus/moloch-v3-hooks": "^0.4.1",
+    "@daohaus/moloch-v3-legos": "^0.4.1",
+    "@daohaus/moloch-v3-macro-ui": "^0.4.1",
+    "@daohaus/profile-data": "^0.4.1",
+    "@daohaus/tx-builder": "^0.4.1",
+    "@daohaus/ui": "^0.4.1",
+    "@daohaus/utils": "^0.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^5.0.4",
+    "vite": "^3.2.0"
+  }
+}

src/App.css

@@ -0,0 +1,3 @@
+#root {
+  margin: 0 auto;
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import { DHConnectProvider } from '@daohaus/connect';
+import { useState } from 'react';
+import { Routes } from './Routes';
+
+export const App = () => {
+  const [daoChainId, setDaoChainId] = useState<string | undefined>();
+
+  return (
+    <DHConnectProvider daoChainId={daoChainId}>
+      <Routes setDaoChainId={setDaoChainId} />
+    </DHConnectProvider>
+  );
+};