output error messages in UI

src/components/Publish/Submission/Feedback.module.css

@@ -67,6 +67,12 @@
   margin-bottom: 0;
 }
 
+.errorMessage {
+  margin-left: var(--spacer);
+  font-size: var(--font-size-small);
+  color: var(--brand-alert-red);
+}
+
 @keyframes loader {
   to {
     transform: rotate(360deg);

src/components/Publish/Submission/Feedback.tsx

@@ -20,6 +20,9 @@ export function Feedback(): ReactElement {
         )}
       </h3>
       <p className={styles.description}>{value.description}</p>
+      {value.errorMessage && (
+        <span className={styles.errorMessage}>{value.errorMessage}</span>
+      )}
     </li>
   ))
 

src/components/Publish/_types.ts

@@ -58,7 +58,7 @@ export interface PublishFeedback {
     description: string
     status: 'success' | 'error' | 'pending' | 'active' | string
     txCount: number
-    message?: string
+    errorMessage?: string
     txHash?: string
   }
 }

src/components/Publish/index.tsx

@@ -106,7 +106,7 @@ export default function PublishPage({
         '1': {
           ...prevState['1'],
           status: 'error',
-          message: error.message
+          errorMessage: error.message
         }
       }))
     }
@@ -165,7 +165,7 @@ export default function PublishPage({
         '2': {
           ...prevState['2'],
           status: 'error',
-          message: error.message
+          errorMessage: error.message
         }
       }))
     }
@@ -224,7 +224,7 @@ export default function PublishPage({
         '3': {
           ...prevState['3'],
           status: 'error',
-          message: error.message
+          errorMessage: error.message
         }
       }))
     }