diff --git a/src/modules/explorer/components/FiltersUserTransactionsDialog.tsx b/src/modules/explorer/components/FiltersUserTransactionsDialog.tsx index eb5c2dd9..0c2172f5 100644 --- a/src/modules/explorer/components/FiltersUserTransactionsDialog.tsx +++ b/src/modules/explorer/components/FiltersUserTransactionsDialog.tsx @@ -2,15 +2,12 @@ import React, { useEffect, useState } from "react" import { ResponsiveDialog } from "./ResponsiveDialog" import { Grid, TextField, styled, withStyles } 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 { Filters, TrxFilters } from "../pages/User/components/UserMovements" +import { TrxFilters } from "../pages/User/components/UserMovements" export enum TrxStatus { - COMPLETED = "completed", - PENDING = "pending", - FAILED = "failed" + DEPOSIT = "Deposit", + WITHDRAWAL = "Withdrawal" } interface Props { @@ -88,15 +85,15 @@ const StatusButton = styled(Grid)(({ theme }) => ({ const ariaLabel = { "aria-label": "description" } export interface StatusOption { - label: string + label: TrxStatus } export const FilterUserTransactionsDialog: React.FC = ({ open, handleClose, saveFilters }) => { - const [token, setToken] = useState("") - const [receiver, setReceiver] = useState("") - const [sender, setSender] = useState("") + const [token, setToken] = useState("") + const [receiver, setReceiver] = useState("") + const [sender, setSender] = useState("") const [status, setStatus] = useState([]) - const [filters, setFilters] = useState() + const [filter, setFilter] = useState() const findStatus = () => { const values = Object.values(TrxStatus) @@ -114,26 +111,34 @@ export const FilterUserTransactionsDialog: React.FC = ({ open, handleClos }, []) const isSelected = (item: StatusOption) => { - return filters && filters.label === item.label ? true : false + return filter && filter.label === item.label ? true : false } const saveStatus = (status: StatusOption) => { - if (status.label === filters?.label) { - setFilters(undefined) + if (status.label === filter?.label) { + setFilter(undefined) } else { - setFilters(status) + setFilter(status) } } const showFilters = () => { - console.log("filters") + const filterObject: TrxFilters = { + type: filter, + token: token, + sender: sender, + receiver: receiver + } + saveFilters(filterObject) + handleClose() } + return ( <> - Transaction Status + Transaction Type {status.length > 0 && diff --git a/src/modules/explorer/components/UserBalances.tsx b/src/modules/explorer/components/UserBalances.tsx index e640b96c..fb7ea911 100644 --- a/src/modules/explorer/components/UserBalances.tsx +++ b/src/modules/explorer/components/UserBalances.tsx @@ -54,11 +54,13 @@ const BalanceHeaderText = styled(Typography)({ const BalanceGrid = styled(Grid)({ ["@media (max-width:636px)"]: { - marginBottom: 25 + marginBottom: 25, + justifyContent: "flex-start" }, ["@media (max-width:409.99px)"]: { - marginBottom: 20 + marginBottom: 20, + justifyContent: "flex-start" } }) diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx index e7823d85..a06179cc 100644 --- a/src/modules/explorer/pages/User/components/UserMovements.tsx +++ b/src/modules/explorer/pages/User/components/UserMovements.tsx @@ -124,7 +124,7 @@ export interface Filters { } export interface TrxFilters { - status: TrxStatus + type: StatusOption | undefined token: string receiver: string sender: string @@ -186,14 +186,47 @@ export const UserMovements: React.FC<{ setSelectedTab(newValue) } + const currentTransfers = useMemo(() => { + const handleFilterData = (allTransfers: TransferWithBN[]) => { + let data = allTransfers.slice() + if (trxFilters?.receiver && trxFilters.receiver !== "") { + data = allTransfers.filter(trx => trx.recipient === trxFilters.receiver) + } + if (trxFilters?.sender && trxFilters.sender !== "") { + data = allTransfers.filter(trx => trx.sender === trxFilters.sender) + } + if (trxFilters?.token && trxFilters.token !== "") { + data = allTransfers.filter( + trx => trx.token?.symbol.toLocaleLowerCase() === trxFilters.token?.toLocaleLowerCase() + ) + } + if (trxFilters?.type && trxFilters.type !== undefined) { + data = allTransfers.filter(trx => + trx.type ? trx.type.toLocaleLowerCase() === trxFilters.type?.label?.toLocaleLowerCase() : null + ) + } + return data + } + + if (transfers) { + let holdings = transfers?.slice() + if (trxFilters) { + holdings = handleFilterData(holdings) + } + + return holdings + } + return [] + }, [transfers, trxFilters]) + useEffect(() => { - setFilteredTransactions(transfers) - setPageCount(Math.ceil(transfers ? transfers.length / count : 0)) - }, [transfers]) + setFilteredTransactions(currentTransfers) + setPageCount(Math.ceil(currentTransfers ? currentTransfers.length / count : 0)) + }, [currentTransfers]) // Invoke when user click to request another page. const handlePageClick = (event: { selected: number }) => { - if (transfers) { + if (currentTransfers) { const newOffset = (event.selected * count) % (filteredTransactions ? filteredTransactions.length : 1) setOffset(newOffset) setCurrentPage(event.selected) @@ -344,10 +377,10 @@ export const UserMovements: React.FC<{ {/* TAB TRANSACTIONS CONTENT */} - {transfers && transfers.length > 0 ? ( + {currentTransfers && currentTransfers.length > 0 ? ( - {transfers && - transfers + {currentTransfers && + currentTransfers .slice(showActivity ? offset : 0, showActivity ? offset + count : count) .map((transfer, i) => )} {showActivity ? ( diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx index 7397dbe1..b7f07d11 100644 --- a/src/modules/lite/explorer/components/ProposalTableRow.tsx +++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx @@ -32,6 +32,10 @@ const DescriptionText = styled(Typography)(({ theme }) => ({ width: "inherit", color: "#BFC5CA", wordBreak: "break-word", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + maxWidth: "100%", + overflow: "hidden", [theme.breakpoints.down("sm")]: { fontSize: 16 }