REF: Use In-App browser on iOS

ios/Podfile.lock

@@ -359,6 +359,8 @@ PODS:
     - React
   - RNHandoff (0.0.3):
     - React
+  - RNInAppBrowser (3.4.0):
+    - React
   - RNLocalize (1.4.0):
     - React
   - RNQuickAction (0.3.13):
@@ -466,6 +468,7 @@ DEPENDENCIES:
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNHandoff (from `../node_modules/react-native-handoff`)
+  - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNQuickAction (from `../node_modules/react-native-quick-actions`)
   - RNRate (from `../node_modules/react-native-rate`)
@@ -602,6 +605,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNHandoff:
     :path: "../node_modules/react-native-handoff"
+  RNInAppBrowser:
+    :path: "../node_modules/react-native-inappbrowser-reborn"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
   RNQuickAction:
@@ -694,6 +699,7 @@ SPEC CHECKSUMS:
   RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
   RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
   RNHandoff: d3b0754cca3a6bcd9b25f544f733f7f033ccf5fa
+  RNInAppBrowser: 6097fbc6b09051b40a6a9ec22caf7af40b115ec0
   RNLocalize: fc27ee5878ce5a3af73873fb2d8e866e0d1e6d84
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNRate: 2b31dad120cd1b78e33c6034808561c386a3dddf

package-lock.json

@@ -15049,6 +15049,14 @@
       "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-2.3.3.tgz",
       "integrity": "sha512-i/7JDnxKkUGSbFY2i7YqFNn3ncJm1YlcrPKXrXmJ/YUElz8tHkuwknuqBd9QCJivMfHX41cmq4XvdBDwIOtO+A=="
     },
+    "react-native-inappbrowser-reborn": {
+      "version": "git+https://github.com/BlueWallet/react-native-inappbrowser.git#54ab29283b105b70496feb2e1edb4e002c4d9b3e",
+      "from": "git+https://github.com/BlueWallet/react-native-inappbrowser.git#v3.4.0",
+      "requires": {
+        "invariant": "^2.2.4",
+        "opencollective-postinstall": "^2.0.2"
+      }
+    },
     "react-native-iphone-x-helper": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",

package.json

@@ -122,6 +122,7 @@
     "react-native-handoff": "git+https://github.com/marcosrdz/react-native-handoff.git",
     "react-native-haptic-feedback": "1.10.0",
     "react-native-image-picker": "2.3.3",
+    "react-native-inappbrowser-reborn": "git+https://github.com/BlueWallet/react-native-inappbrowser.git#v3.4.0",
     "react-native-level-fs": "3.0.1",
     "react-native-linear-gradient": "2.5.6",
     "react-native-localize": "  1.4.0",

screen/wallets/buyBitcoin.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-import { StyleSheet, StatusBar, Linking } from 'react-native';
+import { StyleSheet, StatusBar } from 'react-native';
 import { BlueNavigationStyle, BlueLoading, SafeBlueArea } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 import { WebView } from 'react-native-webview';
-import { getSystemName } from 'react-native-device-info';
 import { AppStorage, LightningCustodianWallet, WatchOnlyWallet } from '../../class';
 const currency = require('../../blue_modules/currency');
 const BlueApp: AppStorage = require('../../BlueApp');
@@ -23,19 +22,15 @@ export default class BuyBitcoin extends Component {
     this.state = {
       isLoading: true,
       wallet,
-      address: '',
       uri: '',
     };
   }
 
-  async componentDidMount() {
-    console.log('buyBitcoin - componentDidMount');
-
+  static async generateURL(wallet) {
     let preferredCurrency = await currency.getPreferredCurrency();
     preferredCurrency = preferredCurrency.endPointKey;
 
     /**  @type {AbstractHDWallet|WatchOnlyWallet|LightningCustodianWallet}   */
-    const wallet = this.state.wallet;
 
     let address = '';
 
@@ -60,23 +55,24 @@ export default class BuyBitcoin extends Component {
       }
     }
 
-    const { safelloStateToken } = this.props.route.params;
-
     let uri = 'https://bluewallet.io/buy-bitcoin-redirect.html?address=' + address;
 
-    if (safelloStateToken) {
-      uri += '&safelloStateToken=' + safelloStateToken;
-    }
-
     if (preferredCurrency) {
       uri += '&currency=' + preferredCurrency;
     }
+    return uri;
+  }
 
-    if (getSystemName() === 'Mac OS X') {
-      Linking.openURL(uri).finally(() => this.props.navigation.goBack(null));
-    } else {
-      this.setState({ uri, isLoading: false, address });
+  async componentDidMount() {
+    console.log('buyBitcoin - componentDidMount');
+
+    let uri = await BuyBitcoin.generateURL(this.state.wallet);
+
+    const { safelloStateToken } = this.props.route.params;
+    if (safelloStateToken) {
+      uri += '&safelloStateToken=' + safelloStateToken;
     }
+    this.setState({ uri, isLoading: false });
   }
 
   render() {

screen/wallets/transactions.js

@@ -29,6 +29,7 @@ import {
   BlueWalletNavigationHeader,
   BlueAlertWalletExportReminder,
 } from '../../BlueComponents';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
 import WalletGradient from '../../class/wallet-gradient';
 import { Icon } from 'react-native-elements';
 import { LightningCustodianWallet, WatchOnlyWallet } from '../../class';
@@ -40,6 +41,7 @@ import { BlueCurrentTheme } from '../../components/themes';
 import ActionSheet from '../ActionSheet';
 import loc from '../../loc';
 import { getSystemName } from 'react-native-device-info';
+import BuyBitcoin from './buyBitcoin';
 const BlueApp = require('../../BlueApp');
 const EV = require('../../blue_modules/events');
 const BlueElectrum = require('../../blue_modules/BlueElectrum');
@@ -411,11 +413,7 @@ export default class WalletTransactions extends Component {
               hideChevron
               component={TouchableOpacity}
               onPress={a => {
-                this.setState({ isManageFundsModalVisible: false }, async () => {
-                  this.props.navigation.navigate('BuyBitcoin', {
-                    wallet: this.state.wallet,
-                  });
-                });
+                this.setState({ isManageFundsModalVisible: false }, this.navigateToBuyBitcoin);
               }}
               title={loc.lnd.refill_card}
             />
@@ -485,14 +483,7 @@ export default class WalletTransactions extends Component {
 
   renderSellFiat = () => {
     return (
-      <TouchableOpacity
-        onPress={() =>
-          this.props.navigation.navigate('BuyBitcoin', {
-            wallet: this.state.wallet,
-          })
-        }
-        style={styles.marketplaceButton2}
-      >
+      <TouchableOpacity onPress={this.navigateToBuyBitcoin} style={styles.marketplaceButton2}>
         <Text style={styles.marketpalceText1}>{loc.wallets.list_tap_here_to_buy}</Text>
       </TouchableOpacity>
     );
@@ -655,6 +646,27 @@ export default class WalletTransactions extends Component {
     }
   };
 
+  navigateToBuyBitcoin = async () => {
+    const uri = await BuyBitcoin.generateURL(this.state.wallet);
+    if (getSystemName() === 'Mac OS X') {
+      InAppBrowser.isAvailable()
+        .then(_value => InAppBrowser.open(uri, { dismissButtonStyle: 'done' }))
+        .catch(_error => Linking.openURL(uri));
+    } else if (Platform.OS === 'ios') {
+      InAppBrowser.isAvailable()
+        .then(_value => InAppBrowser.open(uri, { dismissButtonStyle: 'done' }))
+        .catch(_error =>
+          this.props.navigation.navigate('BuyBitcoin', {
+            wallet: this.state.wallet,
+          }),
+        );
+    } else {
+      this.props.navigation.navigate('BuyBitcoin', {
+        wallet: this.state.wallet,
+      });
+    }
+  };
+
   render() {
     const { navigate } = this.props.navigation;
     return (
@@ -722,14 +734,7 @@ export default class WalletTransactions extends Component {
                 {this.isLightning() && <Text style={styles.emptyTxsLightning}>{loc.wallets.list_empty_txs2_lightning}</Text>}
 
                 {!this.isLightning() && (
-                  <TouchableOpacity
-                    onPress={() =>
-                      this.props.navigation.navigate('BuyBitcoin', {
-                        wallet: this.state.wallet,
-                      })
-                    }
-                    style={styles.buyBitcoin}
-                  >
+                  <TouchableOpacity onPress={this.navigateToBuyBitcoin} style={styles.buyBitcoin}>
                     <Text style={styles.buyBitcoinText}>{loc.wallets.list_tap_here_to_buy}</Text>
                   </TouchableOpacity>
                 )}