Update UI based on websocket interactions

frontend/src/flows/Authentication/index.tsx

@@ -11,15 +11,28 @@ export const Authentication: React.FC<IAuthenticationProps> = ({
   serviceAPI,
 }) => {
   const [description, setDescription] = useState<string>('Lorem ipsum')
+  const [msg, setMsg] = useState<string | undefined>()
 
   const startAuth = async () => {
     const resp: {
       qr: string
       err: string
+      id: string | undefined
     } = await serviceAPI.sendRPC(RpcRoutes.authnInterxn, { description })
+    console.log('resp', resp)
+    if (resp.id) {
+      receiveUpdate(resp)
+    }
     return resp
   }
 
+  const receiveUpdate = async (resp: any) => {
+    const processedRes = await resp.originalMsg.followUps[1].processed
+    const responderDid = processedRes.participants.responder.didDocument.id
+    setMsg(responderDid)
+    console.log('processedRes', processedRes)
+  }
+
   return (
     <InteractionTemplate
       startText="Start Authentication Interaction"
@@ -31,6 +44,16 @@ export const Authentication: React.FC<IAuthenticationProps> = ({
         value={description}
         setValue={setDescription}
       />
+      <p>
+        {msg && (
+          <>
+            <br />
+            <b>Result: </b>
+            The user successfully authenticate using his DID:
+            <b> {msg}</b>
+          </>
+        )}
+      </p>
     </InteractionTemplate>
   )
 }

frontend/src/flows/CredentialOffer/index.tsx

@@ -16,6 +16,8 @@ export const CredentialOffer: React.FC<ICredentialOfferProps> = ({
   const [issuedCredentials, setIssued] = useState<Array<string>>([])
   const [invalidCredentials, setInvalid] = useState<Array<string>>([])
   const availableIssueCredentials = credTypes
+  const [msg, setMsg] = useState<string | undefined>()
+  const [err, setErr] = useState<string | undefined>()
 
   const handleSelect = (array: string[], item: string) => {
     return !array.includes(item)
@@ -27,20 +29,48 @@ export const CredentialOffer: React.FC<ICredentialOfferProps> = ({
     if (issuedCredentials.length === 0 && credTypes && credTypes.length > 0) {
       setIssued(credTypes.slice(0, 1))
     }
-  })
+  }, [issuedCredentials.length, credTypes])
 
   const startCredOffer = async () => {
-    const resp: { qr: string; err: string } = await serviceAPI.sendRPC(
-      RpcRoutes.offerCred,
-      {
-        types: Array.from(new Set(issuedCredentials)),
-        invalid: Array.from(new Set(invalidCredentials)),
-      },
-    )
+    const resp: {
+      qr: string
+      err: string
+      id: string
+    } = await serviceAPI.sendRPC(RpcRoutes.offerCred, {
+      types: Array.from(new Set(issuedCredentials)),
+      invalid: Array.from(new Set(invalidCredentials)),
+    })
     console.log(resp)
+    if (resp.id) {
+      receiveUpdate(resp)
+    }
+
     return resp
   }
 
+  const receiveUpdate = async (resp: any) => {
+    const processedRes = await resp.originalMsg.followUps[1].processed
+
+    const successfulCredentials = processedRes.credentials
+      .filter((c: any) => c.claim.id !== 'INVALID')
+      .map((c: any) => c.name)
+      .join(', ')
+    const failedCredentials = processedRes.credentials
+      .filter((c: any) => c.claim.id === 'INVALID')
+      .map((c: any) => c.name)
+      .join(', ')
+
+    setMsg(`${successfulCredentials}`)
+    if (failedCredentials.length > 0) setErr(`${failedCredentials}`)
+
+    receiveFinal(resp)
+  }
+
+  const receiveFinal = async (resp: any) => {
+    const processed = await resp.originalMsg.followUps[2].processed
+    console.log('The final update has been recived from server', processed)
+  }
+
   return (
     <InteractionTemplate
       startText="Start Credential Offer"
@@ -59,6 +89,24 @@ export const CredentialOffer: React.FC<ICredentialOfferProps> = ({
         onSelect={type => setInvalid(handleSelect(invalidCredentials, type))}
         selectedItems={invalidCredentials}
       />
+      <p>
+        {msg && (
+          <>
+            <b>Result: </b>
+            The user successfully got the Credentials:
+            <b> {msg}</b>
+          </>
+        )}
+      </p>
+      <p>
+        {err && (
+          <>
+            <b>Error: </b>
+            The user failed to get the Credentials:
+            <b> {err}</b>
+          </>
+        )}
+      </p>
     </InteractionTemplate>
   )
 }

frontend/src/flows/CredentialOfferCustom/index.tsx

@@ -43,7 +43,7 @@ export const CredentialOfferCustom = ({
 
   useEffect(() => {
     handleSetInitialInputs(credType)
-  }, [])
+  }, [credType])
 
   const [credentialsToBeIssued, setCredentialsToBeIssued] = useState<
     Array<ICredential>

frontend/src/flows/CredentialRequest/index.tsx

@@ -30,7 +30,7 @@ export const CredentialRequest: React.FC<ICredentialShareProps> = ({
     ) {
       setRequested(credTypes.slice(0, 1))
     }
-  })
+  }, [requestedCredentials.length, credTypes])
 
   const startCredRequest = async () => {
     const resp: { qr: string; err: string } = await serviceAPI.sendRPC(

frontend/src/flows/EstablishChannel/index.tsx

@@ -18,7 +18,7 @@ export const EstablishChannel = ({
   const [identifier, setIdentifier] = useState<string>('')
   const [qr, setQr] = useState<string>('')
   const [jwt, setJwt] = useState<string>('')
-  const [err, setErr] = useState<boolean>(false)
+  const [err] = useState<boolean>(false)
 
   const [encryptInput, setEncryptInput] = useState('')
   //const [decryptInput, setDecryptInput] = useState('')
@@ -31,7 +31,7 @@ export const EstablishChannel = ({
     window.location.search.split('&').forEach(p => {
       try {
         const [k, v] = p.split('=')
-        if (k == 'id') chId = v
+        if (k === 'id') chId = v
       } catch {}
     })
     if (!chId) {
@@ -97,7 +97,7 @@ export const EstablishChannel = ({
 
         <InteractionQR jwt={jwt ? `${jwtCommand} ${jwt}` : undefined} />
 
-        {!err && qr && <img src={qr} />}
+        {!err && qr && <img src={qr} alt="QR" />}
 
         {!!encryptOutput.length && (
           <>

service_agent/src/index.ts

@@ -213,9 +213,20 @@ export const init = async () => {
         { createInteractionCallbackURL, wrapJWT },
       ) => {
         const callbackURL = createInteractionCallbackURL(
-          async (jwt: string) => {
+          async (jwt: string, websocket: WebSocket) => {
             const interxn = await jolo.processJWT(jwt)
             console.log('auth request handled for', interxn.participants)
+
+            websocket.send(
+              JSON.stringify({
+                id: interxn.id,
+                status: 'update',
+                response: {
+                  id: interxn.id,
+                  participants: interxn.participants,
+                },
+              }),
+            )
           },
         )
         return wrapJWT(
@@ -288,7 +299,7 @@ export const init = async () => {
         const invalidTypes = req.invalid || []
 
         const callbackURL = createInteractionCallbackURL(
-          async (jwt: string) => {
+          async (jwt: string, websocket: WebSocket) => {
             const interxn = await jolo.processJWT(jwt)
             console.log('offerCred called back for', interxn.id)
 
@@ -322,6 +333,16 @@ export const init = async () => {
               'credentials issued',
               credentials.map((c) => last(c.type)),
             )
+            websocket.send(
+              JSON.stringify({
+                id: interxn.id,
+                status: 'update',
+                response: {
+                  id: interxn.id,
+                  credentials: credentials,
+                },
+              }),
+            )
             return interxn.createCredentialReceiveToken(credentials)
           },
         )
@@ -349,9 +370,20 @@ export const init = async () => {
           )
 
         const callbackURL = createInteractionCallbackURL(
-          async (jwt: string) => {
+          async (jwt: string, websocket: WebSocket) => {
             const interxn = await jolo.processJWT(jwt)
             console.log('credShareRequest called back for', interxn.id)
+
+            websocket.send(
+              JSON.stringify({
+                id: interxn.id,
+                status: 'update',
+                response: {
+                  id: interxn.id,
+                  state: interxn.flow.state,
+                },
+              }),
+            )
           },
         )