Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
import { chainName$, withoutLoading } from '@parity/light.js';
import debounce from 'lodash/debounce';
import { Header } from 'fether-ui';
import light from '@parity/light.js-react';
Luke Schoen
committed
import RequireHealthOverlay from '../RequireHealthOverlay';
import Health from '../Health';
import NewTokenItem from './NewTokenItem';
import withTokens from '../utils/withTokens';
chainName: () => chainName$().pipe(withoutLoading())
state = {
db: null,
dbMap: null,
};
calculateMatches = debounce(() => {
const { db, search } = this.state;
if (search.length <= 1) {
return;
}
const matches = db
? db.filter(
({ name, symbol }) =>
name.toLowerCase().includes(search.toLowerCase()) ||
symbol.toLowerCase().includes(search.toLowerCase())
: [];
this.setState({ matches });
}, 500);
if (this.props.chainName) {
this.fetchTokensDb();
}
}
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;
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 = () => {
const { matches, search } = this.state;
const displayedTokens = search ? matches : this.props.tokensArrayWithoutEth;
Luke Schoen
committed
<RequireHealthOverlay require='sync'>
<div>
<Header
left={
<Link
to='/tokens'
className='icon -back'
onClick={history.goBack}
Luke Schoen
committed
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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>
Luke Schoen
committed
<nav className='footer-nav'>
<div className='footer-nav_status'>
<Health />
</div>
</nav>
</div>
</RequireHealthOverlay>