How to Load the Blockchain in your DApp
Good practice for a better user experience
Introduction
Prerequisites: Understanding of React, Redux, and basic blockchain/DApp concepts.
Truffle enables developers to create a full-stack application with a blockchain back end. In this example, I’m using Truffle to implement a React and Redux front end, with a blockchain back end.
There are no widely accepted standards pinned down for interacting with Web3 in the browser due to the infancy of the space and the small user base in comparison to overall web users. Here’s an easy way to make sure users have a good experience when using your Ethereum DApp.
Loading the Blockchain
The React Truffle box, by default, attempts to connect to Web3 as soon as the page loads. This stifles user experience if the user isn’t logged onto MetaMask or is configured to a blockchain on which the DApp isn’t deployed.
Proposal: Blockchain ➼ account ➼ interaction
Instead of loading everything at once, I propose the following pattern for loading your DApp: blockchain ➼ account ➼ interaction. Each step is distinct from the other, with explicit visual feedback for the user.
