Skip to content

Commit d8f0dab

Browse files
KacperKoza343KacperKoza343
authored
[Dashboard] feat: use data-grid for leaderboard to fit screen (#2650)
1 parent 5a9bc38 commit d8f0dab

File tree

19 files changed

+605
-626
lines changed

19 files changed

+605
-626
lines changed

‎packages/apps/dashboard/ui-2024/.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"semi": true,
44
"singleQuote": true,
55
"tabWidth": 2,
6-
"useTabs": true,
6+
"useTabs": false,
77
"endOfLine": "lf"
88
}

‎packages/apps/dashboard/ui-2024/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@
1717
"@emotion/styled": "^11.11.5",
1818
"@mui/icons-material": "^6.1.1",
1919
"@mui/material": "^5.15.18",
20-
"@mui/styled-engine-sc": "6.1.7",
20+
"@mui/styled-engine-sc": "6.1.3",
21+
"@mui/x-data-grid": "^7.22.2",
2122
"@mui/x-date-pickers": "^7.5.0",
22-
"@tanstack/react-query": "^5.60.5",
23+
"@tanstack/react-query": "^5.48.0",
2324
"@types/react-router-dom": "^5.3.3",
2425
"@types/recharts": "^1.8.29",
2526
"axios": "^1.7.2",
@@ -39,7 +40,7 @@
3940
"zustand": "^4.5.4"
4041
},
4142
"devDependencies": {
42-
"@types/react": "^18.3.12",
43+
"@types/react": "^18.2.66",
4344
"@types/react-dom": "^18.2.22",
4445
"@typescript-eslint/eslint-plugin": "^7.2.0",
4546
"@typescript-eslint/parser": "^7.2.0",
@@ -50,7 +51,7 @@
5051
"prettier": "3.2.5",
5152
"sass": "^1.78.0",
5253
"stylelint-prettier": "^5.0.0",
53-
"typescript": "^5.6.3",
54+
"typescript": "^5.2.2",
5455
"vite": "^5.4.7",
5556
"vite-plugin-svgr": "^4.2.0"
5657
}

‎packages/apps/dashboard/ui-2024/src/assets/styles/_home-page.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@
8787

8888
.home-page-table-header {
8989
background-color: $whiteSolid;
90+
height: 72px;
91+
color: #320a8d;
92+
text-transform: uppercase;
93+
border: 0;
94+
margin-bottom: 15px;
95+
9096
th {
9197
font-size: 12px;
9298
}
@@ -117,7 +123,7 @@
117123
padding: 4px 8px;
118124
border-radius: 16px;
119125
font-size: 13px;
120-
display: inline-block;
126+
display: inline;
121127
}
122128

123129
.reputation-table-medium {
@@ -163,7 +169,6 @@
163169
display: none;
164170
margin-bottom: 20px;
165171
@media (max-width: 1100px) {
166-
width: 100%;
167172
display: block;
168173
}
169174
}

‎packages/apps/dashboard/ui-2024/src/components/Home/FormatNumber.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const FormatNumberWithDecimals = ({
2020
value: number | string | undefined | null;
2121
}) => {
2222
if (value && Number(value) < 1) {
23-
return value;
23+
return <span>{value}</span>;
2424
}
2525
return (
2626
<NumericFormat

‎packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/AddressCell.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import AbbreviateClipboard from '@components/SearchResults/AbbreviateClipboard';
2+
import { Box } from '@mui/material';
3+
4+
export const AddressCell = ({
5+
chainId,
6+
address,
7+
}: {
8+
chainId: string;
9+
address: string;
10+
}) => (
11+
<Box display="flex" alignItems="center" gap="18px" height="100%">
12+
<AbbreviateClipboard
13+
value={address}
14+
link={`/search/${chainId}/${address}`}
15+
/>
16+
</Box>
17+
);

‎packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/ChainCell.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Typography } from '@mui/material';
2+
import { NetworkIcon } from '@components/NetworkIcon';
3+
import { getNetwork } from '@utils/config/networks';
4+
5+
export const ChainCell = ({ chainId }: { chainId: number }) => (
6+
<Typography
7+
variant="body1"
8+
whiteSpace="nowrap"
9+
flexWrap="nowrap"
10+
alignItems="center"
11+
display="flex"
12+
justifyContent="flex-start"
13+
gap="6px"
14+
height="100%"
15+
>
16+
<NetworkIcon chainId={chainId} />
17+
{getNetwork(chainId)?.name}
18+
</Typography>
19+
);

‎packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/DataGridWrapper.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { LeaderBoardData } from '@services/api/use-leaderboard-details';
2+
import { Box, Typography } from '@mui/material';
3+
import { handleErrorMessage } from '@services/handle-error-message';
4+
import Loader from '@components/Loader';
5+
import { useBreakPoints } from '@utils/hooks/use-is-mobile';
6+
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
7+
8+
import { useDataGrid } from '../hooks/useDataGrid';
9+
import { useDatagridOptions } from '../hooks/useDatagridOptions';
10+
11+
export const DataGridWrapper = ({
12+
data = [],
13+
status,
14+
error,
15+
}: {
16+
data: LeaderBoardData | undefined;
17+
status: 'success' | 'error' | 'pending';
18+
error: unknown;
19+
}) => {
20+
const apiRef = useGridApiRef();
21+
const { columns, visibleRows } = useDataGrid(data);
22+
const { customizedColumns, handleSortModelChange, pinnedColSx } =
23+
useDatagridOptions<(typeof visibleRows)[number]>({
24+
apiRef,
25+
columns,
26+
isRowIdx: true,
27+
pinnedColumnName: 'role',
28+
});
29+
const {
30+
mobile: { isMobile },
31+
} = useBreakPoints();
32+
33+
const tableIsEmpty = status === 'success' && visibleRows.length === 0;
34+
const tableMinHeight = status === 'success' && !tableIsEmpty ? 'unset' : 300;
35+
36+
return (
37+
<Box width="100%" height={tableMinHeight} sx={{ overflow: 'hidden' }}>
38+
<DataGrid
39+
disableColumnResize
40+
hideFooterPagination
41+
disableColumnMenu
42+
disableColumnSelector
43+
disableRowSelectionOnClick
44+
hideFooter
45+
disableVirtualization={isMobile}
46+
apiRef={apiRef}
47+
loading={status === 'pending'}
48+
rows={visibleRows}
49+
columns={customizedColumns}
50+
autosizeOptions={{
51+
expand: true,
52+
}}
53+
onSortModelChange={handleSortModelChange}
54+
initialState={{
55+
sorting: {
56+
sortModel: [{ field: 'amountStaked', sort: 'desc' }],
57+
},
58+
}}
59+
slots={{
60+
noRowsOverlay() {
61+
if (status === 'error') {
62+
return <div>{handleErrorMessage(error)}</div>;
63+
}
64+
65+
return (
66+
<Box
67+
height="100%"
68+
display="flex"
69+
justifyContent="center"
70+
alignItems="center"
71+
>
72+
<Typography>No data</Typography>
73+
</Box>
74+
);
75+
},
76+
loadingOverlay() {
77+
return <Loader height="30vh" />;
78+
},
79+
}}
80+
rowHeight={125}
81+
columnHeaderHeight={72}
82+
sx={{
83+
position: 'relative',
84+
border: 0,
85+
marginBottom: '16px',
86+
'& .MuiDataGrid-cell': {
87+
borderTop: 'none',
88+
padding: '0 8px',
89+
overflow: 'visible !important',
90+
},
91+
'& .MuiDataGrid-row': {
92+
borderTop: isMobile ? '15px solid rgb(255, 255, 255)' : '',
93+
},
94+
'& .MuiDataGrid-row:hover': {
95+
background: 'rgba(20, 6, 178, 0.04)',
96+
},
97+
'& .MuiDataGrid-cell:focus': {
98+
outline: 'none',
99+
},
100+
'& .MuiDataGrid-cell:focus-within': {
101+
outline: 'none',
102+
},
103+
'& .MuiDataGrid-columnSeparator--sideRight': {
104+
display: 'none',
105+
},
106+
'& .MuiDataGrid-columnHeader': {
107+
padding: '0 16px',
108+
overflow: 'visible !important',
109+
},
110+
'& .MuiDataGrid-columnHeader:hover': {
111+
color: 'rgb(133, 142, 198)',
112+
},
113+
'& .MuiDataGrid-row--borderBottom .MuiDataGrid-withBorderColor': {
114+
borderColor: 'transparent',
115+
},
116+
'& .MuiDataGrid-overlayWrapper': {
117+
height: '100%',
118+
},
119+
'& .MuiDataGrid-columnHeaderTitleContainerContent ': {
120+
overflow: 'visible',
121+
},
122+
'& .MuiDataGrid-columnHeaderTitleContainer': {
123+
overflow: 'unset',
124+
},
125+
'& .MuiDataGrid-columnHeader:focus': {
126+
outline: 'none',
127+
},
128+
'& .MuiDataGrid-virtualScroller': {
129+
position: 'relative',
130+
},
131+
'& .MuiDataGrid-filler': {
132+
display: 'none',
133+
},
134+
...pinnedColSx,
135+
}}
136+
getRowClassName={() => 'home-page-table-row'}
137+
/>
138+
</Box>
139+
);
140+
};

‎packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/RoleCell.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Box, Typography } from '@mui/material';
2+
import { useBreakPoints } from '@utils/hooks/use-is-mobile';
3+
4+
import { EntityIcon } from './EntityIcon';
5+
6+
export const RoleCell = ({ role }: { role: string }) => {
7+
const {
8+
mobile: { isMobile },
9+
} = useBreakPoints();
10+
11+
return (
12+
<Box display="flex" alignItems="center" gap="6px" height="100%">
13+
{!isMobile && <EntityIcon role={role} />}
14+
<Typography
15+
variant={isMobile ? 'subtitle2' : 'h6'}
16+
sx={{
17+
wordBreak: 'unset',
18+
width: '100%',
19+
whiteSpace: isMobile ? 'wrap' : 'nowrap',
20+
}}
21+
>
22+
{role}
23+
</Typography>
24+
</Box>
25+
);
26+
};

‎packages/apps/dashboard/ui-2024/src/features/Leaderboard/components/SelectNetwork.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const SelectNetwork = () => {
3232
<FormControl
3333
fullWidth
3434
size="small"
35-
sx={{ width: isMobile ? '100%' : '210px' }}
35+
sx={{ width: isMobile ? '100%' : '210px', textTransform: 'none' }}
3636
>
3737
<InputLabel id="network-select-label">By Network</InputLabel>
3838
<Select<number>

0 commit comments

Comments
 (0)