Convert ShapeShift modal to store (#4035)

* WIP

* WIP store

* Store in-place

* WIP tests

* Store completed

* Expand option tests for events

* Fix & test for errors found in manual testing

* Add missing @observer (rookie mistake)

* Fix intl formatting error (completed step)

* Pass store to ErrorStep, test all stages for components

* Add warning messages (e.g. no price found)

* Fix typo

js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js

@@ -14,25 +14,21 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Value from '../Value';
-
 import styles from '../shapeshift.css';
 
+@observer
 export default class AwaitingDepositStep extends Component {
   static propTypes = {
-    coinSymbol: PropTypes.string.isRequired,
-    depositAddress: PropTypes.string,
-    price: PropTypes.shape({
-      rate: PropTypes.number.isRequired,
-      minimum: PropTypes.number.isRequired,
-      limit: PropTypes.number.isRequired
-    }).isRequired
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { coinSymbol, depositAddress, price } = this.props;
+    const { coinSymbol, depositAddress, price } = this.props.store;
     const typeSymbol = (
       <div className={ styles.symbol }>
         { coinSymbol }
@@ -43,22 +39,38 @@ export default class AwaitingDepositStep extends Component {
       return (
         <div className={ styles.center }>
           <div className={ styles.busy }>
-            Awaiting confirmation of the deposit address for your { typeSymbol } funds exchange
+            <FormattedMessage
+              id='shapeshift.awaitingDepositStep.awaitingConfirmation'
+              defaultMessage='Awaiting confirmation of the deposit address for your {typeSymbol} funds exchange'
+              values={ { typeSymbol } } />
           </div>
         </div>
       );
     }
+
     return (
       <div className={ styles.center }>
         <div className={ styles.info }>
-          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> is awaiting a { typeSymbol } deposit. Send the funds from your { typeSymbol } network client to -
+          <FormattedMessage
+            id='shapeshift.awaitingDepositStep.awaitingDeposit'
+            defaultMessage='{shapeshiftLink} is awaiting a {typeSymbol} deposit. Send the funds from your {typeSymbol} network client to -'
+            values={ {
+              shapeshiftLink: <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a>,
+              typeSymbol
+            } } />
         </div>
         <div className={ styles.hero }>
           { depositAddress }
         </div>
         <div className={ styles.price }>
           <div>
-            (<Value amount={ price.minimum } symbol={ coinSymbol } /> minimum, <Value amount={ price.limit } symbol={ coinSymbol } /> maximum)
+            <FormattedMessage
+              id='shapeshift.awaitingDepositStep.minimumMaximum'
+              defaultMessage='{minimum} minimum, {maximum} maximum'
+              values={ {
+                maximum: <Value amount={ price.limit } symbol={ coinSymbol } />,
+                minimum: <Value amount={ price.minimum } symbol={ coinSymbol } />
+              } } />
           </div>
         </div>
       </div>

js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js

@@ -0,0 +1,50 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import AwaitingDepositStep from './';
+
+let component;
+
+function render () {
+  component = shallow(
+    <AwaitingDepositStep
+      store={ {
+        coinSymbol: 'BTC',
+        price: { rate: 0.001, minimum: 0, limit: 1.999 }
+      } } />
+  );
+
+  return component;
+}
+
+describe('modals/Shapeshift/AwaitingDepositStep', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  it('displays waiting for address with empty depositAddress', () => {
+    render();
+    expect(component.find('FormattedMessage').props().id).to.match(/awaitingConfirmation/);
+  });
+
+  it('displays waiting for deposit with non-empty depositAddress', () => {
+    render({ depositAddress: 'xyz' });
+    expect(component.find('FormattedMessage').first().props().id).to.match(/awaitingDeposit/);
+  });
+});

js/src/modals/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.js

@@ -15,32 +15,39 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import Value from '../Value';
+import { FormattedMessage } from 'react-intl';
+import { observer } from 'mobx-react';
 
+import Value from '../Value';
 import styles from '../shapeshift.css';
 
+@observer
 export default class AwaitingExchangeStep extends Component {
   static propTypes = {
-    depositInfo: PropTypes.shape({
-      incomingCoin: PropTypes.number.isRequired,
-      incomingType: PropTypes.string.isRequired
-    }).isRequired
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { depositInfo } = this.props;
+    const { depositInfo } = this.props.store;
     const { incomingCoin, incomingType } = depositInfo;
 
     return (
       <div className={ styles.center }>
         <div className={ styles.info }>
-          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> has received a deposit of -
+          <FormattedMessage
+            id='shapeshift.awaitingExchangeStep.receivedInfo'
+            defaultMessage='{shapeshiftLink} has received a deposit of -'
+            values={ {
+              shapeshiftLink: <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a>
+            } } />
         </div>
         <div className={ styles.hero }>
           <Value amount={ incomingCoin } symbol={ incomingType } />
         </div>
         <div className={ styles.info }>
-          Awaiting the completion of the funds exchange and transfer of funds to your Parity account.
+          <FormattedMessage
+            id='shapeshift.awaitingExchangeStep.awaitingCompletion'
+            defaultMessage='Awaiting the completion of the funds exchange and transfer of funds to your Parity account.' />
         </div>
       </div>
     );

js/src/modals/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.spec.js

@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import AwaitingExchangeStep from './';
+
+let component;
+
+function render () {
+  component = shallow(
+    <AwaitingExchangeStep
+      store={ {
+        depositInfo: { incomingCoin: 0.01, incomingType: 'BTC' }
+      } } />
+  );
+
+  return component;
+}
+
+describe('modals/Shapeshift/AwaitingExchangeStep', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+});

js/src/modals/Shapeshift/CompletedStep/completedStep.js

@@ -14,39 +14,41 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Value from '../Value';
-
 import styles from '../shapeshift.css';
 
+@observer
 export default class CompletedStep extends Component {
   static propTypes = {
-    depositInfo: PropTypes.shape({
-      incomingCoin: PropTypes.number.isRequired,
-      incomingType: PropTypes.string.isRequired
-    }).isRequired,
-    exchangeInfo: PropTypes.shape({
-      outgoingCoin: PropTypes.string.isRequired,
-      outgoingType: PropTypes.string.isRequired
-    }).isRequired
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { depositInfo, exchangeInfo } = this.props;
+    const { depositInfo, exchangeInfo } = this.props.store;
     const { incomingCoin, incomingType } = depositInfo;
     const { outgoingCoin, outgoingType } = exchangeInfo;
 
     return (
       <div className={ styles.center }>
         <div className={ styles.info }>
-          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> has completed the funds exchange.
+          <FormattedMessage
+            id='shapeshift.completedStep.completed'
+            defaultMessage='{shapeshiftLink} has completed the funds exchange.'
+            values={ {
+              shapeshiftLink: <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a>
+            } } />
         </div>
         <div className={ styles.hero }>
           <Value amount={ incomingCoin } symbol={ incomingType } /> => <Value amount={ outgoingCoin } symbol={ outgoingType } />
         </div>
         <div className={ styles.info }>
-          The change in funds will be reflected in your Parity account shortly.
+          <FormattedMessage
+            id='shapeshift.completedStep.parityFunds'
+            defaultMessage='The change in funds will be reflected in your Parity account shortly.' />
         </div>
       </div>
     );

js/src/modals/Shapeshift/CompletedStep/completedStep.spec.js

@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import CompletedStep from './';
+
+let component;
+
+function render () {
+  component = shallow(
+    <CompletedStep
+      store={ {
+        depositInfo: { incomingCoin: 0.01, incomingType: 'BTC' },
+        exchangeInfo: { outgoingCoin: 0.1, outgoingType: 'ETH' }
+      } } />
+  );
+
+  return component;
+}
+
+describe('modals/Shapeshift/CompletedStep', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+});

js/src/modals/Shapeshift/ErrorStep/errorStep.js

@@ -14,25 +14,30 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import styles from '../shapeshift.css';
 
+@observer
 export default class ErrorStep extends Component {
   static propTypes = {
-    error: PropTypes.shape({
-      fatal: PropTypes.bool,
-      message: PropTypes.string.isRequired
-    }).isRequired
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { error } = this.props;
+    const { error } = this.props.store;
 
     return (
       <div className={ styles.body }>
         <div className={ styles.info }>
-          The funds shifting via <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> failed with a fatal error on the exchange. The error message received from the exchange is as follow:
+          <FormattedMessage
+            id='shapeshift.errorStep.info'
+            defaultMessage='The funds shifting via {shapeshiftLink} failed with a fatal error on the exchange. The error message received from the exchange is as follow:'
+            values={ {
+              shapeshiftLink: <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a>
+            } } />
         </div>
         <div className={ styles.error }>
           { error.message }

js/src/modals/Shapeshift/ErrorStep/errorStep.spec.js

@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import ErrorStep from './';
+
+let component;
+
+function render () {
+  component = shallow(
+    <ErrorStep
+      store={ {
+        error: new Error('testing')
+      } } />
+  );
+
+  return component;
+}
+
+describe('modals/Shapeshift/ErrorStep', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+});