Add Go to Coinbase; Show Buy Ether after signup

7 files changed, 104 insertions, 67 deletions

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 19c441734..c3a52d94e 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import Identicon from '../../../../ui/app/components/identicon'
 import {confirmSeedWords} from '../../../../ui/app/actions'
 import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
 
 const LockIcon = props => (
   <svg
@@ -36,9 +37,10 @@ const LockIcon = props => (
 
 class BackupPhraseScreen extends Component {
   static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
     address: PropTypes.string.isRequired,
     seedWords: PropTypes.string.isRequired,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -211,19 +213,22 @@ class BackupPhraseScreen extends Component {
   }
 
   render() {
-    return (
-      <div className="backup-phrase">
-        {this.renderBack()}
-        <Identicon address={this.props.address} diameter={70} />
-        {this.renderContent()}
-      </div>
-    )
+    return this.props.isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
+        <div className="backup-phrase">
+          {this.renderBack()}
+          <Identicon address={this.props.address} diameter={70} />
+          {this.renderContent()}
+        </div>
+      )
   }
 }
 
 export default connect(
-  ({ metamask: { selectedAddress, seedWords } }) => ({
+  ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
     seedWords,
+    isLoading,
     address: selectedAddress
   }),
   dispatch => ({
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 395a11be5..0a8417bfc 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -2,7 +2,9 @@ import React, {Component, PropTypes} from 'react'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
+import copyToClipboard from 'copy-to-clipboard'
 import Identicon from '../../../../ui/app/components/identicon'
+import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
 
 class BuyEtherScreen extends Component {
   static OPTION_VALUES = {
@@ -28,10 +30,34 @@ class BuyEtherScreen extends Component {
 
   static propTypes = {
     address: PropTypes.string,
+    goToCoinbase: PropTypes.func.isRequired,
+    showAccountDetail: PropTypes.func.isRequired,
   }
 
   state = {
     selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
+    justCopied: false
+  }
+
+  copyToClipboard = () => {
+    const { address } = this.props;
+
+    this.setState({ justCopied: true }, () => copyToClipboard(address))
+
+    setTimeout(() => this.setState({ justCopied: false }), 1000)
+  }
+
+  renderSkipStep() {
+    const {showAccountDetail, address} = this.props
+
+    return (
+      <button
+        className="first-time-flow__button--tertiary"
+        onClick={() => showAccountDetail(address)}
+      >
+        Skip this step
+      </button>
+    )
   }
 
   renderCoinbaseLogo() {
@@ -59,32 +85,34 @@ class BuyEtherScreen extends Component {
     )
   }
 
+  renderCoinbaseForm() {
+    return (
+      <div className="buy-ether__action-content-wrapper">
+        <div>{this.renderCoinbaseLogo()}</div>
+        <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+        <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
+        <div className="buy-ether__buttons">
+          <button
+            className="first-time-flow__button"
+            onClick={() => this.goToCoinbase(address)}
+          >
+            Buy
+          </button>
+          <div className="buy-ether__button-separator-text">or</div>
+          {this.renderSkipStep()}
+        </div>
+      </div>
+    )
+  }
+
   renderContent() {
-    const { OPTION_VALUES } = BuyEtherScreen;
-    const { address } = this.props;
+    const { OPTION_VALUES } = BuyEtherScreen
+    const { address, goToCoinbase } = this.props
+    const { justCopied } = this.state
 
     switch (this.state.selectedOption) {
       case OPTION_VALUES.COINBASE:
-        return (
-          <div className="buy-ether__action-content-wrapper">
-            <div>{this.renderCoinbaseLogo()}</div>
-            <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
-            <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
-            <div className="buy-ether__buttons">
-              <button
-                className="first-time-flow__button"
-              >
-                Buy
-              </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
-            </div>
-          </div>
-        )
+        return this.renderCoinbaseForm()
       case OPTION_VALUES.SHAPESHIFT:
         return (
           <div className="buy-ether__action-content-wrapper">
@@ -97,11 +125,7 @@ class BuyEtherScreen extends Component {
                 Buy
               </button>
               <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
+              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -113,19 +137,17 @@ class BuyEtherScreen extends Component {
           <div className="buy-ether__action-content-wrapper">
             <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
             <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
-            <div className="buy-ether__small-body-text">  (This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className="buy-ether__small-body-text">(This is the account address that MetaMask created for you to recieve funds.)</div>
             <div className="buy-ether__buttons">
               <button
                 className="first-time-flow__button"
+                onClick={this.copyToClipboard}
+                disabled={justCopied}
               >
-                Copy
+                { justCopied ? 'Copied' : 'Copy' }
               </button>
               <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
+              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -177,8 +199,11 @@ class BuyEtherScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities } }) => ({
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+  ({ metamask: { selectedAddress } }) => ({
+    address: selectedAddress
+  }),
+  dispatch => ({
+    goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })),
+    showAccountDetail: address => dispatch(showAccountDetail(address)),
   })
 )(BuyEtherScreen)
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index a7af42cd7..944d8d544 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,7 +1,8 @@
 import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
 import classnames from 'classnames'
+import LoadingScreen from './loading-screen'
 import {importNewAccount, hideWarning} from '../../../../ui/app/actions'
-import {connect} from 'react-redux';
 
 const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
   <div className="import-account__input-wrapper">
@@ -132,7 +133,9 @@ class ImportAccountScreen extends Component {
     const { OPTIONS } = ImportAccountScreen;
     const { selectedOption } = this.state;
 
-    return (
+    return isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
         <div className="import-account">
           <a
             className="import-account__back-button"
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 8e836e1da..f0d62679c 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -2,6 +2,7 @@
   height: 100vh;
   width: 100vw;
   background-color: #FFF;
+  overflow: auto;
 }
 
 .create-password,
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index ff5eb9c4d..f6f7ee75f 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -6,19 +6,22 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import BuyEtherScreen from './buy-ether-screen'
+import {buyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
   static propTypes = {
     isInitialized: PropTypes.bool,
     seedWords: PropTypes.string,
-    noActiveNotices: PropTypes.bool
+    address: PropTypes.string,
+    noActiveNotices: PropTypes.bool,
+    goToBuyEtherView: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
     isInitialized: false,
     seedWords: '',
-    noActiveNotices: false
+    noActiveNotices: false,
   };
 
   static SCREEN_TYPE = {
@@ -28,7 +31,6 @@ class FirstTimeFlow extends Component {
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
-    BUY_ETHER: 'buy_ether'
   };
 
   constructor(props) {
@@ -43,7 +45,11 @@ class FirstTimeFlow extends Component {
   }
 
   getScreenType() {
-    const {isInitialized, seedWords, noActiveNotices} = this.props;
+    const {
+      isInitialized,
+      seedWords,
+      noActiveNotices,
+    } = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.IMPORT_ACCOUNT
@@ -63,6 +69,7 @@ class FirstTimeFlow extends Component {
 
   renderScreen() {
     const {SCREEN_TYPE} = FirstTimeFlow
+    const {goToBuyEtherView, address} = this.props
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
@@ -94,13 +101,7 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.BACK_UP_PHRASE:
         return (
           <BackupPhraseScreen
-            next={() => this.setScreenType(SCREEN_TYPE.BUY_ETHER)}
-          />
-        )
-      case SCREEN_TYPE.BUY_ETHER:
-        return (
-          <BuyEtherScreen
-
+            next={() => goToBuyEtherView(address)}
           />
         )
       default:
@@ -119,10 +120,14 @@ class FirstTimeFlow extends Component {
 }
 
 export default connect(
-  ({ metamask: { isInitialized, seedWords, noActiveNotices } }) => ({
+  ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
     isInitialized,
     seedWords,
-    noActiveNotices
+    noActiveNotices,
+    address: selectedAddress,
+  }),
+  dispatch => ({
+    goToBuyEtherView: address => dispatch(buyEthView(address))
   })
 )(FirstTimeFlow)
 
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d6502a6b2..8c9a0cd41 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -57,10 +57,9 @@ class NoticeScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities, lastUnreadNotice } }) => ({
+  ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+    address: selectedAddress
   }),
   dispatch => ({
     markNoticeRead: notice => dispatch(markNoticeRead(notice))
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index a32a91eb1..df5175148 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -33,8 +33,7 @@ class UniqueImageScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities } }) => ({
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+  ({ metamask: { selectedAddress } }) => ({
+    address: selectedAddress
   })
 )(UniqueImageScreen)