.eslintrc.cjs

@@ -1,10 +1,10 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2022: true },
+  env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended'
+    'plugin:react-hooks/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -12,7 +12,7 @@ module.exports = {
   rules: {
     'react-refresh/only-export-components': [
       'warn',
-      { allowConstantExport: true }
-    ]
-  }
+      { allowConstantExport: true },
+    ],
+  },
 }

package.json

@@ -11,10 +11,14 @@
   },
   "dependencies": {
     "@getalby/lightning-tools": "5.0.3",
-    "@mdxeditor/editor": "^3.20.0",
-    "@nostr-dev-kit/ndk": "2.11.0",
-    "@nostr-dev-kit/ndk-cache-dexie": "2.5.9",
+    "@nostr-dev-kit/ndk": "2.10.0",
+    "@nostr-dev-kit/ndk-cache-dexie": "2.5.1",
     "@reduxjs/toolkit": "2.2.6",
+    "@tiptap/core": "2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-link": "2.9.1",
+    "@tiptap/react": "2.9.1",
+    "@tiptap/starter-kit": "2.9.1",
     "@types/react-helmet": "^6.1.11",
     "axios": "^1.7.9",
     "bech32": "2.0.0",
@@ -26,7 +30,6 @@
     "fslightbox-react": "1.7.6",
     "lodash": "4.17.21",
     "marked": "^14.1.3",
-    "marked-directive": "^1.0.7",
     "nostr-login": "1.5.2",
     "nostr-tools": "2.7.1",
     "papaparse": "5.4.1",
@@ -34,13 +37,13 @@
     "react": "^18.3.1",
     "react-countdown": "2.3.5",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.3.5",
     "react-helmet": "^6.1.0",
     "react-redux": "9.1.2",
     "react-router-dom": "^6.24.1",
     "react-toastify": "10.0.5",
     "react-window": "1.8.10",
     "swiper": "11.1.11",
+    "turndown": "^7.2.0",
     "uuid": "10.0.0",
     "webln": "0.3.2"
   },

src/App.tsx

@@ -1,12 +1,11 @@
 import { RouterProvider } from 'react-router-dom'
-import { useEffect, useMemo } from 'react'
-import { routerWithNdkContext as routerWithState } from 'routes'
+import { useEffect } from 'react'
+import { routerWithNdkContext } from 'routes'
 import { useNDKContext } from 'hooks'
 import './styles/styles.css'
 
 function App() {
   const ndkContext = useNDKContext()
-  const router = useMemo(() => routerWithState(ndkContext), [ndkContext])
 
   useEffect(() => {
     // Find the element with id 'root'
@@ -25,7 +24,7 @@ function App() {
     }
   }, [])
 
-  return <RouterProvider router={router} />
+  return <RouterProvider router={routerWithNdkContext(ndkContext)} />
 }
 
 export default App

src/assets/categories/categories.json

@@ -1,19 +1,27 @@
 [
-  { "name": "gameplay ", "sub": ["difficulty"] },
-  { "name": "input", "sub": ["key mapping", "macro"] },
   {
-    "name": "visual",
-    "sub": ["textures", "lighting", "character models", "environment models"]
+    "name": "audio",
+    "sub": [
+      { "name": "music", "sub": ["background", "ambient"] },
+      {
+        "name": "sound effects",
+        "sub": ["footsteps", "weapons"]
+      },
+      "voice"
+    ]
   },
-  { "name": "audio", "sub": ["sfx", "music", "voice"] },
-  { "name": "user interface", "sub": ["hud", "menu"] },
   {
-    "name": "quality of life",
-    "sub": ["bug fixes", "performance", "accessibility"]
+    "name": "graphical",
+    "sub": [
+      {
+        "name": "textures",
+        "sub": ["highres textures", "lowres textures"]
+      },
+      "models",
+      "shaders"
+    ]
   },
-  "total conversions",
-  "translation",
-  "multiplayer",
-  "clothing",
-  "mod manager"
+  { "name": "user interface", "sub": ["hud", "menus", "icons"] },
+  { "name": "gameplay", "sub": ["mechanics", "balance", "ai"] },
+  "bugfixes"
 ]

src/assets/games/Games_Other.csv

@@ -4,11 +4,4 @@ Minecraft,,https://image.nostr.build/b75b2d3a7855370230f2976567e2d5f913a567c57ac
 Vintage Story,,https://image.nostr.build/9efe683d339cc864032a99047ce26b2b5c19fab1ec4dcc6d4db96e2785c44eda.png
 Yandere Simulator,,https://image.nostr.build/54ba56b752bb9d411cbdc1d249fa0cb74c6062a305bcd0a70ecacb61b8d50030.png
 Genshin Impact,,https://image.nostr.build/999fccf93cf16a2e0dd8e6f00595b0ab3b5cc6beff9fe4a52f64f427cce9aedd.jpg
-Zenless Zone Zero,,https://image.nostr.build/4a9b9c2cbef619552d0c123f8794286f35710dc7ca1ca0010380a630883eb2ca.jpg
-Ananta,,https://image.nostr.build/09fb30fe2c22784079e4c0a848410e709ff359af09b3f96b651c7dc249a35cdd.jpg
-Bloodborne,,https://image.nostr.build/9d20c246b539e43f1bebcf602f996fa6eb45cf585f05cc19a1d9f86a53201485.jpg
-The Elder Scrolls: Skyblivion,,https://cdn.nostrcheck.me/3cea4806b1e1a9829d30d5cb8a78011d4271c6474eb31531ec91f28110fe3f40/87868c8134d0ed30e74b99750e292fc85ad708d0add24c7c9113b086cd0784c3.webp
-Stellar Blade,,https://image.nostr.build/4dd76ef8ff985d2afc8b3eba323f18de7165659c4e925b2f06ae8b130372d5ae.jpg
-Bayonetta 2,,https://image.nostr.build/916f0b1fd4938114867654d7625f8e817b7f710d7729c81c911e1011fa74afad.jpg
-Grand Theft Auto: Vice City,,https://image.nostr.build/6f364ebb635cc878b284a06e8131dcec5eb4b574eece7ab206df8a9af639ddf6.jpg
-Alan Wake 2,,https://image.nostr.build/9c185ddb6f3c3b1f56835be8d36200eda7de0f36888b02523f4d39ade235ffab.jpg
+Zenless Zone Zero,,https://image.nostr.build/4a9b9c2cbef619552d0c123f8794286f35710dc7ca1ca0010380a630883eb2ca.jpg

src/assets/games/Games_SteamManual.csv

@@ -1,10 +1,3 @@
 Game Name,16 by 9 image,Boxart image
 Marvel's Spider-Man 2,,https://image.nostr.build/b5ef5ef8bd99daab73148145b024a1e6177160fd287ce829f82ba46e821490b6.jpg
-S.T.A.L.K.E.R. 2: Heart of Chornobyl,,https://image.nostr.build/f5b61071bebcc8deccfd71362696fb708649b9c528bec1c6964262ded4157843.jpg
-FINAL FANTASY VII REBIRTH,,https://image.nostr.build/e16228ccfad19669f17f83517ac621142ad7129c82d0e5f346a3523643f98a28.jpg
-NINJA GAIDEN 2 Black,,https://image.nostr.build/867b5d4ae7580f138b9d7e3bc41c0184e59fc22a758d2dcd9e941f8adf6d6e6e.jpg
-Rise of the Ronin,,https://image.nostr.build/5eba5c6efed335e1e6c74e7af29790a9cc519dbccdd81122e84336848a7e7866.jpg
-NINJA GAIDEN 4,,https://image.nostr.build/2b49b1571ba90450f95a9eb306d2ef9f3ad632dc6282125cc1651d17da17a439.jpg
-Batman Arkham Asylum,,https://image.nostr.build/ba5c07be4747957380213ad86ab83b8a4cb6b8ef0123ebb9863318ed1de6e43e.jpg
-Kingdom Hearts,,https://image.nostr.build/883b71c52b5b498aac20218b52af471ba89afb5cbb7072dc403da7446ca04e39.jpg
-Kingdom Hearts II,,https://image.nostr.build/24b6002029e91e4ad99b56aca9f20b076feb594ae48b320ba9122254add6b57e.jpg
+S.T.A.L.K.E.R. 2: Heart of Chornobyl,,https://image.nostr.build/f5b61071bebcc8deccfd71362696fb708649b9c528bec1c6964262ded4157843.jpg

src/components/DownloadDetailsPopup.tsx

@@ -1,113 +0,0 @@
-import { createPortal } from 'react-dom'
-import { DownloadUrl } from '../types'
-
-export const DownloadDetailsPopup = ({
-  title,
-  url,
-  hash,
-  signatureKey,
-  malwareScanLink,
-  modVersion,
-  customNote,
-  mediaUrl,
-  handleClose
-}: DownloadUrl & {
-  handleClose: () => void
-}) => {
-  return createPortal(
-    <div className='popUpMain'>
-      <div className='ContainerMain'>
-        <div className='popUpMainCardWrapper'>
-          <div className='popUpMainCard'>
-            <div className='popUpMainCardTop'>
-              <div className='popUpMainCardTopInfo'>
-                <h3>{title || 'Authentication Details'}</h3>
-              </div>
-              <div className='popUpMainCardTopClose' onClick={handleClose}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='-96 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  style={{ zIndex: 1 }}
-                >
-                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
-                </svg>
-              </div>
-            </div>
-            <div className='pUMCB_Zaps'>
-              <div className='pUMCB_ZapsInside'>
-                <div className='IBMSMSMBSSDownloadsElementInsideAltTable'>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>Download URL</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{url}</p>
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>SHA-256 hash</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{hash}</p>
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>Signature from</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{signatureKey}</p>
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>Scan</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{malwareScanLink}</p>
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>Mod Version</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{modVersion}</p>
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                      <p>Note</p>
-                    </div>
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                      <p>{customNote}</p>
-                    </div>
-                  </div>
-                  {typeof mediaUrl !== 'undefined' && mediaUrl !== '' && (
-                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-                      <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                        <p>Media</p>
-                      </div>
-                      <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                        <img
-                          src={mediaUrl}
-                          className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img'
-                          alt=''
-                        />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

src/components/Filters/CategoryFilterPopup.tsx

@@ -8,7 +8,6 @@ import {
   flattenCategories
 } from 'utils'
 import { useLocalStorage } from 'hooks'
-import { useSearchParams } from 'react-router-dom'
 import styles from './CategoryFilterPopup.module.scss'
 import categoriesData from './../../assets/categories/categories.json'
 
@@ -27,31 +26,14 @@ export const CategoryFilterPopup = ({
   setHierarchies,
   handleClose
 }: CategoryFilterPopupProps) => {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const linkedHierarchy = searchParams.get('h')
-
   const [userHierarchies, setUserHierarchies] = useLocalStorage<
     (string | Category)[]
   >('user-hierarchies', [])
   const [filterCategories, setFilterCategories] = useState(categories)
   const [filterHierarchies, setFilterHierarchies] = useState(hierarchies)
   const handleApply = () => {
-    // Update selection with linked category if it exists
-    if (linkedHierarchy !== null && linkedHierarchy !== '') {
-      // Combine existing selection with the linked
-      setFilterHierarchies((prev) => {
-        prev.push(linkedHierarchy)
-        const newFilterHierarchies = Array.from(new Set([...prev]))
-        setHierarchies(newFilterHierarchies)
-        return newFilterHierarchies
-      })
-      // Clear hierarchy link in search params
-      searchParams.delete('h')
-      setSearchParams(searchParams)
-    } else {
-      setHierarchies(filterHierarchies)
-    }
     setCategories(filterCategories)
+    setHierarchies(filterHierarchies)
   }
   const [inputValue, setInputValue] = useState<string>('')
   const userHierarchiesMatching = useMemo(
@@ -154,7 +136,7 @@ export const CategoryFilterPopup = ({
                     Choose categories...
                   </label>
                   <p className='labelDescriptionMain'>
-                    Choose one or more pre-definied or custom categories to filter out mods with.
+                    This is description for an input and how to use search here
                   </p>
                 </div>
                 <input
@@ -173,7 +155,7 @@ export const CategoryFilterPopup = ({
                       >
                         Custom categories
                       </label>
-                        <p className='labelDescriptionMain'>Here&apos;s where your custom categories appear (You can add them in the above field. Example &gt; banana &gt; seed)</p>
+                      <p className='labelDescriptionMain'>Maybe</p>
                     </div>
                     <div
                       className='inputMain'
@@ -230,7 +212,7 @@ export const CategoryFilterPopup = ({
                     >
                       Categories
                     </label>
-                    <p className='labelDescriptionMain'>Here&apos;s where you select any of the pre-defined categories</p>
+                    <p className='labelDescriptionMain'>Maybe</p>
                   </div>
                   <div
                     className='inputMain'
@@ -308,11 +290,6 @@ export const CategoryFilterPopup = ({
                     className='btn btnMain btnMainPopup'
                     type='button'
                     onPointerDown={() => {
-                      // Clear the linked hierarchy
-                      searchParams.delete('h')
-                      setSearchParams(searchParams)
-
-                      // Clear current filters
                       setFilterCategories([])
                       setFilterHierarchies([])
                     }}
@@ -363,14 +340,11 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
   indentLevel = 0,
   handleRemove
 }) => {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const linkedHierarchy = searchParams.get('h')
   const name = typeof category === 'string' ? category : category.name
-  const hierarchy = path.join(' > ').toLowerCase()
-  const isMatching = hierarchy.includes(inputValue.toLowerCase())
-  const isLinked =
-    linkedHierarchy !== null &&
-    hierarchy === linkedHierarchy.replace(/:/g, ' > ')
+  const isMatching = path
+    .join(' > ')
+    .toLowerCase()
+    .includes(inputValue.toLowerCase())
   const [isSingleChecked, setIsSingleChecked] = useState<boolean>(false)
   const [isCombinationChecked, setIsCombinationChecked] =
     useState<boolean>(false)
@@ -405,22 +379,10 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
     const anyChildCombinationSelected = childPaths.some((childPath) =>
       selectedCombinations.includes(childPath)
     )
-    const anyChildCombinationLinked = childPaths.some(
-      (childPath) =>
-        linkedHierarchy !== null && linkedHierarchy.includes(childPath)
-    )
     setIsIndeterminate(
-      (anyChildCombinationSelected || anyChildCombinationLinked) &&
-        !selectedCombinations.includes(pathString)
+      anyChildCombinationSelected && !selectedCombinations.includes(pathString)
     )
-  }, [
-    category,
-    linkedHierarchy,
-    name,
-    path,
-    selectedCombinations,
-    selectedSingles
-  ])
+  }, [category, name, path, selectedCombinations, selectedSingles])
 
   const handleSingleChange = () => {
     setIsSingleChecked(!isSingleChecked)
@@ -428,14 +390,8 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
   }
 
   const handleCombinationChange = () => {
-    // If combination is linked, clicking it again we will delete it
-    if (isLinked) {
-      searchParams.delete('h')
-      setSearchParams(searchParams)
-    } else {
-      setIsCombinationChecked(!isCombinationChecked)
-      handleCombinationSelection(path, !isCombinationChecked)
-    }
+    setIsCombinationChecked(!isCombinationChecked)
+    handleCombinationSelection(path, !isCombinationChecked)
   }
 
   return (
@@ -465,7 +421,7 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
               className={`CheckboxMain  ${
                 isIndeterminate ? 'CheckboxIndeterminate' : ''
               }`}
-              checked={isCombinationChecked || isLinked}
+              checked={isCombinationChecked}
               onChange={handleCombinationChange}
             />
             <label

src/components/Filters/ModsFilter.tsx

@@ -48,14 +48,10 @@ export const ModFilter = React.memo(
         {/* moderation filter options */}
         <Dropdown label={filterOptions.moderated}>
           {Object.values(ModeratedFilter).map((item, index) => {
-            const isAdmin =
-              userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
-
-            if (item === ModeratedFilter.Only_Blocked && !isAdmin) {
-              return null
-            }
-
             if (item === ModeratedFilter.Unmoderated_Fully) {
+              const isAdmin =
+                userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
+
               const isOwnProfile =
                 author && userState.auth && userState.user?.pubkey === author
 

src/components/Inputs.tsx

@@ -0,0 +1,377 @@
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import { Editor, EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React, { useEffect } from 'react'
+import '../styles/styles.css'
+import '../styles/tiptap.scss'
+
+interface InputFieldProps {
+  label: string | React.ReactElement
+  description?: string
+  type?: 'text' | 'textarea' | 'richtext'
+  placeholder: string
+  name: string
+  inputMode?: 'url'
+  value: string
+  error?: string
+  onChange: (name: string, value: string) => void
+}
+
+export const InputField = React.memo(
+  ({
+    label,
+    description,
+    type = 'text',
+    placeholder,
+    name,
+    inputMode,
+    value,
+    error,
+    onChange
+  }: InputFieldProps) => {
+    const handleChange = (
+      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+      onChange(name, e.target.value)
+    }
+
+    return (
+      <div className='inputLabelWrapperMain'>
+        <label className='form-label labelMain'>{label}</label>
+        {description && <p className='labelDescriptionMain'>{description}</p>}
+        {type === 'textarea' ? (
+          <textarea
+            className='inputMain'
+            placeholder={placeholder}
+            name={name}
+            value={value}
+            onChange={handleChange}
+          ></textarea>
+        ) : type === 'richtext' ? (
+          <RichTextEditor
+            content={value}
+            updateContent={(content) => onChange(name, content)}
+          />
+        ) : (
+          <input
+            type={type}
+            className='inputMain'
+            placeholder={placeholder}
+            name={name}
+            inputMode={inputMode}
+            value={value}
+            onChange={handleChange}
+          />
+        )}
+        {error && <InputError message={error} />}
+      </div>
+    )
+  }
+)
+
+type InputErrorProps = {
+  message: string
+}
+
+export const InputError = ({ message }: InputErrorProps) => {
+  if (!message) return null
+
+  return (
+    <div className='errorMain'>
+      <div className='errorMainColor'></div>
+      <p className='errorMainText'>{message}</p>
+    </div>
+  )
+}
+
+interface CheckboxFieldProps {
+  label: string
+  name: string
+  isChecked: boolean
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  type?: 'default' | 'stylized'
+}
+
+export const CheckboxField = React.memo(
+  ({
+    label,
+    name,
+    isChecked,
+    handleChange,
+    type = 'default'
+  }: CheckboxFieldProps) => (
+    <div
+      className={`inputLabelWrapperMain inputLabelWrapperMainAlt${
+        type === 'stylized' ? ` inputLabelWrapperMainAltStylized` : ''
+      }`}
+    >
+      <label htmlFor={name} className='form-label labelMain'>
+        {label}
+      </label>
+      <input
+        id={name}
+        type='checkbox'
+        className='CheckboxMain'
+        name={name}
+        checked={isChecked}
+        onChange={handleChange}
+      />
+    </div>
+  )
+)
+
+type RichTextEditorProps = {
+  content: string
+  updateContent: (updatedContent: string) => void
+}
+
+const RichTextEditor = ({ content, updateContent }: RichTextEditorProps) => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link,
+      Image.configure({
+        HTMLAttributes: {
+          class: 'IBMSMSMBSSPostImg'
+        }
+      })
+    ],
+    onUpdate: ({ editor }) => {
+      // Update the state when the editor content changes
+      updateContent(editor.getHTML())
+    },
+    content
+  })
+
+  // Update editor content when the `content` prop changes
+  useEffect(() => {
+    if (editor && editor.getHTML() !== content) {
+      editor.commands.setContent(content, false)
+    }
+  }, [content, editor])
+
+  return (
+    <div className='inputMain'>
+      {editor && (
+        <>
+          <MenuBar editor={editor} />
+          <EditorContent editor={editor} />
+        </>
+      )}
+    </div>
+  )
+}
+
+type MenuBarProps = {
+  editor: Editor
+}
+
+export const MenuBar = ({ editor }: MenuBarProps) => {
+  const setLink = () => {
+    // Prompt the user to enter a URL
+    let url = prompt('URL')
+
+    // Check if the user provided a URL
+    if (url) {
+      // If the URL doesn't start with 'http://' or 'https://',
+      // prepend 'https://' to the URL
+      if (!/^(http|https):\/\//i.test(url)) {
+        url = `https://${url}`
+      }
+
+      return editor.chain().focus().setLink({ href: url }).run()
+    }
+
+    // If no URL was provided (e.g., the user cancels the prompt),
+    // return false, indicating that the link was not set.
+    return false
+  }
+
+  const unsetLink = () => editor.chain().focus().unsetLink().run()
+
+  const setImage = () => {
+    let url = prompt('URL')
+    if (url) {
+      if (!/^(http|https):\/\//i.test(url)) {
+        url = `https://${url}`
+      }
+      return editor.chain().focus().setImage({ src: url }).run()
+    }
+    return false
+  }
+
+  const buttons: MenuBarButtonProps[] = [
+    {
+      label: 'Bold',
+      disabled: !editor.can().chain().focus().toggleBold().run(),
+      isActive: editor.isActive('bold'),
+      onClick: () => editor.chain().focus().toggleBold().run()
+    },
+    {
+      label: 'Italic',
+      disabled: !editor.can().chain().focus().toggleItalic().run(),
+      isActive: editor.isActive('italic'),
+      onClick: () => editor.chain().focus().toggleItalic().run()
+    },
+    {
+      label: 'Strike',
+      disabled: !editor.can().chain().focus().toggleStrike().run(),
+      isActive: editor.isActive('strike'),
+      onClick: () => editor.chain().focus().toggleStrike().run()
+    },
+    {
+      label: 'Clear marks',
+      onClick: () => editor.chain().focus().unsetAllMarks().run()
+    },
+    {
+      label: 'Clear nodes',
+      onClick: () => editor.chain().focus().clearNodes().run()
+    },
+    {
+      label: 'Paragraph',
+      isActive: editor.isActive('paragraph'),
+      onClick: () => editor.chain().focus().setParagraph().run()
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...[1, 2, 3, 4, 5, 6].map((level: any) => ({
+      label: `H${level}`,
+      isActive: editor.isActive('heading', { level }),
+      onClick: () => editor.chain().focus().toggleHeading({ level }).run()
+    })),
+    {
+      label: 'Bullet list',
+      isActive: editor.isActive('bulletList'),
+      onClick: () => editor.chain().focus().toggleBulletList().run()
+    },
+    {
+      label: 'Ordered list',
+      isActive: editor.isActive('orderedList'),
+      onClick: () => editor.chain().focus().toggleOrderedList().run()
+    },
+    {
+      label: 'Code block',
+      isActive: editor.isActive('codeBlock'),
+      onClick: () => editor.chain().focus().toggleCodeBlock().run()
+    },
+    {
+      label: 'Blockquote',
+      isActive: editor.isActive('blockquote'),
+      onClick: () => editor.chain().focus().toggleBlockquote().run()
+    },
+    {
+      label: 'Link',
+      isActive: editor.isActive('link'),
+      onClick: editor.isActive('link') ? unsetLink : setLink
+    },
+    {
+      label: 'Image',
+      isActive: editor.isActive('image'),
+      onClick: setImage
+    },
+    {
+      label: 'Horizontal rule',
+      onClick: () => editor.chain().focus().setHorizontalRule().run()
+    },
+    {
+      label: 'Hard break',
+      onClick: () => editor.chain().focus().setHardBreak().run()
+    },
+    {
+      label: 'Undo',
+      disabled: !editor.can().chain().focus().undo().run(),
+      onClick: () => editor.chain().focus().undo().run()
+    },
+    {
+      label: 'Redo',
+      disabled: !editor.can().chain().focus().redo().run(),
+      onClick: () => editor.chain().focus().redo().run()
+    }
+  ]
+
+  return (
+    <div className='control-group'>
+      <div className='button-group'>
+        {buttons.map(({ label, disabled, isActive, onClick }) => (
+          <MenuBarButton
+            key={label}
+            label={label}
+            disabled={disabled}
+            isActive={isActive}
+            onClick={onClick}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface MenuBarButtonProps {
+  label: string
+  isActive?: boolean
+  disabled?: boolean
+  onClick: () => boolean
+}
+
+const MenuBarButton = ({
+  label,
+  isActive = false,
+  disabled = false,
+  onClick
+}: MenuBarButtonProps) => (
+  <button
+    onClick={onClick}
+    disabled={disabled}
+    className={`btn btnMain btnMainTipTap ${isActive ? 'is-active' : ''}`}
+    type='button'
+  >
+    {label}
+  </button>
+)
+
+interface InputFieldUncontrolledProps extends React.ComponentProps<'input'> {
+  label: string
+  description?: string
+  error?: string
+}
+/**
+ * Uncontrolled input component with design classes, label, description and error support
+ *
+ * Extends {@link React.ComponentProps<'input'> React.ComponentProps<'input'>}
+ * @param label
+ * @param description
+ * @param error
+ *
+ * @see {@link React.ComponentProps<'input'>}
+ */
+export const InputFieldUncontrolled = ({
+  label,
+  description,
+  error,
+  ...rest
+}: InputFieldUncontrolledProps) => (
+  <div className='inputLabelWrapperMain'>
+    <label htmlFor={rest.id} className='form-label labelMain'>
+      {label}
+    </label>
+    {description && <p className='labelDescriptionMain'>{description}</p>}
+    <input className='inputMain' {...rest} />
+    {error && <InputError message={error} />}
+  </div>
+)
+
+interface CheckboxFieldUncontrolledProps extends React.ComponentProps<'input'> {
+  label: string
+}
+
+export const CheckboxFieldUncontrolled = ({
+  label,
+  ...rest
+}: CheckboxFieldUncontrolledProps) => (
+  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+    <label htmlFor={rest.id} className='form-label labelMain'>
+      {label}
+    </label>
+    <input type='checkbox' className='CheckboxMain' {...rest} />
+  </div>
+)

src/components/Inputs/Error.tsx

@@ -1,14 +0,0 @@
-type InputErrorProps = {
-  message: string
-}
-
-export const InputError = ({ message }: InputErrorProps) => {
-  if (!message) return null
-
-  return (
-    <div className='errorMain'>
-      <div className='errorMainColor'></div>
-      <p className='errorMainText'>{message}</p>
-    </div>
-  )
-}

src/components/Inputs/ImageUpload.module.scss

@@ -1,11 +0,0 @@
-.spinner {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  -webkit-backdrop-filter: blur(1px);
-  backdrop-filter: blur(1px);
-  pointer-events: none;
-}

src/components/Inputs/ImageUpload.tsx

@@ -1,126 +0,0 @@
-import { useDropzone } from 'react-dropzone'
-import React, { useCallback, useMemo, useState } from 'react'
-import {
-  MediaOption,
-  MEDIA_OPTIONS,
-  ImageController,
-  MEDIA_DROPZONE_OPTIONS
-} from '../../controllers'
-import { errorFeedback } from '../../types'
-import { MediaInputPopover } from './MediaInputPopover'
-import { Spinner } from 'components/Spinner'
-import styles from './ImageUpload.module.scss'
-
-export interface ImageUploadProps {
-  multiple?: boolean | undefined
-  onChange: (values: string[]) => void
-}
-export const ImageUpload = React.memo(
-  ({ multiple = false, onChange }: ImageUploadProps) => {
-    const [isLoading, setIsLoading] = useState(false)
-    const [mediaOption, setMediaOption] = useState<MediaOption>(
-      MEDIA_OPTIONS[0]
-    )
-    const handleOptionChange = useCallback(
-      (mo: MediaOption) => () => {
-        setMediaOption(mo)
-      },
-      []
-    )
-    const handleUpload = useCallback(
-      async (acceptedFiles: File[]) => {
-        if (acceptedFiles.length) {
-          try {
-            setIsLoading(true)
-            const imageController = new ImageController(mediaOption)
-            const urls: string[] = []
-            for (let i = 0; i < acceptedFiles.length; i++) {
-              const file = acceptedFiles[i]
-              urls.push(await imageController.post(file))
-            }
-            onChange(urls)
-          } catch (error) {
-            errorFeedback(error)
-          } finally {
-            setIsLoading(false)
-          }
-        }
-      },
-      [mediaOption, onChange]
-    )
-    const {
-      getRootProps,
-      getInputProps,
-      isDragActive,
-      acceptedFiles,
-      isFileDialogActive,
-      isDragAccept,
-      isDragReject,
-      fileRejections
-    } = useDropzone({
-      ...MEDIA_DROPZONE_OPTIONS,
-      onDrop: handleUpload,
-      multiple: multiple
-    })
-
-    const dropzoneLabel = useMemo(
-      () =>
-        isFileDialogActive
-          ? 'Select files in dialog'
-          : isDragActive
-          ? isDragAccept
-            ? 'Drop the files here...'
-            : isDragReject
-            ? 'Drop the files here (one more more unsupported types)...'
-            : 'Drop the files here...'
-          : 'Click or drag files here',
-      [isDragAccept, isDragActive, isDragReject, isFileDialogActive]
-    )
-
-    return (
-      <div aria-label='upload featuredImageUrl' className='uploadBoxMain'>
-        <MediaInputPopover
-          acceptedFiles={acceptedFiles}
-          fileRejections={fileRejections}
-        />
-        <div className='uploadBoxMainInside' {...getRootProps()} tabIndex={-1}>
-          <input id='featuredImageUrl-upload' {...getInputProps()} />
-          <span>{dropzoneLabel}</span>
-          <div
-            className='FiltersMainElement'
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className='dropdown dropdownMain'>
-              <button
-                className='btn dropdown-toggle btnMain btnMainDropdown'
-                aria-expanded='false'
-                data-bs-toggle='dropdown'
-                type='button'
-              >
-                Image Host: {mediaOption.name}
-              </button>
-              <div className='dropdown-menu dropdownMainMenu'>
-                {MEDIA_OPTIONS.map((mo) => {
-                  return (
-                    <div
-                      key={mo.host}
-                      onClick={handleOptionChange(mo)}
-                      className='dropdown-item dropdownMainMenuItem'
-                    >
-                      {mo.name}
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-          {isLoading && (
-            <div className={styles.spinner}>
-              <Spinner />
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-)

src/components/Inputs/MediaInputError.module.scss

@@ -1,14 +0,0 @@
-.accordion-button::after {
-  position: absolute;
-  right: 0.75rem;
-  color: rgba(255, 255, 255, 0.5) !important;
-
-  top: unset !important;
-  bottom: unset !important;
-}
-.accordion-body > * {
-  margin-top: 10px;
-}
-.accordion-item + .accordion-item {
-  margin-top: 10px;
-}

src/components/Inputs/MediaInputError.tsx

@@ -1,64 +0,0 @@
-import { FileError } from 'react-dropzone'
-import styles from './MediaInputError.module.scss'
-
-type MediaInputErrorProps = {
-  rootId: string
-  index: number
-  message: string
-  errors?: readonly FileError[] | undefined
-}
-
-export const MediaInputError = ({
-  rootId,
-  index,
-  message,
-  errors
-}: MediaInputErrorProps) => {
-  if (!message) return null
-
-  return (
-    <div className={['accordion-item', styles['accordion-item']].join(' ')}>
-      <h2 className='accordion-header' role='tab'>
-        <button
-          className={[
-            'accordion-button collapsed',
-            styles['accordion-button']
-          ].join(' ')}
-          type='button'
-          data-bs-toggle='collapse'
-          data-bs-target={`#${rootId} .item-${index}`}
-          aria-expanded='false'
-          aria-controls={`${rootId} .item-${index}`}
-        >
-          <div className='errorMain'>
-            <div className='errorMainColor'></div>
-            <p className='errorMainText'>{message}</p>
-          </div>
-        </button>
-      </h2>
-      {errors && (
-        <div
-          className={`accordion-collapse collapse item-${index}`}
-          role='tabpanel'
-          data-bs-parent={`#${rootId}`}
-        >
-          <div
-            className={['accordion-body', styles['accordion-body']].join(' ')}
-          >
-            {errors.map((e) => {
-              return typeof e === 'string' ? (
-                <div className='errorMain' key={e}>
-                  {e}
-                </div>
-              ) : (
-                <div className='errorMain' key={e.code}>
-                  {e.message}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

src/components/Inputs/MediaInputPopover.module.scss

@@ -1,45 +0,0 @@
-.popover {
-  border-radius: 15px;
-  box-shadow: 0 0 16px 0px rgb(0 0 0 / 15%);
-  background: #232323;
-  z-index: 2;
-}
-.content {
-  max-height: 500px;
-  overflow-y: auto;
-  padding: 25px;
-  > *:not(:first-child) {
-    margin-top: 10px;
-  }
-}
-.trigger {
-  position: absolute;
-  top: 25px;
-  right: 25px;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.mediaInputError {
-  --bs-accordion-color: unset;
-  --bs-accordion-bg: unset;
-  --bs-accordion-transition: unset;
-  --bs-accordion-border-color: unset;
-  --bs-accordion-border-width: unset;
-  --bs-accordion-border-radius: unset;
-  --bs-accordion-inner-border-radius: unset;
-  --bs-accordion-btn-padding-x: unset;
-  --bs-accordion-btn-padding-y: unset;
-  --bs-accordion-btn-color: unset;
-  --bs-accordion-btn-bg: unset;
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='gray'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-icon-width: 1.25rem;
-  --bs-accordion-btn-icon-transform: rotate(-180deg);
-  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='gray'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: unset;
-  --bs-accordion-btn-focus-box-shadow: unset;
-  --bs-accordion-body-padding-x: unset;
-  --bs-accordion-body-padding-y: unset;
-  --bs-accordion-active-color: unset;
-  --bs-accordion-active-bg: unset;
-}

src/components/Inputs/MediaInputPopover.tsx

@@ -1,108 +0,0 @@
-import * as Popover from '@radix-ui/react-popover'
-import { v4 as uuidv4 } from 'uuid'
-import { useMemo } from 'react'
-import { FileRejection, FileWithPath } from 'react-dropzone'
-import { MediaInputError } from './MediaInputError'
-import { InputSuccess } from './Success'
-import styles from './MediaInputPopover.module.scss'
-
-interface MediaInputPopoverProps {
-  acceptedFiles: readonly FileWithPath[]
-  fileRejections: readonly FileRejection[]
-}
-
-export const MediaInputPopover = ({
-  acceptedFiles,
-  fileRejections
-}: MediaInputPopoverProps) => {
-  const uuid = useMemo(() => uuidv4(), [])
-  const acceptedFileItems = useMemo(
-    () =>
-      acceptedFiles.map((file) => (
-        <InputSuccess
-          key={file.path}
-          message={`${file.path} - ${file.size} bytes`}
-        />
-      )),
-    [acceptedFiles]
-  )
-  const fileRejectionItems = useMemo(() => {
-    const id = `errors-${uuid}`
-    return (
-      <div
-        className={`accordion accordion-flush ${styles.mediaInputError}`}
-        role='tablist'
-        id={id}
-      >
-        {fileRejections.map(({ file, errors }, index) => (
-          <MediaInputError
-            rootId={id}
-            index={index}
-            key={file.path}
-            message={`${file.path} - ${file.size} bytes`}
-            errors={errors}
-          />
-        ))}
-      </div>
-    )
-  }, [fileRejections, uuid])
-
-  if (acceptedFiles.length === 0 && fileRejections.length === 0) return null
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <div className={styles.trigger}>
-          {acceptedFiles.length > 0 ? (
-            <svg
-              width='1.5em'
-              height='1.5em'
-              fill='currentColor'
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 576 512'
-            >
-              <path d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM288 368a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm211.3-43.3c-6.2-6.2-16.4-6.2-22.6 0L416 385.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l40 40c6.2 6.2 16.4 6.2 22.6 0l72-72c6.2-6.2 6.2-16.4 0-22.6z' />
-            </svg>
-          ) : (
-            <svg
-              width='1.5em'
-              height='1.5em'
-              fill='tomato'
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 576 512'
-            >
-              <path d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm0-192c-8.8 0-16 7.2-16 16l0 80c0 8.8 7.2 16 16 16s16-7.2 16-16l0-80c0-8.8-7.2-16-16-16z' />
-            </svg>
-          )}
-        </div>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content className={styles.popover} sideOffset={5}>
-          <div className='popUpMainCardTop'>
-            <div className='popUpMainCardTopInfo'>
-              <h3>Selected files</h3>
-            </div>
-            <Popover.Close asChild aria-label='Close'>
-              <div className='popUpMainCardTopClose'>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='-96 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  style={{ zIndex: 1 }}
-                >
-                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
-                </svg>
-              </div>
-            </Popover.Close>
-          </div>
-          <div className={styles.content}>
-            {acceptedFileItems}
-            {fileRejectionItems}
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}

src/components/Inputs/Success.tsx

@@ -1,14 +0,0 @@
-type InputSuccessProps = {
-  message: string
-}
-
-export const InputSuccess = ({ message }: InputSuccessProps) => {
-  if (!message) return null
-
-  return (
-    <div className='successMain'>
-      <div className='successMainColor'></div>
-      <p className='successMainText'>{message}</p>
-    </div>
-  )
-}

src/components/Inputs/index.tsx

@@ -1,206 +0,0 @@
-import React, { useCallback } from 'react'
-import { InputError } from './Error'
-import { ImageUpload } from './ImageUpload'
-import '../../styles/styles.css'
-
-interface InputFieldProps {
-  label: string | React.ReactElement
-  description?: string
-  type?: 'text' | 'textarea'
-  placeholder: string
-  name: string
-  inputMode?: 'url'
-  value: string
-  error?: string
-  onChange: (name: string, value: string) => void
-}
-
-export const InputField = React.memo(
-  ({
-    label,
-    description,
-    type = 'text',
-    placeholder,
-    name,
-    inputMode,
-    value,
-    error,
-    onChange
-  }: InputFieldProps) => {
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-      onChange(name, e.target.value)
-    }
-
-    return (
-      <div className='inputLabelWrapperMain'>
-        <label className='form-label labelMain'>{label}</label>
-        {description && <p className='labelDescriptionMain'>{description}</p>}
-        {type === 'textarea' ? (
-          <textarea
-            className='inputMain'
-            placeholder={placeholder}
-            name={name}
-            value={value}
-            onChange={handleChange}
-          ></textarea>
-        ) : (
-          <input
-            type={type}
-            className='inputMain'
-            placeholder={placeholder}
-            name={name}
-            inputMode={inputMode}
-            value={value}
-            onChange={handleChange}
-          />
-        )}
-        {error && <InputError message={error} />}
-      </div>
-    )
-  }
-)
-
-interface CheckboxFieldProps {
-  label: string
-  name: string
-  isChecked: boolean
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  type?: 'default' | 'stylized'
-}
-
-export const CheckboxField = React.memo(
-  ({
-    label,
-    name,
-    isChecked,
-    handleChange,
-    type = 'default'
-  }: CheckboxFieldProps) => (
-    <div
-      className={`inputLabelWrapperMain inputLabelWrapperMainAlt${
-        type === 'stylized' ? ` inputLabelWrapperMainAltStylized` : ''
-      }`}
-    >
-      <label htmlFor={name} className='form-label labelMain'>
-        {label}
-      </label>
-      <input
-        id={name}
-        type='checkbox'
-        className='CheckboxMain'
-        name={name}
-        checked={isChecked}
-        onChange={handleChange}
-      />
-    </div>
-  )
-)
-
-interface InputFieldUncontrolledProps extends React.ComponentProps<'input'> {
-  label: string | React.ReactElement
-  description?: string
-  error?: string
-}
-/**
- * Uncontrolled input component with design classes, label, description and error support
- *
- * Extends {@link React.ComponentProps<'input'> React.ComponentProps<'input'>}
- * @param label
- * @param description
- * @param error
- *
- * @see {@link React.ComponentProps<'input'>}
- */
-export const InputFieldUncontrolled = ({
-  label,
-  description,
-  error,
-  ...rest
-}: InputFieldUncontrolledProps) => (
-  <div className='inputLabelWrapperMain'>
-    <label htmlFor={rest.id} className='form-label labelMain'>
-      {label}
-    </label>
-    {description && <p className='labelDescriptionMain'>{description}</p>}
-    <input className='inputMain' {...rest} />
-    {error && <InputError message={error} />}
-  </div>
-)
-
-interface CheckboxFieldUncontrolledProps extends React.ComponentProps<'input'> {
-  label: string
-}
-
-export const CheckboxFieldUncontrolled = ({
-  label,
-  ...rest
-}: CheckboxFieldUncontrolledProps) => (
-  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-    <label htmlFor={rest.id} className='form-label labelMain'>
-      {label}
-    </label>
-    <input type='checkbox' className='CheckboxMain' {...rest} />
-  </div>
-)
-
-interface InputFieldWithImageUploadProps {
-  label: string | React.ReactElement
-  description?: string
-  placeholder: string
-  name: string
-  inputMode?: 'url'
-  value: string
-  error?: string
-  onInputChange: (name: string, value: string) => void
-}
-
-export const InputFieldWithImageUpload = React.memo(
-  ({
-    label,
-    description,
-    placeholder,
-    name,
-    inputMode,
-    value,
-    error,
-    onInputChange
-  }: InputFieldWithImageUploadProps) => {
-    const handleChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        onInputChange(name, e.currentTarget.value)
-      },
-      [name, onInputChange]
-    )
-
-    const handleFileChange = useCallback(
-      (values: string[]) => {
-        onInputChange(name, values[0])
-      },
-      [name, onInputChange]
-    )
-
-    return (
-      <div className='inputLabelWrapperMain'>
-        <label className='form-label labelMain'>{label}</label>
-        {typeof description !== 'undefined' && (
-          <p className='labelDescriptionMain'>{description}</p>
-        )}
-
-        <ImageUpload onChange={handleFileChange} />
-
-        <input
-          type='text'
-          className='inputMain'
-          placeholder={placeholder}
-          name={name}
-          inputMode={inputMode}
-          value={value}
-          onChange={handleChange}
-        />
-        {error && <InputError message={error} />}
-      </div>
-    )
-  }
-)

src/components/Internal/Zap.tsx

@@ -1,4 +1,3 @@
-import { Dots } from 'components/Spinner'
 import { ZapSplit } from 'components/Zap'
 import {
   useAppSelector,
@@ -9,7 +8,7 @@ import {
 import { useState } from 'react'
 import { toast } from 'react-toastify'
 import { Addressable } from 'types'
-import { abbreviateNumber, log, LogType } from 'utils'
+import { abbreviateNumber } from 'utils'
 
 type ZapProps = {
   addressable: Addressable
@@ -17,25 +16,15 @@ type ZapProps = {
 
 export const Zap = ({ addressable }: ZapProps) => {
   const [isOpen, setIsOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
-  const [isAvailable, setIsAvailable] = useState(false)
   const [totalZappedAmount, setTotalZappedAmount] = useState(0)
   const [hasZapped, setHasZapped] = useState(false)
 
   const userState = useAppSelector((state) => state.user)
-  const { getTotalZapAmount, findMetadata } = useNDKContext()
+  const { getTotalZapAmount } = useNDKContext()
 
   useBodyScrollDisable(isOpen)
 
   useDidMount(() => {
-    findMetadata(addressable.author)
-      .then((res) => {
-        setIsAvailable(typeof res?.lud16 !== 'undefined' && res.lud16 !== '')
-      })
-      .catch((err) => {
-        log(true, LogType.Error, err.message || err)
-      })
-
     getTotalZapAmount(
       addressable.author,
       addressable.id,
@@ -49,14 +38,8 @@ export const Zap = ({ addressable }: ZapProps) => {
       .catch((err) => {
         toast.error(err.message || err)
       })
-      .finally(() => {
-        setIsLoading(false)
-      })
   })
 
-  // Hide button if the author hasn't set lud16
-  if (!isAvailable) return null
-
   return (
     <>
       <div
@@ -64,7 +47,7 @@ export const Zap = ({ addressable }: ZapProps) => {
         className={`IBMSMSMBSS_Details_Card IBMSMSMBSS_D_CBolt ${
           hasZapped ? 'IBMSMSMBSS_D_CBActive' : ''
         }`}
-        onClick={isLoading ? undefined : () => setIsOpen(true)}
+        onClick={() => setIsOpen(true)}
       >
         <div className='IBMSMSMBSS_Details_CardVisual'>
           <svg
@@ -79,7 +62,7 @@ export const Zap = ({ addressable }: ZapProps) => {
           </svg>
         </div>
         <p className='IBMSMSMBSS_Details_CardText'>
-          {isLoading ? <Dots /> : abbreviateNumber(totalZappedAmount)}
+          {abbreviateNumber(totalZappedAmount)}
         </p>
         <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
           <div className='IBMSMSMBSSCL_CAElementLoad'></div>

src/components/LoadingSpinner/index.tsx

@@ -1,4 +1,3 @@
-import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { useNavigation } from 'react-router-dom'
 import styles from '../../styles/loadingSpinner.module.scss'
 
@@ -6,7 +5,9 @@ interface Props {
   desc: string
 }
 
-export const LoadingSpinner = ({ desc }: Props) => {
+export const LoadingSpinner = (props: Props) => {
+  const { desc } = props
+
   return (
     <div className={styles.loadingSpinnerOverlay}>
       <div className={styles.loadingSpinnerContainer}>
@@ -27,51 +28,3 @@ export const RouterLoadingSpinner = () => {
 
   return <LoadingSpinner desc={`${desc}...`} />
 }
-
-interface TimerLoadingSpinner {
-  timeoutMs?: number
-  countdownMs?: number
-}
-
-export const TimerLoadingSpinner = ({
-  timeoutMs = 10000,
-  countdownMs = 30000,
-  children
-}: PropsWithChildren<TimerLoadingSpinner>) => {
-  const [show, setShow] = useState(false)
-  const [timer, setTimer] = useState(
-    Math.floor((countdownMs - timeoutMs) / 1000)
-  )
-  const startTime = useMemo(() => Date.now(), [])
-
-  useEffect(() => {
-    let interval: number
-    const timeout = window.setTimeout(() => {
-      setShow(true)
-      interval = window.setInterval(() => {
-        const time = Date.now() - startTime
-        const diff = Math.max(0, countdownMs - time)
-        setTimer(Math.floor(diff / 1000))
-      }, 1000)
-    }, timeoutMs)
-
-    return () => {
-      clearTimeout(timeout)
-      clearInterval(interval)
-    }
-  }, [countdownMs, startTime, timeoutMs])
-
-  return (
-    <div className={styles.loadingSpinnerOverlay}>
-      <div className={styles.loadingSpinnerContainer}>
-        <div className={styles.loadingSpinner}></div>
-        {children}
-        {show && (
-          <>
-            <div>You can try again in {timer}s...</div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

src/components/Markdown/Dialog.module.scss

@@ -1,10 +0,0 @@
-.formAction {
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  gap: var(--spacing-2);
-}
-
-.wrapper {
-  border-radius: 0;
-}

src/components/Markdown/Editor.tsx

@@ -1,148 +0,0 @@
-import {
-  BlockTypeSelect,
-  BoldItalicUnderlineToggles,
-  codeBlockPlugin,
-  CodeToggle,
-  CreateLink,
-  diffSourcePlugin,
-  DiffSourceToggleWrapper,
-  directivesPlugin,
-  headingsPlugin,
-  imagePlugin,
-  InsertCodeBlock,
-  InsertImage,
-  InsertTable,
-  InsertThematicBreak,
-  linkDialogPlugin,
-  linkPlugin,
-  listsPlugin,
-  ListsToggle,
-  markdownShortcutPlugin,
-  MDXEditor,
-  MDXEditorMethods,
-  MDXEditorProps,
-  quotePlugin,
-  Separator,
-  StrikeThroughSupSubToggles,
-  tablePlugin,
-  thematicBreakPlugin,
-  toolbarPlugin,
-  UndoRedo
-} from '@mdxeditor/editor'
-import { PlainTextCodeEditorDescriptor } from './PlainTextCodeEditorDescriptor'
-import { YoutubeDirectiveDescriptor } from './YoutubeDirectiveDescriptor'
-import { YouTubeButton } from './YoutubeButton'
-import '@mdxeditor/editor/style.css'
-import '../../styles/mdxEditor.scss'
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef
-} from 'react'
-import { ImageDialog } from './ImageDialog'
-import { LinkDialog } from './LinkDialog'
-
-export interface EditorRef {
-  setMarkdown: (md: string) => void
-}
-interface EditorProps extends MDXEditorProps {}
-/**
- * The editor component is small wrapper (`forwardRef`) around {@link MDXEditor MDXEditor} that sets up the toolbars and plugins, and requires `markdown` and `onChange`.
- * To reset editor markdown it's required to pass the {@link EditorRef EditorRef}.
- *
- * Extends {@link MDXEditorProps MDXEditorProps}
- *
- * **Important**: the markdown is not a state, but an _initialState_ and is not "controlled".
- * All updates are handled with onChange and will not be reflected on markdown prop.
- * This component should never re-render if used correctly.
- * @see https://mdxeditor.dev/editor/docs/getting-started#basic-usage
- */
-export const Editor = React.memo(
-  forwardRef<EditorRef, EditorProps>(({ markdown, onChange, ...rest }, ref) => {
-    const editorRef = useRef<MDXEditorMethods>(null)
-    const setMarkdown = useCallback((md: string) => {
-      editorRef.current?.setMarkdown(md)
-    }, [])
-    useImperativeHandle(ref, () => ({ setMarkdown }))
-    const plugins = useMemo(
-      () => [
-        toolbarPlugin({
-          toolbarContents: () => (
-            <DiffSourceToggleWrapper
-              children={
-                <>
-                  <UndoRedo />
-                  <Separator />
-                  <BoldItalicUnderlineToggles />
-                  <CodeToggle />
-                  <Separator />
-                  <StrikeThroughSupSubToggles />
-                  <Separator />
-                  <ListsToggle />
-                  <Separator />
-                  <BlockTypeSelect />
-                  <Separator />
-
-                  <CreateLink />
-                  <InsertImage />
-                  <YouTubeButton />
-
-                  <Separator />
-
-                  <InsertTable />
-                  <InsertThematicBreak />
-
-                  <Separator />
-                  <InsertCodeBlock />
-                </>
-              }
-            />
-          )
-        }),
-        headingsPlugin(),
-        diffSourcePlugin({
-          viewMode: 'rich-text',
-          diffMarkdown: markdown
-        }),
-        quotePlugin(),
-        imagePlugin({
-          ImageDialog: ImageDialog
-        }),
-        tablePlugin(),
-        linkPlugin(),
-        linkDialogPlugin({
-          LinkDialog: LinkDialog
-        }),
-        listsPlugin(),
-        thematicBreakPlugin(),
-        directivesPlugin({
-          directiveDescriptors: [YoutubeDirectiveDescriptor]
-        }),
-        markdownShortcutPlugin(),
-        // HACK: due to a bug with shortcut interaction shortcut for code block is disabled
-        // Editor freezes if you type in ```word and put a space in between ``` word
-        codeBlockPlugin({
-          defaultCodeBlockLanguage: '',
-          codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor]
-        })
-      ],
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    )
-
-    return (
-      <MDXEditor
-        ref={editorRef}
-        contentEditableClassName='editor'
-        className='dark-theme dark-editor'
-        markdown={markdown}
-        plugins={plugins}
-        onChange={onChange}
-        {...rest}
-      />
-    )
-  }),
-  () => true
-)

src/components/Markdown/ImageDialog.tsx

@@ -1,166 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useCellValues, usePublisher } from '@mdxeditor/gurx'
-import {
-  closeImageDialog$,
-  editorRootElementRef$,
-  imageDialogState$,
-  imageUploadHandler$,
-  saveImage$
-} from '@mdxeditor/editor'
-import styles from './Dialog.module.scss'
-import { createPortal } from 'react-dom'
-
-interface ImageFormFields {
-  src: string
-  title: string
-  altText: string
-  file: FileList
-}
-
-export const ImageDialog: React.FC = () => {
-  const [state, editorRootElementRef, imageUploadHandler] = useCellValues(
-    imageDialogState$,
-    editorRootElementRef$,
-    imageUploadHandler$
-  )
-  const saveImage = usePublisher(saveImage$)
-  const closeImageDialog = usePublisher(closeImageDialog$)
-  const { register, handleSubmit, setValue, reset } = useForm<ImageFormFields>({
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-    values: state.type === 'editing' ? (state.initialValues as any) : {}
-  })
-  const [open, setOpen] = useState(state.type !== 'inactive')
-
-  useEffect(() => {
-    setOpen(state.type !== 'inactive')
-  }, [state.type])
-
-  useEffect(() => {
-    if (!open) {
-      closeImageDialog()
-      reset({ src: '', title: '', altText: '' })
-    }
-  }, [closeImageDialog, open, reset])
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  if (!open) return null
-  if (!editorRootElementRef?.current) return null
-
-  return createPortal(
-    <div className='popUpMain'>
-      <div className='ContainerMain'>
-        <div className='popUpMainCardWrapper'>
-          <div className='popUpMainCard popUpMainCardQR'>
-            <div className='popUpMainCardTop'>
-              <div className='popUpMainCardTopInfo'>
-                <h3>Add an image</h3>
-              </div>
-              <div className='popUpMainCardTopClose' onClick={handleClose}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='-96 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  style={{ zIndex: 1 }}
-                >
-                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
-                </svg>
-              </div>
-            </div>
-            <div className='pUMCB_Zaps'>
-              <form
-                className='pUMCB_ZapsInside'
-                onSubmit={(e) => {
-                  void handleSubmit(saveImage)(e)
-                  reset({ src: '', title: '', altText: '' })
-                  e.preventDefault()
-                  e.stopPropagation()
-                }}
-              >
-                {imageUploadHandler === null ? (
-                  <input type='hidden' accept='image/*' {...register('file')} />
-                ) : (
-                  <div className='inputLabelWrapperMain'>
-                    <label className='form-label labelMain' htmlFor='file'>
-                      Upload an image from your device:
-                    </label>
-                    <input type='file' accept='image/*' {...register('file')} />
-                  </div>
-                )}
-
-                <div className='inputLabelWrapperMain'>
-                  <label className='form-label labelMain' htmlFor='src'>
-                    {imageUploadHandler !== null
-                      ? 'Or add an image from an URL:'
-                      : 'Add an image from an URL:'}
-                  </label>
-                  <input
-                    defaultValue={
-                      state.type === 'editing'
-                        ? state.initialValues.src ?? ''
-                        : ''
-                    }
-                    className='inputMain'
-                    size={40}
-                    autoFocus
-                    {...register('src')}
-                    onChange={(e) => setValue('src', e.currentTarget.value)}
-                    placeholder={'Paste an image src'}
-                  />
-                </div>
-
-                <div className='inputLabelWrapperMain'>
-                  <label className='form-label labelMain' htmlFor='alt'>
-                    Alt:
-                  </label>
-                  <input
-                    type='text'
-                    {...register('altText')}
-                    className='inputMain'
-                  />
-                </div>
-
-                <div className='inputLabelWrapperMain'>
-                  <label className='form-label labelMain' htmlFor='title'>
-                    Title:
-                  </label>
-                  <input
-                    type='text'
-                    {...register('title')}
-                    className='inputMain'
-                  />
-                </div>
-
-                <div className={styles.formAction}>
-                  <button
-                    type='submit'
-                    title={'Save'}
-                    aria-label={'Save'}
-                    className='btn btnMain btnMainPopup'
-                  >
-                    Save
-                  </button>
-                  <button
-                    type='reset'
-                    title={'Cancel'}
-                    aria-label={'Cancel'}
-                    className='btn btnMain btnMainPopup'
-                    onClick={handleClose}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>,
-    editorRootElementRef?.current
-  )
-}

src/components/Markdown/LinkDialog.tsx

@@ -1,306 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as Popover from '@radix-ui/react-popover'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import React from 'react'
-
-import {
-  activeEditor$,
-  editorRootElementRef$,
-  iconComponentFor$,
-  cancelLinkEdit$,
-  linkDialogState$,
-  onWindowChange$,
-  removeLink$,
-  switchFromPreviewToLinkEdit$,
-  updateLink$,
-  ClickLinkCallback
-} from '@mdxeditor/editor'
-import { useForm } from 'react-hook-form'
-import { Cell, useCellValues, usePublisher } from '@mdxeditor/gurx'
-import styles from './Dialog.module.scss'
-
-interface LinkEditFormProps {
-  url: string
-  title: string
-  onSubmit: (link: { url: string; title: string }) => void
-  onCancel: () => void
-}
-
-interface LinkFormFields {
-  url: string
-  title: string
-}
-
-export function LinkEditForm({
-  url,
-  title,
-  onSubmit,
-  onCancel
-}: LinkEditFormProps) {
-  const { register, handleSubmit, setValue } = useForm<LinkFormFields>({
-    values: {
-      url,
-      title
-    }
-  })
-
-  return (
-    <div className='pUMCB_Zaps'>
-      <form
-        className='pUMCB_ZapsInside'
-        onSubmit={(e) => {
-          void handleSubmit(onSubmit)(e)
-          e.stopPropagation()
-          e.preventDefault()
-        }}
-        onReset={(e) => {
-          e.stopPropagation()
-          onCancel()
-        }}
-      >
-        <div className='inputLabelWrapperMain'>
-          <label className='form-label labelMain' htmlFor='file'>
-            URL:
-          </label>
-          <input
-            defaultValue={url}
-            className='inputMain'
-            size={40}
-            autoFocus
-            {...register('url')}
-            onChange={(e) => setValue('url', e.currentTarget.value)}
-            placeholder={'Paste an URL'}
-          />
-        </div>
-
-        <div className='inputLabelWrapperMain'>
-          <label className='form-label labelMain' htmlFor='link-title'>
-            Title:
-          </label>
-          <input
-            id='link-title'
-            className='inputMain'
-            size={40}
-            {...register('title')}
-          />
-        </div>
-
-        <div className={styles.formAction}>
-          <button
-            type='submit'
-            title={'Set URL'}
-            aria-label={'Set URL'}
-            className='btn btnMain btnMainPopup'
-          >
-            Save
-          </button>
-          <button
-            type='reset'
-            title={'Cancel change'}
-            aria-label={'Cancel change'}
-            className='btn btnMain btnMainPopup'
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-export const onClickLinkCallback$ = Cell<ClickLinkCallback | null>(null)
-
-/** @internal */
-export const LinkDialog = () => {
-  const [
-    editorRootElementRef,
-    activeEditor,
-    iconComponentFor,
-    linkDialogState,
-    onClickLinkCallback
-  ] = useCellValues(
-    editorRootElementRef$,
-    activeEditor$,
-    iconComponentFor$,
-    linkDialogState$,
-    onClickLinkCallback$
-  )
-  const publishWindowChange = usePublisher(onWindowChange$)
-  const updateLink = usePublisher(updateLink$)
-  const cancelLinkEdit = usePublisher(cancelLinkEdit$)
-  const switchFromPreviewToLinkEdit = usePublisher(switchFromPreviewToLinkEdit$)
-  const removeLink = usePublisher(removeLink$)
-
-  React.useEffect(() => {
-    const update = () => {
-      activeEditor?.getEditorState().read(() => {
-        publishWindowChange(true)
-      })
-    }
-
-    window.addEventListener('resize', update)
-    window.addEventListener('scroll', update)
-
-    return () => {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update)
-    }
-  }, [activeEditor, publishWindowChange])
-
-  const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React.useState(false)
-
-  const theRect = linkDialogState.rectangle
-
-  const urlIsExternal =
-    linkDialogState.type === 'preview' && linkDialogState.url.startsWith('http')
-
-  return (
-    <Popover.Root open={linkDialogState.type !== 'inactive'}>
-      <Popover.Anchor
-        data-visible={linkDialogState.type === 'edit'}
-        style={{
-          position: 'fixed',
-          top: `${theRect?.top ?? 0}px`,
-          left: `${theRect?.left ?? 0}px`,
-          width: `${theRect?.width ?? 0}px`,
-          height: `${theRect?.height ?? 0}px`
-        }}
-      />
-
-      <Popover.Portal container={editorRootElementRef?.current}>
-        <Popover.Content
-          sideOffset={5}
-          onOpenAutoFocus={(e) => {
-            e.preventDefault()
-          }}
-          key={linkDialogState.linkNodeKey}
-          className={[
-            'popUpMainCard',
-            ...(linkDialogState.type === 'edit' ? [styles.wrapper] : [])
-          ].join(' ')}
-        >
-          {linkDialogState.type === 'edit' && (
-            <LinkEditForm
-              url={linkDialogState.url}
-              title={linkDialogState.title}
-              onSubmit={updateLink}
-              onCancel={cancelLinkEdit.bind(null)}
-            />
-          )}
-
-          {linkDialogState.type === 'preview' && (
-            <>
-              <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
-                <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
-                  <p className='IBMSMSMSSS_Author_Top_Address'>
-                    <a
-                      className={styles.linkDialogPreviewAnchor}
-                      href={linkDialogState.url}
-                      {...(urlIsExternal
-                        ? { target: '_blank', rel: 'noreferrer' }
-                        : {})}
-                      onClick={(e) => {
-                        if (
-                          onClickLinkCallback !== null &&
-                          typeof onClickLinkCallback === 'function'
-                        ) {
-                          e.preventDefault()
-                          onClickLinkCallback(linkDialogState.url)
-                        }
-                      }}
-                      title={
-                        urlIsExternal
-                          ? `Open ${linkDialogState.url} in new window`
-                          : linkDialogState.url
-                      }
-                    >
-                      <span>{linkDialogState.url}</span>
-                      {urlIsExternal && iconComponentFor('open_in_new')}
-                    </a>
-                  </p>
-                </div>
-                <div className='IBMSMSMSSS_Author_Top_IconWrapper'>
-                  <div
-                    className='IBMSMSMSSS_Author_Top_IconWrapped'
-                    onClick={() => {
-                      switchFromPreviewToLinkEdit()
-                    }}
-                  >
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      viewBox='0 0 512 512'
-                      width='1em'
-                      height='1em'
-                      fill='currentColor'
-                      className='IBMSMSMSSS_Author_Top_Icon'
-                    >
-                      <path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z'></path>
-                    </svg>
-                  </div>
-
-                  <Tooltip.Provider>
-                    <Tooltip.Root open={copyUrlTooltipOpen}>
-                      <Tooltip.Trigger asChild>
-                        <div
-                          className='IBMSMSMSSS_Author_Top_IconWrapped'
-                          onClick={() => {
-                            void window.navigator.clipboard
-                              .writeText(linkDialogState.url)
-                              .then(() => {
-                                setCopyUrlTooltipOpen(true)
-                                setTimeout(() => {
-                                  setCopyUrlTooltipOpen(false)
-                                }, 1000)
-                              })
-                          }}
-                        >
-                          <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            viewBox='0 0 512 512'
-                            width='1em'
-                            height='1em'
-                            fill='currentColor'
-                            className='IBMSMSMSSS_Author_Top_Icon'
-                          >
-                            <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
-                          </svg>
-                        </div>
-                      </Tooltip.Trigger>
-                      <Tooltip.Portal container={editorRootElementRef?.current}>
-                        <Tooltip.Content sideOffset={5}>
-                          {'Copied!'}
-                          <Tooltip.Arrow />
-                        </Tooltip.Content>
-                      </Tooltip.Portal>
-                    </Tooltip.Root>
-                  </Tooltip.Provider>
-
-                  <div
-                    className='IBMSMSMSSS_Author_Top_IconWrapped'
-                    onClick={() => {
-                      removeLink()
-                    }}
-                  >
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      viewBox='0 0 640 512'
-                      width='1em'
-                      height='1em'
-                      fill='currentColor'
-                      className='IBMSMSMSSS_Author_Top_Icon'
-                    >
-                      <path d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z' />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}

src/components/Markdown/PlainTextCodeEditorDescriptor.tsx

@@ -1,65 +0,0 @@
-import {
-  CodeBlockEditorDescriptor,
-  useCodeBlockEditorContext
-} from '@mdxeditor/editor'
-import { useCallback, useEffect, useRef } from 'react'
-
-export const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  match: (_language, _meta) => true,
-  priority: 0,
-  Editor: ({ code, focusEmitter }) => {
-    const { parentEditor, lexicalNode, setCode } = useCodeBlockEditorContext()
-    const defaultValue = useRef(code)
-    const codeRef = useRef<HTMLElement>(null)
-
-    const handleInput = useCallback(
-      (e: React.FormEvent<HTMLElement>) => {
-        setCode(e.currentTarget.innerHTML)
-      },
-      [setCode]
-    )
-
-    useEffect(() => {
-      const handleFocus = () => {
-        if (codeRef.current) {
-          codeRef.current.focus()
-        }
-      }
-      focusEmitter.subscribe(handleFocus)
-    }, [focusEmitter])
-
-    useEffect(() => {
-      const currentRef = codeRef.current
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Backspace' || event.key === 'Delete') {
-          if (codeRef.current?.textContent === '') {
-            parentEditor.update(() => {
-              lexicalNode.selectNext()
-              lexicalNode.remove()
-            })
-          }
-        }
-      }
-      if (currentRef) {
-        currentRef.addEventListener('keydown', handleKeyDown)
-      }
-      return () => {
-        if (currentRef) {
-          currentRef.removeEventListener('keydown', handleKeyDown)
-        }
-      }
-    }, [lexicalNode, parentEditor])
-
-    return (
-      <pre>
-        <code
-          ref={codeRef}
-          contentEditable={true}
-          onInput={handleInput}
-          dangerouslySetInnerHTML={{ __html: defaultValue.current }}
-        />
-      </pre>
-    )
-  }
-}

src/components/Markdown/Viewer.tsx

@@ -1,37 +0,0 @@
-import DOMPurify from 'dompurify'
-import { marked } from 'marked'
-import { createDirectives, presetDirectiveConfigs } from 'marked-directive'
-import { youtubeDirective } from './YoutubeDirective'
-import { useMemo } from 'react'
-
-interface ViewerProps {
-  markdown: string
-}
-
-export const Viewer = ({ markdown }: ViewerProps) => {
-  const html = useMemo(() => {
-    DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
-      if (node.nodeName && node.nodeName === 'IFRAME') {
-        const src = node.attributes.getNamedItem('src')
-        if (!(src && src.value.startsWith('https://www.youtube.com/embed/'))) {
-          node.remove()
-        }
-      }
-    })
-
-    return DOMPurify.sanitize(
-      marked
-        .use(createDirectives([...presetDirectiveConfigs, youtubeDirective]))
-        .parse(`${markdown}`, {
-          async: false
-        }),
-      {
-        ADD_TAGS: ['iframe']
-      }
-    )
-  }, [markdown])
-
-  return (
-    <div className='viewer' dangerouslySetInnerHTML={{ __html: html }}></div>
-  )
-}

src/components/Markdown/YoutubeButton.tsx

@@ -1,36 +0,0 @@
-import { LeafDirective } from 'mdast-util-directive'
-import { usePublisher, insertDirective$, DialogButton } from '@mdxeditor/editor'
-
-function getId(url: string) {
-  const regExp =
-    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
-  const match = url.match(regExp)
-  return match && match[7].length == 11 ? match[7] : false
-}
-
-export const YouTubeButton = () => {
-  const insertDirective = usePublisher(insertDirective$)
-
-  return (
-    <DialogButton
-      tooltipTitle='Insert Youtube video'
-      submitButtonTitle='Insert video'
-      dialogInputPlaceholder='Paste the youtube video URL'
-      buttonContent='YT'
-      onSubmit={(url) => {
-        const videoId = getId(url)
-        if (videoId) {
-          insertDirective({
-            name: 'youtube',
-            type: 'leafDirective',
-
-            attributes: { id: videoId },
-            children: []
-          } as LeafDirective)
-        } else {
-          alert('Invalid YouTube URL')
-        }
-      }}
-    />
-  )
-}

src/components/Markdown/YoutubeDirective.tsx

@@ -1,37 +0,0 @@
-import { type DirectiveConfig } from 'marked-directive'
-
-// defines `:youtube` directive
-export const youtubeDirective: DirectiveConfig = {
-  level: 'block',
-  marker: '::',
-  renderer(token) {
-    //https://www.youtube.com/embed/<VIDEO_ID>
-    //::youtube{#<VIDEO_ID>}
-    let vid: string = ''
-    if (token.attrs && token.meta.name === 'youtube') {
-      if (token.attrs.id) {
-        vid = token.attrs.id as string // Get the video `id` attribute (common id style)
-      } else if (token.attrs.vid) {
-        vid = token.attrs.vid as string // Check for the `vid` attribute (youtube directive attribute style)
-      } else {
-        // Fallback for id
-        // In case that video starts with the number it will not be recongizned as an id
-        // We have to manually fetch it
-        for (const attr in token.attrs) {
-          if (
-            Object.prototype.hasOwnProperty.call(token.attrs, attr) &&
-            attr.startsWith('#')
-          ) {
-            vid = attr.replace('#', '')
-          }
-        }
-      }
-    }
-
-    if (vid) {
-      return `<iframe title="Video embed" width="560" height="315" src="https://www.youtube.com/embed/${vid}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
-    }
-
-    return false
-  }
-}

src/components/Markdown/YoutubeDirectiveDescriptor.tsx

@@ -1,59 +0,0 @@
-import { LeafDirective } from 'mdast-util-directive'
-import { DirectiveDescriptor } from '@mdxeditor/editor'
-
-interface YoutubeDirectiveNode extends LeafDirective {
-  name: 'youtube'
-  attributes: { id: string }
-}
-
-export const YoutubeDirectiveDescriptor: DirectiveDescriptor<YoutubeDirectiveNode> =
-  {
-    name: 'youtube',
-    type: 'leafDirective',
-    testNode(node) {
-      return node.name === 'youtube'
-    },
-    attributes: ['id'],
-    hasChildren: false,
-    Editor: ({ mdastNode, lexicalNode, parentEditor }) => {
-      return (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start'
-          }}
-        >
-          <button
-            type='button'
-            title='delete'
-            className='btnMain'
-            onClick={() => {
-              parentEditor.update(() => {
-                lexicalNode.selectNext()
-                lexicalNode.remove()
-              })
-            }}
-          >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 448 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z' />
-            </svg>
-          </button>
-          <iframe
-            width='560'
-            height='315'
-            src={`https://www.youtube.com/embed/${mdastNode.attributes.id}`}
-            title='YouTube video player'
-            frameBorder='0'
-            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-          />
-        </div>
-      )
-    }
-  }

src/components/ModForm.tsx

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import React, {
   Fragment,
   useCallback,
@@ -7,89 +8,80 @@ import React, {
   useRef,
   useState
 } from 'react'
-import {
-  useActionData,
-  useLoaderData,
-  useNavigation,
-  useSubmit
-} from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
 import { FixedSizeList } from 'react-window'
-import { useGames } from '../hooks'
+import { v4 as uuidv4 } from 'uuid'
+import { T_TAG_VALUE } from '../constants'
+import { useAppSelector, useGames, useNDKContext } from '../hooks'
+import { appRoutes, getModPageRoute } from '../routes'
 import '../styles/styles.css'
-import {
-  DownloadUrl,
-  ModFormState,
-  ModPageLoaderResult,
-  ModPermissions,
-  MODPERMISSIONS_CONF,
-  MODPERMISSIONS_DESC,
-  SubmitModActionResult
-} from '../types'
+import { DownloadUrl, ModDetails, ModFormState } from '../types'
 import {
   initializeFormState,
+  isReachable,
+  isValidImageUrl,
+  isValidUrl,
   log,
   LogType,
-  MOD_DRAFT_CACHE_KEY
+  now
 } from '../utils'
-import { CheckboxField, InputField, InputFieldWithImageUpload } from './Inputs'
+import { CheckboxField, InputError, InputField } from './Inputs'
+import { LoadingSpinner } from './LoadingSpinner'
+import { NDKEvent } from '@nostr-dev-kit/ndk'
 import { OriginalAuthor } from './OriginalAuthor'
 import { CategoryAutocomplete } from './CategoryAutocomplete'
 import { AlertPopup } from './AlertPopup'
-import { Editor, EditorRef } from './Markdown/Editor'
-import { MEDIA_OPTIONS } from 'controllers'
-import { InputError } from './Inputs/Error'
-import { ImageUpload } from './Inputs/ImageUpload'
-import { useLocalCache } from 'hooks/useLocalCache'
-import { toast } from 'react-toastify'
+
+interface FormErrors {
+  game?: string
+  title?: string
+  body?: string
+  featuredImageUrl?: string
+  summary?: string
+  nsfw?: string
+  screenshotsUrls?: string[]
+  tags?: string
+  downloadUrls?: string[]
+  author?: string
+  originalAuthor?: string
+}
 
 interface GameOption {
   value: string
   label: string
 }
 
-export const ModForm = () => {
-  const data = useLoaderData() as ModPageLoaderResult
-  const mod = data?.mod
-  const actionData = useActionData() as SubmitModActionResult
-  const formErrors = useMemo(
-    () => (actionData?.type === 'validation' ? actionData.error : undefined),
-    [actionData]
-  )
-  const navigation = useNavigation()
-  const submit = useSubmit()
+type ModFormProps = {
+  existingModData?: ModDetails
+}
+
+export const ModForm = ({ existingModData }: ModFormProps) => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { ndk, publish } = useNDKContext()
   const games = useGames()
+  const userState = useAppSelector((state) => state.user)
+
+  const [isPublishing, setIsPublishing] = useState(false)
   const [gameOptions, setGameOptions] = useState<GameOption[]>([])
-
-  // Enable cache for the new mod
-  const isEditing = typeof mod !== 'undefined'
-  const [cache, setCache, clearCache] =
-    useLocalCache<ModFormState>(MOD_DRAFT_CACHE_KEY)
   const [formState, setFormState] = useState<ModFormState>(
-    isEditing ? initializeFormState(mod) : cache ? cache : initializeFormState()
+    initializeFormState()
   )
-
-  // Enable backwards compatibility with the mods that used html
-  const body = useMemo(() => {
-    // Replace the most problematic HTML tags (<br>)
-    const fixed = formState.body.replaceAll(/<br>/g, '\r\n')
-    return fixed
-  }, [formState.body])
+  const [formErrors, setFormErrors] = useState<FormErrors>({})
 
   useEffect(() => {
-    if (!isEditing) {
-      const newCache = _.cloneDeep(formState)
-
-      // Remove aTag, dTag and published_at from cache
-      // These are used for editing and try again timeout
-      newCache.aTag = ''
-      newCache.dTag = ''
-      newCache.published_at = 0
-
-      setCache(newCache)
+    if (location.pathname === appRoutes.submitMod) {
+      // Only trigger when the pathname changes to submit-mod
+      setFormState(initializeFormState())
     }
-  }, [formState, isEditing, setCache])
+  }, [location.pathname])
 
-  const editorRef = useRef<EditorRef>(null)
+  useEffect(() => {
+    if (existingModData) {
+      setFormState(initializeFormState(existingModData))
+    }
+  }, [existingModData])
 
   useEffect(() => {
     const options = games.map((game) => ({
@@ -117,13 +109,6 @@ export const ModForm = () => {
     []
   )
 
-  const handleRadioChange = useCallback((name: string, value: boolean) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      [name]: value
-    }))
-  }, [])
-
   const addScreenshotUrl = useCallback(() => {
     setFormState((prevState) => ({
       ...prevState,
@@ -191,85 +176,233 @@ export const ModForm = () => {
     },
     []
   )
-  const [showTryAgainPopup, setShowTryAgainPopup] = useState<boolean>(false)
-  useEffect(() => {
-    const isTimeout = actionData?.type === 'timeout'
-    setShowTryAgainPopup(isTimeout)
-    if (isTimeout) {
-      setFormState((prev) => ({
-        ...prev,
-        aTag: actionData.data.aTag,
-        dTag: actionData.data.dTag,
-        published_at: actionData.data.published_at
-      }))
-    }
-  }, [actionData])
-  const handleTryAgainConfirm = useCallback(
-    (confirm: boolean) => {
-      setShowTryAgainPopup(false)
-
-      // Cancel if not confirmed
-      if (!confirm) return
-      submit(JSON.stringify(formState), {
-        method: isEditing ? 'put' : 'post',
-        encType: 'application/json'
-      })
-    },
-    [formState, isEditing, submit]
-  )
 
   const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
-  const handleReset = useCallback(() => {
+  const handleReset = () => {
     setShowConfirmPopup(true)
-  }, [])
-  const handleResetConfirm = useCallback(
-    (confirm: boolean) => {
-      setShowConfirmPopup(false)
+  }
+  const handleResetConfirm = (confirm: boolean) => {
+    setShowConfirmPopup(false)
 
-      // Cancel if not confirmed
-      if (!confirm) return
+    // Cancel if not confirmed
+    if (!confirm) return
 
-      // Reset fields to the initial or original existing data
-      const initialState = initializeFormState(mod)
+    // Editing
+    if (existingModData) {
+      // Reset fields to the original existing data
+      setFormState(initializeFormState(existingModData))
+      return
+    }
 
-      // Reset editor
-      editorRef.current?.setMarkdown(initialState.body)
-      setFormState(initialState)
+    // New - set form state to the initial (clear form state)
+    setFormState(initializeFormState())
+  }
 
-      // Clear cache
-      !isEditing && clearCache()
-    },
-    [clearCache, isEditing, mod]
-  )
+  const handlePublish = async () => {
+    setIsPublishing(true)
 
-  const handlePublish = useCallback(
-    (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault()
-      submit(JSON.stringify(formState), {
-        method: isEditing ? 'put' : 'post',
-        encType: 'application/json'
-      })
-    },
-    [formState, isEditing, submit]
-  )
+    let hexPubkey: string
 
-  const extraBoxRef = useRef<HTMLDivElement>(null)
-  const handleExtraBoxButtonClick = () => {
-    if (extraBoxRef.current) {
-      if (extraBoxRef.current.style.display === '') {
-        extraBoxRef.current.style.display = 'none'
-      } else {
-        extraBoxRef.current.style.display = ''
+    if (userState.auth && userState.user?.pubkey) {
+      hexPubkey = userState.user.pubkey as string
+    } else {
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
+    }
+
+    if (!hexPubkey) {
+      toast.error('Could not get pubkey')
+      return
+    }
+
+    if (!(await validateState())) {
+      setIsPublishing(false)
+      return
+    }
+
+    const uuid = formState.dTag || uuidv4()
+    const currentTimeStamp = now()
+
+    const aTag =
+      formState.aTag || `${kinds.ClassifiedListing}:${hexPubkey}:${uuid}`
+
+    const tags = [
+      ['d', uuid],
+      ['a', aTag],
+      ['r', formState.rTag],
+      ['t', T_TAG_VALUE],
+      [
+        'published_at',
+        existingModData
+          ? existingModData.published_at.toString()
+          : currentTimeStamp.toString()
+      ],
+      ['game', formState.game],
+      ['title', formState.title],
+      ['featuredImageUrl', formState.featuredImageUrl],
+      ['summary', formState.summary],
+      ['nsfw', formState.nsfw.toString()],
+      ['repost', formState.repost.toString()],
+      ['screenshotsUrls', ...formState.screenshotsUrls],
+      ['tags', ...formState.tags.split(',')],
+      [
+        'downloadUrls',
+        ...formState.downloadUrls.map((downloadUrl) =>
+          JSON.stringify(downloadUrl)
+        )
+      ]
+    ]
+    if (formState.repost && formState.originalAuthor) {
+      tags.push(['originalAuthor', formState.originalAuthor])
+    }
+
+    // Prepend com.degmods to avoid leaking categories to 3rd party client's search
+    // Add hierarchical namespaces labels
+    if (formState.LTags.length > 0) {
+      for (let i = 0; i < formState.LTags.length; i++) {
+        tags.push(['L', `com.degmods:${formState.LTags[i]}`])
       }
     }
+
+    // Add category labels
+    if (formState.lTags.length > 0) {
+      for (let i = 0; i < formState.lTags.length; i++) {
+        tags.push(['l', `com.degmods:${formState.lTags[i]}`])
+      }
+    }
+
+    const unsignedEvent: UnsignedEvent = {
+      kind: kinds.ClassifiedListing,
+      created_at: currentTimeStamp,
+      pubkey: hexPubkey,
+      content: formState.body,
+      tags
+    }
+
+    const signedEvent = await window.nostr
+      ?.signEvent(unsignedEvent)
+      .then((event) => event as Event)
+      .catch((err) => {
+        toast.error('Failed to sign the event!')
+        log(true, LogType.Error, 'Failed to sign the event!', err)
+        return null
+      })
+
+    if (!signedEvent) {
+      setIsPublishing(false)
+      return
+    }
+
+    const ndkEvent = new NDKEvent(ndk, signedEvent)
+    const publishedOnRelays = await publish(ndkEvent)
+
+    // Handle cases where publishing failed or succeeded
+    if (publishedOnRelays.length === 0) {
+      toast.error('Failed to publish event on any relay')
+    } else {
+      toast.success(
+        `Event published successfully to the following relays\n\n${publishedOnRelays.join(
+          '\n'
+        )}`
+      )
+
+      const naddr = nip19.naddrEncode({
+        identifier: aTag,
+        pubkey: signedEvent.pubkey,
+        kind: signedEvent.kind,
+        relays: publishedOnRelays
+      })
+
+      navigate(getModPageRoute(naddr))
+    }
+
+    setIsPublishing(false)
+  }
+
+  const validateState = async (): Promise<boolean> => {
+    const errors: FormErrors = {}
+
+    if (formState.game === '') {
+      errors.game = 'Game field can not be empty'
+    }
+
+    if (formState.title === '') {
+      errors.title = 'Title field can not be empty'
+    }
+
+    if (formState.body === '') {
+      errors.body = 'Body field can not be empty'
+    }
+
+    if (formState.featuredImageUrl === '') {
+      errors.featuredImageUrl = 'FeaturedImageUrl field can not be empty'
+    } else if (
+      !isValidImageUrl(formState.featuredImageUrl) ||
+      !(await isReachable(formState.featuredImageUrl))
+    ) {
+      errors.featuredImageUrl =
+        'FeaturedImageUrl must be a valid and reachable image URL'
+    }
+
+    if (formState.summary === '') {
+      errors.summary = 'Summary field can not be empty'
+    }
+
+    if (formState.screenshotsUrls.length === 0) {
+      errors.screenshotsUrls = ['Required at least one screenshot url']
+    } else {
+      for (let i = 0; i < formState.screenshotsUrls.length; i++) {
+        const url = formState.screenshotsUrls[i]
+        if (
+          !isValidUrl(url) ||
+          !isValidImageUrl(url) ||
+          !(await isReachable(url))
+        ) {
+          if (!errors.screenshotsUrls)
+            errors.screenshotsUrls = Array(formState.screenshotsUrls.length)
+
+          errors.screenshotsUrls![i] =
+            'All screenshot URLs must be valid and reachable image URLs'
+        }
+      }
+    }
+
+    if (
+      formState.repost &&
+      (!formState.originalAuthor || formState.originalAuthor === '')
+    ) {
+      errors.originalAuthor = 'Original author field can not be empty'
+    }
+
+    if (formState.tags === '') {
+      errors.tags = 'Tags field can not be empty'
+    }
+
+    if (formState.downloadUrls.length === 0) {
+      errors.downloadUrls = ['Required at least one download url']
+    } else {
+      for (let i = 0; i < formState.downloadUrls.length; i++) {
+        const downloadUrl = formState.downloadUrls[i]
+        if (!isValidUrl(downloadUrl.url)) {
+          if (!errors.downloadUrls)
+            errors.downloadUrls = Array(formState.downloadUrls.length)
+
+          errors.downloadUrls![i] = 'Download url must be valid and reachable'
+        }
+      }
+    }
+
+    setFormErrors(errors)
+
+    return Object.keys(errors).length === 0
   }
 
   return (
-    <form className='IBMSMSMBS_Write' onSubmit={handlePublish}>
+    <>
+      {isPublishing && <LoadingSpinner desc='Publishing mod to relays' />}
       <GameDropdown
         options={gameOptions}
-        selected={formState?.game}
-        error={formErrors?.game}
+        selected={formState.game}
+        error={formErrors.game}
         onChange={handleInputChange}
       />
 
@@ -278,46 +411,30 @@ export const ModForm = () => {
         placeholder='Return the banana mod'
         name='title'
         value={formState.title}
-        error={formErrors?.title}
+        error={formErrors.title}
         onChange={handleInputChange}
       />
 
-      <div className='inputLabelWrapperMain'>
-        <label className='form-label labelMain'>Body</label>
-        <div className='inputMain'>
-          <Editor
-            ref={editorRef}
-            markdown={body}
-            placeholder="Here's what this mod is all about"
-            onChange={(md) => {
-              handleInputChange('body', md)
-            }}
-            onError={(payload) => {
-              toast.error('Markdown error. Fix manually in the source mode.')
-              log(true, LogType.Error, payload.error)
-            }}
-          />
-        </div>
-        {typeof formErrors?.body !== 'undefined' && (
-          <InputError message={formErrors?.body} />
-        )}
-        <input
-          name='body'
-          hidden
-          value={encodeURIComponent(formState?.body)}
-          readOnly
-        />
-      </div>
+      <InputField
+        label='Body'
+        type='richtext'
+        placeholder="Here's what this mod is all about"
+        name='body'
+        value={formState.body}
+        error={formErrors.body}
+        onChange={handleInputChange}
+      />
 
-      <InputFieldWithImageUpload
+      <InputField
         label='Featured Image URL'
-        description={`We recommend to upload images to ${MEDIA_OPTIONS[0].host}`}
+        description='We recommend to upload images to https://nostr.build/'
+        type='text'
         inputMode='url'
         placeholder='Image URL'
         name='featuredImageUrl'
         value={formState.featuredImageUrl}
-        error={formErrors?.featuredImageUrl}
-        onInputChange={handleInputChange}
+        error={formErrors.featuredImageUrl}
+        onChange={handleInputChange}
       />
       <InputField
         label='Summary'
@@ -325,7 +442,7 @@ export const ModForm = () => {
         placeholder='This is a quick description of my mod'
         name='summary'
         value={formState.summary}
-        error={formErrors?.summary}
+        error={formErrors.summary}
         onChange={handleInputChange}
       />
       <CheckboxField
@@ -355,7 +472,7 @@ export const ModForm = () => {
             placeholder="Original author's name, npub or nprofile"
             name='originalAuthor'
             value={formState.originalAuthor || ''}
-            error={formErrors?.originalAuthor}
+            error={formErrors.originalAuthor || ''}
             onChange={handleInputChange}
           />
         </>
@@ -381,24 +498,8 @@ export const ModForm = () => {
           </button>
         </div>
         <p className='labelDescriptionMain'>
-          We recommend to upload images to {MEDIA_OPTIONS[0].host}
+          We recommend to upload images to https://nostr.build/
         </p>
-
-        <ImageUpload
-          multiple={true}
-          onChange={(values) => {
-            setFormState((prevState) => ({
-              ...prevState,
-              screenshotsUrls: Array.from(
-                new Set([
-                  ...prevState.screenshotsUrls.filter((url) => url),
-                  ...values
-                ])
-              )
-            }))
-          }}
-        />
-
         {formState.screenshotsUrls.map((url, index) => (
           <Fragment key={`screenShot-${index}`}>
             <ScreenshotUrlFields
@@ -407,16 +508,16 @@ export const ModForm = () => {
               onUrlChange={handleScreenshotUrlChange}
               onRemove={removeScreenshotUrl}
             />
-            {formErrors?.screenshotsUrls &&
-              formErrors?.screenshotsUrls[index] && (
-                <InputError message={formErrors?.screenshotsUrls[index]} />
+            {formErrors.screenshotsUrls &&
+              formErrors.screenshotsUrls[index] && (
+                <InputError message={formErrors.screenshotsUrls[index]} />
               )}
           </Fragment>
         ))}
         {formState.screenshotsUrls.length === 0 &&
-          formErrors?.screenshotsUrls &&
-          formErrors?.screenshotsUrls[0] && (
-            <InputError message={formErrors?.screenshotsUrls[0]} />
+          formErrors.screenshotsUrls &&
+          formErrors.screenshotsUrls[0] && (
+            <InputError message={formErrors.screenshotsUrls[0]} />
           )}
       </div>
       <InputField
@@ -425,7 +526,7 @@ export const ModForm = () => {
         placeholder='Tags'
         name='tags'
         value={formState.tags}
-        error={formErrors?.tags}
+        error={formErrors.tags}
         onChange={handleInputChange}
       />
       <CategoryAutocomplete
@@ -455,230 +556,75 @@ export const ModForm = () => {
         </div>
         <p className='labelDescriptionMain'>
           You can upload your game mod to Github, as an example, and keep
-          updating it there (another option is{' '}
-          <a
-            href='https://catbox.moe/'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            catbox.moe
-          </a>
-          ). Also, it's advisable that you hash your package as well with your
-          nostr public key. Malware scan service suggestion:{' '}
-          <a
-            href='https://virustotal.com'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            https://virustotal.com
-          </a>
+          updating it there (another option is catbox.moe). Also, it's advisable
+          that you hash your package as well with your nostr public key.
         </p>
 
         {formState.downloadUrls.map((download, index) => (
           <Fragment key={`download-${index}`}>
             <DownloadUrlFields
               index={index}
-              title={download.title}
               url={download.url}
               hash={download.hash}
               signatureKey={download.signatureKey}
               malwareScanLink={download.malwareScanLink}
               modVersion={download.modVersion}
               customNote={download.customNote}
-              mediaUrl={download.mediaUrl}
               onUrlChange={handleDownloadUrlChange}
               onRemove={removeDownloadUrl}
             />
-            {formErrors?.downloadUrls && formErrors?.downloadUrls[index] && (
-              <InputError message={formErrors?.downloadUrls[index]} />
+            {formErrors.downloadUrls && formErrors.downloadUrls[index] && (
+              <InputError message={formErrors.downloadUrls[index]} />
             )}
           </Fragment>
         ))}
         {formState.downloadUrls.length === 0 &&
-          formErrors?.downloadUrls &&
-          formErrors?.downloadUrls[0] && (
-            <InputError message={formErrors?.downloadUrls[0]} />
+          formErrors.downloadUrls &&
+          formErrors.downloadUrls[0] && (
+            <InputError message={formErrors.downloadUrls[0]} />
           )}
       </div>
-      <div className='IBMSMSMBSSExtra'>
-        <button
-          className='btn btnMain IBMSMSMBSSExtraBtn'
-          type='button'
-          onClick={handleExtraBoxButtonClick}
-        >
-          Permissions &amp; Details
-        </button>
-        <div
-          className='IBMSMSMBSSExtraBox'
-          ref={extraBoxRef}
-          style={{
-            display: 'none'
-          }}
-        >
-          <p
-            className='labelDescriptionMain'
-            style={{ marginBottom: `10px`, textAlign: `center` }}
-          >
-            What permissions users have with your published mod/post
-          </p>
-          <div className='IBMSMSMBSSExtraBoxElementWrapper'>
-            {Object.keys(MODPERMISSIONS_CONF).map((k) => {
-              const permKey = k as keyof ModPermissions
-              const confKey = k as keyof typeof MODPERMISSIONS_CONF
-              const modPermission = MODPERMISSIONS_CONF[confKey]
-              const value = formState[permKey]
-
-              return (
-                <div className='IBMSMSMBSSExtraBoxElement' key={k}>
-                  <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                    <p>{modPermission.header}</p>
-                  </div>
-                  <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                    <label
-                      htmlFor={`${permKey}_true`}
-                      className='IBMSMSMBSSExtraBoxElementColChoice'
-                    >
-                      <p>
-                        {MODPERMISSIONS_DESC[`${permKey}_true`]}
-                        <br />
-                      </p>
-                      <input
-                        className='IBMSMSMBSSExtraBoxElementColChoiceRadio'
-                        type='radio'
-                        name={permKey}
-                        id={`${permKey}_true`}
-                        value={'true'}
-                        checked={
-                          typeof value !== 'undefined'
-                            ? value === true
-                            : modPermission.default === true
-                        }
-                        onChange={(e) =>
-                          handleRadioChange(
-                            permKey,
-                            e.currentTarget.value === 'true'
-                          )
-                        }
-                      />
-                      <div className='IBMSMSMBSSExtraBoxElementColChoiceBox'></div>
-                    </label>
-                    <label
-                      htmlFor={`${permKey}_false`}
-                      className='IBMSMSMBSSExtraBoxElementColChoice'
-                    >
-                      <p>
-                        {MODPERMISSIONS_DESC[`${permKey}_false`]}
-                        <br />
-                      </p>
-                      <input
-                        className='IBMSMSMBSSExtraBoxElementColChoiceRadio'
-                        type='radio'
-                        id={`${permKey}_false`}
-                        value={'false'}
-                        name={permKey}
-                        checked={
-                          typeof value !== 'undefined'
-                            ? value === false
-                            : modPermission.default === false
-                        }
-                        onChange={(e) =>
-                          handleRadioChange(
-                            permKey,
-                            e.currentTarget.value === 'true'
-                          )
-                        }
-                      />
-                      <div className='IBMSMSMBSSExtraBoxElementColChoiceBox'></div>
-                    </label>
-                  </div>
-                </div>
-              )
-            })}
-            <div className='IBMSMSMBSSExtraBoxElement'>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                <p>Publisher Notes</p>
-              </div>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                <textarea
-                  className='inputMain'
-                  value={formState.publisherNotes || ''}
-                  onChange={(e) =>
-                    handleInputChange('publisherNotes', e.currentTarget.value)
-                  }
-                />
-              </div>
-            </div>
-            <div className='IBMSMSMBSSExtraBoxElement'>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                <p>Extra Credits</p>
-              </div>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                <textarea
-                  className='inputMain'
-                  value={formState.extraCredits || ''}
-                  onChange={(e) =>
-                    handleInputChange('extraCredits', e.currentTarget.value)
-                  }
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div className='IBMSMSMBS_WriteAction'>
         <button
           className='btn btnMain'
           type='button'
           onClick={handleReset}
-          disabled={
-            navigation.state === 'loading' || navigation.state === 'submitting'
-          }
+          disabled={isPublishing}
         >
-          {isEditing ? 'Reset' : 'Clear fields'}
+          {existingModData ? 'Reset' : 'Clear fields'}
         </button>
         <button
           className='btn btnMain'
-          type='submit'
-          disabled={
-            navigation.state === 'loading' || navigation.state === 'submitting'
-          }
+          type='button'
+          onClick={handlePublish}
+          disabled={isPublishing}
         >
-          {navigation.state === 'submitting' ? 'Publishing...' : 'Publish'}
+          Publish
         </button>
       </div>
-      {showTryAgainPopup && (
-        <AlertPopup
-          handleConfirm={handleTryAgainConfirm}
-          handleClose={() => setShowTryAgainPopup(false)}
-          header={'Publish'}
-          label={`Submission timed out. Do you want to try again?`}
-        />
-      )}
       {showConfirmPopup && (
         <AlertPopup
           handleConfirm={handleResetConfirm}
           handleClose={() => setShowConfirmPopup(false)}
           header={'Are you sure?'}
           label={
-            isEditing
+            existingModData
               ? `Are you sure you want to clear all changes?`
               : `Are you sure you want to clear all field data?`
           }
         />
       )}
-    </form>
+    </>
   )
 }
 type DownloadUrlFieldsProps = {
   index: number
   url: string
-  title?: string
   hash: string
   signatureKey: string
   malwareScanLink: string
   modVersion: string
   customNote: string
-  mediaUrl?: string
   onUrlChange: (index: number, field: keyof DownloadUrl, value: string) => void
   onRemove: (index: number) => void
 }
@@ -687,13 +633,11 @@ const DownloadUrlFields = React.memo(
   ({
     index,
     url,
-    title,
     hash,
     signatureKey,
     malwareScanLink,
     modVersion,
     customNote,
-    mediaUrl,
     onUrlChange,
     onRemove
   }: DownloadUrlFieldsProps) => {
@@ -731,28 +675,6 @@ const DownloadUrlFields = React.memo(
             </svg>
           </button>
         </div>
-        <div className='inputWrapperMain'>
-          <div className='inputWrapperMainBox'>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='-96 0 512 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
-            </svg>
-          </div>
-          <input
-            type='text'
-            className='inputMain'
-            name='title'
-            placeholder='Download Title'
-            value={title || ''}
-            onChange={handleChange}
-          />
-          <div className='inputWrapperMainBox'></div>
-        </div>
         <div className='inputWrapperMain'>
           <div className='inputWrapperMainBox'>
             <svg
@@ -863,43 +785,6 @@ const DownloadUrlFields = React.memo(
           />
           <div className='inputWrapperMainBox'></div>
         </div>
-        <div className='inputWrapperMain'>
-          <div className='inputWrapperMainBox'>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='-96 0 512 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
-            </svg>
-          </div>
-          <div
-            style={{
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '10px'
-            }}
-          >
-            <ImageUpload
-              onChange={(values) => {
-                onUrlChange(index, 'mediaUrl', values[0])
-              }}
-            />
-
-            <input
-              type='text'
-              className='inputMain'
-              placeholder='Media URL'
-              name='mediaUrl'
-              value={mediaUrl || ''}
-              onChange={handleChange}
-            />
-          </div>
-          <div className='inputWrapperMainBox'></div>
-        </div>
       </div>
     )
   }
@@ -924,7 +809,7 @@ const ScreenshotUrlFields = React.memo(
           type='text'
           className='inputMain'
           inputMode='url'
-          placeholder='Image URL'
+          placeholder='We recommend to upload images to https://nostr.build/'
           value={url}
           onChange={handleChange}
         />

src/components/NsfwAlertPopup.tsx

@@ -24,10 +24,7 @@ export const NsfwAlertPopup = ({
       <AlertPopup
         header='Confirm'
         label='Are you above 18 years of age?'
-        handleClose={() => {
-          handleConfirm(false)
-          handleClose()
-        }}
+        handleClose={handleClose}
         handleConfirm={(confirm: boolean) => {
           setConfirmNsfw(confirm)
           handleConfirm(confirm)

src/components/PostWarning.tsx

@@ -1,22 +0,0 @@
-interface PostWarningsProps {
-  type: 'user' | 'admin'
-}
-
-export const PostWarnings = ({ type }: PostWarningsProps) => (
-  <div className='IBMSMSMBSSWarning'>
-    <p>
-      {type === 'admin' ? (
-        <>
-          Warning: This post has been blocked/hidden by the site for one of the
-          following reasons:
-          <br />
-          Malware, Not a Mod, Illegal, Spam, Verified Report of Unauthorized
-          Repost.
-          <br />
-        </>
-      ) : (
-        <>Notice: You have blocked this post</>
-      )}
-    </p>
-  </div>
-)

src/components/ProfileSection.tsx

@@ -155,7 +155,7 @@ export const Profile = ({ pubkey }: ProfileProps) => {
                 <div className='IBMSMSMSSS_Author_TopWrapper'>
                   <p className='IBMSMSMSSS_Author_Top_Name'>{displayName}</p>
                   {/* Nip05 can sometimes be an empty object '{}' which causes the error */}
-                  {typeof nip05 === 'string' && nip05 !== '' && (
+                  {typeof nip05 === 'string' && (
                     <p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
                   )}
                 </div>
@@ -191,7 +191,7 @@ export const Profile = ({ pubkey }: ProfileProps) => {
               {typeof nprofile !== 'undefined' && (
                 <ProfileQRButtonWithPopUp nprofile={nprofile} />
               )}
-              {typeof lud16 !== 'undefined' && lud16 !== '' && (
+              {typeof lud16 !== 'undefined' && (
                 <ZapButtonWithPopUp pubkey={pubkey} />
               )}
             </div>
@@ -383,12 +383,7 @@ const FollowButton = ({ pubkey }: FollowButtonProps) => {
     if (userState.auth && userState.user?.pubkey) {
       return userState.user.pubkey as string
     } else {
-      try {
-        return (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-        return null
-      }
+      return (await window.nostr?.getPublicKey()) as string
     }
   }
 

src/components/Zap.tsx

@@ -2,7 +2,6 @@ import { getRelayListForUser } from '@nostr-dev-kit/ndk'
 import { QRCodeSVG } from 'qrcode.react'
 import React, {
   Dispatch,
-  PropsWithChildren,
   ReactNode,
   SetStateAction,
   useCallback,
@@ -20,9 +19,6 @@ import {
   formatNumber,
   getTagValue,
   getZapAmount,
-  log,
-  LogType,
-  timeout,
   unformatNumber
 } from '../utils'
 import { LoadingSpinner } from './LoadingSpinner'
@@ -128,7 +124,6 @@ type ZapQRProps = {
   handleQRExpiry: () => void
   setTotalZapAmount?: Dispatch<SetStateAction<number>>
   setHasZapped?: Dispatch<SetStateAction<boolean>>
-  profileImage?: string
 }
 
 export const ZapQR = React.memo(
@@ -137,10 +132,8 @@ export const ZapQR = React.memo(
     handleClose,
     handleQRExpiry,
     setTotalZapAmount,
-    setHasZapped,
-    profileImage,
-    children
-  }: PropsWithChildren<ZapQRProps>) => {
+    setHasZapped
+  }: ZapQRProps) => {
     const { ndk } = useNDKContext()
 
     useDidMount(() => {
@@ -180,10 +173,7 @@ export const ZapQR = React.memo(
     }
 
     return (
-      <div
-        className='inputLabelWrapperMain inputLabelWrapperMainQR'
-        style={{ alignItems: 'center' }}
-      >
+      <div className='inputLabelWrapperMain' style={{ alignItems: 'center' }}>
         <QRCodeSVG
           className='popUpMainCardBottomQR'
           onClick={onQrCodeClicked}
@@ -191,21 +181,6 @@ export const ZapQR = React.memo(
           height={235}
           width={235}
         />
-        {profileImage && (
-          <div style={{ marginTop: '-20px' }}>
-            <img
-              src={profileImage}
-              alt='Profile Avatar'
-              style={{
-                width: '100%',
-                maxWidth: '50px',
-                borderRadius: '8px',
-                border: 'solid 2px #494949',
-                boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
-              }}
-            />
-          </div>
-        )}
         <label
           className='popUpMainCardBottomLnurl'
           onClick={() => {
@@ -217,7 +192,6 @@ export const ZapQR = React.memo(
           {paymentRequest.pr}
         </label>
         <Timer onTimerExpired={handleQRExpiry} />
-        {children}
       </div>
     )
   }
@@ -284,7 +258,7 @@ export const ZapPopUp = ({
   const [amount, setAmount] = useState<number>(0)
   const [message, setMessage] = useState('')
   const [paymentRequest, setPaymentRequest] = useState<PaymentRequest>()
-  const [receiverMetadata, setRecieverMetadata] = useState<UserProfile>()
+
   const userState = useAppSelector((state) => state.user)
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -294,7 +268,7 @@ export const ZapPopUp = ({
 
   const generatePaymentRequest =
     useCallback(async (): Promise<PaymentRequest | null> => {
-      let userHexKey: string | undefined
+      let userHexKey: string
 
       setIsLoading(true)
       setLoadingSpinnerDesc('Getting user pubkey')
@@ -302,11 +276,7 @@ export const ZapPopUp = ({
       if (userState.auth && userState.user?.pubkey) {
         userHexKey = userState.user.pubkey as string
       } else {
-        try {
-          userHexKey = (await window.nostr?.getPublicKey()) as string
-        } catch (error) {
-          log(true, LogType.Error, `Could not get pubkey`, error)
-        }
+        userHexKey = (await window.nostr?.getPublicKey()) as string
       }
 
       if (!userHexKey) {
@@ -315,7 +285,7 @@ export const ZapPopUp = ({
         return null
       }
 
-      setLoadingSpinnerDesc('Finding receiver metadata')
+      setLoadingSpinnerDesc('finding receiver metadata')
 
       const receiverMetadata = await findMetadata(receiver)
 
@@ -327,17 +297,12 @@ export const ZapPopUp = ({
 
       if (!receiverMetadata?.pubkey) {
         setIsLoading(false)
-        toast.error('Pubkey is missing in receiver metadata!')
+        toast.error('pubkey is missing in receiver metadata!')
         return null
       }
 
-      setRecieverMetadata(receiverMetadata)
-
       // Find the receiver's read relays.
-      const receiverRelays = await Promise.race([
-        getRelayListForUser(receiver, ndk),
-        timeout(2000)
-      ])
+      const receiverRelays = await getRelayListForUser(receiver, ndk)
         .then((ndkRelayList) => {
           if (ndkRelayList) return ndkRelayList.readRelayUrls
           return [] // Return an empty array if ndkRelayList is undefined
@@ -503,7 +468,6 @@ export const ZapPopUp = ({
                       handleQRExpiry={handleQRExpiry}
                       setTotalZapAmount={setTotalZapAmount}
                       setHasZapped={setHasZapped}
-                      profileImage={receiverMetadata?.image}
                     />
                   )}
                   {lastNode}
@@ -584,7 +548,7 @@ export const ZapSplit = ({
   const generatePaymentInvoices = async () => {
     if (!amount) return null
 
-    let userHexKey: string | undefined
+    let userHexKey: string
 
     setIsLoading(true)
     setLoadingSpinnerDesc('Getting user pubkey')
@@ -592,11 +556,7 @@ export const ZapSplit = ({
     if (userState.auth && userState.user?.pubkey) {
       userHexKey = userState.user.pubkey as string
     } else {
-      try {
-        userHexKey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      userHexKey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!userHexKey) {
@@ -654,11 +614,7 @@ export const ZapSplit = ({
 
     if (adminShare > 0 && admin?.pubkey && admin?.lud16) {
       // Find the receiver's read relays.
-      // TODO: NDK should have native timeout in a future release
-      const adminRelays = await Promise.race([
-        getRelayListForUser(admin.pubkey as string, ndk),
-        timeout(2000)
-      ])
+      const adminRelays = await getRelayListForUser(admin.pubkey as string, ndk)
         .then((ndkRelayList) => {
           if (ndkRelayList) return ndkRelayList.readRelayUrls
           return [] // Return an empty array if ndkRelayList is undefined
@@ -759,8 +715,6 @@ export const ZapSplit = ({
       toast.warn('Webln is not present. Use QR code to send zap.')
       setInvoices(paymentInvoices)
     }
-
-    setIsLoading(false)
   }
 
   const removeInvoice = (key: string) => {
@@ -775,56 +729,6 @@ export const ZapSplit = ({
     if (!invoices) return null
 
     const authorInvoice = invoices.get('author')
-    const feedback = (isFirst: boolean) => (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          width: '100%',
-          flexWrap: 'wrap',
-          gridGap: '10px'
-        }}
-      >
-        <div
-          className='btn btnMain'
-          style={{
-            flexGrow: 1,
-            cursor: 'default',
-            background: isFirst ? undefined : 'unset'
-          }}
-        >
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='-64 0 512 512'
-            width='1em'
-            height='1em'
-            fill='currentColor'
-          >
-            <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
-          </svg>
-          1st Invoice
-        </div>
-        <div
-          className='btn btnMain'
-          style={{
-            flexGrow: 1,
-            cursor: 'default',
-            background: isFirst ? 'unset' : undefined
-          }}
-        >
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='-64 0 512 512'
-            width='1em'
-            height='1em'
-            fill='currentColor'
-          >
-            <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
-          </svg>
-          2nd Invoice
-        </div>
-      </div>
-    )
     if (authorInvoice) {
       return (
         <ZapQR
@@ -834,10 +738,7 @@ export const ZapSplit = ({
           handleQRExpiry={() => removeInvoice('author')}
           setTotalZapAmount={setTotalZapAmount}
           setHasZapped={setHasZapped}
-          profileImage={author?.image}
-        >
-          {feedback(true)}
-        </ZapQR>
+        />
       )
     }
 
@@ -852,10 +753,7 @@ export const ZapSplit = ({
             handleClose()
           }}
           handleQRExpiry={() => removeInvoice('admin')}
-          profileImage={admin?.image}
-        >
-          {feedback(false)}
-        </ZapQR>
+        />
       )
     }
 

src/components/comment/Comment.tsx

@@ -1,157 +0,0 @@
-import { NDKKind } from '@nostr-dev-kit/ndk'
-import { formatDate } from 'date-fns'
-import { useDidMount, useNDKContext } from 'hooks'
-import { useState } from 'react'
-import { useParams, useLocation, Link } from 'react-router-dom'
-import { getModPageRoute, getBlogPageRoute, getProfilePageRoute } from 'routes'
-import { CommentEvent, UserProfile } from 'types'
-import { hexToNpub } from 'utils'
-import { Reactions } from './Reactions'
-import { Zap } from './Zap'
-import { nip19 } from 'nostr-tools'
-import { CommentContent } from './CommentContent'
-
-interface CommentProps {
-  comment: CommentEvent
-}
-export const Comment = ({ comment }: CommentProps) => {
-  const { naddr } = useParams()
-  const location = useLocation()
-  const { ndk } = useNDKContext()
-  const isMod = location.pathname.includes('/mod/')
-  const isBlog = location.pathname.includes('/blog/')
-  const baseUrl = naddr
-    ? isMod
-      ? getModPageRoute(naddr)
-      : isBlog
-      ? getBlogPageRoute(naddr)
-      : undefined
-    : undefined
-  const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
-  const [profile, setProfile] = useState<UserProfile>()
-
-  useDidMount(() => {
-    comment.event.author.fetchProfile().then((res) => setProfile(res))
-    ndk
-      .fetchEvents({
-        kinds: [NDKKind.Text, NDKKind.GenericReply],
-        '#e': [comment.event.id]
-      })
-      .then((ndkEventsSet) => {
-        setCommentEvents(
-          Array.from(ndkEventsSet).map((ndkEvent) => ({
-            event: ndkEvent
-          }))
-        )
-      })
-  })
-
-  const profileRoute = getProfilePageRoute(
-    nip19.nprofileEncode({
-      pubkey: comment.event.pubkey
-    })
-  )
-
-  return (
-    <div className='IBMSMSMBSSCL_Comment'>
-      <div className='IBMSMSMBSSCL_CommentTop'>
-        <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
-          <Link
-            className='IBMSMSMBSSCL_CommentTopPP'
-            to={profileRoute}
-            style={{
-              background: `url('${
-                profile?.image || ''
-              }') center / cover no-repeat`
-            }}
-          />
-        </div>
-        <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
-          <div className='IBMSMSMBSSCL_CommentTopDetails'>
-            <Link className='IBMSMSMBSSCL_CTD_Name' to={profileRoute}>
-              {profile?.displayName || profile?.name || ''}{' '}
-            </Link>
-            <Link className='IBMSMSMBSSCL_CTD_Address' to={profileRoute}>
-              {hexToNpub(comment.event.pubkey)}
-            </Link>
-          </div>
-          {comment.event.created_at && (
-            <div className='IBMSMSMBSSCL_CommentActionsDetails'>
-              <a className='IBMSMSMBSSCL_CADTime'>
-                {formatDate(comment.event.created_at * 1000, 'hh:mm aa')}{' '}
-              </a>
-              <a className='IBMSMSMBSSCL_CADDate'>
-                {formatDate(comment.event.created_at * 1000, 'dd/MM/yyyy')}
-              </a>
-            </div>
-          )}
-        </div>
-      </div>
-      <div className='IBMSMSMBSSCL_CommentBottom'>
-        {comment.status && (
-          <p className='IBMSMSMBSSCL_CBTextStatus'>
-            <span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status:</span>
-            {comment.status}
-          </p>
-        )}
-        <CommentContent content={comment.event.content} />
-      </div>
-      <div className='IBMSMSMBSSCL_CommentActions'>
-        <div className='IBMSMSMBSSCL_CommentActionsInside'>
-          <Reactions {...comment.event.rawEvent()} />
-          {/* <div
-            className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost'
-            style={{ cursor: 'not-allowed' }}
-          >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 -64 640 640'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-              className='IBMSMSMBSSCL_CAElementIcon'
-            >
-              <path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
-            </svg>
-            <p className='IBMSMSMBSSCL_CAElementText'>0</p>
-            <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-              <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-            </div>
-          </div> */}
-          {typeof profile?.lud16 !== 'undefined' && profile.lud16 !== '' && (
-            <Zap {...comment.event.rawEvent()} />
-          )}
-          {comment.event.kind === NDKKind.GenericReply && (
-            <>
-              <Link
-                className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReplies'
-                to={baseUrl + comment.event.encode()}
-              >
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='0 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  className='IBMSMSMBSSCL_CAElementIcon'
-                >
-                  <path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
-                </svg>
-                <p className='IBMSMSMBSSCL_CAElementText'>
-                  {commentEvents.length}
-                </p>
-                <p className='IBMSMSMBSSCL_CAElementText'>Replies</p>
-              </Link>
-              <Link
-                className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReply'
-                to={baseUrl + comment.event.encode()}
-              >
-                <p className='IBMSMSMBSSCL_CAElementText'>Reply</p>
-              </Link>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/comment/CommentContent.tsx

@@ -1,18 +0,0 @@
-import { useTextLimit } from 'hooks/useTextLimit'
-interface CommentContentProps {
-  content: string
-}
-export const CommentContent = ({ content }: CommentContentProps) => {
-  const { text, isTextOverflowing, isExpanded, toggle } = useTextLimit(content)
-
-  return (
-    <>
-      <p className='IBMSMSMBSSCL_CBText'>{text}</p>
-      {isTextOverflowing && (
-        <div className='IBMSMSMBSSCL_CBExpand' onClick={toggle}>
-          <p>{isExpanded ? 'Hide' : 'View'} full post</p>
-        </div>
-      )}
-    </>
-  )
-}

src/components/comment/CommentForm.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react'
-
-type CommentFormProps = {
-  handleSubmit: (content: string) => Promise<boolean>
-}
-
-export const CommentForm = ({ handleSubmit }: CommentFormProps) => {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [commentText, setCommentText] = useState('')
-
-  const handleComment = async () => {
-    setIsSubmitting(true)
-    const submitted = await handleSubmit(commentText)
-    if (submitted) setCommentText('')
-    setIsSubmitting(false)
-  }
-
-  return (
-    <div className='IBMSMSMBSSCommentsCreation'>
-      <div className='IBMSMSMBSSCC_Top'>
-        <textarea
-          className='IBMSMSMBSSCC_Top_Box'
-          value={commentText}
-          onChange={(e) => setCommentText(e.target.value)}
-        />
-      </div>
-      <div className='IBMSMSMBSSCC_Bottom'>
-        <button
-          className='btnMain'
-          onClick={handleComment}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? 'Sending...' : 'Comment'}
-          <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-            <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-          </div>
-        </button>
-      </div>
-    </div>
-  )
-}

src/components/comment/CommentsPopup.tsx

@@ -1,335 +0,0 @@
-import { formatDate } from 'date-fns'
-import { useBodyScrollDisable, useNDKContext, useReplies } from 'hooks'
-import { nip19 } from 'nostr-tools'
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  Link,
-  useLoaderData,
-  useLocation,
-  useNavigate,
-  useParams
-} from 'react-router-dom'
-import { getBlogPageRoute, getModPageRoute, getProfilePageRoute } from 'routes'
-import { CommentEvent, UserProfile } from 'types'
-import { CommentsLoaderResult } from 'types/comments'
-import { adjustTextareaHeight, handleCommentSubmit, hexToNpub } from 'utils'
-import { Reactions } from './Reactions'
-import { Zap } from './Zap'
-import { NDKKind } from '@nostr-dev-kit/ndk'
-import { Comment } from './Comment'
-import { useComments } from 'hooks/useComments'
-import { CommentContent } from './CommentContent'
-import { Dots } from 'components/Spinner'
-
-export const CommentsPopup = () => {
-  const { naddr } = useParams()
-  const location = useLocation()
-  const { ndk } = useNDKContext()
-  useBodyScrollDisable(true)
-  const isMod = location.pathname.includes('/mod/')
-  const isBlog = location.pathname.includes('/blog/')
-  const baseUrl = naddr
-    ? isMod
-      ? getModPageRoute(naddr)
-      : isBlog
-      ? getBlogPageRoute(naddr)
-      : undefined
-    : undefined
-
-  const { event } = useLoaderData() as CommentsLoaderResult
-  const {
-    size,
-    parent: replyEvent,
-    isComplete,
-    root: rootEvent
-  } = useReplies(event.tagValue('e'))
-  const isRoot = event.tagValue('a') === event.tagValue('A')
-  const [profile, setProfile] = useState<UserProfile>()
-  const { commentEvents, setCommentEvents } = useComments(
-    event.author.pubkey,
-    undefined,
-    event.id
-  )
-  useEffect(() => {
-    event.author.fetchProfile().then((res) => setProfile(res))
-  }, [event.author])
-  const profileRoute = useMemo(
-    () =>
-      getProfilePageRoute(
-        nip19.nprofileEncode({
-          pubkey: event.pubkey
-        })
-      ),
-    [event.pubkey]
-  )
-
-  const navigate = useNavigate()
-
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [replyText, setReplyText] = useState('')
-
-  const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.currentTarget.value
-    setReplyText(value)
-    adjustTextareaHeight(e.currentTarget)
-  }, [])
-
-  const [visible, setVisible] = useState<CommentEvent[]>([])
-  const discoveredCount = commentEvents.length - visible.length
-  const [isLoading, setIsLoading] = useState(true)
-  useEffect(() => {
-    // Initial loading to indicate comments fetching (stop after 5 seconds)
-    const t = window.setTimeout(() => setIsLoading(false), 5000)
-    return () => {
-      window.clearTimeout(t)
-    }
-  }, [])
-  useEffect(() => {
-    if (isLoading) {
-      setVisible(commentEvents)
-    }
-  }, [commentEvents, isLoading])
-  const handleDiscoveredClick = () => {
-    setVisible(commentEvents)
-  }
-  const handleSubmit = handleCommentSubmit(
-    event,
-    setCommentEvents,
-    setVisible,
-    ndk
-  )
-
-  const handleComment = async () => {
-    setIsSubmitting(true)
-    const submitted = await handleSubmit(replyText)
-    if (submitted) setReplyText('')
-    setIsSubmitting(false)
-  }
-
-  return (
-    <div className='popUpMain'>
-      <div className='ContainerMain'>
-        <div className='popUpMainCardWrapper'>
-          <div className='popUpMainCard'>
-            <div className='popUpMainCardTop'>
-              <div className='popUpMainCardTopInfo'>
-                <h3>Comment replies</h3>
-              </div>
-
-              <div
-                className='popUpMainCardTopClose'
-                onClick={() => navigate('..')}
-              >
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='-96 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  style={{ zIndex: 1 }}
-                >
-                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
-                </svg>
-              </div>
-            </div>
-            <div className='popUpMainCardBottom'>
-              <div className='pUMCB_PrimeComment'>
-                <div className='IBMSMSMBSSCL_Comment'>
-                  <div className='IBMSMSMBSSCL_CommentTopOther'>
-                    <div className='IBMSMSMBSSCL_CTO'>
-                      {replyEvent && (
-                        <Link
-                          style={{
-                            ...(!isComplete ? { pointerEvents: 'none' } : {})
-                          }}
-                          className='IBMSMSMBSSCL_CTOLink'
-                          to={baseUrl + replyEvent.encode()}
-                        >
-                          <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            viewBox='-32 0 512 512'
-                            width='1em'
-                            height='1em'
-                            fill='currentColor'
-                            className='IBMSMSMBSSCL_CTOLinkIcon'
-                          >
-                            <path d='M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z'></path>
-                          </svg>
-                        </Link>
-                      )}
-                      <p className='IBMSMSMBSSCL_CTOText'>
-                        Reply Depth:&nbsp;<span>{size}</span>
-                        {!isComplete && <Dots />}
-                      </p>
-                    </div>
-                    {!isRoot && rootEvent && (
-                      <Link
-                        style={{
-                          ...(!isComplete ? { pointerEvents: 'none' } : {})
-                        }}
-                        className='btn btnMain IBMSMSMBSSCL_CTOBtn'
-                        type='button'
-                        to={baseUrl + rootEvent.encode()}
-                      >
-                        Main Post {!isComplete && <Dots />}
-                      </Link>
-                    )}
-                  </div>
-                  <div className='IBMSMSMBSSCL_CommentTop'>
-                    <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
-                      <Link
-                        className='IBMSMSMBSSCL_CommentTopPP'
-                        to={profileRoute}
-                        style={{
-                          background: `url('${
-                            profile?.image || ''
-                          }') center / cover no-repeat`
-                        }}
-                      />
-                    </div>
-                    <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
-                      <div className='IBMSMSMBSSCL_CommentTopDetails'>
-                        <Link
-                          className='IBMSMSMBSSCL_CTD_Name'
-                          to={profileRoute}
-                        >
-                          {profile?.displayName || profile?.name || ''}{' '}
-                        </Link>
-                        <Link
-                          className='IBMSMSMBSSCL_CTD_Address'
-                          to={profileRoute}
-                        >
-                          {hexToNpub(event.pubkey)}
-                        </Link>
-                      </div>
-                      {event.created_at && (
-                        <div className='IBMSMSMBSSCL_CommentActionsDetails'>
-                          <a className='IBMSMSMBSSCL_CADTime'>
-                            {formatDate(event.created_at * 1000, 'hh:mm aa')}{' '}
-                          </a>
-                          <a className='IBMSMSMBSSCL_CADDate'>
-                            {formatDate(event.created_at * 1000, 'dd/MM/yyyy')}
-                          </a>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className='IBMSMSMBSSCL_CommentBottom'>
-                    <CommentContent content={event.content} />
-                  </div>
-                  <div className='IBMSMSMBSSCL_CommentActions'>
-                    <div className='IBMSMSMBSSCL_CommentActionsInside'>
-                      <Reactions {...event.rawEvent()} />
-
-                      {/* <div
-                        className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost'
-                        style={{ cursor: 'not-allowed' }}
-                      >
-                        <svg
-                          xmlns='http://www.w3.org/2000/svg'
-                          viewBox='0 -64 640 640'
-                          width='1em'
-                          height='1em'
-                          fill='currentColor'
-                          className='IBMSMSMBSSCL_CAElementIcon'
-                        >
-                          <path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
-                        </svg>
-                        <p className='IBMSMSMBSSCL_CAElementText'>0</p>
-                        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-                          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-                        </div>
-                      </div> */}
-
-                      {typeof profile?.lud16 !== 'undefined' &&
-                        profile.lud16 !== '' && <Zap {...event.rawEvent()} />}
-
-                      {event.kind === NDKKind.GenericReply && (
-                        <>
-                          <span className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReplies'>
-                            <svg
-                              xmlns='http://www.w3.org/2000/svg'
-                              viewBox='0 0 512 512'
-                              width='1em'
-                              height='1em'
-                              fill='currentColor'
-                              className='IBMSMSMBSSCL_CAElementIcon'
-                            >
-                              <path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
-                            </svg>
-                            <p className='IBMSMSMBSSCL_CAElementText'>
-                              {commentEvents.length}
-                            </p>
-                            <p className='IBMSMSMBSSCL_CAElementText'>
-                              Replies
-                            </p>
-                          </span>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='pUMCB_CommentToPrime'>
-                <div className='IBMSMSMBSSCC_Top'>
-                  <textarea
-                    className='IBMSMSMBSSCC_Top_Box postSocialTextarea'
-                    placeholder='Got something to say?'
-                    value={replyText}
-                    onChange={handleChange}
-                    style={{ height: '0px' }}
-                  ></textarea>
-                </div>
-                <div className='IBMSMSMBSSCC_Bottom'>
-                  {/* <a className='IBMSMSMBSSCC_BottomButton'>Quote-Repost</a> */}
-                  <button
-                    onClick={handleComment}
-                    disabled={isSubmitting}
-                    className='IBMSMSMBSSCC_BottomButton'
-                  >
-                    {isSubmitting ? 'Replying...' : 'Reply'}
-                    <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-                      <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-              {commentEvents.length > 0 && (
-                <>
-                  <h3 className='IBMSMSMBSSCL_CommentNoteRepliesTitle'>
-                    Replies
-                    <button
-                      type='button'
-                      className='btnMain IBMSMSMBSSCL_CommentNoteRepliesTitleBtn'
-                      onClick={
-                        discoveredCount ? handleDiscoveredClick : undefined
-                      }
-                    >
-                      <span>
-                        {isLoading ? (
-                          <>
-                            Discovering replies
-                            <Dots />
-                          </>
-                        ) : discoveredCount ? (
-                          <>Load {discoveredCount} discovered replies</>
-                        ) : (
-                          <>No new replies</>
-                        )}
-                      </span>
-                    </button>
-                  </h3>
-                  <div className='pUMCB_RepliesToPrime'>
-                    {commentEvents.map((reply) => (
-                      <Comment key={reply.event.id} comment={reply} />
-                    ))}
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/comment/Filter.tsx

@@ -1,79 +0,0 @@
-import React, { Dispatch, SetStateAction } from 'react'
-import { AuthorFilterEnum, SortByEnum } from 'types'
-
-export type FilterOptions = {
-  sort: SortByEnum
-  author: AuthorFilterEnum
-}
-
-type FilterProps = {
-  filterOptions: FilterOptions
-  setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
-}
-
-export const Filter = React.memo(
-  ({ filterOptions, setFilterOptions }: FilterProps) => {
-    return (
-      <div className='FiltersMain'>
-        <div className='FiltersMainElement'>
-          <div className='dropdown dropdownMain'>
-            <button
-              className='btn dropdown-toggle btnMain btnMainDropdown'
-              aria-expanded='false'
-              data-bs-toggle='dropdown'
-              type='button'
-            >
-              {filterOptions.sort}
-            </button>
-
-            <div className='dropdown-menu dropdownMainMenu'>
-              {Object.values(SortByEnum).map((item) => (
-                <div
-                  key={`sortBy-${item}`}
-                  className='dropdown-item dropdownMainMenuItem'
-                  onClick={() =>
-                    setFilterOptions((prev) => ({
-                      ...prev,
-                      sort: item
-                    }))
-                  }
-                >
-                  {item}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className='FiltersMainElement'>
-          <div className='dropdown dropdownMain'>
-            <button
-              className='btn dropdown-toggle btnMain btnMainDropdown'
-              aria-expanded='false'
-              data-bs-toggle='dropdown'
-              type='button'
-            >
-              {filterOptions.author}
-            </button>
-
-            <div className='dropdown-menu dropdownMainMenu'>
-              {Object.values(AuthorFilterEnum).map((item) => (
-                <div
-                  key={`sortBy-${item}`}
-                  className='dropdown-item dropdownMainMenuItem'
-                  onClick={() =>
-                    setFilterOptions((prev) => ({
-                      ...prev,
-                      author: item
-                    }))
-                  }
-                >
-                  {item}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-)

src/components/comment/Reactions.tsx

@@ -1,68 +0,0 @@
-import { NostrEvent } from '@nostr-dev-kit/ndk'
-import { Dots } from 'components/Spinner'
-import { useReactions } from 'hooks'
-
-export const Reactions = (props: NostrEvent) => {
-  const {
-    isDataLoaded,
-    likesCount,
-    disLikesCount,
-    handleReaction,
-    hasReactedPositively,
-    hasReactedNegatively
-  } = useReactions({
-    pubkey: props.pubkey,
-    eTag: props.id!
-  })
-
-  return (
-    <>
-      <div
-        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEUp ${
-          hasReactedPositively ? 'IBMSMSMBSSCL_CAEUpActive' : ''
-        }`}
-        onClick={isDataLoaded ? () => handleReaction(true) : undefined}
-      >
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          viewBox='0 0 512 512'
-          width='1em'
-          height='1em'
-          fill='currentColor'
-          className='IBMSMSMBSSCL_CAElementIcon'
-        >
-          <path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
-        </svg>
-        <p className='IBMSMSMBSSCL_CAElementText'>
-          {isDataLoaded ? likesCount : <Dots />}
-        </p>
-        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-        </div>
-      </div>
-      <div
-        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEDown ${
-          hasReactedNegatively ? 'IBMSMSMBSSCL_CAEDownActive' : ''
-        }`}
-        onClick={isDataLoaded ? () => handleReaction() : undefined}
-      >
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          viewBox='0 0 512 512'
-          width='1em'
-          height='1em'
-          fill='currentColor'
-          className='IBMSMSMBSSCL_CAElementIcon'
-        >
-          <path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
-        </svg>
-        <p className='IBMSMSMBSSCL_CAElementText'>
-          {isDataLoaded ? disLikesCount : <Dots />}
-        </p>
-        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-        </div>
-      </div>
-    </>
-  )
-}

src/components/comment/Zap.tsx

@@ -1,76 +0,0 @@
-import { NostrEvent } from '@nostr-dev-kit/ndk'
-import { ZapPopUp } from 'components/Zap'
-import {
-  useAppSelector,
-  useNDKContext,
-  useBodyScrollDisable,
-  useDidMount
-} from 'hooks'
-import { useState } from 'react'
-import { toast } from 'react-toastify'
-import { abbreviateNumber } from 'utils'
-
-export const Zap = (props: NostrEvent) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [totalZappedAmount, setTotalZappedAmount] = useState(0)
-  const [hasZapped, setHasZapped] = useState(false)
-
-  const userState = useAppSelector((state) => state.user)
-  const { getTotalZapAmount } = useNDKContext()
-
-  useBodyScrollDisable(isOpen)
-
-  useDidMount(() => {
-    getTotalZapAmount(
-      props.pubkey,
-      props.id!,
-      undefined,
-      userState.user?.pubkey as string
-    )
-      .then((res) => {
-        setTotalZappedAmount(res.accumulatedZapAmount)
-        setHasZapped(res.hasZapped)
-      })
-      .catch((err) => {
-        toast.error(err.message || err)
-      })
-  })
-
-  return (
-    <>
-      <div
-        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt ${
-          hasZapped ? 'IBMSMSMBSSCL_CAEBoltActive' : ''
-        }`}
-        onClick={() => setIsOpen(true)}
-      >
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          viewBox='-64 0 512 512'
-          width='1em'
-          height='1em'
-          fill='currentColor'
-          className='IBMSMSMBSSCL_CAElementIcon'
-        >
-          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
-        </svg>
-        <p className='IBMSMSMBSSCL_CAElementText'>
-          {abbreviateNumber(totalZappedAmount)}
-        </p>
-        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
-          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
-        </div>
-      </div>
-      {isOpen && (
-        <ZapPopUp
-          title='Tip/Zap'
-          receiver={props.pubkey}
-          eventId={props.id}
-          handleClose={() => setIsOpen(false)}
-          setTotalZapAmount={setTotalZappedAmount}
-          setHasZapped={setHasZapped}
-        />
-      )}
-    </>
-  )
-}

src/components/comment/index.tsx

@@ -1,20 +1,48 @@
-import { Dots } from 'components/Spinner'
-import { useNDKContext } from 'hooks'
+import { NDKEvent } from '@nostr-dev-kit/ndk'
+import { Dots, Spinner } from 'components/Spinner'
+import { ZapPopUp } from 'components/Zap'
+import { formatDate } from 'date-fns'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext,
+  useReactions
+} from 'hooks'
 import { useComments } from 'hooks/useComments'
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { useLoaderData } from 'react-router-dom'
+import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
+import { Link } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import { getProfilePageRoute } from 'routes'
 import {
   Addressable,
-  AuthorFilterEnum,
-  BlogPageLoaderResult,
   CommentEvent,
-  ModPageLoaderResult,
-  SortByEnum
-} from 'types'
-import { handleCommentSubmit } from 'utils'
-import { Filter, FilterOptions } from './Filter'
-import { CommentForm } from './CommentForm'
-import { Comment } from './Comment'
+  CommentEventStatus,
+  UserProfile
+} from 'types/index.ts'
+import { abbreviateNumber, hexToNpub, log, LogType, now } from 'utils'
+
+enum SortByEnum {
+  Latest = 'Latest',
+  Oldest = 'Oldest'
+}
+
+enum AuthorFilterEnum {
+  All_Comments = 'All Comments',
+  Creator_Comments = 'Creator Comments'
+}
+
+type FilterOptions = {
+  sort: SortByEnum
+  author: AuthorFilterEnum
+}
 
 type Props = {
   addressable: Addressable
@@ -22,14 +50,11 @@ type Props = {
 }
 
 export const Comments = ({ addressable, setCommentCount }: Props) => {
-  const { ndk } = useNDKContext()
+  const { ndk, publish } = useNDKContext()
   const { commentEvents, setCommentEvents } = useComments(
     addressable.author,
     addressable.aTag
   )
-  const { event } = useLoaderData() as
-    | ModPageLoaderResult
-    | BlogPageLoaderResult
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
     sort: SortByEnum.Latest,
     author: AuthorFilterEnum.All_Comments
@@ -48,16 +73,122 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     setCommentCount(commentEvents.length)
   }, [commentEvents, setCommentCount])
 
+  const userState = useAppSelector((state) => state.user)
+
+  const handleSubmit = async (content: string): Promise<boolean> => {
+    if (content === '') return false
+
+    let pubkey: string
+
+    if (userState.auth && userState.user?.pubkey) {
+      pubkey = userState.user.pubkey as string
+    } else {
+      pubkey = (await window.nostr?.getPublicKey()) as string
+    }
+
+    if (!pubkey) {
+      toast.error('Could not get user pubkey')
+      return false
+    }
+
+    const unsignedEvent: UnsignedEvent = {
+      content: content,
+      pubkey: pubkey,
+      kind: kinds.ShortTextNote,
+      created_at: now(),
+      tags: [
+        ['e', addressable.id],
+        ['a', addressable.aTag],
+        ['p', addressable.author]
+      ]
+    }
+
+    const signedEvent = await window.nostr
+      ?.signEvent(unsignedEvent)
+      .then((event) => event as Event)
+      .catch((err) => {
+        toast.error('Failed to sign the event!')
+        log(true, LogType.Error, 'Failed to sign the event!', err)
+        return null
+      })
+
+    if (!signedEvent) return false
+
+    setCommentEvents((prev) => [
+      {
+        ...signedEvent,
+        status: CommentEventStatus.Publishing
+      },
+      ...prev
+    ])
+
+    const ndkEvent = new NDKEvent(ndk, signedEvent)
+    publish(ndkEvent)
+      .then((publishedOnRelays) => {
+        if (publishedOnRelays.length === 0) {
+          setCommentEvents((prev) =>
+            prev.map((event) => {
+              if (event.id === signedEvent.id) {
+                return {
+                  ...event,
+                  status: CommentEventStatus.Failed
+                }
+              }
+
+              return event
+            })
+          )
+        } else {
+          setCommentEvents((prev) =>
+            prev.map((event) => {
+              if (event.id === signedEvent.id) {
+                return {
+                  ...event,
+                  status: CommentEventStatus.Published
+                }
+              }
+
+              return event
+            })
+          )
+        }
+
+        // when an event is successfully published remove the status from it after 15 seconds
+        setTimeout(() => {
+          setCommentEvents((prev) =>
+            prev.map((event) => {
+              if (event.id === signedEvent.id) {
+                delete event.status
+              }
+
+              return event
+            })
+          )
+        }, 15000)
+      })
+      .catch((err) => {
+        console.error('An error occurred in publishing comment', err)
+        setCommentEvents((prev) =>
+          prev.map((event) => {
+            if (event.id === signedEvent.id) {
+              return {
+                ...event,
+                status: CommentEventStatus.Failed
+              }
+            }
+
+            return event
+          })
+        )
+      })
+
+    return true
+  }
+
   const handleDiscoveredClick = () => {
     setVisible(commentEvents)
   }
   const [visible, setVisible] = useState<CommentEvent[]>([])
-  const handleSubmit = handleCommentSubmit(
-    event,
-    setCommentEvents,
-    setVisible,
-    ndk
-  )
   useEffect(() => {
     if (isLoading) {
       setVisible(commentEvents)
@@ -68,22 +199,14 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     let filteredComments = visible
     if (filterOptions.author === AuthorFilterEnum.Creator_Comments) {
       filteredComments = filteredComments.filter(
-        (comment) => comment.event.pubkey === addressable.author
+        (comment) => comment.pubkey === addressable.author
       )
     }
 
     if (filterOptions.sort === SortByEnum.Latest) {
-      filteredComments.sort((a, b) =>
-        a.event.created_at && b.event.created_at
-          ? b.event.created_at - a.event.created_at
-          : 0
-      )
+      filteredComments.sort((a, b) => b.created_at - a.created_at)
     } else if (filterOptions.sort === SortByEnum.Oldest) {
-      filteredComments.sort((a, b) =>
-        a.event.created_at && b.event.created_at
-          ? a.event.created_at - b.event.created_at
-          : 0
-      )
+      filteredComments.sort((a, b) => a.created_at - b.created_at)
     }
 
     return filteredComments
@@ -97,35 +220,380 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
         {/* Hide comment form if aTag is missing */}
         {!!addressable.aTag && <CommentForm handleSubmit={handleSubmit} />}
         <div>
-          <button
-            type='button'
-            className='btnMain'
-            onClick={discoveredCount ? handleDiscoveredClick : undefined}
-          >
-            <span>
-              {isLoading ? (
-                <>
-                  Discovering comments
-                  <Dots />
-                </>
-              ) : discoveredCount ? (
-                <>Load {discoveredCount} discovered comments</>
-              ) : (
-                <>No new comments</>
-              )}
-            </span>
-          </button>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <button
+              type='button'
+              className='btnMain'
+              onClick={discoveredCount ? handleDiscoveredClick : undefined}
+            >
+              <span>Load {discoveredCount} discovered comments</span>
+            </button>
+          )}
         </div>
         <Filter
           filterOptions={filterOptions}
           setFilterOptions={setFilterOptions}
         />
         <div className='IBMSMSMBSSCommentsList'>
-          {comments.map((comment) => (
-            <Comment key={comment.event.id} comment={comment} />
+          {comments.map((event) => (
+            <Comment key={event.id} {...event} />
           ))}
         </div>
       </div>
     </div>
   )
 }
+
+type CommentFormProps = {
+  handleSubmit: (content: string) => Promise<boolean>
+}
+
+const CommentForm = ({ handleSubmit }: CommentFormProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [commentText, setCommentText] = useState('')
+
+  const handleComment = async () => {
+    setIsSubmitting(true)
+    const submitted = await handleSubmit(commentText)
+    if (submitted) setCommentText('')
+    setIsSubmitting(false)
+  }
+
+  return (
+    <div className='IBMSMSMBSSCommentsCreation'>
+      <div className='IBMSMSMBSSCC_Top'>
+        <textarea
+          className='IBMSMSMBSSCC_Top_Box'
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+        />
+      </div>
+      <div className='IBMSMSMBSSCC_Bottom'>
+        <button
+          className='btnMain'
+          onClick={handleComment}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? 'Sending...' : 'Comment'}
+          <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+            <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+          </div>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+type FilterProps = {
+  filterOptions: FilterOptions
+  setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
+}
+
+const Filter = React.memo(
+  ({ filterOptions, setFilterOptions }: FilterProps) => {
+    return (
+      <div className='FiltersMain'>
+        <div className='FiltersMainElement'>
+          <div className='dropdown dropdownMain'>
+            <button
+              className='btn dropdown-toggle btnMain btnMainDropdown'
+              aria-expanded='false'
+              data-bs-toggle='dropdown'
+              type='button'
+            >
+              {filterOptions.sort}
+            </button>
+
+            <div className='dropdown-menu dropdownMainMenu'>
+              {Object.values(SortByEnum).map((item) => (
+                <div
+                  key={`sortBy-${item}`}
+                  className='dropdown-item dropdownMainMenuItem'
+                  onClick={() =>
+                    setFilterOptions((prev) => ({
+                      ...prev,
+                      sort: item
+                    }))
+                  }
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className='FiltersMainElement'>
+          <div className='dropdown dropdownMain'>
+            <button
+              className='btn dropdown-toggle btnMain btnMainDropdown'
+              aria-expanded='false'
+              data-bs-toggle='dropdown'
+              type='button'
+            >
+              {filterOptions.author}
+            </button>
+
+            <div className='dropdown-menu dropdownMainMenu'>
+              {Object.values(AuthorFilterEnum).map((item) => (
+                <div
+                  key={`sortBy-${item}`}
+                  className='dropdown-item dropdownMainMenuItem'
+                  onClick={() =>
+                    setFilterOptions((prev) => ({
+                      ...prev,
+                      author: item
+                    }))
+                  }
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+const Comment = (props: CommentEvent) => {
+  const { findMetadata } = useNDKContext()
+  const [profile, setProfile] = useState<UserProfile>()
+
+  useDidMount(() => {
+    findMetadata(props.pubkey).then((res) => {
+      setProfile(res)
+    })
+  })
+
+  const profileRoute = getProfilePageRoute(
+    nip19.nprofileEncode({
+      pubkey: props.pubkey
+    })
+  )
+
+  return (
+    <div className='IBMSMSMBSSCL_Comment'>
+      <div className='IBMSMSMBSSCL_CommentTop'>
+        <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
+          <Link
+            className='IBMSMSMBSSCL_CommentTopPP'
+            to={profileRoute}
+            style={{
+              background: `url('${
+                profile?.image || ''
+              }') center / cover no-repeat`
+            }}
+          />
+        </div>
+        <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
+          <div className='IBMSMSMBSSCL_CommentTopDetails'>
+            <Link className='IBMSMSMBSSCL_CTD_Name' to={profileRoute}>
+              {profile?.displayName || profile?.name || ''}{' '}
+            </Link>
+            <Link className='IBMSMSMBSSCL_CTD_Address' to={profileRoute}>
+              {hexToNpub(props.pubkey)}
+            </Link>
+          </div>
+          <div className='IBMSMSMBSSCL_CommentActionsDetails'>
+            <a className='IBMSMSMBSSCL_CADTime'>
+              {formatDate(props.created_at * 1000, 'hh:mm aa')}{' '}
+            </a>
+            <a className='IBMSMSMBSSCL_CADDate'>
+              {formatDate(props.created_at * 1000, 'dd/MM/yyyy')}
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className='IBMSMSMBSSCL_CommentBottom'>
+        {props.status && (
+          <p className='IBMSMSMBSSCL_CBTextStatus'>
+            <span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status:</span>
+            {props.status}
+          </p>
+        )}
+        <p className='IBMSMSMBSSCL_CBText'>{props.content}</p>
+      </div>
+      <div className='IBMSMSMBSSCL_CommentActions'>
+        <div className='IBMSMSMBSSCL_CommentActionsInside'>
+          <Reactions {...props} />
+          <div
+            className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost'
+            style={{ cursor: 'not-allowed' }}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 -64 640 640'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+              className='IBMSMSMBSSCL_CAElementIcon'
+            >
+              <path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
+            </svg>
+            <p className='IBMSMSMBSSCL_CAElementText'>0</p>
+            <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+              <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+            </div>
+          </div>
+          <Zap {...props} />
+          <div
+            className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReplies'
+            style={{ cursor: 'not-allowed' }}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+              className='IBMSMSMBSSCL_CAElementIcon'
+            >
+              <path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
+            </svg>
+            <p className='IBMSMSMBSSCL_CAElementText'>0</p>
+            <p className='IBMSMSMBSSCL_CAElementText'>Replies</p>
+          </div>
+          <div
+            className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReply'
+            style={{ cursor: 'not-allowed' }}
+          >
+            <p className='IBMSMSMBSSCL_CAElementText'>Reply</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Reactions = (props: Event) => {
+  const {
+    isDataLoaded,
+    likesCount,
+    disLikesCount,
+    handleReaction,
+    hasReactedPositively,
+    hasReactedNegatively
+  } = useReactions({
+    pubkey: props.pubkey,
+    eTag: props.id
+  })
+
+  return (
+    <>
+      <div
+        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEUp ${
+          hasReactedPositively ? 'IBMSMSMBSSCL_CAEUpActive' : ''
+        }`}
+        onClick={isDataLoaded ? () => handleReaction(true) : undefined}
+      >
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 512 512'
+          width='1em'
+          height='1em'
+          fill='currentColor'
+          className='IBMSMSMBSSCL_CAElementIcon'
+        >
+          <path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
+        </svg>
+        <p className='IBMSMSMBSSCL_CAElementText'>
+          {isDataLoaded ? likesCount : <Dots />}
+        </p>
+        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+        </div>
+      </div>
+      <div
+        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEDown ${
+          hasReactedNegatively ? 'IBMSMSMBSSCL_CAEDownActive' : ''
+        }`}
+        onClick={isDataLoaded ? () => handleReaction() : undefined}
+      >
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 512 512'
+          width='1em'
+          height='1em'
+          fill='currentColor'
+          className='IBMSMSMBSSCL_CAElementIcon'
+        >
+          <path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
+        </svg>
+        <p className='IBMSMSMBSSCL_CAElementText'>
+          {isDataLoaded ? disLikesCount : <Dots />}
+        </p>
+        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const Zap = (props: Event) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [totalZappedAmount, setTotalZappedAmount] = useState(0)
+  const [hasZapped, setHasZapped] = useState(false)
+
+  const userState = useAppSelector((state) => state.user)
+  const { getTotalZapAmount } = useNDKContext()
+
+  useBodyScrollDisable(isOpen)
+
+  useDidMount(() => {
+    getTotalZapAmount(
+      props.pubkey,
+      props.id,
+      undefined,
+      userState.user?.pubkey as string
+    )
+      .then((res) => {
+        setTotalZappedAmount(res.accumulatedZapAmount)
+        setHasZapped(res.hasZapped)
+      })
+      .catch((err) => {
+        toast.error(err.message || err)
+      })
+  })
+
+  return (
+    <>
+      <div
+        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt ${
+          hasZapped ? 'IBMSMSMBSSCL_CAEBoltActive' : ''
+        }`}
+        onClick={() => setIsOpen(true)}
+      >
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='-64 0 512 512'
+          width='1em'
+          height='1em'
+          fill='currentColor'
+          className='IBMSMSMBSSCL_CAElementIcon'
+        >
+          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
+        </svg>
+        <p className='IBMSMSMBSSCL_CAElementText'>
+          {abbreviateNumber(totalZappedAmount)}
+        </p>
+        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+        </div>
+      </div>
+      {isOpen && (
+        <ZapPopUp
+          title='Tip/Zap'
+          receiver={props.pubkey}
+          eventId={props.id}
+          handleClose={() => setIsOpen(false)}
+          setTotalZapAmount={setTotalZappedAmount}
+          setHasZapped={setHasZapped}
+        />
+      )}
+    </>
+  )
+}

src/constants.ts

@@ -123,4 +123,3 @@ export const FALLBACK_PROFILE_IMAGE =
   'https://image.nostr.build/a305f4b43f74af3c6dcda42e6a798105a56ac1e3e7b74d7bef171896b3ba7520.png'
 
 export const PROFILE_BLOG_FILTER_LIMIT = 20
-export const MAX_VISIBLE_TEXT_PER_COMMENT = 500

src/contexts/NDKContext.tsx

@@ -111,7 +111,7 @@ export const NDKContextProvider = ({ children }: { children: ReactNode }) => {
   }
 
   const ndk = useMemo(() => {
-    localStorage.removeItem('debug')
+    localStorage.setItem('debug', '*')
     const dexieAdapter = new NDKCacheAdapterDexie({ dbName: 'degmod-db' })
     dexieAdapter.locking = true
     const ndk = new NDK({
@@ -252,7 +252,7 @@ export const NDKContextProvider = ({ children }: { children: ReactNode }) => {
       })
       .catch((err) => {
         log(
-          false, // Too many failed requests, turned off for clarity
+          true,
           LogType.Error,
           `An error occurred in fetching user's (${hexKey}) ${userRelaysType}`,
           err
@@ -369,14 +369,16 @@ export const NDKContextProvider = ({ children }: { children: ReactNode }) => {
   const publish = async (event: NDKEvent): Promise<string[]> => {
     if (!event.sig) throw new Error('Before publishing first sign the event!')
 
-    try {
-      const res = await event.publish(undefined, 10000)
-      const relaysPublishedOn = Array.from(res)
-      return relaysPublishedOn.map((relay) => relay.url)
-    } catch (err) {
-      console.error(`An error occurred in publishing event`, err)
-      return []
-    }
+    return event
+      .publish(undefined, 10000)
+      .then((res) => {
+        const relaysPublishedOn = Array.from(res)
+        return relaysPublishedOn.map((relay) => relay.url)
+      })
+      .catch((err) => {
+        console.error(`An error occurred in publishing event`, err)
+        return []
+      })
   }
 
   /**

src/controllers/image/index.ts

@@ -1,74 +0,0 @@
-import { DropzoneOptions } from 'react-dropzone'
-import { NostrCheckServer } from './nostrcheck-server'
-import { BaseError } from 'types'
-
-export interface MediaOperations {
-  post: (file: File) => Promise<string>
-}
-export type MediaStrategy = Omit<MediaOperations, 'auth'>
-
-export interface MediaOption {
-  name: string
-  host: string
-  type: 'nostrcheck-server' | 'route96'
-}
-
-// nostr.build based dropzone options
-export const MEDIA_DROPZONE_OPTIONS: DropzoneOptions = {
-  maxSize: 7000000,
-  accept: {
-    'image/*': ['.jpeg', '.png', '.jpg', '.gif', '.webp']
-  }
-}
-
-export const MEDIA_OPTIONS: MediaOption[] = [
-  // {
-  //   name: 'nostr.build',
-  //   host: 'https://nostr.build/',
-  //   type: 'nostrcheck-server'
-  // },
-  {
-    name: 'nostrcheck.me',
-    host: 'https://nostrcheck.me/',
-    type: 'nostrcheck-server'
-  },
-  {
-    name: 'nostpic.com',
-    host: 'https://nostpic.com/',
-    type: 'nostrcheck-server'
-  },
-  {
-    name: 'files.sovbit.host',
-    host: 'https://files.sovbit.host/',
-    type: 'nostrcheck-server'
-  }
-  // {
-  //   name: 'void.cat',
-  //   host: 'https://void.cat/',
-  //   type: 'route96'
-  // }
-]
-
-enum ImageErrorType {
-  'TYPE_MISSING' = 'Media Option must include a type.'
-}
-
-export class ImageController implements MediaStrategy {
-  post: (file: File) => Promise<string>
-
-  constructor(mediaOption: MediaOption) {
-    let strategy: MediaStrategy
-    switch (mediaOption.type) {
-      case 'nostrcheck-server':
-        strategy = new NostrCheckServer(mediaOption.host)
-        this.post = strategy.post
-        break
-
-      case 'route96':
-        throw new Error('Not implemented.')
-
-      default:
-        throw new BaseError(ImageErrorType.TYPE_MISSING)
-    }
-  }
-}

src/controllers/image/nostrcheck-server.ts

@@ -1,166 +0,0 @@
-import axios, { isAxiosError } from 'axios'
-import { NostrEvent, NDKKind } from '@nostr-dev-kit/ndk'
-import { type MediaOperations } from '.'
-import { store } from 'store'
-import { log, LogType, now } from 'utils'
-import { BaseError, handleError } from 'types'
-
-// https://github.com/quentintaranpino/nostrcheck-server/blob/main/DOCS.md#media-post
-// Response object (other fields omitted for brevity)
-// {
-//     "status": "success",
-//     "nip94_event": {
-//         "tags": [
-//             [
-//                 "url",
-//                 "https://nostrcheck.me/media/62c76eb094369d938f5895442eef7f53ebbf019f69707d64e77d4d182b609309/c35277dbcedebb0e3b80361762c8baadb66dcdfb6396949e50630159a472c3b2.webp"
-//             ],
-//         ],
-//     }
-// }
-
-interface Response {
-  status: 'success' | string
-  nip94_event?: {
-    tags?: string[][]
-  }
-}
-
-enum HandledErrorType {
-  'PUBKEY' = 'Failed to get public key.',
-  'SIGN' = 'Failed to sign the event.',
-  'AXIOS_REQ' = 'Image upload failed. Try another host from the dropdown.',
-  'AXIOS_RES' = 'Image upload failed. Reason: ',
-  'AXIOS_ERR' = 'Image upload failed.',
-  'NOSTR_CHECK_NO_SUCCESS' = 'Image upload was unsuccesfull.',
-  'NOSTR_CHECK_BAD_EVENT' = 'Image upload failed. Please try again.'
-}
-
-export class NostrCheckServer implements MediaOperations {
-  #media = 'api/v2/media'
-  #url: string
-
-  constructor(url: string) {
-    this.#url = url[url.length - 1] === '/' ? url : `${url}/`
-  }
-
-  post = async (file: File) => {
-    const url = `${this.#url}${this.#media}`
-    const auth = await this.auth()
-    try {
-      const response = await axios.postForm<Response>(
-        url,
-        {
-          uploadType: 'media',
-          file: file
-        },
-        {
-          headers: {
-            Authorization: 'Nostr ' + auth,
-            'Content-Type': 'multipart/form-data'
-          },
-          responseType: 'json'
-        }
-      )
-
-      if (response.data.status !== 'success') {
-        throw new BaseError(HandledErrorType.NOSTR_CHECK_NO_SUCCESS, {
-          context: { ...response.data }
-        })
-      }
-
-      if (
-        response.data &&
-        response.data.nip94_event &&
-        response.data.nip94_event.tags &&
-        response.data.nip94_event.tags.length
-      ) {
-        // Return first 'url' tag we find on the returned nip94 event
-        const imageUrl = response.data.nip94_event.tags.find(
-          (item) => item[0] === 'url'
-        )
-
-        if (imageUrl) return imageUrl[1]
-      }
-
-      throw new BaseError(HandledErrorType.NOSTR_CHECK_BAD_EVENT, {
-        context: { ...response.data }
-      })
-    } catch (error) {
-      // Handle axios errors
-      if (isAxiosError(error)) {
-        if (error.request) {
-          // The request was made but no response was received
-          throw new BaseError(HandledErrorType.AXIOS_REQ, {
-            cause: error
-          })
-        } else if (error.response) {
-          // The request was made and the server responded with a status code
-          // that falls out of the range of 2xx
-          // nostrcheck-server can return different results, including message or description
-          const data = error.response.data
-          let message = error.message
-          if (data) {
-            message = data?.message || data?.description || error.message
-          }
-          throw new BaseError(HandledErrorType.AXIOS_RES + message, {
-            cause: error
-          })
-        } else {
-          // Something happened in setting up the request that triggered an Error
-          throw new BaseError(HandledErrorType.AXIOS_ERR, {
-            cause: error
-          })
-        }
-      } else if (error instanceof BaseError) {
-        throw error
-      } else {
-        throw handleError(error)
-      }
-    }
-  }
-
-  auth = async () => {
-    try {
-      const url = `${this.#url}${this.#media}`
-
-      let hexPubkey: string | undefined
-      const userState = store.getState().user
-      if (userState.auth && userState.user?.pubkey) {
-        hexPubkey = userState.user.pubkey as string
-      } else {
-        try {
-          hexPubkey = (await window.nostr?.getPublicKey()) as string
-        } catch (error) {
-          log(true, LogType.Error, `Could not get pubkey`, error)
-        }
-      }
-
-      if (!hexPubkey) {
-        throw new BaseError(HandledErrorType.PUBKEY)
-      }
-
-      const unsignedEvent: NostrEvent = {
-        content: '',
-        created_at: now(),
-        kind: NDKKind.HttpAuth,
-        pubkey: hexPubkey,
-        tags: [
-          ['u', url],
-          ['method', 'POST']
-        ]
-      }
-
-      const signedEvent = await window.nostr?.signEvent(unsignedEvent)
-      return btoa(JSON.stringify(signedEvent))
-    } catch (error) {
-      if (error instanceof BaseError) {
-        throw error
-      }
-
-      throw new BaseError(HandledErrorType.SIGN, {
-        cause: handleError(error)
-      })
-    }
-  }
-}

src/controllers/image/route96.ts

@@ -1,7 +0,0 @@
-import { MediaOperations } from '.'
-
-export class route96 implements MediaOperations {
-  post = () => {
-    throw new Error('route96 post Not implemented.')
-  }
-}

src/controllers/index.ts

@@ -1,2 +1 @@
 export * from './zap'
-export * from './image'

src/hooks/index.ts

@@ -4,11 +4,8 @@ export * from './useFilteredMods'
 export * from './useGames'
 export * from './useMuteLists'
 export * from './useNSFWList'
-export * from './useRepostList'
 export * from './useReactions'
 export * from './useNDKContext'
 export * from './useScrollDisable'
 export * from './useLocalStorage'
 export * from './useSessionStorage'
-export * from './useLocalCache'
-export * from './useReplies'

src/hooks/useComments.ts

@@ -13,15 +13,14 @@ import { useNDKContext } from './useNDKContext'
 
 export const useComments = (
   author: string | undefined,
-  aTag: string | undefined,
-  eTag?: string | undefined
+  aTag: string | undefined
 ) => {
   const { ndk } = useNDKContext()
   const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
 
   useEffect(() => {
-    if (!(author && (aTag || eTag))) {
-      // Author and aTag/eTag are required
+    if (!(author && aTag)) {
+      // Author and aTag are required
       return
     }
 
@@ -40,7 +39,7 @@ export const useComments = (
         })
         .catch((err) => {
           log(
-            false, // Too many failed requests, turned off for clarity
+            true,
             LogType.Error,
             `An error occurred in fetching user's (${author}) ${UserRelaysType.Read}`,
             err
@@ -49,17 +48,8 @@ export const useComments = (
         })
 
       const filter: NDKFilter = {
-        kinds: [NDKKind.Text, NDKKind.GenericReply],
-        ...(aTag
-          ? {
-              '#a': [aTag]
-            }
-          : {}),
-        ...(eTag
-          ? {
-              '#e': [eTag]
-            }
-          : {})
+        kinds: [NDKKind.Text],
+        '#a': [aTag]
       }
 
       const relayUrls = new Set<string>()
@@ -83,11 +73,21 @@ export const useComments = (
 
       subscription.on('event', (ndkEvent) => {
         setCommentEvents((prev) => {
-          if (prev.find((e) => e.event.id === ndkEvent.id)) {
+          if (prev.find((e) => e.id === ndkEvent.id)) {
             return [...prev]
           }
 
-          return [{ event: ndkEvent }, ...prev]
+          const commentEvent: CommentEvent = {
+            kind: NDKKind.Text,
+            tags: ndkEvent.tags,
+            content: ndkEvent.content,
+            created_at: ndkEvent.created_at!,
+            pubkey: ndkEvent.pubkey,
+            id: ndkEvent.id,
+            sig: ndkEvent.sig!
+          }
+
+          return [commentEvent, ...prev]
         })
       })
 
@@ -102,7 +102,7 @@ export const useComments = (
         subscription.stop()
       }
     }
-  }, [aTag, author, eTag, ndk])
+  }, [aTag, author, ndk])
 
   return {
     commentEvents,

src/hooks/useFilteredMods.ts

@@ -112,7 +112,7 @@ export const useFilteredMods = (
         case WOTFilterOptions.Site_And_Mine:
           return mods.filter(
             (mod) =>
-              isInWoT(siteWot, siteWotLevel, mod.author) &&
+              isInWoT(siteWot, siteWotLevel, mod.author) ||
               isInWoT(userWot, userWotLevel, mod.author)
           )
       }
@@ -128,19 +128,10 @@ export const useFilteredMods = (
       npubToHex(userState.user.npub as string) === author
     const isUnmoderatedFully =
       filterOptions.moderated === ModeratedFilter.Unmoderated_Fully
-    const isOnlyBlocked =
-      filterOptions.moderated === ModeratedFilter.Only_Blocked
 
-    if (isOnlyBlocked && isAdmin) {
-      filtered = filtered.filter(
-        (mod) =>
-          muteLists.admin.authors.includes(mod.author) ||
-          muteLists.admin.replaceableEvents.includes(mod.aTag)
-      )
-    } else if (isUnmoderatedFully && (isAdmin || isOwner)) {
-      // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
-      // Allow "Unmoderated Fully" when author visits own profile
-    } else {
+    // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
+    // Allow "Unmoderated Fully" when author visits own profile
+    if (!((isAdmin || isOwner) && isUnmoderatedFully)) {
       filtered = filtered.filter(
         (mod) =>
           !muteLists.admin.authors.includes(mod.author) &&

src/hooks/useLocalCache.tsx

@@ -1,37 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { setLocalStorageItem, removeLocalStorageItem } from 'utils'
-
-export function useLocalCache<T>(
-  key: string
-): [
-  T | undefined,
-  React.Dispatch<React.SetStateAction<T | undefined>>,
-  () => void
-] {
-  const [cache, setCache] = useState<T | undefined>(() => {
-    const storedValue = window.localStorage.getItem(key)
-    if (storedValue === null) return undefined
-
-    // Parse the value
-    const parsedStoredValue = JSON.parse(storedValue)
-    return parsedStoredValue
-  })
-
-  useEffect(() => {
-    try {
-      if (cache) {
-        setLocalStorageItem(key, JSON.stringify(cache))
-      } else {
-        removeLocalStorageItem(key)
-      }
-    } catch (e) {
-      console.warn(e)
-    }
-  }, [cache, key])
-
-  const clearCache = useCallback(() => {
-    setCache(undefined)
-  }, [])
-
-  return [cache, setCache, clearCache]
-}

src/hooks/useLocalStorage.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react'
 import {
   getLocalStorageItem,
-  mergeWithInitialValue,
   removeLocalStorageItem,
   setLocalStorageItem
 } from 'utils'
@@ -11,6 +10,17 @@ const useLocalStorageSubscribe = (callback: () => void) => {
   return () => window.removeEventListener('storage', callback)
 }
 
+function mergeWithInitialValue<T>(storedValue: T, initialValue: T): T {
+  if (
+    !Array.isArray(storedValue) &&
+    typeof storedValue === 'object' &&
+    storedValue !== null
+  ) {
+    return { ...initialValue, ...storedValue }
+  }
+  return storedValue
+}
+
 export function useLocalStorage<T>(
   key: string,
   initialValue: T

src/hooks/useReactions.ts

@@ -70,16 +70,12 @@ export const useReactions = (params: UseReactionsParams) => {
   }, [reactionEvents, userState])
 
   const getPubkey = async () => {
-    let hexPubkey: string | undefined
+    let hexPubkey: string
 
     if (userState.auth && userState.user?.pubkey) {
       hexPubkey = userState.user.pubkey as string
     } else {
-      try {
-        hexPubkey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!hexPubkey) {

src/hooks/useReplies.tsx

@@ -1,53 +0,0 @@
-import {
-  NDKEvent,
-  NDKKind,
-  NDKSubscriptionCacheUsage
-} from '@nostr-dev-kit/ndk'
-import { useState } from 'react'
-import { useNDKContext } from './useNDKContext'
-import { useDidMount } from './useDidMount'
-
-export const useReplies = (eTag: string | undefined) => {
-  const { ndk } = useNDKContext()
-  const [replies, setReplies] = useState<NDKEvent[]>([])
-  const [isComplete, setIsComplete] = useState(false)
-
-  useDidMount(async () => {
-    if (!eTag) {
-      setIsComplete(true)
-      return
-    }
-
-    let eDepth: string | undefined = eTag
-    while (eDepth) {
-      const previousReply = await ndk.fetchEvent(
-        {
-          kinds: [NDKKind.Text, NDKKind.GenericReply],
-          ids: [eDepth]
-        },
-        {
-          cacheUsage: NDKSubscriptionCacheUsage.CACHE_FIRST
-        }
-      )
-      if (previousReply) {
-        setReplies((p) => {
-          if (p.findIndex((p) => p.id === previousReply.id) === -1) {
-            p.push(previousReply)
-          }
-          return p
-        })
-        eDepth = previousReply.tagValue('e')
-      } else {
-        eDepth = undefined
-      }
-    }
-    setIsComplete(true)
-  })
-
-  return {
-    size: replies.length,
-    isComplete,
-    parent: replies.length > 0 ? replies[0] : undefined,
-    root: isComplete ? replies[replies.length - 1] : undefined
-  }
-}

src/hooks/useRepostList.tsx

@@ -1,19 +0,0 @@
-import { useState } from 'react'
-import { useDidMount } from './useDidMount'
-import { useNDKContext } from './useNDKContext'
-import { CurationSetIdentifiers, getReportingSet } from 'utils'
-
-export const useRepostList = () => {
-  const ndkContext = useNDKContext()
-  const [repostList, setRepostList] = useState<string[]>([])
-
-  useDidMount(async () => {
-    const list = await getReportingSet(
-      CurationSetIdentifiers.Repost,
-      ndkContext
-    )
-    setRepostList(list)
-  })
-
-  return repostList
-}

src/hooks/useSessionStorage.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react'
 import {
   getSessionStorageItem,
-  mergeWithInitialValue,
   removeSessionStorageItem,
   setSessionStorageItem
 } from 'utils'
@@ -11,6 +10,17 @@ const useSessionStorageSubscribe = (callback: () => void) => {
   return () => window.removeEventListener('sessionStorage', callback)
 }
 
+function mergeWithInitialValue<T>(storedValue: T, initialValue: T): T {
+  if (
+    !Array.isArray(storedValue) &&
+    typeof storedValue === 'object' &&
+    storedValue !== null
+  ) {
+    return { ...initialValue, ...storedValue }
+  }
+  return storedValue
+}
+
 export function useSessionStorage<T>(
   key: string,
   initialValue: T

src/hooks/useTextLimit.tsx

@@ -1,19 +0,0 @@
-import { MAX_VISIBLE_TEXT_PER_COMMENT } from '../constants'
-import { useState } from 'react'
-
-export const useTextLimit = (
-  text: string,
-  limit: number = MAX_VISIBLE_TEXT_PER_COMMENT
-) => {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const isTextOverflowing = text.length > limit
-  const updated =
-    isExpanded || !isTextOverflowing ? text : text.slice(0, limit) + '…'
-
-  return {
-    text: updated,
-    isTextOverflowing,
-    isExpanded,
-    toggle: () => setIsExpanded((prev) => !prev)
-  }
-}

src/layout/footer.tsx

@@ -1,6 +1,4 @@
-import { Link } from 'react-router-dom'
 import styles from '../styles/footer.module.scss'
-import { appRoutes, getProfilePageRoute } from 'routes'
 
 export const Footer = () => {
   return (
@@ -9,7 +7,6 @@ export const Footer = () => {
         <p className={styles.secMainFooterPara}>
           Built with&nbsp;
           <a
-            rel='noopener'
             className={styles.secMainFooterParaLink}
             href='https://github.com/nostr-protocol/nostr'
             target='_blank'
@@ -17,26 +14,21 @@ export const Footer = () => {
             Nostr
           </a>{' '}
           by&nbsp;
-          <Link
+          <a
             className={styles.secMainFooterParaLink}
-            to={getProfilePageRoute(
-              'nprofile1qqsre6jgq6c7r2vzn5cdtju20qq36sn3cer5avc4x8kfru5pzrlr7sqnancjp'
-            )}
+            href='https://degmods.com/profile/nprofile1qqsre6jgq6c7r2vzn5cdtju20qq36sn3cer5avc4x8kfru5pzrlr7sqnancjp'
             target='_blank'
           >
             Freakoverse
-          </Link>
+          </a>
           , with the support of{' '}
-          <Link
-            className={styles.secMainFooterParaLink}
-            to={appRoutes.supporters}
-          >
+          <a className={styles.secMainFooterParaLink} href='backers.html'>
             Supporters
-          </Link>
+          </a>
           . Check our&nbsp;
-          <Link className={styles.secMainFooterParaLink} to={appRoutes.backup}>
+          <a className={styles.secMainFooterParaLink} href='backup.html'>
             Backup Plan
-          </Link>
+          </a>
           .
         </p>
       </div>

src/layout/header.tsx

@@ -3,7 +3,7 @@ import {
   launch as launchNostrLoginDialog
 } from 'nostr-login'
 import React, { useEffect, useState } from 'react'
-import { Link, useRevalidator } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { Banner } from '../components/Banner'
 import { ZapPopUp } from '../components/Zap'
 import {
@@ -22,13 +22,12 @@ import { npubToHex } from '../utils'
 import logo from '../assets/img/DEG Mods Logo With Text.svg'
 import placeholder from '../assets/img/DEG Mods Default PP.png'
 import { resetUserWot } from 'store/reducers/wot'
-import { NDKNip07Signer } from '@nostr-dev-kit/ndk'
 
 export const Header = () => {
   const dispatch = useAppDispatch()
-  const { findMetadata, ndk } = useNDKContext()
+  const { findMetadata } = useNDKContext()
   const userState = useAppSelector((state) => state.user)
-  const revalidator = useRevalidator()
+
   // Track nostr-login extension modal open state
   const [isOpen, setIsOpen] = useState(false)
   const handleOpen = () => setIsOpen(true)
@@ -51,7 +50,6 @@ export const Header = () => {
           dispatch(setAuth(null))
           dispatch(setUser(null))
           dispatch(resetUserWot())
-          ndk.signer = undefined
         } else {
           dispatch(
             setAuth({
@@ -65,7 +63,6 @@ export const Header = () => {
               pubkey: npubToHex(npub)!
             })
           )
-          ndk.signer = new NDKNip07Signer()
           findMetadata(npub).then((userProfile) => {
             if (userProfile) {
               dispatch(
@@ -78,12 +75,8 @@ export const Header = () => {
             }
           })
         }
-
-        // React router - revalidate loader states on auth changes
-        revalidator.revalidate()
       }
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, findMetadata])
 
   const handleLogin = () => {
@@ -98,7 +91,10 @@ export const Header = () => {
         <div className={mainStyles.ContainerMain}>
           <div className={navStyles.NavMainTopInside}>
             <div className={navStyles.NMTI_Sec}>
-              <Link to={appRoutes.home} className={navStyles.NMTI_Sec_HomeLink}>
+              <Link
+                to={appRoutes.index}
+                className={navStyles.NMTI_Sec_HomeLink}
+              >
                 <div className={navStyles.NMTI_Sec_HomeLink_Logo}>
                   <img
                     className={navStyles.NMTI_Sec_HomeLink_LogoImg}
@@ -443,21 +439,6 @@ const RegisterButtonWithDialog = () => {
                       nos2x
                     </a>
                   </div>
-                  <p
-                    className='labelDescriptionMain'
-                    style={{
-                      padding: '10px',
-                      borderRadius: '10px',
-                      background: 'rgba(205,44,255,0.1)',
-                      border: 'solid 2px rgba(255,66,235,0.3)',
-                      margin: '10px 0 0 0',
-                      color: '#ffffffbf'
-                    }}
-                  >
-                    Warning:&nbsp;Make sure you backup your private key
-                    somewhere safe. If you lose it or it gets leaked, we
-                    actually can't help you.
-                  </p>
                   <p
                     className='labelDescriptionMain'
                     style={{

src/layout/index.tsx

@@ -44,7 +44,7 @@ export const Layout = () => {
           })
       }
     }
-  }, [dispatch, ndk])
+  }, [ndk, dispatch])
 
   // calculate user's wot
   useEffect(() => {
@@ -60,7 +60,7 @@ export const Layout = () => {
             toast.error('An error occurred in calculating user web-of-trust!')
           })
     }
-  }, [dispatch, ndk, userState.user?.pubkey])
+  }, [ndk, userState.user, dispatch])
 
   // get site's wot level
   useEffect(() => {
@@ -106,7 +106,7 @@ export const Layout = () => {
         })
       }
     }
-  }, [dispatch, fetchEventFromUserRelays, userState.user?.pubkey])
+  }, [userState.user, dispatch, fetchEventFromUserRelays])
 
   return (
     <>

src/loaders/comment.ts

@@ -1,37 +0,0 @@
-import { NDKContextType } from 'contexts/NDKContext'
-import { LoaderFunctionArgs, redirect } from 'react-router-dom'
-import { CommentsLoaderResult } from 'types/comments'
-import { log, LogType } from 'utils'
-
-export const commentsLoader =
-  (ndkContext: NDKContextType) =>
-  async ({ params }: LoaderFunctionArgs) => {
-    const { nevent } = params
-
-    if (!nevent) {
-      log(true, LogType.Error, 'Required nevent.')
-      return redirect('..')
-    }
-
-    try {
-      const replyEvent = await ndkContext.ndk.fetchEvent(nevent)
-
-      if (!replyEvent) {
-        throw new Error('We are unable to find the comment on the relays')
-      }
-
-      const result: Partial<CommentsLoaderResult> = {
-        event: replyEvent
-      }
-      return result
-    } catch (error) {
-      let message = 'An error occurred in fetching comment from relays'
-      log(true, LogType.Error, message, error)
-      if (error instanceof Error) {
-        message = error.message
-        throw new Error(message)
-      }
-    }
-
-    return redirect('..')
-  }

src/pages/404.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation, useRouteError } from 'react-router-dom'
+import { Link, useRouteError } from 'react-router-dom'
 import { appRoutes } from 'routes'
 
 interface NotFoundPageProps {
@@ -12,8 +12,6 @@ export const NotFoundPage = ({
 }: Partial<NotFoundPageProps>) => {
   const error = useRouteError() as Partial<NotFoundPageProps>
 
-  const location = useLocation()
-
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
@@ -25,19 +23,7 @@ export const NotFoundPage = ({
             <div>
               <p>{error?.message || message}</p>
             </div>
-            <div
-              className='IBMSMAction'
-              style={{
-                gap: '10px'
-              }}
-            >
-              <Link
-                to={location.pathname}
-                className='btn btnMain IBMSMActionBtn'
-                type='button'
-              >
-                Try again
-              </Link>
+            <div className='IBMSMAction'>
               <Link
                 to={appRoutes.home}
                 className='btn btnMain IBMSMActionBtn'

src/pages/about.tsx

@@ -13,22 +13,14 @@ export type FAQItem = {
 const FAQ_ITEMS: FAQItem[] = [
   {
     question: "You don't host mod files?",
-    answer: `We could, but that's not the focus. When a creator publishes a mod, they have the option to upload their mod files 
-    to whichever server they want and simply add the link to their post. To the end user, there's no difference; they'd always see 
-    a 'Download' button. This results in the censorship-resistant structure of a creator's mod post. However, later on, we'll be 
-    implementing a system where creators can upload within the site (not to the site) and choose from multiple server hosts 
-    (to upload to one or more), with us potentially offering a backup. This system would also provide censorship resistance to 
-    the mod files themselves, as anyone would be able to host the files, back them up, and provide them for the public to download from, 
-    decreasing the chance of the file getting taken down or lost.`
+    answer: `We don't handle that directly, but you, as the creator, will.`
   },
   {
     question:
       'How do you assure security of game mod files that someone downloads?',
-    answer: `When a mod creator attempts to publish a mod, there is a security field that they can fill out 
-    that shows a scan report of the files, and users would be able to see that report. If a mod creator doesn't add a report, 
-    a prominent warning would be shown to the user on a mod's post (TBA, if not already added). Later, when the new file uploading 
-    system (Blossom) gets implemented, along with further security implementations, a scan would automatically happen (depending on 
-    the server that it is being uploaded to), and a report would be auto-generated and shared within the mod post.`
+    answer: `We don't assure security directly. However, we will provide a reaction
+      system to help users gauge the safety of download links, and mod creators
+      are encouraged to include scan links.`
   },
   {
     question: "Why are you quoting 'account'?",
@@ -49,11 +41,8 @@ const FAQ_ITEMS: FAQItem[] = [
   {
     question:
       "You can't do anything about any mod or person? Nothing at all? What about the illegal stuff?",
-    answer: `While we can't directly take down mod posts or ban user accounts, the best that we can do is hide 
-    posts from initially being viewed on the site. However, they can still be accessible if a user has a direct 
-    link, and they can also be accessible on different sites running the same protocol and similar setup to DEG Mods. 
-    When non-mods, harmful, or illegal posts are published, such posts would be discovered and then hidden. 
-    Afterwards, relevant authorities would handle the rest.`
+    answer: `Direct removal or banning is not possible. We can only filter or
+      hide content on the site, but it remains accessible on here and elsewhere.`
   },
   {
     question:
@@ -68,12 +57,13 @@ const FAQ_ITEMS: FAQItem[] = [
   {
     question: 'Is this an open-source project?',
     answer: `Yes, DEG Mods is open-source. You can access the code repository
-    here (sharing soon).`
+    [here](https://github.com/your-repo).`
   },
   {
     question: "Who's developing / maintaining DEG Mods?",
     answer: `Considering this is an open-source project, anyone can contribute to its development and maintenance.
-      With that said, the project was ideated, launched, and led by Freakoverse.`
+      With that said, the initial idea-tor, designer, and frontend developer is [Freakoverse](https://primal.net/p/npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r), and the co-developer
+      is [Nostr Dev](https://nostrdev.com/).`
   },
   {
     question: "Who's that character above with the orange hair?",
@@ -81,7 +71,9 @@ const FAQ_ITEMS: FAQItem[] = [
   },
   {
     question: "Who's that character above with the purple hair?",
-    answer: `That's Moda-chan. DEG Mods' mascot. She's a game mod creator!`
+    answer: `That's Moda-chan. DEG Mods' mascot. She's a master game mod creator! (Yes, she was AI-generated,
+      as such her design is temporary and will be replaced with a design created by an artist (or artists)
+      when that time comes.)`
   }
 ]
 
@@ -159,23 +151,23 @@ export const AboutPage = () => {
                     mods published by their creators. Mod creators provide
                     direct download links on their mod pages, allowing gamers to
                     access the mods effortlessly. If a link breaks or gets
-                    censored, mod creators can remove that link and add another.
+                    censored, mod creators can remove that link and add another,
+                    and people can rate download links based on if they're
+                    working and virus free. A public regulating system.
                     <br />
                     <br />
                     Also, everything is open sourced. Even if the site were to
                     shut down, someone can simply take the same code and run it
                     under a different name, and every mod would still be
                     accessible, along with their links, reactions/ratings, and
-                    comments, as well as being completely functional as well.
-                     You'd also be able to just simply run the site on your PC,
-                      without having it up on a domain.
+                    comments.
                   </p>
                   <h3 className='LearnTextHeading'>Tips / Donations</h3>
                   <p className='LearnTextPara'>
                     DEG Mods supports hassle-free money transfers for modders.
                     Fans can show their appreciation by directly tipping mod
                     creators via Bitcoin through the Lightning Network, an
-                    action known as Zapping. Choose to support creators so they can
+                    action known as Zapping. Support creators so they can
                     continue making more valuable game mods!
                     <br />
                   </p>
@@ -195,7 +187,7 @@ export const AboutPage = () => {
                     them financially, even those in other countries where
                     "normal" methods of money payment/transfer are not an
                     option. You can just find the mod you want and download it,
-                    or publish the mod you've created, and never even touch
+                    or upload the mod you've created, and never even touch
                     Bitcoin.
                     <br />
                   </p>
@@ -203,8 +195,7 @@ export const AboutPage = () => {
                     DEG Mods is a response to censorship and oppression, to
                     bring freedom and not hinder people's desires and
                     creativity. If you know a mod creator that's being censored,
-                    then show them the way. Modders just want to mod, and gamers 
-                    just want to game in peace...
+                    then show them the way. Gamers just want to game in peace...
                     <br />
                   </p>
                   <h3 className='LearnTextHeading'>
@@ -218,14 +209,14 @@ export const AboutPage = () => {
                     description.
                     <br />
                     <br />
-                    Another way of describing it:
+                    For what some people might call it:
                     <br />
-                    A true mod site.
+                    "It's a game mods website."
                   </p>
                   <div className='learnLinks'>
                     <a
                       className='learnLinksLink'
-                      href='https://degmods.com/profile/nprofile1qqs0f0clkkagh6pe7ux8xvtn8ccf77qgy2e3ra37q8uaez4mks5034gfw4xg6'
+                      href='https://primal.net/p/npub17jl3ldd6305rnacvwvchx03snauqsg4nz8mruq0emj9thdpglr2sst825x'
                       target='_blank'
                     >
                       <img

src/pages/backup.tsx

@@ -1,126 +0,0 @@
-import { capitalizeEachWord } from 'utils'
-import '../styles/backup.css'
-import backupPlanImg from '../assets/img/DEG Mods Backup Plan.png'
-// import placeholder from '../assets/img/DEGMods Placeholder Img.png'
-interface BackupItemProps {
-  name: string
-  image: string
-  link: string
-  type: 'repo' | 'alt' | 'exe'
-}
-const BACKUP_LIST: BackupItemProps[] = [
-  //   {
-  //     name: 'Github',
-  //     type: 'repo',
-  //     image:
-  //       'https://www.c-sharpcorner.com/article/create-github-repository-and-add-newexisting-project-using-github-desktop/Images/github.png',
-  //     link: '#'
-  //   },
-  //   {
-  //     name: 'Github, but nostr',
-  //     type: 'repo',
-  //     image: 'https://vitorpamplona.com/images/nostr.gif',
-  //     link: '#'
-  //   },
-  //   {
-  //     name: 'name',
-  //     type: 'alt',
-  //     image: placeholder,
-  //     link: '#'
-  //   },
-  //   {
-  //     name: '',
-  //     type: 'exe',
-  //     image: placeholder,
-  //     link: '#'
-  //   }
-]
-
-const BackupItem = ({ name, image, link, type }: BackupItemProps) => {
-  return (
-    <a
-      className='backupListLink'
-      href={link}
-      style={{
-        background: `linear-gradient(15deg, rgba(0,0,0,0.75), rgba(0,0,0,0.25)), 
-        url("${image}") center / cover no-repeat, 
-        linear-gradient(45deg, rgba(0,0,0,0.1), rgba(255,255,255,0.01) 50%, rgba(0,0,0,0.1))`
-      }}
-      target='_blank'
-    >
-      <div className='backupListLinkInside'>
-        <h3>
-          {type === 'exe' ? type.toUpperCase() : capitalizeEachWord(type)}:{' '}
-          {name}
-        </h3>
-      </div>
-    </a>
-  )
-}
-
-export const BackupPage = () => {
-  return (
-    <div className='InnerBodyMain'>
-      <div className='ContainerMain'>
-        <div className='IBMSecMainGroup'>
-          <div className='IBMSecMain'>
-            <div className='AboutSec'>
-              <div className='LearnText'>
-                <div className='LearnTextInside'>
-                  <h1
-                    className='LearnTextHeading'
-                    style={{ textAlign: 'center' }}
-                  >
-                    Backup Plan: Repos, Alts, EXE
-                  </h1>
-                  <img alt='' src={backupPlanImg} />
-                  <p className='LearnTextPara'>
-                    It's pretty clear that authoritarianism and censorship is on
-                    the rise, on all fronts, and from what can be seen, any idea
-                    that push for the opposite gets attacked. That's why DEG
-                    Mods is running on Nostr, and that's why we're also writing
-                    this backup plan.
-                    <br />
-                  </p>
-                  <h3 className='LearnTextHeading'>Repositories</h3>
-                  <p className='LearnTextPara'>
-                    Wherever we can, we'll put DEG Mods' code on multiple
-                    repositories such as Github, and (github but on nostr).
-                    Below you can find the links where we've uploaded the site's
-                    code to.
-                    <br />
-                  </p>
-                  <h3 className='LearnTextHeading'>Alternatives</h3>
-                  <p className='LearnTextPara'>
-                    With the repositories for DEG Mods is up on multiple places,
-                    we encourage people to take the code and duplicate it
-                    elsewhere. Fork it, change the design, remove or add systems
-                    and features, and make your own version. Below you can find
-                    links of alts that we've found.
-                    <br />
-                  </p>
-                  <h3 className='LearnTextHeading'>EXE</h3>
-                  <p className='LearnTextPara'>
-                    One last push we'd like to do is to create a .exe that'll
-                    open up DEG Mods on your PC, as if you've opened the website
-                    normally, with almost all of the functionalities you'd
-                    expect (if not all). We want to do this so that in case
-                    there are no alternatives, or that they're getting shut
-                    down, then you can just rely on this instead. The link to it
-                    will be added here the moment it becomes available.
-                    <br />
-                  </p>
-                  <div className='backupList'>
-                    {BACKUP_LIST.map((b) => (
-                      <BackupItem {...b} />
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/blog/action.ts

@@ -33,15 +33,11 @@ export const blogRouteAction =
     }
 
     const userState = store.getState().user
-    let hexPubkey: string | undefined
+    let hexPubkey: string
     if (userState.auth && userState.user?.pubkey) {
       hexPubkey = userState.user.pubkey as string
     } else {
-      try {
-        hexPubkey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!hexPubkey) {

src/pages/blog/index.tsx

@@ -3,11 +3,14 @@ import {
   useLoaderData,
   Link as ReactRouterLink,
   useNavigation,
-  useSubmit,
-  Outlet,
-  useParams,
-  useNavigate
+  useSubmit
 } from 'react-router-dom'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import { EditorContent, useEditor } from '@tiptap/react'
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
 import { LoadingSpinner } from 'components/LoadingSpinner'
 import { ProfileSection } from 'components/ProfileSection'
 import { Comments } from 'components/comment'
@@ -18,12 +21,8 @@ import { Interactions } from 'components/Internal/Interactions'
 import { BlogCard } from 'components/BlogCard'
 import { copyTextToClipboard } from 'utils'
 import { toast } from 'react-toastify'
-import { useAppSelector, useBodyScrollDisable, useLocalStorage } from 'hooks'
+import { useAppSelector, useBodyScrollDisable } from 'hooks'
 import { ReportPopup } from 'components/ReportPopup'
-import { Viewer } from 'components/Markdown/Viewer'
-import { PostWarnings } from 'components/PostWarning'
-import { appRoutes } from 'routes'
-import { NsfwAlertPopup } from 'components/NsfwAlertPopup'
 
 const BLOG_REPORT_REASONS = [
   { label: 'Actually CP', key: 'actuallyCP' },
@@ -35,16 +34,33 @@ const BLOG_REPORT_REASONS = [
 ]
 
 export const BlogPage = () => {
-  const { nevent } = useParams()
-  const { blog, latest, isAddedToNSFW, isBlocked, postWarning } =
+  const { blog, latest, isAddedToNSFW, isBlocked } =
     useLoaderData() as BlogPageLoaderResult
   const userState = useAppSelector((state) => state.user)
   const isAdmin =
     userState.user?.npub &&
     userState.user.npub === import.meta.env.VITE_REPORTING_NPUB
-  const isLoggedIn = userState.auth && userState.user?.pubkey !== 'undefined'
   const navigation = useNavigation()
   const [commentCount, setCommentCount] = useState(0)
+  const html = marked.parse(blog?.content || '', { async: false })
+  const sanitized = DOMPurify.sanitize(html)
+  const editor = useEditor(
+    {
+      content: sanitized,
+      extensions: [
+        StarterKit,
+        Link,
+        Image.configure({
+          inline: true,
+          HTMLAttributes: {
+            class: 'IBMSMSMBSSPostImg'
+          }
+        })
+      ],
+      editable: false
+    },
+    [sanitized]
+  )
 
   const [showReportPopUp, setShowReportPopUp] = useState<number>()
   useBodyScrollDisable(!!showReportPopUp)
@@ -82,17 +98,6 @@ export const BlogPage = () => {
     }
   }
 
-  const navigate = useNavigate()
-  const [confirmNsfw] = useLocalStorage<boolean>('confirm-nsfw', false)
-  const [showNsfwPopup, setShowNsfwPopup] = useState<boolean>(
-    (blog?.nsfw ?? false) && !confirmNsfw
-  )
-  const handleConfirm = (confirm: boolean) => {
-    if (!confirm) {
-      navigate(appRoutes.home)
-    }
-  }
-
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
@@ -102,7 +107,6 @@ export const BlogPage = () => {
               <>
                 <div className='IBMSMSplitMainBigSide'>
                   <div className='IBMSMSplitMainBigSideSec'>
-                    {postWarning && <PostWarnings type={postWarning} />}
                     <div className='IBMSMSMBSSPost'>
                       <div
                         className='dropdown dropdownMain dropdownMainBlogpost'
@@ -192,25 +196,23 @@ export const BlogPage = () => {
                             Share
                           </a>
 
-                          {isLoggedIn && (
-                            <a
-                              className='dropdown-item dropdownMainMenuItem'
-                              id='reportPost'
-                              onClick={() => setShowReportPopUp(Date.now())}
+                          <a
+                            className='dropdown-item dropdownMainMenuItem'
+                            id='reportPost'
+                            onClick={() => setShowReportPopUp(Date.now())}
+                          >
+                            <svg
+                              xmlns='http://www.w3.org/2000/svg'
+                              viewBox='0 0 512 512'
+                              width='1em'
+                              height='1em'
+                              fill='currentColor'
+                              className='IBMSMSMSSS_Author_Top_Icon'
                             >
-                              <svg
-                                xmlns='http://www.w3.org/2000/svg'
-                                viewBox='0 0 512 512'
-                                width='1em'
-                                height='1em'
-                                fill='currentColor'
-                                className='IBMSMSMSSS_Author_Top_Icon'
-                              >
-                                <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
-                              </svg>
-                              Report
-                            </a>
-                          )}
+                              <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
+                            </svg>
+                            Report
+                          </a>
 
                           <a
                             className='dropdown-item dropdownMainMenuItem'
@@ -264,10 +266,7 @@ export const BlogPage = () => {
                           </h1>
                         </div>
                         <div className='IBMSMSMBSSPostBody'>
-                          <Viewer
-                            key={blog.id}
-                            markdown={blog?.content || ''}
-                          />
+                          <EditorContent editor={editor} />
                         </div>
                         <div className='IBMSMSMBSSTags'>
                           {blog.nsfw && (
@@ -329,13 +328,6 @@ export const BlogPage = () => {
               </>
             )}
             {!!blog?.author && <ProfileSection pubkey={blog.author} />}
-            <Outlet key={nevent} />
-            {showNsfwPopup && (
-              <NsfwAlertPopup
-                handleConfirm={handleConfirm}
-                handleClose={() => setShowNsfwPopup(false)}
-              />
-            )}
           </div>
         </div>
       </div>

src/pages/blog/loader.ts

@@ -13,7 +13,6 @@ import {
 } from 'types'
 import {
   DEFAULT_FILTER_OPTIONS,
-  getFallbackPubkey,
   getLocalStorageItem,
   log,
   LogType
@@ -42,9 +41,7 @@ export const blogRouteLoader =
     }
 
     const userState = store.getState().user
-    const loggedInUserPubkey =
-      (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
-    const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
+    const loggedInUserPubkey = userState?.user?.pubkey as string | undefined
 
     // Check if editing and the user is the original author
     // Redirect if NOT
@@ -94,7 +91,6 @@ export const blogRouteLoader =
       ])
       const result: BlogPageLoaderResult = {
         blog: undefined,
-        event: undefined,
         latest: [],
         isAddedToNSFW: false,
         isBlocked: false
@@ -103,9 +99,6 @@ export const blogRouteLoader =
       // Check the blog event result
       const fetchEventResult = settled[0]
       if (fetchEventResult.status === 'fulfilled' && fetchEventResult.value) {
-        // Save original event
-        result.event = fetchEventResult.value
-
         // Extract the blog details from the event
         result.blog = extractBlogDetails(fetchEventResult.value)
       } else if (fetchEventResult.status === 'rejected') {
@@ -123,7 +116,7 @@ export const blogRouteLoader =
         throw new Error('We are unable to find the blog on the relays')
       }
 
-      // Check the latest blog events
+      // Check the lateast blog events
       const fetchEventsResult = settled[1]
       if (fetchEventsResult.status === 'fulfilled' && fetchEventsResult.value) {
         // Extract the blog card details from the events
@@ -143,28 +136,10 @@ export const blogRouteLoader =
       if (muteLists.status === 'fulfilled' && muteLists.value) {
         if (muteLists && muteLists.value) {
           if (result.blog && result.blog.aTag) {
-            // Show user or admin post warning if any mute list includes either post or author
-            if (
-              muteLists.value.user.replaceableEvents.includes(
-                result.blog.aTag
-              ) ||
-              (result.blog.author &&
-                muteLists.value.user.authors.includes(result.blog.author))
-            ) {
-              result.postWarning = 'user'
-            }
-
             if (
               muteLists.value.admin.replaceableEvents.includes(
                 result.blog.aTag
               ) ||
-              (result.blog.author &&
-                muteLists.value.admin.authors.includes(result.blog.author))
-            ) {
-              result.postWarning = 'admin'
-            }
-
-            if (
               muteLists.value.user.replaceableEvents.includes(result.blog.aTag)
             ) {
               result.isBlocked = true
@@ -172,6 +147,8 @@ export const blogRouteLoader =
           }
 
           // Moderate the latest
+          const isAdmin =
+            userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
           const isOwner =
             userState.user?.pubkey && userState.user.pubkey === pubkey
           const isUnmoderatedFully =

src/pages/game.tsx

@@ -237,39 +237,73 @@ export const GamePage = () => {
               </div>
             </div>
             <ModFilter>
-              <div className='FiltersMainElement'>
-                <button
-                  className='btn btnMain btnMainDropdown'
-                  type='button'
+              {linkedHierarchy && linkedHierarchy !== '' ? (
+                <span
+                  className='IBMSMSMBSSTagsTag'
+                  style={{
+                    display: 'flex',
+                    gap: '10px',
+                    alignItems: 'center'
+                  }}
                   onClick={() => {
-                    setShowCategoryPopup(true)
+                    searchParams.delete('h')
+                    setSearchParams(searchParams)
                   }}
                 >
-                  Categories
-                  {isCategoryFilterActive ||
-                  (linkedHierarchy && linkedHierarchy !== '') ? (
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      viewBox='0 0 576 512'
-                      width='1em'
-                      height='1em'
-                      fill='currentColor'
-                    >
-                      <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
-                    </svg>
-                  ) : (
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      viewBox='0 0 512 512'
-                      width='1em'
-                      height='1em'
-                      fill='currentColor'
-                    >
-                      <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' />
-                    </svg>
-                  )}
-                </button>
-              </div>
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 576 512'
+                    width='1em'
+                    height='1em'
+                    fill='currentColor'
+                  >
+                    <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
+                  </svg>
+                  {linkedHierarchy.replace(/:/g, ' > ')}
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 512 512'
+                    width='0.8em'
+                    height='0.8em'
+                    fill='currentColor'
+                  >
+                    <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z' />
+                  </svg>
+                </span>
+              ) : (
+                <div className='FiltersMainElement'>
+                  <button
+                    className='btn btnMain btnMainDropdown'
+                    type='button'
+                    onClick={() => {
+                      setShowCategoryPopup(true)
+                    }}
+                  >
+                    Categories
+                    {isCategoryFilterActive ? (
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='0 0 576 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='0 0 512 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              )}
             </ModFilter>
 
             <div className='IBMSecMain IBMSMListWrapper'>

src/pages/home.tsx

@@ -14,8 +14,7 @@ import {
   useLocalStorage,
   useMuteLists,
   useNDKContext,
-  useNSFWList,
-  useRepostList
+  useNSFWList
 } from '../hooks'
 import { appRoutes, getModPageRoute } from '../routes'
 import { BlogCardDetails, ModDetails, NSFWFilter, SortBy } from '../types'
@@ -258,14 +257,18 @@ const DisplayLatestMods = () => {
 
   const muteLists = useMuteLists()
   const nsfwList = useNSFWList()
-  const repostList = useRepostList()
 
   useDidMount(() => {
     fetchMods({ source: window.location.host })
       .then((mods) => {
         // Sort by the latest (published_at descending)
         mods.sort((a, b) => b.published_at - a.published_at)
-        setLatestMods(mods)
+        const wotFilteredMods = mods.filter(
+          (mod) =>
+            isInWoT(siteWot, siteWotLevel, mod.author) ||
+            isInWoT(userWot, userWotLevel, mod.author)
+        )
+        setLatestMods(wotFilteredMods)
       })
       .finally(() => {
         setIsFetchingLatestMods(false)
@@ -284,36 +287,11 @@ const DisplayLatestMods = () => {
         !mutedAuthors.includes(mod.author) &&
         !mutedEvents.includes(mod.aTag) &&
         !nsfwList.includes(mod.aTag) &&
-        !mod.nsfw &&
-        isInWoT(siteWot, siteWotLevel, mod.author) &&
-        isInWoT(userWot, userWotLevel, mod.author)
+        !mod.nsfw
     )
 
-    // Add repost tag if missing
-    for (let i = 0; i < filtered.length; i++) {
-      const mod = filtered[i]
-      const isMissingRepostTag =
-        !mod.repost && mod.aTag && repostList.includes(mod.aTag)
-
-      if (isMissingRepostTag) {
-        mod.repost = true
-      }
-    }
-
     return filtered.slice(0, 4)
-  }, [
-    latestMods,
-    muteLists.admin.authors,
-    muteLists.admin.replaceableEvents,
-    muteLists.user.authors,
-    muteLists.user.replaceableEvents,
-    nsfwList,
-    repostList,
-    siteWot,
-    siteWotLevel,
-    userWot,
-    userWotLevel
-  ])
+  }, [muteLists, nsfwList, latestMods])
 
   return (
     <div className='IBMSecMain IBMSMListWrapper'>

src/pages/mod/action.ts

@@ -43,15 +43,11 @@ export const modRouteAction =
     }
 
     const userState = store.getState().user
-    let hexPubkey: string | undefined
+    let hexPubkey: string
     if (userState.auth && userState.user?.pubkey) {
       hexPubkey = userState.user.pubkey as string
     } else {
-      try {
-        hexPubkey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!hexPubkey) {

src/pages/mod/index.tsx

@@ -1,11 +1,12 @@
+import Link from '@tiptap/extension-link'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
 import FsLightbox from 'fslightbox-react'
 import { nip19 } from 'nostr-tools'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
-  Outlet,
   Link as ReactRouterLink,
   useLoaderData,
-  useNavigate,
   useNavigation,
   useParams,
   useSubmit
@@ -13,13 +14,8 @@ import {
 import { toast } from 'react-toastify'
 import { BlogCard } from '../../components/BlogCard'
 import { ProfileSection } from '../../components/ProfileSection'
-import {
-  useAppSelector,
-  useBodyScrollDisable,
-  useDidMount,
-  useLocalStorage
-} from '../../hooks'
-import { appRoutes, getGamePageRoute, getModsEditPageRoute } from '../../routes'
+import { useAppSelector, useBodyScrollDisable } from '../../hooks'
+import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
 import '../../styles/comments.css'
 import '../../styles/downloads.css'
 import '../../styles/innerPage.css'
@@ -30,22 +26,12 @@ import '../../styles/styles.css'
 import '../../styles/tabs.css'
 import '../../styles/tags.css'
 import '../../styles/write.css'
-import {
-  DownloadUrl,
-  ModDetails,
-  ModFormState,
-  ModPageLoaderResult,
-  ModPermissions,
-  MODPERMISSIONS_CONF,
-  MODPERMISSIONS_DESC
-} from '../../types'
+import { DownloadUrl, ModPageLoaderResult } from '../../types'
 import {
   capitalizeEachWord,
-  checkUrlForFile,
   copyTextToClipboard,
   downloadFile,
-  getFilenameFromUrl,
-  isValidUrl
+  getFilenameFromUrl
 } from '../../utils'
 import { Comments } from '../../components/comment'
 import { PublishDetails } from 'components/Internal/PublishDetails'
@@ -54,10 +40,6 @@ import { ReportPopup } from 'components/ReportPopup'
 import { Spinner } from 'components/Spinner'
 import { RouterLoadingSpinner } from 'components/LoadingSpinner'
 import { OriginalAuthor } from 'components/OriginalAuthor'
-import { Viewer } from 'components/Markdown/Viewer'
-import { PostWarnings } from 'components/PostWarning'
-import { DownloadDetailsPopup } from 'components/DownloadDetailsPopup'
-import { NsfwAlertPopup } from 'components/NsfwAlertPopup'
 
 const MOD_REPORT_REASONS = [
   { label: 'Actually CP', key: 'actuallyCP' },
@@ -71,10 +53,10 @@ const MOD_REPORT_REASONS = [
 ]
 
 export const ModPage = () => {
-  const { mod, postWarning } = useLoaderData() as ModPageLoaderResult
+  const { mod } = useLoaderData() as ModPageLoaderResult
 
   // We can get author right away from naddr, no need to wait for mod data
-  const { naddr, nevent } = useParams()
+  const { naddr } = useParams()
   let author = mod?.author
   if (naddr && !author) {
     try {
@@ -87,14 +69,22 @@ export const ModPage = () => {
 
   const [commentCount, setCommentCount] = useState(0)
 
-  const navigate = useNavigate()
-  const [confirmNsfw] = useLocalStorage<boolean>('confirm-nsfw', false)
-  const [showNsfwPopup, setShowNsfwPopup] = useState<boolean>(
-    (mod?.nsfw ?? false) && !confirmNsfw
-  )
-  const handleConfirm = (confirm: boolean) => {
-    if (!confirm) {
-      navigate(appRoutes.home)
+  const oldDownloadListRef = useRef<HTMLDivElement>(null)
+
+  const handleViewOldLinks = () => {
+    if (oldDownloadListRef.current) {
+      // Toggle styles
+      if (oldDownloadListRef.current.style.height === '0px') {
+        // Enable styles
+        oldDownloadListRef.current.style.padding = ''
+        oldDownloadListRef.current.style.height = ''
+        oldDownloadListRef.current.style.border = ''
+      } else {
+        // Disable styles
+        oldDownloadListRef.current.style.padding = '0'
+        oldDownloadListRef.current.style.height = '0'
+        oldDownloadListRef.current.style.border = 'unset'
+      }
     }
   }
 
@@ -110,8 +100,18 @@ export const ModPage = () => {
                   <>
                     <div className='IBMSMSplitMainBigSideSec'>
                       <Game />
-                      {postWarning && <PostWarnings type={postWarning} />}
-                      <Body {...mod} />
+                      <Body
+                        featuredImageUrl={mod.featuredImageUrl}
+                        title={mod.title}
+                        body={mod.body}
+                        game={mod.game}
+                        screenshotsUrls={mod.screenshotsUrls}
+                        tags={mod.tags}
+                        LTags={mod.LTags}
+                        nsfw={mod.nsfw}
+                        repost={mod.repost}
+                        originalAuthor={mod.originalAuthor}
+                      />
                       <Interactions
                         addressable={mod}
                         commentCount={commentCount}
@@ -127,23 +127,43 @@ export const ModPage = () => {
                         <h4 className='IBMSMSMBSSDownloadsTitle'>
                           Mod Download
                         </h4>
-                        {postWarning && <PostWarnings type={postWarning} />}
                         {mod.downloadUrls.length > 0 && (
                           <div className='IBMSMSMBSSDownloadsPrime'>
                             <Download {...mod.downloadUrls[0]} />
                           </div>
                         )}
                         {mod.downloadUrls.length > 1 && (
-                          <div className='IBMSMSMBSSDownloads'>
-                            {mod.downloadUrls
-                              .slice(1)
-                              .map((download, index) => (
-                                <Download
-                                  key={`downloadUrl-${index}`}
-                                  {...download}
-                                />
-                              ))}
-                          </div>
+                          <>
+                            <div className='IBMSMSMBSSDownloadsActions'>
+                              <button
+                                className='btn btnMain'
+                                id='viewOldLinks'
+                                type='button'
+                                onClick={handleViewOldLinks}
+                              >
+                                View other links
+                              </button>
+                            </div>
+                            <div
+                              ref={oldDownloadListRef}
+                              id='oldDownloadList'
+                              className='IBMSMSMBSSDownloads'
+                              style={{
+                                padding: 0,
+                                height: '0px',
+                                border: 'unset'
+                              }}
+                            >
+                              {mod.downloadUrls
+                                .slice(1)
+                                .map((download, index) => (
+                                  <Download
+                                    key={`downloadUrl-${index}`}
+                                    {...download}
+                                  />
+                                ))}
+                            </div>
+                          </>
                         )}
                       </div>
                     </div>
@@ -162,13 +182,6 @@ export const ModPage = () => {
               {typeof author !== 'undefined' && (
                 <ProfileSection pubkey={author} />
               )}
-              <Outlet key={nevent} />
-              {showNsfwPopup && (
-                <NsfwAlertPopup
-                  handleConfirm={handleConfirm}
-                  handleClose={() => setShowNsfwPopup(false)}
-                />
-              )}
             </div>
           </div>
         </div>
@@ -183,7 +196,6 @@ const Game = () => {
   const { mod, isAddedToNSFW, isBlocked, isRepost } =
     useLoaderData() as ModPageLoaderResult
   const userState = useAppSelector((state) => state.user)
-  const isLoggedIn = userState.auth && userState.user?.pubkey !== 'undefined'
   const [showReportPopUp, setShowReportPopUp] = useState<number | undefined>()
 
   useBodyScrollDisable(!!showReportPopUp)
@@ -326,27 +338,25 @@ const Game = () => {
               </svg>
               Share
             </a>
-            {isLoggedIn && (
-              <a
-                className='dropdown-item dropdownMainMenuItem'
-                id='reportPost'
-                onClick={() => {
-                  setShowReportPopUp(Date.now())
-                }}
+            <a
+              className='dropdown-item dropdownMainMenuItem'
+              id='reportPost'
+              onClick={() => {
+                setShowReportPopUp(Date.now())
+              }}
+            >
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='0 0 512 512'
+                width='1em'
+                height='1em'
+                fill='currentColor'
+                className='IBMSMSMSSS_Author_Top_Icon'
               >
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  viewBox='0 0 512 512'
-                  width='1em'
-                  height='1em'
-                  fill='currentColor'
-                  className='IBMSMSMSSS_Author_Top_Icon'
-                >
-                  <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
-                </svg>
-                Report
-              </a>
-            )}
+                <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
+              </svg>
+              Report
+            </a>
             <a
               className='dropdown-item dropdownMainMenuItem'
               onClick={handleBlock}
@@ -413,22 +423,18 @@ const Game = () => {
   )
 }
 
-type BodyProps = Pick<
-  ModDetails,
-  | 'featuredImageUrl'
-  | 'title'
-  | 'body'
-  | 'game'
-  | 'screenshotsUrls'
-  | 'tags'
-  | 'LTags'
-  | 'nsfw'
-  | 'repost'
-  | 'originalAuthor'
-  | keyof ModPermissions
-  | 'publisherNotes'
-  | 'extraCredits'
->
+type BodyProps = {
+  featuredImageUrl: string
+  title: string
+  body: string
+  game: string
+  screenshotsUrls: string[]
+  tags: string[]
+  LTags: string[]
+  nsfw: boolean
+  repost: boolean
+  originalAuthor?: string
+}
 
 const Body = ({
   featuredImageUrl,
@@ -440,19 +446,11 @@ const Body = ({
   LTags,
   nsfw,
   repost,
-  originalAuthor,
-  otherAssets,
-  uploadPermission,
-  modPermission,
-  convPermission,
-  assetUsePermission,
-  assetUseComPermission,
-  publisherNotes,
-  extraCredits
+  originalAuthor
 }: BodyProps) => {
-  const COLLAPSED_MAX_SIZE = 250
   const postBodyRef = useRef<HTMLDivElement>(null)
   const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
+
   const [lightBoxController, setLightBoxController] = useState({
     toggler: false,
     slide: 1
@@ -465,14 +463,6 @@ const Body = ({
     }))
   }
 
-  useEffect(() => {
-    if (postBodyRef.current) {
-      if (postBodyRef.current.scrollHeight <= COLLAPSED_MAX_SIZE) {
-        viewFullPost()
-      }
-    }
-  }, [])
-
   const viewFullPost = () => {
     if (postBodyRef.current && viewFullPostBtnRef.current) {
       postBodyRef.current.style.maxHeight = 'unset'
@@ -481,6 +471,12 @@ const Body = ({
     }
   }
 
+  const editor = useEditor({
+    content: body,
+    extensions: [StarterKit, Link],
+    editable: false
+  })
+
   return (
     <>
       <div className='IBMSMSMBSSPost'>
@@ -497,12 +493,9 @@ const Body = ({
           <div
             ref={postBodyRef}
             className='IBMSMSMBSSPostBody'
-            style={{
-              maxHeight: `${COLLAPSED_MAX_SIZE}px`,
-              padding: '10px 18px'
-            }}
+            style={{ maxHeight: '250px', padding: '10px 18px' }}
           >
-            <Viewer markdown={body} />
+            <EditorContent editor={editor} />
             <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
               <div className='IBMSMSMBSSPostBodyHideText'>
                 <p onClick={viewFullPost}>Read Full</p>
@@ -520,16 +513,6 @@ const Body = ({
               />
             ))}
           </div>
-          <ExtraDetails
-            otherAssets={otherAssets}
-            uploadPermission={uploadPermission}
-            modPermission={modPermission}
-            convPermission={convPermission}
-            assetUsePermission={assetUsePermission}
-            assetUseComPermission={assetUseComPermission}
-            publisherNotes={publisherNotes}
-            extraCredits={extraCredits}
-          />
           <div className='IBMSMSMBSSTags'>
             {nsfw && (
               <div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
@@ -570,7 +553,6 @@ const Body = ({
                       return (
                         <ReactRouterLink
                           className='IBMSMSMBSSCategoriesBoxItem'
-                          key={`category-${i}`}
                           target='_blank'
                           to={{
                             pathname: getGamePageRoute(game),
@@ -581,12 +563,9 @@ const Body = ({
                         </ReactRouterLink>
                       )
                     })
-                    .reduce((prev, curr, i) => [
+                    .reduce((prev, curr) => [
                       prev,
-                      <div
-                        key={`separator-${i}`}
-                        className='IBMSMSMBSSCategoriesBoxSeparator'
-                      >
+                      <div className='IBMSMSMBSSCategoriesBoxSeparator'>
                         <p>&gt;</p>
                       </div>,
                       curr
@@ -612,29 +591,15 @@ const Body = ({
   )
 }
 
-const Download = (props: DownloadUrl) => {
-  const { url, title, malwareScanLink } = props
+const Download = ({
+  url,
+  hash,
+  signatureKey,
+  malwareScanLink,
+  modVersion,
+  customNote
+}: DownloadUrl) => {
   const [showAuthDetails, setShowAuthDetails] = useState(false)
-  const [showNotice, setShowNotice] = useState(false)
-  const [showScanNotice, setShowCanNotice] = useState(false)
-
-  useDidMount(async () => {
-    const isFile = await checkUrlForFile(url)
-    setShowNotice(!isFile)
-
-    // Check the malware scan url
-    // if it's valid URL
-    // if it contains sha256
-    // if it differs from download link
-    setShowCanNotice(
-      !(
-        malwareScanLink &&
-        isValidUrl(malwareScanLink) &&
-        /\b[a-fA-F0-9]{64}\b/.test(malwareScanLink) &&
-        malwareScanLink !== url
-      )
-    )
-  })
 
   const handleDownload = () => {
     // Get the filename from the URL
@@ -645,9 +610,6 @@ const Download = (props: DownloadUrl) => {
 
   return (
     <div className='IBMSMSMBSSDownloadsElement'>
-      {typeof title !== 'undefined' && title !== '' && (
-        <span className='IBMSMSMBSSDownloadsElementDtitle'>{title}</span>
-      )}
       <div className='IBMSMSMBSSDownloadsElementInside'>
         <button
           className='btn btnMain IBMSMSMBSSDownloadsElementBtn'
@@ -657,25 +619,6 @@ const Download = (props: DownloadUrl) => {
           Download
         </button>
       </div>
-      {showNotice && (
-        <div className='IBMSMSMBSSNote'>
-          <p>
-            Notice: The creator has provided a download link that doesn&#39;t
-            download the files immediately, but rather redirects you to a
-            different site.
-            <br />
-          </p>
-        </div>
-      )}
-      {showScanNotice && (
-        <div className='IBMSMSMBSSWarning'>
-          <p>
-            The mod poster hasn't provided a malware scan report for these
-            files. Be careful.
-            <br />
-          </p>
-        </div>
-      )}
       {/*temporarily commented out the WoT rating for download links within a mod post
       <div className='IBMSMSMBSSDownloadsElementInside'>
         <p>Ratings (WIP):</p>
@@ -850,10 +793,56 @@ const Download = (props: DownloadUrl) => {
           Authentication Details
         </p>
         {showAuthDetails && (
-          <DownloadDetailsPopup
-            {...props}
-            handleClose={() => setShowAuthDetails(false)}
-          />
+          <div className='IBMSMSMBSSDownloadsElementInsideAltTable'>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>Download URL</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{url}</p>
+              </div>
+            </div>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>SHA-256 hash</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{hash}</p>
+              </div>
+            </div>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>Signature from</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{signatureKey}</p>
+              </div>
+            </div>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>Scan</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{malwareScanLink}</p>
+              </div>
+            </div>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>Mod Version</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{modVersion}</p>
+              </div>
+            </div>
+            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                <p>Note</p>
+              </div>
+              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                <p>{customNote}</p>
+              </div>
+            </div>
+          </div>
         )}
       </div>
     </div>
@@ -878,122 +867,3 @@ const DisplayModAuthorBlogs = () => {
     </div>
   )
 }
-
-type ExtraDetailsProps = ModPermissions &
-  Pick<ModFormState, 'publisherNotes' | 'extraCredits'>
-const ExtraDetails = ({
-  publisherNotes,
-  extraCredits,
-  ...rest
-}: ExtraDetailsProps) => {
-  const extraBoxRef = useRef<HTMLDivElement>(null)
-
-  if (
-    typeof publisherNotes === 'undefined' &&
-    typeof extraCredits === 'undefined' &&
-    Object.values(rest).every((v) => typeof v === 'undefined')
-  ) {
-    return null
-  }
-
-  const handleClick = () => {
-    if (extraBoxRef.current) {
-      if (extraBoxRef.current.style.display === '') {
-        extraBoxRef.current.style.display = 'none'
-      } else {
-        extraBoxRef.current.style.display = ''
-      }
-    }
-  }
-  return (
-    <div className='IBMSMSMBSSExtra'>
-      <button
-        className='btn btnMain IBMSMSMBSSExtraBtn'
-        type='button'
-        onClick={handleClick}
-      >
-        Permissions &amp; Details
-      </button>
-      <div
-        className='IBMSMSMBSSExtraBox'
-        ref={extraBoxRef}
-        style={{
-          display: 'none'
-        }}
-      >
-        <div className='IBMSMSMBSSExtraBoxElementWrapper'>
-          {Object.keys(MODPERMISSIONS_CONF).map((k) => {
-            const permKey = k as keyof ModPermissions
-            const confKey = k as keyof typeof MODPERMISSIONS_CONF
-            const modPermission = MODPERMISSIONS_CONF[confKey]
-            const value = rest[permKey]
-            if (typeof value === 'undefined') return null
-
-            const text = MODPERMISSIONS_DESC[`${permKey}_${value}`]
-
-            return (
-              <div className='IBMSMSMBSSExtraBoxElement' key={k}>
-                <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                  <p>{modPermission.header}</p>
-                  {value ? (
-                    <div className='IBMSMSMBSSExtraBoxElementColMark IBMSMSMBSSExtraBoxElementColMarkGreen'>
-                      <svg
-                        className='IBMSMSMSSS_Author_Top_Icon'
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 512 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                      >
-                        <path d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z'></path>
-                      </svg>
-                    </div>
-                  ) : (
-                    <div className='IBMSMSMBSSExtraBoxElementColMark IBMSMSMBSSExtraBoxElementColMarkRed'>
-                      <svg
-                        className='IBMSMSMSSS_Author_Top_Icon'
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 512 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                      >
-                        <path d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z'></path>
-                      </svg>
-                    </div>
-                  )}
-                </div>
-                <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                  <p>
-                    {text}
-                    <br />
-                  </p>
-                </div>
-              </div>
-            )
-          })}
-          {typeof publisherNotes !== 'undefined' && publisherNotes !== '' && (
-            <div className='IBMSMSMBSSExtraBoxElement'>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                <p>Publisher Notes</p>
-              </div>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                <p>{publisherNotes}</p>
-              </div>
-            </div>
-          )}
-          {typeof extraCredits !== 'undefined' && extraCredits !== '' && (
-            <div className='IBMSMSMBSSExtraBoxElement'>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColStart'>
-                <p>Extra Credits</p>
-              </div>
-              <div className='IBMSMSMBSSExtraBoxElementCol IBMSMSMBSSExtraBoxElementColSecond'>
-                <p>{extraCredits}</p>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/mod/loader.ts

@@ -16,21 +16,19 @@ import {
   DEFAULT_FILTER_OPTIONS,
   extractBlogCardDetails,
   extractModData,
-  getFallbackPubkey,
   getLocalStorageItem,
   getReportingSet,
   log,
-  LogType,
-  timeout
+  LogType
 } from 'utils'
 
 export const modRouteLoader =
   (ndkContext: NDKContextType) =>
-  async ({ params, request }: LoaderFunctionArgs) => {
+  async ({ params }: LoaderFunctionArgs) => {
     const { naddr } = params
     if (!naddr) {
       log(true, LogType.Error, 'Required naddr.')
-      return redirect(appRoutes.mods)
+      return redirect(appRoutes.blogs)
     }
 
     // Decode from naddr
@@ -44,21 +42,11 @@ export const modRouteLoader =
       pubkey = decoded.data.pubkey
     } catch (error) {
       log(true, LogType.Error, `Failed to decode naddr: ${naddr}`, error)
-      throw new Error('Failed to fetch the mod. The address might be wrong')
+      throw new Error('Failed to fetch the blog. The address might be wrong')
     }
 
     const userState = store.getState().user
-    const loggedInUserPubkey =
-      (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
-    const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
-
-    // Check if editing and the user is the original author
-    // Redirect if NOT
-    const url = new URL(request.url)
-    const isEditMode = url.pathname.includes('edit-mod')
-    if (isEditMode && loggedInUserPubkey !== pubkey) {
-      return redirect(appRoutes.mods)
-    }
+    const loggedInUserPubkey = userState?.user?.pubkey as string | undefined
 
     try {
       // Set up the filters
@@ -92,10 +80,10 @@ export const modRouteLoader =
         latestFilter['#L'] = ['content-warning']
       }
 
-      // Parallel fetch mod event, latest events, mute, nsfw, repost lists
+      // Parallel fetch blog event, latest events, mute, and nsfw lists
       const settled = await Promise.allSettled([
-        Promise.race([ndkContext.fetchEvent(modFilter), timeout(2000)]),
-        Promise.race([ndkContext.fetchEvents(latestFilter), timeout(2000)]),
+        ndkContext.fetchEvent(modFilter),
+        ndkContext.fetchEvents(latestFilter),
         ndkContext.getMuteLists(loggedInUserPubkey), // Pass pubkey for logged-in users
         getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
         getReportingSet(CurationSetIdentifiers.Repost, ndkContext)
@@ -103,7 +91,6 @@ export const modRouteLoader =
 
       const result: ModPageLoaderResult = {
         mod: undefined,
-        event: undefined,
         latest: [],
         isAddedToNSFW: false,
         isBlocked: false,
@@ -113,16 +100,13 @@ export const modRouteLoader =
       // Check the mod event result
       const fetchEventResult = settled[0]
       if (fetchEventResult.status === 'fulfilled' && fetchEventResult.value) {
-        // Save original event
-        result.event = fetchEventResult.value
-
         // Extract the mod data from the event
         result.mod = extractModData(fetchEventResult.value)
       } else if (fetchEventResult.status === 'rejected') {
         log(
           true,
           LogType.Error,
-          'Unable to fetch the mod event.',
+          'Unable to fetch the blog event.',
           fetchEventResult.reason
         )
       }
@@ -133,7 +117,7 @@ export const modRouteLoader =
         throw new Error('We are unable to find the mod on the relays')
       }
 
-      // Check the latest blog events
+      // Check the lateast blog events
       const fetchEventsResult = settled[1]
       if (fetchEventsResult.status === 'fulfilled' && fetchEventsResult.value) {
         // Extract the blog card details from the events
@@ -151,27 +135,10 @@ export const modRouteLoader =
       if (muteLists.status === 'fulfilled' && muteLists.value) {
         if (muteLists && muteLists.value) {
           if (result.mod && result.mod.aTag) {
-            // Show user or admin post warning if any mute list includes either post or author
-            if (
-              muteLists.value.user.replaceableEvents.includes(
-                result.mod.aTag
-              ) ||
-              muteLists.value.user.authors.includes(result.mod.author)
-            ) {
-              result.postWarning = 'user'
-            }
-
             if (
               muteLists.value.admin.replaceableEvents.includes(
                 result.mod.aTag
               ) ||
-              muteLists.value.admin.authors.includes(result.mod.author)
-            ) {
-              result.postWarning = 'admin'
-            }
-
-            // Check if user has blocked this profile
-            if (
               muteLists.value.user.replaceableEvents.includes(result.mod.aTag)
             ) {
               result.isBlocked = true
@@ -179,6 +146,8 @@ export const modRouteLoader =
           }
 
           // Moderate the latest
+          const isAdmin =
+            userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
           const isOwner =
             userState.user?.pubkey && userState.user.pubkey === pubkey
           const isUnmoderatedFully =

src/pages/mods/loader.ts

@@ -1,13 +1,7 @@
 import { NDKContextType } from 'contexts/NDKContext'
 import { store } from 'store'
 import { MuteLists } from 'types'
-import {
-  getReportingSet,
-  CurationSetIdentifiers,
-  log,
-  LogType,
-  getFallbackPubkey
-} from 'utils'
+import { getReportingSet, CurationSetIdentifiers, log, LogType } from 'utils'
 
 export interface ModsPageLoaderResult {
   muteLists: {
@@ -37,11 +31,15 @@ export const modsRouteLoader = (ndkContext: NDKContextType) => async () => {
 
   // Get the current state
   const userState = store.getState().user
-  const loggedInUserPubkey =
-    (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
+
+  // Check if current user is logged in
+  let userPubkey: string | undefined
+  if (userState.auth && userState.user?.pubkey) {
+    userPubkey = userState.user.pubkey as string
+  }
 
   const settled = await Promise.allSettled([
-    ndkContext.getMuteLists(loggedInUserPubkey),
+    ndkContext.getMuteLists(userPubkey),
     getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
     getReportingSet(CurationSetIdentifiers.Repost, ndkContext)
   ])

src/pages/profile/index.tsx

@@ -30,8 +30,6 @@ import {
   copyTextToClipboard,
   DEFAULT_FILTER_OPTIONS,
   extractBlogCardDetails,
-  log,
-  LogType,
   now,
   npubToHex,
   scrollIntoView,
@@ -48,6 +46,7 @@ export const ProfilePage = () => {
     profilePubkey,
     profile,
     isBlocked: _isBlocked,
+    isOwnProfile,
     repostList,
     muteLists,
     nsfwList
@@ -61,11 +60,6 @@ export const ProfilePage = () => {
   const displayName =
     profile?.displayName || profile?.name || '[name not set up]'
   const [showReportPopUp, setShowReportPopUp] = useState(false)
-  const isLoggedIn = userState.auth && userState.user?.pubkey !== 'undefined'
-  const isOwnProfile =
-    userState.auth &&
-    userState.user?.pubkey &&
-    userState.user.pubkey === profilePubkey
 
   const [isBlocked, setIsBlocked] = useState(_isBlocked)
   const handleBlock = async () => {
@@ -74,7 +68,7 @@ export const ProfilePage = () => {
       return
     }
 
-    let userHexKey: string | undefined
+    let userHexKey: string
 
     setIsLoading(true)
     setLoadingSpinnerDesc('Getting user pubkey')
@@ -82,11 +76,7 @@ export const ProfilePage = () => {
     if (userState.auth && userState.user?.pubkey) {
       userHexKey = userState.user.pubkey as string
     } else {
-      try {
-        userHexKey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      userHexKey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!userHexKey) {
@@ -383,25 +373,23 @@ export const ProfilePage = () => {
                         </a>
                         {!isOwnProfile && (
                           <>
-                            {isLoggedIn && (
-                              <a
-                                className='dropdown-item dropdownMainMenuItem'
-                                id='reportUser'
-                                onClick={() => setShowReportPopUp(true)}
+                            <a
+                              className='dropdown-item dropdownMainMenuItem'
+                              id='reportUser'
+                              onClick={() => setShowReportPopUp(true)}
+                            >
+                              <svg
+                                xmlns='http://www.w3.org/2000/svg'
+                                viewBox='0 0 512 512'
+                                width='1em'
+                                height='1em'
+                                fill='currentColor'
+                                className='IBMSMSMSSS_Author_Top_Icon'
                               >
-                                <svg
-                                  xmlns='http://www.w3.org/2000/svg'
-                                  viewBox='0 0 512 512'
-                                  width='1em'
-                                  height='1em'
-                                  fill='currentColor'
-                                  className='IBMSMSMSSS_Author_Top_Icon'
-                                >
-                                  <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
-                                </svg>
-                                Report
-                              </a>
-                            )}
+                                <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z'></path>
+                              </svg>
+                              Report
+                            </a>
                             <a
                               className='dropdown-item dropdownMainMenuItem'
                               onClick={isBlocked ? handleUnblock : handleBlock}
@@ -518,15 +506,11 @@ const ReportUserPopup = ({
 
     setIsLoading(true)
     setLoadingSpinnerDesc('Getting user pubkey')
-    let userHexKey: string | undefined
+    let userHexKey: string
     if (userState.auth && userState.user?.pubkey) {
       userHexKey = userState.user.pubkey as string
     } else {
-      try {
-        userHexKey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      userHexKey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!userHexKey) {
@@ -677,7 +661,7 @@ const ReportUserPopup = ({
 }
 
 const ProfileTabBlogs = () => {
-  const { profilePubkey, muteLists, nsfwList } =
+  const { profile, muteLists, nsfwList } =
     useLoaderData() as ProfilePageLoaderResult
   const navigation = useNavigation()
   const { fetchEvents } = useNDKContext()
@@ -685,7 +669,7 @@ const ProfileTabBlogs = () => {
   const [isLoading, setIsLoading] = useState(true)
   const blogfilter: NDKFilter = useMemo(() => {
     const filter: NDKFilter = {
-      authors: [profilePubkey],
+      authors: [profile?.pubkey as string],
       kinds: [kinds.LongFormArticle]
     }
 
@@ -699,13 +683,13 @@ const ProfileTabBlogs = () => {
     }
 
     return filter
-  }, [filterOptions.nsfw, filterOptions.source, profilePubkey])
+  }, [filterOptions.nsfw, filterOptions.source, profile?.pubkey])
 
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(false)
   const [blogs, setBlogs] = useState<Partial<BlogCardDetails>[]>([])
   useEffect(() => {
-    if (profilePubkey) {
+    if (profile) {
       // Initial blog fetch, go beyond limit to check for next
       const filter: NDKFilter = {
         ...blogfilter,
@@ -720,7 +704,7 @@ const ProfileTabBlogs = () => {
           setIsLoading(false)
         })
     }
-  }, [blogfilter, fetchEvents, profilePubkey])
+  }, [blogfilter, fetchEvents, profile])
 
   const handleNext = useCallback(() => {
     if (isLoading) return
@@ -774,11 +758,9 @@ const ProfileTabBlogs = () => {
     let _blogs = blogs || []
     const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
     const isOwner =
-      userState.user?.pubkey && userState.user.pubkey === profilePubkey
+      userState.user?.pubkey && userState.user.pubkey === profile?.pubkey
     const isUnmoderatedFully =
       filterOptions.moderated === ModeratedFilter.Unmoderated_Fully
-    const isOnlyBlocked =
-      filterOptions.moderated === ModeratedFilter.Only_Blocked
 
     // Add nsfw tag to blogs included in nsfwList
     if (filterOptions.nsfw !== NSFWFilter.Hide_NSFW) {
@@ -794,16 +776,9 @@ const ProfileTabBlogs = () => {
       (b) => !(b.nsfw && filterOptions.nsfw === NSFWFilter.Hide_NSFW)
     )
 
-    if (isOnlyBlocked && isAdmin) {
-      _blogs = _blogs.filter(
-        (b) =>
-          muteLists.admin.authors.includes(b.author!) ||
-          muteLists.admin.replaceableEvents.includes(b.aTag!)
-      )
-    } else if (isUnmoderatedFully && (isAdmin || isOwner)) {
-      // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
-      // Allow "Unmoderated Fully" when author visits own profile
-    } else {
+    // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
+    // Allow "Unmoderated Fully" when author visits own profile
+    if (!((isAdmin || isOwner) && isUnmoderatedFully)) {
       _blogs = _blogs.filter(
         (b) =>
           !muteLists.admin.authors.includes(b.author!) &&
@@ -840,7 +815,7 @@ const ProfileTabBlogs = () => {
     muteLists.user.authors,
     muteLists.user.replaceableEvents,
     nsfwList,
-    profilePubkey,
+    profile?.pubkey,
     userState.user?.npub,
     userState.user?.pubkey
   ])
@@ -851,7 +826,10 @@ const ProfileTabBlogs = () => {
         <LoadingSpinner desc={'Loading...'} />
       )}
 
-      <BlogsFilter filterKey={'filter-blog'} author={profilePubkey} />
+      <BlogsFilter
+        filterKey={'filter-blog'}
+        author={profile?.pubkey as string}
+      />
 
       <div className='IBMSMList IBMSMListAlt'>
         {moderatedAndSortedBlogs.map((b) => (

src/pages/profile/loader.ts

@@ -6,7 +6,6 @@ import { store } from 'store'
 import { MuteLists, UserProfile } from 'types'
 import {
   CurationSetIdentifiers,
-  getFallbackPubkey,
   getReportingSet,
   log,
   LogType,
@@ -17,6 +16,7 @@ export interface ProfilePageLoaderResult {
   profilePubkey: string
   profile: UserProfile
   isBlocked: boolean
+  isOwnProfile: boolean
   muteLists: {
     admin: MuteLists
     user: MuteLists
@@ -58,17 +58,21 @@ export const profileRouteLoader =
 
     // Get the current state
     const userState = store.getState().user
-    const loggedInUserPubkey =
-      (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
+
+    // Check if current user is logged in
+    let userPubkey: string | undefined
+    if (userState.auth && userState.user?.pubkey) {
+      userPubkey = userState.user.pubkey as string
+    }
 
     // Redirect if profile naddr is missing
     // - home if user is not logged
     let profileRoute = appRoutes.home
-    if (!profilePubkey && loggedInUserPubkey) {
+    if (!profilePubkey && userPubkey) {
       // - own profile
       profileRoute = getProfilePageRoute(
         nip19.nprofileEncode({
-          pubkey: loggedInUserPubkey
+          pubkey: userPubkey
         })
       )
     }
@@ -79,6 +83,7 @@ export const profileRouteLoader =
       profilePubkey: profilePubkey,
       profile: {},
       isBlocked: false,
+      isOwnProfile: false,
       muteLists: {
         admin: {
           authors: [],
@@ -93,9 +98,14 @@ export const profileRouteLoader =
       repostList: []
     }
 
+    // Check if user the user is logged in
+    if (userState.auth && userState.user?.pubkey) {
+      result.isOwnProfile = userState.user.pubkey === profilePubkey
+    }
+
     const settled = await Promise.allSettled([
       ndkContext.findMetadata(profilePubkey),
-      ndkContext.getMuteLists(loggedInUserPubkey),
+      ndkContext.getMuteLists(userPubkey),
       getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
       getReportingSet(CurationSetIdentifiers.Repost, ndkContext)
     ])

src/pages/search.tsx

@@ -39,7 +39,6 @@ import {
   scrollIntoView
 } from 'utils'
 import { useCuratedSet } from 'hooks/useCuratedSet'
-import dedup from 'utils/nostr'
 
 enum SearchKindEnum {
   Mods = 'Mods',
@@ -174,15 +173,12 @@ const Filters = React.memo(() => {
               </button>
               <div className='dropdown-menu dropdownMainMenu'>
                 {Object.values(ModeratedFilter).map((item, index) => {
-                  const isAdmin =
-                    userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
+                  if (item === ModeratedFilter.Unmoderated_Fully) {
+                    const isAdmin =
+                      userState.user?.npub ===
+                      import.meta.env.VITE_REPORTING_NPUB
 
-                  if (item === ModeratedFilter.Only_Blocked && !isAdmin) {
-                    return null
-                  }
-
-                  if (item === ModeratedFilter.Unmoderated_Fully && !isAdmin) {
-                    return null
+                    if (!isAdmin) return null
                   }
 
                   return (
@@ -442,16 +438,9 @@ const UsersResult = ({
     const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
     const isUnmoderatedFully =
       moderationFilter === ModeratedFilter.Unmoderated_Fully
-    const isOnlyBlocked = moderationFilter === ModeratedFilter.Only_Blocked
 
-    if (isOnlyBlocked && isAdmin) {
-      filtered = filtered.filter((profile) =>
-        muteLists.admin.authors.includes(profile.pubkey as string)
-      )
-    } else if (isUnmoderatedFully && isAdmin) {
-      // Only apply filtering if the user is not an admin
-      // or the admin has not selected "Unmoderated Fully"
-    } else {
+    // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
+    if (!(isAdmin && isUnmoderatedFully)) {
       filtered = filtered.filter(
         (profile) => !muteLists.admin.authors.includes(profile.pubkey as string)
       )
@@ -519,11 +508,6 @@ const GamesResult = ({ searchTerm }: GamesResultProps) => {
 
   return (
     <>
-      {searchTerm !== '' && filteredGames.length === 0 && (
-        <div className='IBMSecMain IBMSMListWrapper'>
-          Game not found. Send us a message where you can reach us to add it
-        </div>
-      )}
       <div className='IBMSecMain IBMSMListWrapper'>
         <div className='IBMSMList IBMSMListFeaturedAlt'>
           {filteredGames
@@ -537,14 +521,20 @@ const GamesResult = ({ searchTerm }: GamesResultProps) => {
             ))}
         </div>
       </div>
-      {searchTerm !== '' && filteredGames.length > MAX_GAMES_PER_PAGE && (
-        <Pagination
-          page={page}
-          disabledNext={filteredGames.length <= page * MAX_GAMES_PER_PAGE}
-          handlePrev={handlePrev}
-          handleNext={handleNext}
-        />
-      )}
+      <Pagination
+        page={page}
+        disabledNext={filteredGames.length <= page * MAX_GAMES_PER_PAGE}
+        handlePrev={handlePrev}
+        handleNext={handleNext}
+      />
     </>
   )
 }
+function dedup(event1: NDKEvent, event2: NDKEvent) {
+  // return the newest of the two
+  if (event1.created_at! > event2.created_at!) {
+    return event1
+  }
+
+  return event2
+}

src/pages/settings/preference.tsx

@@ -55,16 +55,12 @@ export const PreferencesSetting = () => {
   const handleSave = async () => {
     setIsSaving(true)
 
-    let hexPubkey: string | undefined
+    let hexPubkey: string
 
     if (user?.pubkey) {
       hexPubkey = user.pubkey as string
     } else {
-      try {
-        hexPubkey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        log(true, LogType.Error, `Could not get pubkey`, error)
-      }
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
     }
 
     if (!hexPubkey) {

src/pages/submitMod.tsx

@@ -0,0 +1,88 @@
+import { NDKFilter } from '@nostr-dev-kit/ndk'
+import { nip19 } from 'nostr-tools'
+import { useState } from 'react'
+import { useLocation, useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import { LoadingSpinner } from '../components/LoadingSpinner'
+import { ModForm } from '../components/ModForm'
+import { ProfileSection } from '../components/ProfileSection'
+import { useAppSelector, useDidMount, useNDKContext } from '../hooks'
+import '../styles/innerPage.css'
+import '../styles/styles.css'
+import '../styles/write.css'
+import { ModDetails } from '../types'
+import { extractModData, log, LogType } from '../utils'
+
+export const SubmitModPage = () => {
+  const location = useLocation()
+  const { naddr } = useParams()
+  const { fetchEvent } = useNDKContext()
+  const [modData, setModData] = useState<ModDetails>()
+  const [isFetching, setIsFetching] = useState(false)
+
+  const userState = useAppSelector((state) => state.user)
+
+  const title = location.pathname.startsWith('/edit-mod')
+    ? 'Edit Mod'
+    : 'Submit a mod'
+
+  useDidMount(async () => {
+    if (naddr) {
+      const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
+      const { identifier, kind, pubkey } = decoded.data
+
+      const filter: NDKFilter = {
+        '#a': [identifier],
+        authors: [pubkey],
+        kinds: [kind]
+      }
+
+      setIsFetching(true)
+
+      fetchEvent(filter)
+        .then((event) => {
+          if (event) {
+            const extracted = extractModData(event)
+            setModData(extracted)
+          }
+        })
+        .catch((err) => {
+          log(
+            true,
+            LogType.Error,
+            'An error occurred in fetching mod details from relays',
+            err
+          )
+          toast.error('An error occurred in fetching mod details from relays')
+        })
+        .finally(() => {
+          setIsFetching(false)
+        })
+    }
+  })
+  return (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div className='IBMSMSplitMain'>
+            <div className='IBMSMSplitMainBigSide'>
+              <div className='IBMSMTitleMain'>
+                <h2 className='IBMSMTitleMainHeading'>{title}</h2>
+              </div>
+              <div className='IBMSMSMBS_Write'>
+                {isFetching ? (
+                  <LoadingSpinner desc='Fetching mod details from relays' />
+                ) : (
+                  <ModForm existingModData={modData} />
+                )}
+              </div>
+            </div>
+            {userState.auth && userState.user?.pubkey && (
+              <ProfileSection pubkey={userState.user.pubkey as string} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/submitMod/action.ts

@@ -1,310 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk'
-import { NDKContextType } from 'contexts/NDKContext'
-import { kinds, nip19, Event, UnsignedEvent } from 'nostr-tools'
-import { ActionFunctionArgs, redirect } from 'react-router-dom'
-import { toast } from 'react-toastify'
-import { getModPageRoute } from 'routes'
-import { store } from 'store'
-import {
-  FormErrors,
-  ModFormState,
-  MODPERMISSIONS_CONF,
-  SubmitModActionResult,
-  TimeoutError
-} from 'types'
-import {
-  isReachable,
-  isValidImageUrl,
-  isValidUrl,
-  log,
-  LogType,
-  MOD_DRAFT_CACHE_KEY,
-  now,
-  removeLocalStorageItem,
-  timeout
-} from 'utils'
-import { v4 as uuidv4 } from 'uuid'
-import { T_TAG_VALUE } from '../../constants'
-
-export const submitModRouteAction =
-  (ndkContext: NDKContextType) =>
-  async ({ params, request }: ActionFunctionArgs) => {
-    const userState = store.getState().user
-    let hexPubkey: string
-    if (userState.auth && userState.user?.pubkey) {
-      hexPubkey = userState.user.pubkey as string
-    } else {
-      try {
-        hexPubkey = (await window.nostr?.getPublicKey()) as string
-      } catch (error) {
-        if (error instanceof Error) {
-          log(true, LogType.Error, 'Failed to get public key.', error)
-        }
-
-        toast.error('Failed to get public key.')
-        return null
-      }
-    }
-
-    if (!hexPubkey) {
-      toast.error('Could not get pubkey')
-      return null
-    }
-
-    // Get the form data from submit request
-    try {
-      const formState = (await request.json()) as ModFormState
-
-      // Check for errors
-      const formErrors = await validateState(formState)
-
-      // Return early if there are any errors
-      if (Object.keys(formErrors).length) {
-        return {
-          type: 'validation',
-          error: formErrors
-        } as SubmitModActionResult
-      }
-
-      const currentTimeStamp = now()
-
-      const { naddr } = params
-      // Check if we are editing or this is a new mob
-      const isEditing = naddr && request.method === 'PUT'
-
-      const uuid = formState.dTag || uuidv4()
-      const aTag =
-        formState.aTag || `${kinds.ClassifiedListing}:${hexPubkey}:${uuid}`
-      const published_at = formState.published_at || currentTimeStamp
-
-      const tags = [
-        ['d', uuid],
-        ['a', aTag],
-        ['r', formState.rTag],
-        ['t', T_TAG_VALUE],
-        ['published_at', published_at.toString()],
-        ['game', formState.game],
-        ['title', formState.title],
-        ['featuredImageUrl', formState.featuredImageUrl],
-        ['summary', formState.summary],
-        ['nsfw', formState.nsfw.toString()],
-        ['repost', formState.repost.toString()],
-        ['screenshotsUrls', ...formState.screenshotsUrls],
-        ['tags', ...formState.tags.split(',')],
-        [
-          'downloadUrls',
-          ...formState.downloadUrls.map((downloadUrl) =>
-            JSON.stringify(downloadUrl)
-          )
-        ],
-        [
-          'otherAssets',
-          formState.otherAssets?.toString() ??
-            MODPERMISSIONS_CONF.otherAssets.default.toString()
-        ],
-        [
-          'uploadPermission',
-          formState.uploadPermission?.toString() ??
-            MODPERMISSIONS_CONF.uploadPermission.toString()
-        ],
-        [
-          'modPermission',
-          formState.modPermission?.toString() ??
-            MODPERMISSIONS_CONF.modPermission.toString()
-        ],
-        [
-          'convPermission',
-          formState.convPermission?.toString() ??
-            MODPERMISSIONS_CONF.convPermission.toString()
-        ],
-        [
-          'assetUsePermission',
-          formState.assetUsePermission?.toString() ??
-            MODPERMISSIONS_CONF.assetUsePermission.toString()
-        ],
-        [
-          'assetUseComPermission',
-          formState.assetUseComPermission?.toString() ??
-            MODPERMISSIONS_CONF.assetUseComPermission.toString()
-        ],
-        ['publisherNotes', formState.publisherNotes ?? ''],
-        ['extraCredits', formState.extraCredits ?? '']
-      ]
-
-      if (formState.repost && formState.originalAuthor) {
-        tags.push(['originalAuthor', formState.originalAuthor])
-      }
-
-      // Prepend com.degmods to avoid leaking categories to 3rd party client's search
-      // Add hierarchical namespaces labels
-      if (formState.LTags.length > 0) {
-        for (let i = 0; i < formState.LTags.length; i++) {
-          tags.push(['L', `com.degmods:${formState.LTags[i]}`])
-        }
-      }
-
-      // Add category labels
-      if (formState.lTags.length > 0) {
-        for (let i = 0; i < formState.lTags.length; i++) {
-          tags.push(['l', `com.degmods:${formState.lTags[i]}`])
-        }
-      }
-
-      const unsignedEvent: UnsignedEvent = {
-        kind: kinds.ClassifiedListing,
-        created_at: currentTimeStamp,
-        pubkey: hexPubkey,
-        content: formState.body,
-        tags
-      }
-
-      const signedEvent = await window.nostr
-        ?.signEvent(unsignedEvent)
-        .then((event) => event as Event)
-        .catch((err) => {
-          toast.error('Failed to sign the event!')
-          log(true, LogType.Error, 'Failed to sign the event!', err)
-          return null
-        })
-
-      if (!signedEvent) {
-        toast.error('Failed to sign the event!')
-        return null
-      }
-
-      const ndkEvent = new NDKEvent(ndkContext.ndk, signedEvent)
-      // Publishing a mod sometime hangs (ndk.publish has internal timeout of 10s)
-      // Make sure to actually throw a timeout error (30s)
-      try {
-        const publishedOnRelays = await Promise.race([
-          ndkContext.publish(ndkEvent),
-          timeout(30000)
-        ])
-        // Handle cases where publishing failed or succeeded
-        if (publishedOnRelays.length === 0) {
-          toast.error('Failed to publish event on any relay')
-        } else {
-          toast.success(
-            `Event published successfully to the following relays\n\n${publishedOnRelays.join(
-              '\n'
-            )}`
-          )
-
-          !isEditing && removeLocalStorageItem(MOD_DRAFT_CACHE_KEY)
-
-          const naddr = nip19.naddrEncode({
-            identifier: aTag,
-            pubkey: signedEvent.pubkey,
-            kind: signedEvent.kind,
-            relays: publishedOnRelays
-          })
-
-          return redirect(getModPageRoute(naddr))
-        }
-      } catch (error) {
-        if (error instanceof TimeoutError) {
-          const result: SubmitModActionResult = {
-            type: 'timeout',
-            data: {
-              dTag: uuid,
-              aTag,
-              published_at: published_at
-            }
-          }
-          return result
-        }
-
-        // Rethrow non-timeout for general catch
-        throw error
-      }
-    } catch (error) {
-      log(true, LogType.Error, 'Failed to sign the event!', error)
-      return null
-    }
-
-    return null
-  }
-
-const validateState = async (
-  formState: Partial<ModFormState>
-): Promise<FormErrors> => {
-  const errors: FormErrors = {}
-
-  if (!formState.game || formState.game === '') {
-    errors.game = 'Game field can not be empty'
-  }
-
-  if (!formState.title || formState.title === '') {
-    errors.title = 'Title field can not be empty'
-  }
-
-  if (!formState.body || formState.body === '') {
-    errors.body = 'Body field can not be empty'
-  }
-
-  if (!formState.featuredImageUrl || formState.featuredImageUrl === '') {
-    errors.featuredImageUrl = 'FeaturedImageUrl field can not be empty'
-  } else if (
-    !isValidImageUrl(formState.featuredImageUrl) ||
-    !(await isReachable(formState.featuredImageUrl))
-  ) {
-    errors.featuredImageUrl =
-      'FeaturedImageUrl must be a valid and reachable image URL'
-  }
-
-  if (!formState.summary || formState.summary === '') {
-    errors.summary = 'Summary field can not be empty'
-  }
-
-  if (!formState.screenshotsUrls || formState.screenshotsUrls.length === 0) {
-    errors.screenshotsUrls = ['Required at least one screenshot url']
-  } else {
-    for (let i = 0; i < formState.screenshotsUrls.length; i++) {
-      const url = formState.screenshotsUrls[i]
-      if (
-        !isValidUrl(url) ||
-        !isValidImageUrl(url) ||
-        !(await isReachable(url))
-      ) {
-        if (!errors.screenshotsUrls)
-          errors.screenshotsUrls = Array(formState.screenshotsUrls.length)
-
-        errors.screenshotsUrls![i] =
-          'All screenshot URLs must be valid and reachable image URLs'
-      }
-    }
-  }
-
-  if (!formState.tags || formState.tags === '') {
-    errors.tags = 'Tags field can not be empty'
-  }
-
-  if (!formState.downloadUrls || formState.downloadUrls.length === 0) {
-    errors.downloadUrls = ['Required at least one download url']
-  } else {
-    for (let i = 0; i < formState.downloadUrls.length; i++) {
-      const downloadUrl = formState.downloadUrls[i]
-      if (!isValidUrl(downloadUrl.url)) {
-        if (!errors.downloadUrls)
-          errors.downloadUrls = Array(formState.downloadUrls.length)
-
-        errors.downloadUrls![i] = 'Download url must be valid and reachable'
-      }
-
-      if (
-        downloadUrl.mediaUrl &&
-        downloadUrl.mediaUrl.trim() !== '' &&
-        (!isValidUrl(downloadUrl.mediaUrl) ||
-          !isValidImageUrl(downloadUrl.mediaUrl) ||
-          !(await isReachable(downloadUrl.mediaUrl)))
-      ) {
-        if (!errors.downloadUrls)
-          errors.downloadUrls = Array(formState.downloadUrls.length)
-
-        errors.downloadUrls![i] = 'Media URLs must be valid and reachable image'
-      }
-    }
-  }
-
-  return errors
-}

src/pages/submitMod/index.tsx

@@ -1,41 +0,0 @@
-import { LoadingSpinner, TimerLoadingSpinner } from 'components/LoadingSpinner'
-import { ModForm } from 'components/ModForm'
-import { ProfileSection } from 'components/ProfileSection'
-import { useAppSelector } from 'hooks'
-import { useLoaderData, useNavigation } from 'react-router-dom'
-import { ModPageLoaderResult } from 'types'
-
-export const SubmitModPage = () => {
-  const data = useLoaderData() as ModPageLoaderResult
-  const mod = data?.mod
-  const navigation = useNavigation()
-  const userState = useAppSelector((state) => state.user)
-  const title = mod ? 'Edit Mod' : 'Submit a mod'
-  return (
-    <div className='InnerBodyMain'>
-      <div className='ContainerMain'>
-        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
-          <div className='IBMSMSplitMain'>
-            <div className='IBMSMSplitMainBigSide'>
-              <div className='IBMSMTitleMain'>
-                <h2 className='IBMSMTitleMainHeading'>{title}</h2>
-              </div>
-              {navigation.state === 'loading' && (
-                <LoadingSpinner desc='Fetching mod details from relays' />
-              )}
-              {navigation.state === 'submitting' && (
-                <TimerLoadingSpinner timeoutMs={10000} countdownMs={30000}>
-                  Publishing mod to relays
-                </TimerLoadingSpinner>
-              )}
-              <ModForm />
-            </div>
-            {userState.auth && userState.user?.pubkey && (
-              <ProfileSection pubkey={userState.user.pubkey as string} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/supporters.tsx

@@ -1,3 +0,0 @@
-export const SupportersPage = () => {
-  return <h2>WIP</h2>
-}

src/pages/write/action.ts

@@ -3,14 +3,14 @@ import { ActionFunctionArgs, redirect } from 'react-router-dom'
 import { getBlogPageRoute } from 'routes'
 import { BlogFormErrors, BlogEventSubmitForm, BlogEventEditForm } from 'types'
 import {
-  BLOG_DRAFT_CACHE_KEY,
   isReachable,
   isValidImageUrl,
   log,
   LogType,
   now,
-  removeLocalStorageItem
+  parseFormData
 } from 'utils'
+import TurndownService from 'turndown'
 import { kinds, UnsignedEvent, Event, nip19 } from 'nostr-tools'
 import { toast } from 'react-toastify'
 import { NDKEvent } from '@nostr-dev-kit/ndk'
@@ -44,9 +44,12 @@ export const writeRouteAction =
     }
 
     // Get the form data from submit request
-    const formSubmit = (await request.json()) as
-      | BlogEventSubmitForm
-      | BlogEventEditForm
+    const formData = await request.formData()
+
+    // Parse the the data
+    const formSubmit = parseFormData<BlogEventSubmitForm | BlogEventEditForm>(
+      formData
+    )
 
     // Check for errors
     const formErrors = await validateFormData(formSubmit)
@@ -54,8 +57,9 @@ export const writeRouteAction =
     // Return earily if there are any errors
     if (Object.keys(formErrors).length) return formErrors
 
-    // Get the markdown from formData
-    const content = decodeURIComponent(formSubmit.content!)
+    // Get the markdown from the html
+    const turndownService = new TurndownService()
+    const content = turndownService.turndown(formSubmit.content!)
 
     // Check if we are editing or this is a new blog
     const { naddr } = params
@@ -78,7 +82,7 @@ export const writeRouteAction =
     const tTags = formSubmit
       .tags!.toLowerCase()
       .split(',')
-      .map((t) => ['t', t.trim()])
+      .map((t) => ['t', t])
 
     const tags = [
       ['d', uuid],
@@ -93,7 +97,7 @@ export const writeRouteAction =
 
     // Add NSFW tag, L label namespace standardized tag
     // https://github.com/nostr-protocol/nips/blob/2838e3bd51ac00bd63c4cef1601ae09935e7dd56/README.md#standardized-tags
-    if (formSubmit.nsfw) tags.push(['L', 'content-warning'])
+    if (formSubmit.nsfw === 'on') tags.push(['L', 'content-warning'])
 
     const unsignedEvent: UnsignedEvent = {
       kind: kinds.LongFormArticle,
@@ -126,9 +130,6 @@ export const writeRouteAction =
             '\n'
           )}`
         )
-
-        !isEditing && removeLocalStorageItem(BLOG_DRAFT_CACHE_KEY)
-
         const naddr = nip19.naddrEncode({
           identifier: uuid,
           pubkey: signedEvent.pubkey,
@@ -153,7 +154,11 @@ const validateFormData = async (
     errors.title = 'Title field can not be empty'
   }
 
-  if (!formData.content || formData.content.trim() === '') {
+  if (
+    !formData.content ||
+    formData.content.trim() === '' ||
+    formData.content.trim() === '<p></p>'
+  ) {
     errors.content = 'Content field can not be empty'
   }
 

src/pages/write/index.tsx

@@ -1,123 +1,72 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
+  Form,
   useActionData,
   useLoaderData,
-  useNavigation,
-  useSubmit
+  useNavigation
 } from 'react-router-dom'
 import {
-  CheckboxField,
-  InputField,
-  InputFieldWithImageUpload
-} from 'components/Inputs'
-import { ProfileSection } from 'components/ProfileSection'
-import { useAppSelector, useLocalCache } from 'hooks'
-import {
-  BlogEventEditForm,
-  BlogEventSubmitForm,
-  BlogFormErrors,
-  BlogPageLoaderResult
-} from 'types'
+  CheckboxFieldUncontrolled,
+  InputError,
+  InputFieldUncontrolled,
+  MenuBar
+} from '../../components/Inputs'
+import { ProfileSection } from '../../components/ProfileSection'
+import { useAppSelector } from '../../hooks'
+import { BlogFormErrors, BlogPageLoaderResult } from 'types'
+import '../../styles/innerPage.css'
+import '../../styles/styles.css'
+import '../../styles/write.css'
 import { LoadingSpinner } from 'components/LoadingSpinner'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
 import { AlertPopup } from 'components/AlertPopup'
-import { Editor, EditorRef } from 'components/Markdown/Editor'
-import { InputError } from 'components/Inputs/Error'
-import { BLOG_DRAFT_CACHE_KEY, initializeBlogForm } from 'utils'
-import 'styles/innerPage.css'
-import 'styles/styles.css'
-import 'styles/write.css'
 
 export const WritePage = () => {
   const userState = useAppSelector((state) => state.user)
   const data = useLoaderData() as BlogPageLoaderResult
-
   const formErrors = useActionData() as BlogFormErrors
   const navigation = useNavigation()
-  const submit = useSubmit()
 
   const blog = data?.blog
-
-  // Enable cache for the new blog
-  const isEditing = typeof data?.blog !== 'undefined'
-  const [cache, setCache, clearCache] =
-    useLocalCache<BlogEventSubmitForm>(BLOG_DRAFT_CACHE_KEY)
-
-  const title = isEditing ? 'Edit blog post' : 'Submit a blog post'
-  const [formState, setFormState] = useState<
-    BlogEventSubmitForm | BlogEventEditForm
-  >(isEditing ? initializeBlogForm(blog) : cache ? cache : initializeBlogForm())
-
-  useEffect(() => {
-    !isEditing && setCache(formState)
-  }, [formState, isEditing, setCache])
-
-  const editorRef = useRef<EditorRef>(null)
-
-  const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
-  const handleReset = useCallback(() => {
-    setShowConfirmPopup(true)
-  }, [])
-  const handleResetConfirm = useCallback(
-    (confirm: boolean) => {
-      setShowConfirmPopup(false)
-
-      // Cancel if not confirmed
-      if (!confirm) return
-
-      const initialState = initializeBlogForm(blog)
-
-      // Reset editor
-      editorRef.current?.setMarkdown(initialState.content)
-      setFormState(initialState)
-
-      // Clear cache
-      !isEditing && clearCache()
-    },
-    [blog, clearCache, isEditing]
-  )
-
-  const handleImageChange = useCallback((_name: string, value: string) => {
-    setFormState((prev) => ({
-      ...prev,
-      image: value
-    }))
-  }, [])
-
-  const handleInputChange = useCallback((name: string, value: string) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      [name]: value
-    }))
-  }, [])
-
-  const handleEditorChange = useCallback(
-    (md: string) => {
-      handleInputChange('content', md)
-    },
-    [handleInputChange]
-  )
-
-  const handleCheckboxChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, checked } = e.target
-      setFormState((prevState) => ({
-        ...prevState,
-        [name]: checked
-      }))
-    },
-    []
-  )
-
-  const handleFormSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault()
-      submit(JSON.stringify(formState), {
-        method: isEditing ? 'put' : 'post',
-        encType: 'application/json'
+  const title = data?.blog ? 'Edit blog post' : 'Submit a blog post'
+  const html = marked.parse(blog?.content || '', { async: false })
+  const sanitized = DOMPurify.sanitize(html)
+  const [content, setContent] = useState<string>(sanitized)
+  const editor = useEditor({
+    content: content,
+    extensions: [
+      StarterKit,
+      Link,
+      Image.configure({
+        inline: true,
+        HTMLAttributes: {
+          class: 'IBMSMSMBSSPostImg'
+        }
       })
-    },
-    [formState, isEditing, submit]
-  )
+    ],
+    onUpdate: ({ editor }) => {
+      setContent(editor.getHTML())
+    }
+  })
+
+  const formRef = useRef<HTMLFormElement>(null)
+  const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
+  const handleReset = () => {
+    setShowConfirmPopup(true)
+  }
+  const handleResetConfirm = (confirm: boolean) => {
+    setShowConfirmPopup(false)
+
+    // Cancel if not confirmed
+    if (!confirm) return
+
+    formRef.current?.reset()
+  }
 
   return (
     <div className='InnerBodyMain'>
@@ -134,63 +83,71 @@ export const WritePage = () => {
               {navigation.state === 'submitting' && (
                 <LoadingSpinner desc='Publishing blog to relays' />
               )}
-              <form className='IBMSMSMBS_Write' onSubmit={handleFormSubmit}>
-                <InputField
+              <Form
+                ref={formRef}
+                className='IBMSMSMBS_Write'
+                method={blog ? 'put' : 'post'}
+              >
+                <InputFieldUncontrolled
                   label='Title'
                   name='title'
-                  value={formState.title}
+                  defaultValue={blog?.title}
                   error={formErrors?.title}
-                  onChange={handleInputChange}
-                  placeholder='Blog title'
                 />
-                <div className='inputLabelWrapperMain'>
-                  <label className='form-label labelMain'>Content</label>
-                  <div className='inputMain'>
-                    <Editor
-                      ref={editorRef}
-                      markdown={formState.content}
-                      onChange={handleEditorChange}
-                    />
+                {editor && (
+                  <div className='inputLabelWrapperMain'>
+                    <label className='form-label labelMain'>Content</label>
+                    <div className='inputMain'>
+                      <MenuBar editor={editor} />
+                      <EditorContent editor={editor} />
+                    </div>
+                    {typeof formErrors?.content !== 'undefined' && (
+                      <InputError message={formErrors?.content} />
+                    )}
+                    <input name='content' hidden value={content} readOnly />
                   </div>
-                  {typeof formErrors?.content !== 'undefined' && (
-                    <InputError message={formErrors?.content} />
-                  )}
-                </div>
-                <InputFieldWithImageUpload
+                )}
+                <InputFieldUncontrolled
                   label='Featured Image URL'
                   name='image'
                   inputMode='url'
-                  value={formState.image}
+                  defaultValue={blog?.image}
                   error={formErrors?.image}
-                  onInputChange={handleImageChange}
-                  placeholder='Image URL'
                 />
-                <InputField
+                <InputFieldUncontrolled
                   label='Summary'
                   name='summary'
                   type='textarea'
-                  value={formState.summary}
+                  defaultValue={blog?.summary}
                   error={formErrors?.summary}
-                  onChange={handleInputChange}
-                  placeholder={'This is a quick description of my blog'}
                 />
-                <InputField
+                <InputFieldUncontrolled
                   label='Tags'
                   description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
                   placeholder='Tags'
                   name='tags'
-                  value={formState.tags}
+                  defaultValue={blog?.tTags?.join(', ')}
                   error={formErrors?.tags}
-                  onChange={handleInputChange}
                 />
-                <CheckboxField
+                <CheckboxFieldUncontrolled
                   label='This post is not safe for work (NSFW)'
                   name='nsfw'
-                  isChecked={formState.nsfw}
-                  handleChange={handleCheckboxChange}
-                  type='stylized'
+                  defaultChecked={blog?.nsfw}
                 />
-
+                {typeof blog?.dTag !== 'undefined' && (
+                  <input name='dTag' hidden value={blog.dTag} readOnly />
+                )}
+                {typeof blog?.rTag !== 'undefined' && (
+                  <input name='rTag' hidden value={blog.rTag} readOnly />
+                )}
+                {typeof blog?.published_at !== 'undefined' && (
+                  <input
+                    name='published_at'
+                    hidden
+                    value={blog.published_at}
+                    readOnly
+                  />
+                )}
                 <div className='IBMSMSMBS_WriteAction'>
                   <button
                     className='btn btnMain'
@@ -201,7 +158,7 @@ export const WritePage = () => {
                       navigation.state === 'submitting'
                     }
                   >
-                    {isEditing ? 'Reset' : 'Clear fields'}
+                    {blog ? 'Reset' : 'Clear fields'}
                   </button>
                   <button
                     className='btn btnMain'
@@ -222,13 +179,13 @@ export const WritePage = () => {
                     handleClose={() => setShowConfirmPopup(false)}
                     header={'Are you sure?'}
                     label={
-                      isEditing
+                      blog
                         ? `Are you sure you want to clear all changes?`
                         : `Are you sure you want to clear all field data?`
                     }
                   />
                 )}
-              </form>
+              </Form>
             </div>
             {userState.auth && userState.user?.pubkey && (
               <ProfileSection pubkey={userState.user.pubkey as string} />

src/routes/index.tsx

@@ -16,7 +16,6 @@ import { profileRouteLoader } from 'pages/profile/loader'
 import { SettingsPage } from '../pages/settings'
 import { GamePage } from '../pages/game'
 import { NotFoundPage } from '../pages/404'
-import { submitModRouteAction } from 'pages/submitMod/action'
 import { FeedLayout } from '../layout/feed'
 import { FeedPage } from '../pages/feed'
 import { NotificationsPage } from '../pages/notifications'
@@ -28,21 +27,18 @@ import { BlogPage } from '../pages/blog'
 import { blogRouteLoader } from '../pages/blog/loader'
 import { blogRouteAction } from '../pages/blog/action'
 import { reportRouteAction } from '../actions/report'
-import { BackupPage } from 'pages/backup'
-import { SupportersPage } from 'pages/supporters'
-import { commentsLoader } from 'loaders/comment'
-import { CommentsPopup } from 'components/comment/CommentsPopup'
 
 export const appRoutes = {
+  index: '/',
   home: '/',
   games: '/games',
   game: '/game/:name',
   mods: '/mods',
-  mod: '/mod/:naddr/',
+  mod: '/mod/:naddr',
   modReport_actionOnly: '/mod/:naddr/report',
   about: '/about',
   blogs: '/blog',
-  blog: '/blog/:naddr/',
+  blog: '/blog/:naddr',
   blogEdit: '/blog/:naddr/edit',
   blogReport_actionOnly: '/blog/:naddr/report',
   submitMod: '/submit-mod',
@@ -55,9 +51,7 @@ export const appRoutes = {
   settingsAdmin: '/settings-admin',
   profile: '/profile/:nprofile?',
   feed: '/feed',
-  notifications: '/notifications',
-  backup: '/backup',
-  supporters: '/supporters'
+  notifications: '/notifications'
 }
 
 export const getGamePageRoute = (name: string) =>
@@ -81,7 +75,7 @@ export const routerWithNdkContext = (context: NDKContextType) =>
       element: <Layout />,
       children: [
         {
-          path: appRoutes.home,
+          path: appRoutes.index,
           element: <HomePage />
         },
         {
@@ -100,13 +94,6 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         {
           path: appRoutes.mod,
           element: <ModPage />,
-          children: [
-            {
-              path: ':nevent',
-              element: <CommentsPopup />,
-              loader: commentsLoader(context)
-            }
-          ],
           loader: modRouteLoader(context),
           action: modRouteAction(context),
           errorElement: <NotFoundPage title={'Something went wrong.'} />
@@ -127,13 +114,6 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         {
           path: appRoutes.blog,
           element: <BlogPage />,
-          children: [
-            {
-              path: ':nevent',
-              element: <CommentsPopup />,
-              loader: commentsLoader(context)
-            }
-          ],
           loader: blogRouteLoader(context),
           action: blogRouteAction(context),
           errorElement: <NotFoundPage title={'Something went wrong.'} />
@@ -151,16 +131,11 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         },
         {
           path: appRoutes.submitMod,
-          action: submitModRouteAction(context),
-          element: <SubmitModPage key='submit' />,
-          errorElement: <NotFoundPage title={'Something went wrong.'} />
+          element: <SubmitModPage />
         },
         {
           path: appRoutes.editMod,
-          loader: modRouteLoader(context),
-          action: submitModRouteAction(context),
-          element: <SubmitModPage key='edit' />,
-          errorElement: <NotFoundPage title={'Something went wrong.'} />
+          element: <SubmitModPage />
         },
         {
           path: appRoutes.write,
@@ -205,14 +180,6 @@ export const routerWithNdkContext = (context: NDKContextType) =>
             }
           ]
         },
-        {
-          path: appRoutes.backup,
-          element: <BackupPage />
-        },
-        {
-          path: appRoutes.supporters,
-          element: <SupportersPage />
-        },
         {
           path: '*',
           element: <NotFoundPage />

src/styles/backup.css

@@ -1,36 +0,0 @@
-.backupList {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 15px;
-}
-
-.backupListLink {
-  transition: ease 0.4s;
-  overflow: hidden;
-  padding: 15px;
-  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
-  border-radius: 10px;
-  /*border: solid 1px rgba(255,255,255,0.1);*/
-  position: relative;
-  color: rgba(255,255,255,0.75);
-  min-height: 150px;
-  display: flex;
-  flex-direction: column;
-}
-
-.backupListLink:hover {
-  transition: ease 0.4s;
-  text-decoration: unset;
-  color: rgb(255,255,255);
-  transform: scale(1.02);
-}
-
-.backupListLinkInside {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-  flex-grow: 1;
-  justify-content: end;
-}
-

src/styles/cardGames.css

@@ -5,17 +5,12 @@
   grid-gap: 10px;
   text-decoration: unset;
   cursor: pointer;
-  border-radius: 15px;
-  overflow: hidden;
-  padding: 5px 5px 10px 5px;
 }
 
 .cardGameMainWrapperLink:hover {
   transition: ease 0.4s;
   transform: scale(1.02);
   text-decoration: unset;
-  background: rgb(225,225,225,0.05);
-  box-shadow: 0 0 8px 0 rgb(0,0,0,0.15);
 }
 
 .cardGameMainWrapperLink:active {
@@ -29,7 +24,7 @@
 }
 
 .cardGameMain {
-  border-radius: 10px;
+  border-radius: 15px;
   box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
   width: 100%;
   object-fit: cover; /* Ensures the image covers the container like a background image */
@@ -41,7 +36,7 @@
 .cardGameMainTitle {
   transition: ease 0.4s;
   color: rgba(255, 255, 255, 0.5);
-  padding: 0 10px;
+  padding: 0 15px;
   font-weight: bold;
   display: -webkit-box;
   -webkit-box-orient: vertical;

src/styles/comments.css

@@ -59,7 +59,6 @@
 }
 
 .IBMSMSMBSSCL_CBText {
-  white-space: pre-line;
 }
 
 .IBMSMSMBSSCL_CBTextStatus {
@@ -476,16 +475,7 @@ hover {
 }
 
 .IBMSMSMBSSCL_CommentNoteRepliesTitle {
-  width: 100%;
-  margin: 0 0 15px 0;
   color: rgba(255, 255, 255, 0.5);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.IBMSMSMBSSCL_CommentNoteRepliesTitleBtn {
- font-size: 16px;
 }
 
 .IBMSMSMBSSCL_CAElementLoadWrapper {

src/styles/downloads.css

@@ -9,9 +9,9 @@
   width: 100%;
   border-radius: 10px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-gap: 15px;
-  border: solid 1px rgba(255, 255, 255, 0.05);
+  border: solid 1px rgba(255,255,255,0.05);
   overflow: auto;
   max-height: 550px;
   padding: 15px;
@@ -27,7 +27,7 @@
 }
 
 .IBMSMSMBSSDownloadsTitle {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255,255,255,0.5);
 }
 
 .IBMSMSMBSSDownloadsElement {
@@ -36,11 +36,11 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
-  border: solid 1px rgba(255, 255, 255, 0);
-  background: rgba(255, 255, 255, 0.05);
+  border: solid 1px rgba(255,255,255,0);
+  background: rgba(255,255,255,0.05);
   padding: 10px;
   border-radius: 10px;
-  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
 }
 
 @media (max-width: 768px) {
@@ -50,7 +50,7 @@
 }
 
 .btnMain.IBMSMSMBSSDownloadsElementBtn {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255,255,255,0.05);
   border-radius: 10px;
   width: 100%;
 }
@@ -62,8 +62,8 @@
 }
 
 .btnMain.IBMSMSMBSSDownloadsElementBtn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+  background: rgba(255,255,255,0.1);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
 }
 
 .IBMSMSMBSSDownloadsElementInside {
@@ -71,7 +71,7 @@
   flex-direction: column;
   justify-content: start;
   align-items: start;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255,255,255,0.5);
   grid-gap: 10px;
 }
 
@@ -97,30 +97,27 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  background: rgba(255, 255, 255, 0);
+  background: rgba(255,255,255,0);
   overflow: hidden;
   border-radius: 10px;
-  border: solid 1px rgba(255, 255, 255, 0.05);
+  border: solid 1px rgba(255,255,255,0.05);
   cursor: pointer;
 }
 
 .IBMSMSMBSSDEIReactionsElement:hover {
   transition: ease 0.4s;
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.75);
-  border: solid 1px rgba(255, 255, 255, 0);
+  background: rgba(255,255,255,0.05);
+  color: rgba(255,255,255,0.75);
+  border: solid 1px rgba(255,255,255,0);
 }
 
-.IBMSMSMBSSDEIReactionsElement:hover
-  > .IBMSMSMBSSDEIReactionsElementIconWrapper {
+.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper {
   transition: ease 0.4s;
-  background: rgba(255, 255, 255, 0.05);
-  border-right: solid 1px rgba(255, 255, 255, 0);
+  background: rgba(255,255,255,0.05);
+  border-right: solid 1px rgba(255,255,255,0);
 }
 
-.IBMSMSMBSSDEIReactionsElement:hover
-  > .IBMSMSMBSSDEIReactionsElementIconWrapper
-  > .IBMSMSMBSSDEIReactionsElementIcon {
+.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon {
   transform: scale(1.1);
 }
 
@@ -150,9 +147,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  background: rgba(255, 255, 255, 0);
+  background: rgba(255,255,255,0);
   padding: 10px 5px;
-  border-right: solid 1px rgba(255, 255, 255, 0.05);
+  border-right: solid 1px rgba(255,255,255,0.05);
 }
 
 .IBMSMSMBSSDownloadsElementInsideDetails {
@@ -163,20 +160,17 @@
 }
 
 .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive {
-  background: rgba(255, 255, 255, 0.05);
-  border: solid 1px rgba(255, 255, 255, 0);
+  background: rgba(255,255,255,0.05);
+  border: solid 1px rgba(255,255,255,0);
 }
 
-.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
-  > .IBMSMSMBSSDEIReactionsElementIconWrapper {
-  background: rgba(255, 255, 255, 0.05);
-  border-right: solid 1px rgba(255, 255, 255, 0);
+.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper {
+  background: rgba(255,255,255,0.05);
+  border-right: solid 1px rgba(255,255,255,0);
 }
 
-.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
-  > .IBMSMSMBSSDEIReactionsElementIconWrapper
-  > .IBMSMSMBSSDEIReactionsElementIcon {
-  color: rgba(255, 255, 255, 0.75);
+.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon {
+  color: rgba(255,255,255,0.75);
 }
 
 .IBMSMSMBSSDownloadsActions {
@@ -194,7 +188,7 @@
   display: flex;
   flex-direction: column;
   border-radius: 10px;
-  border: solid 1px rgba(255, 255, 255, 0.1);
+  border: solid 1px rgba(255,255,255,0.1);
   overflow: auto;
   grid-gap: 1px;
 }
@@ -208,7 +202,7 @@
 
 .IBMSMSMBSSDownloadsElementInsideAltTableRow:hover {
   transition: ease 0.4s;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255,255,255,0.05);
 }
 
 @media (max-width: 576px) {
@@ -222,17 +216,12 @@
   text-align: start;
   padding: 10px 15px;
 }
-.IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img {
-  width: 100%;
-  max-width: 300px;
-  border-radius: 6px;
-}
 
 .IBMSMSMBSSDownloadsElementInsideAltTableRowCol.IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst {
   text-align: center;
   font-weight: bold;
   max-width: 200px;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255,255,255,0.05);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -248,16 +237,13 @@
   transition: ease 0.4s;
   cursor: pointer;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.25);
+  color: rgba(255,255,255,0.25);
 }
 
 .IBMSMSMBSSDownloadsElementInsideAltText:hover {
   transition: ease 0.4s;
   cursor: pointer;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.75);
+  color: rgba(255,255,255,0.75);
 }
 
-.IBMSMSMBSSDownloadsElementDtitle {
-  color: rgb(255,255,255,0.5);
-}

src/styles/mdxEditor.scss

@@ -1,154 +0,0 @@
-.editor,
-.viewer {
-  padding: 0;
-
-  > {
-    p {
-      margin: 5px 0 10px 0;
-    }
-    ul,
-    ol {
-      padding: 0 1rem;
-      margin: 1.25rem 1rem 1.25rem 0.4rem;
-
-      li p {
-        margin-top: 0.25em;
-        margin-bottom: 0.25em;
-      }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 15px 0 15px 0;
-      border-bottom: solid 1px rgb(255 255 255 / 10%);
-      padding: 0px 0 10px 0;
-      line-height: 1.5;
-      text-wrap: pretty;
-    }
-
-    h1 {
-      font-size: 1.4rem;
-    }
-
-    h2 {
-      font-size: 1.2rem;
-    }
-
-    h3 {
-      font-size: 1.1rem;
-    }
-
-    h4,
-    h5,
-    h6 {
-      font-size: 1rem;
-    }
-
-    blockquote {
-      border-radius: 0 10px 10px 0;
-      border-left: solid 6px rgba(255, 255, 255, 0.1);
-      padding: 25px;
-      background: #232323;
-      color: rgba(255, 255, 255, 0.75);
-      margin: 10px 0;
-    }
-  }
-
-  code {
-    background-color: #666;
-    border-radius: 0.4rem;
-    color: var(--black);
-    font-size: 0.85rem;
-    padding: 0.25em 0.3em;
-    outline: none;
-
-    &:empty::before {
-      content: '\00A0';
-    }
-  }
-
-  pre {
-    background: var(--black);
-    color: var(--white);
-    font-family: 'JetBrainsMono', monospace;
-    margin: 1.5rem 0;
-    padding: 0.75rem 1rem;
-    background: #00000030;
-    border-radius: 5px;
-    border: solid 2px rebeccapurple;
-
-    code {
-      background: none;
-      color: inherit;
-      font-size: 0.8rem;
-      padding: 0;
-    }
-  }
-
-  img {
-    background: #232323;
-    border-radius: 10px;
-    max-width: 100%;
-    height: auto;
-  }
-}
-.editor {
-  --basePageBg: var(--slate-3);
-  padding-top: 10px;
-  min-height: 75px;
-}
-.viewer {
-  table {
-    table-layout: fixed;
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-
-    & > tbody > tr > td,
-    & > thead > tr > th {
-      border: 1px solid #e0e1e6;
-      padding: 0.25rem 0.5rem;
-      white-space: normal;
-
-      & > div {
-        outline: none;
-
-        & > p {
-          margin: 0;
-        }
-      }
-
-      & > tbody > tr > td,
-      & > thead > tr > th {
-        [align='left'] {
-          text-align: left;
-        }
-        [align='center'] {
-          text-align: center;
-        }
-        [align='right'] {
-          text-align: right;
-        }
-      }
-
-      &:empty::before {
-        content: '\00A0';
-      }
-    }
-  }
-}
-.mdxeditor {
-  --baseBg: #262626;
-}
-.mdxeditor-toolbar {
-  top: 10px;
-  border: 1px solid rgb(255, 255, 255, 0.1);
-}
-.mdxeditor,
-.mdxeditor-popup-container {
-  --basePageBg: var(--slate-3);
-}

src/styles/post.css

@@ -283,132 +283,9 @@
   text-align: center;
 }
 
-.IBMSMSMBSSNote {
-  width: 100%;
-  border-radius: 8px;
-  padding: 10px 15px;
-  border: solid 2px rgba(255,255,255,0.1);
-  background: rgba(255,122,0,0.2);
-  color: rgba(255,255,255,0.95);
-  text-align: center;
-}
-
 .IBMSMSMBSSPostBodyHideText > * {
     width: 100%;
     text-align: center;
     margin: 0;
     padding: 10px;
-}
-
-.IBMSMSMBSSExtra {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-  overflow: hidden;
-  border-radius: 8px;
-  background: rgba(0,0,0,0.1);
-  border: solid 1px rgba(255,255,255,0.1);
-}
-
-.btnMain.IBMSMSMBSSExtraBtn {
-  border-radius: 0px;
-  flex-direction: column;
-  grid-gap: 0px;
-}
-
-.IBMSMSMBSSExtraBox {
-  width: 100%;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-}
-
-.IBMSMSMBSSExtraBoxElement {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-  background: rgba(255,255,255,0.05);
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.IBMSMSMBSSExtraBoxElementCol {
-  display: flex;
-  flex-direction: row;
-  align-items: start;
-  color: rgba(255,255,255,0.5);
-  padding: 10px;
-  grid-gap: 5px;
-}
-
-.IBMSMSMBSSExtraBoxElementCol.IBMSMSMBSSExtraBoxElementColStart {
-  font-weight: bold;
-  background: rgba(255,255,255,0.05);
-  justify-content: space-between;
-}
-
-.IBMSMSMBSSExtraBoxElementCol.IBMSMSMBSSExtraBoxElementColSecond {
-  flex-grow: 1;
-  max-height: 300px;
-  overflow: auto;
-  flex-direction: column;
-}
-
-.IBMSMSMBSSExtraBoxElementWrapper {
-  width: 100%;
-  overflow: hidden;
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 10px;
-}
-
-.IBMSMSMBSSExtraBoxElementColMark {
-  color: white;
-}
-
-.IBMSMSMBSSExtraBoxElementColMark.IBMSMSMBSSExtraBoxElementColMarkGreen {
-  color: #6cff6c;
-}
-
-.IBMSMSMBSSExtraBoxElementColMark.IBMSMSMBSSExtraBoxElementColMarkRed {
-  color: tomato;
-}
-
-.IBMSMSMBSSExtraBoxElementColChoice {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  grid-gap: 10px;
-  padding: 10px;
-  border-radius: 4px;
-  overflow: hidden;
-  position: relative;
-}
-
-.IBMSMSMBSSExtraBoxElementColChoiceRadio {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  opacity: 0;
-}
-
-.IBMSMSMBSSExtraBoxElementColChoiceBox {
-  transition: ease 0.2s;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  border: solid 2px rgba(255,255,255,0);
-  border-radius: 4px;
-}
-
-.IBMSMSMBSSExtraBoxElementColChoiceRadio:checked + .IBMSMSMBSSExtraBoxElementColChoiceBox {
-  border: solid 2px rgba(255,255,255,0.5);
 }

src/styles/styles.css

@@ -661,7 +661,6 @@ a:hover {
   padding-right: 50px;
 }
 
-.successMain,
 .errorMain {
   width: 100%;
   border-radius: 10px;
@@ -672,17 +671,13 @@ a:hover {
   flex-direction: row;
   grid-gap: 10px;
 }
-.successMainColor,
+
 .errorMainColor {
   width: 5px;
   border-radius: 2px;
-}
-.errorMainColor {
   background: tomato;
 }
-.successMainColor {
-  background: #60ae60;
-}
+
 .errorMainText {
 }
 
@@ -710,39 +705,3 @@ a:hover {
     transform: rotate(360deg);
   }
 }
-
-.uploadBoxMain {
-  background: hsl(0deg 0% 0% / 10%);
-  border-radius: 10px;
-  height: 150px;
-  padding: 10px;
-  border: solid 1px hsl(0deg 0% 100% / 5%);
-  transition: padding ease-in-out 0.4s;
-  position: relative;
-}
-
-.uploadBoxMain:hover {
-  padding: 5px;
-}
-
-.uploadBoxMainInside {
-  padding: 10px;
-  border: dashed 2px hsl(0deg 0% 100% / 5%);
-  border-radius: 8px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: hsl(0deg 0% 100% / 20%);
-  grid-gap: 10px;
-  cursor: pointer;
-}
-
-.inputLabelWrapperMain.inputLabelWrapperMainQR {
-    align-items: center;
-    padding: 25px;
-    background: rgb(0 0 0 / 10%);
-    border-radius: 10px;
-    border: solid 1px rgb(255 255 255 / 10%);
-}