style(Swap): style confirmation modal

packages/blockchain-info-components/src/Icons/Icomoon.js

@@ -83,6 +83,7 @@ export default {
   'stack-of-coins': '\\e972',
   switch: '\\e9b6',
   'sync-regular': '\\e93d',
+  'thick-arrow-right': '\\e91c',
   transactions: '\\e976',
   trash: '\\e951',
   twitter: '\\e916',

packages/blockchain-wallet-v4-frontend/src/components/Exchange/index.js

@@ -52,18 +52,17 @@ export const LargeTableRow = styled(TableRow)`
 export const Note = styled(Text)`
   font-size: 12px;
   line-height: 14px;
-  margin-top: 12px;
   margin-bottom: 28px;
   font-weight: 300;
+  text-align: center;
+  margin-top: 16px;
+  color: ${props => props.theme['gray-4']};
 `
 export const ExchangeButton = styled(Button)`
-  margin-left: 30px;
-  margin-right: 30px;
-  width: calc(100% - 60px);
-`
-export const CancelButton = styled(ExchangeButton)`
-  border: none;
-  margin-top: 10px;
+  width: 100%;
+  height: 56px;
+  weight: 400;
+  font-size: 18px;
 `
 export const ExchangeAmounts = styled.div``
 export const ExchangeAmount = styled(Text)`

packages/blockchain-wallet-v4-frontend/src/data/components/exchange/exchange.sagas.js

@@ -29,14 +29,14 @@ import { actions, actionTypes, selectors, model } from 'data'
 import {
   EXCHANGE_FORM,
   CONFIRM_FORM,
+  CONFIRM_MODAL,
   NO_ADVICE_ERROR,
   NO_LIMITS_ERROR,
   MISSING_DEVICE_ERROR,
   LATEST_TX_ERROR,
   LATEST_TX_FETCH_FAILED_ERROR,
   getTargetCoinsPairedToSource,
-  getSourceCoinsPairedToTarget,
-  EXCHANGE_STEPS
+  getSourceCoinsPairedToTarget
 } from './model'
 import utils from './sagas.utils'
 import * as A from './actions'
@@ -646,7 +646,8 @@ export default ({ api, coreSagas, networks }) => {
     if (txError) {
       yield put(actions.analytics.logEvent(SWAP_EVENTS.ORDER_PREVIEW_ERROR))
     } else {
-      yield put(A.setStep(EXCHANGE_STEPS.CONFIRM))
+      // yield put(actions.router.replace('/swap', {}))
+      yield put(actions.modals.showModal(CONFIRM_MODAL))
       yield put(actions.analytics.logEvent(SWAP_EVENTS.ORDER_PREVIEW))
     }
   }
@@ -738,7 +739,6 @@ export default ({ api, coreSagas, networks }) => {
   }
 
   const showConfirmationError = function * (err) {
-    yield put(actions.modals.closeAllModals())
     yield put(actions.form.stopSubmit(CONFIRM_FORM, { _error: err }))
     yield put(
       actions.logs.logErrorMessage(logLocation, 'confirm', JSON.stringify(err))
@@ -759,7 +759,6 @@ export default ({ api, coreSagas, networks }) => {
       yield call(depositFunds, trade, source, depositCredentials)
       yield put(actions.form.stopSubmit(CONFIRM_FORM))
       yield put(actions.router.push('/swap/history'))
-      yield put(A.setStep(EXCHANGE_STEPS.EXCHANGE_FORM))
       yield take(actionTypes.modals.CLOSE_ALL_MODALS)
       yield put(
         actions.modals.showModal(RESULTS_MODAL, formatExchangeTrade(trade))

packages/blockchain-wallet-v4-frontend/src/data/components/exchange/model.js

@@ -14,15 +14,9 @@ import {
 import { Remote } from 'blockchain-wallet-v4'
 import { splitPair } from 'data/modules/rates/model'
 
-export const EXCHANGE_STEPS = {
-  STATE_REGISTRATION: 0,
-  EXCHANGE_FORM: 1,
-  CONFIRM: 2,
-  EXCHANGE_RESULT: 3
-}
-
 export const EXCHANGE_FORM = '@EXCHANGE.EXCHANGE_FORM'
 export const CONFIRM_FORM = '@EXCHANGE.CONFIRM_FORM'
+export const CONFIRM_MODAL = '@EXCHANGE.CONFIRM_MODAL'
 
 export const SHAPESHIFT_PAIRS = Remote.of([
   'BTC-BCH',

packages/blockchain-wallet-v4-frontend/src/data/components/exchange/reducers.js

@@ -1,10 +1,8 @@
 import { assoc, compose } from 'ramda'
 import * as AT from './actionTypes'
 import { Remote } from 'blockchain-wallet-v4'
-import { EXCHANGE_STEPS } from './model'
 
 const INITIAL_STATE = {
-  step: EXCHANGE_STEPS.EXCHANGE_FORM,
   limits: Remote.NotAsked,
   min: null,
   max: null,
@@ -18,9 +16,6 @@ export default (state = INITIAL_STATE, action) => {
   const { type, payload } = action
 
   switch (type) {
-    case AT.SET_STEP: {
-      return assoc('step', payload.step, state)
-    }
     case AT.FETCH_LIMITS_LOADING:
       return assoc('limits', Remote.Loading, state)
     case AT.FETCH_LIMITS_SUCCESS:

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeConfirm/ExchangeError/index.js → packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/ExchangeError/index.js

@@ -14,6 +14,7 @@ import {
 const Error = styled.div`
   width: 100%;
   text-align: center;
+  margin-top: -8px;
 `
 const HeaderText = styled(Text).attrs({
   size: '18px'

packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/index.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import styled from 'styled-components'
+import { bindActionCreators, compose } from 'redux'
+import { connect } from 'react-redux'
+
+import modalEnhancer from 'providers/ModalEnhancer'
+import { actions, model } from 'data'
+import { getData } from './selectors'
+import {
+  BlockchainLoader,
+  Modal,
+  ModalBody,
+  ModalHeader
+} from 'blockchain-info-components'
+import DataError from 'components/DataError'
+import ExchangeConfirm from './template'
+
+const { CONFIRM_MODAL } = model.components.exchange
+
+const Loader = styled(BlockchainLoader)`
+  align-self: center;
+  margin: 50px auto;
+`
+const Body = styled(ModalBody)`
+  padding-top: 0px;
+`
+const Header = styled(ModalHeader)`
+  padding: 20px 20px 0 0;
+  border-bottom: 0px;
+`
+class ExchangeConfirmContainer extends React.PureComponent {
+  render () {
+    const { data, actions, close, position, total } = this.props
+    const ConfirmCata = data.cata({
+      Success: value => (
+        <ExchangeConfirm
+          {...value}
+          close={close}
+          onSubmit={actions.confirmExchange}
+        />
+      ),
+      Failure: message => <DataError message={message} />,
+      Loading: () => <Loader width='100px' height='100px' />,
+      NotAsked: () => <Loader width='100px' height='100px' />
+    })
+
+    return (
+      <Modal size='small' total={total} position={position}>
+        <Header onClose={close} />
+        <Body>{ConfirmCata}</Body>
+      </Modal>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  data: getData(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions.components.exchange, dispatch)
+})
+
+const enhance = compose(
+  modalEnhancer(CONFIRM_MODAL),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)
+
+export default enhance(ExchangeConfirmContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeConfirm/selectors.js → packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/selectors.js

@@ -1,9 +1,10 @@
 import { selectors, model } from 'data'
 import { lift, path } from 'ramda'
+import { Exchange } from 'blockchain-wallet-v4/src'
 
 const { formatPair } = model.rates
 const { EXCHANGE_FORM } = model.components.exchange
-const { getAmounts, getRates } = selectors.components.exchange
+const { getAmounts } = selectors.components.exchange
 
 export const getData = state => {
   const currencyR = selectors.core.settings.getCurrency(state)
@@ -12,15 +13,16 @@ export const getData = state => {
   const targetCoin = path(['target', 'coin'], formValues) || 'ETH'
   const pair = formatPair(sourceCoin, targetCoin)
   const amountsR = getAmounts(pair, state)
-  const ratesR = getRates(pair, state)
 
-  const transform = (currency, amounts, rates) => ({
+  const transform = (currency, amounts) => ({
+    fiatCurrencySymbol: Exchange.getSymbol(currency),
     sourceAmount: amounts.sourceAmount,
     targetAmount: amounts.targetAmount,
+    targetFiat: amounts.targetFiat,
     sourceCoin,
     targetCoin,
     currency
   })
 
-  return lift(transform)(currencyR, amountsR, ratesR)
+  return lift(transform)(currencyR, amountsR)
 }