Hide Copy Tx ID and block explorer link for txns w/o hash (#6928)

2 files changed, 72 insertions, 1 deletions

diff --git a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
index c4e118b01..583980d26 100644
--- a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -78,4 +78,73 @@ describe('TransactionListItemDetails Component', () => {
     assert.ok(wrapper.hasClass('transaction-list-item-details'))
     assert.equal(wrapper.find(Button).length, 3)
   })
+
+  it('should disable the Copy Tx ID and View In Etherscan buttons when tx hash is missing', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    const buttons = wrapper.find(Button)
+    assert.strictEqual(buttons.at(0).prop('disabled'), true)
+    assert.strictEqual(buttons.at(1).prop('disabled'), true)
+  })
+
+  it('should render functional Copy Tx ID and View In Etherscan buttons when tx hash exists', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      hash: '0xaa',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    const buttons = wrapper.find(Button)
+    assert.strictEqual(buttons.at(0).prop('disabled'), false)
+    assert.strictEqual(buttons.at(1).prop('disabled'), false)
+  })
 })
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 72ca784e2..21f14c045 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -128,7 +128,7 @@ export default class TransactionListItemDetails extends PureComponent {
       rpcPrefs: { blockExplorerUrl } = {},
     } = this.props
     const { primaryTransaction: transaction } = transactionGroup
-    const { txParams: { to, from } = {} } = transaction
+    const { hash, txParams: { to, from } = {} } = transaction
 
     return (
       <div className="transaction-list-item-details">
@@ -152,6 +152,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 type="raised"
                 onClick={this.handleCopyTxId}
                 className="transaction-list-item-details__header-button"
+                disabled={!hash}
               >
                 <img
                   className="transaction-list-item-details__header-button__copy-icon"
@@ -164,6 +165,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 type="raised"
                 onClick={this.handleEtherscanClick}
                 className="transaction-list-item-details__header-button"
+                disabled={!hash}
                 >
                 <img src="/images/arrow-popout.svg" />
               </Button>