User search bars

.vscode/settings.json

@@ -3,5 +3,6 @@
   "svg.preview.background": "black",
   "cSpell.words": [
     "offchain"
-  ]
+  ],
+  "editor.autoClosingBrackets": "always"
 }

src/modules/explorer/components/FiltersDialog.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"
 import { ResponsiveDialog } from "./ResponsiveDialog"
 import { Grid, styled } from "@material-ui/core"
 import { Typography } from "@mui/material"
-import { Dropdown } from "./Dropdown"
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import { SmallButton } from "modules/common/SmallButton"
 import { Order, ProposalType } from "./FiltersUserDialog"

src/modules/explorer/components/FiltersTokensDialog.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from "react"
+import { Grid, TextField, Typography, styled, withStyles } from "@material-ui/core"
+import { ResponsiveDialog } from "./ResponsiveDialog"
+import { SmallButton } from "modules/common/SmallButton"
+import { TokensFilters } from "../pages/Treasury"
+
+interface Props {
+  currentFilters: TokensFilters | undefined
+  open: boolean
+  handleClose: () => void
+  saveFilters: (options: TokensFilters) => void
+}
+
+const SectionTitle = styled(Typography)({
+  fontSize: "18px !important",
+  fontWeight: 600
+})
+
+const Container = styled(Grid)({
+  marginTop: 6,
+  gap: 24
+})
+
+const CustomTextField = withStyles({
+  root: {
+    "& .MuiInput-root": {
+      fontWeight: 300,
+      textAlign: "initial"
+    },
+    "& .MuiInputBase-input": {
+      textAlign: "initial",
+      background: "#2F3438",
+      borderRadius: 8,
+      padding: 16
+    },
+    "& .MuiInputBase-root": {
+      textWeight: 300
+    },
+    "& .MuiInput-underline": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:before": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:hover:before": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:after": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
+      borderBottom: "none !important"
+    }
+  }
+})(TextField)
+
+export const FilterTokenDialog: React.FC<Props> = ({ open, handleClose, saveFilters, currentFilters }) => {
+  const [token, setToken] = useState<string | null>("")
+  const [balanceMin, setBalanceMin] = useState<string | undefined>()
+  const [balanceMax, setBalanceMax] = useState<string | undefined>()
+
+  const ariaLabel = { "aria-label": "description" }
+
+  useEffect(() => {
+    if (currentFilters) {
+      setToken(currentFilters?.token)
+      setBalanceMin(currentFilters.balanceMin)
+      setBalanceMax(currentFilters.balanceMax)
+    }
+  }, [currentFilters])
+
+  const showFilters = () => {
+    const filterObject: TokensFilters = {
+      token: token,
+      balanceMin: balanceMin,
+      balanceMax: balanceMax
+    }
+    saveFilters(filterObject)
+    handleClose()
+  }
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Token</SectionTitle>
+          </Grid>
+          <Grid item>
+            <CustomTextField
+              onChange={event => setToken(event.target.value)}
+              style={{ width: "40%" }}
+              name="test"
+              value={token}
+              placeholder="Token"
+              inputProps={ariaLabel}
+            />
+          </Grid>
+
+          <Grid item>
+            <SectionTitle>Balance</SectionTitle>
+          </Grid>
+          <Grid item container direction="row" justifyContent="space-between" spacing={2}>
+            <Grid item xs={6}>
+              <CustomTextField
+                onChange={event => setBalanceMin(event.target.value)}
+                name="test"
+                value={balanceMin}
+                placeholder="Min"
+                inputProps={ariaLabel}
+                type="number"
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <CustomTextField
+                onChange={event => setBalanceMax(event.target.value)}
+                name="test"
+                value={balanceMax}
+                placeholder="Min"
+                type="number"
+                inputProps={ariaLabel}
+              />
+            </Grid>
+          </Grid>
+        </Container>
+
+        <Container container direction="row" justifyContent="flex-end">
+          <SmallButton color="secondary" variant="contained" onClick={showFilters}>
+            Apply
+          </SmallButton>
+        </Container>
+      </ResponsiveDialog>
+    </>
+  )
+}

src/modules/explorer/components/FiltersTransactionsDialog.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react"
+import { Grid, TextField, Typography, styled, withStyles } from "@material-ui/core"
+import { ResponsiveDialog } from "./ResponsiveDialog"
+import { SmallButton } from "modules/common/SmallButton"
+import { TransactionsFilters } from "../pages/Treasury"
+
+export enum TransactionStatus {
+  COMPLETED = "applied",
+  PENDING = "pending",
+  FAILED = "failed"
+}
+
+interface Props {
+  currentFilters: TransactionsFilters | undefined
+  open: boolean
+  handleClose: () => void
+  saveFilters: (options: TransactionsFilters) => void
+}
+
+const SectionTitle = styled(Typography)({
+  fontSize: "18px !important",
+  fontWeight: 600
+})
+
+const Container = styled(Grid)({
+  marginTop: 6,
+  gap: 24
+})
+
+const CustomTextField = withStyles({
+  root: {
+    "& .MuiInput-root": {
+      fontWeight: 300,
+      textAlign: "initial"
+    },
+    "& .MuiInputBase-input": {
+      textAlign: "initial",
+      background: "#2F3438",
+      borderRadius: 8,
+      padding: 16
+    },
+    "& .MuiInputBase-root": {
+      textWeight: 300
+    },
+    "& .MuiInput-underline": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:before": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:hover:before": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:after": {
+      borderBottom: "none !important"
+    },
+    "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
+      borderBottom: "none !important"
+    }
+  }
+})(TextField)
+
+const StatusButton = styled(Grid)(({ theme }) => ({
+  "background": theme.palette.primary.main,
+  "padding": "8px 16px",
+  "borderRadius": 50,
+  "marginRight": 16,
+  "marginBottom": 16,
+  "cursor": "pointer",
+  "textTransform": "capitalize",
+  "&:hover": {
+    background: "rgba(129, 254, 183, .4)"
+  }
+}))
+
+interface StatusOption {
+  label: string
+}
+
+export const FilterTransactionsDialog: React.FC<Props> = ({ open, handleClose, saveFilters, currentFilters }) => {
+  const [status, setStatus] = useState<StatusOption[]>([])
+  const [token, setToken] = useState<string | null>("")
+  const [sender, setSender] = useState<string | null>("")
+  const [receiver, setReceiver] = useState<string | null>("")
+
+  const [filters, setFilters] = useState<StatusOption>()
+  const ariaLabel = { "aria-label": "description" }
+
+  useEffect(() => {
+    setStatus([])
+    setStatusOptions()
+    if (currentFilters) {
+      setToken(currentFilters?.token)
+      setSender(currentFilters.sender)
+      setReceiver(currentFilters.receiver)
+      setFilters(currentFilters.status)
+    }
+  }, [currentFilters])
+
+  const setStatusOptions = () => {
+    const values = Object.values(TransactionStatus)
+    for (const item in values) {
+      const obj = {
+        label: values[item]
+      }
+      setStatus(oldArray => [...oldArray, obj])
+    }
+  }
+
+  const isSelected = (item: StatusOption) => {
+    return filters && filters.label === item.label ? true : false
+  }
+
+  const saveStatus = (status: StatusOption) => {
+    if (status.label === filters?.label) {
+      setFilters(undefined)
+    } else {
+      setFilters(status)
+    }
+  }
+
+  const showFilters = () => {
+    const filterObject: TransactionsFilters = {
+      token: token,
+      receiver: receiver,
+      sender: sender,
+      status: filters
+    }
+    saveFilters(filterObject)
+    handleClose()
+  }
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Sort by</SectionTitle>
+          </Grid>
+          <Grid item>
+            <Grid item container direction="row">
+              {status.length > 0 &&
+                status.map((item, index) => {
+                  return (
+                    <StatusButton
+                      item
+                      key={`status-${index}`}
+                      style={isSelected(item) ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+                    >
+                      <Typography onClick={() => saveStatus(item)}>{item.label}</Typography>
+                    </StatusButton>
+                  )
+                })}
+            </Grid>
+          </Grid>
+          <Grid item>
+            <SectionTitle>Token</SectionTitle>
+          </Grid>
+          <Grid item>
+            <CustomTextField
+              onChange={event => setToken(event.target.value)}
+              style={{ width: "40%" }}
+              name="test"
+              value={token}
+              placeholder="Token"
+              inputProps={ariaLabel}
+            />
+          </Grid>
+
+          <Grid item>
+            <SectionTitle>Receiving Address</SectionTitle>
+          </Grid>
+          <Grid item>
+            <CustomTextField
+              onChange={event => setReceiver(event.target.value)}
+              name="test"
+              value={receiver}
+              placeholder="Address"
+              inputProps={ariaLabel}
+            />
+          </Grid>
+
+          <Grid item>
+            <SectionTitle>Sending Address</SectionTitle>
+          </Grid>
+          <Grid item>
+            <CustomTextField
+              onChange={event => setSender(event.target.value)}
+              name="test"
+              value={sender}
+              placeholder="Address"
+              inputProps={ariaLabel}
+            />
+          </Grid>
+        </Container>
+
+        <Container container direction="row" justifyContent="flex-end">
+          <SmallButton color="secondary" variant="contained" onClick={showFilters}>
+            Apply
+          </SmallButton>
+        </Container>
+      </ResponsiveDialog>
+    </>
+  )
+}

src/modules/explorer/components/ProposalsList.tsx

@@ -88,6 +88,10 @@ export const ProposalsList: React.FC<Props> = ({
     setFilteredProposals(listOfProposals)
   }, [])
 
+  useEffect(() => {
+    setFilteredProposals(listOfProposals)
+  }, [liteProposals, proposals])
+
   useEffect(() => {
     setFilteredProposals(listOfProposals)
   }, [showFullList])

src/modules/explorer/pages/NFTs/index.tsx

@@ -94,7 +94,7 @@ export const NFTs: React.FC = () => {
   const onCloseTransfer = () => {
     setOpenTransfer(false)
   }
-  const value = isMobileSmall ? 6 : 3
+  const value = isMobileSmall ? 6 : 4
   const shouldDisable = useIsProposalButtonDisabled(daoId)
 
   const [currentPage, setCurrentPage] = useState(0)
@@ -105,6 +105,7 @@ export const NFTs: React.FC = () => {
       const newOffset = (event.selected * value) % nftHoldings.length
       setOffset(newOffset)
       setCurrentPage(event.selected)
+      window.scrollTo({ top: 0, behavior: "smooth" })
     }
   }
 

src/modules/explorer/pages/Proposals/index.tsx

@@ -261,7 +261,7 @@ export const Proposals: React.FC = () => {
             direction="row"
             alignItems="center"
           >
-            <FilterAltIcon style={{ color: theme.palette.secondary.main }} fontSize="small" />
+            <FilterAltIcon style={{ color: theme.palette.secondary.main, marginRight: 6 }} fontSize="small" />
             <Typography color="secondary">Filter & Sort</Typography>
           </FiltersContainer>