Skip to content

Commit c86178b

Browse files
ashutoshpwashutoshpw
committed
DAO members page
1 parent 3f98536 commit c86178b

File tree

5 files changed

+222
-241
lines changed

5 files changed

+222
-241
lines changed

‎src/modules/etherlink/components/EvmMembersTable.tsx‎

Lines changed: 108 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import React, { useMemo, useState } from "react"
2-
import { styled, Grid, Typography, useTheme, useMediaQuery } from "components/ui"
2+
import {
3+
styled,
4+
Grid,
5+
Typography,
6+
useTheme,
7+
useMediaQuery,
8+
Table,
9+
TableHead,
10+
TableBody,
11+
TableRow,
12+
TableCell,
13+
CircularProgress
14+
} from "components/ui"
315
import dayjs from "dayjs"
416
import { Blockie } from "modules/common/Blockie"
517
import { CopyButton } from "components/ui/CopyButton"
@@ -13,27 +25,42 @@ dayjs.extend(localizedFormat)
1325

1426
interface RowData {
1527
address: string
16-
votingWeight: number
1728
personalBalance: number
18-
proposalsVoted: any[]
19-
proposalsCreated: any[]
2029
}
2130

22-
const CardContainer = styled(ContentContainer)({
23-
padding: "40px 48px"
31+
const TableHeader = styled(Grid)(({ theme }) => ({
32+
borderBottom: `2px solid ${theme.palette.primary.light}`,
33+
paddingBottom: 20,
34+
marginBottom: 20
35+
}))
36+
37+
const HeaderText = styled(Typography)({
38+
fontWeight: 500,
39+
textTransform: "uppercase",
40+
fontSize: 14
41+
})
42+
43+
const TableContainer = styled(ContentContainer)({
44+
width: "100%",
45+
padding: "20px 24px"
2446
})
2547

26-
const Value = styled(Typography)({
27-
marginTop: 8,
28-
fontWeight: 300,
29-
gap: 6,
48+
const MemberRow = styled(TableRow)(({ theme }) => ({
49+
"&:hover": {
50+
backgroundColor: theme.palette.action.hover
51+
}
52+
}))
53+
54+
const AddressCell = styled(TableCell)({
3055
display: "flex",
31-
textTransform: "uppercase"
56+
alignItems: "center",
57+
gap: 8,
58+
borderBottom: "none"
3259
})
3360

34-
const Symbol = styled(Typography)({
35-
marginLeft: 4,
36-
fontWeight: 300
61+
const BalanceCell = styled(TableCell)({
62+
textAlign: "right",
63+
borderBottom: "none"
3764
})
3865

3966
const formatConfig = {
@@ -43,159 +70,77 @@ const formatConfig = {
4370
trimMantissa: true
4471
}
4572

46-
interface UserTable {
73+
const MembersTableContent: React.FC<{
4774
data: RowData[]
4875
symbol: string
4976
handlePageClick: (event: { selected: number }) => void
5077
pageCount: number
5178
currentPage: number
5279
offset: number
53-
}
54-
55-
const MobileUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick, pageCount, currentPage, offset }) => {
80+
isMobile: boolean
81+
}> = ({ data, symbol, handlePageClick, pageCount, currentPage, offset, isMobile }) => {
5682
const slicedData = useMemo(() => data.slice(offset, offset + 8), [data, offset])
57-
return (
58-
<>
59-
<Grid container style={{ gap: 32 }}>
60-
{slicedData.map((item, i) => (
61-
<CardContainer key={`usersrow-${i}`} container direction="row" style={{ gap: 24 }}>
62-
<Grid item container direction="row" alignItems="center" xs={12} style={{ gap: 8 }}>
63-
<Blockie address={item.address} size={24} />
64-
<Typography style={{ fontWeight: 300 }} color="textPrimary" variant="body2">
65-
{toShortAddress(item.address)}
66-
</Typography>
67-
<CopyButton text={item.address} />
68-
</Grid>
69-
<Grid item container direction="row" xs={12} style={{ gap: 20 }}>
70-
<Grid item xs={12}>
71-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
72-
Voting Weight
73-
</Typography>
74-
<Value variant="body2" color="secondary">
75-
{numbro(item.votingWeight).format(formatConfig)}
76-
</Value>
77-
</Grid>
78-
<Grid item xs={12}>
79-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
80-
Personal Balance
81-
</Typography>
82-
<Value variant="body2" color="secondary">
83-
{numbro(item.personalBalance).format(formatConfig)}
84-
</Value>
85-
</Grid>
86-
<Grid item xs={12}>
87-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
88-
Proposals Created
89-
</Typography>
90-
<Value variant="body2" color="secondary">
91-
{numbro(item.proposalsCreated?.length).format(formatConfig)}
92-
</Value>
93-
</Grid>
94-
<Grid item xs={12}>
95-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
96-
Proposals Voted
97-
</Typography>
98-
<Value variant="body2" color="secondary">
99-
{numbro(item.proposalsVoted?.length).format(formatConfig)}
100-
</Value>
101-
</Grid>
102-
</Grid>
103-
</CardContainer>
104-
))}
105-
<Grid container direction="row" justifyContent="flex-end">
106-
<ReactPaginate
107-
previousLabel={"<"}
108-
breakLabel="..."
109-
nextLabel=">"
110-
onPageChange={handlePageClick}
111-
pageRangeDisplayed={2}
112-
pageCount={pageCount}
113-
renderOnZeroPageCount={null}
114-
containerClassName={"pagination"}
115-
activeClassName={"active"}
116-
forcePage={currentPage}
117-
nextClassName="nextButton"
118-
previousClassName="nextButton"
119-
/>
120-
</Grid>
121-
</Grid>
122-
</>
123-
)
124-
}
12583

126-
const DesktopUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick, pageCount, currentPage, offset }) => {
127-
const slicedData = useMemo(() => data.slice(offset, offset + 8), [data, offset])
12884
return (
12985
<>
130-
<Grid container style={{ gap: 32 }}>
131-
{slicedData.map((item, i) => (
132-
<CardContainer key={`usersrow-${i}`} container direction="row" style={{ gap: 24 }}>
133-
<Grid item container direction="row" alignItems="center" xs={12} style={{ gap: 8 }}>
134-
<Blockie address={item.address} size={24} />
135-
<Typography style={{ fontWeight: 300 }} color="textPrimary" variant="body2">
136-
{item.address}
137-
</Typography>
138-
<CopyButton text={item.address} />
139-
</Grid>
140-
<Grid item container direction="row" xs={12} justifyContent="space-between">
141-
<Grid item>
142-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
143-
Voting Weight
144-
</Typography>
145-
<Value variant="body2" color="secondary">
146-
{numbro(item.votingWeight).format(formatConfig)}
147-
</Value>
148-
</Grid>
149-
<Grid item>
150-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
151-
Personal Balance
152-
</Typography>
153-
<Value variant="body2" color="secondary">
154-
{numbro(item.personalBalance).format(formatConfig)}
155-
</Value>
156-
</Grid>
157-
<Grid item>
158-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
159-
Proposals Created
160-
</Typography>
161-
<Value variant="body2" color="secondary">
162-
{numbro(item.proposalsCreated?.length).format(formatConfig)}
163-
</Value>
164-
</Grid>
165-
<Grid item>
166-
<Typography color="textPrimary" variant="body2" style={{ fontWeight: 500 }}>
167-
Proposals Voted
168-
</Typography>
169-
<Value variant="body2" color="secondary">
170-
{numbro(item.proposalsVoted?.length).format(formatConfig)}
171-
</Value>
172-
</Grid>
173-
</Grid>
174-
</CardContainer>
175-
))}
176-
177-
<Grid container direction="row" justifyContent="flex-end">
178-
<ReactPaginate
179-
previousLabel={"<"}
180-
breakLabel="..."
181-
nextLabel=">"
182-
onPageChange={handlePageClick}
183-
pageRangeDisplayed={2}
184-
pageCount={pageCount}
185-
renderOnZeroPageCount={null}
186-
containerClassName={"pagination"}
187-
activeClassName={"active"}
188-
forcePage={currentPage}
189-
nextClassName="nextButton"
190-
previousClassName="nextButton"
191-
/>
192-
</Grid>
86+
<TableContainer>
87+
<Table>
88+
<TableHead>
89+
<TableRow>
90+
<TableCell>
91+
<HeaderText color="textPrimary">ADDRESS</HeaderText>
92+
</TableCell>
93+
<TableCell align="right">
94+
<HeaderText color="textPrimary">BALANCE</HeaderText>
95+
</TableCell>
96+
</TableRow>
97+
</TableHead>
98+
<TableBody>
99+
{slicedData.map((item, i) => (
100+
<MemberRow key={`member-${i}`}>
101+
<AddressCell>
102+
<Blockie address={item.address} size={24} />
103+
<Typography color="textPrimary" variant="body2">
104+
{isMobile ? toShortAddress(item.address) : item.address}
105+
</Typography>
106+
<CopyButton text={item.address} />
107+
</AddressCell>
108+
<BalanceCell>
109+
<Typography color="textPrimary" variant="body2">
110+
{numbro(item.personalBalance).format(formatConfig)} {symbol}
111+
</Typography>
112+
</BalanceCell>
113+
</MemberRow>
114+
))}
115+
</TableBody>
116+
</Table>
117+
</TableContainer>
118+
119+
<Grid container direction="row" justifyContent="flex-end" style={{ marginTop: 20 }}>
120+
<ReactPaginate
121+
previousLabel={"<"}
122+
breakLabel="..."
123+
nextLabel=">"
124+
onPageChange={handlePageClick}
125+
pageRangeDisplayed={2}
126+
pageCount={pageCount}
127+
renderOnZeroPageCount={null}
128+
containerClassName={"pagination"}
129+
activeClassName={"active"}
130+
forcePage={currentPage}
131+
nextClassName="nextButton"
132+
previousClassName="nextButton"
133+
/>
193134
</Grid>
194135
</>
195136
)
196137
}
197138

198-
export const EvmMembersTable: React.FC<{ data: RowData[]; symbol: string }> = ({ data, symbol }) => {
139+
export const EvmMembersTable: React.FC<{ data: RowData[]; symbol: string; isLoading?: boolean }> = ({
140+
data,
141+
symbol,
142+
isLoading = false
143+
}) => {
199144
const theme = useTheme()
200145
const isExtraSmall = useMediaQuery(theme.breakpoints.down(820))
201146
const [currentPage, setCurrentPage] = useState(0)
@@ -215,27 +160,27 @@ export const EvmMembersTable: React.FC<{ data: RowData[]; symbol: string }> = ({
215160
}
216161
}
217162

163+
if (isLoading) {
164+
return (
165+
<Grid container justifyContent="center" alignItems="center" style={{ minHeight: 200 }}>
166+
<CircularProgress color="secondary" />
167+
</Grid>
168+
)
169+
}
170+
218171
if (!data?.length) {
219172
return <Typography color="textSecondary">No members found</Typography>
220173
}
221174

222-
return isExtraSmall ? (
223-
<MobileUsersTable
224-
data={data}
225-
symbol={symbol}
226-
handlePageClick={handlePageClick}
227-
pageCount={pageCount}
228-
currentPage={currentPage}
229-
offset={offset}
230-
/>
231-
) : (
232-
<DesktopUsersTable
175+
return (
176+
<MembersTableContent
233177
data={data}
234178
symbol={symbol}
235179
handlePageClick={handlePageClick}
236180
pageCount={pageCount}
237181
currentPage={currentPage}
238182
offset={offset}
183+
isMobile={isExtraSmall}
239184
/>
240185
)
241186
}

0 commit comments

Comments
 (0)