From e89ae877aa70541bdca1fafd5e50926200c85214 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 22:21:30 -0700 Subject: Add BuyEtherWidget for future use in buy ether modal --- mascara/src/app/buy-ether-widget/index.js | 197 ++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 mascara/src/app/buy-ether-widget/index.js (limited to 'mascara') diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js new file mode 100644 index 000000000..9fe659daa --- /dev/null +++ b/mascara/src/app/buy-ether-widget/index.js @@ -0,0 +1,197 @@ +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 ShapeShiftForm from '../shapeshift-form' +import {buyEth, showAccountDetail} from '../../../../ui/app/actions' + +const OPTION_VALUES = { + COINBASE: 'coinbase', + SHAPESHIFT: 'shapeshift', + QR_CODE: 'qr_code', +} + +const OPTIONS = [ + { + name: 'Direct Deposit', + value: OPTION_VALUES.QR_CODE, + }, + { + name: 'Buy with Dollars', + value: OPTION_VALUES.COINBASE, + }, + { + name: 'Buy with Cryptos', + value: OPTION_VALUES.SHAPESHIFT, + }, +] + +class BuyEtherWidget extends Component { + + static propTypes = { + address: PropTypes.string, + skipText: PropTypes.string, + className: PropTypes.string, + onSkip: PropTypes.func, + goToCoinbase: PropTypes.func, + showAccountDetail: PropTypes.func, + }; + + state = { + selectedOption: OPTION_VALUES.QR_CODE, + }; + + + copyToClipboard = () => { + const { address } = this.props + + this.setState({ justCopied: true }, () => copyToClipboard(address)) + + setTimeout(() => this.setState({ justCopied: false }), 1000) + } + + renderSkip () { + const {showAccountDetail, address, skipText, onSkip} = this.props + + return ( +
{ + if (onSkip) return onSkip() + showAccountDetail(address) + }} + > + {skipText || 'Do it later'} +
+ ) + } + + renderCoinbaseLogo () { + return ( + + + + + + + + + + + + + + + ) + } + + renderCoinbaseForm () { + const {goToCoinbase, address} = this.props + + return ( +
+
{this.renderCoinbaseLogo()}
+
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
+ What is Ethereum? +
+ +
+
+ ) + } + + renderContent () { + 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 ( +
+
+
+ Trade any leading blockchain asset for any other. Protection by Design. No Account Needed. +
+ +
+ ) + case OPTION_VALUES.QR_CODE: + return ( +
+
+
Deposit Ether directly into your account.
+
(This is the account address that MetaMask created for you to recieve funds.)
+
+ +
+
+ ) + default: + return null + } + } + + render () { + const { className = '' } = this.props + const { selectedOption } = this.state + + return ( +
+
+
Deposit Options
+ {this.renderSkip()} +
+
+
+ {OPTIONS.map(({ name, value }) => ( +
this.setState({ selectedOption: value })} + > +
{name}
+ {value === selectedOption && ( + + + + )} +
+ ))} +
+
+ {this.renderContent()} +
+
+
+ ) + } +} + +export default connect( + ({ metamask: { selectedAddress } }) => ({ + address: selectedAddress, + }), + dispatch => ({ + goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })), + showAccountDetail: address => dispatch(showAccountDetail(address)), + }) +)(BuyEtherWidget) -- cgit From 032582afda6ecd4a0dedef11c67828eb135cf118 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:02:02 -0500 Subject: mascara:first-time - add alpha warning and a about metamask and mascot --- .../src/app/first-time/create-password-screen.js | 119 +++++++++++++-------- mascara/src/app/first-time/index.css | 35 +++++- 2 files changed, 107 insertions(+), 47 deletions(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 2f4b81e7c..b1c2581a1 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,8 +1,10 @@ +import EventEmitter from 'events' import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux'; import {createNewVaultAndKeychain} from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' +import Mascot from '../../../../ui/app/components/mascot' class CreatePasswordScreen extends Component { static propTypes = { @@ -18,6 +20,11 @@ class CreatePasswordScreen extends Component { confirmPassword: '' } + constructor () { + super() + this.animationEventEmitter = new EventEmitter() + } + isValid() { const {password, confirmPassword} = this.state; @@ -50,52 +57,74 @@ class CreatePasswordScreen extends Component { return isLoading ? : ( -
-
- Create Password +
+

Warning This is Experemental software and is a Developer Alapha

+
+
+ +
+ MetaMask is a bridge that allows you to visit the distributed web + of tomorrow in your browser today. It allows you to run Ethereum dApps right in + your browser without running a full Ethereum node but still gives + you the option to if you want to bring your own. + + MetaMask includes a secure identity vault stored loacly on your machine, + providing a user interface to manage your identities on different sites + and sign blockchain transactions +
+
+
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + goToImportWithSeedPhrase() + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + goToImportAccount() + }} + > + Import an account + + { */ } + +
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - - { */ } -
) } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 28aa3060a..c55edd79a 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,3 +1,4 @@ + .first-time-flow { height: 100vh; width: 100vw; @@ -5,6 +6,36 @@ overflow: auto; } +.alpha-warning { + background: #f7861c; + color: #fff; + line-height: 2em; + padding-left: 2em; +} + +.first-view-main { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; +} + +.mascara-info { + display: flex; + flex-flow: column; + margin-top: 70px; + margin-right: 10vw; + width: 35vw; + max-width: 550px; +} + +.mascara-info :first-child { + align-self: flex-end; +} + +.info { + font-size: 19px; +} + .create-password, .unique-image, .tou, @@ -75,7 +106,7 @@ .backup-phrase__tips { margin: 40px 0 !important; - width: initial !important; + width: initial !important; } .backup-phrase__confirm-secret, @@ -337,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover { padding: 14px 21px; appearance: none; -webkit-appearance: none; - -moz-appearance: none; + -moz-appearance: none; cursor: pointer; } -- cgit From 81af91371db91eb4059c9283b63d3e253c2e8d17 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:26:17 -0500 Subject: mascara:first-time - fix wording --- mascara/src/app/first-time/create-password-screen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index b1c2581a1..e5bfc1af4 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -68,11 +68,11 @@ class CreatePasswordScreen extends Component { />
MetaMask is a bridge that allows you to visit the distributed web - of tomorrow in your browser today. It allows you to run Ethereum dApps right in + of tomorrow in your browser today. It allows you to run Ethereum Apps right in your browser without running a full Ethereum node but still gives you the option to if you want to bring your own. - MetaMask includes a secure identity vault stored loacly on your machine, + MetaMask includes a secure identity vault stored locally on your machine, providing a user interface to manage your identities on different sites and sign blockchain transactions
-- cgit From 910c69f6553fa433853684a17a6ff5c6df570ade Mon Sep 17 00:00:00 2001 From: frankiebee Date: Thu, 2 Nov 2017 12:24:50 -0500 Subject: mascara - fix words and enviroment vars --- mascara/src/app/first-time/create-password-screen.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index e5bfc1af4..c852df9cf 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -67,14 +67,10 @@ class CreatePasswordScreen extends Component { height="225" />
- MetaMask is a bridge that allows you to visit the distributed web - of tomorrow in your browser today. It allows you to run Ethereum Apps right in - your browser without running a full Ethereum node but still gives - you the option to if you want to bring your own. - - MetaMask includes a secure identity vault stored locally on your machine, - providing a user interface to manage your identities on different sites - and sign blockchain transactions + MetaMask is a secure identity vault for Ethereum. +
+
+ It allows you to hold ether & tokens, and interact with decentralized applications.
-- cgit From a89b682dec350218b2d753d6cfb196f965acdde2 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 6 Nov 2017 12:48:58 -0500 Subject: mascara:create-password - use less words in metamask explanation --- mascara/src/app/first-time/create-password-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index c852df9cf..21d29d72b 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -58,7 +58,7 @@ class CreatePasswordScreen extends Component { ? : (
-

Warning This is Experemental software and is a Developer Alapha

+

Warning This is Experemental software and is a Developer BETA

Date: Tue, 5 Dec 2017 13:11:59 -0330 Subject: Merge branch 'master' into NewUI-flat-merge-with-master --- mascara/src/app/first-time/notice-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index 713f3f242..d09070a95 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -64,7 +64,7 @@ class NoticeScreen extends Component {
{title}
-- cgit From 3f17abd43b8d3d9c26c8130366ecfbf5fc3034fe Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 29 Dec 2017 10:37:37 -0800 Subject: Fix mascara first time flow button colors --- mascara/src/app/first-time/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 28aa3060a..2248c0438 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -75,7 +75,7 @@ .backup-phrase__tips { margin: 40px 0 !important; - width: initial !important; + width: initial !important; } .backup-phrase__confirm-secret, @@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover { padding: 14px 21px; appearance: none; -webkit-appearance: none; - -moz-appearance: none; + -moz-appearance: none; cursor: pointer; } @@ -540,10 +540,10 @@ button.backup-phrase__confirm-seed-option:hover { 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] { - background-color: rgba(247, 134, 28, 0.9); opacity: .6; } -- cgit From 41057a76c567a80f98ff17e5d7a24c9500c11e4c Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 11 Jan 2018 22:45:22 -0330 Subject: [NewUI] Build mascara with uglification and gzipping. (#2735) * Adds uglification and gzipping. * Build mascara with uglification and gzipping. * Remove gzipping from extension build. --- mascara/server/index.js | 3 +++ mascara/server/util.js | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'mascara') diff --git a/mascara/server/index.js b/mascara/server/index.js index 83f84f6d1..6fb1287cc 100644 --- a/mascara/server/index.js +++ b/mascara/server/index.js @@ -2,6 +2,7 @@ const path = require('path') const express = require('express') const createBundle = require('./util').createBundle const serveBundle = require('./util').serveBundle +const compression = require('compression') module.exports = createMetamascaraServer @@ -16,6 +17,8 @@ function createMetamascaraServer () { // serve bundles const server = express() + server.use(compression()) + // ui window serveBundle(server, '/ui.js', uiBundle) server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') })) diff --git a/mascara/server/util.js b/mascara/server/util.js index af2daddb9..f9692afb6 100644 --- a/mascara/server/util.js +++ b/mascara/server/util.js @@ -23,7 +23,9 @@ function createBundle (entryPoint) { cache: {}, packageCache: {}, plugin: [watchify], - }).transform('babelify') + }) + .transform('babelify') + .transform('uglifyify', { global: true }) bundler.on('update', bundle) bundle() -- cgit From e4895df953ac16012c1dfff08fda08b2f582154c Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 5 Feb 2018 12:39:33 -0800 Subject: Change styling of Import Account with Seed Phrease (#3182) --- .../src/app/first-time/create-password-screen.js | 2 +- .../app/first-time/import-seed-phrase-screen.js | 42 +++++++++++++--------- mascara/src/app/first-time/index.css | 29 ++++++++------- 3 files changed, 44 insertions(+), 29 deletions(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 21d29d72b..0b36c6815 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -58,7 +58,7 @@ class CreatePasswordScreen extends Component { ? : (
-

Warning This is Experemental software and is a Developer BETA

+

Warning: This is Experimental software and is a Developer BETA

Enter your secret twelve word phrase here to restore your vault.
-