markdown for in app notifiactions

components/notifications/NotificationsDrawer.tsx

@@ -23,6 +23,8 @@ import {
 } from 'utils/notifications'
 import mangoStore from '@store/mangoStore'
 import { ttCommons, ttCommonsExpanded, ttCommonsMono } from 'utils/fonts'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 const NotificationsDrawer = ({
   isOpen,
@@ -199,7 +201,15 @@ const NotificationsDrawer = ({
                                 )}
                               </p>
                             </div>
-                            <p>{notification.content}</p>
+                            <p>
+                              <ReactMarkdown
+                                components={{ a: LinkRenderer }}
+                                className="markdown"
+                                remarkPlugins={[remarkGfm]}
+                              >
+                                {notification.content}
+                              </ReactMarkdown>
+                            </p>
                           </div>
                         </div>
                       ))}
@@ -249,3 +259,14 @@ const NotificationsDrawer = ({
 }
 
 export default NotificationsDrawer
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function LinkRenderer(props: any) {
+  return (
+    // eslint-disable-next-line react/prop-types
+    <a href={props.href} target="_blank" rel="noreferrer">
+      {/* eslint-disable-next-line react/prop-types */}
+      {props.children}
+    </a>
+  )
+}

components/notifications/TransactionNotification.tsx

@@ -19,6 +19,8 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import useSolBalance from 'hooks/useSolBalance'
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 const setMangoStore = mangoStore.getState().set
 
@@ -267,7 +269,13 @@ const TransactionNotification = ({
               <p
                 className={`mb-0 mt-0.5 break-all text-sm leading-tight text-th-fgd-4`}
               >
-                {parsedDescription}
+                <ReactMarkdown
+                  components={{ a: LinkRenderer }}
+                  className="markdown"
+                  remarkPlugins={[remarkGfm]}
+                >
+                  {parsedDescription}
+                </ReactMarkdown>
               </p>
             ) : null}
             {txid ? (
@@ -314,3 +322,14 @@ const TransactionNotification = ({
 }
 
 export default TransactionNotificationList
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function LinkRenderer(props: any) {
+  return (
+    // eslint-disable-next-line react/prop-types
+    <a href={props.href} target="_blank" rel="noreferrer">
+      {/* eslint-disable-next-line react/prop-types */}
+      {props.children}
+    </a>
+  )
+}

package.json

@@ -74,11 +74,13 @@
     "react-grid-layout": "1.3.4",
     "react-hotkeys-hook": "4.4.1",
     "react-i18next": "13.5.0",
+    "react-markdown": "9.0.1",
     "react-nice-dates": "3.1.0",
     "react-number-format": "4.9.2",
     "react-responsive-pagination": "2.2.3",
     "react-tsparticles": "2.2.4",
     "recharts": "2.5.0",
+    "remark-gfm": "4.0.0",
     "three": "^0.155.0",
     "tsparticles": "2.2.4",
     "walktour": "5.1.1",