Wallet Integration

Integrating a Web3 wallet, into a basic web application, adding features like allowing users to connect their wallets, retrieve account information and interact with simple smart contract.

Comment

Connect Wallet

This is a simple connect wallet component which successfully connects and disconnects when required with user's Metamask account. It is built using React.js, HTML, CSS and Web3.js. We utilized the fact that if user has Metamask Browser Extension installed then Metamask automatically injected Metamask API into the global window object, and we can further build this connect wallet functionality by fetching window.ethereum and using eth_accounts , eth_requestAccounts etc. to successfully connect account. We built this functionality by taking reference from Connect Wallet tutorial by Block Explorer

This will be our first time creating this feature and since, this connect wallet functionality is a very common feature present in every decentralized applications, we are happy to be able to successfully build it and aim to use it in building Dapps in future.

What we learnt

  • We learnt about window.ethereum object.
  • We learnt how to use useState and useEffect hooks to make sure that even if user reloads the page the user's wallet remains connected, if user switches account then the change reflects in the connect wallet button (which shows user account address when user has their account connected, otherwise shows connect wallet) and if user ultimately disconnects then also the change gets reflected on the web3site.
  • We attempted to learn how to user Web3.js to fetch transaction history and account balance but we were encountering some error, we wish to include this functionality too in future.

What's next

Make it a full fledged Dapp that interacts with various smart contract to mint coins, to allow transactions between receiver and sender etc.

Built With

Share this project:

Updates