feat: address feedback, improve type safety

gitcoinco · Oct 25, 2023 · 78d3c8c · 78d3c8c
1 parent ea1217e
commit 78d3c8c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 30 deletions.
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -18,7 +18,7 @@ export enum PassportState {
 
 const PassportEvidenceSchema = z.object({
   type: z.string().nullish(),
-  rawScore: z.string().nullish(),
+  rawScore: z.coerce.number(),
   threshold: z.string().nullish(),
 });
 

diff --git a/packages/grant-explorer/src/features/api/__tests__/passport.test.tsx b/packages/grant-explorer/src/features/api/__tests__/passport.test.tsx
@@ -31,6 +31,7 @@ describe("fetchPassport", () => {
     vi.clearAllMocks();
   });
 
+  /* TODO: this doesn't test anything */
   it("should return a response", async () => {
     (fetchPassport as Mock).mockResolvedValue({
       ok: true,
@@ -48,6 +49,7 @@ describe("submitPassport", () => {
     vi.clearAllMocks();
   });
 
+  /* TODO: again, this doesn't test anything */
   it("should return a response", async () => {
     (submitPassport as Mock).mockResolvedValue({
       ok: true,

diff --git a/packages/grant-explorer/src/features/api/passport.ts b/packages/grant-explorer/src/features/api/passport.ts
@@ -72,7 +72,7 @@ export function usePassport({ address }: { address: string | undefined }) {
 
   const passportScore = useMemo(() => {
     if (swr.data?.evidence) {
-      return Number(swr.data.evidence.rawScore);
+      return swr.data.evidence.rawScore;
     }
     return 0;
   }, [swr.data]);
@@ -118,15 +118,12 @@ export function usePassport({ address }: { address: string | undefined }) {
 
 export type PassportColor = "gray" | "orange" | "yellow" | "green";
 
-export function passportColorTextClass(color: PassportColor): string {
-  switch (color) {
-    case "gray":
-      return "text-gray-400";
-    case "orange":
-      return "text-orange-400";
-    case "yellow":
-      return "text-yellow-400";
-    case "green":
-      return "text-green-400";
-  }
-}
+const passportColorToClassName: Record<PassportColor, string> = {
+  gray: "text-gray-400",
+  orange: "text-orange-400",
+  yellow: "text-yellow-400",
+  green: "text-green-400",
+};
+
+export const getClassForPassportColor = (color: PassportColor) =>
+  passportColorToClassName[color];
diff --git a/packages/grant-explorer/src/features/common/PassportWidget.tsx b/packages/grant-explorer/src/features/common/PassportWidget.tsx
@@ -12,14 +12,14 @@ export function PassportWidget() {
   const { passportState, passportScore, passportColor, donationImpact } =
     usePassport({ address });
 
-  const [open, setOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   function handleClick() {
     if (
       passportState === PassportState.SCORE_AVAILABLE ||
       passportState === PassportState.INVALID_PASSPORT
     ) {
-      setOpen(!open);
+      setIsOpen(!isOpen);
     }
   }
 
@@ -41,7 +41,7 @@ export function PassportWidget() {
                   ? "bg-yellow-500"
                   : "bg-orange-500"
               }
-              absolute bottom-0.5 right-0 w-3 h-3 rounded-full sm:block md:hidden`}
+              absolute bottom-0.5 right-0 w-3 h-3 rounded-2xl sm:block md:hidden`}
             ></div>
           </div>
         ) : (
@@ -63,12 +63,13 @@ export function PassportWidget() {
         )}
         <DropdownIcon
           className="inline mt-3 md:block"
-          direction={open ? "up" : "down"}
+          direction={isOpen ? "up" : "down"}
         />
         <div
-          className={`backdrop-blur-sm cursor-auto absolute mt-1 top-12 border-2 z-10 ml-[-75px] font-modern-era-medium md:right-0 md:ml-0 md:mr-[-20px] w-96 bg-grey-150 md:bg-opacity-80 py-4 px-6 rounded-xl shadow-lg ${
-            open ? "block" : "hidden"
-          }`}
+          className={`backdrop-blur-sm cursor-auto absolute mt-1 top-12 border-2
+           z-10 ml-[-75px] font-modern-era-medium md:right-0
+            md:ml-0 md:mr-[-20px] w-96 bg-grey-150 md:bg-opacity-80 py-4 px-6
+             rounded-3xl shadow-lg ${isOpen ? "block" : "hidden"}`}
         >
           <div className="flex flex-col gap-4 mt-1">
             <GitcoinPassportLogoFull />
@@ -102,12 +103,18 @@ export function PassportWidget() {
                     </p>
                   </div>
                 </div>
-                <p className="text-left text-sm font-dm-mono">
+                <p className="text-left text-xs font-dm-mono">
                   Your donation impact is calculated based on your Passport
                   score. Scores higher than 15 will begin to be eligible for
                   matching, and your donation impact scales as your Passport
                   score increases. You can update your score by heading over to{" "}
-                  <a href={"https://passport.gitcoin.co"}>Passport</a>.
+                  <a
+                    href={"https://passport.gitcoin.co"}
+                    className={"underline"}
+                  >
+                    Passport
+                  </a>
+                  .
                 </p>
               </>
             ) : (
@@ -117,8 +124,14 @@ export function PassportWidget() {
                 </p>
                 <p className="text-left text-sm">
                   You either do not have a Passport or no stamps added to your
-                  Passport yet. Please head over to Passport to configure your
-                  score.
+                  Passport yet. Please head over to{" "}
+                  <a
+                    href={"https://passport.gitcoin.co"}
+                    className={"underline"}
+                  >
+                    Passport
+                  </a>{" "}
+                  to configure your score.
                 </p>
               </>
             )}

diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/RoundInCart.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/RoundInCart.tsx
@@ -11,7 +11,7 @@ import { useAccount } from "wagmi";
 import { useCartStorage } from "../../../store";
 import { Skeleton } from "@chakra-ui/react";
 import { BoltIcon } from "@heroicons/react/24/outline";
-import { passportColorTextClass, usePassport } from "../../api/passport";
+import { getClassForPassportColor, usePassport } from "../../api/passport";
 
 export function RoundInCart(
   props: React.ComponentProps<"div"> & {
@@ -61,10 +61,10 @@ export function RoundInCart(
   const estimateText = matchingEstimatesToText(matchingEstimates);
 
   const { passportColor } = usePassport({
-    address: address ?? "",
+    address,
   });
 
-  const passportTextClass = passportColorTextClass(passportColor ?? "gray");
+  const passportTextClass = getClassForPassportColor(passportColor ?? "gray");
 
   return (
     <div className="my-4 bg-grey-50 rounded-xl">

diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx
@@ -13,7 +13,7 @@ import { Button } from "common/src/styles";
 import { InformationCircleIcon } from "@heroicons/react/24/solid";
 import { BoltIcon } from "@heroicons/react/24/outline";
 
-import { passportColorTextClass, usePassport } from "../../api/passport";
+import { getClassForPassportColor, usePassport } from "../../api/passport";
 import useSWR from "swr";
 import { groupBy, uniqBy } from "lodash-es";
 import { getRoundById } from "../../api/round";
@@ -249,7 +249,7 @@ export function SummaryContainer() {
     address: address ?? "",
   });
 
-  const passportTextClass = passportColorTextClass(passportColor ?? "gray");
+  const passportTextClass = getClassForPassportColor(passportColor ?? "gray");
 
   const [totalDonationAcrossChainsInUSD, setTotalDonationAcrossChainsInUSD] =
     useState<number | undefined>();