Address feedback from design team

- remove contrib panel
- set wallet address as readonly
- set wallet adress as auto selected
- several strings change
- changed coins order in wizard
- small tweaks on design

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

@@ -6,8 +6,8 @@ add=Fund with debit/credit
 addFundsHeader=Add funds to your Brave Wallet
 uphold=All transactions are processed by Uphold.
 learnMore=Learn more...
-backWithArrow=‹ Back
-nextWithArrow=Next ›
+backWithArrow=⟨ Previous
+nextWithArrow=Next ⟩
 balance=Balance:
 helloBat=Hello, and thank you for using Brave Payments!
 helloBatText1=Brave Payments allows you to make anonymous, monthly
@@ -21,8 +21,10 @@ addFundsWizardMainHeader=Brave makes it easy to transfer funds from your existin
 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.
+addFundsWizardAddressHeader=Go to your external {{currencyName}} account and send a minimum of 5.00 USD in {{currency}} to your Brave wallet address below:
+addFundsWizardAddressInputNote=Note: we recommend starting with enough {{currency}} to cover your first contribution of {{funds}}.
+addFundsWizardAddressFooter=Your {{currency}} will be converted to BAT and appear in your Brave wallet in minutes.
+addFundsWizardAddressFooterBAT=Your additional BAT will appear in your Brave wallet after a few minutes.
 or=or
 qrCodeVersion=QR Code Version
 addFundsAlternate=Add funds to your Brave Wallet

app/renderer/components/common/textbox.js

@@ -38,6 +38,7 @@ class GroupedFormTextbox extends ImmutableComponent {
         <input
           ref={this.props.inputRef}
           type={this.props.type}
+          readOnly={this.props.readOnly}
           placeholder={this.props.placeholder}
           defaultValue={this.props.value}
           className={css(

app/renderer/components/preferences/payment/addFundsDialog/addFundsDialog.js

@@ -18,6 +18,10 @@ class AddFundsDialog extends React.Component {
     return this.props.addFundsDialog.get('currency')
   }
 
+  get funds () {
+    return this.props.funds
+  }
+
   get currencyQRCode () {
     const walletQR = this.props.walletQR
 
@@ -43,6 +47,7 @@ class AddFundsDialog extends React.Component {
       case 'addFundsWizardAddress':
         return (
           <AddFundsWizardAddress
+            funds={this.funds}
             currency={this.currency}
             qrCode={this.currencyQRCode}
             address={this.currencyAddress}

app/renderer/components/preferences/payment/addFundsDialog/addFundsDialogFooter.js

@@ -28,10 +28,12 @@ class AddFundsDialogFooter extends React.Component {
   onBack () {
     switch (this.currentPage) {
       case 'batContribMatching':
-        appActions.onChangeAddFundsDialogStep('batWelcomeScreen')
-        break
       case 'addFundsWizardMain':
-        appActions.onChangeAddFundsDialogStep('batContribMatching')
+        // TODO: add the below comment under 'batContribMatching'
+        // when it is publicly available
+        // appActions.onChangeAddFundsDialogStep('batContribMatching')
+        // break
+        appActions.onChangeAddFundsDialogStep('batWelcomeScreen')
         break
       case 'addFundsWizardAddress':
         appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
@@ -43,14 +45,20 @@ class AddFundsDialogFooter extends React.Component {
 
   onNext () {
     switch (this.currentPage) {
-      case 'batContribMatching':
+      // TODO: replace 'batWelcomeScreen' with 'batContribMatching'
+      // once latter is available
+      case 'batWelcomeScreen':
+      // case 'batContribMatching':
         appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
         break
       case 'addFundsWizardMain':
         appActions.onChangeAddFundsDialogStep('addFundsWizardAddress')
         break
       default:
-        appActions.onChangeAddFundsDialogStep('batContribMatching')
+        // TODO: enable again once 'batContribMatching' is available
+        // and remove the current
+        // appActions.onChangeAddFundsDialogStep('batContribMatching')
+        appActions.onChangeAddFundsDialogStep('addFundsWizardMain')
         break
     }
   }
@@ -66,7 +74,10 @@ class AddFundsDialogFooter extends React.Component {
   get showBackButton () {
     return (
       this.currentPage != null &&
-      this.currentPage !== 'batWelcomeScreen'
+      this.currentPage !== 'batWelcomeScreen' &&
+      // Should users be allowed to go back once in the wizard?
+      // for now they can't
+      this.currentPage !== 'addFundsWizardMain'
     )
   }
 

app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js

@@ -30,11 +30,18 @@ class AddFundsWizardAddress extends React.Component {
     return this.props.currency
   }
 
-  onCopy () {
-    if (!this.addressInputNode) {
-      return
+  get currencyName () {
+    switch (this.currency) {
+      case 'ETH':
+        return 'Ethereum'
+      case 'BTC':
+        return 'Bitcoin'
+      case 'LTC':
+        return 'Litecoin'
+      // defaults to BAT
+      default:
+        return this.currency
     }
-    appActions.clipboardTextCopied(this.addressInputNode.value)
   }
 
   get copyToClipboardButton () {
@@ -47,6 +54,28 @@ class AddFundsWizardAddress extends React.Component {
     )
   }
 
+  // Input note for BAT is different to avoid repetition
+  get footerNote () {
+    return this.currency === 'BAT'
+      ? 'addFundsWizardAddressFooterBAT'
+      : 'addFundsWizardAddressFooter'
+  }
+
+  onCopy () {
+    if (!this.addressInputNode) {
+      return
+    }
+    appActions.clipboardTextCopied(this.addressInputNode.value)
+  }
+
+  componentDidMount () {
+    if (!this.addressInputNode) {
+      return
+    }
+    this.addressInputNode.focus()
+    this.addressInputNode.select()
+  }
+
   render () {
     return (
       <div
@@ -57,16 +86,34 @@ class AddFundsWizardAddress extends React.Component {
           this.currency === 'LTC' && styles.wizardAddress_ltc,
           this.currency === 'BAT' && styles.wizardAddress_bat
       )}>
-        <header data-l10n-id='addFundsWizardAddressHeader' />
+        <header data-l10n-id='addFundsWizardAddressHeader'
+          data-l10n-args={JSON.stringify({
+            currencyName: this.currencyName,
+            currency: this.currency
+          } || {})}
+        />
         <div className={css(styles.wizardAddress__main)}>
           <main className={css(styles.wizardAddress__inputBox)}>
-            <GroupedFormTextbox type='text'
-              inputRef={(node) => { this.addressInputNode = node }}
-              value={this.props.address}
-              placeholder=''
-              groupedItem={this.copyToClipboardButton}
-              groupedItemTitle='copyToClipboard'
-            />
+            <div>
+              <GroupedFormTextbox readOnly
+                type='text'
+                inputRef={(node) => { this.addressInputNode = node }}
+                value={this.props.address}
+                groupedItem={this.copyToClipboardButton}
+                groupedItemTitle='copyToClipboard'
+              />
+              <p data-l10n-id='addFundsWizardAddressInputNote'
+                data-l10n-args={JSON.stringify({
+                  currency: this.currency,
+                  funds: this.props.funds
+                } || {})}
+                className={css(styles.wizardAddress__text_note)}
+              />
+              <p data-l10n-id={this.footerNote}
+                data-l10n-args={JSON.stringify({currency: this.currency} || {})}
+                className={css(styles.wizardAddress__text_note)}
+              />
+            </div>
             <div className={css(styles.wizardAddress__fancyDivider)}>
               <span data-l10n-id='or'
                 className={css(styles.wizardAddress__fancyDivider__text)}
@@ -84,9 +131,6 @@ class AddFundsWizardAddress extends React.Component {
             />
           </aside>
         </div>
-        <footer data-l10n-id='addFundsWizardAddressNote'
-          className={css(styles.wizardAddress__text_small)}
-        />
       </div>
     )
   }
@@ -144,6 +188,11 @@ const styles = StyleSheet.create({
     margin: '15px 0'
   },
 
+  wizardAddress__text_note: {
+    fontSize: 'small',
+    margin: '10px 0'
+  },
+
   wizardAddress__text_small: {
     fontSize: 'small'
   },

app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardMain.js

@@ -27,22 +27,22 @@ class AddFundsWizardMain extends React.Component {
     this.onClickBAT = this.onClickBAT.bind(this)
   }
 
-  onClickETH () {
-    appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'ETH')
-  }
-
   onClickBTC () {
     appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'BTC')
   }
 
-  onClickLTC () {
-    appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'LTC')
+  onClickETH () {
+    appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'ETH')
   }
 
   onClickBAT () {
     appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'BAT')
   }
 
+  onClickLTC () {
+    appActions.onChangeAddFundsDialogStep('addFundsWizardAddress', 'LTC')
+  }
+
   render () {
     return (
       <div data-test-id='addFundsWizardMain'
@@ -55,30 +55,30 @@ class AddFundsWizardMain extends React.Component {
               styles.wizardMain__text_bold
             )}
           />
-          <BrowserButton groupedItem secondaryColor
-            onClick={this.onClickETH}
-            custom={[
-              styles.wizardMain__currencyIcon,
-              styles.wizardMain__currencyIcon_eth
-            ]} />
           <BrowserButton groupedItem secondaryColor
             onClick={this.onClickBTC}
             custom={[
               styles.wizardMain__currencyIcon,
               styles.wizardMain__currencyIcon_btc
             ]} />
           <BrowserButton groupedItem secondaryColor
-            onClick={this.onClickLTC}
+            onClick={this.onClickETH}
             custom={[
               styles.wizardMain__currencyIcon,
-              styles.wizardMain__currencyIcon_ltc
+              styles.wizardMain__currencyIcon_eth
             ]} />
           <BrowserButton groupedItem secondaryColor
             onClick={this.onClickBAT}
             custom={[
               styles.wizardMain__currencyIcon,
               styles.wizardMain__currencyIcon_bat
             ]} />
+          <BrowserButton groupedItem secondaryColor
+            onClick={this.onClickLTC}
+            custom={[
+              styles.wizardMain__currencyIcon,
+              styles.wizardMain__currencyIcon_ltc
+            ]} />
         </div>
         <p>
           <span data-l10n-id='addFundsWizardMainReminder'
@@ -166,43 +166,43 @@ const styles = StyleSheet.create({
     }
   },
 
-  wizardMain__currencyIcon_eth: {
+  wizardMain__currencyIcon_btc: {
     '::before': {
-      backgroundImage: `url(${ethIcon})`
+      backgroundImage: `url(${btcIcon})`
     },
 
     '::after': {
-      content: '"eth"'
+      content: '"btc"'
     }
   },
 
-  wizardMain__currencyIcon_btc: {
+  wizardMain__currencyIcon_eth: {
     '::before': {
-      backgroundImage: `url(${btcIcon})`
+      backgroundImage: `url(${ethIcon})`
     },
 
     '::after': {
-      content: '"btc"'
+      content: '"eth"'
     }
   },
 
-  wizardMain__currencyIcon_ltc: {
+  wizardMain__currencyIcon_bat: {
     '::before': {
-      backgroundImage: `url(${ltcIcon})`
+      backgroundImage: `url(${batIcon})`
     },
 
     '::after': {
-      content: '"ltc"'
+      content: '"bat"'
     }
   },
 
-  wizardMain__currencyIcon_bat: {
+  wizardMain__currencyIcon_ltc: {
     '::before': {
-      backgroundImage: `url(${batIcon})`
+      backgroundImage: `url(${ltcIcon})`
     },
 
     '::after': {
-      content: '"bat"'
+      content: '"ltc"'
     }
   }
 })

app/renderer/components/preferences/paymentsTab.js

@@ -82,9 +82,11 @@ class PaymentsTab extends ImmutableComponent {
     const addresses = ledgerData.get('addresses') || Immutable.List()
     const walletQR = ledgerData.get('walletQR') || Immutable.List()
     const wizardData = ledgerData.get('addFunds') || Immutable.Map()
+    const funds = formatCurrentBalance(ledgerData)
 
     return <AddFundsDialog
       addFundsDialog={wizardData}
+      funds={funds}
       addresses={addresses}
       walletQR={walletQR}
     />