From cf2ca21d2dd844f9bf533dc2fa08e44c4804103e Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Thu, 22 Sep 2016 18:44:41 +0100 Subject: [PATCH 1/4] added token queries per tla or address (#2123) --- js/src/dapps/tokenreg/Actions/Query/index.js | 1 + js/src/dapps/tokenreg/Actions/Query/query.js | 176 ++++++++++++++++++ .../tokenreg/Actions/Register/register.js | 2 +- js/src/dapps/tokenreg/Actions/actions.js | 51 +++++ js/src/dapps/tokenreg/Actions/component.js | 45 ++++- js/src/dapps/tokenreg/Actions/container.js | 14 +- js/src/dapps/tokenreg/Actions/reducer.js | 51 ++++- js/src/dapps/tokenreg/Inputs/validation.js | 18 +- 8 files changed, 340 insertions(+), 18 deletions(-) create mode 100644 js/src/dapps/tokenreg/Actions/Query/index.js create mode 100644 js/src/dapps/tokenreg/Actions/Query/query.js diff --git a/js/src/dapps/tokenreg/Actions/Query/index.js b/js/src/dapps/tokenreg/Actions/Query/index.js new file mode 100644 index 00000000000..6b4178d5851 --- /dev/null +++ b/js/src/dapps/tokenreg/Actions/Query/index.js @@ -0,0 +1 @@ +export default from './query'; diff --git a/js/src/dapps/tokenreg/Actions/Query/query.js b/js/src/dapps/tokenreg/Actions/Query/query.js new file mode 100644 index 00000000000..1ce9897f320 --- /dev/null +++ b/js/src/dapps/tokenreg/Actions/Query/query.js @@ -0,0 +1,176 @@ +import React, { Component, PropTypes } from 'react'; + +import { Dialog, FlatButton, SelectField, MenuItem } from 'material-ui'; + +import InputText from '../../Inputs/Text'; +import Loading from '../../Loading'; + +import { SIMPLE_TOKEN_ADDRESS_TYPE, SIMPLE_TLA_TYPE } from '../../Inputs/validation'; + +import styles from '../actions.css'; + +const initState = { + queryKey: 'tla', + form: { + valid: false, + value: '' + } +}; + +export default class QueryAction extends Component { + + static propTypes = { + show: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + handleQueryToken: PropTypes.func.isRequired, + + loading: PropTypes.bool.isRequired, + data: PropTypes.object, + notFound: PropTypes.bool + } + + state = initState; + + render () { + return ( + + { this.renderContent() } + + ); + } + + renderActions () { + let { loading, data, notFound } = this.props; + + if (loading) { + return ( + + ); + } + + let complete = data || notFound; + + if (complete) { + return ([ + + ]); + } + + const isValid = this.state.form.valid; + + return ([ + , + + ]); + } + + renderContent () { + let { loading, notFound, data } = this.props; + + if (loading) { + return ( + + ); + } + + if (notFound) { + return ( +

No token has been found in the registry...

+ ); + } + + if (data) { + return this.renderData(); + } + + return this.renderForm(); + } + + renderData () { + let { data } = this.props; + + return ( + 
{ JSON.stringify(data, null, 4) }
+ ); + } + + renderForm () { + return ( +
+ + + + + + { + this.state.queryKey !== 'tla' + ? () + : () + } +
+ ); + } + + onQueryKeyChange = (event, index, queryKey) => { + this.setState({ + queryKey, + form: { valid: false, value: '' } + }); + } + + onChange = (valid, value) => { + this.setState({ + form: { + valid, value + } + }); + } + + onQuery = () => { + let { queryKey, form } = this.state; + + this.props.handleQueryToken(queryKey, form.value); + } + + onClose = () => { + this.setState(initState); + this.props.onClose(); + } + +} diff --git a/js/src/dapps/tokenreg/Actions/Register/register.js b/js/src/dapps/tokenreg/Actions/Register/register.js index 834e5371e2e..3daff68ce0d 100644 --- a/js/src/dapps/tokenreg/Actions/Register/register.js +++ b/js/src/dapps/tokenreg/Actions/Register/register.js @@ -40,7 +40,7 @@ const initState = { } }; -export default class ActionTransfer extends Component { +export default class RegisterAction extends Component { static propTypes = { show: PropTypes.bool, diff --git a/js/src/dapps/tokenreg/Actions/actions.js b/js/src/dapps/tokenreg/Actions/actions.js index b9b8cbcea26..56555de0a78 100644 --- a/js/src/dapps/tokenreg/Actions/actions.js +++ b/js/src/dapps/tokenreg/Actions/actions.js @@ -71,3 +71,54 @@ export const registerToken = (tokenData) => (dispatch, getState) => { dispatch(setRegisterError(e)); }); }; + +export const SET_QUERY_LOADING = 'SET_QUERY_LOADING'; +export const setQueryLoading = (isLoading) => ({ + type: SET_QUERY_LOADING, + isLoading +}); + +export const SET_QUERY_RESULT = 'SET_QUERY_RESULT'; +export const setQueryResult = (data) => ({ + type: SET_QUERY_RESULT, + data +}); + +export const SET_QUERY_NOT_FOUND = 'SET_QUERY_NOT_FOUND'; +export const setQueryNotFound = () => ({ + type: SET_QUERY_NOT_FOUND +}); + +export const QUERY_RESET = 'QUERY_RESET'; +export const queryReset = () => ({ + type: QUERY_RESET +}); + +export const queryToken = (key, query) => (dispatch, getState) => { + let state = getState(); + let contractInstance = state.status.contract.instance; + + let contractFunc = (key === 'tla') ? 'fromTLA' : 'fromAddress'; + + dispatch(setQueryLoading(true)); + + contractInstance[contractFunc] + .call({}, [ query ]) + .then((result) => { + let data = { + id: result[0], + address: result[1], + base: result[2], + name: result[3], + owner: result[4] + }; + + dispatch(setQueryResult(data)); + dispatch(setQueryLoading(false)); + }, () => { + dispatch(setQueryNotFound()); + dispatch(setQueryLoading(false)); + }); +}; + + diff --git a/js/src/dapps/tokenreg/Actions/component.js b/js/src/dapps/tokenreg/Actions/component.js index 3a0bc482351..3f9eb945648 100644 --- a/js/src/dapps/tokenreg/Actions/component.js +++ b/js/src/dapps/tokenreg/Actions/component.js @@ -1,34 +1,41 @@ import React, { Component, PropTypes } from 'react'; import { RaisedButton } from 'material-ui'; +import ActionSearchIcon from 'material-ui/svg-icons/action/search'; import ContentSendIcon from 'material-ui/svg-icons/content/send'; import Register from './Register'; +import Query from './Query'; import styles from './actions.css'; -const REGISTER = 'REGISTER'; +const REGISTER_ACTION = 'REGISTER_ACTION'; +const QUERY_ACTION = 'QUERY_ACTION'; export default class Actions extends Component { static propTypes = { handleRegisterToken: PropTypes.func, handleRegisterClose: PropTypes.func, + register: PropTypes.object, - register: PropTypes.object + handleQueryToken: PropTypes.func, + handleQueryClose: PropTypes.func, + query: PropTypes.object }; state = { show: { - [ REGISTER ]: false + [ REGISTER_ACTION ]: false, + [ QUERY_ACTION ]: false } } constructor () { super(); - this.onRegisterClose = this.onRegisterClose.bind(this); - this.onShow = this.onShow.bind(this, REGISTER); + this.onShowRegister = this.onShow.bind(this, REGISTER_ACTION); + this.onShowQuery = this.onShow.bind(this, QUERY_ACTION); } render () { @@ -39,25 +46,44 @@ export default class Actions extends Component { icon={ } label='Register Token' primary - onTouchTap={ this.onShow } /> + onTouchTap={ this.onShowRegister } /> + + } + label='Search Token' + primary + onTouchTap={ this.onShowQuery } /> + + ); } - onRegisterClose () { - this.onHide(REGISTER); + onRegisterClose = () => { + this.onHide(REGISTER_ACTION); this.props.handleRegisterClose(); } + onQueryClose = () => { + this.onHide(QUERY_ACTION); + this.props.handleQueryClose(); + } + onShow (key) { this.setState({ show: { + ...this.state.show, [ key ]: true } }); @@ -66,6 +92,7 @@ export default class Actions extends Component { onHide (key) { this.setState({ show: { + ...this.state.show, [ key ]: false } }); diff --git a/js/src/dapps/tokenreg/Actions/container.js b/js/src/dapps/tokenreg/Actions/container.js index e44fdc0a1f8..440adabcc06 100644 --- a/js/src/dapps/tokenreg/Actions/container.js +++ b/js/src/dapps/tokenreg/Actions/container.js @@ -3,9 +3,7 @@ import { connect } from 'react-redux'; import Actions from './component'; -import { registerToken, registerReset } from './actions'; - -// import { loadTokens, queryTokenMeta } from './actions'; +import { registerToken, registerReset, queryToken, queryReset } from './actions'; class TokensContainer extends Component { @@ -17,9 +15,9 @@ class TokensContainer extends Component { } const mapStateToProps = (state) => { - const { register } = state.actions; + const { register, query } = state.actions; - return { register }; + return { register, query }; }; const mapDispatchToProps = (dispatch) => { @@ -29,6 +27,12 @@ const mapDispatchToProps = (dispatch) => { }, handleRegisterClose: () => { dispatch(registerReset()); + }, + handleQueryToken: (key, query) => { + dispatch(queryToken(key, query)); + }, + handleQueryClose: () => { + dispatch(queryReset()); } }; }; diff --git a/js/src/dapps/tokenreg/Actions/reducer.js b/js/src/dapps/tokenreg/Actions/reducer.js index e9d0ac30671..1900940901d 100644 --- a/js/src/dapps/tokenreg/Actions/reducer.js +++ b/js/src/dapps/tokenreg/Actions/reducer.js @@ -2,7 +2,12 @@ import { SET_REGISTER_SENDING, SET_REGISTER_ERROR, REGISTER_RESET, - REGISTER_COMPLETED + REGISTER_COMPLETED, + + SET_QUERY_LOADING, + SET_QUERY_RESULT, + SET_QUERY_NOT_FOUND, + QUERY_RESET } from './actions'; const initialState = { @@ -10,6 +15,11 @@ const initialState = { sending: false, error: null, complete: false + }, + query: { + loading: false, + data: null, + notFound: false } }; @@ -60,6 +70,45 @@ export default (state = initialState, action) => { }; } + case SET_QUERY_LOADING: { + return { + ...state, + query: { + ...state.query, + loading: action.isLoading + } + }; + } + + case SET_QUERY_RESULT: { + return { + ...state, + query: { + ...state.query, + data: action.data + } + }; + } + + case SET_QUERY_NOT_FOUND: { + return { + ...state, + query: { + ...state.query, + notFound: true + } + }; + } + + case QUERY_RESET: { + return { + ...state, + query: { + ...initialState.query + } + }; + } + default: return state; } diff --git a/js/src/dapps/tokenreg/Inputs/validation.js b/js/src/dapps/tokenreg/Inputs/validation.js index 55d178eccf1..1aa9a629d5b 100644 --- a/js/src/dapps/tokenreg/Inputs/validation.js +++ b/js/src/dapps/tokenreg/Inputs/validation.js @@ -12,7 +12,9 @@ const { export const ADDRESS_TYPE = 'ADDRESS_TYPE'; export const TOKEN_ADDRESS_TYPE = 'TOKEN_ADDRESS_TYPE'; +export const SIMPLE_TOKEN_ADDRESS_TYPE = 'SIMPLE_TOKEN_ADDRESS_TYPE'; export const TLA_TYPE = 'TLA_TYPE'; +export const SIMPLE_TLA_TYPE = 'SIMPLE_TLA_TYPE'; export const UINT_TYPE = 'UINT_TYPE'; export const STRING_TYPE = 'STRING_TYPE'; export const HEX_TYPE = 'HEX_TYPE'; @@ -49,10 +51,12 @@ const validateAddress = (address) => { }; }; -const validateTokenAddress = (address, contract) => { +const validateTokenAddress = (address, contract, simple) => { let addressValidation = validateAddress(address); if (!addressValidation.valid) return addressValidation; + if (simple) return addressValidation; + return getTokenTotalSupply(address) .then(balance => { if (balance === null) { @@ -75,7 +79,7 @@ const validateTokenAddress = (address, contract) => { }); }; -const validateTLA = (tla, contract) => { +const validateTLA = (tla, contract, simple) => { if (tla.toString().length !== 3) { return { error: ERRORS.invalidTLA, @@ -83,6 +87,14 @@ const validateTLA = (tla, contract) => { }; } + if (simple) { + return { + value: tla.toString().toUpperCase(), + error: null, + valid: true + }; + } + return contract.instance .fromTLA.call({}, [ tla ]) .then(() => ({ @@ -162,7 +174,9 @@ const validateURL = (string) => { export const validate = (value, type, contract) => { if (type === ADDRESS_TYPE) return validateAddress(value); if (type === TOKEN_ADDRESS_TYPE) return validateTokenAddress(value, contract); + if (type === SIMPLE_TOKEN_ADDRESS_TYPE) return validateTokenAddress(value, contract, true); if (type === TLA_TYPE) return validateTLA(value, contract); + if (type === SIMPLE_TLA_TYPE) return validateTLA(value, contract, true); if (type === UINT_TYPE) return validateUint(value); if (type === STRING_TYPE) return validateString(value); if (type === HEX_TYPE) return validateHex(value); From eb8f0e1061fa40dc2bedfb77e173dc4668773711 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Thu, 22 Sep 2016 19:20:27 +0100 Subject: [PATCH 2/4] added token view in query result (#2123) --- js/src/dapps/tokenreg/Actions/Query/query.js | 6 +- js/src/dapps/tokenreg/Actions/actions.js | 35 +++++++- js/src/dapps/tokenreg/Tokens/Token/token.css | 11 ++- js/src/dapps/tokenreg/Tokens/Token/token.js | 86 ++++++++++++-------- 4 files changed, 97 insertions(+), 41 deletions(-) diff --git a/js/src/dapps/tokenreg/Actions/Query/query.js b/js/src/dapps/tokenreg/Actions/Query/query.js index 1ce9897f320..098919bab0b 100644 --- a/js/src/dapps/tokenreg/Actions/Query/query.js +++ b/js/src/dapps/tokenreg/Actions/Query/query.js @@ -4,6 +4,7 @@ import { Dialog, FlatButton, SelectField, MenuItem } from 'material-ui'; import InputText from '../../Inputs/Text'; import Loading from '../../Loading'; +import Token from '../../Tokens/Token'; import { SIMPLE_TOKEN_ADDRESS_TYPE, SIMPLE_TLA_TYPE } from '../../Inputs/validation'; @@ -108,7 +109,10 @@ export default class QueryAction extends Component { let { data } = this.props; return ( - 
{ JSON.stringify(data, null, 4) }
+ ); } diff --git a/js/src/dapps/tokenreg/Actions/actions.js b/js/src/dapps/tokenreg/Actions/actions.js index 56555de0a78..f9c030433ba 100644 --- a/js/src/dapps/tokenreg/Actions/actions.js +++ b/js/src/dapps/tokenreg/Actions/actions.js @@ -1,3 +1,5 @@ +import { getTokenTotalSupply } from '../utils'; + export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING'; export const setRegisterSending = (isSending) => ({ type: SET_REGISTER_SENDING, @@ -106,13 +108,40 @@ export const queryToken = (key, query) => (dispatch, getState) => { .call({}, [ query ]) .then((result) => { let data = { - id: result[0], - address: result[1], - base: result[2], + id: result[0].toNumber(), + base: result[2].toNumber(), name: result[3], owner: result[4] }; + if (key === 'tla') { + data.tla = query; + data.address = result[1]; + } + + if (key === 'address') { + data.address = query; + data.tla = result[1]; + } + + return data; + }) + .then(data => { + return getTokenTotalSupply(data.address) + .then(totalSupply => { + data.totalSupply = totalSupply; + return data; + }); + }) + .then(data => { + if (data.totalSupply === null) { + dispatch(setQueryNotFound()); + dispatch(setQueryLoading(false)); + + return false; + } + + data.totalSupply = data.totalSupply.toNumber(); dispatch(setQueryResult(data)); dispatch(setQueryLoading(false)); }, () => { diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.css b/js/src/dapps/tokenreg/Tokens/Token/token.css index 96bb70708be..80ea4fcaa0c 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.css +++ b/js/src/dapps/tokenreg/Tokens/Token/token.css @@ -5,9 +5,16 @@ width: 20rem; margin: 1rem; padding: 1rem; + padding-bottom: 1.5rem; +} + +.token-container { + display: flex; + flex: 1; + flex-direction: column; + width: 100%; flex-direction: column; align-items: center; - padding-bottom: 1.5rem; } .loading { @@ -18,7 +25,7 @@ padding-bottom: 0.75rem; } -.token > div { +.token-container > div { max-width: 100%; } diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.js b/js/src/dapps/tokenreg/Tokens/Token/token.js index 528668e17af..4cb0fd54643 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.js +++ b/js/src/dapps/tokenreg/Tokens/Token/token.js @@ -38,7 +38,9 @@ export default class Token extends Component { meta: PropTypes.object }), metaPending: PropTypes.bool, - metaMined: PropTypes.bool + metaMined: PropTypes.bool, + + fullWidth: PropTypes.bool }; state = { @@ -46,7 +48,7 @@ export default class Token extends Component { }; render () { - const { isLoading, address, tla, base, name, meta, owner, totalSupply } = this.props; + const { isLoading, fullWidth } = this.props; if (isLoading) { return ( @@ -56,43 +58,57 @@ export default class Token extends Component { ); } + if (fullWidth) { + return (
+ { this.renderContent() } +
); + } + return (
- { this.renderIsPending() } -
{ tla }
-
"{ name }"
- - { this.renderBase(base) } - { this.renderTotalSupply(totalSupply, base, tla) } - { this.renderAddress(address) } - { this.renderOwner(owner) } - -
- - - { this.renderMetaKeyItems() } - - - - } - primary - fullWidth - onTouchTap={ this.onMetaLookup } /> -
+ { this.renderContent() } + +
); + } - { this.renderMeta(meta) } - { this.renderAddMeta() } - { this.renderUnregister() } + renderContent () { + const { address, tla, base, name, meta, owner, totalSupply } = this.props; - { this.renderMetaPending() } - { this.renderMetaMined() } - + return (
+ { this.renderIsPending() } +
{ tla }
+
"{ name }"
+ + { this.renderBase(base) } + { this.renderTotalSupply(totalSupply, base, tla) } + { this.renderAddress(address) } + { this.renderOwner(owner) } + +
+ + + { this.renderMetaKeyItems() } + + + + } + primary + fullWidth + onTouchTap={ this.onMetaLookup } /> +
+ + { this.renderMeta(meta) } + { this.renderAddMeta() } + { this.renderUnregister() } + + { this.renderMetaPending() } + { this.renderMetaMined() }
); } From 48467fc7dfe054dad23dd5fd3b44126ce53187f8 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Fri, 23 Sep 2016 10:25:35 +0100 Subject: [PATCH 3/4] Full width Token Query Result (#2123) --- js/src/dapps/tokenreg/Actions/Query/query.js | 8 ++- js/src/dapps/tokenreg/Actions/actions.js | 47 ++++++++++++++- js/src/dapps/tokenreg/Actions/component.js | 2 + js/src/dapps/tokenreg/Actions/container.js | 5 +- js/src/dapps/tokenreg/Actions/reducer.js | 26 +++++++- js/src/dapps/tokenreg/Tokens/Token/token.css | 29 ++++++--- js/src/dapps/tokenreg/Tokens/Token/token.js | 63 +++++++++++--------- 7 files changed, 139 insertions(+), 41 deletions(-) diff --git a/js/src/dapps/tokenreg/Actions/Query/query.js b/js/src/dapps/tokenreg/Actions/Query/query.js index 098919bab0b..d35bff5f28c 100644 --- a/js/src/dapps/tokenreg/Actions/Query/query.js +++ b/js/src/dapps/tokenreg/Actions/Query/query.js @@ -24,10 +24,13 @@ export default class QueryAction extends Component { show: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, handleQueryToken: PropTypes.func.isRequired, + handleQueryMetaLookup: PropTypes.func.isRequired, loading: PropTypes.bool.isRequired, data: PropTypes.object, - notFound: PropTypes.bool + notFound: PropTypes.bool, + metaLoading: PropTypes.bool, + metaData: PropTypes.object } state = initState; @@ -111,6 +114,9 @@ export default class QueryAction extends Component { return ( ); diff --git a/js/src/dapps/tokenreg/Actions/actions.js b/js/src/dapps/tokenreg/Actions/actions.js index 3a8d89b5ad1..e8aa44d398a 100644 --- a/js/src/dapps/tokenreg/Actions/actions.js +++ b/js/src/dapps/tokenreg/Actions/actions.js @@ -1,5 +1,7 @@ import { getTokenTotalSupply } from '../utils'; +const { sha3, bytesToHex } = window.parity.api.util; + export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING'; export const setRegisterSending = (isSending) => ({ type: SET_REGISTER_SENDING, @@ -96,6 +98,18 @@ export const queryReset = () => ({ type: QUERY_RESET }); +export const SET_QUERY_META_LOADING = 'SET_QUERY_META_LOADING'; +export const setQueryMetaLoading = (isLoading) => ({ + type: SET_QUERY_META_LOADING, + isLoading +}); + +export const SET_QUERY_META = 'SET_QUERY_META'; +export const setQueryMeta = (data) => ({ + type: SET_QUERY_META, + data +}); + export const queryToken = (key, query) => (dispatch, getState) => { let state = getState(); let contractInstance = state.status.contract.instance; @@ -108,7 +122,7 @@ export const queryToken = (key, query) => (dispatch, getState) => { .call({}, [ query ]) .then((result) => { let data = { - id: result[0].toNumber(), + index: result[0].toNumber(), base: result[2].toNumber(), name: result[3], owner: result[4] @@ -149,3 +163,34 @@ export const queryToken = (key, query) => (dispatch, getState) => { dispatch(setQueryLoading(false)); }); }; + +export const queryTokenMeta = (id, query) => (dispatch, getState) => { + console.log('loading token meta', query); + + let state = getState(); + let contractInstance = state.status.contract.instance; + + let key = sha3(query); + + let startDate = Date.now(); + dispatch(setQueryMetaLoading(true)); + + contractInstance + .meta + .call({}, [ id, key ]) + .then((value) => { + let 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); + }); +}; diff --git a/js/src/dapps/tokenreg/Actions/component.js b/js/src/dapps/tokenreg/Actions/component.js index 3f9eb945648..c22228369e9 100644 --- a/js/src/dapps/tokenreg/Actions/component.js +++ b/js/src/dapps/tokenreg/Actions/component.js @@ -21,6 +21,7 @@ export default class Actions extends Component { handleQueryToken: PropTypes.func, handleQueryClose: PropTypes.func, + handleQueryMetaLookup: PropTypes.func, query: PropTypes.object }; @@ -65,6 +66,7 @@ export default class Actions extends Component { show={ this.state.show[ QUERY_ACTION ] } onClose={ this.onQueryClose } handleQueryToken={ this.props.handleQueryToken } + handleQueryMetaLookup={ this.props.handleQueryMetaLookup } { ...this.props.query } /> ); diff --git a/js/src/dapps/tokenreg/Actions/container.js b/js/src/dapps/tokenreg/Actions/container.js index 440adabcc06..81f4d8e1e6f 100644 --- a/js/src/dapps/tokenreg/Actions/container.js +++ b/js/src/dapps/tokenreg/Actions/container.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import Actions from './component'; -import { registerToken, registerReset, queryToken, queryReset } from './actions'; +import { registerToken, registerReset, queryToken, queryReset, queryTokenMeta } from './actions'; class TokensContainer extends Component { @@ -33,6 +33,9 @@ const mapDispatchToProps = (dispatch) => { }, handleQueryClose: () => { dispatch(queryReset()); + }, + handleQueryMetaLookup: (id, query) => { + dispatch(queryTokenMeta(id, query)); } }; }; diff --git a/js/src/dapps/tokenreg/Actions/reducer.js b/js/src/dapps/tokenreg/Actions/reducer.js index 1900940901d..f7f66fa216d 100644 --- a/js/src/dapps/tokenreg/Actions/reducer.js +++ b/js/src/dapps/tokenreg/Actions/reducer.js @@ -7,6 +7,8 @@ import { SET_QUERY_LOADING, SET_QUERY_RESULT, SET_QUERY_NOT_FOUND, + SET_QUERY_META_LOADING, + SET_QUERY_META, QUERY_RESET } from './actions'; @@ -19,7 +21,9 @@ const initialState = { query: { loading: false, data: null, - notFound: false + notFound: false, + metaLoading: false, + metaData: null } }; @@ -100,6 +104,26 @@ export default (state = initialState, action) => { }; } + case SET_QUERY_META_LOADING: { + return { + ...state, + query: { + ...state.query, + metaLoading: action.isLoading + } + }; + } + + case SET_QUERY_META: { + return { + ...state, + query: { + ...state.query, + metaData: action.data + } + }; + } + case QUERY_RESET: { return { ...state, diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.css b/js/src/dapps/tokenreg/Tokens/Token/token.css index 80ea4fcaa0c..038fffa441a 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.css +++ b/js/src/dapps/tokenreg/Tokens/Token/token.css @@ -8,15 +8,32 @@ padding-bottom: 1.5rem; } -.token-container { - display: flex; - flex: 1; - flex-direction: column; +.token-container, .token-content, .token-meta { width: 100%; + + display: flex; flex-direction: column; align-items: center; } +.token-container { + flex: 1; +} + +.full-width .token-container { + flex-direction: row; + align-items: flex-start; +} + +.full-width .token-content { + width: 20rem; + margin-right: 1rem; +} + +.token-content > div { + max-width: 100%; +} + .loading { margin: 1rem 0; } @@ -25,10 +42,6 @@ padding-bottom: 0.75rem; } -.token-container > div { - max-width: 100%; -} - .title { font-size: 2rem; padding: 0 0 0.5rem; diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.js b/js/src/dapps/tokenreg/Tokens/Token/token.js index 4cb0fd54643..6583f87b77d 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.js +++ b/js/src/dapps/tokenreg/Tokens/Token/token.js @@ -59,7 +59,7 @@ export default class Token extends Component { } if (fullWidth) { - return (
+ return (
{ this.renderContent() }
); } @@ -76,36 +76,41 @@ export default class Token extends Component { return (
{ this.renderIsPending() } -
{ tla }
-
"{ name }"
- - { this.renderBase(base) } - { this.renderTotalSupply(totalSupply, base, tla) } - { this.renderAddress(address) } - { this.renderOwner(owner) } - -
- - - { this.renderMetaKeyItems() } - - - - } - primary - fullWidth - onTouchTap={ this.onMetaLookup } /> + +
+
{ tla }
+
"{ name }"
+ + { this.renderBase(base) } + { this.renderTotalSupply(totalSupply, base, tla) } + { this.renderAddress(address) } + { this.renderOwner(owner) }
- { this.renderMeta(meta) } - { this.renderAddMeta() } - { this.renderUnregister() } +
+
+ + + { this.renderMetaKeyItems() } + + + + } + primary + fullWidth + onTouchTap={ this.onMetaLookup } /> +
+ + { this.renderMeta(meta) } + { this.renderAddMeta() } + { this.renderUnregister() } +
{ this.renderMetaPending() } { this.renderMetaMined() } From 227e713cdb2d5730ecb962464e68f51ad69f0daa Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Fri, 23 Sep 2016 12:08:04 +0100 Subject: [PATCH 4/4] Tweaked TokeReg dApp background (#2123) --- js/src/dapps/tokenreg/Application/application.js | 12 +++++++++++- js/src/dapps/tokenreg/Status/status.css | 2 +- js/src/dapps/tokenreg/Tokens/Token/token.css | 15 +++++++++++++++ js/src/dapps/tokenreg/Tokens/Token/token.js | 7 +++++-- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/js/src/dapps/tokenreg/Application/application.js b/js/src/dapps/tokenreg/Application/application.js index 527b9d578d5..4f7e4b57fc6 100644 --- a/js/src/dapps/tokenreg/Application/application.js +++ b/js/src/dapps/tokenreg/Application/application.js @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from 'react'; +import GeoPattern from 'geopattern'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import Loading from '../Loading'; @@ -35,7 +36,7 @@ export default class Application extends Component { } return ( -
+
@@ -47,6 +48,15 @@ export default class Application extends Component { ); } + getBackgroundStyle () { + let seed = this.props.contract ? this.props.contract.address : '0x0'; + const url = GeoPattern.generate(seed).toDataUrl(); + + return { + background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ${url}` + }; + } + getChildContext () { return { muiTheme diff --git a/js/src/dapps/tokenreg/Status/status.css b/js/src/dapps/tokenreg/Status/status.css index 51849ac8e4e..8a64e7ad81f 100644 --- a/js/src/dapps/tokenreg/Status/status.css +++ b/js/src/dapps/tokenreg/Status/status.css @@ -15,7 +15,7 @@ /* along with Parity. If not, see . */ .status { - background: #2ecc71; + background: rgba(46, 204, 113, 0.75); color: rgba(255, 255, 255, 1); padding: 4em 0 2em 0; diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.css b/js/src/dapps/tokenreg/Tokens/Token/token.css index 038fffa441a..8c22d7286b4 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.css +++ b/js/src/dapps/tokenreg/Tokens/Token/token.css @@ -16,6 +16,21 @@ align-items: center; } +.token-content, .token-meta { + z-index: 50; +} + +.token-bg { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + -webkit-filter: blur(5px); + filter: blur(5px); + background-color: rgba(255, 255, 255, 0.85); +} + .token-container { flex: 1; } diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.js b/js/src/dapps/tokenreg/Tokens/Token/token.js index 6583f87b77d..63d8f2b1c9d 100644 --- a/js/src/dapps/tokenreg/Tokens/Token/token.js +++ b/js/src/dapps/tokenreg/Tokens/Token/token.js @@ -65,7 +65,10 @@ export default class Token extends Component { } return (
- + +
{ this.renderContent() }
); @@ -151,7 +154,7 @@ export default class Token extends Component { return ( + label='Total' /> ); }