Merge pull request #87 from civicteam/TECH-292__show-credential-on-ui

TECH-292 - Show the credential when presented
civicteam · Sep 3, 2024 · cddbb39 · cddbb39
2 parents 4fb3b3c + d785ce4
commit cddbb39
Showing 1 changed file with 20 additions and 2 deletions.
diff --git 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,40 @@ 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 max-w-2xl  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 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
               principal={principal}
               gatekeeperNetwork={selectedGatekeeperNetwork.address}
@@ -104,6 +121,7 @@ function App() {
           </div>
         )}
       </div>
+
     </main>
   );
 }