From 350d95208fc48b6db8c5bea2175de88e4891ac61 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sat, 25 May 2024 22:49:14 +0200 Subject: [PATCH 01/12] desktop update --- .../Treasury/components/TransfersTable.tsx | 132 ++++++++++++------ src/modules/explorer/pages/Treasury/index.tsx | 15 +- 2 files changed, 98 insertions(+), 49 deletions(-) diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index 6b598071..cdf58335 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -1,5 +1,5 @@ -import dayjs from "dayjs" import React, { useMemo, useState } from "react" +import dayjs from "dayjs" import { Grid, Link, @@ -20,9 +20,9 @@ import { ContentContainer } from "modules/explorer/components/ContentContainer" import { networkNameMap } from "services/bakingBad" import { toShortAddress } from "services/contracts/utils" import { ReactComponent as BulletIcon } from "assets/img/bullet.svg" -import { CopyButton } from "modules/common/CopyButton" import ReactPaginate from "react-paginate" import "../../DAOList/styles.css" +import OpenInNewIcon from "@mui/icons-material/OpenInNew" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -33,7 +33,8 @@ const createData = (transfer: TransferWithBN) => { date: dayjs(transfer.date).format("L"), address: transfer.recipient, amount: transfer.amount.dp(10, 1).toString(), - hash: transfer.hash + hash: transfer.hash, + type: transfer.type } } @@ -65,12 +66,55 @@ const ProposalsFooterMobile = styled(Grid)({ borderBottomRightRadius: 8 }) +const ItemContainer = styled(Grid)(({ theme }) => ({ + padding: "40px 48px 41px 48px", + gap: 8, + borderRadius: 8, + background: theme.palette.primary.main +})) + +const Container = styled(Grid)({ + gap: 24, + display: "grid" +}) + +const Title = styled(Typography)({ + color: "#fff", + fontSize: 24 +}) + +const Subtitle = styled(Typography)(({ theme }) => ({ + color: theme.palette.primary.light, + fontSize: 16, + fontWeight: 300 +})) + +const AmountText = styled(Typography)(({ theme }) => ({ + color: "#fff", + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" +})) + +const BlockExplorer = styled(Typography)({ + "fontSize": 16, + "fontWeight": 400, + "cursor": "pointer", + "display": "flex", + "alignItems": "center", + "& svg": { + fontSize: 16, + marginRight: 6 + } +}) + interface RowData { token: string date: string amount: string address: string hash: string + type: string | undefined } const Titles = ["Token", "Date", "Recipient", "Amount"] @@ -122,6 +166,7 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ const newOffset = (event.selected * 5) % data.length setOffset(newOffset) setCurrentPage(event.selected) + window.scrollTo({ top: 0, behavior: "smooth" }) } } const pageCount = Math.ceil(data ? data.length / 5 : 0) @@ -183,60 +228,59 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ ) } -const DesktopTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { +const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) + + const openBlockExplorer = (hash: string) => { + window.open(`https://${networkNameMap[network]}.tzkt.io/` + hash, "_blank") + } + // Invoke when user click to request another page. const handlePageClick = (event: { selected: number }) => { if (rows) { const newOffset = (event.selected * 5) % rows.length setOffset(newOffset) setCurrentPage(event.selected) + window.scrollTo({ top: 0, behavior: "smooth" }) } } const pageCount = Math.ceil(rows ? rows.length / 5 : 0) return ( <> - - - - {Titles.map((title, i) => ( - {title} - ))} - - - - {rows.slice(offset, offset + 5).map((row, i) => ( - - -
- {row.token} -
- - {row.date} - - {toShortAddress(row.address)} - - - {row.amount} - - ))} - {!(rows && rows.length > 0) ? ( - - - - No items - + + {rows.slice(offset, offset + 5).map((row, i) => { + return ( + + + + + {row.token} + + + To {toShortAddress(row.address)} + • + {dayjs(row.date).format("ll")} + - - ) : null} - -
+ + + + {row.type ? (row.type === "Deposit" ? "-" : "+") : null} {row.amount} {row.token}{" "} + + + + openBlockExplorer(row.hash)}> + + View on Block Explorer + + + + + ) + })} + + = ({ tran {isSmall ? ( ) : ( - + )} ) diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index b9a92a6c..f9a07f0e 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/src/modules/explorer/pages/Treasury/index.tsx @@ -1,5 +1,4 @@ import { Button, Grid, Theme, Tooltip, Typography, useMediaQuery, useTheme } from "@material-ui/core" -import { ProposalFormContainer } from "modules/explorer/components/ProposalForm" import React, { useMemo, useState } from "react" import { useDAO } from "services/services/dao/hooks/useDAO" @@ -175,7 +174,9 @@ export const Treasury: React.FC = () => { } + startIcon={ + + } variant="contained" disableElevation={true} onClick={() => handleChangeTab(0)} @@ -186,7 +187,9 @@ export const Treasury: React.FC = () => { } + startIcon={ + + } disableElevation={true} variant="contained" onClick={() => handleChangeTab(1)} @@ -197,13 +200,15 @@ export const Treasury: React.FC = () => { } + startIcon={ + + } disableElevation={true} variant="contained" onClick={() => handleChangeTab(2)} isSelected={selectedTab === 2} > - History + Transactions From ccc06d2b2c0bfa19b96c3b42c614e581e82d3709 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sun, 26 May 2024 22:58:16 +0200 Subject: [PATCH 02/12] responsive tables --- .../Treasury/components/TransfersTable.tsx | 39 ++++++++++++------- src/modules/explorer/pages/Treasury/index.tsx | 4 +- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index cdf58335..6c124d3e 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -23,6 +23,7 @@ import { ReactComponent as BulletIcon } from "assets/img/bullet.svg" import ReactPaginate from "react-paginate" import "../../DAOList/styles.css" import OpenInNewIcon from "@mui/icons-material/OpenInNew" +import numbro from "numbro" const localizedFormat = require("dayjs/plugin/localizedFormat") dayjs.extend(localizedFormat) @@ -67,10 +68,14 @@ const ProposalsFooterMobile = styled(Grid)({ }) const ItemContainer = styled(Grid)(({ theme }) => ({ - padding: "40px 48px 41px 48px", + padding: "40px 48px", gap: 8, borderRadius: 8, - background: theme.palette.primary.main + background: theme.palette.primary.main, + [theme.breakpoints.down("sm")]: { + padding: "30px 38px", + gap: 20 + } })) const Container = styled(Grid)({ @@ -119,6 +124,13 @@ interface RowData { const Titles = ["Token", "Date", "Recipient", "Amount"] +const formatConfig = { + average: true, + mantissa: 1, + thousandSeparated: true, + trimMantissa: true +} + const titleDataMatcher = (title: (typeof Titles)[number], rowData: RowData) => { switch (title) { case "Token": @@ -231,6 +243,8 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ data: rows, network }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) + const theme = useTheme() + const isSmall = useMediaQuery(theme.breakpoints.down("xs")) const openBlockExplorer = (hash: string) => { window.open(`https://${networkNameMap[network]}.tzkt.io/` + hash, "_blank") @@ -252,24 +266,25 @@ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ {rows.slice(offset, offset + 5).map((row, i) => { return ( - + {row.token} - + To {toShortAddress(row.address)} - • + {isSmall ? null : •} {dayjs(row.date).format("ll")} - - + + - {row.type ? (row.type === "Deposit" ? "-" : "+") : null} {row.amount} {row.token}{" "} + {row.type ? (row.type === "Deposit" ? "-" : "+") : null}{" "} + {isSmall ? numbro(row.amount).format(formatConfig) : row.amount} {row.token}{" "} - + openBlockExplorer(row.hash)}> View on Block Explorer @@ -317,11 +332,7 @@ export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ tran return ( - {isSmall ? ( - - ) : ( - - )} + ) } diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index f9a07f0e..bf123b36 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/src/modules/explorer/pages/Treasury/index.tsx @@ -130,7 +130,7 @@ export const Treasury: React.FC = () => { justifyContent="flex-end" alignItems="center" style={{ gap: 15 }} - direction={isMobileSmall ? "column" : "row"} + direction={isMobileSmall ? "row" : "row"} xs={isMobileSmall ? undefined : true} > {dao && ( @@ -138,7 +138,7 @@ export const Treasury: React.FC = () => { item xs container - justifyContent="flex-end" + justifyContent={"flex-end"} direction="row" style={isMobileSmall ? {} : { marginLeft: 30 }} > From 12ae5c09989a16bf0be84c1fc77812c2df7d891a Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sun, 26 May 2024 23:06:52 +0200 Subject: [PATCH 03/12] no items + scroll on other tabs --- src/modules/explorer/pages/NFTs/index.tsx | 3 ++- .../explorer/pages/Treasury/components/BalancesTable.tsx | 3 ++- .../pages/Treasury/components/TransfersTable.tsx | 9 +++++---- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/modules/explorer/pages/NFTs/index.tsx b/src/modules/explorer/pages/NFTs/index.tsx index b27385f8..a81369ac 100644 --- a/src/modules/explorer/pages/NFTs/index.tsx +++ b/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" }) } } diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx index d81dd3f1..0e946ef1 100644 --- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx @@ -108,13 +108,14 @@ const BalancesList: React.FC = ({ }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) - const value = isMobileSmall ? 6 : 2 + const value = isMobileSmall ? 6 : 5 // Invoke when user click to request another page. const handlePageClick = (event: { selected: number }) => { if (rows) { const newOffset = (event.selected * value) % rows.length setOffset(newOffset) setCurrentPage(event.selected) + window.scrollTo({ top: 0, behavior: "smooth" }) } } diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index 6c124d3e..87c3c191 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -317,9 +317,6 @@ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ } export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ transfers }) => { - const theme = useTheme() - const isSmall = useMediaQuery(theme.breakpoints.down("sm")) - const rows = useMemo(() => { if (!transfers) { return [] @@ -332,7 +329,11 @@ export const TransfersTable: React.FC<{ transfers: TransferWithBN[] }> = ({ tran return ( - + {rows && rows.length > 0 ? ( + + ) : ( + No items + )} ) } From 7ee3eb3dc240ef6c51128b41c4602f8e236f65e6 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Tue, 28 May 2024 16:57:39 +0200 Subject: [PATCH 04/12] searchbar --- src/modules/explorer/pages/Treasury/index.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index bf123b36..8f385117 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/src/modules/explorer/pages/Treasury/index.tsx @@ -18,6 +18,7 @@ import { SmallButton } from "modules/common/SmallButton" import { ContentContainer } from "modules/explorer/components/ContentContainer" import { CopyButton } from "modules/common/CopyButton" import { TreasuryDialog } from "./components/TreasuryDialog" +import { SearchInput } from "../DAOList/components/Searchbar" const ItemGrid = styled(Grid)({ width: "inherit" @@ -88,6 +89,7 @@ export const Treasury: React.FC = () => { const { data: dao } = useDAO(daoId) const [openTransfer, setOpenTransfer] = useState(false) const [selectedTab, setSelectedTab] = React.useState(0) + const [searchText, setSearchText] = useState("") const { data: transfers } = useTransfers(daoId) @@ -100,6 +102,25 @@ export const Treasury: React.FC = () => { setOpenTransfer(false) } + const currentTransfers = useMemo(() => { + if (transfers) { + const allTransfers = transfers.slice() + if (searchText) { + return transfers.filter( + formattedDao => formattedDao.name && formattedDao.name.toLowerCase().includes(searchText.toLowerCase()) + ) + } + + return allTransfers + } + + return [] + }, [searchText, transfers]) + + const filterByName = (filter: string) => { + setSearchText(filter.trim()) + } + return ( <> @@ -214,6 +235,12 @@ export const Treasury: React.FC = () => { + + + + + + @@ -224,7 +251,7 @@ export const Treasury: React.FC = () => { - + From 73d5d73acc1ff4d4521b0401036b75c90851117d Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 30 May 2024 16:54:19 +0200 Subject: [PATCH 05/12] transactions filters working --- .../explorer/components/FiltersDialog.tsx | 1 - .../components/FiltersTransactionsDialog.tsx | 205 ++++++++++++++++++ .../explorer/pages/Proposals/index.tsx | 2 +- .../Treasury/components/TransfersTable.tsx | 110 +++++----- src/modules/explorer/pages/Treasury/index.tsx | 81 ++++++- .../contracts/baseDAO/hooks/useTransfers.ts | 1 + src/theme/index.ts | 3 +- 7 files changed, 340 insertions(+), 63 deletions(-) create mode 100644 src/modules/explorer/components/FiltersTransactionsDialog.tsx diff --git a/src/modules/explorer/components/FiltersDialog.tsx b/src/modules/explorer/components/FiltersDialog.tsx index 270f5042..f626cb5d 100644 --- a/src/modules/explorer/components/FiltersDialog.tsx +++ b/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" diff --git a/src/modules/explorer/components/FiltersTransactionsDialog.tsx b/src/modules/explorer/components/FiltersTransactionsDialog.tsx new file mode 100644 index 00000000..ae0a9bb8 --- /dev/null +++ b/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 = ({ open, handleClose, saveFilters, currentFilters }) => { + const [status, setStatus] = useState([]) + const [token, setToken] = useState("") + const [sender, setSender] = useState("") + const [receiver, setReceiver] = useState("") + + const [filters, setFilters] = useState() + 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 ( + <> + + + + Sort by + + + + {status.length > 0 && + status.map((item, index) => { + return ( + + saveStatus(item)}>{item.label} + + ) + })} + + + + Token + + + setToken(event.target.value)} + style={{ width: "40%" }} + name="test" + value={token} + placeholder="Token" + inputProps={ariaLabel} + /> + + + + Receiving Address + + + setReceiver(event.target.value)} + name="test" + value={receiver} + placeholder="Address" + inputProps={ariaLabel} + /> + + + + Sending Address + + + setSender(event.target.value)} + name="test" + value={sender} + placeholder="Address" + inputProps={ariaLabel} + /> + + + + + + Apply + + + + + ) +} diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx index c6a9045e..e88818da 100644 --- a/src/modules/explorer/pages/Proposals/index.tsx +++ b/src/modules/explorer/pages/Proposals/index.tsx @@ -261,7 +261,7 @@ export const Proposals: React.FC = () => { direction="row" alignItems="center" > - + Filter & Sort diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx index 87c3c191..61b81cef 100644 --- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react" +import React, { useEffect, useMemo, useState } from "react" import dayjs from "dayjs" import { Grid, @@ -246,6 +246,10 @@ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ const theme = useTheme() const isSmall = useMediaQuery(theme.breakpoints.down("xs")) + useEffect(() => { + setOffset(0) + }, [rows]) + const openBlockExplorer = (hash: string) => { window.open(`https://${networkNameMap[network]}.tzkt.io/` + hash, "_blank") } @@ -262,56 +266,62 @@ const TransfersTableItems: React.FC<{ data: RowData[]; network: Network }> = ({ const pageCount = Math.ceil(rows ? rows.length / 5 : 0) return ( <> - - {rows.slice(offset, offset + 5).map((row, i) => { - return ( - - - - - {row.token} - - - To {toShortAddress(row.address)} - {isSmall ? null : •} - {dayjs(row.date).format("ll")} - - - - - - {row.type ? (row.type === "Deposit" ? "-" : "+") : null}{" "} - {isSmall ? numbro(row.amount).format(formatConfig) : row.amount} {row.token}{" "} - - - - openBlockExplorer(row.hash)}> - - View on Block Explorer - - - - - ) - })} - + {rows && rows.length > 0 ? ( + <> + + {rows.slice(offset, offset + 5).map((row, i) => { + return ( + + + + + {row.token} + + + To {toShortAddress(row.address)} + {isSmall ? null : •} + {dayjs(row.date).format("ll")} + + + + + + {row.type ? (row.type === "Deposit" ? "-" : "+") : null}{" "} + {isSmall ? numbro(row.amount).format(formatConfig) : row.amount} {row.token}{" "} + + + + openBlockExplorer(row.hash)}> + + View on Block Explorer + + + + + ) + })} + - - - + + + + + ) : ( + No items + )} ) } diff --git a/src/modules/explorer/pages/Treasury/index.tsx b/src/modules/explorer/pages/Treasury/index.tsx index 8f385117..8bdd03c1 100644 --- a/src/modules/explorer/pages/Treasury/index.tsx +++ b/src/modules/explorer/pages/Treasury/index.tsx @@ -5,7 +5,7 @@ import { useDAO } from "services/services/dao/hooks/useDAO" import { useDAOID } from "../DAO/router" import { BalancesTable } from "./components/BalancesTable" import { TransfersTable } from "./components/TransfersTable" -import { useTransfers } from "../../../../services/contracts/baseDAO/hooks/useTransfers" +import { TransferWithBN, useTransfers } from "../../../../services/contracts/baseDAO/hooks/useTransfers" import { InfoIcon } from "../../components/styled/InfoIcon" import { useIsProposalButtonDisabled } from "../../../../services/contracts/baseDAO/hooks/useCycleInfo" import { styled } from "@material-ui/core" @@ -19,6 +19,13 @@ import { ContentContainer } from "modules/explorer/components/ContentContainer" import { CopyButton } from "modules/common/CopyButton" import { TreasuryDialog } from "./components/TreasuryDialog" import { SearchInput } from "../DAOList/components/Searchbar" +import FilterAltIcon from "@mui/icons-material/FilterAlt" +import { FilterTransactionsDialog } from "modules/explorer/components/FiltersTransactionsDialog" +import { StatusOption } from "modules/explorer/components/FiltersUserDialog" + +const FiltersContainer = styled(Grid)({ + cursor: "pointer" +}) const ItemGrid = styled(Grid)({ width: "inherit" @@ -50,6 +57,13 @@ const TitleText = styled(Typography)({ } }) +export interface TransactionsFilters { + token: string | null + sender: string | null + receiver: string | null + status: StatusOption | undefined +} + const StyledTab = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({ "fontSize": 18, "height": 40, @@ -90,6 +104,8 @@ export const Treasury: React.FC = () => { const [openTransfer, setOpenTransfer] = useState(false) const [selectedTab, setSelectedTab] = React.useState(0) const [searchText, setSearchText] = useState("") + const [filters, setFilters] = useState() + const [openFiltersDialog, setOpenFiltersDialog] = useState(false) const { data: transfers } = useTransfers(daoId) @@ -103,10 +119,31 @@ export const Treasury: React.FC = () => { } const currentTransfers = useMemo(() => { + const handleFilterData = (allTransfers: TransferWithBN[]) => { + let data = allTransfers.slice() + if (filters?.receiver && filters.receiver !== "") { + data = allTransfers.filter(trx => trx.recipient === filters.receiver) + } + if (filters?.sender && filters.sender !== "") { + data = allTransfers.filter(trx => trx.sender === filters.sender) + } + if (filters?.token && filters.token !== "") { + data = allTransfers.filter(trx => trx.token?.symbol === filters.token) + } + if (filters?.status && filters.status.label !== "") { + data = allTransfers.filter(trx => trx.status === filters.status?.label) + } + return data + } + if (transfers) { - const allTransfers = transfers.slice() + let allTransfers = transfers.slice() + if (filters) { + allTransfers = handleFilterData(allTransfers) + } + if (searchText) { - return transfers.filter( + return allTransfers.filter( formattedDao => formattedDao.name && formattedDao.name.toLowerCase().includes(searchText.toLowerCase()) ) } @@ -115,12 +152,20 @@ export const Treasury: React.FC = () => { } return [] - }, [searchText, transfers]) + }, [searchText, transfers, filters]) const filterByName = (filter: string) => { setSearchText(filter.trim()) } + const handleFilters = (filters: TransactionsFilters) => { + setFilters(filters) + } + + const handleCloseFiltersModal = () => { + setOpenFiltersDialog(false) + } + return ( <> @@ -235,12 +280,6 @@ export const Treasury: React.FC = () => { - - - - - - @@ -251,6 +290,22 @@ export const Treasury: React.FC = () => { + + setOpenFiltersDialog(true)} + xs={isMobileSmall ? 12 : 2} + item + container + direction="row" + alignItems="center" + > + + Filter & Sort + + + + + @@ -262,6 +317,12 @@ export const Treasury: React.FC = () => { open={openTransfer} handleClose={onCloseTransfer} /> + ) } diff --git a/src/services/contracts/baseDAO/hooks/useTransfers.ts b/src/services/contracts/baseDAO/hooks/useTransfers.ts index 8bfc54b8..5e5fe81a 100644 --- a/src/services/contracts/baseDAO/hooks/useTransfers.ts +++ b/src/services/contracts/baseDAO/hooks/useTransfers.ts @@ -25,6 +25,7 @@ export interface TransferWithBN { hash: string type?: "Withdrawal" | "Deposit" token?: BNToken + status?: string } export const useTransfers = (contractAddress: string) => { diff --git a/src/theme/index.ts b/src/theme/index.ts index 164e773e..54f56b2a 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -213,7 +213,8 @@ export const theme = createTheme({ borderBottom: "none" }, "&:before": { - borderBottom: "none" + borderBottom: "none", + transition: "none" }, "&:hover:not($disabled):not($focused):not($error):before": { borderBottom: "none" From b58be2f188c8cab7cb3451257acb843a6a7a6c6c Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 30 May 2024 23:17:20 +0200 Subject: [PATCH 06/12] 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) From c2cc1047ef9e418508cb94ffaea615316e0ac271 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Fri, 7 Jun 2024 18:21:50 +0200 Subject: [PATCH 07/12] filters & xtz added to list of holdings --- .vscode/settings.json | 3 +- .../Treasury/components/BalancesTable.tsx | 61 ++++++++++++++++--- 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index ce255610..c27e6da8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,6 @@ "svg.preview.background": "black", "cSpell.words": [ "offchain" - ] + ], + "editor.autoClosingBrackets": "always" } diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx index 6d7645fa..eb99fced 100644 --- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react" +import React, { useEffect, useMemo, useState } from "react" import { Card, CardContent, Grid, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core" import { ProposalFormContainer, ProposalFormDefaultValues } from "modules/explorer/components/ProposalForm" import { DAOHolding } from "services/bakingBad/tokenBalances" @@ -117,6 +117,27 @@ const BalancesList: React.FC = ({ const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) const value = isMobileSmall ? 6 : 5 + const [list, setList] = useState(rows) + + useEffect(() => { + setList(rows) + }, [rows]) + + // useEffect(() => { + // if (list) { + // const val = list.findIndex(row => row.symbol === "XTZ") + // if (val === -1) { + // const xtz: RowData = { + // symbol: "XTZ", + // address: "", + // amount: tezosBalance.toString() + // } + // const updatedList = rows.slice() + // updatedList.unshift(xtz) + // setList(updatedList) + // } + // } + // }, [tezosBalance, list, rows]) // Invoke when user click to request another page. const handlePageClick = (event: { selected: number }) => { if (rows) { @@ -130,7 +151,7 @@ const BalancesList: React.FC = ({ const pageCount = Math.ceil(rows ? rows.length / value : 0) return ( - + {/* XTZ @@ -151,14 +172,20 @@ const BalancesList: React.FC = ({ - + */} - {rows.slice(offset, offset + value).map((row, i) => ( + {list.slice(offset, offset + value).map((row, i) => ( {row.symbol} - + {toShortAddress(row.address)} @@ -262,7 +289,6 @@ export const BalancesTable: React.FC = () => { } const handleFilters = (filters: TokensFilters) => { - console.log(filters) setFilters(filters) } @@ -276,6 +302,12 @@ export const BalancesTable: React.FC = () => { if (filters?.token && filters.token !== "") { data = holdings.filter(trx => trx.token?.symbol.toLowerCase() === filters.token?.toLocaleLowerCase()) } + if (filters?.balanceMin && filters.balanceMin !== "") { + data = holdings.filter(trx => trx.balance.isGreaterThanOrEqualTo(filters.balanceMin!)) + } + if (filters?.balanceMax && filters.balanceMax !== "") { + data = holdings.filter(trx => trx.balance.isLessThanOrEqualTo(filters.balanceMax!)) + } return data } @@ -283,6 +315,21 @@ export const BalancesTable: React.FC = () => { return [] } let holdings = tokenHoldings.slice() + const xtz: DAOHolding = { + token: { + symbol: "XTZ", + id: "XTZ", + contract: "", + token_id: 0, + name: "", + decimals: 6, + network: "mainnet", + supply: tezosBalance || new BigNumber(0), + standard: "" + }, + balance: tezosBalance || new BigNumber(0) + } + holdings.unshift(xtz) if (filters) { holdings = handleFilterData(holdings) @@ -295,7 +342,7 @@ export const BalancesTable: React.FC = () => { } return holdings.map(createData) - }, [tokenHoldings, searchText, filters]) + }, [tokenHoldings, searchText, filters, tezosBalance]) return ( <> From 5eb16e2c7cca3d01f8e43cdda6e2a1f7151fcf40 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 13 Jun 2024 16:49:52 +0200 Subject: [PATCH 08/12] votes & proposals search bars working --- .../explorer/components/ProposalsList.tsx | 4 + .../pages/User/components/UserMovements.tsx | 123 ++++++++++++++---- 2 files changed, 103 insertions(+), 24 deletions(-) diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx index 9fed9044..4b8fb093 100644 --- a/src/modules/explorer/components/ProposalsList.tsx +++ b/src/modules/explorer/components/ProposalsList.tsx @@ -88,6 +88,10 @@ export const ProposalsList: React.FC = ({ setFilteredProposals(listOfProposals) }, []) + useEffect(() => { + setFilteredProposals(listOfProposals) + }, [liteProposals, proposals]) + useEffect(() => { setFilteredProposals(listOfProposals) }, [showFullList]) diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx index a06179cc..54f3cd2c 100644 --- a/src/modules/explorer/pages/User/components/UserMovements.tsx +++ b/src/modules/explorer/pages/User/components/UserMovements.tsx @@ -30,6 +30,7 @@ import { useUserVotes } from "modules/lite/explorer/hooks/useUserVotes" import { usePolls } from "modules/lite/explorer/hooks/usePolls" import { useDAO } from "services/services/dao/hooks/useDAO" import { FilterUserTransactionsDialog, TrxStatus } from "modules/explorer/components/FiltersUserTransactionsDialog" +import { SearchInput } from "../../DAOList/components/Searchbar" const TabsContainer = styled(Grid)(({ theme }) => ({ borderRadius: 8, @@ -89,8 +90,7 @@ const ActivityContainer = styled(Grid)(({ theme }) => ({ })) const ViewAll = styled(Grid)(({ theme }) => ({ - "cursor": "pointer", - "width": "fit-content", + "width": "100%", "marginTop": 32, "& svg": { marginRight: 10, @@ -98,6 +98,12 @@ const ViewAll = styled(Grid)(({ theme }) => ({ } })) +const ViewAllInner = styled(Grid)(({ theme }) => ({ + cursor: "pointer", + width: "fit-content", + display: "flex" +})) + const BackButtonText = styled(Grid)({ alignItems: "baseline", marginBottom: 16, @@ -145,6 +151,7 @@ export const UserMovements: React.FC<{ const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) const [openFiltersDialog, setOpenFiltersDialog] = useState(false) const [openFiltersTrxDialog, setOpenFiltersTrxDialog] = useState(false) + const [searchText, setSearchText] = useState("") const [filters, setFilters] = useState() const [trxFilters, setTrxFilters] = useState() @@ -153,17 +160,59 @@ export const UserMovements: React.FC<{ const { data: polls } = usePolls(data?.liteDAOData?._id) const { data: userVotes } = useUserVotes() + const currentProposalsCreated = useMemo(() => { + if (proposalsCreated) { + let rows = proposalsCreated.slice() + + if (searchText && selectedTab === 0) { + rows = rows.filter(holding => holding.id && holding.id.toLowerCase().includes(searchText.toLowerCase())) + } + return rows + } else { + return [] + } + }, [proposalsCreated, searchText, selectedTab]) + + const currentProposalsVoted = useMemo(() => { + if (proposalsCreated) { + let rows = proposalsCreated.slice() + + if (searchText && selectedTab === 1) { + rows = rows.filter(holding => holding.id && holding.id.toLowerCase().includes(searchText.toLowerCase())) + } + return rows + } else { + return [] + } + }, [proposalsCreated, searchText, selectedTab]) + const pollsPosted: Poll[] | undefined = useMemo(() => { - return polls?.filter(p => p.author === account) + let list = polls?.slice() + list = polls?.filter(p => p.author === account) + + if (searchText && selectedTab === 0) { + list = list!.filter(holding => holding.name && holding.name.toLowerCase().includes(searchText.toLowerCase())) + } + return list // eslint-disable-next-line react-hooks/exhaustive-deps - }, [account]) + }, [account, searchText]) - const votedPolls: any = [] - pollsPosted?.map((p: Poll) => { - if (userVotes && userVotes.filter(v => p._id === v.pollID).length > 0) { - return votedPolls.push(p) + const currentVotedPolls = useMemo(() => { + const votedPolls: any = [] + pollsPosted?.map((p: Poll) => { + if (userVotes && userVotes.filter(v => p._id === v.pollID).length > 0) { + return votedPolls.push(p) + } + }) + + let data = votedPolls.slice() + if (searchText && selectedTab === 1) { + data = data!.filter( + (holding: any) => holding.name && holding.name.toLowerCase().includes(searchText.toLowerCase()) + ) } - }) + return data + }, [searchText, selectedTab, pollsPosted, userVotes]) const useUserTransfers = (): TransferWithBN[] | undefined => { const { data: transfers } = useTransfers(daoId) @@ -183,6 +232,11 @@ export const UserMovements: React.FC<{ const [pageCount, setPageCount] = React.useState(count) const handleChangeTab = (newValue: number) => { + const bar = document.getElementById("standard-search") as HTMLInputElement + if (bar) { + bar.value = "" + setSearchText("") + } setSelectedTab(newValue) } @@ -214,10 +268,16 @@ export const UserMovements: React.FC<{ holdings = handleFilterData(holdings) } + if (searchText && searchText !== "") { + holdings = holdings.filter( + holding => holding.token && holding.token.name.toLowerCase().includes(searchText.toLowerCase()) + ) + } + return holdings } return [] - }, [transfers, trxFilters]) + }, [transfers, trxFilters, searchText]) useEffect(() => { setFilteredTransactions(currentTransfers) @@ -249,6 +309,10 @@ export const UserMovements: React.FC<{ setTrxFilters(filters) } + const filterByName = (text: string) => { + setSearchText(text.trim()) + } + return ( {showActivity ? ( @@ -315,14 +379,23 @@ export const UserMovements: React.FC<{ ) : ( - (selectedTab !== 2 ? setOpenFiltersDialog(true) : setOpenFiltersTrxDialog(true))} - > + - - Filter & Sort + + (selectedTab !== 2 ? setOpenFiltersDialog(true) : setOpenFiltersTrxDialog(true))} + /> + (selectedTab !== 2 ? setOpenFiltersDialog(true) : setOpenFiltersTrxDialog(true))} + > + Filter & Sort + + + + + )} @@ -330,16 +403,17 @@ export const UserMovements: React.FC<{ - {proposalsCreated && cycleInfo && ( + {currentProposalsCreated && cycleInfo && ( )} - {!(proposalsCreated && proposalsCreated.length > 0) && !(pollsPosted && pollsPosted.length > 0) ? ( + {!(currentProposalsCreated && currentProposalsCreated.length > 0) && + !(pollsPosted && pollsPosted.length > 0) ? ( @@ -354,16 +428,17 @@ export const UserMovements: React.FC<{ {/* TAB VOTES CONTENT */} - {votedPolls && cycleInfo && ( + {currentVotedPolls && cycleInfo && ( )} - {!(proposalsVoted && proposalsVoted.length > 0) && !(votedPolls && votedPolls.length > 0) ? ( + {!(currentProposalsVoted && currentProposalsVoted.length > 0) && + !(currentVotedPolls && currentVotedPolls.length > 0) ? ( From 878fc3c1d8fcb1ce473de36564de3ba64f454e4a Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 13 Jun 2024 17:04:09 +0200 Subject: [PATCH 09/12] fix null list --- .../pages/User/components/UserMovements.tsx | 43 +++++-------------- 1 file changed, 10 insertions(+), 33 deletions(-) diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx index 54f3cd2c..30a9c817 100644 --- a/src/modules/explorer/pages/User/components/UserMovements.tsx +++ b/src/modules/explorer/pages/User/components/UserMovements.tsx @@ -37,14 +37,9 @@ const TabsContainer = styled(Grid)(({ theme }) => ({ gap: 16 })) -const ProposalsFooter = styled(Grid)({ - padding: "16px 46px", - minHeight: 34 -}) - const TransactionsFooter = styled(Grid)({ - padding: "16px 46px", - minHeight: 34 + minHeight: 34, + paddingTop: 24 }) const TitleText = styled(Typography)({ @@ -163,7 +158,6 @@ export const UserMovements: React.FC<{ const currentProposalsCreated = useMemo(() => { if (proposalsCreated) { let rows = proposalsCreated.slice() - if (searchText && selectedTab === 0) { rows = rows.filter(holding => holding.id && holding.id.toLowerCase().includes(searchText.toLowerCase())) } @@ -188,12 +182,15 @@ export const UserMovements: React.FC<{ const pollsPosted: Poll[] | undefined = useMemo(() => { let list = polls?.slice() - list = polls?.filter(p => p.author === account) + if (list) { + list = polls?.filter(p => p.author === account) - if (searchText && selectedTab === 0) { - list = list!.filter(holding => holding.name && holding.name.toLowerCase().includes(searchText.toLowerCase())) + if (searchText && selectedTab === 0) { + list = list!.filter(holding => holding.name && holding.name.toLowerCase().includes(searchText.toLowerCase())) + } + return list } - return list + return [] // eslint-disable-next-line react-hooks/exhaustive-deps }, [account, searchText]) @@ -412,16 +409,6 @@ export const UserMovements: React.FC<{ filters={filters} /> )} - {!(currentProposalsCreated && currentProposalsCreated.length > 0) && - !(pollsPosted && pollsPosted.length > 0) ? ( - - - - No items - - - - ) : null} @@ -437,16 +424,6 @@ export const UserMovements: React.FC<{ filters={filters} /> )} - {!(currentProposalsVoted && currentProposalsVoted.length > 0) && - !(currentVotedPolls && currentVotedPolls.length > 0) ? ( - - - - No items - - - - ) : null} @@ -478,7 +455,7 @@ export const UserMovements: React.FC<{ ) : ( - + No items From 39036acaf31901bd2c1f8196b242ba52bb3d5106 Mon Sep 17 00:00:00 2001 From: Ashutosh Kumar Date: Sun, 13 Oct 2024 16:23:07 +0530 Subject: [PATCH 10/12] Changes - Fixed Search Logic on Treasury Tokens - Fixed icons in pagination for next and previous page - Fixed a TS issue - Added a button for clear filters --- .gitignore | 3 +- .vscode/settings.json | 6 ++- .../explorer/components/VotersProgress.tsx | 6 ++- .../Treasury/components/BalancesTable.tsx | 45 ++++++++++++++----- 4 files changed, 45 insertions(+), 15 deletions(-) diff --git a/.gitignore b/.gitignore index 7c913880..c2727221 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,5 @@ yarn-error.log* .idea .env.example -.cosine \ No newline at end of file +.cosine +bun.lockb \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index c27e6da8..25e417a4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,7 @@ "cSpell.words": [ "offchain" ], - "editor.autoClosingBrackets": "always" -} + "editor.autoClosingBrackets": "always", + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} \ No newline at end of file diff --git a/src/modules/explorer/components/VotersProgress.tsx b/src/modules/explorer/components/VotersProgress.tsx index 6dc83233..427380cf 100644 --- a/src/modules/explorer/components/VotersProgress.tsx +++ b/src/modules/explorer/components/VotersProgress.tsx @@ -64,7 +64,11 @@ export const VotersProgress: React.FC = ({ showButton, daoId, propos title: "Voting Details", showTitle: false }) - const votesData = proposal ? proposal?.voters : [] + const votesData = + proposal?.voters.map(voter => ({ + ...voter, + value: voter.value.toString() + })) || [] try { const csv = generateCsv(csvConfig)(votesData) download(csvConfig)(csv) diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx index eb99fced..c292410b 100644 --- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx @@ -13,6 +13,10 @@ import { CopyButton } from "modules/common/CopyButton" import ReactPaginate from "react-paginate" import "../../DAOList/styles.css" import FilterAltIcon from "@mui/icons-material/FilterAlt" +import CloseIcon from "@mui/icons-material/Close" +import NavigateNextIcon from "@mui/icons-material/NavigateNext" +import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore" + import { SearchInput } from "../../DAOList/components/Searchbar" import { TokensFilters } from ".." import { FilterTokenDialog } from "modules/explorer/components/FiltersTokensDialog" @@ -116,7 +120,7 @@ const BalancesList: React.FC = ({ }) => { const [currentPage, setCurrentPage] = useState(0) const [offset, setOffset] = useState(0) - const value = isMobileSmall ? 6 : 5 + const value = 6 const [list, setList] = useState(rows) useEffect(() => { @@ -209,9 +213,9 @@ const BalancesList: React.FC = ({ ))} } breakLabel="..." - nextLabel=">" + nextLabel={} onPageChange={handlePageClick} pageRangeDisplayed={2} pageCount={pageCount} @@ -239,10 +243,7 @@ export const BalancesTable: React.FC = () => { const [openFiltersDialog, setOpenFiltersDialog] = useState(false) const [searchText, setSearchText] = useState("") const [filters, setFilters] = useState() - - const filterByName = (text: string) => { - setSearchText(text.trim()) - } + const filtersEnabled = Object.values(filters || {}).some(value => !!value) const onCloseTransfer = () => { setOpenTransfer(false) @@ -336,9 +337,14 @@ export const BalancesTable: React.FC = () => { } if (searchText) { - holdings = holdings.filter( - holding => holding.token && holding.token.name.toLowerCase().includes(searchText.toLowerCase()) - ) + console.log({ holdings }) + holdings = holdings.filter(holding => { + const query = searchText.toLowerCase() + if (holding.token?.name.toLowerCase().includes(query)) return true + if (holding.token?.id.toLowerCase().includes(query)) return true + if (holding.token?.symbol.toLowerCase().includes(query)) return true + return false + }) } return holdings.map(createData) @@ -359,8 +365,25 @@ export const BalancesTable: React.FC = () => { Filter & Sort + {filtersEnabled && ( + setFilters({ token: "", balanceMax: "", balanceMin: "" })} + xs={isSmall ? 12 : 2} + item + container + direction="row" + alignItems="center" + > + + Clear Filters + + )} - + { + setSearchText(text.trim()) + }} + /> Date: Sun, 13 Oct 2024 16:43:35 +0530 Subject: [PATCH 11/12] Update CHANGELOG.md --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c0b790fe..0108d1c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Sending XTZ directly to DAO address - Delegating DAO's XTZ to baker - Changing DAO configuration parameters +- Added Searchbar on Treasury Page ## [1.0.6] - 2022-01-05 ### Added @@ -72,4 +73,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Treasury page style ### Breaking changes -- Upgraded BaseDAO contracts to [v0.4](https://github.com/tezos-commons/baseDAO/tree/b3aa7886950d4f1eb65816ed726ce69e77e14472) - DAOs created prior to this upgrade are deprecated \ No newline at end of file +- Upgraded BaseDAO contracts to [v0.4](https://github.com/tezos-commons/baseDAO/tree/b3aa7886950d4f1eb65816ed726ce69e77e14472) - DAOs created prior to this upgrade are deprecated From d650d2d2a65a43a501268e35655cdea58f1e2139 Mon Sep 17 00:00:00 2001 From: Ashutosh Kumar Date: Mon, 21 Oct 2024 02:58:44 +0530 Subject: [PATCH 12/12] Reset Page counter on Search Query in Balances --- .../pages/Treasury/components/BalancesTable.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx index c292410b..448e7004 100644 --- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx +++ b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx @@ -103,6 +103,7 @@ const titleDataMatcher = (title: (typeof titles)[number], rowData: RowData) => { interface TableProps { rows: RowData[] + searchText?: string tezosBalance: BigNumber openXTZTransferModal: () => void openTokenTransferModal: (tokenAddress: string) => void @@ -112,6 +113,7 @@ interface TableProps { const BalancesList: React.FC = ({ rows, + searchText, tezosBalance, openTokenTransferModal, openXTZTransferModal, @@ -127,6 +129,13 @@ const BalancesList: React.FC = ({ setList(rows) }, [rows]) + useEffect(() => { + if (searchText && searchText.length > 0) { + setOffset(0) + setCurrentPage(0) + } + }, [searchText]) + // useEffect(() => { // if (list) { // const val = list.findIndex(row => row.symbol === "XTZ") @@ -388,6 +397,7 @@ export const BalancesTable: React.FC = () => {