Merge pull request #2996 from OpenLedgerApp/#2657-add-raw-tx

Raw json for account activities and proposal transactions

app/assets/locales/locale-en.json

@@ -2436,7 +2436,8 @@
         "withdraw_permission_create": "Gave withdrawal permission for account",
         "withdraw_permission_delete": "Deleted withdrawal permissions for account",
         "withdraw_permission_update": "Updated withdrawal permission for account",
-        "view_json": "Show raw json"
+        "view_json": "Show raw json",
+        "operations": "Operations"
     },
     "transfer": {
         "again": "MAKE ANOTHER TRANSFER",

app/components/Account/Proposals.jsx

@@ -9,13 +9,18 @@ import ChainTypes from "components/Utility/ChainTypes";
 import utils from "common/utils";
 import ProposalModal, {finalRequiredPerms} from "../Modal/ProposalModal";
 import NestedApprovalState from "../Account/NestedApprovalState";
-import {ChainStore, FetchChainObjects} from "bitsharesjs";
+import {ChainStore, ChainTypes as grapheneChainTypes} from "bitsharesjs";
 import counterpart from "counterpart";
 import permission_utils from "common/permission_utils";
 import LinkToAccountById from "../Utility/LinkToAccountById";
 import AccountStore from "stores/AccountStore";
 import accountUtils from "common/account_utils";
 import {Tooltip} from "bitshares-ui-style-guide";
+import JSONModal from "components/Modal/JSONModal";
+
+const {operations} = grapheneChainTypes;
+const ops = Object.keys(operations);
+
 
 class Proposals extends Component {
     static propTypes = {
@@ -31,7 +36,8 @@ class Proposals extends Component {
                 action: null,
                 proposalId: null,
                 accountId: null
-            }
+            },
+            visibleId: ""
         };
 
         this._proposals = [];
@@ -234,6 +240,14 @@ class Proposals extends Component {
         return isUnknown;
     }
 
+    openJSONModal(id) {
+        this.setState({ visibleId: id });
+    }
+
+    closeJSONModal = () => {
+        this.setState({ visibleId: "" });
+    };
+
     render() {
         let {account} = this.props;
         if (!account) return null;
@@ -252,6 +266,12 @@ class Proposals extends Component {
             const id = proposal.proposal.get("id");
             const proposer = proposal.proposal.get("proposer");
             const expiration = proposal.proposal.get("expiration_time");
+            const trxTypes = counterpart.translate("transaction.trxTypes");
+            const operations = proposal.operations && proposal.operations.toJS();
+            const title = operations.length > 1 ?
+                counterpart.translate("transaction.operations") :
+                trxTypes[ops[operations[0] && operations[0][0]]];
+
             let text = proposal.operations
                 .map((o, index) => {
                     return (
@@ -293,6 +313,14 @@ class Proposals extends Component {
                         <TransactionIDAndExpiry
                             id={id}
                             expiration={expiration}
+                            openJSONModal={() => this.openJSONModal(id)}
+                        />
+                        <JSONModal
+                            visible={this.state.visibleId === id}
+                            operation={operations.length > 1 ?
+                                operations : operations[0] && operations[0][1]}
+                            title={title || ""}
+                            hideModal={this.closeJSONModal}
                         />
                     </td>
                 </tr>

app/components/Account/RecentTransactions.jsx

@@ -1,9 +1,11 @@
-import React from "react";
+import React, { Fragment } from "react";
 import Translate from "react-translate-component";
 import {saveAs} from "file-saver";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
 import utils from "common/utils";
+import JSONModal from "components/Modal/JSONModal";
+import { Icon as AntIcon } from "bitshares-ui-style-guide";
 import {
     ChainTypes as grapheneChainTypes,
     FetchChain,
@@ -81,7 +83,8 @@ class RecentTransactions extends React.Component {
             rows: [],
             showModal: false,
             esNodeCustom: false,
-            esNode: settingsAPIs.ES_WRAPPER_LIST[0].url
+            esNode: settingsAPIs.ES_WRAPPER_LIST[0].url,
+            visibleId: ""
         };
         this.getDataSource = this.getDataSource.bind(this);
 
@@ -191,6 +194,7 @@ class RecentTransactions extends React.Component {
         if (this.state.showModal !== nextState.showModal) return true;
         if (this.state.esNode !== nextState.esNode) return true;
         if (this.state.esNodeCustom !== nextState.esNodeCustom) return true;
+        if (this.state.visibleId !== nextState.visibleId) return true;
         return false;
     }
 
@@ -286,6 +290,14 @@ class RecentTransactions extends React.Component {
         });
     }
 
+    openJSONModal(id) {
+        this.setState({ visibleId: id });
+    }
+
+    closeJSONModal = () => {
+        this.setState({ visibleId: "" });
+    };
+
     getDataSource(o, current_account_id) {
         let fee = o.op[1].fee;
         let trxTypes = counterpart.translate("transaction.trxTypes");
@@ -303,7 +315,22 @@ class RecentTransactions extends React.Component {
         );
         return {
             key: o.id,
-            id: o.id,
+            id: (
+                <Fragment>
+                    <span
+                        className="cursor-pointer"
+                        onClick={() => this.openJSONModal(o.id)}
+                    >
+                        {o.id} <AntIcon type="file-search" />
+                    </span>
+                    <JSONModal
+                        visible={this.state.visibleId === o.id}
+                        operation={o.op}
+                        title={trxTypes[ops[o.op[0]] || ""]}
+                        hideModal={this.closeJSONModal}
+                    />
+                </Fragment>
+            ),
             type: (
                 <Link
                     className="inline-block"

app/components/Blockchain/ProposedOperation.jsx

@@ -12,26 +12,41 @@ const {operations} = grapheneChainTypes;
 import PropTypes from "prop-types";
 import opComponents from "./operations";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
+import { Icon as AntIcon } from "bitshares-ui-style-guide";
 
 require("./operations.scss");
 
 let ops = Object.keys(operations);
 // let listings = account_constants.account_listing;
 
-export const TransactionIDAndExpiry = ({id, expiration, style}) => {
+export const TransactionIDAndExpiry = ({ id, expiration, style, openJSONModal }) => {
     const endDate = counterpart.localize(new Date(expiration), {
         format: "short"
     });
     return (
         <b style={style}>
-            <span>{id} | </span>
+            {openJSONModal ?
+                <span className="cursor-pointer" onClick={openJSONModal}>
+                    {id} <AntIcon type="file-search" />
+                    {" | "}
+                </span> :
+                <span>{id} | </span>
+            }
             <span>
                 <Translate content="proposal.expires" />: {endDate}
             </span>
         </b>
     );
 };
 
+TransactionIDAndExpiry.propTypes = {
+    openJSONModal: PropTypes.func
+};
+
+TransactionIDAndExpiry.defaultProps = {
+    openJSONModal: null
+};
+
 class Row extends React.Component {
     constructor(props) {
         super(props);