DGF
/
dgf-prototype
6
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

UI for work availability stakes
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 37s Details

This commit is contained in:
Ladd Hoffman 2024-03-13 17:34:07 -05:00
parent 32f7220492
commit d1cce5e153
1 changed files with 95 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
client/src/App.jsx
View File

@ -1,10 +1,12 @@
import { useEffect, useRef, useState } from 'react';
import {
useCallback, useEffect, useRef, useState,
} from 'react';
import { useSDK } from '@metamask/sdk-react';
import { Web3 } from 'web3';
import Button from 'react-bootstrap/Button';
import DAOArtifact from './assets/DAO.json';
// import work1Artifact from './assets/Work1.json';
import work1Artifact from './assets/Work1.json';
const contracts = {
'0x539': { // Hardhat
@ -23,15 +25,15 @@ function App() {
} = useSDK();
const [DAO, setDAO] = useState();
// const [work1, setWork1] = useState();
// const [work1Price, setWork1Price] = useState();
const [work1, setWork1] = useState();
const [work1Price, setWork1Price] = useState();
const [balanceEther, setBalanceEther] = useState();
// const [reputation, setReputation] = useState();
const reputation = useRef();
const [totalReputation, setTotalReputation] = useState();
const [posts, setPosts] = useState([]);
const [validationPools, setValidationPools] = useState([]);
const stakedPools = useRef([]);
const [availabilityStakes, setAvailabilityStakes] = useState([]);
// const watchReputationToken = useCallback(async () => {
// await provider.request({
@ -53,15 +55,20 @@ function App() {
return new Date() < endDate ? 'In Progress' : 'Ready to Evaluate';
};
// In this effect, we initialize everything and add contract event listeners.
// TODO: Refactor -- make separate, functional components?
useEffect(() => {
if (!provider || !chainId || !account) return;
if (!contracts[chainId]) return;
const web3 = new Web3(provider);
const DAOContract = new web3.eth.Contract(DAOArtifact.abi, contracts[chainId].DAO);
// const work1Contract = new web3.eth.Contract(work1Artifact.abi, contracts[chainId].Work1);
const work1Contract = new web3.eth.Contract(work1Artifact.abi, contracts[chainId].Work1);
// const fetchPrice = async () => {
// };
const fetchPrice = async () => {
const fetchedPrice = await work1Contract.methods.price().call();
console.log('fetchedPrice', fetchedPrice);
setWork1Price(web3.utils.fromWei(fetchedPrice, 'ether'));
};
const fetchReputation = async () => {
reputation.current = Number(await DAOContract.methods.balanceOf(account).call());
@ -135,11 +142,26 @@ function App() {
setValidationPools(pools);
};
// fetchPrice();
const fetchAvailabilityStakes = async () => {
const count = await work1Contract.methods.stakeCount().call();
const promises = [];
for (let i = 0; i < count; i += 1) {
promises.push(work1Contract.methods.stakes(i).call());
}
const fetchedStakes = (await Promise.all(promises)).map((x, index) => {
Object.assign(x, { id: index });
return x;
});
setAvailabilityStakes(fetchedStakes);
};
fetchPrice();
fetchReputation();
fetchPosts();
fetchValidationPools();
// setWork1(work1Contract);
fetchAvailabilityStakes();
setWork1(work1Contract);
setDAO(DAOContract);
DAOContract.events.PostAdded({ fromBlock: 'latest' }).on('data', (event) => {
@ -203,17 +225,27 @@ function App() {
});
};
// const stakeAvailability = async () => { }
const stakeAvailability = useCallback(async () => {
const duration = 300; // 5 minutes
const target = contracts[chainId].Work1;
await DAO.methods.stakeAvailability(target, reputation.current, duration).send({
from: account,
gas: 1000000,
});
// Note that as with validation pool stakes, we should keep track locally of our reputation
reputation.current = 0;
}, [DAO, account, reputation, chainId]);
// const requestWork = async () => {
// work1.events.WorkAssigned(() => {
// console.log('event callback');
// });
// await work1.methods.requestWork().send({
// from: account,
// gas: 1000000,
// });
// };
const requestWork = useCallback(async () => {
const web3 = new Web3(provider);
const priceWei = BigInt(web3.utils.toWei(work1Price, 'ether'));
console.log('requestWork, ');
await work1.methods.requestWork().send({
from: account,
gas: 1000000,
value: priceWei,
});
}, [provider, work1, account, work1Price]);
return (
<>
@ -328,10 +360,49 @@ function App() {
</table>
</div>
<div>
{ /* `Work1 Price: ${work1Price} ETH` */ }
</div>
<div>
{ /* <Button onClick={() => requestWork()}>Request Work</Button> */ }
<h2>Work Contract 1</h2>
<div>
Price:
{work1Price}
{' '}
ETH
</div>
<div>
<Button onClick={() => stakeAvailability()}>Stake Availability</Button>
</div>
<div>
Availability Stake Count:
{' '}
{availabilityStakes.length}
</div>
<table className="table">
<thead>
<tr>
<th>ID</th>
<th>Worker</th>
<th>Amount</th>
<th>End Time</th>
<th>Assigned</th>
<th>Reclaimed</th>
</tr>
</thead>
<tbody>
{availabilityStakes.map((stake) => (
<tr key={stake.id}>
<td>{stake.id.toString()}</td>
<td>{stake.worker.toString()}</td>
<td>{stake.amount.toString()}</td>
<td>{new Date(Number(stake.endTime) * 1000).toLocaleString()}</td>
<td>{stake.assigned.toString()}</td>
<td>{stake.reclaimed.toString()}</td>
</tr>
))}
</tbody>
</table>
<div>
<Button onClick={() => requestWork()}>Request Work</Button>
</div>
</div>
</>
)}