feat: JSON viewer (#64)

Author: PatrickDinh

package-lock.json

@@ -47,7 +47,9 @@
     "multiformats": "^13.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-json-view-lite": "^1.4.0",
     "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.0"
@@ -146,4 +148,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}

package.json

@@ -4,6 +4,7 @@ import { cn } from '@/features/common/utils'
 import { AccountActivityTabs } from './account-activity-tabs'
 import { AccountInfo } from './account-info'
 import { accountActivityLabel, accountJsonLabel } from './labels'
+import { JsonView } from '@/features/common/components/json-view'
 
 type Props = {
   account: Account
@@ -25,7 +26,7 @@ export function AccountDetails({ account }: Props) {
         <CardContent aria-label={accountJsonLabel} className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{accountJsonLabel}</h1>
           <div className={cn('border-solid border-2 border-border h-96 grid')}>
-            <pre className={cn('overflow-scroll p-4')}>{account.json}</pre>
+            <JsonView json={account.json} />
           </div>
         </CardContent>
       </Card>

src/features/accounts/components/account-details.tsx

@@ -1,7 +1,6 @@
 import { AssetSummary } from '@/features/assets/models'
 import { AccountResult, AssetHoldingResult, AssetResult } from '../data/types'
 import { Account, AccountAssetSummary, AssetHolding } from '../models'
-import { asJson } from '@/utils/as-json'
 import { microAlgos } from '@algorandfoundation/algokit-utils'
 
 export const asAccount = async (
@@ -33,7 +32,7 @@ export const asAccount = async (
     assetsCreated: await asAccountAssetSummaries(accountResult['created-assets'] ?? [], asAccountAssetSummary),
     assetsOpted,
     rekeyedTo: accountResult['auth-addr'],
-    json: asJson(accountResult),
+    json: accountResult,
   }
 }
 

src/features/accounts/mappers/index.ts

@@ -24,5 +24,5 @@ export type Account = {
   assetsCreated: AccountAssetSummary[]
   assetsOpted: AssetHolding[]
   rekeyedTo?: Address
-  json: string
+  json: object
 }

src/features/accounts/models/index.ts

@@ -33,6 +33,7 @@ import { ApplicationBoxes } from './application-boxes'
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { ApplicationLiveTransactions } from './application-live-transactions'
 import { ApplicationTransactionHistory } from './application-transaction-history'
+import { JsonView } from '@/features/common/components/json-view'
 
 type Props = {
   application: Application
@@ -160,7 +161,7 @@ export function ApplicationDetails({ application }: Props) {
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{applicationJsonLabel}</h1>
           <div className={cn('border-solid border-2 border-border h-96 grid')}>
-            <pre className={cn('overflow-scroll p-4')}>{application.json}</pre>
+            <JsonView json={application.json} />
           </div>
         </CardContent>
       </Card>

src/features/applications/components/application-details.tsx

@@ -3,7 +3,6 @@ import { getApplicationAddress, modelsv2, encodeAddress } from 'algosdk'
 import isUtf8 from 'isutf8'
 import { Buffer } from 'buffer'
 import { ApplicationMetadataResult, ApplicationResult } from '../data/types'
-import { asJson } from '@/utils/as-json'
 
 export const asApplicationSummary = (application: ApplicationResult): ApplicationSummary => {
   return {
@@ -32,7 +31,7 @@ export const asApplication = (application: ApplicationResult, metadata: Applicat
     approvalProgram: application.params['approval-program'],
     clearStateProgram: application.params['clear-state-program'],
     globalState: asGlobalStateValue(application.params['global-state']),
-    json: asJson(application),
+    json: application,
   }
 }
 

src/features/applications/mappers/index.ts

@@ -14,7 +14,7 @@ export type Application = {
   approvalProgram: string
   clearStateProgram: string
   globalState?: Map<string, ApplicationGlobalStateValue>
-  json: string
+  json: object
 }
 
 export type ApplicationStateSchema = {

src/features/applications/models/index.ts

@@ -36,6 +36,7 @@ import { AssetMetadata } from './asset-metadata'
 import { AssetTransactionHistory } from './asset-transaction-history'
 import { AssetLiveTransactions } from './asset-live-transactions'
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
+import { JsonView } from '@/features/common/components/json-view'
 
 type Props = {
   asset: Asset
@@ -155,7 +156,7 @@ export function AssetDetails({ asset }: Props) {
             <CardContent className={cn('text-sm space-y-2')}>
               <h1 className={cn('text-2xl text-primary font-bold')}>{assetJsonLabel}</h1>
               <div className={cn('border-solid border-2 border-border h-96 grid')}>
-                <pre className={cn('overflow-scroll p-4')}>{asset.json}</pre>
+                <JsonView json={asset.json} />
               </div>
             </CardContent>
           </Card>

src/features/assets/components/asset-details.tsx

@@ -4,7 +4,6 @@ import { AssetId, AssetMetadataResult, AssetMetadataStandard, AssetResult } from
 import { getArc3Url, isArc3Url } from '../utils/arc3'
 import { replaceIpfsWithGatewayIfNeeded } from '../utils/replace-ipfs-with-gateway-if-needed'
 import Decimal from 'decimal.js'
-import { asJson } from '@/utils/as-json'
 import { getArc19Url, isArc19Url } from '../utils/arc19'
 import { isArc16Properties } from '../utils/arc16'
 
@@ -23,7 +22,7 @@ export const asAsset = (assetResult: AssetResult, metadataResult: AssetMetadataR
     traits: asTraits(metadataResult),
     media: asMedia(assetResult, metadataResult),
     metadata: asMetadata(metadataResult),
-    json: asJson(assetResult),
+    json: assetResult,
   }
 }