diff --git a/client/src/App.jsx b/client/src/App.jsx index bb39d90..fad5d2e 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -19,28 +19,6 @@ const contracts = { }, }; -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': { @@ -54,6 +32,8 @@ const updateList = (list, action) => { } }; +const useList = (initialValue) => useReducer(updateList, initialValue ?? []); + function App() { const { sdk, connected, provider, chainId, account, balance, @@ -65,22 +45,10 @@ function App() { 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]); + const [posts, dispatchPost] = useList(); + const [validationPools, dispatchValidationPool] = useList(); + const [availabilityStakes, dispatchAvailabilityStake] = useList(); + const [workRequests, dispatchWorkRequest] = useList(); // In this effect, we initialize everything and add contract event listeners. // TODO: Refactor -- make separate, functional components? @@ -88,10 +56,6 @@ function App() { 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); @@ -128,6 +92,12 @@ function App() { }; const fetchValidationPool = async (poolIndex) => { + const getPoolStatus = (pool) => { + if (pool.resolved) { + return pool.outcome ? 'Accepted' : 'Rejected'; + } + return pool.timeRemaining > 0 ? 'In Progress' : 'Ready to Evaluate'; + }; const pool = await DAOContract.methods.validationPools(poolIndex).call(); pool.id = Number(pool.id); pool.timeRemaining = new Date(Number(pool.endTime) * 1000) - new Date(); @@ -185,6 +155,20 @@ function App() { }; const fetchWorkRequest = async (requestIndex) => { + const getRequestStatus = (request) => { + switch (Number(request.status)) { + case -1: + return 'Requested'; + case 0: + return 'Evidence Submitted'; + case 1: + return 'Approval Submitted'; + case 2: + return 'Complete'; + default: + return 'Unknown'; + } + }; const r = await work1Contract.methods.requests(requestIndex).call(); Object.assign(r, { id: Number(requestIndex), @@ -259,7 +243,7 @@ function App() { fetchWorkRequest(event.returnValues.requestIndex); }); }, [provider, account, chainId, balance, setReputation, dispatchAvailabilityStake, - dispatchValidationPool, dispatchWorkRequest]); + dispatchValidationPool, dispatchWorkRequest, dispatchPost]); /* -------------------------------------------------------------------------------- */ /* --------------------------- END MAIN INITIALIZION EFFECT ----------------------- */ @@ -271,25 +255,37 @@ function App() { setBalanceEther(web3.utils.fromWei(balance, 'ether')); }, [provider, balance]); - const connect = async () => { + /* -------------------------------------------------------------------------------- */ + /* --------------------------- BEGIN UI ACTIONS ----------------------------------- */ + /* -------------------------------------------------------------------------------- */ + + const connect = useCallback(async () => { try { await sdk?.connect(); } catch (err) { console.warn('failed to connect..', err); } - }; + }, [sdk]); - const disconnect = async () => { + const disconnect = useCallback(async () => { try { sdk?.terminate(); } catch (err) { console.warn('failed to disconnect..', err); } - }; + }, [sdk]); - /* -------------------------------------------------------------------------------- */ - /* --------------------------- BEGIN UI ACTIONS ----------------------------------- */ - /* -------------------------------------------------------------------------------- */ + // const watchReputationToken = useCallback(async () => { + // await provider.request({ + // method: 'wallet_watchAsset', + // params: { + // type: 'ERC20', + // options: { + // address: DAOAddress, + // }, + // }, + // }); + // }, [provider]); const addPost = useCallback(async () => { await DAO.methods.addPost(account).send({ @@ -427,6 +423,7 @@ function App() { ID Author + Sender Actions @@ -435,6 +432,7 @@ function App() { {post.id.toString()} {post.author} + {post.sender} Initiate Validation Pool {' '}