Roles

package.json

@@ -6,6 +6,7 @@
     "@craco/craco": "^6.2.0",
     "@web3-react/core": "^6.1.9",
     "@web3-react/network-connector": "^6.1.9",
+    "axios": "^0.21.4",
     "date-fns": "^2.18.0",
     "decimal.js": "^10.2.1",
     "ethers": "^5.0.32",

src/components/ContractItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const ContractItem = ({ item, children }: any) => (
-  <Link to={`/contracts/${item.contract.address}`}>
+const ContractItem = ({ item, children, roles }: any) => (
+  <Link to={`/${roles ? 'roles' : 'contracts'}/${item.contract.address}`}>
     <div className="rounded-md p-5 align-middle justify-items-start hover:bg-green-300 shadow-sm bg-green-100 hover:opacity-70">
       <div className="rounded-md p-.5 align-middle justify-items-center text-center">{item.name}</div>
     </div>

src/components/EventTable.tsx

@@ -1,6 +1,20 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
+const EventTableCell = ({ value, idx }: any) => {
+  if (idx !== 3) return <>{value}</>;
+  // use <code> block style for args column (3)
+  return (
+    <>
+      {value.split(',').map((x: string) => (
+        <p key={uuid()}>
+          <code>{`${x}`}</code>
+        </p>
+      ))}
+    </>
+  );
+};
+
 const EventTable = ({ events }: any) =>
   events ? (
     <div>
@@ -21,10 +35,12 @@ const EventTable = ({ events }: any) =>
         <tbody className="bg-green divide-y divide-gray-200">
           {[...events.slice(0, 50)].map((e: any) => (
             <tr key={e.id}>
-              {[...Object.values(e)].map((x: any) => (
+              {[...Object.values(e)].map((x: any, idx: number) => (
                 <td className="px-6 py-4" key={uuid()}>
                   <div className="justify-items-start">
-                    <div className="text-sm font-medium text-gray-900 justify-items-start">{x}</div>
+                    <div className="text-sm font-medium text-gray-900 justify-items-start">
+                      <EventTableCell value={x} idx={idx} />
+                    </div>
                   </div>
                 </td>
               ))}

src/components/Navigation.tsx

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 import YieldMark from './logos/YieldMark';
 
 const Navigation = () => {
-  const views = ['contracts', 'series', 'strategies', 'assets', 'vaults', 'governance'];
+  const views = ['contracts', 'series', 'strategies', 'assets', 'vaults', 'governance', 'roles'];
   return (
     <div className="sticky top-0 z-10 flex-none">
       <nav className="dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 bg-white">

src/components/RoleItem.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const RoleItem = ({ item, children, roles }: any) => (
+  <Link to={`/${roles ? 'roles' : 'contracts'}/${item.contract.address}`}>
+    <div className="rounded-md p-5 align-middle justify-items-start hover:bg-green-300 shadow-sm bg-green-100 hover:opacity-70">
+      <div className="rounded-md p-.5 align-middle justify-items-center text-center">{item.name}</div>
+    </div>
+  </Link>
+);
+
+export default RoleItem;

src/components/RolesTable.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+const RolesTable = ({ roles, roleNames }: any) => {
+  if (!roles) return null;
+  const displayName = (bytes: string) => roleNames[bytes] || `unknown role (${bytes}) `;
+  const displayGuys = (key: string) => Array.from(roles[key]).map((x) => <p key={key+x}><code>{`${x}`}</code></p>)
+  return (
+    <div>
+      <table className="table min-w-full divide-y divide-gray-200">
+        <thead className="">
+          <tr>
+            <th
+              key="role"
+              scope="col"
+              className="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider justify-items-start text-left"
+            >
+              Role
+            </th>
+            <th
+              key="users"
+              scope="col"
+              className="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider justify-items-start text-left"
+            >
+              Users
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-green divide-y divide-gray-200">
+          {[
+            ...Object.keys(roles).map((key) => (
+              <tr key={key}>
+                <td className="px-6 py-4" key={`${key}-role`}>
+                  <div className="justify-items-start">
+                    <div className="text-sm font-medium text-gray-900 justify-items-start">{displayName(key)}</div>
+                  </div>
+                </td>
+                <td className="px-6 py-4" key={`${key}-guys`}>
+                  <div className="justify-items-start">
+                    <div className="text-sm font-medium text-gray-900 justify-items-start">{displayGuys(key)}</div>
+                  </div>
+                </td>
+              </tr>
+            )),
+          ]}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+export default RolesTable;

src/components/Routes.tsx

@@ -8,6 +8,8 @@ import Strategy from './views/Strategy';
 import Assets from './views/Assets';
 import Asset from './views/Asset';
 import Governance from './views/Governance';
+import Roles from './views/Roles'
+import Role from './views/Role';
 import Contracts from './views/Contracts';
 import Contract from './views/Contract';
 import Vaults from './views/Vaults';
@@ -48,7 +50,10 @@ const Routes = () => (
       <Route exact path="/governance">
         <Governance />
       </Route>
-
+      <Route exact path="/roles">
+        <Roles />
+      </Route>
+      <Route path="/roles/:addr" component={Role} />
       <Redirect to="/" />
     </Switch>
   </>

src/components/views/Role.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import ClipLoader from 'react-spinners/ClipLoader';
+import { useParams } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../state/hooks/general';
+import { getRoles } from '../../state/actions/roles';
+import RolesTable from '../RolesTable';
+
+const chainNames: any = {
+  1: 'Mainnet',
+  3: 'Ropsten',
+  4: 'Rinkeby',
+  5: 'Goerli',
+  10: 'Optimism',
+  42: 'Kovan',
+};
+
+const Role = () => {
+  const { addr } = useParams<{ addr: string }>();
+  const dispatch = useAppDispatch();
+  const contractMap = useAppSelector((st) => st.contracts.contractMap);
+  const chainId = useAppSelector((st) => st.chain?.chainId);
+  const chainName = chainNames[chainId];
+
+  const roles = useAppSelector((st) => st.contracts.roles);
+  const roleNames = useAppSelector((st) => st.contracts.roleNames);
+  const rolesLoading = useAppSelector((st) => st.contracts.rolesLoading);
+  const contractRoles = roles[addr];
+
+  useEffect(() => {
+    if (Object.keys(contractMap).length && addr) dispatch(getRoles(contractMap, addr));
+  }, [contractMap, dispatch, addr]);
+
+  return rolesLoading ? (
+    <ClipLoader />
+  ) : (
+    <div className="rounded-md p-8 align-middle justify-items-start shadow-sm bg-green-50">
+      <h1 className="">{contractMap[addr]?.name} - {chainName}</h1>
+      <code className="text-sm">{addr}</code>
+      <div className="text-lg pb-4 flex gap-x-2">
+        <RolesTable roles={contractRoles} roleNames={roleNames} />
+      </div>
+    </div>
+  );
+};
+
+export default Role;

src/components/views/Roles.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useAppSelector } from '../../state/hooks/general';
+import ContractItem from '../ContractItem';
+
+const Roles = () => {
+  const contractMap = useAppSelector((st) => st.contracts.contractMap);
+  return (
+    <div>
+      <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
+        {[...Object.values(contractMap)].map((item: any) => (
+          <ContractItem item={item} key={item.contract.address} roles={true} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Roles;

src/state/actionTypes/contracts.ts

@@ -2,5 +2,7 @@ export enum ActionType {
   UPDATE_CONTRACT_MAP = 'contracts/UPDATE_CONTRACT_MAP',
   UPDATE_EVENTS = 'contracts/UPDATE_EVENTS',
   EVENTS_LOADING = 'contracts/EVENTS_LOADING',
+  UPDATE_ROLES = 'contracts/UPDATE_ROLES',
+  ROLES_LOADING = 'contracts/ROLES_LOADING',
   RESET = 'contracts/RESET',
 }

src/state/actions/contracts.ts

@@ -8,7 +8,6 @@ export function getEvents(contractMap: any, contractAddr: any, filter = '*') {
       try {
         dispatch(setEventsLoading(true));
         const events = await contract.queryFilter(filter, null, null);
-        console.log(events);
 
         const updatedEvents = events.map((e: any, i: number) => ({
           id: i,

src/state/actions/roles.test.ts

@@ -0,0 +1,63 @@
+import { eventSort } from './roles'
+
+
+const eventMocksSorted = [
+  {
+    blockNumber: 0,
+    transactionIndex: 0,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 0,
+    transactionIndex: 1,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 0,
+    transactionIndex: 1,
+    logIndex: 1,
+  },
+  {
+    blockNumber: 0,
+    transactionIndex: 1,
+    logIndex: 2,
+  },
+  {
+    blockNumber: 1,
+    transactionIndex: 1,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 1,
+    transactionIndex: 2,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 2,
+    transactionIndex: 0,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 3,
+    transactionIndex: 0,
+    logIndex: 0,
+  },
+  {
+    blockNumber: 3,
+    transactionIndex: 0,
+    logIndex: 1,
+  },
+  {
+    blockNumber: 3,
+    transactionIndex: 0,
+    logIndex: 2,
+  },
+]
+
+const eventMocksUnsorted = [9, 2, 3, 7, 1, 4, 0, 8, 5, 6].map(idx => eventMocksSorted[idx])
+
+test('eventSort sorts by block => transactionIndex => logIndex', () => {
+  console.log(eventMocksUnsorted.sort(eventSort))
+  console.log('ssssssssssssssssssssssssssssss')
+  expect(eventMocksUnsorted.sort(eventSort)).toEqual(eventMocksSorted);
+});