notaries list modal

8 years ago · e6d97f0483
5 changed files with 181 additions and 7 deletions
--- a/react/package.json
+++ b/react/package.json
@ -37,6 +37,7 @@
    "bluebird": "^3.5.0",
    "express": "^4.14.0",
    "file-loader": "^0.10.0",
+    "rc-tree": "^1.4.6",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-hot-loader": "^1.3.0",
--- a/react/src/components/dashboard/walletsData.js
+++ b/react/src/components/dashboard/walletsData.js
@ -7,12 +7,14 @@ import {
  getDexNotaries,
  toggleDashboardTxInfoModal,
  getBasiliskTransactionsList,
-  changeMainBasiliskAddress
+  changeMainBasiliskAddress,
+  displayNotariesModal
 } from '../../actions/actionCreators';
 import Store from '../../store';

 import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
 import WalletsBasiliskConnection from './walletsBasiliskConnection';
+import WalletsNotariesList from './walletsNotariesList';

 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
@ -43,19 +45,21 @@ class WalletsData extends React.Component {
  }

  updateSocketsData(data) {
-    console.log(data);
-
-    if (data && data.message && data.message.shepherd.iguanaAPI && data.message.shepherd.iguanaAPI.totalStackLength) {
+    if (data && data.message && data.message.shepherd.iguanaAPI &&
+        data.message.shepherd.iguanaAPI.totalStackLength) {
      this.setState(Object.assign({}, this.state, {
        totalStackLength: data.message.shepherd.iguanaAPI.totalStackLength,
      }));
    }
-    if (data && data.message && data.message.shepherd.iguanaAPI && data.message.shepherd.iguanaAPI.currentStackLength) {
+    if (data && data.message && data.message.shepherd.iguanaAPI &&
+        data.message.shepherd.iguanaAPI.currentStackLength) {
      this.setState(Object.assign({}, this.state, {
        currentStackLength: data.message.shepherd.iguanaAPI.currentStackLength,
      }));
    }
-    if (data && data.message && data.message.shepherd.method && data.message.shepherd.method === 'cache-one' && data.message.shepherd.status === 'done') {
+    if (data && data.message && data.message.shepherd.method &&
+        data.message.shepherd.method === 'cache-one' &&
+        data.message.shepherd.status === 'done') {
      Store.dispatch(basiliskRefresh(false));
    }
  }
@ -80,6 +84,7 @@ class WalletsData extends React.Component {

  getDexNotariesAction() {
    Store.dispatch(getDexNotaries(this.props.ActiveCoin.coin));
+    Store.dispatch(displayNotariesModal(true));
  }

  updateInput(e) {
@ -329,6 +334,7 @@ class WalletsData extends React.Component {
        <span>
          <WalletsBasiliskRefresh {...this.props} />
          <WalletsBasiliskConnection {...this.props} />
+          <WalletsNotariesList {...this.props} />
          <div data-edexcoin="COIN" id="edexcoin_dashboardinfo">
            <div className="col-xs-12 margin-top-20">
              <div className="panel nav-tabs-horizontal">
--- a/react/src/components/dashboard/walletsNotariesList.js
+++ b/react/src/components/dashboard/walletsNotariesList.js
@ -0,0 +1,120 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+import { toggleDashboardTxInfoModal, displayNotariesModal } from '../../actions/actionCreators';
+import Store from '../../store';
+import Tree, { TreeNode } from 'rc-tree';
+
+function animate(node, show, done) {
+  let height = node.offsetHeight;
+
+  return cssAnimation(node, 'collapse', {
+    start() {
+      if (!show) {
+        node.style.height = `${node.offsetHeight}px`;
+      } else {
+        height = node.offsetHeight;
+        node.style.height = 0;
+      }
+    },
+    active() {
+      node.style.height = `${show ? height : 0}px`;
+    },
+    end() {
+      node.style.height = '';
+      done();
+    },
+  });
+}
+
+const animation = {
+  enter(node, done) {
+    return animate(node, true, done);
+  },
+  leave(node, done) {
+    return animate(node, false, done);
+  },
+  appear(node, done) {
+    return animate(node, true, done);
+  },
+};
+
+class WalletsNotariesList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: false,
+    };
+    this.closeNotariesModal = this.closeNotariesModal.bind(this);
+  }
+
+  closeNotariesModal() {
+    Store.dispatch(displayNotariesModal(false));
+  }
+
+  renderNotariesFetching() {
+    if (!this.props.ActiveCoin.notaries) {
+      return (
+        <div>Fetching notaries list data...</div>
+      );
+    } else {
+      return (
+        <div>Notaries list. Total nodes count: {this.props.ActiveCoin.notaries.numnotaries}</div>
+      );
+    }
+  }
+
+  renderNotariesList() {
+    if (this.props.ActiveCoin.notaries && this.props.ActiveCoin.notaries.notaries && this.props.ActiveCoin.notaries.notaries.length) {
+      return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
+        <TreeNode title={`Node ${index}`} key={`node-${index}`}>
+          <TreeNode key={`node-${index}-btc`} title={`BTC: ${node.BTCaddress}`} />
+          <TreeNode key={`node-${index}-kmd`} title={`KMD: ${node.KMDaddress}`} />
+          <TreeNode key={`node-${index}-pubkey`} title={`Pubkey: ${node.pubkey}`} />
+        </TreeNode>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.ActiveCoin.displayNotariesModal) {
+      const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null;
+
+      return (
+        <div>
+          <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
+            <div className="modal-dialog modal-center modal-lg">
+              <div className="modal-content">
+                <div className="modal-body" style={{height: '590px'}}>
+                  <div className="panel nav-tabs-horizontal">
+                    <div className="panel-body">
+                      <div className="tab-content">
+                        <div className="tab-pane active" role="tabpanel">
+                          {this.renderNotariesFetching()}
+
+                          <Tree defaultExpandAll={false} openAnimation={animation}>
+                          {this.renderNotariesList()}
+                          </Tree>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button type="button" className="btn btn-default" onClick={this.closeNotariesModal}>Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="modal-backdrop show in"></div>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+export default WalletsNotariesList;
--- a/react/src/reducers/activeCoin.js
+++ b/react/src/reducers/activeCoin.js
@ -12,7 +12,9 @@ import {
  DASHBOARD_ACTIVE_COIN_NATIVE_OPIDS,
  DASHBOARD_ACTIVE_COIN_SENDTO,
  DASHBOARD_ACTIVE_COIN_GET_CACHE,
-  DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR
+  DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR,
+  DASHBOARD_GET_NOTARIES_LIST,
+  DASHBOARD_DISPLAY_NOTARIES_MODAL
 } from '../actions/actionCreators';

 // TODO: keep all coin data in array of objects instead of single object
@ -31,6 +33,8 @@ export function ActiveCoin(state = {
  lastSendToResponse: null,
  cache: null,
  mainBasiliskAddress: null,
+  notaries: null,
+  displayNotariesModal: false,
 }, action) {
  switch (action.type) {
    case DASHBOARD_ACTIVE_COIN_CHANGE:
@ -101,6 +105,14 @@ export function ActiveCoin(state = {
      return Object.assign({}, state, {
        mainBasiliskAddress: action.address,
      });
+    case DASHBOARD_GET_NOTARIES_LIST:
+      return Object.assign({}, state, {
+        notaries: action.notaries,
+      });
+    case DASHBOARD_DISPLAY_NOTARIES_MODAL:
+      return Object.assign({}, state, {
+        displayNotariesModal: action.display,
+      });
    default:
      return state;
  }
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@ -30,6 +30,7 @@
@import '../assets/global/fonts/web-icons/web-icons.css';
@import '../assets/global/fonts/brand-icons/brand-icons.min.css';
@import '../assets/skins/orange.min.css';
+@import '../../node_modules/rc-tree/assets/index.css';

 #app > div {
  height: 100%;
@ -108,6 +109,40 @@ body {
  cursor: hand;
 }

+.collapse {
+  overflow: hidden;
+  display: block;
+}
+
+.collapse-active {
+  transition: height 0.3s ease-out;
+}
+
+.rc-tree {
+  height: 450px;
+  overflow-y: scroll;
+  margin-top: 20px;
+
+  a {
+    pointer-events: none;
+  }
+  li span.rc-tree-iconEle {
+    display: none;
+  }
+}
+
+.rc-tree-node-content-wrapper-close + ul {
+  display: none;
+}
+.rc-tree-node-content-wrapper {
+  user-select: none;
+}
+.rc-tree-node-content-wrapper-normal {
+  color: inherit;
+  pointer-events: all;
+  user-select: all;
+}
+
 /*.toaster .single-toast:nth-child(0) {
  bottom: 12px;
 }