Add withMethodData HOC, add higher-order-component folder

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 Identicon from '../../identicon'
-import TokenBalance from './token-balance'
+import TokenBalance from '../../token-balance'
 
 export default class ConfirmAddToken extends Component {
   static contextTypes = {

ui/app/components/pages/confirm-add-token/token-balance/index.js

@@ -1,2 +0,0 @@
-import TokenBalance from './token-balance.container'
-module.exports = TokenBalance

ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js

@@ -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>
-    )
-  }
-}

ui/app/components/token-balance/index.js

@@ -0,0 +1 @@
+export { default } from './token-balance.container'

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>
+    )
+  }
+}

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 {

ui/app/higher-order-components/with-method-data/index.js

@@ -0,0 +1 @@
+export { default } from './with-method-data.component'

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}
+        />
+      )
+    }
+  }
+}

ui/app/higher-order-components/with-token-tracker/index.js

@@ -0,0 +1 @@
+export { default } from './with-token-tracker.component'

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