Explorer tabs upgrade

package.json

@@ -85,6 +85,9 @@
     "source-map-explorer": "2.5.2",
     "typescript": "^4.2.3"
   },
+  "resolutions": {
+    "@types/react": "~17.0.3"
+  },
   "eslintConfig": {
     "extends": [
       "react-app"

src/models/Token.ts

@@ -24,8 +24,8 @@ export const SUPPORTED_MIME_TYPES = [
 ] as const
 export const SUPPORTED_MEDIA_TYPES = ["image", "audio", "video"] as const
 
-export type NFTMimeType = typeof SUPPORTED_MIME_TYPES[number] | "unknown"
-export type NFTMediaType = typeof SUPPORTED_MEDIA_TYPES[number] | "unknown"
+export type NFTMimeType = (typeof SUPPORTED_MIME_TYPES)[number] | "unknown"
+export type NFTMediaType = (typeof SUPPORTED_MEDIA_TYPES)[number] | "unknown"
 
 interface NFTParams extends TokenParams {
   description: string

src/modules/common/WarningFooter.tsx

@@ -1,5 +1,4 @@
-import { Box, Grid, IconButton, Typography } from "@material-ui/core"
-import { styled } from "@material-ui/styles"
+import { Box, Grid, IconButton, Typography, styled } from "@material-ui/core"
 import React, { useEffect, useState } from "react"
 import { ReactComponent as WarningIcon } from "assets/logos/warning.svg"
 import CloseIcon from "@material-ui/icons/Close"

src/modules/explorer/components/AllProposalsList.tsx

@@ -0,0 +1,140 @@
+import { Collapse, Grid, IconButton, Typography } from "@material-ui/core"
+import { styled } from "@material-ui/styles"
+import { ProposalItem } from "modules/explorer/pages/User"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { Link } from "react-router-dom"
+import { Proposal, ProposalStatus } from "services/indexer/dao/mappers/proposal/types"
+import { ContentContainer } from "./ContentContainer"
+import { Dropdown } from "./Dropdown"
+
+const TableContainer = styled(ContentContainer)({
+  width: "100%"
+})
+
+const TableHeader = styled(Grid)({
+  padding: "16px 46px",
+  minHeight: 34
+})
+
+const ProposalsFooter = styled(Grid)({
+  padding: "16px 46px",
+  borderTop: ".6px solid rgba(125,140,139, 0.2)",
+  minHeight: 34
+})
+
+interface Props {
+  currentLevel: number
+  proposals: Proposal[]
+  title: string
+  showFooter?: boolean
+  rightItem?: (proposal: Proposal) => React.ReactElement
+}
+
+export const AllProposalsList: React.FC<Props> = ({ currentLevel, proposals, title, showFooter, rightItem }) => {
+  const [filteredProposal, setFilteredProposals] = useState(proposals)
+  const [filter, setFilter] = useState("All")
+
+  const filterProposals = useCallback(
+    (status?: any) => {
+      if (status === "All") {
+        return setFilteredProposals(proposals)
+      } else if (status !== "All" && status !== undefined) {
+        const filtered = proposals.filter(proposal => proposal["cachedStatus"]?.status === status)
+        setFilteredProposals(filtered)
+      } else {
+        return setFilteredProposals(proposals)
+      }
+    },
+    [proposals]
+  )
+
+  useEffect(() => {
+    filterProposals(filter)
+  }, [filter, filterProposals])
+
+  useEffect(() => {
+    setFilteredProposals(proposals)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const filterProposalByStatus = (status: any) => {
+    setFilter(status)
+  }
+
+  return (
+    <TableContainer item>
+      <Grid container direction="column" wrap={"nowrap"}>
+        <TableHeader item container justifyContent="space-between" alignItems="center">
+          <Grid item>
+            <Typography variant="body1" style={{ fontWeight: "500" }} color="textPrimary">
+              {title}
+            </Typography>
+          </Grid>
+          {proposals.length ? (
+            <Grid item>
+              <IconButton aria-label="expand row" size="small">
+                <Dropdown
+                  options={[
+                    { name: "All", value: "All" },
+                    { name: ProposalStatus.ACTIVE, value: ProposalStatus.ACTIVE },
+                    { name: ProposalStatus.DROPPED, value: ProposalStatus.DROPPED },
+                    { name: ProposalStatus.EXECUTABLE, value: ProposalStatus.EXECUTABLE },
+                    { name: ProposalStatus.EXECUTED, value: ProposalStatus.EXECUTED },
+                    { name: ProposalStatus.EXPIRED, value: ProposalStatus.EXPIRED },
+                    { name: ProposalStatus.NO_QUORUM, value: ProposalStatus.NO_QUORUM },
+                    { name: ProposalStatus.PASSED, value: ProposalStatus.PASSED },
+                    { name: ProposalStatus.PENDING, value: ProposalStatus.PENDING },
+                    { name: ProposalStatus.REJECTED, value: ProposalStatus.REJECTED }
+                  ]}
+                  value={"All"}
+                  onSelected={filterProposalByStatus}
+                />{" "}
+              </IconButton>
+            </Grid>
+          ) : null}
+        </TableHeader>
+        {filteredProposal.length ? (
+          <Grid
+            item
+            container
+            wrap={"nowrap"}
+            component={Collapse}
+            in={true}
+            timeout="auto"
+            unmountOnExit
+            direction="column"
+          >
+            {filteredProposal.map((p, i) => (
+              <Grid item key={`proposal-${i}`}>
+                <Link to={`proposal/${p.id}`}>
+                  <ProposalItem proposal={p} status={p.getStatus(currentLevel).status}>
+                    {rightItem ? rightItem(p) : null}
+                  </ProposalItem>
+                </Link>
+              </Grid>
+            ))}
+          </Grid>
+        ) : (
+          <ProposalsFooter item container direction="column" justifyContent="center">
+            <Grid item>
+              <Typography color="textPrimary" align="center">
+                No items
+              </Typography>
+            </Grid>
+          </ProposalsFooter>
+        )}
+        {showFooter && (
+          <ProposalsFooter item container direction="column" justifyContent="center">
+            <Grid item>
+              <Link to="proposals">
+                <Typography color="secondary" variant="body2" align="center">
+                  View All Proposals
+                </Typography>
+              </Link>
+            </Grid>
+          </ProposalsFooter>
+        )}
+      </Grid>
+    </TableContainer>
+  )
+}

src/modules/explorer/components/Dropdown.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react"
+import { Select, SelectProps, MenuItem, makeStyles, Theme } from "@material-ui/core"
+interface DropdownProps extends SelectProps {
+  options: { name: string; value: string | undefined }[]
+  value?: string | undefined
+  onSelected?: (item: string | undefined) => void
+  isFirst?: boolean
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  icon: {
+    left: 0
+  },
+  iconOpen: {
+    transform: "none"
+  },
+  selectSelect: {
+    [theme.breakpoints.down("sm")]: {
+      fontSize: 16
+    },
+    paddingLeft: 10,
+    paddingTop: 0,
+    paddingBottom: 0,
+    minHeight: 24
+  },
+  option: {
+    "padding": 8,
+    "fontFamily": "Roboto Mono",
+    "cursor": "pointer",
+    "text-transform": "capitalize",
+    "&:hover": {
+      background: "rgba(129, 254, 183, .4)"
+    }
+  }
+}))
+
+export const Dropdown: React.FC<DropdownProps> = ({ options, value, onSelected }) => {
+  const classes = useStyles()
+  const [selected, setSelected] = useState<string | undefined>(value)
+
+  useEffect(() => {
+    setSelected(value)
+  }, [value])
+
+  const handleSelected = (event: any) => {
+    setSelected(event.target.value)
+    if (onSelected) onSelected(event.target.value)
+  }
+
+  return (
+    <Select
+      // native
+      value={selected}
+      onChange={handleSelected}
+      classes={{
+        select: classes.selectSelect
+      }}
+    >
+      {options.map(({ name, value }, index) => (
+        <option value={value} key={`${name}-${index}`} className={classes.option}>
+          {name}
+        </option>
+      ))}
+    </Select>
+  )
+}

src/modules/explorer/components/NavigationMenu.tsx

@@ -5,6 +5,7 @@ import { ReactComponent as TreasuryIcon } from "assets/logos/treasury.svg"
 import { ReactComponent as RegistryIcon } from "assets/logos/list.svg"
 import { ReactComponent as UserIcon } from "assets/logos/user.svg"
 import { ReactComponent as NFTIcon } from "assets/logos/nft.svg"
+import { ReactComponent as ConfigIcon } from "assets/logos/config.svg"
 import React, { useEffect, useState } from "react"
 import { useDAOID } from "../pages/DAO/router"
 import { useDAO } from "services/indexer/dao/hooks/useDAO"
@@ -81,7 +82,8 @@ const IconContainer = styled("span")(({ theme, isSelected }: { theme: Theme; isS
   "justifyContent": "center",
 
   "& > svg > *": {
-    fill: isSelected ? theme.palette.secondary.main : theme.palette.text.primary
+    fill: isSelected ? theme.palette.secondary.main : theme.palette.text.primary,
+    stroke: isSelected ? theme.palette.secondary.main : theme.palette.text.primary
   }
 }))
 
@@ -134,10 +136,16 @@ const getPages = (daoId: string): Page[] => [
     name: "User",
     icon: UserIcon,
     href: `/explorer/dao/${daoId}/user`
+  },
+  {
+    pathId: "config",
+    name: "Config",
+    icon: ConfigIcon,
+    href: `/explorer/dao/${daoId}/config`
   }
 ]
 
-const StyledBottomBar = styled(Grid)(({ theme, visible }: { theme: Theme; visible: boolean }) => ({
+const StyledBottomBar = styled(Grid)(({ theme }: { theme: Theme }) => ({
   position: "fixed",
   height: 55,
   width: "100%",
@@ -173,7 +181,7 @@ const BottomNavBar: React.FC = ({ children }) => {
   }, [prevScrollPos, visible])
 
   return (
-    <StyledBottomBar container direction={"row"} visible={visible}>
+    <StyledBottomBar container direction={"row"}>
       <BottomBarItems container>{children}</BottomBarItems>
     </StyledBottomBar>
   )
@@ -225,7 +233,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa
   ) : (
     <BottomNavBar>
       {pages.map((page, i) => (
-        <PageItem key={`page-${i}`} isSelected={pathId === page.pathId} item alignItems="center">
+        <PageItem key={`page-${i}`} isSelected={pathId === page.pathId} container item alignItems="center">
           <Link to={page.href}>
             <Grid container alignItems="center" justifyContent="center">
               <Grid item>

src/modules/explorer/components/ResponsiveDialog.tsx

@@ -39,7 +39,7 @@ export const ResponsiveDialog: React.FC<{
     <BottomSheet open={open} onDismiss={onClose}>
       <Content container direction="column" style={{ gap: 46 }}>
         <Grid item container direction="row" wrap="nowrap" justifyContent="space-between">
-          <Grid item>{Boolean(onGoBack) ? <BackButton onGoBack={onGoBack} /> : null}</Grid>
+          <Grid item>{onGoBack ? <BackButton onGoBack={onGoBack} /> : null}</Grid>
           <Grid item>
             <TitleText>{title}</TitleText>
           </Grid>
@@ -54,7 +54,7 @@ export const ResponsiveDialog: React.FC<{
     <CustomDialog open={open} onClose={onClose} maxWidth={template ? "md" : "sm"}>
       <Content container direction="column" style={{ gap: 30 }}>
         <Grid item container direction="row" wrap="nowrap" justifyContent="space-between">
-          <Grid item>{Boolean(onGoBack) ? <BackButton onGoBack={onGoBack} /> : null}</Grid>
+          <Grid item>{onGoBack ? <BackButton onGoBack={onGoBack} /> : null}</Grid>
           <Grid item>
             <TitleText color="textPrimary">{title}</TitleText>
           </Grid>

src/modules/explorer/components/StatusBadge.tsx

@@ -62,11 +62,11 @@ const statusColors = (status: ProposalStatus) => {
 }
 
 const Badge = styled(Grid)(({ status }: { status: ProposalStatus; theme: Theme }) => ({
-  borderRadius: 4,
+  borderRadius: 50,
   textAlign: "center",
   minHeight: 24,
   minWidth: 105,
-  padding: "2px 5px",
+  padding: "2px 8px",
   background: statusColors(status).background,
   color: statusColors(status).color,
   whiteSpace: "nowrap"

src/modules/explorer/components/UsersTable.tsx

@@ -57,7 +57,7 @@ const TableText = styled(Typography)({
   }
 })
 
-const titleDataMatcher = (title: typeof titles[number], rowData: RowData) => {
+const titleDataMatcher = (title: (typeof titles)[number], rowData: RowData) => {
   switch (title) {
     case "Rank":
       return rowData.address