chore: add manageProfileMembers

packages/common/src/allo/allo.ts

@@ -245,6 +245,19 @@ export interface Allo {
     }
   >;
 
+  manageProfileMembers: (args: {
+    profileId: Hex;
+    members: Address[];
+    addOrRemove: "add" | "remove";
+  }) => AlloOperation<
+    Result<null>,
+    {
+      transaction: Result<Hex>;
+      transactionStatus: Result<TransactionReceipt>;
+      indexingStatus: Result<null>;
+    }
+  >;
+
   directAllocation: (args: {
     tokenAddress: Address;
     poolId: string;

packages/common/src/allo/backends/allo-v1.ts

@@ -1311,6 +1311,25 @@ export class AlloV1 implements Allo {
     });
   }
 
+  manageProfileMembers(args: {
+    profileId: Hex;
+    members: Address[];
+    addOrRemove: "add" | "remove";
+  }): AlloOperation<
+    Result<null>,
+    {
+      transaction: Result<Hex>;
+      transactionStatus: Result<TransactionReceipt>;
+      indexingStatus: Result<null>;
+    }
+  > {
+    return new AlloOperation(async () => {
+      const result = new AlloError(`Unsupported on v1 ${args}`);
+      return error(result);
+    });
+  }
+
+
   directAllocation(args: {
     tokenAddress: Address;
     poolId: string;

packages/common/src/allo/backends/allo-v2.ts

@@ -1505,6 +1505,64 @@ export class AlloV2 implements Allo {
     });
   }
 
+  manageProfileMembers(args: {
+    profileId: Hex;
+    members: Address[];
+    addOrRemove: "add" | "remove";
+  }): AlloOperation<
+    Result<null>,
+    {
+      transaction: Result<Hex>;
+      transactionStatus: Result<TransactionReceipt>;
+      indexingStatus: Result<null>;
+    }
+  > {
+    return new AlloOperation(async ({ emit }) => {
+      const txData =
+        args.addOrRemove === "add"
+          ? this.registry.addMembers({
+              profileId: args.profileId,
+              members: args.members,
+            })
+          : this.registry.removeMembers({
+              profileId: args.profileId,
+              members: args.members,
+            });
+
+      const txResult = await sendRawTransaction(this.transactionSender, {
+        to: txData.to,
+        data: txData.data,
+        value: BigInt(txData.value),
+      });
+
+      emit("transaction", txResult);
+
+      if (txResult.type === "error") {
+        return error(txResult.error);
+      }
+
+      let receipt: TransactionReceipt;
+      try {
+        receipt = await this.transactionSender.wait(txResult.value);
+        emit("transactionStatus", success(receipt));
+      } catch (err) {
+        console.log(err);
+        const result = new AlloError(`Failed to ${args.addOrRemove} profile members`);
+        emit("transactionStatus", error(result));
+        return error(result);
+      }
+
+      await this.waitUntilIndexerSynced({
+        chainId: this.chainId,
+        blockNumber: receipt.blockNumber,
+      });
+
+      emit("indexingStatus", success(null));
+
+      return success(null);
+    });
+  }
+
   directAllocation(args: {
     tokenAddress: Address;
     poolId: string;

packages/round-manager/src/context/program/UpdateRolesContext.tsx

@@ -0,0 +1,132 @@
+import React, { SetStateAction, createContext, useContext } from "react";
+import { ProgressStatus } from "../../features/api/types";
+import { Allo } from "common";
+import { Hex } from "viem";
+import { datadogLogs } from "@datadog/browser-logs";
+
+type SetStatusFn = React.Dispatch<SetStateAction<ProgressStatus>>;
+
+export enum AddOrRemove {
+  ADD = "add",
+  REMOVE = "remove",
+}
+
+export type UpdateRolesData = {
+  profileId: Hex;
+  members: Hex[];
+  addOrRemove: AddOrRemove;
+  allo: Allo;
+};
+
+export interface UpdateRolesState {
+  contractUpdatingStatus: ProgressStatus;
+  setContractUpdatingStatus: SetStatusFn;
+  indexingStatus: ProgressStatus;
+  setIndexingStatus: SetStatusFn;
+}
+
+export const initialUpdateRolesState: UpdateRolesState = {
+  contractUpdatingStatus: ProgressStatus.IN_PROGRESS,
+  setContractUpdatingStatus: () => {
+    /* empty */
+  },
+  indexingStatus: ProgressStatus.NOT_STARTED,
+  setIndexingStatus: () => {
+    /* empty */
+  },
+};
+
+export const UpdateRolesContext = createContext<UpdateRolesState>(
+  initialUpdateRolesState
+);
+
+export const UpdateRolesProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [contractUpdatingStatus, setContractUpdatingStatus] =
+    React.useState<ProgressStatus>(
+      initialUpdateRolesState.contractUpdatingStatus
+    );
+
+  const [indexingStatus, setIndexingStatus] = React.useState<ProgressStatus>(
+    initialUpdateRolesState.indexingStatus
+  );
+
+  const providerProps: UpdateRolesState = {
+    contractUpdatingStatus,
+    setContractUpdatingStatus,
+    indexingStatus,
+    setIndexingStatus,
+  };
+
+  return (
+    <UpdateRolesContext.Provider value={providerProps}>
+      {children}
+    </UpdateRolesContext.Provider>
+  );
+};
+
+interface _updateRolesParams {
+  context: UpdateRolesState;
+  UpdateRolesData: UpdateRolesData;
+}
+
+const _updateRoles = async ({
+  context,
+  UpdateRolesData,
+}: _updateRolesParams) => {
+  const { profileId, members, addOrRemove, allo } = UpdateRolesData;
+  const { setContractUpdatingStatus, setIndexingStatus } = context;
+
+  await allo
+    .manageProfileMembers({
+      profileId,
+      members,
+      addOrRemove,
+    })
+    .on("transactionStatus", (res) => {
+      if (res.type === "success") {
+        setContractUpdatingStatus(ProgressStatus.IS_SUCCESS);
+        setIndexingStatus(ProgressStatus.IN_PROGRESS);
+      } else {
+        console.error("Transaction Status Error", res.error);
+        datadogLogs.logger.error(`_updateRoles: ${res.error}`);
+        setContractUpdatingStatus(ProgressStatus.IS_ERROR);
+      }
+    })
+    .on("indexingStatus", (res) => {
+      if (res.type === "success") {
+        setIndexingStatus(ProgressStatus.IS_SUCCESS);
+      } else {
+        console.error("Indexing Status Error", res.error);
+        datadogLogs.logger.error(`_updateRoles: ${res.error}`);
+        setIndexingStatus(ProgressStatus.IS_ERROR);
+      }
+    })
+    .execute();
+};
+
+export const useUpdateRoles = () => {
+  const context = useContext(UpdateRolesContext);
+  if (!context) throw new Error("Missing UpdateRolesContext");
+
+  const { setContractUpdatingStatus, setIndexingStatus } = context;
+
+  const updateRoles = async (UpdateRolesData: UpdateRolesData) => {
+    setContractUpdatingStatus(initialUpdateRolesState.contractUpdatingStatus);
+    setIndexingStatus(initialUpdateRolesState.indexingStatus);
+
+    return _updateRoles({
+      context,
+      UpdateRolesData,
+    });
+  };
+
+  return {
+    updateRoles,
+    contractUpdatingStatus: context.contractUpdatingStatus,
+    indexingStatus: context.indexingStatus,
+  };
+};

packages/round-manager/src/features/common/useApplicationsByRoundId.tsx

@@ -1,5 +1,4 @@
 import { useAccount } from "wagmi";
-import { GrantApplication } from "../../features/api/types";
 import { useDataLayer } from "data-layer";
 import useSWR from "swr";
 import { convertApplications } from "../api/utils";

packages/round-manager/src/features/program/TabGroup.tsx

@@ -2,7 +2,7 @@
 
 import { Fragment, useState, Key } from "react";
 import { classNames, getStatusStyle, prettyDates3 } from "../common/Utils";
-import { RefreshIcon, PlusIcon, PlusSmIcon } from "@heroicons/react/solid";
+import { PlusIcon, PlusSmIcon } from "@heroicons/react/solid";
 import Close from "../../assets/close.svg";
 import DirectGrants from "../../assets/direct-grants.svg";
 import QuadraticFundingSVG from "../../assets/quadratic-funding.svg";
@@ -13,6 +13,7 @@ import { Link, useParams } from "react-router-dom";
 import { RoundCard } from "../round/RoundCard";
 import { datadogLogs } from "@datadog/browser-logs";
 import { useProgramById } from "../../context/program/ReadProgramContext";
+import { ViewManageProgram } from "./ViewManageProgram";
 import { useRounds } from "../../context/round/RoundContext";
 import { ProgressStatus, Round } from "../api/types";
 import { Transition, Dialog } from "@headlessui/react";
@@ -21,6 +22,7 @@ import { useAccount } from "wagmi";
 const tabs = [
   { name: "Quadratic funding", current: true },
   { name: "Direct grants", current: false },
+  { name: "Settings", current: false},
 ];
 
 export const TabGroup = () => {
@@ -31,7 +33,7 @@ export const TabGroup = () => {
     chainId?: string;
     id: string;
   };
-  const { chain } = useAccount();
+  const { chain, address } = useAccount();
   const programChainId = chainId ? Number(chainId) : chain?.id;
   const { program: programToRender } = useProgramById(programId);
   const { data: rounds, fetchRoundStatus } = useRounds(
@@ -145,10 +147,6 @@ export const TabGroup = () => {
     <div className="bg-[#F3F3F5] p-8 rounded">
       <div className="px-12 ml-10 mr-10">
         <div className="flex px-12 ml-10 mr-10 justify-center flex-col text-center">
-          <RefreshIcon
-            className="h-12 w-12 mt-8 mx-auto bg-white rounded-full p-3"
-            aria-hidden="true"
-          ></RefreshIcon>
           <h2 className="text-2xl my-4 pt-8">My Rounds</h2>
           <p
             className="text-grey-400 text-sm mb-8"
@@ -314,13 +312,13 @@ export const TabGroup = () => {
                     aria-current={tab.name === currentTab ? "page" : undefined}
                   >
                     <span>{tab.name}</span>
-                    <span
-                      className={`py-1 px-2 mx-2 bg-${tab.name === "Quadratic funding" ? "green" : "yellow"}-100 rounded-full text-xs font-mono`}
-                    >
-                      {tab.name === "Quadratic funding"
-                        ? qfRounds.length
-                        : dgRounds.length}
-                    </span>
+                    {["Quadratic funding", "Direct grants"].includes(tab.name) &&
+                      <span
+                        className={`py-1 px-2 mx-2 bg-${tab.name === "Quadratic funding" ? "green" : "yellow"}-100 rounded-full text-xs font-mono`}
+                      >
+                        {tab.name === "Quadratic funding" ? qfRounds.length : dgRounds.length}
+                      </span>
+                    }
                   </span>
                 ))}
               </div>
@@ -357,12 +355,17 @@ export const TabGroup = () => {
               <div className="md:mb-8">{dgRoundItems}</div>
             </div>
           )}
+          { currentTab === "Settings" && (
+            <ViewManageProgram program={programToRender!} userAddress={address || "0x"} />
+          )}
         </div>
       </div>
       {isRoundsFetched &&
         rounds.length === 0 &&
         programToRender?.tags?.includes(getAlloVersion()) &&
-        noRoundsGroup}
+        currentTab !== "Settings" &&
+        noRoundsGroup
+      }
       <Transition.Root show={isModalOpen} as={Fragment}>
         <Dialog
           as="div"