Overview

Buy Me A Coffee DApp is a decentralized application that allows others to send coffee to the user using cryptocurrency. The DApp is built on the Mumbai network and has a verified smart contract. The front-end of the application is built using Chakra UI and Tailwind CSS, which has made the development process faster. The DApp includes features such as a landing page, a send coffee modal, displaying received coffees, and a withdraw funds modal.

Features

• Landing Page: The DApp includes a landing page that allows users to connect their wallet using Rainbow Kit and showcases the purpose of the application.
• Send Coffee Modal: Users have the option to send either a regular or large coffee using Chakra UI’s Button Component. The form for sending coffee is created using Chakra UI’s Modal and Form Components.
• All Coffees Received: The DApp displays all the memos received using a Chakra UI template. The avatar images for each memo are stored on IPFS using Web3Storage.
• Withdraw Funds Modal: The owner of the smart contract can withdraw their funds using a Chakra UI Button and Modal Components similar to the Send Coffee Modal. Only the owner has permission to withdraw funds.

Installation

To install the Buy Me A Coffee DApp, follow these steps:

1. Deploy the smart contract on the Mumbai network, following the instructions in the tutorial.
2. Set up the front-end by creating a landing page using the Chakra Template. Modify the template as needed.
3. Use the Chakra UI Modal and Form Components to create the Send Coffee Modal. Follow the Chakra UI documentation for usage instructions.
4. Utilize the wagmi React Hooks library to send transactions and connect to the smart contract. Refer to the documentation for the useContract() hook.
5. Display the received memos using a Chakra UI template. Store the avatar images on IPFS using Web3Storage. Use the provided helper files to handle the data and backgrounds.
6. Implement the Withdraw Funds Modal using Chakra UI Button and Modal Components, similar to the Send Coffee Modal.

Summary

The Buy Me A Coffee DApp is a decentralized application built on the Mumbai network. It allows users to send coffee to the owner using cryptocurrency. The DApp features a landing page, a send coffee modal, display of received coffees, and a withdraw funds modal. The front-end is built using Chakra UI and Tailwind CSS, which has made the development process faster. Future improvements include adding additional functionality, such as sorting received coffees and supporting multiple cryptocurrencies.