joewagner/Filecoin vanilla block inspector

## Filecoin vanilla block inspector
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chain Height</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

  </head>
  <body>
    <!--
      Make sure your Docker daemon is running
      then do: `docker run -e TEXLOTUSDEVNET_SPEED=10000 -p 7777:7777 textile/lotus-devnet` to start the Textile devnet
      open this file in Chrome or the like and walllla! click around etc... Or hack away to make something more interesting
    -->
    <h1>Chain Height: <span id="chainHeight">Loading...</span></h1>

    <h3>latency: <span id="latency">Loading...</span></h3>

    <div class="grid grid-cols-2 gap-4 mt-8">
      <div class="overflow-y-scroll">
        <pre id="block">select a block to inspect</pre>
      </div>
      <div class="overflow-y-scroll">
        <h3>blocks:</h3>
        <pre id="blocks">Loading...</pre>
      </div>
    </div>

    <script type="module">
      // Import ES modules from the npm packages via the unpkg.com CDN
      import { mainnet } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-schema?module'
      import { BrowserProvider } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-provider-browser?module'
      import { LotusRPC } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-rpc?module'

      // Public endpoint for demos
      const endpointUrl = 'ws://127.0.0.1:7777/api/0/node/rpc/v0'
      // To connect to your local Lotus node, try using:
      // const endpointUrl = 'ws://localhost:1234/rpc/v0'

      // Instantiate a provider for the endpoint -- wraps the http and
      // websockets transports for use in a web browser
      const provider = new BrowserProvider(endpointUrl)

      // Create a client object with callable methods using a schema and
      // our provider. Calling methods on this object will send JSON-RPC
      // requests over the websocket.
      const client = new LotusRPC(provider, { schema: mainnet.fullNode })

      const parents = [];

      // Using the client and the "ChainHead" method, every second,
      // retrieve the chain height and update the web page
      async function run () {
        const chainHeightEl = document.getElementById('chainHeight')
        const latencyEl = document.getElementById('latency')

        try {
          while (true) {
            const start = Date.now();
            const { Height: height, Blocks: blocks } = await client.chainHead();
            const end = Date.now();

            chainHeightEl.textContent = height
            latencyEl.textContent = end - start;

            parent = blocks[0].Parents[0]['/'];
            addParent(parent);

            await new Promise(resolve => { setTimeout(resolve, 1000) })
          }
        } catch (err) {
          console.log(err)
          chainHeightEl.textContent = err.message
        }
      }

      const setBlock = function (block, cid) {
        const blockEl = document.getElementById('block');
        let content = '';
        if (cid) {
          content += ('cid: ' + cid + '\n');
        }
        content += JSON.stringify(block, null, 4);

        blockEl.textContent = content;
      };

      window.showBlock = async function (cid) {
        try {
          const block = await client.chainGetBlock({'/': cid});

          setBlock(block, cid);
        } catch (err) {
          setBlock({error: err.message});
        }
      };

      const addParent = function (parent) {
        if (parents.length > 10) parents.shift();
        if (parents.includes(parent)) return;

        parents.push(parent);
        const parentEl = document.getElementById('blocks');
        let html = '<ul>';

        for (let i = 0; i < parents.length; i++) {
          html += '<li class="cursor-pointer shadow" onclick="showBlock(\'' + parents[i] + '\')">' + parents[i] + '</li>';
        }
        html += '</ul>';
        parentEl.innerHTML = html;
      }

      run()
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Chain Height</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

	</head>
	<body>
	<!--
	Make sure your Docker daemon is running
	then do: `docker run -e TEXLOTUSDEVNET_SPEED=10000 -p 7777:7777 textile/lotus-devnet` to start the Textile devnet
	open this file in Chrome or the like and walllla! click around etc... Or hack away to make something more interesting
	-->
	<h1>Chain Height: <span id="chainHeight">Loading...</span></h1>

	<h3>latency: <span id="latency">Loading...</span></h3>

	<div class="grid grid-cols-2 gap-4 mt-8">
	<div class="overflow-y-scroll">
	<pre id="block">select a block to inspect</pre>
	</div>
	<div class="overflow-y-scroll">
	<h3>blocks:</h3>
	<pre id="blocks">Loading...</pre>
	</div>
	</div>

	<script type="module">
	// Import ES modules from the npm packages via the unpkg.com CDN
	import { mainnet } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-schema?module'
	import { BrowserProvider } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-provider-browser?module'
	import { LotusRPC } from 'https://unpkg.com/@filecoin-shipyard/lotus-client-rpc?module'

	// Public endpoint for demos
	const endpointUrl = 'ws://127.0.0.1:7777/api/0/node/rpc/v0'
	// To connect to your local Lotus node, try using:
	// const endpointUrl = 'ws://localhost:1234/rpc/v0'

	// Instantiate a provider for the endpoint -- wraps the http and
	// websockets transports for use in a web browser
	const provider = new BrowserProvider(endpointUrl)

	// Create a client object with callable methods using a schema and
	// our provider. Calling methods on this object will send JSON-RPC
	// requests over the websocket.
	const client = new LotusRPC(provider, { schema: mainnet.fullNode })

	const parents = [];

	// Using the client and the "ChainHead" method, every second,
	// retrieve the chain height and update the web page
	async function run () {
	const chainHeightEl = document.getElementById('chainHeight')
	const latencyEl = document.getElementById('latency')

	try {
	while (true) {
	const start = Date.now();
	const { Height: height, Blocks: blocks } = await client.chainHead();
	const end = Date.now();

	chainHeightEl.textContent = height
	latencyEl.textContent = end - start;

	parent = blocks[0].Parents[0]['/'];
	addParent(parent);

	await new Promise(resolve => { setTimeout(resolve, 1000) })
	}
	} catch (err) {
	console.log(err)
	chainHeightEl.textContent = err.message
	}
	}

	const setBlock = function (block, cid) {
	const blockEl = document.getElementById('block');
	let content = '';
	if (cid) {
	content += ('cid: ' + cid + '\n');
	}
	content += JSON.stringify(block, null, 4);

	blockEl.textContent = content;
	};

	window.showBlock = async function (cid) {
	try {
	const block = await client.chainGetBlock({'/': cid});

	setBlock(block, cid);
	} catch (err) {
	setBlock({error: err.message});
	}
	};

	const addParent = function (parent) {
	if (parents.length > 10) parents.shift();
	if (parents.includes(parent)) return;

	parents.push(parent);
	const parentEl = document.getElementById('blocks');
	let html = '<ul>';

	for (let i = 0; i < parents.length; i++) {
	html += '<li class="cursor-pointer shadow" onclick="showBlock(\'' + parents[i] + '\')">' + parents[i] + '</li>';
	}
	html += '</ul>';
	parentEl.innerHTML = html;
	}

	run()
	</script>
	</body>
	</html>