feat: added code formater for selected view

package.json

@@ -33,6 +33,7 @@
     "lsat-js": "^2.0.6",
     "moment": "^2.29.4",
     "postprocessing": "^6.31.0",
+    "prism-react-renderer": "^2.4.0",
     "process": "^0.11.10",
     "r3f-perf": "6.7.0",
     "react": "^18.2.0",
@@ -48,6 +49,7 @@
     "react-player": "^2.11.2",
     "react-router-dom": "6.23.1",
     "react-spinners": "^0.13.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^10.0.4",
     "reactflow": "^11.9.2",
     "recharts": "^2.4.3",

src/components/App/SideBar/SelectedNodeView/Default/index.tsx

@@ -2,6 +2,8 @@ import Button from '@mui/material/Button'
 import clsx from 'clsx'
 import moment from 'moment'
 import { useEffect, useRef, useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
 import { Divider } from '~/components/common/Divider'
 import { Flex } from '~/components/common/Flex'
@@ -136,7 +138,10 @@ const NodeDetail = ({ label, value, hasAudio, isPlaying, togglePlay }: Props) =>
             <AudioButton onClick={togglePlay}>{isPlaying ? <AiPauseIcon /> : <AiPlayIcon />}</AudioButton>
           )}
         </Text>
-        <Text className="node-detail__value">{highlightSearchTerm(String(value), searchTerm)}</Text>
+        {false && <Text className="node-detail__value">{highlightSearchTerm(String(value), searchTerm)}</Text>}
+        <SyntaxHighlighter language="javascript" style={okaidia}>
+          {String(value)}
+        </SyntaxHighlighter>
       </StyledDetail>
       <StyledDivider />
     </>

src/utils/apiUrlFromSwarmHost/index.ts

@@ -22,7 +22,7 @@ export function apiUrlFromSwarmHost(): string | undefined {
       url = `https://${finalHost}`
     }
   } else if (origin.includes('localhost')) {
-    url = 'https://bitcoin.sphinx.chat'
+    url = 'https://boltwall.swarm38.sphinx.chat'
   }
 
   return `${url}/api`