+
+
+
+
+
+ )
+ }
+}
+
class SettingTextbox extends ImmutableComponent {
render () {
return
+ {this.props.groupedItem}
+
+
+ {
+ this.showBackButton
+ ?
+
+
+ )
+ }
+}
+
+class BatContribMatching extends React.Component {
+ render () {
+ return (
+
+
+ )
+ }
+}
+
+const styles = StyleSheet.create({
+ batScreen: {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ paddingLeft: '60px',
+ minHeight: addFundsDialogMinHeight,
+
+ '::before': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ content: '""',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'contain',
+ backgroundImage: `url(${batIcon})`,
+ width: '40px',
+ height: '40px'
+ }
+ },
+
+ batScreen__text: {
+ margin: '20px 0'
+ },
+
+ batScreen__text_small: {
+ fontSize: 'small'
+ }
+})
+
+module.exports = {
+ BatWelcomeScreen,
+ BatContribMatching
+}
diff --git a/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js
new file mode 100644
index 00000000000..be67948bce8
--- /dev/null
+++ b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Components
+const React = require('react')
+const {GroupedFormTextbox} = require('../../../../common/textbox')
+const ClipboardButton = require('../../../../common/clipboardButton')
+
+// Actions
+const appActions = require('../../../../../../../js/actions/appActions')
+
+// Styles
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('../../../../styles/global')
+const {addFundsDialogMinHeight} = require('../../../../styles/global').spacing
+const ethIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/ETH_icon.svg')
+const btcIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BTC_icon.svg')
+const ltcIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/LTC_icon.svg')
+const batIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BAT_icon.svg')
+
+class AddFundsWizardAddress extends React.Component {
+ constructor (props) {
+ super(props)
+ this.onCopy = this.onCopy.bind(this)
+ }
+
+ get currency () {
+ return this.props.currency
+ }
+
+ onCopy () {
+ if (!this.addressInputNode) {
+ return
+ }
+ appActions.clipboardTextCopied(this.addressInputNode.value)
+ }
+
+ get copyToClipboardButton () {
+ return (
+
+
+
+
+
+ )
+ }
+}
+
+const styles = StyleSheet.create({
+ wizardAddress: {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ paddingLeft: '60px',
+ minHeight: addFundsDialogMinHeight,
+
+ '::before': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ content: '""',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'contain',
+ width: '40px',
+ height: '40px'
+ }
+ },
+
+ wizardAddress_bat: {
+ '::before': {
+ backgroundImage: `url(${batIcon})`
+ }
+ },
+
+ wizardAddress_eth: {
+ '::before': {
+ backgroundImage: `url(${ethIcon})`
+ }
+ },
+
+ wizardAddress_btc: {
+ '::before': {
+ backgroundImage: `url(${btcIcon})`
+ }
+ },
+
+ wizardAddress_ltc: {
+ '::before': {
+ backgroundImage: `url(${ltcIcon})`
+ }
+ },
+
+ wizardAddress__main: {
+ display: 'flex',
+ flex: 1,
+ justifyContent: 'space-between',
+ margin: '15px 0'
+ },
+
+ wizardAddress__text_small: {
+ fontSize: 'small'
+ },
+
+ wizardAddress__inputBox: {
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ alignSelf: 'center',
+ justifyContent: 'space-between',
+ height: '120px'
+ },
+
+ wizardAddress__fancyDivider: {
+ display: 'flex',
+ width: '40px',
+ height: '100%',
+ whiteSpace: 'nowrap',
+ margin: '0 20px',
+ // new law: if something can be done in CSS, it will be done in CSS.
+ backgroundImage: 'linear-gradient(black 33%, rgba(255,255,255,0) 0%)',
+ backgroundPosition: 'center',
+ backgroundSize: '2px 6px',
+ backgroundRepeat: 'repeat-y'
+ },
+
+ wizardAddress__fancyDivider__text: {
+ display: 'flex',
+ background: 'white',
+ margin: 'auto',
+ padding: '8px',
+ color: '#000'
+ },
+
+ wizardAddress__qrCode: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ padding: '15px 0'
+ },
+
+ wizardAddress__qrCode__text: {
+ color: '#777',
+ margin: '5px 0'
+ },
+
+ wizardAddress__qrCode__image: {
+ maxWidth: '100px'
+ }
+})
+
+module.exports = AddFundsWizardAddress
diff --git a/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardMain.js b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardMain.js
new file mode 100644
index 00000000000..fe123209630
--- /dev/null
+++ b/app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardMain.js
@@ -0,0 +1,210 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Components
+const React = require('react')
+const BrowserButton = require('../../../../common/browserButton')
+
+// Actions
+const appActions = require('../../../../../../../js/actions/appActions')
+
+// Styles
+const {StyleSheet, css} = require('aphrodite')
+const {addFundsDialogMinHeight} = require('../../../../styles/global').spacing
+const walletIcon = require('../../../../../../extensions/brave/img/ledger/wallet_icon.svg')
+const ethIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/ETH_icon.svg')
+const btcIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BTC_icon.svg')
+const ltcIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/LTC_icon.svg')
+const batIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BAT_icon.svg')
+
+class AddFundsWizardMain extends React.Component {
+ constructor (props) {
+ super(props)
+ this.onClickETH = this.onClickETH.bind(this)
+ this.onClickBTC = this.onClickBTC.bind(this)
+ this.onClickLTC = this.onClickLTC.bind(this)
+ this.onClickBAT = this.onClickBAT.bind(this)
+ }
+
+ onClickETH () {
+ appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'eth')
+ }
+
+ onClickBTC () {
+ appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'btc')
+ }
+
+ onClickLTC () {
+ appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'ltc')
+ }
+
+ onClickBAT () {
+ appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'bat')
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+const styles = StyleSheet.create({
+ wizardMain: {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ paddingLeft: '60px',
+ minHeight: addFundsDialogMinHeight,
+
+ '::before': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ content: '""',
+ backgroundRepeat: 'no-repeat',
+ backgroundImage: `url(${walletIcon})`,
+ backgroundSize: 'contain',
+ width: '40px',
+ height: '40px'
+ }
+ },
+
+ wizardMain__text: {
+ margin: '20px 0'
+ },
+
+ wizardMain__text_bold: {
+ fontWeight: 600
+ },
+
+ wizardMain__text_small: {
+ fontSize: 'small'
+ },
+
+ // but this inside a pseudo-state
+ // otherwise you can't have a gradient background
+ wizardMain__currencyIcon: {
+ position: 'relative',
+ width: '100px',
+ height: '80px',
+
+ // our icon relies here
+ '::before': {
+ content: '""',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ bottom: 0,
+ right: 0,
+ margin: 'auto',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: 'contain',
+ width: '70%',
+ height: '70%'
+ },
+
+ // here's the currency abbr
+ // 'content' is defined per icon
+ '::after': {
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ margin: '5px',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ fontSize: 'xx-small'
+ }
+ },
+
+ wizardMain__currencyIcon_eth: {
+ '::before': {
+ backgroundImage: `url(${ethIcon})`
+ },
+
+ '::after': {
+ content: '"eth"'
+ }
+ },
+
+ wizardMain__currencyIcon_btc: {
+ '::before': {
+ backgroundImage: `url(${btcIcon})`
+ },
+
+ '::after': {
+ content: '"btc"'
+ }
+ },
+
+ wizardMain__currencyIcon_ltc: {
+ '::before': {
+ backgroundImage: `url(${ltcIcon})`
+ },
+
+ '::after': {
+ content: '"ltc"'
+ }
+ },
+
+ wizardMain__currencyIcon_bat: {
+ '::before': {
+ backgroundImage: `url(${batIcon})`
+ },
+
+ '::after': {
+ content: '"bat"'
+ }
+ }
+})
+
+module.exports = AddFundsWizardMain
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 2f1205b3a3c..9d1aa03c1e3 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -42,15 +42,24 @@ class EnabledContent extends ImmutableComponent {
? this.props.showOverlay.bind(this, 'addFunds')
: (ledgerData.get('creating') ? () => {} : this.createWallet())
- return
+
+ { this.addressInputNode = node }}
+ value={this.props.address}
+ placeholder=''
+ groupedItem={this.copyToClipboardButton}
+ groupedItemTitle='copyToClipboard'
+ />
+
+
+
+
+