From 293aea5e543c10f2e3d0478fb74e590b4c203a41 Mon Sep 17 00:00:00 2001
From: Abdul Arif <55670928+abdularif0705@users.noreply.github.com>
Date: Sun, 10 Mar 2024 08:37:42 -0400
Subject: [PATCH] Add ETH transfer functionality with Arduino handshake
 verification

---
 .../templates/transfers/ETH/ETHTransfers.tsx  | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/transfers/ETH/ETHTransfers.tsx b/src/components/templates/transfers/ETH/ETHTransfers.tsx
index e9581f8..0476518 100644
--- a/src/components/templates/transfers/ETH/ETHTransfers.tsx
+++ b/src/components/templates/transfers/ETH/ETHTransfers.tsx
@@ -13,35 +13,48 @@ import {
 } from "@chakra-ui/react";
 import { ethers } from "ethers";
 
+// Component for handling ETH transfers with Arduino handshake verification
 const ETHTransfers = () => {
+  // State variables for recipient address, amount to be sent, and transactions history
   const [recipient, setRecipient] = useState("");
   const [amount, setAmount] = useState("");
   const [txs, setTxs] = useState([]);
+
+  // Chakra UI toast for showing notifications
   const toast = useToast();
 
+  // Function to initiate payment after Arduino handshake confirmation
   const startPayment = async () => {
     try {
+      // Checks if the Ethereum provider (MetaMask) is available
       if (!window.ethereum)
         throw new Error("No crypto wallet found. Please install it.");
 
+      // Requests access to the user's account
       await window.ethereum.send("eth_requestAccounts");
       const provider = new ethers.providers.Web3Provider(window.ethereum);
       const signer = provider.getSigner();
-      ethers.utils.getAddress(recipient); // Validates the address
 
+      // Validates the recipient address format
+      ethers.utils.getAddress(recipient);
+
+      // Makes a POST request to the backend to check for Arduino handshake approval
       const response = await fetch("/api/arduino_handshake", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ action: "send", recipient, amount }),
       });
 
+      // Throws an error if the handshake was not approved
       if (!response.ok) throw new Error("Transaction not approved by Arduino");
 
+      // If approved, proceeds to send ETH to the recipient
       const tx = await signer.sendTransaction({
         to: recipient,
         value: ethers.utils.parseEther(amount),
       });
 
+      // Updates the transaction history and shows a success notification
       setTxs([...txs, tx]);
       toast({
         title: "Transaction Submitted",
@@ -51,6 +64,7 @@ const ETHTransfers = () => {
         isClosable: true,
       });
     } catch (err) {
+      // Catches and logs any errors, shows an error notification
       console.error(err);
       toast({
         title: "Transaction Failed",
@@ -62,17 +76,21 @@ const ETHTransfers = () => {
     }
   };
 
+  // Function to handle the receiving process (listening for Arduino confirmation)
   const handleReceive = async () => {
     try {
+      // Similar to startPayment but with action set to 'receive'
       const response = await fetch("/api/arduino_handshake", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ action: "receive", recipient, amount }),
       });
 
+      // Checks for Arduino approval for receiving
       if (!response.ok)
         throw new Error("Failed to receive approval from Arduino");
 
+      // Shows a success notification on receiving Arduino handshake approval
       toast({
         title: "Approval Received",
         description: "Arduino handshake approved. Ready to receive.",
@@ -81,6 +99,7 @@ const ETHTransfers = () => {
         isClosable: true,
       });
     } catch (err) {
+      // Catches and logs any errors, shows an error notification
       console.error(err);
       toast({
         title: "Receiving Failed",
@@ -92,9 +111,10 @@ const ETHTransfers = () => {
     }
   };
 
+  // UI components for entering transaction details, sending, and receiving
   return (
     <Box padding="4" maxW="md">
-      <Heading mb="6">ETH Transactions</Heading>
+      <Heading mb="6">Send ETH</Heading>
       <VStack spacing={5} as="form" onSubmit={(e) => e.preventDefault()}>
         <FormControl>
           <FormLabel htmlFor="recipient">Recipient Address</FormLabel>