add indentation to json

src/components/modals/SettingsModal.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
 import { deleteAccount, deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
+import stringify from "json-stringify-pretty-compact"
 import { StyledModal } from "../styled/modals/SettingsModal.styled";
 import useError from "../../hooks/useError";
 import useSuccess from "../../hooks/useSuccess";
@@ -74,18 +75,31 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     if (account) {
       const fetchAccountData = async () => {
         const data = await exportAccount();
-        setAccountJson(data);
+        try {
+          const parsedData = JSON.parse(data);
+          setAccountJson(stringify(parsedData));
+        } catch (error) {
+          console.error("Failed to pretty-print the JSON:", error);
+          setAccountJson(data);
+        }
       };
-    
       fetchAccountData();
     }
-  }, [account]);  
+  }, [account]);
+  
 
 
   const handleAccountJsonChange = (e) => {
-    setAccountJson(e.target.value);
+    try {
+      const parsedData = JSON.parse(e.target.value);
+      setAccountJson(stringify(parsedData));
+    } catch (error) {
+      console.error("Failed to pretty-print the JSON:", error);
+      setAccountJson(e.target.value);
+    }
   };
   
+  
 
   useEffect(() => {
     if (checkedENS && resolvedAddress && state === 'succeeded') {
@@ -502,7 +516,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               <textarea id="account-data-text" 
               value={accountJson} 
               ref={importRef} 
-              onChange={handleAccountJsonChange} />
+              onChange={handleAccountJsonChange}
+              autoComplete="off"
+              autoCorrect="off"
+              spellCheck="false" />
               <div className="account-buttons">
                 <button onClick={handleSaveAccount}>
                   Save