added state message formatting

src/components/ReplyModal.jsx

@@ -6,7 +6,6 @@ import useGeneralStore from '../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
 import Draggable from 'react-draggable';
 import useError from '../hooks/useError';
-import useSuccess from '../hooks/useSuccess';
 
 
 const ReplyModal = ({ isOpen, closeModal }) => {

src/components/views/Catalog.jsx

@@ -15,7 +15,6 @@ import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
-import useSuccess from '../../hooks/useSuccess';
 
 
 const Catalog = () => {

src/components/views/Pending.jsx

@@ -10,6 +10,7 @@ import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import SettingsModal from '../SettingsModal';
+import formatState from '../../utils/formatState';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
 import handleQuoteClick from '../../utils/handleQuoteClick';
@@ -166,11 +167,7 @@ const Pending = () => {
             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
           </span>
-          {comment ? (
-            <span className="reply-stat">Preview</span>
-          ) : (
-            <span className="reply-stat">Fetching IPFS...</span>
-          )}
+            <span className="reply-stat">{formatState(comment.state)}</span>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />

src/components/views/Thread.jsx

@@ -13,6 +13,7 @@ import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
+import formatState from '../../utils/formatState';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
 import handleAddressClick from '../../utils/handleAddressClick';
@@ -387,10 +388,10 @@ const Thread = () => {
                 <span className="reply-stat">No replies yet</span>
               )
             ) : (
-              <span className="reply-stat">Fetching IPNS...</span>
+              <span className="reply-stat">{formatState(comment.state)}</span>
             )
           ) : (
-            <span className="reply-stat">Fetching IPNS...</span>
+            <span className="reply-stat">{formatState(comment.state)}</span>
           )}
           <hr />
         </TopBar>

src/utils/formatState.js

@@ -0,0 +1,18 @@
+function formatState(str) {
+  return (
+    str
+      .replace(/-/g, " ")
+      .split(" ")
+      .map((word) => {
+        word = word.toLowerCase();
+        if (word === "ipfs" || word === "ipns") {
+          return word.toUpperCase();
+        } else {
+          return word.charAt(0).toUpperCase() + word.slice(1);
+        }
+      })
+      .join(" ") + "..."
+  );
+}
+
+export default formatState;