{"id":21051580,"url":"https://github.com/pskinnertech/mailchain-receipt","last_synced_at":"2025-03-13T23:24:58.957Z","repository":{"id":232990645,"uuid":"628052775","full_name":"PSkinnerTech/Mailchain-Receipt","owner":"PSkinnerTech","description":"Buy Me a Coffee with Mailchain: A web application built with React, Next.js, and Ethereum, allowing users to buy a coffee and send personalized thank you messages via Mailchain.","archived":false,"fork":false,"pushed_at":"2023-05-08T13:24:29.000Z","size":73,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-20T18:43:02.736Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PSkinnerTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-14T19:55:12.000Z","updated_at":"2023-04-14T19:58:07.000Z","dependencies_parsed_at":"2024-04-12T22:05:03.550Z","dependency_job_id":null,"html_url":"https://github.com/PSkinnerTech/Mailchain-Receipt","commit_stats":null,"previous_names":["pskinnertech/mailchain-receipt"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSkinnerTech%2FMailchain-Receipt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSkinnerTech%2FMailchain-Receipt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSkinnerTech%2FMailchain-Receipt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSkinnerTech%2FMailchain-Receipt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PSkinnerTech","download_url":"https://codeload.github.com/PSkinnerTech/Mailchain-Receipt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243496516,"owners_count":20300098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T15:58:22.214Z","updated_at":"2025-03-13T23:24:58.938Z","avatar_url":"https://github.com/PSkinnerTech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This project is licensed under the terms of the MIT license.\n\n# **Buy Me a Coffee using Mailchain - A Step-by-Step Tutorial**\n\n\n[\u003cimg width=\"1296\" alt=\"Screenshot 2023-04-17 at 10 06 36 AM\" src=\"https://user-images.githubusercontent.com/78289253/232527328-fd417fd2-f127-4383-8f58-464e82e0a462.png\"\u003e](https://www.loom.com/share/049f205e96c74569ace1a60b956d503d)\n\n\n## **Build a Next.js dApp to Buy Coffee and Send Receipts via Mailchain**\n\nIn this tutorial, you will learn how to build a Next.js decentralized application (dApp) that enables users to buy coffee using Ethereum and receive a receipt sent to their ENS address using Mailchain. Next.js is a popular React framework that simplifies the creation of server-rendered React applications.\n\n### **Prerequisites**\n\nBefore you start, make sure you have the following installed:\n\n* Node.js (\u0026gt;=12.x)\n    \n* npm or yarn\n    \n* A code editor such as Visual Studio Code\n    \n* MetaMask browser extension\n    \n* A basic understanding of React, Next.js, and Ethereum\n    \n\n### **Step 1: Set up the Next.js project**\n\n1. Install the `create-next-app` CLI using npm or yarn:\n    \n    ```bash\n    luaCopy codenpm install -g create-next-app\n    ```\n    \n    or\n    \n    ```bash\n    sqlCopy codeyarn global add create-next-app\n    ```\n    \n2. Create a new Next.js project:\n    \n    ```bash\n    luaCopy codenpx create-next-app buy-me-a-coffee\n    ```\n    \n3. Change to the newly created project directory:\n    \n    ```bash\n    bashCopy codecd buy-me-a-coffee\n    ```\n    \n4. Install the necessary dependencies:\n    \n    ```bash\n    bashCopy codenpm install ethers @mailchain/sdk dotenv\n    ```\n    \n    or\n    \n    ```bash\n    sqlCopy codeyarn add ethers @mailchain/sdk dotenv\n    ```\n    \n\n### **Step 2: Create the Mailchain file**\n\nCreate a new file named `mailchain.js` in the `js` folder of your project directory. This file will handle the Mailchain integration.\n\n```bash\njavascriptCopy codeimport { Mailchain } from \"@mailchain/sdk\";\nimport * as dotenv from \"dotenv\";\ndotenv.config();\n\nconst secretRecoveryPhrase = process.env.SECRET_RECOVERY_PHRASE;\n\nconst mailchain = Mailchain.fromSecretRecoveryPhrase(secretRecoveryPhrase);\n\nexport default mailchain;\n```\n\nThis file imports the Mailchain SDK, reads your Secret Recovery Phrase from the environment variables (`.env` file), and exports a Mailchain instance.\n\n### **Step 3: Create the main application file**\n\nReplace the content of `pages/index.js` with the provided code snippet in your initial question. This file contains the main logic for the dApp, including connecting to the wallet, buying coffee, sending receipts via Mailchain, and displaying the received memos.\n\n### **Step 4: Set up the environment variables**\n\nCreate a `.env.local` file in the root of your project directory, and add the following line:\n\n```bash\nmakefileCopy codeSECRET_RECOVERY_PHRASE=your_secret_recovery_phrase_here\n```\n\nReplace `your_secret_recovery_phrase_here` with your actual Secret Recovery Phrase.\n\n### **Step 5: Deploy your smart contract**\n\nTo interact with your smart contract, you will need to deploy it on a test network, such as Goerli or Rinkeby. You can use Remix, Truffle, or Hardhat to deploy your contract. Once deployed, replace the `contractAddress` value in `pages/index.js` with your deployed contract address.\n\n### **Step 6: Run the application**\n\n1. Start the development server:\n    \n    ```bash\n    npm run dev\n    ```\n    \n    or\n    \n    ```bash\n    yarn dev\n    ```\n    \n2. Open your browser and navigate to [`http://localhost:3000`](http://localhost:3000). You should see the \"Buy Patrick a Coffee!\" application.\n    \n3. Connect your MetaMask wallet and interact with the dApp. When you buy a coffee, a receipt will be sent to your ENS address via Mailchain.\n    \n\n### **Conclusion**\n\nIn this tutorial, you have built a Next.js dApp that allows users to buy coffee using Ethereum and receive a receipt via Mailchain. This demonstrates how to integrate a decentralized application with Mailchain to send messages to ENS addresses. You can further extend this application to add more features, such as integrating with other decentralized services, adding more types of items for purchase, or enhancing the UI/UX. This tutorial should serve as a starting point for building more sophisticated dApps that leverage the Mailchain protocol for web3 communication. Happy coding!\n\nAs always! Feel free to connect with me on [Twitter](https://twitter.com/PSkinnerTech).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpskinnertech%2Fmailchain-receipt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpskinnertech%2Fmailchain-receipt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpskinnertech%2Fmailchain-receipt/lists"}