feat: support reward table & rank table

Author: cuzz-venus

apps/evm/src/components/Pagination/index.tsx

@@ -27,6 +27,7 @@ interface PaginationProps {
   onChange: (newPageIndex: number) => void;
   initialPageIndex?: number;
   itemsPerPageCount?: number;
+  paramKey?: string;
   className?: string;
 }
 
@@ -35,6 +36,7 @@ export const Pagination = ({
   onChange,
   initialPageIndex,
   itemsPerPageCount,
+  paramKey,
   className,
 }: PaginationProps) => {
   const {
@@ -51,6 +53,7 @@ export const Pagination = ({
       onChange(newPageIndex + (initialPageIndex || 0));
     },
     itemsPerPageCount,
+    paramKey,
   });
 
   const styles = useStyles();

apps/evm/src/components/Pagination/usePagination.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router';
 
 import { PAGE_CONTAINER_ID } from 'constants/layout';
@@ -9,31 +9,45 @@ type PaginationProps = {
   itemsCount: number;
   onChange: (newPageIndex: number) => void;
   itemsPerPageCount?: number;
+  // Search param key holding the active page, so several tables can paginate independently
+  paramKey?: string;
 };
 
 const PAGES_TO_SHOW_COUNT = 4;
 
-export function usePagination({ itemsCount, onChange, itemsPerPageCount = 10 }: PaginationProps) {
+export function usePagination({
+  itemsCount,
+  onChange,
+  itemsPerPageCount = 10,
+  paramKey = PAGE_PARAM_KEY,
+}: PaginationProps) {
   const { t } = useTranslation();
   const scrollElem = document.getElementById(PAGE_CONTAINER_ID);
 
   const [searchParams, setSearchParams] = useSearchParams();
 
+  const setPageParam = useCallback(
+    (page: string) =>
+      setSearchParams(currentSearchParams => ({
+        ...Object.fromEntries(currentSearchParams),
+        [paramKey]: page,
+      })),
+    [setSearchParams, paramKey],
+  );
+
   const [urlPageParam, activePageIndex] = useMemo(() => {
-    const pageParam = searchParams.get(PAGE_PARAM_KEY);
+    const pageParam = searchParams.get(paramKey);
     const pageIndex = pageParam ? +pageParam - 1 : 0;
 
     return [pageParam, pageIndex];
-  }, [searchParams]);
+  }, [searchParams, paramKey]);
 
   // Automatically set default page param if none was set
   useEffect(() => {
     if (urlPageParam === undefined) {
-      setSearchParams({
-        [PAGE_PARAM_KEY]: '1',
-      });
+      setPageParam('1');
     }
-  }, [urlPageParam, setSearchParams]);
+  }, [urlPageParam, setPageParam]);
 
   const [pagesCount, setPagesCount] = useState(0);
 
@@ -68,9 +82,7 @@ export function usePagination({ itemsCount, onChange, itemsPerPageCount = 10 }:
     : activePageIndex + halfOfPagesCount;
 
   const handlePageChange = (pageIndex: number) => {
-    setSearchParams({
-      [PAGE_PARAM_KEY]: pageIndex.toString(),
-    });
+    setPageParam(pageIndex.toString());
 
     onChange(pageIndex);
 

apps/evm/src/hooks/useUrlPagination/index.ts

@@ -9,22 +9,29 @@ export type UseUrlPaginationOutput = {
 export const PAGE_PARAM_DEFAULT_VALUE = 1;
 export const PAGE_PARAM_KEY = 'page';
 
-export const useUrlPagination = (): UseUrlPaginationOutput => {
+export interface UseUrlPaginationInput {
+  // Search param key holding the active page, so several tables can paginate independently
+  paramKey?: string;
+}
+
+export const useUrlPagination = ({
+  paramKey = PAGE_PARAM_KEY,
+}: UseUrlPaginationInput = {}): UseUrlPaginationOutput => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const pageIndex = searchParams.get(PAGE_PARAM_KEY) ?? undefined;
+  const pageIndex = searchParams.get(paramKey) ?? undefined;
 
   const setPageIndex = useCallback(
     (newPageIndex: string | number) =>
       setSearchParams(
         currentSearchParams => ({
           ...Object.fromEntries(currentSearchParams),
-          [PAGE_PARAM_KEY]: String(newPageIndex),
+          [paramKey]: String(newPageIndex),
         }),
         {
           replace: true,
         },
       ),
-    [setSearchParams],
+    [setSearchParams, paramKey],
   );
 
   useEffect(() => {

apps/evm/src/libs/translations/translations/en.json

@@ -1261,6 +1261,20 @@
       "sec": "Sec",
       "title": "End of cycle"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Prime score",
+        "wallet": "Wallet"
+      },
+      "walletTooltip": "Users ranked by Prime score. The top 500 wallets become eligible for Prime in the next cycle."
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "{{symbol}} rewards",
+        "totalRewards": "Total rewards",
+        "wallet": "Wallet"
+      }
+    },
     "tablesRefreshNote": "Refreshed hourly · Last refresh: {{date, distanceToNow}} ago",
     "title": "Prime leaderboard"
   },

apps/evm/src/libs/translations/translations/ja.json

@@ -1261,6 +1261,20 @@
       "sec": "秒",
       "title": "サイクル終了"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Prime スコア",
+        "wallet": "ウォレット"
+      },
+      "walletTooltip": "Prime スコア順のランキングです。上位 500 のウォレットが次のサイクルで Prime の対象になります。"
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "{{symbol}} の報酬",
+        "totalRewards": "報酬合計",
+        "wallet": "ウォレット"
+      }
+    },
     "tablesRefreshNote": "1時間ごとに更新 · 最終更新：{{date, distanceToNow}}前",
     "title": "Prime リーダーボード"
   },

apps/evm/src/libs/translations/translations/th.json

@@ -1261,6 +1261,20 @@
       "sec": "วินาที",
       "title": "สิ้นสุดรอบ"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "คะแนน Prime",
+        "wallet": "กระเป๋าเงิน"
+      },
+      "walletTooltip": "ผู้ใช้จัดอันดับตามคะแนน Prime กระเป๋าเงิน 500 อันดับแรกจะมีสิทธิ์รับ Prime ในรอบถัดไป"
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "รางวัล {{symbol}}",
+        "totalRewards": "รางวัลทั้งหมด",
+        "wallet": "กระเป๋าเงิน"
+      }
+    },
     "tablesRefreshNote": "รีเฟรชทุกชั่วโมง · รีเฟรชล่าสุด: {{date, distanceToNow}} ที่แล้ว",
     "title": "กระดานผู้นำ Prime"
   },

apps/evm/src/libs/translations/translations/tr.json

@@ -1261,6 +1261,20 @@
       "sec": "Sn.",
       "title": "Döngü sonu"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Prime puanı",
+        "wallet": "Cüzdan"
+      },
+      "walletTooltip": "Kullanıcılar Prime puanına göre sıralanır. İlk 500 cüzdan bir sonraki döngüde Prime için uygun olur."
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "{{symbol}} ödülleri",
+        "totalRewards": "Toplam ödüller",
+        "wallet": "Cüzdan"
+      }
+    },
     "tablesRefreshNote": "Saatlik yenilenir · Son yenileme: {{date, distanceToNow}} önce",
     "title": "Prime lider tablosu"
   },

apps/evm/src/libs/translations/translations/vi.json

@@ -1261,6 +1261,20 @@
       "sec": "Giây",
       "title": "Kết thúc chu kỳ"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Điểm Prime",
+        "wallet": "Ví"
+      },
+      "walletTooltip": "Người dùng được xếp hạng theo điểm Prime. 500 ví dẫn đầu sẽ đủ điều kiện nhận Prime trong chu kỳ tiếp theo."
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "Phần thưởng {{symbol}}",
+        "totalRewards": "Tổng phần thưởng",
+        "wallet": "Ví"
+      }
+    },
     "tablesRefreshNote": "Làm mới mỗi giờ · Lần làm mới cuối: {{date, distanceToNow}} trước",
     "title": "Bảng xếp hạng Prime"
   },

apps/evm/src/libs/translations/translations/zh-Hans.json

@@ -1261,6 +1261,20 @@
       "sec": "秒",
       "title": "周期结束"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Prime 分数",
+        "wallet": "钱包"
+      },
+      "walletTooltip": "用户按 Prime 分数排名。排名前 500 的钱包将在下个周期获得 Prime 资格。"
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "{{symbol}} 奖励",
+        "totalRewards": "总奖励",
+        "wallet": "钱包"
+      }
+    },
     "tablesRefreshNote": "每小时刷新 · 上次刷新：{{date, distanceToNow}}前",
     "title": "Prime 排行榜"
   },

apps/evm/src/libs/translations/translations/zh-Hant.json

@@ -1261,6 +1261,20 @@
       "sec": "秒",
       "title": "週期結束"
     },
+    "rankTable": {
+      "columns": {
+        "primeScore": "Prime 分數",
+        "wallet": "錢包"
+      },
+      "walletTooltip": "使用者依 Prime 分數排名。排名前 500 的錢包將在下個週期取得 Prime 資格。"
+    },
+    "rewardTable": {
+      "columns": {
+        "marketRewards": "{{symbol}} 獎勵",
+        "totalRewards": "總獎勵",
+        "wallet": "錢包"
+      }
+    },
     "tablesRefreshNote": "每小時刷新 · 上次刷新：{{date, distanceToNow}}前",
     "title": "Prime 排行榜"
   },