Make tokenreg dapp fast again (#3474)

* Using proper TokenReg Instance in TokenReg dApp #3371

* remove unnecessary logs in tokereg dapp

* Improved Redux managment in TokeReg dApp #3371

* Fixfing linting
This commit is contained in:
Nicolas Gotchac 2016-11-16 16:43:21 +01:00 committed by Jaco Greeff
parent df1fbf50d8
commit 6f2c818f9f
18 changed files with 187 additions and 168 deletions

View File

@ -18,6 +18,7 @@ import DappReg from './dappreg';
import Registry from './registry'; import Registry from './registry';
import SignatureReg from './signaturereg'; import SignatureReg from './signaturereg';
import TokenReg from './tokenreg'; import TokenReg from './tokenreg';
import GithubHint from './githubhint';
let instance = null; let instance = null;
@ -30,6 +31,7 @@ export default class Contracts {
this._dappreg = new DappReg(api, this._registry); this._dappreg = new DappReg(api, this._registry);
this._signaturereg = new SignatureReg(api, this._registry); this._signaturereg = new SignatureReg(api, this._registry);
this._tokenreg = new TokenReg(api, this._registry); this._tokenreg = new TokenReg(api, this._registry);
this._githubhint = new GithubHint(api, this._registry);
} }
get registry () { get registry () {
@ -48,6 +50,10 @@ export default class Contracts {
return this._tokenreg; return this._tokenreg;
} }
get githubHint () {
return this._githubhint;
}
static create (api) { static create (api) {
return new Contracts(api); return new Contracts(api);
} }

View File

@ -0,0 +1,32 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default class GithubHint {
constructor (api, registry) {
this._api = api;
this._registry = registry;
this.getInstance();
}
getContract () {
return this._registry.getContract('githubhint');
}
getInstance () {
return this.getContract().instance;
}
}

View File

@ -42,7 +42,7 @@ export default class Registry {
}); });
} }
getContractInstance (_name) { getContract (_name) {
const name = _name.toLowerCase(); const name = _name.toLowerCase();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -54,13 +54,19 @@ export default class Registry {
this this
.lookupAddress(name) .lookupAddress(name)
.then((address) => { .then((address) => {
this._contracts[name] = this._api.newContract(abis[name], address).instance; this._contracts[name] = this._api.newContract(abis[name], address);
resolve(this._contracts[name]); resolve(this._contracts[name]);
}) })
.catch(reject); .catch(reject);
}); });
} }
getContractInstance (_name) {
return this
.getContract(_name)
.then((contract) => contract.instance);
}
lookupAddress (_name) { lookupAddress (_name) {
const name = _name.toLowerCase(); const name = _name.toLowerCase();
const sha3 = this._api.util.sha3(name); const sha3 = this._api.util.sha3(name);

View File

@ -22,8 +22,12 @@ export default class TokenReg {
this.getInstance(); this.getInstance();
} }
getContract () {
return this._registry.getContract('tokenreg');
}
getInstance () { getInstance () {
return this._registry.getContractInstance('tokenreg'); return this.getContract().instance;
} }
tokenCount () { tokenCount () {

View File

@ -46,8 +46,6 @@ export const loadAccounts = () => (dispatch) => {
address address
})); }));
console.log('accounts', accountsList);
dispatch(setAccounts(accountsList)); dispatch(setAccounts(accountsList));
dispatch(setAccountsInfo(accountsInfo)); dispatch(setAccountsInfo(accountsInfo));
dispatch(setSelectedAccount(accountsList[0].address)); dispatch(setSelectedAccount(accountsList[0].address));

View File

@ -42,12 +42,9 @@ export default class QueryAction extends Component {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
handleQueryToken: PropTypes.func.isRequired, handleQueryToken: PropTypes.func.isRequired,
handleQueryMetaLookup: PropTypes.func.isRequired,
data: PropTypes.object, data: PropTypes.object,
notFound: PropTypes.bool, notFound: PropTypes.bool
metaLoading: PropTypes.bool,
metaData: PropTypes.object
} }
state = initState; state = initState;
@ -131,10 +128,7 @@ export default class QueryAction extends Component {
return ( return (
<Token <Token
fullWidth fullWidth
handleMetaLookup={ this.props.handleQueryMetaLookup } tla={ data.tla }
isMetaLoading={ this.props.metaLoading }
meta={ this.props.metaData }
{ ...data }
/> />
); );
} }

View File

@ -16,8 +16,6 @@
import { getTokenTotalSupply } from '../utils'; import { getTokenTotalSupply } from '../utils';
const { sha3, bytesToHex } = window.parity.api.util;
export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING'; export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING';
export const setRegisterSending = (isSending) => ({ export const setRegisterSending = (isSending) => ({
type: SET_REGISTER_SENDING, type: SET_REGISTER_SENDING,
@ -41,8 +39,6 @@ export const registerCompleted = () => ({
}); });
export const registerToken = (tokenData) => (dispatch, getState) => { export const registerToken = (tokenData) => (dispatch, getState) => {
console.log('registering token', tokenData);
const state = getState(); const state = getState();
const contractInstance = state.status.contract.instance; const contractInstance = state.status.contract.instance;
const fee = state.status.contract.fee; const fee = state.status.contract.fee;
@ -83,8 +79,6 @@ export const registerToken = (tokenData) => (dispatch, getState) => {
}) })
.then((gasEstimate) => { .then((gasEstimate) => {
options.gas = gasEstimate.mul(1.2).toFixed(0); options.gas = gasEstimate.mul(1.2).toFixed(0);
console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
return contractInstance.register.postTransaction(options, values); return contractInstance.register.postTransaction(options, values);
}) })
.then((result) => { .then((result) => {
@ -183,34 +177,3 @@ export const queryToken = (key, query) => (dispatch, getState) => {
dispatch(setQueryLoading(false)); dispatch(setQueryLoading(false));
}); });
}; };
export const queryTokenMeta = (id, query) => (dispatch, getState) => {
console.log('loading token meta', query);
const state = getState();
const contractInstance = state.status.contract.instance;
const key = sha3(query);
const startDate = Date.now();
dispatch(setQueryMetaLoading(true));
contractInstance
.meta
.call({}, [ id, key ])
.then((value) => {
const meta = {
key, query,
value: value.find(v => v !== 0) ? bytesToHex(value) : null
};
dispatch(setQueryMeta(meta));
setTimeout(() => {
dispatch(setQueryMetaLoading(false));
}, 500 - (Date.now() - startDate));
})
.catch((e) => {
console.error('load meta query error', e);
});
};

View File

@ -37,7 +37,6 @@ export default class Actions extends Component {
handleQueryToken: PropTypes.func.isRequired, handleQueryToken: PropTypes.func.isRequired,
handleQueryClose: PropTypes.func.isRequired, handleQueryClose: PropTypes.func.isRequired,
handleQueryMetaLookup: PropTypes.func.isRequired,
query: PropTypes.object.isRequired query: PropTypes.object.isRequired
}; };
@ -82,7 +81,6 @@ export default class Actions extends Component {
show={ this.state.show[ QUERY_ACTION ] } show={ this.state.show[ QUERY_ACTION ] }
onClose={ this.onQueryClose } onClose={ this.onQueryClose }
handleQueryToken={ this.props.handleQueryToken } handleQueryToken={ this.props.handleQueryToken }
handleQueryMetaLookup={ this.props.handleQueryMetaLookup }
{ ...this.props.query } /> { ...this.props.query } />
</div> </div>
); );

View File

@ -19,7 +19,7 @@ import { connect } from 'react-redux';
import Actions from './component'; import Actions from './component';
import { registerToken, registerReset, queryToken, queryReset, queryTokenMeta } from './actions'; import { registerToken, registerReset, queryToken, queryReset } from './actions';
class TokensContainer extends Component { class TokensContainer extends Component {
@ -49,9 +49,6 @@ const mapDispatchToProps = (dispatch) => {
}, },
handleQueryClose: () => { handleQueryClose: () => {
dispatch(queryReset()); dispatch(queryReset());
},
handleQueryMetaLookup: (id, query) => {
dispatch(queryTokenMeta(id, query));
} }
}; };
}; };

View File

@ -19,6 +19,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-bottom: 10em;
} }
.warning { .warning {

View File

@ -14,11 +14,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { import Contracts from '../../../contracts';
registry as registryAbi,
tokenreg as tokenregAbi,
githubhint as githubhintAbi
} from '../../../contracts/abi';
import { loadToken, setTokenPending, deleteToken, setTokenData } from '../Tokens/actions'; import { loadToken, setTokenPending, deleteToken, setTokenData } from '../Tokens/actions';
@ -34,43 +30,31 @@ export const FIND_CONTRACT = 'FIND_CONTRACT';
export const loadContract = () => (dispatch) => { export const loadContract = () => (dispatch) => {
dispatch(setLoading(true)); dispatch(setLoading(true));
api.parity const { tokenReg, githubHint } = new Contracts(api);
.registryAddress()
.then((registryAddress) => {
console.log(`registry found at ${registryAddress}`);
const registry = api.newContract(registryAbi, registryAddress).instance;
return Promise.all([
registry.getAddress.call({}, [api.util.sha3('tokenreg'), 'A']),
registry.getAddress.call({}, [api.util.sha3('githubhint'), 'A'])
]);
})
.then(([ tokenregAddress, githubhintAddress ]) => {
console.log(`tokenreg was found at ${tokenregAddress}`);
const tokenregContract = api
.newContract(tokenregAbi, tokenregAddress);
const githubhintContract = api
.newContract(githubhintAbi, githubhintAddress);
return Promise
.all([
tokenReg.getContract(),
githubHint.getContract()
])
.then(([ tokenRegContract, githubHintContract ]) => {
dispatch(setContractDetails({ dispatch(setContractDetails({
address: tokenregAddress, address: tokenRegContract.address,
instance: tokenregContract.instance, instance: tokenRegContract.instance,
raw: tokenregContract raw: tokenRegContract
})); }));
dispatch(setGithubhintDetails({ dispatch(setGithubhintDetails({
address: githubhintAddress, address: githubHintContract.address,
instance: githubhintContract.instance, instance: githubHintContract.instance,
raw: githubhintContract raw: githubHintContract
})); }));
dispatch(loadContractDetails()); dispatch(loadContractDetails());
dispatch(subscribeEvents()); dispatch(subscribeEvents());
}) })
.catch((error) => { .catch((error) => {
console.error('loadContract error', error); throw error;
}); });
}; };
@ -78,7 +62,7 @@ export const LOAD_CONTRACT_DETAILS = 'LOAD_CONTRACT_DETAILS';
export const loadContractDetails = () => (dispatch, getState) => { export const loadContractDetails = () => (dispatch, getState) => {
const state = getState(); const state = getState();
const instance = state.status.contract.instance; const { instance } = state.status.contract;
Promise Promise
.all([ .all([
@ -87,8 +71,6 @@ export const loadContractDetails = () => (dispatch, getState) => {
instance.fee.call() instance.fee.call()
]) ])
.then(([accounts, owner, fee]) => { .then(([accounts, owner, fee]) => {
console.log(`owner as ${owner}, fee set at ${fee.toFormat()}`);
const isOwner = accounts.filter(a => a === owner).length > 0; const isOwner = accounts.filter(a => a === owner).length > 0;
dispatch(setContractDetails({ dispatch(setContractDetails({
@ -119,14 +101,14 @@ export const setGithubhintDetails = (details) => ({
export const subscribeEvents = () => (dispatch, getState) => { export const subscribeEvents = () => (dispatch, getState) => {
const state = getState(); const state = getState();
const contract = state.status.contract.raw; const { raw } = state.status.contract;
const previousSubscriptionId = state.status.subscriptionId; const previousSubscriptionId = state.status.subscriptionId;
if (previousSubscriptionId) { if (previousSubscriptionId) {
contract.unsubscribe(previousSubscriptionId); raw.unsubscribe(previousSubscriptionId);
} }
contract raw
.subscribe(null, { .subscribe(null, {
fromBlock: 'latest', fromBlock: 'latest',
toBlock: 'pending', toBlock: 'pending',
@ -187,7 +169,7 @@ export const subscribeEvents = () => (dispatch, getState) => {
)); ));
} }
console.log('new log event', log); console.warn('unknown log event', log);
}); });
}) })
.then((subscriptionId) => { .then((subscriptionId) => {

View File

@ -27,15 +27,13 @@ const initialState = {
contract: { contract: {
address: null, address: null,
instance: null, instance: null,
raw: null,
owner: null, owner: null,
isOwner: false, isOwner: false,
fee: null fee: null
}, },
githubhint: { githubhint: {
address: null, address: null,
instance: null, instance: null
raw: null
} }
}; };

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './token'; export default from './tokenContainer';

View File

@ -57,15 +57,28 @@ export default class Token extends Component {
isLoading: PropTypes.bool, isLoading: PropTypes.bool,
isPending: PropTypes.bool, isPending: PropTypes.bool,
isTokenOwner: PropTypes.bool.isRequired, isTokenOwner: PropTypes.bool.isRequired,
isContractOwner: PropTypes.bool.isRequired, isContractOwner: PropTypes.bool,
fullWidth: PropTypes.bool fullWidth: PropTypes.bool
}; };
state = { static defaultProps = {
metaKeyIndex: 0 isContractOwner: false
}; };
state = {
metaKeyIndex: 0,
showMeta: false
};
shouldComponentUpdate (nextProps) {
if (nextProps.isLoading && this.props.isLoading) {
return false;
}
return true;
}
render () { render () {
const { isLoading, fullWidth } = this.props; const { isLoading, fullWidth } = this.props;
@ -237,7 +250,12 @@ export default class Token extends Component {
} }
renderMeta (meta) { renderMeta (meta) {
const isMetaLoading = this.props.isMetaLoading; const { isMetaLoading } = this.props;
const { showMeta } = this.state;
if (!showMeta) {
return null;
}
if (isMetaLoading) { if (isMetaLoading) {
return (<div> return (<div>
@ -331,6 +349,7 @@ export default class Token extends Component {
const key = metaDataKeys[keyIndex].value; const key = metaDataKeys[keyIndex].value;
const index = this.props.index; const index = this.props.index;
this.setState({ showMeta: true });
this.props.handleMetaLookup(index, key); this.props.handleMetaLookup(index, key);
} }

View File

@ -0,0 +1,73 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Token from './token';
import { queryTokenMeta, unregisterToken, addTokenMeta } from '../actions';
class TokenContainer extends Component {
static propTypes = {
handleMetaLookup: PropTypes.func.isRequired,
handleUnregister: PropTypes.func.isRequired,
handleAddMeta: PropTypes.func.isRequired,
tla: PropTypes.string.isRequired
};
render () {
return (
<Token
{ ...this.props }
/>
);
}
}
const mapStateToProps = (_, initProps) => {
const { tla } = initProps;
return (state) => {
const { isOwner } = state.status.contract;
const { tokens } = state.tokens;
const token = tokens.find((t) => t.tla === tla);
return { ...token, isContractOwner: isOwner };
};
};
const mapDispatchToProps = (dispatch) => {
return {
handleMetaLookup: (index, query) => {
dispatch(queryTokenMeta(index, query));
},
handleUnregister: (index) => {
dispatch(unregisterToken(index));
},
handleAddMeta: (index, key, value) => {
dispatch(addTokenMeta(index, key, value));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(TokenContainer);

View File

@ -67,8 +67,6 @@ export const deleteToken = (index) => ({
}); });
export const loadTokens = () => (dispatch, getState) => { export const loadTokens = () => (dispatch, getState) => {
console.log('loading tokens...');
const state = getState(); const state = getState();
const contractInstance = state.status.contract.instance; const contractInstance = state.status.contract.instance;
@ -79,7 +77,6 @@ export const loadTokens = () => (dispatch, getState) => {
.call() .call()
.then((count) => { .then((count) => {
const tokenCount = parseInt(count); const tokenCount = parseInt(count);
console.log(`token count: ${tokenCount}`);
dispatch(setTokenCount(tokenCount)); dispatch(setTokenCount(tokenCount));
for (let i = 0; i < tokenCount; i++) { for (let i = 0; i < tokenCount; i++) {
@ -94,8 +91,6 @@ export const loadTokens = () => (dispatch, getState) => {
}; };
export const loadToken = (index) => (dispatch, getState) => { export const loadToken = (index) => (dispatch, getState) => {
console.log('loading token', index);
const state = getState(); const state = getState();
const contractInstance = state.status.contract.instance; const contractInstance = state.status.contract.instance;
@ -144,7 +139,7 @@ export const loadToken = (index) => (dispatch, getState) => {
} }
data.totalSupply = data.totalSupply.toNumber(); data.totalSupply = data.totalSupply.toNumber();
console.log(`token loaded: #${index}`, data);
dispatch(setTokenData(index, data)); dispatch(setTokenData(index, data));
dispatch(setTokenLoading(index, false)); dispatch(setTokenLoading(index, false));
}) })
@ -159,8 +154,6 @@ export const loadToken = (index) => (dispatch, getState) => {
}; };
export const queryTokenMeta = (index, query) => (dispatch, getState) => { export const queryTokenMeta = (index, query) => (dispatch, getState) => {
console.log('loading token meta', index, query);
const state = getState(); const state = getState();
const contractInstance = state.status.contract.instance; const contractInstance = state.status.contract.instance;
@ -176,7 +169,6 @@ export const queryTokenMeta = (index, query) => (dispatch, getState) => {
value: value.find(v => v !== 0) ? bytesToHex(value) : null value: value.find(v => v !== 0) ? bytesToHex(value) : null
}; };
console.log(`token meta loaded: #${index}`, value);
dispatch(setTokenMeta(index, meta)); dispatch(setTokenMeta(index, meta));
setTimeout(() => { setTimeout(() => {
@ -189,8 +181,6 @@ export const queryTokenMeta = (index, query) => (dispatch, getState) => {
}; };
export const addTokenMeta = (index, key, value) => (dispatch, getState) => { export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
console.log('add token meta', index, key, value);
const state = getState(); const state = getState();
const contractInstance = state.status.contract.instance; const contractInstance = state.status.contract.instance;
const token = state.tokens.tokens.find(t => t.index === index); const token = state.tokens.tokens.find(t => t.index === index);
@ -203,8 +193,6 @@ export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
.estimateGas(options, values) .estimateGas(options, values)
.then((gasEstimate) => { .then((gasEstimate) => {
options.gas = gasEstimate.mul(1.2).toFixed(0); options.gas = gasEstimate.mul(1.2).toFixed(0);
console.log(`addTokenMeta: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
return contractInstance.setMeta.postTransaction(options, values); return contractInstance.setMeta.postTransaction(options, values);
}) })
.catch((e) => { .catch((e) => {
@ -213,8 +201,6 @@ export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
}; };
export const addGithubhintURL = (from, key, url) => (dispatch, getState) => { export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
console.log('add githubhint url', key, url);
const state = getState(); const state = getState();
const contractInstance = state.status.githubhint.instance; const contractInstance = state.status.githubhint.instance;
@ -227,8 +213,6 @@ export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
.estimateGas(options, values) .estimateGas(options, values)
.then((gasEstimate) => { .then((gasEstimate) => {
options.gas = gasEstimate.mul(1.2).toFixed(0); options.gas = gasEstimate.mul(1.2).toFixed(0);
console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
return contractInstance.hintURL.postTransaction(options, values); return contractInstance.hintURL.postTransaction(options, values);
}) })
.catch((e) => { .catch((e) => {
@ -237,8 +221,6 @@ export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
}; };
export const unregisterToken = (index) => (dispatch, getState) => { export const unregisterToken = (index) => (dispatch, getState) => {
console.log('unregistering token', index);
const { contract } = getState().status; const { contract } = getState().status;
const { instance, owner } = contract; const { instance, owner } = contract;
@ -252,8 +234,6 @@ export const unregisterToken = (index) => (dispatch, getState) => {
.estimateGas(options, values) .estimateGas(options, values)
.then((gasEstimate) => { .then((gasEstimate) => {
options.gas = gasEstimate.mul(1.2).toFixed(0); options.gas = gasEstimate.mul(1.2).toFixed(0);
console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
return instance.unregister.postTransaction(options, values); return instance.unregister.postTransaction(options, values);
}) })
.catch((e) => { .catch((e) => {

View File

@ -19,16 +19,13 @@ import { connect } from 'react-redux';
import Tokens from './tokens'; import Tokens from './tokens';
import { loadTokens, queryTokenMeta, unregisterToken, addTokenMeta } from './actions'; import { loadTokens } from './actions';
class TokensContainer extends Component { class TokensContainer extends Component {
static propTypes = { static propTypes = {
isOwner: PropTypes.bool,
isLoading: PropTypes.bool, isLoading: PropTypes.bool,
tokens: PropTypes.array, tokens: PropTypes.array,
tokenCount: PropTypes.number, onLoadTokens: PropTypes.func
onLoadTokens: PropTypes.func,
accounts: PropTypes.array
}; };
componentDidMount () { componentDidMount () {
@ -36,7 +33,6 @@ class TokensContainer extends Component {
} }
render () { render () {
console.log(this.props);
return ( return (
<Tokens <Tokens
{ ...this.props } { ...this.props }
@ -46,30 +42,19 @@ class TokensContainer extends Component {
} }
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
const { list } = state.accounts; const { isLoading, tokens } = state.tokens;
const { isLoading, tokens, tokenCount } = state.tokens;
const { isOwner } = state.status.contract; const filteredTokens = tokens
.filter((token) => token && token.tla)
.map((token) => ({ tla: token.tla, owner: token.owner }));
return { isLoading, tokens, tokenCount, isOwner, accounts: list }; return { isLoading, tokens: filteredTokens };
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
onLoadTokens: () => { onLoadTokens: () => {
dispatch(loadTokens()); dispatch(loadTokens());
},
handleMetaLookup: (index, query) => {
dispatch(queryTokenMeta(index, query));
},
handleUnregister: (index) => {
dispatch(unregisterToken(index));
},
handleAddMeta: (index, key, value) => {
dispatch(addTokenMeta(index, key, value));
} }
}; };
}; };

View File

@ -23,13 +23,8 @@ import styles from './tokens.css';
export default class Tokens extends Component { export default class Tokens extends Component {
static propTypes = { static propTypes = {
handleAddMeta: PropTypes.func.isRequired,
handleUnregister: PropTypes.func.isRequired,
handleMetaLookup: PropTypes.func.isRequired,
isOwner: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired, isLoading: PropTypes.bool.isRequired,
tokens: PropTypes.array, tokens: PropTypes.array
accounts: PropTypes.array
}; };
render () { render () {
@ -45,24 +40,12 @@ export default class Tokens extends Component {
} }
renderTokens (tokens) { renderTokens (tokens) {
const { accounts, isOwner } = this.props; return tokens.map((token) => {
return tokens.map((token, index) => {
if (!token || !token.tla) {
return null;
}
const isTokenOwner = !!accounts.find((account) => account.address === token.owner);
return ( return (
<Token <Token
{ ...token } key={ token.tla }
handleUnregister={ this.props.handleUnregister } tla={ token.tla }
handleMetaLookup={ this.props.handleMetaLookup } />
handleAddMeta={ this.props.handleAddMeta }
key={ index }
isTokenOwner={ isTokenOwner }
isContractOwner={ isOwner } />
); );
}); });
} }