do not show coinbase for unsupported countries

Author: jkup

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

@@ -65,12 +65,13 @@ on=on
 notifications=notifications
 moneyAdd=Use your debit/credit card
 moneyAddSubTitle=No Bitcoin needed!
-outsideUSAPayment=Need to buy Bitcoin outside of the USA?
+outsideUSAPayment=Buy Bitcoin at our recommended source
 coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is only available for contributions of $5/month at the moment.
 add=Fund with debit/credit
 transferTime=Transfer may take up to 40 minutes
 addFundsTitle=Add funds…
 addFunds=Three ways to add funds to your Brave Wallet
+addFundsAlternate=Add funds to your Brave Wallet
 copyToClipboard=Copy to clipboard
 smartphoneTitle=Use your smartphone app to transfer Bitcoin
 displayQRCode=Display QR code

js/about/preferences.js

@@ -16,6 +16,7 @@ const appConfig = require('../constants/appConfig')
 const preferenceTabs = require('../constants/preferenceTabs')
 const messages = require('../constants/messages')
 const settings = require('../constants/settings')
+const coinbaseCountries = require('../constants/coinbaseCountries')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
 const aboutActions = require('./aboutActions')
 const getSetting = require('../settings').getSetting
@@ -299,11 +300,15 @@ class BitcoinDashboard extends ImmutableComponent {
     </div>
   }
   get qrcodeOverlayFooter () {
-    return <div>
-      <div id='coinbaseLogo' />
-      <div id='appstoreLogo' />
-      <div id='playstoreLogo' />
-    </div>
+    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return <div>
+        <div id='coinbaseLogo' />
+        <a href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' target='_blank' id='appstoreLogo' />
+        <a href='https://play.google.com/store/apps/details?id=com.coinbase.android' target='_blank' id='playstoreLogo' />
+      </div>
+    } else {
+      return null
+    }
   }
   get currency () {
     return this.props.ledgerData.get('currency') || 'USD'
@@ -376,11 +381,15 @@ class BitcoinDashboard extends ImmutableComponent {
     </div>
   }
   get panelFooter () {
-    return <div className='panelFooter'>
-      <div id='coinbaseLogo' />
-      <span className='coinbaseMessage' data-l10n-id='coinbaseMessage' />
-      <Button l10nId='done' className='pull-right whiteButton' onClick={this.props.hideParentOverlay} />
-    </div>
+    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return <div className='panelFooter'>
+        <div id='coinbaseLogo' />
+        <span className='coinbaseMessage' data-l10n-id='coinbaseMessage' />
+        <Button l10nId='done' className='pull-right whiteButton' onClick={this.props.hideParentOverlay} />
+      </div>
+    } else {
+      return null
+    }
   }
   copyToClipboard (text) {
     aboutActions.setClipboard(text)
@@ -806,6 +815,14 @@ class PaymentsTab extends ImmutableComponent {
       siteSettings={this.props.siteSettings} />
   }
 
+  get overlayTitle () {
+    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return 'addFunds'
+    } else {
+      return 'addFundsAlternate'
+    }
+  }
+
   get overlayContent () {
     return <BitcoinDashboard ledgerData={this.props.ledgerData}
       settings={this.props.settings}
@@ -940,7 +957,7 @@ class PaymentsTab extends ImmutableComponent {
     return <div id='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
-        ? <ModalOverlay title={'addFunds'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
+        ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
         : null
       }
       {

js/constants/coinbaseCountries.js

@@ -0,0 +1,41 @@
+/* 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/. */
+
+const coinbaseCountries = [
+  'AT',
+  'AU',
+  'BE',
+  'BG',
+  'CA',
+  'CH',
+  'CY',
+  'CZ',
+  'DK',
+  'ES',
+  'FI',
+  'FR',
+  'GB',
+  'GR',
+  'HR',
+  'HU',
+  'IE',
+  'IT',
+  'LI',
+  'LV',
+  'MC',
+  'MT',
+  'NL',
+  'NO',
+  'PL',
+  'PT',
+  'RO',
+  'SE',
+  'SG',
+  'SI',
+  'SK',
+  'SM',
+  'US'
+]
+
+module.exports = coinbaseCountries

less/about/preferences.less

@@ -894,8 +894,9 @@ div.nextPaymentSubmission {
       color: @darkGray;
       clear: both;
       font-weight: normal;
-      font-size: 13px;
+      font-size: 14px;
       font-style: italic;
+      line-height: 1.3em;
     }
     span {
       display: inline-block;

less/modalOverlay.less

@@ -64,7 +64,7 @@
       height: auto;
       margin: 100px auto 0 auto;
       background: white;
-      box-shadow: @buttonShadow;
+      box-shadow: @dialogShadow;
 
       button.close span {
         color: @gray;