filters working

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<Props> = ({ open, handleClose, saveFilters }) => {
-  const [token, setToken] = useState<string | null>("")
-  const [receiver, setReceiver] = useState<string | null>("")
-  const [sender, setSender] = useState<string | null>("")
+  const [token, setToken] = useState<string>("")
+  const [receiver, setReceiver] = useState<string>("")
+  const [sender, setSender] = useState<string>("")
   const [status, setStatus] = useState<StatusOption[]>([])
-  const [filters, setFilters] = useState<StatusOption>()
+  const [filter, setFilter] = useState<StatusOption>()
 
   const findStatus = () => {
     const values = Object.values(TrxStatus)
@@ -114,26 +111,34 @@ export const FilterUserTransactionsDialog: React.FC<Props> = ({ 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 (
     <>
       <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
         <Container container direction="column">
           <Grid item>
-            <SectionTitle color="textPrimary">Transaction Status</SectionTitle>
+            <SectionTitle color="textPrimary">Transaction Type</SectionTitle>
           </Grid>
           <Grid item container direction="row">
             {status.length > 0 &&

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"
   }
 })
 

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 */}
           <TabPanel value={selectedTab} index={2}>
-            {transfers && transfers.length > 0 ? (
+            {currentTransfers && currentTransfers.length > 0 ? (
               <Grid container item style={{ marginTop: 24, gap: 16 }}>
-                {transfers &&
-                  transfers
+                {currentTransfers &&
+                  currentTransfers
                     .slice(showActivity ? offset : 0, showActivity ? offset + count : count)
                     .map((transfer, i) => <TransactionItem key={i} item={transfer}></TransactionItem>)}
                 {showActivity ? (

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
   }