Support node-connection mode

[Keith-CY]

During the Omiga inscription launch, the performance of CKB explorer was frankly impacted, as shown in the screenshot

There were more than 500 blocks to catch up with.

This latency really bothered users because they could not tell which one was down, the chain or the explorer. Even with the new alert on the top revealed that chain worked well, they are still lost the ability to view their transactions timely.

For this case, I would suggest adding a node-connection mode.

1. Add an entry for setting the ckb node to connect, community nodes are in the presets;
2. On the homepage, fetch the latest 10 blocks/10 transactions from the node directly when the synchronization slows down. This step could be done on the server end and keep them in cache;
3. On visiting to a specific block/transaction page, and the explorer returns 404, retry with the full node. If the node returns data, it can be displayed in a simple view with an annotation that the explorer is still processing this item;
4. On searching, retry with the node if explorer returns 404;

By do these, the page could fallback to a simple view with all necessary information when the explorer hasn't finished the data processing.

[poor-defined]

@Keith-CY Here's a draft about which features should be accessible within user-defined node mode
https://vs0cjf.axshare.com/?id=awaide&p=_526_support_node-connection_mode&g=1

[Keith-CY]

@Keith-CY Here's a draft about which features should be accessible within user-defined node mode vs0cjf.axshare.com/?id=awaide&p=_526_support_node-connection_mode&g=1

@homura @yanguoyu @Daryl-L are familiar with CKB node RPC and have experienced debugging dapp locally, please help check if this node-connection mode satisfies development with devnet.

[PainterPuppets]

After looking at the difference between the current backend api and rpc, the block detail page and transaction page can be displayed by taking data from rpc, there are about two ways to realize this idea

• Split the rpc and backend api request, the front-end can get the data from the rpc directly
  It looks like this.

const ReactComponent = ({ blockNumber }: { blockNumber: string }) => {
  const { data: blockData } = useQuery(['block', blockNumber], () => rpc.getBlockByNumber(blockNumber))
  const { data: blockInfo } = useQuery(['block-info', blockNumber], () => explorerService.api.fetchBlock(blockNumber))

  return (
    <>
      {/* render block data */}
      <>{blockData.xxxx}</>

      {/* render block info if info returned */}
      {blockInfo && <>{blockInfo.xxx}</>}
    </>
  )
}

• Use rpc as a backup for the backend api in case of api request error
  It looks like this.

const fetchfetchBlock = async (blockNumber: number) => {
  const explorerData = await explorerService.api.fetchBlock(blockNumber)
  if (explorerData) return explorerData

  const rpcData = await rpc.getBlockByNumber(blockNumber)

  return mapRpcDataToExplorerData(rpcData)
}

const ReactComponent = ({ blockNumber }: { blockNumber: string }) => {
  const { data: blockInfo } = useQuery(['block-info', blockNumber], () => fetchfetchBlock(blockNumber))

  return (
    <>
      {/* render */}
      <>{blockInfo.xxxx}</>

      {/* rendering fields that may not exist */}
      {blockInfo.xxx && <>{blockInfo.xxx}</>}
    </>
  )
}

I prefer the first explicit request, so that it's easier to troubleshoot if the explorer's api returns a different value.

[PainterPuppets]

I'll start on this this week and expect to be able to submit the pr in maybe three days

[Keith-CY]

I'll start on this this week and expect to be able to submit the pr in maybe three days

The estimate can be set in the project properties

[RetricSu]

@Keith-CY @PainterPuppets is it possible to configure node mode using url? like https://explorer.nervos.org?node=localhost:8114

I want this since I want to integrate the explorer in offckb for devnet environment, so user can open with one command without manually configuring from the website

[Keith-CY]

@Keith-CY @PainterPuppets is it possible to configure node mode using url? like https://explorer.nervos.org?node=localhost:8114

I want this since I want to integrate the explorer in offckb for devnet environment, so user can open with one command without manually configuring from the website

We will deploy another page for this case, so users will be clearly informed that data are not from the *official* source

[poor-defined]

@PainterPuppets Hi Tao, Could you link your related PRs in one comment with their range including not-started ones?

可以把已经提交的和计划要开始的PR（我记得有两个一个Home Page，还有一个地址详情页？）都贴在一个地方吗

[PainterPuppets]

@PainterPuppets Hi Tao, Could you link your related PRs in one comment with their range including not-started ones?

可以把已经提交的和计划要开始的PR（我记得有两个一个Home Page，还有一个地址详情页？）都贴在一个地方吗

home & transaction: Magickbase/ckb-explorer-frontend#350

block: Magickbase/ckb-explorer-frontend#390

address: Magickbase/ckb-explorer-frontend#391

[RetricSu]

hi, where can I set the node url?

We will deploy another page for this case, so users will be clearly informed that data are not from the official source

and where can i find this page?

[poor-defined]

@RetricSu Hi Su,
Our developer is working on the user-specific node, based on the previous comment below:
#526 (comment)
Firstly, In the new mode, we will remove all the data from explorer's backend; Secondly, user-defined URL will be supported. Two steps are settled due to the difference , like config , between mainnet RPC and third-party URL.