🚑️ use encodeJSON for algosdk

- algorand/js-algorand-sdk/issues/894

examples/react/src/routes/MethodPage.tsx

@@ -1,35 +1,10 @@
 import {useParams} from "react-router-dom";
 import {useQuery} from "@tanstack/react-query";
-import {useState} from "react";
+import {useMemo, useState} from "react";
 import {useAlgodTestOptions} from "./useAlgodTestOptions.js";
 import {useIndexerTestOptions} from "./useIndexerTestOptions.ts";
+import {encodeJSON, Encodable} from 'algosdk'
 
-// TODO: Move to library
-type BigIntReplacement = {
-    type: "BigInt";
-    value: string;
-}
-// TODO: Move to library
-function bigIntReplacer(_: string, value: unknown): unknown {
-    if (typeof value === "bigint") {
-        return {
-            value: value.toString() + 'n',
-            type: "BigInt"
-        } as BigIntReplacement;
-    }
-    return value;
-}
-// TODO: Move to library
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function bigIntReviver(_: string, value: unknown): unknown {
-    if (typeof value === 'object' &&
-        typeof (value as BigIntReplacement)?.type !== 'undefined' &&
-        (value as BigIntReplacement).type === 'BigInt'
-    ) {
-        return BigInt((value as BigIntReplacement).value.slice(0, -1));
-    }
-    return value;
-}
 export default function MethodPage() {
     const params = useParams()
     const [clientType, setClientType] = useState<"official" | "experimental">("official")
@@ -48,6 +23,16 @@ export default function MethodPage() {
     const title = clientType === 'official' ?
         `Official ${params.interface === 'indexer' ? 'Indexer' : 'Algodv2'}` :
         `Experimental: ${params.interface === 'indexer' ? 'indexer-fetch' : 'algod-fetch'}`
+
+    const encoded = useMemo(() => {
+        if(typeof query?.data === 'undefined') return
+        try{
+            return encodeJSON(query.data as Encodable, {space: 2})
+        } catch (e){
+            return JSON.stringify(query.data, null, 2)
+        }
+    }, [query.data])
+
     return (
         <main className="container">
             <hgroup>
@@ -59,7 +44,10 @@ export default function MethodPage() {
             <fieldset>
                 <label>
                     <input name="switch" type="checkbox" role="switch"
-                           onChange={(e) => setClientType(e.target.checked ? "experimental" : "official")}/>
+                           onChange={(e) => {
+                               setClientType(e.target.checked ? "experimental" : "official")
+                           }
+                    }/>
                     Enable experimental fetch library
                 </label>
             </fieldset>
@@ -94,7 +82,7 @@ export default function MethodPage() {
             <h2>Result</h2>
             {query.isLoading && <p>Loading...</p>}
             {query.isError && <p>Error: {query.error.message}</p>}
-            {query.isSuccess && <pre>{JSON.stringify(query.data, bigIntReplacer, 2)}</pre>}
+            {query.isSuccess && <pre>{encoded}</pre>}
             {query.isSuccess && <button onClick={()=>query.refetch()}>Refetch</button>}
         </main>
     )