From b58be2f188c8cab7cb3451257acb843a6a7a6c6c Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 30 May 2024 23:17:20 +0200 Subject: [PATCH] search bar & filter dialog for token tab --- .../components/FiltersTokensDialog.tsx | 135 ++++++++++++++++++ .../Treasury/components/BalancesTable.tsx | 69 ++++++++- src/modules/explorer/pages/Treasury/index.tsx | 8 +- 3 files changed, 209 insertions(+), 3 deletions(-) create mode 100644 src/modules/explorer/components/FiltersTokensDialog.tsx diff --git a/src/modules/explorer/components/FiltersTokensDialog.tsx b/src/modules/explorer/components/FiltersTokensDialog.tsx new file mode 100644 index 00000000..10d15a7e --- /dev/null +++ b/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 = ({ open, handleClose, saveFilters, currentFilters }) => { + const [token, setToken] = useState("") + const [balanceMin, setBalanceMin] = useState() + const [balanceMax, setBalanceMax] = useState() + + 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 ( + <> + + + + Token + + + setToken(event.target.value)} + style={{ width: "40%" }} + name="test" + value={token} + placeholder="Token" + inputProps={ariaLabel} + /> + + + + Balance + + + + setBalanceMin(event.target.value)} + name="test" + value={balanceMin} + placeholder="Min" + inputProps={ariaLabel} + type="number" + /> + + + setBalanceMax(event.target.value)} + name="test" + value={balanceMax} + placeholder="Min" + type="number" + inputProps={ariaLabel} + /> + + + + + + + Apply + + + + + ) +} diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx index 0e946ef1..6d7645fa 100644 --- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx +++ b/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() + const [openFiltersDialog, setOpenFiltersDialog] = useState(false) + const [searchText, setSearchText] = useState("") + const [filters, setFilters] = useState() + + 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 ( <> + + setOpenFiltersDialog(true)} + xs={isSmall ? 12 : 2} + item + container + direction="row" + alignItems="center" + > + + Filter & Sort + + + + + { defaultValues={defaultValues} defaultTab={0} /> + ) } diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index 8bdd03c1..7716984e 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/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)