Buy Me a Coffee using Mailchain - A Step-by-Step Tutorial
In this tutorial, you'll learn how to create a web application that allows users to buy you a coffee using Ethereum and send a thank you message using Mailchain. We'll be using React, Next.js, and the Mailchain SDK.
Prerequisites
Basic knowledge of JavaScript, React, and Next.js
Node.js and npm installed on your system
MetaMask browser extension installed and set up
Setting up the project
- Create a new Next.js project using the following command:
vbnetCopy codenpx create-next-app buy-me-a-coffee
cd buy-me-a-coffee
- Install the required dependencies:
perlCopy codenpm install ethers @mailchain/sdk next dotenv
Creating the Smart Contract
We'll create a simple Ethereum smart contract that allows users to buy a coffee and store a memo on the blockchain.
- Install the required development dependencies:
bashCopy codenpm install -D hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
- Initialize the Hardhat project:
Copy codenpx hardhat
- Create a
contracts
directory and aBuyMeACoffee.sol
file inside it:
bashCopy codemkdir contracts
cd contracts
touch BuyMeACoffee.sol
- Add the following smart contract code to
BuyMeACoffee.sol
:
solidityCopy codepragma solidity ^0.8.0;
contract BuyMeACoffee {
event NewMemo(
address indexed from,
uint256 timestamp,
string name,
string message
);
function buyCoffee(string memory name, string memory message)
public
payable
{
require(msg.value >= 0.001 ether, "Insufficient amount");
emit NewMemo(msg.sender, block.timestamp, name, message);
}
}
- Compile the smart contract:
pythonCopy codenpx hardhat compile
- Deploy the smart contract to a local Ethereum network using Hardhat or to a testnet/mainnet using Remix or any other deployment tool. Note the deployed contract address.
Building the Frontend
Create a new file
utils/BuyMeACoffee.json
and store the smart contract ABI in it. You can find the ABI in theartifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json
file.Create a new
pages/index.jsx
file and replace its content with the provided code in your initial question.Update the
contractAddress
variable inindex.jsx
with the address of your deployed smart contract.Modify the
index.jsx
file as suggested in the previous answers to conditionally render the ENS address input field and send the Mailchain message.
Configuring Mailchain
- Create a new file
mailchain.jsx
and add the following code:
javascriptCopy codeimport { Mailchain } from "@mailchain/sdk";
import * as dotenv from "dotenv";
dotenv.config();
const secretRecoveryPhrase = process.env.SECRET_RECOVERY_PHRASE;
const mailchain = Mailchain.fromSecretRecoveryPhrase(secretRecoveryPhrase);
Replace
SECRET_RECOVERY_PHRASE
with your own recovery phrase.Create a
.env.local
file in the root of your project and add your recovery phrase:
makefileCopy codeSECRET_RECOVERY_PHRASE=your_secret_recovery_phrase_here
Running the Application
- Start the development server:
arduinoCopy codenpm run dev
- Open your browser and navigate to
http://localhost:3000
.
Using the Application
With the development server running, open your browser and navigate to
http://localhost:3000
.Make sure your MetaMask extension is connected to the appropriate network (local, testnet, or mainnet) and has some Ether for transactions.
Click on the "Connect your wallet" button to connect your MetaMask wallet.
Once connected, you can enter your name, an optional message, and your ENS address (if you have one) in the provided input fields.
Click on the "Send 1 Coffee for 0.001ETH" button to send a transaction for buying a coffee.
MetaMask will prompt you to confirm the transaction. Confirm it and wait for the transaction to be mined.
Once the transaction is successful, the application will send a thank you message to the provided ENS address using Mailchain.
The recipient can then check their Mailchain inbox to see the thank you message.
Conclusion
Congratulations! You have successfully created a web application that allows users to buy you a coffee using Ethereum and send a thank you message using Mailchain. This tutorial demonstrated how to integrate Ethereum transactions and Mailchain messaging in a React application. You can further customize this application and add more features based on your requirements.