ux caretaking

fixes credential storage

packages/immu-patient/src/hooks/CredentialStorage.tsx

@@ -86,10 +86,11 @@ const CredentialProvider = ({ children }: { children: React.ReactNode }) => {
       const credentials = oldCredentials[type] || [];
       credentials.push(credential);
       localStorage.setItem(`credentials[${type}]`, JSON.stringify(credentials));
-      return {
-        ...oldCredentials,
-        type: credentials
+      const ret = {
+        ...oldCredentials
       };
+      ret[type] = credentials;
+      return ret;
     });
   }
 

packages/immu-patient/src/molecules/CredentialCard.tsx

@@ -1,23 +1,28 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Code, Flex, Heading, Text } from '@chakra-ui/react';
 import { VerifiableCredential } from '@immu/core';
 import React from 'react';
 
 const CredentialCard = ({ credential }: { credential: VerifiableCredential }) => {
   const bg = 'teal.200';
 
-  function getRelevantTypes(): string[] {
-    if (typeof credential === 'string') {
-      throw Error('noooo');
-    }
-    if (typeof credential.type === 'string') return [credential.type];
-    else {
-      return credential.type.filter((t) => t != 'VerifiableCredential');
-    }
-  }
+  if (typeof credential === 'string') throw Error('noooo');
+
+  const { fhirResource } = credential.credentialSubject;
+  const vm = {
+    types:
+      typeof credential.type === 'string'
+        ? [credential.type]
+        : credential.type.filter((t) => t != 'VerifiableCredential'),
+    issued: new Date(credential.issuanceDate).toLocaleDateString(),
+    occurred: new Date(fhirResource.resource.occurrenceDateTime).toISOString(),
+    resourceType: fhirResource.resource.resourceType,
+    issuer: credential.issuer.id
+  };
+
   return (
     <Flex
       direction="column"
-      justify="start"
+      justify="space-evenly"
       bg={bg}
       minHeight="3xs"
       minW="100%"
@@ -27,13 +32,28 @@ const CredentialCard = ({ credential }: { credential: VerifiableCredential }) =>
       border="1px"
       borderBottom="4px solid"
       borderColor="teal.500"
+      overflow="hidden"
       onClick={() => console.log(credential)}
     >
-      {getRelevantTypes().map((type: string) => (
+      {vm.types.map((type: string) => (
         <Text opacity={0.8} textAlign="center" bg="gray.200" py={4}>
           {type}
         </Text>
       ))}
+      <Box px={4}>
+        <Heading size="xs">{vm.resourceType} </Heading>
+        <Text fontSize="sm">
+          occurred on <b>{vm.occurred}</b>
+        </Text>
+        <Text fontSize="sm">
+          issued on: <b>{vm.issued}</b>{' '}
+        </Text>
+      </Box>
+      <Box align="center" w="100%" overflow="hidden" px={2}>
+        <Code colorScheme="whiteAlpha" variant="solid" fontSize="xs">
+          {vm.issuer}{' '}
+        </Code>
+      </Box>
     </Flex>
   );
 };

packages/immu-patient/src/molecules/CredentialOfferCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react';
+import { Box, Button, Code, Flex, Heading, Text } from '@chakra-ui/react';
 import { CredentialOffer, DID } from '@immu/core';
 import React from 'react';
 
@@ -32,6 +32,11 @@ const CredentialOfferCard = ({
       <Button colorScheme="teal" mx={2} onClick={() => acceptCredentialOffer(offer)}>
         accept
       </Button>
+      <Box align="center" w="100%" overflow="hidden" px={2}>
+        <Code colorScheme="whiteAlpha" variant="solid" fontSize="xs">
+          {issuer}
+        </Code>
+      </Box>
     </Flex>
   );
 };

packages/immu-patient/src/organisms/AcceptCredentialOffer.tsx

@@ -1,4 +1,14 @@
-import { Box, Button, FormControl, FormHelperText, FormLabel, Heading, Textarea, VStack } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Heading,
+  Textarea,
+  useToast,
+  VStack
+} from '@chakra-ui/react';
 import { useIdentity } from '@immu/frontend';
 import React, { useState } from 'react';
 import { CredentialOfferRequestAttrs, CredentialOffer, Issuer } from '@immu/core';
@@ -16,6 +26,7 @@ const AcceptCredentialOffer = () => {
   const [credentialOffer, setCredentialOffer] = useState<CredentialOfferRequestAttrs & { issuer: string }>();
 
   const { addCredential } = useCredentials();
+  const toast = useToast();
 
   const submitted = async (e: React.SyntheticEvent) => {
     e.preventDefault();
@@ -32,7 +43,7 @@ const AcceptCredentialOffer = () => {
       });
     }
 
-    //    target.credentialOffer.value = '';
+    target.credentialOffer.value = '';
   };
 
   const acceptCredentialOffer = async (acceptedOffer: CredentialOffer) => {
@@ -74,6 +85,14 @@ const AcceptCredentialOffer = () => {
     if (verified) {
       addCredential(verified.verifiableCredential);
     }
+    setCredentialOffer(undefined);
+    toast({
+      title: 'Credential accepted.',
+      description: 'the issuer has created a credential for you.',
+      status: 'success',
+      duration: 5000,
+      isClosable: true
+    });
   };
 
   return (

packages/immu-provider/src/pages/IndexPage.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { CredentialOfferRequestAttrs, CredentialRenderTypes, SignedCredentialOfferResponseAttrs } from '@immu/core';
 import crypto from 'crypto';
 import bs58 from 'bs58';
-import { Box, Heading } from '@chakra-ui/react';
+import { Box, Code, Heading, useClipboard, useToast } from '@chakra-ui/react';
 
 import QRCode from 'qrcode';
 
@@ -18,8 +18,10 @@ const IndexPage: React.FC = () => {
 
   const [, setFhirDocument] = useState<FHIRDocument>();
 
-  const [offerJwt, setOfferJwt] = useState<string>();
+  const [offerJwt, setOfferJwt] = useState<string>('');
   const [offerJwtQrCode, setOfferJwtQrCode] = useState<string>();
+  const toast = useToast();
+  const { hasCopied, onCopy } = useClipboard(offerJwt);
 
   const offerResponseReceived = async (
     response: SignedCredentialOfferResponseAttrs,
@@ -58,6 +60,13 @@ const IndexPage: React.FC = () => {
       );
 
       console.log(await receiveResponse.json());
+      toast({
+        title: 'Credential accepted.',
+        description: 'the subject has accepted your credential.',
+        status: 'success',
+        duration: 5000,
+        isClosable: true
+      });
     }
   };
   const onFhirCreated = async (_fhirDocument: FHIRDocument) => {
@@ -107,7 +116,7 @@ const IndexPage: React.FC = () => {
       <FhirImmunizationForm onFhirCreated={onFhirCreated} />
       {offerJwt && (
         <Box>
-          <img src={offerJwtQrCode} alt="qr code" />
+          <img src={offerJwtQrCode} alt="qr code" onClick={onCopy} />
           <code>{offerJwt}</code>
         </Box>
       )}

packages/immu-verifier/package.json

@@ -6,15 +6,16 @@
     "@chakra-ui/react": "^1.3.2",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.2",
     "@immu/core": "workspace:*",
     "@immu/frontend": "workspace:*",
     "bs58": "^4.0.1",
     "cross-fetch": "^3.0.6",
     "framer-motion": "^3.3.0",
-    "qrcode": "^1.4.4"
+    "qrcode": "^1.4.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-identicons": "^1.2.5",
+    "react-scripts": "4.0.2"
   },
   "devDependencies": {
     "@types/node": "^12.0.0",

packages/immu-verifier/src/App.tsx

@@ -1,12 +1,14 @@
 import { Container } from '@chakra-ui/react';
 import { IdentityProvider, Web3Provider } from '@immu/frontend';
+import Navbar from 'molecules/NavBar';
 import RequestPresentationPage from 'pages/RequestPresentationPage';
 import React from 'react';
 
 function App() {
   return (
     <Web3Provider>
       <IdentityProvider>
+        <Navbar />
         <Container>
           <RequestPresentationPage />
         </Container>

packages/immu-verifier/src/molecules/NavBar.tsx

@@ -0,0 +1,34 @@
+import { Box, Flex, Heading, Spacer, Text, Tooltip } from '@chakra-ui/react';
+import { useIdentity, useWeb3 } from '@immu/frontend';
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import Identicon from 'react-identicons';
+
+const Navbar = () => {
+  const { account, did } = useIdentity();
+
+  const { chainId } = useWeb3();
+
+  return (
+    <Flex bg="teal.900" minH="60px" color="teal.300" direction="row" p={2} align="center">
+      {did && (
+        <Tooltip hasArrow label={did.id} bg="black">
+          <Flex direction="row" align="center" gap="md">
+            <Box p="2">
+              <Identicon string={did.id} size={40} />
+            </Box>
+
+            <Heading size="md" color="white">
+              Verifier
+            </Heading>
+          </Flex>
+        </Tooltip>
+      )}
+
+      <Spacer />
+    </Flex>
+  );
+};
+
+export default Navbar;

packages/immu-verifier/src/pages/RequestPresentationPage.tsx

@@ -88,10 +88,11 @@ const RequestPresentationPage: React.FC = () => {
     const occurrenceTimes = fhirResources.map(fh => new Date(fh.resource.occurrenceDateTime));
     const msDiff = Math.abs(occurrenceTimes[0].getTime() - occurrenceTimes[1].getTime());
     const dayDiff = msDiff / 1000 / 60 / 60 / 24;
-    if (dayDiff < 28)
-      throw Error(`the immunization dates are too close (${dayDiff} days)`);
+    //if (dayDiff < 28)
+      //throw Error(`the immunization dates are too close (${dayDiff} days)`);
 
     console.log(occurrenceTimes);
+    return true;
   }
   const presentationReceived = async (data: PresentationResponseAttrs) => {
     const verifiedPresentation = await verifier!.verifyPresentation(data.presentationResponse);
@@ -139,7 +140,7 @@ const RequestPresentationPage: React.FC = () => {
   }, [did, resolver])
 
   return (
-   <Box>{ presentationRequestJwt &&
+   <Box mt={6}>{ presentationRequestJwt &&
     <Box>
       <Heading>present your credentials</Heading>
       <Text>We're accepting <code>{SMARTHEALTH_CARD_CRED_TYPE}</code> at the moment</Text>