From 396b2db14d848106dbc49c51d758f8ffeb109072 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sun, 25 Feb 2024 18:44:16 +0100
Subject: [PATCH 01/11] layout

---
 src/modules/explorer/components/Dropdown.tsx  |  21 +++-
 .../explorer/components/FiltersDialog.tsx     | 101 ++++++++++++++++++
 .../components/ProposalActionsDialog.tsx      |   1 -
 .../explorer/components/ResponsiveDialog.tsx  |   6 +-
 .../explorer/pages/Proposals/index.tsx        |  26 +++++
 5 files changed, 147 insertions(+), 8 deletions(-)
 create mode 100644 src/modules/explorer/components/FiltersDialog.tsx

diff --git a/src/modules/explorer/components/Dropdown.tsx b/src/modules/explorer/components/Dropdown.tsx
index 856209f6..e40b7cd5 100644
--- a/src/modules/explorer/components/Dropdown.tsx
+++ b/src/modules/explorer/components/Dropdown.tsx
@@ -5,6 +5,7 @@ interface DropdownProps extends SelectProps {
   value?: string | undefined
   onSelected?: (item: string | undefined) => void
   isFirst?: boolean
+  isFilter?: boolean
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -24,17 +25,29 @@ const useStyles = makeStyles((theme: Theme) => ({
     minHeight: 24
   },
   option: {
-    "padding": 8,
+    "padding": 12,
     "fontFamily": "Roboto Flex",
     "cursor": "pointer",
     "text-transform": "capitalize",
     "&:hover": {
       background: "rgba(129, 254, 183, .4)"
     }
+  },
+  selectFilter: {
+    "backgroundColor": "#2F3438",
+    "padding": 12,
+    "borderRadius": 8,
+    "paddingRight": "36px !important",
+    "&:focus": {
+      backgroundColor: "#2F3438",
+      padding: 12,
+      borderRadius: 8,
+      paddingRight: 36
+    }
   }
 }))
 
-export const Dropdown: React.FC<DropdownProps> = ({ options, value, onSelected }) => {
+export const Dropdown: React.FC<DropdownProps> = ({ options, value, onSelected, isFilter = false }) => {
   const classes = useStyles()
   const [selected, setSelected] = useState<string | undefined>(value)
 
@@ -49,11 +62,11 @@ export const Dropdown: React.FC<DropdownProps> = ({ options, value, onSelected }
 
   return (
     <Select
-      // native
+      disableUnderline={true}
       value={selected}
       onChange={handleSelected}
       classes={{
-        select: classes.selectSelect
+        select: isFilter ? classes.selectFilter : classes.selectSelect
       }}
     >
       {options.map(({ name, value }, index) => (
diff --git a/src/modules/explorer/components/FiltersDialog.tsx b/src/modules/explorer/components/FiltersDialog.tsx
new file mode 100644
index 00000000..da0c33d1
--- /dev/null
+++ b/src/modules/explorer/components/FiltersDialog.tsx
@@ -0,0 +1,101 @@
+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"
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+}
+
+const SectionTitle = styled(Typography)({
+  fontSize: "18px !important",
+  fontWeight: 600
+})
+
+const Container = styled(Grid)({
+  marginTop: 6,
+  gap: 24
+})
+
+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)"
+  }
+}))
+
+export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) => {
+  const [filters, setFilters] = useState<string[]>([])
+  const [status, setStatus] = useState<any[]>([])
+
+  const filterProposalByPopularity = (status: string | undefined) => {
+    if (status) {
+      setFilters([...status])
+    }
+  }
+
+  const findStatus = () => {
+    const values = Object.values(ProposalStatus)
+    for (const item in values) {
+      setStatus(oldArray => [...oldArray, values[item]])
+    }
+  }
+
+  useEffect(() => {
+    setStatus([])
+    findStatus()
+  }, [])
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Sort By</SectionTitle>
+          </Grid>
+          <Grid item>
+            <Dropdown
+              options={[
+                { name: "Newest to Oldest", value: "recent" },
+                { name: "Most Popular to Least Popular", value: "popular" }
+              ]}
+              value={"recent"}
+              onSelected={filterProposalByPopularity}
+              isFilter={true}
+            />
+          </Grid>
+        </Container>
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Proposal Status</SectionTitle>
+          </Grid>
+          <Grid item container direction="row">
+            {status.length > 0 &&
+              status.map((item, index) => {
+                return (
+                  <StatusButton item key={`status-${index}`}>
+                    <Typography>{item}</Typography>
+                  </StatusButton>
+                )
+              })}
+          </Grid>
+        </Container>
+        <Container container direction="row" justifyContent="flex-end">
+          <SmallButton color="secondary" variant="contained">
+            Apply
+          </SmallButton>
+        </Container>
+      </ResponsiveDialog>
+    </>
+  )
+}
diff --git a/src/modules/explorer/components/ProposalActionsDialog.tsx b/src/modules/explorer/components/ProposalActionsDialog.tsx
index 2e581302..ff6b6bcd 100644
--- a/src/modules/explorer/components/ProposalActionsDialog.tsx
+++ b/src/modules/explorer/components/ProposalActionsDialog.tsx
@@ -5,7 +5,6 @@ import { TreasuryProposalFormValues } from "modules/explorer/components/NewTreas
 import React, { useState } from "react"
 import { NFTTransferFormValues } from "./NFTTransfer"
 import { useDAOID } from "../pages/DAO/router"
-import { ProposalFormContainer } from "./ProposalForm"
 import { ConfigProposalForm } from "./ConfigProposalForm"
 import { ResponsiveDialog } from "./ResponsiveDialog"
 import { GuardianChangeProposalForm } from "./GuardianChangeProposalForm"
diff --git a/src/modules/explorer/components/ResponsiveDialog.tsx b/src/modules/explorer/components/ResponsiveDialog.tsx
index 18b83550..233230cb 100644
--- a/src/modules/explorer/components/ResponsiveDialog.tsx
+++ b/src/modules/explorer/components/ResponsiveDialog.tsx
@@ -10,12 +10,12 @@ const Content = styled(Grid)({
 
 const TitleText = styled(Typography)(({ theme }) => ({
   color: "#ffff",
-  fontWeight: 550,
+  fontWeight: 600,
   lineHeight: ".80",
   textTransform: "capitalize",
-  fontSize: 20,
+  fontSize: 24,
   [theme.breakpoints.down("sm")]: {
-    fontSize: 18
+    fontSize: 20
   }
 }))
 
diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
index 1ba71a59..847e6d07 100644
--- a/src/modules/explorer/pages/Proposals/index.tsx
+++ b/src/modules/explorer/pages/Proposals/index.tsx
@@ -21,6 +21,14 @@ import { useDropAllExpired } from "services/contracts/baseDAO/hooks/useDropAllEx
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import NewReleasesIcon from "@mui/icons-material/NewReleases"
 import DeleteIcon from "@mui/icons-material/Delete"
+import FilterAltIcon from "@mui/icons-material/FilterAlt"
+import { FilterProposalsDialog } from "modules/explorer/components/FiltersDialog"
+
+const FiltersContainer = styled(Grid)({
+  marginTop: 45,
+  gap: 8,
+  cursor: "pointer"
+})
 
 const TabsContainer = styled(Grid)({
   borderRadius: 8,
@@ -103,6 +111,7 @@ export const Proposals: React.FC = () => {
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const [openDialog, setOpenDialog] = useState(false)
+  const [openFiltersDialog, setOpenFiltersDialog] = useState(false)
 
   const { mutate } = useFlush()
   const { mutate: dropAllExpired } = useDropAllExpired()
@@ -113,6 +122,10 @@ export const Proposals: React.FC = () => {
     setOpenDialog(false)
   }
 
+  const handleCloseFiltersModal = () => {
+    setOpenFiltersDialog(false)
+  }
+
   const onFlush = useCallback(async () => {
     if (executableProposals && expiredProposals && executableProposals.length && data) {
       mutate({
@@ -233,6 +246,18 @@ export const Proposals: React.FC = () => {
             </TabsContainer>
           </Grid>
 
+          <FiltersContainer
+            onClick={() => setOpenFiltersDialog(true)}
+            xs={isMobileSmall ? 12 : 2}
+            item
+            container
+            direction="row"
+            alignItems="center"
+          >
+            <FilterAltIcon color="secondary" fontSize="small" />
+            <Typography color="secondary">Filter & Sort</Typography>
+          </FiltersContainer>
+
           <TabPanel value={selectedTab} index={0}>
             <Grid item xs={12} style={{ marginTop: 38, gap: 16 }}>
               {proposals && cycleInfo && (
@@ -279,6 +304,7 @@ export const Proposals: React.FC = () => {
         </TabsBox>
 
         <ProposalActionsDialog open={openDialog} handleClose={handleCloseModal} />
+        <FilterProposalsDialog open={openFiltersDialog} handleClose={handleCloseFiltersModal} />
       </Grid>
     </>
   )

From 1f1cd0705e37b9628cd69013ff95038fbc4d3597 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sun, 3 Mar 2024 22:32:03 +0100
Subject: [PATCH 02/11] selected filters logic

---
 .../explorer/components/FiltersDialog.tsx     | 53 +++++++++++++++----
 .../explorer/pages/Proposals/index.tsx        |  2 +-
 src/theme/index.ts                            |  3 ++
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/modules/explorer/components/FiltersDialog.tsx b/src/modules/explorer/components/FiltersDialog.tsx
index da0c33d1..6a51a4bd 100644
--- a/src/modules/explorer/components/FiltersDialog.tsx
+++ b/src/modules/explorer/components/FiltersDialog.tsx
@@ -34,20 +34,49 @@ const StatusButton = styled(Grid)(({ theme }) => ({
   }
 }))
 
+interface StatusOption {
+  label: string
+  selected: boolean
+}
+
 export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) => {
-  const [filters, setFilters] = useState<string[]>([])
-  const [status, setStatus] = useState<any[]>([])
+  const [filters, setFilters] = useState<StatusOption[]>([])
+  const [status, setStatus] = useState<StatusOption[]>([])
 
-  const filterProposalByPopularity = (status: string | undefined) => {
-    if (status) {
-      setFilters([...status])
+  // const filterProposalByPopularity = (status: string | undefined) => {
+  //   if (status) {
+  //     setFilters([...status])
+  //   }
+  // }
+
+  const isSelected = (item: StatusOption) => {
+    return filters.includes(item) ? true : false
+  }
+
+  const saveStatus = (status: StatusOption) => {
+    let updated: StatusOption[] = []
+    if (filters.includes(status)) {
+      status.selected = false
+      updated = filters.filter(item => item.label !== status.label)
+    } else {
+      updated = filters.slice()
+      updated.push(status)
     }
+    setFilters(updated)
+  }
+
+  const showFilters = () => {
+    console.log(filters)
   }
 
   const findStatus = () => {
     const values = Object.values(ProposalStatus)
     for (const item in values) {
-      setStatus(oldArray => [...oldArray, values[item]])
+      const obj = {
+        label: values[item],
+        selected: false
+      }
+      setStatus(oldArray => [...oldArray, obj])
     }
   }
 
@@ -70,7 +99,7 @@ export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) =>
                 { name: "Most Popular to Least Popular", value: "popular" }
               ]}
               value={"recent"}
-              onSelected={filterProposalByPopularity}
+              // onSelected={filterProposalByPopularity}
               isFilter={true}
             />
           </Grid>
@@ -83,15 +112,19 @@ export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) =>
             {status.length > 0 &&
               status.map((item, index) => {
                 return (
-                  <StatusButton item key={`status-${index}`}>
-                    <Typography>{item}</Typography>
+                  <StatusButton
+                    item
+                    key={`status-${index}`}
+                    style={isSelected(item) ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+                  >
+                    <Typography onClick={() => saveStatus(item)}>{item.label}</Typography>
                   </StatusButton>
                 )
               })}
           </Grid>
         </Container>
         <Container container direction="row" justifyContent="flex-end">
-          <SmallButton color="secondary" variant="contained">
+          <SmallButton color="secondary" variant="contained" onClick={showFilters}>
             Apply
           </SmallButton>
         </Container>
diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
index 847e6d07..8b0cb9af 100644
--- a/src/modules/explorer/pages/Proposals/index.tsx
+++ b/src/modules/explorer/pages/Proposals/index.tsx
@@ -254,7 +254,7 @@ export const Proposals: React.FC = () => {
             direction="row"
             alignItems="center"
           >
-            <FilterAltIcon color="secondary" fontSize="small" />
+            <FilterAltIcon style={{ color: theme.palette.secondary.main }} fontSize="small" />
             <Typography color="secondary">Filter & Sort</Typography>
           </FiltersContainer>
 
diff --git a/src/theme/index.ts b/src/theme/index.ts
index a6ee7f74..29e8e544 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -88,6 +88,9 @@ export const theme = createTheme({
   },
   overrides: {
     MuiSvgIcon: {
+      root: {
+        color: "#fff"
+      },
       colorSecondary: {
         color: "#81FEB7 !important"
       }

From 02de3a8c87e7a40994a328e1d13a53c64e7d6c85 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sat, 30 Mar 2024 22:13:49 +0100
Subject: [PATCH 03/11] user tab - activity section new layout

---
 src/models/Polls.ts                           |   2 +
 .../explorer/components/ProposalsList.tsx     | 108 ++--
 .../explorer/components/StatusBadge.tsx       |  31 +-
 .../pages/User/components/TransactionItem.tsx |  32 +-
 .../pages/User/components/UserMovements.tsx   | 573 +++++-------------
 src/modules/explorer/pages/User/index.tsx     |  10 +-
 .../explorer/components/ProposalTableRow.tsx  |   2 +-
 7 files changed, 266 insertions(+), 492 deletions(-)

diff --git a/src/models/Polls.ts b/src/models/Polls.ts
index 0d16afa8..800ca70f 100644
--- a/src/models/Polls.ts
+++ b/src/models/Polls.ts
@@ -25,6 +25,8 @@ export interface Poll {
   endTimeHours?: number | null
   endTimeDays?: number | null
   isXTZ: boolean
+  id?: string
+  getStatus?: any
 }
 
 export interface Vote {
diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index d0b72119..9805a93d 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -1,6 +1,6 @@
+import React, { useState } from "react"
 import { Collapse, Grid, styled, Typography } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
-import React, { useState } from "react"
 import { Link } from "react-router-dom"
 import { Proposal } from "services/services/dao/mappers/proposal/types"
 import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTableRow"
@@ -30,6 +30,7 @@ interface Props {
   rightItem?: (proposal: Proposal) => React.ReactElement
   liteProposals: Poll[] | undefined
   proposalStyle?: any
+  showFullList?: boolean
 }
 
 export const ProposalsList: React.FC<Props> = ({
@@ -38,27 +39,37 @@ export const ProposalsList: React.FC<Props> = ({
   showFooter,
   rightItem,
   liteProposals,
-  proposalStyle
+  proposalStyle,
+  showFullList = true
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
   const [open, setopen] = useState(true)
 
-  const pageCount = Math.ceil(
-    proposals && liteProposals
-      ? proposals.length + liteProposals.length / 4
-      : proposals && liteProposals?.length === undefined
-      ? proposals.length / 4
-      : proposals?.length === undefined && liteProposals
-      ? liteProposals.length / 4
-      : 0
-  )
+  const proposalList: { type: string; proposal: Proposal | Poll }[] = []
+  proposals?.map(proposal => {
+    const item = {
+      type: "lambda",
+      proposal: proposal
+    }
+    proposalList.push(item)
+    return
+  })
+  liteProposals?.map(proposal => {
+    const item = {
+      type: "lite",
+      proposal: proposal
+    }
+    proposalList.push(item)
+    return
+  })
+
+  const pageCount = Math.ceil(proposalList ? proposalList.length / 4 : 0)
 
   // Invoke when user click to request another page.
   const handlePageClick = (event: { selected: number }) => {
-    if (proposals) {
-      const newOffset = (event.selected * 4) % proposals.length
-      setOffset(newOffset)
+    if (proposalList) {
+      setOffset((event.selected * 4) % proposalList.length)
       setCurrentPage(event.selected)
     }
   }
@@ -66,7 +77,7 @@ export const ProposalsList: React.FC<Props> = ({
   return (
     <TableContainer item>
       <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
-        {proposals && proposals.length && proposals.length > 0 ? (
+        {proposalList && proposalList.length && proposalList.length > 0 ? (
           <Grid
             item
             container
@@ -75,43 +86,28 @@ export const ProposalsList: React.FC<Props> = ({
             in={open}
             timeout="auto"
             unmountOnExit
-            // style={{ display: "block" }}
             direction="column"
           >
-            {proposals.slice(offset, offset + 4).map((p, i) => (
-              <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
-                <Link to={`proposal/${p.id}`}>
-                  <ProposalItem proposal={p} status={p.getStatus(currentLevel).status}>
-                    {rightItem ? rightItem(p) : null}
-                  </ProposalItem>
-                </Link>
-              </CustomGrid>
-            ))}
-          </Grid>
-        ) : null}
-        {liteProposals && liteProposals.length > 0
-          ? liteProposals.slice(offset, offset + 4).map((poll, i) => {
-              return (
-                <div style={{ width: "inherit" }} key={`poll-${i}`}>
-                  <ProposalTableRow poll={poll} />
+            {proposalList.slice(offset, offset + 4).map((p, i) =>
+              p.type === "lambda" ? (
+                <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
+                  <Link to={`proposal/${p.proposal.id}`}>
+                    <ProposalItem
+                      proposal={p.proposal}
+                      status={p.proposal.getStatus(currentLevel).status}
+                    ></ProposalItem>
+                  </Link>
+                </CustomGrid>
+              ) : (
+                <div style={{ width: "inherit", marginBottom: 16 }} key={`poll-${i}`}>
+                  <ProposalTableRow poll={p.proposal} />
                 </div>
               )
-            })
-          : null}
-
-        {showFooter && (
-          <ProposalsFooter item container direction="column" justifyContent="center">
-            <Grid item>
-              <Link to="proposals">
-                <Typography color="secondary" variant="body2" align="center">
-                  View All Proposals
-                </Typography>
-              </Link>
-            </Grid>
-          </ProposalsFooter>
-        )}
+            )}
+          </Grid>
+        ) : null}
       </Grid>
-      <Grid container direction="row" justifyContent="flex-end">
+      {/* <Grid container direction="row" justifyContent="flex-end">
         <ReactPaginate
           previousLabel={"<"}
           breakLabel="..."
@@ -124,7 +120,23 @@ export const ProposalsList: React.FC<Props> = ({
           activeClassName={"active"}
           forcePage={currentPage}
         />
-      </Grid>
+      </Grid> */}
+      {showFullList ? (
+        <Grid container direction="row" justifyContent="flex-end">
+          <ReactPaginate
+            previousLabel={"<"}
+            breakLabel="..."
+            nextLabel=">"
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={2}
+            pageCount={pageCount}
+            renderOnZeroPageCount={null}
+            containerClassName={"pagination"}
+            activeClassName={"active"}
+            forcePage={currentPage}
+          />
+        </Grid>
+      ) : null}
     </TableContainer>
   )
 }
diff --git a/src/modules/explorer/components/StatusBadge.tsx b/src/modules/explorer/components/StatusBadge.tsx
index 21e7a58d..f809aa25 100644
--- a/src/modules/explorer/components/StatusBadge.tsx
+++ b/src/modules/explorer/components/StatusBadge.tsx
@@ -68,19 +68,30 @@ export const statusColors = (status: ProposalStatus | "all") => {
 }
 
 export const Badge = styled(Grid)(({ status }: { status: ProposalStatus | "all"; theme: Theme }) => ({
-  borderRadius: 50,
-  textAlign: "center",
-  minHeight: 24,
-  minWidth: 105,
-  padding: "2px 8px",
-  background: statusColors(status).background,
-  color: statusColors(status).color,
-  whiteSpace: "nowrap",
-  fontWeight: 300
+  "borderRadius": 50,
+  "boxSizing": "border-box",
+  "minWidth": 87,
+  "textAlign": "center",
+  "padding": "4px 16px",
+  "background": statusColors(status).background,
+  "color": statusColors(status).color,
+  "& > div": {
+    height: "100%"
+  }
 }))
 
+const Text = styled(Typography)({
+  fontWeight: 500,
+  fontSize: 16,
+  textTransform: "capitalize"
+})
+
 export const StatusBadge: React.FC<{ status: ProposalStatus | "all" } & GridProps> = ({ status, ...props }) => (
   <Badge status={status} {...props}>
-    <Typography color="inherit"> {statusColors(status).text} </Typography>
+    <Grid container alignItems="center" justifyContent="center">
+      <Grid item>
+        <Text> {statusColors(status).text} </Text>
+      </Grid>
+    </Grid>
   </Badge>
 )
diff --git a/src/modules/explorer/pages/User/components/TransactionItem.tsx b/src/modules/explorer/pages/User/components/TransactionItem.tsx
index d9d91833..d0c1db36 100644
--- a/src/modules/explorer/pages/User/components/TransactionItem.tsx
+++ b/src/modules/explorer/pages/User/components/TransactionItem.tsx
@@ -7,6 +7,9 @@ import { toShortAddress } from "services/contracts/utils"
 import dayjs from "dayjs"
 import BigNumber from "bignumber.js"
 import { formatNumber } from "modules/explorer/utils/FormatNumber"
+import { networkNameMap } from "services/bakingBad"
+import { useTezos } from "services/beacon/hooks/useTezos"
+import OpenInNewIcon from "@mui/icons-material/OpenInNew"
 
 const ContentBlockItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
   padding: "37px 42px",
@@ -16,19 +19,38 @@ const ContentBlockItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
 
 const ProposalTitle = styled(Typography)({
   fontWeight: 600,
-  fontSize: 18
+  fontSize: 18,
+  cursor: "default"
 })
 
 const DescriptionText = styled(Typography)({
   color: "#BFC5CA",
   fontSize: 16,
-  fontWeight: 300
+  fontWeight: 300,
+  cursor: "default"
+})
+
+const BlockExplorer = styled(Typography)({
+  "fontSize": 16,
+  "fontWeight": 400,
+  "cursor": "pointer",
+  "display": "flex",
+  "alignItems": "center",
+  "& svg": {
+    fontSize: 16,
+    marginRight: 6
+  }
 })
 
 export const TransactionItem: React.FC<{ item: TransferWithBN }> = ({ item, children }) => {
+  const { network } = useTezos()
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
 
+  const openBlockExplorer = () => {
+    window.open(`https://${networkNameMap[network]}.tzkt.io/` + item.hash, "_blank")
+  }
+
   return (
     <ContentBlockItem container justifyContent="space-between" alignItems="center">
       <Grid
@@ -60,6 +82,12 @@ export const TransactionItem: React.FC<{ item: TransferWithBN }> = ({ item, chil
             {" "}
             {item.type === "Withdrawal" ? "- " : "+ "} {formatNumber(new BigNumber(item.amount))} {item.token?.symbol}
           </DescriptionText>
+          {item.hash ? (
+            <BlockExplorer color="secondary" onClick={openBlockExplorer}>
+              <OpenInNewIcon />
+              View on Block Explorer
+            </BlockExplorer>
+          ) : null}
         </Grid>
       </Grid>
       <Grid item>{children}</Grid>
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 8cb6a02e..0c3138b6 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react"
-import { Button, Grid, Theme, Typography, styled } from "@material-ui/core"
+import { Button, Grid, Theme, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core"
 import { ReactComponent as VotingInactiveIcon } from "assets/logos/voting_inactive.svg"
 import { ReactComponent as VotingActiveIcon } from "assets/logos/voting_active.svg"
 import { ReactComponent as VotesActiveIcon } from "assets/logos/votes_active.svg"
@@ -16,6 +16,8 @@ import { TransactionItem } from "./TransactionItem"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import ReactPaginate from "react-paginate"
 import "../../DAOList/styles.css"
+import { ReactComponent as TabsSelectedIcon } from "assets/img/tabs-icon-selected.svg"
+import FilterAltIcon from "@mui/icons-material/FilterAlt"
 
 const TabsContainer = styled(Grid)(({ theme }) => ({
   borderRadius: 8,
@@ -32,30 +34,30 @@ const TransactionsFooter = styled(Grid)({
   minHeight: 34
 })
 
-const VotedText = styled(Typography)({
-  fontSize: 18
+const TitleText = styled(Typography)({
+  fontWeight: 600,
+  fontSize: 24
 })
 
-const StatusText = styled(Typography)({
-  textTransform: "uppercase",
-  marginLeft: 10,
+const SubtitleText = styled(Typography)(({ theme }) => ({
+  fontWeight: 300,
   fontSize: 18,
-  marginRight: 30
-})
+  color: theme.palette.primary.light
+}))
 
 const StyledTab = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({
   "fontSize": 18,
   "height": 40,
-  "fontWeight": 400,
+  "fontWeight": 600,
   "paddingLeft": 20,
   "paddingRight": 20,
   "paddingTop": 0,
   "paddingBottom": 0,
   "borderRadius": 8,
   "color": isSelected ? theme.palette.secondary.main : "#fff",
-  "backgroundColor": isSelected ? "#24282D" : "inherit",
+  "backgroundColor": isSelected ? "#2B3036" : "inherit",
   "&:hover": {
-    backgroundColor: isSelected ? "#24282D" : theme.palette.secondary.dark,
+    backgroundColor: isSelected ? "#2B3036" : theme.palette.secondary.dark,
     borderRadius: 8,
     borderTopLeftRadius: "8px !important",
     borderTopRightRadius: "8px !important",
@@ -64,24 +66,23 @@ const StyledTab = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelec
   }
 }))
 
-const StyledTabInner = styled(Button)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({
-  "fontSize": 16,
-  "height": 32,
-  "fontWeight": 500,
-  "paddingLeft": 20,
-  "paddingRight": 20,
-  "paddingTop": 0,
-  "paddingBottom": 0,
-  "borderRadius": 50,
-  "color": isSelected ? theme.palette.secondary.main : "#bfc5ca",
-  "backgroundColor": isSelected ? "#24282D" : "#2F3438",
-  "&:hover": {
-    backgroundColor: isSelected ? "#24282D" : theme.palette.secondary.dark,
-    borderRadius: 50,
-    borderTopLeftRadius: "50px !important",
-    borderTopRightRadius: "50px !important",
-    borderBottomLeftRadius: "50px !important",
-    borderBottomRightRadius: "50px !important"
+const ActivityContainer = styled(Grid)(({ theme }) => ({
+  background: theme.palette.primary.contrastText,
+  padding: "40px 56px",
+  borderRadius: 8,
+  marginTop: 32,
+  [theme.breakpoints.down("sm")]: {
+    padding: "30px 36px"
+  }
+}))
+
+const ViewAll = styled(Grid)(({ theme }) => ({
+  "cursor": "pointer",
+  "width": "fit-content",
+  "marginTop": 45,
+  "& svg": {
+    marginRight: 10,
+    color: theme.palette.secondary.main
   }
 }))
 
@@ -92,14 +93,13 @@ export const UserMovements: React.FC<{
   pollsPosted: Poll[] | undefined
   proposalsVoted: Proposal[] | undefined
   pollsVoted: any
-  getVoteDecision: (proposal: any) => boolean
-}> = ({ proposalsCreated, cycleInfo, pollsPosted, proposalsVoted, getVoteDecision, daoId, pollsVoted }) => {
+}> = ({ proposalsCreated, cycleInfo, pollsPosted, proposalsVoted, daoId, pollsVoted }) => {
   const [selectedTab, setSelectedTab] = React.useState(0)
-  const [selectedTabProposals, setSelectedTabProposals] = React.useState(0)
-  const [selectedTabVotes, setSelectedTabVotes] = React.useState(0)
-  const [selectedTabTransactions, setSelectedTabTransactions] = React.useState(0)
   const [filteredTransactions, setFilteredTransactions] = React.useState<TransferWithBN[] | undefined>()
+  const [showFullList, setShowFullList] = useState(false)
   const { account } = useTezos()
+  const theme = useTheme()
+  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
 
   const useUserTransfers = (): TransferWithBN[] | undefined => {
     const { data: transfers } = useTransfers(daoId)
@@ -112,14 +112,9 @@ export const UserMovements: React.FC<{
 
   const transfers = useUserTransfers()
 
-  useEffect(() => {
-    setFilteredTransactions(transfers)
-    setPageCount(Math.ceil(transfers ? transfers.length / 2 : 0))
-  }, [transfers])
-
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
-  const count = Math.ceil(transfers ? transfers.length / 2 : 0)
+  const count = 4
 
   const [pageCount, setPageCount] = React.useState(count)
 
@@ -127,36 +122,33 @@ export const UserMovements: React.FC<{
     setSelectedTab(newValue)
   }
 
-  const handleChangeTabProposals = (newValue: number) => {
-    setSelectedTabProposals(newValue)
-  }
-
-  const handleChangeTabVotes = (newValue: number) => {
-    setSelectedTabVotes(newValue)
-  }
+  useEffect(() => {
+    setFilteredTransactions(transfers)
+    setPageCount(Math.ceil(transfers ? transfers.length / count : 0))
+  }, [transfers])
 
-  const handleChangeTabTransactions = (newValue: number) => {
-    if (newValue === 0) {
-      setFilteredTransactions(transfers)
-      setPageCount(Math.ceil(transfers ? transfers.length / 2 : 0))
-    }
-    if (newValue === 1) {
-      const newArray = transfers?.filter(item => item.type === "Withdrawal")
-      setFilteredTransactions(newArray)
-      setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
-    }
-    if (newValue === 2) {
-      const newArray = transfers?.filter(item => item.type === "Deposit")
-      setFilteredTransactions(newArray)
-      setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
-    }
-    setSelectedTabTransactions(newValue)
-  }
+  // const handleChangeTabTransactions = (newValue: number) => {
+  //   if (newValue === 0) {
+  //     setFilteredTransactions(transfers)
+  //     setPageCount(Math.ceil(transfers ? transfers.length / 2 : 0))
+  //   }
+  //   if (newValue === 1) {
+  //     const newArray = transfers?.filter(item => item.type === "Withdrawal")
+  //     setFilteredTransactions(newArray)
+  //     setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
+  //   }
+  //   if (newValue === 2) {
+  //     const newArray = transfers?.filter(item => item.type === "Deposit")
+  //     setFilteredTransactions(newArray)
+  //     setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
+  //   }
+  //   setSelectedTabTransactions(newValue)
+  // }
 
   // Invoke when user click to request another page.
   const handlePageClick = (event: { selected: number }) => {
     if (transfers) {
-      const newOffset = (event.selected * 2) % (filteredTransactions ? filteredTransactions.length : 1)
+      const newOffset = (event.selected * count) % (filteredTransactions ? filteredTransactions.length : 1)
       setOffset(newOffset)
       setCurrentPage(event.selected)
     }
@@ -164,94 +156,81 @@ export const UserMovements: React.FC<{
 
   return (
     <Grid item>
-      <Grid container style={{ marginTop: 8 }}>
+      <Grid container direction="column">
         <Grid item>
-          <TabsContainer container>
-            <Grid item>
-              <StyledTab
-                startIcon={selectedTab === 0 ? <VotingActiveIcon /> : <VotingInactiveIcon />}
-                variant="contained"
-                disableElevation={true}
-                onClick={() => handleChangeTab(0)}
-                isSelected={selectedTab === 0}
-              >
-                Proposals
-              </StyledTab>
-            </Grid>
-            <Grid item>
-              <StyledTab
-                startIcon={selectedTab === 1 ? <VotesActiveIcon /> : <VotesInactiveIcon />}
-                disableElevation={true}
-                variant="contained"
-                onClick={() => handleChangeTab(1)}
-                isSelected={selectedTab === 1}
-              >
-                Votes
-              </StyledTab>
-            </Grid>
-
-            <Grid item>
-              <StyledTab
-                startIcon={selectedTab === 2 ? <TransactionsActiveIcon /> : <TransactionsInactiveIcon />}
-                disableElevation={true}
-                variant="contained"
-                onClick={() => handleChangeTab(2)}
-                isSelected={selectedTab === 2}
-              >
-                Transactions
-              </StyledTab>
-            </Grid>
-          </TabsContainer>
+          <TitleText color="textPrimary">My Activity</TitleText>
+        </Grid>
+        <Grid item>
+          <SubtitleText>View your proposal and transaction activity</SubtitleText>
         </Grid>
       </Grid>
+      <ActivityContainer>
+        <Grid container>
+          <Grid item>
+            <TabsContainer container>
+              <Grid item>
+                <StyledTab
+                  startIcon={selectedTab === 0 ? <VotingActiveIcon /> : <VotingInactiveIcon />}
+                  variant="contained"
+                  disableElevation={true}
+                  onClick={() => handleChangeTab(0)}
+                  isSelected={selectedTab === 0}
+                >
+                  Proposals
+                </StyledTab>
+              </Grid>
+              <Grid item>
+                <StyledTab
+                  startIcon={selectedTab === 1 ? <VotesActiveIcon /> : <VotesInactiveIcon />}
+                  disableElevation={true}
+                  variant="contained"
+                  onClick={() => handleChangeTab(1)}
+                  isSelected={selectedTab === 1}
+                >
+                  Votes
+                </StyledTab>
+              </Grid>
 
-      <Grid item style={{ marginTop: 38 }}>
-        <TabPanel value={selectedTab} index={0}>
-          <Grid container>
-            <Grid item>
-              <TabsContainer container>
-                <Grid item>
-                  <StyledTabInner
-                    variant="contained"
-                    disableElevation={true}
-                    onClick={() => handleChangeTabProposals(0)}
-                    isSelected={selectedTabProposals === 0}
-                  >
-                    All
-                  </StyledTabInner>
-                </Grid>
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabProposals(1)}
-                    isSelected={selectedTabProposals === 1}
-                  >
-                    On-Chain
-                  </StyledTabInner>
-                </Grid>
+              <Grid item>
+                <StyledTab
+                  startIcon={selectedTab === 2 ? <TransactionsActiveIcon /> : <TransactionsInactiveIcon />}
+                  disableElevation={true}
+                  variant="contained"
+                  onClick={() => handleChangeTab(2)}
+                  isSelected={selectedTab === 2}
+                >
+                  Transactions
+                </StyledTab>
+              </Grid>
+            </TabsContainer>
+          </Grid>
+        </Grid>
 
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabProposals(2)}
-                    isSelected={selectedTabProposals === 2}
-                  >
-                    Off-Chain
-                  </StyledTabInner>
-                </Grid>
-              </TabsContainer>
+        {!showFullList ? (
+          <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setShowFullList(true)}>
+            <Grid item container direction="row" alignItems="center">
+              <TabsSelectedIcon />
+              <Typography color="secondary">View All</Typography>
             </Grid>
-          </Grid>
+          </ViewAll>
+        ) : (
+          <ViewAll item xs={isMobileSmall ? 12 : 2}>
+            <Grid item container direction="row" alignItems="center">
+              <FilterAltIcon color="secondary" />
+              <Typography color="secondary">Filter & Sort</Typography>
+            </Grid>
+          </ViewAll>
+        )}
 
-          <TabPanel value={selectedTabProposals} index={0}>
+        <Grid item style={{ marginTop: 38 }}>
+          <TabPanel value={selectedTab} index={0}>
             <Grid item style={{ marginTop: 38 }}>
               {proposalsCreated && cycleInfo && (
                 <ProposalsList
                   currentLevel={cycleInfo.currentLevel}
-                  proposals={proposalsCreated}
-                  liteProposals={pollsPosted}
+                  proposals={showFullList ? proposalsCreated : proposalsCreated.slice(0, 2)}
+                  liteProposals={showFullList ? pollsPosted : pollsPosted?.slice(0, 2)}
+                  showFullList={showFullList}
                 />
               )}
               {!(proposalsCreated && proposalsCreated.length > 0) && !(pollsPosted && pollsPosted.length > 0) ? (
@@ -265,102 +244,16 @@ export const UserMovements: React.FC<{
               ) : null}
             </Grid>
           </TabPanel>
-          <TabPanel value={selectedTabProposals} index={1}>
-            <Grid item style={{ marginTop: 38 }}>
-              {proposalsCreated && cycleInfo && (
-                <ProposalsList currentLevel={cycleInfo.currentLevel} proposals={proposalsCreated} liteProposals={[]} />
-              )}
-              {!(proposalsCreated && proposalsCreated.length > 0) ? (
-                <ProposalsFooter item container direction="column" justifyContent="center">
-                  <Grid item>
-                    <Typography color="textPrimary" align="center">
-                      No items
-                    </Typography>
-                  </Grid>
-                </ProposalsFooter>
-              ) : null}
-            </Grid>
-          </TabPanel>
-          <TabPanel value={selectedTabProposals} index={2}>
-            <Grid item style={{ marginTop: 38 }}>
-              {pollsPosted && cycleInfo && (
-                <ProposalsList currentLevel={cycleInfo.currentLevel} proposals={[]} liteProposals={pollsPosted} />
-              )}
-              {!(pollsPosted && pollsPosted.length > 0) ? (
-                <ProposalsFooter item container direction="column" justifyContent="center">
-                  <Grid item>
-                    <Typography color="textPrimary" align="center">
-                      No items
-                    </Typography>
-                  </Grid>
-                </ProposalsFooter>
-              ) : null}
-            </Grid>
-          </TabPanel>
-        </TabPanel>
-
-        {/* TAB VOTES CONTENT */}
-        <TabPanel value={selectedTab} index={1}>
-          <Grid container>
-            <Grid item>
-              <TabsContainer container>
-                <Grid item>
-                  <StyledTabInner
-                    variant="contained"
-                    disableElevation={true}
-                    onClick={() => handleChangeTabVotes(0)}
-                    isSelected={selectedTabVotes === 0}
-                  >
-                    All
-                  </StyledTabInner>
-                </Grid>
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabVotes(1)}
-                    isSelected={selectedTabVotes === 1}
-                  >
-                    On-Chain
-                  </StyledTabInner>
-                </Grid>
-
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabVotes(2)}
-                    isSelected={selectedTabVotes === 2}
-                  >
-                    Off-Chain
-                  </StyledTabInner>
-                </Grid>
-              </TabsContainer>
-            </Grid>
-          </Grid>
 
-          <TabPanel value={selectedTabVotes} index={0}>
+          {/* TAB VOTES CONTENT */}
+          <TabPanel value={selectedTab} index={1}>
             <Grid item style={{ marginTop: 38 }}>
               {proposalsVoted && cycleInfo && (
                 <ProposalsList
                   currentLevel={cycleInfo.currentLevel}
-                  proposals={proposalsVoted}
-                  rightItem={proposal => {
-                    const voteDecision = getVoteDecision(proposal)
-                    return (
-                      <Grid container>
-                        <Grid item>
-                          <VotedText color="textPrimary">Voted</VotedText>
-                        </Grid>
-                        <Grid item>
-                          <StatusText color={voteDecision ? "secondary" : "error"}>
-                            {voteDecision ? "YES" : "NO"}
-                          </StatusText>
-                        </Grid>
-                      </Grid>
-                    )
-                  }}
-                  liteProposals={pollsVoted}
+                  proposals={showFullList ? proposalsVoted : proposalsVoted.slice(0, 2)}
+                  showFullList={showFullList}
+                  liteProposals={showFullList ? pollsVoted : pollsVoted.slice(0, 2)}
                 />
               )}
               {!(proposalsVoted && proposalsVoted.length > 0) && !(pollsVoted && pollsVoted.length > 0) ? (
@@ -374,203 +267,31 @@ export const UserMovements: React.FC<{
               ) : null}
             </Grid>
           </TabPanel>
-          <TabPanel value={selectedTabVotes} index={1}>
-            <Grid item style={{ marginTop: 38 }}>
-              {proposalsVoted && cycleInfo && (
-                <ProposalsList
-                  currentLevel={cycleInfo.currentLevel}
-                  proposals={proposalsVoted}
-                  rightItem={proposal => {
-                    const voteDecision = getVoteDecision(proposal)
-                    return (
-                      <Grid container>
-                        <Grid item>
-                          <VotedText color="textPrimary">Voted</VotedText>
-                        </Grid>
-                        <Grid item>
-                          <StatusText color={voteDecision ? "secondary" : "error"}>
-                            {voteDecision ? "YES" : "NO"}
-                          </StatusText>
-                        </Grid>
-                      </Grid>
-                    )
-                  }}
-                  liteProposals={[]}
-                />
-              )}
-              {!(proposalsVoted && proposalsVoted.length > 0) ? (
-                <ProposalsFooter item container direction="column" justifyContent="center">
-                  <Grid item>
-                    <Typography color="textPrimary" align="center">
-                      No items
-                    </Typography>
-                  </Grid>
-                </ProposalsFooter>
-              ) : null}
-            </Grid>
-          </TabPanel>
-          <TabPanel value={selectedTabVotes} index={2}>
-            <Grid item style={{ marginTop: 38 }}>
-              {pollsPosted && cycleInfo && (
-                <ProposalsList
-                  currentLevel={cycleInfo.currentLevel}
-                  proposals={[]}
-                  rightItem={proposal => {
-                    const voteDecision = getVoteDecision(proposal)
-                    return (
-                      <Grid container>
-                        <Grid item>
-                          <VotedText color="textPrimary">Voted</VotedText>
-                        </Grid>
-                        <Grid item>
-                          <StatusText color={voteDecision ? "secondary" : "error"}>
-                            {voteDecision ? "YES" : "NO"}
-                          </StatusText>
-                        </Grid>
-                      </Grid>
-                    )
-                  }}
-                  liteProposals={pollsVoted}
-                />
-              )}
-              {!(pollsPosted && pollsPosted.length > 0) ? (
-                <ProposalsFooter item container direction="column" justifyContent="center">
-                  <Grid item>
-                    <Typography color="textPrimary" align="center">
-                      No items
-                    </Typography>
-                  </Grid>
-                </ProposalsFooter>
-              ) : null}
-            </Grid>
-          </TabPanel>
-        </TabPanel>
 
-        {/* TAB TRANSACTIONS CONTENT */}
-        <TabPanel value={selectedTab} index={2}>
-          <Grid container>
-            <Grid item>
-              <TabsContainer container>
-                <Grid item>
-                  <StyledTabInner
-                    variant="contained"
-                    disableElevation={true}
-                    onClick={() => handleChangeTabTransactions(0)}
-                    isSelected={selectedTabTransactions === 0}
-                  >
-                    All
-                  </StyledTabInner>
-                </Grid>
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabTransactions(1)}
-                    isSelected={selectedTabTransactions === 1}
-                  >
-                    Withdrawals
-                  </StyledTabInner>
-                </Grid>
-
-                <Grid item>
-                  <StyledTabInner
-                    disableElevation={true}
-                    variant="contained"
-                    onClick={() => handleChangeTabTransactions(2)}
-                    isSelected={selectedTabTransactions === 2}
-                  >
-                    Deposits
-                  </StyledTabInner>
-                </Grid>
-              </TabsContainer>
-            </Grid>
-          </Grid>
-
-          <TabPanel value={selectedTabTransactions} index={0}>
+          {/* TAB TRANSACTIONS CONTENT */}
+          <TabPanel value={selectedTab} index={2}>
             {transfers && transfers.length > 0 ? (
               <Grid container item style={{ marginTop: 38, gap: 16 }}>
                 {transfers &&
                   transfers
-                    .slice(offset, offset + 2)
-                    .map((transfer, i) => <TransactionItem key={i} item={transfer}></TransactionItem>)}
-                <Grid container direction="row" justifyContent="flex-end">
-                  <ReactPaginate
-                    previousLabel={"<"}
-                    breakLabel="..."
-                    nextLabel=">"
-                    onPageChange={handlePageClick}
-                    pageRangeDisplayed={2}
-                    pageCount={pageCount}
-                    renderOnZeroPageCount={null}
-                    containerClassName={"pagination"}
-                    activeClassName={"active"}
-                    forcePage={currentPage}
-                  />
-                </Grid>
-              </Grid>
-            ) : (
-              <TransactionsFooter item container direction="column" justifyContent="center">
-                <Grid item>
-                  <Typography color="textPrimary" align="center">
-                    No items
-                  </Typography>
-                </Grid>
-              </TransactionsFooter>
-            )}
-          </TabPanel>
-          <TabPanel value={selectedTabTransactions} index={1}>
-            {transfers && transfers.length > 0 ? (
-              <Grid container item style={{ marginTop: 38, gap: 16 }}>
-                {filteredTransactions &&
-                  filteredTransactions
-                    .slice(offset, offset + 2)
+                    .slice(showFullList ? offset : 0, showFullList ? offset + count : count)
                     .map((transfer, i) => <TransactionItem key={i} item={transfer}></TransactionItem>)}
-                <Grid container direction="row" justifyContent="flex-end">
-                  <ReactPaginate
-                    previousLabel={"<"}
-                    breakLabel="..."
-                    nextLabel=">"
-                    onPageChange={handlePageClick}
-                    pageRangeDisplayed={2}
-                    pageCount={pageCount}
-                    renderOnZeroPageCount={null}
-                    containerClassName={"pagination"}
-                    activeClassName={"active"}
-                    forcePage={currentPage}
-                  />
-                </Grid>
-              </Grid>
-            ) : (
-              <TransactionsFooter item container direction="column" justifyContent="center">
-                <Grid item>
-                  <Typography color="textPrimary" align="center">
-                    No items
-                  </Typography>
-                </Grid>
-              </TransactionsFooter>
-            )}
-          </TabPanel>
-          <TabPanel value={selectedTabTransactions} index={2}>
-            {transfers && transfers.length > 0 ? (
-              <Grid container item style={{ marginTop: 38, gap: 16 }}>
-                {filteredTransactions &&
-                  filteredTransactions
-                    .slice(offset, offset + 2)
-                    .map((transfer, i) => <TransactionItem key={i} item={transfer}></TransactionItem>)}
-                <Grid container direction="row" justifyContent="flex-end">
-                  <ReactPaginate
-                    previousLabel={"<"}
-                    breakLabel="..."
-                    nextLabel=">"
-                    onPageChange={handlePageClick}
-                    pageRangeDisplayed={2}
-                    pageCount={pageCount}
-                    renderOnZeroPageCount={null}
-                    containerClassName={"pagination"}
-                    activeClassName={"active"}
-                    forcePage={currentPage}
-                  />
-                </Grid>
+                {showFullList ? (
+                  <Grid container direction="row" justifyContent="flex-end">
+                    <ReactPaginate
+                      previousLabel={"<"}
+                      breakLabel="..."
+                      nextLabel=">"
+                      onPageChange={handlePageClick}
+                      pageRangeDisplayed={2}
+                      pageCount={pageCount}
+                      renderOnZeroPageCount={null}
+                      containerClassName={"pagination"}
+                      activeClassName={"active"}
+                      forcePage={currentPage}
+                    />
+                  </Grid>
+                ) : null}
               </Grid>
             ) : (
               <TransactionsFooter item container direction="column" justifyContent="center">
@@ -582,8 +303,8 @@ export const UserMovements: React.FC<{
               </TransactionsFooter>
             )}
           </TabPanel>
-        </TabPanel>
-      </Grid>
+        </Grid>
+      </ActivityContainer>
     </Grid>
   )
 }
diff --git a/src/modules/explorer/pages/User/index.tsx b/src/modules/explorer/pages/User/index.tsx
index 66355671..628bdc46 100644
--- a/src/modules/explorer/pages/User/index.tsx
+++ b/src/modules/explorer/pages/User/index.tsx
@@ -18,10 +18,10 @@ import { UserProfileName } from "../../components/UserProfileName"
 import { usePolls } from "modules/lite/explorer/hooks/usePolls"
 import { Delegation } from "./components/DelegationBanner"
 import { useTokenDelegationSupported } from "services/contracts/token/hooks/useTokenDelegationSupported"
-import { CopyButton } from "modules/common/CopyButton"
 import { UserMovements } from "./components/UserMovements"
 import { useUserVotes } from "modules/lite/explorer/hooks/useUserVotes"
 import { Poll } from "models/Polls"
+import { CopyButton } from "modules/explorer/components/CopyButton"
 
 const ContentBlockItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
   padding: "37px 42px",
@@ -47,7 +47,8 @@ const MainContainer = styled(Box)({
 const UsernameText = styled(Typography)({
   fontSize: 18,
   wordBreak: "break-all",
-  marginLeft: 10
+  marginLeft: 10,
+  marginRight: 10
 })
 
 const ProposalTitle = styled(Typography)({
@@ -65,7 +66,7 @@ const TitleText = styled(Typography)({
 })
 
 export const ProposalItem: React.FC<{
-  proposal: Proposal
+  proposal: Proposal | any
   status: ProposalStatus
 }> = ({ proposal, status, children }) => {
   const { data: agoraPost } = useAgoraTopic(Number(proposal.metadata.agoraPostId))
@@ -82,7 +83,7 @@ export const ProposalItem: React.FC<{
             </ProposalTitle>
           </Grid>
           <Grid item>
-            <Grid container style={{ gap: 20 }} alignItems="center">
+            <Grid container style={{ gap: 16 }} alignItems="center">
               <Grid item>
                 <StatusBadge status={status} />
               </Grid>
@@ -226,7 +227,6 @@ export const User: React.FC = () => {
 
         <UserMovements
           daoId={daoId}
-          getVoteDecision={getVoteDecision}
           proposalsVoted={proposalsVoted}
           cycleInfo={cycleInfo}
           proposalsCreated={proposalsCreated}
diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx
index 8ccbe0b2..27058c4f 100644
--- a/src/modules/lite/explorer/components/ProposalTableRow.tsx
+++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx
@@ -37,7 +37,7 @@ const DescriptionText = styled(Typography)(({ theme }) => ({
   }
 }))
 
-export const ProposalTableRow: React.FC<{ poll: Poll; daoId?: string }> = ({ poll, daoId }) => {
+export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> = ({ poll, daoId }) => {
   const navigate = useHistory()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("xs"))

From b5d5a750f09718d7bba80ab68fab836a26be6204 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sat, 6 Apr 2024 10:38:51 +0200
Subject: [PATCH 04/11] activity logic

---
 .../explorer/components/ProposalsList.tsx     | 18 +---
 .../pages/User/components/UserMovements.tsx   | 88 +++++++++++-------
 src/modules/explorer/pages/User/index.tsx     | 92 ++++++++++++-------
 .../explorer/components/ProposalTableRow.tsx  |  2 +-
 4 files changed, 112 insertions(+), 88 deletions(-)

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index 9805a93d..fc325633 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Collapse, Grid, styled, Typography } from "@material-ui/core"
+import { Collapse, Grid, styled } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
 import { Link } from "react-router-dom"
 import { Proposal } from "services/services/dao/mappers/proposal/types"
@@ -36,8 +36,6 @@ interface Props {
 export const ProposalsList: React.FC<Props> = ({
   currentLevel,
   proposals,
-  showFooter,
-  rightItem,
   liteProposals,
   proposalStyle,
   showFullList = true
@@ -107,20 +105,6 @@ export const ProposalsList: React.FC<Props> = ({
           </Grid>
         ) : null}
       </Grid>
-      {/* <Grid container direction="row" justifyContent="flex-end">
-        <ReactPaginate
-          previousLabel={"<"}
-          breakLabel="..."
-          nextLabel=">"
-          onPageChange={handlePageClick}
-          pageRangeDisplayed={2}
-          pageCount={pageCount}
-          renderOnZeroPageCount={null}
-          containerClassName={"pagination"}
-          activeClassName={"active"}
-          forcePage={currentPage}
-        />
-      </Grid> */}
       {showFullList ? (
         <Grid container direction="row" justifyContent="flex-end">
           <ReactPaginate
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 0c3138b6..269bfa33 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -18,6 +18,7 @@ import ReactPaginate from "react-paginate"
 import "../../DAOList/styles.css"
 import { ReactComponent as TabsSelectedIcon } from "assets/img/tabs-icon-selected.svg"
 import FilterAltIcon from "@mui/icons-material/FilterAlt"
+import { ArrowBackIos } from "@material-ui/icons"
 
 const TabsContainer = styled(Grid)(({ theme }) => ({
   borderRadius: 8,
@@ -79,13 +80,31 @@ const ActivityContainer = styled(Grid)(({ theme }) => ({
 const ViewAll = styled(Grid)(({ theme }) => ({
   "cursor": "pointer",
   "width": "fit-content",
-  "marginTop": 45,
+  "marginTop": 32,
   "& svg": {
     marginRight: 10,
     color: theme.palette.secondary.main
   }
 }))
 
+const BackButtonText = styled(Grid)({
+  alignItems: "baseline",
+  marginBottom: 16,
+  cursor: "pointer"
+})
+
+const BackButtonIcon = styled(ArrowBackIos)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  fontSize: 12,
+  marginRight: 16
+}))
+
+const BackButton = styled(Typography)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  fontSize: 18,
+  fontWeight: 500
+}))
+
 export const UserMovements: React.FC<{
   daoId: string
   proposalsCreated: Proposal[]
@@ -93,10 +112,20 @@ export const UserMovements: React.FC<{
   pollsPosted: Poll[] | undefined
   proposalsVoted: Proposal[] | undefined
   pollsVoted: any
-}> = ({ proposalsCreated, cycleInfo, pollsPosted, proposalsVoted, daoId, pollsVoted }) => {
+  setShowActivity: (arg: boolean) => void
+  showActivity: boolean
+}> = ({
+  proposalsCreated,
+  cycleInfo,
+  pollsPosted,
+  proposalsVoted,
+  daoId,
+  pollsVoted,
+  setShowActivity,
+  showActivity
+}) => {
   const [selectedTab, setSelectedTab] = React.useState(0)
   const [filteredTransactions, setFilteredTransactions] = React.useState<TransferWithBN[] | undefined>()
-  const [showFullList, setShowFullList] = useState(false)
   const { account } = useTezos()
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
@@ -127,24 +156,6 @@ export const UserMovements: React.FC<{
     setPageCount(Math.ceil(transfers ? transfers.length / count : 0))
   }, [transfers])
 
-  // const handleChangeTabTransactions = (newValue: number) => {
-  //   if (newValue === 0) {
-  //     setFilteredTransactions(transfers)
-  //     setPageCount(Math.ceil(transfers ? transfers.length / 2 : 0))
-  //   }
-  //   if (newValue === 1) {
-  //     const newArray = transfers?.filter(item => item.type === "Withdrawal")
-  //     setFilteredTransactions(newArray)
-  //     setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
-  //   }
-  //   if (newValue === 2) {
-  //     const newArray = transfers?.filter(item => item.type === "Deposit")
-  //     setFilteredTransactions(newArray)
-  //     setPageCount(Math.ceil(newArray ? newArray.length / 2 : 1))
-  //   }
-  //   setSelectedTabTransactions(newValue)
-  // }
-
   // Invoke when user click to request another page.
   const handlePageClick = (event: { selected: number }) => {
     if (transfers) {
@@ -156,6 +167,13 @@ export const UserMovements: React.FC<{
 
   return (
     <Grid item>
+      {showActivity ? (
+        <BackButtonText container direction="row" item xs={2} onClick={() => setShowActivity(false)}>
+          <BackButtonIcon />
+          <BackButton>Back</BackButton>
+        </BackButtonText>
+      ) : null}
+
       <Grid container direction="column">
         <Grid item>
           <TitleText color="textPrimary">My Activity</TitleText>
@@ -206,8 +224,8 @@ export const UserMovements: React.FC<{
           </Grid>
         </Grid>
 
-        {!showFullList ? (
-          <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setShowFullList(true)}>
+        {!showActivity ? (
+          <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setShowActivity(true)}>
             <Grid item container direction="row" alignItems="center">
               <TabsSelectedIcon />
               <Typography color="secondary">View All</Typography>
@@ -222,15 +240,15 @@ export const UserMovements: React.FC<{
           </ViewAll>
         )}
 
-        <Grid item style={{ marginTop: 38 }}>
+        <Grid item>
           <TabPanel value={selectedTab} index={0}>
-            <Grid item style={{ marginTop: 38 }}>
+            <Grid item style={{ marginTop: 24 }}>
               {proposalsCreated && cycleInfo && (
                 <ProposalsList
                   currentLevel={cycleInfo.currentLevel}
-                  proposals={showFullList ? proposalsCreated : proposalsCreated.slice(0, 2)}
-                  liteProposals={showFullList ? pollsPosted : pollsPosted?.slice(0, 2)}
-                  showFullList={showFullList}
+                  proposals={showActivity ? proposalsCreated : proposalsCreated.slice(0, 2)}
+                  liteProposals={showActivity ? pollsPosted : pollsPosted?.slice(0, 2)}
+                  showFullList={showActivity}
                 />
               )}
               {!(proposalsCreated && proposalsCreated.length > 0) && !(pollsPosted && pollsPosted.length > 0) ? (
@@ -247,13 +265,13 @@ export const UserMovements: React.FC<{
 
           {/* TAB VOTES CONTENT */}
           <TabPanel value={selectedTab} index={1}>
-            <Grid item style={{ marginTop: 38 }}>
+            <Grid item style={{ marginTop: 24 }}>
               {proposalsVoted && cycleInfo && (
                 <ProposalsList
                   currentLevel={cycleInfo.currentLevel}
-                  proposals={showFullList ? proposalsVoted : proposalsVoted.slice(0, 2)}
-                  showFullList={showFullList}
-                  liteProposals={showFullList ? pollsVoted : pollsVoted.slice(0, 2)}
+                  proposals={showActivity ? proposalsVoted : proposalsVoted.slice(0, 2)}
+                  showFullList={showActivity}
+                  liteProposals={showActivity ? pollsVoted : pollsVoted.slice(0, 2)}
                 />
               )}
               {!(proposalsVoted && proposalsVoted.length > 0) && !(pollsVoted && pollsVoted.length > 0) ? (
@@ -271,12 +289,12 @@ export const UserMovements: React.FC<{
           {/* TAB TRANSACTIONS CONTENT */}
           <TabPanel value={selectedTab} index={2}>
             {transfers && transfers.length > 0 ? (
-              <Grid container item style={{ marginTop: 38, gap: 16 }}>
+              <Grid container item style={{ marginTop: 24, gap: 16 }}>
                 {transfers &&
                   transfers
-                    .slice(showFullList ? offset : 0, showFullList ? offset + count : count)
+                    .slice(showActivity ? offset : 0, showActivity ? offset + count : count)
                     .map((transfer, i) => <TransactionItem key={i} item={transfer}></TransactionItem>)}
-                {showFullList ? (
+                {showActivity ? (
                   <Grid container direction="row" justifyContent="flex-end">
                     <ReactPaginate
                       previousLabel={"<"}
diff --git a/src/modules/explorer/pages/User/index.tsx b/src/modules/explorer/pages/User/index.tsx
index 628bdc46..dd469502 100644
--- a/src/modules/explorer/pages/User/index.tsx
+++ b/src/modules/explorer/pages/User/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Grid, Theme, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core"
 import dayjs from "dayjs"
 import { useDAOID } from "modules/explorer/pages/DAO/router"
-import React, { useCallback, useEffect, useMemo } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { useHistory } from "react-router"
 import { useAgoraTopic } from "services/agora/hooks/useTopic"
 import { useTezos } from "services/beacon/hooks/useTezos"
@@ -116,6 +116,7 @@ export const User: React.FC = () => {
   const { mutate: unstakeFromAllProposals } = useUnstakeFromAllProposals()
   const { data: polls } = usePolls(data?.liteDAOData?._id)
   const pollsPosted: Poll[] | undefined = polls?.filter(p => p.author === account)
+  const [showActivity, setShowActivity] = useState(false)
 
   const { data: userVotes } = useUserVotes()
 
@@ -181,49 +182,68 @@ export const User: React.FC = () => {
   const getVoteDecision = (proposal: Proposal) =>
     proposal.voters.find(voter => voter.address.toLowerCase())?.support as boolean
 
+  const changeState = (value: boolean) => {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+    setShowActivity(value)
+  }
+
   return (
     <MainContainer>
       <Grid container direction="column" style={{ gap: 40 }} wrap={"nowrap"}>
-        <BalancesHeader item style={{ gap: 16 }}>
-          <Grid container direction="row">
-            <TitleText color="textPrimary">My Address</TitleText>
-          </Grid>
-          <Grid container alignItems="center" justifyContent="space-between" style={{ gap: isMobileSmall ? 30 : 20 }}>
-            <Grid item md={6} xs={12}>
-              <Grid container alignItems="center" wrap="nowrap">
-                <Grid item>
-                  <ProfileAvatar size={40} address={account} />
-                </Grid>
-                <Grid item>
-                  <UsernameText color="textPrimary">
-                    <UserProfileName address={account} />
-                  </UsernameText>
-                </Grid>
-                <Grid item>
-                  <CopyButton text={account} />
-                </Grid>
+        {!showActivity ? (
+          <>
+            <BalancesHeader item style={{ gap: 16 }}>
+              <Grid container direction="row">
+                <TitleText color="textPrimary">My Address</TitleText>
               </Grid>
-            </Grid>
-            <Grid item md={5} xs={12}>
-              <Grid container spacing={2} alignItems="center" justifyContent={isMobileSmall ? "center" : "flex-end"}>
-                <Grid item>
-                  <FreezeDialog freeze={true} />
+              <Grid
+                container
+                alignItems="center"
+                justifyContent="space-between"
+                style={{ gap: isMobileSmall ? 30 : 20 }}
+              >
+                <Grid item md={6} xs={12}>
+                  <Grid container alignItems="center" wrap="nowrap">
+                    <Grid item>
+                      <ProfileAvatar size={40} address={account} />
+                    </Grid>
+                    <Grid item>
+                      <UsernameText color="textPrimary">
+                        <UserProfileName address={account} />
+                      </UsernameText>
+                    </Grid>
+                    <Grid item>
+                      <CopyButton text={account} />
+                    </Grid>
+                  </Grid>
                 </Grid>
-                <Grid item>
-                  <FreezeDialog freeze={false} />
+                <Grid item md={5} xs={12}>
+                  <Grid
+                    container
+                    spacing={2}
+                    alignItems="center"
+                    justifyContent={isMobileSmall ? "center" : "flex-end"}
+                  >
+                    <Grid item>
+                      <FreezeDialog freeze={true} />
+                    </Grid>
+                    <Grid item>
+                      <FreezeDialog freeze={false} />
+                    </Grid>
+                  </Grid>
                 </Grid>
               </Grid>
-            </Grid>
-          </Grid>
-        </BalancesHeader>
+            </BalancesHeader>
 
-        <UserBalances
-          daoId={daoId}
-          canUnstakeVotes={canUnstakeVotes || false}
-          onUnstakeFromAllProposals={onUnstakeFromAllProposals}
-        ></UserBalances>
+            <UserBalances
+              daoId={daoId}
+              canUnstakeVotes={canUnstakeVotes || false}
+              onUnstakeFromAllProposals={onUnstakeFromAllProposals}
+            ></UserBalances>
 
-        {isTokenDelegationSupported ? <Delegation daoId={daoId} /> : null}
+            {isTokenDelegationSupported ? <Delegation daoId={daoId} /> : null}
+          </>
+        ) : null}
 
         <UserMovements
           daoId={daoId}
@@ -232,6 +252,8 @@ export const User: React.FC = () => {
           proposalsCreated={proposalsCreated}
           pollsPosted={pollsPosted}
           pollsVoted={votedPolls}
+          setShowActivity={changeState}
+          showActivity={showActivity}
         />
       </Grid>
     </MainContainer>
diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx
index 27058c4f..7397dbe1 100644
--- a/src/modules/lite/explorer/components/ProposalTableRow.tsx
+++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { styled, Grid, Typography, useTheme, useMediaQuery, LinearProgress } from "@material-ui/core"
+import { styled, Grid, Typography, useTheme, useMediaQuery } from "@material-ui/core"
 import { RowContainer } from "./tables/RowContainer"
 import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge"
 import { useHistory } from "react-router"

From 082540e99df112a6340c778a6b5690ab22b46d46 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sat, 6 Apr 2024 11:46:11 +0200
Subject: [PATCH 05/11] filter dialog layout & logic working

---
 .vscode/settings.json                         |   7 +-
 .../explorer/components/FiltersUserDialog.tsx | 228 ++++++++++++++++++
 .../pages/User/components/UserMovements.tsx   |  32 ++-
 3 files changed, 264 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/explorer/components/FiltersUserDialog.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 312efbb2..ce255610 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "svg.preview.background": "black"
-}
\ No newline at end of file
+  "svg.preview.background": "black",
+  "cSpell.words": [
+    "offchain"
+  ]
+}
diff --git a/src/modules/explorer/components/FiltersUserDialog.tsx b/src/modules/explorer/components/FiltersUserDialog.tsx
new file mode 100644
index 00000000..b7966baf
--- /dev/null
+++ b/src/modules/explorer/components/FiltersUserDialog.tsx
@@ -0,0 +1,228 @@
+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 { Filters } from "../pages/User/components/UserMovements"
+
+export enum ProposalType {
+  ON_CHAIN = "on-chain",
+  OFF_CHAIN = "off-chain",
+  ALL = "all"
+}
+
+export enum OffchainStatus {
+  ACTIVE = "active",
+  CLOSED = "closed",
+  ALL = "all"
+}
+
+export enum Order {
+  RECENT = "recent",
+  POPULAR = "popular"
+}
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+  saveFilters: (filters: Filters) => void
+}
+
+const SectionTitle = styled(Typography)({
+  fontSize: "18px !important",
+  fontWeight: 600
+})
+
+const Container = styled(Grid)({
+  marginTop: 6,
+  gap: 24
+})
+
+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)"
+  }
+}))
+
+export interface StatusOption {
+  label: string
+}
+
+export const FilterUserProposalsDialog: React.FC<Props> = ({ open, handleClose, saveFilters }) => {
+  const [filters, setFilters] = useState<StatusOption[]>([])
+  const [onchainStatus, setOnchainStatus] = useState<StatusOption[]>([])
+  const [offchainStatus, setOffchainStatus] = useState<OffchainStatus>(OffchainStatus.ALL)
+  const [proposalType, setProposalType] = useState<ProposalType>(ProposalType.ALL)
+  const [order, setOrder] = useState<Order>(Order.RECENT)
+
+  const filterProposalByPopularity = (status: Order) => {
+    setOrder(status)
+  }
+
+  const isSelected = (item: StatusOption) => {
+    return filters.includes(item) ? true : false
+  }
+
+  const saveStatus = (status: StatusOption) => {
+    let updated: StatusOption[] = []
+    if (filters.includes(status)) {
+      updated = filters.filter(item => item.label !== status.label)
+    } else {
+      updated = filters.slice()
+      updated.push(status)
+    }
+    setFilters(updated)
+  }
+
+  const saveType = (status: ProposalType) => {
+    if (proposalType === status) {
+      setProposalType(ProposalType.ALL)
+    } else {
+      setProposalType(status)
+      setFilters([])
+      setOffchainStatus(OffchainStatus.ALL)
+    }
+  }
+
+  const saveOffchainStatus = (status: OffchainStatus) => {
+    if (offchainStatus === status) {
+      setOffchainStatus(OffchainStatus.ALL)
+    } else {
+      setOffchainStatus(status)
+    }
+  }
+
+  const showFilters = () => {
+    const filterObject: Filters = {
+      type: proposalType,
+      offchainStatus: offchainStatus,
+      onchainStatus: filters,
+      order: order
+    }
+    saveFilters(filterObject)
+    handleClose()
+  }
+
+  const findStatus = () => {
+    const values = Object.values(ProposalStatus)
+    for (const item in values) {
+      const obj = {
+        label: values[item],
+        selected: false
+      }
+      setOnchainStatus(oldArray => [...oldArray, obj])
+    }
+  }
+
+  useEffect(() => {
+    setFilters([])
+    setOnchainStatus([])
+    findStatus()
+    setOffchainStatus(OffchainStatus.ALL)
+  }, [])
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Sort By</SectionTitle>
+          </Grid>
+          <Grid item>
+            <Dropdown
+              options={[
+                { name: "Newest to Oldest", value: "recent" },
+                { name: "Most Popular to Least Popular", value: "popular" }
+              ]}
+              value={"recent"}
+              onSelected={() => filterProposalByPopularity}
+              isFilter={true}
+            />
+          </Grid>
+        </Container>
+        <Container container direction="column">
+          <Grid item>
+            <SectionTitle>Type</SectionTitle>
+          </Grid>
+          <Grid item container direction="row">
+            <StatusButton
+              item
+              onClick={() => saveType(ProposalType.ON_CHAIN)}
+              style={proposalType === ProposalType.ON_CHAIN ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+            >
+              <Typography>On-chain</Typography>
+            </StatusButton>
+            <StatusButton
+              item
+              onClick={() => saveType(ProposalType.OFF_CHAIN)}
+              style={proposalType === ProposalType.OFF_CHAIN ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+            >
+              <Typography>Off-chain</Typography>
+            </StatusButton>
+          </Grid>
+        </Container>
+
+        {proposalType === ProposalType.ON_CHAIN ? (
+          <Container container direction="column">
+            <Grid item>
+              <SectionTitle>On-Chain Proposal Status</SectionTitle>
+            </Grid>
+            <Grid item container direction="row">
+              {onchainStatus.length > 0 &&
+                onchainStatus.map((item, index) => {
+                  return (
+                    <StatusButton
+                      item
+                      key={`status-${index}`}
+                      style={isSelected(item) ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+                    >
+                      <Typography onClick={() => saveStatus(item)}>{item.label}</Typography>
+                    </StatusButton>
+                  )
+                })}
+            </Grid>
+          </Container>
+        ) : null}
+
+        {proposalType === ProposalType.OFF_CHAIN ? (
+          <Container container direction="column">
+            <Grid item>
+              <SectionTitle>Off-Chain Proposal Status</SectionTitle>
+            </Grid>
+            <Grid item container direction="row">
+              <StatusButton
+                item
+                onClick={() => saveOffchainStatus(OffchainStatus.ACTIVE)}
+                style={offchainStatus === OffchainStatus.ACTIVE ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+              >
+                <Typography>Active</Typography>
+              </StatusButton>
+              <StatusButton
+                item
+                onClick={() => saveOffchainStatus(OffchainStatus.CLOSED)}
+                style={offchainStatus === OffchainStatus.CLOSED ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+              >
+                <Typography>Closed</Typography>
+              </StatusButton>
+            </Grid>
+          </Container>
+        ) : null}
+
+        <Container container direction="row" justifyContent="flex-end">
+          <SmallButton color="secondary" variant="contained" onClick={showFilters}>
+            Apply
+          </SmallButton>
+        </Container>
+      </ResponsiveDialog>
+    </>
+  )
+}
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 269bfa33..cb282934 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -19,6 +19,13 @@ import "../../DAOList/styles.css"
 import { ReactComponent as TabsSelectedIcon } from "assets/img/tabs-icon-selected.svg"
 import FilterAltIcon from "@mui/icons-material/FilterAlt"
 import { ArrowBackIos } from "@material-ui/icons"
+import {
+  FilterUserProposalsDialog,
+  OffchainStatus,
+  Order,
+  ProposalType,
+  StatusOption
+} from "modules/explorer/components/FiltersUserDialog"
 
 const TabsContainer = styled(Grid)(({ theme }) => ({
   borderRadius: 8,
@@ -105,6 +112,13 @@ const BackButton = styled(Typography)(({ theme }) => ({
   fontWeight: 500
 }))
 
+export interface Filters {
+  type: ProposalType
+  offchainStatus: OffchainStatus
+  onchainStatus: StatusOption[]
+  order: Order
+}
+
 export const UserMovements: React.FC<{
   daoId: string
   proposalsCreated: Proposal[]
@@ -129,6 +143,8 @@ export const UserMovements: React.FC<{
   const { account } = useTezos()
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
+  const [openFiltersDialog, setOpenFiltersDialog] = useState(false)
+  const [filters, setFilters] = useState<Filters>()
 
   const useUserTransfers = (): TransferWithBN[] | undefined => {
     const { data: transfers } = useTransfers(daoId)
@@ -165,6 +181,15 @@ export const UserMovements: React.FC<{
     }
   }
 
+  const handleCloseFiltersModal = () => {
+    setOpenFiltersDialog(false)
+  }
+
+  const handleFilters = (filters: Filters) => {
+    console.log(filters)
+    setFilters(filters)
+  }
+
   return (
     <Grid item>
       {showActivity ? (
@@ -232,7 +257,7 @@ export const UserMovements: React.FC<{
             </Grid>
           </ViewAll>
         ) : (
-          <ViewAll item xs={isMobileSmall ? 12 : 2}>
+          <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setOpenFiltersDialog(true)}>
             <Grid item container direction="row" alignItems="center">
               <FilterAltIcon color="secondary" />
               <Typography color="secondary">Filter & Sort</Typography>
@@ -323,6 +348,11 @@ export const UserMovements: React.FC<{
           </TabPanel>
         </Grid>
       </ActivityContainer>
+      <FilterUserProposalsDialog
+        open={openFiltersDialog}
+        handleClose={handleCloseFiltersModal}
+        saveFilters={handleFilters}
+      />
     </Grid>
   )
 }

From b88c2029adcd51c09dcfb6bfdfd3f63d2ff16dcd Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sat, 6 Apr 2024 12:36:18 +0200
Subject: [PATCH 06/11] logic

---
 .../explorer/components/ProposalsList.tsx     | 101 +++++++++++++-----
 .../explorer/pages/Proposals/index.tsx        |   4 +-
 .../pages/User/components/UserMovements.tsx   |   3 +-
 3 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index fc325633..c79d8bf8 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { Collapse, Grid, styled } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
 import { Link } from "react-router-dom"
@@ -7,6 +7,8 @@ import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTable
 import { Poll } from "models/Polls"
 import ReactPaginate from "react-paginate"
 import "../pages/DAOList/styles.css"
+import { Filters } from "../pages/User/components/UserMovements"
+import { ProposalType } from "./FiltersUserDialog"
 
 const TableContainer = styled(Grid)({
   width: "100%"
@@ -31,6 +33,12 @@ interface Props {
   liteProposals: Poll[] | undefined
   proposalStyle?: any
   showFullList?: boolean
+  filters: undefined | Filters
+}
+
+interface ProposalObj {
+  type: string
+  proposal: Proposal | Poll
 }
 
 export const ProposalsList: React.FC<Props> = ({
@@ -38,44 +46,89 @@ export const ProposalsList: React.FC<Props> = ({
   proposals,
   liteProposals,
   proposalStyle,
-  showFullList = true
+  showFullList = true,
+  filters = undefined
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
   const [open, setopen] = useState(true)
+  const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
 
-  const proposalList: { type: string; proposal: Proposal | Poll }[] = []
-  proposals?.map(proposal => {
-    const item = {
-      type: "lambda",
-      proposal: proposal
-    }
-    proposalList.push(item)
-    return
-  })
-  liteProposals?.map(proposal => {
-    const item = {
-      type: "lite",
-      proposal: proposal
-    }
-    proposalList.push(item)
-    return
-  })
+  const listOfProposals = useMemo(() => {
+    const proposalList: { type: string; proposal: Proposal | Poll }[] = []
+    proposals?.map(proposal => {
+      const item = {
+        type: "lambda",
+        proposal: proposal
+      }
+      proposalList.push(item)
+      return
+    })
+    liteProposals?.map(proposal => {
+      const item = {
+        type: "lite",
+        proposal: proposal
+      }
+      proposalList.push(item)
+      return
+    })
+    return proposalList
+  }, [liteProposals, proposals])
 
-  const pageCount = Math.ceil(proposalList ? proposalList.length / 4 : 0)
+  const pageCount = Math.ceil(filteredProposals ? filteredProposals.length / 4 : 0)
 
   // Invoke when user click to request another page.
   const handlePageClick = (event: { selected: number }) => {
-    if (proposalList) {
-      setOffset((event.selected * 4) % proposalList.length)
+    if (filteredProposals) {
+      setOffset((event.selected * 4) % filteredProposals.length)
       setCurrentPage(event.selected)
     }
   }
 
+  useEffect(() => {
+    setFilteredProposals(listOfProposals)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const filterByType = useCallback(
+    (type: ProposalType) => {
+      switch (type) {
+        case ProposalType.ALL: {
+          setFilteredProposals(listOfProposals)
+          break
+        }
+        case ProposalType.OFF_CHAIN: {
+          setFilteredProposals(listOfProposals.filter((item: ProposalObj) => item.type === "lite"))
+          break
+        }
+        case ProposalType.ON_CHAIN: {
+          setFilteredProposals(listOfProposals.filter((item: ProposalObj) => item.type === "lambda"))
+          break
+        }
+        default:
+          setFilteredProposals(listOfProposals)
+          break
+      }
+    },
+    [listOfProposals]
+  )
+
+  const applyFilters = useCallback(() => {
+    console.log(filters)
+    if (filters) {
+      filterByType(filters.type)
+      console.log(listOfProposals)
+    }
+  }, [filters, listOfProposals, filterByType])
+
+  useEffect(() => {
+    applyFilters()
+  }, [filters, applyFilters])
+
   return (
     <TableContainer item>
       <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
-        {proposalList && proposalList.length && proposalList.length > 0 ? (
+        {filteredProposals && filteredProposals.length && filteredProposals.length > 0 ? (
           <Grid
             item
             container
@@ -86,7 +139,7 @@ export const ProposalsList: React.FC<Props> = ({
             unmountOnExit
             direction="column"
           >
-            {proposalList.slice(offset, offset + 4).map((p, i) =>
+            {filteredProposals.slice(offset, offset + 4).map((p, i) =>
               p.type === "lambda" ? (
                 <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
                   <Link to={`proposal/${p.proposal.id}`}>
diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
index 8b0cb9af..9a7b37dd 100644
--- a/src/modules/explorer/pages/Proposals/index.tsx
+++ b/src/modules/explorer/pages/Proposals/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react"
-import { Button, Grid, Paper, styled, Theme, Typography, useMediaQuery, useTheme } from "@material-ui/core"
+import { Button, Grid, styled, Theme, Typography, useMediaQuery, useTheme } from "@material-ui/core"
 
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useProposals } from "services/services/dao/hooks/useProposals"
@@ -266,6 +266,7 @@ export const Proposals: React.FC = () => {
                   currentLevel={cycleInfo.currentLevel}
                   proposals={proposals}
                   liteProposals={undefined}
+                  filters={undefined}
                 />
               )}
               {!(proposals && proposals.length > 0) ? (
@@ -288,6 +289,7 @@ export const Proposals: React.FC = () => {
                   currentLevel={cycleInfo.currentLevel}
                   proposals={undefined}
                   liteProposals={polls}
+                  filters={undefined}
                 />
               )}
               {!(polls && polls.length > 0) ? (
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index cb282934..1ed48c19 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -186,7 +186,6 @@ export const UserMovements: React.FC<{
   }
 
   const handleFilters = (filters: Filters) => {
-    console.log(filters)
     setFilters(filters)
   }
 
@@ -274,6 +273,7 @@ export const UserMovements: React.FC<{
                   proposals={showActivity ? proposalsCreated : proposalsCreated.slice(0, 2)}
                   liteProposals={showActivity ? pollsPosted : pollsPosted?.slice(0, 2)}
                   showFullList={showActivity}
+                  filters={filters}
                 />
               )}
               {!(proposalsCreated && proposalsCreated.length > 0) && !(pollsPosted && pollsPosted.length > 0) ? (
@@ -297,6 +297,7 @@ export const UserMovements: React.FC<{
                   proposals={showActivity ? proposalsVoted : proposalsVoted.slice(0, 2)}
                   showFullList={showActivity}
                   liteProposals={showActivity ? pollsVoted : pollsVoted.slice(0, 2)}
+                  filters={filters}
                 />
               )}
               {!(proposalsVoted && proposalsVoted.length > 0) && !(pollsVoted && pollsVoted.length > 0) ? (

From 95006994adb201564407acbe6cf09f3fbec82899 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Fri, 12 Apr 2024 23:06:25 +0200
Subject: [PATCH 07/11] filters for proposals & votes

---
 .../explorer/components/FiltersUserDialog.tsx |  10 +-
 .../explorer/components/ProposalsList.tsx     | 132 +++++++++++++-----
 .../pages/User/components/UserMovements.tsx   |  40 +++---
 src/modules/explorer/pages/User/index.tsx     |  13 --
 .../services/dao/mappers/proposal/types.ts    |   2 +
 5 files changed, 132 insertions(+), 65 deletions(-)

diff --git a/src/modules/explorer/components/FiltersUserDialog.tsx b/src/modules/explorer/components/FiltersUserDialog.tsx
index b7966baf..0c75ab61 100644
--- a/src/modules/explorer/components/FiltersUserDialog.tsx
+++ b/src/modules/explorer/components/FiltersUserDialog.tsx
@@ -64,8 +64,12 @@ export const FilterUserProposalsDialog: React.FC<Props> = ({ open, handleClose,
   const [proposalType, setProposalType] = useState<ProposalType>(ProposalType.ALL)
   const [order, setOrder] = useState<Order>(Order.RECENT)
 
-  const filterProposalByPopularity = (status: Order) => {
-    setOrder(status)
+  const filterProposalByPopularity = (status: string | undefined) => {
+    if (status === "popular") {
+      setOrder(Order.POPULAR)
+    } else {
+      setOrder(Order.RECENT)
+    }
   }
 
   const isSelected = (item: StatusOption) => {
@@ -144,7 +148,7 @@ export const FilterUserProposalsDialog: React.FC<Props> = ({ open, handleClose,
                 { name: "Most Popular to Least Popular", value: "popular" }
               ]}
               value={"recent"}
-              onSelected={() => filterProposalByPopularity}
+              onSelected={value => filterProposalByPopularity(value)}
               isFilter={true}
             />
           </Grid>
diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index c79d8bf8..f3aca933 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { Collapse, Grid, styled } from "@material-ui/core"
+import { Collapse, Grid, Typography, styled } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
 import { Link } from "react-router-dom"
 import { Proposal } from "services/services/dao/mappers/proposal/types"
@@ -8,7 +9,7 @@ import { Poll } from "models/Polls"
 import ReactPaginate from "react-paginate"
 import "../pages/DAOList/styles.css"
 import { Filters } from "../pages/User/components/UserMovements"
-import { ProposalType } from "./FiltersUserDialog"
+import { Order, ProposalType, StatusOption } from "./FiltersUserDialog"
 
 const TableContainer = styled(Grid)({
   width: "100%"
@@ -53,6 +54,8 @@ export const ProposalsList: React.FC<Props> = ({
   const [offset, setOffset] = useState(0)
   const [open, setopen] = useState(true)
   const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
+  const [filter, setFilter] = useState<string>()
+  const [filterOnchain, setFilterOnchain] = useState<string>()
 
   const listOfProposals = useMemo(() => {
     const proposalList: { type: string; proposal: Proposal | Poll }[] = []
@@ -75,6 +78,14 @@ export const ProposalsList: React.FC<Props> = ({
     return proposalList
   }, [liteProposals, proposals])
 
+  useEffect(() => {
+    setFilteredProposals(listOfProposals)
+  }, [])
+
+  useEffect(() => {
+    setFilteredProposals(listOfProposals)
+  }, [showFullList])
+
   const pageCount = Math.ceil(filteredProposals ? filteredProposals.length / 4 : 0)
 
   // Invoke when user click to request another page.
@@ -85,60 +96,113 @@ export const ProposalsList: React.FC<Props> = ({
     }
   }
 
-  useEffect(() => {
-    setFilteredProposals(listOfProposals)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  const filterByOffchainStatus = useCallback(
+    (status: string) => {
+      switch (status) {
+        case "active": {
+          setFilteredProposals(filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === "active"))
+          break
+        }
+        case "closed": {
+          setFilteredProposals(filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === "closed"))
+          break
+        }
+        default:
+          break
+      }
+    },
+    [filter]
+  )
+
+  const filterByOnChainStatus = useCallback(
+    (status: StatusOption[]) => {
+      if (status.length > 0) {
+        const list: { type: string; proposal: Proposal | Poll }[] = []
+        status.map((state: StatusOption) => {
+          const filtered = filteredProposals.filter(
+            item => item.proposal.getStatus(currentLevel).status === state.label
+          )
+          list.push(...filtered)
+        })
+        setFilteredProposals(list)
+      }
+    },
+    [filterOnchain]
+  )
 
-  const filterByType = useCallback(
-    (type: ProposalType) => {
+  const orderedList = (state: Order) => {
+    if (state === "recent") {
+      return listOfProposals
+    } else {
+      const proposalList: { type: string; proposal: Proposal | Poll }[] = []
+
+      const orderedProposals = proposals!.slice().sort((a, b) => b.voters.length - a.voters.length)
+      const orderedPolls = liteProposals?.slice().sort((a, b) => b.votes! - a.votes!)
+
+      orderedProposals?.map(proposal => {
+        const item = {
+          type: "lambda",
+          proposal: proposal
+        }
+        proposalList.push(item)
+        return
+      })
+      orderedPolls?.map(proposal => {
+        const item = {
+          type: "lite",
+          proposal: proposal
+        }
+        proposalList.push(item)
+        return
+      })
+      return proposalList
+    }
+  }
+
+  const applyFilters = useCallback(() => {
+    const filterByType = (
+      type: ProposalType,
+      filters: Filters,
+      list: { type: string; proposal: Proposal | Poll }[]
+    ) => {
       switch (type) {
         case ProposalType.ALL: {
-          setFilteredProposals(listOfProposals)
+          setFilteredProposals(list)
           break
         }
         case ProposalType.OFF_CHAIN: {
-          setFilteredProposals(listOfProposals.filter((item: ProposalObj) => item.type === "lite"))
+          setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lite"))
+          setFilter("status")
+          filterByOffchainStatus(filters.offchainStatus)
           break
         }
         case ProposalType.ON_CHAIN: {
-          setFilteredProposals(listOfProposals.filter((item: ProposalObj) => item.type === "lambda"))
+          setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lambda"))
+          setFilterOnchain("status")
+          filterByOnChainStatus(filters.onchainStatus)
           break
         }
         default:
-          setFilteredProposals(listOfProposals)
+          setFilteredProposals(list)
           break
       }
-    },
-    [listOfProposals]
-  )
-
-  const applyFilters = useCallback(() => {
-    console.log(filters)
+    }
     if (filters) {
-      filterByType(filters.type)
-      console.log(listOfProposals)
+      const list = orderedList(filters.order)
+      filterByType(filters.type, filters, list)
     }
-  }, [filters, listOfProposals, filterByType])
+  }, [filters, filteredProposals])
 
   useEffect(() => {
     applyFilters()
-  }, [filters, applyFilters])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters])
 
   return (
     <TableContainer item>
       <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
         {filteredProposals && filteredProposals.length && filteredProposals.length > 0 ? (
-          <Grid
-            item
-            container
-            wrap={"nowrap"}
-            component={Collapse}
-            in={open}
-            timeout="auto"
-            unmountOnExit
-            direction="column"
-          >
+          <Grid item container wrap={"nowrap"} direction="column">
             {filteredProposals.slice(offset, offset + 4).map((p, i) =>
               p.type === "lambda" ? (
                 <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
@@ -156,7 +220,9 @@ export const ProposalsList: React.FC<Props> = ({
               )
             )}
           </Grid>
-        ) : null}
+        ) : (
+          <Typography color="textPrimary">No proposals found</Typography>
+        )}
       </Grid>
       {showFullList ? (
         <Grid container direction="row" justifyContent="flex-end">
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 1ed48c19..1cb1c9db 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -26,6 +26,9 @@ import {
   ProposalType,
   StatusOption
 } from "modules/explorer/components/FiltersUserDialog"
+import { useUserVotes } from "modules/lite/explorer/hooks/useUserVotes"
+import { usePolls } from "modules/lite/explorer/hooks/usePolls"
+import { useDAO } from "services/services/dao/hooks/useDAO"
 
 const TabsContainer = styled(Grid)(({ theme }) => ({
   borderRadius: 8,
@@ -122,22 +125,11 @@ export interface Filters {
 export const UserMovements: React.FC<{
   daoId: string
   proposalsCreated: Proposal[]
+  proposalsVoted: Proposal[]
   cycleInfo: CycleInfo | undefined
-  pollsPosted: Poll[] | undefined
-  proposalsVoted: Proposal[] | undefined
-  pollsVoted: any
   setShowActivity: (arg: boolean) => void
   showActivity: boolean
-}> = ({
-  proposalsCreated,
-  cycleInfo,
-  pollsPosted,
-  proposalsVoted,
-  daoId,
-  pollsVoted,
-  setShowActivity,
-  showActivity
-}) => {
+}> = ({ proposalsCreated, cycleInfo, proposalsVoted, daoId, setShowActivity, showActivity }) => {
   const [selectedTab, setSelectedTab] = React.useState(0)
   const [filteredTransactions, setFilteredTransactions] = React.useState<TransferWithBN[] | undefined>()
   const { account } = useTezos()
@@ -146,6 +138,22 @@ export const UserMovements: React.FC<{
   const [openFiltersDialog, setOpenFiltersDialog] = useState(false)
   const [filters, setFilters] = useState<Filters>()
 
+  const { data } = useDAO(daoId)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
+  const { data: userVotes } = useUserVotes()
+
+  const pollsPosted: Poll[] | undefined = useMemo(() => {
+    return polls?.filter(p => p.author === account)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account])
+
+  const votedPolls: any = []
+  pollsPosted?.map((p: Poll) => {
+    if (userVotes && userVotes.filter(v => p._id === v.pollID).length > 0) {
+      return votedPolls.push(p)
+    }
+  })
+
   const useUserTransfers = (): TransferWithBN[] | undefined => {
     const { data: transfers } = useTransfers(daoId)
 
@@ -291,16 +299,16 @@ export const UserMovements: React.FC<{
           {/* TAB VOTES CONTENT */}
           <TabPanel value={selectedTab} index={1}>
             <Grid item style={{ marginTop: 24 }}>
-              {proposalsVoted && cycleInfo && (
+              {votedPolls && cycleInfo && (
                 <ProposalsList
                   currentLevel={cycleInfo.currentLevel}
                   proposals={showActivity ? proposalsVoted : proposalsVoted.slice(0, 2)}
                   showFullList={showActivity}
-                  liteProposals={showActivity ? pollsVoted : pollsVoted.slice(0, 2)}
+                  liteProposals={showActivity ? votedPolls : votedPolls.slice(0, 2)}
                   filters={filters}
                 />
               )}
-              {!(proposalsVoted && proposalsVoted.length > 0) && !(pollsVoted && pollsVoted.length > 0) ? (
+              {!(proposalsVoted && proposalsVoted.length > 0) && !(votedPolls && votedPolls.length > 0) ? (
                 <ProposalsFooter item container direction="column" justifyContent="center">
                   <Grid item>
                     <Typography color="textPrimary" align="center">
diff --git a/src/modules/explorer/pages/User/index.tsx b/src/modules/explorer/pages/User/index.tsx
index dd469502..6340fbbd 100644
--- a/src/modules/explorer/pages/User/index.tsx
+++ b/src/modules/explorer/pages/User/index.tsx
@@ -114,21 +114,10 @@ export const User: React.FC = () => {
   const { data: executedProposals } = useProposals(daoId, ProposalStatus.EXECUTED)
   const { data: droppedProposals } = useProposals(daoId, ProposalStatus.DROPPED)
   const { mutate: unstakeFromAllProposals } = useUnstakeFromAllProposals()
-  const { data: polls } = usePolls(data?.liteDAOData?._id)
-  const pollsPosted: Poll[] | undefined = polls?.filter(p => p.author === account)
   const [showActivity, setShowActivity] = useState(false)
 
-  const { data: userVotes } = useUserVotes()
-
   const { data: isTokenDelegationSupported } = useTokenDelegationSupported(data?.data.token.contract)
 
-  const votedPolls: any = []
-  pollsPosted?.map((p: Poll) => {
-    if (userVotes && userVotes.filter(v => p._id === v.pollID).length > 0) {
-      return votedPolls.push(p)
-    }
-  })
-
   useEffect(() => {
     if (!account) {
       history.push(`../${daoId}`)
@@ -250,8 +239,6 @@ export const User: React.FC = () => {
           proposalsVoted={proposalsVoted}
           cycleInfo={cycleInfo}
           proposalsCreated={proposalsCreated}
-          pollsPosted={pollsPosted}
-          pollsVoted={votedPolls}
           setShowActivity={changeState}
           showActivity={showActivity}
         />
diff --git a/src/services/services/dao/mappers/proposal/types.ts b/src/services/services/dao/mappers/proposal/types.ts
index e4034920..50bf9e3a 100644
--- a/src/services/services/dao/mappers/proposal/types.ts
+++ b/src/services/services/dao/mappers/proposal/types.ts
@@ -122,6 +122,8 @@ export abstract class Proposal {
     level: number
   }[]
   packedMetadata: string
+  isActive?: boolean
+  startTime?: string
   voters: {
     address: string
     value: BigNumber

From 68f610e4a9316b4f68edc428e80b89ff4b4d4266 Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Fri, 12 Apr 2024 23:44:37 +0200
Subject: [PATCH 08/11] logic improved

---
 .../explorer/components/FiltersUserDialog.tsx |   4 +-
 .../explorer/components/ProposalsList.tsx     | 131 ++++++++++--------
 .../pages/User/components/UserMovements.tsx   |   5 +-
 3 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/src/modules/explorer/components/FiltersUserDialog.tsx b/src/modules/explorer/components/FiltersUserDialog.tsx
index 0c75ab61..b4a512cb 100644
--- a/src/modules/explorer/components/FiltersUserDialog.tsx
+++ b/src/modules/explorer/components/FiltersUserDialog.tsx
@@ -137,7 +137,7 @@ export const FilterUserProposalsDialog: React.FC<Props> = ({ open, handleClose,
   return (
     <>
       <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
-        <Container container direction="column">
+        {/* <Container container direction="column">
           <Grid item>
             <SectionTitle>Sort By</SectionTitle>
           </Grid>
@@ -152,7 +152,7 @@ export const FilterUserProposalsDialog: React.FC<Props> = ({ open, handleClose,
               isFilter={true}
             />
           </Grid>
-        </Container>
+        </Container> */}
         <Container container direction="column">
           <Grid item>
             <SectionTitle>Type</SectionTitle>
diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index f3aca933..6a02ffdc 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { Collapse, Grid, Typography, styled } from "@material-ui/core"
+import { CircularProgress, Collapse, Grid, Typography, styled } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
 import { Link } from "react-router-dom"
 import { Proposal } from "services/services/dao/mappers/proposal/types"
@@ -26,6 +26,11 @@ const ProposalsFooter = styled(Grid)({
   minHeight: 34
 })
 
+const LoaderContainer = styled(Grid)({
+  paddingTop: 40,
+  paddingBottom: 40
+})
+
 interface Props {
   currentLevel: number
   proposals: Proposal[] | undefined
@@ -54,8 +59,9 @@ export const ProposalsList: React.FC<Props> = ({
   const [offset, setOffset] = useState(0)
   const [open, setopen] = useState(true)
   const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
-  const [filter, setFilter] = useState<string>()
+  const [filter, setFilter] = useState<number>(0)
   const [filterOnchain, setFilterOnchain] = useState<string>()
+  const [isLoading, setIsLoading] = useState(false)
 
   const listOfProposals = useMemo(() => {
     const proposalList: { type: string; proposal: Proposal | Poll }[] = []
@@ -98,17 +104,13 @@ export const ProposalsList: React.FC<Props> = ({
 
   const filterByOffchainStatus = useCallback(
     (status: string) => {
-      switch (status) {
-        case "active": {
-          setFilteredProposals(filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === "active"))
-          break
-        }
-        case "closed": {
-          setFilteredProposals(filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === "closed"))
-          break
-        }
-        default:
-          break
+      if (status === "all") {
+        setIsLoading(false)
+        return
+      } else {
+        const filtered = filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === status)
+        setFilteredProposals(filtered)
+        setIsLoading(false)
       }
     },
     [filter]
@@ -126,6 +128,7 @@ export const ProposalsList: React.FC<Props> = ({
         })
         setFilteredProposals(list)
       }
+      setIsLoading(false)
     },
     [filterOnchain]
   )
@@ -168,28 +171,36 @@ export const ProposalsList: React.FC<Props> = ({
       switch (type) {
         case ProposalType.ALL: {
           setFilteredProposals(list)
+          setIsLoading(false)
           break
         }
         case ProposalType.OFF_CHAIN: {
           setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lite"))
-          setFilter("status")
-          filterByOffchainStatus(filters.offchainStatus)
+          setFilter(Math.random())
+          setTimeout(() => {
+            filterByOffchainStatus(filters.offchainStatus)
+          }, 500)
           break
         }
         case ProposalType.ON_CHAIN: {
           setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lambda"))
           setFilterOnchain("status")
-          filterByOnChainStatus(filters.onchainStatus)
+          setTimeout(() => {
+            filterByOnChainStatus(filters.onchainStatus)
+          }, 1000)
           break
         }
         default:
           setFilteredProposals(list)
+          setIsLoading(false)
           break
       }
     }
     if (filters) {
-      const list = orderedList(filters.order)
-      filterByType(filters.type, filters, list)
+      // const list = orderedList(filters.order)
+      setIsLoading(true)
+      console.log("")
+      filterByType(filters.type, filters, listOfProposals)
     }
   }, [filters, filteredProposals])
 
@@ -200,46 +211,54 @@ export const ProposalsList: React.FC<Props> = ({
 
   return (
     <TableContainer item>
-      <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
-        {filteredProposals && filteredProposals.length && filteredProposals.length > 0 ? (
-          <Grid item container wrap={"nowrap"} direction="column">
-            {filteredProposals.slice(offset, offset + 4).map((p, i) =>
-              p.type === "lambda" ? (
-                <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
-                  <Link to={`proposal/${p.proposal.id}`}>
-                    <ProposalItem
-                      proposal={p.proposal}
-                      status={p.proposal.getStatus(currentLevel).status}
-                    ></ProposalItem>
-                  </Link>
-                </CustomGrid>
-              ) : (
-                <div style={{ width: "inherit", marginBottom: 16 }} key={`poll-${i}`}>
-                  <ProposalTableRow poll={p.proposal} />
-                </div>
-              )
+      {isLoading ? (
+        <LoaderContainer container direction="row" justifyContent="center">
+          <CircularProgress color="secondary" />
+        </LoaderContainer>
+      ) : (
+        <>
+          <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
+            {filteredProposals && filteredProposals.length && filteredProposals.length > 0 ? (
+              <Grid item container wrap={"nowrap"} direction="column">
+                {filteredProposals.slice(offset, offset + 4).map((p, i) =>
+                  p.type === "lambda" ? (
+                    <CustomGrid item key={`proposal-${i}`} style={proposalStyle}>
+                      <Link to={`proposal/${p.proposal.id}`}>
+                        <ProposalItem
+                          proposal={p.proposal}
+                          status={p.proposal.getStatus(currentLevel).status}
+                        ></ProposalItem>
+                      </Link>
+                    </CustomGrid>
+                  ) : (
+                    <div style={{ width: "inherit", marginBottom: 16 }} key={`poll-${i}`}>
+                      <ProposalTableRow poll={p.proposal} />
+                    </div>
+                  )
+                )}
+              </Grid>
+            ) : (
+              <Typography color="textPrimary">No proposals found</Typography>
             )}
           </Grid>
-        ) : (
-          <Typography color="textPrimary">No proposals found</Typography>
-        )}
-      </Grid>
-      {showFullList ? (
-        <Grid container direction="row" justifyContent="flex-end">
-          <ReactPaginate
-            previousLabel={"<"}
-            breakLabel="..."
-            nextLabel=">"
-            onPageChange={handlePageClick}
-            pageRangeDisplayed={2}
-            pageCount={pageCount}
-            renderOnZeroPageCount={null}
-            containerClassName={"pagination"}
-            activeClassName={"active"}
-            forcePage={currentPage}
-          />
-        </Grid>
-      ) : null}
+          {showFullList ? (
+            <Grid container direction="row" justifyContent="flex-end">
+              <ReactPaginate
+                previousLabel={"<"}
+                breakLabel="..."
+                nextLabel=">"
+                onPageChange={handlePageClick}
+                pageRangeDisplayed={2}
+                pageCount={pageCount}
+                renderOnZeroPageCount={null}
+                containerClassName={"pagination"}
+                activeClassName={"active"}
+                forcePage={currentPage}
+              />
+            </Grid>
+          ) : null}
+        </>
+      )}
     </TableContainer>
   )
 }
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 1cb1c9db..e49ec00e 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -255,7 +255,6 @@ export const UserMovements: React.FC<{
             </TabsContainer>
           </Grid>
         </Grid>
-
         {!showActivity ? (
           <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setShowActivity(true)}>
             <Grid item container direction="row" alignItems="center">
@@ -263,14 +262,14 @@ export const UserMovements: React.FC<{
               <Typography color="secondary">View All</Typography>
             </Grid>
           </ViewAll>
-        ) : (
+        ) : selectedTab !== 2 ? (
           <ViewAll item xs={isMobileSmall ? 12 : 2} onClick={() => setOpenFiltersDialog(true)}>
             <Grid item container direction="row" alignItems="center">
               <FilterAltIcon color="secondary" />
               <Typography color="secondary">Filter & Sort</Typography>
             </Grid>
           </ViewAll>
-        )}
+        ) : null}
 
         <Grid item>
           <TabPanel value={selectedTab} index={0}>

From 839ab7013dfcd6d0955bef690e3819cf05a87a3b Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Sat, 13 Apr 2024 00:09:56 +0200
Subject: [PATCH 09/11] proposal tab filter dialog

---
 .../explorer/components/FiltersDialog.tsx     | 96 +++++++++++++------
 .../explorer/pages/Proposals/index.tsx        | 18 +++-
 2 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/modules/explorer/components/FiltersDialog.tsx b/src/modules/explorer/components/FiltersDialog.tsx
index 6a51a4bd..270f5042 100644
--- a/src/modules/explorer/components/FiltersDialog.tsx
+++ b/src/modules/explorer/components/FiltersDialog.tsx
@@ -5,10 +5,14 @@ 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"
+import { Filters } from "../pages/User/components/UserMovements"
 
 interface Props {
   open: boolean
   handleClose: () => void
+  selectedTab: number
+  saveFilters: (filters: Filters) => void
 }
 
 const SectionTitle = styled(Typography)({
@@ -39,15 +43,18 @@ interface StatusOption {
   selected: boolean
 }
 
-export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) => {
+export enum OffchainStatus {
+  ACTIVE = "active",
+  CLOSED = "closed",
+  ALL = "all"
+}
+
+export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose, selectedTab, saveFilters }) => {
   const [filters, setFilters] = useState<StatusOption[]>([])
   const [status, setStatus] = useState<StatusOption[]>([])
-
-  // const filterProposalByPopularity = (status: string | undefined) => {
-  //   if (status) {
-  //     setFilters([...status])
-  //   }
-  // }
+  const [offchainStatus, setOffchainStatus] = useState<OffchainStatus>(OffchainStatus.ALL)
+  const proposalType = selectedTab === 0 ? ProposalType.ON_CHAIN : ProposalType.OFF_CHAIN
+  const [order, setOrder] = useState<Order>(Order.RECENT)
 
   const isSelected = (item: StatusOption) => {
     return filters.includes(item) ? true : false
@@ -65,10 +72,6 @@ export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) =>
     setFilters(updated)
   }
 
-  const showFilters = () => {
-    console.log(filters)
-  }
-
   const findStatus = () => {
     const values = Object.values(ProposalStatus)
     for (const item in values) {
@@ -85,10 +88,29 @@ export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) =>
     findStatus()
   }, [])
 
+  const saveOffchainStatus = (status: OffchainStatus) => {
+    if (offchainStatus === status) {
+      setOffchainStatus(OffchainStatus.ALL)
+    } else {
+      setOffchainStatus(status)
+    }
+  }
+
+  const showFilters = () => {
+    const filterObject: Filters = {
+      type: proposalType,
+      offchainStatus: offchainStatus,
+      onchainStatus: filters,
+      order: order
+    }
+    saveFilters(filterObject)
+    handleClose()
+  }
+
   return (
     <>
       <ResponsiveDialog open={open} onClose={handleClose} title={"Filter"} template="sm">
-        <Container container direction="column">
+        {/* <Container container direction="column">
           <Grid item>
             <SectionTitle>Sort By</SectionTitle>
           </Grid>
@@ -103,26 +125,46 @@ export const FilterProposalsDialog: React.FC<Props> = ({ open, handleClose }) =>
               isFilter={true}
             />
           </Grid>
-        </Container>
+        </Container> */}
         <Container container direction="column">
           <Grid item>
             <SectionTitle>Proposal Status</SectionTitle>
           </Grid>
-          <Grid item container direction="row">
-            {status.length > 0 &&
-              status.map((item, index) => {
-                return (
-                  <StatusButton
-                    item
-                    key={`status-${index}`}
-                    style={isSelected(item) ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
-                  >
-                    <Typography onClick={() => saveStatus(item)}>{item.label}</Typography>
-                  </StatusButton>
-                )
-              })}
-          </Grid>
+          {selectedTab === 0 ? (
+            <Grid item container direction="row">
+              {status.length > 0 &&
+                status.map((item, index) => {
+                  return (
+                    <StatusButton
+                      item
+                      key={`status-${index}`}
+                      style={isSelected(item) ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+                    >
+                      <Typography onClick={() => saveStatus(item)}>{item.label}</Typography>
+                    </StatusButton>
+                  )
+                })}
+            </Grid>
+          ) : (
+            <Grid item container direction="row">
+              <StatusButton
+                item
+                onClick={() => saveOffchainStatus(OffchainStatus.ACTIVE)}
+                style={offchainStatus === OffchainStatus.ACTIVE ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+              >
+                <Typography>Active</Typography>
+              </StatusButton>
+              <StatusButton
+                item
+                onClick={() => saveOffchainStatus(OffchainStatus.CLOSED)}
+                style={offchainStatus === OffchainStatus.CLOSED ? { backgroundColor: "#fff", color: "#1c1f23" } : {}}
+              >
+                <Typography>Closed</Typography>
+              </StatusButton>
+            </Grid>
+          )}
         </Container>
+
         <Container container direction="row" justifyContent="flex-end">
           <SmallButton color="secondary" variant="contained" onClick={showFilters}>
             Apply
diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
index 9a7b37dd..c6a9045e 100644
--- a/src/modules/explorer/pages/Proposals/index.tsx
+++ b/src/modules/explorer/pages/Proposals/index.tsx
@@ -23,6 +23,7 @@ import NewReleasesIcon from "@mui/icons-material/NewReleases"
 import DeleteIcon from "@mui/icons-material/Delete"
 import FilterAltIcon from "@mui/icons-material/FilterAlt"
 import { FilterProposalsDialog } from "modules/explorer/components/FiltersDialog"
+import { Filters } from "../User/components/UserMovements"
 
 const FiltersContainer = styled(Grid)({
   marginTop: 45,
@@ -117,6 +118,7 @@ export const Proposals: React.FC = () => {
   const { mutate: dropAllExpired } = useDropAllExpired()
   const { data: expiredProposals } = useProposals(daoId, ProposalStatus.EXPIRED)
   const { data: executableProposals } = useProposals(daoId, ProposalStatus.EXECUTABLE)
+  const [filters, setFilters] = useState<Filters>()
 
   const handleCloseModal = () => {
     setOpenDialog(false)
@@ -151,6 +153,11 @@ export const Proposals: React.FC = () => {
 
   const handleChangeTab = (newValue: number) => {
     setSelectedTab(newValue)
+    setFilters(undefined)
+  }
+
+  const handleFilters = (filters: Filters) => {
+    setFilters(filters)
   }
 
   return (
@@ -266,7 +273,7 @@ export const Proposals: React.FC = () => {
                   currentLevel={cycleInfo.currentLevel}
                   proposals={proposals}
                   liteProposals={undefined}
-                  filters={undefined}
+                  filters={filters}
                 />
               )}
               {!(proposals && proposals.length > 0) ? (
@@ -289,7 +296,7 @@ export const Proposals: React.FC = () => {
                   currentLevel={cycleInfo.currentLevel}
                   proposals={undefined}
                   liteProposals={polls}
-                  filters={undefined}
+                  filters={filters}
                 />
               )}
               {!(polls && polls.length > 0) ? (
@@ -306,7 +313,12 @@ export const Proposals: React.FC = () => {
         </TabsBox>
 
         <ProposalActionsDialog open={openDialog} handleClose={handleCloseModal} />
-        <FilterProposalsDialog open={openFiltersDialog} handleClose={handleCloseFiltersModal} />
+        <FilterProposalsDialog
+          saveFilters={handleFilters}
+          open={openFiltersDialog}
+          handleClose={handleCloseFiltersModal}
+          selectedTab={selectedTab}
+        />
       </Grid>
     </>
   )

From 4285c9e08af38ffb4424a66a73eecee05aaf3d9d Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Mon, 13 May 2024 21:17:06 +0200
Subject: [PATCH 10/11] fix initial filtering

---
 .../explorer/components/ProposalsList.tsx     | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index 6a02ffdc..9fed9044 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -102,35 +102,35 @@ export const ProposalsList: React.FC<Props> = ({
     }
   }
 
-  const filterByOffchainStatus = useCallback(
-    (status: string) => {
-      if (status === "all") {
-        setIsLoading(false)
-        return
-      } else {
-        const filtered = filteredProposals.filter((item: ProposalObj) => item.proposal.isActive === status)
-        setFilteredProposals(filtered)
-        setIsLoading(false)
-      }
-    },
-    [filter]
-  )
+  const filterByOffchainStatus = useCallback((list: { type: string; proposal: Proposal | Poll }[], status: string) => {
+    if (status === "all") {
+      setIsLoading(false)
+      setFilteredProposals(list)
+      return
+    } else {
+      const filtered = list.slice().filter(item => item.type === "lite")
+      const filteredList = filtered.filter((item: ProposalObj) => item.proposal.isActive === status)
+      setFilteredProposals(filteredList)
+      setIsLoading(false)
+    }
+  }, [])
 
   const filterByOnChainStatus = useCallback(
-    (status: StatusOption[]) => {
+    (list: { type: string; proposal: Proposal | Poll }[], status: StatusOption[]) => {
       if (status.length > 0) {
-        const list: { type: string; proposal: Proposal | Poll }[] = []
+        const updatedList: { type: string; proposal: Proposal | Poll }[] = []
         status.map((state: StatusOption) => {
-          const filtered = filteredProposals.filter(
-            item => item.proposal.getStatus(currentLevel).status === state.label
-          )
-          list.push(...filtered)
+          const filtered = list.slice().filter(item => item.type === "lambda")
+          const filteredByStatus = filtered.filter(item => item.proposal.getStatus(currentLevel).status === state.label)
+          updatedList.push(...filteredByStatus)
         })
+        setFilteredProposals(updatedList)
+      } else {
         setFilteredProposals(list)
       }
       setIsLoading(false)
     },
-    [filterOnchain]
+    []
   )
 
   const orderedList = (state: Order) => {
@@ -175,18 +175,16 @@ export const ProposalsList: React.FC<Props> = ({
           break
         }
         case ProposalType.OFF_CHAIN: {
-          setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lite"))
           setFilter(Math.random())
           setTimeout(() => {
-            filterByOffchainStatus(filters.offchainStatus)
+            filterByOffchainStatus(list, filters.offchainStatus)
           }, 500)
           break
         }
         case ProposalType.ON_CHAIN: {
-          setFilteredProposals(list.filter((item: ProposalObj) => item.type === "lambda"))
           setFilterOnchain("status")
           setTimeout(() => {
-            filterByOnChainStatus(filters.onchainStatus)
+            filterByOnChainStatus(list, filters.onchainStatus)
           }, 1000)
           break
         }
@@ -197,9 +195,7 @@ export const ProposalsList: React.FC<Props> = ({
       }
     }
     if (filters) {
-      // const list = orderedList(filters.order)
       setIsLoading(true)
-      console.log("")
       filterByType(filters.type, filters, listOfProposals)
     }
   }, [filters, filteredProposals])

From 10f51958cb340afb6ebcb549512cc38fb4265d9e Mon Sep 17 00:00:00 2001
From: fabiolalombardim <lombardifabiola@hotmail.com>
Date: Mon, 13 May 2024 22:01:35 +0200
Subject: [PATCH 11/11] implemented new design

---
 .../explorer/components/ProposalsList.tsx        |  2 ++
 src/modules/explorer/components/UsersTable.tsx   |  4 ++++
 src/modules/explorer/components/VotesTable.tsx   |  2 ++
 .../pages/DAOList/components/DAOItem.tsx         | 10 +++++-----
 src/modules/explorer/pages/DAOList/index.tsx     |  7 ++++++-
 src/modules/explorer/pages/DAOList/styles.css    | 16 ++++++++++++++--
 src/modules/explorer/pages/NFTs/index.tsx        |  2 ++
 .../pages/Treasury/components/BalancesTable.tsx  |  2 ++
 .../pages/Treasury/components/TransfersTable.tsx |  4 ++++
 .../pages/User/components/UserMovements.tsx      |  6 ++++++
 10 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index d0b72119..71d3e643 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -122,7 +122,9 @@ export const ProposalsList: React.FC<Props> = ({
           renderOnZeroPageCount={null}
           containerClassName={"pagination"}
           activeClassName={"active"}
+          nextClassName="nextButton"
           forcePage={currentPage}
+          previousClassName="nextButton"
         />
       </Grid>
     </TableContainer>
diff --git a/src/modules/explorer/components/UsersTable.tsx b/src/modules/explorer/components/UsersTable.tsx
index de191ceb..b3acd442 100644
--- a/src/modules/explorer/components/UsersTable.tsx
+++ b/src/modules/explorer/components/UsersTable.tsx
@@ -126,6 +126,8 @@ const MobileUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick,
             containerClassName={"pagination"}
             activeClassName={"active"}
             forcePage={currentPage}
+            nextClassName="nextButton"
+            previousClassName="nextButton"
           />
         </Grid>
       </Grid>
@@ -203,6 +205,8 @@ const DesktopUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick,
             containerClassName={"pagination"}
             activeClassName={"active"}
             forcePage={currentPage}
+            nextClassName="nextButton"
+            previousClassName="nextButton"
           />
         </Grid>
       </Grid>
diff --git a/src/modules/explorer/components/VotesTable.tsx b/src/modules/explorer/components/VotesTable.tsx
index 812067fc..dae7c757 100644
--- a/src/modules/explorer/components/VotesTable.tsx
+++ b/src/modules/explorer/components/VotesTable.tsx
@@ -124,6 +124,8 @@ export const VotesTable: React.FC<{ data: RowData[] }> = ({ data }) => {
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </>
diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
index a0715948..c7b9145e 100644
--- a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
+++ b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
@@ -13,10 +13,10 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   "boxSizing": "border-box",
   "cursor": "pointer",
   "transition": "0.15s ease-out",
-  "padding": "42px 48px",
+  "padding": "40px 48px",
   "minWidth": "340px",
   "alignContent": "baseline",
-  "gap": 30,
+  "gap": 24,
   // "maxHeight": 282,
 
   ["@media (max-width:760px)"]: {
@@ -64,7 +64,7 @@ const NameText = styled(Typography)(({ theme }) => ({
   textOverflow: "ellipsis",
   color: theme.palette.text.primary,
   overflow: "hidden",
-  fontSize: 36,
+  fontSize: 24,
   maxWidth: 245,
   fontWeight: 600,
 
@@ -90,13 +90,13 @@ const DescriptionText = styled(Typography)({
 })
 
 const ItemTextSmall = styled(Typography)({
-  fontWeight: 600,
+  fontWeight: 500,
   fontSize: 16
 })
 
 const Badge = styled(Grid)(({ theme, dao_type }: { theme: Theme; dao_type: string }) => ({
   "borderRadius": "50px",
-  "padding": "8px 16px",
+  "padding": "7px 14px",
   "height": "auto",
   "boxSizing": "border-box",
   "width": "fit-content",
diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx
index 27d123ed..bfee2f7c 100644
--- a/src/modules/explorer/pages/DAOList/index.tsx
+++ b/src/modules/explorer/pages/DAOList/index.tsx
@@ -230,7 +230,10 @@ export const DAOList: React.FC = () => {
                   <Grid item>
                     <Grid container justifyContent="center" alignItems="center" style={{ height: "100%" }}>
                       <Grid item>
-                        <Typography style={{ fontSize: "18px" }} color="textPrimary">
+                        <Typography
+                          style={{ fontSize: "18px", letterSpacing: "-0.18px !important" }}
+                          color="textPrimary"
+                        >
                           {daos?.length || 0} DAOs
                         </Typography>
                       </Grid>
@@ -299,6 +302,8 @@ export const DAOList: React.FC = () => {
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
 
diff --git a/src/modules/explorer/pages/DAOList/styles.css b/src/modules/explorer/pages/DAOList/styles.css
index fc9da373..c5cb91b3 100644
--- a/src/modules/explorer/pages/DAOList/styles.css
+++ b/src/modules/explorer/pages/DAOList/styles.css
@@ -3,11 +3,18 @@
   list-style: none;
   outline: none;
   font-family: "Roboto Flex";
+
+  next {
+    color: red !important;
+  }
 }
 .pagination > .active > a {
-  background-color: rgba(129, 254, 183, 0.2);
+  background-color: #24282D;
   color: rgba(129, 254, 183, 1);
 }
+.pagination > .next > li > a {
+    color: red !important;
+}
 .pagination > li > a {
   border: none;
   padding: 5px 10px;
@@ -31,7 +38,7 @@
 .pagination > .active > span:hover,
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
-  background-color: rgba(129, 254, 183, 0.2);
+  background-color: #24282D;
   border-color: none;
   outline: none;
 }
@@ -39,6 +46,11 @@
 .pagination > li > span {
   color: #fff;
 }
+
+.pagination > .nextButton > a {
+  font-weight: 600;
+}
+
 .pagination > li:first-child > a,
 .pagination > li:first-child > span,
 .pagination > li:last-child > a,
diff --git a/src/modules/explorer/pages/NFTs/index.tsx b/src/modules/explorer/pages/NFTs/index.tsx
index 742b8eeb..b27385f8 100644
--- a/src/modules/explorer/pages/NFTs/index.tsx
+++ b/src/modules/explorer/pages/NFTs/index.tsx
@@ -209,6 +209,8 @@ export const NFTs: React.FC = () => {
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </>
diff --git a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx
index 548a779f..d81dd3f1 100644
--- a/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx
+++ b/src/modules/explorer/pages/Treasury/components/BalancesTable.tsx
@@ -183,6 +183,8 @@ const BalancesList: React.FC<TableProps> = ({
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </Grid>
diff --git a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx
index c1cb074e..6b598071 100644
--- a/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx
+++ b/src/modules/explorer/pages/Treasury/components/TransfersTable.tsx
@@ -175,6 +175,8 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </Grid>
@@ -247,6 +249,8 @@ const DesktopTransfersTable: React.FC<{ data: RowData[]; network: Network }> = (
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </>
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 8cb6a02e..07e69237 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -505,6 +505,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>
@@ -537,6 +539,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>
@@ -569,6 +573,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>