Merge pull request #3344 from BlueWallet/electrumtoggle

REF: Use Switch for SSL Electrum port

ios/Podfile.lock

@@ -729,7 +729,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
   GCDWebServer: 2c156a56c8226e2d5c0c3f208a3621ccffbe3ce4
-  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: 3a3758ef5a008e762faec9c9d50a39842f26d124
   lottie-react-native: 4dff8fe8d10ddef9e7880e770080f4a56121397e

loc/en.json

@@ -259,8 +259,8 @@
     "electrum_connected_not": "Not Connected",
     "electrum_error_connect": "Can’t connect to the provided Electrum server",
     "electrum_host": "E.g. {example}",
-    "electrum_port": "TCP port, usually {example}",
-    "electrum_port_ssl": "SSL port, usually {example}",
+    "electrum_port": "Port, usually {example}",
+    "use_ssl": "Use SSL",
     "electrum_saved": "Your changes have been saved successfully. Restarting BlueWallet may be required for the changes to take effect.",
     "set_electrum_server_as_default": "Set {server} as the default Electrum server?",
     "set_lndhub_as_default": "Set {url} as the default LNDHub server?",

screen/settings/electrumSettings.js

@@ -12,6 +12,7 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
+  Switch,
 } from 'react-native';
 import DefaultPreference from 'react-native-default-preference';
 import RNWidgetCenter from 'react-native-widget-center';
@@ -46,6 +47,8 @@ export default class ElectrumSettings extends Component {
       serverHistory: [],
       config: {},
       server,
+      sslPort: '',
+      port: '',
     };
   }
 
@@ -59,7 +62,6 @@ export default class ElectrumSettings extends Component {
     const sslPort = await AsyncStorage.getItem(BlueElectrum.ELECTRUM_SSL_PORT);
     const serverHistoryStr = await AsyncStorage.getItem(BlueElectrum.ELECTRUM_SERVER_HISTORY);
     const serverHistory = JSON.parse(serverHistoryStr) || [];
-
     this.setState({
       isLoading: false,
       host,
@@ -231,6 +233,21 @@ export default class ElectrumSettings extends Component {
     });
   };
 
+  useSSLPortToggled = value => {
+    switch (value) {
+      case true:
+        this.setState(prevState => {
+          return { port: '', sslPort: prevState.port };
+        });
+        break;
+      case false:
+        this.setState(prevState => {
+          return { port: prevState.sslPort, sslPort: '' };
+        });
+        break;
+    }
+  };
+
   render() {
     const serverHistoryItems = this.state.serverHistory.map((server, i) => {
       return (
@@ -287,45 +304,38 @@ export default class ElectrumSettings extends Component {
                 />
               </View>
               <BlueSpacing20 />
-              <View style={styles.inputWrap}>
-                <TextInput
-                  placeholder={loc.formatString(loc.settings.electrum_port, { example: '50001' })}
-                  value={this.state.port}
-                  onChangeText={text => this.setState({ port: text.trim() })}
-                  numberOfLines={1}
-                  style={styles.inputText}
-                  editable={!this.state.isLoading}
-                  placeholderTextColor="#81868e"
-                  underlineColorAndroid="transparent"
-                  autoCorrect={false}
-                  autoCapitalize="none"
-                  keyboardType="number-pad"
-                  inputAccessoryViewID={BlueDismissKeyboardInputAccessory.InputAccessoryViewID}
-                  testID="PortInput"
-                  onFocus={() => this.setState({ isAndroidNumericKeyboardFocused: true })}
-                  onBlur={() => this.setState({ isAndroidNumericKeyboardFocused: false })}
-                />
+              <View style={styles.portWrap}>
+                <View style={styles.inputWrap}>
+                  <TextInput
+                    placeholder={loc.formatString(loc.settings.electrum_port, { example: '50001' })}
+                    value={this.state.sslPort?.trim() === '' || this.state.sslPort === null ? this.state.port : this.state.sslPort}
+                    onChangeText={text =>
+                      this.setState(prevState => {
+                        if (prevState.sslPort?.trim() === '') {
+                          return { port: text.trim(), sslPort: '' };
+                        } else {
+                          return { port: '', sslPort: text.trim() };
+                        }
+                      })
+                    }
+                    numberOfLines={1}
+                    style={styles.inputText}
+                    editable={!this.state.isLoading}
+                    placeholderTextColor="#81868e"
+                    underlineColorAndroid="transparent"
+                    autoCorrect={false}
+                    autoCapitalize="none"
+                    keyboardType="number-pad"
+                    inputAccessoryViewID={BlueDismissKeyboardInputAccessory.InputAccessoryViewID}
+                    testID="PortInput"
+                    onFocus={() => this.setState({ isAndroidNumericKeyboardFocused: true })}
+                    onBlur={() => this.setState({ isAndroidNumericKeyboardFocused: false })}
+                  />
+                </View>
+                <BlueText style={styles.usePort}>{loc.settings.use_ssl}</BlueText>
+                <Switch testID="SSLPortInput" value={this.state.sslPort?.trim() > 0} onValueChange={this.useSSLPortToggled} />
               </View>
               <BlueSpacing20 />
-              <View style={styles.inputWrap}>
-                <TextInput
-                  placeholder={loc.formatString(loc.settings.electrum_port_ssl, { example: '50002' })}
-                  value={this.state.sslPort}
-                  onChangeText={text => this.setState({ sslPort: text.trim() })}
-                  numberOfLines={1}
-                  style={styles.inputText}
-                  editable={!this.state.isLoading}
-                  autoCorrect={false}
-                  placeholderTextColor="#81868e"
-                  autoCapitalize="none"
-                  keyboardType="number-pad"
-                  underlineColorAndroid="transparent"
-                  inputAccessoryViewID={BlueDismissKeyboardInputAccessory.InputAccessoryViewID}
-                  testID="SSLPortInput"
-                  onFocus={() => this.setState({ isAndroidNumericKeyboardFocused: true })}
-                  onBlur={() => this.setState({ isAndroidNumericKeyboardFocused: false })}
-                />
-              </View>
 
               <View style={styles.serverAddTitle}>
                 <BlueText style={styles.explain}>{loc.settings.electrum_settings_explain}</BlueText>
@@ -438,6 +448,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     color: BlueCurrentTheme.colors.foregroundColor,
   },
+  usePort: {
+    textAlign: 'center',
+    color: BlueCurrentTheme.colors.foregroundColor,
+    marginHorizontal: 8,
+  },
   explain: {
     color: BlueCurrentTheme.colors.feeText,
     marginBottom: -24,
@@ -449,6 +464,7 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
   },
   inputWrap: {
+    flex: 1,
     flexDirection: 'row',
     borderColor: BlueCurrentTheme.colors.formBorder,
     borderBottomColor: BlueCurrentTheme.colors.formBorder,
@@ -460,6 +476,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 4,
   },
+  portWrap: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   inputText: {
     flex: 1,
     marginHorizontal: 8,

tests/e2e/bluewallet.spec.js

@@ -86,7 +86,6 @@ describe('BlueWallet UI Tests', () => {
     await element(by.id('ElectrumSettings')).tap();
     await element(by.id('HostInput')).replaceText('electrum.blockstream.info\n');
     await element(by.id('PortInput')).replaceText('50001\n');
-    await element(by.id('SSLPortInput')).replaceText('50002\n');
     await element(by.id('Save')).tap();
     await sup('OK');
     await element(by.text('OK')).tap();
@@ -95,7 +94,7 @@ describe('BlueWallet UI Tests', () => {
     await element(by.text('OK')).tap();
     await expect(element(by.id('HostInput'))).toHaveText('');
     await expect(element(by.id('PortInput'))).toHaveText('');
-    await expect(element(by.id('SSLPortInput'))).toHaveText('');
+    await expect(element(by.id('SSLPortInput'))).toHaveToggleValue(false);
     await device.pressBack();
 
     // network -> lightning