Search for a command to run...
As a former Paratrooper Medic and Mass Casualty Coordinator, I made the leap into software engineering. Through my journey, I've continued to grow and learn, and I'm eager to share my knowledge with others. As a self-taught software engineer, I'm passionate about empowering others to pursue their dreams and learn new skills.
No comments yet. Be the first to comment.
A Comprehensive Technical Guide
Weighing Performance vs Build Time
I Had a hell of a time getting my Supabase MCP Server working. I figured that, because I went through the ringer on figuring out how to fix it, that I would share with you all that are probably googling how to get it fixed a guide to do just that. I...
This tutorial walks through the process of using the ArDrive Turbo CLI to top up your account with ARIO tokens. It's an extremely simple process and makes it very easy to manage your Turbo Credit balance without ever leaving your terminal or your IDE...
Plan DevRel Strategies the Army Ranger Way
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.
Basic knowledge of JavaScript, React, and Next.js
Node.js and npm installed on your system
MetaMask browser extension installed and set up
vbnetCopy codenpx create-next-app buy-me-a-coffee
cd buy-me-a-coffee
perlCopy codenpm install ethers @mailchain/sdk next dotenv
We'll create a simple Ethereum smart contract that allows users to buy a coffee and store a memo on the blockchain.
bashCopy codenpm install -D hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
Copy codenpx hardhat
contracts directory and a BuyMeACoffee.sol file inside it:bashCopy codemkdir contracts
cd contracts
touch BuyMeACoffee.sol
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);
}
}
pythonCopy codenpx hardhat compile
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.
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
arduinoCopy codenpm run dev
http://localhost:3000.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.
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.