move availability stakes component to separate file

client/package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.6.7",
         "bootstrap": "^5.3.3",
         "bootswatch": "^5.3.3",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.1",
         "react-dom": "^18.2.0",

client/package.json

@@ -15,6 +15,7 @@
     "axios": "^1.6.7",
     "bootstrap": "^5.3.3",
     "bootswatch": "^5.3.3",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",

client/src/App.jsx

@@ -1,5 +1,5 @@
 import {
-  useCallback, useEffect, useReducer, useState, createContext, useContext, useMemo,
+  useCallback, useEffect, useReducer, useState, useMemo,
 } from 'react';
 import { useSDK } from '@metamask/sdk-react';
 import { Web3 } from 'web3';
@@ -11,19 +11,11 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Stack from 'react-bootstrap/Stack';
 
+import Web3Context from './Web3Context';
+import contracts from './contracts';
 import DAOArtifact from './assets/DAO.json';
 import work1Artifact from './assets/Work1.json';
-
-const contracts = {
-  '0x539': { // Hardhat
-    DAO: '0x76Dfe9F47f06112a1b78960bf37d87CfbB6D6133',
-    Work1: '0xd2845aE812Ee42cF024fB4C55c052365792aBd78',
-  },
-  '0xaa36a7': { // Sepolia
-    DAO: '0x39B7522Ee1A5B13aE5580C40114239D4cE0e7D29',
-    Work1: '0xC0Bb36820Ba891DE4ed6D60f75066805361dbeB8',
-  },
-};
+import AvailabilityStakes from './AvailabilityStakes';
 
 const updateList = (list, action) => {
   switch (action.type) {
@@ -40,8 +32,6 @@ const updateList = (list, action) => {
 
 const useList = (initialValue) => useReducer(updateList, initialValue ?? []);
 
-const Web3Context = createContext({});
-
 function App() {
   const {
     sdk, connected, provider, chainId, account, balance,
@@ -78,8 +68,8 @@ function App() {
     };
 
     const fetchReputation = async () => {
-      setReputation(Number(await DAOContract.methods.balanceOf(account).call()));
-      setTotalReputation(Number(await DAOContract.methods.totalSupply().call()));
+      setReputation(await DAOContract.methods.balanceOf(account).call());
+      setTotalReputation(await DAOContract.methods.totalSupply().call());
     };
 
     const fetchPost = async (postIndex) => {
@@ -324,11 +314,11 @@ function App() {
     // Since this is the result we expect from the server, we preemptively set it here.
     // We can let this value be negative -- this would just mean we'll be getting
     // at least one error from the server, and a corrected reputation.
-    setReputation((current) => current - stake);
+    setReputation((current) => current - BigInt(amount));
   }, [DAO, account, setReputation]);
 
-  const stakeAllInFavor = useCallback(async (poolIndex) => {
-    await stake(poolIndex, reputation, true);
+  const stakeHalfInFavor = useCallback(async (poolIndex) => {
+    await stake(poolIndex, reputation / BigInt(2), true);
   }, [stake, reputation]);
 
   const evaluateOutcome = useCallback(async (poolIndex) => {
@@ -378,6 +368,7 @@ function App() {
   }), [
     DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
   ]);
+
   return (
     <Web3Context.Provider value={web3ProviderValue}>
       {!connected && <Button onClick={() => connect()}>Connect</Button>}
@@ -412,10 +403,10 @@ function App() {
               <Col>
                 <Stack>
                   <div>
-                    {`Your REP: ${reputation}`}
+                    {`Your REP: ${reputation?.toString()}`}
                   </div>
                   <div>
-                    {`Total REP: ${totalReputation}`}
+                    {`Total REP: ${totalReputation?.toString()}`}
                   </div>
                   <div>
                     <Button onClick={() => disconnect()}>Disconnect</Button>
@@ -503,8 +494,8 @@ function App() {
                         <td>
                           {!pool.resolved && reputation > 0 && pool.timeRemaining > 0 && (
                           <>
-                            <Button onClick={() => stakeAllInFavor(pool.id)}>
-                              Stake
+                            <Button onClick={() => stakeHalfInFavor(pool.id)}>
+                              Stake 1/2 REP
                             </Button>
                             {' '}
                           </>
@@ -525,15 +516,7 @@ function App() {
                 <div>
                   {`Price: ${work1Price} ETH`}
                 </div>
-                <AvailabilityStakes
-                  DAO={DAO}
-                  work1={work1}
-                  reputation={reputation}
-                  account={account}
-                  chainId={chainId}
-                  setReputation={setReputation}
-                  availabilityStakes={availabilityStakes}
-                />
+                <AvailabilityStakes showActions={false} />
                 <div>
                   <Button onClick={() => requestWork()}>Request Work</Button>
                 </div>
@@ -602,18 +585,14 @@ function App() {
               <div>
                 {`Price: ${work1Price} ETH`}
               </div>
-              <AvailabilityStakes
-                DAO={DAO}
-                work1={work1}
-                reputation={reputation}
-                account={account}
-                chainId={chainId}
-                setReputation={setReputation}
-                availabilityStakes={availabilityStakes}
-              />
+              <AvailabilityStakes />
             </Tab>
             <Tab eventKey="customer" title="Customer">
-              TBD
+              <h2>Work Contract 1</h2>
+              <div>
+                {`Price: ${work1Price} ETH`}
+              </div>
+              <AvailabilityStakes showActions={false} showAmount={false} onlyShowAvailable />
             </Tab>
           </Tabs>
         </>
@@ -622,97 +601,4 @@ function App() {
   );
 }
 
-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>
-    </>
-  );
-}
-
 export default App;

client/src/AvailabilityStakes.jsx

@@ -0,0 +1,130 @@
+import { useCallback, useContext } from 'react';
+import { PropTypes } from 'prop-types';
+import Button from 'react-bootstrap/Button';
+
+import Web3Context from './Web3Context';
+import contracts from './contracts';
+
+const getAvailabilityStatus = (stake) => {
+  if (stake.reclaimed) return 'Reclaimed';
+  if (stake.assigned) return 'Assigned';
+  if (new Date() < new Date(Number(stake.endTime) * 1000)) return 'Available';
+  return 'Expired';
+};
+
+function AvailabilityStakes({ showActions, showAmount, onlyShowAvailable }) {
+  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 / BigInt(2), duration).send({
+      from: account,
+      gas: 999999,
+    });
+    // Note that as with validation pool stakes, we should keep track locally of our reputation
+    setReputation(reputation / BigInt(2));
+  }, [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]);
+
+  const displayData = availabilityStakes.filter((stake) => {
+    if (!onlyShowAvailable) return true;
+    if (getAvailabilityStatus(stake) === 'Available') return true;
+    return false;
+  });
+
+  return (
+    <>
+      {showActions && (
+        <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:
+        {' '}
+        {displayData?.length}
+      </div>
+      <div>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Worker</th>
+              {showAmount && <th>Amount</th>}
+              <th>End Time</th>
+              <th>Status</th>
+              {showActions && <th>Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {displayData?.filter((x) => !!x).map((s) => (
+              <tr key={s.id}>
+                <td>{s.id.toString()}</td>
+                <td>{s.worker.toString()}</td>
+                {showAmount && <td>{s.amount.toString()}</td>}
+                <td>{new Date(Number(s.endTime) * 1000).toLocaleString()}</td>
+                <td>{getAvailabilityStatus(s)}</td>
+                {showActions && (
+                  <td>
+                    {s.currentUserIsWorker() && !s.assigned && !s.reclaimed && (
+                    <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.propTypes = {
+  showActions: PropTypes.bool,
+  showAmount: PropTypes.bool,
+  onlyShowAvailable: PropTypes.bool,
+};
+
+AvailabilityStakes.defaultProps = {
+  showActions: true,
+  showAmount: true,
+  onlyShowAvailable: false,
+};
+
+export default AvailabilityStakes;

client/src/Web3Context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const Web3Context = createContext({});
+
+export default Web3Context;

client/src/contracts.js

@@ -0,0 +1,12 @@
+const contracts = {
+  '0x539': { // Hardhat
+    DAO: '0x76Dfe9F47f06112a1b78960bf37d87CfbB6D6133',
+    Work1: '0xd2845aE812Ee42cF024fB4C55c052365792aBd78',
+  },
+  '0xaa36a7': { // Sepolia
+    DAO: '0x39B7522Ee1A5B13aE5580C40114239D4cE0e7D29',
+    Work1: '0xC0Bb36820Ba891DE4ed6D60f75066805361dbeB8',
+  },
+};
+
+export default contracts;