Skip to content

Commit 2f5df38

Browse files
marcomariscalmarcomariscal
authored
Merge pull request #10 from yieldprotocol/roles
Roles
2 parents 283e2b3 + 702cb15 commit 2f5df38

File tree

14 files changed

+343
-7
lines changed

14 files changed

+343
-7
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@craco/craco": "^6.2.0",
77
"@web3-react/core": "^6.1.9",
88
"@web3-react/network-connector": "^6.1.9",
9+
"axios": "^0.21.4",
910
"date-fns": "^2.18.0",
1011
"decimal.js": "^10.2.1",
1112
"ethers": "^5.0.32",

‎src/components/ContractItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
33

4-
const ContractItem = ({ item, children }: any) => (
5-
<Link to={`/contracts/${item.contract.address}`}>
4+
const ContractItem = ({ item, children, roles }: any) => (
5+
<Link to={`/${roles ? 'roles' : 'contracts'}/${item.contract.address}`}>
66
<div className="rounded-md p-5 align-middle justify-items-start hover:bg-green-300 shadow-sm bg-green-100 hover:opacity-70">
77
<div className="rounded-md p-.5 align-middle justify-items-center text-center">{item.name}</div>
88
</div>

‎src/components/EventTable.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
import React from 'react';
22
import { v4 as uuid } from 'uuid';
33

4+
const EventTableCell = ({ value, idx }: any) => {
5+
if (idx !== 3) return <>{value}</>;
6+
// use <code> block style for args column (3)
7+
return (
8+
<>
9+
{value.split(',').map((x: string) => (
10+
<p key={uuid()}>
11+
<code>{`${x}`}</code>
12+
</p>
13+
))}
14+
</>
15+
);
16+
};
17+
418
const EventTable = ({ events }: any) =>
519
events ? (
620
<div>
@@ -21,10 +35,12 @@ const EventTable = ({ events }: any) =>
2135
<tbody className="bg-green divide-y divide-gray-200">
2236
{[...events.slice(0, 50)].map((e: any) => (
2337
<tr key={e.id}>
24-
{[...Object.values(e)].map((x: any) => (
38+
{[...Object.values(e)].map((x: any, idx: number) => (
2539
<td className="px-6 py-4" key={uuid()}>
2640
<div className="justify-items-start">
27-
<div className="text-sm font-medium text-gray-900 justify-items-start">{x}</div>
41+
<div className="text-sm font-medium text-gray-900 justify-items-start">
42+
<EventTableCell value={x} idx={idx} />
43+
</div>
2844
</div>
2945
</td>
3046
))}

‎src/components/Navigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
33
import YieldMark from './logos/YieldMark';
44

55
const Navigation = () => {
6-
const views = ['contracts', 'series', 'strategies', 'assets', 'vaults', 'governance'];
6+
const views = ['contracts', 'series', 'strategies', 'assets', 'vaults', 'governance', 'roles'];
77
return (
88
<div className="sticky top-0 z-10 flex-none">
99
<nav className="dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 bg-white">

‎src/components/RoleItem.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
const RoleItem = ({ item, children, roles }: any) => (
5+
<Link to={`/${roles ? 'roles' : 'contracts'}/${item.contract.address}`}>
6+
<div className="rounded-md p-5 align-middle justify-items-start hover:bg-green-300 shadow-sm bg-green-100 hover:opacity-70">
7+
<div className="rounded-md p-.5 align-middle justify-items-center text-center">{item.name}</div>
8+
</div>
9+
</Link>
10+
);
11+
12+
export default RoleItem;

‎src/components/RolesTable.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
3+
const RolesTable = ({ roles, roleNames }: any) => {
4+
if (!roles) return null;
5+
const displayName = (bytes: string) => roleNames[bytes] || `unknown role (${bytes}) `;
6+
const displayGuys = (key: string) => Array.from(roles[key]).map((x) => <p key={key+x}><code>{`${x}`}</code></p>)
7+
return (
8+
<div>
9+
<table className="table min-w-full divide-y divide-gray-200">
10+
<thead className="">
11+
<tr>
12+
<th
13+
key="role"
14+
scope="col"
15+
className="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider justify-items-start text-left"
16+
>
17+
Role
18+
</th>
19+
<th
20+
key="users"
21+
scope="col"
22+
className="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider justify-items-start text-left"
23+
>
24+
Users
25+
</th>
26+
</tr>
27+
</thead>
28+
<tbody className="bg-green divide-y divide-gray-200">
29+
{[
30+
...Object.keys(roles).map((key) => (
31+
<tr key={key}>
32+
<td className="px-6 py-4" key={`${key}-role`}>
33+
<div className="justify-items-start">
34+
<div className="text-sm font-medium text-gray-900 justify-items-start">{displayName(key)}</div>
35+
</div>
36+
</td>
37+
<td className="px-6 py-4" key={`${key}-guys`}>
38+
<div className="justify-items-start">
39+
<div className="text-sm font-medium text-gray-900 justify-items-start">{displayGuys(key)}</div>
40+
</div>
41+
</td>
42+
</tr>
43+
)),
44+
]}
45+
</tbody>
46+
</table>
47+
</div>
48+
);
49+
};
50+
export default RolesTable;

‎src/components/Routes.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import Strategy from './views/Strategy';
88
import Assets from './views/Assets';
99
import Asset from './views/Asset';
1010
import Governance from './views/Governance';
11+
import Roles from './views/Roles'
12+
import Role from './views/Role';
1113
import Contracts from './views/Contracts';
1214
import Contract from './views/Contract';
1315
import Vaults from './views/Vaults';
@@ -48,7 +50,10 @@ const Routes = () => (
4850
<Route exact path="/governance">
4951
<Governance />
5052
</Route>
51-
53+
<Route exact path="/roles">
54+
<Roles />
55+
</Route>
56+
<Route path="/roles/:addr" component={Role} />
5257
<Redirect to="/" />
5358
</Switch>
5459
</>

‎src/components/views/Role.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useEffect } from 'react';
2+
import ClipLoader from 'react-spinners/ClipLoader';
3+
import { useParams } from 'react-router-dom';
4+
import { useAppDispatch, useAppSelector } from '../../state/hooks/general';
5+
import { getRoles } from '../../state/actions/roles';
6+
import RolesTable from '../RolesTable';
7+
8+
const chainNames: any = {
9+
1: 'Mainnet',
10+
3: 'Ropsten',
11+
4: 'Rinkeby',
12+
5: 'Goerli',
13+
10: 'Optimism',
14+
42: 'Kovan',
15+
};
16+
17+
const Role = () => {
18+
const { addr } = useParams<{ addr: string }>();
19+
const dispatch = useAppDispatch();
20+
const contractMap = useAppSelector((st) => st.contracts.contractMap);
21+
const chainId = useAppSelector((st) => st.chain?.chainId);
22+
const chainName = chainNames[chainId];
23+
24+
const roles = useAppSelector((st) => st.contracts.roles);
25+
const roleNames = useAppSelector((st) => st.contracts.roleNames);
26+
const rolesLoading = useAppSelector((st) => st.contracts.rolesLoading);
27+
const contractRoles = roles[addr];
28+
29+
useEffect(() => {
30+
if (Object.keys(contractMap).length && addr) dispatch(getRoles(contractMap, addr));
31+
}, [contractMap, dispatch, addr]);
32+
33+
return rolesLoading ? (
34+
<ClipLoader />
35+
) : (
36+
<div className="rounded-md p-8 align-middle justify-items-start shadow-sm bg-green-50">
37+
<h1 className="">{contractMap[addr]?.name} - {chainName}</h1>
38+
<code className="text-sm">{addr}</code>
39+
<div className="text-lg pb-4 flex gap-x-2">
40+
<RolesTable roles={contractRoles} roleNames={roleNames} />
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default Role;

‎src/components/views/Roles.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { useAppSelector } from '../../state/hooks/general';
3+
import ContractItem from '../ContractItem';
4+
5+
const Roles = () => {
6+
const contractMap = useAppSelector((st) => st.contracts.contractMap);
7+
return (
8+
<div>
9+
<div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
10+
{[...Object.values(contractMap)].map((item: any) => (
11+
<ContractItem item={item} key={item.contract.address} roles={true} />
12+
))}
13+
</div>
14+
</div>
15+
);
16+
};
17+
18+
export default Roles;

‎src/state/actionTypes/contracts.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@ export enum ActionType {
22
UPDATE_CONTRACT_MAP = 'contracts/UPDATE_CONTRACT_MAP',
33
UPDATE_EVENTS = 'contracts/UPDATE_EVENTS',
44
EVENTS_LOADING = 'contracts/EVENTS_LOADING',
5+
UPDATE_ROLES = 'contracts/UPDATE_ROLES',
6+
ROLES_LOADING = 'contracts/ROLES_LOADING',
57
RESET = 'contracts/RESET',
68
}

0 commit comments

Comments
 (0)