fix: change markdown lib and add seatbelt report to create by params

package.json

@@ -53,6 +53,7 @@
     "gray-matter": "^4.0.3",
     "immer": "^10.0.3",
     "lokijs": "^1.5.12",
+    "markdown-to-jsx": "^7.3.2",
     "next": "^14.0.1",
     "next-themes": "^0.2.1",
     "nextjs-toploader": "^1.6.4",
@@ -67,9 +68,7 @@
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-loading-skeleton": "^3.3.1",
-    "react-markdown": "^8.0.7",
     "react-paginate": "^8.2.0",
-    "remark-gfm": "^4.0.0",
     "sharp": "^0.32.6",
     "viem": "^1.18.9",
     "wagmi": "^1.4.5",

src/createByParams/components/SeatBeltReportModal.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@mui/system';
+import React, { useRef } from 'react';
+
+import { BasicModal } from '../../ui';
+import { MarkdownContainer } from '../../ui/components/MarkdownContainer';
+
+interface SeatBeltReportModalProps {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+  report?: string;
+}
+
+export function SeatBeltReportModal({
+  isOpen,
+  setIsOpen,
+  report,
+}: SeatBeltReportModalProps) {
+  const initialFocusRef = useRef(null);
+
+  if (!report) return null;
+
+  return (
+    <BasicModal
+      maxWidth={980}
+      initialFocus={initialFocusRef}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      withCloseButton>
+      <Box sx={{ typography: 'h1', mb: 24 }}>Seatbelt Report</Box>
+
+      <MarkdownContainer markdown={report} />
+    </BasicModal>
+  );
+}

src/createByParams/store/createByParamsSlice.ts

@@ -15,6 +15,7 @@ import { IWeb3Slice } from '../../web3/store/web3Slice';
 import { PayloadParams } from '../types';
 
 export type NewPayload = Payload & {
+  seatbeltMD?: string;
   creator?: Hex;
   transactionHash?: string;
 };
@@ -137,9 +138,41 @@ export const createByParamsSlice: StoreSlice<
       }),
     );
 
+    const updatedPayloadsWithReports = await Promise.all(
+      updatedPayloadsData.map(async (payload) => {
+        const preLink =
+          'https://raw.githubusercontent.com/bgd-labs/seatbelt-gov-v3/main/reports/payloads';
+
+        try {
+          const response = await fetch(
+            `${preLink}/${payload.chainId}/${payload.payloadsController}/${payload.id}.md`,
+          );
+
+          if (response.ok) {
+            const reportMD: string = await response.text();
+
+            return {
+              seatbeltMD: reportMD,
+              ...payload,
+            } as NewPayload;
+          } else {
+            return {
+              seatbeltMD: undefined,
+              ...payload,
+            } as NewPayload;
+          }
+        } catch {
+          return {
+            seatbeltMD: undefined,
+            ...payload,
+          } as NewPayload;
+        }
+      }),
+    );
+
     set((state) =>
       produce(state, (draft) => {
-        draft.createPayloadsData[proposalId] = updatedPayloadsData;
+        draft.createPayloadsData[proposalId] = updatedPayloadsWithReports;
       }),
     );
   },

src/proposals/components/proposal/Details.tsx

@@ -1,11 +1,10 @@
 import { ProposalMetadata } from '@bgd-labs/aave-governance-ui-helpers';
-import { Box, useTheme } from '@mui/system';
+import { Box } from '@mui/system';
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
-import { BoxWith3D, Image, Link } from '../../../ui';
+import { BoxWith3D } from '../../../ui';
 import { CustomSkeleton } from '../../../ui/components/CustomSkeleton';
+import { MarkdownContainer } from '../../../ui/components/MarkdownContainer';
 import { texts } from '../../../ui/utils/texts';
 
 interface DetailsProps {
@@ -14,8 +13,6 @@ interface DetailsProps {
 }
 
 export function Details({ ipfs, ipfsError }: DetailsProps) {
-  const theme = useTheme();
-
   if (!ipfs && !ipfsError)
     return (
       <>
@@ -51,42 +48,7 @@ export function Details({ ipfs, ipfsError }: DetailsProps) {
     );
 
   return (
-    <Box
-      sx={{
-        wordBreak: 'break-word',
-        'h1, h2, h3, h4, h5, h6': { my: 12 },
-        table: {
-          width: '100%',
-          th: {
-            p: 10,
-            borderBottomColor: '$main',
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'solid',
-          },
-          td: {
-            p: 10,
-            borderBottomColor: '$main',
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'solid',
-            textAlign: 'center',
-          },
-        },
-        pre: {
-          p: 10,
-          my: 12,
-          borderRadius: '5px',
-          borderColor: '$main',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          backgroundColor: '$light',
-          font: '12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace',
-          overflowX: 'auto',
-        },
-        code: {
-          p: 2,
-          font: '12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace',
-        },
-      }}>
+    <>
       <Box sx={{ mb: 16 }}>
         <Box component="p" sx={{ typography: 'headline', mb: 12 }}>
           {texts.proposals.author}
@@ -96,119 +58,10 @@ export function Details({ ipfs, ipfsError }: DetailsProps) {
         </Box>
       </Box>
 
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          img({ src: _src, alt }) {
-            if (!_src) return null;
-            const src = /^\.\.\//.test(_src)
-              ? _src.replace(
-                  '../',
-                  'https://raw.githubusercontent.com/aave/aip/main/content/',
-                )
-              : _src;
-            return (
-              <Image
-                src={src}
-                alt={alt}
-                sx={{
-                  display: 'block',
-                  maxWidth: '100%',
-                  mt: 8,
-                  mx: 'auto',
-                  height: 'auto',
-                }}
-              />
-            );
-          },
-          a({ node, ...rest }) {
-            return (
-              <Link
-                href={rest.href || ''}
-                css={{
-                  color: '$textSecondary',
-                  textDecoration: 'underline',
-                  wordBreak: 'break-word',
-                  hover: { textDecoration: 'none' },
-                }}
-                inNewWindow>
-                {rest.children}
-              </Link>
-            );
-          },
-          h1({ node, ...rest }) {
-            return (
-              <Box
-                component="h3"
-                sx={{ typography: 'h3', my: 12, fontWeight: 600 }}>
-                {rest.children}
-              </Box>
-            );
-          },
-          h2({ node, ...rest }) {
-            return (
-              <Box component="p" sx={{ typography: 'headline', my: 12 }}>
-                {rest.children}
-              </Box>
-            );
-          },
-          p({ node, ...rest }) {
-            return (
-              <Box
-                component="p"
-                sx={{
-                  typography: 'body',
-                  mb: 8,
-                  lineHeight: '15px !important',
-                  [theme.breakpoints.up('lg')]: {
-                    typography: 'body',
-                    lineHeight: '22px !important',
-                  },
-                }}>
-                {rest.children}
-              </Box>
-            );
-          },
-          ul({ node, ...rest }) {
-            return (
-              <Box
-                component="ul"
-                sx={{
-                  typography: 'body',
-                  mb: 12,
-                  pl: 30,
-                  lineHeight: '15px !important',
-                  listStyleType: 'disc',
-                  [theme.breakpoints.up('lg')]: {
-                    typography: 'body',
-                    lineHeight: '22px !important',
-                  },
-                }}>
-                {rest.children}
-              </Box>
-            );
-          },
-          ol({ node, ...rest }) {
-            return (
-              <Box
-                component="ol"
-                sx={{
-                  typography: 'body',
-                  mb: 12,
-                  pl: 30,
-                  lineHeight: '15px !important',
-                  [theme.breakpoints.up('lg')]: {
-                    typography: 'body',
-                    lineHeight: '22px !important',
-                  },
-                }}>
-                {rest.children}
-              </Box>
-            );
-          },
-        }}>
-        {ipfs?.description || ''}
-      </ReactMarkdown>
-    </Box>
+      <MarkdownContainer
+        markdown={ipfs?.description || ''}
+        replaceImgSrc="https://raw.githubusercontent.com/aave/aip/main/content/"
+      />
+    </>
   );
 }