This project is licensed under the terms of the MIT license.
In this tutorial, you will learn how to build a Next.js decentralized application (dApp) that enables users to buy coffee using Ethereum and receive a receipt sent to their ENS address using Mailchain. Next.js is a popular React framework that simplifies the creation of server-rendered React applications.
Before you start, make sure you have the following installed:
-
Node.js (>=12.x)
-
npm or yarn
-
A code editor such as Visual Studio Code
-
MetaMask browser extension
-
A basic understanding of React, Next.js, and Ethereum
-
Install the
create-next-app
CLI using npm or yarn:luaCopy codenpm install -g create-next-app
or
sqlCopy codeyarn global add create-next-app
-
Create a new Next.js project:
luaCopy codenpx create-next-app buy-me-a-coffee
-
Change to the newly created project directory:
bashCopy codecd buy-me-a-coffee
-
Install the necessary dependencies:
bashCopy codenpm install ethers @mailchain/sdk dotenv
or
sqlCopy codeyarn add ethers @mailchain/sdk dotenv
Create a new file named mailchain.js
in the js
folder of your project directory. This file will handle the Mailchain integration.
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);
export default mailchain;
This file imports the Mailchain SDK, reads your Secret Recovery Phrase from the environment variables (.env
file), and exports a Mailchain instance.
Replace the content of pages/index.js
with the provided code snippet in your initial question. This file contains the main logic for the dApp, including connecting to the wallet, buying coffee, sending receipts via Mailchain, and displaying the received memos.
Create a .env.local
file in the root of your project directory, and add the following line:
makefileCopy codeSECRET_RECOVERY_PHRASE=your_secret_recovery_phrase_here
Replace your_secret_recovery_phrase_here
with your actual Secret Recovery Phrase.
To interact with your smart contract, you will need to deploy it on a test network, such as Goerli or Rinkeby. You can use Remix, Truffle, or Hardhat to deploy your contract. Once deployed, replace the contractAddress
value in pages/index.js
with your deployed contract address.
-
Start the development server:
npm run dev
or
yarn dev
-
Open your browser and navigate to
http://localhost:3000
. You should see the "Buy Patrick a Coffee!" application. -
Connect your MetaMask wallet and interact with the dApp. When you buy a coffee, a receipt will be sent to your ENS address via Mailchain.
In this tutorial, you have built a Next.js dApp that allows users to buy coffee using Ethereum and receive a receipt via Mailchain. This demonstrates how to integrate a decentralized application with Mailchain to send messages to ENS addresses. You can further extend this application to add more features, such as integrating with other decentralized services, adding more types of items for purchase, or enhancing the UI/UX. This tutorial should serve as a starting point for building more sophisticated dApps that leverage the Mailchain protocol for web3 communication. Happy coding!
As always! Feel free to connect with me on Twitter.