From baa4eb2d82429ba0a5c2a871448214318ffb5816 Mon Sep 17 00:00:00 2001
From: Hassan Malik <41640681+hmalik88@users.noreply.github.com>
Date: Wed, 3 Nov 2021 15:03:54 -0400
Subject: [PATCH] Remove hexdata field from token send (#12565)

* added acccess to asset from state, updated SendHexDataRow display logic

* fixed invalid propType and updated tests

* updated logic and tests to only disable hex data field for TOKEN (ERC-20) types
---
 .../send-content/send-content.component.js     |  7 ++++++-
 .../send-content.component.test.js             | 18 ++++++++++++++++++
 .../send-content/send-content.container.js     |  2 ++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index 6ed0cb02a..fd44a1c41 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -9,6 +9,7 @@ import {
   UNSENDABLE_ASSET_ERROR_KEY,
   INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY,
 } from '../../../helpers/constants/error-keys';
+import { ASSET_TYPES } from '../../../ducks/send';
 import SendAmountRow from './send-amount-row';
 import SendHexDataRow from './send-hex-data-row';
 import SendAssetRow from './send-asset-row';
@@ -32,6 +33,7 @@ export default class SendContent extends Component {
     noGasPrice: PropTypes.bool,
     networkOrAccountNotSupports1559: PropTypes.bool,
     getIsBalanceInsufficient: PropTypes.bool,
+    asset: PropTypes.object,
   };
 
   render() {
@@ -44,6 +46,7 @@ export default class SendContent extends Component {
       isAssetSendable,
       networkOrAccountNotSupports1559,
       getIsBalanceInsufficient,
+      asset,
     } = this.props;
 
     let gasError;
@@ -51,6 +54,8 @@ export default class SendContent extends Component {
     else if (noGasPrice) gasError = GAS_PRICE_FETCH_FAILURE_ERROR_KEY;
     else if (getIsBalanceInsufficient)
       gasError = INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY;
+    const showHexData =
+      this.props.showHexData && asset.type !== ASSET_TYPES.TOKEN;
 
     return (
       <PageContainerContent>
@@ -68,7 +73,7 @@ export default class SendContent extends Component {
           <SendAssetRow />
           <SendAmountRow />
           {networkOrAccountNotSupports1559 ? <SendGasRow /> : null}
-          {this.props.showHexData ? <SendHexDataRow /> : null}
+          {showHexData ? <SendHexDataRow /> : null}
         </div>
       </PageContainerContent>
     );
diff --git a/ui/pages/send/send-content/send-content.component.test.js b/ui/pages/send/send-content/send-content.component.test.js
index cee97b54b..7b06b50e3 100644
--- a/ui/pages/send/send-content/send-content.component.test.js
+++ b/ui/pages/send/send-content/send-content.component.test.js
@@ -15,6 +15,7 @@ describe('SendContent Component', () => {
     showHexData: true,
     gasIsExcessive: false,
     networkAndAccountSupports1559: true,
+    asset: { type: 'NATIVE' },
   };
 
   beforeEach(() => {
@@ -73,6 +74,23 @@ describe('SendContent Component', () => {
       expect(wrapper.find(SendHexDataRow)).toHaveLength(0);
     });
 
+    it('should not render the SendHexDataRow if the asset type is TOKEN (ERC-20)', () => {
+      wrapper.setProps({ asset: { type: 'TOKEN' } });
+      const PageContainerContentChild = wrapper
+        .find(PageContainerContent)
+        .children();
+      expect(PageContainerContentChild.childAt(0).is(Dialog)).toStrictEqual(
+        true,
+      );
+      expect(
+        PageContainerContentChild.childAt(1).is(SendAssetRow),
+      ).toStrictEqual(true);
+      expect(
+        PageContainerContentChild.childAt(2).is(SendAmountRow),
+      ).toStrictEqual(true);
+      expect(wrapper.find(SendHexDataRow)).toHaveLength(0);
+    });
+
     it('should not render the Dialog if contact has a name', () => {
       wrapper.setProps({
         showHexData: false,
diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js
index 16824b0d4..e5d1c62b9 100644
--- a/ui/pages/send/send-content/send-content.container.js
+++ b/ui/pages/send/send-content/send-content.container.js
@@ -10,6 +10,7 @@ import {
   getIsAssetSendable,
   getIsBalanceInsufficient,
   getSendTo,
+  getSendAsset,
 } from '../../../ducks/send';
 
 import * as actions from '../../../store/actions';
@@ -33,6 +34,7 @@ function mapStateToProps(state) {
       state,
     ),
     getIsBalanceInsufficient: getIsBalanceInsufficient(state),
+    asset: getSendAsset(state),
   };
 }