11. Now it’s time to deploy our Truffle configuration to the Ganache development network with the command:
truffle migrate
The output should resemble the following:
12. Before moving on with our app, we’ll run a few test scripts. In the tests directory, create a new file called donation-contract-tests.js that contains the following code:
const { assert } = require("chai");
const DonationContract = artifacts.require("./DonationContract.sol");
require("chai").use(require("chai-as-promised")).should();
contract("DonationContract", ([deployer, author, donator]) => {
let donationContract;
before(async () => {
donationContract = await DonationContract.deployed();
});
describe("deployment", () => {
it("should be an instance of DonationContract", async () => {
const address = await donationContract.address;
assert.notEqual(address, null);
assert.notEqual(address, 0x0);
assert.notEqual(address, "");
assert.notEqual(address, undefined);
});
});
describe("Images", () => {
let result;
const hash = "abcd1234";
const description = "This is a test image";
let imageCount;
before(async () => {
result = await donationContract.uploadImage(hash, description, {
from: author,
});
imageCount = await donationContract.imageCount();
});
it("Check Image", async () => {
let image = await donationContract.images(1);
assert.equal(imageCount, 1);
const event = result.logs[0].args;
assert.equal(event.hash, hash);
assert.equal(event.description, description);
});
it("Allow users to donate", async () => {
let oldAuthorBalance;
oldAuthorBalance = await web3.eth.getBalance(author);
oldAuthorBalance = new web3.utils.BN(oldAuthorBalance);
result = await donationContract.donateImageOwner(imageCount, {
from: donator,
value: web3.utils.toWei("1", "Ether"),
});
const event = result.logs[0].args;
let newAuthorBalance;
newAuthorBalance = await web3.eth.getBalance(author);
newAuthorBalance = new web3.utils.BN(newAuthorBalance);
let donateImageOwner;
donateImageOwner = web3.utils.toWei("1", "Ether");
donateImageOwner = new web3.utils.BN(donateImageOwner);
const expectedBalance = oldAuthorBalance.add(donateImageOwner);
assert.equal(newAuthorBalance.toString(), expectedBalance.toString());
});
});
});
13. Next, install the chai package, which is Truffle’s test script package used in the script above:
npm install chai chai-as-promised
14. Then, run the test script with the command:
truffle test
Your output should look like this:
15. In the root directory of your project, create a new directory called contexts, then create a new file called DataContext.tsx.
17. For our app’s user interface, we’ll be using the TailwindCSS package. Install it, along with HeadlessUI, with the command:
npm install tailwindcss @headlessui/react
18. Open the pages/index.tsx file and replace the existing code with the following content:
import Head from "next/head";
import { useState } from "react";
import Body from "../components/Body";
import Header from "../components/Layout/Header";
import { UploadImage } from "../components/UploadImage";
import { useData } from "../contexts/DataContext";
export default function Home() {
let [isOpen, setIsOpen] = useState(false);
const { loading } = useData();
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<div className="flex flex-col items-center justify-start min-h-screen py-2">
<Head>
<title>Decentragram</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<UploadImage isOpen={isOpen} closeModal={closeModal} />
<Header />
<div
className="max-w-2xl w-full bg-blue-100 rounded-xl flex justify-center items-center py-2 mt-3 hover:bg-blue-200 cursor-pointer"
onClick={openModal}
>
<span className="text-blue-500 font-bold text-lg">Upload Image</span>
</div>
{loading ? (
<div className="font-bold text-gray-400 mt-36 text-4xl">Loading...</div>
) : (
<Body />
)}
</div>
);
}
19. There are three components referenced in this code that don’t exist yet - Body.tsx, UploadImage.tsx, and Header.tsx.
Create a new directory called components, then create a new file for each of these in the components directory. Then, insert the following code into each:
26. Now it’s time to deploy your donation app’s smart contract to the Polygon Mumbai network with the command:
truffle migrate --network matic
A successful deployment will produce the following output:
27. Then, start the web app with the command:
npm run build
npm start
28. The app will be running at localhost:3000. It will look something like this:
29. Select ‘Upload Image’ to upload an image to the application.
30. Select a file from your local computer, provide an optional description, then select ‘Upload’.
8. Next, install .
You can install either the GUI application or the . We’ll be using the GUI application. Once downloaded, launch the GUI app, then select ‘Quickstart Ethereum’ when prompted to create a workspace.
First, make sure that your wallet is connected to the Polygon Mumtai testnet. For instructions on how to do this, check out this guide
In this file, insert your cryptowallet’s Mnemonic phrase or Please note that this phrase should NEVER be shared with anyone, and should be placed in your .gitignore file if you plan to publish this project to GitHub.
23. For submitted transactions, you will need some testnet MATIC, which you can get from the