1/5
## HTML Fund Me: How MetaMask Works with your Browser The first thing to understand when working with a website is this MetaMask bit. We can inspect the website by right-clicking and hitting "inspect". This opens a window that includes a console, which is a live JavaScript shell. This shell contains information about the browser. If we type `window` into the console, we get a list of functions that we can call on this window object. One of the objects included in the window is the `window.ethereum` object. MetaMask injects this object into the browser. This is how websites interact with MetaMask to send transactions. If we open the same website in a browser that doesn't have MetaMask installed, the `window.ethereum` object will be undefined. This is because the browser doesn't have an API to connect to MetaMask. The MetaMask documentation includes information on how to send and work with the `window.ethereum` object. Now in our HTML Fund Me F23 project, we can scroll over to the `index.js` file, where we can see the code the website uses to interact with a wallet. One of the first things most websites do is check to see if MetaMask exists. This is done with the following line: ```python if (typeof window.ethereum !== "undefined") ``` If MetaMask does exist, they'll call the following function: ```python await ethereum.request({ method: "eth_requestAccounts" }) ``` This function allows the website to see which accounts the user has available to send transactions from. It doesn't expose the private key, but it lets the website send transactions for the user to sign. In the HTML code for this project, there is a button called `connectButton`. In the JavaScript code, the following line finds the `connectButton` in the HTML: ```python const connectButton = document.getElementById("connectButton") ``` The `connectButton`'s `onclick` event calls the `connect` function. This function checks if MetaMask is present, then attempts to connect to an account using the following line: ```python await ethereum.request({ method: "eth_requestAccounts" }) ``` If we go to the MetaMask extension, we can see that we're not connected to the site. However, if we click the `connectButton` in the website, a MetaMask popup appears. This popup asks which account we want to connect. We can then select an account to connect. We can then call other functions, like `getBalance`, `withdraw`, or `fund`. These functions interact with the Foundry Fund Me contract that we deployed. We've hard-coded the contract address and ABI into a `constants.js` file: ```python export const contractAddress = "0xe7f1725e7734ce288f8367e1bb043e90db35f0512" ``` The contract address and ABI are needed to interact with the deployed contract. To connect to a local anvil chain that we deployed the contract to, we open a terminal and run the following command: ```bash make anvil ``` This will start a local anvil chain. We can then run the following command to deploy the contract to this chain: ```bash make deploy ``` Now, we can go back to our website and hit the "connect" button. We can then interact with the contract using the "getBalance", "withdraw", and "fund" functions. When we hit the "fund" button, a MetaMask popup appears. This popup lets us sign the transaction that the website sends to the MetaMask. The website never accesses the private key. The private key remains secure in the MetaMask extension.
A comprehensive guide to understanding how MetaMask interacts with websites. The lesson covers the concepts of browser objects, connecting a wallet, deploying a contract on an Anvil network, and sending transactions through Metamask.
Previous lesson
Previous
Next lesson
Next
Give us feedback
Course Overview
About the course
Python basics
Introduction to Web3.py
Introduction to Titanoboa
Introduction to Moccasin
How to create an ERC-20
How to test Python code and Vyper smart contract
How to deploy Vyper smart contracts on ZKsync using Moccasin
Smart Contract Auditor
$100,000 - $200,000 (avg. salary)
On-chain Data Analyst
$59,000 - $139,000 (avg. salary)
DeFi Developer
$75,000 - $200,000 (avg. salary)
Smart Contract Engineer
$100,000 - $150,000 (avg. salary)
Web3 developer
$60,000 - $150,000 (avg. salary)
Web3 Developer Relations
$85,000 - $125,000 (avg. salary)
Last updated on January 14, 2025
Duration: 2h 20min
Duration: 1h 51min
Duration: 58min
Duration: 2h 23min
Duration: 53min
Duration: 2h 24min
Duration: 28min
Duration: 1h 54min
Duration: 11min
Course Overview
About the course
Python basics
Introduction to Web3.py
Introduction to Titanoboa
Introduction to Moccasin
How to create an ERC-20
How to test Python code and Vyper smart contract
How to deploy Vyper smart contracts on ZKsync using Moccasin
Smart Contract Auditor
$100,000 - $200,000 (avg. salary)
On-chain Data Analyst
$59,000 - $139,000 (avg. salary)
DeFi Developer
$75,000 - $200,000 (avg. salary)
Smart Contract Engineer
$100,000 - $150,000 (avg. salary)
Web3 developer
$60,000 - $150,000 (avg. salary)
Web3 Developer Relations
$85,000 - $125,000 (avg. salary)
Last updated on January 14, 2025
Testimonials
Read what our students have to say about this course.
Chainlink
Chainlink
Gustavo Gonzalez
Solutions Engineer at OpenZeppelin
Francesco Andreoli
Lead Devrel at Metamask
Albert Hu
DeForm Founding Engineer
Radek
Senior Developer Advocate at Ceramic
Boidushya
WalletConnect
Idris
Developer Relations Engineer at Axelar