From fae5b05e99e0e9c57667e3df6748cf9dcb5cd234 Mon Sep 17 00:00:00 2001 From: Gabe Rodriguez Date: Wed, 6 Mar 2024 23:16:37 +0100 Subject: [PATCH] Update json viewer pkg (#696) * Update json viewer pkg * Use react-json-view-lite --- .../src/components/tx-details/hash-parser.tsx | 2 +- packages/ui/components/ui/json-viewer.tsx | 30 ++++ .../ui/components/ui/json-viewer/index.tsx | 22 --- .../components/ui/json-viewer/overrides.css | 5 - packages/ui/index.ts | 1 + packages/ui/package.json | 2 +- pnpm-lock.yaml | 168 ++---------------- 7 files changed, 44 insertions(+), 186 deletions(-) create mode 100644 packages/ui/components/ui/json-viewer.tsx delete mode 100644 packages/ui/components/ui/json-viewer/index.tsx delete mode 100644 packages/ui/components/ui/json-viewer/overrides.css diff --git a/apps/minifront/src/components/tx-details/hash-parser.tsx b/apps/minifront/src/components/tx-details/hash-parser.tsx index c9c912695c..aa61663e25 100644 --- a/apps/minifront/src/components/tx-details/hash-parser.tsx +++ b/apps/minifront/src/components/tx-details/hash-parser.tsx @@ -1,4 +1,5 @@ import { + JsonViewer, Tabs, TabsContent, TabsList, @@ -7,7 +8,6 @@ import { } from '@penumbra-zone/ui'; import { Jsonified, viewFromEmptyPerspective } from '@penumbra-zone/types'; import { TxDetailsLoaderResult } from '.'; -import { JsonViewer } from '@penumbra-zone/ui/components/ui/json-viewer'; import { TransactionInfo } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb'; export enum TxDetailsTab { diff --git a/packages/ui/components/ui/json-viewer.tsx b/packages/ui/components/ui/json-viewer.tsx new file mode 100644 index 0000000000..c46036b332 --- /dev/null +++ b/packages/ui/components/ui/json-viewer.tsx @@ -0,0 +1,30 @@ +import type { JsonObject, JsonValue } from '@bufbuild/protobuf'; +import { JsonView } from 'react-json-view-lite'; + +export const JsonViewer = ({ jsonObj }: { jsonObj: JsonObject | JsonValue[] }) => { + return ( +
+ level < 2} + style={{ + container: 'bg-black whitespace-pre-wrap break-words font-mono -mx-4', + basicChildStyle: 'mx-4 py-[2px]', + label: 'font-semibold mr-1.5 text-gray-200', + nullValue: 'text-red-600', + undefinedValue: 'text-red-600', + stringValue: 'text-amber-600', + booleanValue: 'text-purple-600', + numberValue: 'text-teal-600', + otherValue: 'text-blue-600', + punctuation: 'text-gray-500 mr-1.5', + collapseIcon: + 'text-teal-200 text-[10px] mr-1.5 select-none cursor-pointer after:content-["▼"]', + expandIcon: + 'text-teal-200 text-[10px] mr-1.5 select-none cursor-pointer after:content-["▶"]', + collapsedContent: 'text-amber-600 mr-1.5 after:content-["..."] after:text-xs', + }} + /> +
+ ); +}; diff --git a/packages/ui/components/ui/json-viewer/index.tsx b/packages/ui/components/ui/json-viewer/index.tsx deleted file mode 100644 index 16a08e2ac9..0000000000 --- a/packages/ui/components/ui/json-viewer/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import ReactJson from 'react-json-view'; -import type { JsonObject, JsonValue } from '@bufbuild/protobuf'; - -import './overrides.css'; - -export const JsonViewer = ({ jsonObj }: { jsonObj: JsonObject | JsonValue[] }) => { - return ( -
- -
- ); -}; diff --git a/packages/ui/components/ui/json-viewer/overrides.css b/packages/ui/components/ui/json-viewer/overrides.css deleted file mode 100644 index 3c6e5b2690..0000000000 --- a/packages/ui/components/ui/json-viewer/overrides.css +++ /dev/null @@ -1,5 +0,0 @@ -/* For some reason, the ✔️ is not aligned with 📋. This fixes that. */ -.copy-to-clipboard-container > span > span { - display: flex; - gap: 10px; -} diff --git a/packages/ui/index.ts b/packages/ui/index.ts index cda1bd94ca..96442ae9e5 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -26,5 +26,6 @@ export * from './components/ui/toaster'; export * from './components/ui/toggle'; export * from './components/ui/tooltip'; export * from './components/ui/tx/view/transaction'; +export * from './components/ui/json-viewer'; export * from './lib/toast'; diff --git a/packages/ui/package.json b/packages/ui/package.json index 7a6ef7db67..17d2b57249 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -33,7 +33,7 @@ "humanize-duration": "^3.31.0", "lucide-react": "^0.344.0", "react-dom": "^18.2.0", - "react-json-view": "^1.21.3", + "react-json-view-lite": "^1.2.1", "react-loader-spinner": "^6.1.6", "react-router-dom": "^6.22.2", "sonner": "1.4.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afa5d061cd..af02152760 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -673,9 +673,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) - react-json-view: - specifier: ^1.21.3 - version: 1.21.3(@types/react@18.2.63)(react-dom@18.2.0)(react@18.2.0) + react-json-view-lite: + specifier: ^1.2.1 + version: 1.2.1(react@18.2.0) react-loader-spinner: specifier: ^6.1.6 version: 6.1.6(react-dom@18.2.0)(react@18.2.0) @@ -6950,10 +6950,6 @@ packages: resolution: {integrity: sha512-1Sd1LrodN0XYxYeZcN1J4xYZvmvTwD5tDWaPUGPIzH1mFsmzsPnVtd2exWhecMjtZk/wYWjNZJiD3b1SLCeJqg==} dev: true - /asap@2.0.6: - resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==} - dev: false - /assert@2.1.0: resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} dependencies: @@ -7105,10 +7101,6 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - /base16@1.0.0: - resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==} - dev: false - /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -7908,14 +7900,6 @@ packages: cross-spawn: 6.0.5 dev: true - /cross-fetch@3.1.8: - resolution: {integrity: sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==} - dependencies: - node-fetch: 2.7.0 - transitivePeerDependencies: - - encoding - dev: false - /cross-spawn@6.0.5: resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==} engines: {node: '>=4.8'} @@ -9446,32 +9430,6 @@ packages: bser: 2.1.1 dev: true - /fbemitter@3.0.0: - resolution: {integrity: sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==} - dependencies: - fbjs: 3.0.5 - transitivePeerDependencies: - - encoding - dev: false - - /fbjs-css-vars@1.0.2: - resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==} - dev: false - - /fbjs@3.0.5: - resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==} - dependencies: - cross-fetch: 3.1.8 - fbjs-css-vars: 1.0.2 - loose-envify: 1.4.0 - object-assign: 4.1.1 - promise: 7.3.1 - setimmediate: 1.0.5 - ua-parser-js: 1.0.37 - transitivePeerDependencies: - - encoding - dev: false - /fd-slicer@1.1.0: resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==} dependencies: @@ -9696,18 +9654,6 @@ packages: engines: {node: '>=0.4.0'} dev: true - /flux@4.0.4(react@18.2.0): - resolution: {integrity: sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==} - peerDependencies: - react: ^15.0.2 || ^16.0.0 || ^17.0.0 - dependencies: - fbemitter: 3.0.0 - fbjs: 3.0.5 - react: 18.2.0 - transitivePeerDependencies: - - encoding - dev: false - /fn.name@1.1.0: resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==} dev: true @@ -11557,10 +11503,6 @@ packages: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} dev: true - /lodash.curry@4.1.1: - resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==} - dev: false - /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} @@ -11576,10 +11518,6 @@ packages: resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==} dev: true - /lodash.flow@3.5.0: - resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==} - dev: false - /lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} dev: true @@ -12166,6 +12104,7 @@ packages: optional: true dependencies: whatwg-url: 5.0.0 + dev: true /node-fetch@3.3.2: resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==} @@ -13087,12 +13026,6 @@ packages: dev: true optional: true - /promise@7.3.1: - resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==} - dependencies: - asap: 2.0.6 - dev: false - /prompts@2.4.2: resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} engines: {node: '>= 6'} @@ -13246,10 +13179,6 @@ packages: - utf-8-validate dev: true - /pure-color@1.3.0: - resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==} - dev: false - /qs@6.11.0: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} @@ -13317,15 +13246,6 @@ packages: dev: true optional: true - /react-base16-styling@0.6.0: - resolution: {integrity: sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==} - dependencies: - base16: 1.0.0 - lodash.curry: 4.1.1 - lodash.flow: 3.5.0 - pure-color: 1.3.0 - dev: false - /react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==} peerDependencies: @@ -13414,25 +13334,13 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-json-view@1.21.3(@types/react@18.2.63)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==} + /react-json-view-lite@1.2.1(react@18.2.0): + resolution: {integrity: sha512-Itc0g86fytOmKZoIoJyGgvNqohWSbh3NXIKNgH6W6FT9PC1ck4xas1tT3Rr/b3UlFXyA9Jjaw9QSXdZy2JwGMQ==} + engines: {node: '>=14'} peerDependencies: - react: ^17.0.0 || ^16.3.0 || ^15.5.4 - react-dom: ^17.0.0 || ^16.3.0 || ^15.5.4 + react: ^16.13.1 || ^17.0.0 || ^18.0.0 dependencies: - flux: 4.0.4(react@18.2.0) react: 18.2.0 - react-base16-styling: 0.6.0 - react-dom: 18.2.0(react@18.2.0) - react-lifecycles-compat: 3.0.4 - react-textarea-autosize: 8.5.3(@types/react@18.2.63)(react@18.2.0) - transitivePeerDependencies: - - '@types/react' - - encoding - dev: false - - /react-lifecycles-compat@3.0.4: - resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} dev: false /react-loader-spinner@6.1.6(react-dom@18.2.0)(react@18.2.0): @@ -13533,20 +13441,6 @@ packages: react: 18.2.0 tslib: 2.6.2 - /react-textarea-autosize@8.5.3(@types/react@18.2.63)(react@18.2.0): - resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==} - engines: {node: '>=10'} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@babel/runtime': 7.24.0 - react: 18.2.0 - use-composed-ref: 1.3.0(react@18.2.0) - use-latest: 1.2.1(@types/react@18.2.63)(react@18.2.0) - transitivePeerDependencies: - - '@types/react' - dev: false - /react-use-measure@2.1.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==} peerDependencies: @@ -14118,10 +14012,6 @@ packages: functions-have-names: 1.2.3 has-property-descriptors: 1.0.2 - /setimmediate@1.0.5: - resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==} - dev: false - /setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} dev: true @@ -14907,6 +14797,7 @@ packages: /tr46@0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + dev: true /tr46@5.0.0: resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} @@ -15201,10 +15092,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - /ua-parser-js@1.0.37: - resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==} - dev: false - /uc.micro@1.0.6: resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} dev: true @@ -15425,41 +15312,6 @@ packages: react: 18.2.0 tslib: 2.6.2 - /use-composed-ref@1.3.0(react@18.2.0): - resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - - /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.63)(react@18.2.0): - resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} - peerDependencies: - '@types/react': '*' - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.63 - react: 18.2.0 - dev: false - - /use-latest@1.2.1(@types/react@18.2.63)(react@18.2.0): - resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==} - peerDependencies: - '@types/react': '*' - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.63 - react: 18.2.0 - use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.63)(react@18.2.0) - dev: false - /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==} peerDependencies: @@ -15730,6 +15582,7 @@ packages: /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + dev: true /webidl-conversions@7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} @@ -15853,6 +15706,7 @@ packages: dependencies: tr46: 0.0.3 webidl-conversions: 3.0.1 + dev: true /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}