From 4e6d0d31c12640598743d9f06988fc4b3073d764 Mon Sep 17 00:00:00 2001 From: jojoo-eth <122259402+jojoo-eth@users.noreply.github.com> Date: Sat, 31 Aug 2024 00:49:46 +0800 Subject: [PATCH] fix: portal bitcoin assets compatibility (#2544) * fix: portal bitcoin assets compatibility * feat: add dompurify --- infra/rooch-portal-v2/package.json | 2 + .../assets/components/ordinal-list-card.tsx | 64 +++++++++++-------- pnpm-lock.yaml | 31 +++++++-- 3 files changed, 67 insertions(+), 30 deletions(-) diff --git a/infra/rooch-portal-v2/package.json b/infra/rooch-portal-v2/package.json index 9dcbe9c698..065d89b005 100644 --- a/infra/rooch-portal-v2/package.json +++ b/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", diff --git a/infra/rooch-portal-v2/src/sections/assets/components/ordinal-list-card.tsx b/infra/rooch-portal-v2/src/sections/assets/components/ordinal-list-card.tsx index 58e60f22b7..d56597ed67 100644 --- a/infra/rooch-portal-v2/src/sections/assets/components/ordinal-list-card.tsx +++ b/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) => ) + Array.from({ length: 4 }).map((i, index) => ) ) : ordinalList?.data.length === 0 ? ( ) : ( - ordinalList?.data.map((i) => ( - - - - - {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} - - - - )) + 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 = ( + + ); + } + return ( + + + + + {parsePlainText} + + + + ); + }) )} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53cd704563..75dca672b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -421,6 +421,9 @@ importers: dayjs: specifier: ^1.11.11 version: 1.11.11 + dompurify: + specifier: ^3.1.6 + version: 3.1.6 framer-motion: specifier: ^11.2.10 version: 11.3.30(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -470,6 +473,9 @@ importers: '@types/autosuggest-highlight': specifier: ^3.2.3 version: 3.2.3 + '@types/dompurify': + specifier: ^3.0.5 + version: 3.0.5 '@types/node': specifier: ^20.14.2 version: 20.14.14 @@ -649,7 +655,7 @@ importers: version: 4.5.3(@types/node@20.14.14)(terser@5.31.1) vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0)(terser@5.31.1) + version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1) wait-on: specifier: ^7.0.1 version: 7.2.0 @@ -734,7 +740,7 @@ importers: version: 4.5.3(@types/node@20.14.14)(terser@5.31.1) vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0)(terser@5.31.1) + version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1) sdk/typescript/templates/react-counter: dependencies: @@ -822,7 +828,7 @@ importers: version: 4.5.3(@types/node@20.14.14)(terser@5.31.1) vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0)(terser@5.31.1) + version: 1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1) packages: @@ -4118,6 +4124,9 @@ packages: '@types/dockerode@3.3.31': resolution: {integrity: sha512-42R9eoVqJDSvVspV89g7RwRqfNExgievLNWoHkg7NoWIqAmavIbgQBb4oc0qRtHkxE+I3Xxvqv7qVXFABKPBTg==} + '@types/dompurify@3.0.5': + resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==} + '@types/estree-jsx@1.0.5': resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} @@ -4250,6 +4259,9 @@ packages: '@types/tmp@0.2.6': resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==} + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + '@types/unist@2.0.10': resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} @@ -5739,6 +5751,9 @@ packages: dompurify@3.1.5: resolution: {integrity: sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==} + dompurify@3.1.6: + resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==} + domutils@3.1.0: resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} @@ -13976,6 +13991,10 @@ snapshots: '@types/node': 20.14.14 '@types/ssh2': 1.15.0 + '@types/dompurify@3.0.5': + dependencies: + '@types/trusted-types': 2.0.7 + '@types/estree-jsx@1.0.5': dependencies: '@types/estree': 1.0.5 @@ -14111,6 +14130,8 @@ snapshots: '@types/tmp@0.2.6': {} + '@types/trusted-types@2.0.7': {} + '@types/unist@2.0.10': {} '@types/unist@3.0.2': {} @@ -15999,6 +16020,8 @@ snapshots: dompurify@3.1.5: {} + dompurify@3.1.6: {} + domutils@3.1.0: dependencies: dom-serializer: 2.0.0 @@ -21372,7 +21395,7 @@ snapshots: fsevents: 2.3.3 terser: 5.31.1 - vitest@1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0)(terser@5.31.1): + vitest@1.6.0(@types/node@20.14.14)(happy-dom@14.12.0)(jsdom@23.2.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1): dependencies: '@vitest/expect': 1.6.0 '@vitest/runner': 1.6.0