fix: portal bitcoin assets compatibility (#2544)

* fix: portal bitcoin assets compatibility

* feat: add dompurify

infra/rooch-portal-v2/package.json

@@ -50,6 +50,7 @@
     "axios": "^1.7.2",
     "bignumber.js": "^9.1.2",
     "dayjs": "^1.11.11",
+    "dompurify": "^3.1.6",
     "framer-motion": "^11.2.10",
     "next": "^14.2.4",
     "nprogress": "^0.2.0",
@@ -68,6 +69,7 @@
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/autosuggest-highlight": "^3.2.3",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.14.2",
     "@types/nprogress": "^0.2.3",
     "@types/react": "^18.3.3",

infra/rooch-portal-v2/src/sections/assets/components/ordinal-list-card.tsx

@@ -1,10 +1,11 @@
+import type { ReactNode } from 'react';
 import type { IndexerStateIDView } from '@roochnetwork/rooch-sdk';
 
 import { useRef, useMemo, useState } from 'react';
 import { useRoochClientQuery } from '@roochnetwork/rooch-sdk-kit';
 
-import { Box, Card, Skeleton, CardHeader, Typography, CardContent } from '@mui/material';
-
+import { Box, Card, Chip, Skeleton, CardHeader, Typography, CardContent } from '@mui/material';
+import DOMPurify from 'dompurify';
 import { hexToString } from 'src/utils/common';
 
 import { EmptyContent } from 'src/components/empty-content/empty-content';
@@ -61,33 +62,44 @@ export default function OrdinalList({ address }: { address: string }) {
         }
       >
         {isOrdinalListPending ? (
-          Array.from({ length: 4 }).map((i,index) => <Skeleton key={index} height={256} />)
+          Array.from({ length: 4 }).map((i, index) => <Skeleton key={index} height={256} />)
         ) : ordinalList?.data.length === 0 ? (
           <EmptyContent title="No Ordinals Found" sx={{ py: 3 }} />
         ) : (
-          ordinalList?.data.map((i) => (
-            <Card key={i.id} elevation={0} className="!bg-gray-100 !shadow-none">
-              <CardHeader title={i.value.inscription_number} subheader="Inscriptions #" />
-              <CardContent>
-                <Typography
-                  noWrap
-                  sx={{
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-word',
-                    overflowWrap: 'break-word',
-                  }}
-                >
-                  {i.value.content_type === 'text/plain;charset=utf-8'
-                    ? JSON.stringify(
-                        JSON.parse(hexToString(i.value.body as unknown as string)),
-                        null,
-                        2
-                      )
-                    : i.value.content_type}
-                </Typography>
-              </CardContent>
-            </Card>
-          ))
+          ordinalList?.data.map((i) => {
+            let parsePlainText: string | null | undefined | ReactNode = '';
+            try {
+              parsePlainText =
+                i.value.content_type === 'text/plain;charset=utf-8'
+                  ? DOMPurify.sanitize(JSON.stringify(
+                      JSON.parse(hexToString(i.value.body as unknown as string)),
+                      null,
+                      2
+                    ))
+                  : i.value.content_type;
+            } catch (error) {
+              parsePlainText = (
+                <Chip label="Parse Error" size="small" variant="soft" color="error" />
+              );
+            }
+            return (
+              <Card key={i.id} elevation={0} className="!bg-gray-100 !shadow-none">
+                <CardHeader title={i.value.inscription_number} subheader="Inscriptions #" />
+                <CardContent>
+                  <Typography
+                    noWrap
+                    sx={{
+                      whiteSpace: 'pre-wrap',
+                      wordBreak: 'break-word',
+                      overflowWrap: 'break-word',
+                    }}
+                  >
+                    {parsePlainText}
+                  </Typography>
+                </CardContent>
+              </Card>
+            );
+          })
         )}
       </CardContent>
     </Card>