+
+ Request number {this.requestId}
+
+
+ From: {tx.from}
+
+
+ To: {tx.to}
+
+
+ Amount: {+fromWei(tx.value)}ETH
+
+
+ Gas: {+tx.gas}
+
+ {status && status.requested
+ ?
- ) : (
-
Loading...
- )}
+ :
Loading...
}
-
Status: {JSON.stringify(status)}
+
+ Status: {JSON.stringify(status)}
+
);
}
diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
index 1f3022774e0e1589d63f77f94a975a165cefff75..a92506d595582a3e85b9579d2f3de0df626b3549 100644
--- a/src/Settings/Settings.js
+++ b/src/Settings/Settings.js
@@ -3,12 +3,12 @@
//
// SPDX-License-Identifier: MIT
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
import Health from '../Health';
-class Settings extends Component {
+class Settings extends PureComponent {
render () {
return (
diff --git a/src/Tokens/NewToken/NewToken.js b/src/Tokens/NewToken/NewToken.js
new file mode 100644
index 0000000000000000000000000000000000000000..785c47d2a74517ad5131a5fb3d3942048e838dd6
--- /dev/null
+++ b/src/Tokens/NewToken/NewToken.js
@@ -0,0 +1,109 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { PureComponent } from 'react';
+import { chainName$ } from '@parity/light.js';
+import debounce from 'lodash/debounce';
+import { inject, observer } from 'mobx-react';
+
+import light from '../../hoc';
+import NewTokenItem from './NewTokenItem';
+
+@inject('tokensStore')
+@observer
+@light({
+ chainName: chainName$
+})
+class NewToken extends PureComponent {
+ 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();
+ };
+
+ render () {
+ const { matches, search } = this.state;
+
+ return (
+
+
+
+
+ {matches.map(token =>
+
+ )}
+
+
+
+ );
+ }
+}
+
+export default NewToken;
diff --git a/src/Tokens/NewToken/NewTokenItem/NewTokenItem.js b/src/Tokens/NewToken/NewTokenItem/NewTokenItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..42d7c3043364aa70361bda553442760082f0b85e
--- /dev/null
+++ b/src/Tokens/NewToken/NewTokenItem/NewTokenItem.js
@@ -0,0 +1,52 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { PureComponent } from 'react';
+import { inject, observer } from 'mobx-react';
+import { withRouter } from 'react-router-dom';
+
+@inject('tokensStore')
+@observer
+@withRouter
+class NewTokenItem extends PureComponent {
+ handleAddToken = () => {
+ const { history, token, tokensStore } = this.props;
+ tokensStore.addToken(token.address, token);
+ history.goBack();
+ };
+
+ handleRemoveToken = () => {
+ const { history, token, tokensStore } = this.props;
+ tokensStore.removeToken(token.address);
+ history.goBack();
+ };
+
+ render () {
+ const { token, tokensStore: { tokens } } = this.props;
+
+ return (
+
+
+
+
+
+
+ {token.name}
+
+
+
+ {token.symbol}
+
+
+ {tokens.has(token.address)
+ ?
+ :
}
+
+ );
+ }
+}
+
+export default NewTokenItem;
diff --git a/src/Tokens/NewToken/NewTokenItem/index.js b/src/Tokens/NewToken/NewTokenItem/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e444fba76ab25468a7311393bfe68f683577747
--- /dev/null
+++ b/src/Tokens/NewToken/NewTokenItem/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import NewTokenItem from './NewTokenItem';
+
+export default NewTokenItem;
diff --git a/src/Tokens/NewToken/index.js b/src/Tokens/NewToken/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..59270b252fc3fb7f5ffa6963e56bd12deece95d8
--- /dev/null
+++ b/src/Tokens/NewToken/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import NewToken from './NewToken';
+
+export default NewToken;
diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js
index d0ab03dff8f4a0d09ade922c37ef662f3be9f037..0aa2f5599ff16a15b9ba25ef16650f72658ac325 100644
--- a/src/Tokens/Tokens.js
+++ b/src/Tokens/Tokens.js
@@ -3,31 +3,19 @@
//
// SPDX-License-Identifier: MIT
-import React, { Component } from 'react';
-import { inject, observer } from 'mobx-react';
-import { Redirect, Link } from 'react-router-dom';
+import React, { PureComponent } from 'react';
+import { Link, Route, Switch } from 'react-router-dom';
import Health from '../Health';
-import EthBalance from './EthBalance';
-import TokenBalance from './TokenBalance';
+import NewToken from './NewToken';
+import TokensList from './TokensList';
-@inject('parityStore', 'tokensStore')
-@observer
-class Tokens extends Component {
+class Tokens extends PureComponent {
render () {
- const {
- parityStore: { isApiConnected },
- tokensStore: { tokens }
- } = this.props;
-
- if (!isApiConnected) {
- return
;
- }
-
return (
-
-
-
- {Array.from(tokens.keys()).map(key => (
- -
- {key === 'ETH' ? (
-
- ) : (
-
- )}
-
- ))}
-
-
-
+
+
+
+