Hotfix/1.0.5

.travis.yml

@@ -1,61 +1,69 @@
-#.travis.yml
+if: (branch = development) OR (branch = master) OR (type = pull_request) OR (tag IS present)
 sudo: required
 dist: trusty
 language: node_js
 before_install:
   - npm install -g truffle ganache-cli npm@^6.0.0
+  # Needed to deploy pull request and releases
+  - sudo apt-get -y install python-pip python-dev
+  - pip install awscli --upgrade --user
 cache:
   directories:
   - "$HOME/.npm"
 install:
   - npm ci --production=false
 matrix:
   include:
-  - if: branch =~ /^(master$|release\/)/ OR tag IS present
+  - if: branch =~ /^master$/ OR tag IS present
     env: NODE_ENV=production
     node_js: '9'
-  - if: branch =~ /^(master$|release\/)/ OR tag IS present
+  - if: branch =~ /^master$/ OR tag IS present
     env: NODE_ENV=production
     node_js: '8'
-  - if: NOT (branch =~ /^(master$|release\/)/)
+  - if: NOT (branch =~ /^master$/) AND NOT (tag IS present)
     env: NODE_ENV=development
     node_js: '9'
-  - if: NOT (branch =~ /^(master$|release\/)/)
+  - if: NOT (branch =~ /^master$/) AND NOT (tag IS present)
     env: NODE_ENV=development
     node_js: '8'
+after_success:
+  # Pull Request - Deploy it to a review environment
+  # Travis doesn't do deploy step with pull requests builds
+  - ./travis/deploy_pull_request.sh
 deploy:
   - provider: s3
-    bucket: dx-development
-    secret_access_key:
-      secure: Ql46TXXhRjSOzZrvWWe3R/779E5i57aAJDgSCH9a9KzwM48SUTDdFSXarqOsyMKH8/b5L9j6+ayuzO9dJIZNp/ivbBZbVLPPpqOqq0ZgA1DJcJtan6vpvb4RQijLZ9r3dbSIEDQET3RTRM1YzV63gaNfvb0DqRG1RA9cD4dNLKQsjX3fSIU+qWP/FOpu1YAfS3Pgmm5/Wd9nrkQF0ABOyysZ7qvfErq842bbijzi8aDlhH35R8zpbUVr0tPisiv34382Mu7ScY/9KPyLY3pGiuf/a8Q0m2Oh3OfVhB9jcKooVcQHiSjpTXRXoiUmZ0ugrhSwO8N6ieio7/X3ZSXt6AEkIuRZ/zCFSPu4OL6luhIsnC7KnZN3mpz73ne8xv/Fvm4g1BcicSzPmFi2gbwcIuIseBSE1ef5Sdhj8Tefa+RC618EubOX7JH70bVoeZa7CpsKHFpE9419f79RKEGvFxTEX232JWw1bhN5fPPyZlQAvQ6HhbGEs9xuXi8IjZjTywfvIOLOp+FmHFrCz258uIJEUsXMAOY4Q+E9LChGVTvqjkpWfttt31/V/5/QtPskBL/cLZmmStN7PnBbQy7Z0hXbWssSK5yhJg28erNb2nxbX8tyuDuv2XJvDI3WF5WI83EEEU3YjDEwo/TJbUGghXPyTy7EI8NWQT0NoeJPHvY=
-    access_key_id:
-      secure: oH/pscrzrzFrtcTTWX8aUChjbvbpXyf7rglhjBs7Zr9DouUcHrvcm4k+ddykkVdpCAYmtopECKeLyNL/wQod8NmaAC21T5MVnrtQkCOXReoV2VYYRXDcs8wBSL0MOMGdXAbrZ7u2jEskWYHNar+ctrHYkPWLjIc8W875qp3cZdsZ8QvfJMkluFREIDINWsVGhJaE4c34npXpst810nXo1ukuwEadltXYy0MZhh4ssenlRwqkSm//VIR7AW2Yl8eY4QT7EYYrYeja3ZuK//C6FwXPnzzaN/UJHo2WBwSOPQRc5N6aDcGjpzFugEbl08Vq9LmKg4VHalNW8Kik/EXDf0FpXUy1fXLxIWU5cjR9UCzQD03zShSRDEwnD2VydSZrTmaoIEwAGK2I4GNFVUcOUSTxqt+9HmcMOwzVtPJ1Tz2IXXTR/gpeV7SlYVdRF3pTAQfqxv0z6xTztKc4y36e1ynajI1FOUKXHic5KWlSCWAWlXk9HIpGsjpabQCBMYJY0/SQDHDlRs8RLpoHqto50IIqNjRcwoENxtudsZTFAlcNFjT0fc6tXOc5qwMK5+xUn+Kl2F6Lc5k89c6mlF0Dg9VFYwTEh+LpejwZWTTp+zZM+kP878IT3sAr9YvEK2xta2jjJf/pKwzF6gq+22WWBCSr7sCQXEbUj1DNPvXrUkY=
+    bucket: $DEV_BUCKET_NAME
+    access_key_id: $AWS_ACCESS_KEY_ID
+    secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: dist
     on:
       branch: develop
       node: '9'
   - provider: s3
-    bucket: dx-staging
-    secret_access_key:
-      secure: Ql46TXXhRjSOzZrvWWe3R/779E5i57aAJDgSCH9a9KzwM48SUTDdFSXarqOsyMKH8/b5L9j6+ayuzO9dJIZNp/ivbBZbVLPPpqOqq0ZgA1DJcJtan6vpvb4RQijLZ9r3dbSIEDQET3RTRM1YzV63gaNfvb0DqRG1RA9cD4dNLKQsjX3fSIU+qWP/FOpu1YAfS3Pgmm5/Wd9nrkQF0ABOyysZ7qvfErq842bbijzi8aDlhH35R8zpbUVr0tPisiv34382Mu7ScY/9KPyLY3pGiuf/a8Q0m2Oh3OfVhB9jcKooVcQHiSjpTXRXoiUmZ0ugrhSwO8N6ieio7/X3ZSXt6AEkIuRZ/zCFSPu4OL6luhIsnC7KnZN3mpz73ne8xv/Fvm4g1BcicSzPmFi2gbwcIuIseBSE1ef5Sdhj8Tefa+RC618EubOX7JH70bVoeZa7CpsKHFpE9419f79RKEGvFxTEX232JWw1bhN5fPPyZlQAvQ6HhbGEs9xuXi8IjZjTywfvIOLOp+FmHFrCz258uIJEUsXMAOY4Q+E9LChGVTvqjkpWfttt31/V/5/QtPskBL/cLZmmStN7PnBbQy7Z0hXbWssSK5yhJg28erNb2nxbX8tyuDuv2XJvDI3WF5WI83EEEU3YjDEwo/TJbUGghXPyTy7EI8NWQT0NoeJPHvY=
-    access_key_id:
-      secure: oH/pscrzrzFrtcTTWX8aUChjbvbpXyf7rglhjBs7Zr9DouUcHrvcm4k+ddykkVdpCAYmtopECKeLyNL/wQod8NmaAC21T5MVnrtQkCOXReoV2VYYRXDcs8wBSL0MOMGdXAbrZ7u2jEskWYHNar+ctrHYkPWLjIc8W875qp3cZdsZ8QvfJMkluFREIDINWsVGhJaE4c34npXpst810nXo1ukuwEadltXYy0MZhh4ssenlRwqkSm//VIR7AW2Yl8eY4QT7EYYrYeja3ZuK//C6FwXPnzzaN/UJHo2WBwSOPQRc5N6aDcGjpzFugEbl08Vq9LmKg4VHalNW8Kik/EXDf0FpXUy1fXLxIWU5cjR9UCzQD03zShSRDEwnD2VydSZrTmaoIEwAGK2I4GNFVUcOUSTxqt+9HmcMOwzVtPJ1Tz2IXXTR/gpeV7SlYVdRF3pTAQfqxv0z6xTztKc4y36e1ynajI1FOUKXHic5KWlSCWAWlXk9HIpGsjpabQCBMYJY0/SQDHDlRs8RLpoHqto50IIqNjRcwoENxtudsZTFAlcNFjT0fc6tXOc5qwMK5+xUn+Kl2F6Lc5k89c6mlF0Dg9VFYwTEh+LpejwZWTTp+zZM+kP878IT3sAr9YvEK2xta2jjJf/pKwzF6gq+22WWBCSr7sCQXEbUj1DNPvXrUkY=
+    bucket: $STAGING_BUCKET_NAME
+    access_key_id: $AWS_ACCESS_KEY_ID
+    secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: dist
     upload-dir: current
     on:
       branch: master
       node: '9'
+
+  # Prepare production deployment
   - provider: s3
-    bucket: dx-staging
-    secret_access_key:
-      secure: Ql46TXXhRjSOzZrvWWe3R/779E5i57aAJDgSCH9a9KzwM48SUTDdFSXarqOsyMKH8/b5L9j6+ayuzO9dJIZNp/ivbBZbVLPPpqOqq0ZgA1DJcJtan6vpvb4RQijLZ9r3dbSIEDQET3RTRM1YzV63gaNfvb0DqRG1RA9cD4dNLKQsjX3fSIU+qWP/FOpu1YAfS3Pgmm5/Wd9nrkQF0ABOyysZ7qvfErq842bbijzi8aDlhH35R8zpbUVr0tPisiv34382Mu7ScY/9KPyLY3pGiuf/a8Q0m2Oh3OfVhB9jcKooVcQHiSjpTXRXoiUmZ0ugrhSwO8N6ieio7/X3ZSXt6AEkIuRZ/zCFSPu4OL6luhIsnC7KnZN3mpz73ne8xv/Fvm4g1BcicSzPmFi2gbwcIuIseBSE1ef5Sdhj8Tefa+RC618EubOX7JH70bVoeZa7CpsKHFpE9419f79RKEGvFxTEX232JWw1bhN5fPPyZlQAvQ6HhbGEs9xuXi8IjZjTywfvIOLOp+FmHFrCz258uIJEUsXMAOY4Q+E9LChGVTvqjkpWfttt31/V/5/QtPskBL/cLZmmStN7PnBbQy7Z0hXbWssSK5yhJg28erNb2nxbX8tyuDuv2XJvDI3WF5WI83EEEU3YjDEwo/TJbUGghXPyTy7EI8NWQT0NoeJPHvY=
-    access_key_id:
-      secure: oH/pscrzrzFrtcTTWX8aUChjbvbpXyf7rglhjBs7Zr9DouUcHrvcm4k+ddykkVdpCAYmtopECKeLyNL/wQod8NmaAC21T5MVnrtQkCOXReoV2VYYRXDcs8wBSL0MOMGdXAbrZ7u2jEskWYHNar+ctrHYkPWLjIc8W875qp3cZdsZ8QvfJMkluFREIDINWsVGhJaE4c34npXpst810nXo1ukuwEadltXYy0MZhh4ssenlRwqkSm//VIR7AW2Yl8eY4QT7EYYrYeja3ZuK//C6FwXPnzzaN/UJHo2WBwSOPQRc5N6aDcGjpzFugEbl08Vq9LmKg4VHalNW8Kik/EXDf0FpXUy1fXLxIWU5cjR9UCzQD03zShSRDEwnD2VydSZrTmaoIEwAGK2I4GNFVUcOUSTxqt+9HmcMOwzVtPJ1Tz2IXXTR/gpeV7SlYVdRF3pTAQfqxv0z6xTztKc4y36e1ynajI1FOUKXHic5KWlSCWAWlXk9HIpGsjpabQCBMYJY0/SQDHDlRs8RLpoHqto50IIqNjRcwoENxtudsZTFAlcNFjT0fc6tXOc5qwMK5+xUn+Kl2F6Lc5k89c6mlF0Dg9VFYwTEh+LpejwZWTTp+zZM+kP878IT3sAr9YvEK2xta2jjJf/pKwzF6gq+22WWBCSr7sCQXEbUj1DNPvXrUkY=
+    bucket: $STAGING_BUCKET_NAME
+    access_key_id: $AWS_ACCESS_KEY_ID
+    secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: dist
     upload-dir: releases/$TRAVIS_TAG
     on:
       tags: true
-      node: '9'
+      node: '9'
+  - provider: script
+    script: bash travis/prepare_production_deployment.sh
+    on:
+      tags: true
+      node: '9'

package.json

@@ -139,6 +139,7 @@
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.2",
     "babel-plugin-transform-remove-console": "^6.9.0",
+    "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
     "eslint": "^5.5.0",
     "eslint-config-airbnb": "^17.1.0",

src/actions/tokenPair.ts

@@ -3,13 +3,20 @@ import { createAction } from 'redux-actions'
 import { closingPrice } from 'api'
 import { setClosingPrice, getClosingPrice } from 'actions'
 
-import { TokenPair, Balance } from 'types'
+import { TokenPair, Balance, State, DefaultTokenObject } from 'types'
+import { getTokenByFields } from 'selectors'
+import { WETH_TEMPLATE } from 'globals'
 
 export const selectTokenPair = createAction<Partial<TokenPair>>('SELECT_TOKEN_PAIR')
 export const setSellTokenAmount = createAction<{ sellAmount: Balance }>('SET_SELL_TOKEN_AMOUNT')
-export const swapTokensInAPair = createAction<void>('SWAP_TOKENS_IN_A_PAIR', () => {})
 export const resetTokenPair = createAction<void>('RESET_TOKEN_PAIR', () => {})
 
+export const swapTokensInAPairWithDefaultWETH = createAction<{ WETH_TOKEN : DefaultTokenObject}>('SWAP_TOKENS_IN_A_PAIR')
+export const swapTokensInAPair = () => (dispatch: Function, getState: () => State) => {
+  const WETH_TOKEN = getTokenByFields(getState(), WETH_TEMPLATE)
+  dispatch(swapTokensInAPairWithDefaultWETH({ WETH_TOKEN }))
+}
+
 export const swapTokensInAPairAndReCalcClosingPrice = () => async (dispatch: Function) => {
   dispatch(swapTokensInAPair())
 

src/assets/img/icons/providerIcons.js

@@ -3,3 +3,5 @@ export * from 'assets/img/icons/icon_ledger.svg'
 export * from 'assets/img/icons/icon_metamask.svg'
 export * from 'assets/img/icons/icon_metamask2.svg'
 export * from 'assets/img/icons/icon_metamask3.svg'
+export * from 'assets/img/icons/icon_status.svg'
+export * from 'assets/img/icons/icon_cross.svg'

src/components/MenuWallet/index.tsx

@@ -3,7 +3,8 @@ import React from 'react'
 import Loader from 'components/Loader'
 
 import { Account, BigNumber, TokenBalances } from 'types'
-import { FIXED_DECIMALS } from 'globals'
+import { FIXED_DECIMALS, ProviderName } from 'globals'
+import { provider2SVG } from 'utils'
 
 export interface WalletProps {
   account: Account,
@@ -13,7 +14,9 @@ export interface WalletProps {
   dxBalances: TokenBalances,
   dxBalancesAvailable: boolean,
   hasTokenBalances: boolean,
+  providerName: ProviderName,
 
+  setActiveProvider: (provider: any) => void;
   withdrawFromDutchX: ({ name, address }: { name: string, address: string }) => void;
 }
 
@@ -26,6 +29,8 @@ export class MenuWallet extends React.Component<WalletProps, WalletState> {
     open: false,
   }
 
+  changeWallet = () => this.props.setActiveProvider(null)
+
   handleClick = () => {
     const windowSize = window.innerWidth
     if (windowSize > 736) return
@@ -36,7 +41,7 @@ export class MenuWallet extends React.Component<WalletProps, WalletState> {
   }
 
   render () {
-    const { account, addressToSymbolDecimal, balance, tokens, hasTokenBalances, dxBalances, dxBalancesAvailable, withdrawFromDutchX } = this.props
+    const { account, addressToSymbolDecimal, balance, tokens, hasTokenBalances, dxBalances, dxBalancesAvailable, providerName, withdrawFromDutchX } = this.props
     return (
       <div
         className="menuWallet"
@@ -45,11 +50,30 @@ export class MenuWallet extends React.Component<WalletProps, WalletState> {
         onBlur={() => this.setState({ open: false })}
       >
         <span>
-          <code>{`${account ? account.slice(0, 10) : 'No Wallet Detected'}...`}</code>
+          <small><img src={provider2SVG(providerName)} /></small>
+          <code>{`${account ? account.slice(0, 10) + '...' : 'No Wallet Detected'}`}</code>
           <small>{balance != null ? balance.toFixed(FIXED_DECIMALS) : '0'} ETH</small>
         </span>
         {account && hasTokenBalances &&
         <div className={this.state.open ? 'mobileOpen' : ''}>
+          <table>
+            <thead>
+              <tr>
+                <th>WALLET</th>
+                <th>ACCOUNT</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td onClick={this.changeWallet}>
+                  <h5><code>{providerName}</code></h5>
+                </td>
+                <td>
+                  <h5><code>{account}</code></h5>
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <Loader
           hasData={Object.keys(addressToSymbolDecimal).length > 0}
           message="Enable wallet"

src/components/TokenItem/index.tsx

@@ -36,7 +36,7 @@ const TokenItem: React.SFC<TokenItemProps> = ({ onClick, generatesMGN = true, ..
       {/* Token image / icon */}
       <i data-coin={tokenSVG.has(symbol) ? symbol : 'DEFAULT_TOKEN'}></i>
 
-      <big>{name}</big><code>{symbol}</code>
+      <big>{name}</big><code title={address}>{symbol}</code>
       <small>{mod && (mod === 'sell' ? 'AVAILABLE' : 'CURRENT')} BALANCE:</small>
       <p className={balance ? undefined : 'noBalance'}>{typeof balance !== 'number' && balance.div ? balance.div(10 ** decimals).toFixed(FIXED_DECIMALS) : balance} {symbol}</p>
       {!generatesMGN && <p className="noMGN">Any auction with <strong>{symbol || address}</strong> won't generate MGN</p>}

src/containers/AppValidator/index.tsx

@@ -29,23 +29,23 @@ class AppValidator extends React.Component<any> {
   state = {
     online: inBrowser ? navigator.onLine : true,
     loading: false,
-    SET_UP_COMPLETE: true,
+    set_up_complete: true,
     error: '',
   }
 
   async componentDidMount() {
+    const { activeProvider, disclaimer_accepted } = this.props
     // user has NOT accepted disclaimer, do not load state if user attempts to access some parts of app like Content, Cookies etc
     // user CANNOT get into app as redirect blocks if Disclaimer not accepted
-    if (!this.props.disclaimer_accepted) return
-
-    const { activeProvider } = this.props
+    if (!disclaimer_accepted || activeProvider === 'READ_ONLY') return
 
     try {
       // listens for online/offline status
       addListeners(['online', 'offline'], [this.connect, this.disconnect])
 
       // fire up app if user is actively connected to internet AND has provider set
       if (this.state.online && activeProvider) {
+
         // setTimeout condition if loading wallet takes too long
         await Promise.race([
           this.appMountSetup(),
@@ -54,7 +54,7 @@ class AppValidator extends React.Component<any> {
 
         this.setState({
           loading: false,
-          SET_UP_COMPLETE: true,
+          set_up_complete: true,
         })
       }
 
@@ -64,7 +64,7 @@ class AppValidator extends React.Component<any> {
     } catch (error) {
       this.setState({
         loading: false,
-        SET_UP_COMPLETE: false,
+        set_up_complete: false,
         error,
       })
       if (this.state.online) {
@@ -86,6 +86,8 @@ class AppValidator extends React.Component<any> {
 
   // Detects any changes in Provider lock status or errors
   componentWillReceiveProps(nextProps: any) {
+    const { set_up_complete } = this.state
+
     if (nextProps.unlocked !== this.props.unlocked) {
       console.log(`
         Wallet lock status change detected.
@@ -94,9 +96,9 @@ class AppValidator extends React.Component<any> {
       `)
       // if app mount failed and nextProps detect an unlocked wallet
       // reload the page
-      if (!this.state.error && !this.state.SET_UP_COMPLETE && nextProps.unlocked) {
+      if (!set_up_complete && !this.props.unlocked) {
         // window.location.reload()
-        this.setState({ SET_UP_COMPLETE: true })
+        this.setState({ set_up_complete: true })
       }
     }
   }
@@ -164,14 +166,14 @@ class AppValidator extends React.Component<any> {
   }
 
   renderError = () => {
-    const { error, loading, online, SET_UP_COMPLETE } = this.state,
+    const { error, loading, online, set_up_complete } = this.state,
       { disclaimer_accepted } = this.props
     if (!disclaimer_accepted) return
 
     return (
       <>
         { (!online && !loading) && <h2 className="offlineBanner"> App is currently offline - please your check internet connection and refresh the page </h2> }
-        { ((!SET_UP_COMPLETE && !loading) || (!this.props.unlocked && !loading)) && online && <h2 className="offlineBanner" style={{ backgroundColor: 'orange' }}> { error ? `App problems detected: ${error}` : 'App problems detected. Please check your provider and refresh the page.' } </h2> }
+        { ((!set_up_complete && !loading) || (!this.props.unlocked && !loading)) && online && <h2 className="offlineBanner" style={{ backgroundColor: 'orange' }}> { error ? `App problems detected: ${error}` : 'App problems detected. Please check your provider and refresh the page.' } </h2> }
       </>
     )
   }

src/containers/MenuWallet/index.ts

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux'
 import { createSelector } from 'reselect'
-import { getCurrentBalance, getAccount } from 'selectors/blockchain'
+import { getCurrentBalance, getAccount, getProviderName } from 'selectors/blockchain'
 import { State, DefaultTokenObject, BigNumber } from 'types'
 
 import { MenuWallet, WalletProps } from 'components/MenuWallet'
-import { withdrawFromDutchX } from 'actions'
+import { withdrawFromDutchX, setActiveProvider } from 'actions'
+import { ProviderName } from 'globals'
 
 const getTokenList = (state: State) => state.tokenList.type === 'DEFAULT' ? state.tokenList.defaultTokenList : state.tokenList.combinedTokenList
 
@@ -23,6 +24,8 @@ const tokenNamesAndDecimals = createSelector(
 const mapStateToProps = (state: State) => {
   const dxBalancesValues = Object.values(state.dxBalances)
   const tokenBalancesValues = Object.values(state.tokenBalances)
+  const providerName = getProviderName(state)
+
   return {
     account: getAccount(state),
     addressToSymbolDecimal: tokenNamesAndDecimals(state),
@@ -31,7 +34,8 @@ const mapStateToProps = (state: State) => {
     dxBalances: state.dxBalances,
     dxBalancesAvailable: !!(dxBalancesValues.find((i: BigNumber) => i.gt(0))),
     hasTokenBalances: !!(tokenBalancesValues.find(n => n.gt(0))),
+    providerName: providerName as ProviderName,
   }
 }
 
-export default connect<Partial<WalletProps>>(mapStateToProps, { withdrawFromDutchX })(MenuWallet)
+export default connect<Partial<WalletProps>>(mapStateToProps, { setActiveProvider, withdrawFromDutchX })(MenuWallet)

src/containers/WalletIntegration/index.tsx

@@ -53,7 +53,7 @@ class WalletIntegration extends React.Component<WalletIntegrationProps, WalletIn
     const providerObj = Object.values(Providers)
     await registerWallets()
 
-    if (!this.props.providers) return this.setState({ noProvidersDetected: true })
+    if (!this.props.providers) return (this.props.setActiveProvider('READ_ONLY'), this.setState({ noProvidersDetected: true }))
     if (providerObj.length === 1) return this.initAppWithProvider(providerObj[0].keyName)
   }
 
@@ -124,8 +124,8 @@ class WalletIntegration extends React.Component<WalletIntegrationProps, WalletIn
 
   render() {
     const { setupComplete, noProvidersDetected } = this.state,
-      { children } = this.props
-    return noProvidersDetected || setupComplete ? children : this.walletSelector()
+      { children, activeProvider } = this.props
+    return activeProvider && (noProvidersDetected || setupComplete) ? children : this.walletSelector()
   }
 }