7 files changed, 225 insertions, 0 deletions
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..fed7d9865
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getMethodData } from '../../helpers/transactions.util'
+
+export default function withMethodData (WrappedComponent) {
+  return class MethodDataWrappedComponent extends PureComponent {
+    static propTypes = {
+      transaction: PropTypes.object,
+    }
+
+    static defaultProps = {
+      transaction: {},
+    }
+
+    state = {
+      methodData: {},
+      done: false,
+      error: null,
+    }
+
+    componentDidMount () {
+      this.fetchMethodData()
+    }
+
+    async fetchMethodData () {
+      const { transaction } = this.props
+      const { txParams: { data = '' } = {} } = transaction
+
+      if (data) {
+        try {
+          const methodData = await getMethodData(data)
+          this.setState({ methodData, done: true })
+        } catch (error) {
+          this.setState({ done: true, error })
+        }
+      } else {
+        this.setState({ done: true })
+      }
+    }
+
+    render () {
+      const { methodData, done, error } = this.state
+
+      return (
+        <WrappedComponent
+          { ...this.props }
+          methodData={{ data: methodData, done, error }}
+        />
+      )
+    }
+  }
+}
diff --git a/ui/app/higher-order-components/with-modal-props/index.js b/ui/app/higher-order-components/with-modal-props/index.js
new file mode 100644
index 000000000..e476b51d2
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/index.js
@@ -0,0 +1 @@
+export { default } from './with-modal-props'
diff --git a/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
new file mode 100644
index 000000000..654e7062a
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
@@ -0,0 +1,43 @@
+
+import assert from 'assert'
+import configureMockStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import React from 'react'
+import withModalProps from '../with-modal-props'
+
+const mockState = {
+  appState: {
+    modal: {
+      modalState: {
+        props: {
+          prop1: 'prop1',
+          prop2: 2,
+          prop3: true,
+        },
+      },
+    },
+  },
+}
+
+describe('withModalProps', () => {
+  it('should return a component wrapped with modal state props', () => {
+    const TestComponent = props => (
+      <div className="test">Testing</div>
+    )
+    const WrappedComponent = withModalProps(TestComponent)
+    const store = configureMockStore()(mockState)
+    const wrapper = mount(
+      <WrappedComponent store={store} />
+    )
+
+    assert.ok(wrapper)
+    const testComponent = wrapper.find(TestComponent).at(0)
+    assert.equal(testComponent.length, 1)
+    assert.equal(testComponent.find('.test').text(), 'Testing')
+    const testComponentProps = testComponent.props()
+    assert.equal(testComponentProps.prop1, 'prop1')
+    assert.equal(testComponentProps.prop2, 2)
+    assert.equal(testComponentProps.prop3, true)
+    assert.equal(typeof testComponentProps.hideModal, 'function')
+  })
+})
diff --git a/ui/app/higher-order-components/with-modal-props/with-modal-props.js b/ui/app/higher-order-components/with-modal-props/with-modal-props.js
new file mode 100644
index 000000000..02f3855af
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/with-modal-props.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import { hideModal } from '../../actions'
+
+const mapStateToProps = state => {
+  const { appState } = state
+  const { props: modalProps } = appState.modal.modalState
+
+  return {
+    ...modalProps,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default function withModalProps (Component) {
+  return connect(mapStateToProps, mapDispatchToProps)(Component)
+}
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}
+        />
+      )
+    }
+  }
+}