161-feature-donors-page-and-leaderboard

.vscode/settings.json

@@ -24,6 +24,7 @@
     "graylisted",
     "hookform",
     "kubb",
+    "Leaderboard",
     "linktree",
     "mpdao",
     "NADABOT",

README.md

@@ -20,6 +20,10 @@ You can see original features <https://potlock.notion.site/All-Features-Potlock-
 
 Core contracts can be found at <https://github.com/PotLock/core> and documentation <https://docs.potlock.io/contracts/contracts-overview>
 
+You can see original features <https://potlock.notion.site/All-Features-Potlock-NextJS-App-5f543fa8b31840aa88bf5b8cf57ead3d?pvs=4>
+
+Core contracts can be found at <https://github.com/PotLock/core> and documentation <https://docs.potlock.io/contracts/contracts-overview>
+
 ## Development
 
 ### Getting Started

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
  */

src/common/assets/svgs/Trophy.tsx

@@ -0,0 +1,17 @@
+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;

src/common/ui/components/atoms/button.tsx

@@ -48,7 +48,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]",
         ),

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 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",
+  ),
+
+  {
+    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 };

src/common/ui/components/index.ts

@@ -4,6 +4,7 @@
  * See https://atomicdesign.bradfrost.com/chapter-2/
  */
 export * from "./dropdown-menu";
+export * from "./filter-chip";
 export * from "./InfiniteScroll";
 export * from "./popover";
 export * from "./scroll-area";

src/modules/core/components/Nav.tsx

@@ -23,8 +23,7 @@ const links = [
   },
 
   { 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,

src/modules/donation/components/DonationLeaderboardEntry.tsx

@@ -0,0 +1,61 @@
+import Image from "next/image";
+
+import Trophy from "@/common/assets/svgs/Trophy";
+
+export type DonationLeaderboardEntryProps = {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  type: "donor" | "sponsor";
+};
+
+export const DonationLeaderboardEntry: React.FC<
+  DonationLeaderboardEntryProps
+> = ({ rank, image, name, amount, type }) => {
+  const bgClass =
+    rank === 1
+      ? "bg-gradient-to-r from-orange-400 to-red-500 text-white"
+      : rank === 2
+        ? "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 =
+    rank === 1
+      ? "fill-yellow-400"
+      : rank === 2
+        ? "fill-gray-400"
+        : "fill-red-800";
+
+  return (
+    <div
+      className={`w-288px overflow-hidden rounded-2xl border border-gray-200 pb-4`}
+    >
+      <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>
+      <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>
+  );
+};

src/modules/donation/index.ts

@@ -1,6 +1,7 @@
 export * from "./constants";
 export * from "./components/breakdowns";
 export * from "./components/buttons";
+export * from "./components/DonationLeaderboardEntry";
 export * from "./components/DonationSybilWarning";
 export * from "./hooks";
 export * from "./models/schemas";