Don't show long payments URL when bitcoin: handler is missing

Fix #3623

Auditors: @bbondy

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

@@ -45,7 +45,7 @@ paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next payment submission is {{reconcileDate}}.
 paymentHistoryOKText=OK
 bitcoinAddress=Your Brave wallet address is:
-bitcoinPaymentURL=Scan the QR code or copy this link:
+bitcoinPaymentURL=Scan the QR code or transfer {{amount}} to:
 bitcoinQR=Brave wallet QR code:
 paymentHistoryTitle=Your Payment History
 bitcoinCopyAddress=Copy Bitcoin address to clipboard

app/ledger.js

@@ -160,6 +160,7 @@ var boot = () => {
 
 if (ipc) {
   ipc.on(messages.CHECK_BITCOIN_HANDLER, () => {
+    // TODO: https://github.com/brave/browser-laptop/issues/3625
     if (typeof protocolHandler.isNavigatorProtocolHandled === 'function') {
       ledgerInfo.hasBitcoinHandler = protocolHandler.isNavigatorProtocolHandled('', 'bitcoin')
       appActions.updateLedgerInfo(underscore.omit(ledgerInfo, [ '_internal' ]))

js/about/preferences.js

@@ -263,10 +263,14 @@ class BitcoinDashboard extends ImmutableComponent {
   get overlayContent () {
     return <iframe src={this.ledgerData.get('buyURL')} />
   }
+  get currency () {
+    return this.props.ledgerData.get('currency') || 'USD'
+  }
+  get amount () {
+    return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
+  }
   get canUseCoinbase () {
-    // This assumes amount is USD
-    const amount = getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
-    return amount < 6
+    return this.currency === 'USD' && this.amount < 6
   }
   get coinbasePanel () {
     if (this.canUseCoinbase) {
@@ -314,24 +318,24 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='panel'>
           <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
           {
-            this.ledgerData.get('address') && this.ledgerData.get('paymentURL')
+            this.ledgerData.get('address')
               ? <div>
                 <img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
                 {
-                  this.ledgerData.get('hasBitcoinHandler')
+                  this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
                     ? <div>
                       <a href={this.ledgerData.get('paymentURL')} target='_blank'>
                         <Button l10nId='bitcoinVisitAccount' className='primaryButton' />
                       </a>
                       <div data-l10n-id='bitcoinAddress' className='labelText' />
-                      <span className='fa fa-clipboard settingsListCopy alt' title='Copy to clipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
-                      <span className='smallText'>{this.ledgerData.get('address')}</span>
                     </div>
                     : <div>
-                      <div data-l10n-id='bitcoinPaymentURL' className='labelText' />
-                      <span id='bitcoinPaymentURL' title='Copy to clipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('paymentURL'))}>{this.ledgerData.get('paymentURL')}</span>
+                      <div data-l10n-id='bitcoinPaymentURL'
+                        data-l10n-args={JSON.stringify({amount: `${this.amount} ${this.currency}`})} className='labelText' />
                     </div>
                 }
+                <span className='fa fa-clipboard settingsListCopy alt' title='Copy to clipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
+                <span className='smallText'>{this.ledgerData.get('address')}</span>
               </div>
             : <div data-l10n-id='bitcoinWalletNotAvailable' />
           }