Merge pull request #2266 from ethcore/ng-tokenreg-queries

Dapp - Tokereg ; Query Tokens from TLA or Address

js/src/dapps/tokenreg/Actions/Query/index.js

@@ -0,0 +1 @@
+export default from './query';

js/src/dapps/tokenreg/Actions/Query/query.js

@@ -0,0 +1,186 @@
+import React, { Component, PropTypes } from 'react';
+
+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';
+
+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,
+    handleQueryMetaLookup: PropTypes.func.isRequired,
+
+    loading: PropTypes.bool.isRequired,
+    data: PropTypes.object,
+    notFound: PropTypes.bool,
+    metaLoading: PropTypes.bool,
+    metaData: PropTypes.object
+  }
+
+  state = initState;
+
+  render () {
+    return (
+      <Dialog
+        title={ 'search for a token' }
+        open={ this.props.show }
+        className={ styles.dialog }
+        onRequestClose={ this.onClose }
+        actions={ this.renderActions() } >
+        { this.renderContent() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    let { loading, data, notFound } = this.props;
+
+    if (loading) {
+      return (
+        <FlatButton
+          label='Loading...'
+          primary
+          disabled />
+      );
+    }
+
+    let complete = data || notFound;
+
+    if (complete) {
+      return ([
+        <FlatButton
+          label='Close'
+          primary
+          onTouchTap={ this.onClose } />
+      ]);
+    }
+
+    const isValid = this.state.form.valid;
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.onClose } />,
+      <FlatButton
+        label='Query'
+        primary
+        disabled={ !isValid }
+        onTouchTap={ this.onQuery } />
+    ]);
+  }
+
+  renderContent () {
+    let { loading, notFound, data } = this.props;
+
+    if (loading) {
+      return (
+        <Loading size={ 1 } />
+      );
+    }
+
+    if (notFound) {
+      return (
+        <p>No token has been found in the registry...</p>
+      );
+    }
+
+    if (data) {
+      return this.renderData();
+    }
+
+    return this.renderForm();
+  }
+
+  renderData () {
+    let { data } = this.props;
+
+    return (
+      <Token
+        fullWidth
+        handleMetaLookup={ this.props.handleQueryMetaLookup }
+        isMetaLoading={ this.props.metaLoading }
+        meta={ this.props.metaData }
+        { ...data }
+        />
+    );
+  }
+
+  renderForm () {
+    return (
+      <div>
+        <SelectField
+          floatingLabelText='Select which field to query'
+          fullWidth
+          value={ this.state.queryKey }
+          onChange={ this.onQueryKeyChange }>
+          <MenuItem value='tla' label='TLA' primaryText='TLA' />
+          <MenuItem value='address' label='Address' primaryText='Address' />
+        </SelectField>
+
+        {
+          this.state.queryKey !== 'tla'
+          ? (<InputText
+            key={ 0 }
+
+            floatingLabelText="Token's address"
+            hintText='0xdeadbeef...'
+
+            validationType={ SIMPLE_TOKEN_ADDRESS_TYPE }
+            onChange={ this.onChange } />)
+          : (<InputText
+            key={ 1 }
+
+            floatingLabelText="Token's TLA"
+            hintText='GAV'
+
+            validationType={ SIMPLE_TLA_TYPE }
+            onChange={ this.onChange } />)
+        }
+      </div>
+    );
+  }
+
+  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();
+  }
+
+}

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,

js/src/dapps/tokenreg/Actions/actions.js

@@ -1,3 +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,
@@ -71,3 +75,122 @@ 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 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;
+
+  let contractFunc = (key === 'tla') ? 'fromTLA' : 'fromAddress';
+
+  dispatch(setQueryLoading(true));
+
+  contractInstance[contractFunc]
+    .call({}, [ query ])
+    .then((result) => {
+      let data = {
+        index: 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));
+    }, () => {
+      dispatch(setQueryNotFound());
+      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);
+    });
+};