Adds addFounds wizard

Resolves #11193

app/browser/reducers/ledgerReducer.js

@@ -267,6 +267,15 @@ const ledgerReducer = (state, action, immutableAction) => {
  ledgerApi.addFoundClosed(state)
  break
  }
+ case appConstants.APP_ON_CHANGE_ADD_FUNDS_DIALOG_STEP:
+ {
+ // CC Nejc move this to a helper method as needed
+ state = state.mergeIn(['addFunds'], {
+ currentPage: action.get('page'),
+ currency: action.get('currency')
+ })
+ break
+ }
  case appConstants.APP_ON_WALLET_RECOVERY:
  {
  state = ledgerApi.onWalletRecovery(state, action.get('error'), action.get('result'))

app/browser/tabs.js

@@ -164,6 +164,7 @@ const updateAboutDetails = (tab, tabValue) => {
  allSiteSettings = allSiteSettings.mergeDeep(appState.get('temporarySiteSettings'))
  }
  const extensionsValue = appState.get('extensions')
+ const addFundsDialogState = appState.get('addFunds')
  const sync = appState.get('sync')
  const braveryDefaults = siteSettings.braveryDefaults(appState, appConfig)
  const history = aboutHistoryState.getHistory(appState)
@@ -200,6 +201,7 @@ const updateAboutDetails = (tab, tabValue) => {
  tab.send(messages.SYNC_UPDATED, sync.toJS())
  tab.send(messages.BRAVERY_DEFAULTS_UPDATED, braveryDefaults)
  tab.send(messages.EXTENSIONS_UPDATED, extensionsValue.toJS())
+ tab.send(messages.ADD_FUNDS_DIALOG_UPDATED, addFundsDialogState.toJS())
  } else if (location === 'about:bookmarks') {
  const bookmarksData = getBookmarksData(appState)
  if (bookmarksData.bookmarks) {

app/extensions/brave/locales/en-GB/preferences.properties

@@ -139,7 +139,7 @@ fundingDisabled1=Card funding is temporarily unavailable.
 fundingDisabled2=We apologize for the inconvenience.
 fundingDisabled3=Learn more...
 addFundsTitle=Add funds…
-addFunds=Three ways to add funds to your Brave Wallet
+addFundsHeader=Add funds to your Brave Wallet
 copy=Copy
 firstKey=Key 1
 secondKey=Key 2

app/extensions/brave/locales/en-US/preferences.properties

@@ -3,7 +3,28 @@ accountBalance=account balance
 accountBalanceConnectionError=Please check your Internet connection.
 actions=Actions
 add=Fund with debit/credit
-addFunds=Three ways to add funds to your Brave Wallet
+addFundsHeader=Add funds to your Brave Wallet
+uphold=All transactions are processed by Uphold.
+learnMore=Learn more...
+backWithArrow=‹ Back
+nextWithArrow=Next ›
+balance=Balance:
+helloBat=Hello, and thank you for using Brave Payments!
+helloBatText1=Brave Payments allows you to make anonymous, monthly
+contributions to the publishers you visit on the internet. 
+helloBatText2=Please note that <strong>your Brave Payments Wallet is unidirectional</strong>, and the money you transfer from outside accounts <strong>can not be retrieved or refunded</strong>. The wallet’s primary purpose is to send your contributions to publishers each month, based on your control and advisement.
+batContributionTitle=Introducing BAT Contribution Matching!
+batContributionText1=To say thanks to our early adopters, Brave is matching the next 5.00 USD of BATs that you add to your wallet.
+batContributionText2=Just transfer any amount from your crypto-currency wallet and we’ll match the next 5.00 USD.
+batContributionText3= Note: No need to do anything to participate after transferring funds. Your Brave wallet balance just increases by up to 5.00 USD. This promotion is available for a limited time
+addFundsWizardMainHeader=Brave makes it easy to transfer funds from your existing crypto-currency wallet to your Brave BAT Wallet.
+addFundsWizardMainOptions=Select one of the currencies below to begin a new transfer.
+addFundsWizardMainReminder=Reminder: The Brave Wallet is unidirectional and BAT flows to publisher sites. For more information about Brave Payments, please visit
+theFAQ=the FAQ.
+addFundsWizardAddressHeader=Go to your external Bitcoin account and send a minimum of 5.00 USD in bitcoin to your Brave wallet address below:
+addFundsWizardAddressNote=Note: Your BTC will be converted to BAT and appear in your Brave wallet in minutes.
+or=or
+qrCodeVersion=QR Code Version
 addFundsAlternate=Add funds to your Brave Wallet
 addFundsTitle=Add funds…
 advanced=Advanced

app/renderer/components/common/clipboardButton.js

@@ -36,6 +36,7 @@ class ClipboardButton extends React.Component {
  return <span className={css(styles.clipboardButton)}>
  <span className={css(
  styles.doneLabel,
+ this.props.bottomTooltip && styles.doneLabelBottom,
  this.state.visibleLabel && styles.visible
  )} onAnimationEnd={this.onAnimationEnd} data-l10n-id='copied' />
  <span
@@ -68,13 +69,22 @@ const animation = {
 
 const styles = StyleSheet.create({
  clipboardButton: {
+ position: 'relative',
  cursor: 'pointer'
  },
  doneLabel: {
  marginRight: '15px',
  opacity: 0,
  display: 'none'
  },
+ doneLabelBottom: {
+ position: 'absolute',
+ top: '35px',
+ right: '30px',
+ width: '-webkit-fill-available',
+ opacity: 0,
+ display: 'none'
+ },
  visible: {
  display: 'inline',
  animationName: animation,

app/renderer/components/common/modalOverlay.js

@@ -51,6 +51,7 @@ class ModalOverlay extends ImmutableComponent {
  get dialogContent () {
  var close = null
  var title = null
+ var subTitle = null
 
  const customDialogClassesStr = this.props.customDialogClasses ? this.props.customDialogClasses : ''
  const customDialogHeaderClassesStr = this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : ''
@@ -71,6 +72,18 @@ class ModalOverlay extends ImmutableComponent {
  [customTitleClassesStr]: true
  })} data-l10n-id={this.props.title}
  /> : null)
+ subTitle = (this.props.subTitle
+ ? <aside className={css(styles.dialog__header__subTitle)}>
+ <div className={cx({
+ [css(styles.dialog__header__subTitle_text)]: true,
+ [customTitleClassesStr]: true
+ })} data-l10n-id={this.props.subTitle}
+ />&nbsp;
+ <div className={css(
+ styles.dialog__header__subTitle_args
+ )} data-l10n-id={this.props.subTitleArgs}
+ />
+ </aside> : null)
  }
 
  return <section className={cx({
@@ -83,6 +96,7 @@ class ModalOverlay extends ImmutableComponent {
  [customDialogHeaderClassesStr]: true
  })}>
  {title}
+ {subTitle}
  {close}
  </header>
 
@@ -154,7 +168,10 @@ const styles = StyleSheet.create({
  },
 
  dialog__header: {
- padding: `25px ${globalStyles.spacing.modalDialogPaddingHorizontal}`
+ padding: `25px ${globalStyles.spacing.modalDialogPaddingHorizontal}`,
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center'
  },
  dialog__header__close: {
  display: 'inline-block',
@@ -180,6 +197,22 @@ const styles = StyleSheet.create({
  marginBottom: 0
  },
 
+ dialog__header__subTitle: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'center'
+ },
+
+ dialog__header__subTitle_text: {
+ fontSize: '14px',
+ color: globalStyles.color.darkGray
+ },
+
+ dialog__header__subTitle_args: {
+ fontSize: '14px',
+ color: globalStyles.color.braveOrange
+ },
+
  dialog__body__wrapper: {
  borderRadius: globalStyles.radius.borderRadiusModal
  },

app/renderer/components/common/sectionTitle.js

@@ -43,6 +43,7 @@ class AboutPageSectionTitle extends ImmutableComponent {
  styles.sectionTitle,
  styles.prefSectionTitle,
  styles.aboutPageSectionTitle,
+ this.props['data-canWrap'] && styles.aboutPageSectionTitle_canWrap,
  this.props['data-subTitle'] && styles.aboutPageSectionSubTitle
  )} {...this.props} />
  }
@@ -93,6 +94,9 @@ const styles = StyleSheet.create({
  display: 'block',
  whiteSpace: 'nowrap'
  },
+ aboutPageSectionTitle_canWrap: {
+ whiteSpace: 'normal'
+ },
  aboutPageSectionSubTitle: {
  fontSize: '16px',
  marginBottom: '12px',

app/renderer/components/common/textbox.js

@@ -31,6 +31,28 @@ class FormTextbox extends ImmutableComponent {
  }
 }
 
+class GroupedFormTextbox extends ImmutableComponent {
+ render () {
+ return (
+ <div className={css(styles.groupedFormTextBox)}>
+ <input
+ ref={this.props.inputRef}
+ type={this.props.type}
+ placeholder={this.props.placeholder}
+ defaultValue={this.props.value}
+ className={css(
+ styles.groupedFormTextBox__firstGroupedItem,
+ this.props.custom
+ )}
+ />
+ <div className={css(styles.groupedFormTextBox__lastGroupedItem)}>
+ {this.props.groupedItem}
+ </div>
+ </div>
+ )
+ }
+}
+
 class SettingTextbox extends ImmutableComponent {
  render () {
  return <FormTextbox data-isSettings='true' {...this.props} />
@@ -93,12 +115,48 @@ const styles = StyleSheet.create({
  },
  isDefault: {
  fontSize: globalStyles.spacing.textAreaFontSize // Issue #6851
+ },
+
+ groupedFormTextBox: {
+ display: 'flex',
+ flex: 1
+ },
+
+ groupedFormTextBox__firstGroupedItem: {
+ boxSizing: 'border-box',
+ background: '#fff',
+ borderTopLeftRadius: '4px',
+ borderBottomLeftRadius: '4px',
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.1)',
+ display: 'block',
+ border: 'solid 1px rgba(0, 0, 0, 0.2)',
+ fontSize: '14.5px',
+ height: '2.25em',
+ outline: 'none',
+ padding: '0.4em',
+ width: '100%',
+ color: 'rgb(68, 68, 68)'
+ },
+
+ groupedFormTextBox__lastGroupedItem: {
+ border: 'solid 1px rgba(0, 0, 0, 0.2)',
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ borderTopRightRadius: '4px',
+ borderBottomRightRadius: '4px',
+ width: '30px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
  }
 })
 
 module.exports = {
  Textbox,
  FormTextbox,
+ GroupedFormTextbox,
  SettingTextbox,
  RecoveryKeyTextbox,
  TextArea,