ADD: General Settings

MainBottomTabs.js

@@ -10,6 +10,7 @@ import EncryptStorage from './screen/settings/encryptStorage';
 import PlausibleDeniability from './screen/plausibledeniability';
 import LightningSettings from './screen/settings/lightningSettings';
 import ElectrumSettings from './screen/settings/electrumSettings';
+import GeneralSettings from './screen/settings/GeneralSettings';
 import DefaultView from './screen/settings/defaultView';
 
 import WalletsList from './screen/wallets/list';
@@ -130,6 +131,10 @@ const WalletsStackNavigator = createStackNavigator(
       screen: EncryptStorage,
       path: 'EncryptStorage',
     },
+    GeneralSettings: {
+      screen: GeneralSettings,
+      path: 'GeneralSettings',
+    },
     PlausibleDeniability: {
       screen: PlausibleDeniability,
       path: 'PlausibleDeniability',

class/handoff.js

@@ -0,0 +1,24 @@
+import { Platform } from 'react-native';
+
+const BlueApp = require('../BlueApp');
+
+export default class HandoffSettings {
+  static STORAGEKEY = 'HandOff';
+
+  static async isHandoffUseEnabled() {
+    if (Platform.OS !== 'ios') {
+      return false;
+    }
+    try {
+      const enabledHandoff = await BlueApp.getItem(HandoffSettings.STORAGEKEY);
+      return !!enabledHandoff;
+    } catch (_e) {
+      await BlueApp.setItem(HandoffSettings.STORAGEKEY, '');
+      return false;
+    }
+  }
+
+  static async setHandoffUseEnabled(value) {
+    await BlueApp.setItem(HandoffSettings.STORAGEKEY, value === true && Platform.OS === 'ios' ? '1' : '');
+  }
+}

ios/Podfile.lock

@@ -210,6 +210,8 @@ PODS:
     - React
   - react-native-slider (2.0.8):
     - React
+  - react-native-tcp (3.3.2):
+    - React
   - react-native-viewpager (3.3.0):
     - React
   - react-native-webview (6.11.1):
@@ -288,8 +290,6 @@ PODS:
     - Sentry/Core (= 4.4.3)
   - Sentry/Core (4.4.3)
   - swift_qrcodejs (1.1.2)
-  - TcpSockets (3.3.2):
-    - React
   - ToolTipMenu (5.2.1):
     - React
   - Yoga (1.14.0)
@@ -321,6 +321,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
+  - react-native-tcp (from `../node_modules/react-native-tcp`)
   - "react-native-viewpager (from `../node_modules/@react-native-community/viewpager`)"
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -351,7 +352,6 @@ DEPENDENCIES:
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - RNWatch (from `../node_modules/react-native-watch-connectivity`)
-  - TcpSockets (from `../node_modules/react-native-tcp`)
   - ToolTipMenu (from `../node_modules/react-native-tooltip`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -410,6 +410,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-randombytes"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
+  react-native-tcp:
+    :path: "../node_modules/react-native-tcp"
   react-native-viewpager:
     :path: "../node_modules/@react-native-community/viewpager"
   react-native-webview:
@@ -468,8 +470,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-vector-icons"
   RNWatch:
     :path: "../node_modules/react-native-watch-connectivity"
-  TcpSockets:
-    :path: "../node_modules/react-native-tcp"
   ToolTipMenu:
     :path: "../node_modules/react-native-tooltip"
   Yoga:
@@ -502,6 +502,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: 3637d63fef7e32a230141ab4660d3ceb773c824f
   react-native-randombytes: 991545e6eaaf700b4ee384c291ef3d572e0b2ca8
   react-native-slider: b2f361499888302147205f17f6fffa921a7bda70
+  react-native-tcp: be8e119e631970aaeda7f6e3207f6b7be72d5eb8
   react-native-viewpager: 118e65d8c65c56fe48d12a35cdcf1fe7e027a366
   react-native-webview: f11ac6c8bcaba5b71ddda1c12a10c8ea059b080f
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
@@ -533,7 +534,6 @@ SPEC CHECKSUMS:
   RNWatch: a36ea17fac675b98b1d8cd41604af68cf1fa9a03
   Sentry: 14bdd673870e8cf64932b149fad5bbbf39a9b390
   swift_qrcodejs: 4d024fc98b0778b804ec6a5c810880fd092aec9d
-  TcpSockets: 8d839b9b14f6f344d98e4642ded13ab3112b462d
   ToolTipMenu: bdcaa0e888bcf44778a67fe34639b094352e904e
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

loc/en.js

@@ -195,7 +195,7 @@ module.exports = {
     language: 'Language',
     currency: 'Currency',
     advanced_options: 'Advanced Options',
-    enable_advanced_mode: 'Enable advanced mode',
+    enable_advanced_mode: 'Advanced mode',
   },
   plausibledeniability: {
     title: 'Plausible Deniability',

screen/settings/GeneralSettings.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Platform } from 'react-native';
+import { BlueLoading, BlueText, BlueSpacing20, BlueListItem, SafeBlueArea, BlueNavigationStyle, BlueCard } from '../../BlueComponents';
+import PropTypes from 'prop-types';
+import { AppStorage } from '../../class';
+import HandoffSettings from '../../class/handoff';
+
+let BlueApp: AppStorage = require('../../BlueApp');
+let loc = require('../../loc');
+
+const GeneralSettings = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAdancedModeEnabled, setIsAdancedModeEnabled] = useState(false);
+  const [isHandoffUseEnabled, setIsHandoffUseEnabled] = useState(false);
+
+  const onAdvancedModeSwitch = async value => {
+    await BlueApp.setIsAdancedModeEnabled(value);
+    setIsAdancedModeEnabled(value);
+  };
+
+  const onHandOffEnabledSwitch = async value => {
+    await HandoffSettings.setHandoffUseEnabled(value);
+    setIsHandoffUseEnabled(value);
+  };
+
+  useEffect(() => {
+    (async () => {
+      setIsAdancedModeEnabled(await BlueApp.isAdancedModeEnabled());
+      setIsHandoffUseEnabled(await HandoffSettings.isHandoffUseEnabled());
+      setIsLoading(false);
+    })();
+  });
+
+  return isLoading ? (
+    <BlueLoading />
+  ) : (
+    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+      <ScrollView>
+        <BlueCard>
+          {Platform.OS === 'ios' ? (
+            <>
+              <BlueListItem
+                hideChevron
+                title={'Continuity'}
+                switchButton
+                onSwitch={onHandOffEnabledSwitch}
+                switched={isHandoffUseEnabled}
+              />
+              <BlueCard>
+                <BlueText>
+                  When enabled, you will be able to view selected wallets, and transactions, using your other Apple iCloud connected
+                  devices.
+                </BlueText>
+              </BlueCard>
+              <BlueSpacing20 />
+            </>
+          ) : null}
+          <BlueListItem
+            hideChevron
+            title={loc.settings.enable_advanced_mode}
+            switchButton
+            onSwitch={onAdvancedModeSwitch}
+            switched={isAdancedModeEnabled}
+          />
+          <BlueCard>
+            <BlueText>
+              When enabled, you will see advanced options such as different wallet types and the ability to specify the LNDHub instance you
+              wish to connect to.
+            </BlueText>
+          </BlueCard>
+          <BlueSpacing20 />
+        </BlueCard>
+      </ScrollView>
+    </SafeBlueArea>
+  );
+};
+
+GeneralSettings.navigationOptions = () => ({
+  ...BlueNavigationStyle(),
+  title: 'General',
+});
+
+GeneralSettings.propTypes = {
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func,
+    popToTop: PropTypes.func,
+    goBack: PropTypes.func,
+  }),
+};
+
+export default GeneralSettings;

screen/settings/settings.js

@@ -1,14 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, View, Switch, TouchableOpacity } from 'react-native';
-import {
-  BlueText,
-  BlueNavigationStyle,
-  BlueCard,
-  BlueLoading,
-  SafeBlueArea,
-  BlueHeaderDefaultSub,
-  BlueListItem,
-} from '../../BlueComponents';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { BlueNavigationStyle, BlueLoading, SafeBlueArea, BlueHeaderDefaultSub, BlueListItem } from '../../BlueComponents';
 import { AppStorage } from '../../class';
 import { useNavigation } from 'react-navigation-hooks';
 const BlueApp: AppStorage = require('../../BlueApp');
@@ -16,32 +8,19 @@ const loc = require('../../loc');
 
 const Settings = () => {
   const [isLoading, setIsLoading] = useState(true);
-  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
-  const [advancedModeEnabled, setAdvancedModeEnabled] = useState(false);
   const { navigate } = useNavigation();
 
   useEffect(() => {
-    (async () => {
-      setAdvancedModeEnabled(await BlueApp.isAdancedModeEnabled());
-      setIsLoading(false);
-    })();
+    setIsLoading(false);
   });
 
-  const onAdvancedModeSwitch = async value => {
-    setAdvancedModeEnabled(value);
-    await BlueApp.setIsAdancedModeEnabled(value);
-  };
-
-  const onShowAdvancedOptions = () => {
-    setShowAdvancedOptions(!showAdvancedOptions);
-  };
-
   return isLoading ? (
     <BlueLoading />
   ) : (
     <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
       <BlueHeaderDefaultSub leftText={loc.settings.header} rightComponent={null} />
       <ScrollView>
+        <BlueListItem title={'General'} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} />
         {BlueApp.getWallets().length > 1 && (
           <BlueListItem component={TouchableOpacity} onPress={() => navigate('DefaultView')} title="On Launch" />
         )}
@@ -50,16 +29,6 @@ const Settings = () => {
         <BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} />
         <BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} />
         <BlueListItem title={'Electrum server'} component={TouchableOpacity} onPress={() => navigate('ElectrumSettings')} />
-        <BlueListItem title={loc.settings.advanced_options} component={TouchableOpacity} onPress={onShowAdvancedOptions} />
-        {showAdvancedOptions && (
-          <BlueCard>
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-              <BlueText>{loc.settings.enable_advanced_mode}</BlueText>
-              <Switch value={advancedModeEnabled} onValueChange={onAdvancedModeSwitch} />
-            </View>
-          </BlueCard>
-        )}
-
         <BlueListItem title={loc.settings.about} component={TouchableOpacity} onPress={() => navigate('About')} testID="AboutButton" />
       </ScrollView>
     </SafeBlueArea>

screen/wallets/transactions.js

@@ -31,9 +31,10 @@ import {
 import WalletGradient from '../../class/walletGradient';
 import { Icon } from 'react-native-elements';
 import { LightningCustodianWallet, WatchOnlyWallet } from '../../class';
-import Handoff from 'react-native-handoff';
 import Modal from 'react-native-modal';
 import NavigationService from '../../NavigationService';
+import HandoffSettings from '../../class/handoff';
+import Handoff from 'react-native-handoff';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
@@ -76,6 +77,7 @@ export default class WalletTransactions extends Component {
     const wallet = props.navigation.getParam('wallet');
     this.props.navigation.setParams({ wallet: wallet, isLoading: true });
     this.state = {
+      isHandOffUseEnabled: false,
       isLoading: true,
       isManageFundsModalVisible: false,
       showShowFlatListRefreshControl: false,
@@ -87,11 +89,13 @@ export default class WalletTransactions extends Component {
     };
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     this.props.navigation.setParams({ isLoading: false });
     this.interval = setInterval(() => {
       this.setState(prev => ({ timeElapsed: prev.timeElapsed + 1 }));
     }, 60000);
+    const isHandOffUseEnabled = await HandoffSettings.isHandoffUseEnabled();
+    this.setState({ isHandOffUseEnabled });
   }
 
   /**
@@ -458,7 +462,7 @@ export default class WalletTransactions extends Component {
     const { navigate } = this.props.navigation;
     return (
       <View style={{ flex: 1 }}>
-        {this.state.wallet.chain === Chain.ONCHAIN && (
+        {this.state.wallet.chain === Chain.ONCHAIN && this.state.isHandOffUseEnabled && (
           <Handoff
             title={`Bitcoin Wallet ${this.state.wallet.getLabel()}`}
             type="io.bluewallet.bluewallet"