Skip to content

Commit

Permalink
Add ETH transfer functionality with Arduino handshake verification
Browse files Browse the repository at this point in the history
  • Loading branch information
abdularif0705 committed Mar 10, 2024
1 parent 5bf1b79 commit 293aea5
Showing 1 changed file with 22 additions and 2 deletions.
24 changes: 22 additions & 2 deletions src/components/templates/transfers/ETH/ETHTransfers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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.",
Expand All @@ -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",
Expand All @@ -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>
Expand Down

0 comments on commit 293aea5

Please sign in to comment.