[DApps] Part I : Connect Wallet with web3.js provider

Good days everyone I’m here to advice you guys how to web3, so this is first part of this series. We’ll dive into creating a simple reactive decentralized application using Ethereum, Web3js, VueJS.

First of all we’ll setup environment for develop this. In this tutorials I’m use Vue3 because it’s really lean and good performance.

Our application will be a simple one. A user will be able to bet token on a number that choose by them. When the user guesses correctly he gets his payout on reward pool (reward share when winner more than 1).

In this first part we will go over our project setup and the connect wallet by web3 provider. In the second part we’ll creation of our smart contract and in part three we’ll connect the dots and connect our application to our contract. Follow along, enjoy the ride, it’s gonna be great.

The first thing we’ll need is nodeJS and NPM, get them here and follow the installation steps for your OS: https://nodejs.org/en/. To check if node has installed correctly run the following commands in a terminal window:

node -v
npm -v

Next up, get metamask if you do not have it already > https://metamask.io/

Our last prerequisite is vue-cli, this will help us easily set up a VueJS project:

npm i vue-cli -g

Project set-up

We will write and deploy our simple smart contract using remix and deploy it to the Binance testnet through our metamask add-on. All we need to interact with it in our front-end application is the contract address and ABI (An ABI defines how data structures or computational routines are accessed in machine code).

Our front-end will be a vueJS application that we will generate by using the vue-cli. We’ll also be using web3 to communicate with our contract. To create the backbone for our client application follow these easy steps:

1. Open up a terminal and change directory to where you want to create the app.
2. In the terminal window type the following command to create our project and go through the wizard by spamming ‘enter’:

vue init webpack lotto-dapp

3. Now we will go into our project folder and install web3

cd lotto-dapp
npm i web3
//To start the dummy project generated by the vue-cli use 'npm start'

VueJS

VueJS is a javascript frameworking for building user interfaces. At first glance it looks similar to classical moustache templating, but there’s alot happening under the hood to make Vue reactive.

Another important key feature of VueJS is components. Components are small, reusable and self-contained pieces of code. Essentially a web application can be abstracted into a tree of smaller components. This will get more clear when we dive into coding our front-end app.

After we generated a Vue app by using the vue-cli, we have also installed the dependencies we need. In case you haven’t done this check out top on this article.

Getting started with Web3 and Metamask

So we’ll finishing environment setup and let getting started to develop some component like an Navbar or Sidebar that handle to connect Metamask wallet. In example i’m create ConnectWallet.js component

I made this component as button and always place in top-right of screen. Like other framework if you guy need connect wallet button in any view you can import them like this.

In your import statements add

import ConnectWallet from '../components/ConnectWallet'

So let try another way to use connect wallet provider by yourself.

You’re welcome to leave a tip if you enjoy our tutorials, thanks for reading and sticking through if you got this far!