feat(app): added ability to specify custom dashboard, added verax cus…

…tomization (passportxyz#1774)
mjone0gx · Oct 13, 2023 · ad7dd23 · ad7dd23
1 parent 7b9d758
commit ad7dd23
Show file tree

Hide file tree

Showing 23 changed files with 583 additions and 388 deletions.
diff --git a/app/__tests__/components/NetworkCard.test.tsx b/app/__tests__/components/NetworkCard.test.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { screen } from "@testing-library/react";
 
-import { NetworkCard, checkOnChainStatus, OnChainStatus } from "../../components/NetworkCard";
+import { NetworkCard } from "../../components/NetworkCard";
+import { checkOnChainStatus, OnChainStatus } from "../../hooks/useOnChainStatus";
 
 import {
   makeTestCeramicContext,

diff --git a/app/__tests__/components/SyncToChainButton.test.tsx b/app/__tests__/components/SyncToChainButton.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import axios from "axios";
 import { getButtonMsg, SyncToChainButton } from "../../components/SyncToChainButton";
-import { OnChainStatus } from "../../components/NetworkCard";
+import { OnChainStatus } from "../../hooks/useOnChainStatus";
 import { UserContextState } from "../../context/userContext";
 import {
   makeTestCeramicContext,

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, useMemo } from "react";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "custom";
 };
 
 // Children are centered and spaced out with gap-4.
@@ -11,9 +11,14 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 // e.g. <Button><Icon /><span>Click me</span></Button>
 export const Button = ({ variant, className, ...props }: ButtonProps) => {
   const variantClassName = useMemo(() => {
-    if (variant === "secondary")
+    if (variant === "custom") {
+      return "";
+    } else if (variant === "secondary") {
       return "text-foreground-2 bg-background border border-foreground-2 rounded-s hover:bg-foreground-3";
-    else return "text-color-4 rounded-s enabled:hover:text-color-1 bg-foreground-2 hover:bg-foreground-4";
+    } else {
+      // primary, default
+      return "text-color-4 rounded-s enabled:hover:text-color-1 bg-foreground-2 hover:bg-foreground-4";
+    }
   }, [variant]);
 
   return (

diff --git a/app/components/InitialWelcome.tsx b/app/components/InitialWelcome.tsx
@@ -32,7 +32,13 @@ const stepIndicator = (step: number) => {
   return <div className="ml-3 flex justify-center">{steps}</div>;
 };
 
-export const InitialWelcome = ({ onBoardFinished }: { onBoardFinished: () => void }) => {
+export const InitialWelcome = ({
+  onBoardFinished,
+  dashboardCustomizationKey,
+}: {
+  onBoardFinished: () => void;
+  dashboardCustomizationKey: string | null;
+}) => {
   const [step, setStep] = useState(0);
   const navigate = useNavigate();
 
@@ -48,7 +54,7 @@ export const InitialWelcome = ({ onBoardFinished }: { onBoardFinished: () => voi
               variant="secondary"
               onClick={() => {
                 setStep(0);
-                navigate("/dashboard");
+                navigate(`/dashboard${dashboardCustomizationKey ? `/${dashboardCustomizationKey}` : ""}`);
               }}
             >
               Skip For Now

diff --git a/app/components/NetworkCard.tsx b/app/components/NetworkCard.tsx
@@ -1,77 +1,12 @@
-import { Stamp } from "@gitcoin/passport-types";
-import { useContext, useEffect, useState } from "react";
-import { CeramicContext, AllProvidersState, ProviderState } from "../context/ceramicContext";
-import { OnChainContext, OnChainProviderType } from "../context/onChainContext";
-import { ScorerContext, ScoreStateType } from "../context/scorerContext";
+import React, { useContext } from "react";
+import { OnChainContext } from "../context/onChainContext";
 import { SyncToChainButton } from "./SyncToChainButton";
 import { Chain } from "../utils/chains";
-import { FeatureFlags } from "../config/feature_flags";
-
-export enum OnChainStatus {
-  NOT_MOVED,
-  MOVED_OUT_OF_DATE,
-  MOVED_UP_TO_DATE,
-}
-
-type ProviderWithStamp = ProviderState & { stamp: Stamp };
-
-export const checkOnChainStatus = (
-  allProvidersState: AllProvidersState,
-  onChainProviders: OnChainProviderType[],
-  rawScore: number,
-  scoreState: ScoreStateType,
-  onChainScore: number
-): OnChainStatus => {
-  if (onChainProviders.length === 0) return OnChainStatus.NOT_MOVED;
-
-  if (scoreState === "DONE" && rawScore !== onChainScore) return OnChainStatus.MOVED_OUT_OF_DATE;
-
-  const verifiedDbProviders: ProviderWithStamp[] = Object.values(allProvidersState).filter(
-    (provider): provider is ProviderWithStamp => provider.stamp !== undefined
-  );
-
-  const [equivalentProviders, differentProviders] = verifiedDbProviders.reduce(
-    ([eq, diff], provider): [ProviderWithStamp[], ProviderWithStamp[]] => {
-      const expirationDateSeconds = Math.floor(new Date(provider.stamp.credential.expirationDate).valueOf() / 1000);
-      const issuanceDateSeconds = Math.floor(new Date(provider.stamp.credential.issuanceDate).valueOf() / 1000);
-
-      const isEquivalent = onChainProviders.some(
-        (onChainProvider) =>
-          onChainProvider.providerName === provider.stamp.provider &&
-          onChainProvider.credentialHash === provider.stamp.credential.credentialSubject?.hash &&
-          Math.floor(onChainProvider.expirationDate.valueOf() / 1000) === expirationDateSeconds &&
-          Math.floor(onChainProvider.issuanceDate.valueOf() / 1000) === issuanceDateSeconds
-      );
-      return isEquivalent ? [[...eq, provider], diff] : [eq, [...diff, provider]];
-    },
-    [[], []] as [ProviderWithStamp[], ProviderWithStamp[]]
-  );
-
-  return equivalentProviders.length === onChainProviders.length && differentProviders.length === 0
-    ? OnChainStatus.MOVED_UP_TO_DATE
-    : OnChainStatus.MOVED_OUT_OF_DATE;
-};
+import { useOnChainStatus } from "../hooks/useOnChainStatus";
 
 export function NetworkCard({ chain }: { chain: Chain }) {
-  const { allProvidersState } = useContext(CeramicContext);
-  const { onChainProviders, onChainScores, onChainLastUpdates } = useContext(OnChainContext);
-  const { rawScore, scoreState } = useContext(ScorerContext);
-  const [onChainStatus, setOnChainStatus] = useState<OnChainStatus>(OnChainStatus.NOT_MOVED);
-
-  useEffect(() => {
-    const checkStatus = async () => {
-      const savedNetworkProviders = onChainProviders[chain.id] || [];
-      const stampStatus = checkOnChainStatus(
-        allProvidersState,
-        savedNetworkProviders,
-        rawScore,
-        scoreState,
-        onChainScores[chain.id]
-      );
-      setOnChainStatus(stampStatus);
-    };
-    checkStatus();
-  }, [allProvidersState, chain.id, onChainProviders, onChainScores, rawScore, scoreState]);
+  const onChainStatus = useOnChainStatus({ chain });
+  const { onChainLastUpdates } = useContext(OnChainContext);
 
   return (
     <div className="mb-6 rounded border border-foreground-6 bg-background-4 p-0 text-color-2">

diff --git a/app/components/RefreshMyStampsModal.tsx b/app/components/RefreshMyStampsModal.tsx
@@ -11,6 +11,7 @@ export type RefreshMyStampsModalProps = {
   steps: Step[];
   validPlatforms: ValidatedPlatform[] | undefined;
   resetStampsAndProgressState: () => void;
+  dashboardCustomizationKey: string | null;
 };
 
 export const RefreshMyStampsModal = ({
@@ -19,6 +20,7 @@ export const RefreshMyStampsModal = ({
   steps,
   validPlatforms,
   resetStampsAndProgressState,
+  dashboardCustomizationKey,
 }: RefreshMyStampsModalProps) => {
   return (
     <>
@@ -38,6 +40,7 @@ export const RefreshMyStampsModal = ({
                 onClose={onClose}
                 validPlatforms={validPlatforms}
                 resetStampsAndProgressState={resetStampsAndProgressState}
+                dashboardCustomizationKey={dashboardCustomizationKey}
               />
             </>
           ) : (

diff --git a/app/components/RefreshMyStampsModalContent.tsx b/app/components/RefreshMyStampsModalContent.tsx
@@ -31,6 +31,7 @@ export type RefreshMyStampsModalContentProps = {
   resetStampsAndProgressState: () => void;
   onClose: () => void;
   validPlatforms: ValidatedPlatform[];
+  dashboardCustomizationKey: string | null;
 };
 
 export type evmPlatformProvider = {
@@ -43,6 +44,7 @@ export const RefreshMyStampsModalContent = ({
   onClose,
   validPlatforms,
   resetStampsAndProgressState,
+  dashboardCustomizationKey,
 }: RefreshMyStampsModalContentProps): JSX.Element => {
   const { address, signer } = useContext(UserContext);
   const { handleAddStamps, handleDeleteStamps } = useContext(CeramicContext);
@@ -81,7 +83,7 @@ export const RefreshMyStampsModalContent = ({
       localStorage.setItem("successfulRefresh", "false");
     }
     setLoading(false);
-    navigate("/dashboard");
+    navigate(`/dashboard${dashboardCustomizationKey ? `/${dashboardCustomizationKey}` : ""}`);
     resetStampsAndProgressState();
   };
 
@@ -167,7 +169,12 @@ export const RefreshMyStampsModalContent = ({
               </div>
             )}
             <div className="mt-8 grid grid-cols-2 items-center justify-center gap-6">
-              <Button variant="secondary" onClick={() => navigate("/dashboard")}>
+              <Button
+                variant="secondary"
+                onClick={() =>
+                  navigate(`/dashboard${dashboardCustomizationKey ? `/${dashboardCustomizationKey}` : ""}`)
+                }
+              >
                 Cancel
               </Button>
               <LoadButton
@@ -194,7 +201,7 @@ export const RefreshMyStampsModalContent = ({
             <Button
               className="w-full"
               onClick={() => {
-                navigate("/dashboard");
+                navigate(`/dashboard${dashboardCustomizationKey ? `/${dashboardCustomizationKey}` : ""}`);
                 resetStampsAndProgressState();
               }}
             >

diff --git a/app/components/RefreshMyStampsModalContentCard.tsx b/app/components/RefreshMyStampsModalContentCard.tsx
@@ -53,7 +53,7 @@ export const RefreshMyStampsModalContentCard = ({
     <div className="border-t border-foreground-6 last:border-b">
       <Accordion allowToggle>
         <AccordionItem padding={0} isDisabled={disableExpand} border="none">
-          <div className="focus:shadow-none flex items-center gap-4 text-color-1">
+          <div className="flex items-center gap-4 text-color-1 focus:shadow-none">
             <div className="grow">
               <AccordionButton
                 paddingY="16px"