探究Compound治理及构建治理界面

let requestParameters = {
  "page_size": 100,            // number of results in a page
  "network": "ropsten",        // mainnet, ropsten
  "order_by": "balance",       // "votes", "balance", "proposals_created"
  // "page_number": 1,         // see subsequent response's `pagination_summary` to specify the next page
  // addresses: ['0x123'],     // array of addresses to filter on
  // with_history: true,       // boolean, returns a list of transaction history for the accounts
};

requestParameters = '?' + new URLSearchParams(requestParameters).toString();

fetch(`https://api.compound.finance/api/v2/governance/accounts${requestParameters}`)
.then((response) => response.json())
.then((result) => {
  let accounts = result.accounts;
  console.log(accounts);
  let holders = [];
  accounts.forEach((account) => {
    holders.push({
      "address": account.address,
      "balance": parseFloat(account.balance).toFixed(4),
      "delegate": account.delegate.address == 0 ? 'None' : account.delegate.address
    });
  });

  holderListContainer.innerHTML = holderListTemplate(holders);
});

[
  {
    "address": "0xb61c5971d9c0472befceffbe662555b78284c307",
    "balance": "200000.0000",
    "delegate": "0xb61c5971d9c0472befceffbe662555b78284c307",
  }
]

// Ropsten COMP Contract
const compAddress = '0x1fe16de955718cfab7a44605458ab023838c2793';
const compAbi = window.compAbi;
const comp = new web3.eth.Contract(compAbi, compAddress);

(async () => {
  const delegations = await comp.getPastEvents('DelegateVotesChanged', {
    fromBlock: 0,
    toBlock: 'latest'
  });

  const delegateAccounts = {};

  delegations.forEach(e => {
    const { delegate, newBalance } = e.returnValues;
    delegateAccounts[delegate] = newBalance;
  });

  const delegates = [];
  Object.keys(delegateAccounts).forEach((account) => {
    const voteWeight = +delegateAccounts[account];
    if (voteWeight === 0) return;
    delegates.push({
      delegate: account,
      vote_weight: voteWeight
    });
  });

  delegates.sort((a, b) => {
    return a.vote_weight < b.vote_weight ? 1 : -1;
  });

  delegates.forEach(d => {
    d.vote_weight = (100 * ((d.vote_weight / 1e18) / 10000000)).toFixed(6) + '%';
  });

  console.log(delegates);

  delegateListContainer.innerHTML = delegateListTemplate(delegates);
})();

[
  {
    "delegate": "0xb61c5971d9c0472befceffbe662555b78284c307",
    "vote_weight": "2.000000%"
  }
]

let requestParameters = {
  "network": "ropsten",   // mainnet, ropsten
  "page_size": 100,       // integer, defaults to 10
  // "proposal_ids": 1,   // an integer ID or array of IDs
  // "state": "active",   //  "pending", "active", "canceled", "defeated", "succeeded", "queued", "expired", "executed"
  // "with_detail": true, // boolean
  // "page_number": 1,    // see subsequent response's `pagination_summary` to specify the next page
};

requestParameters = '?' + new URLSearchParams(requestParameters).toString();

fetch(`https://api.compound.finance/api/v2/governance/proposals${requestParameters}`)
  .then((response) => response.json())
  .then((result) => {
    console.log(result);
    const proposals = result.proposals || [];
    proposals.forEach((p) => {
      p.state = p.states[p.states.length-1].state
      p.for_votes = parseFloat(p.for_votes).toFixed(2);
      p.against_votes = parseFloat(p.against_votes).toFixed(2);
    });
    proposalListContainer.innerHTML = proposalItemTemplate(proposals);
  });

[
  {
    "against_votes": "601000.00",
    "description": "10 BTC is actually a decent amount. Boop!",
    "for_votes": "835000.00",
    "id": 18,
    "title": "Reduce WBTC reserves by 10!",
    "state": "succeeded"
  }
]

// Ropsten Governor Alpha Contract
const governanceAddress = '0xc5bfed3bb38a3c4078d4f130f57ca4c560551d45';
const governanceAbi = window.governanceAbi;
const gov = new web3.eth.Contract(governanceAbi, governanceAddress);

(async () => {
  const voteCastEvents = await gov.getPastEvents('VoteCast', {
    fromBlock: 0,
    toBlock: 'latest'
  });

  let submittedBallots = voteCastEvents;
  let formattedBallots = [];
  submittedBallots.forEach((ballot) => {
    const { voter, support, votes, proposalId } = ballot.returnValues;
    if (proposalId == id) {
      formattedBallots.push({
        blockNumber: ballot.blockNumber,
        address: voter,
        support: support ? 'In Favor' : 'Against',
        votes: (parseFloat(votes) / 1e18).toFixed(2),
      });
    }
  });

  formattedBallots.reverse();
  console.log(formattedBallots);

  ballotListContainer.innerHTML = ballotListTemplate(formattedBallots);
})();

[
  {
    "address": "0x9687eb285292cba14a60a0c77dfd36dd95b93889",
    "support": "In Favor",
    "votes": "8500000.00"
  }
]

// Ropsten COMP Contract
compAddress = '0x1fe16de955718cfab7a44605458ab023838c2793';
compAbi = window.compAbi;
comp = new web3.eth.Contract(compAbi, compAddress);

let currentDelegate;
try {
  currentDelegate = await comp.methods.delegates(myAccount).call();
} catch (e) {
  currentDelegate = 0;
}

delegate.innerText = currentDelegate == 0 ? 'None' : currentDelegate;

submit.onclick = async () => {
  const delegateTo = newDelegate.value;

  if (!delegateTo) {
    alert('Invalid address to delegate your votes.');
    return;
  }

  loader.classList.remove('hidden');
  try {
    const tx = await comp.methods.delegate(delegateTo).send({ from: myAccount });
    console.log(tx);
    alert(`Successfully Delagated to ${delegateTo}`);
    window.location.reload();
  } catch(e) {
    console.error(e);
    alert(e.message);
  }
  loader.classList.add('hidden');
};

// Ropsten Governor Contract
governanceAddress = '0xc5bfed3bb38a3c4078d4f130f57ca4c560551d45';
governanceAbi = window.governanceAbi;
gov = new web3.eth.Contract(governanceAbi, governanceAddress);

// Add a list of active proposals to the UI
getProposals();

// Get my account's vote weight
getMyVoteWeight(myAccount);

submit.onclick = async () => {
  // An active proposal needs to be selected in the UI
  if (proposalSelector.value < 1) {
    alert('Select a proposal to vote in.');
    return;
  }

  // A vote choice needs to be selected in the UI
  if (!_for.checked && !against.checked) {
    alert('Select a vote option.');
    return;
  }

  const proposal = proposalSelector.value;
  const vote = _for.checked ? true : false;

  loader.classList.remove('hidden');
  try {
    const tx = await gov.methods.castVote(proposal, vote).send({ from: myAccount });
    console.log(tx);
    alert(`Successfully voted ${vote ? 'for' : 'against'} Proposal ${proposal}`);
    window.location.reload();
  } catch(e) {
    console.error(e);
    alert(e.message);
  }
  loader.classList.add('hidden');
};