Format rpc call output

package.json

@@ -17,7 +17,8 @@
     "react-dom": "^17.0.2",
     "react-select": "^5.2.2",
     "react-syntax-highlighter": "^15.5.0",
-    "web3": "^1.7.5"
+    "web3": "^1.7.5",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@types/node": "17.0.4",

pages/index.tsx

@@ -7,6 +7,7 @@ import Web3 from 'web3'
 import { AbiItem } from 'web3-utils'
 import { useQueryState } from 'next-usequerystate'
 import { config, GetContractData } from './api/utils'
+import { useCopyToClipboard } from 'react-use'
 import Link from 'next/link'
 
 export type Result<T> =
@@ -61,6 +62,56 @@ function validateAddress(address: string): boolean {
   return /^0x[0-9a-fA-F]{40}$/.test(address)
 }
 
+const CallFormat = ({
+  output,
+}: {
+  output: string
+}) => {
+
+  const [clipboard, copyToClipboard] = useCopyToClipboard()
+
+  return (
+    <div>
+      <p 
+        className="truncate cursor-copy text-black-600"
+        onClick={() => copyToClipboard(output)}
+      >{output}</p>
+
+      {clipboard.error ? (
+        <div className="my-3 rounded-md border border-red-600 p-2 text-sm text-red-600">
+          Unable to copy value: {clipboard.error.message}
+        </div>
+      ) : (
+        clipboard.value && (
+          <div className="my-3 rounded-md border border-green-600 p-2 text-sm text-green-600">
+            Copied {clipboard.value}
+          </div>
+        )
+      )}
+    </div>
+  )
+}
+
+const AddressLink = ({
+  network,
+  address,
+}: {
+  network: Network
+  address: string
+}) => {
+  let url = `https://miniscan.xyz/?network=${network}&address=${address}`
+  return (
+    <p className="truncate text-blue-600 hover:underline">
+      <a
+        href={url}
+        target="_blank"
+      >
+        {address}
+      </a>
+    </p>
+  )
+}
+
 const AbiEvent = ({
   entry,
   network,
@@ -79,6 +130,7 @@ const AbiEvent = ({
         href={`https://${
           config[network].scanDomain
         }/txs?ea=${address}&topic0=${Web3.utils.soliditySha3(typeSig)}`}
+        target="_blank"
       >
         {name}
       </a>
@@ -90,10 +142,12 @@ const ReadContract = ({
   providerURL,
   address,
   abi,
+  network,
 }: {
   providerURL: string
   address: string
   abi: AbiItem[]
+  network: Network | null
 }) => {
   const [blockNumber, setBlockNumber] = useState<number | undefined>(undefined)
   return (
@@ -120,6 +174,7 @@ const ReadContract = ({
               providerURL={providerURL!}
               address={address}
               blockNumber={blockNumber}
+              network={network!}
             />
           ))}
       </div>
@@ -133,12 +188,14 @@ const ReadMethod = ({
   providerURL,
   address,
   blockNumber,
+  network
 }: {
   abi: AbiItem[]
   entry: AbiItem
   providerURL: string
   address: string
   blockNumber: number | undefined
+  network: Network
 }) => {
   let name = entry.name || '<unknown function>'
   let inputs = entry.inputs || []
@@ -168,12 +225,19 @@ const ReadMethod = ({
     }
   }
 
+  function isAddress(element: string) {
+    if (element.length == 42 && element.includes("0x", 0)) {
+      return true;
+    }
+    return false;
+  }
+
   return (
     <div className="my-2 rounded-md border">
       <div className="flex justify-between bg-purple-100 p-2">
         <div>{name}</div>
         <button
-          className="rounded border-2 border-purple-600 bg-white px-1"
+          className="rounded border-2 border-purple-600 bg-white px-1 button-fancy"
           onClick={rpc}
         >
           Query
@@ -208,7 +272,16 @@ const ReadMethod = ({
       ) : result.error ? (
         <p className="p-2 text-red-600">{result.error.message}</p>
       ) : (
-        <p className="p-2">{JSON.stringify(result.data, null, 2)}</p>
+        // console.log(Array.isArray(result.data))
+        <div className="p-2">
+          { (Array.isArray(result.data)) ?
+            result.data.map((row: any) => (
+              (isAddress(row)) ? <AddressLink key={row} network={network} address={row} /> : <CallFormat key={row} output={row.toString()} />
+            ))
+            :
+            (isAddress(result.data)) ? <AddressLink key={result.data} network={network} address={result.data} /> : <CallFormat key={result.data} output={result.data.toString()} />
+          }
+        </div>
       )}
     </div>
   )
@@ -288,38 +361,48 @@ const Answer = ({
     default:
   }
 
+  const [clipboard, copyToClipboard] = useCopyToClipboard()
+
   return (
     <div>
       <div className="grid grid-cols-3">
         <div>
           <p className="text-purple-600">Name</p>
-          <p className="truncate">{result.data.ContractName}</p>
+          <p 
+            className="truncate cursor-copy text-black-600"
+            onClick={() =>
+              copyToClipboard(result.data.ContractName.toString())
+            }
+          >{result.data.ContractName}</p>
         </div>
         <div>
           <p className="text-purple-600">Start Block</p>
-          <p>{result.data.StartBlock}</p>
+          <p
+            className="cursor-copy text-black-600"
+            onClick={() =>
+              copyToClipboard(result.data.StartBlock.toString())
+            }
+          >{result.data.StartBlock}</p>
         </div>
         <div>
           <p className="text-purple-600">Links</p>
           <div>
             <Link
-              className="hover:underline"
               href={{
                 pathname: '/code',
                 query: { network, address, codeType: 'ABI' },
               }}
             >
-              <a target="_blank">ABI</a>
+              <a className="hover:underline" target="_blank">ABI</a>
             </Link>
             {' | '}
             <Link
-              className="hover:underline"
               href={{
                 pathname: '/code',
                 query: { network, address, codeType: 'SourceCode' },
               }}
             >
-              <a target="_blank">Code</a>
+              <a className="hover:underline" target="_blank">Code</a>
             </Link>
             {' | '}
             <a
@@ -332,6 +415,17 @@ const Answer = ({
           </div>
         </div>
       </div>
+      {clipboard.error ? (
+      <div className="my-3 rounded-md border border-red-600 p-2 text-sm text-red-600">
+        Unable to copy value: {clipboard.error.message}
+      </div>
+      ) : (
+        clipboard.value && (
+          <div className="my-3 rounded-md border border-green-600 p-2 text-sm text-green-600">
+            Copied {clipboard.value}
+          </div>
+        )
+      )}
       <p className="mt-5 text-purple-600">
         Events (click to view transactions)
       </p>
@@ -343,7 +437,7 @@ const Answer = ({
           ))}
       </div>
       {providerURL && (
-        <ReadContract providerURL={providerURL} address={address} abi={abi} />
+        <ReadContract providerURL={providerURL} address={address} abi={abi} network={network} />
       )}
     </div>
   )

styles/globals.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.button-fancy:hover {
+	background-color: #dad1e5;
+}
+
+.button-fancy:active {
+	background-color: #c2bacb;
+}