Work Example: Synchronizing the Blockchain with the React EthereumContext

This is the third part of my series on MetaMask, Ethers, and React.

The result of my efforts to synchronize this blog with the blockchain can be seen here. It always shows the block number of the last received block and its timestamp.

Those who watch for a while to see if this is really a dynamic display will notice that block numbers are occasionally skipped. The blockchain (which was previously selected in MetaMask) is faster.

What's behind this?

The time interval for synchronization is set to 12,000 milliseconds. So it takes twelve seconds before MetaMask requests the latest block. If several blocks have been created during this time, then there will be jumps in the display.

And now back to the source code. 😀

Last time, I explained that the React context can be used to make changing information easily available for many components in the display. How this can happen can be seen here.

So there's a polling implemented like this:

useEffect(() => {

    // Define a function to fetch the block number
    const fetchLastBlock = () => web3Provider?.getBlock('latest').then((b) => setLastBlock(b))

    // Fetch the block number immediately on component mount
    fetchLastBlock()

    // Set up an interval to fetch the block number every 12 seconds
    const interval = setInterval(fetchLastBlock, 12000)

    // Clean up the interval when the component unmounts
    return () => clearInterval(interval)
  }, [])

And so the context is then used to display the (somewhat) current block number.

const BlockLastSeenNumber: React.FC = () => {
  const context = useContext(EthereumContext)
  return (
    <span>
      {context.ethersProvider?.lastBlock
        ? context.ethersProvider.lastBlock.number.toString()
        : '--'}
    </span>
  )
}

That's not so complicated, is it? 😁

That's it for today! Have fun digesting it! Next time there will be a bit more information about how React syncs with MetaMask (or not)...