Connect a Crypto Wallet with JavaScript - MetaMask - UI/UX & Code

-- Today, we're embarking on a relatively brand new journey into the world of Crypto/Web 3 development. Dapps (or Decentralized Apps) are growing in popularity. In order to interact with them, you need a crypto wallet such as MetaMask. I'm going to show you the UI/UX considerations when connecting such a wallet, along with a Vanilla JavaScript solution for doing so. ALSO, read the pinned comment below and answer my question! 👇

Github repo for this project:

0:00 - Introduction
1:06 - Walkthrough & UI/UX
3:14 - Project Setup
3:43 - HTML
4:13 - CSS
4:33 - Learn UI/UX Interactively
5:06 - JavaScript
7:34 - Final Project
8:14 - Closing

Let's get started!

#web3 #crypto #javascript

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

This is my first crypto video in over 4+ years. I'll be tackling more of these going forward, especially in relation to UI/UX. So, we all know most people won't be using Vanilla JS for a crypto project. With that said, which JS framework would you prefer I use going forward in web3 development? Respond with either React, Vue, Svelt, or something else!

[oluwaseyibayode]

Thank you so much for this... most YouTube tutorials on this uses React or some other frameworks. I prefer vanilla JavaScript

[nikolaimochalov]

Finally someone, and I'm glad it's Gary, is creating crypto content!! Thanks ! I've been waiting for quite a while now!!!

[gabRomantico]

I wish you had explained how things work...

Thank you for the vid.

[creativeyudai]

Great video Gary, nice explanation 💯

I hope you bring more videos related to web3 and UI/UX

[umarmuhammadzakari]

Amazing video. I really enjoyed it and wish to see more Web 3 stuffs.

[maxdevjs]

The topic is so relevant that the like comes first 😃

[grtbigtreehugger]

Many thanks for this super useful video!

[thrivingproject]

Really great video! I hope you make more web3 related videos. I will definitely subscribe and watch more.

[BeriahsHTxRealty]

You Hold the Master helm. Currently in an edx FinTech bootcamp and our DeFi project was well, we have solidity working and communicating with MetaMask on test, but the Hosting on the server was a pressure, and this code works effortlessly #futureisWeb3

[qhiinc]

Great video ... Is there a real somple way to add some </> CODE to like a simple squarespace website that will launch your metamask wallet if your chrome browser already has the extension installed?

[eyeholeman]

Cool video! However, it didn't actually redirect back to the origin URL after the install was completed. You had to manually navigate back to your dapp. Was the expected behaviour?

[sunnysinghrajput]

Hi. How to create 'connect wallet' on my existing web2 website?

[XavierBrinon]

Opera has also a wallet integrated by default.

[wingrex]

Hello the npm is not valid now, is there other plugin?

[billykiwee]

And with that people can buy things in crypto on our website ?

[pipeliner]

is it the same way for the Phantom Wallet?

[crossfire]

can i please the same for keplr wallet? please my lord <3

[CryptoFugaku]

doesnt work bro, it just keeps loading