We can run this project as docker thanks to #18. However, it takes time to run because the image runs npm run dev every time. It would be better to build the static files when making the docker image and serve it when running the image.

Currently explorer shows average of recent blocks, but interval for each block is not shown. It will be great if the time spent for mining each block is shown.

{
  "scripts": {
    "install": "npm run codegen",
  },
}

will be fired when npm install.

It causes 2 problems:

1. (Related with #6) codegen.yml (and src/*.graqhql) required at npm install phase.
2. (Related with #6) If src/*.graphql changes, npm install re-run (and expected to take too much time)

Libplanet would pull and include the newest static release on release.

Motivation

I felt that the visibility was relatively low compared to other blockchain explorers. It seems that we should reach the level of other services that will be visited by ordinary users in the future through the Nine Chronicle Launcher.

Reference service

• Blockchain Explorer | ETH
• etherscan.io

Goal to solve

Main page

• Increase the width of the Transaction column. it is difficult to see if the number of two digits exceeds.
• Increase the width of the index column. Same reason as below item.
• Removed difficulty column. It is not helpful to identify a specific block.

• Adding a UI to show a transaction list. like upper screenshot.

Blocks and Transactions page

• Show the block and transaction informations as a table.

Transaction page

• Show the action like below code block.

{
  "values": {
    "foods": [],
    "worldId": "1",
    "stageId": "11",
    "weeklyArenaAddress": "cv1HYOuUly92BmrJTeWJteY7W+o=",
    "costumes": [],
    "equipments": [
      "X6PtkJOhrE220ugX36vV4A==",
      "lh8uTHK4XkarIIlD+slRyQ==",
      "RT/E96KgPESUKFcczf+90Q=="
    ],
    "id": "KUk/GU9zDke/jlPtTYf1qw==",
    "avatarAddress": "2Q39HkxyaoJSRceRTzVFTPBIs8Q="
  },
  "type_id": "hack_and_slash"
}

Although it changes the address bar, the content seems not re-rendered.

In account page, there is a window for displaying transactions which include account in its updatedAddress. But currently, it does not show corresponding transactions.

It will be great to link to block/?{blockHash} if we click previous Hash :)

The search page may have txs matching the action type / blocks including the tx / accounts recently involved in tx including the action.

Now, we make a pull-request to update scheme.graphql when Libplanet-Explorer's GraphQL schema is changed. It's a repetitive task also a boring task, so the automation seems to require.

When I tried query some type of transactionhash and blockhash, sometimes explorer is freezed and show some error messages. e.g. I think It is exception error of React component.

It's a visibility improvement suggestion in addition to #99. Now hex values in main pages use same font with other elements. It would be great if we use monospace font (i.e. consolas) for better visibility.

See also Etherscan's tx page

pageContext.endpoint.name may have to do with this.

Although there is a top search bar, but it does not work at all. We should implement some search patterns, e.g.:

• Block hash (ff64cab33a6bca4e7e7cdff4d654fccd617792d49510e8492b81af8d4bcad36d)
• Block index (like #123?)
• #10 TxID (ff64cab33a6bca4e7e7cdff4d654fccd617792d49510e8492b81af8d4bcad36d → this and block hash are both a SHA-256 hexadecimal digest; we need to distinguish two)
• #9 Account address (0x561329477ECB990d16a0aB60067d81676d36EE69)

When the search string partially matches the formats (Block Hash, TxHash, Address etc.) A dropdown may show which kind of search string might be valid. It may have the inferred type on the right-aligned smaller grey text. It may also show that a search string is invalid if it does not fit any of the formats.

It may need planetarium/libplanet-explorer#105.

It will be great if the main block page is auto refreshed when new block is mined or the chain is swapped.

If we can run this project as docker container, that would be good for testing or deploy.

The main page should be an endpoint summary page with default endpoint as the main page.
There should be a mechanism to retrieve the default main page from a static file in the public/ directory.
The file should be generated on build/export, and measures to decide on a default endpoint on the environment variable must be provided.
A static endpoint given as a slug must be redirected to the top level pages if the given static endpoint is the default endpoint.

When I enter txid into the search bar and press the enter, I got following error:

loader.js:195 Uncaught (in promise) Error: 404 page could not be found. Checkout https://www.gatsbyjs.org/docs/add-404-page/
    at loader.js:195

Currently system actions are not correctly displayed in JSONTree. This must be fixed.

Currently minimum width is limited so it is hard to reduce column and take a look at other column.

It will be great if block difficulty is shown in index page.

It leads to /search/? page. It should go to block/? page instead.

continute from #104

How about adjusting the number of view limit through the input field? like below picture.

Currently, there is no transaction count information at the index page which is required.

Display actions in a transaction page.

Currently frontend displays information almost in plain texts. It will be great if there is better UI such as etherscan.

A page that lists transactions related to an account.

We can use the workflow status badge of workflows, which is official feature of Github Actions, like below.

Can't it replace broken actions status badge in readme, with this?

See also this, https://help.github.com/en/articles/configuring-a-workflow#adding-a-workflow-status-badge-to-your-repository

Currently, only block index, hash, timestamp and tx count is shown in main page. Since there may exist numerous miners, it will be great to display miner address information.

As like Etherscan shows the recent block interval, difficulty, and hash rate (see below), it would be useful if we have the similar thing.

Currently the account page shows the oldest transaction (nonce = 0) first, but for the most cases it's not useful.

As usually empty blocks are not interesting.

Since block generation time may less than a minute, block timestamp should display seconds (and milliseconds?).

Can't use npm run dev:prettier because there are some errors like that.

/**/*.@(ts was unexpected at this time

In my thought, It will be better to display count of transactions if there are so many transactions or is nothing.

Let's see with screenshot. This is now.

But isn't it better if it became like below or another?

It seems that 9c-beta endpoint has a below type error for latest Firefox version79.x. This error causes a blank screen.

TypeError: can't set option dateStyle in Date.toLocaleTimeString() in TimeStamp.tsx:20

ScreenShot

It would be good to have a link to go to the list from the detail page.

When we're using a hash to navigate to an item, a search page seems like an unnecessary intermediate stage. It can automatically redirect to the appropriate page instead.