search bar & filter dialog for token tab

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/pages/Treasury/components/BalancesTable.tsx

@@ -12,6 +12,14 @@ import { toShortAddress } from "services/contracts/utils"
 import { CopyButton } from "modules/common/CopyButton"
 import ReactPaginate from "react-paginate"
 import "../../DAOList/styles.css"
+import FilterAltIcon from "@mui/icons-material/FilterAlt"
+import { SearchInput } from "../../DAOList/components/Searchbar"
+import { TokensFilters } from ".."
+import { FilterTokenDialog } from "modules/explorer/components/FiltersTokensDialog"
+
+const FiltersContainer = styled(Grid)({
+  cursor: "pointer"
+})
 
 const TokenSymbol = styled(Typography)(({ theme }) => ({
   color: theme.palette.secondary.main,
@@ -201,6 +209,13 @@ export const BalancesTable: React.FC = () => {
   const { data: tezosBalance } = useTezosBalance(daoId)
   const [openTransfer, setOpenTransfer] = useState(false)
   const [defaultValues, setDefaultValues] = useState<ProposalFormDefaultValues>()
+  const [openFiltersDialog, setOpenFiltersDialog] = useState(false)
+  const [searchText, setSearchText] = useState("")
+  const [filters, setFilters] = useState<TokensFilters>()
+
+  const filterByName = (text: string) => {
+    setSearchText(text.trim())
+  }
 
   const onCloseTransfer = () => {
     setOpenTransfer(false)
@@ -246,17 +261,61 @@ export const BalancesTable: React.FC = () => {
     setOpenTransfer(true)
   }
 
+  const handleFilters = (filters: TokensFilters) => {
+    console.log(filters)
+    setFilters(filters)
+  }
+
+  const handleCloseFiltersModal = () => {
+    setOpenFiltersDialog(false)
+  }
+
   const rows = useMemo(() => {
+    const handleFilterData = (holdings: DAOHolding[]) => {
+      let data = holdings.slice()
+      if (filters?.token && filters.token !== "") {
+        data = holdings.filter(trx => trx.token?.symbol.toLowerCase() === filters.token?.toLocaleLowerCase())
+      }
+      return data
+    }
+
     if (!tokenHoldings) {
       return []
     }
+    let holdings = tokenHoldings.slice()
+
+    if (filters) {
+      holdings = handleFilterData(holdings)
+    }
 
-    return tokenHoldings.map(createData)
-  }, [tokenHoldings])
+    if (searchText) {
+      holdings = holdings.filter(
+        holding => holding.token && holding.token.name.toLowerCase().includes(searchText.toLowerCase())
+      )
+    }
+
+    return holdings.map(createData)
+  }, [tokenHoldings, searchText, filters])
 
   return (
     <>
       <Grid item>
+        <Grid container style={{ marginBottom: 32 }} direction="row" justifyContent="space-between">
+          <FiltersContainer
+            onClick={() => setOpenFiltersDialog(true)}
+            xs={isSmall ? 12 : 2}
+            item
+            container
+            direction="row"
+            alignItems="center"
+          >
+            <FilterAltIcon style={{ color: theme.palette.secondary.main, marginRight: 6 }} fontSize="small" />
+            <Typography color="secondary">Filter & Sort</Typography>
+          </FiltersContainer>
+          <Grid item xs={4}>
+            <SearchInput search={filterByName} />
+          </Grid>
+        </Grid>
         <BalancesList
           rows={rows}
           tezosBalance={tezosBalance || new BigNumber(0)}
@@ -273,6 +332,12 @@ export const BalancesTable: React.FC = () => {
         defaultValues={defaultValues}
         defaultTab={0}
       />
+      <FilterTokenDialog
+        currentFilters={filters}
+        saveFilters={handleFilters}
+        open={openFiltersDialog}
+        handleClose={handleCloseFiltersModal}
+      />
     </>
   )
 }

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

@@ -64,6 +64,12 @@ export interface TransactionsFilters {
   status: StatusOption | undefined
 }
 
+export interface TokensFilters {
+  token: string | null
+  balanceMin: string | undefined
+  balanceMax: string | undefined
+}
+
 const StyledTab = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({
   "fontSize": 18,
   "height": 40,
@@ -128,7 +134,7 @@ export const Treasury: React.FC = () => {
         data = allTransfers.filter(trx => trx.sender === filters.sender)
       }
       if (filters?.token && filters.token !== "") {
-        data = allTransfers.filter(trx => trx.token?.symbol === filters.token)
+        data = allTransfers.filter(trx => trx.token?.symbol.toLocaleLowerCase() === filters.token?.toLocaleLowerCase())
       }
       if (filters?.status && filters.status.label !== "") {
         data = allTransfers.filter(trx => trx.status === filters.status?.label)