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: Add withMethodData HOC, add higher-order-component folder

---
 .../confirm-add-token.component.js                 |   4 +-
 .../pages/confirm-add-token/token-balance/index.js |   2 -
 .../token-balance/token-balance.component.js       |  16 ---
 .../token-balance/token-balance.container.js       |  16 ---
 ui/app/components/token-balance/index.js           |   1 +
 .../token-balance/token-balance.component.js       |  23 +++++
 .../token-balance/token-balance.container.js       |  16 +++
 ui/app/helpers/with-token-tracker.js               | 108 ---------------------
 .../with-method-data/index.js                      |   1 +
 .../with-method-data/with-method-data.component.js |  44 +++++++++
 .../with-token-tracker/index.js                    |   1 +
 .../with-token-tracker.component.js                | 106 ++++++++++++++++++++
 12 files changed, 194 insertions(+), 144 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
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
 create mode 100644 ui/app/components/token-balance/index.js
 create mode 100644 ui/app/components/token-balance/token-balance.component.js
 create mode 100644 ui/app/components/token-balance/token-balance.container.js
 delete mode 100644 ui/app/helpers/with-token-tracker.js
 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
 create mode 100644 ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js

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/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
deleted file mode 100644
index bc1289ce1..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withTokenTracker from '../../../../helpers/with-token-tracker'
-import TokenBalance from './token-balance.component'
-import selectors from '../../../../selectors'
-
-const mapStateToProps = state => {
-  return {
-    userAddress: selectors.getSelectedAddress(state),
-  }
-}
-
-export default compose(
-  connect(mapStateToProps),
-  withTokenTracker
-)(TokenBalance)
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/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
new file mode 100644
index 000000000..adc001f83
--- /dev/null
+++ b/ui/app/components/token-balance/token-balance.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withTokenTracker from '../../higher-order-components/with-token-tracker'
+import TokenBalance from './token-balance.component'
+import selectors from '../../selectors'
+
+const mapStateToProps = state => {
+  return {
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+export default compose(
+  connect(mapStateToProps),
+  withTokenTracker
+)(TokenBalance)
diff --git a/ui/app/helpers/with-token-tracker.js b/ui/app/helpers/with-token-tracker.js
deleted file mode 100644
index 8608b15f4..000000000
--- a/ui/app/helpers/with-token-tracker.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import TokenTracker from 'eth-token-tracker'
-
-const withTokenTracker = WrappedComponent => {
-  return class TokenTrackerWrappedComponent extends Component {
-    static propTypes = {
-      userAddress: PropTypes.string.isRequired,
-      token: PropTypes.object.isRequired,
-    }
-
-    constructor (props) {
-      super(props)
-
-      this.state = {
-        string: '',
-        symbol: '',
-        error: null,
-      }
-
-      this.tracker = null
-      this.updateBalance = this.updateBalance.bind(this)
-      this.setError = this.setError.bind(this)
-    }
-
-    componentDidMount () {
-      this.createFreshTokenTracker()
-    }
-
-    componentDidUpdate (prevProps) {
-      const { userAddress: newAddress, token: { address: newTokenAddress } } = this.props
-      const { userAddress: oldAddress, token: { address: oldTokenAddress } } = prevProps
-
-      if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) {
-        return
-      }
-
-      if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) {
-        return
-      }
-
-      this.createFreshTokenTracker()
-    }
-
-    componentWillUnmount () {
-      this.removeListeners()
-    }
-
-    createFreshTokenTracker () {
-      this.removeListeners()
-
-      if (!global.ethereumProvider) {
-        return
-      }
-
-      const { userAddress, token } = this.props
-
-      this.tracker = new TokenTracker({
-        userAddress,
-        provider: global.ethereumProvider,
-        tokens: [token],
-        pollingInterval: 8000,
-      })
-
-      this.tracker.on('update', this.updateBalance)
-      this.tracker.on('error', this.setError)
-
-      this.tracker.updateBalances()
-        .then(() => this.updateBalance(this.tracker.serialize()))
-        .catch(error => this.setState({ error: error.message }))
-    }
-
-    setError (error) {
-      this.setState({ error })
-    }
-
-    updateBalance (tokens = []) {
-      if (!this.tracker.running) {
-        return
-      }
-      const [{ string, symbol }] = tokens
-      this.setState({ string, symbol, error: null })
-    }
-
-    removeListeners () {
-      if (this.tracker) {
-        this.tracker.stop()
-        this.tracker.removeListener('update', this.updateBalance)
-        this.tracker.removeListener('error', this.setError)
-      }
-    }
-
-    render () {
-      const { string, symbol, error } = this.state
-
-      return (
-        <WrappedComponent
-          { ...this.props }
-          string={string}
-          symbol={symbol}
-          error={error}
-        />
-      )
-    }
-  }
-}
-
-module.exports = withTokenTracker
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/higher-order-components/with-token-tracker/with-token-tracker.component.js b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
new file mode 100644
index 000000000..36f6a6efd
--- /dev/null
+++ b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import TokenTracker from 'eth-token-tracker'
+
+export default function withTokenTracker (WrappedComponent) {
+  return class TokenTrackerWrappedComponent extends Component {
+    static propTypes = {
+      userAddress: PropTypes.string.isRequired,
+      token: PropTypes.object.isRequired,
+    }
+
+    constructor (props) {
+      super(props)
+
+      this.state = {
+        string: '',
+        symbol: '',
+        error: null,
+      }
+
+      this.tracker = null
+      this.updateBalance = this.updateBalance.bind(this)
+      this.setError = this.setError.bind(this)
+    }
+
+    componentDidMount () {
+      this.createFreshTokenTracker()
+    }
+
+    componentDidUpdate (prevProps) {
+      const { userAddress: newAddress, token: { address: newTokenAddress } } = this.props
+      const { userAddress: oldAddress, token: { address: oldTokenAddress } } = prevProps
+
+      if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) {
+        return
+      }
+
+      if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) {
+        return
+      }
+
+      this.createFreshTokenTracker()
+    }
+
+    componentWillUnmount () {
+      this.removeListeners()
+    }
+
+    createFreshTokenTracker () {
+      this.removeListeners()
+
+      if (!global.ethereumProvider) {
+        return
+      }
+
+      const { userAddress, token } = this.props
+
+      this.tracker = new TokenTracker({
+        userAddress,
+        provider: global.ethereumProvider,
+        tokens: [token],
+        pollingInterval: 8000,
+      })
+
+      this.tracker.on('update', this.updateBalance)
+      this.tracker.on('error', this.setError)
+
+      this.tracker.updateBalances()
+        .then(() => this.updateBalance(this.tracker.serialize()))
+        .catch(error => this.setState({ error: error.message }))
+    }
+
+    setError (error) {
+      this.setState({ error })
+    }
+
+    updateBalance (tokens = []) {
+      if (!this.tracker.running) {
+        return
+      }
+      const [{ string, symbol }] = tokens
+      this.setState({ string, symbol, error: null })
+    }
+
+    removeListeners () {
+      if (this.tracker) {
+        this.tracker.stop()
+        this.tracker.removeListener('update', this.updateBalance)
+        this.tracker.removeListener('error', this.setError)
+      }
+    }
+
+    render () {
+      const { string, symbol, error } = this.state
+
+      return (
+        <WrappedComponent
+          { ...this.props }
+          string={string}
+          symbol={symbol}
+          error={error}
+        />
+      )
+    }
+  }
+}
-- 
cgit v1.2.3