triplespeeder / token-allowance-checker

Control ERC20 token approvals

Token Allowance Checker ("TAC")

Introduction

Token Allowance Checker is running at https://tac.dappstar.io.

There is also an outdated screencast (no audio): https://drive.google.com/file/d/1hS05o5LhC5lc9JU9nEdihURikU3AimVi/view

The unlimited approval problem

Many DApps have the habit of requiring you to approve effectively unlimited amount of tokens. This helps improving the user experience, as you only have to sign off an approval once and it will be enough for all future transactions.

However this also means that the DApp (or the person/entity controlling it) can at any time transfer all of your tokens, without requiring any further approval.

In addition, there is no concept of expiring approvals. Once approved, the approval will remain forever. If you do not trust a DApp or its operators anymore, there is usually no easy way to remove the approval.

Empowering the user

Token Allowance Checker scans the complete Ethereum transaction history for ERC20-Approvals made by the provided address. It collects all ERC20 token contracts and any spender addresses that have been approved by the user in the past.

This information is displayed to the user, together with the up-to-date allowance amount.

For all entries, the user can edit or delete the allowance.

History

Originally this project started as an entry to the Gitcoin "Sustain web3" hackathon, for bounty https://gitcoin.co/issue/dfuse-io/hackathons/2/3953. Since then it has evolved further, moving from a plain javascript react app to react-redux and typescript.

Funding and development support

If you want to support further development of TAC, please consider contributing to the gitcoin grant at https://gitcoin.co/grants/480/token-allowance-checker.

Technologies used

• dfuse to search for allowances approved in the past.
• Onboard.js for setting up web3 provider and accessing user wallet/accounts
• Redux-Toolkit for efficient Redux development
• typechain to generate typings for ERC20 contract ABI

Release workflow

• PRs should go against development branch
• To create a new release:
  • checkout development branch
  • issue npm run release - This will update the Changelog.md with all changes and create a new version tag
  • Create a PR against master
  • When the PR gets merged, Github Action will automatically deploy the latest release to gh-pages.

token-allowance-checker's Issues

Integrate support/funding info

Add link to the gitcoin grant: https://gitcoin.co/grants/480/token-allowance-checker

Remember selected wallet

(Depends on #28 )

QOL improvement: Store last used wallet in localstorage and autoselect it at page load.

Cannot edit allowances; After changing from unlimited to 1, cannot click "Okay", but cancel button works

Cannot click the okay button, nothing happens. Cancel closes the box. Trying different values in the box results in the same problem (0,01,2,100).

Appears to only be the case for this spender or contract: 0x67dA490CFF3B23d8602eDc311B4d108C7EE82094 --Spender
0xEE85966b4974d3C6F71A2779cC3B6F53aFbc2B68 --Contract

As I can edit others, but not this one.

Responsive UI

Right now UI is a real mess on mobile devices.

Unnamed ERC20 at 0x86Fa049857E0209aa7D9e616F7eb3b3B78ECfdb0

Should be added to wellKnownContracts.ts

Check allowances for address 0x918453d249a22b6a8535c81e21f7530cd6ab59f1 to see the unnamed ERC20.

enable UniLogin wallet

Available with onboard.js 1.6, so once #82 is fixed this can be added.

track/add usage stats

Would be pretty nice to have some numbers on usage of the site.
Having a diagram showing number of zero'ed allowances per day would be awesome :)

Show timestamp of the last interaction with/of an approved spender

As a user I want to see at what time an approval was last used. This can help in the decision if an allowance shall be cleared or kept.

"last used" means:

• when was the last time spender did a transfer
• or alternatively when was the last time the approval changed/was created

Provide more information on transaction status

User should have the option to view transaction details while waiting for confirmation.
-> Show transaction hash
-> Add link to etherscan

Extend DApp to support ERC721 NFTs

Placeholder for now, as this needs more thoughts on usecases and UI.

Comments/discussion welcome!

clean up usage of history

At the moment history object is obtained through useHistory() hook and passed around at many places and actions, which is really ugly and bears the risk of using different instances. Improve this!

Support WalletConnect

Support WalletConnect (and possibly all wallets supported by onboard.js)

update onboard.js

I'm still using 1.3.0, while already 1.5.0 is available. Hopefully this fixes current issues with mobile wallets...

Allow changing of wallets

As a user with different wallets i want to be able to change the wallet without reloading whole page.
-> Add info about currently connected wallet and option to select a different one.
-> Should probably include option to choose different address for wallets that provide more than one?

Batch mode

-> Find a way to change several approvals with just one transaction

Needs thought work. At the moment I'm thinking this is simply not possible due to the ERC20 design. But maybe I'm missing something :)

implement Chromium omnibox search

See Chromium docs on OpenSearch: https://www.chromium.org/tab-to-search

Among the many features Chromium's Omnibox offers is the ability to search a site without navigating to the sites homepage. Once Chromium has determined it can search a site, any time the user types the URL of the site into the Omnibox the user is offered the ability to search the site. Once the user presses tab, then types in a string and presses the enter, the site is searched and the results shown to the user. It's important to note the search is done by the site itself, not Google or Chromium.

Workflow:

• user enters "tac.dappstar.io" in the omnibox
• Chromium shows "press tab to search" hint
• user presses tab
• user enters ENS name or address he wants to check allowances for and presses enter

Result:
Url tac.dappstar.io/#/address/<entered search term> is opened.

Support hardware wallets

onboard.js 1.3 has added hw wallet support: https://github.com/blocknative/onboard/releases/tag/1.3.0
-> Upgrade to this version!

Enable grouping of Allowances by Spender

As a user, I want to see all allowances for a specific exchange. This is useful if i lost trust in an exchange and want to clear all approvals i gave them, no matter which token.

-> Add option to group allowances by spender instead of by Token.

add ipfs hosting

Site should be available at tac.dappstar.eth.

Improve UX when wallet is locked

Reproduce:

1. Have metamask locked
2. Open https://tac.dappstar.io/, click "Check allowances"
3. Select Metamask wallet

Result: There is just a small note "No address set" displayed.

Expected: A nice message to the user, including instructions how to proceed.

Use createEntityAdapter from RTK 1.3

Make use of the new function createEntitiyAdapter once reduxjs/redux-toolkit#373 is released.

I'm already largely following the entities pattern, so the transition should not be too complex.

Reload allowance after editing

UI should refresh token allowance after it has been edited. Currently you need to reload the page in order to see the changed allowance.

add support for imToken wallet

-> https://token.im/

Placeholder strings in onboard.js

Wallet selection dialog contains placeholder strings "walletName" and "description".
-> Provide meaningful strings!

Can not change allowance of tokens with 0 decimals

E.g. for BrightID subscriprion token SUBS. When trying to set allowance to 0 SUBS, console shows this error:

Uncaught Error: Too many decimal places
  at toBaseUnit (erc20-decimals-conversion.ts:42)
  at Object.handleSubmit [as onSubmit] (EditAllowanceFormContainer.tsx:66)
   ...

clear all resolved ENS names when network changes

Known addresses are retained in store when network changes. Since ENS names are depending on the network they need to be removed when network changes.

Support Ropsten network

Relevant endpoints:

• dfuse.io API: https://ropsten.eth.dfuse.io/graphql
• Etherscan API: https://api-ropsten.etherscan.io

Sort allowance list

Right now the allowances are displayed in random order. Sort them by token name.

Consolidate ERC20 compliance checks

Currently there are multiple places where the code is bailing out due to contract not being ERC20 compliant. Refactor this to have one place where contract logic is checked.

Add option to not show zero approvals

As a user i am mostly interested in approvals that are >0.
There should be a toggle in the UI to hide "0" approvals.

Don't limit result set

Current implementation has a hard-coded limit on the number of results obtained from graphQL. Add some kind of pagination so user always gets all results.

Show token icon/image

Would be nice to display the contracts logo/icon next to its name.

Check https://github.com/trustwallet/assets for token logos.

allowances missing when approved to same spender in short timeframe

When you approve two tokens to the same spender in a short timeframe, only the last approval will be shown.

Example:

• https://etherscan.io/tx/0xb5bfb6af55915c570afcba0ebf119ac4e6d14c255fa71ad450bdaa9dcec4209e approving unlimited TUSD for spender 0x6F400810b62df8E13fded51bE75fF5393eaa841F
• https://etherscan.io/tx/0x29163b12ed7e06e518373e2597d58b7213c34346ddd781ad154a7b961148aa9f approving unlimited DAI for the same spender 0x6F400810b62df8E13fded51bE75fF5393eaa841F

Only the second approval (DAI) is show in TAC: https://tac.dappstar.io/#/address/triplespeeder.eth

Use createAsyncThunk from RTK 1.3

Make use of new function createAsyncThunk once reduxjs/redux-toolkit#373 is released.

remove gitcoin grant message

Matching round 5 is over!

Tone down Gitcoin Grant funding message

Make the message smaller and add a 'dismiss' button.

Create Logo

TAC needs a Logo!

Requirements:

• Design should work both in small size (browser favicon) and larger size (social media, e.g. twitter card or gitcoin grant https://gitcoin.co/grants/480/token-allowance-checker)
• Should be provided in a scaleable format (svg)

Show version

Show build version in footer

mark zero allowances as "positive"

In the same way unlimited alllowances are marked "negative" (light red), zero allowances should appear "positive" (light green)

Does not work with EOAs

(reported by Martin via https://twitter.com/koeppelmann/status/1229719873758093312)

Currently I'm searching for "approve"-events caused by transactions that are signed by the provided address. This works fine for user accounts, but fails for externally owned accounts. In these cases the transaction signer is not the EOA, but the user interacting with the EOA.
Therefor the search does not yield any results.

To fix this the search strategy needs to be changed to not rely on the transaction signer.
Possible solution:
Search for all approve events where the owner is the provided address.

Don't require to connect wallet

Currently TAC requires the user to connect() with the wallet, so TAC can read the wallet address.

This should be an optional step, as users might want to just check allowances of arbitrary addresses, without allowing TAC to access their wallet address.

Display more information about Spender address

As a user I usually can not recognize which Dapp/entity is behind a spender address.
Ideally the UI would prominently show e.g. the name of the according DEX.

Obviously this will be difficult to accomplish. Things to check:

• Is there a reverse ENS entry existing for the spender address?
• Is there any third-party API that provides a mapping contract address -> Dapp/Project name?

Unknown error "Error {}" thrown after check allowances

A red error box with a exclamation point and the text ""Error {}". Using metamask, address is correct, on mainnet, also tried entering the ENS for that address got the same result.

test issue

asdf

Show owner balance when editing allowance

Show owners token balance in the info area of edit allowance form.

Remove fixed webpack dependency when possible

With the next update of react-scripts check and possibly remove the hardcoded webpack dependency to 4.42.0.
Hope npm gets a fix in time so it correctly resolves webpack version again.

update dependencies

npm outdated shows quite a number of available updates.

Does not work well with Argent

Reproduce:

1. select "WalletConnect" in wallet selection dialog
2. scan provided QR-code with Argent mobile app
3. approve TAC access in Argent

Result:

• Once wallet is selected, TAC automatically selects first wallet address, e.g. "triplespeeder.argent.xyz"
• TAC just displays error message "Address triplespeeder.argent.xyz is invalid".
• There is no way to enter a different address, besides manually changing the url.

Expected behaviour:

There are two issues involved:

1. Resolve and use valid .xyz addresses
2. If an address provided via URL is not valid, still show the input field to manually change address

on mobile, indicate allowance status on collapsed headline

If a token has at least one unlimited allowance, the headline should reflect this, prob. by red color
Likewise, if all existing allowances are zero, the headline should indicate this, probably by green color)

Support ENS names from url

So urls like https://tac.dappstar.io/#/address/triplespeeder.eth actually work.