create currency dropdown and communicate via chrome message sender

package.json

@@ -21,6 +21,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "prop-types": "15.6.1",
     "react": "16.4.1",
     "react-dom": "16.4.1"
   },

src/App.js

@@ -1,17 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
+import CurrencyDropdown from './components/CurrencyDropdown'
+
 import logo from './logo.svg'
 import './App.css'
 
-class App extends Component {
+class App extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = { currency: 'USD' }
+  }
+
+  handleChange(currency) {
+    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+      chrome.tabs.sendMessage(tabs[0].id, { currency })
+    })
+  }
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <p className="App-intro">Marketplace currency:</p>
+        <CurrencyDropdown onChange={this.handleChange} />
       </div>
     )
   }

src/components/CurrencyDropdown/CurrencyDropdown.css

@@ -0,0 +1,3 @@
+form {
+  padding: 10px;
+}

src/components/CurrencyDropdown/CurrencyDropdown.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getAvailableCurrencies } from '../../modules/currency/utils'
+
+import './CurrencyDropdown.css'
+
+export default class CurrencyDropdown extends React.PureComponent {
+  static propTypes = { onChange: PropTypes.func.isRequired }
+
+  constructor(props) {
+    super(props)
+    this.state = { value: 'USD' }
+  }
+
+  handleChange = e => {
+    this.setState({ value: e.target.value })
+    this.props.onChange(e.target.value)
+  }
+
+  getOptions() {
+    return getAvailableCurrencies().map(currency => ({
+      text: currency.label,
+      value: currency.label,
+      description: currency.text
+    }))
+  }
+
+  render() {
+    return (
+      <form>
+        <select value={this.state.value} onChange={this.handleChange}>
+          <option value="USD">USD</option>
+          <option value="MANA">MANA</option>
+          <option value="BTC">BTC</option>
+        </select>
+      </form>
+    )
+  }
+}

src/components/CurrencyDropdown/index.js

@@ -0,0 +1,3 @@
+import CurrencyDropdown from './CurrencyDropdown'
+
+export default CurrencyDropdown

src/registerManaConversion.js

@@ -1,8 +1,12 @@
 import { CurrencyLoader } from './modules/currency'
 
-window.loader = new CurrencyLoader()
+const loader = new CurrencyLoader()
+chrome.runtime.onMessage.addListener(message => {
+  loader.setCurrency(message.currency)
+})
+
 export const registerManaConversion = () => {
-  window.loader.reload()
+  loader.reload()
   setTimeout(registerManaConversion, 1000)
 }