Refresh cached tokens based on registry info & random balances (#6818) (#6824)

* Refresh cached tokens based on registry info & random balances

* Don't display errored token images

js/src/redux/providers/tokensActions.js

@@ -71,7 +71,6 @@ function loadCachedTokens (tokenRegContract) {
       // Check if we have data from the right contract
       if (cached.tokenreg === tokenRegContract.address && cached.tokens) {
         log.debug('found cached tokens', cached.tokens);
-        dispatch(_setTokens(cached.tokens));
 
         // Fetch all the tokens images on load
         // (it's the only thing that might have changed)
@@ -105,22 +104,13 @@ export function loadTokens (options = {}) {
   };
 }
 
-export function loadTokensBasics (_tokenIndexes, options) {
+export function loadTokensBasics (tokenIndexes, options) {
   const limit = 64;
 
   return (dispatch, getState) => {
-    const { api, tokens } = getState();
+    const { api } = getState();
     const { tokenReg } = Contracts.get();
     const nextTokens = {};
-    const prevTokensIndexes = Object.values(tokens).map((t) => t.index);
-
-    // Only fetch tokens we don't have yet
-    const tokenIndexes = _tokenIndexes
-      .filter((tokenIndex) => {
-        return !prevTokensIndexes.includes(tokenIndex);
-      })
-      .sort();
-
     const count = tokenIndexes.length;
 
     log.debug('loading basic tokens', tokenIndexes);
@@ -240,6 +230,7 @@ function fetchTokensData (tokenRegContract, tokenIndexes) {
         log.debug('fetched', { fullResults, partialResults });
 
         return [].concat(fullResults, partialResults)
+          .filter(({ address }) => !/0x0*$/.test(address))
           .reduce((tokens, token) => {
             const { id, image, address } = token;
 

js/src/ui/TokenImage/tokenImage.js

@@ -32,14 +32,19 @@ class TokenImage extends Component {
     }).isRequired
   };
 
+  state = {
+    error: false
+  };
+
   render () {
+    const { error } = this.state;
     const { api } = this.context;
     const { image, token } = this.props;
 
     const imageurl = token.image || image;
     let imagesrc = unknownImage;
 
-    if (imageurl) {
+    if (imageurl && !error) {
       const host = /^(\/)?api/.test(imageurl)
         ? api.dappsUrl
         : '';
@@ -49,11 +54,16 @@ class TokenImage extends Component {
 
     return (
       <img
-        src={ imagesrc }
         alt={ token.name }
+        onError={ this.handleError }
+        src={ imagesrc }
       />
     );
   }
+
+  handleError = () => {
+    this.setState({ error: true });
+  };
 }
 
 function mapStateToProps (iniState) {

js/src/util/tokens/index.js

@@ -55,9 +55,14 @@ export function fetchTokensBasics (api, tokenReg, start = 0, limit = 100) {
   return api.eth
     .call({ data: tokenAddressesBytcode + tokenAddressesCallData })
     .then((result) => {
-      const tokenAddresses = decodeArray(api, 'address[]', result);
-
+      return decodeArray(api, 'address[]', result);
+    })
+    .then((tokenAddresses) => {
       return tokenAddresses.map((tokenAddress, index) => {
+        if (/^0x0*$/.test(tokenAddress)) {
+          return null;
+        }
+
         const tokenIndex = start + index;
 
         return {
@@ -68,6 +73,17 @@ export function fetchTokensBasics (api, tokenReg, start = 0, limit = 100) {
           fetched: false
         };
       });
+    })
+    .then((tokens) => tokens.filter((token) => token))
+    .then((tokens) => {
+      const randomAddress = sha3(`${Date.now()}`).substr(0, 42);
+
+      return fetchTokensBalances(api, tokens, [randomAddress])
+        .then((_balances) => {
+          const balances = _balances[randomAddress];
+
+          return tokens.filter(({ id }) => balances[id].eq(0));
+        });
     });
 }