@@ -47,63 +78,90 @@ const Leaderboard: React.FC
= ({ userId, list, onColumnClick }) => {
onClick(LeaderboardColumn.TotalValueLocked)}
+ onClick={() => onSort(LeaderboardColumn.TotalValueLocked)}
>
TVL, $ {col === LeaderboardColumn.TotalValueLocked ? arrow : null}
|
+ Address |
onClick(LeaderboardColumn.ChallengesCompleted)}
+ onClick={() => onSort(LeaderboardColumn.ChallengesCompleted)}
>
Number of challenges{" "}
{col === LeaderboardColumn.ChallengesCompleted ? arrow : null}
|
onClick(LeaderboardColumn.MinutesSpent)}
+ onClick={() => onSort(LeaderboardColumn.MinutesSpent)}
>
Minutes spent{" "}
{col === LeaderboardColumn.MinutesSpent ? arrow : null}
|
-
- {list.map((item) => {
- const isCurrent = userId === item.userId;
- return (
-
-
+ {list.map((item) => {
+ const isCurrent = userId === item.userId;
+ return (
+ |
-
- {item.ranking.current}
-
- {isCurrent ? (
- <>
- you are here!
-
- >
- ) : null}
-
- {item.totalValueLocked} |
- {item.challengesCompleted} |
- {item.minutesSpent} |
-
- );
- })}
-
+
+ {item.ranking.current}
+
+ {isCurrent ? (
+ <>
+ you are here!
+
+ >
+ ) : null}
+
+ {item.totalValueLocked} |
+ {`${item.userId.slice(
+ 0,
+ 4,
+ )}...${item.userId.slice(-4)}`} |
+ {item.challengesCompleted} |
+ {item.minutesSpent} |
+
+ );
+ })}
+
+ )}
+ {isLoading ? Loading
: null}
+
+
+
+
);
};
diff --git a/src/components/molecules/leaderboard/style.module.css b/src/components/molecules/leaderboard/style.module.css
index 7e9daa62..5a136967 100644
--- a/src/components/molecules/leaderboard/style.module.css
+++ b/src/components/molecules/leaderboard/style.module.css
@@ -71,9 +71,7 @@ th {
.userRankingCellNum {
border: none;
- padding: 5px;
- width: 37px;
- height: 37px;
+ padding: 5px 10px;
background-color: #ffd748;
margin-right: 5px;
}
@@ -95,3 +93,26 @@ th {
color: #585858;
font-size: 22px;
}
+
+.paginationBlock {
+ display: flex;
+ gap: 10px;
+ align-self: flex-end;
+}
+
+.paginationButton {
+ padding: 10px;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: var(--ifm-font-family-base);
+ border-radius: 4px;
+ border: none;
+ cursor: pointer;
+}
+
+.loading {
+ height: 536px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 8e43fa7b..0ac7fe16 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -35,6 +35,8 @@ export default function Dashboard() {
const [totalCompleted, setTotalCompleted] = useState