Mint 874 add preloader to exchange search (#429)

Chrono-Tech · Dec 13, 2017 · 72435ac · 72435ac
1 parent b59b5a9
commit 72435ac
Show file tree

Hide file tree

Showing 15 changed files with 179 additions and 92 deletions.
diff --git a/packages/login/network/ExchangeProvider.js b/packages/login/network/ExchangeProvider.js
@@ -5,6 +5,8 @@ import { NETWORK_MAIN_ID, MIDDLEWARE_MAP } from './settings'
 class ExchangeProvider {
 
   url () {
+    // TODO @abdulov remove it
+    throw new Error() // make an Error
     const { network } = networkService.getProviderSettings()
 
     if (!network.id) {

diff --git a/src/components/exchange/BuyTokensDialog/BuyTokensDialog.jsx b/src/components/exchange/BuyTokensDialog/BuyTokensDialog.jsx
@@ -12,6 +12,7 @@ import { connect } from 'react-redux'
 import { Translate } from 'react-redux-i18n'
 import { DUCK_EXCHANGE, exchange, getTokensAllowance } from 'redux/exchange/actions'
 import { modalsClose } from 'redux/modals/actions'
+import TokenModel from 'models/TokenModel'
 import './BuyTokensDialog.scss'
 import BuyTokensForm from './BuyTokensForm'
 
@@ -48,6 +49,10 @@ export default class BuyTokensDialog extends React.PureComponent {
 
   render () {
     const exchangeToken = this.props.tokens.getBySymbol(this.props.exchange.symbol())
+    let userExchangeToken = this.props.usersTokens.get(this.props.exchange.symbol())
+    if (!userExchangeToken) {
+      userExchangeToken = new TokenModel({})
+    }
     const ethToken = this.props.usersTokens.get('ETH')
 
     return (
@@ -67,7 +72,7 @@ export default class BuyTokensDialog extends React.PureComponent {
                   <div styleName='balanceValue'>
                     <TokenValue
                       isInvert
-                      value={this.props.isBuy ? ethToken.balance() : exchangeToken.balance()}
+                      value={this.props.isBuy ? ethToken.balance() : userExchangeToken.balance()}
                       symbol={this.props.isBuy ? ethToken.symbol() : exchangeToken.symbol()}
                     />
                   </div>

diff --git a/src/components/exchange/BuyTokensDialog/BuyTokensDialog.scss b/src/components/exchange/BuyTokensDialog/BuyTokensDialog.scss
@@ -210,3 +210,9 @@
   padding-top: 8px;
   padding-bottom: 8px;
 }
+
+.warningMessage {
+  display: flex;
+  padding-bottom: 16px;
+  color: $color-warning;
+}
diff --git a/src/components/exchange/BuyTokensDialog/BuyTokensForm.jsx b/src/components/exchange/BuyTokensDialog/BuyTokensForm.jsx
@@ -55,7 +55,9 @@ export default class BuyTokensForm extends React.PureComponent {
   }
 
   componentDidMount () {
-    !this.props.isBuy && this.props.dispatch(getTokensAllowance(this.props.exchange))
+    this.props.usersTokens.get(this.props.exchange.symbol()) &&
+    !this.props.isBuy &&
+    this.props.dispatch(getTokensAllowance(this.props.exchange))
   }
 
   handleSetPrice = (e) => {
@@ -82,6 +84,10 @@ export default class BuyTokensForm extends React.PureComponent {
   }
 
   render () {
+    let showWarningMessage = false
+    if (!this.props.usersTokens.get(this.props.exchange.symbol())) {
+      showWarningMessage = true
+    }
     const exchangeToken = this.props.tokens.getBySymbol(this.props.exchange.symbol())
     const ethToken = this.props.usersTokens.get('ETH')
 
@@ -92,6 +98,13 @@ export default class BuyTokensForm extends React.PureComponent {
       <form styleName='content' onSubmit={this.props.handleSubmit}>
         <div styleName='row'>
           <div styleName='leftCol'>
+            {
+              showWarningMessage &&
+              <div styleName='warningMessage'>
+                <i className='material-icons'>warning</i>
+                <Translate value={prefix('needToCreateWallet')} symbol={this.props.exchange.symbol()} />
+              </div>
+            }
             <div styleName='property'>
               <div styleName='label'><Translate value={prefix('traderAddress')} />:</div>
               <div styleName='value'>
@@ -191,22 +204,22 @@ export default class BuyTokensForm extends React.PureComponent {
                           {...globalStyles.buttonRaisedMultyLine}
                         />
                         : <RaisedButton
-                          disabled={this.props.pristine || !this.props.valid}
+                          disabled={this.props.pristine || !this.props.valid || showWarningMessage}
                           type='button'
                           label={(
                             <span styleName='buttonLabel'>
                               <Translate value={prefix('approve')} />
                             </span>
                           )}
                           primary
-                          onTouchTap={this.handleApprove}
+                          onClick={this.handleApprove}
                           {...globalStyles.buttonRaisedMultyLine}
                         />
                       }
                     </div>
                     }
                     <RaisedButton
-                      disabled={!this.props.valid || (!this.props.isBuy && allowance.toString() !== this.props.buy)}
+                      disabled={!this.props.valid || (!this.props.isBuy && allowance.toString() !== this.props.buy) || showWarningMessage}
                       type='submit'
                       label={<span styleName='buttonLabel'><Translate value={prefix('sendRequest')} /></span>}
                       {...globalStyles.buttonRaisedMultyLine}

diff --git a/src/components/exchange/BuyTokensDialog/lang.js b/src/components/exchange/BuyTokensDialog/lang.js
@@ -13,6 +13,7 @@ export default {
     allowance: 'Your allowance',
     approve: 'Approve tokens',
     revoke: 'Revoke tokens',
+    needToCreateWallet: 'You need to create %{symbol} wallet',
   },
   ru: {
     orderBook: 'Книга Ордеров',
@@ -28,5 +29,6 @@ export default {
     allowance: 'Подтвержденная сумма',
     approve: 'Подтвердить перевод токенов',
     revoke: 'Отменить перевод токенов',
+    needToCreateWallet: 'Вам нужно создать кошелек для %{symbol}',
   },
 }
diff --git a/src/components/exchange/BuyTokensDialog/validate.js b/src/components/exchange/BuyTokensDialog/validate.js
@@ -1,5 +1,6 @@
 import * as validator from 'components/forms/validator'
 import ErrorList from 'components/forms/ErrorList'
+import TokenModel from 'models/TokenModel'
 
 export default function validate (values, props) {
   let buyErrors = new ErrorList()
@@ -9,15 +10,18 @@ export default function validate (values, props) {
   sellErrors.add(validator.positiveNumber(values.get('sell'), true))
 
   const userEthBalance = props.usersTokens.get('ETH').balance()
-  const exchangeTokenBalance = props.tokens.getBySymbol(props.exchange.symbol()).balance()
+  let userExchangeTokenBalance = props.usersTokens.get(props.exchange.symbol())
+  if (!userExchangeTokenBalance) {
+    userExchangeTokenBalance = new TokenModel({})
+  }
   const assetBalance = props.exchange.assetBalance()
   const ethBalance = props.exchange.ethBalance()
 
   if (props.isBuy) {
     buyErrors.add(validator.lowerThan(values.get('buy'), assetBalance.toNumber()))
     sellErrors.add(validator.lowerThan(values.get('sell'), userEthBalance.toNumber()))
   } else {
-    buyErrors.add(validator.lowerThan(values.get('buy'), exchangeTokenBalance.toNumber()))
+    buyErrors.add(validator.lowerThan(values.get('buy'), userExchangeTokenBalance.balance().toNumber()))
     sellErrors.add(validator.lowerThan(values.get('sell'), ethBalance.toNumber()))
   }
 

diff --git a/src/components/exchange/ExchangeTransferDialog/ExchangeTransferDialog.jsx b/src/components/exchange/ExchangeTransferDialog/ExchangeTransferDialog.jsx
@@ -6,8 +6,9 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { Translate } from 'react-redux-i18n'
-import { withdrawFromExchange } from 'redux/exchange/actions'
+import { DUCK_EXCHANGE, withdrawFromExchange } from 'redux/exchange/actions'
 import { DUCK_MAIN_WALLET, mainTransfer } from 'redux/mainWallet/actions'
+import TokensCollection from 'models/exchange/TokensCollection'
 import { modalsClose } from 'redux/modals/actions'
 import ExchangeDepositForm from './ExchangeDepositForm'
 import './ExchangeTransferDialog.scss'
@@ -30,8 +31,10 @@ function mapDispatchToProps (dispatch) {
 }
 
 function mapStateToProps (state) {
+  const exchange = state.get(DUCK_EXCHANGE)
   return {
     userWallet: state.get(DUCK_MAIN_WALLET),
+    tokens: exchange.tokens(),
   }
 }
 
@@ -45,6 +48,7 @@ export default class ExchangeTransferDialog extends React.PureComponent {
     dispatch: PropTypes.func,
     depositToExchange: PropTypes.func,
     withdrawFromExchange: PropTypes.func,
+    tokens: PropTypes.instanceOf(TokensCollection),
   }
 
   handleDeposit = (values, dispatch, props) => {
@@ -67,7 +71,14 @@ export default class ExchangeTransferDialog extends React.PureComponent {
   }
 
   render () {
-    const token = this.props.userWallet.tokens().get(this.props.tokenSymbol)
+    let token = this.props.userWallet.tokens().get(this.props.tokenSymbol)
+    let showMessage = false
+
+    if (!token) {
+      token = this.props.tokens.getBySymbol(this.props.tokenSymbol)
+      showMessage = true
+    }
+
     return (
       <ModalDialog>
         <div styleName='root'>
@@ -81,15 +92,22 @@ export default class ExchangeTransferDialog extends React.PureComponent {
             </div>
           </div>
           <div styleName='content'>
+            {
+              showMessage &&
+              <div styleName='warningMessage'>
+                <i className='material-icons'>warning</i>
+                <Translate value={prefix('needToCreateWallet')} symbol={this.props.tokenSymbol} />
+              </div>
+            }
             <ExchangeDepositForm
-              title={<span><Translate value={prefix('deposit')}/> {this.props.tokenSymbol}</span>}
+              title={<span><Translate value={prefix('deposit')} /> {this.props.tokenSymbol}</span>}
               form={FORM_EXCHANGE_DEPOSIT_FORM}
               onSubmit={this.handleDeposit}
-              maxAmount={token.balance()}
+              maxAmount={token ? token.balance() : 0}
               symbol={token.symbol()}
             />
             <ExchangeDepositForm
-              title={<span><Translate value={prefix('withdrawal')}/> {this.props.tokenSymbol}</span>}
+              title={<span><Translate value={prefix('withdrawal')} /> {this.props.tokenSymbol}</span>}
               form={FORM_EXCHANGE_WITHDRAWAL_FORM}
               onSubmit={this.handleWithdrawal}
               maxAmount={this.props.tokenSymbol === 'ETH' ? this.props.exchange.ethBalance() : this.props.exchange.assetBalance()}

diff --git a/src/components/exchange/ExchangeTransferDialog/ExchangeTransferDialog.scss b/src/components/exchange/ExchangeTransferDialog/ExchangeTransferDialog.scss
@@ -77,3 +77,9 @@
   margin-bottom: 12px;
   margin-top: 16px;
 }
+
+.warningMessage {
+  display: flex;
+  padding: 0 16px;
+  color: $color-warning;
+}
diff --git a/src/components/exchange/ExchangeTransferDialog/lang.js b/src/components/exchange/ExchangeTransferDialog/lang.js
@@ -6,6 +6,7 @@ export default {
     maxAmount: 'Maximum amount: ',
     amountIn: 'Amount in ',
     sendRequest: 'send request',
+    needToCreateWallet: 'You need to create %{symbol} wallet',
   },
   ru: {
     title: 'Внести/вывести ',
@@ -14,5 +15,6 @@ export default {
     maxAmount: 'Максимальное значение: ',
     amountIn: 'Сумма в ',
     sendRequest: 'отправить запрос',
+    needToCreateWallet: 'Вам нужно создать кошелек для %{symbol}',
   },
 }