Whitelist.js

// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause

import React, { Component } from 'react';
import { chainName$, withoutLoading } from '@parity/light.js';
import debounce from 'lodash/debounce';
import { Header } from 'fether-ui';
import light from '@parity/light.js-react';
import { Link } from 'react-router-dom';

import RequireHealthOverlay from '../RequireHealthOverlay';
import Health from '../Health';
import NewTokenItem from './NewTokenItem';
import withTokens from '../utils/withTokens';

@withTokens
@light({
  chainName: () => chainName$().pipe(withoutLoading())
})
class Whitelist extends Component {
  state = {
    db: null,
    dbMap: null,
    matches: [],
    search: ''
  };

  calculateMatches = debounce(() => {
    const { db, search } = this.state;

    if (search.length <= 1) {
      this.setState({ matches: [] });
      return;
    }

    const matches = db
      ? db.filter(
        ({ name, symbol }) =>
          name.toLowerCase().includes(search.toLowerCase()) ||
            symbol.toLowerCase().includes(search.toLowerCase())
      )
      : [];
    this.setState({ matches });
  }, 500);

  componentDidMount () {
    if (this.props.chainName) {
      this.fetchTokensDb();
    }
  }

  componentDidUpdate (prevProps) {
    if (this.props.chainName && !prevProps.chainName) {
      this.fetchTokensDb();
    }
  }

  fetchTokensDb = async () => {
    if (this.state.db) {
      // Don't fetch again if it's already fetched
      return;
    }

    // We only fetch this huge json if the user visits this NewToken page. We
    // try to avoid it as much as possible. All other tokens info (used in the
    // homepage) are stored in localStorage.
    let db;
    try {
      db = (await import(`../assets/tokens/${this.props.chainName}.json`))
        .default;
    } catch (e) {
      this.setState({ db: [], dbMap: {} });
      return;
    }

    // We create a address=>token mapping here
    const dbMap = {};
    db.forEach(token => (dbMap[token.address] = token));

    // Commit this into the state
    this.setState({ db, dbMap });
  };

  handleSearch = ({ target: { value } }) => {
    this.setState({ search: value });
    this.calculateMatches();
  };

  handleClear = () => {
    this.setState({ search: '' });
    this.calculateMatches();
  };

  render () {
    const { history } = this.props;
    const { matches, search } = this.state;

    const displayedTokens = search ? matches : this.props.tokensArrayWithoutEth;

    return (
      <RequireHealthOverlay require='sync'>
        <div>
          <Header
            left={
              <Link
                to='/tokens'
                className='icon -back'
                onClick={history.goBack}
              >
                Close
              </Link>
            }
            title={<h1>Search tokens</h1>}
          />

          <div className='window_content'>
            <div className='box -padded'>
              <div className='search-form'>
                <input
                  onChange={this.handleSearch}
                  placeholder='Find token by name or symbol'
                  value={search}
                  type='text'
                />
                <button
                  onClick={this.handleClear}
                  className='button -icon -clear'
                  disabled={!search.length}
                >
                  Clear
                </button>
              </div>
            </div>
            <div className='box -scroller'>
              <ul className='list -tokens'>
                {displayedTokens.map(token => (
                  <NewTokenItem key={token.address} token={token} />
                ))}
              </ul>
            </div>
          </div>

          <nav className='footer-nav'>
            <div className='footer-nav_status'>
              <Health />
            </div>
          </nav>
        </div>
      </RequireHealthOverlay>
    );
  }
}

export default Whitelist;