From 989f154e4682df8748319b4a6d7cdf5bed5c3ce2 Mon Sep 17 00:00:00 2001
From: TYRONE AVNIT <tyronemichael@gmail.com>
Date: Tue, 3 Sep 2024 08:23:45 -0500
Subject: [PATCH 1/3] TECH-292 - Show the credential when presented

---
 src/civic_sign_frontend_demo/src/App.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx
index f59df11..104b88e 100644
--- a/src/civic_sign_frontend_demo/src/App.tsx
+++ b/src/civic_sign_frontend_demo/src/App.tsx
@@ -9,6 +9,7 @@ function App() {
   const [principal, setPrincipal] = useState<Principal | undefined>(undefined);
   const [urlCode, setUrlCode] = useState<string | null>(null);
   const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState<GatekeeperNetwork>(config.gatekeeperNetworks[0]);
+  const [credentialCheckResponse, setCredentialCheckResponse] = useState<CredentialCheckResponse | undefined>(undefined);
 
   // Assume we have an array of available gatekeeperNetworks
   const gatekeeperNetworks = useMemo(() => config.gatekeeperNetworks, []);
@@ -38,24 +39,36 @@ function App() {
   }, []);
 
   const handleCredentialCheck = useCallback(async (credential?: CredentialCheckResponse, error?: Error) => {
-    console.log('handleCredentialCheck', credential, error);
+    if (error) {
+      console.error('Error checking credential:', error);
+      return;
+    }
+    console.log('Credential check response:', credential);
+    setCredentialCheckResponse(credential);
   }, []);
 
   const handleGatekeeperNetworkChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedNetwork = gatekeeperNetworks.find((network) => network.name === event.target.value);
     console.log('Selected network:', selectedNetwork);
     setSelectedGatekeeperNetwork(selectedNetwork || gatekeeperNetworks[0]);
+    setCredentialCheckResponse(undefined);
   }, []);
 
   return (
     <main className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
-      <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
+      <div className="bg-white rounded-lg shadow-lg p-20  w-full">
         <img src="/logo2.svg" alt="DFINITY logo" className="mx-auto mb-8 w-32" />
         
         {principal ? (
           <div className="flex flex-col items-center justify-center">
             <h1 className="text-2xl font-bold text-center mb-4">Welcome to the ICP Relying Canister</h1>
             <p className="text-center mb-6">Logged in as <span className="font-mono bg-gray-100 p-1 rounded">{principal?.toText()}</span></p>
+            {credentialCheckResponse && (
+              <div className="mb-6 ">
+                <p className="text-sm text-gray-600">Response:</p>
+                <p className="font-mono text-sm bg-gray-100 p-8 rounded">{JSON.stringify(credentialCheckResponse.credential, undefined, 2)}</p>
+              </div>
+            )}
             <ICPCredentialCheckButton
               principal={principal}
               gatekeeperNetwork={selectedGatekeeperNetwork.address}
@@ -104,6 +117,7 @@ function App() {
           </div>
         )}
       </div>
+      
     </main>
   );
 }

From f5dd3078e0cf721e1d6ccfd61889ee11a00ea2b6 Mon Sep 17 00:00:00 2001
From: TYRONE AVNIT <tyronemichael@gmail.com>
Date: Tue, 3 Sep 2024 08:27:48 -0500
Subject: [PATCH 2/3] TECH-292 - Update UI

---
 src/civic_sign_frontend_demo/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx
index 104b88e..ffaafbf 100644
--- a/src/civic_sign_frontend_demo/src/App.tsx
+++ b/src/civic_sign_frontend_demo/src/App.tsx
@@ -56,7 +56,7 @@ function App() {
 
   return (
     <main className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
-      <div className="bg-white rounded-lg shadow-lg p-20  w-full">
+      <div className="bg-white rounded-lg shadow-lg p-20 max-w-2xl  w-full">
         <img src="/logo2.svg" alt="DFINITY logo" className="mx-auto mb-8 w-32" />
         
         {principal ? (

From d785ce402effaae3e326b649f88680cba4afd900 Mon Sep 17 00:00:00 2001
From: TYRONE AVNIT <tyronemichael@gmail.com>
Date: Tue, 3 Sep 2024 08:39:00 -0500
Subject: [PATCH 3/3] TECH-292 - Update to use pre instead of p tag

---
 src/civic_sign_frontend_demo/src/App.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx
index ffaafbf..fcb2b7b 100644
--- a/src/civic_sign_frontend_demo/src/App.tsx
+++ b/src/civic_sign_frontend_demo/src/App.tsx
@@ -64,9 +64,13 @@ function App() {
             <h1 className="text-2xl font-bold text-center mb-4">Welcome to the ICP Relying Canister</h1>
             <p className="text-center mb-6">Logged in as <span className="font-mono bg-gray-100 p-1 rounded">{principal?.toText()}</span></p>
             {credentialCheckResponse && (
-              <div className="mb-6 ">
-                <p className="text-sm text-gray-600">Response:</p>
-                <p className="font-mono text-sm bg-gray-100 p-8 rounded">{JSON.stringify(credentialCheckResponse.credential, undefined, 2)}</p>
+              <div className="mb-6 w-full">
+                <p className="text-sm text-gray-600 mb-2">Response:</p>
+                <div className="bg-gray-100 rounded-md p-4 overflow-x-auto">
+                  <pre className="text-sm">
+                    <code>{JSON.stringify(credentialCheckResponse.credential, null, 2)}</code>
+                  </pre>
+                </div>
               </div>
             )}
             <ICPCredentialCheckButton