Full width Token Query Result (#2123)

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 (
       <Token
         fullWidth
+        handleMetaLookup={ this.props.handleQueryMetaLookup }
+        isMetaLoading={ this.props.metaLoading }
+        meta={ this.props.metaData }
         { ...data }
         />
     );

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);
+    });
+};

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 } />
       </div>
     );

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));
     }
   };
 };

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,

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;

js/src/dapps/tokenreg/Tokens/Token/token.js

@@ -59,7 +59,7 @@ export default class Token extends Component {
     }
 
     if (fullWidth) {
-      return (<div>
+      return (<div className={ styles['full-width'] }>
         { this.renderContent() }
       </div>);
     }
@@ -76,36 +76,41 @@ export default class Token extends Component {
 
     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 className={ styles['token-content'] }>
+        <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>
 
-      { this.renderMeta(meta) }
-      { this.renderAddMeta() }
-      { this.renderUnregister() }
+      <div className={ styles['token-meta'] }>
+        <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() }
+      </div>
 
       { this.renderMetaPending() }
       { this.renderMetaMined() }