Treasury filters (#845)

* desktop update

* responsive tables

* no items + scroll on other tabs

* searchbar

* transactions filters working

* search bar & filter dialog for token tab

* filters & xtz added to list of holdings

* nft filters & responsive dialogs

* Update FilterNFTDialog.tsx

---------

Co-authored-by: Manank Patni <[email protected]>

.vscode/settings.json

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

src/modules/explorer/components/FilterNFTDialog.tsx

@@ -0,0 +1,143 @@
+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/NFTs"
+
+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)(({ theme }) => ({
+  marginTop: 6,
+  gap: 24,
+  [theme.breakpoints.down("sm")]: {
+    marginTop: 30
+  }
+}))
+
+const CustomTextField = withStyles({
+  root: {
+    "& .MuiInput-root": {
+      fontWeight: 300,
+      textAlign: "initial"
+    },
+    "& .MuiInputBase-input": {
+      textAlign: "initial",
+      background: "#2F3438",
+      borderRadius: 8,
+      padding: 16
+    },
+    "& p": {
+      position: "absolute",
+      right: 16,
+      fontWeight: 300
+    },
+    "& .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 FilterNFTDialog: React.FC<Props> = ({ open, handleClose, saveFilters, currentFilters }) => {
+  const [owner, setOwner] = useState<string | null>("")
+  const [valueMin, setValueMin] = useState<string | undefined>()
+  const [valueMax, setValueMax] = useState<string | undefined>()
+
+  const ariaLabel = { "aria-label": "description" }
+
+  useEffect(() => {
+    if (currentFilters) {
+      setOwner(currentFilters?.owner)
+      setValueMin(currentFilters.valueMin)
+      setValueMax(currentFilters.valueMax)
+    }
+  }, [currentFilters])
+
+  const showFilters = () => {
+    const filterObject: TokensFilters = {
+      owner: owner,
+      valueMin: valueMin,
+      valueMax: valueMax
+    }
+    saveFilters(filterObject)
+    handleClose()
+  }
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle color="textPrimary">Value</SectionTitle>
+          </Grid>
+          <Grid item container direction="row" justifyContent="space-between" spacing={2}>
+            <Grid item xs={6}>
+              <CustomTextField
+                onChange={event => setValueMin(event.target.value)}
+                name="test"
+                value={valueMin}
+                placeholder="Min"
+                inputProps={ariaLabel}
+                type="number"
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <CustomTextField
+                onChange={event => setValueMax(event.target.value)}
+                name="test"
+                value={valueMax}
+                placeholder="Max"
+                type="number"
+                inputProps={ariaLabel}
+              />
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <SectionTitle color="textPrimary">Creator Address</SectionTitle>
+          </Grid>
+          <Grid item xs={12}>
+            <CustomTextField
+              onChange={event => setOwner(event.target.value)}
+              style={{ width: "100%" }}
+              name="test"
+              value={owner}
+              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/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,138 @@
+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)(({ theme }) => ({
+  marginTop: 6,
+  gap: 24,
+  [theme.breakpoints.down("sm")]: {
+    marginTop: 30
+  }
+}))
+
+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 color="textPrimary">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 color="textPrimary">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="Max"
+                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>
+    </>
+  )
+}