Here is an example of the fully built dApp.
💓 If you enjoyed the information and the web site, please donate or become a Patreon.
🌍 Love to travel? Check out Booking.com for all your travel needs.
📚 Project Setup And Installation
Technologies used: MetaMask, Solidity, React, TailwindCSS, Hardhat, GitHub, Vercel, Rinkeby Network, Alchemy
Install MetaMask which is your in-browser wallet that you will use to interact with your dApp.
Install Node.js if you have not already.
Go to your terminal and run the following commands:
mkdir mini-buymeacoffee-be
cd mini-buymeacoffee-be
npm init -y
npm install --save-dev hardhat
- Now, you should have the hardhat package. Now create a sample project going by running the commands:
npx hardhat
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
💹 Join Robinhood with my link and pick a free stock.
Choose the option of creating a basic sample project. Accept all requests after. Installing hardhat-waffle and hardhat-ethers is required for the sample project which you installed above.
Start up your project and keep that window open for your local deployments.
npx hardhat node
- To make sure everything is working, run:
npx hardhat test
- You will see a passed test result in your console.
- Delete sample-test.js from the test folder
- Delete sample-script.js from the scripts folder.
- Delete Greeter.sol from the contracts folder. DO NOT DELETE THE FOLDER!
🔑 Keep your crypto secure with a Ledger wallet
📌 Create Files And Deploy A Local Contract
- Inside the contracts folder, create a file called CoffeePortal.sol and input this code:
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract CoffeePortal {
constructor() payable {
console.log(Smart contract created.");
}
}
- To build and deploy your smart contract, go to the scripts folder, create a new file called run.js, and input this code:
const main = async () => {
// This will actually compile your contract and generate the necessary files to use your contract under the artifacts directory.
const coffeeContractFactory = await hre.ethers.getContractFactory('CoffeePortal');
const coffeeContract = await coffeeContractFactory.deploy();
await coffeeContract.deployed(); // You will wait until your contract is officially deployed to your local blockchain! Your constructor runs when you actually deploy.
console.log("Coffee contract deployed to:", coffeeContract.address);
};
const runMain = async () => {
try {
await main();
process.exit(0);
} catch (error) {
console.log(error);
process.exit(1);
}
};
runMain();
- Run the run.js script.
npx hardhat run scripts/run.js
- You now have a working smart contract. You can now deploy the smart contract to a network by making it available to everyone worldwide.
💵 Buy and sell bitcoins with Localbitcoins by finding cash and online exchanges
📂 Update Files
- Under the scripts folder, create a file called deploy.js. Here is the code for it:
const main = async () => {
const [deployer] = await hre.ethers.getSigners();
const accountBalance = await deployer.getBalance();
console.log("Deploying contracts with account: ", deployer.address);
console.log("Account balance: ", accountBalance.toString());
const Token = await hre.ethers.getContractFactory("CoffeePortal");
const portal = await Token.deploy();
await portal.deployed();
console.log("CoffeePortal address: ", portal.address);
};
const runMain = async () => {
try {
await main();
process.exit(0);
} catch (error) {
console.error(error);
process.exit(1);
}
};
runMain();
- Update the smart contract contracts/CoffeePortal.sol) file:
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract CoffeePortal {
uint256 totalCoffee;
address payable public owner;
/*
* A little magic, Google what events are in Solidity!
*/
event NewCoffee(
address indexed from,
uint256 timestamp,
string message,
string name
);
constructor() payable {
console.log("Smart contract deployed.");
// user who is calling this function address
owner = payable(msg.sender);
}
/*
* I created a struct here named Coffee.
* A struct is basically a custom datatype where you can customize what you want to hold inside it.
*/
struct Coffee {
address giver; // The address of the user who buys me a coffee.
string message; // The message the user sent.
string name; // The name of the user who buys me a coffee.
uint256 timestamp; // The timestamp when the user buys me a coffee.
}
/*
* I declare variable coffee that lets me store an array of structs.
* This is what lets me hold all the coffee anyone ever sends to me!
*/
Coffee[] coffee;
/*
* Added a function getAllCoffee which will return the struct array, coffee.
* This will make it easy to retrieve the coffee from your website!
*/
function getAllCoffee() public view returns (Coffee[] memory) {
return coffee;
}
// Get All coffee bought
function getTotalCoffee() public view returns (uint256) {
// Optional: Add this line if you want to see the contract print the value!
// You will also print it over in run.js as well.
console.log("You have %d total coffee received ", totalCoffee);
return totalCoffee;
}
/*
* You will notice I changed the buyCoffee function a little here as well and
* now it requires a string called _message. This is the message the user
* sends you from the front end!
*/
function buyCoffee(
string memory _message,
string memory _name,
uint256 _payAmount
) public payable {
uint256 cost = 0.001 ether;
require(_payAmount <= cost, "Insufficient Ether provided");
totalCoffee += 1;
console.log("%s has just sent a coffee!", msg.sender);
/*
* This is where I actually store the coffee data in the array.
*/
coffee.push(Coffee(msg.sender, _message, _name, block.timestamp));
(bool success, ) = owner.call{value: _payAmount}("");
require(success, "Failed to send money");
emit NewCoffee(msg.sender, block.timestamp, _message, _name);
}
}
- Update the scripts/run.js file:
const main = async () => {
const coffeeContractFactory = await hre.ethers.getContractFactory(
"CoffeePortal"
);
const coffeeContract = await coffeeContractFactory.deploy({
value: hre.ethers.utils.parseEther("0.1"),
});
await coffeeContract.deployed();
console.log("Coffee Contract deployed to:", coffeeContract.address);
/*
* Get Contract balance
*/
let contractBalance = await hre.ethers.provider.getBalance(
coffeeContract.address
);
console.log(
"Contract balance:",
hre.ethers.utils.formatEther(contractBalance)
);
/*
* Try to buy a coffee
*/
const coffeeTxn = await coffeeContract.buyCoffee(
"This is coffee #1",
"idris",
ethers.utils.parseEther("0.001")
);
await coffeeTxn.wait();
/*
* Get Contract balance to see what happened!
*/
contractBalance = await hre.ethers.provider.getBalance(
coffeeContract.address
);
console.log(
"Contract balance:",
hre.ethers.utils.formatEther(contractBalance)
);
let allCoffee = await coffeeContract.getAllCoffee();
console.log(allCoffee);
};
const runMain = async () => {
try {
await main();
process.exit(0);
} catch (error) {
console.log(error);
process.exit(1);
}
};
runMain();
- Update the scripts/deploy.js file:
const main = async () => {
const [deployer] = await hre.ethers.getSigners();
const accountBalance = await deployer.getBalance();
console.log("Deploying contracts with account: ", deployer.address);
console.log("Account balance: ", accountBalance.toString());
const Token = await hre.ethers.getContractFactory("CoffeePortal");
const portal = await Token.deploy({
value: hre.ethers.utils.parseEther("0.1"),
});
await portal.deployed();
console.log("CoffeePortal address: ", portal.address);
};
const runMain = async () => {
try {
await main();
process.exit(0);
} catch (error) {
console.error(error);
process.exit(1);
}
};
runMain();
- After changing the contracts/CoffeePortal.sol, scripts/run.js, and scripts/deploy.js files, you can now deploy to the real blockchain.
💫 Alchemy Account
Alchemy allows you to broadcast your contract creation transaction so that miners can pick it up. The contract transaction is then broadcasted to the blockchain as a legitimate transaction after it has been mined. Then everyone’s copy of the blockchain is updated.
- Sign up for an Alchemy account.
- Create an app as shown in the picture below after signing up.
- Change the network selection to Rinkeby.
You switched it from mainnet to Rinkeby. Mainnet is the real blockchain with real ethereum being used. You will start with a testnet which is a clone of mainnet but use fake money so that you can experiment as much as you like. The testnets are operated by real miners and are designed to simulate the real blockchain.
- You will need to grab your HTTP key as shown in the picture below and save them for later:
🧠 Never forget any of your passwords with Roboform
💱 Fake Ethereum
You will need some fake ETH in your testnet account, and you will have to request some from the Rinkeby network. This fake ETH can only be used on this testnet. You can get fake ETH by using a faucet. Here are a few places to grab fake ETH on the Rinkeby network:
📃 .env File And MetaMask
- Update the hardhat.config.js file in your project’s root directory. You need to install the dotenv package and also create a .env file using the command below:
npm install -D dotenv
- Create a .env file inside your project’s root folder, and name it variables.env. Be sure to define where your .env file is by adding this to your hardhat.config.js file:
require('dotenv').config({ path: 'variables.env' })
Find your MetaMask private key, click the three buttons on the right, go to Account Details, click on Export Private Key, type in your password, and then copy and paste that key into your .env file. You can also find more information here.
Add the following code to your variables.env file:
STAGING_ALCHEMY_KEY= // Add the key you copied from the Alchemy dashboard here
PRIVATE_KEY= // Add your MetaMask account private key here
💡 From marketing to design use Fiverr for all your needs
🎉 Deploy To Rinkeby Network
You can run the command to deploy your contract to a real blockchain network:
npx hardhat run scripts/deploy.js --network rinkeby
🎓 You deployed your first smart contract!
🌍 Love to travel? Check out Booking.com for all your travel needs.
🎉 Design The Web Site
You have completed the backend, it is time to complete the frontend.
- You will use TailwindCSS to set up the frontend of the web site. TailwindCSS is a utility-first CSS framework packed with classes to help you style your web page. Create a new project in your project’s root folder using this code:
npx create-next-app -e with-tailwindcss
- Install the dependencies:
npm install ethers react-toastify
- Once the app is created and the dependencies are installed, you will see a message with instructions for navigating to your site and running it locally. You can run your site locally with and access it at http://localhost:3000:
npm run dev
You need to connect your MetaMask wallet to the blockchain so your website can communicate with it. Your website will have permission to call smart contracts on your behalf after you connect your wallet to your website.
Work will be done in index.js, which can be found under pages. You need to import abi and update your contractAddress:
import React, { useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import { ethers } from "ethers";
import "react-toastify/dist/ReactToastify.css";
import Head from "next/head";
export default function Home() {
/**
* Create a variable here that holds the contract address after you deploy!
*/
const contractAddress = "";
/**
* Create a variable here that references the abi content!
*/
const contractABI = abi.abi;
/*
* Just a state variable used to store your user's public wallet.
*/
const [currentAccount, setCurrentAccount] = useState("");
const [message, setMessage] = useState("");
const [name, setName] = useState("");
/*
* All state property to store all coffee
*/
const [allCoffee, setAllCoffee] = useState([]);
const checkIfWalletIsConnected = async () => {
try {
const { ethereum } = window;
/*
* Check if you are authorized to access the user's wallet
*/
const accounts = await ethereum.request({ method: "eth_accounts" });
if (accounts.length !== 0) {
const account = accounts[0];
setCurrentAccount(account);
toast.success("🦄 Wallet is Connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
} else {
toast.warn("Make sure you have MetaMask Connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
} catch (error) {
toast.error(`${error.message}`, {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
};
/**
* Implement your connectWallet method here
*/
const connectWallet = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
toast.warn("Make sure you have MetaMask Connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
return;
}
const accounts = await ethereum.request({
method: "eth_requestAccounts",
});
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error);
}
};
const buyCoffee = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
let count = await coffeePortalContract.getTotalCoffee();
console.log("Retrieved total coffee count...", count.toNumber());
/*
* Execute the actual coffee from your smart contract
*/
const coffeeTxn = await coffeePortalContract.buyCoffee(
message ? message : "Enjoy Your Coffee",
name ? name : "Anonymous",
ethers.utils.parseEther("0.001"),
{
gasLimit: 300000,
}
);
console.log("Mining...", coffeeTxn.hash);
toast.info("Sending Fund for coffee...", {
position: "top-left",
autoClose: 18050,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
await coffeeTxn.wait();
console.log("Mined -- ", coffeeTxn.hash);
count = await coffeePortalContract.getTotalCoffee();
console.log("Retrieved total coffee count...", count.toNumber());
setMessage("");
setName("");
toast.success("Coffee Purchased!", {
position: "top-left",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
} else {
console.log("Ethereum object does not exist!");
}
} catch (error) {
toast.error(`${error.message}`, {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
};
/*
* Create a method that gets all coffee from your contract
*/
const getAllCoffee = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
/*
* Call the getAllCoffee method from your Smart Contract
*/
const coffees = await coffeePortalContract.getAllCoffee();
/*
* You only need address, timestamp, name, and message in the UI so
* pick those out
*/
const coffeeCleaned = coffees.map((coffee) => {
return {
address: coffee.giver,
timestamp: new Date(coffee.timestamp * 1000),
message: coffee.message,
name: coffee.name,
};
});
/*
* Store data in React State
*/
setAllCoffee(coffeeCleaned);
} else {
console.log("Ethereum object does not exist!");
}
} catch (error) {
console.log(error);
}
};
/*
* Runs the function when the page loads.
*/
useEffect(() => {
let coffeePortalContract;
getAllCoffee();
checkIfWalletIsConnected();
const onNewCoffee = (from, timestamp, message, name) => {
console.log("NewCoffee", from, timestamp, message, name);
setAllCoffee((prevState) => [
...prevState,
{
address: from,
timestamp: new Date(timestamp * 1000),
message: message,
name: name,
},
]);
};
if (window.ethereum) {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
coffeePortalContract.on("NewCoffee", onNewCoffee);
}
return () => {
if (coffeePortalContract) {
coffeePortalContract.off("NewCoffee", onNewCoffee);
}
};
}, []);
const handleOnMessageChange = (event) => {
const { value } = event.target;
setMessage(value);
};
const handleOnNameChange = (event) => {
const { value } = event.target;
setName(value);
};
return (
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<Head>
<title>Mini Buy Me a Coffee</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
<h1 className="text-6xl font-bold text-blue-600 mb-6">
Buy Me A Coffee
</h1>
{/*
* If there is currentAccount render this form, else render a button to connect wallet
*/}
{currentAccount ? (
<div className="w-full max-w-xs sticky top-3 z-50 ">
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="name"
>
Name
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="name"
type="text"
placeholder="Name"
onChange={handleOnNameChange}
required
/>
</div>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="message"
>
Send the Creator a Message
</label>
<textarea
className="form-textarea mt-1 block w-full shadow appearance-none py-2 px-3 border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
rows="3"
placeholder="Message"
id="message"
onChange={handleOnMessageChange}
required
></textarea>
</div>
<div className="flex items-left justify-between">
<button
className="bg-blue-500 hover:bg-blue-700 text-center text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="button"
onClick={buyCoffee}
>
Support $5
</button>
</div>
</form>
</div>
) : (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-full mt-3"
onClick={connectWallet}
>
Connect Your Wallet
</button>
)}
{allCoffee.map((coffee, index) => {
return (
<div className="border-l-2 mt-10" key={index}>
<div className="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-800 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
{/* <!-- Dot Following the Left Vertical Line --> */}
<div className="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
{/* <!-- Line that connecting the box with the vertical line --> */}
<div className="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
{/* <!-- Content that showing in the box --> */}
<div className="flex-auto">
<h1 className="text-md">Supporter: {coffee.name}</h1>
<h1 className="text-md">Message: {coffee.message}</h1>
<h3>Address: {coffee.address}</h3>
<h1 className="text-md font-bold">
TimeStamp: {coffee.timestamp.toString()}
</h1>
</div>
</div>
</div>
);
})}
</main>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}
👥 Learn a language with me for free through Duolingo
- Input your contract address in the index.js file.
- Create a folder named utils and create a file called CoffeePortal.json inside the utils folder.
- Go back to the smart contract project and find artifacts/contracts/CoffeePortal.sol and copy all the information in the file.
- Update the CoffeePortal.json file with what you copied.
- Get the contract address that was given to you in your terminal when you deployed your contract to the blockchain.
- Change the index.js file to and add your contract addess:
import React, { useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import { ethers } from "ethers";
import "react-toastify/dist/ReactToastify.css";
import Head from "next/head";
import abi from "../utils/CoffeePortal.json";
export default function Home() {
/**
* Create a variable here that holds the contract address after you deploy!
*/
const contractAddress = "0x62c6749A62401760A8b767AA487B7c0eCA8E4E2C";
/**
* Create a variable here that references the abi content!
*/
const contractABI = abi.abi;
/*
* Just a state variable used to store your user's public wallet.
*/
const [currentAccount, setCurrentAccount] = useState("");
const [message, setMessage] = useState("");
const [name, setName] = useState("");
/*
* All state property to store the coffee data.
*/
const [allCoffee, setAllCoffee] = useState([]);
const checkIfWalletIsConnected = async () => {
try {
const { ethereum } = window;
/*
* Check if you are authorized to access the user's wallet
*/
const accounts = await ethereum.request({ method: "eth_accounts" });
if (accounts.length !== 0) {
const account = accounts[0];
setCurrentAccount(account);
toast.success("Wallet is Connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
} else {
toast.warn("Make sure you have MetaMask connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
} catch (error) {
toast.error(`${error.message}`, {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
};
/**
* Implement your connectWallet method here
*/
const connectWallet = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
toast.warn("Make sure you have MetaMask connected", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
return;
}
const accounts = await ethereum.request({
method: "eth_requestAccounts",
});
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error);
}
};
const buyCoffee = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
let count = await coffeePortalContract.getTotalCoffee();
console.log("Retrieved total coffee count...", count.toNumber());
/*
* Execute the actual coffee gift from your smart contract
*/
const coffeeTxn = await coffeePortalContract.buyCoffee(
message ? message : "Enjoy Your Coffee",
name ? name : "Anonymous",
ethers.utils.parseEther("0.001"),
{
gasLimit: 300000,
}
);
console.log("Mining...", coffeeTxn.hash);
toast.info("Sending Fund for coffee...", {
position: "top-left",
autoClose: 18050,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
await coffeeTxn.wait();
console.log("Mined -- ", coffeeTxn.hash);
count = await coffeePortalContract.getTotalCoffee();
console.log("Retrieved total coffee count...", count.toNumber());
setMessage("");
setName("");
toast.success("Coffee Purchased!", {
position: "top-left",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
} else {
console.log("Ethereum object does not exist!");
}
} catch (error) {
toast.error(`${error.message}`, {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
};
/*
* Create a method that gets all coffee from your contract
*/
const getAllCoffee = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
/*
* Call the getAllCoffee method from your Smart Contract
*/
const coffees = await coffeePortalContract.getAllCoffee();
/*
* Only need address, timestamp, name, and message in your UI
*/
const coffeeCleaned = coffees.map((coffee) => {
return {
address: coffee.giver,
timestamp: new Date(coffee.timestamp * 1000),
message: coffee.message,
name: coffee.name,
};
});
/*
* Store your data in React State
*/
setAllCoffee(coffeeCleaned);
} else {
console.log("Ethereum object does not exist!");
}
} catch (error) {
console.log(error);
}
};
/*
* This runs your function when the page loads.
*/
useEffect(() => {
let coffeePortalContract;
getAllCoffee();
checkIfWalletIsConnected();
const onNewCoffee = (from, timestamp, message, name) => {
console.log("NewCoffee", from, timestamp, message, name);
setAllCoffee((prevState) => [
...prevState,
{
address: from,
timestamp: new Date(timestamp * 1000),
message: message,
name: name,
},
]);
};
if (window.ethereum) {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
coffeePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
coffeePortalContract.on("NewCoffee", onNewCoffee);
}
return () => {
if (coffeePortalContract) {
coffeePortalContract.off("NewCoffee", onNewCoffee);
}
};
}, []);
const handleOnMessageChange = (event) => {
const { value } = event.target;
setMessage(value);
};
const handleOnNameChange = (event) => {
const { value } = event.target;
setName(value);
};
return (
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<Head>
<title>Buy Me A Coffee</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
<h1 className="text-6xl font-bold text-blue-600 mb-6">
Buy Me A Coffee
</h1>
{/*
* If there is currentAccount render this form, else render a button to connect wallet
*/}
{currentAccount ? (
<div className="w-full max-w-xs sticky top-3 z-50 ">
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="name"
>
Name
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="name"
type="text"
placeholder="Name"
onChange={handleOnNameChange}
required
/>
</div>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="message"
>
Send the Creator a Message
</label>
<textarea
className="form-textarea mt-1 block w-full shadow appearance-none py-2 px-3 border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
rows="3"
placeholder="Message"
id="message"
onChange={handleOnMessageChange}
required
></textarea>
</div>
<div className="flex items-left justify-between">
<button
className="bg-blue-500 hover:bg-blue-700 text-center text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="button"
onClick={buyCoffee}
>
Support $5
</button>
</div>
</form>
</div>
) : (
<div>
<p className="text-2xl text-blue-600 mb-6">
You can switch your wallet to Rinkeby Testnet Network to test this
application.
</p>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-full mt-3"
onClick={connectWallet}
>
Connect Your Wallet
</button>
</div>
)}
{allCoffee.map((coffee, index) => {
return (
<div className="border-l-2 mt-10" key={index}>
<div className="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-800 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
{/* <!-- Dot Following the Left Vertical Line --> */}
<div className="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
{/* <!-- Line that connecting the box with the vertical line --> */}
<div className="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
{/* <!-- Content that showing in the box --> */}
<div className="flex-auto">
<h1 className="text-md">Supporter: {coffee.name}</h1>
<h1 className="text-md">Message: {coffee.message}</h1>
<h3>Address: {coffee.address}</h3>
<h1 className="text-md font-bold">
TimeStamp: {coffee.timestamp.toString()}
</h1>
</div>
</div>
</div>
);
})}
</main>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}
🔒 Grab yourself a secure hardware wallet from Trezor
- You can now test your dApp by visiting http://localhost:3000.
- Click the connect wallet button and MetaMask should pop up. Connect and confirm the transaction.
- Someone can now support you by buying a coffee worth $5 and also provide their name and a message.
💷 Earn Bitcoin for clicking ads at BTC Clicks
🔶 Summary
You learned how to build a buy me a coffee dApp using Solidity, a Ethereum smart contract, React, and TailwindCSS.
Here is the fully built dApp.
💓 If you enjoyed the information and the web site, please donate or become a Patreon.
Elyse Y. Robinson is the Founder of Switch Into Tech where she does monthly seminars, posts weekly freebies to help you switch into tech, Writer of Nube: Switch Into A Cloud Career, podcaster for Nobody Wants To Work Tho, creator of FullTuitionScholarships.org to help you not go into college debt, and in school for Data Science. Elyse is in love with Mexico, researching any and everything, and helping people switch into tech.