Experiment No.
Date of Performance:
Date of Submission:
Program Execution/
formation/ Timely
Viva Experiment
correction/ Submission Sign with Date
(03) Total (10)
ethical practices (01)
(06)
Expt No: 4
AIM: Smart contract using Metamask, Remix and web3
LAB OUTCOME: LO3 Illustrate Ethereum concept with smart contracts using different
development tools.
THEORY:
1. Smart Contracts
A smart contract is a self-executing program with the terms of an agreement directly written
into code. These contracts reside on the blockchain and automatically enforce rules without
requiring a trusted third party. They are transparent, immutable, and execute only when
predefined conditions are met. Ethereum is the most popular platform for smart contracts, and
they are typically written in the Solidity programming language.
2. Ethereum Blockchain
Ethereum is a decentralized platform that enables developers to build and deploy smart
contracts and decentralized applications (dApps). It provides a global network of nodes that
verify transactions and contract executions. The platform uses Ether (ETH) as its native
currency and a concept called gas to manage computation costs. Ethereum ensures that smart
contracts are consistently executed as programmed without downtime, censorship, or fraud.
3. MetaMask
MetaMask is a widely-used cryptocurrency wallet and gateway to blockchain applications. It
is available as a browser extension and mobile app. MetaMask allows users to manage their
Ethereum wallets, switch between networks (like Mainnet and Testnets), and sign blockchain
transactions directly from web applications. In a development environment, MetaMask serves
as the interface through which users interact with smart contracts and approve transactions
initiated from dApps.
4. Remix IDE
Remix is an online Solidity IDE used for writing, testing, debugging, and deploying smart
contracts. It supports Ethereum virtual machine environments like the JavaScript VM,
Injected Web3 (e.g., MetaMask), and Web3 Providers. Remix provides an intuitive interface
to compile and deploy contracts without any external setup. It's a go-to tool for developers
working on Ethereum-based projects, especially during prototyping and testing phases.
5. Web3.js
Web3.js is a JavaScript library that provides an interface to interact with Ethereum nodes
through HTTP or WebSocket. It enables web developers to connect their frontend
applications to the blockchain and call smart contract functions. Web3.js can retrieve
blockchain data, send transactions, handle user accounts, and subscribe to events. When
integrated with MetaMask, it simplifies the creation of decentralized web applications by
allowing seamless interaction between smart contracts and users.
Implementation and Setup
Write a simple smart contract in Solidity (e.g., SimpleStorage) using Remix.
Compile and deploy it on a testnet like Goerli using MetaMask (choose "Injected
Web3" in Remix).
On the frontend, use HTML and JavaScript with Web3.js to create an interface that
calls the contract’s set() and get() functions.
MetaMask will handle user authentication and transaction signing.
Use the contract's ABI and deployed address in Web3.js to interact with the
blockchain.
CODE:
export const loadWeb3 = async () => { if
(window.ethereum) {
window.web3 = new Web3(window.ethereum); await
window.ethereum.enable();
} else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider);
} else
{ window.alert(
"Non-Ethereum browser detected. You should consider trying MetaMask!"
);
}
};
export const loadBlockchainData = async () => { const
web3 = window.web3;
// Load account
const accounts = await web3.eth.getAccounts();
// Network ID
const networkId = await web3.eth.net.getId();
// Network data if
(networkId) {
const auth = new
web3.eth.Contract( Demo.abi,
Demo.networks[networkId].address
);
return { auth, accounts: accounts[0] };
}
};
OUTPUT:
Step 1: Go to the client in the folder and open cmd.
Step 2: Type npm start.
Step 3: Frontend end will pop up where the Metamask is installed. If there is no metamask
connected to the web browser, it will give an error dialogue box.
Step 4: Once the frontend of opens up, add details according to the requirements.
Step 5: Then submit, the metamask dialogue box will appear and you will have all the
details about the account.
Step 6: A confirmation of the payment will be asked and click confirm button.
Step 7: Once the payment is confirmed, your details will be displayed.
CONCLUSION:
This project effectively demonstrates the process of developing and deploying a smart
contract using Remix IDE and MetaMask, followed by creating a basic decentralized
application using Web3.js. It showcases how blockchain technology allows the execution of
transparent, secure, and automated agreements without intermediaries. By integrating
Web3.js, the frontend is empowered to directly interact with the Ethereum blockchain,
enabling real-time contract communication.
