Thread by @Malonejackson7

🔥 Easiest guide you will find online for this!! (A Long Thread🧵)

#Angular #web3 #Metamask #Ethereum #javascript

1) First of all, we will begin with installing all the packages we need

npm i web3 crypto-browserify stream-browserify assert stream-http https-browserify os-browserify browser url os-browserify process -S

Then we add this bit of code to the respective files

2) Then we create a service using Angular-CLI
ng g s metamask

in this service, we start by creating a basic getter for our wallet info which returns wallet connection status and its address.

3) Then we create a function that will load the web3 contract and get into in website load from the contract if needed.

4) Now we create a function to connect user metamask. We can call this function anywhere in the app to connect metamask.

5) So wallet connection and contract loading are done now what remaining is to add event listeners for these purposes

1 - Disconnection of wallet
2 - Change of wallet
3 - Detect connection status on app refresh

For the 1st and 2nd parts, we will add this code in the constructor

6) Now for the 3rd part, we will add this code in the loadweb3 function before contract loading.

7) Now we use our service in one of our components.

And we are done!