Convert all remaining Modals to use Portal (UI consistency) (#4625)

* FirstRun dialog -> Portal

* CreateAccount Modal -> Portal

* CreateWallet dialog -> Portal

* Transfer dialog -> Portal

* Fix failing tests

* ShapeShift dialog -> Portal

* Verification dialog -> Portal

* EditMeta dialog -> Portal

* PasswordManager dialog -> Portal

* WalletSettings dialog -> Portal

* AddAddress dialog -> Portal

* s/delete address/forget address/

* AddContract dialog -> Portal

* DeployContract dialog -> Portal

* ExceuteContract dialog -> Portal

* LoadContract dialog -> Portal

* SaveContract dialog -> Portal

* UpgradeParity dialog -> Portal

* Convert inline modals (tsk, tsk)

* Remove ui/Modal

* Import dialog i18n

* Button array returns (thanks @derhuerst)

* Unneeded debug

* Typo

* Readability formatting

js/src/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -18,7 +18,9 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input, InputAddress } from '~/ui';
+import { Form, Input, InputAddress, QrCode } from '~/ui';
+
+import styles from '../createAccount.css';
 
 @observer
 export default class AccountDetails extends Component {
@@ -30,42 +32,54 @@ export default class AccountDetails extends Component {
     const { address, name } = this.props.store;
 
     return (
-      <Form>
-        <Input
-          allowCopy
-          hint={
-            <FormattedMessage
-              id='createAccount.accountDetails.name.hint'
-              defaultMessage='a descriptive name for the account'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='createAccount.accountDetails.name.label'
-              defaultMessage='account name'
-            />
-          }
-          readOnly
-          value={ name }
-        />
-        <InputAddress
-          disabled
-          hint={
-            <FormattedMessage
-              id='createAccount.accountDetails.address.hint'
-              defaultMessage='the network address for the account'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='createAccount.accountDetails.address.label'
-              defaultMessage='address'
-            />
-          }
+      <div className={ styles.details }>
+        <p>
+          <FormattedMessage
+            id='createAccount.accountDetails.intro'
+            defaultMessage='Your account has been created with the following details:'
+          />
+        </p>
+        <Form className={ styles.infoForm }>
+          <Input
+            allowCopy
+            hint={
+              <FormattedMessage
+                id='createAccount.accountDetails.name.hint'
+                defaultMessage='a descriptive name for the account'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='createAccount.accountDetails.name.label'
+                defaultMessage='account name'
+              />
+            }
+            readOnly
+            value={ name }
+          />
+          <InputAddress
+            disabled
+            hint={
+              <FormattedMessage
+                id='createAccount.accountDetails.address.hint'
+                defaultMessage='the network address for the account'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='createAccount.accountDetails.address.label'
+                defaultMessage='address'
+              />
+            }
+            value={ address }
+          />
+          { this.renderPhrase() }
+        </Form>
+        <QrCode
+          className={ styles.qr }
           value={ address }
         />
-        { this.renderPhrase() }
-      </Form>
+      </div>
     );
   }
 

js/src/modals/CreateAccount/CreationType/creationType.js

@@ -17,10 +17,104 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+
+import { RadioButtons } from '~/ui';
 
 import styles from '../createAccount.css';
 
+const TYPES = [
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromNew.description'
+        defaultMessage='Create an account by selecting your identity icon and specifying the password'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromNew.label'
+        defaultMessage='Create new account manually'
+      />
+    ),
+    key: 'fromNew'
+  },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromPhrase.description'
+        defaultMessage='Recover an account by entering a previously stored recovery phrase and new password'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromPhrase.label'
+        defaultMessage='Recover account from recovery phrase'
+      />
+    ),
+    key: 'fromPhrase'
+  },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromGeth.description'
+        defaultMessage='Import an accounts from the Geth keystore with the original password'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromGeth.label'
+        defaultMessage='Import accounts from Geth keystore'
+      />
+    ),
+    key: 'fromGeth'
+  },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromJSON.description'
+        defaultMessage='Create an account by importing an industry-standard JSON keyfile'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromJSON.label'
+        defaultMessage='Import account from a backup JSON file'
+      />
+    ),
+    key: 'fromJSON'
+  },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromPresale.description'
+        defaultMessage='Create an account by importing an Ethereum presale wallet file'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromPresale.label'
+        defaultMessage='Import account from an Ethereum pre-sale wallet'
+      />
+    ),
+    key: 'fromPresale'
+  },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromRaw.description'
+        defaultMessage='Create an account by entering a previously backed-up raw private key'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromRaw.label'
+        defaultMessage='Import raw private key'
+      />
+    ),
+    key: 'fromRaw'
+  }
+];
+
 @observer
 export default class CreationType extends Component {
   static propTypes = {
@@ -32,66 +126,12 @@ export default class CreationType extends Component {
 
     return (
       <div className={ styles.spaced }>
-        <RadioButtonGroup
-          defaultSelected={ createType }
+        <RadioButtons
           name='creationType'
           onChange={ this.onChange }
-        >
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromNew.label'
-                defaultMessage='Create new account manually'
-              />
-            }
-            value='fromNew'
-          />
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromPhrase.label'
-                defaultMessage='Recover account from recovery phrase'
-              />
-            }
-            value='fromPhrase'
-          />
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromGeth.label'
-                defaultMessage='Import accounts from Geth keystore'
-              />
-            }
-            value='fromGeth'
-          />
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromJSON.label'
-                defaultMessage='Import account from a backup JSON file'
-              />
-            }
-            value='fromJSON'
-          />
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromPresale.label'
-                defaultMessage='Import account from an Ethereum pre-sale wallet'
-              />
-            }
-            value='fromPresale'
-          />
-          <RadioButton
-            label={
-              <FormattedMessage
-                id='createAccount.creationType.fromRaw.label'
-                defaultMessage='Import raw private key'
-              />
-            }
-            value='fromRaw'
-          />
-        </RadioButtonGroup>
+          value={ createType }
+          values={ TYPES }
+        />
       </div>
     );
   }

js/src/modals/CreateAccount/CreationType/creationType.spec.js

@@ -50,7 +50,7 @@ describe('modals/CreateAccount/CreationType', () => {
 
     beforeEach(() => {
       store.setCreateType(SELECT_TYPE);
-      selector = component.find('RadioButtonGroup');
+      selector = component.find('RadioButtons');
     });
 
     it('renders the selector', () => {
@@ -58,7 +58,7 @@ describe('modals/CreateAccount/CreationType', () => {
     });
 
     it('passes the store type to defaultSelected', () => {
-      expect(selector.props().defaultSelected).to.equal(SELECT_TYPE);
+      expect(selector.props().value).to.equal(SELECT_TYPE);
     });
   });
 

js/src/modals/CreateAccount/NewAccount/newAccount.spec.js

@@ -59,7 +59,7 @@ describe('modals/CreateAccount/NewAccount', () => {
       });
 
       it('creates initial accounts', () => {
-        expect(Object.keys(instance.state.accounts).length).to.equal(5);
+        expect(Object.keys(instance.state.accounts).length).to.equal(7);
       });
 
       it('sets the initial selected value', () => {

js/src/modals/CreateAccount/createAccount.css

@@ -15,6 +15,19 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+.details {
+  text-align: center;
+
+  .infoForm {
+    background: rgba(0, 0, 0, 0.1);
+    padding: 1.5em;
+  }
+
+  .qr {
+    margin: 1.5em auto 0 auto;
+  }
+}
+
 .spaced {
   line-height: 1.618em;
 }
@@ -39,7 +52,8 @@
   }
 }
 
-.identities, .selector {
+.identities,
+.selector {
   display: flex;
 }
 
@@ -47,9 +61,10 @@
   margin-top: 1.5em;
 }
 
-.identities .identity, .selector .button {
-  flex: 0 1 18%;
-  width: 18% !important;
+.identities .identity,
+.selector .button {
+  flex: 0 1 12.5%;
+  width: 12.5% !important;
   text-align: center;
   cursor: pointer;
 }

js/src/modals/CreateAccount/createAccount.js

@@ -22,7 +22,7 @@ import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '~/api/util/identity';
 import { newError } from '~/redux/actions';
-import { Button, Modal } from '~/ui';
+import { Button, Portal } from '~/ui';
 import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '~/ui/Icons';
 import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
 
@@ -86,10 +86,11 @@ class CreateAccount extends Component {
     const { createType, stage } = this.store;
 
     return (
-      <Modal
-        visible
-        actions={ this.renderDialogActions() }
-        current={ stage }
+      <Portal
+        buttons={ this.renderDialogActions() }
+        activeStep={ stage }
+        onClose={ this.onClose }
+        open
         steps={
           createType === 'fromNew'
             ? STAGE_NAMES
@@ -97,7 +98,7 @@ class CreateAccount extends Component {
         }
       >
         { this.renderPage() }
-      </Modal>
+      </Portal>
     );
   }
 

js/src/modals/CreateAccount/store.js

@@ -325,6 +325,8 @@ export default class Store {
         this._api.parity.generateSecretPhrase(),
         this._api.parity.generateSecretPhrase(),
         this._api.parity.generateSecretPhrase(),
+        this._api.parity.generateSecretPhrase(),
+        this._api.parity.generateSecretPhrase(),
         this._api.parity.generateSecretPhrase()
       ])
       .then((phrases) => {

js/src/modals/CreateAccount/store.spec.js

@@ -580,9 +580,9 @@ describe('modals/CreateAccount/Store', () => {
         });
       });
 
-      it('returns a map of 5 accounts', () => {
+      it('returns a map of 7 accounts', () => {
         return store.createIdentities().then((accounts) => {
-          expect(Object.keys(accounts).length).to.equal(5);
+          expect(Object.keys(accounts).length).to.equal(7);
         });
       });