add a Manage Team section to Round Details page

packages/round-manager/src/features/api/round.ts

@@ -128,6 +128,7 @@ function indexerV2RoundToRound(round: RoundForManager): Round {
     },
     ownedBy: round.projectId,
     operatorWallets: operatorWallets,
+    roles: round.roles,
     finalized: false,
     tags: round.tags,
     createdByAddress: round.createdByAddress,

packages/round-manager/src/features/api/types.ts

@@ -8,7 +8,7 @@ import { RoundVisibilityType } from "common";
 import { BigNumber } from "ethers";
 import { Address } from "viem";
 import { SchemaQuestion } from "./utils";
-import { RoundForManager, SybilDefense } from "data-layer";
+import { AddressAndRole, RoundForManager, SybilDefense } from "data-layer";
 
 export type Network = "optimism" | "fantom" | "pgn";
 
@@ -239,6 +239,10 @@ export interface Round {
    * Addresses of wallets that will have admin privileges to operate the Grant program
    */
   operatorWallets?: Array<string>;
+  /**
+   * List of addresses and their roles in the round
+   */
+  roles?: AddressAndRole[];
   /**
    * List of projects approved for the round
    */

packages/round-manager/src/features/round/ViewManageTeam.tsx

@@ -0,0 +1,108 @@
+import { AddressAndRole } from "data-layer";
+import { Round } from "../api/types";
+import { useMemo } from "react";
+import { useEnsName } from "wagmi";
+
+const sortDataByRole = (data: AddressAndRole[]): AddressAndRole[] => {
+  return data.sort((a, b) => {
+    if (a.role === "ADMIN") return -1;
+    if (b.role === "ADMIN") return 1;
+    return a.role.localeCompare(b.role);
+  });
+};
+
+const filterRoles = (data: AddressAndRole[]): AddressAndRole[] => {
+  return data.reduce((acc: AddressAndRole[], current) => {
+    const existingIndex = acc.findIndex(
+      (item) => item.address === current.address
+    );
+
+    // Check if this address is already included
+    if (existingIndex === -1) {
+      // If not included, simply add the current item
+      acc.push(current);
+    } else if (
+      acc[existingIndex].role !== "ADMIN" &&
+      current.role === "ADMIN"
+    ) {
+      // If the existing item is not an Admin but the current is, replace it
+      acc[existingIndex] = current;
+    }
+    return acc;
+  }, []);
+};
+
+export default function ViewManageTeam(props: { round: Round | undefined }) {
+  // Show Admin role first, then Operator
+  const sortedRoles = useMemo(() => {
+    return sortDataByRole(props.round?.roles || []);
+  }, [props.round?.roles]);
+
+  // If an address is an Admin & Operator, only show Admin in the UI
+  const filteredRoles = useMemo(() => {
+    return filterRoles(sortedRoles);
+  }, [sortedRoles]);
+
+  return (
+    <div>
+      <p className="font-bold text-lg mt-2 mb-2">Manage Team</p>
+      <p className="text-sm text-gray-400 mb-2">View who is on your team.</p>
+      <p className="text-sm text-gray-400 mb-2">
+        Only admins can add others to your team.
+      </p>
+      <p className="text-md mt-6 mb-4">View Members</p>
+      <div className="overflow-x-auto">
+        <table className="min-w-full">
+          <thead>
+            <tr>
+              <th
+                scope="col"
+                className="w-1/4 py-3 text-left text-base font-medium text-gray-500 tracking-wider"
+              >
+                Name
+              </th>
+              <th
+                scope="col"
+                className="w-2/3 px-6 py-3 text-left text-base font-medium text-gray-500 tracking-wider"
+              >
+                Wallet address
+              </th>
+              <th
+                scope="col"
+                className="w-1/4 px-6 py-3 text-left text-base font-medium text-gray-500 tracking-wider"
+              >
+                Role
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-100">
+            {filteredRoles.map((item: AddressAndRole, index) => (
+              <tr key={index}>
+                <td className="w-1/4 py-4 whitespace-nowrap text-sm font-medium text-gray-400">
+                  User{index + 1}
+                </td>
+                <AddressRow address={item.address} />
+                <td className="w-1/4 px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                  {item.role === "ADMIN" ? "Admin" : "Operator"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function AddressRow(props: { address: string }) {
+  const { data: ensName } = useEnsName({
+    address: props.address as `0x${string}`,
+    chainId: 1,
+  });
+
+  return (
+    <td className="w-2/4 px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+      {ensName || props.address}
+    </td>
+  );
+}

packages/round-manager/src/features/round/ViewRoundPage.tsx

@@ -11,6 +11,7 @@ import {
   DocumentTextIcon,
   InboxIcon,
   UserGroupIcon,
+  UserAddIcon,
 } from "@heroicons/react/solid";
 import { Button } from "common/src/styles";
 import { Link, useParams } from "react-router-dom";
@@ -52,6 +53,7 @@ import { getRoundStrategyType } from "common";
 import { useApplicationsByRoundId } from "../common/useApplicationsByRoundId";
 import AlloV1 from "common/src/icons/AlloV1";
 import AlloV2 from "common/src/icons/AlloV2";
+import ViewManageTeam from "./ViewManageTeam";
 
 export const isDirectRound = (round: Round | undefined) => {
   return (
@@ -221,6 +223,29 @@ export default function ViewRoundPage() {
                           </div>
                         )}
                       </Tab>
+                      <Tab
+                        className={({ selected }) =>
+                          verticalTabStyles(selected)
+                        }
+                      >
+                        {({ selected }) => (
+                          <div
+                            className={
+                              selected
+                                ? "text-black-500 flex flex-row"
+                                : "flex flex-row"
+                            }
+                          >
+                            <UserAddIcon className="h-6 w-6 mr-2" />
+                            <span
+                              className="mt-0.5"
+                              data-testid="grant-applications"
+                            >
+                              Manage Team
+                            </span>
+                          </div>
+                        )}
+                      </Tab>
                       {!isDirectRound(round) && (
                         <Tab
                           className={({ selected }) =>
@@ -340,6 +365,9 @@ export default function ViewRoundPage() {
                     <Tab.Panel>
                       <ViewRoundSettings id={round?.id} />
                     </Tab.Panel>
+                    <Tab.Panel>
+                      <ViewManageTeam round={round} />
+                    </Tab.Panel>
                     {!isDirectRound(round) && (
                       <>
                         <Tab.Panel>

packages/round-manager/src/features/round/__tests__/ViewRoundPage.test.tsx

@@ -30,7 +30,7 @@ jest.mock("@rainbow-me/rainbowkit", () => ({
 jest.mock("data-layer", () => ({
   ...jest.requireActual("data-layer"),
   useDataLayer: () => ({
-   getRoundById: jest.fn(),
+    getRoundById: jest.fn(),
   }),
 }));
 
@@ -173,6 +173,7 @@ describe("View Round", () => {
     expect(screen.getByText("Fund Round")).toBeInTheDocument();
     expect(screen.getByText("Grant Applications")).toBeInTheDocument();
     expect(screen.getByText("Round Settings")).toBeInTheDocument();
+    expect(screen.getByText("Manage Team")).toBeInTheDocument();
     expect(screen.getByText("Round Stats")).toBeInTheDocument();
     expect(screen.getByText("Round Results")).toBeInTheDocument();
     expect(screen.getByText("Fund Grantees")).toBeInTheDocument();
@@ -200,6 +201,7 @@ describe("View Round", () => {
     expect(screen.getByTestId("side-nav-bar")).toBeInTheDocument();
     expect(screen.getByText("Grant Applications")).toBeInTheDocument();
     expect(screen.getByText("Round Settings")).toBeInTheDocument();
+    expect(screen.getByText("Manage Team")).toBeInTheDocument();
     expect(screen.queryAllByText("Fund Contract").length).toBe(0);
     expect(screen.queryAllByText("Round Stats").length).toBe(0);
     expect(screen.queryAllByText("Round Results").length).toBe(0);