With the ever growing number of L2 networks or sidechains, DApps have adopted a wide range of these solutions. As DApp developers and users, we find that it can sometimes be difficult to locate the network configs add network configs of a L2 network.
We developed a react component for developers that improves their DApp users' onboarding experience to L2 networks or sidechains.
When a user lands on the developer's site, it will bring up a series of screens that guides the users to switch to the L2 network that the developer selected. Users will no longer need to manually enter the L2 network configs in their wallets and can make deposits and interact with the L2 networks right away.
It currently supports the MetaMask wallet and 8 L2 networks.
We made use of the MetaMask RPC method wallet_addEthereumChain() to add Network configs to the users' MetaMask wallet. We also used a separate provider instance to connect to the L2 network and check the balance and make deposits.
UX (user experience) and DX (developer experience) are the primary concerns of this project. We ensured that the code for our component is well structured and written, which allows it to be easily extended and maintained by the community. The component can be customized with a colour theme that the developer chooses.
For future development, we would like to support more wallets and other front-end frameworks.