From bd392641bb3244351d75e7400ecf9fab3f61dc83 Mon Sep 17 00:00:00 2001 From: Lucian Date: Wed, 18 Sep 2024 08:34:02 -0600 Subject: [PATCH] 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 | 14 +++----------- app/components/Category.tsx | 12 ++++++------ app/components/Confetti.tsx | 2 +- app/components/PlatformCard.tsx | 19 ++++++++++++++++--- app/hooks/usePlatforms.ts | 6 ++---- app/public/assets/dev-icon.svg | 5 +++++ .../src/CustomGithub/Providers-config.ts | 4 ++-- 7 files changed, 35 insertions(+), 27 deletions(-) create mode 100644 app/public/assets/dev-icon.svg diff --git a/app/components/CardList.tsx b/app/components/CardList.tsx index dbaa3a6e66..4da43cf88a 100644 --- a/app/components/CardList.tsx +++ b/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 ( <> - {allowList && ( - - )} {Object.keys(groupedPlatforms).map((category) => { const sortedPlatforms = groupedPlatforms[category].sortedPlatforms; const shouldDisplayCategory = sortedPlatforms.some((platform) => platform.possiblePoints > 0); diff --git a/app/components/Category.tsx b/app/components/Category.tsx index cf2422c3a7..6cc433e3e1 100644 --- a/app/components/Category.tsx +++ b/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,9 +22,9 @@ 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; +const cardClassName = "col-span-2 md:col-span-1 lg:col-span-1 xl:col-span-1"; export const Category = ({ className, @@ -33,7 +32,7 @@ export const Category = ({ isLoading = false, initialOpen = true, }: CategoryProps): JSX.Element => { - const { allProvidersState, allPlatforms } = useContext(CeramicContext); + const { allPlatforms } = useContext(CeramicContext); const [dropDownOpen, setDropDownOpen] = useState(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"} /> ); })} diff --git a/app/components/Confetti.tsx b/app/components/Confetti.tsx index b56bf312e7..176ea7082d 100644 --- a/app/components/Confetti.tsx +++ b/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) { diff --git a/app/components/PlatformCard.tsx b/app/components/PlatformCard.tsx index 232670c1f9..9464092c9d 100644 --- a/app/components/PlatformCard.tsx +++ b/app/components/PlatformCard.tsx @@ -15,10 +15,13 @@ import { usePlatforms } from "../hooks/usePlatforms"; export type SelectedProviders = Record; +type CardVariant = "default" | "partner"; + type PlatformCardProps = { i: number; platform: PlatformScoreSpec; onOpen: () => void; + variant?: CardVariant; setCurrentPlatform: React.Dispatch>; className?: string; }; @@ -29,14 +32,22 @@ type StampProps = { daysUntilExpiration?: number; className?: string; onClick: () => void; + variant?: CardVariant; +}; + +const variantClasses: Record = { + 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 (
{ const platformIsExcluded = usePlatformIsExcluded(platform); const { platformExpirationDates, expiredPlatforms, allProvidersState } = useContext(CeramicContext); @@ -318,6 +330,7 @@ export const PlatformCard = ({ } else { stamp = ( { } 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}`); diff --git a/app/public/assets/dev-icon.svg b/app/public/assets/dev-icon.svg new file mode 100644 index 0000000000..db25b8ea8a --- /dev/null +++ b/app/public/assets/dev-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/platforms/src/CustomGithub/Providers-config.ts b/platforms/src/CustomGithub/Providers-config.ts index 66b0dd204a..664a66ef50 100644 --- a/platforms/src/CustomGithub/Providers-config.ts +++ b/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,