Folder restructure (#6304)

* Remove ui/app/keychains/

* Remove ui/app/img/ (unused images)

* Move conversion-util to helpers/utils/

* Move token-util to helpers/utils/

* Move /helpers/*.js inside /helpers/utils/

* Move util tests inside /helpers/utils/

* Renameand move confirm-transaction/util.js to helpers/utils/

* Move higher-order-components to helpers/higher-order-components/

* Move infura-conversion.json to helpers/constants/

* Move all utility functions to helpers/utils/

* Move pages directory to top-level

* Move all constants to helpers/constants/

* Move metametrics inside helpers/

* Move app and root inside pages/

* Move routes inside helpers/

* Re-organize ducks/

* Move reducers to ducks/

* Move selectors inside selectors/

* Move test out of test folder

* Move action, reducer, store inside store/

* Move ui components inside ui/

* Move UI components inside ui/

* Move connected components inside components/app/

* Move i18n-helper inside helpers/

* Fix unit tests

* Fix unit test

* Move pages components

* Rename routes component

* Move reducers to ducks/index

* Fix bad path in unit test

1 files changed, 60 insertions, 0 deletions

diff --git a/ui/app/pages/add-token/token-list/token-list.component.js b/ui/app/pages/add-token/token-list/token-list.component.js
new file mode 100644
index 000000000..724a68d6e
--- /dev/null
+++ b/ui/app/pages/add-token/token-list/token-list.component.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { checkExistingAddresses } from '../util'
+import TokenListPlaceholder from './token-list-placeholder'
+
+export default class InfoBox extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    tokens: PropTypes.array,
+    results: PropTypes.array,
+    selectedTokens: PropTypes.object,
+    onToggleToken: PropTypes.func,
+  }
+
+  render () {
+    const { results = [], selectedTokens = {}, onToggleToken, tokens = [] } = this.props
+
+    return results.length === 0
+      ? <TokenListPlaceholder />
+      : (
+        <div className="token-list">
+          <div className="token-list__title">
+            { this.context.t('searchResults') }
+          </div>
+          <div className="token-list__tokens-container">
+            {
+              Array(6).fill(undefined)
+                .map((_, i) => {
+                  const { logo, symbol, name, address } = results[i] || {}
+                  const tokenAlreadyAdded = checkExistingAddresses(address, tokens)
+
+                  return Boolean(logo || symbol || name) && (
+                    <div
+                      className={classnames('token-list__token', {
+                        'token-list__token--selected': selectedTokens[address],
+                        'token-list__token--disabled': tokenAlreadyAdded,
+                      })}
+                      onClick={() => !tokenAlreadyAdded && onToggleToken(results[i])}
+                      key={i}
+                    >
+                      <div
+                        className="token-list__token-icon"
+                        style={{ backgroundImage: logo && `url(images/contract/${logo})` }}>
+                      </div>
+                      <div className="token-list__token-data">
+                        <span className="token-list__token-name">{ `${name} (${symbol})` }</span>
+                      </div>
+                    </div>
+                  )
+                })
+            }
+          </div>
+        </div>
+      )
+  }
+}