-
- Settings
-
+
+
+
+
+
+
+
+
-
+
);
}
diff --git a/src/Send/Send.js b/src/Send/Send.js
index 06e7a816bd6c9a168bc348b340924e0c4801ca26..d4e4549c503c390862434e0eeaccc74197cc457b 100644
--- a/src/Send/Send.js
+++ b/src/Send/Send.js
@@ -52,11 +52,11 @@ class Send extends PureComponent {
diff --git a/src/Send/Signer/Signer.js b/src/Send/Signer/Signer.js
index 2dad86d91d128904d06850d14a6066912ae99801..e354c7a55615681ff4a9ee6de5a660d483cc5791 100644
--- a/src/Send/Signer/Signer.js
+++ b/src/Send/Signer/Signer.js
@@ -4,12 +4,22 @@
// SPDX-License-Identifier: MIT
import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { map } from 'rxjs/operators';
import { fromWei } from '@parity/api/lib/util/wei';
import { inject, observer } from 'mobx-react';
-import { post$ } from '@parity/light.js';
+import { defaultAccount$, myBalance$, post$ } from '@parity/light.js';
+
+import ethereumIcon from '../../assets/img/tokens/ethereum.png';
+import light from '../../hoc';
@inject('signerStore')
@observer
+
+@light({
+ balance: () => myBalance$().pipe(map(value => +fromWei(value))),
+ me: defaultAccount$
+})
class Signer extends Component {
state = {
password: '',
@@ -62,55 +72,83 @@ class Signer extends Component {
};
render () {
- const { location: { state: tx } } = this.props;
- const { password, status } = this.state;
+ const { balance, location: { state: tx } } = this.props;
+ const { password } = this.state;
return (
-
);
diff --git a/src/Tokens/NewToken/NewTokenItem/index.js b/src/Settings/NewTokenItem/index.js
similarity index 100%
rename from src/Tokens/NewToken/NewTokenItem/index.js
rename to src/Settings/NewTokenItem/index.js
diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
index a92506d595582a3e85b9579d2f3de0df626b3549..918d4977d52a13645580d165f3f28ce0485bf9c9 100644
--- a/src/Settings/Settings.js
+++ b/src/Settings/Settings.js
@@ -3,33 +3,138 @@
//
// SPDX-License-Identifier: MIT
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
+import { chainName$ } from '@parity/light.js';
+import debounce from 'lodash/debounce';
+import { inject, observer } from 'mobx-react';
import { Link } from 'react-router-dom';
-import Health from '../Health';
+import light from '../hoc';
+import NewTokenItem from './NewTokenItem';
+
+@light({
+ chainName: chainName$
+})
+@inject('tokensStore')
+@observer
+class Settings extends Component {
+ state = {
+ db: null,
+ dbMap: null,
+ matches: this.props.tokensStore.tokensArrayWithoutEth,
+ search: ''
+ };
+
+ calculateMatches = debounce(() => {
+ const { tokensStore: { tokensArrayWithoutEth } } = this.props;
+ const { db, search } = this.state;
+
+ if (search.length <= 1) {
+ this.setState({ matches: tokensArrayWithoutEth });
+ 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`);
+ } catch (e) {
+ db = await import(`../assets/tokens/foundation.json`);
+ }
+
+ // 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();
+ };
-class Settings extends PureComponent {
render () {
+ const { matches, search } = this.state;
+
return (