From 76514a17b1bd2851285b129d830afa79e9947a35 Mon Sep 17 00:00:00 2001
From: Cryptoryda <113293883+cryptoryda@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:33:23 +0000
Subject: [PATCH 1/2] update error message as a typescript

---
 .../app/-components/social-verify/google.tsx  | 93 ++++++++++++-------
 1 file changed, 60 insertions(+), 33 deletions(-)

diff --git a/Aztec-Passport/apps/www/src/app/-components/social-verify/google.tsx b/Aztec-Passport/apps/www/src/app/-components/social-verify/google.tsx
index 133c57e71..493d5f798 100644
--- a/Aztec-Passport/apps/www/src/app/-components/social-verify/google.tsx
+++ b/Aztec-Passport/apps/www/src/app/-components/social-verify/google.tsx
@@ -4,77 +4,104 @@ import { usePassport } from '~/lib/hooks';
 import { sleep, truncate } from '~/lib/utils';
 
 import GoogleLogo from 'public/assets/google.svg';
+import { toast } from 'sonner';
 
 import { StepButton } from '~/components/ui/step-button';
 
 import { Loader2Icon } from 'lucide-react';
-import { toast } from 'sonner';
 
-export const GoogleVerify = () => {
+export const GoogleVerify: React.FC = () => {
   const [status, setStatus] = useState<
     'idle' | 'loading' | 'complete' | 'error'
   >('idle');
   const { verifyGoogle } = usePassport();
 
+  /**
+   * Handles the Google account verification process
+   */
   const onVerify = async () => {
     try {
       setStatus('loading');
+
+      // Call verifyGoogle and process the result
       const tx = await verifyGoogle();
+      const txHash = tx?.txHash?.to0xString?.() ?? 'N/A';
+
+      // Notify success with transaction details
       toast.success('Google verification successful', {
-        description: `Transaction ID: ${truncate(tx.txHash.to0xString())}`,
+        description: `Transaction ID: ${truncate(txHash)}`,
       });
+
+      // Simulate transition delay for feedback
       await sleep(3000);
       setStatus('complete');
       await sleep(1000);
-    } catch (error) {
+    } catch (error: unknown) {
+      // Handle errors and provide user feedback
       setStatus('error');
-      console.error(error);
+
+      const errorMessage =
+        error instanceof Error ? error.message : 'An unexpected error occurred';
+      toast.error(`Verification failed: ${errorMessage}`);
+      console.error('Verification failed:', error);
+
       await sleep(3000);
     } finally {
       setStatus('idle');
     }
   };
 
+  // Reusable content for button states
+  const buttonContent = {
+    error: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        <div>❌</div> Error
+      </div>
+    ),
+    success: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        <div>✅</div> Verified
+      </div>
+    ),
+    initial: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        Verify
+      </div>
+    ),
+    loading: (
+      <div className='flex flex-row items-center justify-center gap-1'>
+        <Loader2Icon className='animate-spin' size={18} />
+        Verifying...
+      </div>
+    ),
+  };
+
   return (
-    <div className='flex flex-col gap-2 rounded-2xl border border-neutral-300 p-4 text-neutral-200'>
+    <div
+      className={`flex flex-col gap-2 rounded-2xl border p-4 text-neutral-200 ${
+        status === 'error' ? 'border-red-500' : 'border-neutral-300'
+      }`}
+    >
+      {/* Google Logo */}
       <img
-        alt='Google Logo'
+        alt='Google Account Verification Logo'
         className='my-2 h-[2rem] w-[2rem]'
         src={GoogleLogo}
+        aria-hidden='true'
       />
       <div className='text-xl font-medium'>Google</div>
       <p className='text-sm font-medium text-neutral-400'>
         Verify your Google account.
       </p>
+
+      {/* StepButton with dynamic state-based content */}
       <StepButton
         className='!dark mt-6 h-9 font-semibold !text-black'
         currentMode={status}
-        errorContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            <div>❌</div> Error
-          </div>
-        }
-        finalContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            <div>✅</div> Verified
-          </div>
-        }
-        initialContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            Verify
-          </div>
-        }
-        loadingContent={
-          <div className='flex flex-row items-center justify-center gap-1'>
-            <Loader2Icon className='animate-spin' size={18} />
-            Verifying...
-          </div>
-        }
-        variants={{
-          initial: { y: '-120%' },
-          animate: { y: '0%' },
-          exit: { y: '120%' },
-        }}
+        errorContent={buttonContent.error}
+        finalContent={buttonContent.success}
+        initialContent={buttonContent.initial}
+        loadingContent={buttonContent.loading}
         onClick={onVerify}
       />
     </div>

From e58b086e2282539c9269977acc52083baa449a3c Mon Sep 17 00:00:00 2001
From: Cryptoryda <113293883+cryptoryda@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:34:30 +0000
Subject: [PATCH 2/2] update github.tsx with EM

---
 .../app/-components/social-verify/github.tsx  | 88 ++++++++++++-------
 1 file changed, 57 insertions(+), 31 deletions(-)

diff --git a/Aztec-Passport/apps/www/src/app/-components/social-verify/github.tsx b/Aztec-Passport/apps/www/src/app/-components/social-verify/github.tsx
index 5a455301d..3247e7bfa 100644
--- a/Aztec-Passport/apps/www/src/app/-components/social-verify/github.tsx
+++ b/Aztec-Passport/apps/www/src/app/-components/social-verify/github.tsx
@@ -10,71 +10,97 @@ import { StepButton } from '~/components/ui/step-button';
 
 import { Loader2Icon } from 'lucide-react';
 
-export const GitHubVerify = () => {
+export const GitHubVerify: React.FC = () => {
   const [status, setStatus] = useState<
     'idle' | 'loading' | 'complete' | 'error'
   >('idle');
   const { verifyGithub } = usePassport();
 
+  /**
+   * Handles GitHub account verification process
+   */
   const onVerify = async () => {
     try {
       setStatus('loading');
+
+      // Simulate API call to verify GitHub account
       const tx = await verifyGithub();
+
+      // Notify user of success
       toast.success('GitHub verification successful', {
         description: `Transaction ID: ${truncate(tx.txHash.to0xString())}`,
       });
+
+      // Simulate transitions between states
       await sleep(3000);
       setStatus('complete');
       await sleep(1000);
-    } catch (error) {
+    } catch (error: unknown) {
       setStatus('error');
-      console.error(error);
+
+      // Handle errors with user-friendly messages
+      const errorMessage =
+        error instanceof Error ? error.message : 'An unexpected error occurred';
+      toast.error(`GitHub Verification Failed: ${errorMessage}`);
+      console.error('Verification Error:', error);
+
       await sleep(3000);
     } finally {
       setStatus('idle');
     }
   };
 
+  // Reusable content for button states
+  const buttonContent = {
+    error: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        <div>❌</div> Error
+      </div>
+    ),
+    success: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        <div>✅</div> Verified
+      </div>
+    ),
+    initial: (
+      <div className='flex flex-row items-center justify-center gap-2'>
+        Verify
+      </div>
+    ),
+    loading: (
+      <div className='flex flex-row items-center justify-center gap-1'>
+        <Loader2Icon className='animate-spin' size={18} />
+        Verifying...
+      </div>
+    ),
+  };
+
   return (
-    <div className='flex flex-col gap-2 rounded-2xl border border-neutral-300 p-4 text-neutral-200'>
+    <div
+      className={`flex flex-col gap-2 rounded-2xl border p-4 text-neutral-200 ${
+        status === 'error' ? 'border-red-500' : 'border-neutral-300'
+      }`}
+    >
+      {/* GitHub Logo */}
       <img
-        alt='Github Logo'
+        alt='GitHub Logo'
         className='my-2 h-[2rem] w-[2rem]'
         src={GitHubLogo}
+        aria-hidden='true'
       />
       <div className='text-xl font-medium'>GitHub</div>
       <p className='text-sm font-medium text-neutral-400'>
         Verify your GitHub account.
       </p>
+
+      {/* StepButton with dynamic state-based content */}
       <StepButton
         className='!dark mt-6 h-9 font-semibold !text-black'
         currentMode={status}
-        errorContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            <div>❌</div> Error
-          </div>
-        }
-        finalContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            <div>✅</div> Verified
-          </div>
-        }
-        initialContent={
-          <div className='flex flex-row items-center justify-center gap-2'>
-            Verify
-          </div>
-        }
-        loadingContent={
-          <div className='flex flex-row items-center justify-center gap-1'>
-            <Loader2Icon className='animate-spin' size={18} />
-            Verifying...
-          </div>
-        }
-        variants={{
-          initial: { y: '-120%' },
-          animate: { y: '0%' },
-          exit: { y: '120%' },
-        }}
+        errorContent={buttonContent.error}
+        finalContent={buttonContent.success}
+        initialContent={buttonContent.initial}
+        loadingContent={buttonContent.loading}
         onClick={onVerify}
       />
     </div>