dgf-prototype/client/src/App.jsx

import {
  useCallback, useEffect, useReducer, 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';

const contracts = {
  '0x539': { // Hardhat
    DAO: '0x635F46Ea745a14431B27c5dd5838306Be289B747',
    Work1: '0xEAefe601Aad7422307B99be65bbE005aeA966012',
  },
  '0xaa36a7': { // Sepolia
    DAO: '0x38AE4ABD47B10f6660CD70Cc8FF3401341E13d9e',
    Work1: '0x358A07B26F4c556140872ecdB69c58e8807E7178',
  },
};

const getPoolStatus = (pool) => {
  if (pool.resolved) {
    return pool.outcome ? 'Accepted' : 'Rejected';
  }
  return pool.timeRemaining > 0 ? 'In Progress' : 'Ready to Evaluate';
};

const getRequestStatus = (request) => {
  switch (Number(request.status)) {
    case 0:
      return 'Requested';
    case 1:
      return 'Evidence Submitted';
    case 2:
      return 'Approval Submitted';
    case 3:
      return 'Complete';
    default:
      return 'Unknown';
  }
};

const updateList = (list, action) => {
  switch (action.type) {
    case 'update': {
      const newList = [...list];
      newList[Number(action.item.id)] = action.item;
      return newList;
    }
    case 'refresh':
    default:
      return [];
  }
};

function App() {
  const {
    sdk, connected, provider, chainId, account, balance,
  } = useSDK();

  const [DAO, setDAO] = useState();
  const [work1, setWork1] = useState();
  const [work1Price, setWork1Price] = useState();
  const [balanceEther, setBalanceEther] = useState();
  const [reputation, setReputation] = useState();
  const [totalReputation, setTotalReputation] = useState();
  const [posts, dispatchPost] = useReducer(updateList, []);
  const [validationPools, dispatchValidationPool] = useReducer(updateList, []);
  const [availabilityStakes, dispatchAvailabilityStake] = useReducer(updateList, []);
  const [workRequests, dispatchWorkRequest] = useReducer(updateList, []);

  // const watchReputationToken = useCallback(async () => {
  //   await provider.request({
  //     method: 'wallet_watchAsset',
  //     params: {
  //       type: 'ERC20',
  //       options: {
  //         address: DAOAddress,
  //       },
  //     },
  //   });
  // }, [provider]);

  // In this effect, we initialize everything and add contract event listeners.
  // TODO: Refactor -- make separate, functional components?
  useEffect(() => {
    if (!provider || !chainId || !account || balance === undefined) return;
    if (!contracts[chainId]) return;

    console.log('INITIALIZATION EFFECT', {
      provider, chainId, account,
    });

    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);

    /* -------------------------------------------------------------------------------- */
    /* --------------------------- BEGIN FETCHERS ------------------------------------- */
    /* -------------------------------------------------------------------------------- */

    const fetchPrice = async () => {
      const fetchedPrice = await work1Contract.methods.price().call();
      setWork1Price(web3.utils.fromWei(fetchedPrice, 'ether'));
    };

    const fetchReputation = async () => {
      setReputation(Number(await DAOContract.methods.balanceOf(account).call()));
      setTotalReputation(Number(await DAOContract.methods.totalSupply().call()));
    };

    const fetchPost = async (postIndex) => {
      const p = await DAOContract.methods.posts(postIndex).call();
      p.id = Number(p.id);
      dispatchPost({ type: 'update', item: p });
      return p;
    };

    const fetchPosts = async () => {
      const count = await DAOContract.methods.postCount().call();
      const promises = [];
      dispatchPost({ type: 'refresh' });
      for (let i = 0; i < count; i += 1) {
        promises.push(fetchPost(i));
      }
      await Promise.all(promises);
    };

    const fetchValidationPool = async (poolIndex) => {
      const pool = await DAOContract.methods.validationPools(poolIndex).call();
      pool.id = Number(pool.id);
      pool.timeRemaining = new Date(Number(pool.endTime) * 1000) - new Date();
      pool.status = getPoolStatus(pool);
      dispatchValidationPool({ type: 'update', item: pool });

      // When remaing time expires, we want to update the status for this pool
      if (pool.timeRemaining > 0) {
        setTimeout(() => {
          pool.timeRemaining = 0;
          pool.status = getPoolStatus(pool);
          dispatchValidationPool({ type: 'update', item: pool });
        }, pool.timeRemaining);
      }
    };

    const fetchValidationPools = async () => {
      // TODO: Pagination
      // TODO: Memoization
      // TODO: Caching
      const count = await DAOContract.methods.validationPoolCount().call();
      const promises = [];
      dispatchValidationPool({ type: 'refresh' });
      for (let i = 0; i < count; i += 1) {
        promises.push(fetchValidationPool(i));
      }
      await Promise.all(promises);
    };

    const fetchAvailabilityStake = async (stakeIndex) => {
      const s = await work1Contract.methods.stakes(stakeIndex).call();
      Object.assign(s, {
        id: Number(stakeIndex),
        currentUserIsWorker: () => s.worker.toLowerCase() === account.toString().toLowerCase(),
        timeRemaining: new Date(Number(s.endTime) * 1000) - new Date(),
      });
      dispatchAvailabilityStake({ type: 'update', item: s });
      if (s.timeRemaining > 0) {
        setTimeout(() => {
          s.timeRemaining = 0;
          dispatchAvailabilityStake({ type: 'update', item: s });
        }, s.timeRemaining);
      }
      return s;
    };

    const fetchAvailabilityStakes = async () => {
      const count = await work1Contract.methods.stakeCount().call();
      const promises = [];
      dispatchAvailabilityStake({ type: 'refresh' });
      for (let i = 0; i < count; i += 1) {
        promises.push(fetchAvailabilityStake(i));
      }
      await Promise.all(promises);
    };

    const fetchWorkRequest = async (requestIndex) => {
      const r = await work1Contract.methods.requests(requestIndex).call();
      Object.assign(r, {
        id: Number(requestIndex),
        statusString: getRequestStatus(r),
        feeEther: web3.utils.fromWei(r.fee, 'ether'),
        currentUserIsCustomer: () => r.customer.toLowerCase()
            === account.toString().toLowerCase(),
      });
      dispatchWorkRequest({ type: 'update', item: r });
      return r;
    };

    const fetchWorkRequests = async () => {
      const count = await work1Contract.methods.requestCount().call();
      const promises = [];
      dispatchWorkRequest({ type: 'refresh' });
      for (let i = 0; i < count; i += 1) {
        promises.push(fetchWorkRequest(i));
      }
      await Promise.all(promises);
    };

    /* -------------------------------------------------------------------------------- */
    /* --------------------------- END FETCHERS --------------------------------------- */
    /* -------------------------------------------------------------------------------- */

    fetchPrice();
    fetchReputation();
    fetchPosts();
    fetchValidationPools();
    fetchAvailabilityStakes();
    fetchWorkRequests();

    setWork1(work1Contract);
    setDAO(DAOContract);

    DAOContract.events.PostAdded({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: post added', event);
      fetchPost(event.returnValues.postIndex);
    });

    DAOContract.events.ValidationPoolInitiated({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: validation pool initiated', event);
      fetchValidationPool(event.returnValues.poolIndex);
    });

    DAOContract.events.ValidationPoolResolved({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: validation pool resolved', event);
      fetchReputation();
      fetchValidationPool(event.returnValues.poolIndex);
    });

    work1Contract.events.AvailabilityStaked({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: availability staked', event);
      fetchAvailabilityStake(event.returnValues.stakeIndex);
      fetchReputation();
    });

    work1Contract.events.WorkAssigned({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: work assigned', event);
      const r = fetchWorkRequest(event.returnValues.requestIndex);
      fetchAvailabilityStake(r.stakeIndex);
    });

    work1Contract.events.WorkEvidenceSubmitted({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: work evidence submitted', event);
      fetchWorkRequest(event.returnValues.requestIndex);
    });

    work1Contract.events.WorkApprovalSubmitted({ fromBlock: 'latest' }).on('data', (event) => {
      console.log('event: work approval submitted', event);
      fetchWorkRequest(event.returnValues.requestIndex);
    });
  }, [provider, account, chainId, balance, setReputation, dispatchAvailabilityStake,
    dispatchValidationPool, dispatchWorkRequest]);

  /* -------------------------------------------------------------------------------- */
  /* --------------------------- END MAIN INITIALIZION EFFECT ----------------------- */
  /* -------------------------------------------------------------------------------- */

  useEffect(() => {
    if (!provider || balance === undefined) return;
    const web3 = new Web3(provider);
    setBalanceEther(web3.utils.fromWei(balance, 'ether'));
  }, [provider, balance]);

  const connect = async () => {
    try {
      await sdk?.connect();
    } catch (err) {
      console.warn('failed to connect..', err);
    }
  };

  const disconnect = async () => {
    try {
      sdk?.terminate();
    } catch (err) {
      console.warn('failed to disconnect..', err);
    }
  };

  /* -------------------------------------------------------------------------------- */
  /* --------------------------- BEGIN UI ACTIONS ----------------------------------- */
  /* -------------------------------------------------------------------------------- */

  const addPost = useCallback(async () => {
    await DAO.methods.addPost(account).send({
      from: account,
      gas: 1000000,
    });
  }, [DAO, account]);

  const initiateValidationPool = useCallback(async (postIndex, poolDuration) => {
    await DAO.methods.initiateValidationPool(postIndex, poolDuration ?? 3600).send({
      from: account,
      gas: 1000000,
      value: 100,
    });
  }, [DAO, account]);

  const stake = useCallback(async (poolIndex, amount, inFavor) => {
    console.log(`Attempting to stake ${amount} ${inFavor ? 'for' : 'against'} pool ${poolIndex}`);
    await DAO.methods.stake(poolIndex, amount, inFavor).send({
      from: account,
      gas: 999999,
    });

    // 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);
  }, [DAO, account, setReputation]);

  const stakeAllInFavor = useCallback(async (poolIndex) => {
    await stake(poolIndex, reputation, true);
  }, [stake, reputation]);

  const evaluateOutcome = useCallback(async (poolIndex) => {
    await DAO.methods.evaluateOutcome(poolIndex).send({
      from: account,
      gas: 1000000,
    });
  }, [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'));
    await work1.methods.requestWork().send({
      from: account,
      gas: 1000000,
      value: priceWei,
    });
  }, [provider, work1, account, work1Price]);

  const submitWorkEvidence = useCallback(async (requestIndex) => {
    await work1.methods.submitWorkEvidence(requestIndex).send({
      from: account,
      gas: 1000000,
    });
  }, [work1, account]);

  const submitWorkApproval = useCallback(async (requestIndex) => {
    await work1.methods.submitWorkApproval(requestIndex, true).send({
      from: account,
      gas: 1000000,
    });
  }, [work1, account]);

  const submitWorkDisapproval = useCallback(async (requestIndex) => {
    await work1.methods.submitWorkApproval(requestIndex, false).send({
      from: account,
      gas: 1000000,
    });
  }, [work1, account]);

  /* -------------------------------------------------------------------------------- */
  /* --------------------------- END UI ACTIONS ------------------------------------- */
  /* -------------------------------------------------------------------------------- */

  return (
    <>
      {!connected && <Button onClick={() => connect()}>Connect</Button>}

      {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>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>
                      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
                          </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={() => 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>
            <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()
                          && Number(request.status) === 1 && (
                            <>
                              <Button onClick={() => submitWorkApproval(request.id)}>
                                Submit Approval
                              </Button>
                              <Button onClick={() => submitWorkDisapproval(request.id)}>
                                Submit Dispproval
                              </Button>
                            </>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </>
  );
}

export default App;