From 5d741633a9d35ea2f1c69d31df80140a7a9b9f7f Mon Sep 17 00:00:00 2001
From: schultztimothy <schultz.timothy52@gmail.com>
Date: Wed, 22 May 2024 14:35:26 -0600
Subject: [PATCH 1/2] chore(app): add data dog logs and make toast closable

---
 app/components/DashboardScorePanel.tsx | 2 +-
 app/hooks/useOneClickVerification.tsx  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/DashboardScorePanel.tsx b/app/components/DashboardScorePanel.tsx
index d8d18c85a..22be7f5f2 100644
--- a/app/components/DashboardScorePanel.tsx
+++ b/app/components/DashboardScorePanel.tsx
@@ -45,7 +45,7 @@ const ScoreRing = ({ className }: { className: string }) => {
             title="Success!"
             message="Your stamps are verified!"
             icon="../assets/check-icon2.svg"
-            result={verificationState.success}
+            result={result}
           />
         ),
       });
diff --git a/app/hooks/useOneClickVerification.tsx b/app/hooks/useOneClickVerification.tsx
index b92181194..20909a58d 100644
--- a/app/hooks/useOneClickVerification.tsx
+++ b/app/hooks/useOneClickVerification.tsx
@@ -9,6 +9,7 @@ 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";
 
 export const useOneClickVerification = () => {
   const [verificationState, setUserVerificationState] = useAtom(mutableUserVerificationAtom);
@@ -21,6 +22,7 @@ export const useOneClickVerification = () => {
     if (!did || !address) {
       return;
     }
+    datadogLogs.logger.info("Initiating one click verification", { address });
     setUserVerificationState({
       ...verificationState,
       loading: true,
@@ -82,6 +84,7 @@ export const useOneClickVerification = () => {
         success: true,
         possiblePlatforms: [],
       });
+      datadogLogs.logger.info("Successfully completed one click verification", { address });
     } catch (error) {
       setUserVerificationState({
         ...verificationState,
@@ -89,6 +92,7 @@ export const useOneClickVerification = () => {
         error: String(error),
         possiblePlatforms: [],
       });
+      datadogLogs.logger.error("Error when attempting on click verification", { error: String(error) });
     }
   };
 

From 1dd5e62048e1b1af21b2bf1f77089851c3e33fb7 Mon Sep 17 00:00:00 2001
From: schultztimothy <schultz.timothy52@gmail.com>
Date: Wed, 22 May 2024 14:47:40 -0600
Subject: [PATCH 2/2] chore(app): move toast to hook to avoid double render

---
 app/components/DashboardScorePanel.tsx | 18 ------------------
 app/hooks/useOneClickVerification.tsx  | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/components/DashboardScorePanel.tsx b/app/components/DashboardScorePanel.tsx
index 22be7f5f2..bd6c1b957 100644
--- 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={result}
-          />
-        ),
-      });
-    }
-  }, [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
index 20909a58d..ca9287768 100644
--- a/app/hooks/useOneClickVerification.tsx
+++ b/app/hooks/useOneClickVerification.tsx
@@ -10,6 +10,8 @@ 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);
@@ -17,6 +19,7 @@ export const useOneClickVerification = () => {
   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) {
@@ -84,6 +87,18 @@ 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({