From 8c96974c7f2139f4104aeff0cea301e44d02e4a8 Mon Sep 17 00:00:00 2001
From: pvsaint <vpeter817@gmail.com>
Date: Thu, 30 Jan 2025 14:21:30 +0100
Subject: [PATCH 1/3] feat:create leaderboard page

---
 frontend/src/App.jsx                          |  2 +
 .../src/pages/leaderboard/Leaderboard.jsx     | 92 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 frontend/src/pages/leaderboard/Leaderboard.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e4068068..e40d7725 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -25,6 +25,7 @@ import PositionHistory from '@/pages/position-history/PositionHistory';
 import WithdrawAll from '@/pages/spotnet/dashboard/withdraw-all/WithdrawAll';
 import { DefiSpringPage } from '@/pages/spotnet/defi-spring/DefiSpring';
 import { AddDeposit } from '@/pages/add-deposit/AddDeposit';
+import Leaderboard from '@/pages/leaderboard/Leaderboard';
 
 function App() {
   const { setWalletId, removeWalletId } = useWalletStore();
@@ -114,6 +115,7 @@ function App() {
           <Route path="/terms-and-conditions" element={<TermsAndConditionsPage />} />
           <Route path="/stake" element={<Stake />} />
           <Route path="/defispring" element={<DefiSpringPage />} />
+          <Route path="/leaderboard" element={<Leaderboard />} />
         </Routes>
       </main>
       <Footer />
diff --git a/frontend/src/pages/leaderboard/Leaderboard.jsx b/frontend/src/pages/leaderboard/Leaderboard.jsx
new file mode 100644
index 00000000..babfb082
--- /dev/null
+++ b/frontend/src/pages/leaderboard/Leaderboard.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+// import { Card, CardHeader, CardContent } from '@/components/ui/card';
+import { ArrowUpDown, Bug } from 'lucide-react';
+
+const Leaderboard = () => {
+  const stats = {
+    usdcPosition: 48390048,
+    ethPosition: 2930,
+    strgPosition: 89002039,
+  };
+
+  const leaderboardData = [
+    { id: 1, name: '0x2326cE85ff591f2aBC3f5c2559...', positions: 98 },
+    { id: 2, name: '0x5294cE85ff591f2aBC3f5c7893...', positions: 96 },
+    { id: 3, name: '0x7754cE85ff591f2aBC3f5c2893...', positions: 95 },
+    { id: 4, name: '0x9924cE85ff591f2aBC3f5c2893...', positions: 94 },
+    { id: 5, name: '0x1124cE85ff591f2aBC3f5c2893...', positions: 93 },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-6 text-white">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-2xl font-bold">zkLend Leaderboard</h1>
+          <button className="flex items-center gap-2 bg-gray-800 px-4 py-2 rounded-lg">
+            <Bug size={18} />
+            <span className="text-sm">Report Bug</span>
+          </button>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-3 gap-4 mb-8">
+          <section className="bg-gray-800 border-gray-700">
+            <div className="p-4">
+              <div className="text-sm text-gray-400">USDC Position</div>
+              <div className="text-xl font-bold">{stats.usdcPosition.toLocaleString()}</div>
+            </div>
+          </section>
+
+          <section className="bg-gray-800 border-gray-700">
+            <div className="p-4">
+              <div className="text-sm text-gray-400">ETH Position</div>
+              <div className="text-xl font-bold">{stats.ethPosition.toLocaleString()}</div>
+            </div>
+          </section>
+
+          <section className="bg-gray-800 border-gray-700">
+            <div className="p-4">
+              <div className="text-sm text-gray-400">STRG Position</div>
+              <div className="text-xl font-bold">{stats.strgPosition.toLocaleString()}</div>
+            </div>
+          </section>
+        </div>
+
+        {/* Leaderboard Table */}
+        <section className="bg-gray-800 border-gray-700">
+          <div className="border-b border-gray-700">
+            <h2 className="text-xl font-bold">Leaderboard</h2>
+          </div>
+          <div>
+            <table className="w-full">
+              <thead>
+                <tr className="text-gray-400 text-sm">
+                  <th className="text-left py-4">Name</th>
+                  <th className="text-left py-4">Opened Positions</th>
+                  <th className="text-left py-4">Tokens</th>
+                </tr>
+              </thead>
+              <tbody>
+                {leaderboardData.map((item) => (
+                  <tr key={item.id} className="border-t border-gray-700">
+                    <td className="py-4">{item.name}</td>
+                    <td className="py-4">{item.positions}</td>
+                    <td className="py-4">
+                      <div className="flex gap-2">
+                        <div className="w-6 h-6 bg-blue-500 rounded-full"></div>
+                        <ArrowUpDown size={18} className="text-gray-400" />
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default Leaderboard;

From 3727782adf01a8da0df58af9dd4ce293ab0a04dd Mon Sep 17 00:00:00 2001
From: pvsaint <vpeter817@gmail.com>
Date: Thu, 30 Jan 2025 16:46:10 +0100
Subject: [PATCH 2/3] chore:complete leaderboard page

---
 .../src/pages/leaderboard/Leaderboard.jsx     | 120 +++++++++++-------
 1 file changed, 74 insertions(+), 46 deletions(-)

diff --git a/frontend/src/pages/leaderboard/Leaderboard.jsx b/frontend/src/pages/leaderboard/Leaderboard.jsx
index babfb082..23b831ef 100644
--- a/frontend/src/pages/leaderboard/Leaderboard.jsx
+++ b/frontend/src/pages/leaderboard/Leaderboard.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-// import { Card, CardHeader, CardContent } from '@/components/ui/card';
-import { ArrowUpDown, Bug } from 'lucide-react';
+import UsdIcon from '@/assets/icons/usd_coin.svg?react';
+import StrkIcon from '@/assets/icons/strk.svg?react';
+import EthIcon from '@/assets/icons/ethereum.svg?react';
 
 const Leaderboard = () => {
   const stats = {
@@ -9,75 +10,102 @@ const Leaderboard = () => {
     strgPosition: 89002039,
   };
 
+  const tokenIcon = {
+    STRK: <StrkIcon className="token-icon" />,
+    USDC: <UsdIcon className="token-icon" />,
+    ETH: <EthIcon className="token-icon" />,
+  };
+
   const leaderboardData = [
-    { id: 1, name: '0x2326cE85ff591f2aBC3f5c2559...', positions: 98 },
-    { id: 2, name: '0x5294cE85ff591f2aBC3f5c7893...', positions: 96 },
-    { id: 3, name: '0x7754cE85ff591f2aBC3f5c2893...', positions: 95 },
-    { id: 4, name: '0x9924cE85ff591f2aBC3f5c2893...', positions: 94 },
-    { id: 5, name: '0x1124cE85ff591f2aBC3f5c2893...', positions: 93 },
+    { id: 1, name: 'Name', address: '0x2326cE85ff591f2aBC3f5c2559...', positions: 98 },
+    { id: 2, name: 'Name', address: '0x5294cE85ff591f2aBC3f5c7893...', positions: 96 },
+    { id: 3, name: 'Name', address: '0x7754cE85ff591f2aBC3f5c2893...', positions: 95 },
+    { id: 4, name: 'Name', address: '0x9924cE85ff591f2aBC3f5c2893...', positions: 94 },
+    { id: 5, name: 'Name', address: '0x1124cE85ff591f2aBC3f5c2893...', positions: 93 },
+    { id: 6, name: 'Name', address: '0x1124cE85ff591f2aBC3f5c2893...', positions: 93 },
+    { id: 7, name: 'Name', address: '0x1124cE85ff591f2aBC3f5c2893...', positions: 93 },
   ];
 
   return (
-    <div className="min-h-screen bg-gray-900 p-6 text-white">
-      <div className="max-w-4xl mx-auto">
+    <main className="min-h-screen bg-[url(/assets/background-form.png)] p-6 text-white">
+      <div className="w-[764px] mx-auto">
         {/* Header */}
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-2xl font-bold">zkLend Leaderboard</h1>
-          <button className="flex items-center gap-2 bg-gray-800 px-4 py-2 rounded-lg">
-            <Bug size={18} />
-            <span className="text-sm">Report Bug</span>
-          </button>
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-center">zkLend Leaderboard</h1>
         </div>
 
         {/* Stats Cards */}
-        <div className="grid grid-cols-3 gap-4 mb-8">
-          <section className="bg-gray-800 border-gray-700">
+        <section className="grid grid-cols-3 gap-4 mb-8">
+          <div className="border border-[#36294E] p-4 rounded-lg">
             <div className="p-4">
-              <div className="text-sm text-gray-400">USDC Position</div>
-              <div className="text-xl font-bold">{stats.usdcPosition.toLocaleString()}</div>
+              <div className="flex gap-2 text-[14px] text-gray-400">
+                <span>{tokenIcon.USDC}</span>USDC Position
+              </div>
+              <div className="text-[24px] font-bold text-center text-[#F0F0F0]">
+                {stats.usdcPosition.toLocaleString()}
+              </div>
             </div>
-          </section>
+          </div>
 
-          <section className="bg-gray-800 border-gray-700">
+          <div className="border border-[#36294E] p-4 rounded-lg">
             <div className="p-4">
-              <div className="text-sm text-gray-400">ETH Position</div>
-              <div className="text-xl font-bold">{stats.ethPosition.toLocaleString()}</div>
+              <div className="flex gap-2 text-[14px] text-gray-400">
+                <span>{tokenIcon.ETH}</span>ETH Position
+              </div>
+              <div className="text-[24px] font-bold text-center text-[#F0F0F0]">
+                {stats.ethPosition.toLocaleString()}
+              </div>
             </div>
-          </section>
+          </div>
 
-          <section className="bg-gray-800 border-gray-700">
+          <div className="border border-[#36294E] p-4 rounded-lg">
             <div className="p-4">
-              <div className="text-sm text-gray-400">STRG Position</div>
-              <div className="text-xl font-bold">{stats.strgPosition.toLocaleString()}</div>
+              <div className="flex gap-2 text-[14px] text-gray-400">
+                <span>{tokenIcon.STRK}</span>STRK Position
+              </div>
+              <div className="text-[24px] font-bold text-center text-[#F0F0F0]">
+                {stats.strgPosition.toLocaleString()}
+              </div>
             </div>
-          </section>
-        </div>
+          </div>
+        </section>
 
         {/* Leaderboard Table */}
-        <section className="bg-gray-800 border-gray-700">
-          <div className="border-b border-gray-700">
+        <section className="border-[#36294E]">
+          <div className="mb-5">
             <h2 className="text-xl font-bold">Leaderboard</h2>
           </div>
-          <div>
+          <div className="border border-[#36294E] p-[24px] rounded-lg">
             <table className="w-full">
               <thead>
-                <tr className="text-gray-400 text-sm">
-                  <th className="text-left py-4">Name</th>
-                  <th className="text-left py-4">Opened Positions</th>
-                  <th className="text-left py-4">Tokens</th>
+                <tr className="flex flex-row items-center gap-[150px] text-gray-400 text-sm border-b border-[#36294E]">
+                  <th className="text-left py-4 pl-5 text-[14px]">Name</th>
+                  <th className="text-left py-4 pl-8 text-[14px]">Opened Positions</th>
+                  <th className="text-left py-4 text-[14px]">Tokens</th>
                 </tr>
               </thead>
               <tbody>
                 {leaderboardData.map((item) => (
-                  <tr key={item.id} className="border-t border-gray-700">
-                    <td className="py-4">{item.name}</td>
-                    <td className="py-4">{item.positions}</td>
-                    <td className="py-4">
-                      <div className="flex gap-2">
-                        <div className="w-6 h-6 bg-blue-500 rounded-full"></div>
-                        <ArrowUpDown size={18} className="text-gray-400" />
-                      </div>
-                    </td>
+                  <tr key={item.id} className="flex flex-row items-center gap-[250px] text-[#83919F]">
+                    <span className="flex flex-row justify-between items-center gap-10">
+                      <tr className="flex flex-row gap-5 items-center">
+                        <td className="text-[12px]">{item.id}.</td>
+                        <tr className="flex flex-col">
+                          <td className="text-[14px]">{item.name}</td>
+                          <td className="text-[12px]">{item.address}</td>
+                        </tr>
+                      </tr>
+                      <span>
+                        <td className="py-4 text-[14px]">{item.positions}</td>
+                      </span>
+                    </span>
+                    <tr className="flex flex-row justify-between items-center">
+                      <span>
+                        <td className="py-4">
+                          <div className="flex gap-1">{tokenIcon.ETH}</div>
+                        </td>
+                      </span>
+                    </tr>
                   </tr>
                 ))}
               </tbody>
@@ -85,7 +113,7 @@ const Leaderboard = () => {
           </div>
         </section>
       </div>
-    </div>
+    </main>
   );
 };
 

From b1cbf366a020db97e5027d2acd329725c1f415c8 Mon Sep 17 00:00:00 2001
From: pvsaint <vpeter817@gmail.com>
Date: Thu, 30 Jan 2025 16:57:46 +0100
Subject: [PATCH 3/3] fix:padding

---
 frontend/src/pages/leaderboard/Leaderboard.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/leaderboard/Leaderboard.jsx b/frontend/src/pages/leaderboard/Leaderboard.jsx
index 23b831ef..304b3888 100644
--- a/frontend/src/pages/leaderboard/Leaderboard.jsx
+++ b/frontend/src/pages/leaderboard/Leaderboard.jsx
@@ -36,7 +36,7 @@ const Leaderboard = () => {
 
         {/* Stats Cards */}
         <section className="grid grid-cols-3 gap-4 mb-8">
-          <div className="border border-[#36294E] p-4 rounded-lg">
+          <div className="border border-[#36294E] py-[16px] px-[24px] rounded-lg">
             <div className="p-4">
               <div className="flex gap-2 text-[14px] text-gray-400">
                 <span>{tokenIcon.USDC}</span>USDC Position
@@ -47,7 +47,7 @@ const Leaderboard = () => {
             </div>
           </div>
 
-          <div className="border border-[#36294E] p-4 rounded-lg">
+          <div className="border border-[#36294E] py-[16px] px-[24px] rounded-lg">
             <div className="p-4">
               <div className="flex gap-2 text-[14px] text-gray-400">
                 <span>{tokenIcon.ETH}</span>ETH Position
@@ -58,7 +58,7 @@ const Leaderboard = () => {
             </div>
           </div>
 
-          <div className="border border-[#36294E] p-4 rounded-lg">
+          <div className="border border-[#36294E] py-[16px] px-[24px] rounded-lg">
             <div className="p-4">
               <div className="flex gap-2 text-[14px] text-gray-400">
                 <span>{tokenIcon.STRK}</span>STRK Position
@@ -102,7 +102,10 @@ const Leaderboard = () => {
                     <tr className="flex flex-row justify-between items-center">
                       <span>
                         <td className="py-4">
-                          <div className="flex gap-1">{tokenIcon.ETH}</div>
+                          <div className="flex">
+                            {tokenIcon.ETH}
+                            {tokenIcon.STRK}
+                          </div>
                         </td>
                       </span>
                     </tr>