Web3-UI Working Note 03: An Account Component

When playing with Web3-UI, an in-development Web3 UI Component library by DeveloperDAO and dhaiwat.eth, I found the an Ethereum Signin (Account) Component is commonly needed for web3.

There is a React Component <Account> in open-source project Proof-Of-Competence (poc.quest) which does this job very well. I talked with Wesley(@wslyvh), the developer of PoC, and proposed to write an article recording my experiment of taking all the related code to an empty project to test whether it is possible to reuse this component.

So, this Web3-UI Working Note #03 is not about using or developing Web3-UI, it is about an experiment for a component instead. And it is a learning note, not a how-to guide.

From my point of view, a Web3 UI Component library needs:

• Separation between logic and UI.
• Robust logic for connecting blockchain.
• Handy UI components developers can use in their project.

1. Basics

Two things are needed to be done by an Ethereum Account UI Component:

No.1 Connect to Ethereum network through:

• Wallet (MetaMask, WalletConnect, or in-wallet provider)
• Javascript API (web3.js, etheres.js)
• Endpoint to Ethereum network (Infura, Alchemy)

No.2 UI for users

• Connect Button
• Connected User Info
• Keep login status
• Logout

It would be much better if the UI Component can support:

• ENS
• ENS avatar
• Identicon Blockie

The Account React component in PoC project can do all of the above.

It is based on packages/libraries:

• Ethers.js
• Web3-react
• Chakra-UI

Currently, this PoC <Account> component is in the project. Let's try whether we can take it out and use it in an empty project.

There are several files related to it. To make it simple, we will just copy the related code from PoC project without changing anything. There are some constants, configures which are not used in <Account> component.

components/    account.tsxhooks/    useInitialConnect.tsx    useAvatar.tsxuitls/    web3.ts    constants.ts    config.ts

Proof-of-Competence(PoC) Repositary by @wslyvh: https://github.com/wslyvh/proof-of-competence

2. Using <Account> UI Component in an empty project

STEP 1: Create Next.js project

Create a Next.js project accountsample:

yarn create next-app accountsample --typescriptcd accountsampleyarn dev

We will use src directory to store the source code:

mkdir srcmv pages src/pagesmv styles src/styles

Add a configuration in tsconfig.json:

    "baseUrl": "./src",

STEP 2: Install dependencies

Install "Ethers.js", "Chakra UI", "Web3-React", and "ethereum-blockies-base64".

//ethersyarn add @ethersproject/providers @ethersproject/bignumber @ethersproject/units//Chakra UIyarn add @chakra-ui/react @chakra-ui/icons @emotion/react  @emotion/styled framer-motion//Web3-Reactyarn add @web3-react/core @web3-react/injected-connector @web3-react/walletconnect-connector//ethereum-blockies-base64yarn add ethereum-blockies-base64

Please note that @web3-react changes a little. @web3-react/injected-connector and @web3-react/walletconnect-connector are used here. But maybe we should update with @web3-react. Please find: https://github.com/NoahZinsmeister/web3-react

STEP 3: Copy <Account> related files

Add three directories:

add components hooks utils

Copy 7 files from PoC project: https://github.com/wslyvh/proof-of-competence to respective directories

components/    header.tsx    account.tsxhooks/    useInitialConnect.tsx    useAvatar.tsxuitls/    web3.ts    constants.ts    config.ts

Please note that we also copy <Header> Component for usage. Do comment out the unrelated import in "header.tsx":

//import journey from 'pages/api/journey'

We will try to use <Account> as well as <Header> in the following steps.

STEP4: Add Chakra provider and Web3ReactProvider

In pages/_app.tsx, add Chakra provider and Web3ReactProvider:

import '../styles/globals.css'import type { AppProps } from 'next/app'import { ChakraProvider } from "@chakra-ui/react"import { Web3ReactProvider } from '@web3-react/core'import { getProvider } from 'utils/web3'function MyApp({ Component, pageProps }: AppProps) {  return (    <ChakraProvider>    <Web3ReactProvider getLibrary={getProvider}>      <Component {...pageProps} />    </Web3ReactProvider>    </ChakraProvider>  )}export default MyApp

STEP 5: Add user.tsx page and use <Account>

Add user.tsx page:

touch src/pages/user.tsx

// src/pages/user.tsximport { Account } from 'components/account'export default function UserPage() {    return (        <Account />    )  }

Run yarn dev and go to "http://localhost:3000/user".

It works.

STEP 6: Add <Header> to index.tsx

Edit index.tsx and add:

import Header  from 'components/header'...<Header />...

It works.

Note: Currently, this code base can only support network: Mainnet and testnet Ropsten, Rinkeby and Goerli. Connecting to other networks without ENS will get error like Error: network does not support ENS (operation="ENS", network="kovan", code=UNSUPPORTED_OPERATION, version=providers/5.5.2)

Note: I also found that MetaMask popup a warning about window.web3: We noticed that the current website tried to use the removed window.web3 API. If the site appears to be broken, please click here for more information.

3. Under the hood: Code and logic

In this section, we will dive into the code. Write down several learning notes quickly just for reference. Please read the source code at: https://github.com/wslyvh/proof-of-competence

Note 001: display of <Account>

<Account> uses useWeb3React Hook from '@web3-react/core.

• When not connected: Connect button

• When connected: Account info (Address, Identicon, ENS)

Note 002: connect using MetaMask

To connect using MetaMask or in-wallet explorer, <Account> use InjectedConnector from @web3-react/injected-connector.

Code snippet from account.tsx and uitls/web.ts

  function connect() {    web3Connect.activate(injected, (error) => {      if (error instanceof UserRejectedRequestError) {        // ignore user rejected error      } else {        web3Connect.setError(error)      }    }, false)  }...export const injected = new InjectedConnector({    supportedChainIds: [1, 3, 4, 5, 10, 42, 42161]})

Note 003: useInitialConnect

At the beginning of <Account>, it call useInitialConnect() to keep login status.

                await web3Connect.activate(injected, (error) => {                    web3Connect.setError(error)                    setTried(true)                }, false)

To dig deeper, go to Web3-React Managers at: https://github.com/NoahZinsmeister/web3-react/blob/v6/packages/core/src/manager.ts.

Note: Currently the logout feature is not working correctly. Fix needed. Or does there need a logout for web3 APP? It seems that currently only wallet can disconnect from a web3 APP.

So perhaps the next stop of learning is:

• Web3-React, a libary by NoahZinsmeister.

• ethers.js. We may go back to ethers.js / web3.js for a clear understanding about connecting, provider etc.

If you find this note useful, please follow my twitter @fjun99. DM is open.