Merge pull request #93 from HausDAO/feat/ui-updates

update frontent logic + ui

Author: santteegt

.env.sample

@@ -13,5 +13,5 @@ VITE_WALLET_CONNECT_ID=
 VITE_ETHERSCAN_KEY=
 # The Graph: https://thegraph.com/docs/en/querying/managing-api-keys/
 VITE_GRAPH_API_KEY_MAINNET=
-# DAO TARGET
+# Either TEST or PRODUCTION
 VITE_TARGET_KEY=

README.md

@@ -123,8 +123,11 @@ git clone https://github.com/HausDAO/protocol-guild-contracts.git
 ### Deploy a Home Registry
 
 #### 1. Collect addresses for at least 2 initial members 
-- [ ] addr 1
-- [ ] addr 2
+
+Output
+
+- `Addr_1`
+- `Addr_2`
 
 
 #### 2. Deploy initial DAO
@@ -137,43 +140,45 @@ Output:
 
 #### 3. Setup initial Split contract through the 0xSplits dApp
 
-- Go to this [link](https://app.0xsplits.xyz/) to create new Split with initial members, split amounts can be equal as these will be updated in the first split proposals. You can either set the DAO Safe address or an EOA as the split controller (you must transfer ownership later). You can freely set the distribution threshold and sponsorship fee.
+- Go to the [0xSplit dApp](https://app.0xsplits.xyz/) to create new Split with initial members (at least two), split amounts can be equal as these will be updated in the first split proposals. You can either set the DAO Safe address or an EOA as the split controller (you must transfer ownership later). You can freely set the distribution threshold and sponsorship fee.
 
 Output:
   - `split` address (`SPLIT_ADDRESS`)
 
-#### 4. Deploy a NetworkRegistry contract in the home network
+#### 4. Deploy a NetworkRegistry contract in the Home network
 
-- Before running the deployment script in the `protocol-guild-contract` repository you download locally, go to the `constants/config.ts` directory, find the `home network` you plan to work with and set the `moloch` `safe` & `split` addresses to the contract addresses you deployed in the previous steps.
+- Before running the deployment script in the `protocol-guild-contract` repository you download locally, go to the `constants/config.ts` directory, find the chainID of the `home network` you plan to work with and set the `moloch`, `safe` & `split` addresses to the contract addresses you deployed in the previous steps.
 - Open a terminal, go to the directory where `protocol-guild-contract` is located and run the following command line (example uses Goerli):
 
 ```bash
 pnpm hardhat --network goerli deploy --tags PGNetworkRegistry
 ```
 
 - Confirm the DAO Safe has ownership over the registry contract
-- Finally, set the new `registry` address within the `home network` in the `constants/config.ts` file.
+- Finally, set the new `pgRegistry` address within the `home network` in the `constants/config.ts` file.
 
 Output:
 
 - `registry` address (`REGISTRY_ADDRESS`)
 
 #### 5. Transfer control of the 0xSplit to NetworkRegistry
 
-- If you set the 0xSplit controller to an EOA, you can both `transferControl` to the `registry` contract through 0xSplits dApp. Alternatively, you can run the following script in the `protocol-guild-contract` repo:
+- If you set the 0xSplit controller to an EOA, you can `transferControl` to the `registry` contract through 0xSplits dApp. Alternatively, you can run the following script in the `protocol-guild-contract` repo:
 
 ```bash
 pnpm hardhat --network goerli registry:ownSplit
 ```
 
- If you initially set the 0xSplit controller to the DAO's Safe, you'll need to submit a DAO proposal using the DAOHaus `Multicall Proposal Builder`. For this, you need the `splitMain` address to craft a tx to call the `transferControl(<split>, <new_controller>)`
+ If you initially set the 0xSplit controller to the DAO's Safe, you'll need to submit a DAO proposal using the DAOHaus `Multicall Proposal Builder`. For this, you need the `splitMain` address to craft a tx that calls `transferControl(<split>, <new_controller>)`
 - If you set the 0xSplit controller to an external smart contract wallet, try using wallet connect or a vendor tx builder dApp.
 
-- Make sure the `registry` address is set as the new potential controller.
+- Make sure the `registry` address is set as the new potential 0xSplit controller.
 
 #### 6. NetworkRegistry accepts control of the 0xSplit
 
-- Now the new controller must accept the role for the 0xSplit contract. If the replica `registry` has an EOA as a fallback owner, you just need to call `acceptSplitControl()`. Otherview, you'll need to submit a DAO proposal using the DAOHaus `Multicall Proposal Builder` to craft a cross-chain tx by calling the `acceptNetworkSplitControl([<chainId>], [<relayerFee>])`.
+- Now the new controller must accept the role for the 0xSplit contract, so you need to submit a DAO proposal using the DAOHaus `Multicall Proposal Builder` to craft a tx that calls `acceptSplitControl()` in the `registry` contract.
+
+- Make sure the `registry` address is set as the 0xSplit controller: you verify that in the 0xSplit dApp or by opening the `splitMain` contract in the block explorer and look for the `getController(split)` function.
 
 ### Deploy a Foreign Registry
 
@@ -210,17 +215,17 @@ Output:
 
 #### 3. Transfer + Accept control of the 0xSplit to Replica NetworkRegistry
 
-- You can follow the same instructions in Steps 5 & 6 from above but for the replica network. Remember that you might set your deployer address (EOA) as the 0xSplit controller.
+- You can follow the same instructions in Steps 5 & 6 from above but for the replica network. Remember that you might set your deployer address (EOA) as the 0xSplit controller, so you might just need to call `acceptSplitControl()`. Otherwise, you'll to craft a cross-chain tx by calling the `acceptNetworkSplitControl([<chainId>], [<relayerFee>])` through the main `registry` contract.
 
-- You can also use the UI to batch the two actions required to add a new replica in the main registry (`updateNetworkRegistry` + `acceptNetworkSplitControl`). See the next section for instructions.
+- However,you can also use the UI to batch the two actions required to add a new replica in the main registry (`updateNetworkRegistry` + `acceptNetworkSplitControl`). See the next section for instructions.
 
 - In the end, make sure the replica `registry` address is set as the new controller.
 
-#### 4. Enable a foreign registry + acept 0xSplit control in the frontend
+#### 4. Enable a foreign registry + accept 0xSplit control in the frontend
 
-1. Open the [targetDao.ts](./src/targetDao.ts) config file and add a new record under `REPLICA_CHAIN_ADDRESSES` in the `TARGETS` object.
+1. Open the [targetDao.ts](./src/targetDao.ts) config file and add a new record (if not exists) under `REPLICA_CHAINS` in the `TARGETS` object.
 2. Make sure the [keychain.ts](./src/utils/keychain.ts) config file supports the network where you deployed the new registry.
-2. Navigate to the `Registries` page, open the menu for the new network registry and click on `Register`. This proposal form will batch the two actions required to enable a new replica in the main registry (`updateNetworkRegistry` + `acceptNetworkSplitControl`).
+2. In the frontend, navigate to the `Registries` page, open the menu for the new network registry and click on `Register`. This proposal form will batch the two actions required to enable a new replica in the main registry (`updateNetworkRegistry` + `acceptNetworkSplitControl`).
 
 
 ### Notes of deployed Foreign Registries

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "daohaus-vite-starter",
+  "name": "protocol-guild-app",
   "private": true,
   "version": "0.1.0",
   "type": "module",
@@ -10,20 +10,28 @@
   },
   "dependencies": {
     "@connext/sdk": "^2.1.1",
-    "@daohaus/connect": "^0.2.1",
-    "@daohaus/contract-utils": "^0.2.1",
-    "@daohaus/form-builder": "^0.2.1",
-    "@daohaus/keychain-utils": "^0.2.1",
-    "@daohaus/moloch-v3-fields": "^0.2.1",
-    "@daohaus/moloch-v3-hooks": "^0.2.1",
-    "@daohaus/moloch-v3-legos": "^0.2.1",
-    "@daohaus/moloch-v3-macro-ui": "^0.2.1",
-    "@daohaus/tx-builder": "^0.2.1",
-    "@daohaus/ui": "^0.2.1",
-    "@daohaus/utils": "^0.2.1",
+    "@daohaus/abis": "^0.3.3",
+    "@daohaus/connect": "^0.3.3",
+    "@daohaus/connect-context": "^0.3.3",
+    "@daohaus/contract-utils": "^0.3.3",
+    "@daohaus/form-builder": "^0.3.3",
+    "@daohaus/form-builder-base": "^0.3.3",
+    "@daohaus/keychain-utils": "^0.3.3",
+    "@daohaus/moloch-v3-data": "^0.3.3",
+    "@daohaus/moloch-v3-fields": "^0.3.3",
+    "@daohaus/moloch-v3-hooks": "^0.3.3",
+    "@daohaus/moloch-v3-legos": "^0.3.3",
+    "@daohaus/moloch-v3-macro-ui": "^0.3.3",
+    "@daohaus/profile-data": "^0.3.3",
+    "@daohaus/tx-builder": "^0.3.3",
+    "@daohaus/ui": "^0.3.3",
+    "@daohaus/utils": "^0.3.3",
     "@radix-ui/colors": "^2.1.0",
     "@tanstack/react-table": "^8.7.9",
+    "abitype": "^0.9.9",
     "cross-env": "^7.0.3",
+    "dexie": "^3.2.4",
+    "dexie-react-hooks": "^1.1.6",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

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

src/Routes.tsx

@@ -1,17 +1,46 @@
-import { Routes as Router, Route } from "react-router-dom";
+import { useEffect } from "react";
+import {
+  Routes as Router,
+  Route,
+  useLocation,
+  matchPath,
+} from "react-router-dom";
 
-import { Home } from "./pages/Home";
-import { LayoutContainer } from "./components/LayoutContainer";
-
-import { NewMember } from "./pages/NewMember";
-import { EditMember } from "./pages/EditMember";
+import { ReactSetter } from "@daohaus/utils";
 
+import { LayoutContainer } from "./components/layout/LayoutContainer";
+import { useCurrentRegistry } from "./hooks/context/RegistryContext";
+import { BulkUpload } from "./pages/BulkUpload";
 import { ControllerConfig } from "./pages/ControllerConfig";
+import { EditMember } from "./pages/EditMember";
+import { Home } from "./pages/Home";
+import { HistoryLogs } from "./pages/HistoryLogs";
+import { NewMember } from "./pages/NewMember";
 import { ReplicaConfig } from "./pages/ReplicaConfig";
-import { CsvUpload } from "./pages/CsvUpload";
 import { Registries } from "./pages/Registries";
+import { Settings } from "./pages/Settings";
+
+
+export const Routes = ({
+  setDaoChainId,
+}: {
+  setDaoChainId: ReactSetter<string | undefined>;
+}) => {
+  const location = useLocation();
+  const pathMatch = matchPath("molochv3/:daochain/:daoid/*", location.pathname);
+  const { daoChain, registryAddress } = useCurrentRegistry();
+  useEffect(() => {
+    if (daoChain) {
+      setDaoChainId(daoChain);
+    }
+    if (pathMatch?.params?.daochain) {
+      setDaoChainId(pathMatch?.params?.daochain);
+    }
+    if (!pathMatch?.params?.daochain) {
+      setDaoChainId(undefined);
+    }
+  }, [pathMatch?.params?.daochain, setDaoChainId]);
 
-export const Routes = () => {
   return (
     <Router>
       <Route path="/" element={<LayoutContainer />}>
@@ -20,8 +49,10 @@ export const Routes = () => {
         <Route path={`editmember`} element={<EditMember />} />
         <Route path={`controller/:chainID`} element={<ControllerConfig />} />
         <Route path={`replica/:chainID`} element={<ReplicaConfig />} />       
-         <Route path={`registries/`} element={<Registries />} />
-        <Route path={`membership/`} element={<CsvUpload />} />
+        <Route path={`registries/`} element={<Registries />} />
+        <Route path={`membership/`} element={<BulkUpload />} />
+        <Route path={`settings/`} element={<Settings />} />
+        <Route path={`history`} element={<HistoryLogs />} />
       </Route>
     </Router>
   );