From 624852b7525e066473c1e009d086a46968f328cc Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Mon, 1 Oct 2018 12:02:15 +0800
Subject: [PATCH] add the tab display for the display multisign transactions
 details.

---
 .../components/New/AdvancedTransactionForm.jsx     |   2 +
 .../New/MultiSignTransactionDetails/Modal.jsx      | 148 +++++++++++++++++++++
 .../TransactionDetails.jsx                         |  10 +-
 .../TransactionDetails.scss                        |  10 +-
 4 files changed, 164 insertions(+), 6 deletions(-)
 create mode 100644 src/features/transactions/components/New/MultiSignTransactionDetails/Modal.jsx

diff --git a/src/features/transactions/components/New/AdvancedTransactionForm.jsx b/src/features/transactions/components/New/AdvancedTransactionForm.jsx
index 344332e..8cbdd46 100644
--- a/src/features/transactions/components/New/AdvancedTransactionForm.jsx
+++ b/src/features/transactions/components/New/AdvancedTransactionForm.jsx
@@ -155,6 +155,8 @@ class AdvancedTxForm extends React.Component {
               decode={this.props.decode}
               transaction={this.props.decodedTx}
               showJsonModal={this.props.showJsonModal}
+              asset={this.props.asset}
+              btmAmountUnit = {this.props.btmAmountUnit}
             />
 
             <FieldLabel>{lang === 'zh' ? '交易构建类型' : 'Transaction Build Type'}</FieldLabel>
diff --git a/src/features/transactions/components/New/MultiSignTransactionDetails/Modal.jsx b/src/features/transactions/components/New/MultiSignTransactionDetails/Modal.jsx
new file mode 100644
index 0000000..2168cc4
--- /dev/null
+++ b/src/features/transactions/components/New/MultiSignTransactionDetails/Modal.jsx
@@ -0,0 +1,148 @@
+import React from 'react'
+import { btmID } from 'utility/environment'
+import { FieldLabel } from 'features/shared/components'
+import styles from './TransactionDetails.scss'
+import { normalizeGlobalBTMAmount , converIntToDec } from 'utility/buildInOutDisplay'
+
+export default class Modal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showJson: false
+    }
+    this.normalize = this.normalize.bind(this)
+  }
+
+  normalize(inouts) {
+    const items = []
+    let assets = this.props.asset
+
+    inouts.forEach(inout => {
+      const assetId = inout.assetId
+
+      let filteredAsset = assets
+      filteredAsset = filteredAsset.filter(asset => asset.id === assetId)
+
+      let alias = assetId
+      let amount = inout.amount
+
+      if(filteredAsset.length === 1){
+        alias =  filteredAsset[0].alias
+        amount = assetId===btmID?
+          normalizeGlobalBTMAmount(btmID, amount, this.props.btmAmountUnit):
+          converIntToDec(amount, filteredAsset[0].definition.decimals)
+      }
+
+      items.push({
+        type: inout.type,
+        amount: amount,
+        assetAlias: alias ,
+        assetId: assetId,
+        address: inout.address,
+        controlProgram: inout.controlProgram
+      })
+    })
+
+    return items
+  }
+
+  showForm(e, type){
+    e.preventDefault()
+    const showJson = (type === 'json')
+    this.setState({ showJson: showJson })
+  }
+
+  render() {
+    const item = this.props.transaction
+    const btmAmountUnit = this.props.btmAmountUnit
+    const lang = this.props.lang
+
+    let view = <div></div>
+    if (item.length !== 0) {
+      const fee = normalizeGlobalBTMAmount(btmID, item.fee, btmAmountUnit)
+      const inputs = this.normalize(item.inputs)
+      const outputs = this.normalize(item.outputs)
+      const table = (inouts) =>
+        (inouts.map((inout, index) =>
+          <table key={index} className={styles.table}>
+            <tbody>
+              <tr>
+                <td className={styles.colLabel}> {lang === 'zh' ? '类型' : 'Type'}</td>
+                <td><code>{inout.type}</code></td>
+              </tr>
+              <tr>
+                <td className={styles.colLabel}> {lang === 'zh' ? '地址' : 'Address'}</td>
+                <td><code>{inout.address}</code></td>
+              </tr>
+              <tr>
+                <td className={styles.colLabel}> {lang === 'zh' ? '数量' : 'Amount'}</td>
+                <td><code>{inout.amount}</code></td>
+              </tr>
+              <tr>
+                <td className={styles.colLabel}> {lang === 'zh' ? '资产' : 'Asset'}</td>
+                <td><code>{inout.assetAlias}</code></td>
+              </tr>
+              <tr>
+                <td className={styles.colLabel}> {lang === 'zh' ? '合约程序' : 'Control Program'}</td>
+                <td><code>{inout.controlProgram}</code></td>
+              </tr>
+            </tbody>
+          </table>))
+
+      view = (<div>
+        <FieldLabel>{lang === 'zh' ? '交易内容' : 'Transaction Content'}</FieldLabel>
+        <div className={styles.main}>
+          <div className={styles.txID}>
+            <label>{lang === 'zh' ? '详情' : 'Summary'}</label>
+            <table key={'txsummary'} className={styles.table}>
+              <tbody>
+                <tr>
+                  <td className={styles.colLabel}>
+                    {lang === 'zh' ? '交易ID' : 'Transaction ID'}
+                  </td>
+                  <td>
+                    <code>{item.txId}</code>
+                  </td>
+                </tr>
+                <tr>
+                  <td className={styles.colLabel}>Gas</td>
+                  <td><code>{fee}</code></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div>
+            <label>{lang === 'zh' ? '输入' : 'Input'}</label>
+            {table(inputs)}
+            <label>{lang === 'zh' ? '输出' : 'Output'}</label>
+            {table(outputs)}
+          </div>
+        </div>
+      </div>)
+
+      const JsonView = (<pre>{JSON.stringify(this.props.transaction, null, 2)}</pre>)
+
+      return (
+        <div>
+          <div className={styles.btnGroup} >
+            <div className={'btn-group'} role='group'>
+              <button
+                className={`btn btn-default ${this.state.showJson ? null : 'active'}`}
+                onClick={(e) => this.showForm(e, 'normal')}>
+                {lang === 'zh' ? '普通展示' : 'Normal View'}
+              </button>
+              <button
+                className={`btn btn-default ${this.state.showJson ? 'active' : null}`}
+                onClick={(e) => this.showForm(e, 'json')}>
+                {lang === 'zh' ? 'Json格式' : 'Json View'}
+              </button>
+            </div>
+          </div>
+
+          {!this.state.showJson && view}
+          {this.state.showJson && JsonView}
+        </div>
+      )
+    }
+  }
+}
diff --git a/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.jsx b/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.jsx
index eba64b6..b76a968 100644
--- a/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.jsx
+++ b/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.jsx
@@ -4,6 +4,7 @@ import { FieldLabel } from 'features/shared/components'
 import disableAutocomplete from 'utility/disableAutocomplete'
 import styles from './TransactionDetails.scss'
 import { Connection } from 'sdk'
+import Modal from './Modal'
 
 const TEXT_FIELD_PROPS = [
   'value',
@@ -23,7 +24,14 @@ class TransactionDetails extends React.Component {
     e.preventDefault()
     const rawTransaction = Connection.camelize(JSON.parse(json)).rawTransaction
     this.props.decode(rawTransaction).then(() => {
-      this.props.showJsonModal(<pre>{JSON.stringify(this.props.transaction, null, 2)}</pre>)
+      this.props.showJsonModal(
+        <Modal
+          transaction={this.props.transaction}
+          btmAmountUnit={this.props.btmAmountUnit}
+          lang ={this.props.lang}
+          asset={this.props.asset}
+        />
+      )
     })
   }
 
diff --git a/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.scss b/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.scss
index c114569..71fd710 100644
--- a/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.scss
+++ b/src/features/transactions/components/New/MultiSignTransactionDetails/TransactionDetails.scss
@@ -1,5 +1,5 @@
-.view{
-  margin-top: $gutter-size;
+.btnGroup{
+  margin-bottom: $gutter-size;
 }
 
 .main {
@@ -30,9 +30,9 @@
   }
 
   td, th {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-right: 10px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-right: 13px;
   }
 
   td {
-- 
2.11.0