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 a BuyMeACoffee.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 the artifacts/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 in index.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.

Buy Me a Coffee with Mailchain