aboutsummaryrefslogtreecommitdiffstats
path: root/mascara
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@users.noreply.github.com>2019-01-23 23:25:34 +0800
committerWhymarrh Whitby <whymarrh.whitby@gmail.com>2019-01-23 23:25:34 +0800
commitfba17d77de9e60de0e02e90dc6dbcbbf7454158a (patch)
tree0a14f465c25b2b400f5706b55993dcf06d6633a3 /mascara
parent69fcfa427bdee2ea287e9d9c23963dc1032685cd (diff)
downloadtangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.gz
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.bz2
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.lz
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.xz
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.zst
tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.zip
Refactor first time flow, remove seed phrase from state (#5994)
* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state * Fix linting and tests * Fix translations, initialization notice routing * Fix drizzle tests * Fix e2e tests * Fix integration tests * Fix styling * Fix migration naming from 030 to 031 * Open extension in browser when user has not completed onboarding
Diffstat (limited to 'mascara')
-rw-r--r--mascara/src/app/first-time/breadcrumbs.js26
-rw-r--r--mascara/src/app/first-time/buy-ether-screen.js200
-rw-r--r--mascara/src/app/first-time/confirm-seed-screen.js162
-rw-r--r--mascara/src/app/first-time/create-password-screen.js221
-rw-r--r--mascara/src/app/first-time/import-account-screen.js208
-rw-r--r--mascara/src/app/first-time/import-seed-phrase-screen.js192
-rw-r--r--mascara/src/app/first-time/index.css925
-rw-r--r--mascara/src/app/first-time/index.js99
-rw-r--r--mascara/src/app/first-time/loading-screen.js17
-rw-r--r--mascara/src/app/first-time/notice-screen.js135
-rw-r--r--mascara/src/app/first-time/seed-screen.js176
-rw-r--r--mascara/src/app/first-time/spinner.js70
-rw-r--r--mascara/src/app/first-time/unique-image-screen.js50
13 files changed, 0 insertions, 2481 deletions
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
deleted file mode 100644
index d86e10d48..000000000
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class Breadcrumbs extends Component {
-
- static propTypes = {
- total: PropTypes.number,
- currentIndex: PropTypes.number,
- };
-
- render () {
- const {total, currentIndex} = this.props
- return (
- <div className="breadcrumbs">
- {Array(total).fill().map((_, i) => (
- <div
- key={i}
- className="breadcrumb"
- style={{backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF'}}
- />
- ))}
- </div>
- )
- }
-
-}
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
deleted file mode 100644
index e270392e1..000000000
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import {connect} from 'react-redux'
-import {qrcode} from 'qrcode-npm'
-import copyToClipboard from 'copy-to-clipboard'
-import ShapeShiftForm from '../shapeshift-form'
-import Identicon from '../../../../ui/app/components/identicon'
-import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
-
-class BuyEtherScreen extends Component {
- static OPTION_VALUES = {
- COINBASE: 'coinbase',
- SHAPESHIFT: 'shapeshift',
- QR_CODE: 'qr_code',
- };
-
- static OPTIONS = [
- {
- name: 'Direct Deposit',
- value: BuyEtherScreen.OPTION_VALUES.QR_CODE,
- },
- {
- name: 'Buy with Dollars',
- value: BuyEtherScreen.OPTION_VALUES.COINBASE,
- },
- {
- name: 'Buy with Cryptos',
- value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT,
- },
- ];
-
- static propTypes = {
- address: PropTypes.string,
- goToCoinbase: PropTypes.func.isRequired,
- showAccountDetail: PropTypes.func.isRequired,
- }
-
- state = {
- selectedOption: BuyEtherScreen.OPTION_VALUES.QR_CODE,
- justCopied: false,
- }
-
- copyToClipboard = () => {
- const { address } = this.props
-
- this.setState({ justCopied: true }, () => copyToClipboard(address))
-
- setTimeout(() => this.setState({ justCopied: false }), 1000)
- }
-
- renderSkip () {
- const {showAccountDetail, address} = this.props
-
- return (
- <div
- className="buy-ether__do-it-later"
- onClick={() => showAccountDetail(address)}
- >
- Do it later
- </div>
- )
- }
-
- renderCoinbaseLogo () {
- return (
- <svg width="140px" height="49px" viewBox="0 0 579 126" version="1.1">
- <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
- <g id="Imported-Layers" fill="#0081C9">
- <path d="M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873" id="Fill-1" />
- <path d="M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z" id="Fill-2" />
- <path d="M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z" id="Fill-3" />
- <path d="M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137" id="Fill-4" />
- <path d="M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z" id="Fill-5" />
- <path d="M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z" id="Fill-6" />
- <path d="M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873" id="Fill-7" />
- <path d="M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z" id="Fill-8" />
- </g>
- </g>
- </svg>
- )
- }
-
- renderCoinbaseForm () {
- const {goToCoinbase, address} = this.props
-
- 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={() => goToCoinbase(address)}
- >
- Buy
- </button>
- </div>
- </div>
- )
- }
-
- renderContent () {
- const { OPTION_VALUES } = BuyEtherScreen
- const { address } = this.props
- const { justCopied } = this.state
- const qrImage = qrcode(4, 'M')
- qrImage.addData(address)
- qrImage.make()
-
- switch (this.state.selectedOption) {
- case OPTION_VALUES.COINBASE:
- return this.renderCoinbaseForm()
- case OPTION_VALUES.SHAPESHIFT:
- return (
- <div className="buy-ether__action-content-wrapper">
- <div className="shapeshift-logo" />
- <div className="buy-ether__body-text">
- Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
- </div>
- <ShapeShiftForm btnClass="first-time-flow__button" />
- </div>
- )
- case OPTION_VALUES.QR_CODE:
- return (
- <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__buttons">
- <button
- className="first-time-flow__button"
- onClick={this.copyToClipboard}
- disabled={justCopied}
- >
- { justCopied ? 'Copied' : 'Copy' }
- </button>
- </div>
- </div>
- )
- default:
- return null
- }
- }
-
- render () {
- const { OPTIONS } = BuyEtherScreen
- const { selectedOption } = this.state
-
- return (
- <div className="buy-ether">
- <Identicon address={this.props.address} diameter={70} />
- <div className="buy-ether__title">Deposit Ether</div>
- <div className="buy-ether__body-text">
- MetaMask works best if you have Ether in your account to pay for transaction gas fees and more. To get Ether, choose from one of these methods.
- </div>
- <div className="buy-ether__content-wrapper">
- <div className="buy-ether__content-headline-wrapper">
- <div className="buy-ether__content-headline">Deposit Options</div>
- {this.renderSkip()}
- </div>
- <div className="buy-ether__content">
- <div className="buy-ether__side-panel">
- {OPTIONS.map(({ name, value }) => (
- <div
- key={value}
- className={classnames('buy-ether__side-panel-item', {
- 'buy-ether__side-panel-item--selected': value === selectedOption,
- })}
- onClick={() => this.setState({ selectedOption: value })}
- >
- <div className="buy-ether__side-panel-item-name">{name}</div>
- {value === selectedOption && (
- <svg viewBox="0 0 574 1024" id="si-ant-right" width="15px" height="15px">
- <path d="M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z" />
- </svg>
- )}
- </div>
- ))}
- </div>
- <div className="buy-ether__action-content">
- {this.renderContent()}
- </div>
- </div>
- </div>
- </div>
- )
- }
-}
-
-export default connect(
- ({ 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/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js
deleted file mode 100644
index dfbaffe33..000000000
--- a/mascara/src/app/first-time/confirm-seed-screen.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import classnames from 'classnames'
-import shuffle from 'lodash.shuffle'
-import { compose } from 'recompose'
-import Identicon from '../../../../ui/app/components/identicon'
-import { confirmSeedWords, showModal } from '../../../../ui/app/actions'
-import Breadcrumbs from './breadcrumbs'
-import LoadingScreen from './loading-screen'
-import { DEFAULT_ROUTE, INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes'
-
-class ConfirmSeedScreen extends Component {
- static propTypes = {
- isLoading: PropTypes.bool,
- address: PropTypes.string,
- seedWords: PropTypes.string,
- confirmSeedWords: PropTypes.func,
- history: PropTypes.object,
- openBuyEtherModal: PropTypes.func,
- };
-
- static defaultProps = {
- seedWords: '',
- }
-
- constructor (props) {
- super(props)
- const { seedWords } = props
- this.state = {
- selectedSeeds: [],
- shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [],
- }
- }
-
- componentWillMount () {
- const { seedWords, history } = this.props
-
- if (!seedWords) {
- history.push(DEFAULT_ROUTE)
- }
- }
-
- handleClick () {
- const { confirmSeedWords, history, openBuyEtherModal } = this.props
-
- confirmSeedWords()
- .then(() => {
- history.push(DEFAULT_ROUTE)
- openBuyEtherModal()
- })
- }
-
- render () {
- const { seedWords, history } = this.props
- const { selectedSeeds, shuffledSeeds } = this.state
- const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
-
- return (
- <div className="first-time-flow">
- {
- this.props.isLoading
- ? <LoadingScreen loadingMessage="Creating your new account" />
- : (
- <div className="first-view-main-wrapper">
- <div className="first-view-main">
- <div className="backup-phrase">
- <a
- className="backup-phrase__back-button"
- onClick={e => {
- e.preventDefault()
- history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
- }}
- href="#"
- >
- {`< Back`}
- </a>
- <Identicon address={this.props.address} diameter={70} />
- <div className="backup-phrase__content-wrapper">
- <div>
- <div className="backup-phrase__title">
- Confirm your Secret Backup Phrase
- </div>
- <div className="backup-phrase__body-text">
- Please select each phrase in order to make sure it is correct.
- </div>
- <div className="backup-phrase__confirm-secret">
- {selectedSeeds.map(([_, word], i) => (
- <button
- key={i}
- className="backup-phrase__confirm-seed-option"
- >
- {word}
- </button>
- ))}
- </div>
- <div className="backup-phrase__confirm-seed-options">
- {shuffledSeeds.map((word, i) => {
- const isSelected = selectedSeeds
- .filter(([index, seed]) => seed === word && index === i)
- .length
-
- return (
- <button
- key={i}
- className={classnames('backup-phrase__confirm-seed-option', {
- 'backup-phrase__confirm-seed-option--selected': isSelected,
- 'backup-phrase__confirm-seed-option--unselected': !isSelected,
- })}
- onClick={() => {
- if (!isSelected) {
- this.setState({
- selectedSeeds: [...selectedSeeds, [i, word]],
- })
- } else {
- this.setState({
- selectedSeeds: selectedSeeds
- .filter(([index, seed]) => !(seed === word && index === i)),
- })
- }
- }}
- >
- {word}
- </button>
- )
- })}
- </div>
- <button
- className="first-time-flow__button"
- onClick={() => isValid && this.handleClick()}
- disabled={!isValid}
- >
- Confirm
- </button>
- </div>
- </div>
- <Breadcrumbs total={3} currentIndex={1} />
- </div>
- </div>
- </div>
- )
- }
- </div>
- )
- }
-}
-
-export default compose(
- withRouter,
- connect(
- ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
- seedWords,
- isLoading,
- address: selectedAddress,
- }),
- dispatch => ({
- confirmSeedWords: () => dispatch(confirmSeedWords()),
- openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
- })
- )
-)(ConfirmSeedScreen)
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
deleted file mode 100644
index 0908787da..000000000
--- a/mascara/src/app/first-time/create-password-screen.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import { createNewVaultAndKeychain } from '../../../../ui/app/actions'
-import Breadcrumbs from './breadcrumbs'
-import EventEmitter from 'events'
-import Mascot from '../../../../ui/app/components/mascot'
-import classnames from 'classnames'
-import {
- INITIALIZE_UNIQUE_IMAGE_ROUTE,
- INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
- INITIALIZE_NOTICE_ROUTE,
-} from '../../../../ui/app/routes'
-import TextField from '../../../../ui/app/components/text-field'
-
-class CreatePasswordScreen extends Component {
- static contextTypes = {
- t: PropTypes.func,
- }
-
- static propTypes = {
- isLoading: PropTypes.bool.isRequired,
- createAccount: PropTypes.func.isRequired,
- history: PropTypes.object.isRequired,
- isInitialized: PropTypes.bool,
- isUnlocked: PropTypes.bool,
- isMascara: PropTypes.bool.isRequired,
- }
-
- state = {
- password: '',
- confirmPassword: '',
- passwordError: null,
- confirmPasswordError: null,
- }
-
- constructor (props) {
- super(props)
- this.animationEventEmitter = new EventEmitter()
- }
-
- componentWillMount () {
- const { isInitialized, history } = this.props
-
- if (isInitialized) {
- history.push(INITIALIZE_NOTICE_ROUTE)
- }
- }
-
- isValid () {
- const { password, confirmPassword } = this.state
-
- if (!password || !confirmPassword) {
- return false
- }
-
- if (password.length < 8) {
- return false
- }
-
- return password === confirmPassword
- }
-
- createAccount = (event) => {
- event.preventDefault()
-
- if (!this.isValid()) {
- return
- }
-
- const { password } = this.state
- const { createAccount, history } = this.props
-
- this.setState({ isLoading: true })
- createAccount(password)
- .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE))
- }
-
- handlePasswordChange (password) {
- const { confirmPassword } = this.state
- let confirmPasswordError = null
- let passwordError = null
-
- if (password && password.length < 8) {
- passwordError = this.context.t('passwordNotLongEnough')
- }
-
- if (confirmPassword && password !== confirmPassword) {
- confirmPasswordError = this.context.t('passwordsDontMatch')
- }
-
- this.setState({ password, passwordError, confirmPasswordError })
- }
-
- handleConfirmPasswordChange (confirmPassword) {
- const { password } = this.state
- let confirmPasswordError = null
-
- if (password !== confirmPassword) {
- confirmPasswordError = this.context.t('passwordsDontMatch')
- }
-
- this.setState({ confirmPassword, confirmPasswordError })
- }
-
- render () {
- const { history, isMascara } = this.props
- const { passwordError, confirmPasswordError } = this.state
- const { t } = this.context
-
- return (
- <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
- <div className={classnames({
- 'first-view-main': !isMascara,
- 'first-view-main__mascara': isMascara,
- })}>
- {isMascara && <div className="mascara-info first-view-phone-invisible">
- <Mascot
- animationEventEmitter={this.animationEventEmitter}
- width="225"
- height="225"
- />
- <div className="info">
- MetaMask is a secure identity vault for Ethereum.
- </div>
- <div className="info">
- It allows you to hold ether & tokens, and interact with decentralized applications.
- </div>
- </div>}
- <form className="create-password">
- <div className="create-password__title">
- Create Password
- </div>
- <TextField
- id="create-password"
- label={t('newPassword')}
- type="password"
- className="first-time-flow__input"
- value={this.state.password}
- onChange={event => this.handlePasswordChange(event.target.value)}
- error={passwordError}
- autoFocus
- autoComplete="new-password"
- margin="normal"
- fullWidth
- largeLabel
- />
- <TextField
- id="confirm-password"
- label={t('confirmPassword')}
- type="password"
- className="first-time-flow__input"
- value={this.state.confirmPassword}
- onChange={event => this.handleConfirmPasswordChange(event.target.value)}
- error={confirmPasswordError}
- autoComplete="confirm-password"
- margin="normal"
- fullWidth
- largeLabel
- />
- <button
- className="first-time-flow__button"
- disabled={!this.isValid()}
- onClick={this.createAccount}
- >
- Create
- </button>
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
- }}
- >
- Import with seed phrase
- </a>
- { /* }
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE)
- }}
- >
- Import an account
- </a>
- { */ }
- <Breadcrumbs total={3} currentIndex={0} />
- </form>
- </div>
- </div>
- )
- }
-}
-
-const mapStateToProps = ({ metamask, appState }) => {
- const { isInitialized, isUnlocked, isMascara, noActiveNotices } = metamask
- const { isLoading } = appState
-
- return {
- isLoading,
- isInitialized,
- isUnlocked,
- isMascara,
- noActiveNotices,
- }
-}
-
-export default compose(
- withRouter,
- connect(
- mapStateToProps,
- dispatch => ({
- createAccount: password => dispatch(createNewVaultAndKeychain(password)),
- })
- )
-)(CreatePasswordScreen)
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
deleted file mode 100644
index 555a26386..000000000
--- a/mascara/src/app/first-time/import-account-screen.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-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' }) => (
- <div className="import-account__input-wrapper">
- <div className="import-account__input-label">{label}</div>
- <input
- type={type}
- placeholder={placeholder}
- className={classnames('first-time-flow__input import-account__input', {
- 'first-time-flow__input--error': errorMessage,
- })}
- onChange={onChange}
- />
- <div className="import-account__input-error-message">{errorMessage}</div>
- </div>
-)
-
-Input.prototype.propTypes = {
- label: PropTypes.string.isRequired,
- placeholder: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- errorMessage: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
-}
-
-class ImportAccountScreen extends Component {
- static OPTIONS = {
- PRIVATE_KEY: 'private_key',
- JSON_FILE: 'json_file',
- };
-
- static propTypes = {
- warning: PropTypes.string,
- back: PropTypes.func.isRequired,
- next: PropTypes.func.isRequired,
- importNewAccount: PropTypes.func.isRequired,
- hideWarning: PropTypes.func.isRequired,
- isLoading: PropTypes.bool.isRequired,
- };
-
- state = {
- selectedOption: ImportAccountScreen.OPTIONS.PRIVATE_KEY,
- privateKey: '',
- jsonFile: {},
- }
-
- isValid () {
- const { OPTIONS } = ImportAccountScreen
- const { privateKey, jsonFile, password } = this.state
-
- switch (this.state.selectedOption) {
- case OPTIONS.JSON_FILE:
- return Boolean(jsonFile && password)
- case OPTIONS.PRIVATE_KEY:
- default:
- return Boolean(privateKey)
- }
- }
-
- onClick = () => {
- const { OPTIONS } = ImportAccountScreen
- const { importNewAccount, next } = this.props
- const { privateKey, jsonFile, password } = this.state
-
- switch (this.state.selectedOption) {
- case OPTIONS.JSON_FILE:
- return importNewAccount('JSON File', [ jsonFile, password ])
- // JS runtime requires caught rejections but failures are handled by Redux
- .catch()
- .then(next)
- case OPTIONS.PRIVATE_KEY:
- default:
- return importNewAccount('Private Key', [ privateKey ])
- // JS runtime requires caught rejections but failures are handled by Redux
- .catch()
- .then(next)
- }
- }
-
- renderPrivateKey () {
- return Input({
- label: 'Add Private Key String',
- placeholder: 'Enter private key',
- onChange: e => this.setState({ privateKey: e.target.value }),
- errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.',
- })
- }
-
- renderJsonFile () {
- const { jsonFile: { name } } = this.state
- const { warning } = this.props
-
- return (
- <div className="">
- <div className="import-account__input-wrapper">
- <div className="import-account__input-label">Upload File</div>
- <div className="import-account__file-picker-wrapper">
- <input
- type="file"
- id="file"
- className="import-account__file-input"
- onChange={e => this.setState({ jsonFile: e.target.files[0] })}
- />
- <label
- htmlFor="file"
- className={classnames('import-account__file-input-label', {
- 'import-account__file-input-label--error': warning,
- })}
- >
- Choose File
- </label>
- <div className="import-account__file-name">{name}</div>
- </div>
- <div className="import-account__input-error-message">
- {warning && 'Something went wrong. Please make sure your JSON file is properly formatted.'}
- </div>
- </div>
- {Input({
- label: 'Enter Password',
- placeholder: 'Enter Password',
- type: 'password',
- onChange: e => this.setState({ password: e.target.value }),
- errorMessage: warning && 'Please make sure your password is correct.',
- })}
- </div>
- )
- }
-
- renderContent () {
- const { OPTIONS } = ImportAccountScreen
-
- switch (this.state.selectedOption) {
- case OPTIONS.JSON_FILE:
- return this.renderJsonFile()
- case OPTIONS.PRIVATE_KEY:
- default:
- return this.renderPrivateKey()
- }
- }
-
- render () {
- const { OPTIONS } = ImportAccountScreen
- const { selectedOption } = this.state
-
- return this.props.isLoading
- ? <LoadingScreen loadingMessage="Creating your new account" />
- : (
- <div className="import-account">
- <a
- className="import-account__back-button"
- onClick={e => {
- e.preventDefault()
- this.props.back()
- }}
- href="#"
- >
- {`< Back`}
- </a>
- <div className="import-account__title">
- Import an Account
- </div>
- <div className="import-account__selector-label">
- How would you like to import your account?
- </div>
- <select
- className="import-account__dropdown"
- value={selectedOption}
- onChange={e => {
- this.setState({ selectedOption: e.target.value })
- this.props.hideWarning()
- }}
- >
- <option value={OPTIONS.PRIVATE_KEY}>Private Key</option>
- <option value={OPTIONS.JSON_FILE}>JSON File</option>
- </select>
- {this.renderContent()}
- <button
- className="first-time-flow__button"
- disabled={!this.isValid()}
- onClick={this.onClick}
- >
- Import
- </button>
- <a
- href="https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file"
- className="first-time-flow__link import-account__faq-link"
- rel="noopener noreferrer"
- target="_blank"
- >
- File import not working?
- </a>
- </div>
- )
- }
-}
-
-export default connect(
- ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
- dispatch => ({
- importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args)),
- hideWarning: () => dispatch(hideWarning()),
- })
-)(ImportAccountScreen)
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
deleted file mode 100644
index 764e9ed4c..000000000
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import {validateMnemonic} from 'bip39'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {
- createNewVaultAndRestore,
- unMarkPasswordForgotten,
-} from '../../../../ui/app/actions'
-import { INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes'
-import TextField from '../../../../ui/app/components/text-field'
-
-class ImportSeedPhraseScreen extends Component {
- static contextTypes = {
- t: PropTypes.func,
- }
-
- static propTypes = {
- warning: PropTypes.string,
- createNewVaultAndRestore: PropTypes.func.isRequired,
- leaveImportSeedScreenState: PropTypes.func,
- history: PropTypes.object,
- isLoading: PropTypes.bool,
- };
-
- state = {
- seedPhrase: '',
- password: '',
- confirmPassword: '',
- seedPhraseError: null,
- passwordError: null,
- confirmPasswordError: null,
- }
-
- parseSeedPhrase = (seedPhrase) => {
- return seedPhrase
- .trim()
- .match(/\w+/g)
- .join(' ')
- }
-
- handleSeedPhraseChange (seedPhrase) {
- let seedPhraseError = null
-
- if (seedPhrase) {
- const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase)
- if (parsedSeedPhrase.split(' ').length !== 12) {
- seedPhraseError = this.context.t('seedPhraseReq')
- } else if (!validateMnemonic(parsedSeedPhrase)) {
- seedPhraseError = this.context.t('invalidSeedPhrase')
- }
- }
-
- this.setState({ seedPhrase, seedPhraseError })
- }
-
- handlePasswordChange (password) {
- const { confirmPassword } = this.state
- let confirmPasswordError = null
- let passwordError = null
-
- if (password && password.length < 8) {
- passwordError = this.context.t('passwordNotLongEnough')
- }
-
- if (confirmPassword && password !== confirmPassword) {
- confirmPasswordError = this.context.t('passwordsDontMatch')
- }
-
- this.setState({ password, passwordError, confirmPasswordError })
- }
-
- handleConfirmPasswordChange (confirmPassword) {
- const { password } = this.state
- let confirmPasswordError = null
-
- if (password !== confirmPassword) {
- confirmPasswordError = this.context.t('passwordsDontMatch')
- }
-
- this.setState({ confirmPassword, confirmPasswordError })
- }
-
- onClick = () => {
- const { password, seedPhrase } = this.state
- const {
- createNewVaultAndRestore,
- leaveImportSeedScreenState,
- history,
- } = this.props
-
- leaveImportSeedScreenState()
- createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
- .then(() => history.push(INITIALIZE_NOTICE_ROUTE))
- }
-
- hasError () {
- const { passwordError, confirmPasswordError, seedPhraseError } = this.state
- return passwordError || confirmPasswordError || seedPhraseError
- }
-
- render () {
- const {
- seedPhrase,
- password,
- confirmPassword,
- seedPhraseError,
- passwordError,
- confirmPasswordError,
- } = this.state
- const { t } = this.context
- const { isLoading } = this.props
- const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
-
- return (
- <div className="first-view-main-wrapper">
- <div className="first-view-main">
- <div className="import-account">
- <a
- className="import-account__back-button"
- onClick={e => {
- e.preventDefault()
- this.props.history.goBack()
- }}
- href="#"
- >
- {`< Back`}
- </a>
- <div className="import-account__title">
- Import an Account with Seed Phrase
- </div>
- <div className="import-account__selector-label">
- Enter your secret twelve word phrase here to restore your vault.
- </div>
- <div className="import-account__input-wrapper">
- <label className="import-account__input-label">Wallet Seed</label>
- <textarea
- className="import-account__secret-phrase"
- onChange={e => this.handleSeedPhraseChange(e.target.value)}
- value={this.state.seedPhrase}
- placeholder="Separate each word with a single space"
- />
- </div>
- <span className="error">
- { seedPhraseError }
- </span>
- <TextField
- id="password"
- label={t('newPassword')}
- type="password"
- className="first-time-flow__input"
- value={this.state.password}
- onChange={event => this.handlePasswordChange(event.target.value)}
- error={passwordError}
- autoComplete="new-password"
- margin="normal"
- largeLabel
- />
- <TextField
- id="confirm-password"
- label={t('confirmPassword')}
- type="password"
- className="first-time-flow__input"
- value={this.state.confirmPassword}
- onChange={event => this.handleConfirmPasswordChange(event.target.value)}
- error={confirmPasswordError}
- autoComplete="confirm-password"
- margin="normal"
- largeLabel
- />
- <button
- className="first-time-flow__button"
- onClick={() => !disabled && this.onClick()}
- disabled={disabled}
- >
- Import
- </button>
- </div>
- </div>
- </div>
- )
- }
-}
-
-export default connect(
- ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
- dispatch => ({
- leaveImportSeedScreenState: () => {
- dispatch(unMarkPasswordForgotten())
- },
- createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
- })
-)(ImportSeedPhraseScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
deleted file mode 100644
index f3df240e7..000000000
--- a/mascara/src/app/first-time/index.css
+++ /dev/null
@@ -1,925 +0,0 @@
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-.first-time-flow {
- width: 100vw;
- background-color: #fff;
- overflow: auto;
- display: flex;
- justify-content: center;
- flex: 1 0 auto;
- font-weight: 400;
- font-family: Roboto;
-}
-
-@media screen and (min-height: 601px) {
- .first-time-flow {
- height: 100vh;
- }
-}
-
-.alpha-warning__container {
- display: flex;
- justify-content: center;
- background: #f7861c;
- flex: 0 0 auto;
-}
-
-.alpha-warning,
-.alpha-warning-welcome-screen {
- color: #fff;
- line-height: 2em;
-}
-
-@media screen and (min-width: 576px) {
- .alpha-warning {
- width: 85vw;
- }
-}
-
-@media screen and (min-width: 769px) {
- .alpha-warning {
- width: 80vw;
- }
-}
-
-@media screen and (min-width: 1281px) {
- .alpha-warning {
- width: 62vw;
- }
-}
-
-.alpha-warning-welcome-screen {
- padding-left: 0;
- text-align: center;
-}
-
-.first-view-main-wrapper {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
- padding: 0 10px;
-}
-
-.first-view-main,
-.first-view-main__mascara {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
-}
-
-.first-view-main__mascara {
- justify-content: space-between;
-}
-
-@media screen and (min-width: 1281px) {
- .first-view-main {
- width: 62vw;
- }
-}
-
-.mascara-info {
- display: flex;
- flex-flow: column;
- margin-top: 70px;
- width: 35vw;
- max-width: 550px;
-}
-
-.mascara-info :first-child {
- align-self: flex-end;
-}
-
-.info {
- font-size: 19px;
-}
-
-.create-password,
-.unique-image,
-.tou,
-.backup-phrase,
-.import-account,
-.buy-ether {
- display: flex;
- flex-flow: column nowrap;
- margin: 60px 0 30px 0;
- position: relative;
-}
-
-.import-account {
- max-width: initial;
-}
-
-@media only screen and (max-width: 575px) {
- .create-password,
- .unique-image,
- .tou,
- .backup-phrase,
- .import-account,
- .buy-ether {
- margin: 24px;
- display: flex;
- flex-flow: column nowrap;
- width: calc(100vw - 80px);
- }
-
- .create-password__title,
- .unique-image__title,
- .tou__title,
- .backup-phrase__title,
- .import-account__title,
- .buy-ether__title,
- .tou__title,
- .backup-phrase__title {
- width: initial !important;
- }
-
- .alpha-warning,
- .alpha-warning-welcome-screen {
- line-height: 1em;
- padding: 8px 12px;
- }
-
- .first-view-main {
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- margin-top: 12px;
- }
-
- .mascara-info {
- margin-top: 0px;
- width: 100%;
- align-items: center;
- }
-
- .mascara-info .info {
- text-align: center;
- font-size: 16px;
- margin: 0 10px;
- padding-left: 0px;
- }
-
- .mascara-info :first-child {
- align-self: center;
- }
-
- .first-view-phone-invisible {
- display: none;
- }
-
- .first-time-flow__input {
- width: 100%;
- }
-
- .tou__body {
- margin: 0 !important;
- padding: 16px 20px !important;
- height: 30vh !important;
- }
-
- .backup-phrase__content-wrapper {
- flex-flow: column nowrap;
- }
-
- .backup-phrase__body-text {
- width: initial !important;
- }
-
- .backup-phrase__secret {
- width: initial !important;
- padding: 12px !important;
- }
-
- .backup-phrase__secret-words {
- font-size: 16px;
- line-height: 22px;
- }
-
- .backup-phrase__tips {
- margin: 40px 0 !important;
- width: initial !important;
- }
-
- .backup-phrase__confirm-secret,
- .import-account__secret-phrase {
- width: initial !important;
- height: initial !important;
- min-height: 190px;
- }
-
- .backup-phrase__confirm-seed-options {
- width: initial !important;
- }
-}
-
-.tou {
- max-width: 46rem;
-}
-
-.create-password__title,
-.unique-image__title,
-.tou__title,
-.backup-phrase__title,
-.import-account__title,
-.buy-ether__title {
- color: #1B344D;
- font-size: 40px;
- line-height: 51px;
- margin-bottom: 24px;
-}
-
-.import-account__title {
- margin-bottom: 10px;
-}
-
-.tou__title,
-.backup-phrase__title {
- width: 480px;
-}
-
-.create-password__confirm-input {
- margin-top: 16px;
-}
-
-.create-password__import-link {
- margin-bottom: 54px;
-}
-
-.unique-image__title,
-.tou__title,
-.backup-phrase__title,
-.buy-ether__title {
- margin-top: 24px;
-}
-
-.unique-image__body-text,
-.backup-phrase__body-text,
-.buy-ether__body-text {
- color: #1B344D;
- font-size: 16px;
- line-height: 23px;
- font-family: Roboto;
-}
-
-.buy-ether__small-body-text {
- font-family: Roboto;
- height: 14px;
- color: #757575;
- font-size: 12px;
- line-height: 14px;
-}
-
-.unique-image__body-text {
- width: 335px;
-}
-
-@media only screen and (max-width: 575px) {
- .unique-image__body-text {
- width: initial;
- }
-}
-
-.unique-image__body-text +
-.unique-image__body-text,
-.backup-phrase__body-text +
-.backup-phrase__body-text,
-.backup-phrase__tips-text +
-.backup-phrase__tips-text {
- margin-top: 24px;
-}
-
-.tou__body {
- border: 1px solid #979797;
- border-radius: 8px;
- background-color: #FFFFFF;
- margin: 0 142px 0 0;
- height: 200px;
- overflow-y: auto;
- color: #757575;
- font-family: Roboto;
- font-size: 12px;
- line-height: 15px;
- text-align: justify;
- padding: 22px 30px;
-}
-
-.backup-phrase__content-wrapper {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
-}
-
-.backup-phrase__phrase {
- flex-grow: .5;
- min-width: 0;
-}
-
-.backup-phrase__next-button {
- flex-grow: 1;
- width: 100%;
-}
-
-.backup-phrase__body-text {
- width: 450px;
-}
-
-.backup-phrase__tips {
- margin-top: 40px;
- width: 285px;
- flex-grow: .5;
- min-width: 0;
-}
-
-.backup-phrase__tips-text {
- color: #5B5D67;
- font-size: 16px;
- line-height: 23px;
- font-family: Roboto;
- min-width: 0;
-}
-
-.backup-phrase__tips-text--link {
- color: #2f9ae0;
- cursor: pointer;
-}
-
-.backup-phrase__tips-text--link:hover {
- color: #2f9ae0;
-}
-
-.backup-phrase__tips-text--strong {
- font-weight: bold;
-}
-
-@media only screen and (max-width: 768px) {
- .backup-phrase__content-wrapper {
- flex-direction: column;
- }
-
- .backup-phrase__phrase {
- flex: 1 0 auto;
- }
-
- .backup-phrase__tips {
- width: 100%;
- flex: 1 0 auto;
- }
-}
-
-.backup-phrase__secret {
- position: relative;
- display: flex;
- justify-content: center;
- width: 349px;
- border: 1px solid #CDCDCD;
- border-radius: 6px;
- background-color: #FFFFFF;
- padding: 20px 0;
- margin-top: 36px;
-}
-
-.backup-phrase__secret-words {
- width: 310px;
- color: #5B5D67;
- font-family: Roboto;
- font-size: 20px;
- line-height: 26px;
- text-align: center;
-}
-
-.backup-phrase__secret-words--hidden {
- filter: blur(5px);
-}
-
-.backup-phrase__secret-blocker {
- position: absolute;
- top: 0;
- bottom: 0;
- height: 100%;
- width: 100%;
- background-color: rgba(0,0,0,0.6);
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- padding: 13px 0 18px;
-}
-
-.backup-phrase__reveal-button {
- border: 1px solid #979797;
- border-radius: 4px;
- background: none;
- box-shadow: none;
- color: #FFFFFF;
- font-family: Roboto;
- font-size: 12px;
- font-weight: bold;
- line-height: 15px;
- text-align: center;
- text-transform: uppercase;
- margin-top: 10px;
-}
-
-.backup-phrase__back-button,
-.import-account__back-button {
- margin-bottom: 18px;
- color: #22232c;
- font-size: 16px;
- line-height: 21px;
- position: absolute;
- top: -25px;
-}
-
-.backup-phrase__back-button {
- top: -30px;
-}
-
-button.backup-phrase__reveal-button:hover {
- transform: scale(1);
-}
-
-.backup-phrase__confirm-secret,
-.import-account__secret-phrase {
- height: 190px;
- width: 495px;
- border: 1px solid #CDCDCD;
- border-radius: 6px;
- background-color: #FFFFFF;
- margin: 25px 0 36px;
- padding: 17px;
-}
-
-.import-account__secret-phrase {
- font-size: 16px;
- margin: initial;
-}
-
-.import-account__secret-phrase::placeholder {
- color: #9B9B9B;
- font-weight: 200;
-}
-
-.backup-phrase__confirm-seed-options {
- display: flex;
- flex-flow: row wrap;
- width: 465px;
- position: relative;
- left: -7px;
-}
-
-.backup-phrase__confirm-seed-option {
- color: #5B5D67;
- font-family: Roboto;
- font-size: 16px;
- line-height: 21px;
- background-color: #E7E7E7;
- padding: 8px 19px;
- box-shadow: none;
- min-width: 65px;
- margin: 7px;
-}
-
-.backup-phrase__confirm-seed-option--selected {
- background-color: #85D1CC;
- color: #FFFFFF;
-}
-
-button.backup-phrase__confirm-seed-option:hover {
- transform: scale(1);
-}
-
-.import-account__faq-link {
- font-size: 18px;
- line-height: 23px;
- font-family: Roboto;
-}
-
-.import-account__selector-label {
- color: #1B344D;
- font-size: 16px;
-}
-
-.import-account__dropdown {
- width: 325px;
- border: 1px solid #CDCDCD;
- border-radius: 4px;
- background-color: #FFFFFF;
- margin-top: 14px;
- color: #5B5D67;
- font-family: Roboto;
- font-size: 18px;
- line-height: 23px;
- padding: 14px 21px;
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- cursor: pointer;
-}
-
-.import-account__description-text {
- color: #757575;
- font-size: 18px;
- line-height: 23px;
- margin-top: 21px;
- font-family: Roboto;
-}
-
-.import-account__input-wrapper {
- display: flex;
- flex-flow: column nowrap;
- margin-top: 30px;
-}
-
-.import-account__input-error-message {
- margin-top: 10px;
- width: 422px;
- color: #FF001F;
- font-size: 16px;
- line-height: 21px;
-}
-
-.import-account__input-label {
- margin-bottom: 9px;
- color: #1B344D;
- font-size: 18px;
- line-height: 23px;
-}
-
-.import-account__input-label__disabled {
- opacity: 0.5;
-}
-
-.import-account__input {
- width: 350px;
-}
-
-@media only screen and (max-width: 575px) {
- .import-account__input {
- width: 100%;
- }
-}
-
-.import-account__file-input {
- display: none;
-}
-
-.import-account__file-input-label {
- height: 53px;
- width: 148px;
- border: 1px solid #1B344D;
- border-radius: 4px;
- color: #1B344D;
- font-family: Roboto;
- font-size: 18px;
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-}
-
-.import-account__file-picker-wrapper {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
-}
-
-.import-account__file-name {
- color: #000000;
- font-family: Roboto;
- font-size: 18px;
- line-height: 23px;
- margin-left: 22px;
-}
-
-.buy-ether__content-wrapper {
- display: flex;
- flex-flow: column nowrap;
- margin-top: 31px;
-}
-
-.buy-ether__content-headline-wrapper {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: space-between;
-}
-
-.buy-ether__content-headline {
- color: #1B344D;
- font-family: Roboto;
- font-size: 18px;
- line-height: 23px;
-}
-
-.buy-ether__do-it-later {
- color: #1B344D;
- font-size: 16px;
- line-height: 23px;
- cursor: pointer;
-}
-
-.buy-ether__content {
- margin-top: 12px;
- display: flex;
- flex-flow: row nowrap;
-}
-
-.buy-ether__side-panel {
- display: flex;
- flex-flow: column nowrap;
-}
-
-.buy-ether__side-panel-item {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- padding: 20px 0;
- color: #9B9B9B;
- font-family: Roboto;
- font-size: 14px;
- line-height: 18px;
- cursor: pointer;
- min-width: 140px;
-}
-
-
-.buy-ether__side-panel-item {
- border-bottom: 1px solid #CDCDCD;
-}
-
-.buy-ether__side-panel-item--selected {
- position: relative;
- color: #1B344D;
-}
-
-.buy-ether__side-panel-item-name {
- flex: 1 0 auto;
- padding-right: 13px;
-}
-
-.buy-ether__action-content {
- margin-left: 34px;
-}
-
-.buy-ether__buttons {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
-}
-
-.buy-ether__button-separator-text {
- font-size: 20px;
- line-height: 26px;
- font-family: Roboto;
- margin: 35px 0 14px 30px;
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
-}
-
-.buy-ether__faq-link {
- margin-top: 26px;
- color: #1B344D !important;
- font-size: 14px !important;
- line-height: 18px !important;
- font-family: Roboto;
-}
-
-.buy-ether__action-content-wrapper {
- display: flex;
- flex-flow: column nowrap;
-}
-
-.first-time-flow__input {
- max-width: 350px;
-}
-
-.first-time-flow__button {
- height: 54px;
- width: 198px;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
- color: #FFFFFF;
- font-size: 20px;
- font-weight: 500;
- font-family: Roboto;
- line-height: 26px;
- text-align: center;
- text-transform: uppercase;
- margin: 35px 0 14px;
- transition: 200ms ease-in-out;
- background-color: rgba(247, 134, 28, 0.9);
-}
-
-button.first-time-flow__button[disabled] {
- opacity: .6;
-}
-
-button.first-time-flow__button:hover {
- transform: scale(1);
- background-color: rgba(247, 134, 28, 0.9);
-}
-
-.first-time-flow__button--tertiary {
- height: 54px;
- width: 198px;
- box-shadow: none;
- color: #1B344D;
- font-size: 20px;
- line-height: 26px;
- font-family: Roboto;
- text-align: center;
- margin: 35px 0 14px;
- background-color: transparent;
-}
-
-button.first-time-flow__button--tertiary:hover {
- transform: scale(1);
-}
-
-.first-time-flow__link {
- color: #1B344D;
- font-size: 18px;
- line-height: 23px;
-}
-
-.breadcrumbs {
- display: flex;
- flex-flow: row nowrap;
-}
-
-.breadcrumb {
- height: 10px;
- width: 10px;
- border: 1px solid #979797;
- border-radius: 50%;
-}
-
-.breadcrumb + .breadcrumb {
- margin-left: 10px;
-}
-
-.loading-screen {
- width: 100vw;
- height: 100vh;
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- margin-top: 143px;
-}
-
-.loading-screen .spinner {
- margin-bottom: 25px;
- width: 100px;
- height: 100px;
-}
-
-.loading-screen__message {
- color: #1B344D;
- font-size: 20px;
- line-height: 26px;
- text-align: center;
- font-family: Roboto;
-}
-
-.icon {
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
-}
-
-.shapeshift-logo {
- background: url('data:image/png;base64,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');
- width: 161px;
- height: 84px;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: 50%;
-}
-
-.shapeshift-form {
- width: 360px;
- border-radius: 8px;
- background-color: rgba(0, 0, 0, .05);
- padding: 17px 15px;
-}
-
-.shapeshift-form__selectors {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- padding-bottom: 17px;
-}
-
-.shapeshift-form__caret {
- width: 40px;
- height: 40px;
- flex: 0 0 auto;
- width: 120px;
- margin-top: 24px;
-}
-
-.shapeshift-form__selector {
- flex: 1 0 auto;
-}
-
-.shapeshift-form__selector-label,
-.shapeshift-form__deposit-instruction {
- color: #757575;
- color: rgba(0, 0, 0, 0.45);
- font-family: Roboto;
- font-weight: 300;
- line-height: 19px;
- padding-bottom: 6px;
-}
-
-.shapeshift-form__selector-input {
- color: #5B5D67;
- font-size: 16px;
- font-weight: 300;
- line-height: 21px;
- border: 1px solid #D8D8D8;
- background-color: #FFFFFF;
- text-align: center;
- width: 100%;
- height: 45px;
- line-height: 44px;
- font-family: Roboto;
-}
-
-.shapeshift-form__address-input-label {
- color: #757575;
- font-size: 14px;
- font-weight: 500;
- line-height: 18px;
- padding-bottom: 6px;
- font-family: Roboto;
-}
-
-.shapeshift-form__address-input {
- border: 1px solid #D8D8D8;
- background-color: #FFFFFF;
- font-size: 16px;
- font-weight: 300;
- line-height: 21px;
- padding: 15px;
- width: 100%;
-}
-
-.shapeshift-form__address-input-wrapper--error .shapeshift-form__address-input {
- border-color: #FF001F;
-}
-
-.shapeshift-form__address-input-error-message {
- color: #FF001F;
- font-family: Roboto;
- font-size: 12px;
- height: 24px;
- line-height: 18px;
-}
-
-.shapeshift-form__metadata {
- display: flex;
- flex-flow: row wrap;
- color: #9B9B9B;
- font-family: Roboto;
- font-size: 10px;
- line-height: 16px;
-}
-
-.shapeshift-form__metadata-wrapper {
- flex: 1 0 50%;
- display: flex;
- flex-flow: row nowrap;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.shapeshift-form__metadata-wrapper:nth-child(odd) {
- padding-right: 14px;
-}
-
-.shapeshift-form__metadata-label {
- flex: 1 0 60%;
-}
-
-.shapeshift-form__metadata-value {
- flex: 0 0 40%;
- overflow: hidden;
- color: #000;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.shapeshift-form__qr-code {
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
-}
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
deleted file mode 100644
index 6e4dc74bb..000000000
--- a/mascara/src/app/first-time/index.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import { withRouter, Switch, Route } from 'react-router-dom'
-import { compose } from 'recompose'
-
-import CreatePasswordScreen from './create-password-screen'
-import UniqueImageScreen from './unique-image-screen'
-import NoticeScreen from './notice-screen'
-import BackupPhraseScreen from './seed-screen'
-import ImportAccountScreen from './import-account-screen'
-import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-import ConfirmSeed from './confirm-seed-screen'
-import {
- INITIALIZE_ROUTE,
- INITIALIZE_IMPORT_ACCOUNT_ROUTE,
- INITIALIZE_UNIQUE_IMAGE_ROUTE,
- INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
- INITIALIZE_NOTICE_ROUTE,
- INITIALIZE_BACKUP_PHRASE_ROUTE,
- INITIALIZE_CONFIRM_SEED_ROUTE,
- INITIALIZE_CREATE_PASSWORD_ROUTE,
-} from '../../../../ui/app/routes'
-import WelcomeScreen from '../../../../ui/app/welcome-screen'
-
-class FirstTimeFlow extends Component {
-
- static propTypes = {
- isInitialized: PropTypes.bool,
- seedWords: PropTypes.string,
- address: PropTypes.string,
- noActiveNotices: PropTypes.bool,
- goToBuyEtherView: PropTypes.func,
- isUnlocked: PropTypes.bool,
- history: PropTypes.object,
- welcomeScreenSeen: PropTypes.bool,
- isPopup: PropTypes.bool,
- };
-
- static defaultProps = {
- isInitialized: false,
- seedWords: '',
- noActiveNotices: false,
- };
-
- render () {
- return (
- <div className="flex-column flex-grow">
- <div className="first-time-flow">
- <Switch>
- <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
- <Route
- exact
- path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
- component={ImportSeedPhraseScreen}
- />
- <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
- <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
- <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
- <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
- <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
- <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
- </Switch>
- </div>
- </div>
- )
- }
-}
-
-const mapStateToProps = ({ metamask }) => {
- const {
- isInitialized,
- seedWords,
- noActiveNotices,
- selectedAddress,
- forgottenPassword,
- isMascara,
- isUnlocked,
- welcomeScreenSeen,
- isPopup,
- } = metamask
-
- return {
- isMascara,
- isInitialized,
- seedWords,
- noActiveNotices,
- address: selectedAddress,
- forgottenPassword,
- isUnlocked,
- welcomeScreenSeen,
- isPopup,
- }
-}
-
-export default compose(
- withRouter,
- connect(mapStateToProps)
-)(FirstTimeFlow)
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
deleted file mode 100644
index 596f818ca..000000000
--- a/mascara/src/app/first-time/loading-screen.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Spinner from './spinner'
-
-export default function LoadingScreen ({ className = '', loadingMessage }) {
- return (
- <div className={`${className} loading-screen`}>
- <Spinner color="#1B344D" />
- <div className="loading-screen__message">{loadingMessage}</div>
- </div>
- )
-}
-
-LoadingScreen.propTypes = {
- className: PropTypes.string,
- loadingMessage: PropTypes.string,
-}
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
deleted file mode 100644
index 8cb6f1057..000000000
--- a/mascara/src/app/first-time/notice-screen.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Markdown from 'react-markdown'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import debounce from 'lodash.debounce'
-import { markNoticeRead } from '../../../../ui/app/actions'
-import Identicon from '../../../../ui/app/components/identicon'
-import Breadcrumbs from './breadcrumbs'
-import { INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes'
-import LoadingScreen from './loading-screen'
-
-class NoticeScreen extends Component {
- static propTypes = {
- address: PropTypes.string.isRequired,
- nextUnreadNotice: PropTypes.shape({
- title: PropTypes.string,
- date: PropTypes.string,
- body: PropTypes.string,
- }),
- location: PropTypes.shape({
- state: PropTypes.shape({
- next: PropTypes.func.isRequired,
- }),
- }),
- markNoticeRead: PropTypes.func,
- history: PropTypes.object,
- isLoading: PropTypes.bool,
- noActiveNotices: PropTypes.bool,
- };
-
- static defaultProps = {
- nextUnreadNotice: {},
- };
-
- state = {
- atBottom: false,
- }
-
- componentDidMount () {
- if (this.props.noActiveNotices) {
- this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
- }
-
- this.onScroll()
- }
-
- acceptTerms = () => {
- const { markNoticeRead, nextUnreadNotice, history } = this.props
- markNoticeRead(nextUnreadNotice)
- .then(hasActiveNotices => {
- if (!hasActiveNotices) {
- history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
- } else {
- this.setState({ atBottom: false })
- this.onScroll()
- }
- })
- }
-
- onScroll = debounce(() => {
- if (this.state.atBottom) return
-
- const target = document.querySelector('.tou__body')
- const {scrollTop, offsetHeight, scrollHeight} = target
- const atBottom = scrollTop + offsetHeight >= scrollHeight
-
- this.setState({atBottom: atBottom})
- }, 25)
-
- render () {
- const {
- address,
- nextUnreadNotice: { title, body },
- isLoading,
- } = this.props
- const { atBottom } = this.state
-
- return (
- isLoading
- ? <LoadingScreen />
- : (
- <div className="first-time-flow">
- <div className="first-view-main-wrapper">
- <div className="first-view-main">
- <div
- className="tou"
- onScroll={this.onScroll}
- >
- <Identicon address={address} diameter={70} />
- <div className="tou__title">{title}</div>
- <Markdown
- className="tou__body markdown"
- source={body}
- skipHtml
- />
- <button
- className="first-time-flow__button"
- onClick={atBottom && this.acceptTerms}
- disabled={!atBottom}
- >
- Accept
- </button>
- <Breadcrumbs total={3} currentIndex={2} />
- </div>
- </div>
- </div>
- </div>
- )
- )
- }
-}
-
-const mapStateToProps = ({ metamask, appState }) => {
- const { selectedAddress, nextUnreadNotice, noActiveNotices } = metamask
- const { isLoading } = appState
-
- return {
- address: selectedAddress,
- nextUnreadNotice,
- noActiveNotices,
- isLoading,
- }
-}
-
-export default compose(
- withRouter,
- connect(
- mapStateToProps,
- dispatch => ({
- markNoticeRead: notice => dispatch(markNoticeRead(notice)),
- })
- )
-)(NoticeScreen)
diff --git a/mascara/src/app/first-time/seed-screen.js b/mascara/src/app/first-time/seed-screen.js
deleted file mode 100644
index 97d5d7930..000000000
--- a/mascara/src/app/first-time/seed-screen.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import classnames from 'classnames'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import Identicon from '../../../../ui/app/components/identicon'
-import {exportAsFile} from '../../../../ui/app/util'
-import Breadcrumbs from './breadcrumbs'
-import LoadingScreen from './loading-screen'
-import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes'
-
-const LockIcon = props => (
- <svg
- version="1.1"
- id="Capa_1"
- xmlns="http://www.w3.org/2000/svg"
- xmlnsXlink="http://www.w3.org/1999/xlink"
- x="0px"
- y="0px"
- width="401.998px"
- height="401.998px"
- viewBox="0 0 401.998 401.998"
- style={{enableBackground: 'new 0 0 401.998 401.998'}}
- xmlSpace="preserve"
- {...props}
- >
- <g>
- <path
- d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218
- C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821
- h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417
- c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135
- C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675
- c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728
- z"
- />
- </g>
- </svg>
-)
-
-class BackupPhraseScreen extends Component {
- static propTypes = {
- isLoading: PropTypes.bool.isRequired,
- address: PropTypes.string.isRequired,
- seedWords: PropTypes.string,
- history: PropTypes.object,
- };
-
- static defaultProps = {
- seedWords: '',
- }
-
- constructor (props) {
- super(props)
- this.state = {
- isShowingSecret: false,
- }
- }
-
- componentWillMount () {
- const { seedWords, history } = this.props
-
- if (!seedWords) {
- history.push(DEFAULT_ROUTE)
- }
- }
-
- exportSeedWords = () => {
- const { seedWords } = this.props
-
- exportAsFile('MetaMask Secret Backup Phrase', seedWords, 'text/plain')
- }
-
- renderSecretWordsContainer () {
- const { isShowingSecret } = this.state
-
- return (
- <div className="backup-phrase__secret">
- <div className={classnames('backup-phrase__secret-words', {
- 'backup-phrase__secret-words--hidden': !isShowingSecret,
- })}>
- {this.props.seedWords}
- </div>
- {!isShowingSecret && (
- <div
- className="backup-phrase__secret-blocker"
- onClick={() => this.setState({ isShowingSecret: true })}
- >
- <LockIcon width="28px" height="35px" fill="#FFFFFF" />
- <div
- className="backup-phrase__reveal-button"
- >
- Click here to reveal secret words
- </div>
- </div>
- )}
- </div>
- )
- }
-
- renderSecretScreen () {
- const { isShowingSecret } = this.state
- const { history } = this.props
-
- return (
- <div className="backup-phrase__content-wrapper">
- <div className="backup-phrase__phrase">
- <div className="backup-phrase__title">Secret Backup Phrase</div>
- <div className="backup-phrase__body-text">
- Your secret backup phrase makes it easy to back up and restore your account.
- </div>
- <div className="backup-phrase__body-text">
- WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
- </div>
- {this.renderSecretWordsContainer()}
- </div>
- <div className="backup-phrase__tips">
- <div className="backup-phrase__tips-text">Tips:</div>
- <div className="backup-phrase__tips-text">
- Store this phrase in a password manager like 1Password.
- </div>
- <div className="backup-phrase__tips-text">
- Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations.
- </div>
- <div className="backup-phrase__tips-text">
- Memorize this phrase.
- </div>
- <div className="backup-phrase__tips-text">
- <strong>
- <a className="backup-phrase__tips-text--link backup-phrase__tips-text--strong" onClick={this.exportSeedWords}>
- Download this Secret Backup Phrase
- </a>
- </strong> and keep it stored safely on an external encrypted hard drive or storage medium.
- </div>
- </div>
- <div className="backup-phrase__next-button">
- <button
- className="first-time-flow__button"
- onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
- disabled={!isShowingSecret}
- >
- Next
- </button>
- <Breadcrumbs total={3} currentIndex={1} />
- </div>
- </div>
- )
- }
-
- render () {
- return this.props.isLoading
- ? <LoadingScreen loadingMessage="Creating your new account" />
- : (
- <div className="first-view-main-wrapper">
- <div className="first-view-main">
- <div className="backup-phrase">
- <Identicon address={this.props.address} diameter={70} />
- {this.renderSecretScreen()}
- </div>
- </div>
- </div>
- )
- }
-}
-
-export default compose(
- withRouter,
- connect(
- ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
- seedWords,
- isLoading,
- address: selectedAddress,
- })
- )
-)(BackupPhraseScreen)
diff --git a/mascara/src/app/first-time/spinner.js b/mascara/src/app/first-time/spinner.js
deleted file mode 100644
index 78dca9a88..000000000
--- a/mascara/src/app/first-time/spinner.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-
-export default function Spinner({ className = '', color = "#000000" }) {
- return (
- <div className={`spinner ${className}`}>
- <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style={{background: 'none'}}>
- <g transform="rotate(0 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(30 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(60 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(90 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(120 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(150 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(180 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(210 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(240 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(270 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(300 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" />
- </rect>
- </g>
- <g transform="rotate(330 50 50)">
- <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
- <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" />
- </rect>
- </g>
- </svg>
- </div>
- );
-}
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
deleted file mode 100644
index 9555e5318..000000000
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import {connect} from 'react-redux'
-import Identicon from '../../../../ui/app/components/identicon'
-import Breadcrumbs from './breadcrumbs'
-import { INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes'
-
-class UniqueImageScreen extends Component {
- static propTypes = {
- address: PropTypes.string,
- history: PropTypes.object,
- }
-
- render () {
- return (
- <div className="first-view-main-wrapper">
- <div className="first-view-main">
- <div className="unique-image">
- <Identicon address={this.props.address} diameter={70} />
- <div className="unique-image__title">Your unique account image</div>
- <div className="unique-image__body-text">
- This image was programmatically generated for you by your new account number.
- </div>
- <div className="unique-image__body-text">
- You’ll see this image everytime you need to confirm a transaction.
- </div>
- <button
- className="first-time-flow__button"
- onClick={() => this.props.history.push(INITIALIZE_NOTICE_ROUTE)}
- >
- Next
- </button>
- <Breadcrumbs total={3} currentIndex={1} />
- </div>
- </div>
- </div>
- )
- }
-}
-
-export default compose(
- withRouter,
- connect(
- ({ metamask: { selectedAddress } }) => ({
- address: selectedAddress,
- })
- )
-)(UniqueImageScreen)
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-16 23:08:21 +0800