Extract message and refactor to use in Credential section.

Author: jessgusclark

src/app/DataVault/components/DownloadErrorMessage.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+interface DownloadErrorMessageInterface {
+ keyError: string
+}
+
+const DownloadErrorMessage: React.FC<DownloadErrorMessageInterface> = ({ keyError }) => (
+  <p className="alert error">This content is encrypted, and your wallet is unable to decrypt the key <em>{keyError}</em>.</p>
+)
+
+export default DownloadErrorMessage

src/app/DataVault/panels/CredentialDisplay.tsx

@@ -6,6 +6,7 @@ import CredentialIcon from '../../../assets/images/icons/credential.svg'
 import DecryptKey from '../components/DecryptKey'
 import DeleteDvContentButton from '../components/DeleteDvContentButton'
 import PresentCredential from '../components/PresentCredential'
+import DownloadErrorMessage from '../components/DownloadErrorMessage'
 
 interface CredentialDisplayInterface {
   credentials: DataVaultKey
@@ -16,15 +17,18 @@ interface CredentialDisplayInterface {
 
 const CredentialDisplay: React.FC<CredentialDisplayInterface> = ({ credentials, getKeyContent, deleteValue, createPresentation }) => {
   const [isGettingContent, setIsGettingContent] = useState<string[]>([])
+  const [isDownloadError, setIsDownloadError] = useState<null | string>(null)
   const handleGetContent = (key: string) => {
     setIsGettingContent([...isGettingContent, key])
+    setIsDownloadError(null)
     getKeyContent(key)
-      .catch((err: Error) => console.log(err.message))
+      .catch(() => setIsDownloadError(key))
       .finally(() => setIsGettingContent(isGettingContent.filter((k: string) => k !== key)))
   }
 
   return (
     <Panel title={<><img src={CredentialIcon} /> Credentials</>} className="display credentials">
+      {isDownloadError && <DownloadErrorMessage keyError={isDownloadError} />}
       <table>
         <thead>
           <tr>

src/app/DataVault/panels/DeclarativeDetailsDisplay.tsx

@@ -6,6 +6,7 @@ import { DataVaultContent, DataVaultKey } from '../../state/reducers/datavault'
 import EditValueModal from '../../../components/Modal/EditValueModal'
 import DeleteDvContentButton from '../components/DeleteDvContentButton'
 import DecryptKey from '../components/DecryptKey'
+import DownloadErrorMessage from '../components/DownloadErrorMessage'
 
 interface DeclarativeDetailsDisplayInterface {
   deleteValue: (key: string, id: string) => Promise<any>
@@ -68,7 +69,7 @@ const DeclarativeDetailsDisplay: React.FC<DeclarativeDetailsDisplayInterface> =
   return (
     <Panel title={<><img src={declarativeIcon} /> Declarative Details</>} className="display">
       {showDownloadMessage() && <p className="intro">Click on the download button to decrypt the content. Your wallet will request to decrypt each piece of content.</p>}
-      {isDownloadError && <p className="alert error">This content is encrypted, and your wallet is unable to decrypt the key <em>{isDownloadError}</em>.</p>}
+      {isDownloadError && <DownloadErrorMessage keyError={isDownloadError} />}
       <table>
         <thead>
           <tr>