Add Web UI for POSDAO Staking DApp

[goodsoft]

This is the master PR for POSDAO Staking DApp UI.
Related issues: #2168, blockscout/blockscout-premium#36, #2211.
Individual features are implemented in PRs based on this branch and squash-merged here when ready.

Running instructions

1. Launch posdao-test-setup following the instructions.

2. Launch the Blockscout in a separate console with docker (for Linux use localhost instead of host.docker.internal):

$ git clone -b staking https://github.com/poanetwork/blockscout
$ cd blockscout/docker
$ export ETHEREUM_JSONRPC_VARIANT=parity
$ export ETHEREUM_JSONRPC_HTTP_URL=http://host.docker.internal:8541 # use localhost here for Linux
$ export ETHEREUM_JSONRPC_WS_URL=ws://host.docker.internal:9541 # use localhost here for Linux
$ export ETHEREUM_JSONRPC_TRACE_URL=http://host.docker.internal:8541 # use localhost here for Linux
$ export COIN=DAI
$ export LOGO=/images/dai_logo.svg
$ export POS_STAKING_CONTRACT=0x1100000000000000000000000000000000000001 
$ export NETWORK="(xDAI)"
$ export SUBNETWORK="xDai"
$ make start

3. Open http://localhost:4000/ and navigate to Stakes menu.

MetaMask login instructions

1. Install MetaMask
2. Point MetaMask to Custom RPC with URL http://localhost:8541 instead of Main Ethereum Network
3. Create an empty account to unlock Import UI
4. Import needed accounts one by one from JSON files in ./posdao-test-setup/accounts/keystore. The password is testnetpoa.
   UTC* accounts contain some tokens and are created anew with each posdao-test-setup restart. Others are the same each time, and are actual validators and delegators.
5. Press Login button in BlockScout UI and grant access. Afterwards you can switch between imported accounts, and they will be used for logging into BS UI automatically.

TODO list

Previously implemented features:

• Fetch validators/pools and active pool delegators (Staking pools fetching #1801, Fetch additional data from POSDAO #1916, Calculate staked ratio before insert pools #1957, New tables for staking pools and delegators #2036)
• Fetch current epoch number and length after every block (Fetch additional data from POSDAO #1916)

The list of features implemented in this PR:

• Consolidate POSDAO contract reading #2371 Fetch information from blockchain and staking contracts
  • Fetching inactive delegators #2205 Fetch inactive delegators
  • Fetching inactive delegators #2205 Mark deleted pools and delegators as such
  • Retrieve MIN_{CANDIDATE,DELEGATOR}_STAKE from contract, not from env. #2313 Fetch minimal candidate and delegator stake, token contract address getCandidateMinStake getDelegatorMinStake erc20TokenContract
  • Consolidate POSDAO contract reading #2371 Fetch block reward ratio and candidate likelihood
  • Add update of total supply and balances on each block #2471 Regularly update token supply
• Top bar
  • Update templates and add a list of pools #2215 Render epoch number, block number, next epoch
  • Refresh staking page top panel when new blocks arrive #2407 Update the numbers in real time
  • Implement logging in using MetaMask extension #2408 Login using MetaMask
  • Implement logging in using MetaMask extension #2408 Render currently logged-in wallet
  • Implement logging in using MetaMask extension #2408 Render balance and total staked amount of currently logged-in wallet
  • Make buttons work:
    • Show "Become a Candidate" modal window #2460 Become a Candidate
    • Show "Remove my Poll" modal window #2461 Remove My Pool
• List of staking pools
  • Update templates and add a list of pools #2215 Render list of validators, active or inactive pools
  • Periodically refresh the table with staking pools #2557 Update the list every N (configurable) blocks
  • Show modal window with validator/pool info #2439 Show a popup with a pool information
  • Show "Delegators List" modal window #2498 Show a popup with a list of pool delegators when clicking their count
  • Make buttons work:
    • Show "Move Stake" modal window #2464 Move Stake
    • Add "Withdraw stake" and "Claim withdraw" modal windows #2465 Withdraw
    • Show "Make Stake" modal window #2462 Stake
  • Implement filters for staking pool tables #2558 Make filters work:
    • Show banned only
    • Show only those I staked into
• Compatibility with master
  • Enable fetchers only if staking is enabled
  • Enable Stakes menu only if staking is enabled
  • Rebase
• Replace lorem ipsums with actual texts from design

UPDATE 09.09.2020

TODO list 2

• 1. Master rebased. Compatibility with master branch: Resolve conflicts in Add Web UI for POSDAO Staking DApp #2292
• 2. Double-check: When a candidate has added, the list of active pools doesn't match the list from contract
• 3. Finalize https://github.com/poanetwork/blockscout/issues/2850
• 4. Refactor Hide all controls when staking is forbidden by contract #2651. Instead of hiding buttons, disable them with a hint
• 5. Elaborating of tooltips in the window of candidate/validator
• 6. Add Display of a staking window in UI: when they can stake/withdraw
• 7. Double-check https://github.com/poanetwork/blockscout/issues/2188
• 8. Double-check is ban reason displayed in UI
• 9. When a user (not a pool owner) wants to stake to the inactive pool, warn them Are you sure?. It doesn't make sense to stake to the inactive pool
• 10. Eliminate table header twitching on tabs switching (Loading... flickering before the display of account chosen in MetaMask)
• 11. Double-check: pagination with a big lists
• 12. Repair mobile view
• 13. Delegators window should be refreshed without reloading (or add Refresh button)

[coveralls]

Pull Request Test Coverage Report for Build a555c3827aee84f4dd6f1bb62a6812a5b595dac6-PR-2292

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-14.8%) to 55.189%

---

Totals
Change from base Build 30109ca4bc311406387d3396c17f629b8a33e3ef:	-14.8%
Covered Lines:	452
Relevant Lines:	819

---

💛 - Coveralls

[vbaranov]

I’ve been testing candidate-likelihood branch. Here are the issues, that still were not resolved. Possibly, they were addressed in other branches, I don’t know:

Fixed

Fixed issues:

• 1. I cannot remove my pool. Transaction confirmed but the button to remove is still there. And I can endlessly repeat this procedure. This is not a Nifty Wallet issue. I can reproduce it with MM too.

• 2.
  
  and
  
  are mockups only. There is no logic of filtering.

• 3.
  

• checkmarks are also mockups

• 4. There are no links to delegators screen
  

• 5.
  

• empty button title on hover during the wait of the transaction confirmation

• 6.
  
  transaction is not created. This is a confirmation status. I guess it should be “Transaction is confirmed”

• 7. There is a lot of fish-text.

[goodsoft]

@andogro @varasev @vbaranov @igorbarinov
All pre-existing staking code was refactored, and new PRs were created.
Those PRs will be merged into this one after preliminary review by @saneery.

Until that moment you can test all functionality using staking-latest branch.
Please post comments either in the corresponding open PRs (e.g. comments about moving stakes should go into #2464), or here if the PR is merged already.

Features not pushed yet:

• Delegators list
• Table filters
• Periodic table refresh
• Updating token supply and balances during epoch change
• Lorem ipsums to be replaced by texts from designs in Invision

[saneery]

@goodsoft maybe we should update the description here? #1709
especially, how to run test setup and about new ENV variables

[goodsoft]

I will do that of course, today in the afternoon.

[goodsoft]

This PR (and staking-latest as well) is now rebased onto master, thus making it compatible with Elixir 1.9 and Docker builds.
Running instructions along with updated env variables are added to the PR description.

[andogro]

updated 8.26.2019

Fixed

• 1. Overflowing error message Note: unsure if fixed but not able to replicate with previous conditions, metamask no longer allows transaction to proceed
  Steps to replicate:

  1. Account 0x3838d02a69dc0d13b1f89bc338da73c46d947f77. Does not have Eth for gas
  2. Block~1584
  3. Click on Stake button for Validator Pool 1
  4. Enter 1 in Amount Field and click Stake More
     

• 2. NonDescript error: Internal JSON-RPC error

  1. Same conditions as 1 above. Click withdraw now. This message also appears for various other actions (see video, unsure what conditions are causing this error. I am using wallet 0x..5A which has Eth for gas and attempting to withdraw 1 POS from an active pool that is not a validator <actually this is a validator, just not displayed as such).
     

• 4. Error message followed by Success message

  1. First get error message, immediately followed by success message.
  2. Same with placing stake on inactive validator [see video]
  3. Related to this issue in blockscout/blockscout-premium#36: If Remove My Pool transaction is pending for a long time (e.g., 30 seconds), we should unblock UI and show a warning Your transaction cannot be mined at the moment. Please, try again with the increased gas price or fixed nonce (use Reset Account feature of MetaMask). A transaction can be pending because MetaMask caches address' nonce, so the nonce can be wrong until the user resets their account in MetaMask. This goes for any type of transaction in Staking DApp (not only for Remove My Pool).
     

• 4a. Error message doesn't make sense.
  I received this message when trying to move stake from 1 candidate to another, resulting in less than 1 POS remaining for the candidate I was moving from. If this message is confined to moving stake, I would recommend the following (with 1 POS as placeholder, will take value from getDelegatorMinStake public getters)

"You cannot move funds that result in less than 1 POS of your stake remaining in any pool.
Please readjust the amount to move and try again."

Or, if this error message occurs at other times, perhaps something like:

"The minimum stake you can place per pool is 1 POS. All pools you stake into should contain at least this amount"

• 3. BigNum error NOTE: generic "your transaction cannot be mined at the moment" message has replaced previous message.

  1. Click Withdraw
  2. Do not enter anything in Amount Field
  3. Click Order Withdrawal button
     

• 5. Possibly related to Update the list every N (configurable) blocks:

  • 5a. Validator in current staking epoch does not display in Validators Tab, displays in active tab
    
    

  This causes additional issues when Validator is not properly marked. In this case, the validator
  0xb916–0d96c9 is not seen as such, and the UI shows the ability to Move stake. If
  attempted, error occurs during the transaction.

  

  • 5b. Validator removed using Remove my Pool function is listed in Inactive tab, but still has Validator checkmark. Banned Pool also has Validator checkmark.
    

• 6. Stakes Ratio display for Inactive Pool incorrect display. Stakes Ratio and # of times as Validator were incorrect in this example.
  

• 7. Withdrawal buttons should be selectively activated. Both buttons are currently active for both validators and other pools. Only order withdraw should be active for current validator, and withdraw now active for non-validating pools.

• 8. Once the minimum stake requirements are reached, delegators/validators should be able to add incrementally to the stake. Currently, a 1 POS minimum is set for every staking event.
  

• 11. Banned Validators misidentified:

  • a. In Epoch 2, added in 2 new active candidates using first 2 UTC addresses - they were immediately checked as validators in UI
    

  • c. In Epoch 3 UI, Validator checkmark removed for one of them... 0x98..80
    

• e. Malfunctioning validators are correctly moved to to Inactive pools, however banned status is shown for current validators, who remain in validators tab.
  
  

• 12. Withdraw button showing for wrong address. unable to replicate with similar test.
  I am logged into metamask with address # 2 on inactives list, however, withdrawal button is showing for address (Problem) POA explorer needs to have its own parity node #1. Does not allow withdrawal process. When I login with account Production release  #3 on list, the withdraw button is gone. Log back in with Production release #2 and it reappears.
  

• 15. No ability to withdraw partial or full stake as a validator. There is no withdraw button when logged in as an active validator (for example with 0xb916E7E1f4bcb13549602eD042d36746fD0d96C9) - only the remove my pool option. I should be able to order a withdrawal up to the minimum amount. In addition, I should be able to order withdraw of my entire stake amount according to whitepaper (9.2.10), resulting in removal from the subsequent set. "The validator can order a withdrawal of their entire stake amount using the StakingAuRa.orderWithdraw​ function (see ​9.2.8​). In this case, the validator will have zero real balance in their own pool at the beginning of the next staking epoch and the pool will not be selected by the ​ValidatorSetBase._newValidatorSet internal function."

• 10. No ability to claim after a pool is removed <same as comment 28 from Viktor below>: When I click remove pool, transaction is processed and pool is moved to Inactive Pools list immediately and staked amount in header is set to 0 (note: this was for a validator 0xb916E7E1f4bcb13549602eD042d36746fD0d96C9, but the address was listed in Active Pools tab rather than Validators, so maybe that’s why this occurred immediately on the UI?)
  When the epoch was over, the validator was removed from the set. However, the withdraw/claim functionality did not populate, so there was no way to claim the previously staked amount.

• 9. Claim process artifacts exist after claim is complete (persist on page refresh). I scheduled a withdrawal and claimed. After claim was processed, the withdraw button is still shown, and I was still directed through the claim process which showed previous claim amount. Error occurred once I tried to claim again.
  

• 13. Become A Candidate button is active when logged into MetaMask with a banned address, or when POS amount is less than the minimum candidate stake. Should not be active for banned address.

• 20. Feature Request: I am advocating for a separate Claim button rather than tying it to Withdraw. It is confusing as a user. When a claim is available, the claim button should display. Withdraw can then handle only withdrawal and order for withdrawal functionality, and we would no longer need modal below.
  
  

• 19. Need to truncate/round/ limit # of decimals for allowed withdrawal/deposit in modal as well as display. If too many decimals impacts display in several areas.
  
  

• 21. Order withdrawal amounts are no longer dynamic. If I place an order to withdraw, I do not have the option to alter that order amount during the staking window of the current epoch. I should have the ability to increase or decrease (by using a "-" in front of the amount) my order withdrawal during the current epoch.

• 22. Become a candidate button should allow smaller minimum stake on second run through.
  1. Become a candidate
  2. Remove Pool
  3. Become a candidate again. Modal does not accept an amount less than 1POS, although any amount should reinstate the active pool as long as total pool amount > 1 POS. This is seen through the "stake button" functionality, where the removed pool is returned to active state with StakingAuRa.stake functionality.

Current issues:

New:

• 14. Related to Lorem Ipsum, considering that multiple chains may be launched, 'xDai' and any terms directly related specifically to the xDai chain should be populated dynamically to allow for future compatibility.

• 16. Remove my Pool functionality needs additional instruction in modal. It is confusing for the user what happens here - recommend adding this text (probably under buttons):

  Note: When you remove your pool, it will move immediately to the inactive list. However, if you are a current validator, you will finish your term in the current epoch. You can withdraw the stake from your inactive pool once the current staking epoch is complete.

  

• 17. Improve move stake modal wording: When Lorem Ipsum is added, add additional content to clarify parameters:

  Stake placed on a candidate pool or placed on an active validator pool during the current staking epoch can be moved from one pool to another. Active stake (stake currently in use by the validator set) cannot be moved, and stake cannot be moved to an inactive candidate pool.

  To re-delegate active stake: order a withdrawal, claim the amount on the next staking epoch, and stake the amount on a different pool.

• 18. Feature Request: Add 'Get Started' button to top banner. This will open a modal with links (links are TBD) to forum posts. First draft of text for modal:

  Staking with the xDai Stable Chain
  Welcome to the first Ethereum-based Delegated Proof of Stake protocol! You can help protect the network and increase decentralization while earning block rewards based on your stake. To get started, you will need a few things:

  1. Acquire $DPOS & xDai
     You will need $DPOS for staking and a bit of xDai for staking transactions (such as placing, moving or withdrawing stake).

  2. Connect a Web3 enabled wallet such as Metamask or Nifty Wallet
     Use the custom RPC option to connect to the xDai Stable Chain with your Ethereum address that contains $DPOS and xDAI.

  3. To participate in staking and earn block & bridge rewards, you can either delegate stake to current candidates or become a candidate yourself.

  4. Learn more about moving stake, withdrawing stake, claiming stake, the staking window, and other protocol features on the xDai Staking Forum.

8.26.19

• 23. Feature Request Banned stake not differentiated in header. We should consider how to display banned stake. In this scenario, I ordered 1.3 for withdrawal from a validator. The validator was banned in the next epoch, so this stake will not be available for 3 months. The staked amount is also unavailable for the next 3 months (separate ban). Unsure best way to display, and way to visually separate banned stake from active/pending stake.
  

• 24. Feature Request Closed staking window messaging. Icons disappear when staking window is closed. This prevents user actions, but is confusing to user. Either a message in the header like..."Staking Window Closed, no actions currently available. Staking actions will resume in XXX Blocks." or messaging where the icons are located when they disappear will provide users with needed information.

[varasev]

The only caveat for the commit 372a646 is that the loadPage function uses path variable in the line store.dispatch({ type: 'START_REQUEST', path }), but loadItemsNext/loadItemsPrev didn't use it for the same call: store.dispatch({ type: 'START_REQUEST' }).

[vbaranov]

Thanks for noticing that. Yes, I returned to the state for loadItemsPrev and loadItemsNext as it was introduced in staking branch b7ccf6e#diff-a4235e34df60ac595d5ee65de1b587d513ed667f74d08c747531c52e95beeff0. I don't see issues with pagination with this implementation.

[varasev]

Hi @vbaranov I noticed that the issue with block delays and skips now occurs in production. Is the current implementation from master really using a direct networking connection to the archive node to catch new blocks?