feat(BuySell): finishes success modal for micro deposits

blockchain · Jun 19, 2018 · d9a4b56 · d9a4b56
1 parent 59ef1d4
commit d9a4b56
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.js
@@ -97,8 +97,8 @@ export default ({ coreSagas }) => {
       const result = yield call(coreSagas.data.sfox.verifyMicroDeposits, payload)
       if (result.status === 'active') {
         yield put(A.sfoxSuccess())
-        yield call(delay, 1000)
-        // yield put(modalActions.closeAllModals())
+        yield call(delay, 1500)
+        yield put(modalActions.closeAllModals())
       } else {
         yield put(A.sfoxNotAsked())
         throw new Error(result)

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxEnterMicroDeposits/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxEnterMicroDeposits/index.js
@@ -40,7 +40,8 @@ class SfoxEnterMicroDeposits extends React.PureComponent {
 const mapStateToProps = (state) => ({
   deposit1: formValueSelector('sfoxMicroDeposits')(state, 'deposit1'),
   deposit2: formValueSelector('sfoxMicroDeposits')(state, 'deposit2'),
-  status: path(['sfoxSignup', 'sfoxBusy'], state)
+  status: path(['sfoxSignup', 'sfoxBusy'], state),
+  options: path(['walletOptionsPath'], state).getOrElse({})
 })
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxEnterMicroDeposits/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxEnterMicroDeposits/template.js
@@ -6,6 +6,7 @@ import { Field, reduxForm } from 'redux-form'
 import { Form, FormGroup, FormItem, NumberBox } from 'components/Form'
 import { required } from 'services/FormHelper'
 import PropTypes from 'prop-types'
+import BuySellAnimation from '../../scenes/BuySell/BuySellAnimation'
 
 const ButtonRow = styled.div`
   display: flex;
@@ -19,22 +20,25 @@ const ErrorText = styled(Text)`
     display: inline;
   }
 `
+const TextWrapper = styled.div`
+  margin-bottom: 50px;
+  padding-bottom: 30px;
+  text-align: center;
+`
 
 const MicroDeposits = (props) => {
-  const { handleSubmit, close, position, total, invalid, status, tryAgain } = props
+  const { handleSubmit, close, position, total, invalid, status, tryAgain, options } = props
 
   if (status === 'success') {
     return (
       <Modal size='medium' position={position} total={total}>
-        {/* <ModalHeader onClose={close}>
-          <Text>
-            <FormattedMessage id='sfoxmicrodeposits.header' defaultMessage='Verify Bank Deposits' />
-          </Text>
-        </ModalHeader> */}
         <ModalBody>
-          <Text size='28px' weight={300}>
-            <FormattedMessage id='sfoxmicrodeposits.success' defaultMessage='YOU ARE NOW READY TO BUY & SELL' />
-          </Text>
+          <TextWrapper>
+            <Text size='22px' weight={300}>
+              <FormattedMessage id='sfoxmicrodeposits.success' defaultMessage='YOU ARE NOW READY TO BUY & SELL' />
+            </Text>
+          </TextWrapper>
+          <BuySellAnimation country={'US'} options={options} />
         </ModalBody>
       </Modal>
     )