TipJar is a robust and user-friendly decentralized application (dApp) built on Ethereum and React.js that simplifies the process of sending tips in Ether. With an intuitive interface and seamless integration with MetaMask, it provides a quick and easy way for users to tip one another for their contributions.
- Easy Connection with MetaMask: The application uses MetaMask for user authentication and transaction signing, ensuring the security and integrity of the tipping process.
- Apollo Client for GraphQL: The application leverages the Apollo Client for interacting with a GraphQL server, making the data fetching more efficient and the code cleaner.
- URL Parameters for Convenience: The application uses URL parameters to automatically fill in the Ethereum address of the recipient. This is a user-friendly feature as it eliminates the need for the sender to manually input the recipient's address. Instead, they can just click on a link, and the recipient's address is automatically populated in the form.
- Error Handling: The application includes robust error handling to guide users through any potential issues they might encounter while connecting to MetaMask or sending a tip.
- Clone the repository:
git clone https://github.com/CodeNameNoah/TipJar.git - Install the dependencies:
npm install - cd client:
npm install - cd server:
npm install - In root directory start the application:
npm run dev - MUST have MetaMask extension installed or else the application will NOT work.
The application should now be running at http://localhost:3000 http://localhost:4000.
https://mytipjar.herokuapp.com/
-
When you open the application, you will see a button to connect to MetaMask. Clicking on this button will prompt you to connect with your MetaMask account.
-
Most users will be loaded on the home page when you first visit our site. simply just fill in the address and amount fields and click "send tip". A window will pop up for you to connect your MetaMask with our application.
Once connected, you can input the Ethereum address of the recipient and the amount of Ether you want to send as a tip. Clicking on "Send Tip" will prompt you to confirm the transaction in MetaMask.
To make it easier for users to send a tip to a specific address, you can include the recipient's address as a URL parameter. Here is an example of how to construct such a link:
https://mytipjar.herokuapp.com/?address=0x08bE1b402447c12E7Da7D454d77641086878a8D5
In this example, 0x08bE1b402447c12E7Da7D454d77641086878a8D5 should be replaced with the actual Ethereum address of the recipient. When a user clicks on this link,
the Ethereum address is automatically filled in, saving the user the trouble of having to manually input it.
To run the GraphQL server, use the command: node server.js. The server will start on http://localhost:4000/graphql.
If you want to disconnect your MetaMask account from TipJar, follow these steps:
- Open the MetaMask extension. You should see your account details.
- Click on "Connected". This will open a new page showing a list of all the websites your MetaMask wallet is currently connected to.
- Click on the 3 dots on the account you wish to disconnect and then proceed to disconnect.
- Your MetaMask account should now be disconnected from TipJar. If you want to connect again in the future, you'll need to go through the connection process again.
We're always looking to make TipJar better and more efficient. Some potential future improvements include:
- Integration with other Ethereum wallets.
- Support for tipping in ERC-20 tokens.
We welcome contributions from the community. If you have a feature request, bug report, or want to contribute to the code, please open an issue or submit a pull request.
TipJar is open-source software licensed under the MIT license.
Enjoy using TipJar! We hope it makes your Ethereum tipping experience more enjoyable and efficient.