feat(app): added details (json) button, fixed lint warnings (#2830)

app/__tests__/pages/Dashboard.test.tsx

@@ -205,3 +205,37 @@ it("reset passport button should open refresh modal when clicked", async () => {
     expect(screen.getByText("Refresh Expired Stamps")).toBeInTheDocument();
   });
 });
+
+describe("when the user has a passport", () => {
+  it("shows Passport JSON button", () => {
+    renderWithContext(
+      mockCeramicContext,
+      <Router>
+        <Dashboard />
+      </Router>
+    );
+
+    expect(screen.getByTestId("button-passport-json")).toBeInTheDocument();
+  });
+});
+
+describe("when the user clicks Passport JSON", () => {
+  it("it should display a modal", async () => {
+    renderWithContext(
+      mockCeramicContext,
+      <Router>
+        <Dashboard />
+      </Router>
+    );
+
+    const buttonPassportJson = screen.queryByTestId("button-passport-json");
+
+    fireEvent.click(buttonPassportJson!);
+
+    const verifyModal = await screen.findByRole("dialog");
+    const buttonDone = screen.getByTestId("button-passport-json-done");
+
+    expect(verifyModal).toBeInTheDocument();
+    expect(buttonDone).toBeInTheDocument();
+  });
+});

app/components/Confetti.tsx

@@ -37,7 +37,7 @@ const useWindowDimensions = () => {
     return () => {
       window.removeEventListener("resize", onResize);
     };
-  }, []);
+  }, [getDimensions]);
 
   return { windowDimensions };
 };

app/components/GenericPlatform.tsx

@@ -438,7 +438,15 @@ export const GenericPlatform = ({
     }
 
     return "Verify";
-  }, [isReverifying, isLoading, submitted, canSubmit, verifiedProviders.length, platformProviderIds.length]);
+  }, [
+    isReverifying,
+    isLoading,
+    submitted,
+    canSubmit,
+    verifiedProviders.length,
+    platformProviderIds.length,
+    hasExpiredProviders,
+  ]);
 
   return (
     <Drawer isOpen={isOpen} placement="right" size="sm" onClose={onClose}>

app/components/PassportDetailsButton.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useContext, useState } from "react";
+import { JsonOutputModal } from "./JsonOutputModal";
+import { CeramicContext } from "../context/ceramicContext";
+import { Spinner } from "./Spinner";
+
+const DownloadIcon = () => (
+  <svg width="18" height="23" viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10 1C10 0.447715 9.55228 0 9 0C8.44772 0 8 0.447715 8 1H10ZM8.29289 15.7071C8.68342 16.0976 9.31658 16.0976 9.70711 15.7071L16.0711 9.34315C16.4616 8.95262 16.4616 8.31946 16.0711 7.92893C15.6805 7.53841 15.0474 7.53841 14.6569 7.92893L9 13.5858L3.34315 7.92893C2.95262 7.53841 2.31946 7.53841 1.92893 7.92893C1.53841 8.31946 1.53841 8.95262 1.92893 9.34315L8.29289 15.7071ZM8 1V15H10V1H8Z"
+      fill="rgb(var(--color-foreground-2))"
+    />
+    <path d="M1 21.5H17" stroke="rgb(var(--color-foreground-2))" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+);
+
+export const PassportDetailsButton = ({ className }: { className?: string }) => {
+  const { passport } = useContext(CeramicContext);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onOpen = useCallback(() => {
+    setIsModalOpen(true);
+  }, []);
+
+  const onClose = useCallback(() => {
+    setIsModalOpen(false);
+  }, []);
+
+  const ready = Boolean(passport);
+
+  return (
+    <>
+      <button
+        className={`font-alt text-right flex items-center text-color-6 disabled:cursor-not-allowed ${className}`}
+        disabled={!ready}
+        onClick={onOpen}
+        data-testid="button-passport-json"
+      >
+        <span className="mr-1">Passport Details</span>
+        {ready ? <DownloadIcon /> : <Spinner color="rgb(var(--color-text-6))" />}
+      </button>
+      <JsonOutputModal
+        isOpen={isModalOpen}
+        onClose={onClose}
+        title={"Passport JSON"}
+        subheading={"You can find the Passport JSON data below"}
+        jsonOutput={passport}
+      />
+    </>
+  );
+};

app/components/Spinner.tsx

@@ -1,10 +1,10 @@
-export const Spinner = () => (
+export const Spinner = ({ color = "black" }: { color?: string }) => (
   <svg className="rotate" width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="9.5" cy="10" r="9" stroke="black" />
-    <circle cx="9.5" cy="10" r="6" stroke="black" />
+    <circle cx="9.5" cy="10" r="9" stroke={color} />
+    <circle cx="9.5" cy="10" r="6" stroke={color} />
     <path
       d="M1.74414 10.0003C1.74414 5.71535 5.21779 2.2417 9.50276 2.2417"
-      stroke="black"
+      stroke={color}
       strokeWidth="3"
       strokeLinecap="round"
     />

app/components/SyncToChainButton.tsx

@@ -61,7 +61,7 @@ export function SyncToChainButton({ onChainStatus, chain, className }: SyncToCha
     setUserHasApprovedLowScoreMint(true);
     setShowLowScoreAlert(false);
     onClick();
-  }, [onClick]);
+  }, [onClick, setUserHasApprovedLowScoreMint]);
 
   const loading =
     showLowScoreAlert || syncingToChain || onChainStatus === OnChainStatus.LOADING || scoreState !== "DONE";

app/components/WelcomeFooter.tsx

@@ -46,11 +46,11 @@ const WelcomeFooter = ({ displayPrivacyPolicy }: { displayPrivacyPolicy: boolean
     >
       <div className="flex items-start justify-start lg:justify-between flex-wrap">
         <span className="lg:ml-10 self-center">Available on</span>
-        {chainsForFooter.map(({ chainLink, icon }, idx) => {
+        {chainsForFooter.map(({ chainLink, icon, label }, idx) => {
           return (
             <div key={idx} className="flex m-1 md:m-2 lg:m-3">
               <a className="self-start" target="_blank" href={chainLink}>
-                <img src={icon} className="w-[20px] md:w-[35px] h-[20px] md:h-[35px]" />
+                <img src={icon} className="w-[20px] md:w-[35px] h-[20px] md:h-[35px]" alt={`${label} Icon`} />
               </a>
             </div>
           );

app/pages/Dashboard.tsx

@@ -35,6 +35,7 @@ import { useDatastoreConnectionContext } from "../context/datastoreConnectionCon
 import { useWeb3ModalError } from "@web3modal/ethers/react";
 import Script from "next/script";
 import { Confetti } from "../components/Confetti";
+import { PassportDetailsButton } from "../components/PassportDetailsButton";
 
 const success = "../../assets/check-icon2.svg";
 const fail = "../assets/verification-failed-bright.svg";
@@ -292,10 +293,8 @@ export default function Dashboard() {
                 isLoadingPassport == IsLoadingPassportState.FailedToConnect
               }
             />
-            <span className="col-start-1 col-end-4 font-heading text-3xl">Add Collected Stamps</span>
-            <span className="col-end-[-1] self-center whitespace-nowrap text-right font-alt text-3xl text-foreground-2">
-              {numVerifiedPlatforms}/{numPlatforms}
-            </span>
+            <span className="col-start-1 col-end-5 font-heading text-3xl">Collected Stamps</span>
+            <PassportDetailsButton className="col-end-[-1] col-start-1 md:col-start-[-3] justify-self-end self-center" />
             <DashboardValidStampsPanel className="col-span-full" />
             <ExpiredStampsPanel className="col-span-full" />
           </PageWidthGrid>

app/pages/_app.tsx

@@ -43,7 +43,7 @@ const RenderOnlyOnClient = ({ children }: { children: React.ReactNode }) => {
 };
 
 function App({ Component, pageProps }: AppProps) {
-  const intercom = useIntercom();
+  const { initialize } = useIntercom();
 
   useEffect(() => {
     TagManager.initialize({
@@ -56,9 +56,9 @@ function App({ Component, pageProps }: AppProps) {
 
   useEffect(() => {
     if (typeof window !== "undefined") {
-      intercom.initialize();
+      initialize();
     }
-  }, [intercom.initialize]);
+  }, [initialize]);
 
   if (typeof window !== "undefined") {
     // pull any search params