#606 | Edit and revoke allowances

[ezra-sg]

Fixes #606

Description

This PR adds the ability to edit and batch revoke allowances. It also updates the contract store to prevent non-contract addresses from being saved as contracts incorrectly.

note: the toggle to show cancelled approvals has been temporarily removed from the page, as the indexer does not yet support showing cancelled approvals. there is a separate issue to fix that, #719

note: there are 3 different kinds of approvals to be aware of (this is also commented in the code for future reference):

1. ERC20 approvals, which consist of a spender address and an amount which that spender can spend on your behalf. This is done using the approve method
2. ERC721 single approvals. For these, you approve an operator address to send a particular ERC721 NFT on your behalf. For each token ID, there can only be one operator approved at a time; approving a new operator will automatically 'revoke' the previous operator's approval. To revoke without adding a new operator, the convention is to approve the zero address as the operator, 0x0000...0000, as there is no actual 'revoke' method to call. This is done using the approve method
3. NFT Collection approvals. These can be split into 2 categories, ERC721 and ERC1155, however both operate the same way, by calling the setApprovalForAll method, which exists for both ERC721 and ERC1155 contracts. When calling setApprovalForAll, you provide an operator address and a boolean. If the boolean is true, the operator is allowed to send all token IDs in that collection which are owned by you, on your behalf

Test scenarios

Setup

• checkout and run the branch locally on mainnet: git fetch --all && git checkout 606-revoke-allowances-api-integration && echo 'NETWORK="mainnet"' > .env && yarn dev
• go to http://localhost:8081
• log in using team account 0x3783...8949
• go to the Approvals tab
• set the table to show 100 rows so you can see all of the approvals on the account
  • you should see a bunch of approvals, including at least: 1 ERC20 approval (icon is a token icon), 1 NFT collection approval (icon is a stack of 3 NFTs), and 1 single ERC721 approval (icon is a single NFT)
  • if you do not see the approvals listed above, add them:
    1. go to the contract page for a token/NFT contract on teloscan (for ERC20, you can find this from the Wallet tab > click overflow menu on a token > click "Contract" ; for erc721 and erc1155, you can do this by going to the NFT inventory page, clicking on an NFT, and then clicking the "Collection" link)
    2. on the teloscan page for the contract, go to the Contract tab
    3. make sure you are logged in on teloscan as the team account
    4. if the contract is verified (green checkmark next to the contract name at the top), click the Write tab. If it is not verified, click the appropriate ABI (ERC20/ERC721/ERC1155) and then click the Write tab
    5. add approvals
       • to add an approval for ERC20, open the approve dropdown, enter an address for the spender (I suggest you choose an address owned by you, or a known contract like Staked TLOS which will not abuse the approval) and an amount, then click Write and approve the tx.
       • for a single ERC721 approval, open the approve dropdown, enter an address like with ERC20, enter a token ID (which can be gotten from the NFT detail page on the Wallet app), and click Write and approve the TX.
       • for entire collection approvals, open the setApprovalForAll dropdown, fill an address and set approved = true, then click Write and approve the tx

Edit allowances (note: complete these steps on desktop and mobile walletconnect with both MetaMask & SafePal)

• locate an ERC20 allowance row
• click the edit pencil icon in the row (take note of the current allowance before clicking)
  • the edit allowance modal should pop up
  • the selected option should reflect the existing allowance; if the allowance is a number, the Custom radio should be selected with that number filled. If the allowance is Unlimited, that radio should be selected, and the Custom input should be disabled and showing 0
• type in an allowance greater than (2^256)-1, e.g. 9,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999,999
  • you should see an error under the input saying the number is too big
  • the submit button should be disabled
• type in another amount
• click Confirm
  • your wallet should pop a transaction
• cancel the transaction
  • you should see a "you cancelled the action" notification
• click Confirm again
• approve the tx in your wallet
  • a notification should pop saying that {symbol} allowance is being updated
  • the modal should show a loading state until the tx completes
  • after the tx is successful, the modal should close and the table should show the correct new allowance
• now locate a single ERC721 allowance (an allowance which shows a single NFT icon)
• click the edit icon for that row
  • a modal should pop showing 2 options, Allowed and Not Allowed
  • the correct option (Allowed) should be selected already
  • the Confirm button should be disabled
  • the text in the modal should show Collection Name #{tokenId} as well as some text about single ERC721 approvals
• click Not Allowed
  • the Confirm button should become enabled
• click Confirm
  • your wallet should pop a transaction
• cancel the transaction
  • you should see a "you cancelled the action" notification
• click Confirm again
• approve the tx in your wallet
  • you should see a notification saying the approval is being updated for Collection Name #{tokenId} and the operator address
  • the modal should show a loading state until the tx completes
  • after the tx is successful, the modal should close and the table should no longer show that allowance
• now locate an ERC721 collection row, such as Telosians
• click the edit icon for that row
  • a modal should pop showing 2 options, Allowed and Not Allowed
  • the correct option (Allowed) should be selected already
  • the Confirm button should be disabled
  • the text in the modal should show {collection name} (Entire Collection)
• click Not Allowed
  • the Confirm button should become enabled
• click Confirm
  • your wallet should pop a transaction
• cancel the transaction
  • you should see a "you cancelled the action" notification
• click Confirm again
• approve the tx in your wallet
  • you should see a notification saying the approval is being updated for {Collection Name} and the operator address
  • the modal should show a loading state until the tx completes
  • after the tx is successful, the modal should close and the table should no longer show that allowance
• now locate an ERC1155 collection row, such as "Telos Arcade Token"
• click the edit icon for that row
  • a modal should pop showing 2 options, Allowed and Not Allowed
  • the correct option (Allowed) should be selected already
  • the Confirm button should be disabled
  • the text in the modal should show {collection name} (Entire Collection)
• click Not Allowed
  • the Confirm button should become enabled
• click Confirm
  • your wallet should pop a transaction
• cancel the transaction
  • you should see a "you cancelled the action" notification
• click Confirm again
• approve the tx in your wallet
  • you should see a notification saying the approval is being updated for {Collection Name} and the operator address
  • the modal should show a loading state until the tx completes
  • after the tx is successful, the modal should close and the table should no longer show that allowance

Batch Revoke

• with no rows selected, the Revoke Selected button above the table should be disabled
• select multiple rows on the approvals table
  • the Revoke Selected button should become enabled
• click the Revoke Selected button
  • a modal should pop showing a message like "Revoking X allowances (Y Remaining)" where X and Y are both the amount of rows you selected
  • there should also be some text explaining the revoke process and a Cancel button
  • your wallet should pop a transaction
• Reject the transaction
  • you should see a "you cancelled the action" notification
  • after a few seconds, the modal should dismiss itself
• select multiple rows on the approvals table again
• click the Cancel button
  • the modal should close
• select multiple rows on the approvals table, making sure to select at least one each of ERC20, single ERC721, ERC721 Collection, and ERC1155 collection
• approve the transactions as they come up
  • the text in the modal should update each time you approve a TX so that "Y Remaining" reflects the number of approvals already approved
  • once all are approved, the modal should go into a loading state
  • after a few seconds, the modal should close
  • when the modal is closed, those revoked rows should disappear from the table

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have cleaned up the code in the areas my change touches
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings
• I have removed any unnecessary console messages
• I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
• I have tested for mobile functionality and responsiveness
• I have added appropriate test coverage

[donnyquixotic]

Great job on this!!! Minor modal copy suggestions.

[Viterbo]

"Me saco el sombrero" 🎩

The only detail I noticed is that if you have a batch of revokes to process, cancelling the operation causes you to lose the selection you had. That is a colateral effect of reseting all checkboxes when the data changes. To fix this problem you would probably need to allow initial selection from the outside of the component which is an overkill solution. So let it as it is...

Good Job !!