Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Week 5: Assignment Escrow Payment #3

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,5 @@ cache
node_modules
artifacts
*.bck
.env
.DS_Store
6,644 changes: 2,994 additions & 3,650 deletions app/package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"dotenv": "^16.0.3",
"ethers": "^5.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
280 changes: 213 additions & 67 deletions app/src/App.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
import { ethers } from 'ethers';
import { useEffect, useState } from 'react';
import deploy from './deploy';
import Escrow from './Escrow';
import { ethers } from "ethers";
import { useEffect, useState } from "react";

import abi from "./artifacts/contracts/ProjectEscrow.sol/ProjectEscrowContract.json";
const provider = new ethers.providers.Web3Provider(window.ethereum);

export async function approve(escrowContract, signer) {
const approveTxn = await escrowContract.connect(signer).approve();
await approveTxn.wait();
}

export async function getBalance() {
const balance = await provider.getBalance(
"0xd29e69dd20e0266569a7ff9415c33efde2cb47d1"
);
alert(ethers.utils.formatEther(balance));
}

function App() {
const [escrows, setEscrows] = useState([]);
const [account, setAccount] = useState();
const [signer, setSigner] = useState();
const [projectDetail, setProjectDetail] = useState(null);

useEffect(() => {
async function getAccounts() {
const accounts = await provider.send('eth_requestAccounts', []);
const accounts = await provider.send("eth_requestAccounts", []);

setAccount(accounts[0]);
setSigner(provider.getSigner());
Expand All @@ -27,71 +33,211 @@ function App() {
}, [account]);

async function newContract() {
const beneficiary = document.getElementById('beneficiary').value;
const arbiter = document.getElementById('arbiter').value;
const value = ethers.BigNumber.from(document.getElementById('wei').value);
const escrowContract = await deploy(signer, arbiter, beneficiary, value);


const escrow = {
address: escrowContract.address,
arbiter,
beneficiary,
value: value.toString(),
handleApprove: async () => {
escrowContract.on('Approved', () => {
document.getElementById(escrowContract.address).className =
'complete';
document.getElementById(escrowContract.address).innerText =
"✓ It's been approved!";
});

await approve(escrowContract, signer);
},
};

setEscrows([...escrows, escrow]);
const projectId = document.getElementById("projectId").value;
const projectType = document.getElementById("projectType").value;
const value = document.getElementById("eth").value;

const projectEscrowContract = new ethers.Contract(
"0xd29e69dd20e0266569a7ff9415c33efde2cb47d1",
abi,
signer
);

//console.log(value, ethers.utils.parseEther(value).toString());

console.log("Ether", ethers.utils.parseEther(value).toString());

const projectCreated = await projectEscrowContract.createProject(
projectId,
projectType,
ethers.utils.parseEther(value).toString()
);
console.log("projectCreated", projectCreated);
}

return (
<>
<div className="contract">
<h1> New Contract </h1>
<label>
Arbiter Address
<input type="text" id="arbiter" />
</label>

<label>
Beneficiary Address
<input type="text" id="beneficiary" />
</label>

<label>
Deposit Amount (in Wei)
<input type="text" id="wei" />
</label>

<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

newContract();
}}
>
Deploy
</div>
</div>
async function assignProject() {
const projectId = document.getElementById("projectIdAssinged").value;
await getProjectDetails(projectId);
const freelancer = document.getElementById("freelancer").value;

const projectEscrowContract = new ethers.Contract(
"0xd29e69dd20e0266569a7ff9415c33efde2cb47d1",
abi.abi,
signer
);

const projectAssigned = await projectEscrowContract.projectAssigned(
projectId,
freelancer,
{
value: ethers.BigNumber.from(projectDetail.amount),
}
);
console.log("projectAssigned: ", projectAssigned);
}

async function markprojectDone() {
const projectId = document.getElementById("projectIdMarkedDone").value;
const projectEscrowContract = new ethers.Contract(
"0xd29e69dd20e0266569a7ff9415c33efde2cb47d1",
abi.abi,
signer
);

const projectCompleted = await projectEscrowContract.projectCompleted(
projectId
);
console.log("projectCompleted: ", projectCompleted);
}

<div className="existing-contracts">
<h1> Existing Contracts </h1>
async function getProjectDetails() {
const projectEscrowContract = new ethers.Contract(
"0xd29e69dd20e0266569a7ff9415c33efde2cb47d1",
abi.abi,
signer
);
const projectId = document.getElementById("projectIdForDetail").value;
const project = await projectEscrowContract.getProject(projectId);
setProjectDetail(project);
}

<div id="container">
{escrows.map((escrow) => {
return <Escrow key={escrow.address} {...escrow} />;
})}
return (
<>
<div className="container">
<div className="contract">
<h1> New Project </h1>
<label>
Project Id
<input type="text" id="projectId" />
</label>

<label>
Project Type
<input type="text" id="projectType" />
</label>

<label>
Deposit Amount (in eth)
<input type="text" id="eth" />
</label>

<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

newContract();
}}
>
Create Project
</div>

<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

getBalance();
}}
>
Get Balance
</div>

<h1> Assign project </h1>
<label>
Project Id
<input type="text" id="projectIdAssinged" />
</label>
<label>
Freelancer Address
<input type="text" id="freelancer" />
</label>

<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

assignProject();
}}
>
Assign Project
</div>

<h1> Mark the Project Done:</h1>
<label>
Project Id
<input type="text" id="projectIdMarkedDone" />
</label>
<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

markprojectDone();
}}
>
Mark project Done
</div>
<div className="existing-contracts">
<h1> Project Details </h1>
<label>
Project Id
<input type="text" id="projectIdForDetail" />
</label>
<div
className="button"
id="deploy"
onClick={(e) => {
e.preventDefault();

getProjectDetails();
}}
>
Get Project Details
</div>
{projectDetail &&
projectDetail.client !==
"0x0000000000000000000000000000000000000000" ? (
<div>
<h1> Project Details </h1>
<span>Client address: {projectDetail.client}</span>
<br />
<span>
Freelancer address:{" "}
{projectDetail.freelancer ===
"0x0000000000000000000000000000000000000000"
? "Not Assigned"
: projectDetail.freelancer}
</span>
<br />
<span>
Project Type:{" "}
{projectDetail.projectType === 1 ? "Fixed" : "Hourly"}
</span>
<br />
<span>
Project Status:{" "}
{projectDetail.status === 0
? "Created"
: projectDetail.status === 1
? "In Progress"
: "Completed"}
</span>
<br />
<span>
Project Amount:{" "}
{ethers.utils.formatEther(projectDetail.amount)}
</span>
</div>
) : (
<span>No Data</span>
)}
</div>
</div>
</div>
</>
Expand Down
Loading