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 => ( ( 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 ( -
- {this.renderBack()} - - {this.renderContent()} -
- ) + return this.props.isLoading + ? + : ( +
+ {this.renderBack()} + + {this.renderContent()} +
+ ) } } 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 ( + + ) } renderCoinbaseLogo() { @@ -59,32 +85,34 @@ class BuyEtherScreen extends Component { ) } + renderCoinbaseForm() { + return ( +
+
{this.renderCoinbaseLogo()}
+
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
+ What is Ethereum? +
+ +
or
+ {this.renderSkipStep()} +
+
+ ) + } + 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 ( -
-
{this.renderCoinbaseLogo()}
-
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
- What is Ethereum? -
- -
or
- -
-
- ) + return this.renderCoinbaseForm() case OPTION_VALUES.SHAPESHIFT: return (
@@ -97,11 +125,7 @@ class BuyEtherScreen extends Component { Buy
or
- + {this.renderSkipStep()}
) @@ -113,19 +137,17 @@ class BuyEtherScreen extends Component {
Deposit Ether directly into your account.
-
(This is the account address that MetaMask created for you to recieve funds.)
+
(This is the account address that MetaMask created for you to recieve funds.)
or
- + {this.renderSkipStep()}
) @@ -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 classnames from 'classnames' -import {importNewAccount, hideWarning} from '../../../../ui/app/actions' import {connect} from 'react-redux'; +import classnames from 'classnames' +import LoadingScreen from './loading-screen' +import {importNewAccount, hideWarning} from '../../../../ui/app/actions' const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
@@ -132,7 +133,9 @@ class ImportAccountScreen extends Component { const { OPTIONS } = ImportAccountScreen; const { selectedOption } = this.state; - return ( + return isLoading + ? + : (
this.setScreenType(SCREEN_TYPE.BUY_ETHER)} - /> - ) - case SCREEN_TYPE.BUY_ETHER: - return ( - 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) diff --git a/ui/app/actions.js b/ui/app/actions.js index 04bba6bf2..a9f3185dd 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -224,7 +224,7 @@ function confirmSeedWords () { } log.info('Seed word cache cleared. ' + account) - dispatch(actions.showAccountDetail(account)) + dispatch(actions.showAccountsPage()) resolve(account) }) }) diff --git a/ui/app/app.js b/ui/app/app.js index ec36eb22e..362d9cf27 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -5,6 +5,7 @@ const h = require('react-hyperscript') const actions = require('./actions') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default +const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -130,10 +131,16 @@ App.prototype.renderAppBar = function () { const isNetworkMenuOpen = state.isNetworkMenuOpen || false const {isMascara, isOnboarding} = props + // Do not render header if user is in mascara onboarding if (isMascara && isOnboarding) { return null } + // Do not render header if user is in mascara buy ether + if (isMascara && props.currentView.name === 'buyEth') { + return null + } + return ( h('.full-width', { @@ -433,9 +440,9 @@ App.prototype.renderPrimary = function () { var props = this.props const {isMascara, isOnboarding} = props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) - } + // if (isMascara && isOnboarding) { + // return h(MascaraFirstTime) + // } // notices if (!props.noActiveNotices) { @@ -534,7 +541,9 @@ App.prototype.renderPrimary = function () { case 'buyEth': log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) + return isMascara + ? h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + : h(BuyView, {key: 'buyEthView'}) case 'qr': log.debug('rendering show qr screen') diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index 745990351..5ab5d4c33 100644 --- a/ui/app/keychains/hd/create-vault-complete.js +++ b/ui/app/keychains/hd/create-vault-complete.js @@ -62,7 +62,8 @@ CreateVaultCompleteScreen.prototype.render = function () { }), h('button.primary', { - onClick: () => this.confirmSeedWords(), + onClick: () => this.confirmSeedWords() + .then(account => this.showAccountDetail(account)), style: { margin: '24px', fontSize: '0.9em', @@ -82,5 +83,9 @@ CreateVaultCompleteScreen.prototype.render = function () { } CreateVaultCompleteScreen.prototype.confirmSeedWords = function () { - this.props.dispatch(actions.confirmSeedWords()) + return this.props.dispatch(actions.confirmSeedWords()) +} + +CreateVaultCompleteScreen.prototype.showAccountDetail = function (account) { + return this.props.dispatch(actions.showAccountDetail(account)) }