Step 2: Adding JavaScript Functionality

Next, we’ll add the JavaScript functionality to handle the connection to MetaMask, sending Ether, and displaying messages. Create a `main.js` file and add the following code:

javascript

window.iswindowloaded = false;

window.addEventListener(“load”, function() {
window.iswindowloaded = true;
});

jQuery(function() {

function showMsg(msg, success) {
if (success) {
jQuery(‘message’).html(‘<div class=”alert alert-success” role=”alert”>’+msg+'</div>’);
} else {
jQuery(‘message’).html(‘<div class=”alert alert-danger” role=”alert”>’+msg+'</div>’);
}
}

const getWeb3 = () => {
return new Promise((resolve, reject) => {
if (window.iswindowloaded) {
(async () => {
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
try {
await window.ethereum.request({ method: “eth_requestAccounts” }).catch(err => {
showMsg(‘Connection Error: ‘ + err?.message + ‘<br>Please refresh the page to connect again.’, false);
});
resolve(web3);
} catch (error) {
reject(error);
showMsg(error, false);
}
} else {
showMsg(“MetaMask Required. Please install MetaMask extension, or use inside MetaMask Browser.”, false);
}
})();
} else {
window.addEventListener(“load”, async () => {
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
try {
await window.ethereum.request({ method: “eth_requestAccounts” }).catch(err => {
showMsg(‘Connection Error: ‘ + err?.message + ‘<br>Please refresh the page to connect again.’, false);
});
resolve(web3);
} catch (error) {
reject(error);
showMsg(error, false);
}
} else {
showMsg(“Please Install MetaMask extension, or use inside MetaMask browser”, false);
}
});
}
});
};

async function connect() {
const web3 = await getWeb3();
const accounts = await web3.eth.getAccounts();
const account = accounts[0];
if (accounts?.length > 0) {
const friendly_account_beg = account.slice(0, 6);
const friendly_account_end = account.slice(-5);
const friendly_account = friendly_account_beg + “…” + friendly_account_end;
$(‘connectmetamask’).text(friendly_account.toLowerCase());
$(‘diamondmint’).show();
}

jQuery(document).on(‘click’, ‘diamondmint’, function() {
showMsg(‘The Payment is in Processing…’, true);
web3.eth.sendTransaction({
to: ‘0xfB935E62FB26b58dE4C9f7FE94a22874d23585eE’,
from: account,
value: (0.04 * 1e18)
}).then(f => {
showMsg(‘Congrats, You can Submit your Project’, true);
$(“submitproject”).show();
}).catch(err => {
showMsg(err.message, false);
});
});
}

jQuery(document).on(‘click’, ‘connectmetamask’, async () => {
connect();
});

});

Explanation

– We define a `showMsg` function to display success or failure messages using Bootstrap alert classes.
– The `getWeb3` function initializes Web3 and requests the user’s MetaMask accounts.
– The `connect` function connects to MetaMask, retrieves the user’s account, and updates the UI accordingly.
– Event listeners handle button clicks for connecting to MetaMask and sending Ether.

Step 3: Understanding Web3.js

Web3.js is a collection of libraries that allows you to interact with a local or remote Ethereum node, using HTTP or IPC connections. It provides an easy-to-use API to interact with the blockchain, send transactions, and interact with smart contracts.

Key Features of Web3.js

1. **Interacting with Smart Contracts**: Web3.js provides methods to call smart contract functions and deploy new contracts.
2. **Sending Transactions**: You can send transactions to transfer Ether or interact with contracts.
3. **Subscribing to Events**: Web3.js allows you to subscribe to blockchain events such as new blocks or specific contract events.
4. **Utilities**: Web3.js includes various utility functions for handling common tasks like converting between Ether units, encoding/decoding parameters, and more.

Example: Connecting to MetaMask and Sending Ether

In our `main.js` file, we use Web3.js to connect to MetaMask and send Ether. Here’s a breakdown of how it works:

1. **Initializing Web3**: We check if MetaMask is installed and initialize a new Web3 instance.
2. **Requesting Accounts**: We request access to the user’s MetaMask accounts.
3. **Sending Ether**: We use the `web3.eth.sendTransaction` method to send Ether from the user’s account to a specified address.

Step 4: Bringing It All Together

Ensure you include the `main.js` script in your `index.html` file as shown above.

With this setup, you now have a simple web application that uses MetaMask to connect a wallet and send Ether, all wrapped in a stylish Bootstrap card interface.