From 4e0693eaff0107d11bf93042db50cbb022cfeed8 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 30 Jul 2018 12:02:55 -0700
Subject: [PATCH] Add withMethodData HOC, add higher-order-component folder

---
 .../confirm-add-token.component.js            |  4 +-
 .../confirm-add-token/token-balance/index.js  |  2 -
 .../token-balance/token-balance.component.js  | 16 -------
 ui/app/components/token-balance/index.js      |  1 +
 .../token-balance/token-balance.component.js  | 23 ++++++++++
 .../token-balance/token-balance.container.js  |  4 +-
 .../with-method-data/index.js                 |  1 +
 .../with-method-data.component.js             | 44 +++++++++++++++++++
 .../with-token-tracker/index.js               |  1 +
 .../with-token-tracker.component.js}          |  4 +-
 10 files changed, 75 insertions(+), 25 deletions(-)
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/index.js
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
 create mode 100644 ui/app/components/token-balance/index.js
 create mode 100644 ui/app/components/token-balance/token-balance.component.js
 rename ui/app/components/{pages/confirm-add-token => }/token-balance/token-balance.container.js (72%)
 create mode 100644 ui/app/higher-order-components/with-method-data/index.js
 create mode 100644 ui/app/higher-order-components/with-method-data/with-method-data.component.js
 create mode 100644 ui/app/higher-order-components/with-token-tracker/index.js
 rename ui/app/{helpers/with-token-tracker.js => higher-order-components/with-token-tracker/with-token-tracker.component.js} (96%)

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 65d654b92..3dcc8cda9 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes'
 import Button from '../../button'
-import Identicon from '../../../components/identicon'
-import TokenBalance from './token-balance'
+import Identicon from '../../identicon'
+import TokenBalance from '../../token-balance'
 
 export default class ConfirmAddToken extends Component {
   static contextTypes = {
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/index.js b/ui/app/components/pages/confirm-add-token/token-balance/index.js
deleted file mode 100644
index 6fb5c8223..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import TokenBalance from './token-balance.container'
-module.exports = TokenBalance
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
deleted file mode 100644
index 976788d4c..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class TokenBalance extends Component {
-  static propTypes = {
-    string: PropTypes.string,
-    symbol: PropTypes.string,
-    error: PropTypes.string,
-  }
-
-  render () {
-    return (
-      <div className="hide-text-overflow">{ this.props.string }</div>
-    )
-  }
-}
diff --git a/ui/app/components/token-balance/index.js b/ui/app/components/token-balance/index.js
new file mode 100644
index 000000000..f7da15cf8
--- /dev/null
+++ b/ui/app/components/token-balance/index.js
@@ -0,0 +1 @@
+export { default } from './token-balance.container'
diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/token-balance/token-balance.component.js
new file mode 100644
index 000000000..2b4f73980
--- /dev/null
+++ b/ui/app/components/token-balance/token-balance.component.js
@@ -0,0 +1,23 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TokenBalance extends PureComponent {
+  static propTypes = {
+    string: PropTypes.string,
+    symbol: PropTypes.string,
+    error: PropTypes.string,
+    className: PropTypes.string,
+    withSymbol: PropTypes.bool,
+  }
+
+  render () {
+    const { className, string, withSymbol, symbol } = this.props
+
+    return (
+      <div className={classnames('hide-text-overflow', className)}>
+        { string + (withSymbol ? ` ${symbol}` : '') }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
similarity index 72%
rename from ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
rename to ui/app/components/token-balance/token-balance.container.js
index bc1289ce1..adc001f83 100644
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
+++ b/ui/app/components/token-balance/token-balance.container.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
-import withTokenTracker from '../../../../helpers/with-token-tracker'
+import withTokenTracker from '../../higher-order-components/with-token-tracker'
 import TokenBalance from './token-balance.component'
-import selectors from '../../../../selectors'
+import selectors from '../../selectors'
 
 const mapStateToProps = state => {
   return {
diff --git a/ui/app/higher-order-components/with-method-data/index.js b/ui/app/higher-order-components/with-method-data/index.js
new file mode 100644
index 000000000..f511e1ae7
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/index.js
@@ -0,0 +1 @@
+export { default } from './with-method-data.component'
diff --git a/ui/app/higher-order-components/with-method-data/with-method-data.component.js b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
new file mode 100644
index 000000000..aa38afd8a
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getMethodData } from '../../helpers/confirm-transaction/util'
+
+export default function withMethodData (WrappedComponent) {
+  return class MethodDataWrappedComponent extends PureComponent {
+    static propTypes = {
+      transaction: PropTypes.object,
+    }
+
+    static defaultProps = {
+      transaction: {},
+    }
+
+    state = {
+      methodData: {},
+    }
+
+    componentDidMount () {
+      this.fetchMethodData()
+    }
+
+    async fetchMethodData () {
+      const { transaction } = this.props
+      const { txParams: { data = '' } = {} } = transaction
+
+      if (data) {
+        const methodData = await getMethodData(data)
+        this.setState({ methodData })
+      }
+    }
+
+    render () {
+      const { methodData } = this.state
+
+      return (
+        <WrappedComponent
+          { ...this.props }
+          methodData={methodData}
+        />
+      )
+    }
+  }
+}
diff --git a/ui/app/higher-order-components/with-token-tracker/index.js b/ui/app/higher-order-components/with-token-tracker/index.js
new file mode 100644
index 000000000..d401e81f1
--- /dev/null
+++ b/ui/app/higher-order-components/with-token-tracker/index.js
@@ -0,0 +1 @@
+export { default } from './with-token-tracker.component'
diff --git a/ui/app/helpers/with-token-tracker.js b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
similarity index 96%
rename from ui/app/helpers/with-token-tracker.js
rename to ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
index 8608b15f4..36f6a6efd 100644
--- a/ui/app/helpers/with-token-tracker.js
+++ b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import TokenTracker from 'eth-token-tracker'
 
-const withTokenTracker = WrappedComponent => {
+export default function withTokenTracker (WrappedComponent) {
   return class TokenTrackerWrappedComponent extends Component {
     static propTypes = {
       userAddress: PropTypes.string.isRequired,
@@ -104,5 +104,3 @@ const withTokenTracker = WrappedComponent => {
     }
   }
 }
-
-module.exports = withTokenTracker