merge: update master

package.json

@@ -78,7 +78,7 @@
     "ethjs": "^0.3.3",
     "ethjs-account": "^0.1.4",
     "history": "^4.7.2",
-    "lessdux": "^0.7.0",
+    "lessdux": "^0.7.3",
     "normalize.css": "^7.0.0",
     "qrcode": "^1.2.0",
     "react": "^16.2.0",

src/bootstrap/dapp-api.js

@@ -12,6 +12,24 @@ else if (window.web3 && window.web3.currentProvider)
   eth = new Eth(window.web3.currentProvider)
 else eth = new Eth(new Eth.HttpProvider(ETHEREUM_PROVIDER))
 
+const network = eth
+  .net_version()
+  .then(networkID => {
+    switch (networkID) {
+      case '1':
+        return 'main'
+      case '3':
+        return 'ropsten'
+      case '4':
+        return 'rinkeby'
+      case '42':
+        return 'kovan'
+      default:
+        return null
+    }
+  })
+  .catch(() => null)
+
 const IICOContractFactory = eth.contract && eth.contract(IICO.abi) // TODO: Put this on NPM or load dynamically?
 
 const ETHAddressRegExpCaptureGroup = '(0x[a-fA-F0-9]{40})'
@@ -20,6 +38,7 @@ const strictETHAddressRegExp = /^0x[a-fA-F0-9]{40}$/
 
 export {
   eth,
+  network,
   IICOContractFactory,
   ETHAddressRegExpCaptureGroup,
   ETHAddressRegExp,

src/bootstrap/global-components.js

@@ -6,6 +6,7 @@ export default () => (
   <div id="global-components">
     <ReduxToastr
       timeOut={0}
+      preventDuplicates
       position="top-center"
       transitionIn="bounceInDown"
       transitionOut="bounceOutUp"

src/bootstrap/initializer.js

@@ -28,10 +28,7 @@ class Initializer extends PureComponent {
     ]).isRequired
   }
 
-  state = {
-    isWeb3Loaded: eth.accounts !== undefined,
-    pathAddress: undefined
-  }
+  state = { pathAddress: undefined }
 
   componentDidMount() {
     const { fetchAccounts } = this.props
@@ -87,8 +84,8 @@ class Initializer extends PureComponent {
   }
 
   render() {
-    const { isWeb3Loaded, pathAddress } = this.state
     const { accounts, children } = this.props
+    const { pathAddress } = this.state
 
     const loading = (
       <div id="initializer-loader">
@@ -97,20 +94,19 @@ class Initializer extends PureComponent {
     )
 
     if (pathAddress === undefined) return loading
-
     return (
       <RenderIf
         resource={accounts}
         loading={loading}
         done={children}
         failedLoading={
           <div>
-            <RequiresMetaMask needsUnlock={isWeb3Loaded} />
+            <RequiresMetaMask needsUnlock={Boolean(window.web3)} />
             <SimpleBid match={{ params: { address: pathAddress } }} noWeb3 />
           </div>
         }
-        extraValues={[accounts.data && accounts.data[0]]}
-        extraFailedValues={[!isWeb3Loaded]}
+        extraValues={[(accounts.data && accounts.data[0]) || null]}
+        extraFailedValues={[!window.web3]}
       />
     )
   }

src/components/__snapshots__/storyshots.test.js.snap

@@ -1003,14 +1003,21 @@ exports[`Storyshots Chain Hash default 1`] = `
           }
         >
           <span
+            className="ChainHash"
             data-tip="0x5b5d09477f730baafb1e2e0fb78f5d95fd94a6f4"
           >
+            0x5b5d...a6f4
             <a
-              href="https://etherscan.io/address/0x5b5d09477f730baafb1e2e0fb78f5d95fd94a6f4"
+              className="ChainHash-link"
+              href="https://undefined.etherscan.io/address/0x5b5d09477f730baafb1e2e0fb78f5d95fd94a6f4"
               rel="noopener noreferrer"
               target="_blank"
             >
-              0x5b5d...a6f4
+              <img
+                alt="Etherscan Logo"
+                className="ChainHash-link-image"
+                src="etherscan-logo.png"
+              />
             </a>
           </span>
           <div
@@ -6582,7 +6589,7 @@ exports[`Storyshots Text Input default 1`] = `
           >
             <input
               className="TextInput-input"
-              onBlur={undefined}
+              onBlur={null}
               onChange={[Function]}
               step={undefined}
               type="text"
@@ -6895,7 +6902,7 @@ exports[`Storyshots Text Input error 1`] = `
           >
             <input
               className="TextInput-input"
-              onBlur={undefined}
+              onBlur={null}
               onChange={[Function]}
               step={undefined}
               type="text"
@@ -7208,7 +7215,7 @@ exports[`Storyshots Text Input touched 1`] = `
           >
             <input
               className="TextInput-input"
-              onBlur={undefined}
+              onBlur={null}
               onChange={[Function]}
               step={undefined}
               type="text"
@@ -7521,7 +7528,7 @@ exports[`Storyshots Text Input valid 1`] = `
           >
             <input
               className="TextInput-input"
-              onBlur={undefined}
+              onBlur={null}
               onChange={[Function]}
               step={undefined}
               type="text"

src/components/chain-hash/chain-hash.scss

@@ -0,0 +1,14 @@
+/* @define ChainHash */
+.ChainHash {
+  overflow-wrap: break-word;
+
+  &-link {
+    margin-left: 4px;
+    position: relative;
+
+    &-image {
+      height: 100%;
+      position: absolute;
+    }
+  }
+}

src/components/chain-hash/index.js

@@ -1,21 +1,54 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
-const ChainHash = ({ children }) => (
-  <span data-tip={children}>
-    <a
-      href={`https://etherscan.io/address/${children}`}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {children.slice(0, 6) + '...' + children.slice(children.length - 4)}
-    </a>
-  </span>
-)
-
-ChainHash.propTypes = {
-  // State
-  children: PropTypes.string.isRequired
-}
+import { network } from '../../bootstrap/dapp-api'
+import etherscanLogo from '../../assets/images/etherscan-logo.png'
+
+import './chain-hash.css'
+
+export default class ChainHash extends PureComponent {
+  static propTypes = {
+    // State
+    children: PropTypes.string.isRequired,
+
+    // Modifiers
+    full: PropTypes.bool
+  }
 
-export default ChainHash
+  static defaultProps = {
+    // Modifiers
+    full: false
+  }
+
+  state = { network: undefined }
+
+  async componentDidMount() {
+    this.setState({ network: await network })
+  }
+
+  render() {
+    const { children, full } = this.props
+    const { network } = this.state
+    return (
+      <span data-tip={children} className="ChainHash">
+        {full
+          ? children
+          : children.slice(0, 6) + '...' + children.slice(children.length - 4)}
+        <a
+          href={`https://${
+            network !== 'main' ? `${network}.` : ''
+          }etherscan.io/address/${children}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="ChainHash-link"
+        >
+          <img
+            src={etherscanLogo}
+            alt="Etherscan Logo"
+            className="ChainHash-link-image"
+          />
+        </a>
+      </span>
+    )
+  }
+}

src/components/slider/slider.test.js

@@ -22,8 +22,7 @@ it('Renders and handles mouse events.', () => {
         {
           label: 'label 2',
           percent: 0.6,
-          color: 'color',
-          point: false
+          color: 'color'
         }
       ]}
       calcValue={calcValue}

src/containers/simple-bid/index.js

@@ -5,6 +5,7 @@ import { RenderIf } from 'lessdux'
 
 import * as IICOSelectors from '../../reducers/iico'
 import * as IICOActions from '../../actions/iico'
+import ChainHash from '../../components/chain-hash'
 import Identicon from '../../components/identicon'
 import ETHQR from '../../components/eth-qr'
 
@@ -70,13 +71,17 @@ class SimpleBid extends PureComponent {
         </p>
         <p>
           The address you send from has to be whitelisted in the{' '}
-          <a
-            href={`https://kleros.io/kyc`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            KYC
-          </a>{' '}
+          {process.env.REACT_APP_BRANCH === 'master' ? (
+            <a
+              href={`https://kleros.io/kyc`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              KYC
+            </a>
+          ) : (
+            'KYC'
+          )}{' '}
           and you need to <b>send at least 300,000 gas with the transaction.</b>
           <RenderIf
             resource={IICOData}
@@ -107,7 +112,7 @@ class SimpleBid extends PureComponent {
         </p>
         {address && (
           <div className="SimpleBid-addressInfo">
-            <b>Contract Address:</b> {address}
+            <b>Contract Address:</b> <ChainHash full>{address}</ChainHash>
             <div className="SimpleBid-addressInfo-blocks">
               <div>
                 <b>Identicon:</b>

src/containers/simple-bid/simple-bid.scss

@@ -4,7 +4,6 @@
   text-align: justify;
 
   &-addressInfo {
-    overflow-wrap: break-word;
     text-align: left;
 
     &-blocks {

src/reducers/iico.js

@@ -8,7 +8,7 @@ export const _IICODataShape = PropTypes.shape({
   address: PropTypes.string.isRequired,
 
   // Centralized
-  ethPrice: PropTypes.number.isRequired,
+  ethPrice: PropTypes.number,
 
   // Token
   tokenContractAddress: PropTypes.string.isRequired,

src/sagas/index.js

@@ -28,7 +28,10 @@ export function makeRestartable(saga) {
             err
           )
 
-        err.message && toastr.error('', err.message.slice(0, 100))
+        err.message &&
+          toastr.info(
+            'Your connection is unstable, please check your network and refresh the page.'
+          )
         yield call(delay, 3000)
       }
     }

src/sagas/wallet.js

@@ -6,17 +6,13 @@ import * as walletSelectors from '../reducers/wallet'
 import * as walletActions from '../actions/wallet'
 import { eth } from '../bootstrap/dapp-api'
 import { lessduxSaga } from '../utils/saga'
-import * as errorConstants from '../constants/error'
 
 /**
  * Fetches the current wallet's accounts.
  * @returns {object[]} - The accounts.
  */
 export function* fetchAccounts() {
-  const accounts = yield call(eth.accounts)
-  if (!accounts[0]) throw new Error(errorConstants.ETH_NO_ACCOUNTS)
-
-  return accounts
+  return yield call(eth.accounts)
 }
 
 /**

src/setupTests.js

@@ -8,12 +8,13 @@ import 'jest-enzyme'
 // Configure
 configure({ adapter: new Adapter() })
 
+// Mock globals
+window.fetch = jest.fn(() => new Promise(resolve => resolve(undefined)))
+window.web3 = {}
+
 // Mock modules
 jest.mock('./components/identicon', () => () => <div>[Identicon]</div>)
 
-// Mock fetch
-window.fetch = jest.fn(() => new Promise(resolve => resolve(undefined)))
-
 // Mock time
 timezoneMock.register('UTC')
 Date.now = jest.fn(() => 1516916214006)

src/utils/saga.js

@@ -51,7 +51,10 @@ export function* lessduxSaga(flow, resourceActions, saga, action) {
       })
     )
   } catch (err) {
-    err.message && toastr.error('', err.message.slice(0, 100))
+    err.message &&
+      toastr.info(
+        'Your connection is unstable, please check your network and refresh the page.'
+      )
     yield put(errorAction(resourceActions['FAIL' + failWord], err))
   }
 }

stories/slider.js

@@ -6,5 +6,10 @@ import Slider from '../src/components/slider'
 const calcValue = percent => `${(percent * 100).toFixed(0)}%`
 
 storiesOf('Slider', module).add('default', () => (
-  <Slider startLabel="Jan 1st, 2018" endLabel="Today" calcValue={calcValue} />
+  <Slider
+    startLabel="Jan 1st, 2018"
+    endLabel="Today"
+    initialPercent={0.5}
+    calcValue={calcValue}
+  />
 ))