do not show coinbase for unsupported countries

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

@@ -67,7 +67,7 @@ ok=Ok
 notifications=Show payment 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
@@ -78,6 +78,7 @@ firstKey=Key 1
 secondKey=Key 2
 firstRecoveryKey=Recovery Key 1
 secondRecoveryKey=Recovery Key 2
+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

@@ -18,6 +18,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
@@ -300,11 +301,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'
@@ -319,6 +324,19 @@ class BitcoinDashboard extends ImmutableComponent {
     const countryCode = this.props.ledgerData.get('countryCode')
     return !(countryCode && countryCode !== 'US')
   }
+  get worldWidePanel () {
+    return <div className='panel'>
+      <div className='settingsPanelDivider'>
+        <span className='fa fa-credit-card' />
+        <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
+      </div>
+      <div className='settingsPanelDivider'>
+        <a target='_blank' className='browserButton primaryButton' href='https://www.buybitcoinworldwide.com/'>
+          buybitcoinworldwide.com
+        </a>
+      </div>
+    </div>
+  }
   get coinbasePanel () {
     if (this.canUseCoinbase) {
       return <div className='panel'>
@@ -348,9 +366,9 @@ class BitcoinDashboard extends ImmutableComponent {
   get exchangePanel () {
     const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
     const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
-    // Call coinbasePanel if we don't have the URL or Name
+    // Call worldWidePanel if we don't have the URL or Name
     if (!url || !name) {
-      return this.coinbasePanel
+      return this.worldWidePanel
     } else {
       return <div className='panel'>
         <div className='settingsPanelDivider'>
@@ -377,11 +395,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)
@@ -843,6 +865,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}
@@ -1114,7 +1144,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

@@ -882,8 +882,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;