add message decryption refresh button

src/components/@shared/Orbis/DirectMessages/Conversation.module.css

@@ -93,8 +93,6 @@
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2.5);
   font-size: var(--font-size-text);
   border-radius: 1rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
   word-break: break-word;
   flex-shrink: 1;
 }

src/components/@shared/Orbis/DirectMessages/Conversation.tsx

@@ -197,7 +197,14 @@ export default function DmConversation() {
                     } ${showTime(message.stream_id) && styles.showTime}`}
                   >
                     <div className={styles.chatBubble}>
-                      <DecryptedMessage content={message.content} />
+                      <DecryptedMessage
+                        content={message.content}
+                        position={
+                          account?.did === message.creator_details.did
+                            ? 'left'
+                            : 'right'
+                        }
+                      />
                     </div>
                     <div className={styles.time}>
                       <Time

src/components/@shared/Orbis/DirectMessages/DecryptedMessage.module.css

@@ -4,6 +4,28 @@
   animation: pulse 2s ease-in-out 0s infinite forwards;
 }
 
+.refresh {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.refreshIcon {
+  fill: var(--font-color-text);
+}
+
+.refresh.right {
+  right: -38px;
+}
+
+.refresh.left {
+  right: calc(100% + 16px);
+}
+
 @keyframes pulse {
   0% {
     opacity: 1;

src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx

@@ -1,20 +1,25 @@
 import React, { useState, useEffect } from 'react'
 import { useOrbis } from '@context/Orbis'
+import Refresh from '@images/refresh.svg'
 import styles from './DecryptedMessage.module.css'
 
 export default function DecryptedMessage({
-  content
+  content,
+  position = 'right'
 }: {
   content: IOrbisMessageContent & { decryptedMessage?: string }
+  position: 'left' | 'right'
 }) {
   const { orbis } = useOrbis()
   const [loading, setLoading] = useState(true)
   const [decrypted, setDecrypted] = useState(null)
+  const [encryptionError, setEncryptionError] = useState<boolean>(false)
 
-  useEffect(() => {
-    const decryptMessage = async () => {
-      setLoading(true)
+  const decryptMessage = async () => {
+    setLoading(true)
+    setEncryptionError(false)
 
+    try {
       if (content?.decryptedMessage) {
         setDecrypted(content?.decryptedMessage)
       } else {
@@ -22,19 +27,49 @@ export default function DecryptedMessage({
           conversation_id: content?.conversation_id,
           encryptedMessage: content?.encryptedMessage
         })
-        setDecrypted(res.result)
+        if (res.status === 200) {
+          setEncryptionError(false)
+          setDecrypted(res.result)
+        } else {
+          setEncryptionError(true)
+          setDecrypted('Decryption error - please try later')
+        }
       }
-      setLoading(false)
+    } catch (error) {
+      console.log(error)
+      setEncryptionError(true)
+      setDecrypted('Decryption error - please try later')
     }
 
-    if (content && orbis) {
-      decryptMessage()
-    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    if (content && orbis) decryptMessage()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [content, orbis])
 
+  if (loading) {
+    return <span className={styles.decrypting}>---</span>
+  }
+
   return (
-    <span className={loading ? styles.decrypting : ''}>
+    <div style={{ position: 'relative' }}>
       {!loading ? decrypted : '---'}
-    </span>
+      {encryptionError && (
+        <button
+          type="button"
+          className={`${styles.refresh} ${styles[position]}`}
+          onClick={decryptMessage}
+          title="Refresh"
+        >
+          <Refresh
+            role="img"
+            aria-label="Refresh"
+            className={styles.refreshIcon}
+          />
+        </button>
+      )}
+    </div>
   )
 }