Transactions table on Treasury tab

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint-staged
+npx lint-staged

.nvmrc

@@ -1 +1 @@
-v16.15.1
+v18.20.0

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "svg.preview.background": "black"
-}
+  "svg.preview.background": "black",
+  "cSpell.words": [
+    "offchain"
+  ]
+}

package.json

@@ -43,6 +43,7 @@
     "blockies-ts": "^1.0.0",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.10.4",
+    "export-to-csv": "^1.2.4",
     "formik": "^2.2.6",
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-lab": "^0.0.8",
@@ -92,15 +93,15 @@
     "@types/react-html-parser": "^2.0.2",
     "@types/react-router-dom": "^5.1.6",
     "@types/yup": "^0.29.11",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
+    "husky": "8.0.3",
+    "lint-staged": "15.2.2",
     "prettier": "^2.2.0",
     "source-map-explorer": "2.5.2",
     "typescript": "^5.0.4"
@@ -133,7 +134,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn lint:check"
+      "npm run lint:check"
     ]
   }
 }

src/index.tsx

@@ -9,6 +9,7 @@ import dayjs from "dayjs"
 
 dayjs.extend(localizedFormat)
 
+// eslint-disable-next-line react/no-deprecated
 ReactDOM.render(
   <React.StrictMode>
     <TezosProvider>

src/models/Choice.ts

@@ -9,4 +9,8 @@ export interface Choice {
 export interface WalletAddress {
   address: string
   balanceAtReferenceBlock: string
+  cidLink: string
+  choiceId: string
+  payloadBytes: string
+  signature: string
 }

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 {

src/modules/explorer/components/BatchBar.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Grid, Paper, styled, Switch, Typography } from "@material-ui/core"
 import { ProposalFormInput } from "./ProposalFormInput"
-
+import AddIcon from "@mui/icons-material/Add"
 const BatchBarContainer = styled(Grid)(({ theme }) => ({
   height: 47,
   alignItems: "start",
@@ -41,8 +41,6 @@ const TransferActive = styled(Grid)({
 
 const AddButton = styled(Paper)({
   "marginLeft": 12,
-  "minHeight": 31,
-  "minWidth": 31,
   "textAlign": "center",
   "padding": 0,
   "background": "inherit",
@@ -90,13 +88,13 @@ export const BatchBar = ({ isBatch, handleIsBatchChange, onClickAdd, items, acti
                 item
                 key={index}
                 onClick={() => setActiveItem(index)}
-                style={Number(index + 1) === activeItem ? { background: "#81FEB7" } : { background: "inherit" }}
+                style={Number(index + 1) === activeItem ? { background: "#24282D" } : { background: "inherit" }}
               >
                 <Typography
                   variant="subtitle2"
                   style={
                     Number(index + 1) === activeItem
-                      ? { color: "#1C1F23", fontWeight: 500 }
+                      ? { color: "#81FEB7", fontWeight: 500 }
                       : { color: "#fff", opacity: 0.65, fontWeight: 500 }
                   }
                 >
@@ -106,7 +104,10 @@ export const BatchBar = ({ isBatch, handleIsBatchChange, onClickAdd, items, acti
             )
           })}
 
-          <AddButton onClick={onClickAdd}>+</AddButton>
+          <AddButton onClick={onClickAdd}>
+            {" "}
+            <AddIcon />{" "}
+          </AddButton>
         </BatchBarContainer>
       ) : null}
     </Grid>

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) => (

src/modules/explorer/components/FiltersDialog.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useState } from "react"
+import { ResponsiveDialog } from "./ResponsiveDialog"
+import { Grid, styled } from "@material-ui/core"
+import { Typography } from "@mui/material"
+import { Dropdown } from "./Dropdown"
+import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
+import { SmallButton } from "modules/common/SmallButton"
+import { Order, ProposalType } from "./FiltersUserDialog"
+import { Filters } from "../pages/User/components/UserMovements"
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+  selectedTab: number
+  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)"
+  }
+}))
+
+interface StatusOption {
+  label: string
+  selected: boolean
+}
+
+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 [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
+  }
+
+  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 findStatus = () => {
+    const values = Object.values(ProposalStatus)
+    for (const item in values) {
+      const obj = {
+        label: values[item],
+        selected: false
+      }
+      setStatus(oldArray => [...oldArray, obj])
+    }
+  }
+
+  useEffect(() => {
+    setStatus([])
+    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">
+          <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>
+          {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
+          </SmallButton>
+        </Container>
+      </ResponsiveDialog>
+    </>
+  )
+}