added gov portal role list modal

src/components/Governance/AddressInfoCard.tsx

@@ -1,19 +1,21 @@
-import { Grid, Link, makeStyles, Typography } from '@material-ui/core';
+import { Box, Grid, Link, makeStyles, Typography } from '@material-ui/core';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 export interface AddressInfoCardProps {
   title: string;
   address?: string;
-  linkAddress: string;
+  linkAddress?: string;
+  onClick?: () => void;
 }
 
 const useStyles = makeStyles(() => ({
   linkIcon: {
     display: 'inline-block',
     transform: 'rotate(45deg)',
     color: 'white',
+    cursor: 'pointer',
   },
   address: {
     maxWidth: '100px',
@@ -23,7 +25,7 @@ const useStyles = makeStyles(() => ({
 
 const AddressInfoCard: React.FC<AddressInfoCardProps> = observer((props: AddressInfoCardProps) => {
   const classes = useStyles();
-  const { title, address, linkAddress } = props;
+  const { title, address, linkAddress, onClick } = props;
   return (
     <div>
       <Typography variant="subtitle2" color="textSecondary">
@@ -35,9 +37,16 @@ const AddressInfoCard: React.FC<AddressInfoCardProps> = observer((props: Address
           <Typography noWrap>{address}</Typography>
         </Grid>
         <Grid item>
-          <Link className={classes.linkIcon} href={linkAddress} target="_blank">
-            <ArrowUpward />
-          </Link>
+          {linkAddress && (
+            <Link className={classes.linkIcon} href={linkAddress} target="_blank">
+              <ArrowUpward />
+            </Link>
+          )}
+          {!linkAddress && onClick && (
+            <Box onClick={onClick} className={classes.linkIcon}>
+              <ArrowUpward />
+            </Box>
+          )}
         </Grid>
       </Grid>
     </div>

src/components/Governance/RoleListModal.tsx

@@ -0,0 +1,109 @@
+import {
+  Box,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Theme,
+  Typography,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import { StoreContext } from 'mobx/stores/store-context';
+import { useContext, useEffect } from 'react';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    color: 'rgba(255,255,255,0.6)',
+    paddingTop: 0,
+    paddingBottom: 30,
+  },
+  title: {
+    padding: 20,
+  },
+  titleText: {
+    display: 'flex',
+    alignItems: 'center',
+    '& img': {
+      marginRight: 10,
+    },
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
+}));
+
+const rows: { role: string; link: string }[] = [];
+
+interface RoleListTypes {
+  open: boolean;
+  onModalClose: () => void;
+}
+
+const GovernanceRoleList = ({ open, onModalClose }: RoleListTypes) => {
+  const classes = useStyles();
+
+  const { sdk } = useContext(StoreContext);
+
+  useEffect(() => {
+    async function lol() {
+      const res = await sdk.governance.timelockController;
+      console.log(res.callStatic);
+    }
+    lol();
+  }, []);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onModalClose}
+      fullWidth
+      maxWidth="xl"
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title" className={classes.title}>
+        <Box className={classes.titleText}>
+          <Typography variant="h6" color="primary">
+            Council Roles
+          </Typography>
+        </Box>
+        <IconButton aria-label="close" className={classes.closeButton} onClick={onModalClose}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent id="alert-dialog-description" className={classes.root}>
+        <TableContainer>
+          <Table aria-label="Governance Portal - Council Roles">
+            <TableHead>
+              <TableRow>
+                <TableCell>Role</TableCell>
+                <TableCell align="right">Etherscan Link</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow key={row.role}>
+                  <TableCell component="th" scope="row">
+                    {row.role}
+                  </TableCell>
+                  <TableCell align="right">{row.link}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default GovernanceRoleList;

src/components/Governance/index.tsx

@@ -8,11 +8,13 @@ import PageHeader from '../../components-v2/common/PageHeader';
 import AddressInfoCard from './AddressInfoCard';
 import EventsTable from './EventsTable';
 import GovernanceFilterDialog from './GovernanceFilterDialog';
+import GovernanceRoleList from './RoleListModal';
 
 const GovernancePortal = observer(() => {
   const store = useContext(StoreContext);
   const { governancePortal } = store;
   const [showGovernanceFilters, setShowGovernanceFilters] = useState(false);
+  const [showGovernanceRoleList, setShowGovernanceRoleList] = useState(false);
   const [filters, setFilters] = useState<string[]>([]);
   useEffect(() => {
     governancePortal.loadData();
@@ -26,28 +28,37 @@ const GovernancePortal = observer(() => {
   const toggleShowDialog = () => {
     setShowGovernanceFilters(!showGovernanceFilters);
   };
+
+  const clickHandler = () => {
+    setShowGovernanceRoleList(true);
+  };
+
   return (
     <LayoutContainer style={{ width: '100vw' }}>
       <Grid container item xs={12} spacing={1}>
-        <PageHeaderContainer item xs={12} sm={8}>
+        <PageHeaderContainer item xs={12} sm={6}>
           <PageHeader title="Governance Portal" subtitle="Review recent activity from the DAO." />
         </PageHeaderContainer>
 
-        <PageHeaderContainer item xs={6} sm={2}>
+        <PageHeaderContainer item xs={4} sm={2}>
           <AddressInfoCard
             title="Timelock Contract"
             address={governancePortal.contractAddress}
             linkAddress={'https://etherscan.io/address/' + governancePortal.contractAddress}
           />
         </PageHeaderContainer>
 
-        <PageHeaderContainer item xs={6} sm={2}>
+        <PageHeaderContainer item xs={4} sm={2}>
           <AddressInfoCard
             title="Proposals"
             address={'Snapshot'}
             linkAddress={'https://snapshot.org/#/badgerdao.eth'}
           />
         </PageHeaderContainer>
+
+        <PageHeaderContainer item xs={4} sm={2}>
+          <AddressInfoCard title="Council Roles" address={'Contract Information'} onClick={clickHandler} />
+        </PageHeaderContainer>
       </Grid>
 
       <Grid container justifyContent="flex-end" alignItems="center">
@@ -57,6 +68,10 @@ const GovernancePortal = observer(() => {
       </Grid>
 
       <GovernanceFilterDialog open={showGovernanceFilters} onClose={toggleShowDialog} applyFilter={applyFilter} />
+      <GovernanceRoleList
+        open={showGovernanceRoleList}
+        onModalClose={() => setShowGovernanceRoleList(!showGovernanceRoleList)}
+      />
 
       <EventsTable events={governancePortal.timelockEvents} filters={filters} />
     </LayoutContainer>