Hands-On Smart Contract Development with Solidity and Ethereum

Chapter 11. Finishing Our Fundraiser UI

In this chapter, we’ll continue where we left off in Chapter 10 working on our new Web3 application. We’ll add more detailed information about each fundraiser where our user can click into a fundraiser to see more information, add donation receipts for each individual donation, and more.

We’ll also learn how to accept ether through our application so our user can submit funds to a fundraiser and interact with our contract.

Our first steps will be to display more information about each fundraiser. That will allow our donors to more easily decide what fundraiser they want to donate to and help our fundraiser creators make a more compelling case.

Adding Detailed Information About Each Fundraiser

The next item on our agenda is to display more information about each fundraiser to our user. We’ll use Material UI’s modal to let the user click on an individual fundraiser and see the information display quickly in a pop-up. When the modal is open, they’ll be able to click a donation amount and read more about the fundraiser. They’ll also be able to quickly close the modal. But first, we need to create a button on each card that opens the right fundraiser.

Copy the following code and add it right after your latest import statement. This will first import the button we need from Material UI and also use the default styles provided by Material UI:

import Button from '@material-ui/core/Button'; const useStyles = makeStyles(theme => ({ button: { margin: ...