src/components/ModForm.tsx

@@ -25,8 +25,8 @@ import {
 } from '../utils'
 import { CheckboxField, InputError, InputField } from './Inputs'
 import { RelayController } from '../controllers'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
-import { getModsInnerPageRoute } from '../routes'
+import { appRoutes, getModsInnerPageRoute } from '../routes'
 import { DownloadUrl, ModFormState, ModDetails } from '../types'
 import { LoadingSpinner } from './LoadingSpinner'
 import { T_TAG_VALUE } from '../constants'
@@ -55,6 +55,7 @@ type ModFormProps = {
 }
 
 export const ModForm = ({ existingModData }: ModFormProps) => {
+  const location = useLocation()
   const navigate = useNavigate()
   const userState = useAppSelector((state) => state.user)
 
@@ -64,6 +65,12 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
     initializeFormState(existingModData)
   )
 
+  useEffect(() => {
+    if (location.pathname === appRoutes.submitMod) {
+      setFormState(initializeFormState())
+    }
+  }, [location.pathname]) // Only trigger when the pathname changes to submit-mod
+
   const [formErrors, setFormErrors] = useState<FormErrors>({})
 
   useEffect(() => {
@@ -204,6 +211,9 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
     const uuid = uuidv4()
     const currentTimeStamp = now()
 
+    const aTag =
+      formState.aTag || `${kinds.ClassifiedListing}:${hexPubkey}:${uuid}`
+
     const unsignedEvent: UnsignedEvent = {
       kind: kinds.ClassifiedListing,
       created_at: currentTimeStamp,
@@ -211,10 +221,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
       content: formState.body,
       tags: [
         ['d', formState.dTag || uuid],
-        [
+        ['a', aTag],
-          'a',
-          formState.aTag || `${kinds.ClassifiedListing}:${hexPubkey}:${uuid}`
-        ],
         ['r', formState.rTag],
         ['t', T_TAG_VALUE],
         [
@@ -267,14 +274,14 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
         )}`
       )
 
-      const nevent = nip19.neventEncode({
+      const naddr = nip19.naddrEncode({
-        id: signedEvent.id,
+        identifier: aTag,
-        author: signedEvent.pubkey,
+        pubkey: signedEvent.pubkey,
         kind: signedEvent.kind,
         relays: publishedOnRelays
       })
 
-      navigate(getModsInnerPageRoute(nevent))
+      navigate(getModsInnerPageRoute(naddr))
     }
 
     setIsPublishing(false)

src/pages/innerMod.tsx

@@ -40,26 +40,21 @@ import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
 import { getModsEditPageRoute } from '../routes'
 
 export const InnerModPage = () => {
-  const { nevent } = useParams()
+  const { naddr } = useParams()
   const [modData, setModData] = useState<ModDetails>()
   const [isFetching, setIsFetching] = useState(true)
 
   useDidMount(async () => {
-    if (nevent) {
+    if (naddr) {
-      const decoded = nip19.decode<'nevent'>(nevent as `nevent1${string}`)
+      const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
-      const eventId = decoded.data.id
+      const { identifier, kind, pubkey, relays = [] } = decoded.data
-      const kind = decoded.data.kind
-      const author = decoded.data.author
-      const relays = decoded.data.relays || []
 
       const filter: Filter = {
-        ids: [eventId]
+        '#a': [identifier],
+        authors: [pubkey],
+        kinds: [kind]
       }
 
-      if (kind) filter.kinds = [kind]
-
-      if (author) filter.authors = [author]
-
       RelayController.getInstance()
         .fetchEvent(filter, relays)
         .then((event) => {
@@ -115,7 +110,7 @@ export const InnerModPage = () => {
             <div className='IBMSMSplitMainBigSide'>
               <div className='IBMSMSplitMainBigSideSec'>
                 <Game
-                  nevent={nevent!}
+                  naddr={naddr!}
                   game={modData.game}
                   author={modData.author}
                 />
@@ -198,12 +193,12 @@ export const InnerModPage = () => {
 }
 
 type GameProps = {
-  nevent: string
+  naddr: string
   game: string
   author: string
 }
 
-const Game = ({ nevent, game, author }: GameProps) => {
+const Game = ({ naddr, game, author }: GameProps) => {
   const navigate = useNavigate()
   const userState = useAppSelector((state) => state.user)
 
@@ -241,7 +236,7 @@ const Game = ({ nevent, game, author }: GameProps) => {
           {userState.auth && userState.user?.pubkey === author && (
             <a
               className='dropdown-item dropdownMainMenuItem'
-              onClick={() => navigate(getModsEditPageRoute(nevent))}
+              onClick={() => navigate(getModsEditPageRoute(naddr))}
             >
               <svg
                 xmlns='http://www.w3.org/2000/svg'

src/pages/mods.tsx

@@ -176,9 +176,9 @@ export const ModsPage = () => {
                     handleClick={() =>
                       navigate(
                         getModsInnerPageRoute(
-                          nip19.neventEncode({
+                          nip19.naddrEncode({
-                            id: mod.id,
+                            identifier: mod.aTag,
-                            author: mod.author,
+                            pubkey: mod.author,
                             kind: kinds.ClassifiedListing
                           })
                         )

src/pages/submitMod.tsx

@@ -15,7 +15,7 @@ import { useDidMount } from '../hooks'
 
 export const SubmitModPage = () => {
   const location = useLocation()
-  const { nevent } = useParams()
+  const { naddr } = useParams()
   const [modData, setModData] = useState<ModDetails>()
   const [isFetching, setIsFetching] = useState(false)
 
@@ -24,21 +24,16 @@ export const SubmitModPage = () => {
     : 'Submit a mod'
 
   useDidMount(async () => {
-    if (nevent) {
+    if (naddr) {
-      const decoded = nip19.decode<'nevent'>(nevent as `nevent1${string}`)
+      const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
-      const eventId = decoded.data.id
+      const { identifier, kind, pubkey, relays = [] } = decoded.data
-      const kind = decoded.data.kind
-      const author = decoded.data.author
-      const relays = decoded.data.relays || []
 
       const filter: Filter = {
-        ids: [eventId]
+        '#a': [identifier],
+        authors: [pubkey],
+        kinds: [kind]
       }
 
-      if (kind) filter.kinds = [kind]
-
-      if (author) filter.authors = [author]
-
       setIsFetching(true)
       RelayController.getInstance()
         .fetchEvent(filter, relays)

src/routes/index.tsx

@@ -13,11 +13,11 @@ export const appRoutes = {
   home: '/home',
   games: '/games',
   mods: '/mods',
-  modsInner: '/mods-inner/:nevent',
+  modsInner: '/mods-inner/:naddr',
   about: '/about',
   blog: '/blog',
   submitMod: '/submit-mod',
-  editMod: '/edit-mod/:nevent',
+  editMod: '/edit-mod/:naddr',
   write: '/write',
   settingsProfile: '/settings-profile',
   settingsRelays: '/settings-relays',
@@ -26,10 +26,10 @@ export const appRoutes = {
 }
 
 export const getModsInnerPageRoute = (eventId: string) =>
-  appRoutes.modsInner.replace(':nevent', eventId)
+  appRoutes.modsInner.replace(':naddr', eventId)
 
 export const getModsEditPageRoute = (eventId: string) =>
-  appRoutes.editMod.replace(':nevent', eventId)
+  appRoutes.editMod.replace(':naddr', eventId)
 
 export const routes = [
   {