added token view in query result (#2123)

openethereum · Sep 22, 2016 · eb8f0e1 · eb8f0e1
1 parent cf2ca21
commit eb8f0e1
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 41 deletions.
diff --git 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 (
-      <pre>{ JSON.stringify(data, null, 4) }</pre>
+      <Token
+        fullWidth
+        { ...data }
+        />
     );
   }
 

diff --git 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
@@ -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
@@ -38,15 +38,17 @@ export default class Token extends Component {
       meta: PropTypes.object
     }),
     metaPending: PropTypes.bool,
-    metaMined: PropTypes.bool
+    metaMined: PropTypes.bool,
+
+    fullWidth: PropTypes.bool
   };
 
   state = {
     metaKeyIndex: 0
   };
 
   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 (<div>
+        { this.renderContent() }
+      </div>);
+    }
+
     return (<div>
       <Paper zDepth={ 2 } className={ styles.token }>
-        { this.renderIsPending() }
-        <div className={ styles.title }>{ tla }</div>
-        <div className={ styles.name }>"{ name }"</div>
-
-        { this.renderBase(base) }
-        { this.renderTotalSupply(totalSupply, base, tla) }
-        { this.renderAddress(address) }
-        { this.renderOwner(owner) }
-
-        <div className={ styles['meta-form'] }>
-          <SelectField
-            floatingLabelText='Choose the meta-data to look-up'
-            fullWidth
-            value={ this.state.metaKeyIndex }
-            onChange={ this.onMetaKeyChange }>
-
-            { this.renderMetaKeyItems() }
-
-          </SelectField>
-
-          <RaisedButton
-            label='Lookup'
-            icon={ <FindIcon /> }
-            primary
-            fullWidth
-            onTouchTap={ this.onMetaLookup } />
-        </div>
+        { this.renderContent() }
+      </Paper>
+    </div>);
+  }
 
-        { this.renderMeta(meta) }
-        { this.renderAddMeta() }
-        { this.renderUnregister() }
+  renderContent () {
+    const { address, tla, base, name, meta, owner, totalSupply } = this.props;
 
-        { this.renderMetaPending() }
-        { this.renderMetaMined() }
-      </Paper>
+    return (<div className={ styles['token-container'] }>
+      { this.renderIsPending() }
+      <div className={ styles.title }>{ tla }</div>
+      <div className={ styles.name }>"{ name }"</div>
+
+      { this.renderBase(base) }
+      { this.renderTotalSupply(totalSupply, base, tla) }
+      { this.renderAddress(address) }
+      { this.renderOwner(owner) }
+
+      <div className={ styles['meta-form'] }>
+        <SelectField
+          floatingLabelText='Choose the meta-data to look-up'
+          fullWidth
+          value={ this.state.metaKeyIndex }
+          onChange={ this.onMetaKeyChange }>
+
+          { this.renderMetaKeyItems() }
+
+        </SelectField>
+
+        <RaisedButton
+          label='Lookup'
+          icon={ <FindIcon /> }
+          primary
+          fullWidth
+          onTouchTap={ this.onMetaLookup } />
+      </div>
+
+      { this.renderMeta(meta) }
+      { this.renderAddMeta() }
+      { this.renderUnregister() }
+
+      { this.renderMetaPending() }
+      { this.renderMetaMined() }
     </div>);
   }