Added UI heading and tabs
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 26s
Details
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 26s
Details
This commit is contained in:
Ladd Hoffman
parent
94adc4d353
commit
d7ff17b056
|
|
@ -4,6 +4,12 @@ import {
|
|||
import { useSDK } from '@metamask/sdk-react';
|
||||
import { Web3 } from 'web3';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Tab from 'react-bootstrap/Tab';
|
||||
import Tabs from 'react-bootstrap/Tabs';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import Row from 'react-bootstrap/Row';
|
||||
import Col from 'react-bootstrap/Col';
|
||||
import Stack from 'react-bootstrap/Stack';
|
||||
|
||||
import DAOArtifact from './assets/DAO.json';
|
||||
import work1Artifact from './assets/Work1.json';
|
||||
|
|
@ -391,173 +397,193 @@ function App() {
|
|||
|
||||
{connected && (
|
||||
<>
|
||||
<div>
|
||||
{!contracts[chainId] && (
|
||||
<div>
|
||||
Please switch MetaMask to Sepolia testnet!
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
{chainId && `Chain ID: ${chainId}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Account: ${account}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Balance: ${balanceEther} ETH`}
|
||||
</div>
|
||||
<div>
|
||||
{`Your REP: ${reputation}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Total REP: ${totalReputation}`}
|
||||
</div>
|
||||
<Button onClick={() => disconnect()}>Disconnect</Button>
|
||||
</div>
|
||||
<div>
|
||||
{`Posts count: ${posts.length}`}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Author</th>
|
||||
<th>Sender</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{posts.filter((x) => !!x).map((post) => (
|
||||
<tr key={post.id}>
|
||||
<td>{post.id.toString()}</td>
|
||||
<td>{post.author}</td>
|
||||
<td>{post.sender}</td>
|
||||
<td>
|
||||
Initiate Validation Pool
|
||||
{' '}
|
||||
<Button onClick={() => initiateValidationPool(post.id, 60)}>
|
||||
1 Min.
|
||||
</Button>
|
||||
{' '}
|
||||
<Button onClick={() => initiateValidationPool(post.id, 3600)}>
|
||||
1 Hr.
|
||||
</Button>
|
||||
{' '}
|
||||
<Button onClick={() => initiateValidationPool(post.id, 86400)}>
|
||||
1 Day
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => addPost()}>Add Post</Button>
|
||||
</div>
|
||||
<div>
|
||||
{`Validation Pool Count: ${validationPools.length}`}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Post ID</th>
|
||||
<th>Fee</th>
|
||||
<th>Duration</th>
|
||||
<th>End Time</th>
|
||||
<th>
|
||||
Stake
|
||||
<br />
|
||||
Count
|
||||
</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{validationPools.filter((x) => !!x).map((pool) => (
|
||||
<tr key={pool.id}>
|
||||
<td>{pool.id.toString()}</td>
|
||||
<td>{pool.postIndex.toString()}</td>
|
||||
<td>{pool.fee.toString()}</td>
|
||||
<td>{pool.duration.toString()}</td>
|
||||
<td>{new Date(Number(pool.endTime) * 1000).toLocaleString()}</td>
|
||||
<td>{pool.stakeCount.toString()}</td>
|
||||
<td>{pool.status}</td>
|
||||
<td>
|
||||
{!pool.resolved && reputation > 0 && pool.timeRemaining > 0 && (
|
||||
<>
|
||||
<Button onClick={() => stakeAllInFavor(pool.id)}>
|
||||
Stake
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
{!contracts[chainId] && (
|
||||
<div>
|
||||
Please switch MetaMask to Sepolia testnet!
|
||||
</div>
|
||||
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Stack>
|
||||
<div>
|
||||
{chainId && `Chain ID: ${chainId}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Account: ${account}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Balance: ${balanceEther} ETH`}
|
||||
</div>
|
||||
</Stack>
|
||||
</Col>
|
||||
<Col>
|
||||
<Stack>
|
||||
<div>
|
||||
{`Your REP: ${reputation}`}
|
||||
</div>
|
||||
<div>
|
||||
{`Total REP: ${totalReputation}`}
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => disconnect()}>Disconnect</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<Tabs>
|
||||
<Tab eventKey="admin" title="Admin">
|
||||
|
||||
<div>
|
||||
{`Posts count: ${posts.length}`}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Author</th>
|
||||
<th>Sender</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{posts.filter((x) => !!x).map((post) => (
|
||||
<tr key={post.id}>
|
||||
<td>{post.id.toString()}</td>
|
||||
<td>{post.author}</td>
|
||||
<td>{post.sender}</td>
|
||||
<td>
|
||||
Initiate Validation Pool
|
||||
{' '}
|
||||
<Button onClick={() => initiateValidationPool(post.id, 60)}>
|
||||
1 Min.
|
||||
</Button>
|
||||
{' '}
|
||||
</>
|
||||
)}
|
||||
{!pool.resolved && pool.timeRemaining <= 0 && (
|
||||
<Button onClick={() => evaluateOutcome(pool.id)}>
|
||||
Evaluate Outcome
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Work Contract 1</h2>
|
||||
<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={() => initiateValidationPool(post.id, 3600)}>
|
||||
1 Hr.
|
||||
</Button>
|
||||
{' '}
|
||||
<Button onClick={() => initiateValidationPool(post.id, 86400)}>
|
||||
1 Day
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => addPost()}>Add Post</Button>
|
||||
</div>
|
||||
<div>
|
||||
{`Validation Pool Count: ${validationPools.length}`}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Post ID</th>
|
||||
<th>Fee</th>
|
||||
<th>Duration</th>
|
||||
<th>End Time</th>
|
||||
<th>
|
||||
Stake
|
||||
<br />
|
||||
Count
|
||||
</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{validationPools.filter((x) => !!x).map((pool) => (
|
||||
<tr key={pool.id}>
|
||||
<td>{pool.id.toString()}</td>
|
||||
<td>{pool.postIndex.toString()}</td>
|
||||
<td>{pool.fee.toString()}</td>
|
||||
<td>{pool.duration.toString()}</td>
|
||||
<td>{new Date(Number(pool.endTime) * 1000).toLocaleString()}</td>
|
||||
<td>{pool.stakeCount.toString()}</td>
|
||||
<td>{pool.status}</td>
|
||||
<td>
|
||||
{!pool.resolved && reputation > 0 && pool.timeRemaining > 0 && (
|
||||
<>
|
||||
<Button onClick={() => stakeAllInFavor(pool.id)}>
|
||||
Stake
|
||||
</Button>
|
||||
{' '}
|
||||
</>
|
||||
)}
|
||||
{!pool.resolved && pool.timeRemaining <= 0 && (
|
||||
<Button onClick={() => evaluateOutcome(pool.id)}>
|
||||
Evaluate Outcome
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Work Contract 1</h2>
|
||||
<div>
|
||||
{`Price: ${work1Price} ETH`}
|
||||
</div>
|
||||
<div>
|
||||
Stake Availability:
|
||||
{' '}
|
||||
<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
|
||||
{!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 && (
|
||||
<>
|
||||
{' '}
|
||||
|
|
@ -565,58 +591,58 @@ function App() {
|
|||
Reclaim
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => requestWork()}>Request Work</Button>
|
||||
</div>
|
||||
<div>
|
||||
Work Request Count:
|
||||
{' '}
|
||||
{workRequests.length}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Fee</th>
|
||||
<th>Status</th>
|
||||
<th>Stake ID</th>
|
||||
<th>Approval</th>
|
||||
<th>Pool ID</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{workRequests.filter((x) => !!x).map((request) => (
|
||||
<tr key={request.id}>
|
||||
<td>{request.id.toString()}</td>
|
||||
<td>{request.customer.toString()}</td>
|
||||
<td>
|
||||
{request.feeEther}
|
||||
{' '}
|
||||
ETH
|
||||
</td>
|
||||
<td>{request.statusString}</td>
|
||||
<td>{request.stakeIndex.toString()}</td>
|
||||
<td>{request.approval.toString()}</td>
|
||||
<td>{request.poolIndex.toString()}</td>
|
||||
<td>
|
||||
{availabilityStakes.length > 0
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => requestWork()}>Request Work</Button>
|
||||
</div>
|
||||
<div>
|
||||
Work Request Count:
|
||||
{' '}
|
||||
{workRequests.length}
|
||||
</div>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Fee</th>
|
||||
<th>Status</th>
|
||||
<th>Stake ID</th>
|
||||
<th>Approval</th>
|
||||
<th>Pool ID</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{workRequests.filter((x) => !!x).map((request) => (
|
||||
<tr key={request.id}>
|
||||
<td>{request.id.toString()}</td>
|
||||
<td>{request.customer.toString()}</td>
|
||||
<td>
|
||||
{request.feeEther}
|
||||
{' '}
|
||||
ETH
|
||||
</td>
|
||||
<td>{request.statusString}</td>
|
||||
<td>{request.stakeIndex.toString()}</td>
|
||||
<td>{request.approval.toString()}</td>
|
||||
<td>{request.poolIndex.toString()}</td>
|
||||
<td>
|
||||
{availabilityStakes.length > 0
|
||||
&& availabilityStakes[Number(request.stakeIndex)]?.currentUserIsWorker()
|
||||
&& Number(request.status) === 0 && (
|
||||
<Button onClick={() => submitWorkEvidence(request.id)}>
|
||||
Submit Work Evidence
|
||||
</Button>
|
||||
)}
|
||||
{request.currentUserIsCustomer()
|
||||
)}
|
||||
{request.currentUserIsCustomer()
|
||||
&& Number(request.status) === 1 && (
|
||||
<>
|
||||
<Button onClick={() => submitWorkApproval(request.id)}>
|
||||
|
|
@ -626,14 +652,22 @@ function App() {
|
|||
Submit Dispproval
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey="worker" title="Worker">
|
||||
TBD
|
||||
</Tab>
|
||||
<Tab eventKey="customer" title="Customer">
|
||||
TBD
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue