Update json viewer pkg (#696)

* Update json viewer pkg

* Use react-json-view-lite

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 {

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 (
+    <div className='mt-5 rounded bg-black p-5'>
+      <JsonView
+        data={jsonObj}
+        shouldExpandNode={level => 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',
+        }}
+      />
+    </div>
+  );
+};

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';

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",