fix(Merge) conflicts

config/env/production.js

@@ -1,6 +1,8 @@
 module.exports = {
   ROOT_URL: 'https://blockchain.info',
   API_DOMAIN: 'https://api.blockchain.info',
-  WEB_SOCKET_URL: 'wss://ws.blockchain.info/inv',
+  BTC_WEB_SOCKET_URL: 'wss://ws.blockchain.info/inv',
+  ETH_WEB_SOCKET_URL: 'wss://ws.blockchain.info/eth/inv',
+  BCH_WEB_SOCKET_URL: 'wss://ws.blockchain.info/bch/inv',
   WALLET_HELPER_DOMAIN: 'https://wallet-helper.blockchain.info'
 }

config/env/testnet.js

@@ -1,6 +1,8 @@
 module.exports = {
   ROOT_URL: 'https://testnet.blockchain.info',
   API_DOMAIN: 'https://api-testnet.blockchain.info',
-  WEB_SOCKET_URL: 'wss://ws.blockchain.info/testnet3/inv',
+  BTC_WEB_SOCKET_URL: 'wss://ws.blockchain.info/testnet3/inv',
+  ETH_WEB_SOCKET_URL: 'wss://ws.blockchain.info/testnet3/eth/inv',
+  BCH_WEB_SOCKET_URL: 'wss://ws.blockchain.info/testnet3/bch/inv',
   WALLET_HELPER_DOMAIN: 'https://wallet-helper.blockchain.info'
 }

config/wallet-options-v4.json

@@ -144,7 +144,9 @@
   "domains": {
     "root": "https://blockchain.info",
     "api": "https://api.blockchain.info",
-    "webSocket": "wss://ws.blockchain.info/inv",
+    "btcSocket": "wss://ws.blockchain.info/inv",
+    "ethSocket": "wss://ws.blockchain.info/eth/inv",
+    "bchSocket": "wss://ws.blockchain.info/bch/inv",
     "walletHelper": "https://wallet-helper.blockchain.info"
   }
 }

packages/blockchain-info-components/src/Form/SelectInput/index.js

@@ -94,16 +94,13 @@ class SelectInputContainer extends React.PureComponent {
 SelectInputContainer.propTypes = {
   elements: PropTypes.arrayOf(PropTypes.shape({
     group: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.object.isRequired]).isRequired,
-      value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired, PropTypes.object.isRequired])
-    })).isRequired
+    items: PropTypes.array.isRequired
   })).isRequired,
   label: PropTypes.string,
   searchEnabled: PropTypes.bool,
   opened: PropTypes.bool,
   disabled: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired, PropTypes.object.isRequired]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,

packages/blockchain-info-components/src/Form/SelectInput/template.js

@@ -119,9 +119,9 @@ const SelectInput = (props) => {
   const showArrow = !hideArrow
 
   return (
-    <SelectBoxInput onClick={handleFocus}>
+    <SelectBoxInput>
       {!expanded || !searchEnabled
-        ? <Display onBlur={handleBlur} disabled={disabled} errorState={errorState}>
+        ? <Display onClick={handleFocus} onBlur={handleBlur} disabled={disabled} errorState={errorState}>
           {templateDisplay ? templateDisplay(display) : <DefaultDisplay>{display.text}</DefaultDisplay>}
         </Display>
         : <Search autoFocus={expanded} onChange={handleChange} />
@@ -138,14 +138,8 @@ const SelectInput = (props) => {
 }
 
 SelectInput.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.object.isRequired]),
-    value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired, PropTypes.object.isRequired])
-  })).isRequired,
-  selected: PropTypes.shape({
-    text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.object.isRequired]),
-    value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired, PropTypes.object.isRequired])
-  }),
+  items: PropTypes.array.isRequired,
+  selected: PropTypes.object.isRequired,
   expanded: PropTypes.bool,
   searchEnabled: PropTypes.bool,
   opened: PropTypes.bool,

packages/blockchain-info-components/src/Form/index.js

@@ -1,4 +1,3 @@
-export { default as PlaceHolder } from './PlaceHolder'
 export { default as CheckBoxInput } from './CheckBoxInput'
 export { default as DateInput } from './DateInput'
 export { default as NativeSelect } from './NativeSelect'

packages/blockchain-info-components/src/Tooltip/Tooltip.spec.js

@@ -1,24 +1,12 @@
 import React from 'react'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-
-import Tooltip from './Tooltip'
+import Tooltip from './template.js'
+import renderer from 'react-test-renderer'
+import 'jest-styled-components'
 
 describe('Tooltip component', () => {
   it('renders correctly', () => {
-    const component = shallow(<Tooltip><span>Default</span></Tooltip>)
-    const tree = toJson(component)
+    const component = renderer.create(<Tooltip colors={{'backgroundColor': '#12345'}}><span>Default</span></Tooltip>)
+    const tree = component.toJSON()
     expect(tree).toMatchSnapshot()
   })
-
-  it('default state is correct', () => {
-    const component = shallow(<Tooltip />)
-    expect(component.state().displayed).toBeFalsy()
-  })
-
-  it('click handler sets state properly', () => {
-    const component = shallow(<Tooltip />)
-    component.instance().handleClick()
-    expect(component.state().displayed).toBeTruthy()
-  })
 })

packages/blockchain-info-components/src/Tooltip/__snapshots__/Tooltip.spec.js.snap

@@ -1,29 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip component renders correctly 1`] = `
-<styled.div>
-  <styled.div
-    colors={
-      Object {
-        "backgroundColor": "white",
-        "borderColor": "gray-2",
-        "foreColor": "gray-5",
-      }
-    }
-    displayed={false}
-    onClick={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    ?
-  </styled.div>
-  <Styled(TextGroup)
-    displayed={false}
-    onClick={[Function]}
+.c3 > * {
+  white-space: normal;
+}
+
+.c3 > * {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.c0 {
+  width: 22px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 10px;
+  border: 1px solid;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.c2 {
+  position: absolute;
+  bottom: 150%;
+  left: -115px;
+  text-align: initial;
+  width: 250px;
+  display: none;
+  border: 1px solid;
+  border-radius: 5px;
+  padding: 10px 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 300;
+  font-family: "Montserrat",sans serif;
+  text-align: left;
+}
+
+.c2 > div,
+.c2 > span {
+  margin-bottom: 0px;
+}
+
+.c2:before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 115px;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+}
+
+.c2:after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 116px;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border: 9px solid transparent;
+}
+
+<div
+  className="c0"
+  width={undefined}
+>
+  <div
+    className="c1"
+    onClick={undefined}
+    onMouseEnter={undefined}
+    onMouseLeave={undefined}
+  />
+  <div
+    className="c2 c3"
+    onClick={undefined}
+    width={undefined}
   >
     <span>
       Default
     </span>
-  </Styled(TextGroup)>
-</styled.div>
+  </div>
+</div>
 `;

packages/blockchain-info-components/src/Tooltip/index.js

@@ -1 +1,54 @@
-export { default as Tooltip } from './Tooltip'
+import React from 'react'
+import onClickOutside from 'react-onclickoutside'
+import Tooltip from './template.js'
+
+class TooltipContainer extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = { displayed: false }
+    this.handleClick = this.handleClick.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+  }
+
+  handleClick () {
+    this.setState({ displayed: !this.state.displayed })
+  }
+
+  handleMouseEnter () {
+    this.props.hover && this.setState({ displayed: true })
+  }
+
+  handleMouseLeave () {
+    this.props.hover && this.setState({ displayed: false })
+  }
+
+  handleClickOutside () {
+    this.setState({ displayed: false })
+  }
+
+  render () {
+    const selectColors = displayed => displayed
+      ? { foreColor: 'white', backgroundColor: 'brand-primary', borderColor: 'brand-primary' }
+      : { foreColor: 'gray-5', backgroundColor: 'white', borderColor: 'gray-2' }
+
+    const icon = this.state.displayed ? 'X' : '?'
+    const colors = selectColors(this.state.displayed)
+
+    return (
+      <Tooltip
+        icon={icon}
+        colors={colors}
+        width={this.props.width}
+        label={this.props.label}
+        displayed={this.state.displayed}
+        handleClick={this.handleClick}
+        handleMouseEnter={this.handleMouseEnter}
+        handleMouseLeave={this.handleMouseLeave}>
+        {this.props.children}
+      </Tooltip>
+    )
+  }
+}
+
+export default onClickOutside(TooltipContainer)