refactored availability component
This commit is contained in:
Ladd Hoffman
parent
c38b4ea2f7
commit
27585b157e
|
|
@ -1,5 +1,5 @@
|
|||
import {
|
||||
useCallback, useEffect, useReducer, useState,
|
||||
useCallback, useEffect, useReducer, useState, createContext, useContext, useMemo,
|
||||
} from 'react';
|
||||
import { useSDK } from '@metamask/sdk-react';
|
||||
import { Web3 } from 'web3';
|
||||
|
|
@ -40,6 +40,8 @@ const updateList = (list, action) => {
|
|||
|
||||
const useList = (initialValue) => useReducer(updateList, initialValue ?? []);
|
||||
|
||||
const Web3Context = createContext({});
|
||||
|
||||
function App() {
|
||||
const {
|
||||
sdk, connected, provider, chainId, account, balance,
|
||||
|
|
@ -336,30 +338,6 @@ function App() {
|
|||
});
|
||||
}, [DAO, account]);
|
||||
|
||||
const stakeAvailability = useCallback(async (duration) => {
|
||||
const target = contracts[chainId].Work1;
|
||||
await DAO.methods.stakeAvailability(target, reputation, duration).send({
|
||||
from: account,
|
||||
gas: 1000000,
|
||||
});
|
||||
// Note that as with validation pool stakes, we should keep track locally of our reputation
|
||||
setReputation(0);
|
||||
}, [DAO, account, chainId, reputation, setReputation]);
|
||||
|
||||
const reclaimAvailabilityStake = useCallback(async (stakeIndex) => {
|
||||
await work1.methods.reclaimAvailability(stakeIndex).send({
|
||||
from: account,
|
||||
gas: 1000000,
|
||||
});
|
||||
}, [work1, account]);
|
||||
|
||||
const extendAvailabilityStake = useCallback(async (stakeIndex, duration) => {
|
||||
await work1.methods.extendAvailability(stakeIndex, duration).send({
|
||||
from: account,
|
||||
gas: 1000000,
|
||||
});
|
||||
}, [work1, account]);
|
||||
|
||||
const requestWork = useCallback(async () => {
|
||||
const web3 = new Web3(provider);
|
||||
const priceWei = BigInt(web3.utils.toWei(work1Price, 'ether'));
|
||||
|
|
@ -395,8 +373,13 @@ function App() {
|
|||
/* --------------------------- END UI ACTIONS ------------------------------------- */
|
||||
/* -------------------------------------------------------------------------------- */
|
||||
|
||||
const web3ProviderValue = useMemo(() => ({
|
||||
DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
|
||||
}), [
|
||||
DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
|
||||
]);
|
||||
return (
|
||||
<>
|
||||
<Web3Context.Provider value={web3ProviderValue}>
|
||||
{!connected && <Button onClick={() => connect()}>Connect</Button>}
|
||||
|
||||
{connected && (
|
||||
|
|
@ -542,66 +525,15 @@ function App() {
|
|||
<div>
|
||||
{`Price: ${work1Price} ETH`}
|
||||
</div>
|
||||
<div>
|
||||
Stake Availability:
|
||||
{' '}
|
||||
{!reputation && <>No reputation available to stake</>}
|
||||
{reputation > 0 && (
|
||||
<>
|
||||
<Button onClick={() => stakeAvailability(300)}>5 Min.</Button>
|
||||
{' '}
|
||||
<Button onClick={() => stakeAvailability(7200)}>2 Hr.</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Availability Stake Count:
|
||||
{' '}
|
||||
{availabilityStakes.length}
|
||||
</div>
|
||||
<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>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{availabilityStakes.filter((x) => !!x).map((s) => (
|
||||
<tr key={s.id}>
|
||||
<td>{s.id.toString()}</td>
|
||||
<td>{s.worker.toString()}</td>
|
||||
<td>{s.amount.toString()}</td>
|
||||
<td>{new Date(Number(s.endTime) * 1000).toLocaleString()}</td>
|
||||
<td>{s.assigned.toString()}</td>
|
||||
<td>{s.reclaimed.toString()}</td>
|
||||
<td>
|
||||
{s.currentUserIsWorker() && (
|
||||
<Button onClick={() => extendAvailabilityStake(s.id, 3600)}>
|
||||
Extend 1 Hr.
|
||||
</Button>
|
||||
)}
|
||||
{s.currentUserIsWorker() && s.timeRemaining <= 0
|
||||
&& !s.assigned && !s.reclaimed && (
|
||||
<>
|
||||
{' '}
|
||||
<Button onClick={() => reclaimAvailabilityStake(s.id)}>
|
||||
Reclaim
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<AvailabilityStakes
|
||||
DAO={DAO}
|
||||
work1={work1}
|
||||
reputation={reputation}
|
||||
account={account}
|
||||
chainId={chainId}
|
||||
setReputation={setReputation}
|
||||
availabilityStakes={availabilityStakes}
|
||||
/>
|
||||
<div>
|
||||
<Button onClick={() => requestWork()}>Request Work</Button>
|
||||
</div>
|
||||
|
|
@ -666,7 +598,19 @@ function App() {
|
|||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey="worker" title="Worker">
|
||||
TBD
|
||||
<h2>Work Contract 1</h2>
|
||||
<div>
|
||||
{`Price: ${work1Price} ETH`}
|
||||
</div>
|
||||
<AvailabilityStakes
|
||||
DAO={DAO}
|
||||
work1={work1}
|
||||
reputation={reputation}
|
||||
account={account}
|
||||
chainId={chainId}
|
||||
setReputation={setReputation}
|
||||
availabilityStakes={availabilityStakes}
|
||||
/>
|
||||
</Tab>
|
||||
<Tab eventKey="customer" title="Customer">
|
||||
TBD
|
||||
|
|
@ -674,6 +618,99 @@ function App() {
|
|||
</Tabs>
|
||||
</>
|
||||
)}
|
||||
</Web3Context.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function AvailabilityStakes() {
|
||||
const {
|
||||
DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
|
||||
} = useContext(Web3Context);
|
||||
const stakeAvailability = useCallback(async (duration) => {
|
||||
const target = contracts[chainId].Work1;
|
||||
await DAO.methods.stakeAvailability(target, reputation, duration).send({
|
||||
from: account,
|
||||
gas: 999999,
|
||||
});
|
||||
// Note that as with validation pool stakes, we should keep track locally of our reputation
|
||||
setReputation(0);
|
||||
}, [DAO, account, chainId, reputation, setReputation]);
|
||||
|
||||
const reclaimAvailabilityStake = useCallback(async (stakeIndex) => {
|
||||
await work1.methods.reclaimAvailability(stakeIndex).send({
|
||||
from: account,
|
||||
gas: 999999,
|
||||
});
|
||||
}, [work1, account]);
|
||||
|
||||
const extendAvailabilityStake = useCallback(async (stakeIndex, duration) => {
|
||||
await work1.methods.extendAvailability(stakeIndex, duration).send({
|
||||
from: account,
|
||||
gas: 999999,
|
||||
});
|
||||
}, [work1, account]);
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
Stake Availability:
|
||||
{' '}
|
||||
{!reputation && <>No reputation available to stake</>}
|
||||
{reputation > 0 && (
|
||||
<>
|
||||
<Button onClick={() => stakeAvailability(300)}>5 Min.</Button>
|
||||
{' '}
|
||||
<Button onClick={() => stakeAvailability(7200)}>2 Hr.</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Availability Stake Count:
|
||||
{' '}
|
||||
{availabilityStakes?.length}
|
||||
</div>
|
||||
<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>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{availabilityStakes?.filter((x) => !!x).map((s) => (
|
||||
<tr key={s.id}>
|
||||
<td>{s.id.toString()}</td>
|
||||
<td>{s.worker.toString()}</td>
|
||||
<td>{s.amount.toString()}</td>
|
||||
<td>{new Date(Number(s.endTime) * 1000).toLocaleString()}</td>
|
||||
<td>{s.assigned.toString()}</td>
|
||||
<td>{s.reclaimed.toString()}</td>
|
||||
<td>
|
||||
{s.currentUserIsWorker() && (
|
||||
<Button onClick={() => extendAvailabilityStake(s.id, 3600)}>
|
||||
Extend 1 Hr.
|
||||
</Button>
|
||||
)}
|
||||
{s.currentUserIsWorker() && s.timeRemaining <= 0
|
||||
&& !s.assigned && !s.reclaimed && (
|
||||
<>
|
||||
{' '}
|
||||
<Button onClick={() => reclaimAvailabilityStake(s.id)}>
|
||||
Reclaim
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue