feat: render relay description content

src/components/RelayInfo/index.tsx

@@ -17,6 +17,8 @@ import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 import RelayReviewsPreview from './RelayReviewsPreview'
+import Content from '../Content'
+import { createFakeEvent } from '@/lib/event'
 
 export default function RelayInfo({ url, className }: { url: string; className?: string }) {
   const { t } = useTranslation()
@@ -53,7 +55,7 @@ export default function RelayInfo({ url, className }: { url: string; className?:
           )}
           {relayInfo.description && (
             <div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
-              {relayInfo.description}
+              <Content event={createFakeEvent({ content: relayInfo.description })} />
             </div>
           )}
         </div>

src/lib/event.ts

@@ -10,6 +10,7 @@ import {
   getImetaInfoFromImetaTag,
   tagNameEquals
 } from './tag'
+import { randomString } from './random'
 
 const EVENT_EMBEDDED_NOTES_CACHE = new LRUCache<string, string[]>({ max: 10000 })
 const EVENT_EMBEDDED_PUBKEYS_CACHE = new LRUCache<string, string[]>({ max: 10000 })
@@ -347,7 +348,7 @@ export function getReplaceableEventIdentifier(event: Event) {
 
 export function createFakeEvent(event: Partial<Event>): Event {
   return {
-    id: '',
+    id: randomString(64, { hex: true }),
     kind: 1,
     pubkey: '',
     content: '',

src/lib/random.ts

@@ -1,9 +1,11 @@
 const SEED = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+const HEX_SEED = 'abcdef0123456789'
 
-export function randomString(len = 32) {
+export function randomString(len = 32, { hex } = { hex: false }) {
   let str = ''
+  const seed = hex ? HEX_SEED : SEED
   for (let i = 0; i < len; i++) {
-    str += SEED[Math.floor(Math.random() * SEED.length)]
+    str += seed[Math.floor(Math.random() * SEED.length)]
   }
   return str
 }