https://github.com/pskinnertech/mailchain-receipt
Buy Me a Coffee with Mailchain: A web application built with React, Next.js, and Ethereum, allowing users to buy a coffee and send personalized thank you messages via Mailchain.
https://github.com/pskinnertech/mailchain-receipt
Last synced: about 1 year ago
JSON representation
Buy Me a Coffee with Mailchain: A web application built with React, Next.js, and Ethereum, allowing users to buy a coffee and send personalized thank you messages via Mailchain.
- Host: GitHub
- URL: https://github.com/pskinnertech/mailchain-receipt
- Owner: PSkinnerTech
- License: mit
- Created: 2023-04-14T19:55:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-08T13:24:29.000Z (about 3 years ago)
- Last Synced: 2025-01-20T18:43:02.736Z (over 1 year ago)
- Language: JavaScript
- Size: 71.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
This project is licensed under the terms of the MIT license.
# **Buy Me a Coffee using Mailchain - A Step-by-Step Tutorial**
[
](https://www.loom.com/share/049f205e96c74569ace1a60b956d503d)
## **Build a Next.js dApp to Buy Coffee and Send Receipts via Mailchain**
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.
### **Prerequisites**
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
### **Step 1: Set up the Next.js project**
1. Install the `create-next-app` CLI using npm or yarn:
```bash
luaCopy codenpm install -g create-next-app
```
or
```bash
sqlCopy codeyarn global add create-next-app
```
2. Create a new Next.js project:
```bash
luaCopy codenpx create-next-app buy-me-a-coffee
```
3. Change to the newly created project directory:
```bash
bashCopy codecd buy-me-a-coffee
```
4. Install the necessary dependencies:
```bash
bashCopy codenpm install ethers @mailchain/sdk dotenv
```
or
```bash
sqlCopy codeyarn add ethers @mailchain/sdk dotenv
```
### **Step 2: Create the Mailchain file**
Create a new file named `mailchain.js` in the `js` folder of your project directory. This file will handle the Mailchain integration.
```bash
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.
### **Step 3: Create the main application file**
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.
### **Step 4: Set up the environment variables**
Create a `.env.local` file in the root of your project directory, and add the following line:
```bash
makefileCopy codeSECRET_RECOVERY_PHRASE=your_secret_recovery_phrase_here
```
Replace `your_secret_recovery_phrase_here` with your actual Secret Recovery Phrase.
### **Step 5: Deploy your smart contract**
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.
### **Step 6: Run the application**
1. Start the development server:
```bash
npm run dev
```
or
```bash
yarn dev
```
2. Open your browser and navigate to [`http://localhost:3000`](http://localhost:3000). You should see the "Buy Patrick a Coffee!" application.
3. 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.
### **Conclusion**
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](https://twitter.com/PSkinnerTech).