2089 follow up (#2497)

* chore(app): add data dog logs and make toast closable * chore(app): move toast to hook to avoid double render
passportxyz · May 24, 2024 · f385008 · f385008
1 parent a6afb3c
commit f385008
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/app/components/DashboardScorePanel.tsx b/app/components/DashboardScorePanel.tsx
@@ -24,7 +24,6 @@ const ScoreRing = ({ className }: { className: string }) => {
   const { rawScore, passportSubmissionState } = React.useContext(ScorerContext);
   const [verificationState, _setUserVerificationState] = useAtom(mutableUserVerificationAtom);
   const [displayScore, setDisplayScore] = React.useState(0);
-  const toast = useToast();
 
   // This enables the animation on page load
   useEffect(() => {
@@ -35,23 +34,6 @@ const ScoreRing = ({ className }: { className: string }) => {
     }
   }, [rawScore, verificationState.loading]);
 
-  useEffect(() => {
-    if (verificationState.success === true) {
-      toast({
-        duration: 9000,
-        isClosable: true,
-        render: (result: any) => (
-          <DoneToastContent
-            title="Success!"
-            message="Your stamps are verified!"
-            icon="../assets/check-icon2.svg"
-            result={verificationState.success}
-          />
-        ),
-      });
-    }
-  }, [toast, verificationState.success]);
-
   return (
     <div className={`${className} grid place-items-center`}>
       <svg className="col-start-1 row-start-1" width="82" height="94" viewBox="0 0 81.40638795573723 94">

diff --git a/app/hooks/useOneClickVerification.tsx b/app/hooks/useOneClickVerification.tsx
@@ -9,18 +9,23 @@ import { CeramicContext } from "../context/ceramicContext";
 import { useWalletStore } from "../context/walletStore";
 import { useAtom } from "jotai";
 import { mutableUserVerificationAtom } from "../context/userState";
+import { datadogLogs } from "@datadog/browser-logs";
+import { useToast } from "@chakra-ui/react";
+import { DoneToastContent } from "../components/DoneToastContent";
 
 export const useOneClickVerification = () => {
   const [verificationState, setUserVerificationState] = useAtom(mutableUserVerificationAtom);
 
   const { did } = useDatastoreConnectionContext();
   const { passport, allPlatforms, handlePatchStamps } = useContext(CeramicContext);
   const address = useWalletStore((state) => state.address);
+  const toast = useToast();
 
   const initiateVerification = async function () {
     if (!did || !address) {
       return;
     }
+    datadogLogs.logger.info("Initiating one click verification", { address });
     setUserVerificationState({
       ...verificationState,
       loading: true,
@@ -82,13 +87,27 @@ export const useOneClickVerification = () => {
         success: true,
         possiblePlatforms: [],
       });
+      toast({
+        duration: 9000,
+        isClosable: true,
+        render: (result: any) => (
+          <DoneToastContent
+            title="Success!"
+            message="Your stamps are verified!"
+            icon="../assets/check-icon2.svg"
+            result={result}
+          />
+        ),
+      });
+      datadogLogs.logger.info("Successfully completed one click verification", { address });
     } catch (error) {
       setUserVerificationState({
         ...verificationState,
         loading: false,
         error: String(error),
         possiblePlatforms: [],
       });
+      datadogLogs.logger.error("Error when attempting on click verification", { error: String(error) });
     }
   };