From 220791ec3e7273017578b850e59bf171714bfeb0 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 9 Oct 2024 17:58:40 +0100
Subject: [PATCH 01/43] Added Leaderboard card

---
 src/app/_components/LeaderboardCard.tsx | 58 +++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/app/_components/LeaderboardCard.tsx

diff --git a/src/app/_components/LeaderboardCard.tsx b/src/app/_components/LeaderboardCard.tsx
new file mode 100644
index 000000000..a137225f6
--- /dev/null
+++ b/src/app/_components/LeaderboardCard.tsx
@@ -0,0 +1,58 @@
+import { Users } from "lucide-react";
+
+import Trophy from "@/common/assets/svgs/Trophy";
+
+interface LeaderboardCardProps {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  type: "donor" | "sponsor";
+}
+
+export function LeaderboardCard({
+  rank,
+  image,
+  name,
+  amount,
+  type,
+}: LeaderboardCardProps) {
+  const bgClass =
+    rank === 1
+      ? "bg-gradient-to-r from-orange-400 to-red-500 text-white"
+      : rank === 2
+        ? "bg-gray-200"
+        : "bg-gradient-to-r from-orange-200 to-red-200";
+
+  const rankText = ["1st", "2nd", "3rd"][rank - 1];
+  const iconClass = rank === 1 ? "fill-yellow-400" : "fill-gray-600";
+
+  return (
+    <div
+      className={`min-w-fit overflow-hidden rounded-2xl border border-gray-200 pb-4`}
+    >
+      <div className={`mb-4 flex items-center justify-between p-4 ${bgClass}`}>
+        <div className={`p-2`}>
+          {type === "donor" ? (
+            <Trophy className={`h-6 w-6 ${iconClass}`} />
+          ) : (
+            <Users className={`h-6 w-6 ${iconClass}`} />
+          )}
+        </div>
+        <span className="text-lg font-bold">{rankText}</span>
+      </div>
+      <img
+        src={image ?? ""}
+        alt={name}
+        className="mx-auto mb-4 h-20 w-20 rounded-full"
+      />
+      <p className="mb-2 text-center font-semibold">{name}</p>
+      <p className="text-center text-2xl font-bold">
+        {amount}{" "}
+        <span className="text-sm">
+          NEAR {type === "donor" ? "Donated" : "Sponsored"}
+        </span>
+      </p>
+    </div>
+  );
+}

From ed40356d5db5d285764b4434458890b834efede8 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 9 Oct 2024 17:58:55 +0100
Subject: [PATCH 02/43] Added trophy

---
 src/common/assets/svgs/Trophy.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/common/assets/svgs/Trophy.tsx

diff --git a/src/common/assets/svgs/Trophy.tsx b/src/common/assets/svgs/Trophy.tsx
new file mode 100644
index 000000000..98751ed92
--- /dev/null
+++ b/src/common/assets/svgs/Trophy.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const Trophy = (props: any) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.66797 18V16H8.66797V12.9C7.8513 12.7167 7.12214 12.3708 6.48047 11.8625C5.8388 11.3542 5.36797 10.7167 5.06797 9.95C3.81797 9.8 2.77214 9.25417 1.93047 8.3125C1.0888 7.37083 0.667969 6.26667 0.667969 5V4C0.667969 3.45 0.863802 2.97917 1.25547 2.5875C1.64714 2.19583 2.11797 2 2.66797 2H4.66797V0H14.668V2H16.668C17.218 2 17.6888 2.19583 18.0805 2.5875C18.4721 2.97917 18.668 3.45 18.668 4V5C18.668 6.26667 18.2471 7.37083 17.4055 8.3125C16.5638 9.25417 15.518 9.8 14.268 9.95C13.968 10.7167 13.4971 11.3542 12.8555 11.8625C12.2138 12.3708 11.4846 12.7167 10.668 12.9V16H14.668V18H4.66797ZM4.66797 7.8V4H2.66797V5C2.66797 5.63333 2.8513 6.20417 3.21797 6.7125C3.58464 7.22083 4.06797 7.58333 4.66797 7.8ZM14.668 7.8C15.268 7.58333 15.7513 7.22083 16.118 6.7125C16.4846 6.20417 16.668 5.63333 16.668 5V4H14.668V7.8Z"
+        fill={props.fill || "#91321B`"}
+      />
+    </svg>
+  );
+};
+
+export default Trophy;

From 0e9e2aa671f1bdfdcabe294da110aa43f60d0499 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 9 Oct 2024 17:59:41 +0100
Subject: [PATCH 03/43] Started working on UI

---
 src/app/donors/page.tsx | 257 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 257 insertions(+)
 create mode 100644 src/app/donors/page.tsx

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
new file mode 100644
index 000000000..bc5cd4720
--- /dev/null
+++ b/src/app/donors/page.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button, SearchBar, ToggleGroup } from "@/common/ui/components";
+
+import { LeaderboardCard } from "../_components/LeaderboardCard";
+
+interface Participant {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  amountUsd: number;
+}
+
+const topDonors: Participant[] = [
+  {
+    rank: 1,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "nearcollective.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+  {
+    rank: 2,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "nf-payments.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+  {
+    rank: 3,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "creatives.potlock.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+];
+
+const otherDonors: Participant[] = [
+  {
+    rank: 4,
+    image: "/placeholder.svg?height=40&width=40",
+    name: "creativesportfolio.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+  {
+    rank: 5,
+    image: "/placeholder.svg?height=40&width=40",
+    name: "mike.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+  {
+    rank: 6,
+    image: "/placeholder.svg?height=40&width=40",
+    name: "mike.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+];
+
+const topSponsors: Participant[] = [
+  {
+    rank: 1,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "sponsor1.near",
+    amount: 1000,
+    amountUsd: 1000,
+  },
+  {
+    rank: 2,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "sponsor2.near",
+    amount: 900,
+    amountUsd: 900,
+  },
+  {
+    rank: 3,
+    image: "/placeholder.svg?height=80&width=80",
+    name: "sponsor3.near",
+    amount: 800,
+    amountUsd: 800,
+  },
+];
+
+export default function LeaderboardPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [timeFilter, setTimeFilter] = useState("All time");
+  const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors">(
+    "donors",
+  ); // Updated formatting for selectedTab
+
+  const toggleTab = (tab: "donors" | "sponsors") => {
+    setSelectedTab(tab);
+  };
+  const renderLeaderboard = (
+    participants: Participant[],
+    type: "donor" | "sponsor",
+  ) => (
+    <>
+      <div className="flex w-full justify-between py-10 sm:w-auto">
+        <SearchBar
+          className="max-w-md text-gray-400"
+          placeholder={`Search projects`}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <div className="flex flex-wrap gap-2">
+          {["All time", "1Y", "1W", "30D", "1D"].map((filter) => (
+            <Button
+              key={filter}
+              variant={timeFilter === filter ? "default" : "outline"}
+              onClick={() => setTimeFilter(filter)}
+              className="text-sm"
+            >
+              {filter}
+            </Button>
+          ))}
+        </div>
+      </div>
+      <div className="mb-8 grid w-full grid-cols-3 gap-4 overflow-x-scroll">
+        {participants.slice(0, 3).map((participant) => (
+          <LeaderboardCard
+            key={participant.rank}
+            rank={participant.rank}
+            image={participant.image}
+            name={participant.name}
+            amount={participant.amount}
+            type={type}
+          />
+        ))}
+      </div>
+
+      <div className="overflow-x-auto rounded-lg bg-white shadow">
+        <table className="w-full">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                Rank
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                Projects
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                Amount
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                AMT (USD)
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 bg-white">
+            {participants.slice(3).map((participant) => (
+              <tr key={participant.rank}>
+                <td className="whitespace-nowrap px-6 py-4">
+                  <div className="flex items-center">
+                    <span className="text-sm text-gray-900">
+                      #{participant.rank}
+                    </span>
+                    {participant.rank === 4 ? (
+                      <div className="ml-1 text-green-500" />
+                    ) : (
+                      <div className="ml-1 text-red-500" />
+                    )}
+                  </div>
+                </td>
+                <td className="whitespace-nowrap px-6 py-4">
+                  <div className="flex items-center">
+                    <img
+                      className="h-10 w-10 rounded-full"
+                      src={participant.image}
+                      alt=""
+                    />
+                    <div className="ml-4">
+                      <div className="text-sm font-medium text-gray-900">
+                        {participant.name}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td className="whitespace-nowrap px-6 py-4">
+                  <div className="text-sm text-gray-900">
+                    {participant.amount}
+                  </div>
+                </td>
+                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                  ${participant.amountUsd}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+
+  const TABs = [
+    {
+      name: "donors",
+      label: "Donor Leaderboard",
+      count: 250,
+    },
+    {
+      name: "sponsors",
+      label: "Sponsor Leaderboard",
+      count: 68,
+    },
+  ];
+
+  return (
+    <div className="container mx-auto flex flex-col px-4 py-8">
+      <ToggleGroup defaultValue="donors" type="single" className="w-full">
+        <div className="w-full border-b border-gray-200">
+          <div className="grid w-full grid-cols-2">
+            {TABs.map((tab) => (
+              <div
+                key={tab.name}
+                className={`pb-10 text-center text-lg font-semibold ${
+                  selectedTab === tab.name
+                    ? "text-brand-500 border-b-2 border-black"
+                    : ""
+                }`}
+                onClick={() => toggleTab(tab.name)}
+              >
+                <span className="hidden sm:inline">{tab.label}</span>
+                <span className="sm:hidden">{tab.label.split(" ")[0]}</span>
+                <span className="ml-2 rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-700">
+                  {tab.count}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </ToggleGroup>
+      <div className="w-full py-10">
+        {selectedTab === "donors" ? (
+          <div className="w-full">
+            <h1 className="mb-8 text-center font-lora text-3xl font-bold md:text-5xl">
+              Donor Leaderboard
+            </h1>
+            {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
+          </div>
+        ) : (
+          <div>
+            <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
+              Sponsor Leaderboard
+            </h1>
+            {renderLeaderboard(topSponsors, "sponsor")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From f3586d16aa2f770fc2e8d7d9c263595b43edc347 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 14 Oct 2024 12:51:38 +0100
Subject: [PATCH 04/43] Refactor LeaderboardCard component to dynamically set
 icon color based on rank

---
 src/app/_components/LeaderboardCard.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/app/_components/LeaderboardCard.tsx b/src/app/_components/LeaderboardCard.tsx
index a137225f6..e670f539a 100644
--- a/src/app/_components/LeaderboardCard.tsx
+++ b/src/app/_components/LeaderboardCard.tsx
@@ -1,5 +1,3 @@
-import { Users } from "lucide-react";
-
 import Trophy from "@/common/assets/svgs/Trophy";
 
 interface LeaderboardCardProps {
@@ -25,7 +23,12 @@ export function LeaderboardCard({
         : "bg-gradient-to-r from-orange-200 to-red-200";
 
   const rankText = ["1st", "2nd", "3rd"][rank - 1];
-  const iconClass = rank === 1 ? "fill-yellow-400" : "fill-gray-600";
+  const iconClass =
+    rank === 1
+      ? "fill-yellow-400"
+      : rank === 2
+        ? "fill-gray-400"
+        : "fill-red-800";
 
   return (
     <div
@@ -33,11 +36,7 @@ export function LeaderboardCard({
     >
       <div className={`mb-4 flex items-center justify-between p-4 ${bgClass}`}>
         <div className={`p-2`}>
-          {type === "donor" ? (
-            <Trophy className={`h-6 w-6 ${iconClass}`} />
-          ) : (
-            <Users className={`h-6 w-6 ${iconClass}`} />
-          )}
+          <Trophy className={`h-6 w-6 ${iconClass}`} />
         </div>
         <span className="text-lg font-bold">{rankText}</span>
       </div>

From ed56eb3046a336fabe7b6888951f4d7f04dd6d83 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 14 Oct 2024 12:51:45 +0100
Subject: [PATCH 05/43] Refactor LeaderboardPage component to update
 selectedTab state and add activities tab

---
 src/app/donors/page.tsx | 90 +++++++++++++++++++++++++----------------
 1 file changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index bc5cd4720..abffdd56f 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -89,9 +89,9 @@ const topSponsors: Participant[] = [
 export default function LeaderboardPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [timeFilter, setTimeFilter] = useState("All time");
-  const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors">(
-    "donors",
-  ); // Updated formatting for selectedTab
+  const [selectedTab, setSelectedTab] = useState<
+    "donors" | "sponsors" | "activities"
+  >("activities"); // Updated formatting for selectedTab
 
   const toggleTab = (tab: "donors" | "sponsors") => {
     setSelectedTab(tab);
@@ -109,10 +109,12 @@ export default function LeaderboardPage() {
           onChange={(e) => setSearchTerm(e.target.value)}
         />
         <div className="flex flex-wrap gap-2">
-          {["All time", "1Y", "1W", "30D", "1D"].map((filter) => (
+          {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
             <Button
               key={filter}
-              variant={timeFilter === filter ? "default" : "outline"}
+              variant={
+                timeFilter === filter ? "sec-brand-filled" : "standard-outline"
+              }
               onClick={() => setTimeFilter(filter)}
               className="text-sm"
             >
@@ -134,20 +136,20 @@ export default function LeaderboardPage() {
         ))}
       </div>
 
-      <div className="overflow-x-auto rounded-lg bg-white shadow">
+      <div className="overflow-x-auto rounded-2xl border border-gray-200  bg-white">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Rank
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Projects
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Amount
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 AMT (USD)
               </th>
             </tr>
@@ -175,7 +177,7 @@ export default function LeaderboardPage() {
                       alt=""
                     />
                     <div className="ml-4">
-                      <div className="text-sm font-medium text-gray-900">
+                      <div className="text-sm font-bold text-gray-900">
                         {participant.name}
                       </div>
                     </div>
@@ -198,6 +200,11 @@ export default function LeaderboardPage() {
   );
 
   const TABs = [
+    {
+      name: "activities",
+      label: "All Activities",
+      count: 20000,
+    },
     {
       name: "donors",
       label: "Donor Leaderboard",
@@ -211,22 +218,21 @@ export default function LeaderboardPage() {
   ];
 
   return (
-    <div className="container mx-auto flex flex-col px-4 py-8">
+    <div className="container mx-auto flex flex-col py-8">
       <ToggleGroup defaultValue="donors" type="single" className="w-full">
-        <div className="w-full border-b border-gray-200">
-          <div className="grid w-full grid-cols-2">
+        <div className="w-full overflow-x-scroll border-b border-gray-200">
+          <div className="w-5xl grid grid-flow-col content-center items-center px-4">
             {TABs.map((tab) => (
               <div
                 key={tab.name}
-                className={`pb-10 text-center text-lg font-semibold ${
+                className={`w-fit p-2 text-center text-lg font-semibold ${
                   selectedTab === tab.name
                     ? "text-brand-500 border-b-2 border-black"
                     : ""
                 }`}
-                onClick={() => toggleTab(tab.name)}
+                onClick={() => toggleTab(tab.name as "donors" | "sponsors")}
               >
-                <span className="hidden sm:inline">{tab.label}</span>
-                <span className="sm:hidden">{tab.label.split(" ")[0]}</span>
+                <span className="inline">{tab.label}</span>
                 <span className="ml-2 rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-700">
                   {tab.count}
                 </span>
@@ -235,22 +241,38 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="w-full py-10">
-        {selectedTab === "donors" ? (
-          <div className="w-full">
-            <h1 className="mb-8 text-center font-lora text-3xl font-bold md:text-5xl">
-              Donor Leaderboard
-            </h1>
-            {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
-          </div>
-        ) : (
-          <div>
-            <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
-              Sponsor Leaderboard
-            </h1>
-            {renderLeaderboard(topSponsors, "sponsor")}
-          </div>
-        )}
+      <div className="w-full flex-nowrap py-10">
+        <div>
+          {selectedTab === "activities" ? (
+            <div>
+              <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
+                All Activities
+              </h1>
+            </div>
+          ) : (
+            ""
+          )}
+          {selectedTab === "donors" ? (
+            <div>
+              <h1 className="mb-8 text-center font-lora text-3xl font-bold md:text-5xl">
+                Donor Leaderboard
+              </h1>
+              {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
+            </div>
+          ) : (
+            ""
+          )}
+          {selectedTab === "sponsors" ? (
+            <div>
+              <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
+                Sponsor Leaderboard
+              </h1>
+              {renderLeaderboard(topSponsors, "sponsor")}
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
       </div>
     </div>
   );

From 31060556430e859174c2f3bd7bd25fbac0a3d3f4 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 14 Oct 2024 12:51:51 +0100
Subject: [PATCH 06/43] Refactor button component to add sec-brand-filled
 variant

---
 src/common/ui/components/button.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/common/ui/components/button.tsx b/src/common/ui/components/button.tsx
index 1ea514c39..479faac63 100644
--- a/src/common/ui/components/button.tsx
+++ b/src/common/ui/components/button.tsx
@@ -40,6 +40,13 @@ const buttonVariants = cva(
           "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
         ),
 
+        // sec-brand
+        "sec-brand-filled": cn(
+          "bg-#fce9d5 shadow-amber outline-none translate-y-[-1.5px] text-#91321B font-bold border border-#f4b37d border-solid hover:translate-y-0 focus:shadow-#f4b37d",
+          "hover:shadow-[0px_0px_0px_1px_rgba(244, 179, 125, 1)_inset,0px_1px_1px_1px_rgba(252, 233, 213, 1)_inset,0px_0px_0px_2px_rgba(252, 233, 213, 1)_inset]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
         // Standard
         "standard-filled": cn(
           "text-[white] bg-[var(--neutral-800)]",
@@ -48,7 +55,7 @@ const buttonVariants = cva(
         ),
 
         "standard-outline": cn(
-          "bg-white hover:bg-[var(--neutral-50)",
+          "bg-white hover:bg-[var(--neutral-50) outline-none focus:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
           "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
           "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
         ),

From 051ab03e0f32566781a17f02bcf144f8880a7cb0 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 14 Oct 2024 15:57:50 +0100
Subject: [PATCH 07/43] Refactor LeaderboardPage component to add activities
 tab and display activity cards

---
 src/app/donors/page.tsx | 165 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 157 insertions(+), 8 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index abffdd56f..979b629d9 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 
+import Image from "next/image";
+
 import { Button, SearchBar, ToggleGroup } from "@/common/ui/components";
 
 import { LeaderboardCard } from "../_components/LeaderboardCard";
@@ -14,6 +16,17 @@ interface Participant {
   amountUsd: number;
 }
 
+interface Activity {
+  sender: string;
+  senderImage: string;
+  amount: number;
+  amountUsd: number;
+  currency: string;
+  receiver: string;
+  receiverImage: string;
+  timestamp: number;
+}
+
 const topDonors: Participant[] = [
   {
     rank: 1,
@@ -86,6 +99,73 @@ const topSponsors: Participant[] = [
   },
 ];
 
+const ACTIVITY: Activity[] = [
+  {
+    sender: "nearcollective.near",
+    senderImage: "/placeholder.svg?height=40&width=40",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "creativesportfolio.near",
+    receiverImage: "/placeholder.svg?height=40&width=40",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nf-payments.near",
+    senderImage: "/placeholder.svg?height=40&width=40",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "/placeholder.svg?height=40&width=40",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "creatives.potlock.near",
+    senderImage: "/placeholder.svg?height=40&width=40",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "/placeholder.svg?height=40&width=40",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nearcollective.near",
+    senderImage: "/placeholder.svg?height=40&width=40",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "creativesportfolio.near",
+    receiverImage: "/placeholder.svg?height=40&width=40",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nf-payments.near",
+    senderImage: "/placeholder.svg?height=40&width=40",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "/placeholder.svg?height=40&width=40",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+];
+
+const timeAgo = (timestamp: number) => {
+  const now = Date.now();
+  const diff = now - timestamp;
+  if (diff < 1000 * 60) {
+    return `${Math.floor(diff / 1000)}s ago`;
+  } else if (diff < 1000 * 60 * 60) {
+    return `${Math.floor(diff / (1000 * 60))}mns ago`;
+  } else if (diff < 1000 * 60 * 60 * 24) {
+    return `${Math.floor(diff / (1000 * 60 * 60))}hrs ago`;
+  } else {
+    return `${Math.floor(diff / (1000 * 60 * 60 * 24))}days ago`;
+  }
+};
+
 export default function LeaderboardPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [timeFilter, setTimeFilter] = useState("All time");
@@ -101,14 +181,14 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="flex w-full justify-between py-10 sm:w-auto">
+      <div className="flex w-full flex-col gap-x-14 gap-y-4 py-10 sm:w-auto md:flex-row md:justify-between">
         <SearchBar
-          className="max-w-md text-gray-400"
+          className="w-85% max-w-xs flex-1 text-gray-400"
           placeholder={`Search projects`}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
         />
-        <div className="flex flex-wrap gap-2">
+        <div className="flex w-fit gap-1">
           {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
             <Button
               key={filter}
@@ -116,14 +196,14 @@ export default function LeaderboardPage() {
                 timeFilter === filter ? "sec-brand-filled" : "standard-outline"
               }
               onClick={() => setTimeFilter(filter)}
-              className="text-sm"
+              className="py-0.375 px-3 text-sm"
             >
               {filter}
             </Button>
           ))}
         </div>
       </div>
-      <div className="mb-8 grid w-full grid-cols-3 gap-4 overflow-x-scroll">
+      <div className="max-w-1000px min-w-lg mb-8 grid w-full grid-cols-3 gap-4 overflow-x-scroll">
         {participants.slice(0, 3).map((participant) => (
           <LeaderboardCard
             key={participant.rank}
@@ -242,12 +322,81 @@ export default function LeaderboardPage() {
         </div>
       </ToggleGroup>
       <div className="w-full flex-nowrap py-10">
-        <div>
+        <div className="md:w-80% mx-auto w-full">
           {selectedTab === "activities" ? (
-            <div>
-              <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
+            <div className="w-full">
+              <h1 className="font-lora text-3xl font-bold md:text-5xl">
                 All Activities
               </h1>
+              <div className="flex w-full flex-col justify-between gap-x-14 gap-y-4 py-10 sm:w-auto md:flex-row">
+                <SearchBar
+                  className="w-85% max-w-xs text-gray-400 md:w-auto"
+                  placeholder={`Search projects`}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+                <div className="flex w-fit gap-1">
+                  {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+                    <Button
+                      key={filter}
+                      variant={
+                        timeFilter === filter
+                          ? "sec-brand-filled"
+                          : "standard-outline"
+                      }
+                      onClick={() => setTimeFilter(filter)}
+                      className="py-0.375 px-3 text-sm"
+                    >
+                      {filter}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+              <div className="overflow-x-auto bg-white">
+                {ACTIVITY.map((activity, index) => (
+                  <div
+                    key={index}
+                    className="border-gray-#ebebeb my-4 flex flex-wrap items-center justify-between rounded-xl border py-4"
+                  >
+                    <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
+                      <Image
+                        src={activity.senderImage}
+                        className="h-10 w-10 rounded-full"
+                        alt="sender image"
+                        width={10}
+                        height={10}
+                      />
+                      <h1>{activity.sender}</h1>
+                    </div>
+                    <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
+                      Donated
+                    </div>
+                    <div className="w-140px flex items-center">
+                      <div className="ml-4">
+                        <div className="text-sm font-medium text-gray-900">
+                          {activity.amount} {activity.currency}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 px-4 text-sm text-gray-600">
+                      to
+                    </div>
+                    <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
+                      <Image
+                        src={activity.receiverImage}
+                        className="h-10 w-10 rounded-full"
+                        alt="receiver image"
+                        width={10}
+                        height={10}
+                      />
+                      <h1>{activity.receiver}</h1>
+                    </div>
+                    <div className="w-120px flex items-center gap-2 whitespace-nowrap px-4 text-sm text-gray-600">
+                      {timeAgo(activity.timestamp)}
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
           ) : (
             ""

From 6eeaea9a8129c6020968239566559f683d313381 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 16 Oct 2024 17:48:32 +0100
Subject: [PATCH 08/43] updated UI for mobile responsiveness

---
 src/app/_components/LeaderboardCard.tsx |  42 +++--
 src/app/donors/page.tsx                 | 207 ++++++++++++++++--------
 2 files changed, 165 insertions(+), 84 deletions(-)

diff --git a/src/app/_components/LeaderboardCard.tsx b/src/app/_components/LeaderboardCard.tsx
index e670f539a..945c6c160 100644
--- a/src/app/_components/LeaderboardCard.tsx
+++ b/src/app/_components/LeaderboardCard.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 import Trophy from "@/common/assets/svgs/Trophy";
 
 interface LeaderboardCardProps {
@@ -19,8 +21,8 @@ export function LeaderboardCard({
     rank === 1
       ? "bg-gradient-to-r from-orange-400 to-red-500 text-white"
       : rank === 2
-        ? "bg-gray-200"
-        : "bg-gradient-to-r from-orange-200 to-red-200";
+        ? "bg-gradient-to-r from-#F7F7F7 to-#DBDBDB"
+        : "bg-gradient-to-r from-#FCE9D5 to-#F8D3B0";
 
   const rankText = ["1st", "2nd", "3rd"][rank - 1];
   const iconClass =
@@ -32,26 +34,32 @@ export function LeaderboardCard({
 
   return (
     <div
-      className={`min-w-fit overflow-hidden rounded-2xl border border-gray-200 pb-4`}
+      className={`w-288px overflow-hidden rounded-2xl border border-gray-200 pb-4`}
     >
-      <div className={`mb-4 flex items-center justify-between p-4 ${bgClass}`}>
-        <div className={`p-2`}>
+      <div className={`flex items-center justify-between p-4 ${bgClass}`}>
+        <div>
           <Trophy className={`h-6 w-6 ${iconClass}`} />
         </div>
         <span className="text-lg font-bold">{rankText}</span>
       </div>
-      <img
-        src={image ?? ""}
-        alt={name}
-        className="mx-auto mb-4 h-20 w-20 rounded-full"
-      />
-      <p className="mb-2 text-center font-semibold">{name}</p>
-      <p className="text-center text-2xl font-bold">
-        {amount}{" "}
-        <span className="text-sm">
-          NEAR {type === "donor" ? "Donated" : "Sponsored"}
-        </span>
-      </p>
+      <div className="p-20px flex flex-col items-center">
+        <Image
+          src={image ?? ""}
+          alt={name}
+          className="mb-12px h-20 w-20 rounded-full"
+          width={80}
+          height={80}
+        />
+        <p className="font-500 text-#292929 font-14px mb-2 text-center">
+          {name}
+        </p>
+        <p className="font-600 text-center text-2xl">
+          {amount}{" "}
+          <span className="text-#292929 font-600 text-sm">
+            NEAR {type === "donor" ? "Donated" : "Sponsored"}
+          </span>
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 979b629d9..eca3c9410 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 
 import Image from "next/image";
 
+import NearIcon from "@/common/assets/svgs/near-icon";
 import { Button, SearchBar, ToggleGroup } from "@/common/ui/components";
 
 import { LeaderboardCard } from "../_components/LeaderboardCard";
@@ -30,21 +31,21 @@ interface Activity {
 const topDonors: Participant[] = [
   {
     rank: 1,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "nearcollective.near",
     amount: 731.25,
     amountUsd: 0,
   },
   {
     rank: 2,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "nf-payments.near",
     amount: 731.25,
     amountUsd: 0,
   },
   {
     rank: 3,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "creatives.potlock.near",
     amount: 731.25,
     amountUsd: 0,
@@ -54,21 +55,21 @@ const topDonors: Participant[] = [
 const otherDonors: Participant[] = [
   {
     rank: 4,
-    image: "/placeholder.svg?height=40&width=40",
+    image: "https://picsum.photos/200/300/?blur",
     name: "creativesportfolio.near",
     amount: 2000,
     amountUsd: 2000,
   },
   {
     rank: 5,
-    image: "/placeholder.svg?height=40&width=40",
+    image: "https://picsum.photos/200/300/?blur",
     name: "mike.near",
     amount: 2000,
     amountUsd: 2000,
   },
   {
     rank: 6,
-    image: "/placeholder.svg?height=40&width=40",
+    image: "https://picsum.photos/200/300/?blur",
     name: "mike.near",
     amount: 2000,
     amountUsd: 2000,
@@ -78,21 +79,21 @@ const otherDonors: Participant[] = [
 const topSponsors: Participant[] = [
   {
     rank: 1,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "sponsor1.near",
     amount: 1000,
     amountUsd: 1000,
   },
   {
     rank: 2,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "sponsor2.near",
     amount: 900,
     amountUsd: 900,
   },
   {
     rank: 3,
-    image: "/placeholder.svg?height=80&width=80",
+    image: "https://picsum.photos/200/300/?blur",
     name: "sponsor3.near",
     amount: 800,
     amountUsd: 800,
@@ -102,52 +103,52 @@ const topSponsors: Participant[] = [
 const ACTIVITY: Activity[] = [
   {
     sender: "nearcollective.near",
-    senderImage: "/placeholder.svg?height=40&width=40",
+    senderImage: "https://picsum.photos/200/300/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "creativesportfolio.near",
-    receiverImage: "/placeholder.svg?height=40&width=40",
+    receiverImage: "https://picsum.photos/200/300/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nf-payments.near",
-    senderImage: "/placeholder.svg?height=40&width=40",
+    senderImage: "https://picsum.photos/200/300/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "/placeholder.svg?height=40&width=40",
+    receiverImage: "https://picsum.photos/200/300/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "creatives.potlock.near",
-    senderImage: "/placeholder.svg?height=40&width=40",
+    senderImage: "https://picsum.photos/200/300/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "/placeholder.svg?height=40&width=40",
+    receiverImage: "https://picsum.photos/200/300/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nearcollective.near",
-    senderImage: "/placeholder.svg?height=40&width=40",
+    senderImage: "https://picsum.photos/200/300/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "creativesportfolio.near",
-    receiverImage: "/placeholder.svg?height=40&width=40",
+    receiverImage: "https://picsum.photos/200/300/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nf-payments.near",
-    senderImage: "/placeholder.svg?height=40&width=40",
+    senderImage: "https://picsum.photos/200/300/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "/placeholder.svg?height=40&width=40",
+    receiverImage: "https://picsum.photos/200/300/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
 ];
@@ -181,14 +182,14 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="flex w-full flex-col gap-x-14 gap-y-4 py-10 sm:w-auto md:flex-row md:justify-between">
+      <div className="pb-24px flex w-full flex-col gap-x-14 gap-y-4 pt-10 sm:w-auto md:flex-row md:justify-between">
         <SearchBar
           className="w-85% max-w-xs flex-1 text-gray-400"
           placeholder={`Search projects`}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
         />
-        <div className="flex w-fit gap-1">
+        <div className="flex w-fit gap-3">
           {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
             <Button
               key={filter}
@@ -203,33 +204,35 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="max-w-1000px min-w-lg mb-8 grid w-full grid-cols-3 gap-4 overflow-x-scroll">
-        {participants.slice(0, 3).map((participant) => (
-          <LeaderboardCard
-            key={participant.rank}
-            rank={participant.rank}
-            image={participant.image}
-            name={participant.name}
-            amount={participant.amount}
-            type={type}
-          />
-        ))}
+      <div className="pl-36px ml-[-36px] mr-[-46px] w-screen overflow-x-scroll md:w-[104.5%]">
+        <div className="gap-20px mb-8 grid w-full grid-flow-col">
+          {participants.slice(0, 3).map((participant) => (
+            <LeaderboardCard
+              key={participant.rank}
+              rank={participant.rank}
+              image={participant.image}
+              name={participant.name}
+              amount={participant.amount}
+              type={type}
+            />
+          ))}
+        </div>
       </div>
 
-      <div className="overflow-x-auto rounded-2xl border border-gray-200  bg-white">
+      <div className="hidden overflow-x-auto rounded-2xl border border-gray-200 bg-white  md:block">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Rank
               </th>
-              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Projects
               </th>
-              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                 Amount
               </th>
-              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+              <th className="w-150px p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">
                 AMT (USD)
               </th>
             </tr>
@@ -237,7 +240,7 @@ export default function LeaderboardPage() {
           <tbody className="divide-y divide-gray-200 bg-white">
             {participants.slice(3).map((participant) => (
               <tr key={participant.rank}>
-                <td className="whitespace-nowrap px-6 py-4">
+                <td className="w-10px whitespace-nowrap p-4">
                   <div className="flex items-center">
                     <span className="text-sm text-gray-900">
                       #{participant.rank}
@@ -249,33 +252,90 @@ export default function LeaderboardPage() {
                     )}
                   </div>
                 </td>
-                <td className="whitespace-nowrap px-6 py-4">
+                <td className="whitespace-nowrap p-4">
                   <div className="flex items-center">
-                    <img
+                    <Image
                       className="h-10 w-10 rounded-full"
                       src={participant.image}
+                      width={10}
+                      height={10}
                       alt=""
                     />
                     <div className="ml-4">
-                      <div className="text-sm font-bold text-gray-900">
+                      <div className="font-500 text-sm text-gray-900">
                         {participant.name}
                       </div>
                     </div>
                   </div>
                 </td>
-                <td className="whitespace-nowrap px-6 py-4">
-                  <div className="text-sm text-gray-900">
-                    {participant.amount}
+                <td className="w-100px whitespace-nowrap p-4">
+                  <div className="gap-8px flex items-center text-sm text-gray-900">
+                    <NearIcon className="w-18px h-18px pb-[-4]" />
+                    <span className="font-600 m-0 pt-[2px]">
+                      {participant.amount}
+                    </span>
                   </div>
                 </td>
-                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-                  ${participant.amountUsd}
+                <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
+                  $ {participant.amountUsd}
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
+      <div className="p-16px flex flex-col items-start gap-4 md:hidden">
+        {participants.map((participant) => (
+          <div
+            key={participant.rank}
+            className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
+          >
+            <div className="whitespace-nowrap">
+              <div className="flex items-center">
+                <Image
+                  className="h-40px w-40px rounded-full"
+                  src={participant.image}
+                  width={10}
+                  height={10}
+                  alt=""
+                />
+              </div>
+            </div>
+            <div className="w-full">
+              <div className="flex justify-between whitespace-nowrap">
+                <div className="ml-1">
+                  <div className="font-500 text-sm text-gray-900">
+                    {participant.name}
+                  </div>
+                </div>
+                <div className="whitespace-nowrap">
+                  <div className="flex items-center">
+                    <span className="fw-50 text-sm text-gray-900">
+                      #{participant.rank}
+                    </span>
+                    {participant.rank === 4 ? (
+                      <div className="ml-1 text-green-500" />
+                    ) : (
+                      <div className="ml-1 text-red-500" />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="gap-8px flex items-center">
+                <div className="gap-8px flex items-center text-sm text-gray-900">
+                  <NearIcon className="w-18px h-18px" />
+                  <span className="font-600 m-0 pt-[2px]">
+                    {participant.amount}
+                  </span>
+                </div>
+                <div className="fw-600 w-fit whitespace-nowrap text-right text-sm text-gray-500">
+                  ~$ {participant.amountUsd}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </>
   );
 
@@ -298,22 +358,34 @@ export default function LeaderboardPage() {
   ];
 
   return (
-    <div className="container mx-auto flex flex-col py-8">
-      <ToggleGroup defaultValue="donors" type="single" className="w-full">
-        <div className="w-full overflow-x-scroll border-b border-gray-200">
-          <div className="w-5xl grid grid-flow-col content-center items-center px-4">
+    <div className="mx-auto flex flex-col py-8">
+      <ToggleGroup
+        defaultValue="donors"
+        type="single"
+        className="mt-40px relative w-full"
+      >
+        <div className="mb-40px md:mb-64px absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
+          <div className="ml-20px md:ml-30px pt-16px grid grid-flow-col content-center items-center gap-x-4 px-4 md:w-fit">
             {TABs.map((tab) => (
               <div
                 key={tab.name}
-                className={`w-fit p-2 text-center text-lg font-semibold ${
-                  selectedTab === tab.name
-                    ? "text-brand-500 border-b-2 border-black"
-                    : ""
+                className={`py-10px px-16px text-#7B7B7B w-fit cursor-pointer text-center text-lg font-semibold ${
+                  selectedTab === tab.name ? "border-b-2 border-black" : ""
                 }`}
                 onClick={() => toggleTab(tab.name as "donors" | "sponsors")}
               >
-                <span className="inline">{tab.label}</span>
-                <span className="ml-2 rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-700">
+                <span
+                  className={`inline whitespace-nowrap ${
+                    selectedTab === tab.name ? "font-500 text-black" : ""
+                  }`}
+                >
+                  {tab.label}
+                </span>
+                <span
+                  className={`border-#DBDBDB px-6px py-2px rounded-16px ml-2 border bg-gray-200 text-sm text-gray-700 ${
+                    selectedTab === tab.name ? "font-600 text-black" : ""
+                  }`}
+                >
                   {tab.count}
                 </span>
               </div>
@@ -321,21 +393,21 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="w-full flex-nowrap py-10">
-        <div className="md:w-80% mx-auto w-full">
+      <div className="py-64px max-w-912px mx-auto w-full flex-nowrap">
+        <div className="mx-auto w-full">
           {selectedTab === "activities" ? (
             <div className="w-full">
-              <h1 className="font-lora text-3xl font-bold md:text-5xl">
+              <h1 className="font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 All Activities
               </h1>
-              <div className="flex w-full flex-col justify-between gap-x-14 gap-y-4 py-10 sm:w-auto md:flex-row">
+              <div className="pb-24px flex w-full flex-col justify-between gap-x-14 gap-y-4 pt-10 sm:w-auto md:flex-row">
                 <SearchBar
                   className="w-85% max-w-xs text-gray-400 md:w-auto"
                   placeholder={`Search projects`}
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                 />
-                <div className="flex w-fit gap-1">
+                <div className="flex w-fit gap-3">
                   {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
                     <Button
                       key={filter}
@@ -361,7 +433,7 @@ export default function LeaderboardPage() {
                     <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
                       <Image
                         src={activity.senderImage}
-                        className="h-10 w-10 rounded-full"
+                        className="h-24px w-24px rounded-full"
                         alt="sender image"
                         width={10}
                         height={10}
@@ -384,7 +456,7 @@ export default function LeaderboardPage() {
                     <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
                       <Image
                         src={activity.receiverImage}
-                        className="h-10 w-10 rounded-full"
+                        className="h-24px w-24px rounded-full"
                         alt="receiver image"
                         width={10}
                         height={10}
@@ -392,6 +464,7 @@ export default function LeaderboardPage() {
                       <h1>{activity.receiver}</h1>
                     </div>
                     <div className="w-120px flex items-center gap-2 whitespace-nowrap px-4 text-sm text-gray-600">
+                      <span className="dot"></span>{" "}
                       {timeAgo(activity.timestamp)}
                     </div>
                   </div>
@@ -402,8 +475,8 @@ export default function LeaderboardPage() {
             ""
           )}
           {selectedTab === "donors" ? (
-            <div>
-              <h1 className="mb-8 text-center font-lora text-3xl font-bold md:text-5xl">
+            <div className="w-full">
+              <h1 className="font-lora text-3xl font-semibold leading-[56px] tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 Donor Leaderboard
               </h1>
               {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
@@ -412,8 +485,8 @@ export default function LeaderboardPage() {
             ""
           )}
           {selectedTab === "sponsors" ? (
-            <div>
-              <h1 className="text-center font-lora text-3xl font-bold md:text-5xl">
+            <div className="w-full">
+              <h1 className="font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 Sponsor Leaderboard
               </h1>
               {renderLeaderboard(topSponsors, "sponsor")}

From 40f2ff110f401f879f14a8bbed45594dd6082ecb Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 16 Oct 2024 18:49:01 +0100
Subject: [PATCH 09/43] Refactor LeaderboardPage component to update activity
 card layout and styling

---
 src/app/donors/page.tsx | 73 ++++++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index eca3c9410..24cc8100c 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -428,44 +428,49 @@ export default function LeaderboardPage() {
                 {ACTIVITY.map((activity, index) => (
                   <div
                     key={index}
-                    className="border-gray-#ebebeb my-4 flex flex-wrap items-center justify-between rounded-xl border py-4"
+                    className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
                   >
-                    <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
-                      <Image
-                        src={activity.senderImage}
-                        className="h-24px w-24px rounded-full"
-                        alt="sender image"
-                        width={10}
-                        height={10}
-                      />
-                      <h1>{activity.sender}</h1>
-                    </div>
-                    <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
-                      Donated
-                    </div>
-                    <div className="w-140px flex items-center">
-                      <div className="ml-4">
-                        <div className="text-sm font-medium text-gray-900">
-                          {activity.amount} {activity.currency}
+                    <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
+                      <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                        <Image
+                          src={activity.senderImage}
+                          className="h-24px w-24px rounded-full"
+                          alt="sender image"
+                          width={10}
+                          height={10}
+                        />
+                        <h1>{activity.sender}</h1>
+                      </div>
+                      <div className="flex items-center">
+                        <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
+                          Donated
+                        </div>
+                        <div className="">
+                          <div className="gap-8px flex items-center text-sm text-gray-900">
+                            <NearIcon className="w-18px h-18px" />{" "}
+                            <span className="font-600 m-0 pt-[2px]">
+                              {activity.amount}
+                            </span>
+                          </div>
                         </div>
+                        <div className="ml-4 text-sm text-gray-600">to</div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2 px-4 text-sm text-gray-600">
-                      to
-                    </div>
-                    <div className="w-224px flex items-center gap-2 overflow-x-scroll px-4 text-sm font-medium text-gray-900">
-                      <Image
-                        src={activity.receiverImage}
-                        className="h-24px w-24px rounded-full"
-                        alt="receiver image"
-                        width={10}
-                        height={10}
-                      />
-                      <h1>{activity.receiver}</h1>
-                    </div>
-                    <div className="w-120px flex items-center gap-2 whitespace-nowrap px-4 text-sm text-gray-600">
-                      <span className="dot"></span>{" "}
-                      {timeAgo(activity.timestamp)}
+                    <div className="flex items-center">
+                      <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                        <Image
+                          src={activity.receiverImage}
+                          className="h-24px w-24px rounded-full"
+                          alt="receiver image"
+                          width={10}
+                          height={10}
+                        />
+                        <h1>{activity.receiver}</h1>
+                      </div>
+                      <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
+                        <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
+                        {timeAgo(activity.timestamp)}
+                      </div>
                     </div>
                   </div>
                 ))}

From 63731ec1bc6a8255ccc194a43e9faafd1ac438e9 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 11:09:10 +0100
Subject: [PATCH 10/43] completed final UI fixes

---
 src/app/donors/page.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 24cc8100c..f72eb412b 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -439,7 +439,12 @@ export default function LeaderboardPage() {
                           width={10}
                           height={10}
                         />
-                        <h1>{activity.sender}</h1>
+                        <h1
+                          className="w-100px m:w-fit truncate md:overflow-visible"
+                          title={activity.sender}
+                        >
+                          {activity.sender}
+                        </h1>
                       </div>
                       <div className="flex items-center">
                         <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
@@ -465,7 +470,12 @@ export default function LeaderboardPage() {
                           width={10}
                           height={10}
                         />
-                        <h1>{activity.receiver}</h1>
+                        <h1
+                          className="w-100px m:w-fit truncate md:overflow-visible"
+                          title={activity.receiver}
+                        >
+                          {activity.receiver}
+                        </h1>
                       </div>
                       <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
                         <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}

From 959a4b7dbe38e0b35cd94d9f664558fabee2c732 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 11:51:09 +0100
Subject: [PATCH 11/43] Creatd filter chip

---
 src/common/ui/components/filter-chip.tsx | 79 ++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/common/ui/components/filter-chip.tsx

diff --git a/src/common/ui/components/filter-chip.tsx b/src/common/ui/components/filter-chip.tsx
new file mode 100644
index 000000000..763051751
--- /dev/null
+++ b/src/common/ui/components/filter-chip.tsx
@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "../utils";
+
+// TODO: add correct hover effects
+const filterChipVariants = cva(
+  cn(
+    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium",
+    "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
+    "border-none focus:shadow-button-focus disabled:cursor-not-allowed",
+  ),
+
+  {
+    variants: {
+      variant: {
+        // Brand
+        "brand-filled": cn(
+          "bg-#fce9d5 shadow-amber outline-none translate-y-[-1.5px] text-#91321B font-bold border border-#f4b37d border-solid hover:translate-y-0 focus:shadow-#f4b37d",
+          "hover:shadow-[0px_0px_0px_1px_rgba(244, 179, 125, 1)_inset,0px_1px_1px_1px_rgba(252, 233, 213, 1)_inset,0px_0px_0px_2px_rgba(252, 233, 213, 1)_inset]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-plain": cn(
+          "text-[color:var(--primary-600)] p-0 hover:text-[color:var(--Primary-400)]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-outline": cn(
+          "bg-white hover:bg-[var(--neutral-50) outline-none focus:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
+          "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
+          "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
+        ),
+      },
+
+      size: {
+        default: "px-4 py-[9px]",
+        icon: "h-10 w-10",
+      },
+
+      font: {
+        default: "font-medium",
+        bold: "font-bold",
+        semibold: "font-semibold",
+      },
+    },
+
+    defaultVariants: {
+      font: "default",
+      variant: "brand-filled",
+      size: "default",
+    },
+  },
+);
+
+export interface FilterChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof filterChipVariants> {
+  asChild?: boolean;
+}
+
+const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(
+  ({ className, variant, font, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(filterChipVariants({ variant, size, font, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+FilterChip.displayName = "FilterChip";
+
+export { FilterChip, filterChipVariants };

From cad0abce763ba83052dd97af213728caab912ff2 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 11:53:55 +0100
Subject: [PATCH 12/43] exported filter-chip from components

---
 src/common/api/potlock/generated/client.ts | 1046 ++++++++++++++++----
 1 file changed, 842 insertions(+), 204 deletions(-)

diff --git a/src/common/api/potlock/generated/client.ts b/src/common/api/potlock/generated/client.ts
index 2e0d69c35..96b0ad42b 100644
--- a/src/common/api/potlock/generated/client.ts
+++ b/src/common/api/potlock/generated/client.ts
@@ -9,20 +9,254 @@ import axios from "axios";
 import type { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
 import useSwr from "swr";
 import type { Key, SWRConfiguration } from "swr";
+export type V1PotsSponsorsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1PotsPayoutsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1PotsDonationsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1PotsApplicationsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1PotsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1PotfactoriesRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1ListsRegistrationsRetrieveParams = {
+  /**
+   * Filter registrations by category
+   */
+  category?: string;
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+  /**
+   * Filter registrations by status
+   */
+  status?: string;
+};
+
+export type V1ListsRandomRegistrationRetrieveParams = {
+  /**
+   * Filter registrations by status
+   */
+  status?: string;
+};
+
+export type V1ListsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
 export type V1DonorsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
   /**
    * Sort by field, e.g., most_donated_usd
    */
   sort?: string;
 };
 
+export type V1DonateContractConfigRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1AccountsPotApplicationsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+  /**
+   * Filter pot applications by status
+   */
+  status?: string;
+};
+
+export type V1AccountsPayoutsReceivedRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1AccountsListRegistrationsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1AccountsDonationsSentRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export type V1AccountsDonationsReceivedRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
 export type V1AccountsActivePotsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
   /**
    * Filter by pot status
    */
   status?: string;
 };
 
+export type V1AccountsRetrieveParams = {
+  /**
+   * Page number for pagination
+   */
+  page?: number;
+  /**
+   * Number of results per page
+   */
+  page_size?: number;
+};
+
+export interface Token {
+  /** Token ID (address). */
+  account: string;
+  /**
+   * Token id on coingecko.
+   * @maxLength 255
+   * @nullable
+   */
+  coingecko_id?: string | null;
+  /**
+   * Token decimals.
+   * @minimum 0
+   * @maximum 2147483647
+   */
+  decimals: number;
+  /**
+   * Token icon (base64 data URL).
+   * @nullable
+   */
+  icon?: string | null;
+  /**
+   * Token name.
+   * @maxLength 255
+   * @nullable
+   */
+  name?: string | null;
+  /**
+   * Token symbol.
+   * @maxLength 255
+   * @nullable
+   */
+  symbol?: string | null;
+}
+
 /**
  * * `Pending` - Pending
  * `Approved` - Approved
@@ -60,11 +294,14 @@ export interface PotPayout {
   amount_paid_usd?: string | null;
   /** Payout id. */
   readonly id: number;
-  /** Payout date. */
-  paid_at: string;
-  readonly pot: string;
-  readonly recipient: string;
-  readonly token: string;
+  /**
+   * Payout date.
+   * @nullable
+   */
+  paid_at?: string | null;
+  pot: Pot;
+  recipient: Account;
+  token: Token;
   /**
    * Transaction hash.
    * @nullable
@@ -72,6 +309,36 @@ export interface PotPayout {
   tx_hash?: string | null;
 }
 
+/**
+ * Pot factory source metadata.
+ * @nullable
+ */
+export type PotFactorySourceMetadata = unknown | null;
+
+export interface PotFactory {
+  /** Pot factory account ID. */
+  account: string;
+  admins: Account[];
+  /** Pot factory deployment date. */
+  deployed_at: string;
+  owner: Account;
+  /**
+   * Pot factory protocol fee basis points.
+   * @minimum 0
+   * @maximum 2147483647
+   */
+  protocol_fee_basis_points: number;
+  protocol_fee_recipient: Account;
+  /** Require whitelist. */
+  require_whitelist: boolean;
+  /**
+   * Pot factory source metadata.
+   * @nullable
+   */
+  source_metadata?: PotFactorySourceMetadata;
+  whitelisted_deployers: Account[];
+}
+
 /**
  * * `Pending` - Pending
  * `Approved` - Approved
@@ -89,40 +356,10 @@ export const PotApplicationStatusEnum = {
   InReview: "InReview",
 } as const;
 
-export interface PotApplication {
-  readonly applicant: string;
-  /** Application id. */
-  readonly id: number;
-  /**
-   * Application message.
-   * @maxLength 1024
-   * @nullable
-   */
-  message?: string | null;
-  readonly pot: string;
-  /** Application status.
-
-* `Pending` - Pending
-* `Approved` - Approved
-* `Rejected` - Rejected
-* `InReview` - InReview */
-  status: PotApplicationStatusEnum;
-  /** Application submission date. */
-  submitted_at: string;
-  /**
-   * Transaction hash.
-   * @nullable
-   */
-  tx_hash?: string | null;
-  /**
-   * Application last update date.
-   * @nullable
-   */
-  updated_at?: string | null;
-}
-
 export interface Pot {
-  readonly admins: string;
+  /** Pot account ID. */
+  account: string;
+  admins: Account[];
   /** All paid out. */
   all_paid_out: boolean;
   /** Pot application end date. */
@@ -135,7 +372,7 @@ export interface Pot {
    * @nullable
    */
   base_currency?: string | null;
-  readonly chef: string;
+  chef: Account;
   /**
    * Chef fee basis points.
    * @minimum 0
@@ -168,11 +405,9 @@ export interface Pot {
   custom_sybil_checks?: string | null;
   /** Pot deployment date. */
   deployed_at: string;
-  readonly deployer: string;
+  deployer: Account;
   /** Pot description. */
   description: string;
-  /** Pot account ID. */
-  id: string;
   /** Matching pool balance. */
   matching_pool_balance: string;
   /**
@@ -195,7 +430,7 @@ export interface Pot {
   min_matching_pool_donation_amount: string;
   /** Pot name. */
   name: string;
-  readonly owner: string;
+  owner: Account;
   /** Pot factory. */
   pot_factory: string;
   /**
@@ -243,74 +478,121 @@ export interface Pot {
   total_public_donations_usd: string;
 }
 
-export interface NearSocialProfileData {
-  backgroundImage?: Image;
-  description?: string;
-  image?: Image;
-  linktree?: Linktree;
-  name?: string;
-  /** JSON-stringified array of category strings */
-  plCategories?: string;
-  /** JSON-stringified array of funding source objects */
-  plFundingSources?: string;
-  /** JSON-stringified array of URLs */
-  plGithubRepos?: string;
-  plPublicGoodReason?: string;
-  /** JSON-stringified object with chain names as keys that map to nested objects of contract addresses */
-  plSmartContracts?: string;
-  /** JSON-stringified array of team member account ID strings */
-  plTeam?: string;
-}
-
-export interface Nft {
-  baseUri?: string;
-  contractId?: string;
-  media?: string;
-  tokenId?: string;
-}
-
-export interface ListRegistration {
-  /**
-   * Admin notes.
-   * @maxLength 1024
-   * @nullable
-   */
-  admin_notes?: string | null;
-  /** Registration id. */
+export interface PotApplication {
+  applicant: Account;
+  /** Application id. */
   readonly id: number;
-  readonly list: string;
-  readonly registered_by: string;
-  readonly registrant: string;
   /**
-   * Registrant notes.
+   * Application message.
    * @maxLength 1024
    * @nullable
    */
-  registrant_notes?: string | null;
-  /** Registration status.
+  message?: string | null;
+  pot: Pot;
+  /** Application status.
 
 * `Pending` - Pending
 * `Approved` - Approved
 * `Rejected` - Rejected
-* `Graylisted` - Graylisted
-* `Blacklisted` - Blacklisted */
-  status: StatusF24Enum;
-  /** Registration submission date. */
+* `InReview` - InReview */
+  status: PotApplicationStatusEnum;
+  /** Application submission date. */
   submitted_at: string;
   /**
    * Transaction hash.
-   * @maxLength 64
    * @nullable
    */
   tx_hash?: string | null;
-  /** Registration last update date. */
-  updated_at: string;
+  /**
+   * Application last update date.
+   * @nullable
+   */
+  updated_at?: string | null;
+}
+
+export interface PaginatedPotsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: Pot[];
+}
+
+export interface PaginatedPotPayoutsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: PotPayout[];
+}
+
+export interface PaginatedPotFactoriesResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: PotFactory[];
+}
+
+export interface PaginatedPotApplicationsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: PotApplication[];
+}
+
+export interface PaginatedListsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: List[];
+}
+
+export interface PaginatedListRegistrationsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: ListRegistration[];
+}
+
+export interface PaginatedDonationsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: Donation[];
+}
+
+export interface PaginatedAccountsResponse {
+  count: number;
+  /** @nullable */
+  next: string | null;
+  /** @nullable */
+  previous: string | null;
+  results: Account[];
+}
+
+export interface Nft {
+  baseUri?: string;
+  contractId?: string;
+  media?: string;
+  tokenId?: string;
 }
 
 export interface List {
   /** Admin only registrations. */
   admin_only_registrations: boolean;
-  readonly admins: string;
+  admins: Account[];
   /**
    * Cover image url.
    * @maxLength 200
@@ -346,11 +628,49 @@ export interface List {
    * @maximum 2147483647
    */
   on_chain_id: number;
-  readonly owner: string;
+  owner: Account;
   /** List last update date. */
   updated_at: string;
 }
 
+export interface ListRegistration {
+  /**
+   * Admin notes.
+   * @maxLength 1024
+   * @nullable
+   */
+  admin_notes?: string | null;
+  /** Registration id. */
+  readonly id: number;
+  list: List;
+  registered_by: Account;
+  registrant: Account;
+  /**
+   * Registrant notes.
+   * @maxLength 1024
+   * @nullable
+   */
+  registrant_notes?: string | null;
+  /** Registration status.
+
+* `Pending` - Pending
+* `Approved` - Approved
+* `Rejected` - Rejected
+* `Graylisted` - Graylisted
+* `Blacklisted` - Blacklisted */
+  status: StatusF24Enum;
+  /** Registration submission date. */
+  submitted_at: string;
+  /**
+   * Transaction hash.
+   * @maxLength 64
+   * @nullable
+   */
+  tx_hash?: string | null;
+  /** Registration last update date. */
+  updated_at: string;
+}
+
 export interface Linktree {
   github?: string;
   telegram?: string;
@@ -364,6 +684,25 @@ export interface Image {
   url?: string;
 }
 
+export interface NearSocialProfileData {
+  backgroundImage?: Image;
+  description?: string;
+  image?: Image;
+  linktree?: Linktree;
+  name?: string;
+  /** JSON-stringified array of category strings */
+  plCategories?: string;
+  /** JSON-stringified array of funding source objects */
+  plFundingSources?: string;
+  /** JSON-stringified array of URLs */
+  plGithubRepos?: string;
+  plPublicGoodReason?: string;
+  /** JSON-stringified object with chain names as keys that map to nested objects of contract addresses */
+  plSmartContracts?: string;
+  /** JSON-stringified array of team member account ID strings */
+  plTeam?: string;
+}
+
 export interface DonationContractConfig {
   owner: string;
   protocol_fee_basis_points: number;
@@ -372,7 +711,7 @@ export interface DonationContractConfig {
 }
 
 export interface Donation {
-  readonly chef: string;
+  chef: Account;
   /**
    * Chef fee.
    * @maxLength 64
@@ -387,7 +726,7 @@ export interface Donation {
   chef_fee_usd?: string | null;
   /** Donation date. */
   donated_at: string;
-  readonly donor: string;
+  donor: Account;
   /** Donation id. */
   readonly id: number;
   /** Matching pool. */
@@ -415,7 +754,7 @@ export interface Donation {
    * @maximum 2147483647
    */
   on_chain_id: number;
-  readonly pot: string;
+  pot: Pot;
   /**
    * Protocol fee.
    * @maxLength 64
@@ -427,8 +766,8 @@ export interface Donation {
    * @pattern ^-?\d{0,18}(?:\.\d{0,2})?$
    */
   protocol_fee_usd?: string | null;
-  readonly recipient: string;
-  readonly referrer: string;
+  recipient: Account;
+  referrer: Account;
   /**
    * Referrer fee.
    * @maxLength 64
@@ -441,7 +780,7 @@ export interface Donation {
    * @pattern ^-?\d{0,18}(?:\.\d{0,2})?$
    */
   referrer_fee_usd?: string | null;
-  readonly token: string;
+  token: Token;
   /**
    * Total amount.
    * @maxLength 64
@@ -512,32 +851,40 @@ export interface Account {
 }
 
 export const v1AccountsRetrieve = (
+  params?: V1AccountsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Account[]>> => {
-  return axios.get(`/api/v1/accounts`, options);
+): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
+  return axios.get(`/api/v1/accounts`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1AccountsRetrieveKey = () => [`/api/v1/accounts`] as const;
+export const getV1AccountsRetrieveKey = (params?: V1AccountsRetrieveParams) =>
+  [`/api/v1/accounts`, ...(params ? [params] : [])] as const;
 
 export type V1AccountsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsRetrieve>>
 >;
 export type V1AccountsRetrieveQueryError = AxiosError<void>;
 
-export const useV1AccountsRetrieve = <TError = AxiosError<void>>(options?: {
-  swr?: SWRConfiguration<
-    Awaited<ReturnType<typeof v1AccountsRetrieve>>,
-    TError
-  > & { swrKey?: Key; enabled?: boolean };
-  axios?: AxiosRequestConfig;
-}) => {
+export const useV1AccountsRetrieve = <TError = AxiosError<void>>(
+  params?: V1AccountsRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1AccountsRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1AccountsRetrieveKey() : null));
-  const swrFn = () => v1AccountsRetrieve(axiosOptions);
+    (() => (isEnabled ? getV1AccountsRetrieveKey(params) : null));
+  const swrFn = () => v1AccountsRetrieve(params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -600,7 +947,7 @@ export const v1AccountsActivePotsRetrieve = (
   accountId: string,
   params?: V1AccountsActivePotsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Pot[]>> => {
+): Promise<AxiosResponse<PaginatedPotsResponse>> => {
   return axios.get(`/api/v1/accounts/${accountId}/active_pots`, {
     ...options,
     params: { ...params, ...options?.params },
@@ -656,13 +1003,23 @@ export const useV1AccountsActivePotsRetrieve = <TError = AxiosError<void>>(
 
 export const v1AccountsDonationsReceivedRetrieve = (
   accountId: string,
+  params?: V1AccountsDonationsReceivedRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Donation[]>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/donations_received`, options);
+): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/donations_received`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1AccountsDonationsReceivedRetrieveKey = (accountId: string) =>
-  [`/api/v1/accounts/${accountId}/donations_received`] as const;
+export const getV1AccountsDonationsReceivedRetrieveKey = (
+  accountId: string,
+  params?: V1AccountsDonationsReceivedRetrieveParams,
+) =>
+  [
+    `/api/v1/accounts/${accountId}/donations_received`,
+    ...(params ? [params] : []),
+  ] as const;
 
 export type V1AccountsDonationsReceivedRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsDonationsReceivedRetrieve>>
@@ -673,6 +1030,7 @@ export const useV1AccountsDonationsReceivedRetrieve = <
   TError = AxiosError<void>,
 >(
   accountId: string,
+  params?: V1AccountsDonationsReceivedRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsDonationsReceivedRetrieve>>,
@@ -687,9 +1045,11 @@ export const useV1AccountsDonationsReceivedRetrieve = <
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled ? getV1AccountsDonationsReceivedRetrieveKey(accountId) : null);
+      isEnabled
+        ? getV1AccountsDonationsReceivedRetrieveKey(accountId, params)
+        : null);
   const swrFn = () =>
-    v1AccountsDonationsReceivedRetrieve(accountId, axiosOptions);
+    v1AccountsDonationsReceivedRetrieve(accountId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -705,13 +1065,23 @@ export const useV1AccountsDonationsReceivedRetrieve = <
 
 export const v1AccountsDonationsSentRetrieve = (
   accountId: string,
+  params?: V1AccountsDonationsSentRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Donation[]>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/donations_sent`, options);
+): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/donations_sent`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1AccountsDonationsSentRetrieveKey = (accountId: string) =>
-  [`/api/v1/accounts/${accountId}/donations_sent`] as const;
+export const getV1AccountsDonationsSentRetrieveKey = (
+  accountId: string,
+  params?: V1AccountsDonationsSentRetrieveParams,
+) =>
+  [
+    `/api/v1/accounts/${accountId}/donations_sent`,
+    ...(params ? [params] : []),
+  ] as const;
 
 export type V1AccountsDonationsSentRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsDonationsSentRetrieve>>
@@ -720,6 +1090,7 @@ export type V1AccountsDonationsSentRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsDonationsSentRetrieve = <TError = AxiosError<void>>(
   accountId: string,
+  params?: V1AccountsDonationsSentRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsDonationsSentRetrieve>>,
@@ -734,8 +1105,73 @@ export const useV1AccountsDonationsSentRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled ? getV1AccountsDonationsSentRetrieveKey(accountId) : null);
-  const swrFn = () => v1AccountsDonationsSentRetrieve(accountId, axiosOptions);
+      isEnabled
+        ? getV1AccountsDonationsSentRetrieveKey(accountId, params)
+        : null);
+  const swrFn = () =>
+    v1AccountsDonationsSentRetrieve(accountId, params, axiosOptions);
+
+  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
+    swrKey,
+    swrFn,
+    swrOptions,
+  );
+
+  return {
+    swrKey,
+    ...query,
+  };
+};
+
+export const v1AccountsListRegistrationsRetrieve = (
+  accountId: string,
+  params?: V1AccountsListRegistrationsRetrieveParams,
+  options?: AxiosRequestConfig,
+): Promise<AxiosResponse<PaginatedListRegistrationsResponse>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/list-registrations`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
+};
+
+export const getV1AccountsListRegistrationsRetrieveKey = (
+  accountId: string,
+  params?: V1AccountsListRegistrationsRetrieveParams,
+) =>
+  [
+    `/api/v1/accounts/${accountId}/list-registrations`,
+    ...(params ? [params] : []),
+  ] as const;
+
+export type V1AccountsListRegistrationsRetrieveQueryResult = NonNullable<
+  Awaited<ReturnType<typeof v1AccountsListRegistrationsRetrieve>>
+>;
+export type V1AccountsListRegistrationsRetrieveQueryError = AxiosError<void>;
+
+export const useV1AccountsListRegistrationsRetrieve = <
+  TError = AxiosError<void>,
+>(
+  accountId: string,
+  params?: V1AccountsListRegistrationsRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1AccountsListRegistrationsRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
+  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
+
+  const isEnabled = swrOptions?.enabled !== false && !!accountId;
+  const swrKey =
+    swrOptions?.swrKey ??
+    (() =>
+      isEnabled
+        ? getV1AccountsListRegistrationsRetrieveKey(accountId, params)
+        : null);
+  const swrFn = () =>
+    v1AccountsListRegistrationsRetrieve(accountId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -751,13 +1187,23 @@ export const useV1AccountsDonationsSentRetrieve = <TError = AxiosError<void>>(
 
 export const v1AccountsPayoutsReceivedRetrieve = (
   accountId: string,
+  params?: V1AccountsPayoutsReceivedRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Donation[]>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/payouts_received`, options);
+): Promise<AxiosResponse<PaginatedPotPayoutsResponse>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/payouts_received`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1AccountsPayoutsReceivedRetrieveKey = (accountId: string) =>
-  [`/api/v1/accounts/${accountId}/payouts_received`] as const;
+export const getV1AccountsPayoutsReceivedRetrieveKey = (
+  accountId: string,
+  params?: V1AccountsPayoutsReceivedRetrieveParams,
+) =>
+  [
+    `/api/v1/accounts/${accountId}/payouts_received`,
+    ...(params ? [params] : []),
+  ] as const;
 
 export type V1AccountsPayoutsReceivedRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsPayoutsReceivedRetrieve>>
@@ -766,6 +1212,7 @@ export type V1AccountsPayoutsReceivedRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
   accountId: string,
+  params?: V1AccountsPayoutsReceivedRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsPayoutsReceivedRetrieve>>,
@@ -780,9 +1227,11 @@ export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled ? getV1AccountsPayoutsReceivedRetrieveKey(accountId) : null);
+      isEnabled
+        ? getV1AccountsPayoutsReceivedRetrieveKey(accountId, params)
+        : null);
   const swrFn = () =>
-    v1AccountsPayoutsReceivedRetrieve(accountId, axiosOptions);
+    v1AccountsPayoutsReceivedRetrieve(accountId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -798,13 +1247,23 @@ export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
 
 export const v1AccountsPotApplicationsRetrieve = (
   accountId: string,
+  params?: V1AccountsPotApplicationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PotApplication[]>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/pot_applications`, options);
+): Promise<AxiosResponse<PaginatedPotApplicationsResponse>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/pot_applications`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1AccountsPotApplicationsRetrieveKey = (accountId: string) =>
-  [`/api/v1/accounts/${accountId}/pot_applications`] as const;
+export const getV1AccountsPotApplicationsRetrieveKey = (
+  accountId: string,
+  params?: V1AccountsPotApplicationsRetrieveParams,
+) =>
+  [
+    `/api/v1/accounts/${accountId}/pot_applications`,
+    ...(params ? [params] : []),
+  ] as const;
 
 export type V1AccountsPotApplicationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsPotApplicationsRetrieve>>
@@ -813,6 +1272,7 @@ export type V1AccountsPotApplicationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
   accountId: string,
+  params?: V1AccountsPotApplicationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsPotApplicationsRetrieve>>,
@@ -827,9 +1287,11 @@ export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled ? getV1AccountsPotApplicationsRetrieveKey(accountId) : null);
+      isEnabled
+        ? getV1AccountsPotApplicationsRetrieveKey(accountId, params)
+        : null);
   const swrFn = () =>
-    v1AccountsPotApplicationsRetrieve(accountId, axiosOptions);
+    v1AccountsPotApplicationsRetrieve(accountId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -844,35 +1306,41 @@ export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
 };
 
 export const v1DonateContractConfigRetrieve = (
+  params?: V1DonateContractConfigRetrieveParams,
   options?: AxiosRequestConfig,
 ): Promise<AxiosResponse<DonationContractConfig>> => {
-  return axios.get(`/api/v1/donate_contract_config`, options);
+  return axios.get(`/api/v1/donate_contract_config`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1DonateContractConfigRetrieveKey = () =>
-  [`/api/v1/donate_contract_config`] as const;
+export const getV1DonateContractConfigRetrieveKey = (
+  params?: V1DonateContractConfigRetrieveParams,
+) => [`/api/v1/donate_contract_config`, ...(params ? [params] : [])] as const;
 
 export type V1DonateContractConfigRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>
 >;
 export type V1DonateContractConfigRetrieveQueryError = AxiosError<void>;
 
-export const useV1DonateContractConfigRetrieve = <
-  TError = AxiosError<void>,
->(options?: {
-  swr?: SWRConfiguration<
-    Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>,
-    TError
-  > & { swrKey?: Key; enabled?: boolean };
-  axios?: AxiosRequestConfig;
-}) => {
+export const useV1DonateContractConfigRetrieve = <TError = AxiosError<void>>(
+  params?: V1DonateContractConfigRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1DonateContractConfigRetrieveKey() : null));
-  const swrFn = () => v1DonateContractConfigRetrieve(axiosOptions);
+    (() => (isEnabled ? getV1DonateContractConfigRetrieveKey(params) : null));
+  const swrFn = () => v1DonateContractConfigRetrieve(params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -889,7 +1357,7 @@ export const useV1DonateContractConfigRetrieve = <
 export const v1DonorsRetrieve = (
   params?: V1DonorsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Account[]>> => {
+): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
   return axios.get(`/api/v1/donors`, {
     ...options,
     params: { ...params, ...options?.params },
@@ -935,31 +1403,40 @@ export const useV1DonorsRetrieve = <TError = AxiosError<void>>(
 };
 
 export const v1ListsRetrieve = (
+  params?: V1ListsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<List[]>> => {
-  return axios.get(`/api/v1/lists`, options);
+): Promise<AxiosResponse<PaginatedListsResponse>> => {
+  return axios.get(`/api/v1/lists`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1ListsRetrieveKey = () => [`/api/v1/lists`] as const;
+export const getV1ListsRetrieveKey = (params?: V1ListsRetrieveParams) =>
+  [`/api/v1/lists`, ...(params ? [params] : [])] as const;
 
 export type V1ListsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1ListsRetrieve>>
 >;
 export type V1ListsRetrieveQueryError = AxiosError<void>;
 
-export const useV1ListsRetrieve = <TError = AxiosError<void>>(options?: {
-  swr?: SWRConfiguration<
-    Awaited<ReturnType<typeof v1ListsRetrieve>>,
-    TError
-  > & { swrKey?: Key; enabled?: boolean };
-  axios?: AxiosRequestConfig;
-}) => {
+export const useV1ListsRetrieve = <TError = AxiosError<void>>(
+  params?: V1ListsRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1ListsRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
-    swrOptions?.swrKey ?? (() => (isEnabled ? getV1ListsRetrieveKey() : null));
-  const swrFn = () => v1ListsRetrieve(axiosOptions);
+    swrOptions?.swrKey ??
+    (() => (isEnabled ? getV1ListsRetrieveKey(params) : null));
+  const swrFn = () => v1ListsRetrieve(params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1018,15 +1495,85 @@ export const useV1ListsRetrieve2 = <TError = AxiosError<void>>(
   };
 };
 
+export const v1ListsRandomRegistrationRetrieve = (
+  listId: number,
+  params?: V1ListsRandomRegistrationRetrieveParams,
+  options?: AxiosRequestConfig,
+): Promise<AxiosResponse<ListRegistration>> => {
+  return axios.get(`/api/v1/lists/${listId}/random_registration`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
+};
+
+export const getV1ListsRandomRegistrationRetrieveKey = (
+  listId: number,
+  params?: V1ListsRandomRegistrationRetrieveParams,
+) =>
+  [
+    `/api/v1/lists/${listId}/random_registration`,
+    ...(params ? [params] : []),
+  ] as const;
+
+export type V1ListsRandomRegistrationRetrieveQueryResult = NonNullable<
+  Awaited<ReturnType<typeof v1ListsRandomRegistrationRetrieve>>
+>;
+export type V1ListsRandomRegistrationRetrieveQueryError = AxiosError<void>;
+
+export const useV1ListsRandomRegistrationRetrieve = <TError = AxiosError<void>>(
+  listId: number,
+  params?: V1ListsRandomRegistrationRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1ListsRandomRegistrationRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
+  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
+
+  const isEnabled = swrOptions?.enabled !== false && !!listId;
+  const swrKey =
+    swrOptions?.swrKey ??
+    (() =>
+      isEnabled
+        ? getV1ListsRandomRegistrationRetrieveKey(listId, params)
+        : null);
+  const swrFn = () =>
+    v1ListsRandomRegistrationRetrieve(listId, params, axiosOptions);
+
+  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
+    swrKey,
+    swrFn,
+    swrOptions,
+  );
+
+  return {
+    swrKey,
+    ...query,
+  };
+};
+
 export const v1ListsRegistrationsRetrieve = (
   listId: number,
+  params?: V1ListsRegistrationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<ListRegistration[]>> => {
-  return axios.get(`/api/v1/lists/${listId}/registrations`, options);
+): Promise<AxiosResponse<PaginatedListRegistrationsResponse>> => {
+  return axios.get(`/api/v1/lists/${listId}/registrations`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1ListsRegistrationsRetrieveKey = (listId: number) =>
-  [`/api/v1/lists/${listId}/registrations`] as const;
+export const getV1ListsRegistrationsRetrieveKey = (
+  listId: number,
+  params?: V1ListsRegistrationsRetrieveParams,
+) =>
+  [
+    `/api/v1/lists/${listId}/registrations`,
+    ...(params ? [params] : []),
+  ] as const;
 
 export type V1ListsRegistrationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1ListsRegistrationsRetrieve>>
@@ -1035,6 +1582,7 @@ export type V1ListsRegistrationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1ListsRegistrationsRetrieve = <TError = AxiosError<void>>(
   listId: number,
+  params?: V1ListsRegistrationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1ListsRegistrationsRetrieve>>,
@@ -1048,8 +1596,59 @@ export const useV1ListsRegistrationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!listId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1ListsRegistrationsRetrieveKey(listId) : null));
-  const swrFn = () => v1ListsRegistrationsRetrieve(listId, axiosOptions);
+    (() =>
+      isEnabled ? getV1ListsRegistrationsRetrieveKey(listId, params) : null);
+  const swrFn = () =>
+    v1ListsRegistrationsRetrieve(listId, params, axiosOptions);
+
+  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
+    swrKey,
+    swrFn,
+    swrOptions,
+  );
+
+  return {
+    swrKey,
+    ...query,
+  };
+};
+
+export const v1PotfactoriesRetrieve = (
+  params?: V1PotfactoriesRetrieveParams,
+  options?: AxiosRequestConfig,
+): Promise<AxiosResponse<PaginatedPotFactoriesResponse>> => {
+  return axios.get(`/api/v1/potfactories`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
+};
+
+export const getV1PotfactoriesRetrieveKey = (
+  params?: V1PotfactoriesRetrieveParams,
+) => [`/api/v1/potfactories`, ...(params ? [params] : [])] as const;
+
+export type V1PotfactoriesRetrieveQueryResult = NonNullable<
+  Awaited<ReturnType<typeof v1PotfactoriesRetrieve>>
+>;
+export type V1PotfactoriesRetrieveQueryError = AxiosError<unknown>;
+
+export const useV1PotfactoriesRetrieve = <TError = AxiosError<unknown>>(
+  params?: V1PotfactoriesRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1PotfactoriesRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
+  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
+
+  const isEnabled = swrOptions?.enabled !== false;
+  const swrKey =
+    swrOptions?.swrKey ??
+    (() => (isEnabled ? getV1PotfactoriesRetrieveKey(params) : null));
+  const swrFn = () => v1PotfactoriesRetrieve(params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1064,31 +1663,40 @@ export const useV1ListsRegistrationsRetrieve = <TError = AxiosError<void>>(
 };
 
 export const v1PotsRetrieve = (
+  params?: V1PotsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Pot[]>> => {
-  return axios.get(`/api/v1/pots`, options);
+): Promise<AxiosResponse<PaginatedPotsResponse>> => {
+  return axios.get(`/api/v1/pots`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1PotsRetrieveKey = () => [`/api/v1/pots`] as const;
+export const getV1PotsRetrieveKey = (params?: V1PotsRetrieveParams) =>
+  [`/api/v1/pots`, ...(params ? [params] : [])] as const;
 
 export type V1PotsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsRetrieve>>
 >;
 export type V1PotsRetrieveQueryError = AxiosError<unknown>;
 
-export const useV1PotsRetrieve = <TError = AxiosError<unknown>>(options?: {
-  swr?: SWRConfiguration<Awaited<ReturnType<typeof v1PotsRetrieve>>, TError> & {
-    swrKey?: Key;
-    enabled?: boolean;
-  };
-  axios?: AxiosRequestConfig;
-}) => {
+export const useV1PotsRetrieve = <TError = AxiosError<unknown>>(
+  params?: V1PotsRetrieveParams,
+  options?: {
+    swr?: SWRConfiguration<
+      Awaited<ReturnType<typeof v1PotsRetrieve>>,
+      TError
+    > & { swrKey?: Key; enabled?: boolean };
+    axios?: AxiosRequestConfig;
+  },
+) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
-    swrOptions?.swrKey ?? (() => (isEnabled ? getV1PotsRetrieveKey() : null));
-  const swrFn = () => v1PotsRetrieve(axiosOptions);
+    swrOptions?.swrKey ??
+    (() => (isEnabled ? getV1PotsRetrieveKey(params) : null));
+  const swrFn = () => v1PotsRetrieve(params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1149,13 +1757,20 @@ export const useV1PotsRetrieve2 = <TError = AxiosError<void>>(
 
 export const v1PotsApplicationsRetrieve = (
   potId: string,
+  params?: V1PotsApplicationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PotApplication[]>> => {
-  return axios.get(`/api/v1/pots/${potId}/applications`, options);
+): Promise<AxiosResponse<PaginatedPotApplicationsResponse>> => {
+  return axios.get(`/api/v1/pots/${potId}/applications`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1PotsApplicationsRetrieveKey = (potId: string) =>
-  [`/api/v1/pots/${potId}/applications`] as const;
+export const getV1PotsApplicationsRetrieveKey = (
+  potId: string,
+  params?: V1PotsApplicationsRetrieveParams,
+) =>
+  [`/api/v1/pots/${potId}/applications`, ...(params ? [params] : [])] as const;
 
 export type V1PotsApplicationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsApplicationsRetrieve>>
@@ -1164,6 +1779,7 @@ export type V1PotsApplicationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
   potId: string,
+  params?: V1PotsApplicationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsApplicationsRetrieve>>,
@@ -1177,8 +1793,9 @@ export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsApplicationsRetrieveKey(potId) : null));
-  const swrFn = () => v1PotsApplicationsRetrieve(potId, axiosOptions);
+    (() =>
+      isEnabled ? getV1PotsApplicationsRetrieveKey(potId, params) : null);
+  const swrFn = () => v1PotsApplicationsRetrieve(potId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1194,13 +1811,19 @@ export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsDonationsRetrieve = (
   potId: string,
+  params?: V1PotsDonationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Donation[]>> => {
-  return axios.get(`/api/v1/pots/${potId}/donations`, options);
+): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
+  return axios.get(`/api/v1/pots/${potId}/donations`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1PotsDonationsRetrieveKey = (potId: string) =>
-  [`/api/v1/pots/${potId}/donations`] as const;
+export const getV1PotsDonationsRetrieveKey = (
+  potId: string,
+  params?: V1PotsDonationsRetrieveParams,
+) => [`/api/v1/pots/${potId}/donations`, ...(params ? [params] : [])] as const;
 
 export type V1PotsDonationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsDonationsRetrieve>>
@@ -1209,6 +1832,7 @@ export type V1PotsDonationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
   potId: string,
+  params?: V1PotsDonationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsDonationsRetrieve>>,
@@ -1222,8 +1846,8 @@ export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsDonationsRetrieveKey(potId) : null));
-  const swrFn = () => v1PotsDonationsRetrieve(potId, axiosOptions);
+    (() => (isEnabled ? getV1PotsDonationsRetrieveKey(potId, params) : null));
+  const swrFn = () => v1PotsDonationsRetrieve(potId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1239,13 +1863,19 @@ export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsPayoutsRetrieve = (
   potId: string,
+  params?: V1PotsPayoutsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PotPayout[]>> => {
-  return axios.get(`/api/v1/pots/${potId}/payouts`, options);
+): Promise<AxiosResponse<PaginatedPotPayoutsResponse>> => {
+  return axios.get(`/api/v1/pots/${potId}/payouts`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1PotsPayoutsRetrieveKey = (potId: string) =>
-  [`/api/v1/pots/${potId}/payouts`] as const;
+export const getV1PotsPayoutsRetrieveKey = (
+  potId: string,
+  params?: V1PotsPayoutsRetrieveParams,
+) => [`/api/v1/pots/${potId}/payouts`, ...(params ? [params] : [])] as const;
 
 export type V1PotsPayoutsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsPayoutsRetrieve>>
@@ -1254,6 +1884,7 @@ export type V1PotsPayoutsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
   potId: string,
+  params?: V1PotsPayoutsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsPayoutsRetrieve>>,
@@ -1267,8 +1898,8 @@ export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsPayoutsRetrieveKey(potId) : null));
-  const swrFn = () => v1PotsPayoutsRetrieve(potId, axiosOptions);
+    (() => (isEnabled ? getV1PotsPayoutsRetrieveKey(potId, params) : null));
+  const swrFn = () => v1PotsPayoutsRetrieve(potId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1284,13 +1915,19 @@ export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsSponsorsRetrieve = (
   potId: string,
+  params?: V1PotsSponsorsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<Account[]>> => {
-  return axios.get(`/api/v1/pots/${potId}/sponsors`, options);
+): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
+  return axios.get(`/api/v1/pots/${potId}/sponsors`, {
+    ...options,
+    params: { ...params, ...options?.params },
+  });
 };
 
-export const getV1PotsSponsorsRetrieveKey = (potId: string) =>
-  [`/api/v1/pots/${potId}/sponsors`] as const;
+export const getV1PotsSponsorsRetrieveKey = (
+  potId: string,
+  params?: V1PotsSponsorsRetrieveParams,
+) => [`/api/v1/pots/${potId}/sponsors`, ...(params ? [params] : [])] as const;
 
 export type V1PotsSponsorsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsSponsorsRetrieve>>
@@ -1299,6 +1936,7 @@ export type V1PotsSponsorsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsSponsorsRetrieve = <TError = AxiosError<void>>(
   potId: string,
+  params?: V1PotsSponsorsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsSponsorsRetrieve>>,
@@ -1312,8 +1950,8 @@ export const useV1PotsSponsorsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsSponsorsRetrieveKey(potId) : null));
-  const swrFn = () => v1PotsSponsorsRetrieve(potId, axiosOptions);
+    (() => (isEnabled ? getV1PotsSponsorsRetrieveKey(potId, params) : null));
+  const swrFn = () => v1PotsSponsorsRetrieve(potId, params, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,

From b68d61e9c837a0164b9e07bc4ae1c56338f104dc Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 11:55:50 +0100
Subject: [PATCH 13/43] updated filterchip instead of button

---
 src/app/donors/page.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index f72eb412b..838ab42f5 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 import Image from "next/image";
 
 import NearIcon from "@/common/assets/svgs/near-icon";
-import { Button, SearchBar, ToggleGroup } from "@/common/ui/components";
+import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/components";
 
 import { LeaderboardCard } from "../_components/LeaderboardCard";
 
@@ -191,16 +191,14 @@ export default function LeaderboardPage() {
         />
         <div className="flex w-fit gap-3">
           {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
-            <Button
+            <FilterChip
               key={filter}
-              variant={
-                timeFilter === filter ? "sec-brand-filled" : "standard-outline"
-              }
+              variant={timeFilter === filter ? "brand-filled" : "brand-outline"}
               onClick={() => setTimeFilter(filter)}
               className="py-0.375 px-3 text-sm"
             >
               {filter}
-            </Button>
+            </FilterChip>
           ))}
         </div>
       </div>
@@ -409,18 +407,16 @@ export default function LeaderboardPage() {
                 />
                 <div className="flex w-fit gap-3">
                   {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
-                    <Button
+                    <FilterChip
                       key={filter}
                       variant={
-                        timeFilter === filter
-                          ? "sec-brand-filled"
-                          : "standard-outline"
+                        timeFilter === filter ? "brand-filled" : "brand-outline"
                       }
                       onClick={() => setTimeFilter(filter)}
                       className="py-0.375 px-3 text-sm"
                     >
                       {filter}
-                    </Button>
+                    </FilterChip>
                   ))}
                 </div>
               </div>

From 5c987502ecd9912492c12ef9fe3b5e9ed2c91b69 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 12:49:16 +0100
Subject: [PATCH 14/43] fixed breakpoints

---
 src/app/donors/page.tsx                  | 100 ++++++++++++-----------
 src/common/ui/components/filter-chip.tsx |   2 +-
 2 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 838ab42f5..a3cc4d189 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -182,7 +182,7 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="pb-24px flex w-full flex-col gap-x-14 gap-y-4 pt-10 sm:w-auto md:flex-row md:justify-between">
+      <div className="pb-24px flex w-full flex-row flex-wrap justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col">
         <SearchBar
           className="w-85% max-w-xs flex-1 text-gray-400"
           placeholder={`Search projects`}
@@ -202,7 +202,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px ml-[-36px] mr-[-46px] w-screen overflow-x-scroll md:w-[104.5%]">
+      <div className="pl-36px ml-[-36px] mr-[-46px] w-[104.5%] sm:w-fit sm:overflow-x-scroll">
         <div className="gap-20px mb-8 grid w-full grid-flow-col">
           {participants.slice(0, 3).map((participant) => (
             <LeaderboardCard
@@ -217,7 +217,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
 
-      <div className="hidden overflow-x-auto rounded-2xl border border-gray-200 bg-white  md:block">
+      <div className="block overflow-x-auto rounded-2xl border border-gray-200 bg-white  sm:hidden">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
@@ -236,53 +236,61 @@ export default function LeaderboardPage() {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 bg-white">
-            {participants.slice(3).map((participant) => (
-              <tr key={participant.rank}>
-                <td className="w-10px whitespace-nowrap p-4">
-                  <div className="flex items-center">
-                    <span className="text-sm text-gray-900">
-                      #{participant.rank}
-                    </span>
-                    {participant.rank === 4 ? (
-                      <div className="ml-1 text-green-500" />
-                    ) : (
-                      <div className="ml-1 text-red-500" />
-                    )}
-                  </div>
-                </td>
-                <td className="whitespace-nowrap p-4">
-                  <div className="flex items-center">
-                    <Image
-                      className="h-10 w-10 rounded-full"
-                      src={participant.image}
-                      width={10}
-                      height={10}
-                      alt=""
-                    />
-                    <div className="ml-4">
-                      <div className="font-500 text-sm text-gray-900">
-                        {participant.name}
+            {participants
+              .filter((participant) =>
+                participant.name
+                  .toLowerCase()
+                  .includes(searchTerm.toLowerCase()),
+              )
+              .sort((a, b) => b.amount - a.amount)
+              .slice(3)
+              .map((participant) => (
+                <tr key={participant.rank}>
+                  <td className="w-10px whitespace-nowrap p-4">
+                    <div className="flex items-center">
+                      <span className="text-sm text-gray-900">
+                        #{participant.rank}
+                      </span>
+                      {participant.rank === 4 ? (
+                        <div className="ml-1 text-green-500" />
+                      ) : (
+                        <div className="ml-1 text-red-500" />
+                      )}
+                    </div>
+                  </td>
+                  <td className="whitespace-nowrap p-4">
+                    <div className="flex items-center">
+                      <Image
+                        className="h-10 w-10 rounded-full"
+                        src={participant.image}
+                        width={10}
+                        height={10}
+                        alt=""
+                      />
+                      <div className="ml-4">
+                        <div className="font-500 text-sm text-gray-900">
+                          {participant.name}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </td>
-                <td className="w-100px whitespace-nowrap p-4">
-                  <div className="gap-8px flex items-center text-sm text-gray-900">
-                    <NearIcon className="w-18px h-18px pb-[-4]" />
-                    <span className="font-600 m-0 pt-[2px]">
-                      {participant.amount}
-                    </span>
-                  </div>
-                </td>
-                <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
-                  $ {participant.amountUsd}
-                </td>
-              </tr>
-            ))}
+                  </td>
+                  <td className="w-100px whitespace-nowrap p-4">
+                    <div className="gap-8px flex items-center text-sm text-gray-900">
+                      <NearIcon className="w-18px h-18px pb-[-4]" />
+                      <span className="font-600 m-0 pt-[2px]">
+                        {participant.amount}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
+                    $ {participant.amountUsd}
+                  </td>
+                </tr>
+              ))}
           </tbody>
         </table>
       </div>
-      <div className="p-16px flex flex-col items-start gap-4 md:hidden">
+      <div className="p-16px hidden flex-col items-start gap-4 sm:flex">
         {participants.map((participant) => (
           <div
             key={participant.rank}
@@ -398,7 +406,7 @@ export default function LeaderboardPage() {
               <h1 className="font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 All Activities
               </h1>
-              <div className="pb-24px flex w-full flex-col justify-between gap-x-14 gap-y-4 pt-10 sm:w-auto md:flex-row">
+              <div className="pb-24px flex w-full flex-row flex-wrap justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col">
                 <SearchBar
                   className="w-85% max-w-xs text-gray-400 md:w-auto"
                   placeholder={`Search projects`}
diff --git a/src/common/ui/components/filter-chip.tsx b/src/common/ui/components/filter-chip.tsx
index 763051751..688896790 100644
--- a/src/common/ui/components/filter-chip.tsx
+++ b/src/common/ui/components/filter-chip.tsx
@@ -8,7 +8,7 @@ import { cn } from "../utils";
 // TODO: add correct hover effects
 const filterChipVariants = cva(
   cn(
-    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium",
+    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium whitespace-nowrap",
     "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
     "border-none focus:shadow-button-focus disabled:cursor-not-allowed",
   ),

From 3264fcaaa79f434b3a9567d60798704d6dbd1d28 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Thu, 17 Oct 2024 12:49:47 +0100
Subject: [PATCH 15/43] imported filterchip to index in components

---
 src/common/ui/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/ui/components/index.ts b/src/common/ui/components/index.ts
index 12d28044d..0c0c6b0d4 100644
--- a/src/common/ui/components/index.ts
+++ b/src/common/ui/components/index.ts
@@ -21,3 +21,4 @@ export * from "./textarea";
 export * from "./text-field";
 export * from "./toggle";
 export * from "./toggle-group";
+export * from "./filter-chip";

From 74890463309d3a19245bef7a6a2638419899b85b Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 05:45:40 +0100
Subject: [PATCH 16/43] updatd timeAgo function

---
 src/app/donors/page.tsx | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index a3cc4d189..0e9bada2c 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -158,12 +158,30 @@ const timeAgo = (timestamp: number) => {
   const diff = now - timestamp;
   if (diff < 1000 * 60) {
     return `${Math.floor(diff / 1000)}s ago`;
+  } else if (diff < 1000 * 60 * 2) {
+    return `1 min ago`;
   } else if (diff < 1000 * 60 * 60) {
-    return `${Math.floor(diff / (1000 * 60))}mns ago`;
+    return `${Math.floor(diff / (1000 * 60))} mins ago`;
+  } else if (diff < 1000 * 60 * 60 * 2) {
+    return `1 hr ago`;
   } else if (diff < 1000 * 60 * 60 * 24) {
-    return `${Math.floor(diff / (1000 * 60 * 60))}hrs ago`;
+    return `${Math.floor(diff / (1000 * 60 * 60))} hrs ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 2) {
+    return `1 day ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 7) {
+    return `${Math.floor(diff / (1000 * 60 * 60 * 24))} days ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 7 * 2) {
+    return `1 wk ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 30) {
+    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 7))} wks ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 30 * 2) {
+    return `1 mn ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 365) {
+    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 30))} mns ago`;
+  } else if (diff < 1000 * 60 * 60 * 24 * 365 * 2) {
+    return `1 yr ago`;
   } else {
-    return `${Math.floor(diff / (1000 * 60 * 60 * 24))}days ago`;
+    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 365))} yrs ago`;
   }
 };
 
@@ -182,9 +200,9 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="pb-24px flex w-full flex-row flex-wrap justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col">
+      <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
         <SearchBar
-          className="w-85% max-w-xs flex-1 text-gray-400"
+          className="w-320px text-gray-400"
           placeholder={`Search projects`}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
@@ -406,7 +424,7 @@ export default function LeaderboardPage() {
               <h1 className="font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 All Activities
               </h1>
-              <div className="pb-24px flex w-full flex-row flex-wrap justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col">
+              <div className="pb-24px flex w-full justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col md:flex-row">
                 <SearchBar
                   className="w-85% max-w-xs text-gray-400 md:w-auto"
                   placeholder={`Search projects`}
@@ -444,7 +462,7 @@ export default function LeaderboardPage() {
                           height={10}
                         />
                         <h1
-                          className="w-100px m:w-fit truncate md:overflow-visible"
+                          className="w-100px truncate md:w-fit md:overflow-visible"
                           title={activity.sender}
                         >
                           {activity.sender}
@@ -475,7 +493,7 @@ export default function LeaderboardPage() {
                           height={10}
                         />
                         <h1
-                          className="w-100px m:w-fit truncate md:overflow-visible"
+                          className="w-100px truncate md:w-fit md:overflow-visible"
                           title={activity.receiver}
                         >
                           {activity.receiver}

From fc86155c118af7548ebfbc8d4965ffd497676ae9 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 09:45:06 +0100
Subject: [PATCH 17/43] reverted client file in api/potlock/generated

---
 src/common/api/potlock/generated/client.ts | 1070 ++++----------------
 1 file changed, 216 insertions(+), 854 deletions(-)

diff --git a/src/common/api/potlock/generated/client.ts b/src/common/api/potlock/generated/client.ts
index 96b0ad42b..2e0d69c35 100644
--- a/src/common/api/potlock/generated/client.ts
+++ b/src/common/api/potlock/generated/client.ts
@@ -9,254 +9,20 @@ import axios from "axios";
 import type { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
 import useSwr from "swr";
 import type { Key, SWRConfiguration } from "swr";
-export type V1PotsSponsorsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1PotsPayoutsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1PotsDonationsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1PotsApplicationsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1PotsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1PotfactoriesRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1ListsRegistrationsRetrieveParams = {
-  /**
-   * Filter registrations by category
-   */
-  category?: string;
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-  /**
-   * Filter registrations by status
-   */
-  status?: string;
-};
-
-export type V1ListsRandomRegistrationRetrieveParams = {
-  /**
-   * Filter registrations by status
-   */
-  status?: string;
-};
-
-export type V1ListsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
 export type V1DonorsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
   /**
    * Sort by field, e.g., most_donated_usd
    */
   sort?: string;
 };
 
-export type V1DonateContractConfigRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1AccountsPotApplicationsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-  /**
-   * Filter pot applications by status
-   */
-  status?: string;
-};
-
-export type V1AccountsPayoutsReceivedRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1AccountsListRegistrationsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1AccountsDonationsSentRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export type V1AccountsDonationsReceivedRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
 export type V1AccountsActivePotsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
   /**
    * Filter by pot status
    */
   status?: string;
 };
 
-export type V1AccountsRetrieveParams = {
-  /**
-   * Page number for pagination
-   */
-  page?: number;
-  /**
-   * Number of results per page
-   */
-  page_size?: number;
-};
-
-export interface Token {
-  /** Token ID (address). */
-  account: string;
-  /**
-   * Token id on coingecko.
-   * @maxLength 255
-   * @nullable
-   */
-  coingecko_id?: string | null;
-  /**
-   * Token decimals.
-   * @minimum 0
-   * @maximum 2147483647
-   */
-  decimals: number;
-  /**
-   * Token icon (base64 data URL).
-   * @nullable
-   */
-  icon?: string | null;
-  /**
-   * Token name.
-   * @maxLength 255
-   * @nullable
-   */
-  name?: string | null;
-  /**
-   * Token symbol.
-   * @maxLength 255
-   * @nullable
-   */
-  symbol?: string | null;
-}
-
 /**
  * * `Pending` - Pending
  * `Approved` - Approved
@@ -294,14 +60,11 @@ export interface PotPayout {
   amount_paid_usd?: string | null;
   /** Payout id. */
   readonly id: number;
-  /**
-   * Payout date.
-   * @nullable
-   */
-  paid_at?: string | null;
-  pot: Pot;
-  recipient: Account;
-  token: Token;
+  /** Payout date. */
+  paid_at: string;
+  readonly pot: string;
+  readonly recipient: string;
+  readonly token: string;
   /**
    * Transaction hash.
    * @nullable
@@ -309,36 +72,6 @@ export interface PotPayout {
   tx_hash?: string | null;
 }
 
-/**
- * Pot factory source metadata.
- * @nullable
- */
-export type PotFactorySourceMetadata = unknown | null;
-
-export interface PotFactory {
-  /** Pot factory account ID. */
-  account: string;
-  admins: Account[];
-  /** Pot factory deployment date. */
-  deployed_at: string;
-  owner: Account;
-  /**
-   * Pot factory protocol fee basis points.
-   * @minimum 0
-   * @maximum 2147483647
-   */
-  protocol_fee_basis_points: number;
-  protocol_fee_recipient: Account;
-  /** Require whitelist. */
-  require_whitelist: boolean;
-  /**
-   * Pot factory source metadata.
-   * @nullable
-   */
-  source_metadata?: PotFactorySourceMetadata;
-  whitelisted_deployers: Account[];
-}
-
 /**
  * * `Pending` - Pending
  * `Approved` - Approved
@@ -356,10 +89,40 @@ export const PotApplicationStatusEnum = {
   InReview: "InReview",
 } as const;
 
+export interface PotApplication {
+  readonly applicant: string;
+  /** Application id. */
+  readonly id: number;
+  /**
+   * Application message.
+   * @maxLength 1024
+   * @nullable
+   */
+  message?: string | null;
+  readonly pot: string;
+  /** Application status.
+
+* `Pending` - Pending
+* `Approved` - Approved
+* `Rejected` - Rejected
+* `InReview` - InReview */
+  status: PotApplicationStatusEnum;
+  /** Application submission date. */
+  submitted_at: string;
+  /**
+   * Transaction hash.
+   * @nullable
+   */
+  tx_hash?: string | null;
+  /**
+   * Application last update date.
+   * @nullable
+   */
+  updated_at?: string | null;
+}
+
 export interface Pot {
-  /** Pot account ID. */
-  account: string;
-  admins: Account[];
+  readonly admins: string;
   /** All paid out. */
   all_paid_out: boolean;
   /** Pot application end date. */
@@ -372,7 +135,7 @@ export interface Pot {
    * @nullable
    */
   base_currency?: string | null;
-  chef: Account;
+  readonly chef: string;
   /**
    * Chef fee basis points.
    * @minimum 0
@@ -405,9 +168,11 @@ export interface Pot {
   custom_sybil_checks?: string | null;
   /** Pot deployment date. */
   deployed_at: string;
-  deployer: Account;
+  readonly deployer: string;
   /** Pot description. */
   description: string;
+  /** Pot account ID. */
+  id: string;
   /** Matching pool balance. */
   matching_pool_balance: string;
   /**
@@ -430,7 +195,7 @@ export interface Pot {
   min_matching_pool_donation_amount: string;
   /** Pot name. */
   name: string;
-  owner: Account;
+  readonly owner: string;
   /** Pot factory. */
   pot_factory: string;
   /**
@@ -478,121 +243,74 @@ export interface Pot {
   total_public_donations_usd: string;
 }
 
-export interface PotApplication {
-  applicant: Account;
-  /** Application id. */
+export interface NearSocialProfileData {
+  backgroundImage?: Image;
+  description?: string;
+  image?: Image;
+  linktree?: Linktree;
+  name?: string;
+  /** JSON-stringified array of category strings */
+  plCategories?: string;
+  /** JSON-stringified array of funding source objects */
+  plFundingSources?: string;
+  /** JSON-stringified array of URLs */
+  plGithubRepos?: string;
+  plPublicGoodReason?: string;
+  /** JSON-stringified object with chain names as keys that map to nested objects of contract addresses */
+  plSmartContracts?: string;
+  /** JSON-stringified array of team member account ID strings */
+  plTeam?: string;
+}
+
+export interface Nft {
+  baseUri?: string;
+  contractId?: string;
+  media?: string;
+  tokenId?: string;
+}
+
+export interface ListRegistration {
+  /**
+   * Admin notes.
+   * @maxLength 1024
+   * @nullable
+   */
+  admin_notes?: string | null;
+  /** Registration id. */
   readonly id: number;
+  readonly list: string;
+  readonly registered_by: string;
+  readonly registrant: string;
   /**
-   * Application message.
+   * Registrant notes.
    * @maxLength 1024
    * @nullable
    */
-  message?: string | null;
-  pot: Pot;
-  /** Application status.
+  registrant_notes?: string | null;
+  /** Registration status.
 
 * `Pending` - Pending
 * `Approved` - Approved
 * `Rejected` - Rejected
-* `InReview` - InReview */
-  status: PotApplicationStatusEnum;
-  /** Application submission date. */
+* `Graylisted` - Graylisted
+* `Blacklisted` - Blacklisted */
+  status: StatusF24Enum;
+  /** Registration submission date. */
   submitted_at: string;
   /**
    * Transaction hash.
+   * @maxLength 64
    * @nullable
    */
   tx_hash?: string | null;
-  /**
-   * Application last update date.
-   * @nullable
-   */
-  updated_at?: string | null;
-}
-
-export interface PaginatedPotsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: Pot[];
-}
-
-export interface PaginatedPotPayoutsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: PotPayout[];
-}
-
-export interface PaginatedPotFactoriesResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: PotFactory[];
-}
-
-export interface PaginatedPotApplicationsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: PotApplication[];
-}
-
-export interface PaginatedListsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: List[];
-}
-
-export interface PaginatedListRegistrationsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: ListRegistration[];
-}
-
-export interface PaginatedDonationsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: Donation[];
-}
-
-export interface PaginatedAccountsResponse {
-  count: number;
-  /** @nullable */
-  next: string | null;
-  /** @nullable */
-  previous: string | null;
-  results: Account[];
-}
-
-export interface Nft {
-  baseUri?: string;
-  contractId?: string;
-  media?: string;
-  tokenId?: string;
+  /** Registration last update date. */
+  updated_at: string;
 }
 
 export interface List {
   /** Admin only registrations. */
   admin_only_registrations: boolean;
-  admins: Account[];
+  readonly admins: string;
   /**
    * Cover image url.
    * @maxLength 200
@@ -628,79 +346,22 @@ export interface List {
    * @maximum 2147483647
    */
   on_chain_id: number;
-  owner: Account;
+  readonly owner: string;
   /** List last update date. */
   updated_at: string;
 }
-
-export interface ListRegistration {
-  /**
-   * Admin notes.
-   * @maxLength 1024
-   * @nullable
-   */
-  admin_notes?: string | null;
-  /** Registration id. */
-  readonly id: number;
-  list: List;
-  registered_by: Account;
-  registrant: Account;
-  /**
-   * Registrant notes.
-   * @maxLength 1024
-   * @nullable
-   */
-  registrant_notes?: string | null;
-  /** Registration status.
-
-* `Pending` - Pending
-* `Approved` - Approved
-* `Rejected` - Rejected
-* `Graylisted` - Graylisted
-* `Blacklisted` - Blacklisted */
-  status: StatusF24Enum;
-  /** Registration submission date. */
-  submitted_at: string;
-  /**
-   * Transaction hash.
-   * @maxLength 64
-   * @nullable
-   */
-  tx_hash?: string | null;
-  /** Registration last update date. */
-  updated_at: string;
-}
-
-export interface Linktree {
-  github?: string;
-  telegram?: string;
-  twitter?: string;
-  website?: string;
-}
-
-export interface Image {
-  ipfs_cid?: string;
-  nft?: Nft;
-  url?: string;
-}
-
-export interface NearSocialProfileData {
-  backgroundImage?: Image;
-  description?: string;
-  image?: Image;
-  linktree?: Linktree;
-  name?: string;
-  /** JSON-stringified array of category strings */
-  plCategories?: string;
-  /** JSON-stringified array of funding source objects */
-  plFundingSources?: string;
-  /** JSON-stringified array of URLs */
-  plGithubRepos?: string;
-  plPublicGoodReason?: string;
-  /** JSON-stringified object with chain names as keys that map to nested objects of contract addresses */
-  plSmartContracts?: string;
-  /** JSON-stringified array of team member account ID strings */
-  plTeam?: string;
+
+export interface Linktree {
+  github?: string;
+  telegram?: string;
+  twitter?: string;
+  website?: string;
+}
+
+export interface Image {
+  ipfs_cid?: string;
+  nft?: Nft;
+  url?: string;
 }
 
 export interface DonationContractConfig {
@@ -711,7 +372,7 @@ export interface DonationContractConfig {
 }
 
 export interface Donation {
-  chef: Account;
+  readonly chef: string;
   /**
    * Chef fee.
    * @maxLength 64
@@ -726,7 +387,7 @@ export interface Donation {
   chef_fee_usd?: string | null;
   /** Donation date. */
   donated_at: string;
-  donor: Account;
+  readonly donor: string;
   /** Donation id. */
   readonly id: number;
   /** Matching pool. */
@@ -754,7 +415,7 @@ export interface Donation {
    * @maximum 2147483647
    */
   on_chain_id: number;
-  pot: Pot;
+  readonly pot: string;
   /**
    * Protocol fee.
    * @maxLength 64
@@ -766,8 +427,8 @@ export interface Donation {
    * @pattern ^-?\d{0,18}(?:\.\d{0,2})?$
    */
   protocol_fee_usd?: string | null;
-  recipient: Account;
-  referrer: Account;
+  readonly recipient: string;
+  readonly referrer: string;
   /**
    * Referrer fee.
    * @maxLength 64
@@ -780,7 +441,7 @@ export interface Donation {
    * @pattern ^-?\d{0,18}(?:\.\d{0,2})?$
    */
   referrer_fee_usd?: string | null;
-  token: Token;
+  readonly token: string;
   /**
    * Total amount.
    * @maxLength 64
@@ -851,40 +512,32 @@ export interface Account {
 }
 
 export const v1AccountsRetrieve = (
-  params?: V1AccountsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
-  return axios.get(`/api/v1/accounts`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Account[]>> => {
+  return axios.get(`/api/v1/accounts`, options);
 };
 
-export const getV1AccountsRetrieveKey = (params?: V1AccountsRetrieveParams) =>
-  [`/api/v1/accounts`, ...(params ? [params] : [])] as const;
+export const getV1AccountsRetrieveKey = () => [`/api/v1/accounts`] as const;
 
 export type V1AccountsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsRetrieve>>
 >;
 export type V1AccountsRetrieveQueryError = AxiosError<void>;
 
-export const useV1AccountsRetrieve = <TError = AxiosError<void>>(
-  params?: V1AccountsRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1AccountsRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
+export const useV1AccountsRetrieve = <TError = AxiosError<void>>(options?: {
+  swr?: SWRConfiguration<
+    Awaited<ReturnType<typeof v1AccountsRetrieve>>,
+    TError
+  > & { swrKey?: Key; enabled?: boolean };
+  axios?: AxiosRequestConfig;
+}) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1AccountsRetrieveKey(params) : null));
-  const swrFn = () => v1AccountsRetrieve(params, axiosOptions);
+    (() => (isEnabled ? getV1AccountsRetrieveKey() : null));
+  const swrFn = () => v1AccountsRetrieve(axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -947,7 +600,7 @@ export const v1AccountsActivePotsRetrieve = (
   accountId: string,
   params?: V1AccountsActivePotsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotsResponse>> => {
+): Promise<AxiosResponse<Pot[]>> => {
   return axios.get(`/api/v1/accounts/${accountId}/active_pots`, {
     ...options,
     params: { ...params, ...options?.params },
@@ -1003,23 +656,13 @@ export const useV1AccountsActivePotsRetrieve = <TError = AxiosError<void>>(
 
 export const v1AccountsDonationsReceivedRetrieve = (
   accountId: string,
-  params?: V1AccountsDonationsReceivedRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/donations_received`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Donation[]>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/donations_received`, options);
 };
 
-export const getV1AccountsDonationsReceivedRetrieveKey = (
-  accountId: string,
-  params?: V1AccountsDonationsReceivedRetrieveParams,
-) =>
-  [
-    `/api/v1/accounts/${accountId}/donations_received`,
-    ...(params ? [params] : []),
-  ] as const;
+export const getV1AccountsDonationsReceivedRetrieveKey = (accountId: string) =>
+  [`/api/v1/accounts/${accountId}/donations_received`] as const;
 
 export type V1AccountsDonationsReceivedRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsDonationsReceivedRetrieve>>
@@ -1030,7 +673,6 @@ export const useV1AccountsDonationsReceivedRetrieve = <
   TError = AxiosError<void>,
 >(
   accountId: string,
-  params?: V1AccountsDonationsReceivedRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsDonationsReceivedRetrieve>>,
@@ -1045,11 +687,9 @@ export const useV1AccountsDonationsReceivedRetrieve = <
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled
-        ? getV1AccountsDonationsReceivedRetrieveKey(accountId, params)
-        : null);
+      isEnabled ? getV1AccountsDonationsReceivedRetrieveKey(accountId) : null);
   const swrFn = () =>
-    v1AccountsDonationsReceivedRetrieve(accountId, params, axiosOptions);
+    v1AccountsDonationsReceivedRetrieve(accountId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1065,23 +705,13 @@ export const useV1AccountsDonationsReceivedRetrieve = <
 
 export const v1AccountsDonationsSentRetrieve = (
   accountId: string,
-  params?: V1AccountsDonationsSentRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/donations_sent`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Donation[]>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/donations_sent`, options);
 };
 
-export const getV1AccountsDonationsSentRetrieveKey = (
-  accountId: string,
-  params?: V1AccountsDonationsSentRetrieveParams,
-) =>
-  [
-    `/api/v1/accounts/${accountId}/donations_sent`,
-    ...(params ? [params] : []),
-  ] as const;
+export const getV1AccountsDonationsSentRetrieveKey = (accountId: string) =>
+  [`/api/v1/accounts/${accountId}/donations_sent`] as const;
 
 export type V1AccountsDonationsSentRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsDonationsSentRetrieve>>
@@ -1090,7 +720,6 @@ export type V1AccountsDonationsSentRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsDonationsSentRetrieve = <TError = AxiosError<void>>(
   accountId: string,
-  params?: V1AccountsDonationsSentRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsDonationsSentRetrieve>>,
@@ -1105,73 +734,8 @@ export const useV1AccountsDonationsSentRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled
-        ? getV1AccountsDonationsSentRetrieveKey(accountId, params)
-        : null);
-  const swrFn = () =>
-    v1AccountsDonationsSentRetrieve(accountId, params, axiosOptions);
-
-  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
-    swrKey,
-    swrFn,
-    swrOptions,
-  );
-
-  return {
-    swrKey,
-    ...query,
-  };
-};
-
-export const v1AccountsListRegistrationsRetrieve = (
-  accountId: string,
-  params?: V1AccountsListRegistrationsRetrieveParams,
-  options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedListRegistrationsResponse>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/list-registrations`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
-};
-
-export const getV1AccountsListRegistrationsRetrieveKey = (
-  accountId: string,
-  params?: V1AccountsListRegistrationsRetrieveParams,
-) =>
-  [
-    `/api/v1/accounts/${accountId}/list-registrations`,
-    ...(params ? [params] : []),
-  ] as const;
-
-export type V1AccountsListRegistrationsRetrieveQueryResult = NonNullable<
-  Awaited<ReturnType<typeof v1AccountsListRegistrationsRetrieve>>
->;
-export type V1AccountsListRegistrationsRetrieveQueryError = AxiosError<void>;
-
-export const useV1AccountsListRegistrationsRetrieve = <
-  TError = AxiosError<void>,
->(
-  accountId: string,
-  params?: V1AccountsListRegistrationsRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1AccountsListRegistrationsRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
-  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
-
-  const isEnabled = swrOptions?.enabled !== false && !!accountId;
-  const swrKey =
-    swrOptions?.swrKey ??
-    (() =>
-      isEnabled
-        ? getV1AccountsListRegistrationsRetrieveKey(accountId, params)
-        : null);
-  const swrFn = () =>
-    v1AccountsListRegistrationsRetrieve(accountId, params, axiosOptions);
+      isEnabled ? getV1AccountsDonationsSentRetrieveKey(accountId) : null);
+  const swrFn = () => v1AccountsDonationsSentRetrieve(accountId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1187,23 +751,13 @@ export const useV1AccountsListRegistrationsRetrieve = <
 
 export const v1AccountsPayoutsReceivedRetrieve = (
   accountId: string,
-  params?: V1AccountsPayoutsReceivedRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotPayoutsResponse>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/payouts_received`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Donation[]>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/payouts_received`, options);
 };
 
-export const getV1AccountsPayoutsReceivedRetrieveKey = (
-  accountId: string,
-  params?: V1AccountsPayoutsReceivedRetrieveParams,
-) =>
-  [
-    `/api/v1/accounts/${accountId}/payouts_received`,
-    ...(params ? [params] : []),
-  ] as const;
+export const getV1AccountsPayoutsReceivedRetrieveKey = (accountId: string) =>
+  [`/api/v1/accounts/${accountId}/payouts_received`] as const;
 
 export type V1AccountsPayoutsReceivedRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsPayoutsReceivedRetrieve>>
@@ -1212,7 +766,6 @@ export type V1AccountsPayoutsReceivedRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
   accountId: string,
-  params?: V1AccountsPayoutsReceivedRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsPayoutsReceivedRetrieve>>,
@@ -1227,11 +780,9 @@ export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled
-        ? getV1AccountsPayoutsReceivedRetrieveKey(accountId, params)
-        : null);
+      isEnabled ? getV1AccountsPayoutsReceivedRetrieveKey(accountId) : null);
   const swrFn = () =>
-    v1AccountsPayoutsReceivedRetrieve(accountId, params, axiosOptions);
+    v1AccountsPayoutsReceivedRetrieve(accountId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1247,23 +798,13 @@ export const useV1AccountsPayoutsReceivedRetrieve = <TError = AxiosError<void>>(
 
 export const v1AccountsPotApplicationsRetrieve = (
   accountId: string,
-  params?: V1AccountsPotApplicationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotApplicationsResponse>> => {
-  return axios.get(`/api/v1/accounts/${accountId}/pot_applications`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<PotApplication[]>> => {
+  return axios.get(`/api/v1/accounts/${accountId}/pot_applications`, options);
 };
 
-export const getV1AccountsPotApplicationsRetrieveKey = (
-  accountId: string,
-  params?: V1AccountsPotApplicationsRetrieveParams,
-) =>
-  [
-    `/api/v1/accounts/${accountId}/pot_applications`,
-    ...(params ? [params] : []),
-  ] as const;
+export const getV1AccountsPotApplicationsRetrieveKey = (accountId: string) =>
+  [`/api/v1/accounts/${accountId}/pot_applications`] as const;
 
 export type V1AccountsPotApplicationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1AccountsPotApplicationsRetrieve>>
@@ -1272,7 +813,6 @@ export type V1AccountsPotApplicationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
   accountId: string,
-  params?: V1AccountsPotApplicationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1AccountsPotApplicationsRetrieve>>,
@@ -1287,11 +827,9 @@ export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
   const swrKey =
     swrOptions?.swrKey ??
     (() =>
-      isEnabled
-        ? getV1AccountsPotApplicationsRetrieveKey(accountId, params)
-        : null);
+      isEnabled ? getV1AccountsPotApplicationsRetrieveKey(accountId) : null);
   const swrFn = () =>
-    v1AccountsPotApplicationsRetrieve(accountId, params, axiosOptions);
+    v1AccountsPotApplicationsRetrieve(accountId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1306,41 +844,35 @@ export const useV1AccountsPotApplicationsRetrieve = <TError = AxiosError<void>>(
 };
 
 export const v1DonateContractConfigRetrieve = (
-  params?: V1DonateContractConfigRetrieveParams,
   options?: AxiosRequestConfig,
 ): Promise<AxiosResponse<DonationContractConfig>> => {
-  return axios.get(`/api/v1/donate_contract_config`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+  return axios.get(`/api/v1/donate_contract_config`, options);
 };
 
-export const getV1DonateContractConfigRetrieveKey = (
-  params?: V1DonateContractConfigRetrieveParams,
-) => [`/api/v1/donate_contract_config`, ...(params ? [params] : [])] as const;
+export const getV1DonateContractConfigRetrieveKey = () =>
+  [`/api/v1/donate_contract_config`] as const;
 
 export type V1DonateContractConfigRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>
 >;
 export type V1DonateContractConfigRetrieveQueryError = AxiosError<void>;
 
-export const useV1DonateContractConfigRetrieve = <TError = AxiosError<void>>(
-  params?: V1DonateContractConfigRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
+export const useV1DonateContractConfigRetrieve = <
+  TError = AxiosError<void>,
+>(options?: {
+  swr?: SWRConfiguration<
+    Awaited<ReturnType<typeof v1DonateContractConfigRetrieve>>,
+    TError
+  > & { swrKey?: Key; enabled?: boolean };
+  axios?: AxiosRequestConfig;
+}) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1DonateContractConfigRetrieveKey(params) : null));
-  const swrFn = () => v1DonateContractConfigRetrieve(params, axiosOptions);
+    (() => (isEnabled ? getV1DonateContractConfigRetrieveKey() : null));
+  const swrFn = () => v1DonateContractConfigRetrieve(axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1357,7 +889,7 @@ export const useV1DonateContractConfigRetrieve = <TError = AxiosError<void>>(
 export const v1DonorsRetrieve = (
   params?: V1DonorsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
+): Promise<AxiosResponse<Account[]>> => {
   return axios.get(`/api/v1/donors`, {
     ...options,
     params: { ...params, ...options?.params },
@@ -1403,40 +935,31 @@ export const useV1DonorsRetrieve = <TError = AxiosError<void>>(
 };
 
 export const v1ListsRetrieve = (
-  params?: V1ListsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedListsResponse>> => {
-  return axios.get(`/api/v1/lists`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<List[]>> => {
+  return axios.get(`/api/v1/lists`, options);
 };
 
-export const getV1ListsRetrieveKey = (params?: V1ListsRetrieveParams) =>
-  [`/api/v1/lists`, ...(params ? [params] : [])] as const;
+export const getV1ListsRetrieveKey = () => [`/api/v1/lists`] as const;
 
 export type V1ListsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1ListsRetrieve>>
 >;
 export type V1ListsRetrieveQueryError = AxiosError<void>;
 
-export const useV1ListsRetrieve = <TError = AxiosError<void>>(
-  params?: V1ListsRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1ListsRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
+export const useV1ListsRetrieve = <TError = AxiosError<void>>(options?: {
+  swr?: SWRConfiguration<
+    Awaited<ReturnType<typeof v1ListsRetrieve>>,
+    TError
+  > & { swrKey?: Key; enabled?: boolean };
+  axios?: AxiosRequestConfig;
+}) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
-    swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1ListsRetrieveKey(params) : null));
-  const swrFn = () => v1ListsRetrieve(params, axiosOptions);
+    swrOptions?.swrKey ?? (() => (isEnabled ? getV1ListsRetrieveKey() : null));
+  const swrFn = () => v1ListsRetrieve(axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1495,85 +1018,15 @@ export const useV1ListsRetrieve2 = <TError = AxiosError<void>>(
   };
 };
 
-export const v1ListsRandomRegistrationRetrieve = (
-  listId: number,
-  params?: V1ListsRandomRegistrationRetrieveParams,
-  options?: AxiosRequestConfig,
-): Promise<AxiosResponse<ListRegistration>> => {
-  return axios.get(`/api/v1/lists/${listId}/random_registration`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
-};
-
-export const getV1ListsRandomRegistrationRetrieveKey = (
-  listId: number,
-  params?: V1ListsRandomRegistrationRetrieveParams,
-) =>
-  [
-    `/api/v1/lists/${listId}/random_registration`,
-    ...(params ? [params] : []),
-  ] as const;
-
-export type V1ListsRandomRegistrationRetrieveQueryResult = NonNullable<
-  Awaited<ReturnType<typeof v1ListsRandomRegistrationRetrieve>>
->;
-export type V1ListsRandomRegistrationRetrieveQueryError = AxiosError<void>;
-
-export const useV1ListsRandomRegistrationRetrieve = <TError = AxiosError<void>>(
-  listId: number,
-  params?: V1ListsRandomRegistrationRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1ListsRandomRegistrationRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
-  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
-
-  const isEnabled = swrOptions?.enabled !== false && !!listId;
-  const swrKey =
-    swrOptions?.swrKey ??
-    (() =>
-      isEnabled
-        ? getV1ListsRandomRegistrationRetrieveKey(listId, params)
-        : null);
-  const swrFn = () =>
-    v1ListsRandomRegistrationRetrieve(listId, params, axiosOptions);
-
-  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
-    swrKey,
-    swrFn,
-    swrOptions,
-  );
-
-  return {
-    swrKey,
-    ...query,
-  };
-};
-
 export const v1ListsRegistrationsRetrieve = (
   listId: number,
-  params?: V1ListsRegistrationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedListRegistrationsResponse>> => {
-  return axios.get(`/api/v1/lists/${listId}/registrations`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<ListRegistration[]>> => {
+  return axios.get(`/api/v1/lists/${listId}/registrations`, options);
 };
 
-export const getV1ListsRegistrationsRetrieveKey = (
-  listId: number,
-  params?: V1ListsRegistrationsRetrieveParams,
-) =>
-  [
-    `/api/v1/lists/${listId}/registrations`,
-    ...(params ? [params] : []),
-  ] as const;
+export const getV1ListsRegistrationsRetrieveKey = (listId: number) =>
+  [`/api/v1/lists/${listId}/registrations`] as const;
 
 export type V1ListsRegistrationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1ListsRegistrationsRetrieve>>
@@ -1582,7 +1035,6 @@ export type V1ListsRegistrationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1ListsRegistrationsRetrieve = <TError = AxiosError<void>>(
   listId: number,
-  params?: V1ListsRegistrationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1ListsRegistrationsRetrieve>>,
@@ -1596,59 +1048,8 @@ export const useV1ListsRegistrationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!listId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() =>
-      isEnabled ? getV1ListsRegistrationsRetrieveKey(listId, params) : null);
-  const swrFn = () =>
-    v1ListsRegistrationsRetrieve(listId, params, axiosOptions);
-
-  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
-    swrKey,
-    swrFn,
-    swrOptions,
-  );
-
-  return {
-    swrKey,
-    ...query,
-  };
-};
-
-export const v1PotfactoriesRetrieve = (
-  params?: V1PotfactoriesRetrieveParams,
-  options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotFactoriesResponse>> => {
-  return axios.get(`/api/v1/potfactories`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
-};
-
-export const getV1PotfactoriesRetrieveKey = (
-  params?: V1PotfactoriesRetrieveParams,
-) => [`/api/v1/potfactories`, ...(params ? [params] : [])] as const;
-
-export type V1PotfactoriesRetrieveQueryResult = NonNullable<
-  Awaited<ReturnType<typeof v1PotfactoriesRetrieve>>
->;
-export type V1PotfactoriesRetrieveQueryError = AxiosError<unknown>;
-
-export const useV1PotfactoriesRetrieve = <TError = AxiosError<unknown>>(
-  params?: V1PotfactoriesRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1PotfactoriesRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
-  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
-
-  const isEnabled = swrOptions?.enabled !== false;
-  const swrKey =
-    swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotfactoriesRetrieveKey(params) : null));
-  const swrFn = () => v1PotfactoriesRetrieve(params, axiosOptions);
+    (() => (isEnabled ? getV1ListsRegistrationsRetrieveKey(listId) : null));
+  const swrFn = () => v1ListsRegistrationsRetrieve(listId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1663,40 +1064,31 @@ export const useV1PotfactoriesRetrieve = <TError = AxiosError<unknown>>(
 };
 
 export const v1PotsRetrieve = (
-  params?: V1PotsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotsResponse>> => {
-  return axios.get(`/api/v1/pots`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Pot[]>> => {
+  return axios.get(`/api/v1/pots`, options);
 };
 
-export const getV1PotsRetrieveKey = (params?: V1PotsRetrieveParams) =>
-  [`/api/v1/pots`, ...(params ? [params] : [])] as const;
+export const getV1PotsRetrieveKey = () => [`/api/v1/pots`] as const;
 
 export type V1PotsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsRetrieve>>
 >;
 export type V1PotsRetrieveQueryError = AxiosError<unknown>;
 
-export const useV1PotsRetrieve = <TError = AxiosError<unknown>>(
-  params?: V1PotsRetrieveParams,
-  options?: {
-    swr?: SWRConfiguration<
-      Awaited<ReturnType<typeof v1PotsRetrieve>>,
-      TError
-    > & { swrKey?: Key; enabled?: boolean };
-    axios?: AxiosRequestConfig;
-  },
-) => {
+export const useV1PotsRetrieve = <TError = AxiosError<unknown>>(options?: {
+  swr?: SWRConfiguration<Awaited<ReturnType<typeof v1PotsRetrieve>>, TError> & {
+    swrKey?: Key;
+    enabled?: boolean;
+  };
+  axios?: AxiosRequestConfig;
+}) => {
   const { swr: swrOptions, axios: axiosOptions } = options ?? {};
 
   const isEnabled = swrOptions?.enabled !== false;
   const swrKey =
-    swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsRetrieveKey(params) : null));
-  const swrFn = () => v1PotsRetrieve(params, axiosOptions);
+    swrOptions?.swrKey ?? (() => (isEnabled ? getV1PotsRetrieveKey() : null));
+  const swrFn = () => v1PotsRetrieve(axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1757,20 +1149,13 @@ export const useV1PotsRetrieve2 = <TError = AxiosError<void>>(
 
 export const v1PotsApplicationsRetrieve = (
   potId: string,
-  params?: V1PotsApplicationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotApplicationsResponse>> => {
-  return axios.get(`/api/v1/pots/${potId}/applications`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<PotApplication[]>> => {
+  return axios.get(`/api/v1/pots/${potId}/applications`, options);
 };
 
-export const getV1PotsApplicationsRetrieveKey = (
-  potId: string,
-  params?: V1PotsApplicationsRetrieveParams,
-) =>
-  [`/api/v1/pots/${potId}/applications`, ...(params ? [params] : [])] as const;
+export const getV1PotsApplicationsRetrieveKey = (potId: string) =>
+  [`/api/v1/pots/${potId}/applications`] as const;
 
 export type V1PotsApplicationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsApplicationsRetrieve>>
@@ -1779,7 +1164,6 @@ export type V1PotsApplicationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
   potId: string,
-  params?: V1PotsApplicationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsApplicationsRetrieve>>,
@@ -1793,9 +1177,8 @@ export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() =>
-      isEnabled ? getV1PotsApplicationsRetrieveKey(potId, params) : null);
-  const swrFn = () => v1PotsApplicationsRetrieve(potId, params, axiosOptions);
+    (() => (isEnabled ? getV1PotsApplicationsRetrieveKey(potId) : null));
+  const swrFn = () => v1PotsApplicationsRetrieve(potId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1811,19 +1194,13 @@ export const useV1PotsApplicationsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsDonationsRetrieve = (
   potId: string,
-  params?: V1PotsDonationsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedDonationsResponse>> => {
-  return axios.get(`/api/v1/pots/${potId}/donations`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Donation[]>> => {
+  return axios.get(`/api/v1/pots/${potId}/donations`, options);
 };
 
-export const getV1PotsDonationsRetrieveKey = (
-  potId: string,
-  params?: V1PotsDonationsRetrieveParams,
-) => [`/api/v1/pots/${potId}/donations`, ...(params ? [params] : [])] as const;
+export const getV1PotsDonationsRetrieveKey = (potId: string) =>
+  [`/api/v1/pots/${potId}/donations`] as const;
 
 export type V1PotsDonationsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsDonationsRetrieve>>
@@ -1832,7 +1209,6 @@ export type V1PotsDonationsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
   potId: string,
-  params?: V1PotsDonationsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsDonationsRetrieve>>,
@@ -1846,8 +1222,8 @@ export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsDonationsRetrieveKey(potId, params) : null));
-  const swrFn = () => v1PotsDonationsRetrieve(potId, params, axiosOptions);
+    (() => (isEnabled ? getV1PotsDonationsRetrieveKey(potId) : null));
+  const swrFn = () => v1PotsDonationsRetrieve(potId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1863,19 +1239,13 @@ export const useV1PotsDonationsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsPayoutsRetrieve = (
   potId: string,
-  params?: V1PotsPayoutsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedPotPayoutsResponse>> => {
-  return axios.get(`/api/v1/pots/${potId}/payouts`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<PotPayout[]>> => {
+  return axios.get(`/api/v1/pots/${potId}/payouts`, options);
 };
 
-export const getV1PotsPayoutsRetrieveKey = (
-  potId: string,
-  params?: V1PotsPayoutsRetrieveParams,
-) => [`/api/v1/pots/${potId}/payouts`, ...(params ? [params] : [])] as const;
+export const getV1PotsPayoutsRetrieveKey = (potId: string) =>
+  [`/api/v1/pots/${potId}/payouts`] as const;
 
 export type V1PotsPayoutsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsPayoutsRetrieve>>
@@ -1884,7 +1254,6 @@ export type V1PotsPayoutsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
   potId: string,
-  params?: V1PotsPayoutsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsPayoutsRetrieve>>,
@@ -1898,8 +1267,8 @@ export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsPayoutsRetrieveKey(potId, params) : null));
-  const swrFn = () => v1PotsPayoutsRetrieve(potId, params, axiosOptions);
+    (() => (isEnabled ? getV1PotsPayoutsRetrieveKey(potId) : null));
+  const swrFn = () => v1PotsPayoutsRetrieve(potId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,
@@ -1915,19 +1284,13 @@ export const useV1PotsPayoutsRetrieve = <TError = AxiosError<void>>(
 
 export const v1PotsSponsorsRetrieve = (
   potId: string,
-  params?: V1PotsSponsorsRetrieveParams,
   options?: AxiosRequestConfig,
-): Promise<AxiosResponse<PaginatedAccountsResponse>> => {
-  return axios.get(`/api/v1/pots/${potId}/sponsors`, {
-    ...options,
-    params: { ...params, ...options?.params },
-  });
+): Promise<AxiosResponse<Account[]>> => {
+  return axios.get(`/api/v1/pots/${potId}/sponsors`, options);
 };
 
-export const getV1PotsSponsorsRetrieveKey = (
-  potId: string,
-  params?: V1PotsSponsorsRetrieveParams,
-) => [`/api/v1/pots/${potId}/sponsors`, ...(params ? [params] : [])] as const;
+export const getV1PotsSponsorsRetrieveKey = (potId: string) =>
+  [`/api/v1/pots/${potId}/sponsors`] as const;
 
 export type V1PotsSponsorsRetrieveQueryResult = NonNullable<
   Awaited<ReturnType<typeof v1PotsSponsorsRetrieve>>
@@ -1936,7 +1299,6 @@ export type V1PotsSponsorsRetrieveQueryError = AxiosError<void>;
 
 export const useV1PotsSponsorsRetrieve = <TError = AxiosError<void>>(
   potId: string,
-  params?: V1PotsSponsorsRetrieveParams,
   options?: {
     swr?: SWRConfiguration<
       Awaited<ReturnType<typeof v1PotsSponsorsRetrieve>>,
@@ -1950,8 +1312,8 @@ export const useV1PotsSponsorsRetrieve = <TError = AxiosError<void>>(
   const isEnabled = swrOptions?.enabled !== false && !!potId;
   const swrKey =
     swrOptions?.swrKey ??
-    (() => (isEnabled ? getV1PotsSponsorsRetrieveKey(potId, params) : null));
-  const swrFn = () => v1PotsSponsorsRetrieve(potId, params, axiosOptions);
+    (() => (isEnabled ? getV1PotsSponsorsRetrieveKey(potId) : null));
+  const swrFn = () => v1PotsSponsorsRetrieve(potId, axiosOptions);
 
   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
     swrKey,

From 1b6069f5f50c68553df56717dee779371e35e2fd Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 13:51:45 +0100
Subject: [PATCH 18/43] updates on UI breakpoints

---
 src/app/donors/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 0e9bada2c..45f94e8e1 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -388,7 +388,7 @@ export default function LeaderboardPage() {
         type="single"
         className="mt-40px relative w-full"
       >
-        <div className="mb-40px md:mb-64px absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
+        <div className="mb-40px md:mb-64px absolute w-screen overflow-x-scroll border-b border-t border-gray-200 xl:w-full">
           <div className="ml-20px md:ml-30px pt-16px grid grid-flow-col content-center items-center gap-x-4 px-4 md:w-fit">
             {TABs.map((tab) => (
               <div

From add1d01ed339928a3a3baec47d6954b65e0a1b9d Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 15:10:02 +0100
Subject: [PATCH 19/43] Added final breakpoints

---
 src/app/donors/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 45f94e8e1..ad5ca9532 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -220,8 +220,8 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px ml-[-36px] mr-[-46px] w-[104.5%] sm:w-fit sm:overflow-x-scroll">
-        <div className="gap-20px mb-8 grid w-full grid-flow-col">
+      <div className="pl-36px md:overflow-x-unset relative ml-[-36px] mr-[-46px] w-screen overflow-x-scroll  md:w-fit">
+        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col">
           {participants.slice(0, 3).map((participant) => (
             <LeaderboardCard
               key={participant.rank}
@@ -235,7 +235,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
 
-      <div className="block overflow-x-auto rounded-2xl border border-gray-200 bg-white  sm:hidden">
+      <div className="hidden overflow-x-auto rounded-2xl border border-gray-200 bg-white  md:block">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
@@ -308,7 +308,7 @@ export default function LeaderboardPage() {
           </tbody>
         </table>
       </div>
-      <div className="p-16px hidden flex-col items-start gap-4 sm:flex">
+      <div className="p-16px flex flex-col items-start gap-4 md:hidden">
         {participants.map((participant) => (
           <div
             key={participant.rank}

From a796bd83a03a7034675e8cf36370015a68c16bc9 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 15:11:22 +0100
Subject: [PATCH 20/43] leaderboard card fix

---
 src/app/donors/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index ad5ca9532..da15eca5b 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -221,7 +221,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
       <div className="pl-36px md:overflow-x-unset relative ml-[-36px] mr-[-46px] w-screen overflow-x-scroll  md:w-fit">
-        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col">
+        <div className="gap-20px mb-8 grid w-full grid-flow-col">
           {participants.slice(0, 3).map((participant) => (
             <LeaderboardCard
               key={participant.rank}

From ce03e0556d945c39c4b8fe364feb2adbe40a9866 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 15:29:29 +0100
Subject: [PATCH 21/43] UI fixes

---
 src/app/donors/page.tsx                  | 6 +++---
 src/common/ui/components/filter-chip.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index da15eca5b..3d1d364d8 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -220,7 +220,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px md:overflow-x-unset relative ml-[-36px] mr-[-46px] w-screen overflow-x-scroll  md:w-fit">
+      <div className="pl-36px xl:overflow-x-unset relative ml-[-36px] mr-[-46px] w-screen overflow-x-scroll  md:w-full">
         <div className="gap-20px mb-8 grid w-full grid-flow-col">
           {participants.slice(0, 3).map((participant) => (
             <LeaderboardCard
@@ -424,9 +424,9 @@ export default function LeaderboardPage() {
               <h1 className="font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px]">
                 All Activities
               </h1>
-              <div className="pb-24px flex w-full justify-between gap-x-14 gap-y-4 pt-10 sm:flex-col md:flex-row">
+              <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
                 <SearchBar
-                  className="w-85% max-w-xs text-gray-400 md:w-auto"
+                  className="w-320px text-gray-400"
                   placeholder={`Search projects`}
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
diff --git a/src/common/ui/components/filter-chip.tsx b/src/common/ui/components/filter-chip.tsx
index 688896790..31aadaae9 100644
--- a/src/common/ui/components/filter-chip.tsx
+++ b/src/common/ui/components/filter-chip.tsx
@@ -8,7 +8,7 @@ import { cn } from "../utils";
 // TODO: add correct hover effects
 const filterChipVariants = cva(
   cn(
-    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium whitespace-nowrap",
+    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium whitespace-nowrap px-12px py-6px",
     "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
     "border-none focus:shadow-button-focus disabled:cursor-not-allowed",
   ),

From d9aa75ebdfafde0aa2fdfa3a2b0253f2b93ea671 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 18 Oct 2024 16:45:55 +0100
Subject: [PATCH 22/43] Final UI updates

---
 src/app/donors/page.tsx | 42 ++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/app/donors/page.tsx b/src/app/donors/page.tsx
index 3d1d364d8..9169a1166 100644
--- a/src/app/donors/page.tsx
+++ b/src/app/donors/page.tsx
@@ -31,21 +31,21 @@ interface Activity {
 const topDonors: Participant[] = [
   {
     rank: 1,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "nearcollective.near",
     amount: 731.25,
     amountUsd: 0,
   },
   {
     rank: 2,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "nf-payments.near",
     amount: 731.25,
     amountUsd: 0,
   },
   {
     rank: 3,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "creatives.potlock.near",
     amount: 731.25,
     amountUsd: 0,
@@ -55,21 +55,21 @@ const topDonors: Participant[] = [
 const otherDonors: Participant[] = [
   {
     rank: 4,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "creativesportfolio.near",
     amount: 2000,
     amountUsd: 2000,
   },
   {
     rank: 5,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "mike.near",
     amount: 2000,
     amountUsd: 2000,
   },
   {
     rank: 6,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "mike.near",
     amount: 2000,
     amountUsd: 2000,
@@ -79,21 +79,21 @@ const otherDonors: Participant[] = [
 const topSponsors: Participant[] = [
   {
     rank: 1,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "sponsor1.near",
     amount: 1000,
     amountUsd: 1000,
   },
   {
     rank: 2,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "sponsor2.near",
     amount: 900,
     amountUsd: 900,
   },
   {
     rank: 3,
-    image: "https://picsum.photos/200/300/?blur",
+    image: "https://picsum.photos/200/200/?blur",
     name: "sponsor3.near",
     amount: 800,
     amountUsd: 800,
@@ -103,52 +103,52 @@ const topSponsors: Participant[] = [
 const ACTIVITY: Activity[] = [
   {
     sender: "nearcollective.near",
-    senderImage: "https://picsum.photos/200/300/?blur",
+    senderImage: "https://picsum.photos/200/200/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "creativesportfolio.near",
-    receiverImage: "https://picsum.photos/200/300/?blur",
+    receiverImage: "https://picsum.photos/200/200/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nf-payments.near",
-    senderImage: "https://picsum.photos/200/300/?blur",
+    senderImage: "https://picsum.photos/200/200/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "https://picsum.photos/200/300/?blur",
+    receiverImage: "https://picsum.photos/200/200/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "creatives.potlock.near",
-    senderImage: "https://picsum.photos/200/300/?blur",
+    senderImage: "https://picsum.photos/200/200/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "https://picsum.photos/200/300/?blur",
+    receiverImage: "https://picsum.photos/200/200/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nearcollective.near",
-    senderImage: "https://picsum.photos/200/300/?blur",
+    senderImage: "https://picsum.photos/200/200/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "creativesportfolio.near",
-    receiverImage: "https://picsum.photos/200/300/?blur",
+    receiverImage: "https://picsum.photos/200/200/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
   {
     sender: "nf-payments.near",
-    senderImage: "https://picsum.photos/200/300/?blur",
+    senderImage: "https://picsum.photos/200/200/?blur",
     amount: 1000,
     amountUsd: 1000,
     currency: "NEAR",
     receiver: "mike.near",
-    receiverImage: "https://picsum.photos/200/300/?blur",
+    receiverImage: "https://picsum.photos/200/200/?blur",
     timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
   },
 ];
@@ -315,7 +315,7 @@ export default function LeaderboardPage() {
             className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
           >
             <div className="whitespace-nowrap">
-              <div className="flex items-center">
+              <div className="h-40px w-40px flex items-center">
                 <Image
                   className="h-40px w-40px rounded-full"
                   src={participant.image}
@@ -406,7 +406,7 @@ export default function LeaderboardPage() {
                   {tab.label}
                 </span>
                 <span
-                  className={`border-#DBDBDB px-6px py-2px rounded-16px ml-2 border bg-gray-200 text-sm text-gray-700 ${
+                  className={`border-#DBDBDB px-6px py-4px rounded-16px ml-2 border bg-gray-200 text-sm text-gray-700 ${
                     selectedTab === tab.name ? "font-600 text-black" : ""
                   }`}
                 >

From 3d39dc02a2370ff0f3fcf83130086d92d7e44258 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 09:03:02 +0100
Subject: [PATCH 23/43] Added Leaderboard

---
 src/modules/core/components/Nav.tsx                 | 2 +-
 src/{app/donors/page.tsx => pages/donors/index.tsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{app/donors/page.tsx => pages/donors/index.tsx} (100%)

diff --git a/src/modules/core/components/Nav.tsx b/src/modules/core/components/Nav.tsx
index f3d5d0f62..b527044b0 100644
--- a/src/modules/core/components/Nav.tsx
+++ b/src/modules/core/components/Nav.tsx
@@ -16,7 +16,7 @@ const links = [
   { label: "Projects", url: routesPath.PROJECTS_LIST, disabled: false },
   { label: "Pots", url: routesPath.POTS, disabled: false },
   { label: "Feed", url: routesPath.FEED, disabled: false },
-  // { label: "Donors", url: routesPath.DONORS, disabled: false },
+  { label: "Donors", url: routesPath.DONORS, disabled: false },
   // { label: "Lists", url: routesPath.LIST, disabled: false },
 ];
 
diff --git a/src/app/donors/page.tsx b/src/pages/donors/index.tsx
similarity index 100%
rename from src/app/donors/page.tsx
rename to src/pages/donors/index.tsx

From 8ee30ea4b35528ac7e2153a105471344aaf4c335 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 12:02:32 +0100
Subject: [PATCH 24/43] UI fix

---
 src/modules/core/components/Nav.tsx |  2 +-
 src/pages/donors/index.tsx          | 47 +++++++++++++++++++----------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/modules/core/components/Nav.tsx b/src/modules/core/components/Nav.tsx
index b527044b0..f9f0c59c8 100644
--- a/src/modules/core/components/Nav.tsx
+++ b/src/modules/core/components/Nav.tsx
@@ -112,7 +112,7 @@ export const Nav = () => {
           </div>
 
           <div className="flex flex-row items-center justify-center">
-            <div className="max-md:hidden flex flex-row items-center justify-center">
+            <div className="flex flex-row items-center justify-center max-md:hidden">
               {links.map(({ url, label }) => {
                 const isActive = isClient ? url === router.pathname : false;
                 return (
diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index cb6269a52..a52118f02 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -2,12 +2,19 @@
 
 import { useState } from "react";
 
+import { Lora } from "next/font/google";
 import Image from "next/image";
 
 import { NearIcon } from "@/common/assets/svgs";
 import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/components";
 import { DonationLeaderboardEntry } from "@/modules/donation";
 
+const lora = Lora({
+  subsets: ["latin"],
+  variable: "--font-lora",
+  weight: ["400", "500", "600", "700"],
+});
+
 interface Participant {
   rank: number;
   image: string;
@@ -191,7 +198,7 @@ export default function LeaderboardPage() {
     "donors" | "sponsors" | "activities"
   >("activities"); // Updated formatting for selectedTab
 
-  const toggleTab = (tab: "donors" | "sponsors") => {
+  const toggleTab = (tab: "donors" | "sponsors" | "activities") => {
     setSelectedTab(tab);
   };
   const renderLeaderboard = (
@@ -199,7 +206,7 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
+      <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
         <SearchBar
           className="w-320px text-gray-400"
           placeholder={`Search projects`}
@@ -219,7 +226,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px xl:overflow-x-unset md:w-full relative ml-[-36px] mr-[-46px] w-screen  overflow-x-scroll">
+      <div className="pl-36px xl:overflow-x-unset relative ml-[-36px] w-screen overflow-x-scroll  md:w-full">
         <div className="gap-20px mb-8 grid w-full grid-flow-col">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry
@@ -234,7 +241,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
 
-      <div className="md:block hidden overflow-x-auto rounded-2xl border border-gray-200  bg-white">
+      <div className="hidden overflow-x-auto rounded-2xl border border-gray-200 bg-white  md:block">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
@@ -307,7 +314,7 @@ export default function LeaderboardPage() {
           </tbody>
         </table>
       </div>
-      <div className="p-16px md:hidden flex flex-col items-start gap-4">
+      <div className="p-16px flex flex-col items-start gap-4 md:hidden">
         {participants.map((participant) => (
           <div
             key={participant.rank}
@@ -387,18 +394,20 @@ export default function LeaderboardPage() {
         type="single"
         className="mt-40px relative w-full"
       >
-        <div className="mb-40px md:mb-64px xl:w-full absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
-          <div className="ml-20px md:ml-30px pt-16px md:w-fit grid grid-flow-col content-center items-center gap-x-4 px-4">
+        <div className="mb-40px md:mb-64px xl:w-1024px absolute w-screen overflow-x-scroll border-b border-t border-gray-200 md:overflow-x-auto">
+          <div className="ml-20px md:ml-30px pt-16px grid grid-flow-col content-center items-center gap-x-4 px-4 md:w-fit">
             {TABs.map((tab) => (
               <div
                 key={tab.name}
                 className={`py-10px px-16px text-#7B7B7B w-fit cursor-pointer text-center text-lg font-semibold ${
                   selectedTab === tab.name ? "border-b-2 border-black" : ""
                 }`}
-                onClick={() => toggleTab(tab.name as "donors" | "sponsors")}
+                onClick={() =>
+                  toggleTab(tab.name as "donors" | "sponsors" | "activities")
+                }
               >
                 <span
-                  className={`inline whitespace-nowrap ${
+                  className={`inline whitespace-nowrap text-sm ${
                     selectedTab === tab.name ? "font-500 text-black" : ""
                   }`}
                 >
@@ -416,14 +425,16 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="py-64px max-w-912px mx-auto w-full flex-nowrap">
+      <div className="py-64px mx-auto w-full flex-nowrap">
         <div className="mx-auto w-full">
           {selectedTab === "activities" ? (
             <div className="w-full">
-              <h1 className="md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px]">
+              <h1
+                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+              >
                 All Activities
               </h1>
-              <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
+              <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
                 <SearchBar
                   className="w-320px text-gray-400"
                   placeholder={`Search projects`}
@@ -461,7 +472,7 @@ export default function LeaderboardPage() {
                           height={10}
                         />
                         <h1
-                          className="w-100px md:w-fit md:overflow-visible truncate"
+                          className="w-100px truncate md:w-fit md:overflow-visible"
                           title={activity.sender}
                         >
                           {activity.sender}
@@ -492,7 +503,7 @@ export default function LeaderboardPage() {
                           height={10}
                         />
                         <h1
-                          className="w-100px md:w-fit md:overflow-visible truncate"
+                          className="w-100px truncate md:w-fit md:overflow-visible"
                           title={activity.receiver}
                         >
                           {activity.receiver}
@@ -512,7 +523,9 @@ export default function LeaderboardPage() {
           )}
           {selectedTab === "donors" ? (
             <div className="w-full">
-              <h1 className="md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold leading-[56px] tracking-[-1.12px]">
+              <h1
+                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+              >
                 Donor Leaderboard
               </h1>
               {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
@@ -522,7 +535,9 @@ export default function LeaderboardPage() {
           )}
           {selectedTab === "sponsors" ? (
             <div className="w-full">
-              <h1 className="md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px]">
+              <h1
+                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+              >
                 Sponsor Leaderboard
               </h1>
               {renderLeaderboard(topSponsors, "sponsor")}

From d81f3deee4a6def86980540c3e462f7890383756 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 12:52:36 +0100
Subject: [PATCH 25/43] more UI fixes

---
 src/pages/donors/index.tsx | 160 +++++++++++++++++++------------------
 1 file changed, 82 insertions(+), 78 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index a52118f02..98f6d68f1 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -226,8 +226,8 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px xl:overflow-x-unset relative ml-[-36px] w-screen overflow-x-scroll  md:w-full">
-        <div className="gap-20px mb-8 grid w-full grid-flow-col">
+      <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px]  w-full">
+        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-scroll">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry
               key={participant.rank}
@@ -434,89 +434,93 @@ export default function LeaderboardPage() {
               >
                 All Activities
               </h1>
-              <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
-                <SearchBar
-                  className="w-320px text-gray-400"
-                  placeholder={`Search projects`}
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-                <div className="flex w-fit gap-3">
-                  {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
-                    <FilterChip
-                      key={filter}
-                      variant={
-                        timeFilter === filter ? "brand-filled" : "brand-outline"
-                      }
-                      onClick={() => setTimeFilter(filter)}
-                      className="py-0.375 px-3 text-sm"
-                    >
-                      {filter}
-                    </FilterChip>
-                  ))}
+              <>
+                <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
+                  <SearchBar
+                    className="w-320px text-gray-400"
+                    placeholder={`Search projects`}
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                  <div className="flex w-fit gap-3">
+                    {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+                      <FilterChip
+                        key={filter}
+                        variant={
+                          timeFilter === filter
+                            ? "brand-filled"
+                            : "brand-outline"
+                        }
+                        onClick={() => setTimeFilter(filter)}
+                        className="py-0.375 px-3 text-sm"
+                      >
+                        {filter}
+                      </FilterChip>
+                    ))}
+                  </div>
                 </div>
-              </div>
-              <div className="overflow-x-auto bg-white">
-                {ACTIVITY.map((activity, index) => (
-                  <div
-                    key={index}
-                    className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
-                  >
-                    <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
-                      <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-                        <Image
-                          src={activity.senderImage}
-                          className="h-24px w-24px rounded-full"
-                          alt="sender image"
-                          width={10}
-                          height={10}
-                        />
-                        <h1
-                          className="w-100px truncate md:w-fit md:overflow-visible"
-                          title={activity.sender}
-                        >
-                          {activity.sender}
-                        </h1>
-                      </div>
-                      <div className="flex items-center">
-                        <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
-                          Donated
+                <div className="overflow-x-auto bg-white">
+                  {ACTIVITY.map((activity, index) => (
+                    <div
+                      key={index}
+                      className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
+                    >
+                      <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
+                        <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                          <Image
+                            src={activity.senderImage}
+                            className="h-24px w-24px rounded-full"
+                            alt="sender image"
+                            width={10}
+                            height={10}
+                          />
+                          <h1
+                            className="w-100px truncate md:w-fit md:overflow-visible"
+                            title={activity.sender}
+                          >
+                            {activity.sender}
+                          </h1>
                         </div>
-                        <div className="">
-                          <div className="gap-8px flex items-center text-sm text-gray-900">
-                            <NearIcon className="w-18px h-18px" />{" "}
-                            <span className="font-600 m-0 pt-[2px]">
-                              {activity.amount}
-                            </span>
+                        <div className="flex items-center">
+                          <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
+                            Donated
                           </div>
+                          <div className="">
+                            <div className="gap-8px flex items-center text-sm text-gray-900">
+                              <NearIcon className="w-18px h-18px" />{" "}
+                              <span className="font-600 m-0 pt-[2px]">
+                                {activity.amount}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="ml-4 text-sm text-gray-600">to</div>
                         </div>
-                        <div className="ml-4 text-sm text-gray-600">to</div>
                       </div>
-                    </div>
-                    <div className="flex items-center">
-                      <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-                        <Image
-                          src={activity.receiverImage}
-                          className="h-24px w-24px rounded-full"
-                          alt="receiver image"
-                          width={10}
-                          height={10}
-                        />
-                        <h1
-                          className="w-100px truncate md:w-fit md:overflow-visible"
-                          title={activity.receiver}
-                        >
-                          {activity.receiver}
-                        </h1>
-                      </div>
-                      <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
-                        <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
-                        {timeAgo(activity.timestamp)}
+                      <div className="flex items-center">
+                        <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                          <Image
+                            src={activity.receiverImage}
+                            className="h-24px w-24px rounded-full"
+                            alt="receiver image"
+                            width={10}
+                            height={10}
+                          />
+                          <h1
+                            className="w-100px truncate md:w-fit md:overflow-visible"
+                            title={activity.receiver}
+                          >
+                            {activity.receiver}
+                          </h1>
+                        </div>
+                        <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
+                          <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
+                          {timeAgo(activity.timestamp)}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
+              </>
             </div>
           ) : (
             ""

From 6f63a69d3a8d071686975248a768d1ec10a8d47d Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 12:56:11 +0100
Subject: [PATCH 26/43] fixed padding for filterchip

---
 src/modules/core/components/Nav.tsx | 2 +-
 src/pages/donors/index.tsx          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/core/components/Nav.tsx b/src/modules/core/components/Nav.tsx
index f9f0c59c8..b527044b0 100644
--- a/src/modules/core/components/Nav.tsx
+++ b/src/modules/core/components/Nav.tsx
@@ -112,7 +112,7 @@ export const Nav = () => {
           </div>
 
           <div className="flex flex-row items-center justify-center">
-            <div className="flex flex-row items-center justify-center max-md:hidden">
+            <div className="max-md:hidden flex flex-row items-center justify-center">
               {links.map(({ url, label }) => {
                 const isActive = isClient ? url === router.pathname : false;
                 return (
diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 98f6d68f1..2b042262f 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -219,7 +219,7 @@ export default function LeaderboardPage() {
               key={filter}
               variant={timeFilter === filter ? "brand-filled" : "brand-outline"}
               onClick={() => setTimeFilter(filter)}
-              className="py-0.375 px-3 text-sm"
+              className="text-sm"
             >
               {filter}
             </FilterChip>
@@ -452,7 +452,7 @@ export default function LeaderboardPage() {
                             : "brand-outline"
                         }
                         onClick={() => setTimeFilter(filter)}
-                        className="py-0.375 px-3 text-sm"
+                        className="text-sm"
                       >
                         {filter}
                       </FilterChip>

From 3f0272019229ed8fe85f08c8a9f35f5351c94cfa Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 13:02:26 +0100
Subject: [PATCH 27/43] more UI updates

---
 src/pages/donors/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 2b042262f..abb1d43d4 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -226,7 +226,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px]  w-full">
+      <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px] w-screen  md:w-full">
         <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-scroll">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry

From f20241c9d9f3f2b6d582d1106edb6d04c7734d3f Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 14:27:27 +0100
Subject: [PATCH 28/43] fmt

---
 src/pages/donors/index.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index abb1d43d4..a106de212 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -206,7 +206,7 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
+      <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
         <SearchBar
           className="w-320px text-gray-400"
           placeholder={`Search projects`}
@@ -226,7 +226,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px] w-screen  md:w-full">
+      <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-screen">
         <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-scroll">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry
@@ -241,7 +241,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
 
-      <div className="hidden overflow-x-auto rounded-2xl border border-gray-200 bg-white  md:block">
+      <div className="md:block hidden overflow-x-auto rounded-2xl border border-gray-200  bg-white">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>
@@ -314,7 +314,7 @@ export default function LeaderboardPage() {
           </tbody>
         </table>
       </div>
-      <div className="p-16px flex flex-col items-start gap-4 md:hidden">
+      <div className="p-16px md:hidden flex flex-col items-start gap-4">
         {participants.map((participant) => (
           <div
             key={participant.rank}
@@ -394,8 +394,8 @@ export default function LeaderboardPage() {
         type="single"
         className="mt-40px relative w-full"
       >
-        <div className="mb-40px md:mb-64px xl:w-1024px absolute w-screen overflow-x-scroll border-b border-t border-gray-200 md:overflow-x-auto">
-          <div className="ml-20px md:ml-30px pt-16px grid grid-flow-col content-center items-center gap-x-4 px-4 md:w-fit">
+        <div className="mb-40px md:mb-64px xl:w-1024px md:overflow-x-auto absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
+          <div className="ml-20px md:ml-30px pt-16px md:w-fit grid grid-flow-col content-center items-center gap-x-4 px-4">
             {TABs.map((tab) => (
               <div
                 key={tab.name}
@@ -430,12 +430,12 @@ export default function LeaderboardPage() {
           {selectedTab === "activities" ? (
             <div className="w-full">
               <h1
-                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
               >
                 All Activities
               </h1>
               <>
-                <div className="pb-24px flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10 md:flex-row">
+                <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
                   <SearchBar
                     className="w-320px text-gray-400"
                     placeholder={`Search projects`}
@@ -475,7 +475,7 @@ export default function LeaderboardPage() {
                             height={10}
                           />
                           <h1
-                            className="w-100px truncate md:w-fit md:overflow-visible"
+                            className="w-100px md:w-fit md:overflow-visible truncate"
                             title={activity.sender}
                           >
                             {activity.sender}
@@ -506,7 +506,7 @@ export default function LeaderboardPage() {
                             height={10}
                           />
                           <h1
-                            className="w-100px truncate md:w-fit md:overflow-visible"
+                            className="w-100px md:w-fit md:overflow-visible truncate"
                             title={activity.receiver}
                           >
                             {activity.receiver}
@@ -528,7 +528,7 @@ export default function LeaderboardPage() {
           {selectedTab === "donors" ? (
             <div className="w-full">
               <h1
-                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
               >
                 Donor Leaderboard
               </h1>
@@ -540,7 +540,7 @@ export default function LeaderboardPage() {
           {selectedTab === "sponsors" ? (
             <div className="w-full">
               <h1
-                className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
               >
                 Sponsor Leaderboard
               </h1>

From a92ccd22f06529b7b534d520d17b29af46021983 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 14:43:56 +0100
Subject: [PATCH 29/43] Made changes from commit

---
 src/common/assets/svgs/Trophy.tsx         |  2 --
 src/common/ui/components/atoms/button.tsx |  7 ------
 src/pages/donors/index.tsx                | 26 ++++++++---------------
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/common/assets/svgs/Trophy.tsx b/src/common/assets/svgs/Trophy.tsx
index 98751ed92..63b32f47c 100644
--- a/src/common/assets/svgs/Trophy.tsx
+++ b/src/common/assets/svgs/Trophy.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 const Trophy = (props: any) => {
   return (
     <svg
diff --git a/src/common/ui/components/atoms/button.tsx b/src/common/ui/components/atoms/button.tsx
index e44de341c..36fcc6828 100644
--- a/src/common/ui/components/atoms/button.tsx
+++ b/src/common/ui/components/atoms/button.tsx
@@ -40,13 +40,6 @@ const buttonVariants = cva(
           "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
         ),
 
-        // sec-brand
-        "sec-brand-filled": cn(
-          "bg-#fce9d5 shadow-amber outline-none translate-y-[-1.5px] text-#91321B font-bold border border-#f4b37d border-solid hover:translate-y-0 focus:shadow-#f4b37d",
-          "hover:shadow-[0px_0px_0px_1px_rgba(244, 179, 125, 1)_inset,0px_1px_1px_1px_rgba(252, 233, 213, 1)_inset,0px_0px_0px_2px_rgba(252, 233, 213, 1)_inset]",
-          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
-        ),
-
         // Standard
         "standard-filled": cn(
           "text-[white] bg-[var(--neutral-800)]",
diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index a106de212..0a6517dd7 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 
 import { Lora } from "next/font/google";
@@ -289,7 +287,7 @@ export default function LeaderboardPage() {
                         src={participant.image}
                         width={10}
                         height={10}
-                        alt=""
+                        alt="profile picture"
                       />
                       <div className="ml-4">
                         <div className="font-500 text-sm text-gray-900">
@@ -327,7 +325,7 @@ export default function LeaderboardPage() {
                   src={participant.image}
                   width={10}
                   height={10}
-                  alt=""
+                  alt="profile picture"
                 />
               </div>
             </div>
@@ -400,7 +398,7 @@ export default function LeaderboardPage() {
               <div
                 key={tab.name}
                 className={`py-10px px-16px text-#7B7B7B w-fit cursor-pointer text-center text-lg font-semibold ${
-                  selectedTab === tab.name ? "border-b-2 border-black" : ""
+                  selectedTab === tab.name ? "border-b-2 border-black" : null
                 }`}
                 onClick={() =>
                   toggleTab(tab.name as "donors" | "sponsors" | "activities")
@@ -408,14 +406,14 @@ export default function LeaderboardPage() {
               >
                 <span
                   className={`inline whitespace-nowrap text-sm ${
-                    selectedTab === tab.name ? "font-500 text-black" : ""
+                    selectedTab === tab.name ? "font-500 text-black" : null
                   }`}
                 >
                   {tab.label}
                 </span>
                 <span
                   className={`border-#DBDBDB px-6px py-4px rounded-16px ml-2 border bg-gray-200 text-sm text-gray-700 ${
-                    selectedTab === tab.name ? "font-600 text-black" : ""
+                    selectedTab === tab.name ? "font-600 text-black" : null
                   }`}
                 >
                   {tab.count}
@@ -485,7 +483,7 @@ export default function LeaderboardPage() {
                           <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
                             Donated
                           </div>
-                          <div className="">
+                          <div>
                             <div className="gap-8px flex items-center text-sm text-gray-900">
                               <NearIcon className="w-18px h-18px" />{" "}
                               <span className="font-600 m-0 pt-[2px]">
@@ -522,9 +520,7 @@ export default function LeaderboardPage() {
                 </div>
               </>
             </div>
-          ) : (
-            ""
-          )}
+          ) : null}
           {selectedTab === "donors" ? (
             <div className="w-full">
               <h1
@@ -534,9 +530,7 @@ export default function LeaderboardPage() {
               </h1>
               {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
             </div>
-          ) : (
-            ""
-          )}
+          ) : null}
           {selectedTab === "sponsors" ? (
             <div className="w-full">
               <h1
@@ -546,9 +540,7 @@ export default function LeaderboardPage() {
               </h1>
               {renderLeaderboard(topSponsors, "sponsor")}
             </div>
-          ) : (
-            ""
-          )}
+          ) : null}
         </div>
       </div>
     </div>

From c0bc3bcb7eea5287fd596b4f2e674ba50db70368 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 15:16:56 +0100
Subject: [PATCH 30/43] made changes to page width and nav width

---
 src/pages/donors/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 0a6517dd7..edb17bddc 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -204,9 +204,9 @@ export default function LeaderboardPage() {
     type: "donor" | "sponsor",
   ) => (
     <>
-      <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
+      <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
         <SearchBar
-          className="w-320px text-gray-400"
+          className="md:w-40 text-gray-400"
           placeholder={`Search projects`}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
@@ -386,13 +386,13 @@ export default function LeaderboardPage() {
   ];
 
   return (
-    <div className="mx-auto flex flex-col py-8">
+    <div className="max-w-912px mx-auto flex w-full flex-col py-8">
       <ToggleGroup
         defaultValue="donors"
         type="single"
         className="mt-40px relative w-full"
       >
-        <div className="mb-40px md:mb-64px xl:w-1024px md:overflow-x-auto absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
+        <div className="mb-40px md:mb-64px md:overflow-x-auto absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
           <div className="ml-20px md:ml-30px pt-16px md:w-fit grid grid-flow-col content-center items-center gap-x-4 px-4">
             {TABs.map((tab) => (
               <div
@@ -423,7 +423,7 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="py-64px mx-auto w-full flex-nowrap">
+      <div className="md:py-16 md:px-auto mx-auto w-full flex-nowrap px-5 py-9">
         <div className="mx-auto w-full">
           {selectedTab === "activities" ? (
             <div className="w-full">
@@ -433,9 +433,9 @@ export default function LeaderboardPage() {
                 All Activities
               </h1>
               <>
-                <div className="pb-24px md:flex-row flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pt-10">
+                <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
                   <SearchBar
-                    className="w-320px text-gray-400"
+                    className="md:w-40 text-gray-400"
                     placeholder={`Search projects`}
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}

From cfd45b44d54fe7bcbf08b0c6ed22f720356b56c6 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 15:25:53 +0100
Subject: [PATCH 31/43] removed padding on larger devices

---
 src/pages/donors/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index edb17bddc..323dfc02d 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -423,7 +423,7 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="md:py-16 md:px-auto mx-auto w-full flex-nowrap px-5 py-9">
+      <div className="md:py-16 md:px-0 mx-auto w-full flex-nowrap px-5 py-9">
         <div className="mx-auto w-full">
           {selectedTab === "activities" ? (
             <div className="w-full">

From 7ef2f463029a0c874b12fbc882aad8e1bb00a123 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 16:27:45 +0100
Subject: [PATCH 32/43] updated scrolls

---
 src/pages/donors/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 323dfc02d..2e53cdfe3 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -225,7 +225,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
       <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-screen">
-        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-scroll">
+        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-clip">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry
               key={participant.rank}
@@ -239,7 +239,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
 
-      <div className="md:block hidden overflow-x-auto rounded-2xl border border-gray-200  bg-white">
+      <div className="md:block hidden rounded-2xl border border-gray-200  bg-white">
         <table className="w-full">
           <thead className="bg-gray-50">
             <tr>

From cc67ff650de0d62c4b1134bf3a0a49e73769bf21 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 16:34:23 +0100
Subject: [PATCH 33/43] put scroll back

---
 src/pages/donors/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 2e53cdfe3..23012dc97 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -225,7 +225,7 @@ export default function LeaderboardPage() {
         </div>
       </div>
       <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-screen">
-        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-clip">
+        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry
               key={participant.rank}

From 25e3e1024924efc4d9036e9473250a86444dfffe Mon Sep 17 00:00:00 2001
From: M-RB3 <rabea9220@gmail.com>
Date: Tue, 22 Oct 2024 20:02:23 +0400
Subject: [PATCH 34/43] fix tabs width

---
 src/pages/donors/index.tsx | 228 +++++++++++++++++++------------------
 1 file changed, 115 insertions(+), 113 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 23012dc97..093f0707f 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -386,13 +386,13 @@ export default function LeaderboardPage() {
   ];
 
   return (
-    <div className="max-w-912px mx-auto flex w-full flex-col py-8">
+    <div className="flex w-full flex-col">
       <ToggleGroup
         defaultValue="donors"
         type="single"
         className="mt-40px relative w-full"
       >
-        <div className="mb-40px md:mb-64px md:overflow-x-auto absolute w-screen overflow-x-scroll border-b border-t border-gray-200">
+        <div className="mb-40px md:mb-64px md:overflow-x-auto absolute w-full overflow-x-scroll border-b border-t border-gray-200">
           <div className="ml-20px md:ml-30px pt-16px md:w-fit grid grid-flow-col content-center items-center gap-x-4 px-4">
             {TABs.map((tab) => (
               <div
@@ -423,124 +423,126 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="md:py-16 md:px-0 mx-auto w-full flex-nowrap px-5 py-9">
-        <div className="mx-auto w-full">
-          {selectedTab === "activities" ? (
-            <div className="w-full">
-              <h1
-                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
-              >
-                All Activities
-              </h1>
-              <>
-                <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
-                  <SearchBar
-                    className="md:w-40 text-gray-400"
-                    placeholder={`Search projects`}
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                  />
-                  <div className="flex w-fit gap-3">
-                    {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
-                      <FilterChip
-                        key={filter}
-                        variant={
-                          timeFilter === filter
-                            ? "brand-filled"
-                            : "brand-outline"
-                        }
-                        onClick={() => setTimeFilter(filter)}
-                        className="text-sm"
-                      >
-                        {filter}
-                      </FilterChip>
-                    ))}
+      <div className="max-w-912px mx-auto flex w-full flex-col py-8">
+        <div className="md:py-16 md:px-0 mx-auto w-full flex-nowrap px-5 py-9">
+          <div className="mx-auto w-full">
+            {selectedTab === "activities" ? (
+              <div className="w-full">
+                <h1
+                  className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
+                >
+                  All Activities
+                </h1>
+                <>
+                  <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
+                    <SearchBar
+                      className="md:w-40 text-gray-400"
+                      placeholder={`Search projects`}
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                    <div className="flex w-fit gap-3">
+                      {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+                        <FilterChip
+                          key={filter}
+                          variant={
+                            timeFilter === filter
+                              ? "brand-filled"
+                              : "brand-outline"
+                          }
+                          onClick={() => setTimeFilter(filter)}
+                          className="text-sm"
+                        >
+                          {filter}
+                        </FilterChip>
+                      ))}
+                    </div>
                   </div>
-                </div>
-                <div className="overflow-x-auto bg-white">
-                  {ACTIVITY.map((activity, index) => (
-                    <div
-                      key={index}
-                      className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
-                    >
-                      <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
-                        <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-                          <Image
-                            src={activity.senderImage}
-                            className="h-24px w-24px rounded-full"
-                            alt="sender image"
-                            width={10}
-                            height={10}
-                          />
-                          <h1
-                            className="w-100px md:w-fit md:overflow-visible truncate"
-                            title={activity.sender}
-                          >
-                            {activity.sender}
-                          </h1>
-                        </div>
-                        <div className="flex items-center">
-                          <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
-                            Donated
+                  <div className="overflow-x-auto bg-white">
+                    {ACTIVITY.map((activity, index) => (
+                      <div
+                        key={index}
+                        className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
+                      >
+                        <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
+                          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                            <Image
+                              src={activity.senderImage}
+                              className="h-24px w-24px rounded-full"
+                              alt="sender image"
+                              width={10}
+                              height={10}
+                            />
+                            <h1
+                              className="w-100px md:w-fit md:overflow-visible truncate"
+                              title={activity.sender}
+                            >
+                              {activity.sender}
+                            </h1>
                           </div>
-                          <div>
-                            <div className="gap-8px flex items-center text-sm text-gray-900">
-                              <NearIcon className="w-18px h-18px" />{" "}
-                              <span className="font-600 m-0 pt-[2px]">
-                                {activity.amount}
-                              </span>
+                          <div className="flex items-center">
+                            <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
+                              Donated
+                            </div>
+                            <div>
+                              <div className="gap-8px flex items-center text-sm text-gray-900">
+                                <NearIcon className="w-18px h-18px" />{" "}
+                                <span className="font-600 m-0 pt-[2px]">
+                                  {activity.amount}
+                                </span>
+                              </div>
                             </div>
+                            <div className="ml-4 text-sm text-gray-600">to</div>
                           </div>
-                          <div className="ml-4 text-sm text-gray-600">to</div>
-                        </div>
-                      </div>
-                      <div className="flex items-center">
-                        <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-                          <Image
-                            src={activity.receiverImage}
-                            className="h-24px w-24px rounded-full"
-                            alt="receiver image"
-                            width={10}
-                            height={10}
-                          />
-                          <h1
-                            className="w-100px md:w-fit md:overflow-visible truncate"
-                            title={activity.receiver}
-                          >
-                            {activity.receiver}
-                          </h1>
                         </div>
-                        <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
-                          <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
-                          {timeAgo(activity.timestamp)}
+                        <div className="flex items-center">
+                          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                            <Image
+                              src={activity.receiverImage}
+                              className="h-24px w-24px rounded-full"
+                              alt="receiver image"
+                              width={10}
+                              height={10}
+                            />
+                            <h1
+                              className="w-100px md:w-fit md:overflow-visible truncate"
+                              title={activity.receiver}
+                            >
+                              {activity.receiver}
+                            </h1>
+                          </div>
+                          <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
+                            <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
+                            {timeAgo(activity.timestamp)}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </>
-            </div>
-          ) : null}
-          {selectedTab === "donors" ? (
-            <div className="w-full">
-              <h1
-                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
-              >
-                Donor Leaderboard
-              </h1>
-              {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
-            </div>
-          ) : null}
-          {selectedTab === "sponsors" ? (
-            <div className="w-full">
-              <h1
-                className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
-              >
-                Sponsor Leaderboard
-              </h1>
-              {renderLeaderboard(topSponsors, "sponsor")}
-            </div>
-          ) : null}
+                    ))}
+                  </div>
+                </>
+              </div>
+            ) : null}
+            {selectedTab === "donors" ? (
+              <div className="w-full">
+                <h1
+                  className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
+                >
+                  Donor Leaderboard
+                </h1>
+                {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
+              </div>
+            ) : null}
+            {selectedTab === "sponsors" ? (
+              <div className="w-full">
+                <h1
+                  className={`md:text-5xl md:leading-[40px] md:tracking-[-1.68px] font-lora text-3xl font-semibold tracking-[-1.12px] ${lora.variable}`}
+                >
+                  Sponsor Leaderboard
+                </h1>
+                {renderLeaderboard(topSponsors, "sponsor")}
+              </div>
+            ) : null}
+          </div>
         </div>
       </div>
     </div>

From d3b20ecbdbb587ea803df71103e71923b4b3e131 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Tue, 22 Oct 2024 17:09:53 +0100
Subject: [PATCH 35/43] moved max-width down

---
 src/pages/donors/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 23012dc97..97b2620d4 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -386,7 +386,7 @@ export default function LeaderboardPage() {
   ];
 
   return (
-    <div className="max-w-912px mx-auto flex w-full flex-col py-8">
+    <div className="mx-auto flex w-full flex-col py-8">
       <ToggleGroup
         defaultValue="donors"
         type="single"
@@ -423,7 +423,7 @@ export default function LeaderboardPage() {
           </div>
         </div>
       </ToggleGroup>
-      <div className="md:py-16 md:px-0 mx-auto w-full flex-nowrap px-5 py-9">
+      <div className="md:py-16 max-w-912px md:px-0 mx-auto w-full flex-nowrap px-5 py-9">
         <div className="mx-auto w-full">
           {selectedTab === "activities" ? (
             <div className="w-full">

From aacbc78526d04a658b65e37d1d28d1500dc7ffbe Mon Sep 17 00:00:00 2001
From: M-RB3 <rabea9220@gmail.com>
Date: Tue, 22 Oct 2024 20:37:16 +0400
Subject: [PATCH 36/43] fix cards width

---
 src/pages/donors/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 093f0707f..93b71ec6b 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -224,7 +224,7 @@ export default function LeaderboardPage() {
           ))}
         </div>
       </div>
-      <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-screen">
+      <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-full">
         <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
           {participants.slice(0, 3).map((participant) => (
             <DonationLeaderboardEntry

From 25f285e663d5a02235a599176e8a09e114a8c077 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Fri, 8 Nov 2024 15:37:08 +0100
Subject: [PATCH 37/43] added hook

---
 src/common/api/indexer/hooks.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/common/api/indexer/hooks.ts b/src/common/api/indexer/hooks.ts
index bd16b6325..0b97bee58 100644
--- a/src/common/api/indexer/hooks.ts
+++ b/src/common/api/indexer/hooks.ts
@@ -11,6 +11,7 @@ import {
   V1AccountsRetrieveParams,
   V1AccountsUpvotedListsRetrieveParams,
   V1DonateContractConfigRetrieveParams,
+  V1DonorsRetrieveParams,
   V1ListsRandomRegistrationRetrieveParams,
   V1ListsRegistrationsRetrieveParams,
   V1ListsRetrieveParams,
@@ -27,6 +28,19 @@ export const useStats = () => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
+/**
+ *
+https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_donors_retrieve
+ */
+
+export const useDonors = ({ ...params }: V1DonorsRetrieveParams) => {
+  const queryResult = swrHooks.useV1DonorsRetrieve(
+    params,
+    POTLOCK_REQUEST_CONFIG,
+  );
+  return { ...queryResult, data: queryResult.data?.data.results };
+};
+
 /**
  * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_donate_contract_config_retrieve
  */

From 06ed323a3d5d1cbd8e58a5a84dae2902f37212b9 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 11 Nov 2024 13:15:20 +0100
Subject: [PATCH 38/43] imported hook to leaderboard page

---
 src/pages/donors/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 93b71ec6b..813e0fe2f 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Lora } from "next/font/google";
 import Image from "next/image";
 
+import { useDonors } from "@/common/api/indexer/hooks";
 import { NearIcon } from "@/common/assets/svgs";
 import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/components";
 import { DonationLeaderboardEntry } from "@/modules/donation";
@@ -199,6 +200,11 @@ export default function LeaderboardPage() {
   const toggleTab = (tab: "donors" | "sponsors" | "activities") => {
     setSelectedTab(tab);
   };
+
+  const { data: mainData } = useDonors({});
+
+  console.log("data", mainData);
+
   const renderLeaderboard = (
     participants: Participant[],
     type: "donor" | "sponsor",

From d46a4bad10a934b97640cdbb0e0146661874ff99 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 11 Nov 2024 14:29:09 +0100
Subject: [PATCH 39/43] Added actuall donors data

---
 src/pages/donors/index.tsx | 112 +++++++++++++++++++------------------
 1 file changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 813e0fe2f..9323052bc 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import { useDonors } from "@/common/api/indexer/hooks";
 import { NearIcon } from "@/common/assets/svgs";
+import { daysAgo } from "@/common/lib";
 import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/components";
 import { DonationLeaderboardEntry } from "@/modules/donation";
 
@@ -158,37 +159,37 @@ const ACTIVITY: Activity[] = [
   },
 ];
 
-const timeAgo = (timestamp: number) => {
-  const now = Date.now();
-  const diff = now - timestamp;
-  if (diff < 1000 * 60) {
-    return `${Math.floor(diff / 1000)}s ago`;
-  } else if (diff < 1000 * 60 * 2) {
-    return `1 min ago`;
-  } else if (diff < 1000 * 60 * 60) {
-    return `${Math.floor(diff / (1000 * 60))} mins ago`;
-  } else if (diff < 1000 * 60 * 60 * 2) {
-    return `1 hr ago`;
-  } else if (diff < 1000 * 60 * 60 * 24) {
-    return `${Math.floor(diff / (1000 * 60 * 60))} hrs ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 2) {
-    return `1 day ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 7) {
-    return `${Math.floor(diff / (1000 * 60 * 60 * 24))} days ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 7 * 2) {
-    return `1 wk ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 30) {
-    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 7))} wks ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 30 * 2) {
-    return `1 mn ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 365) {
-    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 30))} mns ago`;
-  } else if (diff < 1000 * 60 * 60 * 24 * 365 * 2) {
-    return `1 yr ago`;
-  } else {
-    return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 365))} yrs ago`;
-  }
-};
+// const timeAgo = (timestamp: number) => {
+//   const now = Date.now();
+//   const diff = now - timestamp;
+//   if (diff < 1000 * 60) {
+//     return `${Math.floor(diff / 1000)}s ago`;
+//   } else if (diff < 1000 * 60 * 2) {
+//     return `1 min ago`;
+//   } else if (diff < 1000 * 60 * 60) {
+//     return `${Math.floor(diff / (1000 * 60))} mins ago`;
+//   } else if (diff < 1000 * 60 * 60 * 2) {
+//     return `1 hr ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24) {
+//     return `${Math.floor(diff / (1000 * 60 * 60))} hrs ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 2) {
+//     return `1 day ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 7) {
+//     return `${Math.floor(diff / (1000 * 60 * 60 * 24))} days ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 7 * 2) {
+//     return `1 wk ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 30) {
+//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 7))} wks ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 30 * 2) {
+//     return `1 mn ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 365) {
+//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 30))} mns ago`;
+//   } else if (diff < 1000 * 60 * 60 * 24 * 365 * 2) {
+//     return `1 yr ago`;
+//   } else {
+//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 365))} yrs ago`;
+//   }
+// };
 
 export default function LeaderboardPage() {
   const [searchTerm, setSearchTerm] = useState("");
@@ -201,9 +202,9 @@ export default function LeaderboardPage() {
     setSelectedTab(tab);
   };
 
-  const { data: mainData } = useDonors({});
+  const { data: donors } = useDonors({});
 
-  console.log("data", mainData);
+  console.log("data", donors);
 
   const renderLeaderboard = (
     participants: Participant[],
@@ -264,22 +265,20 @@ export default function LeaderboardPage() {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 bg-white">
-            {participants
-              .filter((participant) =>
-                participant.name
-                  .toLowerCase()
-                  .includes(searchTerm.toLowerCase()),
+            {donors
+              ?.filter((participant) =>
+                participant.id.toLowerCase().includes(searchTerm.toLowerCase()),
+              )
+              .sort(
+                (a, b) => b.total_donations_out_usd - a.total_donations_out_usd,
               )
-              .sort((a, b) => b.amount - a.amount)
               .slice(3)
-              .map((participant) => (
-                <tr key={participant.rank}>
+              .map((participant, index) => (
+                <tr key={index}>
                   <td className="w-10px whitespace-nowrap p-4">
                     <div className="flex items-center">
-                      <span className="text-sm text-gray-900">
-                        #{participant.rank}
-                      </span>
-                      {participant.rank === 4 ? (
+                      <span className="text-sm text-gray-900">#{index}</span>
+                      {index === 4 ? (
                         <div className="ml-1 text-green-500" />
                       ) : (
                         <div className="ml-1 text-red-500" />
@@ -290,14 +289,23 @@ export default function LeaderboardPage() {
                     <div className="flex items-center">
                       <Image
                         className="h-10 w-10 rounded-full"
-                        src={participant.image}
+                        src={
+                          (participant.near_social_profile_data?.image?.ipfs_cid
+                            ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
+                            : participant.near_social_profile_data?.image?.nft
+                              ? participant.near_social_profile_data?.image?.nft
+                                  ?.media
+                              : "https://picsum.photos/200/200/?blur") ||
+                          "https://picsum.photos/200/200/?blur"
+                        }
                         width={10}
                         height={10}
                         alt="profile picture"
                       />
                       <div className="ml-4">
                         <div className="font-500 text-sm text-gray-900">
-                          {participant.name}
+                          {participant.near_social_profile_data?.name ??
+                            participant.id}
                         </div>
                       </div>
                     </div>
@@ -305,13 +313,11 @@ export default function LeaderboardPage() {
                   <td className="w-100px whitespace-nowrap p-4">
                     <div className="gap-8px flex items-center text-sm text-gray-900">
                       <NearIcon className="w-18px h-18px pb-[-4]" />
-                      <span className="font-600 m-0 pt-[2px]">
-                        {participant.amount}
-                      </span>
+                      <span className="font-600 m-0 pt-[2px]">-</span>
                     </div>
                   </td>
                   <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
-                    $ {participant.amountUsd}
+                    $ {participant.total_donations_out_usd}
                   </td>
                 </tr>
               ))}
@@ -382,7 +388,7 @@ export default function LeaderboardPage() {
     {
       name: "donors",
       label: "Donor Leaderboard",
-      count: 250,
+      count: donors?.length || 0,
     },
     {
       name: "sponsors",
@@ -519,7 +525,7 @@ export default function LeaderboardPage() {
                           </div>
                           <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
                             <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
-                            {timeAgo(activity.timestamp)}
+                            {daysAgo(activity.timestamp)}
                           </div>
                         </div>
                       </div>

From 5b5a74fe54f5c7aa97655fd0627a2824044ec390 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 13 Nov 2024 16:42:19 +0100
Subject: [PATCH 40/43] Added code for donors data

---
 src/pages/donors/index.tsx | 135 +++++++++++++++++--------------------
 1 file changed, 63 insertions(+), 72 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 9323052bc..790c0fe48 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -3,10 +3,12 @@ import { useState } from "react";
 import { Lora } from "next/font/google";
 import Image from "next/image";
 
+import { coingecko } from "@/common/api/coingecko";
 import { useDonors } from "@/common/api/indexer/hooks";
 import { NearIcon } from "@/common/assets/svgs";
 import { daysAgo } from "@/common/lib";
 import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/components";
+import { AccountOption } from "@/modules/core";
 import { DonationLeaderboardEntry } from "@/modules/donation";
 
 const lora = Lora({
@@ -159,38 +161,6 @@ const ACTIVITY: Activity[] = [
   },
 ];
 
-// const timeAgo = (timestamp: number) => {
-//   const now = Date.now();
-//   const diff = now - timestamp;
-//   if (diff < 1000 * 60) {
-//     return `${Math.floor(diff / 1000)}s ago`;
-//   } else if (diff < 1000 * 60 * 2) {
-//     return `1 min ago`;
-//   } else if (diff < 1000 * 60 * 60) {
-//     return `${Math.floor(diff / (1000 * 60))} mins ago`;
-//   } else if (diff < 1000 * 60 * 60 * 2) {
-//     return `1 hr ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24) {
-//     return `${Math.floor(diff / (1000 * 60 * 60))} hrs ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 2) {
-//     return `1 day ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 7) {
-//     return `${Math.floor(diff / (1000 * 60 * 60 * 24))} days ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 7 * 2) {
-//     return `1 wk ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 30) {
-//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 7))} wks ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 30 * 2) {
-//     return `1 mn ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 365) {
-//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 30))} mns ago`;
-//   } else if (diff < 1000 * 60 * 60 * 24 * 365 * 2) {
-//     return `1 yr ago`;
-//   } else {
-//     return `${Math.floor(diff / (1000 * 60 * 60 * 24 * 365))} yrs ago`;
-//   }
-// };
-
 export default function LeaderboardPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [timeFilter, setTimeFilter] = useState("All time");
@@ -203,6 +173,7 @@ export default function LeaderboardPage() {
   };
 
   const { data: donors } = useDonors({});
+  const { data: oneNearPrice } = coingecko.useOneNearUsdPrice();
 
   console.log("data", donors);
 
@@ -233,16 +204,34 @@ export default function LeaderboardPage() {
       </div>
       <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-full">
         <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
-          {participants.slice(0, 3).map((participant) => (
-            <DonationLeaderboardEntry
-              key={participant.rank}
-              rank={participant.rank}
-              image={participant.image}
-              name={participant.name}
-              amount={participant.amount}
-              type={type}
-            />
-          ))}
+          {donors
+            ?.sort(
+              (a, b) => b.total_donations_out_usd - a.total_donations_out_usd,
+            )
+            .slice(0, 3)
+            .map((participant, index) => (
+              <DonationLeaderboardEntry
+                key={index}
+                rank={index + 1}
+                image={
+                  (participant.near_social_profile_data?.image?.ipfs_cid
+                    ? `https://ipfs.io/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
+                    : participant.near_social_profile_data?.image?.nft
+                      ? participant.near_social_profile_data?.image?.nft?.media
+                      : "https://picsum.photos/200/200/?blur") ||
+                  "https://picsum.photos/200/200/?blur"
+                }
+                name={
+                  participant.near_social_profile_data?.name ?? participant.id
+                }
+                amount={Number(
+                  (participant.total_donations_out_usd / oneNearPrice).toFixed(
+                    2,
+                  ),
+                )}
+                type={type}
+              />
+            ))}
         </div>
       </div>
 
@@ -277,7 +266,9 @@ export default function LeaderboardPage() {
                 <tr key={index}>
                   <td className="w-10px whitespace-nowrap p-4">
                     <div className="flex items-center">
-                      <span className="text-sm text-gray-900">#{index}</span>
+                      <span className="text-sm text-gray-900">
+                        #{index + 1}
+                      </span>
                       {index === 4 ? (
                         <div className="ml-1 text-green-500" />
                       ) : (
@@ -285,35 +276,28 @@ export default function LeaderboardPage() {
                       )}
                     </div>
                   </td>
-                  <td className="whitespace-nowrap p-4">
-                    <div className="flex items-center">
-                      <Image
-                        className="h-10 w-10 rounded-full"
-                        src={
-                          (participant.near_social_profile_data?.image?.ipfs_cid
-                            ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
-                            : participant.near_social_profile_data?.image?.nft
-                              ? participant.near_social_profile_data?.image?.nft
-                                  ?.media
-                              : "https://picsum.photos/200/200/?blur") ||
-                          "https://picsum.photos/200/200/?blur"
-                        }
-                        width={10}
-                        height={10}
-                        alt="profile picture"
-                      />
-                      <div className="ml-4">
+                  <td className="ml-[-20px] whitespace-nowrap p-4">
+                    <AccountOption
+                      title="user Account"
+                      accountId={participant.id}
+                      highlightOnHover={true}
+                      isRounded={true}
+                    />
+                    {/* <div className="ml-4">
                         <div className="font-500 text-sm text-gray-900">
                           {participant.near_social_profile_data?.name ??
                             participant.id}
                         </div>
-                      </div>
-                    </div>
+                      </div> */}
                   </td>
                   <td className="w-100px whitespace-nowrap p-4">
                     <div className="gap-8px flex items-center text-sm text-gray-900">
                       <NearIcon className="w-18px h-18px pb-[-4]" />
-                      <span className="font-600 m-0 pt-[2px]">-</span>
+                      <span className="font-600 m-0 pt-[2px]">
+                        {(
+                          participant.total_donations_out_usd / oneNearPrice
+                        ).toFixed(2)}
+                      </span>
                     </div>
                   </td>
                   <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
@@ -325,16 +309,20 @@ export default function LeaderboardPage() {
         </table>
       </div>
       <div className="p-16px md:hidden flex flex-col items-start gap-4">
-        {participants.map((participant) => (
+        {donors?.map((participant, index) => (
           <div
-            key={participant.rank}
+            key={index}
             className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
           >
             <div className="whitespace-nowrap">
               <div className="h-40px w-40px flex items-center">
                 <Image
                   className="h-40px w-40px rounded-full"
-                  src={participant.image}
+                  src={
+                    participant?.near_social_profile_data?.image?.ipfs_cid
+                      ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image?.ipfs_cid}`
+                      : participant.near_social_profile_data?.image?.url || ""
+                  }
                   width={10}
                   height={10}
                   alt="profile picture"
@@ -345,15 +333,16 @@ export default function LeaderboardPage() {
               <div className="flex justify-between whitespace-nowrap">
                 <div className="ml-1">
                   <div className="font-500 text-sm text-gray-900">
-                    {participant.name}
+                    {participant?.near_social_profile_data?.name ??
+                      participant.id}
                   </div>
                 </div>
                 <div className="whitespace-nowrap">
                   <div className="flex items-center">
                     <span className="fw-50 text-sm text-gray-900">
-                      #{participant.rank}
+                      #{index + 1}
                     </span>
-                    {participant.rank === 4 ? (
+                    {index === 4 ? (
                       <div className="ml-1 text-green-500" />
                     ) : (
                       <div className="ml-1 text-red-500" />
@@ -365,11 +354,13 @@ export default function LeaderboardPage() {
                 <div className="gap-8px flex items-center text-sm text-gray-900">
                   <NearIcon className="w-18px h-18px" />
                   <span className="font-600 m-0 pt-[2px]">
-                    {participant.amount}
+                    {(
+                      participant.total_donations_out_usd / oneNearPrice
+                    ).toFixed(2)}
                   </span>
                 </div>
                 <div className="fw-600 w-fit whitespace-nowrap text-right text-sm text-gray-500">
-                  ~$ {participant.amountUsd}
+                  ~$ {participant.total_donations_out_usd}
                 </div>
               </div>
             </div>

From 75d540be8083aa9cb5ea9efdd7fc07c60096c393 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 18 Nov 2024 14:29:29 +0100
Subject: [PATCH 41/43] Donors data and hanlding for sponsors mock data

---
 src/pages/donors/index.tsx | 441 ++++++++++++++++++++++---------------
 1 file changed, 267 insertions(+), 174 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index 790c0fe48..eb6855df9 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Lora } from "next/font/google";
 import Image from "next/image";
 
 import { coingecko } from "@/common/api/coingecko";
+import { Account } from "@/common/api/indexer";
 import { useDonors } from "@/common/api/indexer/hooks";
 import { NearIcon } from "@/common/assets/svgs";
 import { daysAgo } from "@/common/lib";
@@ -106,6 +107,41 @@ const topSponsors: Participant[] = [
     amount: 800,
     amountUsd: 800,
   },
+  {
+    rank: 4,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor4.near",
+    amount: 800,
+    amountUsd: 800,
+  },
+  {
+    rank: 5,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor5.near",
+    amount: 100,
+    amountUsd: 200,
+  },
+  {
+    rank: 6,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor6.near",
+    amount: 10,
+    amountUsd: 10,
+  },
+  {
+    rank: 7,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor7.near",
+    amount: 30,
+    amountUsd: 800,
+  },
+  {
+    rank: 8,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor8.near",
+    amount: 800,
+    amountUsd: 800,
+  },
 ];
 
 const ACTIVITY: Activity[] = [
@@ -161,112 +197,238 @@ const ACTIVITY: Activity[] = [
   },
 ];
 
+// Define a type guard to check if an object is of type Account
+function isAccount(obj: any): obj is Account {
+  return "total_donations_out_usd" in obj;
+}
+
 export default function LeaderboardPage() {
   const [searchTerm, setSearchTerm] = useState("");
+  const [searchActivity, setSearchActivity] = useState("");
   const [timeFilter, setTimeFilter] = useState("All time");
   const [selectedTab, setSelectedTab] = useState<
     "donors" | "sponsors" | "activities"
-  >("activities"); // Updated formatting for selectedTab
-
+  >("activities");
   const toggleTab = (tab: "donors" | "sponsors" | "activities") => {
     setSelectedTab(tab);
   };
 
   const { data: donors } = useDonors({});
-  const { data: oneNearPrice } = coingecko.useOneNearUsdPrice();
 
-  console.log("data", donors);
+  const sponsors: Participant[] = [];
+  const { data: priceOfOneNear } = coingecko.useOneNearUsdPrice();
+  // const filteredDonors = [...donors];
+
+  console.log({ donors, priceOfOneNear });
+
+  const handleSearch = (participant: any) => {
+    if (!participant) return false;
+
+    const searchLower = searchTerm.toLowerCase();
+
+    const idMatches = isAccount(participant)
+      ? participant.id?.toLowerCase().includes(searchLower)
+      : participant.name.includes(searchLower);
+
+    const nameMatches = participant.near_social_profile_data?.name
+      ?.toLowerCase()
+      .includes(searchLower);
+
+    return idMatches || nameMatches;
+  };
 
   const renderLeaderboard = (
     participants: Participant[],
     type: "donor" | "sponsor",
-  ) => (
-    <>
-      <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
-        <SearchBar
-          className="md:w-40 text-gray-400"
-          placeholder={`Search projects`}
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-        <div className="flex w-fit gap-3">
-          {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
-            <FilterChip
-              key={filter}
-              variant={timeFilter === filter ? "brand-filled" : "brand-outline"}
-              onClick={() => setTimeFilter(filter)}
-              className="text-sm"
-            >
-              {filter}
-            </FilterChip>
-          ))}
-        </div>
-      </div>
-      <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-full">
-        <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
-          {donors
-            ?.sort(
-              (a, b) => b.total_donations_out_usd - a.total_donations_out_usd,
-            )
-            .slice(0, 3)
-            .map((participant, index) => (
-              <DonationLeaderboardEntry
-                key={index}
-                rank={index + 1}
-                image={
-                  (participant.near_social_profile_data?.image?.ipfs_cid
-                    ? `https://ipfs.io/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
-                    : participant.near_social_profile_data?.image?.nft
-                      ? participant.near_social_profile_data?.image?.nft?.media
-                      : "https://picsum.photos/200/200/?blur") ||
-                  "https://picsum.photos/200/200/?blur"
-                }
-                name={
-                  participant.near_social_profile_data?.name ?? participant.id
+  ) => {
+    const data = type === "donor" ? [...(donors || [])] : [...participants];
+
+    console.log("data now", data);
+
+    return (
+      <>
+        <div className="md:flex-row mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10">
+          <SearchBar
+            className="md:w-40 text-gray-400"
+            placeholder={`Search projects`}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <div className="flex w-fit gap-3">
+            {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+              <FilterChip
+                key={filter}
+                variant={
+                  timeFilter === filter ? "brand-filled" : "brand-outline"
                 }
-                amount={Number(
-                  (participant.total_donations_out_usd / oneNearPrice).toFixed(
-                    2,
-                  ),
-                )}
-                type={type}
-              />
+                onClick={() => setTimeFilter(filter)}
+                className="text-sm"
+              >
+                {filter}
+              </FilterChip>
             ))}
+          </div>
+        </div>
+        <div className="pl-36px xl:overflow-x-unset h-300px md:w-full relative ml-[-36px]  w-full">
+          <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
+            {data
+              ?.sort((a, b) => {
+                const aAmount = isAccount(a) ? a.total_donations_out_usd : 0;
+                const bAmount = isAccount(b) ? b.total_donations_out_usd : 0;
+                return bAmount - aAmount;
+              })
+              .slice(0, 3)
+              .map((participant, index) => {
+                const name = isAccount(participant)
+                  ? (participant.near_social_profile_data?.name ??
+                    (participant.id?.length <= 20
+                      ? participant.id
+                      : `${participant.id.substring(0, 16)}...${participant.id.substring(participant.id.length - 4)}`))
+                  : participant.name;
+                return (
+                  <DonationLeaderboardEntry
+                    key={index}
+                    rank={isAccount(participant) ? index + 1 : participant.rank}
+                    image={
+                      isAccount(participant)
+                        ? (participant.near_social_profile_data?.image?.ipfs_cid
+                            ? `https://ipfs.io/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
+                            : participant.near_social_profile_data?.image?.nft
+                              ? participant.near_social_profile_data?.image?.nft
+                                  ?.media
+                              : "https://picsum.photos/200/200/?blur") ||
+                          "https://picsum.photos/200/200/?blur"
+                        : participant.image
+                    }
+                    name={name}
+                    amount={Number(
+                      (isAccount(participant)
+                        ? participant.total_donations_out_usd / priceOfOneNear
+                        : participant.amount
+                      ).toFixed(2),
+                    )}
+                    type={type}
+                  />
+                );
+              })}
+          </div>
         </div>
-      </div>
 
-      <div className="md:block hidden rounded-2xl border border-gray-200  bg-white">
-        <table className="w-full">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
-                Rank
-              </th>
-              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
-                Projects
-              </th>
-              <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
-                Amount
-              </th>
-              <th className="w-150px p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">
-                AMT (USD)
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
-            {donors
-              ?.filter((participant) =>
-                participant.id.toLowerCase().includes(searchTerm.toLowerCase()),
-              )
-              .sort(
-                (a, b) => b.total_donations_out_usd - a.total_donations_out_usd,
-              )
-              .slice(3)
-              .map((participant, index) => (
-                <tr key={index}>
-                  <td className="w-10px whitespace-nowrap p-4">
+        <div className="md:block hidden rounded-2xl border border-gray-200  bg-white">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Rank
+                </th>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Projects
+                </th>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Amount
+                </th>
+                <th className="w-150px p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">
+                  AMT (USD)
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 bg-white">
+              {data
+                ?.sort((a, b) => {
+                  const aAmount = isAccount(a) ? a.total_donations_out_usd : 0;
+                  const bAmount = isAccount(b) ? b.total_donations_out_usd : 0;
+                  return bAmount - aAmount;
+                })
+                .slice(3)
+                .filter(handleSearch)
+                .map((donor, index) => (
+                  <tr key={index}>
+                    <td className="w-10px whitespace-nowrap p-4">
+                      <div className="flex items-center">
+                        <span className="text-sm text-gray-900">
+                          #{isAccount(donor) ? index + 1 : donor.rank}
+                        </span>
+                        {(isAccount(donor) ? index + 1 : donor.rank) === 4 ? (
+                          <div className="ml-1 text-green-500" />
+                        ) : (
+                          <div className="ml-1 text-red-500" />
+                        )}
+                      </div>
+                    </td>
+                    <td className="ml-[-20px] whitespace-nowrap p-4">
+                      <AccountOption
+                        title="user Account"
+                        accountId={isAccount(donor) ? donor?.id : donor.name}
+                        highlightOnHover={true}
+                        isRounded={true}
+                      />
+                      {/* <div className="ml-4">
+                        <div className="font-500 text-sm text-gray-900">
+                          {participant.near_social_profile_data?.name ??
+                            participant.id}
+                        </div>
+                      </div> */}
+                    </td>
+                    <td className="w-100px whitespace-nowrap p-4">
+                      <div className="gap-8px flex items-center text-sm text-gray-900">
+                        <NearIcon className="w-18px h-18px pb-[-4]" />
+                        <span className="font-600 m-0 pt-[2px]">
+                          {isAccount(donor)
+                            ? (
+                                donor.total_donations_out_usd / priceOfOneNear
+                              ).toFixed(2)
+                            : donor.amount}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
+                      ${" "}
+                      {isAccount(donor)
+                        ? donor.total_donations_out_usd
+                        : donor.amountUsd}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="p-16px md:hidden flex flex-col items-start gap-4">
+          {data?.map((participant, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
+            >
+              <div className="whitespace-nowrap">
+                <div className="h-40px w-40px flex items-center">
+                  <Image
+                    className="h-40px w-40px rounded-full"
+                    src={
+                      isAccount(participant)
+                        ? participant?.near_social_profile_data?.image?.ipfs_cid
+                          ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image?.ipfs_cid}`
+                          : participant.near_social_profile_data?.image?.url ||
+                            ""
+                        : participant.image
+                    }
+                    width={10}
+                    height={10}
+                    alt="profile picture"
+                  />
+                </div>
+              </div>
+              <div className="w-full">
+                <div className="flex justify-between whitespace-nowrap">
+                  <div className="ml-1">
+                    <div className="font-500 text-sm text-gray-900">
+                      {isAccount(participant)
+                        ? (participant?.near_social_profile_data?.name ??
+                          participant.id)
+                        : participant.name}
+                    </div>
+                  </div>
+                  <div className="whitespace-nowrap">
                     <div className="flex items-center">
-                      <span className="text-sm text-gray-900">
+                      <span className="fw-50 text-sm text-gray-900">
                         #{index + 1}
                       </span>
                       {index === 4 ? (
@@ -275,100 +437,31 @@ export default function LeaderboardPage() {
                         <div className="ml-1 text-red-500" />
                       )}
                     </div>
-                  </td>
-                  <td className="ml-[-20px] whitespace-nowrap p-4">
-                    <AccountOption
-                      title="user Account"
-                      accountId={participant.id}
-                      highlightOnHover={true}
-                      isRounded={true}
-                    />
-                    {/* <div className="ml-4">
-                        <div className="font-500 text-sm text-gray-900">
-                          {participant.near_social_profile_data?.name ??
-                            participant.id}
-                        </div>
-                      </div> */}
-                  </td>
-                  <td className="w-100px whitespace-nowrap p-4">
-                    <div className="gap-8px flex items-center text-sm text-gray-900">
-                      <NearIcon className="w-18px h-18px pb-[-4]" />
-                      <span className="font-600 m-0 pt-[2px]">
-                        {(
-                          participant.total_donations_out_usd / oneNearPrice
-                        ).toFixed(2)}
-                      </span>
-                    </div>
-                  </td>
-                  <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
-                    $ {participant.total_donations_out_usd}
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </div>
-      <div className="p-16px md:hidden flex flex-col items-start gap-4">
-        {donors?.map((participant, index) => (
-          <div
-            key={index}
-            className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
-          >
-            <div className="whitespace-nowrap">
-              <div className="h-40px w-40px flex items-center">
-                <Image
-                  className="h-40px w-40px rounded-full"
-                  src={
-                    participant?.near_social_profile_data?.image?.ipfs_cid
-                      ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image?.ipfs_cid}`
-                      : participant.near_social_profile_data?.image?.url || ""
-                  }
-                  width={10}
-                  height={10}
-                  alt="profile picture"
-                />
-              </div>
-            </div>
-            <div className="w-full">
-              <div className="flex justify-between whitespace-nowrap">
-                <div className="ml-1">
-                  <div className="font-500 text-sm text-gray-900">
-                    {participant?.near_social_profile_data?.name ??
-                      participant.id}
                   </div>
                 </div>
-                <div className="whitespace-nowrap">
-                  <div className="flex items-center">
-                    <span className="fw-50 text-sm text-gray-900">
-                      #{index + 1}
+                <div className="gap-8px flex items-center">
+                  <div className="gap-8px flex items-center text-sm text-gray-900">
+                    <NearIcon className="w-18px h-18px" />
+                    <span className="font-600 m-0 pt-[2px]">
+                      {isAccount(participant)
+                        ? participant.total_donations_out_usd / priceOfOneNear
+                        : participant.amount}
                     </span>
-                    {index === 4 ? (
-                      <div className="ml-1 text-green-500" />
-                    ) : (
-                      <div className="ml-1 text-red-500" />
-                    )}
                   </div>
-                </div>
-              </div>
-              <div className="gap-8px flex items-center">
-                <div className="gap-8px flex items-center text-sm text-gray-900">
-                  <NearIcon className="w-18px h-18px" />
-                  <span className="font-600 m-0 pt-[2px]">
-                    {(
-                      participant.total_donations_out_usd / oneNearPrice
-                    ).toFixed(2)}
-                  </span>
-                </div>
-                <div className="fw-600 w-fit whitespace-nowrap text-right text-sm text-gray-500">
-                  ~$ {participant.total_donations_out_usd}
+                  <div className="fw-600 w-fit whitespace-nowrap text-right text-sm text-gray-500">
+                    ~${" "}
+                    {isAccount(participant)
+                      ? participant.total_donations_out_usd
+                      : participant.amountUsd}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        ))}
-      </div>
-    </>
-  );
+          ))}
+        </div>
+      </>
+    );
+  };
 
   const TABs = [
     {

From 229e4199fa0a5e62f12f309691858ee6888af956 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Mon, 18 Nov 2024 14:52:30 +0100
Subject: [PATCH 42/43] fix for price of one near

---
 src/pages/donors/index.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
index eb6855df9..701d05331 100644
--- a/src/pages/donors/index.tsx
+++ b/src/pages/donors/index.tsx
@@ -217,7 +217,7 @@ export default function LeaderboardPage() {
 
   const sponsors: Participant[] = [];
   const { data: priceOfOneNear } = coingecko.useOneNearUsdPrice();
-  // const filteredDonors = [...donors];
+  const price = priceOfOneNear ?? 5.0;
 
   console.log({ donors, priceOfOneNear });
 
@@ -273,8 +273,12 @@ export default function LeaderboardPage() {
           <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
             {data
               ?.sort((a, b) => {
-                const aAmount = isAccount(a) ? a.total_donations_out_usd : 0;
-                const bAmount = isAccount(b) ? b.total_donations_out_usd : 0;
+                const aAmount = isAccount(a)
+                  ? a.total_donations_out_usd
+                  : a.amountUsd;
+                const bAmount = isAccount(b)
+                  ? b.total_donations_out_usd
+                  : b.amountUsd;
                 return bAmount - aAmount;
               })
               .slice(0, 3)
@@ -303,7 +307,7 @@ export default function LeaderboardPage() {
                     name={name}
                     amount={Number(
                       (isAccount(participant)
-                        ? participant.total_donations_out_usd / priceOfOneNear
+                        ? participant.total_donations_out_usd / price
                         : participant.amount
                       ).toFixed(2),
                     )}
@@ -374,9 +378,7 @@ export default function LeaderboardPage() {
                         <NearIcon className="w-18px h-18px pb-[-4]" />
                         <span className="font-600 m-0 pt-[2px]">
                           {isAccount(donor)
-                            ? (
-                                donor.total_donations_out_usd / priceOfOneNear
-                              ).toFixed(2)
+                            ? (donor.total_donations_out_usd / price).toFixed(2)
                             : donor.amount}
                         </span>
                       </div>
@@ -444,7 +446,7 @@ export default function LeaderboardPage() {
                     <NearIcon className="w-18px h-18px" />
                     <span className="font-600 m-0 pt-[2px]">
                       {isAccount(participant)
-                        ? participant.total_donations_out_usd / priceOfOneNear
+                        ? participant.total_donations_out_usd / price
                         : participant.amount}
                     </span>
                   </div>

From b667cd41beeba4954cb14ded93bdb01e7f25e286 Mon Sep 17 00:00:00 2001
From: Carina Akaia <cvo.akaia@gmail.com>
Date: Wed, 2 Jul 2025 14:01:45 +0000
Subject: [PATCH 43/43] chore: Format

---
 src/common/ui/layout/svg/Trophy.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/common/ui/layout/svg/Trophy.tsx b/src/common/ui/layout/svg/Trophy.tsx
index 63b32f47c..480a537a2 100644
--- a/src/common/ui/layout/svg/Trophy.tsx
+++ b/src/common/ui/layout/svg/Trophy.tsx
@@ -1,11 +1,8 @@
+// TODO!: Delete this file and use an icon library package component instead!
+
 const Trophy = (props: any) => {
   return (
-    <svg
-      {...props}
-      viewBox="0 0 19 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg {...props} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M4.66797 18V16H8.66797V12.9C7.8513 12.7167 7.12214 12.3708 6.48047 11.8625C5.8388 11.3542 5.36797 10.7167 5.06797 9.95C3.81797 9.8 2.77214 9.25417 1.93047 8.3125C1.0888 7.37083 0.667969 6.26667 0.667969 5V4C0.667969 3.45 0.863802 2.97917 1.25547 2.5875C1.64714 2.19583 2.11797 2 2.66797 2H4.66797V0H14.668V2H16.668C17.218 2 17.6888 2.19583 18.0805 2.5875C18.4721 2.97917 18.668 3.45 18.668 4V5C18.668 6.26667 18.2471 7.37083 17.4055 8.3125C16.5638 9.25417 15.518 9.8 14.268 9.95C13.968 10.7167 13.4971 11.3542 12.8555 11.8625C12.2138 12.3708 11.4846 12.7167 10.668 12.9V16H14.668V18H4.66797ZM4.66797 7.8V4H2.66797V5C2.66797 5.63333 2.8513 6.20417 3.21797 6.7125C3.58464 7.22083 4.06797 7.58333 4.66797 7.8ZM14.668 7.8C15.268 7.58333 15.7513 7.22083 16.118 6.7125C16.4846 6.20417 16.668 5.63333 16.668 5V4H14.668V7.8Z"
         fill={props.fill || "#91321B`"}