Implementing Smart Contract for Freelance Payments

Write a simple Ethereum smart contract using web3.js to automate freelance payments, ensuring timely compensation and potentially higher rates.

/* Solidity contract for freelance payments */

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract FreelancePayment {
    address public employer;
    address payable public freelancer;
    uint public deadline;
    uint public hourlyRate;

    constructor(address payable _freelancer, uint _hours, uint _hourlyRate) payable {
        employer = msg.sender;
        freelancer = _freelancer;
        deadline = block.timestamp + (_hours * 1 hours);
        hourlyRate = _hourlyRate;
    }

    function pay() public payable {
        require(msg.sender == employer, "Only the employer can pay.");
        require(block.timestamp <= deadline, "The payment deadline has passed.");
        require(msg.value == hourlyRate, "Payment should match the hourly rate.");
        freelancer.transfer(msg.value);
    }

    function withdraw() public {
        require(msg.sender == freelancer, "Only the freelancer can withdraw.");
        require(block.timestamp > deadline, "Cannot withdraw before the deadline.");
        freelancer.transfer(address(this).balance);
    }

    // Fallback function to accept any incoming ether
    receive() external payable {}
}

This is a Solidity smart contract for managing freelance payments. The employer deploys the contract, specifying the freelancer's address, the number of hours for the work, and the hourly rate. The contract has a payment function that allows the employer to pay the agreed upon hourly rate as long as it's before the deadline. The contract also includes a withdraw function for the freelancer to withdraw funds after the deadline, and a fallback function to receive any incoming Ether.

<!-- HTML for interacting with the smart contract -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freelance Payment</title>
    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
</head>
<body>
    <button id="pay">Pay Freelancer</button>
    <button id="withdraw">Withdraw Payment</button>

    <script src="app.js"></script>
</body>
</html>

This is the HTML markup for a simple web interface with two buttons: one for the employer to pay the freelancer and another one for the freelancer to withdraw their payment. The web3.js library is included to enable interaction with the Ethereum blockchain.

/* app.js - JavaScript for interacting with the smart contract */

const contractAddress = '<Your_Contract_Address>'; // Replace with actual contract address
const abi = [/* Contract ABI */]; // Replace with actual contract ABI

const web3 = new Web3(Web3.givenProvider || 'ws://localhost:8545');
const freelancePaymentContract = new web3.eth.Contract(abi, contractAddress);

// Handle 'Pay Freelancer' button click
document.getElementById('pay').addEventListener('click', function() {
    const employerAddress = web3.currentProvider.selectedAddress;
    // Use an appropriate value for hourlyRate converted to Wei
    const hourlyRateInWei = web3.utils.toWei('0.1', 'ether');
    freelancePaymentContract.methods.pay().send({ from: employerAddress, value: hourlyRateInWei });
});

// Handle 'Withdraw Payment' button click
document.getElementById('withdraw').addEventListener('click', function() {
    const freelancerAddress = web3.currentProvider.selectedAddress;
    freelancePaymentContract.methods.withdraw().send({ from: freelancerAddress });
});

This is JavaScript code using Web3.js to interact with the Ethereum blockchain and the FreelancePayment smart contract. The 'Pay Freelancer' button invokes the contract's `pay` method, while the 'Withdraw Payment' button triggers the `withdraw` method. The contract address and ABI should be replaced with the actual values after deploying the contract. The `web3.utils.toWei` function converts the payment amount from Ether to Wei.

/* CSS for the simple web interface */

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f7f7f7;
}

button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #45a049;
}

This is the CSS code providing basic styling for the HTML web interface. It includes styles for body layout, button appearance, and interactive states like hover.