- A primary understanding of JavaScript.
- MetaMask browser extension put in.
- A small quantity of take a look at Ethereum (e.g., from Sepolia taps).
Open Remix IDE in your browser: https://remix.ethereum.org.
Create a brand new file named SimpleStorage.sol
and paste the next code:
// SPDX-License-Identifier: MIT
// This specifies the license sort for the contract. The MIT license is permissive and generally utilized in open-source initiatives.pragma solidity ^0.8.24;
// Specifies the model of Solidity the contract is written in.
// This ensures compatibility with the Solidity compiler model 0.8.24 or above.
// Outline the contract named "SimpleStorage"
contract SimpleStorage {
// Declare a state variable to retailer a quantity.
// `public` makes it readable by anybody exterior the contract.
uint256 public storedNumber;
// Operate to retailer a quantity within the `storedNumber` state variable.
// `_number` is the enter parameter supplied by the person.
perform storeNumber(uint256 _number) public {
// Assign the supplied quantity to the state variable `storedNumber`.
storedNumber = _number;
}
// Operate to retrieve the worth of the `storedNumber` variable.
// The `view` key phrase signifies this perform doesn't modify the contract's state.
// It returns a `uint256` worth, which is the kind of the saved quantity.
perform getStoredNumber() public view returns (uint256) {
// Return the worth of `storedNumber`.
return storedNumber;
}
}
Compile the contract utilizing the Solidity compiler in Remix. Guarantee you choose Solidity model 0.8.24
.
Go to the Deploy & Run Transactions tab in Remix.
Choose an surroundings equivalent to Injected Web3 to deploy on a testnet.
Guarantee your MetaMask pockets is related to the identical take a look at community.
Deploy the contract by clicking the Deploy button.
Copy the deployed contract’s handle and ABI for later use.
Create three information in your undertaking folder:
index.html
types.css
app.js
HTML (index.html)
MetaMask + Animation
The very first time you had a crypto. This 12 months
Ship Bitcoin to:
0x230138Bfb9547A0d06594a121a11b167Ab728CeF
Handle copied to clipboard!
Connect with MetaMask
....... code proceed .... see extra in repo hyperlink under
CSS (types.css)
/* Common styling for the web page */
physique {
background-image: url(https://www.pixelstalk.web/wp-content/uploads/2015/01/Winter-Evening-In-Moonlight-HD-Wallpaper.jpg);
background-size: cowl;
background-position: heart heart;
margin: 0;
padding: 0;
width: 100%;
peak: 100vh;
place: relative;
}/* Falling components */
#container {
place: absolute;
prime: 0;
left: 0;
width: 100%;
peak: 100%;
z-index: 1;
pointer-events: none;
}
....... code proceed .... see extra in repo hyperlink under
JavaScript (app.js)
Substitute YOUR_CONTRACT_ADDRESS
and YOUR_CONTRACT_ABI
along with your contract particulars.
// Test if MetaMask is put in
if (typeof window.ethereum !== 'undefined') {
console.log('MetaMask is put in!');
const web3 = new Web3(window.ethereum);// Sensible Contract Particulars
const contractAddress = "YOUR_CONTRACT_ADDRESS";
const contractABI = YOUR_CONTRACT_ABI;
....... code proceed .... see extra in repo hyperlink under
Open index.html
in your browser.
Join your MetaMask pockets by clicking the Join Pockets button.
Use the Retailer Quantity button to avoid wasting a quantity on the blockchain.
Retrieve the quantity utilizing the Retrieve Quantity button.
- Join Pockets: Securely connects a person’s MetaMask pockets to the DApp.
- Retailer Quantity: Permits customers to enter and save a quantity on the blockchain.
- Retrieve Quantity: Fetches and shows the saved quantity from the blockchain.
- Remix IDE: For writing and deploying sensible contracts.
- MetaMask: For pockets integration.
- Web3.js: To attach the frontend to the blockchain.
The entire supply code for this undertaking is obtainable on my GitHub:
GitHub Repository — Blockchain Integration Challenge