feat(app): adding card variant for custom stamps (#2882)

* feat(app): adding card variant for custom stamps

* fix(platforms): update default platform name for dev list

app/components/CardList.tsx

@@ -10,7 +10,6 @@ import PageWidthGrid from "../components/PageWidthGrid";
 import { PlatformScoreSpec, ScorerContext } from "../context/scorerContext";
 import { Category } from "./Category";
 import { CeramicContext } from "../context/ceramicContext";
-import { PlatformCard } from "./PlatformCard";
 import { GenericPlatform } from "./GenericPlatform";
 
 export type CardListProps = {
@@ -56,6 +55,7 @@ export const CardList = ({ className, isLoading = false, initialOpen = true }: C
   const groupedPlatforms: {
     [key: string]: {
       name: string;
+      id?: string;
       description: string;
       sortedPlatforms: PlatformScoreSpec[];
     };
@@ -65,6 +65,7 @@ export const CardList = ({ className, isLoading = false, initialOpen = true }: C
   platformCatagories.forEach((category) => {
     groupedPlatforms[category.name] = {
       name: category.name,
+      id: category.id,
       description: category.description,
       sortedPlatforms: [],
     };
@@ -80,20 +81,11 @@ export const CardList = ({ className, isLoading = false, initialOpen = true }: C
 
   const allowList = scoredPlatforms.find((platform) => platform.platform.startsWith("AllowList"));
   const platformProps = currentPlatform?.platform && allPlatforms.get(currentPlatform.platform);
+
   // Use as in id staking
   return (
     <>
       <PageWidthGrid className={className}>
-        {allowList && (
-          <PlatformCard
-            i={0}
-            key={0}
-            platform={allowList}
-            onOpen={onOpen}
-            setCurrentPlatform={setCurrentPlatform}
-            className="col-span-3 bg-[url('/assets/star.svg')] bg-auto bg-center bg-no-repeat"
-          />
-        )}
         {Object.keys(groupedPlatforms).map((category) => {
           const sortedPlatforms = groupedPlatforms[category].sortedPlatforms;
           const shouldDisplayCategory = sortedPlatforms.some((platform) => platform.possiblePoints > 0);

app/components/Category.tsx

@@ -1,17 +1,16 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { LoadingCard } from "./LoadingCard";
 import { GenericPlatform } from "./GenericPlatform";
-import { PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-types";
 import { CeramicContext } from "../context/ceramicContext";
 import { PlatformCard } from "./PlatformCard";
-import { PlatformScoreSpec, ScorerContext } from "../context/scorerContext";
+import { PlatformScoreSpec } from "../context/scorerContext";
 import { Disclosure } from "@headlessui/react";
 import { DropDownIcon } from "./DropDownIcon";
 import { useDisclosure } from "@chakra-ui/react";
-import { useCustomization } from "../hooks/useCustomization";
 
 export type Category = {
   name: string;
+  id?: string;
   description: string;
   sortedPlatforms: PlatformScoreSpec[];
 };
@@ -23,17 +22,17 @@ export type CategoryProps = {
   category: Category;
 };
 
-const cardClassName = "col-span-2 md:col-span-1 lg:col-span-1 xl:col-span-1";
+export const CUSTOM_CATEGORY_ID = "Custom";
 
-type SelectedProviders = Record<PLATFORM_ID, PROVIDER_ID[]>;
+const cardClassName = "col-span-2 md:col-span-1 lg:col-span-1 xl:col-span-1";
 
 export const Category = ({
   className,
   category,
   isLoading = false,
   initialOpen = true,
 }: CategoryProps): JSX.Element => {
-  const { allProvidersState, allPlatforms } = useContext(CeramicContext);
+  const { allPlatforms } = useContext(CeramicContext);
   const [dropDownOpen, setDropDownOpen] = useState<boolean>(false);
   const openRef = React.useRef(dropDownOpen);
   openRef.current = dropDownOpen;
@@ -103,6 +102,7 @@ export const Category = ({
                     onOpen={onOpen}
                     setCurrentPlatform={setCurrentPlatform}
                     className={cardClassName}
+                    variant={category.id === CUSTOM_CATEGORY_ID ? "partner" : "default"}
                   />
                 );
               })}

app/components/Confetti.tsx

@@ -45,7 +45,7 @@ export const Confetti: React.FC = () => {
   const { rawScore, threshold } = useContext(ScorerContext);
 
   useEffect(() => {
-    setShowConfetti(!verificationState.loading && rawScore >= threshold);
+    setShowConfetti(!verificationState.loading && threshold > 0 && rawScore >= threshold);
   }, [verificationState, rawScore, threshold]);
 
   if (!showConfetti) {

app/components/PlatformCard.tsx

@@ -15,10 +15,13 @@ import { usePlatforms } from "../hooks/usePlatforms";
 
 export type SelectedProviders = Record<PLATFORM_ID, PROVIDER_ID[]>;
 
+type CardVariant = "default" | "partner";
+
 type PlatformCardProps = {
   i: number;
   platform: PlatformScoreSpec;
   onOpen: () => void;
+  variant?: CardVariant;
   setCurrentPlatform: React.Dispatch<React.SetStateAction<PlatformScoreSpec | undefined>>;
   className?: string;
 };
@@ -29,14 +32,22 @@ type StampProps = {
   daysUntilExpiration?: number;
   className?: string;
   onClick: () => void;
+  variant?: CardVariant;
+};
+
+const variantClasses: Record<CardVariant, string> = {
+  default: "bg-gradient-to-b from-background to-background-2/70 border-foreground-6",
+  partner:
+    "bg-gradient-to-t from-background-2 to-background-3 border-background-3 shadow-[0px_0px_24px_0px] shadow-background-3",
 };
 
-const DefaultStamp = ({ idx, platform, className, onClick }: StampProps) => {
+const DefaultStamp = ({ idx, platform, className, onClick, variant }: StampProps) => {
   return (
     <div data-testid="platform-card" onClick={onClick} className={className} key={`${platform.name}${idx}`}>
       <div
-        className="group relative flex h-full cursor-pointer flex-col rounded-lg border border-foreground-6 p-0 transition-all ease-out bg-gradient-to-b from-background to-background-2/70
-        hover:bg-opacity-100 hover:bg-gradient-to-b hover:from-transparent hover:shadow-even-md hover:border-background-3 hover:to-background-2 hover:shadow-background-3"
+        className={`group relative flex h-full cursor-pointer flex-col rounded-lg border p-0 transition-all ease-out 
+        hover:bg-opacity-100 hover:bg-gradient-to-b hover:from-transparent hover:shadow-even-md hover:border-background-3 hover:to-background-2 hover:shadow-background-3
+        ${variantClasses[variant || "default"]}`}
       >
         <img
           src="./assets/card-background.svg"
@@ -265,6 +276,7 @@ export const PlatformCard = ({
   onOpen,
   setCurrentPlatform,
   className,
+  variant,
 }: PlatformCardProps): JSX.Element => {
   const platformIsExcluded = usePlatformIsExcluded(platform);
   const { platformExpirationDates, expiredPlatforms, allProvidersState } = useContext(CeramicContext);
@@ -318,6 +330,7 @@ export const PlatformCard = ({
   } else {
     stamp = (
       <DefaultStamp
+        variant={variant}
         idx={i}
         platform={platform}
         className={className}

app/hooks/usePlatforms.ts

@@ -4,21 +4,20 @@ import { useCallback, useMemo } from "react";
 import { PLATFORM_CATEGORY, PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-types";
 import { PlatformProps } from "../components/GenericPlatform";
 import { defaultPlatformMap, CUSTOM_PLATFORM_TYPE_INFO } from "../config/platformMap";
+import { CUSTOM_CATEGORY_ID } from "../components/Category";
 
 const { AllowList } = platformDefinitions;
 
 export type Providers = {
   [platform in PLATFORM_ID]: PlatformGroupSpec[];
 };
 
-const CUSTOM_CATEGORY_ID = "Custom";
-
 const BASE_PLATFORM_CATAGORIES: PLATFORM_CATEGORY[] = [
   {
     name: "Partner Stamps",
     description: "These are special stamps specific to each partner",
     id: CUSTOM_CATEGORY_ID,
-    platforms: [],
+    platforms: ["AllowList"],
   },
   {
     name: "Blockchain & Crypto Networks",
@@ -98,7 +97,6 @@ export const usePlatforms = () => {
     }
 
     if (customStamps) {
-      console.log("customStamps", customStamps);
       for (const [platformId, { platformType, banner, credentials }] of Object.entries(customStamps)) {
         const platformTypeInfo = CUSTOM_PLATFORM_TYPE_INFO[platformType];
         if (!platformTypeInfo) throw new Error(`Unknown custom platform type: ${platformType}`);

platforms/src/CustomGithub/Providers-config.ts

@@ -2,9 +2,9 @@ import { PlatformSpec, PlatformGroupSpec, Provider } from "../types";
 import { CustomGithubProvider } from "./Providers";
 
 export const PlatformDetails: PlatformSpec = {
-  icon: "./assets/star-light.svg",
+  icon: "./assets/dev-icon.svg",
   platform: "DeveloperList",
-  name: "Custom Github Stamp",
+  name: "Developer List",
   description: "Verify you are part of a community",
   connectMessage: "Verify",
   isEVM: false,